@exxatdesignux/ui 0.2.19 → 0.3.0

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

@@ -1,186 +0,0 @@
-"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

@@ -1,36 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-"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

@@ -1,121 +0,0 @@
-"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

@@ -1,336 +0,0 @@
-"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"