@rebasepro/admin 0.1.2 → 0.2.3

package/src/components/EntityCollectionView/FilterPresetsButton.tsx

@@ -0,0 +1,292 @@
+import React, { useCallback, useMemo } from "react";
+import { CheckIcon, ChevronsUpDownIcon, cls, FilterChip, Menu, MenuItem, Tooltip } from "@rebasepro/ui";
+import type { EntityTableController, FilterValues, FilterPreset } from "@rebasepro/types";
+
+export interface FilterPresetsButtonProps<M extends Record<string, unknown>> {
+    filterPresets: FilterPreset<Extract<keyof M, string> | (string & {})>[];
+    tableController: EntityTableController<M>;
+    compact?: boolean;
+}
+
+/**
+ * Maximum number of presets shown as inline toggle chips before the
+ * rest are collapsed into an overflow menu.
+ */
+const MAX_VISIBLE_PRESETS = 4;
+
+/** Max characters for a chip label before truncation. */
+const MAX_LABEL_LENGTH = 22;
+
+// ─── Helpers ────────────────────────────────────────────────────────
+
+/**
+ * Deep equality without JSON.stringify.
+ * Handles primitives, arrays, Dates, and plain objects recursively.
+ */
+function deepEqual(a: unknown, b: unknown): boolean {
+    if (a === b) return true;
+    if (a == null || b == null) return false;
+    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+    if (Array.isArray(a) && Array.isArray(b)) {
+        if (a.length !== b.length) return false;
+        return a.every((v, i) => deepEqual(v, b[i]));
+    }
+    if (typeof a === "object" && typeof b === "object") {
+        const aKeys = Object.keys(a as Record<string, unknown>);
+        const bKeys = Object.keys(b as Record<string, unknown>);
+        if (aKeys.length !== bKeys.length) return false;
+        return aKeys.every(k =>
+            deepEqual(
+                (a as Record<string, unknown>)[k],
+                (b as Record<string, unknown>)[k]
+            )
+        );
+    }
+    return false;
+}
+
+/**
+ * Check if a preset's filters are a subset of the controller's
+ * current filter values (key-by-key deep comparison on the tuples).
+ */
+function isPresetActive(
+    preset: FilterPreset<string>,
+    controllerFilters: Record<string, unknown> | undefined
+): boolean {
+    if (!controllerFilters) return false;
+    const entries = Object.entries(preset.filterValues);
+    if (entries.length === 0) return false;
+    for (const [key, presetTuple] of entries) {
+        const controllerTuple = controllerFilters[key];
+        if (!controllerTuple || !presetTuple) return false;
+        if (!deepEqual(presetTuple, controllerTuple)) return false;
+    }
+    return true;
+}
+
+/**
+ * Generate a human-readable label from filter keys when no explicit label is provided.
+ */
+function generateLabel(filterValues: FilterValues<string>): string {
+    const keys = Object.keys(filterValues);
+    if (keys.length === 0) return "Filter";
+    if (keys.length === 1) return keys[0].replace(/_/g, " ");
+    if (keys.length === 2) return keys.map(k => k.replace(/_/g, " ")).join(" + ");
+    return `${keys[0].replace(/_/g, " ")} +${keys.length - 1}`;
+}
+
+/**
+ * Truncate a label if it exceeds MAX_LABEL_LENGTH.
+ */
+function truncateLabel(label: string): { display: string; truncated: boolean } {
+    if (label.length <= MAX_LABEL_LENGTH) return { display: label, truncated: false };
+    return { display: label.slice(0, MAX_LABEL_LENGTH - 1) + "…", truncated: true };
+}
+
+// ─── Overflow Menu ──────────────────────────────────────────────────
+
+interface OverflowMenuProps {
+    presets: { preset: FilterPreset<string>; originalIndex: number }[];
+    activeSet: Set<number>;
+    onToggle: (index: number) => void;
+}
+
+function OverflowMenu({ presets, activeSet, onToggle }: OverflowMenuProps) {
+    const activeCount = presets.filter(p => activeSet.has(p.originalIndex)).length;
+
+    const trigger = (
+        <FilterChip
+            active={activeCount > 0}
+            icon={<ChevronsUpDownIcon size={12} />}
+        >
+            +{presets.length}
+        </FilterChip>
+    );
+
+    return (
+        <Menu trigger={trigger} side="bottom" align="start">
+            <div className="min-w-[180px] max-w-[300px] max-h-[320px] overflow-y-auto">
+                {presets.map(({ preset, originalIndex }) => {
+                    const rawLabel = preset.label ?? generateLabel(preset.filterValues as FilterValues<string>);
+                    const active = activeSet.has(originalIndex);
+
+                    return (
+                        <MenuItem
+                            key={originalIndex}
+                            dense
+                            onClick={() => onToggle(originalIndex)}
+                            className={cls(active && "bg-primary/10 dark:bg-primary/20")}
+                        >
+                            <span className="flex items-center gap-2 w-full min-w-0">
+                                {active && <CheckIcon size={14} className="text-primary shrink-0" />}
+                                <span className={cls("truncate", active ? "text-primary font-medium" : "")}>
+                                    {rawLabel}
+                                </span>
+                            </span>
+                        </MenuItem>
+                    );
+                })}
+            </div>
+        </Menu>
+    );
+}
+
+// ─── Main Component ─────────────────────────────────────────────────
+
+/**
+ * Filter Presets — displayed as inline toggle chips in the collection toolbar.
+ *
+ * Active state is **derived** from the controller's actual filter values,
+ * not tracked locally. A chip is "active" when ALL of its filter entries
+ * match the current controller state (deep value comparison, no JSON.stringify).
+ *
+ * This means:
+ * - Toggling a preset on adds its filters to the controller.
+ * - Toggling it off removes its filter keys.
+ * - Changing filters via the dialog automatically deactivates unmatched chips.
+ * - Clearing all filters deactivates all chips.
+ * - Multiple presets can be active simultaneously.
+ */
+export function FilterPresetsButton<M extends Record<string, unknown>>({
+    filterPresets,
+    tableController,
+    compact
+}: FilterPresetsButtonProps<M>) {
+
+    // ── Derive active state from controller ─────────────────────────
+    const activeSet = useMemo(() => {
+        const set = new Set<number>();
+        if (!filterPresets.length || !tableController.setFilterValues) return set;
+        for (let i = 0; i < filterPresets.length; i++) {
+            if (isPresetActive(
+                filterPresets[i] as FilterPreset<string>,
+                tableController.filterValues as Record<string, unknown> | undefined
+            )) {
+                set.add(i);
+            }
+        }
+        return set;
+    }, [filterPresets, tableController.filterValues, tableController.setFilterValues]);
+
+    // ── Toggle handler ──────────────────────────────────────────────
+    const handleToggle = useCallback((index: number) => {
+        const preset = filterPresets[index] as FilterPreset<string>;
+        const currentFilters = { ...(tableController.filterValues ?? {}) } as Record<string, [string, unknown]>;
+        const wasActive = isPresetActive(preset, currentFilters);
+
+        if (wasActive) {
+            // Toggle OFF: remove this preset's filter keys
+            for (const key of Object.keys(preset.filterValues)) {
+                delete currentFilters[key];
+            }
+            // Re-apply overlapping keys from other still-active presets
+            for (let i = 0; i < filterPresets.length; i++) {
+                if (i === index) continue;
+                const other = filterPresets[i] as FilterPreset<string>;
+                if (isPresetActive(other, currentFilters)) {
+                    Object.assign(currentFilters, other.filterValues);
+                }
+            }
+        } else {
+            // Toggle ON: merge this preset's filters on top
+            Object.assign(currentFilters, preset.filterValues);
+        }
+
+        // Apply
+        if (Object.keys(currentFilters).length === 0) {
+            if (tableController.clearFilter) {
+                tableController.clearFilter();
+            } else {
+                tableController.setFilterValues?.(
+                    {} as FilterValues<Extract<keyof M, string> | (string & {})>
+                );
+            }
+            tableController.setSortBy?.(undefined);
+        } else {
+            tableController.setFilterValues?.(
+                currentFilters as FilterValues<Extract<keyof M, string> | (string & {})>
+            );
+
+            // Resolve sort: use the toggled preset's sort if toggling on,
+            // otherwise find sort from remaining active presets
+            if (!wasActive && preset.sort) {
+                tableController.setSortBy?.(
+                    preset.sort as [Extract<keyof M, string> | (string & {}), "asc" | "desc"]
+                );
+            } else if (wasActive) {
+                let remainingSort: [string, "asc" | "desc"] | undefined;
+                for (let i = 0; i < filterPresets.length; i++) {
+                    if (i === index) continue;
+                    const other = filterPresets[i] as FilterPreset<string>;
+                    if (isPresetActive(other, currentFilters) && other.sort) {
+                        remainingSort = other.sort;
+                    }
+                }
+                tableController.setSortBy?.(
+                    remainingSort as [Extract<keyof M, string> | (string & {}), "asc" | "desc"] | undefined
+                );
+            }
+        }
+    }, [filterPresets, tableController]);
+
+    // ── Guard (after hooks to preserve Rules of Hooks) ──────────────
+    if (!filterPresets.length || !tableController.setFilterValues) return null;
+
+    // ── Split visible vs overflow ───────────────────────────────────
+    const maxVisible = compact ? 2 : MAX_VISIBLE_PRESETS;
+    const needsOverflow = filterPresets.length > maxVisible;
+    const visibleCount = needsOverflow ? maxVisible - 1 : filterPresets.length;
+
+    const visiblePresets = filterPresets.slice(0, visibleCount);
+    const overflowPresets = needsOverflow
+        ? filterPresets.slice(visibleCount).map((preset, i) => ({
+            preset: preset as FilterPreset<string>,
+            originalIndex: visibleCount + i
+        }))
+        : [];
+
+    const hasOverflow = overflowPresets.length > 0;
+
+    return (
+        <div className="flex items-center gap-1 min-w-0 overflow-hidden">
+            {/* Scrollable chip area — on narrow screens chips scroll,
+                on desktop there's enough space so no scroll occurs.
+                py-0.5 gives the inset shadow breathing room inside the clip area. */}
+            <div
+                className="flex items-center gap-1 min-w-0 overflow-x-auto py-0.5"
+                style={{ scrollbarWidth: "none" }}
+            >
+                {visiblePresets.map((preset, index) => {
+                    const rawLabel = preset.label ?? generateLabel(preset.filterValues as FilterValues<string>);
+                    const { display, truncated } = truncateLabel(rawLabel);
+                    const active = activeSet.has(index);
+
+                    const chip = (
+                        <FilterChip
+                            key={index}
+                            active={active}
+                            onClick={() => handleToggle(index)}
+                            size="small"
+                        >
+                            {display}
+                        </FilterChip>
+                    );
+
+                    if (truncated) {
+                        return <Tooltip key={index} title={rawLabel}>{chip}</Tooltip>;
+                    }
+                    return chip;
+                })}
+            </div>
+
+            {/* Overflow button — always pinned outside the scroll area */}
+            {hasOverflow && (
+                <OverflowMenu
+                    presets={overflowPresets}
+                    activeSet={activeSet}
+                    onToggle={handleToggle}
+                />
+            )}
+        </div>
+    );
+}

