@exxatdesignux/ui 0.2.14 → 0.2.16

package/template/components/app-sidebar.tsx

@@ -52,6 +52,7 @@ import {
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { StatusBadge } from "@/components/ui/status-badge"
+import { Separator } from "@/components/ui/separator"
 import {
   Tooltip,
   TooltipContent,
@@ -108,7 +109,8 @@ function normalizedLocationHash(locationHash: string): string {
 /**
  * Whether `pathname` (+ optional `location.hash`) matches a sidebar `href`.
  * When several links share the same path (e.g. `/settings`), disambiguate with `#fragment`
- * and require an empty hash for the “default” row (`/settings` with no `#`).
+ * 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.
  */
 function isNavActive(pathname: string, url: string, locationHash = ""): boolean {
   const pathOnly = navUrlPath(url)
@@ -129,7 +131,8 @@ function isNavActive(pathname: string, url: string, locationHash = ""): boolean
   }
 
   if (pathOnly === "/") return pathname === "/" && h === ""
-  if (pathname === pathOnly) return h === ""
+  /** Exact path match — ignore `location.hash` when the nav `href` has no `#…` fragment (QB view tabs use hash). */
+  if (pathname === pathOnly) return true
   // Design system library — active on hub and detail routes.
   if (pathOnly === "/library") {
     return pathname.startsWith("/library/")
@@ -165,6 +168,16 @@ function isCollapsibleChildActive(
 
   if (!isNavActive(pathname, child.url, locationHash)) return false
 
+  /** Hub entry (`/question-bank`) must not stay “active” on `/question-bank/library` etc. */
+  if (parent.primaryHubChildKey && child.key === parent.primaryHubChildKey) {
+    const hubPath = navUrlPath(parent.url)
+    if (hubPath) {
+      const normalized =
+        pathname.length > 1 && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname
+      if (normalized !== hubPath) return false
+    }
+  }
+
   const urls = children.map(c => c.url)
   const allSameUrl = urls.length > 1 && urls.every(u => u === urls[0])
   if (allSameUrl) {
@@ -176,6 +189,32 @@ function isCollapsibleChildActive(
   return true
 }
 
+/**
+ * “Selected” styling on a collapsible **parent** row — not the same as “a descendant route is open”.
+ * When a child row is the current destination (e.g. Library on `/question-bank/library`), the parent
+ * should stay visually neutral while the child carries `data-active`. Only highlight the parent when
+ * the active child is the hub row whose `href` matches the parent (e.g. Question hub on `/question-bank`),
+ * or when no child matches but the parent URL still matches (edge routes).
+ */
+function isCollapsibleParentMenuButtonActive(
+  pathname: string,
+  item: NavLinkItem,
+  locationHash: string,
+): boolean {
+  const children = item.children
+  if (!children?.length) return isNavActive(pathname, item.url, locationHash)
+
+  const activeChildren = children.filter(c =>
+    isCollapsibleChildActive(pathname, item, c, locationHash),
+  )
+  if (activeChildren.length === 0) {
+    return isNavActive(pathname, item.url, locationHash)
+  }
+  if (activeChildren.length !== 1) return false
+  const [child] = activeChildren
+  return navUrlPath(child.url) === navUrlPath(item.url)
+}
+
 /** Accessible suffix for sidebar badges (badge is rendered outside the link node). */
 function badgeAccessibleSuffix(badge: number | string): string {
   if (typeof badge === "number") return `${badge} items`
@@ -183,30 +222,40 @@ function badgeAccessibleSuffix(badge: number | string): string {
 }
 
 /** Child row for expandable nav items — shared by inline sub-menu and collapsed-rail popover. */
-function SidebarNavChildLink({
-  parent,
-  child,
-  pathname,
-  locationHash,
-  onNavigate,
-  linkClassName,
-}: {
-  parent: NavLinkItem
-  child: NavLinkItem
-  pathname: string
-  locationHash: string
-  onNavigate?: () => void
-  /** Popover uses surface tokens; inline sub-menu uses `SidebarMenuSubButton`. */
-  linkClassName?: string
-}) {
+const SidebarNavChildLink = React.forwardRef<
+  HTMLAnchorElement,
+  {
+    parent: NavLinkItem
+    child: NavLinkItem
+    pathname: string
+    locationHash: string
+    onNavigate?: () => void
+    /** Popover uses surface tokens; inline sub-menu uses `SidebarMenuSubButton`. */
+    linkClassName?: string
+  } & Omit<React.ComponentPropsWithoutRef<typeof Link>, "href">
+>(function SidebarNavChildLink(
+  {
+    parent,
+    child,
+    pathname,
+    locationHash,
+    onNavigate,
+    linkClassName,
+    className: incomingClassName,
+    onClick,
+    ...linkRest
+  },
+  ref,
+) {
   const { openPanel } = useSecondaryPanel()
   const childActive = isCollapsibleChildActive(pathname, parent, child, locationHash)
   const childPath = navUrlPath(child.url)
 
   return (
     <Link
+      ref={ref}
       href={child.url}
-      className={cn("flex min-w-0 items-center gap-2", linkClassName)}
+      className={cn("flex min-w-0 items-center gap-2", linkClassName, incomingClassName)}
       aria-current={childActive ? "page" : undefined}
       onClick={e => {
         onNavigate?.()
@@ -218,15 +267,18 @@ function SidebarNavChildLink({
           e.preventDefault()
           openPanel(parent.secondaryPanel)
         }
+        onClick?.(e)
       }}
+      {...linkRest}
     >
       <span className="size-4 shrink-0 inline-flex items-center justify-center" aria-hidden="true">
-        {child.icon}
+        {childActive && child.iconActive ? child.iconActive : child.icon}
       </span>
       <span className="min-w-0 flex-1 truncate">{child.title}</span>
     </Link>
   )
-}
+})
+SidebarNavChildLink.displayName = "SidebarNavChildLink"
 
 /**
  * CollapsibleNavItem — isolated component so each collapsible has its own
@@ -235,19 +287,17 @@ function SidebarNavChildLink({
  * server (SSR) vs the client (router not yet available).
  */
 function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: string }) {
-  const locationHash     = useLocationHash()
-  const isActive         = isNavActive(pathname, item.url, locationHash)
+  const locationHash = useLocationHash()
   const isAnyChildActive =
     item.children?.some(c => isCollapsibleChildActive(pathname, item, c, locationHash)) ?? false
+  const parentMenuButtonActive = isCollapsibleParentMenuButtonActive(pathname, item, locationHash)
   const { state, isMobile } = useSidebar()
-  const { openPanel } = useSecondaryPanel()
   const [open, setOpen] = React.useState(false)
   const [flyoutOpen, setFlyoutOpen] = React.useState(false)
   const flyoutTitleId = React.useId()
   const iconRailCollapsed = state === "collapsed" && !isMobile
-  const showActiveStyle = isActive || isAnyChildActive
   const triggerIcon =
-    showActiveStyle && item.iconActive ? item.iconActive : item.icon
+    parentMenuButtonActive && item.iconActive ? item.iconActive : item.icon
 
   React.useEffect(() => {
     setOpen(isAnyChildActive)
@@ -267,23 +317,20 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
           open={flyoutOpen}
           onOpenChange={next => {
             setFlyoutOpen(next)
-            if (next && item.secondaryPanel) {
-              openPanel(item.secondaryPanel)
-            }
           }}
         >
           <Tooltip>
             <TooltipTrigger asChild>
               <PopoverTrigger asChild>
                 <SidebarMenuButton
-                  isActive={showActiveStyle}
+                  isActive={parentMenuButtonActive}
                   aria-haspopup="dialog"
                   aria-label={`${item.title} — open subpages`}
                 >
                   <span
                     className={cn(
                       "size-4 shrink-0 flex items-center justify-center",
-                      showActiveStyle &&
+                      parentMenuButtonActive &&
                         "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
                     )}
                     aria-hidden="true"
@@ -341,9 +388,6 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
       open={open}
       onOpenChange={next => {
         setOpen(next)
-        if (next && item.secondaryPanel) {
-          openPanel(item.secondaryPanel)
-        }
       }}
       asChild
     >
@@ -351,12 +395,12 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
         <Tooltip>
           <TooltipTrigger asChild>
             <CollapsibleTrigger asChild>
-              <SidebarMenuButton isActive={showActiveStyle}>
+              <SidebarMenuButton isActive={parentMenuButtonActive}>
                 <span
-                  key={showActiveStyle ? "active" : "idle"}
+                  key={parentMenuButtonActive ? "active" : "idle"}
                   className={cn(
                     "size-4 shrink-0 flex items-center justify-center",
-                    showActiveStyle &&
+                    parentMenuButtonActive &&
                       "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
                   )}
                   aria-hidden="true"
@@ -769,10 +813,7 @@ function ProductLogoButton() {
             >
               {iconRail ? (
                 <span className="flex size-8 shrink-0 items-center justify-center">
-                  <ExxatProductMark
-                    product={current.id}
-                    className="size-7 max-h-none"
-                  />
+                  <ExxatProductMark product={current.id} className="size-7" />
                 </span>
               ) : (
                 <span className="flex min-h-0 min-w-0 flex-1 items-stretch gap-2">
@@ -901,6 +942,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                   <ProductLogoButton />
                 </SidebarMenuItem>
               </SidebarMenu>
+              <div className="flex w-full justify-center px-2">
+                <Separator
+                  orientation="horizontal"
+                  decorative
+                  className="my-1.5 h-px w-full max-w-none shrink-0 bg-sidebar-border group-data-[collapsible=icon]:w-8"
+                />
+              </div>
               <TeamSwitcher />
             </SidebarHeaderStack>
           </SidebarHeader>

package/template/components/ask-leo-sidebar.tsx

@@ -286,8 +286,7 @@ export function AskLeoSidebar() {
       style={
         open
           ? {
-              background:
-                "linear-gradient(180deg, color-mix(in oklch, var(--brand-color) 4%, var(--background)) 0%, color-mix(in oklch, var(--brand-color) 8%, var(--background)) 100%)",
+              background: "var(--leo-surface-gradient)",
             }
           : undefined
       }

package/template/components/compliance-board-view.tsx

@@ -79,10 +79,16 @@ function useComplianceBoardModel(rows: ComplianceItem[], groupByColumnKey: strin
   }, [rows, groupByColumnKey])
 }
 
-function ComplianceBoardCard({ row }: { row: ComplianceItem }) {
+function ComplianceBoardCard({
+  row,
+  onRowActivate,
+}: {
+  row: ComplianceItem
+  onRowActivate?: (row: ComplianceItem) => void
+}) {
   const ownerInitials = initialsFromDisplayName(row.owner)
   return (
-    <ListPageBoardCard className="w-full">
+    <ListPageBoardCard className="w-full" onClick={onRowActivate ? () => onRowActivate(row) : undefined}>
       <ListPageBoardCardHeader>
         <ListPageBoardCardTitleRow
           title={row.title}
@@ -114,9 +120,11 @@ export const COMPLIANCE_BOARD_GROUP_OPTIONS = [
 export function ComplianceBoardView({
   rows,
   groupByColumnKey,
+  onRowActivate,
 }: {
   rows: ComplianceItem[]
   groupByColumnKey: string
+  onRowActivate?: (row: ComplianceItem) => void
 }) {
   const key = groupByColumnKey === "category" ? "category" : "status"
   const { columns, badgeMap } = useComplianceBoardModel(rows, key)
@@ -128,7 +136,7 @@ export function ComplianceBoardView({
       getRowKey={r => r.id}
       columnCountBadgeClassName={badgeMap}
       emptyColumnLabel="No items"
-      renderCard={row => <ComplianceBoardCard row={row} />}
+      renderCard={row => <ComplianceBoardCard row={row} onRowActivate={onRowActivate} />}
     />
   )
 }

package/template/components/compliance-list-view.tsx

@@ -10,12 +10,19 @@ import {
 } from "@/lib/list-status-badges"
 import type { ComplianceItem } from "@/lib/mock/compliance"
 
-function ComplianceListRow({ row }: { row: ComplianceItem }) {
+function ComplianceListRow({
+  row,
+  onRowActivate,
+}: {
+  row: ComplianceItem
+  onRowActivate?: (row: ComplianceItem) => void
+}) {
   return (
     <li>
       <ListPageBoardCard
         layout="row"
         rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
+        onClick={onRowActivate ? () => onRowActivate(row) : undefined}
         rowEnd={
           <div className="flex shrink-0 items-center gap-2">
             <ListHubStatusBadge
@@ -40,7 +47,13 @@ function ComplianceListRow({ row }: { row: ComplianceItem }) {
   )
 }
 
-export function ComplianceListView({ rows }: { rows: ComplianceItem[] }) {
+export function ComplianceListView({
+  rows,
+  onRowActivate,
+}: {
+  rows: ComplianceItem[]
+  onRowActivate?: (row: ComplianceItem) => void
+}) {
   if (rows.length === 0) {
     return (
       <div className="px-4 py-16 text-center lg:px-6">
@@ -52,7 +65,7 @@ export function ComplianceListView({ rows }: { rows: ComplianceItem[] }) {
   return (
     <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
       {rows.map(row => (
-        <ComplianceListRow key={row.id} row={row} />
+        <ComplianceListRow key={row.id} row={row} onRowActivate={onRowActivate} />
       ))}
     </ul>
   )

package/template/components/compliance-table.tsx

@@ -509,7 +509,10 @@ export const ComplianceTable = React.forwardRef<
     return (
       <div className="flex min-h-0 flex-1 flex-col">
         {sharedToolbar}
-        <ComplianceListView rows={tableState.rows as ComplianceItem[]} />
+        <ComplianceListView
+          rows={tableState.rows as ComplianceItem[]}
+          onRowActivate={row => tableState.toggleRow(row.id)}
+        />
       </div>
     )
   }
@@ -521,6 +524,7 @@ export const ComplianceTable = React.forwardRef<
         <ComplianceBoardView
           rows={tableState.rows as ComplianceItem[]}
           groupByColumnKey={complianceBoardGroupKey}
+          onRowActivate={row => tableState.toggleRow(row.id)}
         />
       </div>
     )

package/template/components/data-table/index.tsx

@@ -214,7 +214,7 @@ function FilterPillBase<TData>({
       <PopoverAnchor asChild>
       <div
         className={cn(
-          "inline-flex items-center rounded border text-xs transition-colors",
+          "inline-flex cursor-pointer items-center rounded border text-xs transition-colors",
           isActive ? "border-brand/45 bg-brand/10" : "border-input bg-background"
         )}
       >
@@ -222,7 +222,7 @@ function FilterPillBase<TData>({
           <button
             type="button"
             className={cn(
-              "inline-flex items-center gap-1 h-6 pl-2 pr-1.5 rounded-l transition-colors",
+              "inline-flex cursor-pointer items-center gap-1 h-6 pl-2 pr-1.5 rounded-l transition-colors",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
               isActive ? "hover:bg-brand/15" : "hover:bg-interactive-hover",
             )}
@@ -240,7 +240,7 @@ function FilterPillBase<TData>({
           aria-label={`Remove ${col.label} filter`}
           onClick={() => onRemove(filter.id)}
           className={cn(
-            "inline-flex items-center justify-center h-6 w-5 rounded-r transition-colors",
+            "inline-flex cursor-pointer items-center justify-center h-6 w-5 rounded-r transition-colors",
             "text-muted-foreground hover:text-destructive",
             isActive ? "hover:bg-brand/15" : "hover:bg-interactive-hover",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
@@ -496,7 +496,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <button type="button"
-                className="inline-flex items-center gap-1 h-6 px-2 rounded text-xs text-muted-foreground hover:text-interactive-hover-foreground border border-dashed border-input/70 hover:border-input hover:bg-interactive-hover-subtle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="inline-flex cursor-pointer items-center gap-1 h-6 px-2 rounded text-xs text-muted-foreground hover:text-interactive-hover-foreground border border-dashed border-input/70 hover:border-input hover:bg-interactive-hover-subtle transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <i className="fa-light fa-plus text-xs" aria-hidden="true" />
                 Add filter
@@ -518,7 +518,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
             <button
               type="button"
               onClick={() => setActiveFilters([])}
-              className="text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors px-1"
+              className="cursor-pointer text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors px-1"
             >
               Clear all
             </button>
@@ -556,7 +556,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                   type="button"
                   aria-label="Clear search"
                   onClick={() => setSearch("")}
-                  className="absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  className="absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex cursor-pointer size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 >
                   <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
                 </button>
@@ -568,7 +568,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                 <TooltipTrigger asChild>
                   <button type="button" aria-label="Search"
                     onClick={() => { setSearchOpen(true); setTimeout(() => searchRef.current?.focus(), 10) }}
-                    className="inline-flex shrink-0 items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    className="inline-flex shrink-0 cursor-pointer items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   >
                     <i className="fa-light fa-magnifying-glass text-[13px]" aria-hidden="true" />
                   </button>
@@ -596,7 +596,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                       aria-label={filterBarVisible ? "Hide filters" : "Show filters"}
                       onClick={() => setFilterBarVisible(v => !v)}
                       className={cn(
-                        "inline-flex shrink-0 items-center gap-1 size-8 justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        "inline-flex shrink-0 cursor-pointer items-center gap-1 size-8 justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                         filterBarVisible
                           ? "bg-accent text-accent-foreground hover:bg-accent/90"
                           : "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover",
@@ -610,7 +610,7 @@ export function DataTableToolbar<TData extends Record<string, unknown>>({
                       <DropdownMenuTrigger asChild>
                         <button type="button" aria-label="Add filter"
                           onClick={() => setFilterBarVisible(true)}
-                          className="inline-flex shrink-0 items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                          className="inline-flex shrink-0 cursor-pointer items-center justify-center size-8 rounded-md text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                         >
                           <i className="fa-light fa-filter text-[13px]" aria-hidden="true" />
                         </button>
@@ -1325,19 +1325,33 @@ function DataTableInner<TData extends Record<string, unknown>>({
                   const rowId = getRowId(row, rowIndex, getRowIdProp)
                   const isSelected = selected.has(rowId)
                   const isHovered  = hoveredRow === rowId
+                  const rowClickable = Boolean(onRowClick) || selectable
+                  function handleRowClick(e: React.MouseEvent<HTMLTableRowElement>) {
+                    if (!rowClickable) return
+                    const el = e.target as HTMLElement | null
+                    if (!el) return
+                    if (el.closest("button, a, input, textarea, select, label, [role='checkbox']")) return
+                    if (onRowClick) {
+                      onRowClick(row)
+                      return
+                    }
+                    if (selectable) {
+                      toggleRow(rowId)
+                    }
+                  }
                   return (
                     <tr
                       key={String(rowId)}
                       data-state={isSelected ? "selected" : undefined}
                       onMouseEnter={() => setHoveredRow(rowId)}
                       onMouseLeave={() => setHoveredRow(null)}
-                      onClick={onRowClick ? () => onRowClick(row) : undefined}
+                      onClick={rowClickable ? handleRowClick : undefined}
                       data-new={Boolean((row as Record<string, unknown>).isNew) || undefined}
                       className={cn(
                         "group/row transition-colors",
                         "hover:bg-dt-row-hover",
                         isSelected && "bg-dt-row-selected text-dt-row-selected-fg",
-                        onRowClick && "cursor-pointer",
+                        rowClickable && "cursor-pointer",
                         Boolean((row as Record<string, unknown>).isNew) && "bg-dt-new-row-bg border-l-2 border-l-dt-new-row-border"
                       )}
                     >

package/template/components/data-views/finder-panel-view.tsx

@@ -3,7 +3,7 @@
 /**
  * FinderPanelView — Miller-style 3-column split for list-page hubs.
  *
- * Visual shell matches Question bank panel (`ListPageTreeColumnHeader`, `bg-muted/15` columns,
+ * Visual shell matches Question bank panel (`ListPageTreeColumnHeader`, `LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS`,
  * shared resizable handles) — see `list-page-split-hub-tokens.ts`.
  */
 
@@ -142,7 +142,7 @@ export function FinderGroupStrip({
     <div
       role="toolbar"
       aria-label={ariaLabel}
-      className="flex min-h-10 flex-wrap items-center gap-1.5 border-b border-border bg-muted/15 px-2 py-2"
+      className="flex min-h-10 flex-wrap items-center gap-1.5 border-b border-border bg-card px-2 py-2"
     >
       {groups.map(group => {
         const isSelected = group.id === selectedGroupId

package/template/components/data-views/index.ts

@@ -47,6 +47,25 @@ export {
   type ListPageTreeColumnHeaderProps,
 } from "@/components/data-views/list-page-tree-column-header"
 
+/** VS Code–style outline tree chrome — mirrors shadcn `SidebarMenuSub` (see module doc). */
+export {
+  OutlineTreeCollapsibleContentRail,
+  OutlineTreeLeafButton,
+  OutlineTreeMenu,
+  OutlineTreeMenuItem,
+  OutlineTreeSub,
+  OutlineTreeSubItem,
+  OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS,
+  OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS,
+  OUTLINE_TREE_SUB_ROW_SHIFT_CLASS,
+  type OutlineTreeGuideLayout,
+  type OutlineTreeLeafButtonProps,
+  type OutlineTreeSurface,
+} from "@/components/data-views/outline-tree-menu"
+
+export { QuestionBankFolderTreeBranch } from "@/components/data-views/question-bank-folder-tree-branch"
+export type { QuestionBankFolderTreeBranchProps } from "@/components/data-views/question-bank-folder-tree-branch"
+
 export {
   LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
   LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,

package/template/components/data-views/list-page-split-details-placeholder.tsx

@@ -10,7 +10,7 @@ export interface ListPageSplitDetailsPlaceholderProps {
 }
 
 /**
- * Empty right pane for split hubs — matches Question bank tree “Nothing selected”.
+ * Empty right pane for split hubs — flat `bg-card` to match Miller / tree columns.
  */
 export function ListPageSplitDetailsPlaceholder({
   title = "Nothing selected",
@@ -20,11 +20,11 @@ export function ListPageSplitDetailsPlaceholder({
   return (
     <div
       className={cn(
-        "flex h-full min-h-0 flex-col items-center justify-center bg-gradient-to-b from-muted/25 via-card to-card px-6 py-10 text-center",
+        "flex h-full min-h-0 flex-col items-center justify-center bg-card px-6 py-10 text-center",
         className,
       )}
     >
-      <div className="mb-4 flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/70 bg-muted/25">
+      <div className="mb-4 flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/70 bg-card">
         <i
           className="fa-light fa-sidebar text-[1.65rem] leading-none text-muted-foreground/70"
           aria-hidden="true"

package/template/components/data-views/list-page-split-hub-tokens.ts

@@ -9,7 +9,7 @@ export const LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS =
 
 /** Primary column stack (scope list, folder list, record list, …). */
 export const LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS =
-  "flex min-h-0 min-w-0 flex-col bg-muted/15"
+  "flex min-h-0 min-w-0 flex-col bg-card"
 
 /** Right-hand inspector / detail column shell. */
 export const LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS =

package/template/components/data-views/list-page-tree-column-header.tsx

@@ -19,7 +19,7 @@ export function ListPageTreeColumnHeader({
   className,
 }: ListPageTreeColumnHeaderProps) {
   return (
-    <div className={cn("shrink-0 border-b border-border/50 bg-muted/10 px-3 py-2", className)}>
+    <div className={cn("shrink-0 border-b border-border/50 bg-card px-3 py-2", className)}>
       <div className="flex h-9 items-center justify-between gap-2">
         <h3 className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">{title}</h3>
         {trailing ? (