@exxatdesignux/ui 0.5.2 → 0.5.3

package/template/components/sidebar/app-sidebar.tsx

@@ -87,115 +87,23 @@ import {
   type NavSchool,
   type NavProgram,
 } from "@/lib/mock/navigation"
-/** Path segment of a nav URL (strip `#fragment` for matching). */
-function navUrlPath(url: string): string {
-  if (!url || url === "#") return ""
-  const i = url.indexOf("#")
-  return i === -1 ? url : url.slice(0, i)
-}
-
-/** Hash segment from a nav `href` (no `#`). `null` when the URL has no `#`. */
-function navUrlFragment(url: string): string | null {
-  if (!url.includes("#")) return null
-  return url.slice(url.indexOf("#") + 1)
-}
-
-function normalizedLocationHash(locationHash: string): string {
-  if (!locationHash) return ""
-  return locationHash.startsWith("#") ? locationHash.slice(1) : locationHash
-}
+import {
+  buildNavHashClaims,
+  collectNavUrls,
+  isNavHrefActive,
+  navUrlPath,
+  normalizedLocationHash,
+} from "@exxatdesignux/ui/lib/nav-active"
 
-/**
- * Path → set of hash fragments claimed by *another* nav item at the same path.
- *
- * Why: several rows deliberately share a route and disambiguate via `#fragment`.
- * Example: `Tokens & themes → /settings#appearance` and `Settings → /settings`
- * both render under the same page. Without a registry, when the user is on
- * `/settings#appearance` the no-fragment "Settings" row matches by path-equality
- * (line below: `pathname === pathOnly`) and lights up too — so *both* rows
- * appear active.
- *
- * The registry is computed once from the static nav config and consulted by
- * `isNavActive` to make the no-fragment item defer when a hash-bearing sibling
- * claims the current `location.hash`.
- */
-const NAV_HASH_CLAIMS: ReadonlyMap<string, ReadonlySet<string>> = (() => {
-  const map = new Map<string, Set<string>>()
-  const record = (url: string) => {
-    const p = navUrlPath(url)
-    const f = navUrlFragment(url)
-    if (!p || f === null) return
-    let set = map.get(p)
-    if (!set) { set = new Set<string>(); map.set(p, set) }
-    set.add(f)
-  }
-  const walk = (items: ReadonlyArray<{ url?: string; children?: ReadonlyArray<{ url?: string; children?: unknown }> }>) => {
-    for (const it of items) {
-      if (typeof it.url === "string") record(it.url)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      if (Array.isArray((it as any).children)) walk((it as any).children)
-    }
-  }
-  walk(NAV_PRIMARY)
-  walk(NAV_DOCUMENTS)
-  walk(NAV_QUICK_ACTIONS)
-  walk(NAV_SECONDARY)
-  return map
-})()
+const ALL_NAV_URLS = collectNavUrls([...NAV_PRIMARY, ...NAV_DOCUMENTS, ...NAV_SECONDARY])
+const NAV_HASH_CLAIMS = buildNavHashClaims(ALL_NAV_URLS)
 
