@exxatdesignux/ui 0.2.19 → 0.4.0

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

@@ -1,6 +1,18 @@
-import { DashboardLoadingFallback } from "@/components/templates/page-loading-shell"
+import { Skeleton } from "@/components/ui/skeleton"
 
-/** Dashboard route — same shell as `app/(app)/loading` dashboard variant. */
+/** Route-level fallback while the dashboard shell + tabs chunk load. */
 export default function DashboardLoading() {
-  return <DashboardLoadingFallback />
+  return (
+    <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)/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)/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)/library/all/page.tsx

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

package/template/app/(app)/library/find/page.tsx

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

package/template/app/(app)/{question-bank → library}/layout.tsx

@@ -3,26 +3,26 @@
 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,
-  QUESTION_BANK_LIST_PATH,
-} from "@/lib/question-bank-nav"
+  LIBRARY_ENTRY_PATH,
+  LIBRARY_HUB_FIND_PATH,
+  LIBRARY_LIST_PATH,
+} from "@/lib/library-nav"
 
-/** Full-page focused flows under `/question-bank/*` that suppress the secondary panel. */
-const QUESTION_BANK_FOCUSED_FLOW_PATHS: readonly string[] = ["/question-bank/new"]
+/** Full-page focused flows under `/library/*` that suppress the secondary panel. */
+const LIBRARY_FOCUSED_FLOW_PATHS: readonly string[] = ["/library/new"]
 
