@exxatdesignux/ui 0.5.1 → 0.5.3

package/template/components/tokens-themes-client.tsx

@@ -34,11 +34,18 @@ import {
 } from "@/components/key-metrics"
 import {
   HubTable,
+  ListPageBoardCard,
   ListPageTemplate,
   type ViewTab,
 } from "@/components/data-views"
+import type { ListPageBoardColumnDef } from "@/components/data-views/list-page-board-template"
 import type { ColumnDef } from "@/components/data-table/types"
-import type { DataListViewType } from "@/lib/data-list-view"
+import { FULL_HUB_SUPPORTED_VIEWS } from "@/lib/data-list-view-registry"
+import {
+  buildTokensHubRenderers,
+  renderTokenListRow,
+  type TokenHubRow,
+} from "@/components/tokens-hub-auxiliary-views"
 import { Button } from "@/components/ui/button"
 import { Tip } from "@/components/ui/tip"
 import { Badge } from "@/components/ui/badge"
@@ -51,7 +58,6 @@ import {
   categoryPreview,
   primaryValueText,
   type TokenCategory,
-  type TokenRecord,
 } from "@/components/tokens-themes-section"
 import {
   readTokensCategory,
@@ -60,16 +66,7 @@ import {
 } from "@/components/tokens-secondary-nav"
 
 /** Row shape consumed by `DataTable` — flat fields make built-in search work out of the box. */
-interface TokenRow extends Record<string, unknown> {
-  id: string          // == name, unique
-  name: string        // var(--…)
-  namespace: string
-  category: TokenCategory | string
-  value: string
-  deprecated: boolean
-  /** The original token index entry — used by the Preview cell renderer. */
-  record: TokenRecord
-}
+type TokenRow = TokenHubRow & { category: TokenCategory | string }
 
 /** Build all token rows once at module load (token index is static at runtime). */
 const TOKEN_ROWS: TokenRow[] = (() => {
@@ -124,8 +121,8 @@ const TOKENS_VIEW_TABS: ViewTab[] = [
   },
 ]
 
-/** Tokens hub only supports the table view — Properties drawer hides everything else. */
-const TOKENS_SUPPORTED_VIEWS: readonly DataListViewType[] = ["table"] as const
+/** Same seven views as Library / Column types — each has a renderer on `HubTable` below. */
+const TOKENS_SUPPORTED_VIEWS = FULL_HUB_SUPPORTED_VIEWS
 
 /**
  * Canonical KPI shape (matches `placement-kpi.ts` precedent):
@@ -324,6 +321,19 @@ export function TokensThemesClient() {
 
   const getTabCount = React.useCallback(() => rows.length, [rows.length])
 
+  const tokenBoardGroups = React.useMemo((): ListPageBoardColumnDef<TokenRow>[] => {
+    return CATEGORY_TABS.map(tab => ({
+      id: String(tab.id),
+      label: tab.label,
+      filter: (row: TokenRow) => tab.matches(String(row.category)),
+    }))
+  }, [])
+
+  const tokenHubRenderers = React.useMemo(
+    () => buildTokensHubRenderers(metrics, insight),
+    [metrics, insight],
+  )
+
   const columns: ColumnDef<TokenRow>[] = React.useMemo(() => [
     {
       key: "preview",
@@ -425,7 +435,7 @@ export function TokensThemesClient() {
         onTabsChange={setTabs}
         activeTabId={activeTabId}
         onActiveTabChange={setActiveTabId}
-        supportedViewTypes={["table"]}
+        supportedViewTypes={TOKENS_SUPPORTED_VIEWS}
         getTabCount={getTabCount}
         header={
           <PageHeader
@@ -467,7 +477,25 @@ export function TokensThemesClient() {
                 No tokens match your filters.
               </p>
             }
-            renderers={{}}
+            listAriaLabel="Tokens"
+            listEmptyState="No tokens match your filters."
+            renderListRow={renderTokenListRow}
+            renderBoardCard={row => (
+              <ListPageBoardCard layout="stack">
+                <div className="flex items-center gap-2">
+                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded border border-border bg-muted/20">
+                    {categoryPreview(row.name, row.record)}
+                  </div>
+                  <div className="min-w-0">
+                    <p className="truncate font-mono text-xs font-semibold text-foreground">{row.name}</p>
+                    <p className="text-[10px] text-muted-foreground">{row.namespace}</p>
+                  </div>
+                </div>
+              </ListPageBoardCard>
+            )}
+            boardGroups={tokenBoardGroups}
+            boardEmptyColumnLabel="No tokens"
+            renderers={tokenHubRenderers}
           />
         )}
       />

package/template/docs/HANDBOOK.md

@@ -33,7 +33,7 @@ This is the **happy path** for the most common task: "I have an entity (records,
 | 5 | Compose the page client with `PrimaryPageTemplate` → `ListPageTemplate` (KPIs in `metrics`, view tabs in `defaultTabs`, the `HubTable` in `renderContent`). | `apps/web/components/<entity>-client.tsx` | `exxat-list-page-connected-views.mdc` |
 | 6 | Add to nav (`lib/mock/navigation.tsx`). If the hub needs scoped sub-navigation (e.g. categories), declare `secondaryPanel: "<id>"` and register the panel. | `apps/web/lib/mock/navigation.tsx`, `apps/web/components/sidebar/secondary-panel.tsx` | `exxat-primary-nav-secondary-panel.mdc` |
 
-**Reference pages to copy:** `apps/web/components/columns-showcase.tsx` (single-view catalog hub composing every reusable cell), `apps/web/components/tokens-themes-client.tsx` (hub with a secondary panel + URL-driven scope), or `apps/web/components/library-table.tsx` (full hub: table / board / dashboard + conditional rules).
+**Reference pages to copy:** `apps/web/components/library-table.tsx` + `library-client.tsx` (canonical seven-view hub), `apps/web/components/columns-showcase.tsx` (custom columns + same Add view via `LibraryTable`), `apps/web/components/tokens-themes-client.tsx` + `tokens-hub-auxiliary-views.tsx`. See **`hub-supported-views-pattern.md`** before changing Add view.
 
 > **Stop signs.** If you find yourself building a parallel table stack, a second metrics strip, a custom filter row, or pasting raw `<DataTable>` into `renderContent` — **stop and re-read** `.cursor/rules/exxat-reuse-before-custom.mdc`.
 

package/template/docs/data-views-pattern.md

@@ -6,6 +6,12 @@
 
 This document describes how list pages combine **views**, **toolbar** behavior, **filters**, **properties**, and **persistence** in this codebase.
 
+## Add view parity (seven views)
+
+**Binding:** `.cursor/rules/exxat-hub-supported-views.mdc`. **Detail:** `docs/hub-supported-views-pattern.md`.
+
+Every list hub **should** use **`FULL_HUB_SUPPORTED_VIEWS`** (table, list, board, dashboard, folder, panel, tree-panel) on both **`ListPageTemplate`** and **`HubTable`**, with a working renderer per view. **Library** (`library-table.tsx`) is the reference. Do not ship table-only or four-view allowlists on showcase/catalog hubs unless product documents an exception.
+
 ## Reuse existing components (required)
 
 **Prefer composing what already exists** over rebuilding one-off tabs, search, filters, or property panels. The **Placements** flow is the reference implementation; new list/table/board pages should wire the same building blocks with new data and column definitions.

package/template/docs/glossary.md

@@ -46,7 +46,8 @@
 | **Secondary panel** | A scoped navigation rail (e.g. "Library → All / Mine / Tree", "Tokens & themes → Colors / Radius / Motion / …") that sits between the main sidebar and the page. Opening one collapses the main sidebar; closing one restores the previous sidebar state. | `exxat-primary-nav-secondary-panel.mdc` |
 | **Site header** | The top bar on a primary route (org/product switcher + breadcrumbs + actions). Owned by `PrimaryPageTemplate`. | `apps/web/components/templates/primary-page-template.tsx` |
 | **Skill** | A `.cursor/skills/<name>/SKILL.md` (mirrored in `.claude/skills/`) workflow + checklist for a recurring agent task. Use a skill when the same checklist would be repeated across many sessions. | `apps/web/AGENTS.md` |
-| **`supportedViewTypes`** | The allowlist of `DataListViewType` values a hub implements. Passed to `HubTable.supportedViewTypes` so the Properties drawer never offers a view the hub can't render. | `packages/ui/src/components/data-views/hub-table.tsx` |
+| **`supportedViewTypes`** | The allowlist of `DataListViewType` values a hub implements. Default **`FULL_HUB_SUPPORTED_VIEWS`** (seven views, same Add view as Library). Must match on **`ListPageTemplate`** + **`HubTable`**; every entry needs a renderer. | `packages/ui/src/lib/data-list-view-registry.ts`, `docs/hub-supported-views-pattern.md` |
+| **`FULL_HUB_SUPPORTED_VIEWS`** | table · list · board · dashboard · folder · panel · tree-panel — canonical list-hub allowlist. | `data-list-view-registry.ts` |
 | **Trend polarity** | `MetricItem.trendPolarity` says whether "up" is good (`higher_is_better`, default), bad (`lower_is_better`), or value-neutral (`informational`). The arrow's tint follows the polarity, not the sign. | `exxat-kpi-trends.mdc` |
 | **`useTableState`** | The state hook that owns rows, filters, search, sort, pagination, group-by, and column visibility. Always one instance per hub. | `exxat-centralized-list-dataset.mdc` |
 | **View tab** | A tab on `ListPageTemplate` representing one view of the same dataset (table, list, board, dashboard, folder, panel, tree, …). Each tab carries a `viewType` and the `renderContent` callback receives it. | `exxat-list-page-connected-views.mdc` |

package/template/docs/hub-supported-views-pattern.md

@@ -0,0 +1,53 @@
+# Hub supported views pattern (Add view parity)
+
+> **Agents:** `.cursor/rules/exxat-hub-supported-views.mdc` (binding). **Reference hub:** Library / All questions (`library-table.tsx`, `library-client.tsx`).
+
+## Problem this solves
+
+`ListPageTemplate` filters **Add view** and Properties view tiles from `supportedViewTypes`. If Column types passes four views but Library passes seven, users see inconsistent menus. If a hub allows Board but has no `board-with-toolbar` renderer, users see **“does not implement Board view”**.
+
+## Canonical allowlist
+
+Import from the registry (single source of truth):
+
+```ts
+import { FULL_HUB_SUPPORTED_VIEWS } from "@/lib/data-list-view-registry"
+// or
+import { LIBRARY_SUPPORTED_VIEWS } from "@/lib/library-supported-views" // alias of FULL
+```
+
+Seven views: **table**, **list**, **board**, **dashboard**, **folder**, **panel**, **tree-panel**.
+
+`HubTable` and `ListPageTemplate` use this list when `supportedViewTypes` is omitted.
+
+`PRIMARY_HUB_SUPPORTED_VIEWS` (four views) remains for hubs that intentionally omit folder/panel/tree — document that in `lib/<entity>-supported-views.ts`.
+
+## Wiring checklist
+
+1. **`ListPageTemplate`** — `supportedViewTypes={FULL_HUB_SUPPORTED_VIEWS}` (or entity alias).
+2. **`HubTable`** — same allowlist (or omit on both).
+3. **List** — `renderListRow` returning **`ListPageBoardCard`** `layout="row"` (copy from `library-table.tsx`).
+4. **Board** — `renderBoardCard` + `boardGroups` and/or `renderers["board-with-toolbar"]`.
+5. **Dashboard** — `renderers["dashboard-with-toolbar"]` with **`KeyMetrics`** on filtered rows.
+6. **Folder / panel / tree** — explicit `renderers` entries (Library reference) or **`LibraryTable`** for `LibraryItem` rows.
+
+## Special cases in this app
+
+| Hub | Pattern |
+|-----|---------|
+| **Library / All questions** | `LibraryTable` + `LIBRARY_SUPPORTED_VIEWS` — reference |
+| **Column types** | `LibraryTable` with `columnDefs` + `hubLabels` + `DEFAULT_LIBRARY_FOLDERS` — custom table, shared other views |
+| **Tokens & themes** | `FULL_HUB_SUPPORTED_VIEWS` + `tokens-hub-auxiliary-views.tsx` |
+| **New entity hub** | Start from `library-table.tsx` or token/columns references; never table-only unless approved |
+
+## Anti-patterns
+
+- `supportedViewTypes={["table"]}` on a `ListPageTemplate` hub.
+- `COLUMNS_SUPPORTED_VIEWS = PRIMARY_HUB_SUPPORTED_VIEWS` without board/folder/panel/tree renderers.
+- Minimal `renderListRow` with only stem + `questionId` (not product list UI).
+
+## See also
+
+- `packages/ui/src/lib/data-list-view-registry.ts`
+- `apps/web/docs/data-views-pattern.md`
+- `apps/web/lib/hub-connected-view-renderers.ts` — `defineHubViewRenderers` dev warnings

package/template/docs/reference-implementations.md

@@ -25,9 +25,9 @@ If you find yourself diverging from the reference page, ask **why** before shipp
 | Full hub: table + board + dashboard + list + paginated + conditional rules + dashboard customize | `apps/web/components/library-table.tsx` + `library-hub-client.tsx` | [`list-page-template`](./blueprints/list-page-template.md), [`data-table`](./blueprints/data-table.md), [`board-card`](./blueprints/board-card.md), [`key-metrics`](./blueprints/key-metrics.md) | [`exxat-data-tables`](../../../.cursor/rules/exxat-data-tables.mdc), [`exxat-list-page-connected-views`](../../../.cursor/rules/exxat-list-page-connected-views.mdc), [`exxat-centralized-list-dataset`](../../../.cursor/rules/exxat-centralized-list-dataset.mdc) | [`data-views-pattern`](./data-views-pattern.md) |
 | Hub with secondary panel scope (folder rail) | `apps/web/components/library-hub-client.tsx` + `library-secondary-nav.tsx` | [`list-page-template`](./blueprints/list-page-template.md) | [`exxat-primary-nav-secondary-panel`](../../../.cursor/rules/exxat-primary-nav-secondary-panel.mdc), [`exxat-library-hub-header`](../../../.cursor/rules/exxat-library-hub-header.mdc) | [`library-hub-header-pattern`](./library-hub-header-pattern.md) |
 | Hub with secondary panel scope (URL-driven category rail) — **smallest** secondary-panel reference + built-in pagination chrome | `apps/web/components/tokens-themes-client.tsx` + `tokens-secondary-nav.tsx` | [`list-page-template`](./blueprints/list-page-template.md) | [`exxat-primary-nav-secondary-panel`](../../../.cursor/rules/exxat-primary-nav-secondary-panel.mdc) | [`shell-surface-elevation-pattern`](./shell-surface-elevation-pattern.md) |
-| Single-view showcase hub (table only) — **18 SaaS cell patterns**, each rendered by an **importable named cell** from `@/components/data-views` (see "Cell primitives" table below). Categories: select, primary identity + ID + favorite, avatar + name + email, avatar group +N, type pill, difficulty signal, status chip, inline toggle, tag list, rating stars, progress bar, currency, numeric, attachment count, external link, relative time, absolute date, row actions overflow. | `apps/web/components/columns-showcase.tsx` + `columns-client.tsx` | [`list-page-template`](./blueprints/list-page-template.md), [`data-table`](./blueprints/data-table.md) | [`exxat-data-tables`](../../../.cursor/rules/exxat-data-tables.mdc) | — |
+| Cell-pattern catalog — **18 SaaS cell patterns** via custom `columnDefs`; **seven views** via **`LibraryTable`** (same Add view as Library). | `apps/web/components/columns-showcase.tsx` + `columns-client.tsx` | [`list-page-template`](./blueprints/list-page-template.md), [`data-table`](./blueprints/data-table.md), [`hub-supported-views-pattern`](./hub-supported-views-pattern.md) | [`exxat-data-tables`](../../../.cursor/rules/exxat-data-tables.mdc), [`exxat-hub-supported-views`](../../../.cursor/rules/exxat-hub-supported-views.mdc) | — |
 
-> **First-time hub builder:** start with `columns-showcase.tsx` (single-view catalog, easiest) or `tokens-themes-client.tsx` (adds a secondary panel + URL-driven scope). Move to `library-table.tsx` only when you genuinely need a board / dashboard / conditional rules.
+> **First-time hub builder:** copy **`library-table.tsx`** + **`library-client.tsx`** for seven-view wiring; use **`columns-showcase.tsx`** for custom columns on **`LibraryItem`**; use **`tokens-themes-client.tsx`** + **`tokens-hub-auxiliary-views.tsx`** for token rows. Read **`hub-supported-views-pattern.md`** before changing Add view.
 
 ---
 

package/template/lib/full-hub-supported-views.ts

@@ -0,0 +1,8 @@
+/**
+ * App-wide default view allowlist for list-page hubs (Add view + Properties).
+ * Keep in sync with `library-table.tsx` / `ListPageTemplate` / `HubTable`.
+ */
+export {
+  FULL_HUB_SUPPORTED_VIEWS,
+  PRIMARY_HUB_SUPPORTED_VIEWS,
+} from "@exxatdesignux/ui/lib/data-list-view-registry"

package/template/lib/library-supported-views.ts

@@ -1,12 +1,5 @@
-import type { DataListViewType } from "@/lib/data-list-view"
-
-/** Views implemented in `LibraryTable` — keep in sync with `ListPageConnectedViewBody` renderers. */
-export const LIBRARY_SUPPORTED_VIEWS = [
-  "table",
-  "list",
-  "board",
-  "dashboard",
-  "folder",
-  "panel",
-  "tree-panel",
-] as const satisfies readonly DataListViewType[]
+export {
+  FULL_HUB_SUPPORTED_VIEWS,
+  FULL_HUB_SUPPORTED_VIEWS as LIBRARY_SUPPORTED_VIEWS,
+  PRIMARY_HUB_SUPPORTED_VIEWS,
+} from "@exxatdesignux/ui/lib/data-list-view-registry"

package/template/package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "dev": "next dev --turbopack",
+    "dev:webpack": "next dev",
     "dev:3001": "next dev --turbopack -p 3001",
     "dev:3005": "next dev --turbopack -p 3005",
     "dev:daemon": "pm2 start ecosystem.config.cjs",
@@ -79,5 +80,15 @@
     "typescript": "^5.9.3",
     "vite": "^6.4.1",
     "vitest": "^3.2.4"
+  },
+  "overrides": {
+    "postcss": "^8.5.14",
+    "ws": "^8.20.1"
+  },
+  "pnpm": {
+    "overrides": {
+      "postcss@<8.5.10": "^8.5.14",
+      "ws@<8.20.1": "^8.20.1"
+    }
   }
 }

package/tokens/hooks-index.json

@@ -1,7 +1,7 @@
 {
-  "version": "0.5.1",
+  "version": "0.5.3",
   "source": "packages/ui/src/globals.css",
-  "generatedAt": "2026-05-22T04:04:09.308Z",
+  "generatedAt": "2026-05-22T09:24:53.662Z",
   "tokenCount": 197,
   "themeKeys": [
     "tailwind-bridge",