@exxatdesignux/ui 0.2.6 → 0.2.7

package/template/app/(app)/data-list/page.tsx

@@ -3,7 +3,7 @@ import { PrimaryPageTemplate } from "@/components/templates/primary-page-templat
 
 export default function DataListPage() {
   return (
-    <PrimaryPageTemplate siteHeader={{ title: "Placements" }}>
+    <PrimaryPageTemplate siteHeader={{ title: "List hub" }}>
       <DataListClient />
     </PrimaryPageTemplate>
   )

package/template/app/(app)/examples/page.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link"
+import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
+import { Button } from "@/components/ui/button"
+
+const LINKS = [
+  { href: "/dashboard", label: "Dashboard", description: "Metrics, charts, and layout patterns." },
+  { href: "/data-list", label: "List hub", description: "Table, list, board, and dashboard views on shared state." },
+  { href: "/question-bank", label: "Question bank", description: "Folders, OS folder view, panel, and tree demos on mock items." },
+  { href: "/settings", label: "Settings", description: "Appearance, tours, and shell preferences." },
+  { href: "/help", label: "Help", description: "Support and documentation entry points." },
+] as const
+
+export default function ExamplesPage() {
+  return (
+    <PrimaryPageTemplate
+      siteHeader={{ title: "Patterns" }}
+      maxWidthClassName="max-w-3xl"
+      contentClassName="px-4 lg:px-6 py-8"
+      bodyClassName="overflow-y-auto"
+    >
+      <p className="text-sm text-muted-foreground mb-6">
+        This workspace ships neutral chrome so you can reuse layouts, data views, and tokens as a design system.
+      </p>
+      <ul className="flex flex-col gap-3" role="list">
+        {LINKS.map((item) => (
+          <li key={item.href}>
+            <Button variant="outline" className="h-auto w-full justify-start gap-3 py-4 px-4" asChild>
+              <Link href={item.href}>
+                <span className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left">
+                  <span className="font-medium text-foreground">{item.label}</span>
+                  <span className="text-xs font-normal text-muted-foreground">{item.description}</span>
+                </span>
+                <i className="fa-light fa-arrow-right shrink-0 text-muted-foreground" aria-hidden="true" />
+              </Link>
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </PrimaryPageTemplate>
+  )
+}

package/template/app/(app)/question-bank/page.tsx

@@ -1,10 +1,10 @@
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
+import { Suspense } from "react"
 import { QuestionBankClient } from "@/components/question-bank-client"
 
 export default function QuestionBankPage() {
   return (
-    <PrimaryPageTemplate siteHeader={{ title: "Question bank" }}>
+    <Suspense fallback={null}>
       <QuestionBankClient />
-    </PrimaryPageTemplate>
+    </Suspense>
   )
 }

package/template/app/globals.css

@@ -13,7 +13,7 @@
 @import "shadcn/tailwind.css";
 
 /* Ensure Tailwind scans the shared UI package for utility classes */
-@source "../node_modules/@exxatdesignux/ui/src";
+@source "../../../packages/ui/src";
 
 /* RTL layout direction support */
 @custom-variant dark (&:is(.dark *));

package/template/components/app-sidebar.tsx

@@ -63,6 +63,8 @@ import { Tip } from "@/components/ui/tip"
 import { requestOpenCommandMenu } from "@/components/command-menu"
 import { Kbd, KbdGroup } from "@/components/ui/kbd"
 import { useModKeyLabel } from "@/hooks/use-mod-key-label"
+import { useLocationHash } from "@/hooks/use-location-hash"
+import { useSidebarReflowZoom } from "@/hooks/use-sidebar-reflow-zoom"
 import { useProduct, type Product } from "@/contexts/product-context"
 import { NavUser } from "@/components/nav-user"
 import { useSecondaryPanel } from "@/components/secondary-panel"
@@ -106,17 +108,6 @@ function isNavActive(pathname: string, url: string): boolean {
   return pathname.startsWith(`${pathOnly}/`)
 }
 
-function useLocationHash(): string {
-  const [hash, setHash] = React.useState("")
-  React.useEffect(() => {
-    const read = () => setHash(typeof window !== "undefined" ? window.location.hash : "")
-    read()
-    window.addEventListener("hashchange", read)
-    return () => window.removeEventListener("hashchange", read)
-  }, [])
-  return hash
-}
-
 /** Sub-item active — catalog detail routes, hash fragments, or duplicate hub URLs (Rotations). */
 function isCollapsibleChildActive(
   pathname: string,
@@ -217,6 +208,7 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
   const isAnyChildActive =
     item.children?.some(c => isCollapsibleChildActive(pathname, item, c, locationHash)) ?? false
   const { state, isMobile } = useSidebar()
+  const { openPanel } = useSecondaryPanel()
   const [open, setOpen]  = React.useState(isAnyChildActive)
   const [flyoutOpen, setFlyoutOpen] = React.useState(false)
   const flyoutTitleId = React.useId()
@@ -239,7 +231,15 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
   if (iconRailCollapsed) {
     return (
       <SidebarMenuItem>
-        <Popover open={flyoutOpen} onOpenChange={setFlyoutOpen}>
+        <Popover
+          open={flyoutOpen}
+          onOpenChange={next => {
+            setFlyoutOpen(next)
+            if (next && item.secondaryPanel) {
+              openPanel(item.secondaryPanel)
+            }
+          }}
+        >
           <Tooltip>
             <TooltipTrigger asChild>
               <PopoverTrigger asChild>
@@ -305,7 +305,16 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
   }
 
   return (
-    <Collapsible open={open} onOpenChange={setOpen} asChild>
+    <Collapsible
+      open={open}
+      onOpenChange={next => {
+        setOpen(next)
+        if (next && item.secondaryPanel) {
+          openPanel(item.secondaryPanel)
+        }
+      }}
+      asChild
+    >
       <SidebarMenuItem>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -359,6 +368,7 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
 }
 
 function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: string }) {
+  const { openPanel } = useSecondaryPanel()
   return (
     <>
       {items.map(item => {
@@ -370,6 +380,7 @@ function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: str
         }
 
         const isActive = isNavActive(pathname, item.url)
+        const itemPath = navUrlPath(item.url)
         return (
           <SidebarMenuItem key={item.key}>
             <SidebarMenuButton asChild isActive={isActive} tooltip={item.title}>
@@ -381,6 +392,17 @@ function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: str
                     ? `${item.title}, ${badgeAccessibleSuffix(item.badge)}`
                     : undefined
                 }
+                onClick={e => {
+                  if (
+                    item.secondaryPanel &&
+                    itemPath &&
+                    pathname === itemPath &&
+                    !item.url.includes("#")
+                  ) {
+                    e.preventDefault()
+                    openPanel(item.secondaryPanel)
+                  }
+                }}
               >
                 <span
                   key={isActive ? "active" : "idle"}
@@ -794,38 +816,28 @@ function SidebarHeaderStack({ children }: { children: React.ReactNode }) {
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const pathname = usePathname()
   const { isMobile, setOpen } = useSidebar()
+  const reflowZoom = useSidebarReflowZoom()
 
   return (
     <Sidebar collapsible="icon" {...props}>
       {/*
-        Sticky bottom profile + WCAG 1.4.10 Reflow escape hatch.
-
-        Normal viewport:
-          nav       → flex column, fills the rail
-          content   → flex-1 + overflow-auto (scrolls)
-          footer    → shrink-0 sibling of content (pinned at the bottom)
-
-        ≥ 200 % browser zoom (≈ viewport height ≤ 640 CSS px) — WCAG 1.4.10
-        Reflow requires that content stay reachable at high zoom; sticky/pinned
-        elements can otherwise eat most of the short viewport and trap users.
-        At that breakpoint we make the <nav> itself the single scroll surface
-        and un-flex the content, so the footer falls into the natural document
-        flow (nothing is sticky anymore and everything scrolls together).
+        Normal: scrollable primary rail + sticky bottom block (Settings, Help, profile).
+        High zoom / very short viewport (`useSidebarReflowZoom`): single scroll on <nav>
+        so nothing is pinned off-screen (WCAG 1.4.10 reflow).
       */}
       <nav
         aria-label="Application"
         data-exxat-sidebar="application-nav"
+        data-reflow-zoom={reflowZoom ? "true" : "false"}
         className={cn(
           "flex min-h-0 flex-1 flex-col",
-          "[@media(max-height:640px)]:overflow-y-auto",
+          reflowZoom && "overflow-y-auto",
         )}
       >
         <SidebarContent
           className={cn(
             "gap-0",
-            // At high zoom, the outer <nav> becomes the scroller — un-flex the
-            // content region so the footer joins the single scroll flow.
-            "[@media(max-height:640px)]:!flex-none [@media(max-height:640px)]:!overflow-visible",
+            reflowZoom && "!flex-none !overflow-visible",
           )}
         >
           <SidebarHeader className="border-b border-sidebar-border pb-2">
@@ -882,17 +894,22 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             </SidebarGroupContent>
           </SidebarGroup>
 
-          <SidebarGroup className="py-2 border-t border-sidebar-border" role="group" aria-label="Utilities">
+        </SidebarContent>
+
+        {/* Settings + Help + profile — pinned under the scrollable rail unless reflow-zoom. */}
+        <SidebarFooter
+          className={cn(
+            "mt-auto border-t border-sidebar-border bg-sidebar",
+            reflowZoom && "mt-0 shrink-0",
+          )}
+        >
+          <SidebarGroup className="py-2" role="group" aria-label="Utilities">
             <SidebarGroupContent>
               <SidebarMenu className="gap-0.5">
                 <SidebarNavSecondaryItems items={NAV_SECONDARY} pathname={pathname} />
               </SidebarMenu>
             </SidebarGroupContent>
           </SidebarGroup>
-        </SidebarContent>
-
-        {/* Sticky profile — sibling of the scroll area, not a child. */}
-        <SidebarFooter className="border-t border-sidebar-border">
           <NavUser user={NAV_USER} />
         </SidebarFooter>
       </nav>

package/template/components/compliance-table.tsx

@@ -44,6 +44,8 @@ import { Tip } from "@/components/ui/tip"
 import { CoachMark } from "@/components/ui/coach-mark"
 import { useCoachMark } from "@/hooks/use-coach-mark"
 import { DASHBOARD_CUSTOMIZE_COACH_STEPS } from "@/lib/dashboard-customize-coach-mark"
+import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
+import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
 import {
   DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
   type DataListDisplayOptions,
@@ -380,6 +382,61 @@ export const ComplianceTable = React.forwardRef<
     ? displayOptions.boardGroupByColumnKey
     : "status"
 
+  // Build panel groups from categories
+  const panelGroupsBuilder = (rows: ComplianceItem[]): FinderGroup[] => {
+    // Group items by category
+    const itemsByCategory = new Map<string, ComplianceItem[]>()
+    for (const item of rows) {
+      const category = item.category
+      if (!itemsByCategory.has(category)) {
+        itemsByCategory.set(category, [])
+      }
+      itemsByCategory.get(category)!.push(item)
+    }
+
+    // Build groups from categories, sorted alphabetically
+    const groups: FinderGroup[] = []
+    const categories = Array.from(itemsByCategory.keys()).sort()
+
+    for (const category of categories) {
+      const categoryItems = itemsByCategory.get(category) ?? []
+      groups.push({
+        id: category,
+        label: category,
+        icon: "fa-folder",
+        count: categoryItems.length,
+      })
+    }
+
+    return groups
+  }
+
+  const panelRenderListRow = (row: ComplianceItem, _isSelected: boolean) => (
+    <div className="flex-1 min-w-0">
+      <p className="text-sm font-medium text-foreground truncate">{row.title}</p>
+      <p className="text-xs text-muted-foreground mt-1">{row.category}</p>
+    </div>
+  )
+
+  const panelRenderDetail = (row: ComplianceItem) => (
+    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto p-4">
+      <div>
+        <h3 className="text-sm font-semibold text-foreground mb-2">Obligation</h3>
+        <p className="text-sm text-foreground">{row.title}</p>
+      </div>
+      <div className="flex flex-col gap-2">
+        <div>
+          <span className="text-xs font-medium text-muted-foreground">Category</span>
+          <p className="text-sm text-foreground">{row.category}</p>
+        </div>
+        <div>
+          <span className="text-xs font-medium text-muted-foreground">Status</span>
+          <p className="text-sm text-foreground">{COMPLIANCE_STATUS_LABEL[row.status]}</p>
+        </div>
+      </div>
+    </div>
+  )
+
   const drawerToolbarProps = {
     totalRows: items.length,
     filterFields,
@@ -469,6 +526,28 @@ export const ComplianceTable = React.forwardRef<
     )
   }
 
+  if (view === "panel") {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col">
+        {sharedToolbar}
+        <ListPageSplitHubChrome aria-label="Compliance obligations panel view">
+          <FinderPanelView<ComplianceItem>
+            embedded
+            groupsColumnTitle="Category"
+            groups={panelGroupsBuilder(tableState.rows)}
+            rows={tableState.rows}
+            getRowId={(row) => row.id}
+            getRowGroupId={(row) => row.category}
+            autoSaveId="compliance-panel-view"
+            renderListRow={panelRenderListRow}
+            renderDetail={panelRenderDetail}
+            emptyList={<p className="text-sm text-muted-foreground">No obligations found.</p>}
+          />
+        </ListPageSplitHubChrome>
+      </div>
+    )
+  }
+
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       <CoachMark state={dashboardCustomizeCoach} />

package/template/components/data-list-client.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 /**
- * DataListClient — Placements page built on the reusable ListPageTemplate.
+ * DataListClient — demo list hub on the reusable ListPageTemplate.
  *
- * Uses centralized exports from `@/components/data-views` (same pattern as Team / Compliance).
+ * Uses centralized exports from `@/components/data-views`.
  */
 
 import * as React from "react"
@@ -36,6 +36,14 @@ import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
 import { CoachMark } from "@/components/ui/coach-mark"
 import { useCoachMark, type CoachMarkStep } from "@/hooks/use-coach-mark"
 
+/** Maps each view tab's `filterId` to the demo row segment — unknown ids fall back to all rows. */
+function segmentFilterToPhase(id: string): PlacementLifecycleTabId {
+  if (id === "all" || id === "upcoming" || id === "ongoing" || id === "completed") {
+    return id
+  }
+  return "all"
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Coach mark flow — Views & Properties tour
 // ─────────────────────────────────────────────────────────────────────────────
@@ -48,7 +56,7 @@ const VIEWS_TOUR_STEPS: CoachMarkStep[] = [
     align: "start",
     title: "Switch Between Views",
     description:
-      "Use these tabs to filter your placements by status — All, Upcoming, Ongoing, or Completed. Each view remembers its own settings.",
+      "Use these tabs to move between saved segments — All, Due soon, In progress, or Done. Each tab keeps its own layout and properties.",
   },
   {
     id: "views-settings",
@@ -102,17 +110,17 @@ const VIEWS_TOUR_STEPS: CoachMarkStep[] = [
 // ─────────────────────────────────────────────────────────────────────────────
 
 const DEFAULT_TABS: ViewTab[] = [
-  { id: "all",       label: "All",       viewType: "table", icon: "fa-table",              filterId: "all"       },
-  { id: "upcoming",  label: "Upcoming",  viewType: "table", icon: "fa-calendar-clock",     filterId: "upcoming"  },
-  { id: "ongoing",   label: "Ongoing",   viewType: "table", icon: "fa-circle-half-stroke", filterId: "ongoing"   },
-  { id: "completed", label: "Completed", viewType: "table", icon: "fa-circle-check",       filterId: "completed" },
+  { id: "all",       label: "All",        viewType: "table", icon: "fa-table",              filterId: "all"       },
+  { id: "upcoming",  label: "Due soon",   viewType: "table", icon: "fa-calendar-clock",     filterId: "upcoming"  },
+  { id: "ongoing",   label: "In progress", viewType: "table", icon: "fa-circle-half-stroke", filterId: "ongoing"   },
+  { id: "completed", label: "Done",       viewType: "table", icon: "fa-circle-check",       filterId: "completed" },
 ]
 
 const LIFECYCLE_OPTIONS = [
-  { id: "all",       label: "All"       },
-  { id: "upcoming",  label: "Upcoming"  },
-  { id: "ongoing",   label: "Ongoing"   },
-  { id: "completed", label: "Completed" },
+  { id: "all",       label: "All"        },
+  { id: "upcoming",  label: "Due soon"   },
+  { id: "ongoing",   label: "In progress" },
+  { id: "completed", label: "Done" },
 ]
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -130,7 +138,7 @@ export function DataListClient() {
   const tableRef = React.useRef<DataListTableHandle>(null)
 
   const viewsTour = useCoachMark({
-    flowId: "placements-views-tour",
+    flowId: "data-list-views-tour",
     steps: VIEWS_TOUR_STEPS,
     delay: 1200,
   })
@@ -143,14 +151,14 @@ export function DataListClient() {
   useAskLeoPageContext(
     React.useMemo(
       () => ({
-        title: "Placements",
+        title: "List hub",
         description: activeTab
           ? `${placementCount} row${placementCount === 1 ? "" : "s"} in “${activeTab.label}” · ${activeTab.viewType} view.`
           : undefined,
         suggestions: [
-          "Which placements end in the next 30 days?",
-          "Summarize what’s in this view after my filters",
-          "What columns should I add for site coordinators?",
+          "Which rows are due in the next 30 days?",
+          "Summarize what is visible after my filters",
+          "What columns help reviewers scan this grid quickly?",
         ],
       }),
       [activeTab, placementCount],
@@ -185,6 +193,7 @@ export function DataListClient() {
   return (
     <>
     <CoachMark state={viewsTour} />
+    <div className="flex min-h-0 flex-1 flex-col">
     <ListPageTemplate
       tabs={tabs}
       onTabsChange={setTabs}
@@ -212,28 +221,30 @@ export function DataListClient() {
       showMetrics={showMetrics}
       defaultTabs={DEFAULT_TABS}
       filterOptions={LIFECYCLE_OPTIONS}
-      filterLabel="Filter lifecycle"
-      getTabCount={(filterId) => placementsForPhase(filterId as PlacementLifecycleTabId).length}
-      renderContent={(tab, updateTab) => (
+      filterLabel="Filter segment"
+      getTabCount={(filterId) => placementsForPhase(segmentFilterToPhase(filterId)).length}
+      renderContent={(tab, updateTab) => {
+        const phase = segmentFilterToPhase(tab.filterId)
+        return (
         <DataListTable
           key={tab.id}
           ref={tableRef}
           view={tab.viewType}
           onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
-          lifecycleTabId={tab.filterId as PlacementLifecycleTabId}
+          lifecycleTabId={phase}
           getColumnsForLifecycle={getPlacementColumnsForLifecycle}
-          emptyTableCopy={emptyCopyForPlacementLifecycleTab(tab.filterId as PlacementLifecycleTabId)}
-          lifecycleDrawerLabel={
-            placementLifecycleDrawerLabels[tab.filterId as PlacementLifecycleTabId]
-          }
+          emptyTableCopy={emptyCopyForPlacementLifecycleTab(phase)}
+          lifecycleDrawerLabel={placementLifecycleDrawerLabels[phase]}
           displayOptions={displayOptions}
           onDisplayOptionsChange={patch =>
             setDisplayOptions(prev => ({ ...prev, ...patch }))}
         />
-      )}
+        )
+      }}
       exportOpen={exportOpen}
       onExportOpenChange={setExportOpen}
     />
+    </div>
     </>
   )
 }