@exxatdesignux/ui 0.2.17 → 0.2.19

package/template/components/key-metrics.tsx

@@ -216,6 +216,41 @@ export interface KeyMetricsProps {
  * (3fr / 2fr split). Tighter breakpoints because available width is ~60%
  * of the section.
  */
+/**
+ * Flat KPI hairlines — cell borders only (no grid gap fill / no surface).
+ * Four tiles: default 4-across verticals; 2×2 hairlines only when @container is narrow.
+ */
+function flatMetricsHairlineClass(
+  itemCount: number,
+  metricsHalfWidthLayout: boolean,
+): string {
+  if (itemCount <= 1) return "gap-0"
+
+  const childBorder = "[&>*]:border-[color:var(--key-metrics-flat-divider)]"
+
+  if (itemCount === 2) {
+    return cn("gap-0", childBorder, "[&>*:first-child]:border-r")
+  }
+
+  if (itemCount === 4) {
+    const narrow2x2 = metricsHalfWidthLayout
+      ? "@[max-width:25.99rem]"
+      : "@[max-width:29.99rem]"
+    return cn(
+      "gap-0",
+      childBorder,
+      /* Wide strip (matches `@[30rem]:grid-cols-4`) — verticals between all tiles, no horizontal */
+      "[&>*:not(:last-child)]:border-r",
+      /* Narrow strip (`@[18rem]`–`@[30rem]` 2×2) */
+      `${narrow2x2}:[&>*:not(:last-child)]:border-r-0`,
+      `${narrow2x2}:[&>*:nth-child(odd)]:border-r`,
+      `${narrow2x2}:[&>*:not(:nth-last-child(-n+2))]:border-b`,
+    )
+  }
+
+  return cn("gap-0", childBorder, "[&>*:not(:last-child)]:border-r")
+}
+
 function metricsRowColumnsClass(rowLength: number, metricsHalfWidthLayout: boolean): string {
   const half = metricsHalfWidthLayout
   switch (rowLength) {
@@ -538,7 +573,7 @@ function KeyMetricsInner({
 }: InnerProps) {
   const isFlatBand = surfaceVariant === "flat"
   const metricsGridClassName = isFlatBand
-    ? "gap-0 bg-transparent [&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-foreground/[0.055]"
+    ? flatMetricsHairlineClass(metrics.length, metricsHalfWidthLayout)
     : "gap-px bg-border"
   /** Side-by-side KPI + insight rail (md+). Disabled for half-width dashboard cards — insight stacks below. */
   const insightSideBySide = insight && !insightFullWidth && !metricsHalfWidthLayout
@@ -642,17 +677,16 @@ function KeyMetricsInner({
           <div className="@container/metrics-strip hidden lg:block">
             {rows.map((row, rowIdx) => (
               <React.Fragment key={rowIdx}>
-                {rowIdx > 0 && (
-                  <Separator
-                    aria-hidden="true"
-                    className={cn("my-1", isFlatBand && "bg-foreground/[0.055]")}
-                  />
+                {rowIdx > 0 && !isFlatBand && (
+                  <Separator aria-hidden="true" className="my-1" />
                 )}
                 <div
                   className={cn(
                     "grid",
                     metricsRowColumnsClass(row.length, metricsHalfWidthLayout),
-                    metricsGridClassName,
+                    isFlatBand
+                      ? flatMetricsHairlineClass(row.length, metricsHalfWidthLayout)
+                      : metricsGridClassName,
                   )}
                 >
                   {row.map((m) => (
@@ -693,8 +727,9 @@ function KeyMetricsInner({
                 insightSideBySide &&
                   !insightFullWidth &&
                   cn(
-                    "lg:h-full lg:border-l lg:pl-6",
-                    isFlatBand ? "lg:border-border/40" : "lg:border-border",
+                    "lg:h-full lg:pl-6",
+                    /* Flat band: insight card ring is the divider — skip `border-l` (double line). */
+                    !isFlatBand && "lg:border-l lg:border-border",
                   )
               )}
             >
@@ -856,7 +891,9 @@ export function KeyMetrics({
       })()
 
   const metricsCellSurfaceClassName =
-    variant === "flat" ? "bg-transparent" : "bg-card"
+    variant === "flat"
+      ? "bg-transparent"
+      : "bg-card dark:bg-transparent"
 
   const innerProps: InnerProps = {
     title,
@@ -900,18 +937,13 @@ export function KeyMetrics({
    * ─────────────────────────────────────────────────────────────────────────
    */
   const glowStyle: React.CSSProperties = {
-    /* oklch relative color: inherit brand hue/chroma/lightness, set alpha only */
-    background:
-      "radial-gradient(ellipse 110% 90% at 50% 100%, oklch(from var(--brand-color) l c h / 0.13) 0%, transparent 65%)",
+    background: "var(--key-metrics-card-glow-radial)",
   }
 
-  /** List-page KPI band: soft tint → page bg + gentle lift (avoids a hard line into the toolbar). */
+  /** List-page KPI band — transparent; only `--key-metrics-flat-band-radial` glow. */
   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)",
+    background: "var(--key-metrics-flat-band-radial)",
+    boxShadow: "var(--key-metrics-flat-band-shadow)",
   }
 
   /* ── Card variant — ChartCard-style chrome ───────────────────────────── */
@@ -982,11 +1014,11 @@ export function KeyMetrics({
     )
   }
 
-  /* ── Flat variant — soft tint band + bottom glow (no sharp cut to content below) ── */
+  /* ── Flat variant — no surface; bottom brand glow only ── */
   return (
     <section
       aria-label={title}
-      className={cn("relative w-full overflow-hidden pt-5 pb-6", className)}
+      className={cn("relative w-full overflow-hidden pt-5 pb-8", className)}
       style={flatBandStyle}
     >
       <KeyMetricsInner
@@ -1025,7 +1057,7 @@ export function KeyMetricsContent({
       showHeader={false}
       insightCompact={insightCompact}
       insightFullWidth={insightFullWidth}
-      metricsCellSurfaceClassName="bg-card"
+      metricsCellSurfaceClassName="bg-card dark:bg-transparent"
     />
   )
 }

package/template/components/list-hub-board-view.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import type { ListHubRecord } from "@/lib/mock/list-hub-directory"
+import { formatDateUS } from "@/lib/date-filter"
+import { BoardCardIconRow, BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
+import {
+  HubRecordCard,
+  ListPageBoardCardBody,
+  ListPageBoardCardHeader,
+  ListPageBoardCardTitleRow,
+} from "@/components/data-views/list-page-board-card"
+import {
+  ListPageBoardTemplate,
+  type ListPageBoardColumnDef,
+} from "@/components/data-views/list-page-board-template"
+
+const CATEGORY_COUNT_BADGE = "bg-muted/90 text-foreground"
+
+function ListHubBoardCard({ row }: { row: ListHubRecord }) {
+  return (
+    <HubRecordCard interactive className="h-full w-full">
+      <ListPageBoardCardHeader>
+        <ListPageBoardCardTitleRow title={row.title} titleClassName="truncate" />
+        <ListPageBoardCardBody>
+          <BoardCardTwoLineBlock
+            iconClass="fa-tag"
+            line1={row.category}
+            line2={formatDateUS(row.eventDate)}
+          />
+          <BoardCardIconRow iconClass="fa-hashtag">
+            <span className="font-mono tabular-nums">{row.id}</span>
+          </BoardCardIconRow>
+        </ListPageBoardCardBody>
+      </ListPageBoardCardHeader>
+    </HubRecordCard>
+  )
+}
+
+function useListHubBoardColumns(rows: ListHubRecord[]) {
+  return React.useMemo(() => {
+    const categories = [...new Set(rows.map(r => r.category))].sort((a, b) => a.localeCompare(b))
+    const columns: ListPageBoardColumnDef<ListHubRecord>[] = categories.map(category => ({
+      id: category,
+      label: category,
+      filter: (r: ListHubRecord) => r.category === category,
+    }))
+    const badgeMap = Object.fromEntries(
+      categories.map(c => [c, CATEGORY_COUNT_BADGE]),
+    )
+    return { columns, badgeMap }
+  }, [rows])
+}
+
+export function ListHubCardGrid({ rows }: { rows: ListHubRecord[] }) {
+  const { columns, badgeMap } = useListHubBoardColumns(rows)
+
+  return (
+    <ListPageBoardTemplate
+      columns={columns}
+      rows={rows}
+      getRowKey={r => r.id}
+      columnCountBadgeClassName={badgeMap}
+      emptyColumnLabel="No records"
+      renderCard={row => <ListHubBoardCard row={row} />}
+    />
+  )
+}

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

@@ -0,0 +1,186 @@
+"use client"
+
+import * as React from "react"
+
+import { ListPageTemplate, type ViewTab, dataListViewIcon, type DataListViewType } from "@/components/data-views"
+import { ListHubPanelActivator } from "@/components/list-hub-panel-activator"
+import { PageHeader } from "@/components/page-header"
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { KeyMetrics } from "@/components/key-metrics"
+import { ListHubTable, type ListHubTableHandle } from "@/components/list-hub-table"
+import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
+import { useSecondaryPanelHubNav } from "@/hooks/use-secondary-panel-hub-nav"
+import { LIST_HUB_DIRECTORY } from "@/lib/mock/list-hub-directory"
+import { LIST_HUB_KPI_INSIGHT, listHubKpiMetrics } from "@/lib/mock/list-hub-kpi"
+import { LIST_HUB_SUPPORTED_VIEWS } from "@/lib/list-hub-supported-views"
+import {
+  filterListHubRows,
+  isListHubDefaultNav,
+  listHubHeaderSubtitle,
+  listHubScopeLabel,
+  LIST_HUB_PATH,
+  parseListHubNav,
+} from "@/lib/list-hub-nav"
+
+const DEFAULT_TABS: ViewTab[] = [
+  { id: "table", label: "Directory", viewType: "table", icon: "fa-table", filterId: "all" },
+  { id: "calendar", label: "Schedule", viewType: "calendar", icon: "fa-calendar-days", filterId: "schedule" },
+  { id: "board", label: "Board", viewType: "board", icon: "fa-grid-2", filterId: "board" },
+]
+
+function ListHubPageHeader({
+  title,
+  subtitle,
+  onExport,
+  showMetrics,
+  onToggleMetrics,
+}: {
+  title: string
+  subtitle: string
+  onExport: () => void
+  showMetrics: boolean
+  onToggleMetrics: () => void
+}) {
+  const [moreOpen, setMoreOpen] = React.useState(false)
+  return (
+    <PageHeader
+      title={title}
+      subtitle={subtitle}
+      actions={
+        <div className="flex items-center gap-2" role="group" aria-label="List hub actions">
+          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
+            <Tip side="bottom" label="More actions">
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  size="lg"
+                  variant="outline"
+                  className="aspect-square px-0"
+                  aria-label="More actions"
+                >
+                  <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
+                </Button>
+              </DropdownMenuTrigger>
+            </Tip>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onExport(), 0)
+                }}
+              >
+                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                Export
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onToggleMetrics(), 0)
+                }}
+              >
+                <i
+                  className={`fa-light ${showMetrics ? "fa-eye-slash" : "fa-eye"}`}
+                  aria-hidden="true"
+                />
+                {showMetrics ? "Hide metric section" : "Show metric section"}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      }
+    />
+  )
+}
+
+export function ListHubClient() {
+  const [exportOpen, setExportOpen] = React.useState(false)
+  const [showMetrics, setShowMetrics] = React.useState(true)
+  const [tabs, setTabs] = React.useState<ViewTab[]>(DEFAULT_TABS)
+  const [activeTabId, setActiveTabId] = React.useState(DEFAULT_TABS[0]!.id)
+  const tableRef = React.useRef<ListHubTableHandle>(null)
+
+  const { navState } = useSecondaryPanelHubNav({
+    hubPathname: LIST_HUB_PATH,
+    panelId: "list-hub",
+    parseNav: parseListHubNav,
+    shouldReopenPanel: nav => isListHubDefaultNav(nav),
+  })
+
+  const scopedRows = React.useMemo(
+    () => filterListHubRows(LIST_HUB_DIRECTORY, navState),
+    [navState],
+  )
+  const count = scopedRows.length
+  const metrics = React.useMemo(() => listHubKpiMetrics(count), [count])
+  const pageTitle = listHubScopeLabel(navState)
+  const subtitle = listHubHeaderSubtitle(navState, count)
+
+  useAskLeoPageContext(
+    React.useMemo(
+      () => ({
+        title: pageTitle,
+        description: `${count} records in the active scope — table, calendar, and board read the same filtered rows.`,
+        suggestions: [
+          "Which events are scheduled this week?",
+          "How do I show or hide the calendar summary panel?",
+        ],
+      }),
+      [count, pageTitle],
+    ),
+  )
+
+  return (
+    <>
+      <ListHubPanelActivator />
+      <ListPageTemplate
+        defaultTabs={DEFAULT_TABS}
+        tabs={tabs}
+        onTabsChange={setTabs}
+        activeTabId={activeTabId}
+        onActiveTabChange={setActiveTabId}
+        getTabCount={() => count}
+        showMetrics={showMetrics}
+        supportedViewTypes={LIST_HUB_SUPPORTED_VIEWS}
+        tablePropertiesRef={tableRef}
+        metrics={
+          <KeyMetrics
+            variant="flat"
+            metrics={metrics}
+            insight={LIST_HUB_KPI_INSIGHT}
+            showHeader={false}
+            metricsSingleRow
+          />
+        }
+        exportOpen={exportOpen}
+        onExportOpenChange={setExportOpen}
+        exportTotalRows={count}
+        header={
+          <ListHubPageHeader
+            title={pageTitle}
+            subtitle={subtitle}
+            onExport={() => setExportOpen(true)}
+            showMetrics={showMetrics}
+            onToggleMetrics={() => setShowMetrics(v => !v)}
+          />
+        }
+        renderContent={(tab, updateTab) => (
+          <ListHubTable
+            key={`${tab.id}-${navState.scope}-${navState.category ?? ""}`}
+            ref={tableRef}
+            rows={scopedRows}
+            view={tab.viewType}
+            supportedViewTypes={LIST_HUB_SUPPORTED_VIEWS}
+            onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+          />
+        )}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,36 @@
+"use client"
+
+import type { ListHubRecord } from "@/lib/mock/list-hub-directory"
+import { formatDateUS } from "@/lib/date-filter"
+import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import { DataRowList } from "@/components/data-views/data-row-list"
+
+export function ListHubListView({ rows }: { rows: ListHubRecord[] }) {
+  return (
+    <DataRowList<ListHubRecord>
+      rows={rows}
+      getRowId={row => row.id}
+      emptyState="No records match your filters."
+      ariaLabel="List hub records"
+      renderRow={row => (
+        <ListPageBoardCard
+          layout="row"
+          interactive
+          rowContainerClassName="flex flex-row items-center gap-3"
+          leading={
+            <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-brand/10 text-brand">
+              <i className="fa-light fa-calendar-days text-sm" aria-hidden="true" />
+            </span>
+          }
+        >
+          <div className="space-y-0.5">
+            <p className="truncate text-sm font-semibold text-foreground">{row.title}</p>
+            <p className="truncate text-xs text-muted-foreground">
+              {row.category} · <span className="tabular-nums">{formatDateUS(row.eventDate)}</span>
+            </p>
+          </div>
+        </ListPageBoardCard>
+      )}
+    />
+  )
+}

package/template/components/list-hub-panel-activator.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+import { SecondaryPanelHubActivator } from "@/components/templates/secondary-panel-hub-template"
+
+/** Opens the List hub secondary panel while this route is mounted. */
+export function ListHubPanelActivator() {
+  return <SecondaryPanelHubActivator panelId="list-hub" />
+}

package/template/components/list-hub-secondary-nav.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+/**
+ * List hub secondary nav — time + category scopes via `?scope=` (`lib/list-hub-nav.ts`).
+ */
+
+import * as React from "react"
+import { usePathname, useSearchParams } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import {
+  SecondaryPanelIconNavRow,
+  SecondaryPanelNavRow,
+} from "@/components/secondary-panel/nav-link-rows"
+import { useSecondaryPanel } from "@/components/secondary-panel"
+import {
+  isListHubNavActive,
+  listHubHubScopeHref,
+  LIST_HUB_CATEGORY_SCOPES,
+  parseListHubNav,
+} from "@/lib/list-hub-nav"
+
+export function ListHubSecondaryNav() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const searchParamsKey = searchParams.toString()
+  const { openPanel, secondaryPanelCompact } = useSecondaryPanel()
+
+  const nav = React.useMemo(
+    () => parseListHubNav(new URLSearchParams(searchParamsKey)),
+    [searchParamsKey],
+  )
+
+  const reopenPanel = React.useCallback(() => openPanel("list-hub"), [openPanel])
+
+  if (secondaryPanelCompact) {
+    return (
+      <nav className="flex min-h-0 flex-1 flex-col" role="navigation" aria-label="List hub">
+        <div className="flex flex-col items-center border-b border-sidebar-border/60 px-1 py-2">
+          <Tip label="Show labels" side="right">
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              className="size-9 shrink-0"
+              aria-label="Show labels"
+              onClick={reopenPanel}
+            >
+              <i className="fa-light fa-angles-right text-[15px]" aria-hidden="true" />
+            </Button>
+          </Tip>
+        </div>
+        <ul className="flex flex-1 flex-col items-center gap-1 overflow-y-auto px-1 py-2" role="list">
+          <SecondaryPanelIconNavRow
+            href={listHubHubScopeHref(pathname, searchParams, { scope: "all" })}
+            active={isListHubNavActive(pathname, nav, "all")}
+            iconClass="fa-table-list"
+            label="All records"
+            onClick={reopenPanel}
+          />
+          <SecondaryPanelIconNavRow
+            href={listHubHubScopeHref(pathname, searchParams, { scope: "upcoming" })}
+            active={isListHubNavActive(pathname, nav, "upcoming")}
+            iconClass="fa-calendar-arrow-up"
+            label="Upcoming"
+            onClick={reopenPanel}
+          />
+          <SecondaryPanelIconNavRow
+            href={listHubHubScopeHref(pathname, searchParams, { scope: "past" })}
+            active={isListHubNavActive(pathname, nav, "past")}
+            iconClass="fa-calendar-arrow-down"
+            label="Past"
+            onClick={reopenPanel}
+          />
+        </ul>
+      </nav>
+    )
+  }
+
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4" role="navigation" aria-label="List hub">
+      <ul className="space-y-0.5" role="list">
+        <SecondaryPanelNavRow
+          href={listHubHubScopeHref(pathname, searchParams, { scope: "all" })}
+          active={isListHubNavActive(pathname, nav, "all")}
+          iconClass="fa-table-list"
+          label="All records"
+          onClick={reopenPanel}
+        />
+        <SecondaryPanelNavRow
+          href={listHubHubScopeHref(pathname, searchParams, { scope: "upcoming" })}
+          active={isListHubNavActive(pathname, nav, "upcoming")}
+          iconClass="fa-calendar-arrow-up"
+          label="Upcoming"
+        />
+        <SecondaryPanelNavRow
+          href={listHubHubScopeHref(pathname, searchParams, { scope: "past" })}
+          active={isListHubNavActive(pathname, nav, "past")}
+          iconClass="fa-calendar-arrow-down"
+          label="Past"
+        />
+        <li role="presentation" className="select-none">
+          <div className="px-2 pt-3 pb-1">
+            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
+              Categories
+            </span>
+          </div>
+        </li>
+        {LIST_HUB_CATEGORY_SCOPES.map(category => (
+          <SecondaryPanelNavRow
+            key={category}
+            href={listHubHubScopeHref(pathname, searchParams, { scope: "category", category })}
+            active={isListHubNavActive(pathname, nav, "category", category)}
+            iconClass="fa-folder"
+            label={category}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}