@exxatdesignux/ui 0.3.0 → 0.4.1

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>
+  )
+}

package/template/components/columns-showcase.tsx

@@ -0,0 +1,541 @@
+"use client"
+
+/**
+ * ColumnsShowcase — a single `HubTable` exercising every cell pattern the
+ * design system already ships. Lives at `/columns` under Resources.
+ *
+ * Hosted inside `columns-client.tsx` so the page client owns `ListPageTemplate`,
+ * `PageHeader`, and `KeyMetrics`. `HubTable` (NOT raw `<DataTable>`) is the
+ * canonical primitive for a hub view body — it wires `useTableState`, search,
+ * filter chips, the filter dropdown, sort, the **Table properties** drawer,
+ * bulk-actions, and conditional rules. Pages that drop down to raw `<DataTable>`
+ * silently lose filters and Properties; do not do that.
+ *
+ * **All cell renderers come from `@/components/data-views`** (re-exported from
+ * `components/data-views/table-cells.tsx`). This file is the **catalog page** —
+ * if you need any of these cells in a real hub, **import them**, do not
+ * re-implement. The token-economy skill (`.cursor/skills/exxat-token-economy/SKILL.md`
+ * §3) lists each one by name so the AI imports directly.
+ *
+ * Rows are real `LibraryItem` mocks (so the favorite/star pattern lights
+ * up out of the box), augmented with demo-only fields — `reviewStatus`,
+ * `reviewers`, `attempts`, `progress`, `cost`, `rating`, `lastActivityAt`,
+ * `sourceUrl`, `attachmentCount`, `published` — courtesy of the row type's
+ * `Record<string, unknown>` extension.
+ *
+ * Patterns in column order (mirrors what Linear / Notion / Airtable / Asana /
+ * Salesforce / Stripe / Jira / Monday all ship for grid surfaces):
+ *
+ *   1.  Row select          — explicit `key: "select"`, pinned-left, locked
+ *   2.  Stem + ID + ⭐      — primary identity (QB favorite-button pattern)
+ *   3.  Author identity     — avatar + name + mailto email (two-line cell)
+ *   4.  Reviewers face rail — `PeopleAvatarRailCell` (+N more overflow)
+ *   5.  Type pill w/ icon   — `PillCell` + leading FA icon
+ *   6.  Difficulty signal   — `SignalBarsCell` (Wi-Fi-style ordinal)
+ *   7.  Status (chip+icon)  — `ListHubStatusBadge` (color + icon, never alone)
+ *   8.  Published toggle    — `BooleanToggleCell` (inline `ToggleSwitch`)
+ *   9.  Tag list +N         — `TagListCell` (soft `Badge`s with overflow tip)
+ *   10. Rating              — `RatingCell` (1–5 FA stars + value)
+ *   11. Progress            — `ProgressCell` (track + filled bar + label)
+ *   12. Cost                — `CurrencyCell` (right-aligned `tabular-nums`)
+ *   13. Attempts            — `NumericCell` (right-aligned `tabular-nums`)
+ *   14. Files               — `AttachmentCountCell` (paperclip + count)
+ *   15. Source              — `ExternalLinkCell` (host + new-tab icon)
+ *   16. Last activity       — `RelativeTimeCell` (+ absolute on hover)
+ *   17. Updated             — absolute date (matches QB column)
+ *   18. Row actions ⋯       — `RowActionsCell<LibraryItem>` (generic)
+ */
+
+import * as React from "react"
+import {
+  HubTable,
+  AttachmentCountCell,
+  BooleanToggleCell,
+  CurrencyCell,
+  ExternalLinkCell,
+  NumericCell,
+  PeopleAvatarRailCell,
+  PillCell,
+  ProgressCell,
+  RatingCell,
+  RelativeTimeCell,
+  RowActionsCell,
+  SignalBarsCell,
+  TagListCell,
+  type PersonStub,
+  type RowActionDef,
+} from "@/components/data-views"
+import type { DataListViewType } from "@/lib/data-list-view"
+import { AvatarInitials } from "@/components/ui/avatar"
+import { cn } from "@/lib/utils"
+import {
+  LibraryFavoriteButton,
+  LIBRARY_FAVORITE_HOVER_GROUP,
+} from "@/components/library-favorite-button"
+import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
+import {
+  LIST_HUB_STATUS_TINT_DANGER,
+  LIST_HUB_STATUS_TINT_INFO,
+  LIST_HUB_STATUS_TINT_NEUTRAL,
+  LIST_HUB_STATUS_TINT_SUCCESS,
+  LIST_HUB_STATUS_TINT_WARNING,
+} from "@/lib/list-status-badges"
+import { initialsFromDisplayName } from "@/lib/initials-from-name"
+import { formatDateUS } from "@/lib/date-filter"
+import { mailtoHref } from "@/lib/mailto"
+import {
+  LIBRARY_ITEMS,
+  type LibraryItem,
+  type LibraryItemType,
+  type LibraryLevel,
+} from "@/lib/mock/library"
+import type { ColumnDef } from "@/components/data-table/types"
+
+/* ── Demo-only row augmentation ────────────────────────────────────────── */
+
+type ReviewStatus = "draft" | "in_review" | "approved" | "needs_update" | "archived"
+
+const STATUS_LABEL: Record<ReviewStatus, string> = {
+  draft:        "Draft",
+  in_review:    "In review",
+  approved:     "Approved",
+  needs_update: "Needs update",
+  archived:     "Archived",
+}
+
+const STATUS_TINT: Record<ReviewStatus, string> = {
+  draft:        LIST_HUB_STATUS_TINT_NEUTRAL,
+  in_review:    LIST_HUB_STATUS_TINT_INFO,
+  approved:     LIST_HUB_STATUS_TINT_SUCCESS,
+  needs_update: LIST_HUB_STATUS_TINT_WARNING,
+  archived:     LIST_HUB_STATUS_TINT_DANGER,
+}
+
+const STATUS_ICON: Record<ReviewStatus, string> = {
+  draft:        "fa-pen-to-square",
+  in_review:    "fa-eye",
+  approved:     "fa-circle-check",
+  needs_update: "fa-triangle-exclamation",
+  archived:     "fa-box-archive",
+}
+
+const TYPE_LABEL: Record<LibraryItemType, string> = {
+  multiple_choice: "Multiple choice",
+  true_false:      "True / false",
+  short_answer:    "Short answer",
+}
+
+const TYPE_ICON: Record<LibraryItemType, string> = {
+  multiple_choice: "fa-list-check",
+  true_false:      "fa-toggle-on",
+  short_answer:    "fa-pen-line",
+}
+
+const DIFFICULTY_LEVEL: Record<LibraryLevel, number> = {
+  easy: 1, medium: 2, hard: 3,
+}
+
+const DIFFICULTY_TONE: Record<LibraryLevel, "success" | "warning" | "danger"> = {
+  easy: "success", medium: "warning", hard: "danger",
+}
+
+const REVIEWER_POOL: PersonStub[] = [
+  { name: "Aisha Khan",      initials: "AK" },
+  { name: "Marcus Patel",    initials: "MP" },
+  { name: "Sofia Rinaldi",   initials: "SR" },
+  { name: "Jamal Brooks",    initials: "JB" },
+  { name: "Priya Iyer",      initials: "PI" },
+  { name: "Diego Suarez",    initials: "DS" },
+  { name: "Hannah Reed",     initials: "HR" },
+  { name: "Mei Lin",         initials: "ML" },
+]
+
+const REVIEW_STATUSES: ReviewStatus[] = [
+  "draft", "in_review", "approved", "needs_update", "approved", "in_review",
+  "draft", "archived", "approved", "in_review", "needs_update", "approved",
+]
+
+const SOURCE_URLS: string[] = [
+  "https://nlm.nih.gov/medlineplus",
+  "https://merckmanuals.com/professional",
+  "https://uptodate.com/contents/diabetes",
+  "https://cdc.gov/asthma/clinical-care",
+  "https://ada.org/resources/research",
+  "https://heart.org/health-topics",
+  "https://aap.org/en/practice-management",
+  "https://nice.org.uk/guidance/ng17",
+]
+
+const PUBLISHED_BY_INDEX = [
+  true, true, false, true, false, true, true, false, true, true, false, true,
+]
+
+/** Build the showcase dataset once. Keeps `LibraryItem` as the row type so
+ *  `LibraryFavoriteButton` plugs in with zero adaptation. The demo
+ *  augmentations exercise the long tail of SaaS-grid cell patterns. */
+function buildRows(): LibraryItem[] {
+  const NOW = Date.UTC(2026, 4, 21, 10, 30, 0)
+  return LIBRARY_ITEMS.slice(0, 12).map((item, i) => {
+    const lastActivityAt = new Date(
+      NOW - i * 1000 * 60 * 60 * 17 - 1000 * 60 * 13,
+    ).toISOString()
+    return {
+      ...item,
+      reviewStatus:    REVIEW_STATUSES[i % REVIEW_STATUSES.length],
+      reviewers:       REVIEWER_POOL.slice(i % 3, (i % 3) + 3 + (i % 3)),
+      attempts:        27 + ((i * 11) % 96),
+      isStarred:       i % 4 === 0,
+      progress:        8 + ((i * 17) % 92),
+      cost:            12 + ((i * 91) % 488) + ((i * 31) % 100) / 100,
+      rating:          1 + ((i * 7) % 5),
+      attachmentCount: i === 1 ? 0 : 1 + ((i * 5) % 7),
+      sourceUrl:       SOURCE_URLS[i % SOURCE_URLS.length],
+      lastActivityAt,
+      published:       PUBLISHED_BY_INDEX[i % PUBLISHED_BY_INDEX.length],
+    }
+  })
+}
+
+/* ── Row actions definition ────────────────────────────────────────────── */
+
+const ROW_ACTIONS: RowActionDef<LibraryItem>[] = [
+  { label: "Open",      icon: "fa-arrow-up-right", onSelect: () => {} },
+  { label: "Edit",      icon: "fa-pen-to-square",  onSelect: () => {} },
+  { label: "Duplicate", icon: "fa-clone",          onSelect: () => {} },
+  { label: "Archive",   icon: "fa-box-archive",    onSelect: () => {}, variant: "destructive" },
+]
+
+/* ── Column definitions ────────────────────────────────────────────────── */
+
+function useColumns(
+  onToggleFavorite:  (row: LibraryItem) => void,
+  onTogglePublished: (row: LibraryItem) => void,
+): ColumnDef<LibraryItem>[] {
+  return React.useMemo<ColumnDef<LibraryItem>[]>(() => [
+    // 1. Select — explicit checkbox column. DataTable renders the checkbox cell
+    //    automatically; declaring it here makes it visible in the Properties
+    //    drawer column list and pins it left.
+    {
+      key:        "select",
+      label:      "",
+      width:      40,
+      minWidth:   40,
+      defaultPin: "left",
+      lockPin:    true,
+    },
+    // 2. Primary identity — name + mono ID + favorite star.
+    {
+      key: "stem",
+      label: "Name",
+      width: 320,
+      minWidth: 220,
+      defaultPin: "left",
+      sortable: true,
+      sortKey: "stem",
+      cell: (row) => (
+        <div className={cn(LIBRARY_FAVORITE_HOVER_GROUP, "flex min-w-0 items-start gap-2")}>
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5 pe-1">
+            <span className="line-clamp-2 text-sm font-medium text-foreground">{row.stem}</span>
+            <span className="font-mono text-xs text-muted-foreground tabular-nums">{row.questionId}</span>
+          </div>
+          <LibraryFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
+        </div>
+      ),
+    },
+    // 3. Person identity — avatar + name + email (two-line cell).
+    {
+      key: "author",
+      label: "Owner",
+      width: 260,
+      minWidth: 200,
+      sortable: true,
+      sortKey: "author",
+      filter:   { type: "text", icon: "fa-user", operators: ["contains", "not_contains"] },
+      cell: (row) => {
+        const initials = initialsFromDisplayName(row.author)
+        return (
+          <div className="flex min-w-0 items-center gap-2.5">
+            <AvatarInitials initials={initials} className="size-8 shrink-0 text-xs" />
+            <div className="flex min-w-0 flex-col gap-0.5">
+              <span className="truncate text-sm font-medium text-foreground">{row.author}</span>
+              {row.authorEmail ? (
+                <a
+                  href={mailtoHref(row.authorEmail)}
+                  className="truncate text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {row.authorEmail}
+                </a>
+              ) : null}
+            </div>
+          </div>
+        )
+      },
+    },
+    // 4. Face rail (+N overflow) — `PeopleAvatarRailCell`.
+    {
+      key: "reviewers",
+      label: "Reviewers",
+      width: 160,
+      minWidth: 140,
+      cell: (row) => (
+        <PeopleAvatarRailCell people={row.reviewers as PersonStub[] | undefined} />
+      ),
+    },
+    // 5. Single-select pill with icon — `PillCell`.
+    {
+      key: "type",
+      label: "Type",
+      width: 170,
+      minWidth: 150,
+      sortable: true,
+      sortKey: "type",
+      filter: {
+        type: "select",
+        icon: "fa-list-check",
+        options: (Object.keys(TYPE_LABEL) as LibraryItemType[]).map((k) => ({ value: k, label: TYPE_LABEL[k] })),
+      },
+      cell: (row) => <PillCell label={TYPE_LABEL[row.type]} icon={TYPE_ICON[row.type]} />,
+    },
+    // 6. Level signal — `SignalBarsCell` (Wi-Fi metaphor).
+    {
+      key: "difficulty",
+      label: "Level",
+      width: 100,
+      minWidth: 90,
+      sortable: true,
+      sortKey: "difficulty",
+      filter: {
+        type: "select",
+        icon: "fa-signal-bars",
+        options: [
+          { value: "easy",   label: "Low"    },
+          { value: "medium", label: "Normal" },
+          { value: "hard",   label: "High"   },
+        ],
+      },
+      cell: (row) => (
+        <SignalBarsCell
+          level={DIFFICULTY_LEVEL[row.difficulty]}
+          tone={DIFFICULTY_TONE[row.difficulty]}
+          label={`Difficulty: ${row.difficulty}`}
+        />
+      ),
+    },
+    // 7. Status — chip + icon (color + glyph; never color alone).
+    {
+      key: "reviewStatus",
+      label: "Status",
+      width: 150,
+      minWidth: 130,
+      filter: {
+        type: "select",
+        icon: "fa-circle-check",
+        options: (Object.keys(STATUS_LABEL) as ReviewStatus[]).map((k) => ({ value: k, label: STATUS_LABEL[k] })),
+      },
+      cell: (row) => {
+        const s = (row.reviewStatus as ReviewStatus | undefined) ?? "draft"
+        return (
+          <ListHubStatusBadge
+            label={STATUS_LABEL[s]}
+            tintClassName={STATUS_TINT[s]}
+            icon={STATUS_ICON[s]}
+          />
+        )
+      },
+    },
+    // 8. Inline toggle — `BooleanToggleCell` for a boolean lifecycle field.
+    {
+      key: "published",
+      label: "Active",
+      width: 110,
+      minWidth: 100,
+      cell: (row) => (
+        <BooleanToggleCell
+          checked={Boolean((row as Record<string, unknown>).published)}
+          onChange={() => onTogglePublished(row)}
+          labelOn="Active — click to disable"
+          labelOff="Inactive — click to activate"
+        />
+      ),
+    },
+    // 9. Tag list +N — `TagListCell`.
+    {
+      key: "tags",
+      label: "Tags",
+      width: 180,
+      minWidth: 140,
+      cell: (row) => <TagListCell tags={row.tags} />,
+    },
+    // 10. Rating — `RatingCell` (5 stars + value).
+    {
+      key: "rating",
+      label: "Rating",
+      width: 130,
+      minWidth: 110,
+      sortable: true,
+      sortKey: "rating",
+      cell: (row) => <RatingCell value={(row.rating as number | undefined) ?? 0} />,
+    },
+    // 11. Progress — `ProgressCell` (track + filled + label).
+    {
+      key: "progress",
+      label: "Progress",
+      width: 180,
+      minWidth: 150,
+      sortable: true,
+      sortKey: "progress",
+      cell: (row) => <ProgressCell value={(row.progress as number | undefined) ?? 0} />,
+    },
+    // 12. Currency — `CurrencyCell` (right-aligned tabular-nums USD).
+    {
+      key: "cost",
+      label: "Cost",
+      width: 110,
+      minWidth: 90,
+      sortable: true,
+      sortKey: "cost",
+      cell: (row) => <CurrencyCell value={(row.cost as number | undefined) ?? 0} />,
+    },
+    // 13. Plain numeric — `NumericCell` (right-aligned).
+    {
+      key: "attempts",
+      label: "Count",
+      width: 100,
+      minWidth: 80,
+      sortable: true,
+      sortKey: "attempts",
+      cell: (row) => <NumericCell value={(row.attempts as number | undefined) ?? 0} />,
+    },
+    // 14. Attachment count — `AttachmentCountCell`.
+    {
+      key: "attachmentCount",
+      label: "Files",
+      width: 80,
+      minWidth: 70,
+      sortable: true,
+      sortKey: "attachmentCount",
+      cell: (row) => (
+        <AttachmentCountCell count={(row.attachmentCount as number | undefined) ?? 0} />
+      ),
+    },
+    // 15. External link — `ExternalLinkCell` (host + new-tab icon).
+    {
+      key: "sourceUrl",
+      label: "Link",
+      width: 200,
+      minWidth: 160,
+      cell: (row) => <ExternalLinkCell url={(row.sourceUrl as string | undefined) ?? ""} />,
+    },
+    // 16. Relative time + absolute on hover — `RelativeTimeCell`.
+    {
+      key: "lastActivityAt",
+      label: "Last activity",
+      width: 150,
+      minWidth: 130,
+      sortable: true,
+      sortKey: "lastActivityAt",
+      cell: (row) => (
+        <RelativeTimeCell iso={(row.lastActivityAt as string | undefined) ?? ""} />
+      ),
+    },
+    // 17. Absolute date.
+    {
+      key: "updatedAt",
+      label: "Updated",
+      width: 120,
+      minWidth: 100,
+      sortable: true,
+      sortKey: "updatedAt",
+      cell: (row) => (
+        <span className="text-sm tabular-nums text-foreground/90 whitespace-nowrap">
+          {formatDateUS(row.updatedAt)}
+        </span>
+      ),
+    },
+    // 18. Row actions overflow — `RowActionsCell<LibraryItem>`.
+    {
+      key: "actions",
+      label: "",
+      width: 48,
+      minWidth: 48,
+      defaultPin: "right",
+      lockPin: true,
+      cell: (row) => (
+        <div className="flex items-center justify-center">
+          <RowActionsCell row={row} actions={ROW_ACTIONS} triggerLabel={`Actions for item ${row.questionId}`} />
+        </div>
+      ),
+    },
+  ], [onToggleFavorite, onTogglePublished])
+}
+
+/* ── Public ───────────────────────────────────────────────────────────── */
+
+/** Column patterns showcased in this HubTable — surfaced as KPIs by the page client. */
+export const COLUMNS_SHOWCASE_PATTERN_COUNT  = 18
+export const COLUMNS_SHOWCASE_PINNED_COUNT   = 3  // select + name + actions
+export const COLUMNS_SHOWCASE_SORTABLE_COUNT = 11 // name, owner, type, level, rating, progress, cost, count, files, lastActivityAt, updatedAt
+
+const COLUMNS_SUPPORTED_VIEWS: readonly DataListViewType[] = ["table"] as const
+
+export interface ColumnsShowcaseProps {
+  /** Active view from `ListPageTemplate.renderContent`. */
+  view: DataListViewType
+  /** Tab update callback from `ListPageTemplate.renderContent`. */
+  onViewChange: (v: DataListViewType) => void
+}
+
+/**
+ * The actual hub surface — wrapped by `columns-client.tsx` inside
+ * `ListPageTemplate.renderContent`. No outer card chrome — keep this lean so
+ * the host template owns header / KPIs / view tabs.
+ */
+export function ColumnsShowcase({ view, onViewChange }: ColumnsShowcaseProps) {
+  const [rows, setRows] = React.useState<LibraryItem[]>(() => buildRows())
+  const [pagination, setPagination] = React.useState(false)
+
+  const toggleFavorite = React.useCallback((row: LibraryItem) => {
+    setRows((current) =>
+      current.map((r) => (r.id === row.id ? { ...r, isStarred: !r.isStarred } : r)),
+    )
+  }, [])
+
+  const togglePublished = React.useCallback((row: LibraryItem) => {
+    setRows((current) =>
+      current.map((r) =>
+        r.id === row.id
+          ? { ...r, published: !(r as Record<string, unknown>).published }
+          : r,
+      ),
+    )
+  }, [])
+
+  const columns = useColumns(toggleFavorite, togglePublished)
+
+  return (
+    <HubTable<LibraryItem>
+      rows={rows}
+      columns={columns}
+      view={view}
+      onViewChange={onViewChange}
+      supportedViewTypes={COLUMNS_SUPPORTED_VIEWS}
+      hubLabel="Column types"
+      lifecycleTabLabel="Column types"
+      searchAriaLabel="Search columns showcase"
+      getRowId={(r) => r.id}
+      getRowSelectionLabel={(r) => r.stem}
+      defaultSort={{ key: "stem", dir: "asc" }}
+      pagination={pagination}
+      onPaginationChange={setPagination}
+      paginationInitialPageSize={5}
+      paginationPageSizeOptions={[5, 10, 25]}
+      emptyState={
+        <p className="text-sm text-muted-foreground">
+          No rows match your filters.
+        </p>
+      }
+      renderers={{}}
+    />
+  )
+}