@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/components/{EntityCollectionView/EntityBoardCard.tsx → CollectionViewBinding/BoardCardBinding.tsx}

@@ -1,15 +1,15 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import React, { memo, useCallback, useMemo } from "react";
 import { Entity } from "@rebasepro/types";
 import { Checkbox, Chip, cls, defaultBorderMixin, Markdown } from "@rebasepro/ui";
 import { PropertyPreview } from "../../preview";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
-import { IconForView } from "@rebasepro/core";
-import { BoardItemViewProps } from "./board_types";
-import { useCollectionSlotKeys, resolveEntitySlots } from "./useEntityPreviewSlots";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
+import { IconForView } from "@rebasepro/app";
+import { BoardItemViewProps } from "@rebasepro/ui";
+import { useCollectionSlotKeys, resolveEntitySlots } from "./usePreviewSlots";
 
-export type EntityBoardCardProps<M extends Record<string, unknown> = Record<string, unknown>> = BoardItemViewProps<M> & {
-    collection: EntityCollection<M>;
+export type BoardCardBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = BoardItemViewProps<Entity<M>> & {
+    collection: CollectionConfig<M>;
     onClick?: (entity: Entity<M>) => void;
     selected?: boolean;
     onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
@@ -17,14 +17,14 @@ export type EntityBoardCardProps<M extends Record<string, unknown> = Record<stri
 };
 
 /**
- * Compact card component for displaying an entity in a Kanban board.
+ * Compact card component for displaying a entity in a Kanban board.
  * Uses the shared slot system for consistent preview rendering.
  *
  * Selection UX: The checkbox overlays on top of the image/icon thumbnail area,
  * revealed on card hover or when the card is selected. This keeps the card
  * layout clean while providing intuitive selection affordance.
  */
-function EntityBoardCardInner<M extends Record<string, unknown> = Record<string, unknown>>({
+function BoardCardBindingInner<M extends Record<string, unknown> = Record<string, unknown>>({
     item,
     isDragging,
     isGroupedOver,
@@ -34,13 +34,13 @@ function EntityBoardCardInner<M extends Record<string, unknown> = Record<string,
     selected,
     onSelectionChange,
     selectionEnabled = false
-}: EntityBoardCardProps<M>) {
-    const entity = item.entity;
+}: BoardCardBindingProps<M>) {
+    const entity = item.data;
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     const slotKeys = useCollectionSlotKeys(
-        collection as EntityCollection<Record<string, unknown>>,
+        collection as CollectionConfig<Record<string, unknown>>,
         authController,
         customizationController.propertyConfigs
     );
@@ -48,7 +48,7 @@ function EntityBoardCardInner<M extends Record<string, unknown> = Record<string,
     const slots = useMemo(
         () => resolveEntitySlots(
             entity as Entity<Record<string, unknown>>,
-            collection as EntityCollection<Record<string, unknown>>,
+            collection as CollectionConfig<Record<string, unknown>>,
             slotKeys
         ),
         [entity, collection, slotKeys]
@@ -147,29 +147,28 @@ function EntityBoardCardInner<M extends Record<string, unknown> = Record<string,
                         </div>
                     )}
 
-                    {/* Selection checkbox overlay — visible on hover or when selected */}
-                    {selectionEnabled && (
+                    {/* Selection checkbox overlay — always in the DOM, visibility controlled by CSS */}
+                    <div className={cls(
+                        "absolute inset-0 flex items-center justify-center rounded-md transition-[opacity,background-color] duration-200",
+                        !selectionEnabled && "invisible pointer-events-none",
+                        selectionEnabled && (selected
+                            ? "opacity-100 bg-primary/10 dark:bg-primary/20"
+                            : "opacity-0 group-hover/card:opacity-100")
+                    )}>
                         <div className={cls(
-                            "absolute inset-0 flex items-center justify-center rounded-md transition-all duration-200",
+                            "transition-transform duration-200",
                             selected
-                                ? "opacity-100 bg-primary/10 dark:bg-primary/20"
-                                : "opacity-0 group-hover/card:opacity-100"
+                                ? "scale-100"
+                                : "scale-75 group-hover/card:scale-100"
                         )}>
-                            <div className={cls(
-                                "transition-transform duration-200",
-                                selected
-                                    ? "scale-100"
-                                    : "scale-75 group-hover/card:scale-100"
-                            )}>
-                                <Checkbox
-                                    checked={selected ?? false}
-                                    onCheckedChange={handleSelectionChange}
-                                    size="small"
-                                    padding={false}
-                                />
-                            </div>
+                            <Checkbox
+                                checked={selected ?? false}
+                                onCheckedChange={handleSelectionChange}
+                                size="small"
+                                padding={false}
+                            />
                         </div>
-                    )}
+                    </div>
                 </div>
 
                 {/* Content */}
@@ -235,27 +234,27 @@ function EntityBoardCardInner<M extends Record<string, unknown> = Record<string,
 }
 
 // Memoized to prevent unnecessary re-renders when other cards in the board change
-export const EntityBoardCard = memo(EntityBoardCardInner) as typeof EntityBoardCardInner;
+export const BoardCardBinding = memo(BoardCardBindingInner) as typeof BoardCardBindingInner;
 
 /**
- * Wrapper component that adapts EntityBoardCard to BoardItemViewProps interface
+ * Wrapper component that adapts BoardCardBinding to BoardItemViewProps interface
  */
-export function createEntityBoardCardComponent<M extends Record<string, unknown>>(
-    collection: EntityCollection<M>,
+export function createBoardCardBindingComponent<M extends Record<string, unknown>>(
+    collection: CollectionConfig<M>,
     options: {
         onClick?: (entity: Entity<M>) => void;
         isEntitySelected?: (entity: Entity<M>) => boolean;
         onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
         selectionEnabled?: boolean;
     }
-): React.ComponentType<BoardItemViewProps<M>> {
-    return function EntityBoardCardWrapper(props: BoardItemViewProps<M>) {
+): React.ComponentType<BoardItemViewProps<Entity<M>>> {
+    return function BoardCardBindingWrapper(props: BoardItemViewProps<Entity<M>>) {
         return (
-            <EntityBoardCard
+            <BoardCardBinding
                 {...props}
                 collection={collection}
                 onClick={options.onClick}
-                selected={options.isEntitySelected?.(props.item.entity)}
+                selected={options.isEntitySelected?.(props.item.data)}
                 onSelectionChange={options.onSelectionChange}
                 selectionEnabled={options.selectionEnabled}
             />

package/src/components/{EntityCollectionView/EntityCollectionBoardView.tsx → CollectionViewBinding/CollectionBoardViewBinding.tsx}

@@ -1,36 +1,51 @@
-
-import type { EntityCollection } from "@rebasepro/types";
-import type { Property } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Entity, EntityTableController, EnumValueConfig, FilterValues, SaveEntityProps, SelectionController } from "@rebasepro/types";
-import { Board } from "./Board";
-import { BoardItem, BoardItemViewProps, ColumnLoadingState } from "./board_types";
-import { EntityBoardCard } from "./EntityBoardCard";
-import { Button, ChipColorKey, ChipColorScheme, CircularProgress, Dialog, DialogActions, DialogContent, getColorSchemeForSeed, IconButton, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { RefreshCwIcon } from "lucide-react";
+import { Entity, EntityTableController, EnumValueConfig, SelectionController } from "@rebasepro/types";
+import { BoardCardBinding } from "./BoardCardBinding";
+import {
+    Button,
+    ChipColorKey,
+    ChipColorScheme,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    getColorSchemeForSeed,
+    IconButton,
+    iconSize,
+    RefreshCwIcon,
+    Tooltip,
+    Typography,
+    KanbanView,
+    BoardItem,
+    BoardItemViewProps,
+    ColumnLoadingState
+} from "@rebasepro/ui";
 import { resolveEnumValues } from "@rebasepro/common";
 import { getPropertyInPath } from "../../util/property_utils";
 import {
     saveEntityWithCallbacks,
+    SaveEntityWithCallbacksProps,
     useAuthController,
     useCustomizationController,
     useData,
     useRebaseContext,
     useTranslation,
     useSlot
-} from "@rebasepro/core";
-import { useAnalyticsController } from "@rebasepro/core";
-import { setIn } from "@rebasepro/formex";
+} from "@rebasepro/app";
+import { useAnalyticsController } from "@rebasepro/app";
+import { setIn } from "@rebasepro/forms";
 import { useBoardDataController } from "./useBoardDataController";
 import { useKanbanDragAndDrop } from "./hooks/useKanbanDragAndDrop";
-import { useSideEntityController } from "../../index";
+import { useSidePanel } from "../../index";
 import { generateNKeysBetween } from "fractional-indexing";
 
-export type EntityCollectionBoardViewProps<M extends Record<string, unknown> = Record<string, unknown>> = {
-    collection: EntityCollection<M>;
+export type CollectionBoardViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {
+    collection: CollectionConfig<M>;
     tableController: EntityTableController<M>;
     fullPath: string;
-    parentCollectionIds?: string[];
+    parentCollectionSlugs?: string[], parentEntityIds?: string[];
     columnProperty: string;
     onEntityClick?: (entity: Entity<M>) => void;
     selectionController?: SelectionController<M>;
@@ -44,11 +59,12 @@ export type EntityCollectionBoardViewProps<M extends Record<string, unknown> = R
 /**
  * Kanban board view for displaying entities grouped by a string enum property.
  */
-export function EntityCollectionBoardView<M extends Record<string, unknown> = Record<string, unknown>>({
+export function CollectionBoardViewBinding<M extends Record<string, unknown> = Record<string, unknown>>({
     collection,
     tableController,
     fullPath,
-    parentCollectionIds = [],
+    parentCollectionSlugs = [],
+    parentEntityIds = [],
     columnProperty,
     onEntityClick,
     selectionController,
@@ -56,12 +72,11 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
     highlightedEntities,
     emptyComponent,
     deletedEntities
-}: EntityCollectionBoardViewProps<M>) {
-    const authController = useAuthController();
+}: CollectionBoardViewBindingProps<M>) {
     const customizationController = useCustomizationController();
     const context = useRebaseContext();
     const dataClient = useData();
-    const sideEntityController = useSideEntityController();
+    const sidePanelController = useSidePanel();
     const analyticsController = useAnalyticsController();
     const { t } = useTranslation();
     const plugins = customizationController.plugins ?? [];
@@ -225,13 +240,14 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
             .forEach(plugin => {
                 plugin.hooks!.onKanbanColumnsReorder!({
                     fullPath,
-                    parentCollectionIds,
+                    parentCollectionSlugs,
+parentEntityIds,
                     collection,
                     kanbanColumnProperty: columnProperty,
                     newColumnsOrder: newColumns
                 });
             });
-    }, [plugins, fullPath, parentCollectionIds, collection, columnProperty, analyticsController]);
+    }, [plugins, fullPath, parentCollectionSlugs, parentEntityIds, collection, columnProperty, analyticsController]);
 
     // Collection-level count queries to detect missing order property
     // Just TWO counts: total and ordered (for the entire collection, not per column)
@@ -244,7 +260,6 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
 
     useEffect(() => {
         const currentDataClient = dataClientRef.current;
-        const currentCollection = collectionRef.current;
         const accessor = currentDataClient.collection(fullPath);
 
         if (!orderProperty || !accessor.count) {
@@ -267,7 +282,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
         }).catch(e => console.warn("Failed to get total count:", e));
 
         accessor.count({
-            where: { [orderProperty]: "neq.null" }
+            where: { [orderProperty]: ["!=", null] }
         }).then(count => {
             orderedCount = count;
             completed++;
@@ -305,10 +320,10 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
     }, [columns, boardDataController.columnData]);
 
     // Convert entities to board items per column (data already sorted by orderProperty from controller)
-    const boardItems: BoardItem<M>[] = useMemo(() => {
+    const boardItems: BoardItem<Entity<M>>[] = useMemo(() => {
         return allEntities.map((entity: Entity<M>) => ({
             id: String(entity.id),
-            entity
+            data: entity
         }));
     }, [allEntities]);
 
@@ -328,11 +343,11 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
     }, [columns, boardDataController.columnData]);
 
     // Use the lookup map to assign columns - ensures items stay in the column they were fetched for
-    const assignColumn = useCallback((item: BoardItem<M>): string => {
+    const assignColumn = useCallback((item: BoardItem<Entity<M>>): string => {
         const column = entityColumnMap[item.id];
         if (column) return column;
         // Fallback: read from entity values (for newly created items or edge cases)
-        const value = item.entity.values?.[columnProperty];
+        const value = item.data.values?.[columnProperty];
         if (value && columns.includes(String(value))) return String(value);
         return columns[0] || "";
     }, [entityColumnMap, columnProperty, columns]);
@@ -350,9 +365,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
 
     // Backfill order values for all entities
     const handleBackfill = useCallback(async () => {
-        console.log("handleBackfill called", { orderProperty });
         if (!orderProperty) {
-            console.log("No orderProperty, returning");
             return;
         }
         analyticsController.onAnalyticsEvent?.("kanban_backfill_order", {
@@ -362,19 +375,16 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
 
         try {
             // Fetch ALL documents from collection (not relying on loaded entities)
-            console.log("Fetching all documents from collection...");
             const allDocsRes = await dataClient.collection(fullPath).find({
                 limit: 10000 // Fetch all
             });
             const allDocs = allDocsRes.data as Entity<M>[];
-            console.log(`Fetched ${allDocs.length} documents`);
 
             // Find entities missing order property
             const entitiesToUpdate = allDocs.filter((entity: Entity<M>) => {
                 const orderValue = entity.values?.[orderProperty];
                 return orderValue === undefined || orderValue === null;
             });
-            console.log(`${entitiesToUpdate.length} entities need order values`);
 
             // Generate string fractional keys for all entities that need them
             const keys = generateNKeysBetween(null, null, entitiesToUpdate.length);
@@ -382,7 +392,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
             entitiesToUpdate.forEach((entity: Entity<M>, index: number) => {
                 const updatedValues = setIn({ ...entity.values }, orderProperty, keys[index]);
 
-                const saveProps: SaveEntityProps = {
+                const saveProps: SaveEntityWithCallbacksProps<Record<string, unknown>> = {
                     path: entity.path,
                     entityId: entity.id,
                     values: updatedValues as M,
@@ -403,9 +413,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
                 );
             });
 
-            console.log(`Total updates to run: ${updates.length}`);
             await Promise.all(updates);
-            console.log("All updates complete");
             setShowBackfillDialog(false);
 
             // Reset missing count to hide banner
@@ -432,35 +440,62 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
         return selectionController?.isEntitySelected(entity) ?? false;
     }, [selectionController]);
 
-    const ItemComponent = useCallback((props: BoardItemViewProps<M>) => {
-        return (
-            <EntityBoardCard
+    // Store latest callbacks in refs so the stable ItemComponent always
+    // reads fresh values without changing its own identity.
+    const handleEntityClickRef = useRef(handleEntityClick);
+    handleEntityClickRef.current = handleEntityClick;
+    const isEntitySelectedRef = useRef(isEntitySelected);
+    isEntitySelectedRef.current = isEntitySelected;
+    const handleSelectionChangeRef = useRef(handleSelectionChange);
+    handleSelectionChangeRef.current = handleSelectionChange;
+    const selectionEnabledRef = useRef(selectionEnabled);
+    selectionEnabledRef.current = selectionEnabled;
+
+    // Stable callback wrappers — identity never changes, delegates to refs.
+    const stableOnClick = useCallback((entity: Entity<M>) => {
+        handleEntityClickRef.current(entity);
+    }, []);
+    const stableOnSelectionChange = useCallback((entity: Entity<M>, sel: boolean) => {
+        handleSelectionChangeRef.current(entity, sel);
+    }, []);
+
+    // Build a single, truly stable component reference.
+    // Uses refs for ALL dynamic values so the component type never changes.
+    // When ItemComponent identity changes, React.memo'd SortableItem remounts
+    // the card → DOM is destroyed/recreated → CSS :hover state is lost → flicker.
+    const ItemComponent = useMemo(() => {
+        const Comp = (props: BoardItemViewProps<Entity<M>>) => (
+            <BoardCardBinding
                 {...props}
-                collection={collection}
-                onClick={handleEntityClick}
-                selected={isEntitySelected(props.item.entity)}
-                onSelectionChange={handleSelectionChange}
-                selectionEnabled={selectionEnabled}
+                collection={collectionRef.current as CollectionConfig<M>}
+                onClick={stableOnClick}
+                selected={isEntitySelectedRef.current(props.item.data)}
+                onSelectionChange={stableOnSelectionChange}
+                selectionEnabled={selectionEnabledRef.current}
             />
         );
-    }, [collection, handleEntityClick, isEntitySelected, handleSelectionChange, selectionEnabled]);
+        Comp.displayName = "KanbanItemComponent";
+        return Comp;
+    }, []);
 
     // Get KanbanSetupComponent from plugin slots
     const kanbanSetupSlots = useSlot("kanban.setup", {
         collection,
         fullPath,
-        parentCollectionIds
+        parentCollectionSlugs,
+        parentEntityIds
     });
-    const KanbanSetupComponent = kanbanSetupSlots.length > 0 ? () => <>{kanbanSetupSlots[0]}</> : null;
+
 
     // Get AddKanbanColumnComponent from plugin slots
     const addKanbanColumnSlots = useSlot("kanban.add-column", {
         collection,
         fullPath,
-        parentCollectionIds,
+        parentCollectionSlugs,
+parentEntityIds,
         columnProperty
     });
-    const AddKanbanColumnComponent = addKanbanColumnSlots.length > 0 ? () => <>{addKanbanColumnSlots[0]}</> : null;
+
 
     // Check for loading error
     const hasError = Boolean(dataLoadingError);
@@ -559,7 +594,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
 
             {/* Main board */}
             <div className="flex-1 overflow-auto no-scrollbar">
-                <Board
+                <KanbanView
                     data={boardItems}
                     columns={columns}
                     columnLabels={columnLabels}
@@ -576,7 +611,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
                             path: fullPath,
                             column
                         });
-                        sideEntityController.open({
+                        sidePanelController.open({
                             path: fullPath,
                             collection,
                             entityId: undefined,
@@ -594,6 +629,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
 
             {/* Backfill dialog */}
             <Dialog open={showBackfillDialog} onOpenChange={setShowBackfillDialog}>
+                <DialogTitle hidden>{t("initialize_kanban_order")}</DialogTitle>
                 <DialogContent>
                     <Typography variant="h6" className="mb-4">{t("initialize_kanban_order")}</Typography>
                     <Typography variant="body2">

package/src/components/CollectionViewBinding/CollectionCardViewBinding.tsx

@@ -0,0 +1,157 @@
+import type { CollectionConfig } from "@rebasepro/types";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { CollectionSize, Entity, EntityTableController, SelectionController } from "@rebasepro/types";
+import { EntityCardBinding } from "./EntityCardBinding";
+import {
+    cls,
+    CircularProgress,
+    Typography,
+    CardView
+} from "@rebasepro/ui";
+import { useComponentOverride } from "@rebasepro/app";
+
+export type CollectionCardViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {
+    collection: CollectionConfig<M>;
+    tableController: EntityTableController<M>;
+    onEntityClick?: (entity: Entity<M>) => void;
+    selectionController?: SelectionController<M>;
+    selectionEnabled?: boolean;
+    highlightedEntities?: Entity<M>[];
+    emptyComponent?: React.ReactNode;
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward";
+        scrollOffset: number;
+        scrollUpdateWasRequested: boolean;
+    }) => void;
+    initialScroll?: number;
+    /**
+     * Size of the cards in the grid view.
+     * - "xs": Extra small cards, most cards per row
+     * - "s": Small cards
+     * - "m": Medium cards (default)
+     * - "l": Large cards
+     * - "xl": Extra large cards, fewest cards per row
+     */
+    size?: CollectionSize;
+};
+
+/**
+ * Get grid column classes based on the size.
+ * Smaller size = more columns (smaller cards)
+ * Larger size = fewer columns (larger cards)
+ */
+function getGridColumnsClass(size: CollectionSize): string {
+    switch (size) {
+        case "xs":
+            // Compact: many small cards
+            return "grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10";
+        case "s":
+            // Small: more cards per row
+            return "grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8";
+        case "m":
+            // Medium: balanced (default)
+            return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+        case "l":
+            // Large: fewer, bigger cards
+            return "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4";
+        case "xl":
+            // Extra large: fewest, biggest cards
+            return "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3";
+        default:
+            return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+    }
+}
+
+function getScrollParent(element: HTMLElement | null): HTMLElement | null {
+    if (!element) return null;
+    let parent = element.parentElement;
+    while (parent) {
+        const overflowY = window.getComputedStyle(parent).overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return document.documentElement;
+}
+
+/**
+ * Card grid view for displaying entities with infinite scroll.
+ * Alternative to the CollectionTableBinding for visual browsing.
+ */
+export function CollectionCardViewBinding<M extends Record<string, unknown> = Record<string, unknown>>({
+    collection,
+    tableController,
+    onEntityClick,
+    selectionController,
+    selectionEnabled = true,
+    highlightedEntities,
+    emptyComponent,
+    onScroll,
+    initialScroll,
+    size = "m"
+}: CollectionCardViewBindingProps<M>) {
+
+    const ResolvedEntityCard = useComponentOverride("Collection.Card", EntityCardBinding) as typeof EntityCardBinding;
+
+    const {
+        data,
+        dataLoading,
+        noMoreToLoad,
+        dataLoadingError,
+        itemCount,
+        setItemCount,
+        pageSize = 50,
+        paginationEnabled
+    } = tableController;
+
+    const handleEntityClick = useCallback((entity: Entity<M>) => {
+        onEntityClick?.(entity);
+    }, [onEntityClick]);
+
+    const handleSelectionChange = useCallback((entity: Entity<M>, selected: boolean) => {
+        selectionController?.toggleEntitySelection(entity, selected);
+    }, [selectionController]);
+
+    const selectedIds = useMemo(() => new Set(selectionController?.selectedEntities.map(e => e.id)), [selectionController?.selectedEntities]);
+    const highlightedIds = useMemo(() => new Set(highlightedEntities?.map(e => e.id)), [highlightedEntities]);
+
+    const handleRowSelectionChange = useCallback((entity: Entity<M>, selected: boolean) => {
+        handleSelectionChange(entity, selected);
+    }, [handleSelectionChange]);
+
+    return (
+        <CardView<Entity<M>>
+            data={data}
+            dataLoading={dataLoading}
+            noMoreToLoad={noMoreToLoad}
+            dataLoadingError={dataLoadingError}
+            itemCount={itemCount}
+            setItemCount={setItemCount}
+            pageSize={pageSize}
+            paginationEnabled={paginationEnabled}
+            onItemClick={handleEntityClick}
+            selectedIds={selectedIds}
+            highlightedIds={highlightedIds}
+            selectionEnabled={selectionEnabled}
+            onSelectionChange={handleRowSelectionChange}
+            onScroll={onScroll}
+            initialScroll={initialScroll}
+            size={size}
+            emptyComponent={emptyComponent}
+            renderCard={useCallback((entity, { selected, highlighted, onClick }) => (
+                <ResolvedEntityCard
+                    key={`${entity.path}_${entity.id}`}
+                    entity={entity}
+                    collection={collection}
+                    onClick={onClick as any}
+                    selected={selected}
+                    highlighted={highlighted}
+                    onSelectionChange={handleRowSelectionChange}
+                    selectionEnabled={selectionEnabled}
+                    size={size}
+                />
+            ), [collection, selectionEnabled, size, handleRowSelectionChange, ResolvedEntityCard])}
+        />
+    );
+}