@rebasepro/admin 0.1.2 → 0.2.3

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -4,7 +4,7 @@ import type { FormContext, PropertyFieldBindingProps } from "../../../../types/f
 import type { Property } from "@rebasepro/types";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
 
-import * as Portal from "@radix-ui/react-portal";
+import { Button, DialogActions, IconButton, Portal, Typography, XIcon } from "@rebasepro/ui";
 
 import { Entity, EntityValues } from "@rebasepro/types";
 import { PluginProviderStack } from "@rebasepro/core";
@@ -13,8 +13,6 @@ import { useDraggable } from "./useDraggable";
 import { CustomFieldValidator, getEntitySchema } from "../../../../form/validation";
 import { useWindowSize } from "./useWindowSize";
 import { getPropertyInPath } from "../../../../util/property_utils";
-import { Button, DialogActions, IconButton, Typography } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
 import { PropertyFieldBinding, zodToFormErrors } from "../../../../form";
 import { useAuthController, useCustomizationController, useData, useRebaseContext } from "@rebasepro/core";
 import type { OnCellValueChangeParams } from "@rebasepro/core";
@@ -61,7 +59,7 @@ export function PopupFormFieldLoading<M extends Record<string, unknown>>({
     const [entity, setEntity] = useState<Entity<M> | undefined>(undefined);
     useEffect(() => {
         if (entityId && inputCollection) {
-            dataClient.collection(path).findById(entityId).then(setEntity as any);
+            dataClient.collection(path).findById(entityId).then((result) => setEntity(result as Entity<M> | undefined));
         }
     }, [entityId, inputCollection, dataClient, path]);
 
@@ -409,7 +407,7 @@ export function PopupFormFieldInternal<M extends Record<string, unknown>>({
     return (
         <Portal.Root asChild
             container={container}>
-            <Formex value={formex as unknown as FormexController<Record<string, unknown>>}>
+            <Formex value={formex as FormexController<Record<string, unknown>>}>
                 {draggable}
             </Formex>
         </Portal.Root>

package/src/components/EntityCollectionTable/table_bindings.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ArrayProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, StringProperty } from "@rebasepro/types";
+import { ArrayProperty, DateProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, ReferenceProperty, RelationProperty, StringProperty } from "@rebasepro/types";
 
 import { VirtualTableInput } from "./fields/VirtualTableInput";
 import { VirtualTableSelect } from "./fields/VirtualTableSelect";
@@ -64,10 +64,11 @@ export function getTableBindingForProperty(
 
     if (property.type === "string" && (property as StringProperty).reference?.path) {
         return {
-            Component: ({ propertyKey, property, internalValue, updateValue, disabled, size, path }) => {
-                const referenceProperty = (property as StringProperty).reference as any;
+            Component: ({ propertyKey, property, internalValue, updateValue, disabled, size, path }: TableFieldBindingProps) => {
+                const referenceProperty = (property as StringProperty).reference;
+                if (!referenceProperty) return null;
                 const referenceValue = internalValue ? new EntityReference({ id: internalValue as string,
-path: referenceProperty.path as string }) : undefined;
+ path: referenceProperty.path as string }) : undefined;
                 return (
                     <TableReferenceField
                         name={propertyKey}
@@ -77,7 +78,7 @@ path: referenceProperty.path as string }) : undefined;
                         size={size}
                         path={referenceProperty.path as string}
                         multiselect={false}
-                        previewProperties={referenceProperty.previewProperties}
+                        previewProperties={referenceProperty.ui?.previewProperties}
                         includeId={referenceProperty.includeId}
                         includeEntityLink={referenceProperty.includeEntityLink}
                         title={property.name}
@@ -89,14 +90,14 @@ path: referenceProperty.path as string }) : undefined;
         };
     } else if (isAStorageProperty) {
         return {
-            Component: ({ validationError, error, disabled, selected, openPopup, property, entity, path, internalValue, size, updateValue, propertyKey }: any) => (
+            Component: ({ validationError, error, disabled, selected, openPopup, property, entity, path, internalValue, size, updateValue, propertyKey }: TableFieldBindingProps) => (
                 <TableStorageUpload
                     error={validationError ?? error}
                     disabled={disabled}
                     focused={selected}
                     selected={selected}
                     openPopup={openPopup}
-                    property={property as any}
+                    property={property as StringProperty | ArrayProperty}
                     entity={entity}
                     path={path}
                     value={internalValue}
@@ -114,7 +115,7 @@ path: referenceProperty.path as string }) : undefined;
         const numberProperty = property as NumberProperty;
         if (numberProperty.enum) {
             return {
-                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableSelect
                         name={propertyKey}
                         multiple={false}
@@ -132,7 +133,7 @@ path: referenceProperty.path as string }) : undefined;
             };
         } else {
             return {
-                Component: ({ align, error, validationError, selected, disabled, internalValue, updateValue }: any) => (
+                Component: ({ align, error, validationError, selected, disabled, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableNumberInput
                         align={align}
                         error={validationError ?? error}
@@ -149,7 +150,7 @@ path: referenceProperty.path as string }) : undefined;
         const stringProperty = property as StringProperty;
         if (stringProperty.enum) {
             return {
-                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableSelect
                         name={propertyKey}
                         multiple={false}
@@ -167,7 +168,7 @@ path: referenceProperty.path as string }) : undefined;
             };
         } else if (stringProperty.userSelect) {
             return {
-                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableUserSelect
                         name={propertyKey}
                         multiple={false}
@@ -184,7 +185,7 @@ path: referenceProperty.path as string }) : undefined;
         } else if (stringProperty.ui?.markdown || !stringProperty.storage || !stringProperty.reference) {
             const multiline = Boolean(stringProperty.ui?.multiline) || Boolean(stringProperty.ui?.markdown);
             return {
-                Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: any) => (
+                Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: TableFieldBindingProps) => (
                     <VirtualTableInput
                         error={validationError ?? error}
                         disabled={disabled}
@@ -199,7 +200,7 @@ path: referenceProperty.path as string }) : undefined;
         }
     } else if (property.type === "boolean") {
         return {
-            Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: any) => (
+            Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: TableFieldBindingProps) => (
                 <VirtualTableSwitch
                     error={validationError ?? error}
                     disabled={disabled}
@@ -211,12 +212,12 @@ path: referenceProperty.path as string }) : undefined;
         };
     } else if (property.type === "date") {
         return {
-            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: any) => (
+            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: TableFieldBindingProps) => (
                 <VirtualTableDateField
                     name={propertyKey}
                     error={validationError ?? error}
                     disabled={disabled}
-                    mode={property.mode}
+                    mode={(property as DateProperty).mode}
                     focused={selected}
                     internalValue={internalValue as Date}
                     updateValue={updateValue}
@@ -227,30 +228,32 @@ path: referenceProperty.path as string }) : undefined;
             allowScroll: false
         };
     } else if (property.type === "reference") {
-        if (typeof property.path === "string") {
+        if ((property as ReferenceProperty).path) {
             return {
-                Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: any) => (
+                Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: TableFieldBindingProps) => {
+                    return (
                     <TableReferenceField
                         name={propertyKey}
                         internalValue={internalValue as EntityReference}
                         updateValue={updateValue}
                         disabled={disabled}
                         size={size}
-                        path={property.path}
+                        path={(property as ReferenceProperty).path!}
                         multiselect={false}
-                        previewProperties={property.ui?.previewProperties}
-                        includeId={property.includeId}
-                        includeEntityLink={property.includeEntityLink}
+                        previewProperties={(property as ReferenceProperty).ui?.previewProperties}
+                        includeId={(property as ReferenceProperty).includeId}
+                        includeEntityLink={(property as ReferenceProperty).includeEntityLink}
                         title={property.name ?? propertyKey}
-                        fixedFilter={property.fixedFilter}
+                        fixedFilter={(property as ReferenceProperty).fixedFilter}
                     />
-                ),
+                    );
+                },
                 allowScroll: false
             };
         }
     } else if (property.type === "relation") {
-        if (property.relation) {
-            if (property.ui?.widget === "dialog") {
+        if ((property as RelationProperty).relation) {
+            if ((property as RelationProperty).ui?.widget === "dialog") {
                 return {
                     Component: RelationDialogBindingComponent,
                     allowScroll: false
@@ -268,11 +271,11 @@ path: referenceProperty.path as string }) : undefined;
         if (!arrayProperty.of && !arrayProperty.oneOf) {
             throw Error("You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property");
         } else if (arrayProperty.of && !Array.isArray(arrayProperty.of)) {
-            const ofProp = arrayProperty.of as any;
+            const ofProp = arrayProperty.of as Property;
             if (ofProp.type === "string" || ofProp.type === "number") {
                 if (selected && ofProp.enum) {
                     return {
-                        Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                        Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: TableFieldBindingProps) => (
                             <VirtualTableSelect
                                 name={propertyKey}
                                 multiple={true}
@@ -280,7 +283,7 @@ path: referenceProperty.path as string }) : undefined;
                                 focused={selected}
                                 small={getPreviewSizeFrom(size) !== "medium"}
                                 valueType={ofProp.type}
-                                enumValues={ofProp.enum}
+                                enumValues={ofProp.enum!}
                                 error={validationError ?? error}
                                 internalValue={internalValue as string | number}
                                 updateValue={updateValue}
@@ -292,9 +295,10 @@ path: referenceProperty.path as string }) : undefined;
                     };
                 }
             } else if (ofProp.type === "reference") {
-                if (typeof ofProp.path === "string") {
+                const refOfProp = ofProp as ReferenceProperty;
+                if (refOfProp.path) {
                     return {
-                        Component: ({ propertyKey, disabled, internalValue, updateValue, size }: any) => (
+                        Component: ({ propertyKey, disabled, internalValue, updateValue, size }: TableFieldBindingProps) => (
                             <TableReferenceField
                                 name={propertyKey}
                                 disabled={disabled}
@@ -302,12 +306,12 @@ path: referenceProperty.path as string }) : undefined;
                                 updateValue={updateValue}
                                 size={size}
                                 multiselect={true}
-                                path={ofProp.path}
-                                previewProperties={ofProp.previewProperties}
+                                path={refOfProp.path!}
+                                previewProperties={refOfProp.ui?.previewProperties}
                                 title={arrayProperty.name}
-                                fixedFilter={ofProp.fixedFilter}
-                                includeId={ofProp.includeId}
-                                includeEntityLink={ofProp.includeEntityLink}
+                                fixedFilter={refOfProp.fixedFilter}
+                                includeId={refOfProp.includeId}
+                                includeEntityLink={refOfProp.includeEntityLink}
                             />
                         ),
                         allowScroll: false
@@ -321,7 +325,8 @@ path: referenceProperty.path as string }) : undefined;
 }
 
 /** Stable component for relation fields rendered with the dialog widget */
-function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property }: any) {
+function RelationDialogBindingComponent({ propertyKey, internalValue, updateValue, disabled, size, property }: TableFieldBindingProps) {
+    const relProp = property as RelationProperty;
     return (
         <TableRelationField
             name={propertyKey}
@@ -330,18 +335,19 @@ function RelationDialogBindingComponent({ propertyKey, internalValue, updateValu
             disabled={disabled}
             size={size}
             multiselect={false}
-            relation={property.relation}
-            previewProperties={property.ui?.previewProperties}
-            includeId={property.includeId}
-            includeEntityLink={property.includeEntityLink}
-            title={property.name ?? propertyKey}
-            fixedFilter={property.fixedFilter}
+            relation={relProp.relation!}
+            previewProperties={relProp.ui?.previewProperties}
+            includeId={relProp.includeId}
+            includeEntityLink={relProp.includeEntityLink}
+            title={relProp.name ?? propertyKey}
+            fixedFilter={relProp.fixedFilter}
         />
     );
 }
 
 /** Stable component for relation fields rendered with the inline selector */
-function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property }: any) {
+function RelationSelectorBindingComponent({ propertyKey, internalValue, updateValue, disabled, property }: TableFieldBindingProps) {
+    const relProp = property as RelationProperty;
     return (
         <TableRelationSelectorField
             name={propertyKey}
@@ -349,8 +355,8 @@ function RelationSelectorBindingComponent({ propertyKey, internalValue, updateVa
             updateValue={updateValue}
             disabled={disabled}
             size={"small"}
-            relation={property.relation!}
-            fixedFilter={property.fixedFilter}
+            relation={relProp.relation!}
+            fixedFilter={relProp.fixedFilter}
         />
     );
 }

package/src/components/EntityCollectionView/Board.tsx

@@ -148,7 +148,6 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
             }
             return updated;
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data, columnsProp, assignColumn]);
 
     const findColumnByItemId = (id: string): string | undefined => {
@@ -328,7 +327,7 @@ export function Board<M extends Record<string, unknown>, COLUMN extends string>(
             const overColumn = findColumnByItemId(overId) || currentColumn;
 
 
-            let finalItemMapState = { ...itemMapState };
+            const finalItemMapState = { ...itemMapState };
 
             if (currentColumn && currentColumn === overColumn) {
                 // Use dnd-kit's sortable indexes if available to avoid race conditions with mutating handleDragOver

package/src/components/EntityCollectionView/BoardColumn.tsx

@@ -4,8 +4,15 @@ import { CSS } from "@dnd-kit/utilities";
 import { BoardSortableList } from "./BoardSortableList";
 import { BoardColumnTitle } from "./BoardColumnTitle";
 import { BoardItem, BoardItemViewProps } from "./board_types";
-import { ChipColorKey, ChipColorScheme, cls, defaultBorderMixin, IconButton , iconSize } from "@rebasepro/ui";
-import { PlusIcon } from "lucide-react";
+import {
+    ChipColorKey,
+    ChipColorScheme,
+    cls,
+    defaultBorderMixin,
+    IconButton,
+    iconSize,
+    PlusIcon
+} from "@rebasepro/ui";
 
 export interface BoardColumnProps<M extends Record<string, unknown>> {
     id: string;

package/src/components/EntityCollectionView/BoardColumnTitle.tsx

@@ -1,4 +1,4 @@
-import { ChipColorKey, ChipColorScheme, getColorSchemeForKey, cls } from "@rebasepro/ui";
+import { ChipColorKey, ChipColorScheme, getColorSchemeForKey, cls, Typography } from "@rebasepro/ui";
 import React, { useMemo } from "react";
 
 export interface BoardColumnTitleProps {
@@ -23,10 +23,11 @@ export function BoardColumnTitle({
     }, [color]);
 
     return (
-        <h4
+        <Typography
+            variant="subtitle2"
+            component="h4"
             className={
                 cls("py-3 px-3 transition-colors duration-200 flex-grow select-none relative outline-none focus:outline focus:outline-2 focus:outline-offset-2 flex items-center gap-3",
-                    "text-sm font-semibold text-surface-900 dark:text-surface-200",
                     className)
             }
             {...props}
@@ -40,6 +41,6 @@ export function BoardColumnTitle({
                 />
             )}
             {children}
-        </h4>
+        </Typography>
     );
 }

package/src/components/EntityCollectionView/EntityCollectionBoardView.tsx

@@ -1,13 +1,25 @@
 
 import type { EntityCollection } from "@rebasepro/types";
-import type { Property } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Entity, EntityTableController, EnumValueConfig, FilterValues, SaveEntityProps, SelectionController } from "@rebasepro/types";
+import { Entity, EntityTableController, EnumValueConfig, 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 {
+    Button,
+    ChipColorKey,
+    ChipColorScheme,
+    CircularProgress,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    getColorSchemeForSeed,
+    IconButton,
+    iconSize,
+    RefreshCwIcon,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
 import { resolveEnumValues } from "@rebasepro/common";
 import { getPropertyInPath } from "../../util/property_utils";
 import {
@@ -58,7 +70,6 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
     emptyComponent,
     deletedEntities
 }: EntityCollectionBoardViewProps<M>) {
-    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const context = useRebaseContext();
     const dataClient = useData();
@@ -245,7 +256,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) {
@@ -351,9 +361,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", {
@@ -363,19 +371,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);
@@ -404,9 +409,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
@@ -456,7 +459,6 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
     // 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.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const ItemComponent = useMemo(() => {
         const Comp = (props: BoardItemViewProps<M>) => (
             <EntityBoardCard
@@ -479,7 +481,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
         parentCollectionSlugs,
         parentEntityIds
     });
-    const KanbanSetupComponent = kanbanSetupSlots.length > 0 ? () => <>{kanbanSetupSlots[0]}</> : null;
+
 
     // Get AddKanbanColumnComponent from plugin slots
     const addKanbanColumnSlots = useSlot("kanban.add-column", {
@@ -488,7 +490,7 @@ export function EntityCollectionBoardView<M extends Record<string, unknown> = Re
         parentCollectionSlugs, parentEntityIds,
         columnProperty
     });
-    const AddKanbanColumnComponent = addKanbanColumnSlots.length > 0 ? () => <>{addKanbanColumnSlots[0]}</> : null;
+
 
     // Check for loading error
     const hasError = Boolean(dataLoadingError);

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -7,7 +7,6 @@ import {
     CircularProgress,
     Typography
 } from "@rebasepro/ui";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
 
 export type EntityCollectionCardViewProps<M extends Record<string, unknown> = Record<string, unknown>> = {
     collection: EntityCollection<M>;
@@ -77,8 +76,6 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
     initialScroll,
     size = "m"
 }: EntityCollectionCardViewProps<M>) {
-    const authController = useAuthController();
-    const customizationController = useCustomizationController();
 
     const containerRef = useRef<HTMLDivElement>(null);
     const loadMoreRef = useRef<HTMLDivElement>(null);
@@ -98,28 +95,30 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
     // Track if we're currently loading to prevent multiple simultaneous load requests
     const isLoadingMore = useRef(false);
 
-    // Infinite scroll with Intersection Observer
+    // Keep mutable refs for values used in the IntersectionObserver callback
+    // to avoid re-creating the observer every time pagination state changes.
+    const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize });
     useEffect(() => {
-        if (!paginationEnabled || noMoreToLoad || dataLoading) {
-            return;
-        }
+        paginationStateRef.current = { paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize };
+    }, [paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize]);
 
-        // Reset loading flag when dataLoading becomes false
-        if (!dataLoading) {
-            isLoadingMore.current = false;
-        }
+    // Reset loading flag when new data arrives (separate effect, like list view)
+    useEffect(() => {
+        if (!dataLoading) isLoadingMore.current = false;
+    }, [dataLoading]);
 
+    // Infinite scroll with Intersection Observer — stable deps only
+    useEffect(() => {
         const observer = new IntersectionObserver(
             (entries) => {
-                if (entries[0].isIntersecting && !dataLoading && !noMoreToLoad && !isLoadingMore.current) {
-                    // Prevent multiple load requests
+                const { paginationEnabled: pe, noMoreToLoad: nm, dataLoading: dl, itemCount: ic, pageSize: ps } = paginationStateRef.current;
+                if (entries[0].isIntersecting && pe && !dl && !nm && !isLoadingMore.current) {
                     isLoadingMore.current = true;
-                    // Load more items
-                    setItemCount?.((itemCount ?? pageSize) + pageSize);
+                    setItemCount?.((ic ?? ps) + ps);
                 }
             },
             {
-                root: containerRef.current, // Use the scroll container, not viewport
+                root: containerRef.current,
                 rootMargin: "400px",
                 threshold: 0
             }
@@ -130,7 +129,7 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
         }
 
         return () => observer.disconnect();
-    }, [paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize, setItemCount]);
+    }, [setItemCount]);
 
     // Scroll restoration — deferred to after layout paint
     useEffect(() => {