-/** True when another nav item at the same path claims the current location hash. */
-function navHasMoreSpecificMatch(pathname: string, locationHash: string): boolean {
-  const claims = NAV_HASH_CLAIMS.get(pathname)
-  if (!claims) return false
-  const h = normalizedLocationHash(locationHash)
-  if (h === "") return false
-  return claims.has(h)
-}
-
-/**
- * Whether `pathname` (+ optional `location.hash`) matches a sidebar `href`.
- * When several links share the same path (e.g. `/settings`), disambiguate with `#fragment`
- * in each `href` — those rows use the `frag !== null` branch below.
- * For `href` without `#…`, an in-page hash (e.g. QB view tabs) does not clear the match.
- */
+/** Single active primary/secondary sidebar row — longest matching path wins. */
 function isNavActive(pathname: string, url: string, locationHash = ""): boolean {
-  const pathOnly = navUrlPath(url)
-  const frag = navUrlFragment(url)
-  const h = normalizedLocationHash(locationHash)
-
-  if (!pathOnly || pathOnly === "#") return false
-
-  if (frag !== null) {
-    if (pathOnly === "/") return pathname === "/" && h === frag
-    if (pathOnly === "/library") {
-      return pathname.startsWith("/library/") && h === frag
-    }
-    if (pathOnly.startsWith("/library/")) {
-      return pathname === pathOnly && h === frag
-    }
-    return pathname === pathOnly && h === frag
-  }
-
-  if (pathOnly === "/") {
-    if (pathname !== "/" || h !== "") return false
-    return !navHasMoreSpecificMatch(pathname, locationHash)
-  }
-  /**
-   * Exact path match — ignore `location.hash` when the nav `href` has no `#…` fragment (QB view tabs use hash).
-   * EXCEPTION: when another nav item at the same path claims the current hash
-   * (e.g. `Tokens & themes → /settings#appearance` while we're evaluating
-   * `Settings → /settings`), defer to that more-specific row — otherwise both
-   * would light up. See `NAV_HASH_CLAIMS`.
-   */
-  if (pathname === pathOnly) return !navHasMoreSpecificMatch(pathname, locationHash)
-  // Design system library — active on hub and detail routes.
-  if (pathOnly === "/library") {
-    return pathname.startsWith("/library/")
-  }
-  if (pathOnly.startsWith("/library/")) {
-    return pathname === pathOnly
-  }
-  return pathname.startsWith(`${pathOnly}/`)
+  return isNavHrefActive(pathname, url, ALL_NAV_URLS, {
+    locationHash,
+    hashClaimsByPath: NAV_HASH_CLAIMS,
+  })
 }
 
 /** Sub-item active — catalog detail routes, hash fragments, or duplicate hub URLs (Rotations). */

package/template/components/sidebar/secondary-nav.tsx

