@exxatdesignux/ui 0.3.0 → 0.4.0

package/template/lib/mock/navigation.tsx

@@ -8,10 +8,10 @@ import type * as React from "react"
 import { logoDevUrl } from "@/lib/logo-dev"
 import { stockPortraitUrl } from "@/lib/stock-portrait"
 import {
-  QUESTION_BANK_ENTRY_PATH,
-  QUESTION_BANK_HUB_FIND_PATH,
-  QUESTION_BANK_LIBRARY_PATH,
-} from "@/lib/question-bank-nav"
+  LIBRARY_ENTRY_PATH,
+  LIBRARY_HUB_FIND_PATH,
+  LIBRARY_ALL_PATH,
+} from "@/lib/library-nav"
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -93,39 +93,32 @@ export const NAV_PRIMARY: NavLinkItem[] = [
     iconActive: <i className="fa-solid fa-grid-2" aria-hidden="true" />,
   },
   {
-    key: "examples",
-    title: "Patterns",
-    url: "/examples",
-    icon:       <i className="fa-light fa-layer-group" aria-hidden="true" />,
-    iconActive: <i className="fa-solid fa-layer-group" aria-hidden="true" />,
-  },
-  {
-    key: "question-bank",
-    title: "Question bank",
-    url: QUESTION_BANK_ENTRY_PATH,
+    key: "library",
+    title: "Library",
+    url: LIBRARY_ENTRY_PATH,
     icon:       <i className="fa-light fa-books" aria-hidden="true" />,
     iconActive: <i className="fa-solid fa-books" aria-hidden="true" />,
-    secondaryPanel: "question-bank",
-    primaryHubChildKey: "question-bank-hub",
+    secondaryPanel: "library",
+    primaryHubChildKey: "library-hub",
     children: [
       {
-        key: "question-bank-hub",
-        title: "Question hub",
-        url: QUESTION_BANK_ENTRY_PATH,
+        key: "library-hub",
+        title: "Library home",
+        url: LIBRARY_ENTRY_PATH,
         icon:       <i className="fa-light fa-sparkles" aria-hidden="true" />,
         iconActive: <i className="fa-solid fa-sparkles" aria-hidden="true" />,
       },
       {
-        key: "question-bank-search",
+        key: "library-search",
         title: "Search",
-        url: QUESTION_BANK_HUB_FIND_PATH,
+        url: LIBRARY_HUB_FIND_PATH,
         icon:       <i className="fa-light fa-magnifying-glass" aria-hidden="true" />,
         iconActive: <i className="fa-solid fa-magnifying-glass" aria-hidden="true" />,
       },
       {
-        key: "question-bank-library",
-        title: "Library",
-        url: QUESTION_BANK_LIBRARY_PATH,
+        key: "library-all",
+        title: "All items",
+        url: LIBRARY_ALL_PATH,
         icon:       <i className="fa-light fa-table-list" aria-hidden="true" />,
         iconActive: <i className="fa-solid fa-table-list" aria-hidden="true" />,
       },
@@ -141,10 +134,23 @@ export const NAV_DOCUMENTS: NavLinkItem[] = [
   {
     key: "tokens",
     title: "Tokens & themes",
-    /** Same page as Settings — disambiguate active state via `#appearance` (see `isNavActive`). */
-    url: "/settings#appearance",
+    /** Dedicated route (was previously /settings#appearance — split out so the nav target
+     *  is bookmarkable and there's no active-state collision with Settings). */
+    url: "/tokens-themes",
     icon:       <i className="fa-light fa-palette" aria-hidden="true" />,
     iconActive: <i className="fa-solid fa-palette" aria-hidden="true" />,
+    /** Opens the `tokens` secondary panel — categories live in the rail, not in view tabs.
+     *  `useAutoPanel("tokens")` inside the hub also collapses the main sidebar
+     *  (`secondary-panel.tsx#openPanel`) per the Library library pattern. */
+    secondaryPanel: "tokens",
+  },
+  {
+    key: "columns",
+    title: "Column types",
+    /** DataTable column-pattern showcase — every cell renderer the DS supports. */
+    url: "/columns",
+    icon:       <i className="fa-light fa-table-columns" aria-hidden="true" />,
+    iconActive: <i className="fa-solid fa-table-columns" aria-hidden="true" />,
   },
   {
     key: "more",

package/template/lib/table-state-lifecycle.ts

@@ -388,7 +388,7 @@ export function schedulePageSave(namespace: string, payload: PersistedPageV1): v
 // ─────────────────────────────────────────────────────────────────────────────
 
 export interface UseTableStateLifecycleOptions<TExtras extends Record<string, unknown> | void = void> {
-  /** Storage namespace, e.g. `"placements"`, `"team"`, `"question-bank"`. */
+  /** Storage namespace, e.g. `"placements"`, `"team"`, `"library"`. */
   namespace: string
   /**
    * Sub-key per lifecycle tab. A hub with only one lifecycle should pass a

package/template/next.config.mjs

@@ -168,10 +168,13 @@ const nextConfig = {
   },
   async redirects() {
     return [
-      { source: "/rotations", destination: "/examples", permanent: false },
-      { source: "/compliance", destination: "/examples", permanent: false },
-      { source: "/sites/all", destination: "/examples", permanent: false },
-      { source: "/sites/all/:path*", destination: "/examples", permanent: false },
+      // Legacy demo routes (placements, rotations, compliance, sites) were removed.
+      // Redirect anything pointing at them to Dashboard rather than 404.
+      { source: "/rotations", destination: "/dashboard", permanent: false },
+      { source: "/compliance", destination: "/dashboard", permanent: false },
+      { source: "/sites/all", destination: "/dashboard", permanent: false },
+      { source: "/sites/all/:path*", destination: "/dashboard", permanent: false },
+      { source: "/examples", destination: "/dashboard", permanent: false },
     ]
   },
 }

package/consumer-extras/cursor-rules/exxat-question-bank-hub-header.mdc

@@ -1,28 +0,0 @@
----
-description: Question bank library — folder-scoped hub header More menu must expose Customize folder; sheet on hub client
-globs: apps/web/components/question-bank-*.tsx, packages/ui/template/components/question-bank-*.tsx
-alwaysApply: false
----
-
-# Exxat DS — Question bank hub header (folder scope)
-
-When the question bank library URL is **scoped to a folder** (`parseQuestionBankNav` → **`scope === "folder"`** and **`folderId`** set), users are effectively on a **“folder page”**: the hub title matches that folder, and **global** actions belong in the **`QuestionBankPageHeader`** **⋯ More** menu — not only on per-row or per-tile overflow menus inside a single view tab.
-
-**Pattern doc:** **`apps/web/docs/question-bank-hub-header-pattern.md`**. **Handbook:** **`apps/web/AGENTS.md` §4.6** (folder-scoped hub chrome).
-
-## MUST
-
-1. **`QuestionBankPageHeader`** — When **`navState.scope === "folder"`** and **`navState.folderId`** resolves to a row in **`folders`**, pass **`onCustomizeFolder`** so **⋯ More** includes **Customize folder** ( **`fa-wand-magic-sparkles`** + label **Customize folder** ), placed after **Invite people** (collaboration variant) and before **Export**.
-2. **Hub client** — Mount **`QuestionBankNewFolderSheet`** on the **hub client** (e.g. **`QuestionBankClient`**) next to **`ListPageTemplate`**, driven by local **`open` / `customizingFolder`** state opened from **`onCustomizeFolder`**. **MUST NOT** rely on **`QuestionBankTable`** alone to host the sheet when some view branches (**table**, **list**, **board**, **dashboard**) do not render that sheet — users would lose **Customize folder** on those tabs.
-3. **`onCreated`** — On save, **`setFolders`** (or equivalent) **maps** the scoped folder **`id`** to updated **`name`**, **`icon`**, **`colorKey`** — same contract as **`QuestionBankTable`** panel/tree customize handlers.
-
-## MUST NOT
-
-- Omit **Customize folder** from the header **⋯** when the URL is folder-scoped, expecting users to find it only on secondary-nav tree rows or OS-folder tiles.
-- Mount **only** one customize sheet inside **`QuestionBankTable`** without a **client-level** sheet when the hub uses **`ListPageTemplate`** view tabs that omit that table subtree.
-
-## See also
-
-- **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`** — URL scope + secondary panel.
-- **`.cursor/rules/exxat-collaboration-access.mdc`** — **`variant="collaboration"`** header + **⋯** invite pattern.
-- **`lib/question-bank-nav.ts`** — **`parseQuestionBankNav`**, **`QuestionBankNavState`**.

package/template/app/(app)/examples/page.tsx

@@ -1,41 +0,0 @@
-import Link from "next/link"
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-import { Button } from "@/components/ui/button"
-
-const LINKS = [
-  { href: "/dashboard", label: "Dashboard", description: "Metrics, charts, and layout patterns." },
-  { href: "/question-bank", label: "Question bank", description: "Discovery hub for browsing folders, recents, and AI-assisted create/import flows." },
-  { href: "/question-bank/library", label: "Question library", description: "Folders, OS folder view, panel, and tree demos on mock items." },
-  { href: "/settings", label: "Settings", description: "Appearance, tours, and shell preferences." },
-  { href: "/help", label: "Help", description: "Support and documentation entry points." },
-] as const
-
-export default function ExamplesPage() {
-  return (
-    <PrimaryPageTemplate
-      siteHeader={{ title: "Patterns" }}
-      maxWidthClassName="max-w-3xl"
-      contentClassName="px-4 lg:px-6 py-8"
-      bodyClassName="overflow-y-auto"
-    >
-      <p className="text-sm text-muted-foreground mb-6">
-        This workspace ships neutral chrome so you can reuse layouts, data views, and tokens as a design system.
-      </p>
-      <ul className="flex flex-col gap-3" role="list">
-        {LINKS.map((item) => (
-          <li key={item.href}>
-            <Button variant="outline" className="h-auto w-full justify-start gap-3 py-4 px-4" asChild>
-              <Link href={item.href}>
-                <span className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left">
-                  <span className="font-medium text-foreground">{item.label}</span>
-                  <span className="text-xs font-normal text-muted-foreground">{item.description}</span>
-                </span>
-                <i className="fa-light fa-arrow-right shrink-0 text-muted-foreground" aria-hidden="true" />
-              </Link>
-            </Button>
-          </li>
-        ))}
-      </ul>
-    </PrimaryPageTemplate>
-  )
-}

package/template/app/(app)/question-bank/find/page.tsx

@@ -1,12 +0,0 @@
-import { Suspense } from "react"
-
-import { QuestionBankClient } from "@/components/question-bank-client"
-
-/** Discovery hub composer results — same hub chrome as the library, distinct from `/question-bank/list`. */
-export default function QuestionBankHubFindPage() {
-  return (
-    <Suspense fallback={null}>
-      <QuestionBankClient />
-    </Suspense>
-  )
-}

package/template/app/(app)/question-bank/library/page.tsx

@@ -1,11 +0,0 @@
-import { Suspense } from "react"
-
-import { QuestionBankClient } from "@/components/question-bank-client"
-
-export default function QuestionBankLibraryPage() {
-  return (
-    <Suspense fallback={null}>
-      <QuestionBankClient />
-    </Suspense>
-  )
-}

package/template/app/(app)/question-bank/list/page.tsx

@@ -1,12 +0,0 @@
-import { Suspense } from "react"
-
-import { QuestionBankClient } from "@/components/question-bank-client"
-
-/** Question bank list surface — same hub as `/question-bank/library`, optimized for `?q=` search landings. */
-export default function QuestionBankListPage() {
-  return (
-    <Suspense fallback={null}>
-      <QuestionBankClient />
-    </Suspense>
-  )
-}

package/template/app/(app)/question-bank/page.tsx

@@ -1,11 +0,0 @@
-import { Suspense } from "react"
-
-import { QuestionBankHubClient } from "@/components/question-bank-hub-client"
-
-export default function QuestionBankHubPage() {
-  return (
-    <Suspense fallback={null}>
-      <QuestionBankHubClient />
-    </Suspense>
-  )
-}

package/template/components/compliance-board-view.tsx

@@ -1,142 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { initialsFromDisplayName } from "@/lib/initials-from-name"
-import {
-  COMPLIANCE_STATUS_BADGE_CLASS,
-  COMPLIANCE_STATUS_ICON,
-  COMPLIANCE_STATUS_LABEL,
-} from "@/lib/list-status-badges"
-import type { ComplianceItem } from "@/lib/mock/compliance"
-import { BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
-import {
-  ListPageBoardCard,
-  ListPageBoardCardAvatar,
-  ListPageBoardCardBadgeRow,
-  ListPageBoardCardBody,
-  ListPageBoardCardHeader,
-  ListPageBoardCardTitleRow,
-} from "@/components/data-views/list-page-board-card"
-import {
-  ListPageBoardTemplate,
-  type ListPageBoardColumnDef,
-} from "@/components/data-views/list-page-board-template"
-
-const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"
-
-const STATUS_BOARD_COLUMNS: ListPageBoardColumnDef<ComplianceItem>[] = [
-  {
-    id: "compliant",
-    label: "Compliant",
-    description: "On track",
-    filter: r => r.status === "compliant",
-  },
-  {
-    id: "due_soon",
-    label: "Due soon",
-    description: "Within window",
-    filter: r => r.status === "due_soon",
-  },
-  {
-    id: "overdue",
-    label: "Overdue",
-    description: "Action required",
-    filter: r => r.status === "overdue",
-  },
-  {
-    id: "pending",
-    label: "Pending",
-    description: "Not started",
-    filter: r => r.status === "pending",
-  },
-]
-
-function categoryBoardColumns(rows: ComplianceItem[]): {
-  columns: ListPageBoardColumnDef<ComplianceItem>[]
-  badgeMap: Record<string, string>
-} {
-  const labels = [...new Set(rows.map(r => r.category))].sort((a, b) => a.localeCompare(b))
-  const columns: ListPageBoardColumnDef<ComplianceItem>[] = labels.map(label => ({
-    id: `category:${label}`,
-    label,
-    filter: (r: ComplianceItem) => r.category === label,
-  }))
-  const badgeMap = Object.fromEntries(labels.map(l => [`category:${l}`, NEUTRAL_COUNT_BADGE]))
-  return { columns, badgeMap }
-}
-
-function useComplianceBoardModel(rows: ComplianceItem[], groupByColumnKey: string) {
-  return React.useMemo(() => {
-    if (groupByColumnKey === "category") {
-      const { columns, badgeMap } = categoryBoardColumns(rows)
-      return { columns, badgeMap }
-    }
-    return {
-      columns: STATUS_BOARD_COLUMNS,
-      badgeMap: COMPLIANCE_STATUS_BADGE_CLASS as Record<string, string>,
-    }
-  }, [rows, groupByColumnKey])
-}
-
-function ComplianceBoardCard({
-  row,
-  onRowActivate,
-}: {
-  row: ComplianceItem
-  onRowActivate?: (row: ComplianceItem) => void
-}) {
-  const ownerInitials = initialsFromDisplayName(row.owner)
-  return (
-    <ListPageBoardCard className="w-full" onClick={onRowActivate ? () => onRowActivate(row) : undefined}>
-      <ListPageBoardCardHeader>
-        <ListPageBoardCardTitleRow
-          title={row.title}
-          titleClassName="line-clamp-2"
-          trailing={<ListPageBoardCardAvatar initials={ownerInitials} />}
-        />
-        <ListPageBoardCardBadgeRow>
-          <ListHubStatusBadge
-            surface="board"
-            label={COMPLIANCE_STATUS_LABEL[row.status]}
-            tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
-            icon={COMPLIANCE_STATUS_ICON[row.status]}
-          />
-        </ListPageBoardCardBadgeRow>
-        <ListPageBoardCardBody>
-          <BoardCardTwoLineBlock iconClass="fa-tag" line1={row.category} line2={`Due ${row.dueDate}`} />
-          <BoardCardTwoLineBlock iconClass="fa-user" line1={row.owner} line2="Owner" />
-        </ListPageBoardCardBody>
-      </ListPageBoardCardHeader>
-    </ListPageBoardCard>
-  )
-}
-
-export const COMPLIANCE_BOARD_GROUP_OPTIONS = [
-  { key: "status", label: "Status" },
-  { key: "category", label: "Category" },
-] as const
-
-export function ComplianceBoardView({
-  rows,
-  groupByColumnKey,
-  onRowActivate,
-}: {
-  rows: ComplianceItem[]
-  groupByColumnKey: string
-  onRowActivate?: (row: ComplianceItem) => void
-}) {
-  const key = groupByColumnKey === "category" ? "category" : "status"
-  const { columns, badgeMap } = useComplianceBoardModel(rows, key)
-
-  return (
-    <ListPageBoardTemplate
-      columns={columns}
-      rows={rows}
-      getRowKey={r => r.id}
-      columnCountBadgeClassName={badgeMap}
-      emptyColumnLabel="No items"
-      renderCard={row => <ComplianceBoardCard row={row} onRowActivate={onRowActivate} />}
-    />
-  )
-}

package/template/components/compliance-client.tsx

@@ -1,92 +0,0 @@
-"use client"
-
-/**
- * Compliance list page — `ListPageTemplate` + `ComplianceTable`; view types from `@/components/data-views`.
- */
-
-import * as React from "react"
-import {
-  ListPageTemplate,
-  type ViewTab,
-  dataListViewIcon,
-  type DataListViewType,
-} from "@/components/data-views"
-import { CompliancePageHeader } from "@/components/compliance-page-header"
-import { ComplianceTable, type ComplianceTableHandle } from "@/components/compliance-table"
-import { KeyMetrics } from "@/components/key-metrics"
-import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
-import { COMPLIANCE_ITEMS } from "@/lib/mock/compliance"
-import { complianceKpiInsight, complianceKpiMetrics } from "@/lib/mock/compliance-kpi"
-
-const DEFAULT_TABS: ViewTab[] = [
-  {
-    id: "obligations",
-    label: "Obligations",
-    viewType: "table",
-    icon: "fa-table",
-    filterId: "all",
-  },
-]
-
-export function ComplianceClient() {
-  const [exportOpen, setExportOpen] = React.useState(false)
-  const [showMetrics, setShowMetrics] = React.useState(true)
-  const tableRef = React.useRef<ComplianceTableHandle>(null)
-  const count = COMPLIANCE_ITEMS.length
-
-  const metrics = React.useMemo(() => complianceKpiMetrics(COMPLIANCE_ITEMS), [])
-  const insight = React.useMemo(() => complianceKpiInsight(COMPLIANCE_ITEMS), [])
-
-  useAskLeoPageContext(
-    React.useMemo(
-      () => ({
-        title: "Compliance",
-        description: `${count} obligations tracked on this hub.`,
-        suggestions: [
-          "What’s due this week?",
-          "Summarize open items by student",
-        ],
-      }),
-      [count],
-    ),
-  )
-
-  return (
-    <ListPageTemplate
-      defaultTabs={DEFAULT_TABS}
-      getTabCount={() => count}
-      tablePropertiesRef={tableRef}
-      header={
-        <CompliancePageHeader
-          itemCount={count}
-          onAddReview={() => {}}
-          onExport={() => setExportOpen(true)}
-          showMetrics={showMetrics}
-          onToggleMetrics={() => setShowMetrics(v => !v)}
-        />
-      }
-      metrics={
-        <KeyMetrics
-          variant="flat"
-          metrics={metrics}
-          insight={insight}
-          showHeader={false}
-          metricsSingleRow
-        />
-      }
-      showMetrics={showMetrics}
-      exportOpen={exportOpen}
-      onExportOpenChange={setExportOpen}
-      exportTotalRows={count}
-      renderContent={(tab, updateTab) => (
-        <ComplianceTable
-          key={tab.id}
-          ref={tableRef}
-          items={COMPLIANCE_ITEMS}
-          view={tab.viewType}
-          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
-        />
-      )}
-    />
-  )
-}

package/template/components/compliance-page-header.tsx

@@ -1,89 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/components/ui/button"
-import { PageHeader } from "@/components/page-header"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Tip } from "@/components/ui/tip"
-
-export interface CompliancePageHeaderProps {
-  itemCount: number
-  onAddReview: () => void
-  onExport: () => void
-  showMetrics: boolean
-  onToggleMetrics: () => void
-  showTitleBlock?: boolean
-}
-
-export function CompliancePageHeader({
-  itemCount,
-  onAddReview,
-  onExport,
-  showMetrics,
-  onToggleMetrics,
-  showTitleBlock = true,
-}: CompliancePageHeaderProps) {
-  const [moreOpen, setMoreOpen] = React.useState(false)
-  const countLine = `${itemCount} ${itemCount === 1 ? "item" : "items"} · Last updated now`
-
-  return (
-    <PageHeader
-      title="Compliance"
-      subtitle={countLine}
-      showTitleBlock={showTitleBlock}
-      actions={(
-        <div className="flex items-center gap-2" role="group" aria-label="Compliance actions">
-          <Tip side="bottom" label="Schedule a review (demo)">
-            <Button type="button" size="lg" onClick={onAddReview}>
-              <i className="fa-light fa-calendar-check" aria-hidden="true" />
-              New review
-            </Button>
-          </Tip>
-          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
-            <Tip side="bottom" label="More actions">
-              <DropdownMenuTrigger asChild>
-                <Button
-                  type="button"
-                  size="lg"
-                  variant="outline"
-                  className="aspect-square px-0"
-                  aria-label="More actions"
-                >
-                  <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
-                </Button>
-              </DropdownMenuTrigger>
-            </Tip>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
-                onSelect={() => {
-                  window.setTimeout(() => onExport(), 0)
-                }}
-              >
-                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-                Export
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onSelect={() => {
-                  window.setTimeout(() => onToggleMetrics(), 0)
-                }}
-              >
-                <i
-                  className={`fa-light ${showMetrics ? "fa-eye-slash" : "fa-eye"}`}
-                  aria-hidden="true"
-                />
-                {showMetrics ? "Hide metric section" : "Show metric section"}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      )}
-    />
-  )
-}