@rebasepro/admin 0.6.1 → 0.8.0

package/src/components/EntityCollectionView/EntityCollectionListView.tsx

@@ -10,7 +10,8 @@ import {
     defaultBorderMixin,
     IconButton,
     Tooltip,
-    Typography
+    Typography,
+    ListView
 } from "@rebasepro/ui";
 import { PropertyPreview } from "../../preview";
 import {
@@ -401,7 +402,18 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
             "id"
         ]);
 
-        const availableExtraKeys = allKeys.filter(k => !usedKeys.has(k) && resolvedCollection.properties[k]);
+        const availableExtraKeys = allKeys.filter(k => {
+            if (usedKeys.has(k)) return false;
+            const prop = resolvedCollection.properties[k] as Property | undefined;
+            if (!prop) return false;
+            // Exclude storage/image properties — they are already rendered in the image slot
+            if (prop.type === "string" && (prop.storage || prop.ui?.url === "image")) return false;
+            if (prop.type === "array" && prop.of && !Array.isArray(prop.of)) {
+                const inner = prop.of;
+                if (inner.type === "string" && (inner.storage || inner.ui?.url === "image")) return false;
+            }
+            return true;
+        });
 
         availableExtraKeys.forEach(key => {
             const prop = resolvedCollection.properties[key] as Property;
@@ -510,192 +522,62 @@ customEntityActions });
 
     const rowClasses = getRowClasses(size);
 
