@exxatdesignux/ui 0.5.1 → 0.5.3

package/template/components/library-table.tsx

@@ -19,8 +19,8 @@ import {
   HubTable,
   type HubTableHandle,
   type HubTableRenderers,
-  type HubTableRendererArgs,
 } from "@/components/data-views"
+import { Skeleton } from "@/components/ui/skeleton"
 import { LIBRARY_SUPPORTED_VIEWS } from "@/lib/library-supported-views"
 import { Button } from "@/components/ui/button"
 import {
@@ -30,7 +30,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
-import { Skeleton } from "@/components/ui/skeleton"
 import {
   ResizableHandle,
   ResizablePanel,
@@ -581,6 +580,14 @@ function libraryPanelDetail(row: LibraryItem) {
 
 export type LibraryTableHandle = HubTableHandle
 
+export interface LibraryTableHubLabels {
+  hubLabel: string
+  lifecycleTabLabel: string
+  searchAriaLabel: string
+  listAriaLabel?: string
+  defaultSort?: { key: string; dir: "asc" | "desc" }
+}
+
 export interface LibraryTableProps {
   items: LibraryItem[]
   /** When set, table / board / tree rows are limited to this nav scope (secondary sidebar). */
@@ -596,6 +603,15 @@ export interface LibraryTableProps {
   folders: LibraryFolder[]
   onFoldersChange: React.Dispatch<React.SetStateAction<LibraryFolder[]>>
   onItemsChange: React.Dispatch<React.SetStateAction<LibraryItem[]>>
+  /** e.g. Column types showcase — custom `ColumnDef`s while reusing list/board/folder renderers. */
+  columnDefs?: ColumnDef<LibraryItem>[]
+  /** Override default Library copy when {@link columnDefs} is set. */
+  hubLabels?: LibraryTableHubLabels
+  pagination?: boolean
+  onPaginationChange?: (v: boolean) => void
+  paginationInitialPageSize?: number
+  paginationPageSizeOptions?: number[]
+  showBulkActions?: boolean
 }
 
 export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTableProps>(
@@ -611,6 +627,13 @@ export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTablePro
       folders,
       onFoldersChange,
       onItemsChange,
+      columnDefs,
+      hubLabels,
+      pagination,
+      onPaginationChange,
+      paginationInitialPageSize,
+      paginationPageSizeOptions,
+      showBulkActions = true,
     },
     ref,
   ) {
@@ -628,10 +651,18 @@ export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTablePro
     )
 
     const columns = React.useMemo(
-      () => buildLibraryColumns(tableSourceItems, { onToggleFavorite: toggleFavorite }),
-      [tableSourceItems, toggleFavorite],
+      () =>
+        columnDefs ??
+        buildLibraryColumns(tableSourceItems, { onToggleFavorite: toggleFavorite }),
+      [columnDefs, tableSourceItems, toggleFavorite],
     )
 
+    const hubLabel = hubLabels?.hubLabel ?? "Library"
+    const lifecycleTabLabel = hubLabels?.lifecycleTabLabel ?? "Library"
+    const searchAriaLabel = hubLabels?.searchAriaLabel ?? "Search questions"
+    const listAriaLabel = hubLabels?.listAriaLabel ?? "Questions"
+    const defaultSort = hubLabels?.defaultSort ?? { key: "updatedAt", dir: "desc" as const }
+
     // ─ New-folder / customize-folder modal state (shared by panel + tree-panel) ────
     const [newFolderOpen, setNewFolderOpen] = React.useState(false)
     const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
@@ -750,18 +781,22 @@ export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTablePro
           view={view}
           onViewChange={onViewChange}
           supportedViewTypes={LIBRARY_SUPPORTED_VIEWS}
-          hubLabel="Library"
-          lifecycleTabLabel="Library"
-          searchAriaLabel="Search questions"
+          hubLabel={hubLabel}
+          lifecycleTabLabel={lifecycleTabLabel}
+          searchAriaLabel={searchAriaLabel}
           getRowId={row => row.id}
           getRowSelectionLabel={row => row.stem}
-          defaultSort={{ key: "updatedAt", dir: "desc" }}
+          defaultSort={defaultSort}
           emptyState={<p className="text-sm text-muted-foreground">No questions in the bank.</p>}
           boardGroupByColumnOptions={[...LIBRARY_BOARD_GROUP_OPTIONS]}
           renderFilterOptionValue={renderFilterOptionValue}
           syncedSearchFromUrl={searchLanding ? undefined : urlListSearch}
-          listAriaLabel="Questions"
+          listAriaLabel={listAriaLabel}
           listEmptyState="No questions match your filters."
+          pagination={pagination}
+          onPaginationChange={onPaginationChange}
+          paginationInitialPageSize={paginationInitialPageSize}
+          paginationPageSizeOptions={paginationPageSizeOptions}
           renderListRow={row => (
             <ListPageBoardCard
               className={LIBRARY_FAVORITE_HOVER_GROUP}
@@ -784,20 +819,24 @@ export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTablePro
               </div>
             </ListPageBoardCard>
           )}
-          bulkActionsSlot={selected => {
-            if (selected.size === 0) return null
-            return (
-              <>
-                <span className="sr-only">{selected.size} selected</span>
-                <Tip label="Export selection (demo)">
-                  <Button size="sm" variant="outline" type="button">
-                    <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-                    Export
-                  </Button>
-                </Tip>
-              </>
-            )
-          }}
+          bulkActionsSlot={
+            showBulkActions
+              ? selected => {
+                  if (selected.size === 0) return null
+                  return (
+                    <>
+                      <span className="sr-only">{selected.size} selected</span>
+                      <Tip label="Export selection (demo)">
+                        <Button size="sm" variant="outline" type="button">
+                          <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                          Export
+                        </Button>
+                      </Tip>
+                    </>
+                  )
+                }
+              : undefined
+          }
           renderers={renderers}
           handleRef={ref}
         />

package/template/components/new-library-item-form.tsx

@@ -338,13 +338,6 @@ function folderBreadcrumb(folderId: string, folders: LibraryFolder[]): string {
   return parent ? `${parent.name} / ${f.name}` : f.name
 }
 
-/** 0–100 percentage of the difficulty meter for the given level. */
-function difficultyToPercent(value: "easy" | "medium" | "hard"): number {
-  if (value === "easy") return 18
-  if (value === "hard") return 82
-  return 50
-}
-
 /**
  * Folder-aware difficulty insight — derived deterministically from the
  * folder id so the same folder always returns the same numbers. In a real

package/template/components/product-wordmark.tsx

@@ -44,7 +44,7 @@ export interface ProductWordmarkProps {
  */
 export function ProductWordmark({
   config,
-  variant = "default",
+  variant: _variant = "default",
   className,
 }: ProductWordmarkProps) {
   const prefix = config.prefix ?? "Exxat"

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