-function isQuestionBankFocusedFlow(pathname: string): boolean {
-  return QUESTION_BANK_FOCUSED_FLOW_PATHS.some(p => pathname === p || pathname.startsWith(`${p}/`))
+function isLibraryFocusedFlow(pathname: string): boolean {
+  return LIBRARY_FOCUSED_FLOW_PATHS.some(p => pathname === p || pathname.startsWith(`${p}/`))
 }
 
 /**
  * Keeps the nested secondary panel open across library navigations.
- * **Question hub** (`/question-bank`), **Search** (`/find`, `/list`), and
+ * **Question hub** (`/library`), **Search** (`/find`, `/list`), and
  * focused authoring routes (`/new`) stay full-width — no secondary rail.
  */
-export default function QuestionBankLayout({ children }: { children: React.ReactNode }) {
+export default function LibraryLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname()
   const { openPanel, closePanel, activePanel } = useSecondaryPanel()
   const closePanelRef = React.useRef(closePanel)
@@ -36,7 +36,7 @@ export default function QuestionBankLayout({ children }: { children: React.React
     openPanelRef.current = openPanel
   })
 
-  /** Leaving `/question-bank/*` entirely — close nested panel without forcing primary sidebar open (⌘B / cookie). */
+  /** Leaving `/library/*` entirely — close nested panel without forcing primary sidebar open (⌘B / cookie). */
   React.useEffect(() => {
     return () => {
       closePanelRef.current({ mainSidebar: "leave" })
@@ -46,18 +46,18 @@ export default function QuestionBankLayout({ children }: { children: React.React
   /** Only react to route changes — refs carry latest open/close. */
   React.useEffect(() => {
     const isDiscoveryHubRoot =
-      pathname === QUESTION_BANK_ENTRY_PATH || pathname === `${QUESTION_BANK_ENTRY_PATH}/`
+      pathname === LIBRARY_ENTRY_PATH || pathname === `${LIBRARY_ENTRY_PATH}/`
 
     const isDedicatedSearchSurface =
-      pathname === QUESTION_BANK_HUB_FIND_PATH || pathname === QUESTION_BANK_LIST_PATH
+      pathname === LIBRARY_HUB_FIND_PATH || pathname === LIBRARY_LIST_PATH
 
-    if (isDiscoveryHubRoot || isDedicatedSearchSurface || isQuestionBankFocusedFlow(pathname)) {
+    if (isDiscoveryHubRoot || isDedicatedSearchSurface || isLibraryFocusedFlow(pathname)) {
       closePanelRef.current({ mainSidebar: "leave" })
       return undefined
     }
 
-    if (activePanel !== "question-bank") {
-      openPanelRef.current("question-bank")
+    if (activePanel !== "library") {
+      openPanelRef.current("library")
     }
     return undefined
   }, [pathname, activePanel])

package/template/app/(app)/library/list/page.tsx

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

package/template/app/(app)/library/new/page.tsx

@@ -0,0 +1,45 @@
+/**
+ * `/library/new` — focused authoring page for a new question.
+ *
+ * The composer (`NewLibraryItemForm`) 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 { NewLibraryItemForm } from "@/components/new-library-item-form"
+import {
+  DEFAULT_LIBRARY_FOLDERS,
+  type LibraryFolder,
+} from "@/lib/mock/library-folders"
+import { generateDraftQuestionId } from "@/lib/library-authoring"
+import { newQuestionBackNav } from "@/lib/library-nav"
+
+interface NewQuestionPageProps {
+  searchParams: Promise<{ folderId?: string }>
+}
+
+export default async function NewQuestionPage({ searchParams }: NewQuestionPageProps) {
+  const params = await searchParams
+  const folders: LibraryFolder[] = DEFAULT_LIBRARY_FOLDERS
+
+  const requested = typeof params.folderId === "string" ? params.folderId : undefined
+  const matched = requested ? folders.find(f => f.id === requested) : undefined
+  const defaultFolderId = matched?.id
+
+  const back = newQuestionBackNav(folders, defaultFolderId)
+  const draftQuestionId = generateDraftQuestionId()
+
+  return (
+    <NewLibraryItemForm
+      draftQuestionId={draftQuestionId}
+      defaultFolderId={defaultFolderId}
+      backHref={back.href}
+      backLabel={back.label}
+      folders={folders}
+    />
+  )
+}

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

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

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)/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/(app)/tokens-themes/page.tsx

@@ -0,0 +1,11 @@
+import { Suspense } from "react"
+
+import { TokensThemesClient } from "@/components/tokens-themes-client"
+
+export default function TokensThemesPage() {
+  return (
+    <Suspense fallback={null}>
+      <TokensThemesClient />
+    </Suspense>
+  )
+}

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-composer.tsx

@@ -43,7 +43,7 @@ export interface AskLeoComposerProps {
    */
   animatedPlaceholderMaxLines?: 1 | 2
   /**
-   * `attachments` — plus menu + file picker (default). `ai-mark` — Leo-style icon only (e.g. question bank hub).
+   * `attachments` — plus menu + file picker (default). `ai-mark` — Leo-style icon only (e.g. library hub).
    */
   leadingSlot?: "attachments" | "ai-mark"
   /** Accessible name for the textarea (paired with `htmlFor`). */
@@ -51,7 +51,7 @@ export interface AskLeoComposerProps {
   /** `aria-label` on the submit control when the field has text. */
   submitButtonAriaLabel?: string
   /**
-   * `send` — paper plane (chat / Ask Leo). `search` — magnifying glass (question bank hub + dedicated search).
+   * `send` — paper plane (chat / Ask Leo). `search` — magnifying glass (library hub + dedicated search).
    */
   submitAppearance?: "send" | "search"
   /** Lets the parent swap pill vs card chrome when the field grows (multiline / long text). */

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/columns-client.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+/**
+ * Column types — hub client.
+ *
+ * Same composition as Placements / Library
+ * (`PrimaryPageTemplate` + `ListPageTemplate`):
+ *   - `header`  : `PageHeader` with title + one-line subtitle describing the demo.
+ *   - `metrics` : `KeyMetrics` `variant="flat"` — patterns, pinned, sortable, demo rows.
+ *   - tabs      : single `table` view tab (one demo table — no list / board variants).
+ *   - `renderContent` : the `<ColumnsShowcase />` DataTable surface.
+ *
+ * Cell patterns are exercised inside `columns-showcase.tsx` so the rendered
+ * DataTable mirrors what real product hubs ship (favorite star, mono IDs,
+ * `ListHubStatusBadge`, `AvatarGroup` + `+N`, etc.).
+ */
+
+import * as React from "react"
+
+import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
+import { PageHeader } from "@/components/page-header"
+import {
+  KeyMetrics,
+  type MetricInsight,
+  type MetricItem,
+} from "@/components/key-metrics"
+import {
+  ListPageTemplate,
+  type ViewTab,
+} from "@/components/data-views"
+import {
+  ColumnsShowcase,
+  COLUMNS_SHOWCASE_PATTERN_COUNT,
+  COLUMNS_SHOWCASE_PINNED_COUNT,
+  COLUMNS_SHOWCASE_SORTABLE_COUNT,
+} from "@/components/columns-showcase"
+
+const COLUMNS_DEFAULT_TABS: ViewTab[] = [
+  {
+    id: "columns-all",
+    label: "All columns",
+    viewType: "table",
+    icon: "fa-table",
+    filterId: "all",
+  },
+]
+
+const COLUMNS_SUBTITLE =
+  "Every cell pattern the design system ships — checkbox select, primary identity, avatar group, status chip, inline toggle, tag overflow, rating stars, progress bar, currency, attachments, external link, relative time, absolute date, and row actions overflow."
+
+const COLUMNS_TABLE_ANCHOR = "columns-table"
+
+/**
+ * Canonical KPI shape (matches `placement-kpi.ts` precedent):
+ *   - every `MetricItem` is clickable (`href` anchor-jumps the table region),
+ *   - a `MetricInsight` provides the narrative on the right side.
+ * See `apps/web/docs/kpi-flat-band-pattern.md` + `exxat-kpi-trends.mdc`.
+ */
+const COLUMNS_KPIS: MetricItem[] = [
+  {
+    id: "patterns",
+    label: "Cell patterns",
+    value: COLUMNS_SHOWCASE_PATTERN_COUNT,
+    delta: "",
+    trend: "neutral",
+    trendPolarity: "informational",
+    metricVariant: "hero",
+    description: "every SaaS-grid pattern, in one HubTable",
+    href: `#${COLUMNS_TABLE_ANCHOR}`,
+  },
+  {
+    id: "pinned",
+    label: "Pinned columns",
+    value: COLUMNS_SHOWCASE_PINNED_COUNT,
+    delta: "",
+    trend: "neutral",
+    trendPolarity: "informational",
+    description: "select + question on the left, actions on the right",
+    href: `#${COLUMNS_TABLE_ANCHOR}`,
+  },
+  {
+    id: "sortable",
+    label: "Sortable",
+    value: COLUMNS_SHOWCASE_SORTABLE_COUNT,
+    delta: "",
+    trend: "neutral",
+    trendPolarity: "informational",
+    description: "click any sortable header",
+    href: `#${COLUMNS_TABLE_ANCHOR}`,
+  },
+  {
+    id: "rows",
+    label: "Demo rows",
+    value: 12,
+    delta: "",
+    trend: "neutral",
+    trendPolarity: "informational",
+    description: "real library mocks + demo augmentations",
+    href: `#${COLUMNS_TABLE_ANCHOR}`,
+  },
+]
+
+const COLUMNS_INSIGHT: MetricInsight = {
+  title: "Catalog, not playground",
+  description:
+    "Every cell pattern below is an importable named export from `@/components/data-views` — `ProgressCell`, `CurrencyCell`, `RatingCell`, `RowActionsCell`, and ten more. On a real hub, do not inline-implement these; import the named cell and pass the value.",
+  severity: "info",
+  actionLabel: "Ask Leo",
+}
+
+export function ColumnsClient() {
+  const [tabs, setTabs] = React.useState<ViewTab[]>(COLUMNS_DEFAULT_TABS)
+  const [activeTabId, setActiveTabId] = React.useState<string>(COLUMNS_DEFAULT_TABS[0]!.id)
+
+  const getTabCount = React.useCallback(() => 12, [])
+
+  return (
+    <PrimaryPageTemplate
+      siteHeader={{
+        breadcrumbs: [{ label: "Dashboard", href: "/dashboard" }],
+        title: "Column types",
+      }}
+    >
+      <ListPageTemplate
+        defaultTabs={COLUMNS_DEFAULT_TABS}
+        tabs={tabs}
+        onTabsChange={setTabs}
+        activeTabId={activeTabId}
+        onActiveTabChange={setActiveTabId}
+        supportedViewTypes={["table"]}
+        getTabCount={getTabCount}
+        header={
+          <PageHeader
+            title="Column types"
+            subtitle={COLUMNS_SUBTITLE}
+          />
+        }
+        metrics={
+          <KeyMetrics
+            variant="flat"
+            metrics={COLUMNS_KPIS}
+            insight={COLUMNS_INSIGHT}
+            showHeader={false}
+            metricsSingleRow
+          />
+        }
+        renderContent={(tab, updateTab) => (
+          <div id={COLUMNS_TABLE_ANCHOR}>
+            <ColumnsShowcase
+              view={tab.viewType}
+              onViewChange={(v) => updateTab({ viewType: v })}
+            />
+          </div>
+        )}
+      />
+    </PrimaryPageTemplate>
+  )
+}