@@ -26,6 +26,7 @@
 import * as React from "react"
 import { usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
+import { resolveActiveNavHref } from "@exxatdesignux/ui/lib/nav-active"
 import {
   Tooltip,
   TooltipContent,
@@ -137,9 +138,16 @@ function RailButton({
 // NavLink — single item in the content panel
 // ─────────────────────────────────────────────────────────────────────────────
 
-function NavLink({ link }: { link: SecondaryNavLink }) {
+function NavLink({
+  link,
+  allLinkHrefs,
+}: {
+  link: SecondaryNavLink
+  allLinkHrefs: readonly string[]
+}) {
   const pathname = usePathname()
-  const isActive = pathname === link.href || pathname.startsWith(link.href + "/")
+  const activeHref = resolveActiveNavHref(pathname, allLinkHrefs)
+  const isActive = activeHref !== null && activeHref === link.href
 
   if (link.isSectionHeader) {
     return (
@@ -239,9 +247,12 @@ export function SecondaryNavRail({
 
 export function SecondaryNavPanel({
   section,
+  allLinkHrefs,
   className,
 }: {
   section: SecondaryNavSection
+  /** All navigable hrefs (every section) so only one row is active at a time. */
+  allLinkHrefs: readonly string[]
   className?: string
 }) {
   const [query, setQuery] = React.useState("")
@@ -329,7 +340,7 @@ export function SecondaryNavPanel({
 
       <ul role="list" className="flex flex-col gap-0.5 px-1.5">
         {visibleLinks.map(link => (
-          <NavLink key={link.key} link={link} />
+          <NavLink key={link.key} link={link} allLinkHrefs={allLinkHrefs} />
         ))}
         {section.searchable && q && visibleLinks.length === 0 && (
           <li className="px-3 py-2 text-xs text-muted-foreground">No results</li>
@@ -363,6 +374,13 @@ export function SecondaryNav({
   )
 
   const currentSection = sections.find(s => s.key === activeSection) ?? sections[0]
+  const allLinkHrefs = React.useMemo(
+    () =>
+      sections.flatMap(s =>
+        s.links.filter(l => !l.isSectionHeader).map(l => l.href),
+      ),
+    [sections],
+  )
 
   function handleSectionChange(key: string) {
     setActiveSection(key)
@@ -388,7 +406,7 @@ export function SecondaryNav({
       )}
 
       {/* Right content panel */}
-      <SecondaryNavPanel section={currentSection} />
+      <SecondaryNavPanel section={currentSection} allLinkHrefs={allLinkHrefs} />
     </div>
   )
 }

package/template/components/tokens-hub-auxiliary-views.tsx

@@ -0,0 +1,301 @@
+"use client"
+
+import * as React from "react"
+import {
+  FolderGridView,
+  ListPageBoardCard,
+  ListPageSplitHubChrome,
+  type HubTableRendererArgs,
+  type HubTableRenderers,
+} from "@/components/data-views"
+import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
+import {
+  LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
+  LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,
+  LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS,
+} from "@/components/data-views/list-page-split-hub-tokens"
+import { KeyMetrics, type MetricInsight, type MetricItem } from "@/components/key-metrics"
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
+import { cn } from "@/lib/utils"
+import { categoryPreview, type TokenRecord } from "@/components/tokens-themes-section"
+
+export interface TokenHubRow extends Record<string, unknown> {
+  id: string
+  name: string
+  namespace: string
+  category: string
+  value: string
+  deprecated: boolean
+  record: TokenRecord
+}
+
+export function TokensDashboardBody({
+  metrics,
+  insight,
+}: {
+  metrics: MetricItem[]
+  insight: MetricInsight
+}) {
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 lg:px-6">
+      <KeyMetrics variant="flat" metrics={metrics} insight={insight} showHeader={false} metricsSingleRow />
+    </div>
+  )
+}
+
+export function TokensFolderBody({ rows }: { rows: TokenHubRow[] }) {
+  return (
+    <FolderGridView
+      rows={rows}
+      getRowId={r => r.id}
+      ariaLabel="Design tokens"
+      constrainWidth
+      renderTile={row => (
+        <button
+          type="button"
+          className={cn(
+            "flex w-full flex-col items-center gap-2 rounded-lg border border-border bg-card p-4 text-center",
+            "transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          <div className="flex h-12 w-12 items-center justify-center">{categoryPreview(row.name, row.record)}</div>
+          <span className="line-clamp-2 font-mono text-xs text-foreground">{row.name}</span>
+          <span className="text-[10px] text-muted-foreground">{row.namespace}</span>
+        </button>
+      )}
+      emptyContent={<p className="text-sm text-muted-foreground">No tokens match your filters.</p>}
+    />
+  )
+}
+
+function TokenDetailPanel({ row }: { row: TokenHubRow }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-3">
+      <div className="flex items-center gap-3">
+        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-md border border-border bg-muted/30">
+          {categoryPreview(row.name, row.record)}
+        </div>
+        <div className="min-w-0">
+          <p className="font-mono text-sm font-semibold text-foreground">{row.name}</p>
+          <p className="text-xs text-muted-foreground">{row.namespace}</p>
+        </div>
+      </div>
+      <div>
+        <span className="text-xs font-medium text-muted-foreground">Value</span>
+        <p className="mt-1 font-mono text-xs text-foreground break-all">{row.value}</p>
+      </div>
+      <div>
+        <span className="text-xs font-medium text-muted-foreground">Category</span>
+        <p className="mt-1 text-sm text-foreground">{String(row.category)}</p>
+      </div>
+    </div>
+  )
+}
+
+export function TokensPanelBody({ rows }: { rows: TokenHubRow[] }) {
+  const namespaces = React.useMemo(
+    () => [...new Set(rows.map(r => r.namespace))].sort((a, b) => a.localeCompare(b)),
+    [rows],
+  )
+  const [activeNamespace, setActiveNamespace] = React.useState<string | null>(namespaces[0] ?? null)
+  const [activeId, setActiveId] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (namespaces.length === 0) {
+      setActiveNamespace(null)
+      setActiveId(null)
+      return
+    }
+    if (!activeNamespace || !namespaces.includes(activeNamespace)) {
+      setActiveNamespace(namespaces[0]!)
+    }
+  }, [namespaces, activeNamespace])
+
+  const inNamespace = React.useMemo(
+    () => (activeNamespace ? rows.filter(r => r.namespace === activeNamespace) : []),
+    [rows, activeNamespace],
+  )
+
+  React.useEffect(() => {
+    if (inNamespace.length === 0) {
+      setActiveId(null)
+      return
+    }
+    if (!activeId || !inNamespace.some(r => r.id === activeId)) {
+      setActiveId(inNamespace[0]!.id)
+    }
+  }, [inNamespace, activeId])
+
+  const activeRow = inNamespace.find(r => r.id === activeId) ?? null
+
+  return (
+    <ListPageSplitHubChrome aria-label="Token namespaces and details">
+      <ResizablePanelGroup direction="horizontal" className="flex h-full min-h-0 w-full flex-1">
+        <ResizablePanel defaultSize={28} minSize={18} className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}>
+          <ListPageTreeColumnHeader title="Namespaces" />
+          <div className="min-h-0 flex-1 overflow-y-auto p-1">
+            {namespaces.map(ns => (
+              <button
+                key={ns}
+                type="button"
+                onClick={() => setActiveNamespace(ns)}
+                className={cn(
+                  "flex w-full items-center rounded-md px-3 py-2 text-left text-sm",
+                  activeNamespace === ns ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/50",
+                )}
+              >
+                {ns}
+              </button>
+            ))}
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />
+        <ResizablePanel defaultSize={32} minSize={20} className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}>
+          <ListPageTreeColumnHeader title={activeNamespace ?? "Tokens"} />
+          <div className="min-h-0 flex-1 overflow-y-auto p-1">
+            {inNamespace.map(row => (
+              <button
+                key={row.id}
+                type="button"
+                onClick={() => setActiveId(row.id)}
+                className={cn(
+                  "flex w-full flex-col rounded-md px-3 py-2 text-left",
+                  activeId === row.id ? "bg-muted" : "hover:bg-muted/50",
+                )}
+              >
+                <span className="truncate font-mono text-xs text-foreground">{row.name}</span>
+                <span className="truncate text-[10px] text-muted-foreground">{String(row.category)}</span>
+              </button>
+            ))}
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />
+        <ResizablePanel defaultSize={40} minSize={24} className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}>
+          <ListPageTreeColumnHeader title="Details" className="px-4" />
+          <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+            {activeRow ? <TokenDetailPanel row={activeRow} /> : <p className="text-sm text-muted-foreground">Select a token.</p>}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </ListPageSplitHubChrome>
+  )
+}
+
+export function TokensTreePanelBody({ rows }: { rows: TokenHubRow[] }) {
+  const byNamespace = React.useMemo(() => {
+    const map = new Map<string, TokenHubRow[]>()
+    for (const row of rows) {
+      const list = map.get(row.namespace) ?? []
+      list.push(row)
+      map.set(row.namespace, list)
+    }
+    return [...map.entries()].sort(([a], [b]) => a.localeCompare(b))
+  }, [rows])
+
+  const [openNs, setOpenNs] = React.useState<Set<string>>(() => new Set(byNamespace.map(([ns]) => ns)))
+  const [activeId, setActiveId] = React.useState<string | null>(rows[0]?.id ?? null)
+  const activeRow = rows.find(r => r.id === activeId) ?? null
+
+  return (
+    <ListPageSplitHubChrome aria-label="Token tree">
+      <ResizablePanelGroup direction="horizontal" className="flex h-full min-h-0 w-full flex-1">
+        <ResizablePanel defaultSize={40} minSize={24} className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}>
+          <ListPageTreeColumnHeader title="All tokens" />
+          <div className="min-h-0 flex-1 overflow-y-auto p-2">
+            {byNamespace.map(([ns, items]) => {
+              const open = openNs.has(ns)
+              return (
+                <div key={ns} className="mb-1">
+                  <button
+                    type="button"
+                    className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm font-medium hover:bg-muted/50"
+                    onClick={() =>
+                      setOpenNs(prev => {
+                        const next = new Set(prev)
+                        if (next.has(ns)) next.delete(ns)
+                        else next.add(ns)
+                        return next
+                      })
+                    }
+                  >
+                    <i
+                      className={cn("fa-light text-xs text-muted-foreground", open ? "fa-chevron-down" : "fa-chevron-right")}
+                      aria-hidden="true"
+                    />
+                    {ns}
+                  </button>
+                  {open ? (
+                    <div className="ms-4 border-s border-border ps-2">
+                      {items.map(row => (
+                        <button
+                          key={row.id}
+                          type="button"
+                          onClick={() => setActiveId(row.id)}
+                          className={cn(
+                            "flex w-full rounded-md px-2 py-1.5 text-left font-mono text-xs",
+                            activeId === row.id ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/40",
+                          )}
+                        >
+                          {row.name}
+                        </button>
+                      ))}
+                    </div>
+                  ) : null}
+                </div>
+              )
+            })}
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />
+        <ResizablePanel defaultSize={60} minSize={30} className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}>
+          <ListPageTreeColumnHeader title="Details" className="px-4" />
+          <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+            {activeRow ? <TokenDetailPanel row={activeRow} /> : <p className="text-sm text-muted-foreground">Select a token.</p>}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </ListPageSplitHubChrome>
+  )
+}
+
+export function buildTokensHubRenderers(
+  metrics: MetricItem[],
+  insight: MetricInsight,
+): Pick<
+  HubTableRenderers<TokenHubRow>,
+  "dashboard-with-toolbar" | "folder-with-toolbar" | "panel-with-toolbar" | "tree-panel-with-toolbar"
+> {
+  return {
+    "dashboard-with-toolbar": ({ toolbar }: HubTableRendererArgs<TokenHubRow>) => (
+      <div className="flex min-h-0 flex-1 flex-col">
+        {toolbar}
+        <TokensDashboardBody metrics={metrics} insight={insight} />
+      </div>
+    ),
+    "folder-with-toolbar": ({ state, toolbarShell }) =>
+      toolbarShell(<TokensFolderBody rows={state.rows as TokenHubRow[]} />),
+    "panel-with-toolbar": ({ state, toolbarShell }) =>
+      toolbarShell(<TokensPanelBody rows={state.rows as TokenHubRow[]} />),
+    "tree-panel-with-toolbar": ({ state, toolbarShell }) =>
+      toolbarShell(<TokensTreePanelBody rows={state.rows as TokenHubRow[]} />),
+  }
+}
+
+export function renderTokenListRow(row: TokenHubRow) {
+  return (
+    <ListPageBoardCard layout="row" rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4">
+      <div className="flex min-w-0 items-center gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/20">
+          {categoryPreview(row.name, row.record)}
+        </div>
+        <div className="min-w-0 space-y-0.5">
+          <p className="truncate font-mono text-sm font-semibold text-foreground">{row.name}</p>
+          <p className="text-xs text-muted-foreground">
+            {row.namespace} · {String(row.category)}
+          </p>
+          <p className="truncate font-mono text-[10px] text-muted-foreground">{row.value}</p>
+        </div>
+      </div>
+    </ListPageBoardCard>
+  )
+}

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` |