@rebasepro/admin 0.2.5 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.4.0",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -84,13 +84,13 @@
     "react-dropzone": "^14.4.1",
     "react-use-measure": "^2.1.7",
     "zod": "^3.25.76",
-    "@rebasepro/common": "0.2.5",
-    "@rebasepro/core": "0.2.5",
-    "@rebasepro/formex": "0.2.5",
-    "@rebasepro/schema-inference": "0.2.5",
-    "@rebasepro/utils": "0.2.5",
-    "@rebasepro/ui": "0.2.5",
-    "@rebasepro/types": "0.2.5"
+    "@rebasepro/core": "0.4.0",
+    "@rebasepro/common": "0.4.0",
+    "@rebasepro/formex": "0.4.0",
+    "@rebasepro/schema-inference": "0.4.0",
+    "@rebasepro/types": "0.4.0",
+    "@rebasepro/utils": "0.4.0",
+    "@rebasepro/ui": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/collection_editor/validateCollectionJson.ts

@@ -52,16 +52,16 @@ function validateProperty(
         return;
     }
 
-    // Check dataType
-    if (!property.dataType) {
+    // Check type
+    if (!property.type) {
         errors.push({
-            path: `${path}.dataType`,
+            path: `${path}.type`,
             message: "Required field is missing"
         });
-    } else if (!VALID_DATA_TYPES.includes(property.dataType as DataType)) {
+    } else if (!VALID_DATA_TYPES.includes(property.type as DataType)) {
         errors.push({
-            path: `${path}.dataType`,
-            message: `Invalid value "${property.dataType}", expected one of: ${VALID_DATA_TYPES.join(", ")}`
+            path: `${path}.type`,
+            message: `Invalid value "${property.type}", expected one of: ${VALID_DATA_TYPES.join(", ")}`
         });
     }
 
@@ -74,7 +74,7 @@ function validateProperty(
     }
 
     // Validate array "of" property
-    if (property.dataType === "array") {
+    if (property.type === "array") {
         if (property.of) {
             if (Array.isArray(property.of)) {
                 property.of.forEach((ofProp: Record<string, unknown>, index: number) => {
@@ -98,12 +98,12 @@ function validateProperty(
     }
 
     // Validate map properties
-    if (property.dataType === "map" && property.properties) {
+    if (property.type === "map" && property.properties) {
         validateProperties(property.properties as Record<string, unknown>, `${path}.properties`, errors);
     }
 
     // Validate reference path
-    if (property.dataType === "reference") {
+    if (property.type === "reference") {
         if (property.path !== undefined && typeof property.path !== "string") {
             errors.push({
                 path: `${path}.path`,
@@ -113,7 +113,7 @@ function validateProperty(
     }
 
     // Validate relation property
-    if (property.dataType === "relation") {
+    if (property.type === "relation") {
         if (property.target !== undefined && typeof property.target !== "string" && typeof property.target !== "function") {
             errors.push({
                 path: `${path}.target`,
@@ -187,7 +187,7 @@ function validateProperty(
     }
 
     // Validate vector property
-    if (property.dataType === "vector") {
+    if (property.type === "vector") {
         if (property.dimensions !== undefined && (typeof property.dimensions !== "number" || isNaN(property.dimensions) || property.dimensions <= 0)) {
             errors.push({
                 path: `${path}.dimensions`,
@@ -197,7 +197,7 @@ function validateProperty(
     }
 
     // Validate storage config for string
-    if (property.dataType === "string" && property.storage) {
+    if (property.type === "string" && property.storage) {
         if (typeof property.storage !== "object") {
             errors.push({
                 path: `${path}.storage`,

package/src/components/CollectionPanel.tsx

@@ -0,0 +1,155 @@
+import type { EntityCollection, ViewMode } from "@rebasepro/types";
+import React, { useMemo } from "react";
+import { EntityCollectionView } from "./EntityCollectionView/EntityCollectionView";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { Typography } from "@rebasepro/ui";
+
+/**
+ * Props for the {@link CollectionPanel} component.
+ *
+ * This is a high-level, consumer-friendly wrapper around {@link EntityCollectionView}
+ * designed for embedding collection views inside custom pages (home pages,
+ * dashboards, entity detail views, etc.).
+ *
+ * At minimum, provide the `path` (collection slug). All other props are optional
+ * overrides that take precedence over the collection's default configuration.
+ *
+ * @group Components
+ */
+export type CollectionPanelProps = {
+    /**
+     * The collection slug / path to display (e.g. "tasks", "clients").
+     * The collection must be registered in the Rebase context.
+     */
+    path: string;
+
+    /**
+     * Optional title displayed above the collection.
+     * Set to `false` to hide the title entirely.
+     * Defaults to the collection's `name`.
+     */
+    title?: string | false;
+
+    /**
+     * Force a specific view mode, overriding the collection's default.
+     */
+    viewMode?: ViewMode;
+
+    /**
+     * Override the sort field.
+     */
+    sort?: [string, "asc" | "desc"];
+
+    /**
+     * Maximum number of entities to display.
+     */
+    limit?: number;
+
+    /**
+     * Whether to sync filter/sort state with URL query params.
+     * Defaults to `false` (embedded panels shouldn't hijack the URL).
+     */
+    updateUrl?: boolean;
+
+    /**
+     * Override the entity open mode when clicking an entity.
+     */
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
+
+    /**
+     * Additional CSS class name for the container.
+     */
+    className?: string;
+
+    /**
+     * Any additional collection-level overrides (e.g. `previewProperties`,
+     * `enabledViews`, `entityActions`, `defaultFilter`, etc.).
+     */
+    collectionOverrides?: Partial<EntityCollection>;
+};
+
+/**
+ * A high-level, reusable wrapper for embedding a Rebase collection view
+ * inside custom pages (dashboards, home pages, entity detail views, etc.).
+ *
+ * Usage:
+ * ```tsx
+ * import { CollectionPanel } from "@rebasepro/admin";
+ *
+ * function MyDashboard() {
+ *     return (
+ *         <div>
+ *             <CollectionPanel path="tasks" title="Pending Tasks" />
+ *             <CollectionPanel
+ *                 path="clients"
+ *                 viewMode="table"
+ *                 collectionOverrides={{
+ *                     defaultFilter: { status: ["!=", "completed"] }
+ *                 }}
+ *             />
+ *         </div>
+ *     );
+ * }
+ * ```
+ *
+ * @group Components
+ */
+export function CollectionPanel({
+    path,
+    title,
+    viewMode,
+    sort,
+    limit,
+    updateUrl = false,
+    openEntityMode,
+    className,
+    collectionOverrides
+}: CollectionPanelProps) {
+    const collectionRegistry = useCollectionRegistryController();
+    const registeredCollection = collectionRegistry.getCollection(path);
+
+    const mergedCollection = useMemo(() => {
+        if (!registeredCollection) return undefined;
+
+        // Build overrides object from shorthand props + explicit overrides
+        const propOverrides: Record<string, unknown> = {};
+        if (viewMode) propOverrides.defaultViewMode = viewMode;
+        if (sort) propOverrides.sort = sort;
+        if (limit) propOverrides.pagination = limit;
+        if (openEntityMode) propOverrides.openEntityMode = openEntityMode;
+
+        return {
+            ...registeredCollection,
+            ...(collectionOverrides ?? {}),
+            ...propOverrides
+        } as EntityCollection;
+    }, [registeredCollection, collectionOverrides, viewMode, sort, limit, openEntityMode]);
+
+    if (!mergedCollection) {
+        return (
+            <div className={className}>
+                <Typography variant="body2" color="secondary">
+                    Collection &quot;{path}&quot; not found.
+                </Typography>
+            </div>
+        );
+    }
+
+    return (
+        <div className={className}>
+            {title !== false && (
+                <Typography
+                    variant="subtitle2"
+                    className="font-bold mb-2 text-surface-700 dark:text-surface-300"
+                >
+                    {title ?? mergedCollection.name}
+                </Typography>
+            )}
+            <EntityCollectionView
+                {...mergedCollection}
+                path={path}
+                updateUrl={updateUrl}
+            />
+        </div>
+    );
+}

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -60,6 +60,19 @@ function getGridColumnsClass(size: CollectionSize): string {
     }
 }
 
+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 EntityCollectionTable for visual browsing.
@@ -78,7 +91,6 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
 }: EntityCollectionCardViewProps<M>) {
 
     const containerRef = useRef<HTMLDivElement>(null);
-    const loadMoreRef = useRef<HTMLDivElement>(null);
     const hasRestoredScroll = useRef(false);
 
     const {
@@ -95,8 +107,8 @@ 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);
 
-    // Keep mutable refs for values used in the IntersectionObserver callback
-    // to avoid re-creating the observer every time pagination state changes.
+    // Keep mutable refs for values used in the scroll listener callback
+    // to avoid re-attaching the listener every time pagination state changes.
     const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize });
     useEffect(() => {
         paginationStateRef.current = { paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize };
@@ -107,43 +119,60 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
         if (!dataLoading) isLoadingMore.current = false;
     }, [dataLoading]);
 
-    // Infinite scroll with Intersection Observer — stable deps only
+    // Infinite scroll and resize observer
     useEffect(() => {
-        if (!loadMoreRef.current) return;
-
-        const observer = new IntersectionObserver(
-            (entries) => {
-                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;
-                    setItemCount?.((ic ?? ps) + ps);
-                }
-            },
-            {
-                root: containerRef.current,
-                rootMargin: "400px",
-                threshold: 0
+        const el = containerRef.current;
+        if (!el) return;
+        const scrollEl = getScrollParent(el);
+        if (!scrollEl) return;
+
+        let rafId: number | null = null;
+
+        const update = () => {
+            rafId = null;
+
+            // 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 < 400
+            ) {
+                isLoadingMore.current = true;
+                setItemCount?.((ic ?? ps) + ps);
             }
-        );
+        };
 
-        observer.observe(loadMoreRef.current);
+        const onScrollEvent = () => {
+            if (rafId === null) rafId = requestAnimationFrame(update);
+        };
+
+        scrollEl.addEventListener("scroll", onScrollEvent, { passive: true });
+        const ro = new ResizeObserver(() => update());
+        ro.observe(scrollEl);
+        update(); // initial measurement
 
-        return () => observer.disconnect();
-    }, [setItemCount, data.length]);
+        return () => {
+            scrollEl.removeEventListener("scroll", onScrollEvent);
+            ro.disconnect();
+            if (rafId !== null) cancelAnimationFrame(rafId);
+        };
+    }, [setItemCount]);
 
     // Scroll restoration — deferred to after layout paint
     useEffect(() => {
         if (!containerRef.current || !initialScroll || hasRestoredScroll.current || data.length === 0) return;
 
+        const scrollEl = getScrollParent(containerRef.current);
+        if (!scrollEl) return;
+
         let attempts = 0;
         const maxAttempts = 5;
 
         const tryRestore = () => {
-            const el = containerRef.current;
-            if (!el) return;
-
-            if (el.scrollHeight >= initialScroll || attempts >= maxAttempts) {
-                el.scrollTop = initialScroll;
+            if (scrollEl.scrollHeight >= initialScroll || attempts >= maxAttempts) {
+                scrollEl.scrollTop = initialScroll;
                 hasRestoredScroll.current = true;
             } else {
                 attempts++;
@@ -157,11 +186,13 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
     // Scroll tracking: call onScroll when user scrolls
     const lastScrollOffset = useRef(0);
     useEffect(() => {
-        const container = containerRef.current;
-        if (!container || !onScroll) return;
+        const el = containerRef.current;
+        if (!el || !onScroll) return;
+        const scrollEl = getScrollParent(el);
+        if (!scrollEl) return;
 
         const handleScroll = () => {
-            const currentOffset = container.scrollTop;
+            const currentOffset = scrollEl.scrollTop;
             const direction = currentOffset > lastScrollOffset.current ? "forward" : "backward";
             lastScrollOffset.current = currentOffset;
             onScroll({
@@ -171,8 +202,8 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
             });
         };
 
-        container.addEventListener("scroll", handleScroll, { passive: true });
-        return () => container.removeEventListener("scroll", handleScroll);
+        scrollEl.addEventListener("scroll", handleScroll, { passive: true });
+        return () => scrollEl.removeEventListener("scroll", handleScroll);
     }, [onScroll]);
 
     const handleEntityClick = useCallback((entity: Entity<M>) => {
@@ -201,7 +232,7 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
     return (
         <div
             ref={containerRef}
-            className="flex-1 overflow-auto p-4"
+            className="w-full p-4"
         >
             {/* Error state */}
             {dataLoadingError ? (
@@ -215,7 +246,7 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
                     <CircularProgress size="small"/>
                 </div>
             ) : isEmpty ? (
-                <div className="flex items-center justify-center py-12 px-8">
+                <div className="w-full flex items-center justify-center py-12 px-8">
                     {emptyComponent ?? (
                         <Typography variant="label" color="secondary">
                             No entries found
@@ -247,7 +278,6 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
 
                         {/* Load more trigger / Loading indicator */}
                         <div
-                            ref={loadMoreRef}
                             className="flex items-center justify-center py-8"
                         >
                             {dataLoading && (

package/src/components/EntityCollectionView/EntityCollectionListView.tsx

@@ -604,7 +604,7 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
                     <CircularProgress size="small"/>
                 </div>
             ) : isEmpty ? (
-                <div className="flex items-center justify-center py-12 px-8">
+                <div className="w-full flex items-center justify-center py-12 px-8">
                     {emptyComponent ?? (
                         <Typography variant="label" color="secondary">
                             No entries found

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -1094,7 +1094,7 @@ export const EntityCollectionView = React.memo(
                         {toolbarNode}
                         <div className={cls(
                             "flex-1 flex flex-col",
-                            viewMode === "list" && "overflow-y-auto"
+                            (viewMode === "list" || viewMode === "cards") && "overflow-y-auto"
                         )}>
                             {viewMode === "list" ? (
                                 <div

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

@@ -42,6 +42,7 @@ export function useCollectionInlineEditor<M extends Record<string, unknown>>({
         setError,
         data: entity
     }) => {
+        if (!entity) return;
 
         const updatedValues = setIn({}, propertyKey, value) as Partial<Record<string, unknown>>;
 

package/src/components/EntityCollectionView/useEntityPreviewSlots.ts

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import type { EntityCollection, Property, RelationProperty } from "@rebasepro/types";
 import type { Entity, PropertyConfig, EntityRelation } from "@rebasepro/types";
 import { getEntityImagePreviewPropertyKey } from "@rebasepro/common";
+import { getEntityFromCache } from "@rebasepro/core";
 import { getEntityTitlePropertyKey, getEntityPreviewKeys } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 import type { AuthController } from "@rebasepro/types";
@@ -428,43 +429,93 @@ function resolveRelationDisplayName(
 ): string | undefined {
     // Support both EntityRelation instances and plain objects
     const data = "data" in relation ? (relation as EntityRelation).data : undefined;
-    if (!data || !data.values) {
-        // No eagerly-loaded data — fall back to ID
-        const id = "id" in relation ? relation.id : undefined;
-        return id !== undefined ? String(id) : undefined;
-    }
-
-    const values = data.values as Record<string, unknown>;
 
-    // Try using the target collection's title property for accuracy
+    // Resolve target collection from either `prop.relation.target()` or `prop.target()` (inline API)
+    let targetCollection: EntityCollection | undefined;
     try {
-        const targetCollection = prop.relation?.target?.();
+        const resolved = prop.relation?.target?.() ?? (typeof prop.target === "function" ? prop.target() : undefined);
+        if (resolved && typeof resolved === "object") {
+            targetCollection = resolved as EntityCollection;
+        }
+    } catch {
+        // Target collection may not be resolvable
+    }
+
+    // Helper: extract display name from entity values using the target collection
+    const extractDisplayName = (values: Record<string, unknown>): string | undefined => {
         if (targetCollection) {
             const targetTitleKey = targetCollection.titleProperty as string | undefined;
             if (targetTitleKey && values[targetTitleKey] !== undefined) {
                 return String(values[targetTitleKey]);
             }
-            // Fallback: find first non-id string property in target
+
+            // Helper to check if a property is hidden/internal
+            const isHiddenProp = (p: Property): boolean => {
+                const ui = (p as any).ui;
+                if (ui?.hideFromCollection) return true;
+                if (ui?.disabled?.hidden) return true;
+                return false;
+            };
+
+            // 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
+                    && !("isId" in p && p.isId) && !isHiddenProp(p);
+            };
+
+            // Prioritize common title-like fields: name, title, label, displayName
+            const priorityKeys = ["name", "title", "label", "displayName"];
+            for (const pk of priorityKeys) {
+                const p = targetCollection.properties[pk] as Property | undefined;
+                if (p && isDisplayCandidate(p) && values[pk] !== undefined && values[pk] !== null) {
+                    return String(values[pk]);
+                }
+            }
+
+            // Fallback: find first visible, non-id string property in target
             for (const [k, p] of Object.entries(targetCollection.properties)) {
                 const tp = p as Property;
-                if (tp.type === "string" && !tp.multiline && !tp.markdown && !tp.storage && !("isId" in tp && tp.isId)) {
+                if (isDisplayCandidate(tp)) {
                     if (values[k] !== undefined && values[k] !== null) {
                         return String(values[k]);
                     }
                 }
             }
         }
-    } catch {
-        // Target collection may not be resolvable — fall through
+        // Generic fallback: walk entity values for any short string.
+        for (const [, v] of Object.entries(values)) {
+            if (typeof v === "string" && v.length > 0 && v.length < 200) {
+                return v;
+            }
+        }
+        return undefined;
+    };
+
+    // 1. Try eagerly-loaded data on the relation object
+    if (data && data.values) {
+        const result = extractDisplayName(data.values as Record<string, unknown>);
+        if (result) return result;
     }
 
-    // Generic fallback: walk entity values for any short string.
-    for (const [, v] of Object.entries(values)) {
-        if (typeof v === "string" && v.length > 0 && v.length < 200) {
-            return v;
+    const id = "id" in relation ? relation.id : undefined;
+
+    // 2. Try the entity cache (sessionStorage) as a fallback
+    if (id !== undefined && targetCollection) {
+        try {
+            const slug = targetCollection.slug ?? (targetCollection as any).table;
+            if (slug) {
+                const cacheKey = `${slug}/${id}`;
+                const cached = getEntityFromCache(cacheKey) as { values?: Record<string, unknown> } | undefined;
+                if (cached?.values) {
+                    const result = extractDisplayName(cached.values);
+                    if (result) return result;
+                }
+            }
+        } catch {
+            // Cache lookup failed — fall through
         }
     }
 
-    const id = "id" in relation ? relation.id : undefined;
+    // 3. Final fallback: show the ID
     return id !== undefined ? String(id) : undefined;
 }