package/src/components/EntityCollectionView/FiltersDialog.tsx

@@ -3,12 +3,11 @@ import type { Property } from "@rebasepro/types";
 import React, { useCallback, useMemo, useState } from "react";
 import { FilterValues, WhereFilterOp } from "@rebasepro/types";
 import { Button, cls, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
-import { FilterIcon } from "lucide-react";
+import { FilterIcon, VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { StringNumberFilterField } from "../SelectableTable/filters/StringNumberFilterField";
 import { BooleanFilterField } from "../SelectableTable/filters/BooleanFilterField";
 import { DateTimeFilterField } from "../SelectableTable/filters/DateTimeFilterField";
 import { ReferenceFilterField } from "../SelectableTable/filters/ReferenceFilterField";
-import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { enumToObjectEntries } from "@rebasepro/common";
 import { useTranslation } from "@rebasepro/core";
 

package/src/components/EntityCollectionView/SplitListView.tsx

@@ -2,6 +2,7 @@ import type { EntityCollection } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CollectionSize, Entity, EntityTableController, SelectionController } from "@rebasepro/types";
 import { EntityEditView } from "../EntityEditView";
+import { EntityDetailView } from "../EntityDetailView";
 import {
     cls,
     defaultBorderMixin,
@@ -9,7 +10,7 @@ import {
 } from "@rebasepro/ui";
 import { useLargeLayout } from "@rebasepro/core";
 import { useCollectionRegistryController } from "../../index";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { useUrlController } from "../../index";
 import { ErrorBoundary } from "@rebasepro/ui";
 
@@ -107,6 +108,8 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
 }: SplitListViewProps<M>) {
     const largeLayout = useLargeLayout();
     const collectionRegistryController = useCollectionRegistryController();
+    const location = useLocation();
+    const isEditMode = location.pathname.endsWith("/edit") || location.pathname.split("/").pop() === "edit";
     const navigate = useNavigate();
     const urlController = useUrlController();
 
@@ -288,30 +291,78 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
             style={{ transitionDuration: `${TRANSITION_DURATION}ms` }}
         >
             <ErrorBoundary>
-                <EntityEditView
-                    key={String(renderedEntityId)}
-                    path={path}
-                    collection={collection as EntityCollection<Record<string, unknown>>}
-                    entityId={renderedEntityId}
-                    parentCollectionSlugs={usedParentCollectionIds}
-                    parentEntityIds={usedParentEntityIds}
-                    selectedTab={selectedTab}
-                    layout="split"
-                    onTabChange={(params) => {
-                        const newSelectedTab = params.selectedTab;
-                        let entityUrl = urlController.buildUrlCollectionPath(
-                            newSelectedTab
-                                ? `${path}/${renderedEntityId}/${newSelectedTab}`
-                                : `${path}/${renderedEntityId}`
-                        );
-                        // Preserve the __view query param
-                        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                        if (currentViewParam) {
-                            entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                        }
-                        navigate(entityUrl);
-                    }}
-                />
+                {collection.defaultEntityAction === "view" && !isEditMode
+                    ? <EntityDetailView
+                        key={String(renderedEntityId)}
+                        path={path}
+                        collection={collection as EntityCollection<Record<string, unknown>>}
+                        entityId={renderedEntityId}
+                        parentCollectionSlugs={usedParentCollectionIds}
+                        parentEntityIds={usedParentEntityIds}
+                        selectedTab={selectedTab}
+                        layout="split"
+                        onEditClick={() => {
+                            let entityUrl = urlController.buildUrlCollectionPath(`${path}/${renderedEntityId}/edit`);
+                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
+                            if (currentViewParam) {
+                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
+                            }
+                            navigate(entityUrl);
+                        }}
+                        onTabChange={(params) => {
+                            const newSelectedTab = params.selectedTab;
+                            let entityUrl = urlController.buildUrlCollectionPath(
+                                newSelectedTab
+                                    ? `${path}/${renderedEntityId}/${newSelectedTab}`
+                                    : `${path}/${renderedEntityId}`
+                            );
+                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
+                            if (currentViewParam) {
+                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
+                            }
+                            navigate(entityUrl);
+                        }}
+                    />
+                    : <EntityEditView
+                        key={String(renderedEntityId)}
+                        path={path}
+                        collection={collection as EntityCollection<Record<string, unknown>>}
+                        entityId={renderedEntityId}
+                        parentCollectionSlugs={usedParentCollectionIds}
+                        parentEntityIds={usedParentEntityIds}
+                        selectedTab={selectedTab}
+                        layout="split"
+                        onSaved={(params) => {
+                            let entityUrl = urlController.buildUrlCollectionPath(`${path}/${renderedEntityId}`);
+                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
+                            if (currentViewParam) {
+                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
+                            }
+                            navigate(entityUrl, { replace: true });
+                        }}
+                        navigateBack={() => {
+                            let entityUrl = urlController.buildUrlCollectionPath(`${path}/${renderedEntityId}`);
+                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
+                            if (currentViewParam) {
+                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
+                            }
+                            navigate(entityUrl);
+                        }}
+                        onTabChange={(params) => {
+                            const newSelectedTab = params.selectedTab;
+                            let entityUrl = urlController.buildUrlCollectionPath(
+                                newSelectedTab
+                                    ? `${path}/${renderedEntityId}/${newSelectedTab}`
+                                    : `${path}/${renderedEntityId}`
+                            );
+                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
+                            if (currentViewParam) {
+                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
+                            }
+                            navigate(entityUrl);
+                        }}
+                    />
+                }
             </ErrorBoundary>
         </div>
     ) : <></>;

