{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-list",
  "title": "Page List",
  "description": "A page header, list toolbar and responsive table. Open a row in a detail sheet.",
  "registryDependencies": [
    "@waimakers/data-table",
    "@waimakers/detail-sheet",
    "@waimakers/page-header"
  ],
  "files": [
    {
      "path": "src/components/ui/page-list.tsx",
      "content": "import { useRef, useState, type ReactNode } from \"react\";\nimport { DataTable, type DataTableProps } from \"./data-table\";\nimport { DetailSheet } from \"./detail-sheet\";\nimport {\n  PageHeader,\n  PageHeaderActions,\n  PageHeaderDescription,\n  PageHeaderTitle,\n} from \"./page-header\";\n\nexport interface PageListProps<T> extends Omit<DataTableProps<T>, \"onRowClick\" | \"isRowSelected\"> {\n  title: string;\n  description?: string;\n  actions?: ReactNode;\n  toolbar?: ReactNode;\n  detail: {\n    title: (row: T) => string;\n    render: (row: T) => ReactNode;\n    fullPageLink?: (row: T) => ReactNode;\n    identifierPlacement?: \"header\" | \"technical-details\";\n  };\n}\n\nexport function PageList<T>({\n  title,\n  description,\n  actions,\n  toolbar,\n  detail,\n  ...table\n}: PageListProps<T>) {\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n  const selected = table.data.find((row) => table.getRowId(row) === selectedId);\n  const returnFocus = useRef<HTMLElement | null>(null);\n  return (\n    <>\n      <PageHeader>\n        <PageHeaderTitle>{title}</PageHeaderTitle>\n        {description && <PageHeaderDescription>{description}</PageHeaderDescription>}\n        {actions && <PageHeaderActions>{actions}</PageHeaderActions>}\n      </PageHeader>\n      <div className=\"flex min-w-0 flex-col gap-4\">\n        {toolbar}\n        <DataTable\n          {...table}\n          label={table.label ?? title}\n          isRowSelected={(row) => table.getRowId(row) === selectedId}\n          onRowClick={(row) => {\n            returnFocus.current =\n              document.activeElement instanceof HTMLElement ? document.activeElement : null;\n            setSelectedId(table.getRowId(row));\n          }}\n        />\n      </div>\n      {selected !== undefined && (\n        <DetailSheet\n          open\n          onOpenChange={(open) => {\n            if (!open) {\n              setSelectedId(null);\n            }\n          }}\n          title={detail.title(selected)}\n          identifier={table.getRowId(selected)}\n          identifierPlacement={detail.identifierPlacement}\n          returnFocus={returnFocus}\n          fullPageLink={detail.fullPageLink?.(selected)}\n        >\n          {detail.render(selected)}\n        </DetailSheet>\n      )}\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/page-list.tsx"
    }
  ],
  "type": "registry:block"
}