-    // Initial loading state (no data yet)
-    const isInitialLoading = dataLoading && data.length === 0;
-    // Empty state
-    const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
-
-    // ── Virtualization: scroll-parent windowing ──
-    const estimatedRowHeight = getEstimatedRowHeight(size);
-    const [effectiveScrollTop, setEffectiveScrollTop] = useState(0);
-    const [viewportHeight, setViewportHeight] = useState(800);
-
-    // Keep mutable refs for values used in the scroll handler to avoid
-    // re-attaching the listener every time pagination state changes.
-    const paginationStateRef = useRef({ paginationEnabled,
-noMoreToLoad,
-itemCount,
-pageSize });
-    useEffect(() => {
-        paginationStateRef.current = { paginationEnabled,
-noMoreToLoad,
-itemCount,
-pageSize };
-    }, [paginationEnabled, noMoreToLoad, itemCount, pageSize]);
-
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el) return;
-        const scrollEl = getScrollParent(el);
-        if (!scrollEl) return;
-
-        let rafId: number | null = null;
-
-        const update = () => {
-            rafId = null;
-            const scrollRect = scrollEl.getBoundingClientRect();
-            const listRect = el.getBoundingClientRect();
-
-            // How much of the list has scrolled past the viewport top
-            const listTopRelative = listRect.top - scrollRect.top;
-            setEffectiveScrollTop(Math.max(0, -listTopRelative));
-            setViewportHeight(scrollRect.height);
-
-            // Infinite scroll: trigger load-more when near the bottom
-            const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
-            if (
-                pe &&
-                !nm &&
-                !isLoadingMore.current &&
-                scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < LOAD_MORE_THRESHOLD
-            ) {
-                isLoadingMore.current = true;
-                setItemCount?.((ic ?? ps) + ps);
-            }
-        };
+    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 onScroll = () => {
-            if (rafId === null) rafId = requestAnimationFrame(update);
-        };
-
-        scrollEl.addEventListener("scroll", onScroll, { passive: true });
-        const ro = new ResizeObserver(() => update());
-        ro.observe(scrollEl);
-        update(); // initial measurement
-
-        return () => {
-            scrollEl.removeEventListener("scroll", onScroll);
-            ro.disconnect();
-            if (rafId !== null) cancelAnimationFrame(rafId);
-        };
-    }, [setItemCount]); // stable deps only — mutable state via refs
-
-    // Compute the visible window of rows
-    const totalHeight = data.length * estimatedRowHeight;
-    const startIndex = Math.max(0, Math.floor(effectiveScrollTop / estimatedRowHeight) - OVERSCAN_COUNT);
-    const endIndex = Math.min(
-        data.length,
-        Math.ceil((effectiveScrollTop + viewportHeight) / estimatedRowHeight) + OVERSCAN_COUNT
-    );
-    const visibleData = data.slice(startIndex, endIndex);
-    const offsetY = startIndex * estimatedRowHeight;
-
-    // Footer height for loading/end indicators
-    const footerHeight = dataLoading ? 48 : (!dataLoading && noMoreToLoad && data.length > 0) ? 32 : 0;
+    const handleRowSelectionChange = useCallback((entity: Entity<M>, selected: boolean) => {
+        handleSelectionChange(entity, selected);
+    }, [handleSelectionChange]);
 
     return (
-        <div
-            ref={containerRef}
-            className={cls(
-                "w-full",
-                selectedEntityId === undefined && "rounded-lg overflow-hidden border " + defaultBorderMixin
-            )}
-        >
-            {/* Error state */}
-            {dataLoadingError && data.length === 0 ? (
-                <div className="flex items-center justify-center p-8">
-                    <Typography className="text-red-500">
-                        Error loading data: {dataLoadingError.message}
-                    </Typography>
-                </div>
-            ) : isInitialLoading ? (
-                <div className="flex items-center justify-center py-12 px-8">
-                    <CircularProgress size="small"/>
-                </div>
-            ) : isEmpty ? (
-                <div className="w-full flex items-center justify-center py-12 px-8">
-                    {emptyComponent ?? (
-                        <Typography variant="label" color="secondary">
-                            No entries found
-                        </Typography>
-                    )}
-                </div>
-            ) : (
-                /* Spacer with total height — no internal scroll.
-                   The nearest scrollable ancestor provides the scrollbar. */
-                <div style={{ height: totalHeight + footerHeight,
-position: "relative" }}>
-                    {/* Windowed rows */}
-                    <div style={{ position: "absolute",
-top: offsetY,
-left: 0,
-right: 0 }}>
-                        {visibleData.map((entity, i) => {
-                            const actualIndex = startIndex + i;
-                            const isLast = actualIndex === data.length - 1;
-                            return (
-                                <div
-                                    key={entity.id}
-                                    style={{ height: estimatedRowHeight }}
-                                    className={cls(
-                                        !isLast && "border-b",
-                                        !isLast && defaultBorderMixin
-                                    )}
-                                >
-                                    <ListRow
-                                        entity={entity}
-                                        collection={resolvedCollection}
-                                        onClick={handleEntityClick}
-                                        selected={isEntitySelected(entity)}
-                                        highlighted={isEntityHighlighted(entity)}
-                                        onSelectionChange={handleSelectionChange}
-                                        selectionEnabled={selectionEnabled}
-                                        columns={visibleColumns}
-                                        slotKeys={slotKeys}
-                                        rowClasses={rowClasses}
-                                        showImage={showImage}
-                                        size={size}
-                                        isLast={isLast}
-                                        isActive={selectedEntityId !== undefined && entity.id === selectedEntityId}
-                                        listViewActions={getListViewActions(entity)}
-                                        context={context}
-                                        path={path}
-                                        selectionController={selectionController}
-                                        openEntityMode={openEntityMode}
-                                    />
-                                </div>
-                            );
-                        })}
+        <ListView<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}
+            emptyComponent={emptyComponent}
+            size={size}
+            selectedEntityId={selectedEntityId}
+            renderRow={useCallback(({ item: entity, style, className, selected, highlighted, isLast, onClick, onSelectionChange }) => {
+                return (
+                    <div
+                        key={entity.id}
+                        style={style}
+                        className={className}
+                    >
+                        <ListRow
+                            entity={entity}
+                            collection={resolvedCollection}
+                            onClick={handleEntityClick}
+                            selected={selected}
+                            highlighted={highlighted}
+                            onSelectionChange={handleRowSelectionChange}
+                            selectionEnabled={selectionEnabled}
+                            columns={visibleColumns}
+                            slotKeys={slotKeys}
+                            rowClasses={rowClasses}
+                            showImage={showImage}
+                            size={size}
+                            isLast={isLast}
+                            isActive={selectedEntityId !== undefined && entity.id === selectedEntityId}
+                            listViewActions={getListViewActions(entity)}
+                            context={context}
+                            path={path}
+                            selectionController={selectionController}
+                            openEntityMode={openEntityMode}
+                        />
                     </div>
-
-                    {/* Loading / end indicators pinned at the bottom */}
-                    {dataLoading && (
-                        <div
-                            className="flex items-center justify-center py-3"
-                            style={{ position: "absolute",
-top: totalHeight,
-left: 0,
-right: 0 }}
-                        >
-                            <CircularProgress size="small"/>
-                        </div>
-                    )}
-                    {!dataLoading && noMoreToLoad && data.length > 0 && (
-                        <div
-                            className="flex items-center justify-center py-2 dark:bg-surface-900"
-                            style={{ position: "absolute",
-top: totalHeight,
-left: 0,
-right: 0 }}
-                        >
-                            <Typography variant="caption" color="secondary">
-                                All {data.length} entries loaded
-                            </Typography>
-                        </div>
-                    )}
-                </div>
-            )}
-        </div>
+                );
+            }, [resolvedCollection, selectionEnabled, visibleColumns, slotKeys, rowClasses, showImage, size, selectedEntityId, getListViewActions, context, path, selectionController, openEntityMode, handleRowSelectionChange, handleEntityClick])}
+        />
     );
 }
 

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -7,10 +7,10 @@ import { useSearchParams } from "react-router-dom";
 import { deepEqual as equal } from "fast-equals"
 
 
