@exxatdesignux/ui 0.2.14 → 0.2.16

package/template/components/hub-tree-panel-view.tsx

@@ -19,7 +19,7 @@ import {
 import { LIST_HUB_INSPECTOR_CHIP_SHELL } from "@/components/list-hub-status-badge"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible"
 import { Separator } from "@/components/ui/separator"
 import { Tip } from "@/components/ui/tip"
 import {
@@ -28,6 +28,14 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
+import {
+  OutlineTreeCollapsibleContentRail,
+  OutlineTreeLeafButton,
+  OutlineTreeMenu,
+  OutlineTreeMenuItem,
+  OutlineTreeSub,
+  OutlineTreeSubItem,
+} from "@/components/data-views/outline-tree-menu"
 import { ListPageTreePanelShell } from "@/components/data-views/list-page-tree-panel-shell"
 import { ListPageSplitDetailsPlaceholder } from "@/components/data-views/list-page-split-details-placeholder"
 import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
@@ -63,7 +71,6 @@ interface TreeItemProps {
   folders: QuestionBankFolder[]
   questions: QuestionBankItem[]
   selectedItemId: string | null
-  depth?: number
   onSelectItem: (itemId: string) => void
 }
 
@@ -72,7 +79,6 @@ function TreeItem({
   folders,
   questions,
   selectedItemId,
-  depth = 0,
   onSelectItem,
 }: TreeItemProps) {
   const childFolders = folders
@@ -83,38 +89,40 @@ function TreeItem({
 
   const hasChildren = childFolders.length > 0 || childQuestions.length > 0
   const isFolderSelected = selectedItemId === folder.id
-  const indent = depth * 12
 
   return (
-    <Collapsible>
-      {/* Folder row */}
-      <div className="group flex items-center hover:bg-muted/50">
-        <div style={{ width: indent }} className="shrink-0" />
-
-        {/* Expand chevron or spacer */}
+    <Collapsible className="group/collapsible">
+      {/* Folder row — chevron column + row body (icons align with shadcn tree pattern) */}
+      <div
+        className={cn(
+          "flex min-h-8 items-center rounded-md px-2 hover:bg-muted/50",
+          isFolderSelected && "bg-accent text-accent-foreground",
+        )}
+      >
         {hasChildren ? (
           <CollapsibleTrigger asChild>
             <button
               type="button"
-              className="flex h-8 w-5 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none"
+              className="flex size-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={folder.name ? `${folder.name} — expand or collapse` : "Expand or collapse folder"}
             >
-              <ChevronRightIcon className="h-3.5 w-3.5 transition-transform duration-150 group-data-[state=open]:rotate-90 [[data-state=open]_&]:rotate-90" />
+              <ChevronRightIcon
+                className="h-3.5 w-3.5 shrink-0 transition-transform duration-150 group-data-[state=open]/collapsible:rotate-90"
+                aria-hidden
+              />
             </button>
           </CollapsibleTrigger>
         ) : (
-          <div className="w-5 shrink-0" />
+          <div className="size-8 shrink-0" aria-hidden />
         )}
 
-        {/* Folder button */}
         <button
           type="button"
           onClick={() => onSelectItem(folder.id)}
           className={cn(
-            "flex flex-1 items-center gap-2 py-1.5 pr-3 text-left text-sm transition-colors duration-75",
+            "flex min-w-0 flex-1 items-center gap-2 py-1.5 pr-3 text-left text-sm transition-colors duration-75",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-            isFolderSelected
-              ? "bg-accent text-accent-foreground"
-              : "text-foreground",
+            !isFolderSelected && "text-foreground",
           )}
           aria-selected={isFolderSelected}
           role="option"
@@ -134,55 +142,51 @@ function TreeItem({
         </button>
       </div>
 
-      {/* Children */}
       {hasChildren && (
-        <CollapsibleContent>
-          {childFolders.map(child => (
-            <TreeItem
-              key={child.id}
-              folder={child}
-              folders={folders}
-              questions={questions}
-              selectedItemId={selectedItemId}
-              depth={depth + 1}
-              onSelectItem={onSelectItem}
-            />
-          ))}
-          {childQuestions.map(question => {
-            const isSelected = selectedItemId === question.id
-            return (
-              <div key={question.id} className="group flex items-center hover:bg-muted/50">
-                <div style={{ width: indent + 12 + 20 }} className="shrink-0" />
-                <button
-                  type="button"
-                  onClick={() => onSelectItem(question.id)}
-                  className={cn(
-                    "flex flex-1 items-center gap-2 py-1.5 pr-3 text-left text-sm transition-colors duration-75",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-                    isSelected
-                      ? "bg-accent text-accent-foreground"
-                      : "text-foreground",
-                  )}
-                  aria-selected={isSelected}
-                  role="option"
-                >
-                  <FileIcon
-                    className={cn(
-                      "h-3.5 w-3.5 shrink-0",
-                      isSelected ? "fill-current opacity-80" : "text-muted-foreground",
-                    )}
-                  />
-                  <span className="min-w-0 flex-1">
-                    <span className="block truncate leading-tight">{question.stem}</span>
-                    <span className="block truncate font-mono text-[11px] text-muted-foreground">
-                      {question.questionId}
+        <OutlineTreeCollapsibleContentRail>
+          <OutlineTreeSub surface="panel" guideLayout="chevronRail">
+            {childFolders.map(child => (
+              <OutlineTreeMenuItem key={child.id}>
+                <TreeItem
+                  folder={child}
+                  folders={folders}
+                  questions={questions}
+                  selectedItemId={selectedItemId}
+                  onSelectItem={onSelectItem}
+                />
+              </OutlineTreeMenuItem>
+            ))}
+            {childQuestions.map(question => {
+              const isSelected = selectedItemId === question.id
+              return (
+                <OutlineTreeSubItem key={question.id}>
+                  <OutlineTreeLeafButton
+                    surface="panel"
+                    isActive={isSelected}
+                    onClick={() => onSelectItem(question.id)}
+                    aria-selected={isSelected}
+                    role="option"
+                    className="h-auto min-h-8 items-start py-1.5"
+                  >
+                    <FileIcon
+                      className={cn(
+                        "mt-0.5 shrink-0",
+                        isSelected ? "fill-current opacity-80" : "text-muted-foreground",
+                      )}
+                      aria-hidden
+                    />
+                    <span className="min-w-0 flex-1 text-left">
+                      <span className="block truncate leading-tight">{question.stem}</span>
+                      <span className="block truncate font-mono text-[11px] text-muted-foreground">
+                        {question.questionId}
+                      </span>
                     </span>
-                  </span>
-                </button>
-              </div>
-            )
-          })}
-        </CollapsibleContent>
+                  </OutlineTreeLeafButton>
+                </OutlineTreeSubItem>
+              )
+            })}
+          </OutlineTreeSub>
+        </OutlineTreeCollapsibleContentRail>
       )}
     </Collapsible>
   )
@@ -262,7 +266,7 @@ function DetailsPanel({ selectedItemId, folders, questions, onClearSelection }:
 
     return (
       <div className="flex h-full min-h-0 flex-col overflow-hidden bg-card">
-        <header className="shrink-0 border-b border-border/60 bg-muted/10 px-4 pb-4 pt-3">
+        <header className="shrink-0 border-b border-border/60 bg-card px-4 pb-4 pt-3">
           <div className="flex items-start justify-between gap-3">
             <p className="font-mono text-xs text-muted-foreground">{question.questionId}</p>
             {onClearSelection ? (
@@ -517,8 +521,8 @@ function DetailsPanel({ selectedItemId, folders, questions, onClearSelection }:
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col items-center justify-center bg-gradient-to-b from-muted/25 to-card px-6 py-10 text-center text-muted-foreground">
-      <div className="mb-3 flex size-12 items-center justify-center rounded-xl border border-border/60 bg-muted/20">
+    <div className="flex h-full min-h-0 flex-col items-center justify-center bg-card px-6 py-10 text-center text-muted-foreground">
+      <div className="mb-3 flex size-12 items-center justify-center rounded-xl border border-border/60 bg-card">
         <FileIcon className="size-6 opacity-50" aria-hidden />
       </div>
       <p className="text-sm font-medium text-foreground">Item not found</p>
@@ -615,23 +619,27 @@ export function HubTreePanelView({
               }
             />
 
-            <div className="min-h-0 flex-1 overflow-y-auto py-1" role="listbox" aria-label="Folder tree">
+            <OutlineTreeMenu
+              className="min-h-0 flex-1 overflow-y-auto py-1"
+              role="listbox"
+              aria-label="Folder tree"
+            >
               {rootFolders.length === 0 ? (
-                <p className="px-3 py-4 text-sm text-muted-foreground">No folders</p>
+                <li className="list-none px-3 py-4 text-sm text-muted-foreground">No folders</li>
               ) : (
                 rootFolders.map(folder => (
-                  <TreeItem
-                    key={folder.id}
-                    folder={folder}
-                    folders={folders}
-                    questions={items}
-                    selectedItemId={selectedItemId}
-                    depth={0}
-                    onSelectItem={setSelectedItemId}
-                  />
+                  <OutlineTreeMenuItem key={folder.id}>
+                    <TreeItem
+                      folder={folder}
+                      folders={folders}
+                      questions={items}
+                      selectedItemId={selectedItemId}
+                      onSelectItem={setSelectedItemId}
+                    />
+                  </OutlineTreeMenuItem>
                 ))
               )}
-            </div>
+            </OutlineTreeMenu>
           </>
         }
         details={

package/template/components/key-metrics.tsx

@@ -5,7 +5,7 @@
  *
  * Variants:
  *   "card"  (default) — shadcn Card wrapper with brand gradient fill
- *   "flat"            — full-width brand gradient band, no card chrome
+ *   "flat"            — full-width soft tint band (brand-tint → background) + bottom glow, no card chrome
  *
  * AA checklist:
  *  ✓ Trend text never relies on colour alone — icon + label (WCAG 1.4.1)
@@ -484,6 +484,8 @@ interface InnerProps {
   metricsHalfWidthLayout?: boolean
   /** Opaque fill behind each KPI cell when using hairline grid gaps (below `lg`). */
   metricsCellSurfaceClassName?: string
+  /** Flat list-page band: softer dividers + tinted cells on a lavender-tinted surface */
+  surfaceVariant?: "default" | "flat"
 }
 
 function KeyMetricsInner({
@@ -502,7 +504,9 @@ function KeyMetricsInner({
   metricsSingleRow = false,
   metricsHalfWidthLayout = false,
   metricsCellSurfaceClassName = "bg-background",
+  surfaceVariant = "default",
 }: InnerProps) {
+  const isFlatBand = surfaceVariant === "flat"
   /** Side-by-side KPI + insight rail (md+). Disabled for half-width dashboard cards — insight stacks below. */
   const insightSideBySide = insight && !insightFullWidth && !metricsHalfWidthLayout
   const stackedRailInsight = insight && !insightFullWidth && metricsHalfWidthLayout
@@ -566,7 +570,10 @@ function KeyMetricsInner({
           */}
           {metricsHalfWidthLayout ? (
             <div
-              className="grid grid-cols-2 divide-x divide-border lg:hidden"
+              className={cn(
+                "grid grid-cols-2 divide-x lg:hidden",
+                isFlatBand ? "divide-border/40" : "divide-border",
+              )}
               style={
                 metricsSingleRow
                   ? {
@@ -586,8 +593,9 @@ function KeyMetricsInner({
           ) : (
             <div
               className={cn(
-                "grid gap-px bg-border lg:hidden",
+                "grid gap-px lg:hidden",
                 "grid-cols-1 md:grid-cols-2",
+                isFlatBand ? "bg-foreground/[0.04]" : "bg-border",
               )}
             >
               {metrics.map((m) => (
@@ -603,10 +611,16 @@ function KeyMetricsInner({
             {rows.map((row, rowIdx) => (
               <React.Fragment key={rowIdx}>
                 {rowIdx > 0 && (
-                  <Separator aria-hidden="true" className="my-1" />
+                  <Separator
+                    aria-hidden="true"
+                    className={cn("my-1", isFlatBand && "bg-foreground/[0.055]")}
+                  />
                 )}
                 <div
-                  className="grid divide-x divide-border"
+                  className={cn(
+                    "grid divide-x",
+                    isFlatBand ? "divide-border/40" : "divide-border",
+                  )}
                   style={{
                     gridTemplateColumns: metricsRowColumns(
                       row.length,
@@ -628,11 +642,20 @@ function KeyMetricsInner({
         {insight && (
           <>
             {insightFullWidth ? (
-              <Separator aria-hidden="true" className="my-4 w-full" />
+              <Separator
+                aria-hidden="true"
+                className={cn("my-4 w-full", isFlatBand && "bg-foreground/[0.06]")}
+              />
             ) : stackedRailInsight ? (
-              <Separator aria-hidden="true" className="my-4 w-full" />
+              <Separator
+                aria-hidden="true"
+                className={cn("my-4 w-full", isFlatBand && "bg-foreground/[0.06]")}
+              />
             ) : (
-              <Separator aria-hidden="true" className="my-3 lg:hidden" />
+              <Separator
+                aria-hidden="true"
+                className={cn("my-3 lg:hidden", isFlatBand && "bg-foreground/[0.055]")}
+              />
             )}
 
             <div
@@ -641,7 +664,10 @@ function KeyMetricsInner({
                 /* Divider + padding replace vertical Separator so grid stays 2 columns */
                 insightSideBySide &&
                   !insightFullWidth &&
-                  "lg:h-full lg:border-l lg:border-border lg:pl-6"
+                  cn(
+                    "lg:h-full lg:border-l lg:pl-6",
+                    isFlatBand ? "lg:border-border/40" : "lg:border-border",
+                  )
               )}
             >
               {insight && !insightFullWidth ? (
@@ -801,7 +827,8 @@ export function KeyMetrics({
         return out
       })()
 
-  const metricsCellSurfaceClassName = variant === "flat" ? "bg-background" : "bg-card"
+  const metricsCellSurfaceClassName =
+    variant === "flat" ? "bg-[var(--key-metrics-flat-cell-bg)]" : "bg-card"
 
   const innerProps: InnerProps = {
     title,
@@ -817,6 +844,7 @@ export function KeyMetrics({
     metricsSingleRow,
     metricsHalfWidthLayout,
     metricsCellSurfaceClassName,
+    surfaceVariant: variant === "flat" ? "flat" : "default",
   }
 
   /*
@@ -849,6 +877,15 @@ export function KeyMetrics({
       "radial-gradient(ellipse 110% 90% at 50% 100%, oklch(from var(--brand-color) l c h / 0.13) 0%, transparent 65%)",
   }
 
+  /** List-page KPI band: soft tint → page bg + gentle lift (avoids a hard line into the toolbar). */
+  const flatBandStyle: React.CSSProperties = {
+    background: [
+      "radial-gradient(ellipse 118% 70% at 50% 100%, oklch(from var(--brand-color) l c h / 0.11) 0%, transparent 60%)",
+      "linear-gradient(180deg, var(--key-metrics-flat-grad-top) 0%, var(--key-metrics-flat-grad-mid) 48%, var(--background) 100%)",
+    ].join(", "),
+    boxShadow: "0 18px 42px -26px color-mix(in oklch, var(--brand-color) 10%, transparent)",
+  }
+
   /* ── Card variant — ChartCard-style chrome ───────────────────────────── */
   if (variant === "card") {
     return (
@@ -917,12 +954,12 @@ export function KeyMetrics({
     )
   }
 
-  /* ── Flat variant — full-width bottom-glow band ───────────────────────── */
+  /* ── Flat variant — soft tint band + bottom glow (no sharp cut to content below) ── */
   return (
     <section
       aria-label={title}
-      className={cn("w-full py-5", className)}
-      style={glowStyle}
+      className={cn("relative w-full overflow-hidden pt-5 pb-6", className)}
+      style={flatBandStyle}
     >
       <KeyMetricsInner
         {...innerProps}

package/template/components/page-header.tsx

@@ -12,7 +12,7 @@
  * WCAG 2.1 AA:
  *  ✓ <h1> landmark — one per page (WCAG 1.3.1)
  *  ✓ Sufficient colour contrast ≥ 4.5:1 on title + subtitle (SC 1.4.3)
- *  ✓ Face stack: `role="group"` + aggregate `aria-label`; each face has a `Tooltip` name
+ *  ✓ Face row: `role="group"` + aggregate `aria-label`; each face has a `Tooltip` name
  */
 
 import * as React from "react"
@@ -23,6 +23,7 @@ import {
 } from "@/lib/collaborator-access"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
 import {
   Tooltip,
   TooltipContent,
@@ -47,16 +48,16 @@ export interface PageHeaderProps {
   title: string
   /** Short descriptor or date shown below the title (and below `accessInfo` when set) */
   subtitle?: string
-  /** Layout preset — `collaboration` enables access line + face stack ahead of `actions`. */
+  /** Layout preset — `collaboration` enables access line + face row ahead of `actions`. */
   variant?: PageHeaderVariant
   /**
    * Role / access copy or badges — rendered between the title and subtitle when
    * `variant="collaboration"` (e.g. lock icon + “Editors can modify”).
    */
   accessInfo?: React.ReactNode
-  /** People with access — shown as an overlapping face stack when `variant="collaboration"`. */
+  /** People with access — shown as a horizontal row of faces when `variant="collaboration"`. */
   collaborators?: PageHeaderCollaborator[]
-  /** Max faces before a `+N` chip — default 4 */
+  /** Max faces before a `+N` chip — default 3 */
   collaboratorDisplayLimit?: number
   /** Opens the invite collaborators sheet when a face, overflow chip, or empty-state CTA is activated. */
   onCollaboratorsOpen?: () => void
@@ -112,14 +113,13 @@ function PageHeaderCollaborationAccess({
       aria-label={names ? `People with access: ${names}` : "People with access"}
       className="flex shrink-0 items-center gap-2 sm:gap-2.5"
     >
-      <div className="flex -space-x-2 ps-0.5">
-        {visible.map((c, index) => (
+      <div className="flex shrink-0 items-center gap-1.5">
+        {visible.map(c => (
           <Tooltip key={c.id}>
             <TooltipTrigger asChild>
               <button
                 type="button"
-                className="relative rounded-full ring-2 ring-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                style={{ zIndex: 10 + index }}
+                className="relative shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                 aria-label={`Open collaborators — ${c.name}`}
                 onClick={onOpenCollaborators}
                 disabled={!onOpenCollaborators}
@@ -140,7 +140,7 @@ function PageHeaderCollaborationAccess({
         {overflow > 0 && (
           <button
             type="button"
-            className="relative z-30 flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium tabular-nums text-muted-foreground ring-2 ring-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:size-7"
+            className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-semibold tabular-nums text-muted-foreground ring-1 ring-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
             aria-label={`Open collaborators — ${overflow} more people with access`}
             onClick={onOpenCollaborators}
             disabled={!onOpenCollaborators}
@@ -159,7 +159,7 @@ export function PageHeader({
   variant = "default",
   accessInfo,
   collaborators,
-  collaboratorDisplayLimit = 4,
+  collaboratorDisplayLimit = 3,
   onCollaboratorsOpen,
   addCollaboratorLabel = COLLABORATION_HEADER_ADD_LABEL,
   actions,
@@ -170,6 +170,8 @@ export function PageHeader({
   const showAccess = Boolean(isCollaboration && accessInfo)
   const showCollaborationAccess = isCollaboration
   const showActionsColumn = Boolean(actions) || showCollaborationAccess
+  const showCollaboratorActionsSeparator =
+    showCollaborationAccess && Boolean(actions)
 
   return (
     <div
@@ -208,6 +210,13 @@ export function PageHeader({
               addCollaboratorLabel={addCollaboratorLabel}
             />
           ) : null}
+          {showCollaboratorActionsSeparator ? (
+            <Separator
+              orientation="vertical"
+              decorative
+              className="h-8 shrink-0"
+            />
+          ) : null}
           {actions}
         </div>
       )}

package/template/components/product-switcher.tsx

@@ -52,10 +52,7 @@ export function ProductSwitcher() {
             >
               {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>
               ) : (
                 <>

package/template/components/question-bank-board-view.tsx

@@ -124,13 +124,18 @@ function useQuestionBankBoardModel(rows: QuestionBankItem[], groupByColumnKey: s
 function QuestionBankBoardCard({
   row,
   onToggleFavorite,
+  onRowActivate,
 }: {
   row: QuestionBankItem
   onToggleFavorite: (row: QuestionBankItem) => void
+  onRowActivate?: (row: QuestionBankItem) => void
 }) {
   const initials = initialsFromDisplayName(row.author)
   return (
-    <ListPageBoardCard className={cn(QUESTION_BANK_FAVORITE_HOVER_GROUP, "w-full")}>
+    <ListPageBoardCard
+      className={cn(QUESTION_BANK_FAVORITE_HOVER_GROUP, "w-full")}
+      onClick={onRowActivate ? () => onRowActivate(row) : undefined}
+    >
       <ListPageBoardCardHeader>
         <ListPageBoardCardTitleRow
           title={(
@@ -171,10 +176,12 @@ export function QuestionBankBoardView({
   rows,
   groupByColumnKey,
   onToggleFavorite,
+  onRowActivate,
 }: {
   rows: QuestionBankItem[]
   groupByColumnKey: string
   onToggleFavorite: (row: QuestionBankItem) => void
+  onRowActivate?: (row: QuestionBankItem) => void
 }) {
   const allowed = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(o => o.key === groupByColumnKey)
   const key = allowed ? groupByColumnKey : "topic"
@@ -187,7 +194,9 @@ export function QuestionBankBoardView({
       getRowKey={r => r.id}
       columnCountBadgeClassName={badgeMap}
       emptyColumnLabel="No questions"
-      renderCard={row => <QuestionBankBoardCard row={row} onToggleFavorite={onToggleFavorite} />}
+      renderCard={row => (
+        <QuestionBankBoardCard row={row} onToggleFavorite={onToggleFavorite} onRowActivate={onRowActivate} />
+      )}
     />
   )
 }