@exxatdesignux/ui 0.2.19 → 0.3.0

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

@@ -1,12 +1,24 @@
 import dynamic from "next/dynamic"
 import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-import { DashboardLoadingBody } from "@/components/templates/page-loading-shell"
+import { Skeleton } from "@/components/ui/skeleton"
 import { DASHBOARD_METRICS, DASHBOARD_INSIGHT } from "@/lib/mock/dashboard"
 
 const DashboardTabs = dynamic(
   () => import("@/components/dashboard-tabs").then(m => ({ default: m.DashboardTabs })),
   {
-    loading: () => <DashboardLoadingBody />,
+    loading: () => (
+      <div className="flex flex-col gap-4 p-4 md:p-6" aria-busy="true" aria-label="Loading dashboard">
+        <Skeleton className="h-9 w-56 max-w-full" />
+        <Skeleton className="h-11 w-full max-w-xl" />
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <Skeleton className="h-24 rounded-xl" />
+          <Skeleton className="h-24 rounded-xl" />
+          <Skeleton className="h-24 rounded-xl" />
+          <Skeleton className="h-24 rounded-xl" />
+        </div>
+        <Skeleton className="min-h-[320px] w-full rounded-xl" />
+      </div>
+    ),
   },
 )
 

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

@@ -4,10 +4,8 @@ import { Button } from "@/components/ui/button"
 
 const LINKS = [
   { href: "/dashboard", label: "Dashboard", description: "Metrics, charts, and layout patterns." },
-  { href: "/data-list", label: "List hub", description: "Table, list, board, and dashboard views on shared state." },
   { 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: "/examples/focused-workflow", label: "Focused workflow", description: "Empty, step wizard, and sidebar section layouts for large forms." },
   { href: "/settings", label: "Settings", description: "Appearance, tours, and shell preferences." },
   { href: "/help", label: "Help", description: "Support and documentation entry points." },
 ] as const

package/template/app/(app)/layout.tsx

@@ -1,6 +1,10 @@
 import { cookies } from "next/headers"
