@exxatdesignux/ui 0.5.1 → 0.5.3

package/src/components/ui/banner.tsx

@@ -56,8 +56,6 @@ const VARIANT_CONFIG = {
   },
 }
 
-type BannerVariant = keyof typeof VARIANT_CONFIG
-
 // ─────────────────────────────────────────────────────────────────────────────
 // SystemBanner — inline at the top of the main content area
 // ─────────────────────────────────────────────────────────────────────────────

package/src/components/ui/coach-mark.tsx

@@ -25,7 +25,6 @@ import * as React from "react"
 import { createPortal } from "react-dom"
 import { Popover as PopoverPrimitive } from "radix-ui"
 import { cva, type VariantProps } from "class-variance-authority"
-import { Button } from "./button"
 import { cn } from "../../lib/utils"
 import type { CoachMarkState } from "../../hooks/use-coach-mark"
 
@@ -258,7 +257,7 @@ export function CoachMark({
               "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
               "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
               "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-              "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+              "data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2",
               className
             )}
           >

package/src/components/ui/context-menu.tsx

@@ -126,7 +126,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
           className,
         )}

package/src/components/ui/dropdown-menu.tsx

@@ -47,7 +47,7 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         align={align}
         className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
           className,
         )}
@@ -403,7 +403,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
         className,
       )}

package/src/components/ui/hover-card.tsx

@@ -54,7 +54,7 @@ function HoverCardContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className,
         )}
         {...props}

package/src/components/ui/key-metrics.tsx

@@ -261,7 +261,7 @@ function flatMetricsHairlineClass(
   const childBorder = "[&>*]:border-[color:var(--key-metrics-flat-divider)]"
 
   if (itemCount === 2) {
-    return cn("gap-0", childBorder, "[&>*:first-child]:border-r")
+    return cn("gap-0", childBorder, "[&>*:first-child]:border-e")
   }
 
   if (itemCount === 4) {
@@ -272,15 +272,15 @@ function flatMetricsHairlineClass(
       "gap-0",
       childBorder,
       /* Wide strip (matches `@[30rem]:grid-cols-4`) — verticals between all tiles, no horizontal */
-      "[&>*:not(:last-child)]:border-r",
+      "[&>*:not(:last-child)]:border-e",
       /* Narrow strip (`@[18rem]`–`@[30rem]` 2×2) */
       `${narrow2x2}:[&>*:not(:last-child)]:border-e-0`,
-      `${narrow2x2}:[&>*:nth-child(odd)]:border-r`,
+      `${narrow2x2}:[&>*:nth-child(odd)]:border-e`,
       `${narrow2x2}:[&>*:not(:nth-last-child(-n+2))]:border-b`,
     )
   }
 
-  return cn("gap-0", childBorder, "[&>*:not(:last-child)]:border-r")
+  return cn("gap-0", childBorder, "[&>*:not(:last-child)]:border-e")
 }
 
 function metricsRowColumnsClass(rowLength: number, metricsHalfWidthLayout: boolean): string {

package/src/components/ui/popover.tsx

@@ -34,7 +34,7 @@ function PopoverContent({
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-          "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          "data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2",
           className
         )}
         {...props}

package/src/components/ui/select.tsx

@@ -68,7 +68,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         data-align-trigger={position === "item-aligned"}
-        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className )}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className )}
         position={position}
         align={align}
         {...props}

package/src/components/ui/sheet.tsx

@@ -63,7 +63,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg outline-none duration-300 ease-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-6 data-[side=left]:data-open:slide-in-from-left-6 data-[side=right]:data-open:slide-in-from-right-6 data-[side=top]:data-open:slide-in-from-top-6 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-6 data-[side=left]:data-closed:slide-out-to-left-6 data-[side=right]:data-closed:slide-out-to-right-6 data-[side=top]:data-closed:slide-out-to-top-6",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg outline-none duration-300 ease-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:start-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:end-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-6 data-[side=left]:data-open:slide-in-from-start-6 data-[side=right]:data-open:slide-in-from-end-6 data-[side=top]:data-open:slide-in-from-top-6 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-6 data-[side=left]:data-closed:slide-out-to-start-6 data-[side=right]:data-closed:slide-out-to-end-6 data-[side=top]:data-closed:slide-out-to-top-6",
           className
         )}
         {...props}