-const EMPTY_ARRAY: any[] = [];
+const EMPTY_ARRAY: never[] = [];
 const DEFAULT_ENTITY_OPEN_MODE = "split";
 
-import { CollectionSize, Entity, EntityReference, EntityTableController, FilterValues, PartialEntityCollection, ViewMode } from "@rebasepro/types";
+import { CollectionSize, Entity, EntityReference, EntityTableController, FilterValues, getCollectionDataPath, PartialEntityCollection, ViewMode } from "@rebasepro/types";
 import {
     EntityCollectionRowActions,
     EntityCollectionTable
@@ -163,7 +163,7 @@ const EntityCollectionViewInner = React.memo(
         const collectionRegistry = useCollectionRegistryController();
         const urlController = useUrlController();
         const breadcrumbs = useBreadcrumbsController();
-        const path = pathProp ?? collectionProp.slug;
+        const path = pathProp ?? getCollectionDataPath(collectionProp);
         const dataClient = useData();
         const sideEntityController = useSideEntityController();
         const authController = useAuthController();
@@ -215,7 +215,7 @@ const EntityCollectionViewInner = React.memo(
             }, 2400);
         }, [highlightedEntity]);
 
-        const checkInlineEditing = useCallback((entity?: Entity<any>): boolean => {
+        const checkInlineEditing = useCallback((entity?: Entity<M>): boolean => {
             const collection = collectionRef.current;
             if (!canEdit(collection, path, entity ?? null)) {
                 return false;
@@ -894,7 +894,7 @@ parentEntityIds,
                     collection={collection}
                     tableController={tableController}
                     path={path}
-                    relativePath={collection.slug}
+                    relativePath={getCollectionDataPath(collection)}
                     selectionController={usedSelectionController}
                     collectionEntitiesCount={docsCount ?? undefined}
                     resolvedProperties={resolvedCollection.properties}
@@ -909,7 +909,7 @@ parentEntityIds,
                         onNewClick={onNewClick}
                         openNewDocument={openNewDocument}
                         path={path}
-                        relativePath={collection.slug}
+                        relativePath={getCollectionDataPath(collection)}
                         selectionController={usedSelectionController}
                         selectionEnabled={activeSelectionEnabled}
                         collectionEntitiesCount={docsCount ?? undefined}
@@ -1301,25 +1301,8 @@ function EntitiesCount({
 
         let cancelled = false;
 
-        // Convert filterValues to PostgREST where clause
-        const whereMap: Record<string, string> = {};
-        if (filter) {
-            Object.entries(filter).forEach(([key, value]) => {
-                if (value && Array.isArray(value)) {
-                    const [op, val] = value;
-                    const postgrestOp = op === "==" ? "eq" : op === "!=" ? "neq" : op === ">" ? "gt" : op === ">=" ? "gte" : op === "<" ? "lt" : op === "<=" ? "lte" : op === "in" ? "in" : op === "not-in" ? "nin" : op === "array-contains" ? "cs" : op === "array-contains-any" ? "csa" : "eq";
-
-                    let stringVal: string;
-                    if (Array.isArray(val)) {
-                        stringVal = `(${val.join(",")})`;
-                    } else {
-                        stringVal = String(val);
-                    }
-                    whereMap[key] = `${postgrestOp}.${stringVal}`;
-                }
-            });
-        }
-        const whereParams = Object.keys(whereMap).length > 0 ? whereMap : undefined;
+        // filterValues is already FilterValues — pass directly
+        const whereParams = filter && Object.keys(filter).length > 0 ? filter : undefined;
         const orderByParams = sortByProperty ? `${String(sortByProperty)}:${currentSort}` : undefined;
 
         // Deduplicate inflight count requests (e.g. React StrictMode double-mount)

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

@@ -22,7 +22,7 @@ export function useCollectionInlineEditor<M extends Record<string, unknown>>({
         async ({ name, value, property, entityId }: Parameters<UniqueFieldValidator>[0]) => {
             const accessor = dataClient.collection(path);
             const res = await accessor.find({
-                where: { [name]: "eq." + value }
+                where: { [name]: ["==", value] }
             });
 
             const conflictingEntities = res.data;

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

@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from "react";
 import { setIn } from "@rebasepro/formex";
-import { EntityCollection, SaveEntityProps, RebaseData, RebaseContext, AnalyticsController } from "@rebasepro/types";
+import { EntityCollection, SaveEntityProps, RebaseData, RebaseContext, AnalyticsController, Entity } from "@rebasepro/types";
 import { saveEntityWithCallbacks } from "@rebasepro/core";
-import { BoardItem } from "../board_types";
+import { BoardItem } from "@rebasepro/ui";
 import { BoardDataController } from "../useBoardDataController";
 import { generateKeyBetween } from "fractional-indexing";
 
@@ -33,10 +33,10 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
     // to compute a single new sort key for the moved item.
     // Only one DB write per drag — the moved item gets its new key.
     const handleItemsReorder = useCallback(async (
-        items: BoardItem<M>[],
+        items: BoardItem<Entity<M>>[],
         moveInfo?: { itemId: string; sourceColumn: string; targetColumn: string; }
     ) => {
-        const entity = items.find(item => item.id === moveInfo?.itemId)?.entity;
+        const entity = items.find(item => item.id === moveInfo?.itemId)?.data;
         if (!entity || !moveInfo) return;
 
         analyticsController.onAnalyticsEvent?.("kanban_card_moved", {
@@ -64,10 +64,10 @@ export function useKanbanDragAndDrop<M extends Record<string, unknown>>({
 
             // Get the order keys of the neighbours
             const prevKey = movedIndex > 0
-                ? (targetColumnItems[movedIndex - 1].entity.values?.[orderProperty] as string | null) ?? null
+                ? (targetColumnItems[movedIndex - 1].data.values?.[orderProperty] as string | null) ?? null
                 : null;
             const nextKey = movedIndex < targetColumnItems.length - 1
-                ? (targetColumnItems[movedIndex + 1].entity.values?.[orderProperty] as string | null) ?? null
+                ? (targetColumnItems[movedIndex + 1].data.values?.[orderProperty] as string | null) ?? null
                 : null;
 
             try {

package/src/components/EntityCollectionView/useBoardDataController.tsx

@@ -238,25 +238,11 @@ export function useBoardDataController<M extends Record<string, unknown> = any,
             return;
         }
 
-        // Build where map for this column
-        const whereMap: Record<string, string> = {};
-        if (currentFilterValues) {
-            Object.entries(currentFilterValues).forEach(([key, value]) => {
-                if (value && Array.isArray(value)) {
-                    const [op, val] = value;
-                    const postgrestOp = op === "==" ? "eq" : op === "!=" ? "neq" : op === ">" ? "gt" : op === ">=" ? "gte" : op === "<" ? "lt" : op === "<=" ? "lte" : op === "in" ? "in" : op === "not-in" ? "nin" : op === "array-contains" ? "cs" : op === "array-contains-any" ? "csa" : "eq";
-
-                    let stringVal: string;
-                    if (Array.isArray(val)) {
-                        stringVal = `(${val.join(",")})`;
-                    } else {
-                        stringVal = String(val);
-                    }
-                    whereMap[key] = `${postgrestOp}.${stringVal}`;
-                }
-            });
-        }
-        whereMap[currentColumnProperty] = `eq.${column}`;
+        // Build filter map for this column — pass FilterValues directly
+        const whereFilter: FilterValues<string> = {
+            ...(currentFilterValues ?? {}),
+            [currentColumnProperty]: ["==", column]
+        };
 
         const orderByParam = currentOrderProperty ? `${currentOrderProperty}:asc` : undefined;
 
@@ -420,14 +406,14 @@ values: { ...e.values,
         const accessor = currentDataClient.collection(currentResolvedPath);
         if (accessor.listen) {
             const unsubscribe = accessor.listen({
-                where: whereMap,
+                where: whereFilter,
                 limit: itemCount,
                 orderBy: orderByParam
             }, res => onUpdate(res.data as Entity<M>[]), onError);
             unsubscribersRef.current[column] = unsubscribe;
         } else {
             accessor.find({
-                where: whereMap,
+                where: whereFilter,
                 limit: itemCount,
                 orderBy: orderByParam
             })
@@ -479,27 +465,13 @@ values: { ...e.values,
                 const accessor = currentDataClient.collection(currentResolvedPath);
                 if (accessor.count) {
 
-                    const whereMap: Record<string, string> = {};
-                    if (currentFilterValues) {
-                        Object.entries(currentFilterValues).forEach(([key, value]) => {
-                            if (value && Array.isArray(value)) {
-                                const [op, val] = value;
-                                const postgrestOp = op === "==" ? "eq" : op === "!=" ? "neq" : op === ">" ? "gt" : op === ">=" ? "gte" : op === "<" ? "lt" : op === "<=" ? "lte" : op === "in" ? "in" : op === "not-in" ? "nin" : op === "array-contains" ? "cs" : op === "array-contains-any" ? "csa" : "eq";
-
-                                let stringVal: string;
-                                if (Array.isArray(val)) {
-                                    stringVal = `(${val.join(",")})`;
-                                } else {
-                                    stringVal = String(val);
-                                }
-                                whereMap[key] = `${postgrestOp}.${stringVal}`;
-                            }
-                        });
-                    }
-                    whereMap[currentColumnProperty] = `eq.${column}`;
+                    const whereFilter: FilterValues<string> = {
+                        ...(currentFilterValues ?? {}),
+                        [currentColumnProperty]: ["==", column]
+                    };
 
                     accessor.count({
-                        where: whereMap
+                        where: whereFilter
                     }).then(count => {
                         if (isCleaningUpRef.current) return;
                         setColumnData(prev => ({

package/src/components/EntityCollectionView/useEntityPreviewSlots.ts

@@ -194,8 +194,8 @@ export function resolveCollectionSlotKeys(
         : [...previewKeys].sort((a, b) => {
             const propA = collection.properties[a] as Property | undefined;
             const propB = collection.properties[b] as Property | undefined;
-            const scoreA = propA?.type === "string" ? (propA.multiline ? 2 : 1) : 0;
-            const scoreB = propB?.type === "string" ? (propB.multiline ? 2 : 1) : 0;
+            const scoreA = propA?.type === "string" ? (propA.ui?.multiline ? 2 : 1) : 0;
+            const scoreB = propB?.type === "string" ? (propB.ui?.multiline ? 2 : 1) : 0;
             return scoreB - scoreA;
         });
     const subtitleKey = sortedPreviewKeys.length > 0 ? sortedPreviewKeys[0] : undefined;
@@ -468,7 +468,7 @@ function resolveRelationDisplayName(
 
             // Helper to check if a property is a visible, non-id string
             const isDisplayCandidate = (p: Property): boolean => {
-                return p.type === "string" && !p.multiline && !p.markdown && !p.storage
+                return p.type === "string" && !p.ui?.multiline && !p.ui?.markdown && !p.storage
                     && !("isId" in p && p.isId) && !isHiddenProp(p);
             };
 

package/src/components/EntityDetailView.tsx

@@ -2,7 +2,7 @@ import type { ComponentRef, EntityCollection, EntityCustomViewParams, FormViewCo
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Entity, EntityStatus, Property } from "@rebasepro/types";
+import { Entity, EntityStatus, getCollectionDataPath, Property } from "@rebasepro/types";
 import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
 
 import { EntityCollectionView, EntityView } from "../components";
@@ -347,7 +347,7 @@ entityId }
     // Subcollection views
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
         const subcollectionId = subcollection.slug;
-        const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.slug)}` : undefined;
+        const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(getCollectionDataPath(subcollection))}` : undefined;
 
         if (activeTab !== subcollectionId) return null;
         return (

package/src/components/EntityEditView.tsx

@@ -2,7 +2,7 @@ import type { ComponentRef, EntityCollection, EntityCustomViewParams, FormViewCo
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Entity, EntityStatus } from "@rebasepro/types";
+import { Entity, EntityStatus, getCollectionDataPath } from "@rebasepro/types";
 import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionComponentOverrideProvider } from "@rebasepro/core";
 
 import { EntityCollectionView, EntityView } from "../components";
@@ -39,8 +39,9 @@ import {
     getIcon
 } from "@rebasepro/core";
 import { getEntityFromMemoryCache } from "@rebasepro/core";
-import { EntityForm } from "../form";
-import type { EntityFormProps, OnUpdateParams } from "../types/components/EntityFormProps";
+import { EntityFormBinding } from "../form";
+import type { EntityFormBindingProps } from "../form";
+import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
 // Lazy-load history view — only loaded when user clicks the HistoryIcon tab
@@ -85,7 +86,7 @@ export interface EntityEditViewProps<M extends Record<string, unknown> = Record<
     navigateBack?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
-    formProps?: Partial<EntityFormProps<M>>,
+    formProps?: Partial<EntityFormBindingProps<M>>,
     /**
      * Pre-populate the form with these values when creating a new entity.
      * Only applied when the form is in "new" mode (no entityId).
@@ -197,7 +198,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
 }) {
 
     const ResolvedFormActions = useComponentOverride("Entity.FormActions", EntityEditViewFormActions);
-    const ResolvedEntityForm = useComponentOverride("Entity.Form", EntityForm) as typeof EntityForm;
+    const ResolvedEntityForm = useComponentOverride("Entity.Form", EntityFormBinding) as typeof EntityFormBinding;
     const ResolvedCollectionView = useComponentOverride("Collection.View", EntityCollectionView);
 
     const context = useRebaseContext();
@@ -415,7 +416,7 @@ parentEntityIds,
 
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
         const subcollectionId = subcollection.slug;
-        const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.slug)}` : undefined;
+        const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(getCollectionDataPath(subcollection))}` : undefined;
 
         if (activeTab !== subcollectionId) return null;
         return (