-import { AppSidebar }   from "@/components/app-sidebar"
-import { SidebarShell } from "@/components/sidebar-shell"
+import {
+  AppSidebar,
+  SidebarShell,
+  SecondaryPanelProvider,
+  SecondaryPanel,
+} from "@/components/sidebar"
 import {
   SIDEBAR_STATE_COOKIE_NAME,
   sidebarDefaultOpenFromCookie,
@@ -8,7 +12,7 @@ import {
 import { DashboardViewProvider } from "@/contexts/dashboard-view-context"
 import { ChartVariantProvider }  from "@/contexts/chart-variant-context"
 import { AskLeoProvider, AskLeoSidebar } from "@/components/ask-leo-sidebar"
-import { SecondaryPanelProvider, SecondaryPanel } from "@/components/secondary-panel"
+import { KeyMetricsAskLeoBridge } from "@/components/key-metrics-ask-leo-bridge"
 import { SystemBannerProvider } from "@/contexts/system-banner-context"
 import { SystemBannerSlot } from "@/components/system-banner-slot"
 import { CommandMenu } from "@/components/command-menu"
@@ -37,6 +41,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     <DashboardViewProvider>
     <ChartVariantProvider>
     <AskLeoProvider>
+    <KeyMetricsAskLeoBridge>
     <SystemBannerProvider>
     <CommandMenuProvider value={commandMenuConfig}>
 
@@ -46,7 +51,14 @@ export default async function AppLayout({ children }: { children: React.ReactNod
       <SystemBannerSlot />
 
       {/* Sidebar + content row — flex-1 min-h-0 below min-h-svh shell; SidebarInset self-stretch + PrimaryPageTemplate flex-1 fills viewport when page body is short. */}
-      <div className="flex min-h-0 w-full flex-1 items-stretch has-data-[variant=inset]:bg-sidebar">
+      {/* suppressHydrationWarning: the Cursor IDE browser preview injects a
+          `data-cursor-ref` attribute on this layout root before React hydrates.
+          Scoped to this element's own attributes only. See companion comment
+          in components/templates/nested-secondary-panel-shell.tsx. */}
+      <div
+        className="flex min-h-0 w-full flex-1 items-stretch has-data-[variant=inset]:bg-sidebar"
+        suppressHydrationWarning
+      >
         <SecondaryPanelProvider>
           <AppSidebar variant="inset" />
           <SecondaryPanel />
@@ -57,6 +69,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     </SidebarShell>
     </CommandMenuProvider>
     </SystemBannerProvider>
+    </KeyMetricsAskLeoBridge>
     </AskLeoProvider>
     </ChartVariantProvider>
     </DashboardViewProvider>

package/template/app/(app)/loading.tsx

@@ -1 +1,18 @@
-export { AppRouteLoading as default } from "@/components/app-route-loading"
+import { Skeleton } from "@/components/ui/skeleton"
+
+/**
+ * Default loading UI for app routes (sidebar chrome stays; main column shows this fallback).
+ */
+export default function AppRouteLoading() {
+  return (
+    <div
+      className="flex flex-col gap-4 p-6 md:p-8"
+      aria-busy="true"
+      aria-label="Loading page"
+    >
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-32 w-full max-w-3xl" />
+      <Skeleton className="h-64 w-full" />
+    </div>
+  )
+}

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

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

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 import { usePathname } from "next/navigation"
 
-import { useSecondaryPanel } from "@/components/secondary-panel"
+import { useSecondaryPanel } from "@/components/sidebar"
 import {
   QUESTION_BANK_ENTRY_PATH,
   QUESTION_BANK_HUB_FIND_PATH,

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

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

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

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

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

@@ -1,14 +1,16 @@
 /**
- * `/question-bank/new` — full-page authoring composer.
+ * `/question-bank/new` — focused authoring page for a new question.
  *
- * Pattern: `FocusedWorkflowPageTemplate` + `NewQuestionComposer` (single column).
- * Folder pre-selection: `?folderId=<id>` from a folder-scoped library link.
+ * The composer (`NewQuestionComposer`) owns the `NewFocusTemplate` (form-inspector
+ * variant) underneath. This route file is intentionally thin so the same composer
+ * can be mounted from other entry points (deep-link, command palette).
+ *
+ * Folder pre-selection: callers may pass `?folderId=<id>` so users dropped into
+ * the composer from a folder-scoped library land with that folder pre-selected
+ * in the metadata rail.
  */
 
 import { NewQuestionComposer } from "@/components/new-question-composer"
-import { SidebarAutoCollapse } from "@/components/sidebar-auto-collapse"
-import { FocusedWorkflowPageTemplate } from "@/components/templates/focused-workflow-page-template"
-import { FocusedWorkflowSingleColumn } from "@/components/templates/focused-workflow-layouts"
 import {
   DEFAULT_QUESTION_BANK_FOLDERS,
   type QuestionBankFolder,
@@ -32,19 +34,12 @@ export default async function NewQuestionPage({ searchParams }: NewQuestionPageP
   const draftQuestionId = generateDraftQuestionId()
 
   return (
-    <FocusedWorkflowPageTemplate
-      beforeSiteHeader={<SidebarAutoCollapse />}
-      siteHeader={{ back }}
-      maxWidth="lg"
-    >
-      <FocusedWorkflowSingleColumn>
-        <NewQuestionComposer
-          draftQuestionId={draftQuestionId}
-          defaultFolderId={defaultFolderId}
-          backHref={back.href}
-          folders={folders}
-        />
-      </FocusedWorkflowSingleColumn>
-    </FocusedWorkflowPageTemplate>
+    <NewQuestionComposer
+      draftQuestionId={draftQuestionId}
+      defaultFolderId={defaultFolderId}
+      backHref={back.href}
+      backLabel={back.label}
+      folders={folders}
+    />
   )
 }

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

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

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

@@ -1,16 +1,17 @@
+import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
 import { SettingsClient } from "@/components/settings-client"
-import { FocusedWorkflowPageTemplate } from "@/components/templates/focused-workflow-page-template"
 
 export default function SettingsPage() {
   return (
-    <FocusedWorkflowPageTemplate
-      maxWidth="lg"
+    <PrimaryPageTemplate
+      maxWidthClassName="max-w-3xl"
+      contentClassName="px-8 pt-10 pb-32"
       siteHeader={{
         breadcrumbs: [{ label: "Dashboard", href: "/dashboard" }],
         title: "Settings",
       }}
     >
       <SettingsClient />
-    </FocusedWorkflowPageTemplate>
+    </PrimaryPageTemplate>
   )
 }

package/template/app/globals.css

@@ -1,22 +1,20 @@
 /* ==========================================================================
-   EXXAT DESIGN SYSTEM — app globals (entry)
-   Tokens live in packages/ui/src/tokens/*.css (imported below).
+   EXXAT DESIGN SYSTEM — apps/web globals.css
+   ------------------------------------------------------------------
+   Canonical theme tokens, custom variants, and base-layer styles
+   live in `@exxatdesignux/ui/globals.css`. Edits should land there
+   (the package CSS is the source of truth); this file only declares
+   the Tailwind `@source` so the consumer's location is honoured.
+
+   Workspace dev: `@source` points at the package's `src/` directly so
+   the IDE / Turbopack pick up new utility usages without a rebuild.
+   The `sync-template-from-web.mjs` script rewrites this path to
+   `../node_modules/@exxatdesignux/ui/src` for the npm starter.
+
+   Standard: WCAG 2.1 Level AA
    ========================================================================== */
 
-@import "tailwindcss";
-@import "tw-animate-css";
+@import "@exxatdesignux/ui/globals.css";
 
 /* Ensure Tailwind scans the shared UI package for utility classes (repo-relative — stable with pnpm + Turbopack). */
 @source "../node_modules/@exxatdesignux/ui/src";
-
-/* RTL layout direction support */
-@custom-variant dark (&:is(.dark *));
-
-/* High-contrast variant — in-app High or Windows (JSON) contrast */
-@custom-variant hc (&:is([data-contrast="high"] *, [data-contrast="windows"] *));
-
-@import "../../../packages/ui/src/tokens/tailwind-bridge.css";
-@import "../../../packages/ui/src/tokens/base.css";
-@import "../../../packages/ui/src/tokens/themes.css";
-@import "../../../packages/ui/src/tokens/high-contrast.css";
-@import "../../../packages/ui/src/tokens/layers.css";

package/template/components/ask-leo-sidebar.tsx

@@ -267,6 +267,10 @@ export function AskLeoSidebar() {
     <aside
       aria-label="Ask Leo — AI assistant"
       data-state={open ? "open" : "closed"}
+      // Cursor IDE browser preview injects `data-cursor-ref` here before
+      // hydration — see commentary in NestedSecondaryPanelShell. Suppression
+      // is scoped to this element's own attributes only.
+      suppressHydrationWarning
       className={cn(
         "flex flex-col overflow-hidden",
         isMobile
@@ -277,7 +281,7 @@ export function AskLeoSidebar() {
           : cn(
               "transition-[width,margin,opacity] duration-200 ease-linear",
               open
-                ? "relative w-64 md:w-80 shrink-0 self-start m-2 mx-2 min-h-0 h-[min(calc(100dvh-2rem),800px)] overflow-hidden rounded-xl border border-sidebar-border/80 shadow-[0_18px_48px_-16px_rgba(15,23,42,0.2),0_8px_20px_-10px_rgba(15,23,42,0.12)] ring-1 ring-sidebar-border dark:shadow-[0_22px_56px_-12px_rgba(0,0,0,0.5),0_10px_28px_-12px_rgba(0,0,0,0.35)] md:sticky md:top-2 md:ml-0 md:h-[calc(100dvh-1.25rem)]"
+                ? "relative w-64 md:w-80 shrink-0 self-start m-2 mx-2 min-h-0 h-[min(calc(100dvh-2rem),800px)] overflow-hidden rounded-xl border border-sidebar-border/80 shadow-[0_18px_48px_-16px_rgba(15,23,42,0.2),0_8px_20px_-10px_rgba(15,23,42,0.12)] ring-1 ring-sidebar-border dark:shadow-[0_22px_56px_-12px_rgba(0,0,0,0.5),0_10px_28px_-12px_rgba(0,0,0,0.35)] md:sticky md:top-2 md:ms-0 md:h-[calc(100dvh-1.25rem)]"
                 : "h-0 min-h-0 shrink overflow-hidden border-0 p-0 m-0 min-w-0 w-0 max-w-0 opacity-0 pointer-events-none",
             )
       )}

package/template/components/brand-color-picker.tsx

@@ -194,7 +194,7 @@ export function BrandColorPicker({
               <p className="truncate text-xs font-medium text-foreground">
                 {matchedAnchor?.familyLabel ?? "Custom color"}
               </p>
-              <p className="truncate font-mono text-[10px] uppercase text-muted-foreground">
+              <p className="truncate font-mono text-[11px] uppercase text-muted-foreground">
                 {matchedAnchor?.hex ?? value?.trim() ?? "—"}
               </p>
             </div>
@@ -287,7 +287,7 @@ export function BrandColorPicker({
                   </span>
                   <span
                     className={cn(
-                      "max-w-full truncate text-[10px] leading-none text-muted-foreground",
+                      "max-w-full truncate text-[11px] leading-none text-muted-foreground",
                       selected && "text-foreground",
                     )}
                   >

package/template/components/charts-overview.tsx

@@ -1145,7 +1145,7 @@ function DonutChartContent({ data = donutDataAll }: { data?: typeof donutDataAll
               <div key={d.name} className="flex items-center gap-1.5">
                 <span className="h-2.5 w-2.5 rounded-full shrink-0" style={{ background: d.fill }} />
                 <span className="text-muted-foreground">{donutCfg[d.name]?.label}</span>
-                <span className="ml-auto font-medium tabular-nums">
+                <span className="ms-auto font-medium tabular-nums">
                   {Math.round(d.value / total * 100)}%
                 </span>
               </div>

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

@@ -0,0 +1,142 @@
+"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

@@ -0,0 +1,92 @@
+"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

@@ -0,0 +1,89 @@
+"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>
+      )}
+    />
+  )
+}