package/src/components/ui/sidebar.tsx

@@ -121,7 +121,7 @@ function SidebarProvider({
   // `SidebarAutoCollapse` route) must NOT trigger a re-reconcile that reads the
   // saved cookie back as "expanded" and snaps the rail open again.
   // The functional setter avoids closing over a stale `open` value.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // Deps are `[openProp]` only — not `open` — so incidental collapses do not re-read the cookie.
   React.useLayoutEffect(() => {
     if (typeof window === "undefined") return
     if (typeof document !== "undefined" && document.cookie.includes(`${SIDEBAR_COOKIE_LEGACY_NAME}=`)) {
@@ -132,7 +132,7 @@ function SidebarProvider({
     const fromCookie = readSidebarStateCookie()
     if (fromCookie === undefined) return
     _setOpen((prev) => (prev === fromCookie ? prev : fromCookie))
-  }, [])
+  }, [openProp])
 
   const setOpen = React.useCallback(
     (
@@ -246,7 +246,7 @@ function Sidebar({
   collapsible = "offcanvas",
   className,
   children,
-  dir,
+  dir: _dir,
   ...props
 }: React.ComponentProps<"div"> & {
   side?: "left" | "right"

package/src/components/ui/tooltip.tsx

@@ -50,7 +50,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

package/src/index.ts

@@ -46,6 +46,7 @@ export {
 export * from "./lib/list-page-table-properties"
 export * from "./lib/data-list-view"
 export * from "./lib/data-list-view-registry"
+export * from "./lib/nav-active"
 export * from "./lib/data-list-view-surface"
 export * from "./lib/data-list-display-options"
 

package/src/lib/data-list-view-registry.ts

@@ -6,6 +6,7 @@
  * `getDataListViewRenderKind` + `ListPageConnectedViewBody` (never a dashboard fallback).
  *
  * @see `docs/data-views-pattern.md` — "View registry and connected bodies"
+ * @see `.cursor/rules/exxat-hub-supported-views.mdc` — default hubs use **`FULL_HUB_SUPPORTED_VIEWS`** (seven views)
  */
 
 import {
@@ -47,6 +48,36 @@ const BY_VALUE = new Map<DataListViewType, DataListViewDefinition>(
 
 export const DATA_LIST_VIEW_REGISTRY: readonly DataListViewDefinition[] = DEFINITIONS
 
+/**
+ * Default view allowlist for **primary list hubs** (Placements / Team / Students-style pages).
+ * Pair with `ListPageTemplate` + `HubTable` when the hub implements table, list, board,
+ * and dashboard renderers. Omit `supportedViewTypes` on both components to use this default.
+ */
+export const PRIMARY_HUB_SUPPORTED_VIEWS = [
+  "table",
+  "list",
+  "board",
+  "dashboard",
+] as const satisfies readonly DataListViewType[]
+
+/**
+ * Default allowlist for **list-page hubs** in this design system (Library / Column types /
+ * Tokens, etc.). Matches the All questions hub: table, list, board, dashboard, folder,
+ * panel, and tree-panel. Pair with renderers for each kind on `HubTable` + `ListPageTemplate`.
+ */
+export const FULL_HUB_SUPPORTED_VIEWS = [
+  "table",
+  "list",
+  "board",
+  "dashboard",
+  "folder",
+  "panel",
+  "tree-panel",
+] as const satisfies readonly DataListViewType[]
+
+/** Every registered view type (includes folder, panel, calendar, tree-panel). */
+export const ALL_DATA_LIST_VIEW_TYPES = DATA_LIST_VIEW_REGISTRY.map(d => d.value)
+
 export function dataListViewDefinition(view: DataListViewType): DataListViewDefinition {
   const def = BY_VALUE.get(view)
   if (!def) {

package/src/lib/nav-active.ts

@@ -0,0 +1,162 @@
+/**
+ * Sidebar / secondary-nav active-state helpers.
+ *
+ * Only one nav target should be "selected" at a time. Prefix matching
+ * (`/dashboard` active on `/dashboard/students`) is correct only when no
+ * more-specific nav href also matches the current pathname.
+ */
+
+export function normalizePathname(pathname: string): string {
+  if (pathname.length > 1 && pathname.endsWith("/")) return pathname.slice(0, -1)
+  return pathname
+}
+
+/** Path segment before `#` (if any). */
+export function navUrlPath(url: string): string {
+  const hash = url.indexOf("#")
+  return hash >= 0 ? url.slice(0, hash) : url
+}
+
+/** Hash fragment after `#`, or `null` when the href has no fragment. */
+export function navUrlFragment(url: string): string | null {
+  const i = url.indexOf("#")
+  return i >= 0 ? url.slice(i + 1) : null
+}
+
+export function normalizedLocationHash(locationHash: string): string {
+  if (!locationHash) return ""
+  return locationHash.startsWith("#") ? locationHash.slice(1) : locationHash
+}
+
+/** Path → hash fragments claimed by *another* nav item at the same path. */
+export function buildNavHashClaims(
+  urls: readonly string[],
+): ReadonlyMap<string, ReadonlySet<string>> {
+  const map = new Map<string, Set<string>>()
+  for (const url of urls) {
+    const p = navUrlPath(url)
+    const f = navUrlFragment(url)
+    if (!p || f === null) continue
+    let set = map.get(p)
+    if (!set) {
+      set = new Set<string>()
+      map.set(p, set)
+    }
+    set.add(f)
+  }
+  return map
+}
+
+function navHasMoreSpecificHashMatch(
+  pathname: string,
+  locationHash: string,
+  hashClaimsByPath: ReadonlyMap<string, ReadonlySet<string>>,
+): boolean {
+  const claims = hashClaimsByPath.get(pathname)
+  if (!claims) return false
+  const h = normalizedLocationHash(locationHash)
+  if (h === "") return false
+  return claims.has(h)
+}
+
+function pathnameMatchesNavPath(
+  pathname: string,
+  pathOnly: string,
+  locationHash: string,
+  hashClaimsByPath: ReadonlyMap<string, ReadonlySet<string>>,
+): boolean {
+  const norm = normalizePathname(pathname)
+  const h = normalizedLocationHash(locationHash)
+
+  if (pathOnly === "/") {
+    if (norm !== "/" || h !== "") return false
+    return !navHasMoreSpecificHashMatch("/", locationHash, hashClaimsByPath)
+  }
+
+  if (norm === pathOnly) {
+    return !navHasMoreSpecificHashMatch(pathOnly, locationHash, hashClaimsByPath)
+  }
+
+  if (pathOnly === "/library") {
+    return norm.startsWith("/library/")
+  }
+  if (pathOnly.startsWith("/library/")) {
+    return norm === pathOnly
+  }
+
+  return norm.startsWith(`${pathOnly}/`)
+}
+
+/**
+ * Longest matching nav path for `pathname` among `candidateUrls` (path + prefix rules).
+ * Returns the winning href string, or `null`.
+ */
+export function resolveActiveNavHref(
+  pathname: string,
+  candidateUrls: readonly string[],
+  options?: {
+    locationHash?: string
+    hashClaimsByPath?: ReadonlyMap<string, ReadonlySet<string>>
+  },
+): string | null {
+  const norm = normalizePathname(pathname)
+  const hashClaims = options?.hashClaimsByPath ?? buildNavHashClaims(candidateUrls)
+  const locationHash = options?.locationHash ?? ""
+
+  let bestHref: string | null = null
+  let bestLen = -1
+
+  for (const url of candidateUrls) {
+    const pathOnly = navUrlPath(url)
+    const frag = navUrlFragment(url)
+    if (!pathOnly || pathOnly === "#") continue
+
+    let matches = false
+    if (frag !== null) {
+      const h = normalizedLocationHash(locationHash)
+      if (pathOnly === "/") matches = norm === "/" && h === frag
+      else if (pathOnly === "/library") matches = norm.startsWith("/library/") && h === frag
+      else if (pathOnly.startsWith("/library/")) matches = norm === pathOnly && h === frag
+      else matches = norm === pathOnly && h === frag
+    } else {
+      matches = pathnameMatchesNavPath(norm, pathOnly, locationHash, hashClaims)
+    }
+
+    if (matches && pathOnly.length > bestLen) {
+      bestHref = url
+      bestLen = pathOnly.length
+    }
+  }
+
+  return bestHref
+}
+
+/** True when `url` is the single best match for `pathname` among all nav hrefs. */
+export function isNavHrefActive(
+  pathname: string,
+  url: string,
+  allNavUrls: readonly string[],
+  options?: {
+    locationHash?: string
+    hashClaimsByPath?: ReadonlyMap<string, ReadonlySet<string>>
+  },
+): boolean {
+  const active = resolveActiveNavHref(pathname, allNavUrls, options)
+  if (!active) return false
+  return navUrlPath(active) === navUrlPath(url) && navUrlFragment(active) === navUrlFragment(url)
+}
+
+/** Collect every `url` from a nav tree (primary rows + children). */
+export function collectNavUrls(
+  items: ReadonlyArray<{ url?: string; children?: ReadonlyArray<{ url?: string; children?: unknown }> }>,
+): string[] {
+  const out: string[] = []
+  const walk = (list: ReadonlyArray<{ url?: string; children?: ReadonlyArray<{ url?: string; children?: unknown }> }>) => {
+    for (const it of list) {
+      if (typeof it.url === "string" && it.url.length > 0 && it.url !== "#") out.push(it.url)
+      if (Array.isArray(it.children)) walk(it.children)
+    }
+  }
+  walk(items)
+  return out
+}

package/template/.claude/skills/exxat-ds-skill/SKILL.md

@@ -112,7 +112,8 @@ ListPageTemplate
 ```
 
 **Reference implementations:**
-- `components/columns-showcase.tsx` + `components/columns-client.tsx` — smallest single-view hub (start here)
+- `components/library-table.tsx` + `library-client.tsx` — canonical seven-view hub (start here)
+- `components/columns-showcase.tsx` — cell catalog via `LibraryTable` (custom `columnDefs`, same Add view as Library)
 - `components/tokens-themes-client.tsx` + `components/tokens-secondary-nav.tsx` — hub with secondary panel + URL-driven scope + built-in pagination chrome
 - `components/library-table.tsx` + `components/library-hub-client.tsx` — full multi-view hub (table, board, dashboard)
 

package/template/AGENTS.md

@@ -81,7 +81,7 @@ If two documents conflict, prefer the **more specific** rule for the file type,
 
 **MUST:** If the main surface is a **`DataTable`** (or equivalent data grid), wrap it in **`ListPageTemplate`** so the **views toolbar** exists (tabs, add view, per-tab settings). Do **not** place `DataTable` only under `PageHeader` without the tab shell.
 
-**Reference implementations:** `components/library-hub-client.tsx` (full hub), `components/columns-showcase.tsx` (single-view catalog), `components/tokens-themes-client.tsx` (hub + secondary panel).
+**Reference implementations:** `components/library-client.tsx` + `components/library-table.tsx` (canonical seven-view hub), `components/columns-showcase.tsx` (cell catalog via `LibraryTable`), `components/tokens-themes-client.tsx` + `components/tokens-hub-auxiliary-views.tsx`.
 
 **Rationale:** Consistent navigation, saved views, per-tab view type (table / list / board / dashboard), export at template level.
 
@@ -99,6 +99,20 @@ If two documents conflict, prefer the **more specific** rule for the file type,
 
 **Details:** `docs/data-views-pattern.md` (mock data, connected views, dashboard view).
 
+### 4.1.1 Add view parity (`supportedViewTypes`)
+
+**MUST:** Every **`ListPageTemplate`** hub that mounts **`HubTable`** uses the same **seven** Add view options as Library (All questions) unless a narrower list is **documented** in `lib/<entity>-supported-views.ts`:
+
+- Registry constant: **`FULL_HUB_SUPPORTED_VIEWS`** (`@/lib/data-list-view-registry` or `@/lib/full-hub-supported-views.ts`).
+- Pass the **same** allowlist to **`ListPageTemplate`** and **`HubTable`** (or omit on both for the default).
+- Implement a **real renderer** for each allowed view (list = **`ListPageBoardCard`** via `renderListRow` — copy **`library-table.tsx`**).
+- **`LibraryItem`** catalogs (Column types): use **`LibraryTable`** with `columnDefs` + `folders` — do not trim to four views or placeholder list rows.
+- **Tokens:** **`tokens-hub-auxiliary-views.tsx`** + **`FULL_HUB_SUPPORTED_VIEWS`**.
+
+**MUST NOT:** `supportedViewTypes={["table"]}`, bare two-line `renderListRow`, or `PRIMARY_HUB_SUPPORTED_VIEWS` without documented product exception.
+
+**Binding rule:** `.cursor/rules/exxat-hub-supported-views.mdc`. **Pattern doc:** `docs/hub-supported-views-pattern.md`.
+
 ### 4.2 `TablePropertiesDrawer` and the active view
 
 **MUST:** Any page that uses **`ListPageTemplate`** with **`tab.viewType`** (table / list / board / dashboard) and renders **`TablePropertiesDrawer`** **MUST** pass:
@@ -634,6 +648,7 @@ Copy and complete when implementing or reviewing:
 - [ ] **Primary hub + large data:** Same composition as `PlacementsClient` / `TeamClient` (template + metrics when applicable).
 - [ ] **All view tabs:** List/board/dashboard use **`tableState.rows`**; dashboard view uses **`KeyMetrics`** + shared KPI helpers — no “not wired” placeholders or duplicate metric cards.
 - [ ] **Properties drawer:** **`TablePropertiesDrawer`** receives **`currentView`** and **`onViewChange`** from **`renderContent`** / **`updateTab`** + **`dataListViewIcon`** (§4.2) — not table-only copy on Board/List/Dashboard.
+- [ ] **Add view parity:** **`FULL_HUB_SUPPORTED_VIEWS`** on **`ListPageTemplate`** + **`HubTable`** (in sync); every allowed view has a renderer; list uses **`ListPageBoardCard`** — **`.cursor/rules/exxat-hub-supported-views.mdc`**, **`docs/hub-supported-views-pattern.md`**.
 - [ ] **Data view dashboard (Placements / Team / Compliance):** Charts use **`ChartFigure`** + **`ChartDataTable`**; **Edit layout** on toolbar; **`activeBar` / `activeShape`** keyboard styling from **`lib/chart-keyboard-selection`** — not opacity-only **`Cell`** hacks (§4.3).
 - [ ] **Dashboard layout persistence:** **`lib/data-view-dashboard-storage`** (or **`saveDashboardLayout`** / **`loadDashboardLayout`** on Placements); **`mergeDashboardLayout`** on load — no new ad-hoc storage keys for the same layout (§4.3).
 - [ ] **⌘K palette (§7.1):** If adding or changing **`dataGroups`**, map rows in **`lib/command-menu-search-data.ts`** (not `command-menu.tsx`); use **`searchOnly`** on bulky groups; keep **`docs/command-menu-pattern.md`** aligned.

package/template/components/columns-client.tsx

@@ -7,7 +7,7 @@
  * (`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).
+ *   - tabs      : default `table` tab; Add view offers list / board / dashboard (same as Library).
  *   - `renderContent` : the `<ColumnsShowcase />` DataTable surface.
  *
  * Cell patterns are exercised inside `columns-showcase.tsx` so the rendered
@@ -33,6 +33,7 @@ import {
   COLUMNS_SHOWCASE_PATTERN_COUNT,
   COLUMNS_SHOWCASE_PINNED_COUNT,
   COLUMNS_SHOWCASE_SORTABLE_COUNT,
+  COLUMNS_SUPPORTED_VIEWS,
 } from "@/components/columns-showcase"
 
 const COLUMNS_DEFAULT_TABS: ViewTab[] = [
@@ -127,8 +128,8 @@ export function ColumnsClient() {
         onTabsChange={setTabs}
         activeTabId={activeTabId}
         onActiveTabChange={setActiveTabId}
-        supportedViewTypes={["table"]}
         getTabCount={getTabCount}
+        supportedViewTypes={COLUMNS_SUPPORTED_VIEWS}
         header={
           <PageHeader
             title="Column types"

package/template/components/columns-showcase.tsx

@@ -48,7 +48,6 @@
 
 import * as React from "react"
 import {
-  HubTable,
   AttachmentCountCell,
   BooleanToggleCell,
   CurrencyCell,
@@ -66,6 +65,9 @@ import {
   type RowActionDef,
 } from "@/components/data-views"
 import type { DataListViewType } from "@/lib/data-list-view"
+import { FULL_HUB_SUPPORTED_VIEWS } from "@/lib/data-list-view-registry"
+import { LibraryTable } from "@/components/library-table"
+import { DEFAULT_LIBRARY_FOLDERS, type LibraryFolder } from "@/lib/mock/library-folders"
 import { AvatarInitials } from "@/components/ui/avatar"
 import { cn } from "@/lib/utils"
 import {
@@ -477,7 +479,8 @@ 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
+/** Same seven views as Library / All questions (Add view + Properties). */
+export const COLUMNS_SUPPORTED_VIEWS = FULL_HUB_SUPPORTED_VIEWS
 
 export interface ColumnsShowcaseProps {
   /** Active view from `ListPageTemplate.renderContent`. */
@@ -493,6 +496,9 @@ export interface ColumnsShowcaseProps {
  */
 export function ColumnsShowcase({ view, onViewChange }: ColumnsShowcaseProps) {
   const [rows, setRows] = React.useState<LibraryItem[]>(() => buildRows())
+  const [folders, setFolders] = React.useState<LibraryFolder[]>(() =>
+    DEFAULT_LIBRARY_FOLDERS.map(f => ({ ...f })),
+  )
   const [pagination, setPagination] = React.useState(false)
 
   const toggleFavorite = React.useCallback((row: LibraryItem) => {
@@ -514,28 +520,26 @@ export function ColumnsShowcase({ view, onViewChange }: ColumnsShowcaseProps) {
   const columns = useColumns(toggleFavorite, togglePublished)
 
   return (
-    <HubTable<LibraryItem>
-      rows={rows}
-      columns={columns}
+    <LibraryTable
+      items={rows}
+      onItemsChange={setRows}
+      folders={folders}
+      onFoldersChange={setFolders}
       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" }}
+      columnDefs={columns}
+      hubLabels={{
+        hubLabel: "Column types",
+        lifecycleTabLabel: "Column types",
+        searchAriaLabel: "Search columns showcase",
+        listAriaLabel: "Column types",
+        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={{}}
+      showBulkActions={false}
     />
   )
 }

package/template/components/exxat-product-logo.tsx

@@ -186,7 +186,7 @@ function ExxatLogoBase({
 export function ExxatProductLogo({
   product,
   className,
-  variant = "default",
+  variant: _variant = "default",
 }: ExxatProductLogoProps) {
   const customProductBrand = useAppStore(s => s.customProductBrand)
   const productBrandColors = useAppStore(s => s.productBrandColors)