package/src/components/EntityCollectionView/ViewModeToggle.tsx

@@ -1,8 +1,20 @@
 
 import React, { useMemo } from "react";
 import { CollectionSize, ViewMode } from "@rebasepro/types";
-import { Button, Popover, Select, SelectItem, ToggleButtonGroup, ToggleButtonOption , iconSize } from "@rebasepro/ui";
-import { LayoutGridIcon, ListIcon, TableIcon, ColumnsIcon, KanbanIcon } from "lucide-react";
+import {
+    Button,
+    ColumnsIcon,
+    iconSize,
+    KanbanIcon,
+    LayoutGridIcon,
+    ListIcon,
+    Popover,
+    Select,
+    SelectItem,
+    TableIcon,
+    ToggleButtonGroup,
+    ToggleButtonOption
+} from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/core";
 
 export type KanbanPropertyOption = {
@@ -66,9 +78,7 @@ export function ViewModeToggle({
 
     const { t } = useTranslation();
 
-    if (!onViewModeChange) {
-        return null;
-    }
+
 
     // Get icon for current view mode
     const getViewModeIcon = () => {
@@ -117,9 +127,12 @@ export function ViewModeToggle({
         ];
 
         return allOptions;
-    }, []);
-
+    }, [t]);
 
+    // ── Guard (after hooks to preserve Rules of Hooks) ──────────────
+    if (!onViewModeChange) {
+        return null;
+    }
 
     return (
         <div className="overflow-visible">

package/src/components/EntityCollectionView/hooks/useKanbanDragAndDrop.ts

@@ -70,7 +70,7 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
                 : null;
 
             try {
-                let a = prevKey;
+                const a = prevKey;
                 let b = nextKey;
                 if (a !== null && b !== null && a >= b) {
                     // Handle duplicate or out-of-order keys to prevent fractional-indexing crash

package/src/components/EntityCollectionView/useBoardDataController.tsx

@@ -5,6 +5,26 @@ import { useData, useRebaseContext } from "@rebasepro/core";
 
 const DEFAULT_PAGE_SIZE = 20;
 
+/**
+ * Shallow equality for entity value records.
+ * Handles primitives and reference equality for nested values.
+ * Avoids JSON.stringify allocation on every comparison.
+ */
+function shallowEqualValues(
+    a: Record<string, unknown> | undefined,
+    b: Record<string, unknown> | undefined
+): boolean {
+    if (a === b) return true;
+    if (!a || !b) return false;
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (const key of keysA) {
+        if (a[key] !== b[key]) return false;
+    }
+    return true;
+}
+
 /**
  * Data state for a single board column
  */
@@ -159,6 +179,34 @@ export function useBoardDataController<M extends Record<string, unknown> = any,
         };
     }, []);
 
+    /**
+     * Check if a column value is excluded by the active filter on the columnProperty.
+     * E.g. if the user sets "Status IN (Open, In Progress)", this returns true
+     * for "Waiting on Customer" since that column should show as empty.
+     */
+    const isColumnExcludedByFilter = useCallback((column: string, filterValues?: FilterValues<string>, colProperty?: string): boolean => {
+        if (!filterValues || !colProperty) return false;
+        const filterForColumn = filterValues[colProperty as keyof typeof filterValues];
+        if (!filterForColumn || !Array.isArray(filterForColumn)) return false;
+
+        const [op, val] = filterForColumn as [string, unknown];
+
+        if (op === "==" && typeof val === "string") {
+            return column !== val;
+        }
+        if (op === "!=" && typeof val === "string") {
+            return column === val;
+        }
+        if (op === "in" && Array.isArray(val)) {
+            return !val.map(String).includes(column);
+        }
+        if (op === "not-in" && Array.isArray(val)) {
+            return val.map(String).includes(column);
+        }
+
+        return false;
+    }, []);
+
     // Helper function to subscribe to a single column - uses refs to avoid dependency issues
     const subscribeToColumn = useCallback((column: string, itemCount: number) => {
         // Skip if we're in the middle of cleanup
@@ -173,6 +221,23 @@ export function useBoardDataController<M extends Record<string, unknown> = any,
         const currentSearchString = searchStringRef.current;
         const currentResolvedPath = resolvedPathRef.current;
 
+        // If the column is excluded by the active filter on the column property,
+        // set it as empty immediately without querying.
+        const excluded = isColumnExcludedByFilter(column, currentFilterValues, currentColumnProperty);
+        if (excluded) {
+            setColumnData(prev => ({
+                ...prev,
+                [column]: {
+                    entities: [],
+                    loading: false,
+                    hasMore: false,
+                    error: undefined,
+                    totalCount: 0
+                }
+            }));
+            return;
+        }
+
         // Build where map for this column
         const whereMap: Record<string, string> = {};
         if (currentFilterValues) {
@@ -293,8 +358,6 @@ export function useBoardDataController<M extends Record<string, unknown> = any,
 
             const newHasMore = entities.length >= itemCount;
 
-            console.log(`[useBoardDataController] Listener update for col ${column}. Length: ${processed.length}. Entities:`, processed.map(e => e.id));
-
             // Compare with current state — skip update if identical to avoid UI flash
             setColumnData(prev => {
                 const existing = prev[column];
@@ -308,9 +371,9 @@ export function useBoardDataController<M extends Record<string, unknown> = any,
                             identical = false;
                             break;
                         }
-                        // Deep-compare values by JSON serialization
-                        // This covers order key, column assignment, and all other fields
-                        if (JSON.stringify(a.values) !== JSON.stringify(b.values)) {
+                        // Shallow-compare values to avoid JSON.stringify allocations
+                        // entity.values are flat records from the DB, so shallow suffices
+                        if (!shallowEqualValues(a.values, b.values)) {
                             identical = false;
                             break;
                         }
@@ -404,6 +467,12 @@ export function useBoardDataController<M extends Record<string, unknown> = any,
                 const itemCount = currentColumnItemCounts[column] ?? pageSize;
                 subscribeToColumn(column, itemCount);
 
+                // Skip count query for columns excluded by the filter — subscribeToColumn
+                // already set them to totalCount: 0.
+                if (isColumnExcludedByFilter(column, currentFilterValues, currentColumnProperty)) {
+                    return;
+                }
+
                 // Count query for column (for display in column header)
                 const accessor = currentDataClient.collection(currentResolvedPath);
                 if (accessor.count) {
@@ -602,7 +671,6 @@ export function useBoardDataController<M extends Record<string, unknown> = any,
                     };
                 }
 
-                console.log(`[useBoardDataController] moveItemOptimistically: ${itemId} from ${sourceColumn} (${updated[sourceColumn].entities.length}) to ${targetColumn} (${updated[targetColumn].entities.length})`);
             } else if (sourceColumn !== targetColumn) {
                 // If item not found locally but counts need update
                 if (updated[sourceColumn]?.totalCount !== undefined) {

package/src/components/EntityCollectionView/useEntityPreviewSlots.ts

@@ -352,7 +352,7 @@ id });
             // cardinality:"one" → single EntityRelation
             const isRelation = "__type" in val && (val as Record<string, unknown>).__type === "relation";
             if (isRelation) {
-                const relation = val as unknown as EntityRelation;
+                const relation = val as EntityRelation;
                 const displayName = resolveRelationDisplayName(relation, prop);
                 totalCount = 1;
                 if (displayName) {