@exxatdesignux/ui 0.2.18 → 0.2.19

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>
+  )
+}

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

@@ -0,0 +1,336 @@
+"use client"
+
+/**
+ * List hub table — `DataTable` + `useTableState`; table | list | board | calendar | dashboard
+ * share `tableState.rows` (centralized dataset).
+ */
+
+import * as React from "react"
+import type { ListHubRecord } from "@/lib/mock/list-hub-directory"
+import { DataTable, DataTableToolbar } from "@/components/data-table"
+import { useTableState } from "@/components/data-table/use-table-state"
+import type { ColumnDef } from "@/components/data-table/types"
+import type { DataListViewType } from "@/lib/data-list-view"
+import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
+import { LIST_HUB_SUPPORTED_VIEWS } from "@/lib/list-hub-supported-views"
+import { TablePropertiesDrawerButton } from "@/components/table-properties"
+import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
+import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
+import { ListPageConnectedViewBody } from "@/components/data-views/list-page-connected-view-body"
+import { defineHubViewRenderers } from "@/lib/hub-connected-view-renderers"
+import { ListPageCalendarView } from "@/components/data-views/list-page-calendar-view"
+import { ListHubCardGrid } from "@/components/list-hub-board-view"
+import { ListHubListView } from "@/components/list-hub-list-view"
+import {
+  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
+  type DataListDisplayOptions,
+} from "@/lib/data-list-display-options"
+
+function columnToFilterFieldDef(c: ColumnDef<ListHubRecord>): FilterFieldDef | null {
+  if (!c.filter) return null
+  const f = c.filter
+  const defaultOps: FilterOperator[] =
+    f.type === "select" || f.type === "date" ? ["is", "is_not"] : ["contains", "not_contains"]
+  return {
+    key: c.key,
+    label: c.label,
+    icon: f.icon ?? "fa-filter",
+    type: f.type,
+    operators: (f.operators ?? defaultOps) as FilterOperator[],
+    options: f.options,
+    ...(f.textMask ? { textMask: f.textMask } : {}),
+  }
+}
+
+function columnsToFilterFields(cols: ColumnDef<ListHubRecord>[]) {
+  return cols.map(columnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
+}
+
+function buildListHubColumns(): ColumnDef<ListHubRecord>[] {
+  return [
+    {
+      key: "select",
+      label: "",
+      width: 40,
+      minWidth: 40,
+      defaultPin: "left",
+      lockPin: true,
+    },
+    {
+      key: "title",
+      label: "Title",
+      width: 280,
+      minWidth: 160,
+      sortable: true,
+      sortKey: "title",
+      filter: {
+        type: "text",
+        icon: "fa-file-lines",
+        operators: ["contains", "not_contains"],
+      },
+      cell: row => <span className="truncate text-sm font-medium text-foreground">{row.title}</span>,
+    },
+    {
+      key: "id",
+      label: "ID",
+      width: 120,
+      minWidth: 100,
+      sortable: true,
+      sortKey: "id",
+      filter: {
+        type: "text",
+        icon: "fa-hashtag",
+        operators: ["contains", "not_contains"],
+      },
+      cell: row => <span className="font-mono text-sm tabular-nums text-foreground/90">{row.id}</span>,
+    },
+    {
+      key: "eventDate",
+      label: "Event date",
+      width: 140,
+      minWidth: 120,
+      sortable: true,
+      sortKey: "eventDate",
+      filter: {
+        type: "date",
+        icon: "fa-calendar-days",
+        operators: ["is", "is_not"],
+      },
+      cell: row => <span className="text-sm tabular-nums text-foreground">{row.eventDate}</span>,
+    },
+    {
+      key: "category",
+      label: "Category",
+      width: 140,
+      minWidth: 100,
+      sortable: true,
+      sortKey: "category",
+      filter: {
+        type: "text",
+        icon: "fa-tag",
+        operators: ["contains", "not_contains"],
+      },
+      cell: row => <span className="text-sm text-muted-foreground">{row.category}</span>,
+    },
+    {
+      key: "actions",
+      label: "",
+      width: 48,
+      minWidth: 48,
+      defaultPin: "right",
+      lockPin: true,
+      cell: () => null,
+    },
+  ]
+}
+
+export type ListHubTableHandle = OpenTablePropertiesHandle
+
+export const ListHubTable = React.forwardRef<
+  ListHubTableHandle,
+  {
+    rows: ListHubRecord[]
+    view?: DataListViewType
+    onViewChange?: (v: DataListViewType) => void
+    /** Aligns Properties view tiles with `ListPageTemplate` `supportedViewTypes`. */
+    supportedViewTypes?: readonly DataListViewType[]
+  }
+>(function ListHubTable(
+  { rows, view = "board", onViewChange, supportedViewTypes = LIST_HUB_SUPPORTED_VIEWS },
+  ref,
+) {
+  const columns = React.useMemo(() => buildListHubColumns(), [])
+  const filterFields = React.useMemo(() => columnsToFilterFields(columns), [columns])
+  const fieldDefinitionsForDrawer = React.useMemo(
+    () =>
+      columns
+        .filter(c => c.key !== "select" && c.key !== "actions")
+        .map(c => ({ key: c.key, label: c.label, sortable: !!(c.sortable && (c.sortKey ?? c.key)) })),
+    [columns],
+  )
+
+  const resolveColumnLabel = React.useCallback(
+    (key: string) => columns.find(c => c.key === key)?.label ?? key,
+    [columns],
+  )
+
+  const [displayOptions, setDisplayOptions] = React.useState<DataListDisplayOptions>(
+    DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
+  )
+  const patchDisplay = React.useCallback((patch: Partial<DataListDisplayOptions>) => {
+    setDisplayOptions(prev => ({ ...prev, ...patch }))
+  }, [])
+
+  const [conditionalRules, setConditionalRules] = React.useState<ConditionalRule[]>([])
+
+  const addConditionalRule = React.useCallback((rule: Omit<ConditionalRule, "id">) => {
+    setConditionalRules(prev => [...prev, { ...rule, id: `cr-${Date.now()}` }])
+  }, [])
+  const removeConditionalRule = React.useCallback((id: string) => {
+    setConditionalRules(prev => prev.filter(r => r.id !== id))
+  }, [])
+  const updateConditionalRule = React.useCallback((id: string, patch: Partial<ConditionalRule>) => {
+    setConditionalRules(prev => prev.map(r => (r.id === id ? { ...r, ...patch } : r)))
+  }, [])
+
+  const tableState = useTableState<ListHubRecord>(rows, columns, { key: "title", dir: "asc" })
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      openPropertiesDrawer: () => {
+        tableState.setSheetOpen(true)
+      },
+    }),
+    [tableState.setSheetOpen],
+  )
+
+  const panelGroupsBuilder = (filtered: ListHubRecord[]): FinderGroup[] => [
+    { id: "all", label: `All records (${filtered.length})`, count: filtered.length },
+  ]
+
+  const panelRenderListRow = (row: ListHubRecord) => (
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-sm font-medium text-foreground">{row.title}</p>
+      <p className="truncate text-xs text-muted-foreground">{row.category}</p>
+    </div>
+  )
+
+  const panelRenderDetail = (row: ListHubRecord) => (
+    <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4">
+      <div>
+        <h3 className="mb-1 text-sm font-semibold text-foreground">{row.title}</h3>
+        <p className="text-xs text-muted-foreground">{row.category}</p>
+      </div>
+      <dl className="grid gap-2 text-sm">
+        <div>
+          <dt className="text-xs font-medium text-muted-foreground">ID</dt>
+          <dd className="font-mono tabular-nums">{row.id}</dd>
+        </div>
+        <div>
+          <dt className="text-xs font-medium text-muted-foreground">Event date</dt>
+          <dd className="tabular-nums">{row.eventDate}</dd>
+        </div>
+      </dl>
+    </div>
+  )
+
+  const drawerToolbarProps = {
+    state: tableState,
+    totalRows: rows.length,
+    filterFields,
+    fieldDefinitions: fieldDefinitionsForDrawer,
+    resolveColumnLabel,
+    displayOptions,
+    onDisplayOptionsChange: patchDisplay,
+    conditionalRules,
+    onAddConditionalRule: addConditionalRule,
+    onRemoveConditionalRule: removeConditionalRule,
+    onUpdateConditionalRule: updateConditionalRule,
+    currentView: view,
+    onViewChange,
+    supportedViewTypes,
+    lifecycleTabLabel: "List hub",
+  }
+
+  const tableProps = {
+    data: rows,
+    columns,
+    getRowId: (row: ListHubRecord) => row.id,
+    getRowSelectionLabel: (row: ListHubRecord) => row.title,
+    selectable: true,
+    searchable: displayOptions.showToolbarSearch,
+    showColumnHeaders: displayOptions.showColumnLabels,
+    groupable: true,
+    defaultSort: { key: "title", dir: "asc" as const },
+    emptyState: <p className="text-sm text-muted-foreground">No records match your filters.</p>,
+    conditionalRules,
+    state: tableState,
+    toolbarSlot: (s: ReturnType<typeof useTableState<ListHubRecord>>) => (
+      <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />
+    ),
+    bulkActionsSlot: (selected: Set<string | number>) => {
+      const n = selected.size
+      if (n === 0) return null
+      return (
+        <>
+          <span className="sr-only">{n} selected</span>
+          <Tip label="Export selection (demo)">
+            <Button size="sm" variant="outline" type="button">
+              <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+              Export
+            </Button>
+          </Tip>
+        </>
+      )
+    },
+  }
+
+  const sharedToolbar = (
+    <DataTableToolbar
+      state={tableState}
+      columns={columns}
+      searchable={displayOptions.showToolbarSearch}
+      searchAriaLabel="Search records"
+      toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
+    />
+  )
+
+  const toolbarShell = (body: React.ReactNode) => (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {sharedToolbar}
+      {body}
+    </div>
+  )
+
+  return (
+    <ListPageConnectedViewBody
+      view={view}
+      hubLabel="List hub"
+      renderers={defineHubViewRenderers(LIST_HUB_SUPPORTED_VIEWS, {
+        "data-table": (
+          <div className="pb-6">
+            <DataTable<ListHubRecord> {...tableProps} />
+          </div>
+        ),
+        "list-with-toolbar": toolbarShell(<ListHubListView rows={tableState.rows} />),
+        "board-with-toolbar": toolbarShell(<ListHubCardGrid rows={tableState.rows} />),
+        "calendar-with-toolbar": toolbarShell(
+          <ListPageCalendarView
+            rows={tableState.rows}
+            getRowId={row => row.id}
+            getEventDate={row => row.eventDate}
+            getEventLabel={row => row.title}
+            getEventMeta={row => row.category}
+            emptyMonthLabel="No events on this day."
+            ariaLabel="List hub calendar"
+            showSummaryPanel={displayOptions.showCalendarSummaryPanel}
+            calendarMainView={displayOptions.calendarMainView}
+            onCalendarMainViewChange={v => patchDisplay({ calendarMainView: v })}
+          />,
+        ),
+        "panel-with-toolbar": toolbarShell(
+          <ListPageSplitHubChrome aria-label="List hub panel view">
+            <FinderPanelView<ListHubRecord>
+              embedded
+              groupsColumnTitle="Records"
+              groups={panelGroupsBuilder(tableState.rows)}
+              rows={tableState.rows}
+              getRowId={row => row.id}
+              getRowGroupId={() => "all"}
+              autoSaveId="list-hub-panel-view"
+              renderListRow={panelRenderListRow}
+              renderDetail={panelRenderDetail}
+              emptyList={<p className="text-sm text-muted-foreground">No records found.</p>}
+            />
+          </ListPageSplitHubChrome>
+        ),
+      })}
+    />
+  )
+})
+
+ListHubTable.displayName = "ListHubTable"