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

package/src/components/{EntityPreview.tsx → EntityPreviewBinding.tsx}

@@ -1,4 +1,4 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { Property } from "@rebasepro/types";
 import * as React from "react";
 import { useEffect, useMemo } from "react";
@@ -6,26 +6,33 @@ import { useEffect, useMemo } from "react";
 import { Entity } from "@rebasepro/types";
 import type { PreviewSize } from "../types/components/PropertyPreviewProps";
 import { getEntityImagePreviewPropertyKey } from "@rebasepro/common";
-import { cls, defaultBorderMixin, IconButton, Skeleton, Tooltip, Typography } from "@rebasepro/ui";
-import { ArrowRightToLineIcon } from "lucide-react";
+import {
+    ArrowRightToLineIcon,
+    cls,
+    defaultBorderMixin,
+    IconButton,
+    Skeleton,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
 import { PropertyPreview, SkeletonPropertyComponent } from "../preview";
 import {
     useAuthController,
     useCustomizationController,
     useData,
     ErrorView
-} from "@rebasepro/core";
-import { useAnalyticsController } from "@rebasepro/core";
-import { IconForView } from "@rebasepro/core";
+} from "@rebasepro/app";
+import { useAnalyticsController } from "@rebasepro/app";
+import { IconForView } from "@rebasepro/app";
 import { getPropertyInPath } from "../util/property_utils";
 import { getEntityPreviewKeys, getEntityTitlePropertyKey } from "../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
-import { useCollectionRegistryController, useSideEntityController } from "../index";
+import { useCollectionRegistryController, useSidePanel } from "../index";
 
-export type EntityPreviewProps = {
+export type EntityPreviewBindingProps = {
     size?: PreviewSize,
     actions?: React.ReactNode,
-    collection?: EntityCollection,
+    collection?: CollectionConfig,
     hover?: boolean;
     previewKeys?: string[],
     disabled?: boolean,
@@ -35,16 +42,16 @@ export type EntityPreviewProps = {
     includeEntityLink?: boolean,
     includeImage?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
-    onSideEntityClick?: (entity: Entity) => void,
+    onSidePanelClick?: (entity: Entity) => void,
 };
 
-export type EntityPreviewDataProps = {
+export type EntityPreviewBindingDataProps = {
     size?: "smallest" | "small" | "medium" | "large",
     actions?: React.ReactNode,
-    collection?: EntityCollection,
+    collection?: CollectionConfig,
     previewKeys?: string[],
     entity: Entity<any>,
-    onSideEntityClick?: (entity: Entity) => void,
+    onSidePanelClick?: (entity: Entity) => void,
     includeId?: boolean,
     includeTitle?: boolean,
     includeEntityLink?: boolean,
@@ -52,31 +59,36 @@ export type EntityPreviewDataProps = {
 };
 
 /**
- * This component contains the main logic and content for displaying an entity preview,
- * without any container wrapper. Used internally by EntityPreview.
+ * This component contains the main logic and content for displaying a entity preview,
+ * without any container wrapper. Used internally by EntityPreviewBinding.
  */
-export function EntityPreviewData({
+export function EntityPreviewBindingData({
     actions,
     collection: collectionProp,
     previewKeys,
     size = "medium",
     includeId = true,
-    onSideEntityClick,
+    onSidePanelClick,
     includeTitle = true,
     includeEntityLink = true,
     includeImage = true,
     entity
-}: EntityPreviewDataProps) {
+}: EntityPreviewBindingDataProps) {
 
     const authController = useAuthController();
     const analyticsController = useAnalyticsController();
-    const sideEntityController = useSideEntityController();
+    const sidePanelController = useSidePanel();
     const customizationController = useCustomizationController();
 
     const collectionRegistryController = useCollectionRegistryController();
 
     const collection = collectionProp ?? collectionRegistryController.getCollection(entity.path);
 
+    const listProperties = useMemo(() => {
+        if (!collection) return [];
+        return previewKeys ?? getEntityPreviewKeys(authController, collection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 2);
+    }, [previewKeys, collection, size, authController, customizationController.propertyConfigs]);
+
     if (!collection) {
         return (
             <>
@@ -85,9 +97,6 @@ export function EntityPreviewData({
         );
     }
 
-    const listProperties = useMemo(() => previewKeys ?? getEntityPreviewKeys(authController, collection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 2),
-        [previewKeys, collection, size]);
-
     const titleProperty = includeTitle ? getEntityTitlePropertyKey(collection, customizationController.propertyConfigs) : undefined;
     const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(collection) : undefined;
     const imageProperty = imagePropertyKey ? collection.properties[imagePropertyKey] : undefined;
@@ -185,12 +194,12 @@ export function EntityPreviewData({
                             onClick={(e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
-                                onSideEntityClick?.(entity);
+                                onSidePanelClick?.(entity);
                                 analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
                                     path: entity.path,
                                     entityId: entity.id
                                 });
-                                sideEntityController.open({
+                                sidePanelController.open({
                                     entityId: entity.id,
                                     path: entity.path,
                                     collection,
@@ -207,11 +216,11 @@ export function EntityPreviewData({
     );
 }
 
-export function EntityPreviewWithId({
+export function EntityPreviewBindingWithId({
     entityId,
     path,
     ...props
-}: Omit<EntityPreviewProps, "entity"> & {
+}: Omit<EntityPreviewBindingProps, "entity"> & {
     entityId: string | number;
     path: string;
     databaseId?: string;
@@ -227,7 +236,7 @@ export function EntityPreviewWithId({
             setEntity(undefined);
             return;
         }
-        const fetchEntity = async () => {
+        const fetchOne = async () => {
             setDataLoading(true);
             try {
                 const fetchedEntity = await dataClient.collection(path).findById(entityId);
@@ -246,7 +255,7 @@ export function EntityPreviewWithId({
             }
         }
 
-        fetchEntity();
+        fetchOne();
 
         return () => {
             isMounted = false;
@@ -275,16 +284,16 @@ export function EntityPreviewWithId({
         );
     }
 
-    return <EntityPreviewData
+    return <EntityPreviewBindingData
         {...props}
         entity={entity}/>;
 }
 
 /**
- * This view is used to display a preview of an entity.
+ * This view is used to display a preview of a entity.
  * It is used by default in reference fields and whenever a reference is displayed.
  */
-export function EntityPreview({
+export function EntityPreviewBinding({
     actions,
     disabled,
     hover,
@@ -296,16 +305,16 @@ export function EntityPreview({
     includeTitle = true,
     includeEntityLink = true,
     includeImage = true,
-    onSideEntityClick,
+    onSidePanelClick,
     entity
-}: EntityPreviewProps) {
+}: EntityPreviewBindingProps) {
 
     return (
         <EntityPreviewContainer
             onClick={disabled ? undefined : onClick}
             hover={disabled ? undefined : hover}
             size={size}>
-            <EntityPreviewData
+            <EntityPreviewBindingData
                 actions={actions}
                 collection={collection}
                 previewKeys={previewKeys}
@@ -314,7 +323,7 @@ export function EntityPreview({
                 includeTitle={includeTitle}
                 includeEntityLink={includeEntityLink}
                 includeImage={includeImage}
-                onSideEntityClick={onSideEntityClick}
+                onSidePanelClick={onSidePanelClick}
                 entity={entity}
             />
         </EntityPreviewContainer>
@@ -343,10 +352,8 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
 }, ref) => {
     return <div
         ref={ref}
-        style={{
-            ...style,
-            tabIndex: 0
-        } as React.CSSProperties}
+        tabIndex={0}
+        style={style}
         className={cls(
             "bg-white dark:bg-surface-900",
             size === "small" ? "min-h-[32px]" : "min-h-[44px]",
@@ -358,12 +365,19 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
             onClick ? "cursor-pointer" : "",
             defaultBorderMixin,
             className)}
+        role={onClick ? "button" : undefined}
         onClick={(event) => {
             if (onClick) {
                 event.preventDefault();
                 onClick(event);
             }
         }}
+        onKeyDown={(event) => {
+            if (onClick && (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                onClick(event);
+            }
+        }}
         {...props}>
         {children}
     </div>;

package/src/components/{EntityView.tsx → EntityViewBinding.tsx}

@@ -1,32 +1,31 @@
 import type { Properties } from "@rebasepro/types";
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { CustomizationController } from "@rebasepro/types";
 import React from "react";
 import { Entity } from "@rebasepro/types";
-import { cls, defaultBorderMixin, IconButton, Typography } from "@rebasepro/ui";
-import { ExternalLinkIcon } from "lucide-react";
+import { cls, defaultBorderMixin, ExternalLinkIcon, IconButton, Typography } from "@rebasepro/ui";
 ;
-import { useCustomizationController } from "@rebasepro/core";
-import { useAuthController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
+import { useAuthController } from "@rebasepro/app";
 import { PropertyCollectionView } from "./PropertyCollectionView";
 
 /**
  * @group Components
  */
-export interface EntityViewProps<M extends Record<string, unknown>> {
+export interface EntityViewBindingProps<M extends Record<string, unknown>> {
     entity: Entity<M>;
-    collection: EntityCollection<M>;
+    collection: CollectionConfig<M>;
     path: string;
     className?: string;
 }
 
-export function EntityView<M extends Record<string, unknown>>(
+export function EntityViewBinding<M extends Record<string, unknown>>(
     {
         entity,
         collection,
         path,
         className
-    }: EntityViewProps<M>) {
+    }: EntityViewBindingProps<M>) {
 
     const customizationController: CustomizationController = useCustomizationController();
 

package/src/components/HomePage/ContentHomePage.tsx

@@ -19,9 +19,10 @@ import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { RenameGroupDialog } from "./RenameGroupDialog";
 import { toArray } from "@rebasepro/utils";
-import { useCollapsedGroups, useCustomizationController, useTranslation, useSlot, useAdminModeController } from "@rebasepro/core";
-import { useRestoreScroll } from "@rebasepro/core";
-import { STUDIO_NAVIGATION_GROUPS } from "@rebasepro/core";
+import { useCollapsedGroups, buildCollapsedDefaults, useCustomizationController, useTranslation, useSlot, useAdminModeController, useRebaseRegistry } from "@rebasepro/app";
+import { useRestoreScroll } from "@rebasepro/app";
+
+import { SchemaDriftBanner } from "@rebasepro/app";
 import { useBreadcrumbsController, useCMSContext } from "../../index";
 
 export const DEFAULT_GROUP_NAME = "Views";
@@ -45,7 +46,8 @@ export function ContentHomePage({
     const { navigationStateController } = context;
     const customizationController = useCustomizationController();
     const adminModeController = useAdminModeController();
-    const isStudioMode = adminModeController.mode === "studio";
+    const registry = useRebaseRegistry();
+
     const { resolvedSlots } = customizationController;
     const breadcrumbs = useBreadcrumbsController();
     const { t } = useTranslation();
@@ -61,19 +63,28 @@ export function ContentHomePage({
         onNavigationEntriesUpdate = () => {}
     } = navigationStateController.topLevelNavigation || {};
 
+    // Build a set of Studio-only dev view slugs so we can distinguish them from
+    // CMS custom views added via <RebaseAdmin views={...}> or plugins.
+    const studioViewSlugs = useMemo(() => {
+        const slugs = new Set<string>();
+        (registry.studioConfig?.devViews ?? []).forEach(v => slugs.add(v.slug));
+        if (registry.studioConfig && registry.cmsConfig?.collectionEditor) slugs.add("schema");
+        return slugs;
+    }, [registry.studioConfig, registry.cmsConfig?.collectionEditor]);
+
+    // Studio mode shows Studio dev views + admin entries (Users/Roles).
+    // Content mode shows collections, CMS custom views, and admin entries — but not Studio dev views.
     const rawNavigationEntries = useMemo(() => {
-        return unFilteredNavigationEntries.filter(e => {
-            const isStudioGroup = e.group ? STUDIO_NAVIGATION_GROUPS.includes(e.group) : false;
-            return isStudioMode ? isStudioGroup : !isStudioGroup;
-        });
-    }, [unFilteredNavigationEntries, isStudioMode]);
+        if (adminModeController.mode === "studio") {
+            return unFilteredNavigationEntries.filter(e => (e.type === "view" && studioViewSlugs.has(e.slug)) || e.type === "admin");
+        }
+        return unFilteredNavigationEntries.filter(e => e.type !== "view" || !studioViewSlugs.has(e.slug));
+    }, [unFilteredNavigationEntries, adminModeController.mode, studioViewSlugs]);
 
     const groupOrderFromNavController = useMemo(() => {
-        return unFilteredGroupOrder.filter(g => {
-            const isStudioGroup = STUDIO_NAVIGATION_GROUPS.includes(g);
-            return isStudioMode ? isStudioGroup : !isStudioGroup;
-        });
-    }, [unFilteredGroupOrder, isStudioMode]);
+        const entryGroups = new Set(rawNavigationEntries.map(e => e.group).filter(Boolean));
+        return unFilteredGroupOrder.filter(g => entryGroups.has(g));
+    }, [unFilteredGroupOrder, rawNavigationEntries]);
 
     const fuse = useRef<Fuse<NavigationEntry> | null>(null);
     const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
@@ -244,7 +255,11 @@ export function ContentHomePage({
         ...(adminGroupData ? [adminGroupData.name] : [])
     ], [items, adminGroupData]);
 
-    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames, "home");
+    const collapsedDefaults = useMemo(
+        () => buildCollapsedDefaults(registry.cmsConfig?.navigationGroupMappings, "home"),
+        [registry.cmsConfig?.navigationGroupMappings]
+    );
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames, "home", collapsedDefaults);
 
     const {
         sensors,
@@ -312,8 +327,11 @@ export function ContentHomePage({
        Render
        ─────────────────────────────────────────────────────────────── */
     return (
-        <div ref={containerRef} className="py-2 overflow-auto h-full w-full dark:bg-surface-800">
+        <div ref={containerRef} className="py-2 overflow-auto h-full w-full bg-surface-50 dark:bg-surface-800">
             <Container maxWidth="6xl">
+                <div className="mb-4 flex flex-col gap-2">
+                    <SchemaDriftBanner />
+                </div>
                 {/* search & actions */}
                 <div
                     className="w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4"
@@ -353,7 +371,7 @@ export function ContentHomePage({
                     modifiers={dndModifiers}
                 >
                     <SortableContext
-                        key={JSON.stringify(containers)}
+                        key={containers.join(",")}
                         items={containers}
                         strategy={verticalListSortingStrategy}
                     >

package/src/components/HomePage/FavouritesView.tsx

@@ -1,9 +1,8 @@
 import type { NavigationEntry } from "@rebasepro/types";
 import { useNavigate } from "react-router-dom";
 ;
-import { Chip, Collapse } from "@rebasepro/ui";
-import { StarIcon } from "lucide-react";
-import { useUserConfigurationPersistence } from "@rebasepro/core";
+import { Chip, Collapse, StarIcon } from "@rebasepro/ui";
+import { useUserConfigurationPersistence } from "@rebasepro/app";
 import { useNavigationStateController } from "../../index";
 
 function NavigationChip({ entry }: { entry: NavigationEntry }) {

package/src/components/HomePage/HomePageDnD.tsx

@@ -2,6 +2,7 @@ import type { NavigationEntry } from "@rebasepro/types";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
     Active,
+    Over,
     closestCenter,
     closestCorners,
     CollisionDetection,
@@ -347,7 +348,7 @@ export function useHomePageDnd({
     const handleDragOver = ({
         active,
         over
-    }: { active: Active; over: any }) => {
+    }: { active: Active; over: Over | null }) => {
         if (disabled || !over) return;
 
         const activeIdNow = active.id;
@@ -398,7 +399,7 @@ export function useHomePageDnd({
     const handleDragEnd = ({
         active,
         over
-    }: { active: Active; over: any }) => {
+    }: { active: Active; over: Over | null }) => {
         if (disabled || !over) {
             resetDragState();
             return;

package/src/components/HomePage/NavigationCard.tsx

@@ -1,5 +1,4 @@
-import { Card, cls, Markdown, Typography } from "@rebasepro/ui";
-import { ArrowRightIcon } from "lucide-react";
+import { ArrowRightIcon, Card, cls, iconSize, Markdown, Typography } from "@rebasepro/ui";
 import React from "react";
 
 export type NavigationCardProps = {
@@ -26,10 +25,8 @@ export const NavigationCard = React.memo(function NavigationCard({
     return (
         <Card
             className={cls(
-                "group h-full p-5 cursor-pointer transition-all duration-200 ease-in-out",
-                "border-surface-200/40 dark:border-surface-700/40",
-                "hover:-translate-y-0.5 hover:shadow-md hover:shadow-primary/5",
-                "hover:border-primary/30 dark:hover:border-primary/20",
+                "group h-full p-4 cursor-pointer transition-colors duration-150 ease-in-out",
+                "hover:bg-primary/5 dark:hover:bg-primary/5",
                 shrink && "w-full max-w-full min-h-0 scale-75"
             )}
             onClick={() => {
@@ -40,8 +37,8 @@ export const NavigationCard = React.memo(function NavigationCard({
             <div className="flex flex-col h-full">
                 {/* Header: title + icon left, actions right */}
                 <div className="flex items-center w-full justify-between mb-1">
-                    <div className="flex items-center gap-4">
-                        <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-primary/8 dark:bg-primary/10 text-primary/70 dark:text-primary/60 transition-colors duration-200 group-hover:bg-primary/12 dark:group-hover:bg-primary/15 group-hover:text-primary dark:group-hover:text-primary/80">
+                    <div className="flex items-center gap-3">
+                        <div className="flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500 transition-colors duration-150 group-hover:text-primary dark:group-hover:text-primary">
                             {icon}
                         </div>
                         <Typography variant="subtitle1"
@@ -61,7 +58,7 @@ export const NavigationCard = React.memo(function NavigationCard({
                 </div>
 
                 {/* Description */}
-                <div className="grow pl-[44px]">
+                <div className="pl-8">
                     {description && <Typography variant="caption"
                         color="secondary"
                         component="div">
@@ -70,17 +67,13 @@ export const NavigationCard = React.memo(function NavigationCard({
                 </div>
 
                 {additionalContent && (
-                    <div className="pl-[44px] pointer-events-none">
+                    <div className="pl-8 pointer-events-none">
                         {additionalContent}
                     </div>
                 )}
 
-                {/* Arrow */}
-                <div className="self-end mt-1">
-                    <div className={"transition-transform duration-200 group-hover:translate-x-0.5"}>
-                        <ArrowRightIcon className="text-primary"/>
-                    </div>
-                </div>
+                {/* Spacer pushes content above to align at the top across grid siblings */}
+                <div className="grow"/>
 
             </div>
 

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -1,14 +1,13 @@
-import type { NavigationEntry, EntityCollection } from "@rebasepro/types";
+import type { NavigationEntry, CollectionConfig } from "@rebasepro/types";
 import { useNavigate } from "react-router-dom";
 ;
-import { IconButton, Tooltip } from "@rebasepro/ui";
-import { StarIcon } from "lucide-react";
+import { IconButton, StarIcon, Tooltip } from "@rebasepro/ui";
 import { NavigationCard } from "./NavigationCard";
 import { SmallNavigationCard } from "./SmallNavigationCard";
 import React from "react";
-import { useRebaseContext, useSlot } from "@rebasepro/core";
-import { IconForView } from "@rebasepro/core";
-import { useUserConfigurationPersistence } from "@rebasepro/core";
+import { useRebaseContext, useSlot } from "@rebasepro/app";
+import { IconForView } from "@rebasepro/app";
+import { useUserConfigurationPersistence } from "@rebasepro/app";
 
 /**
  * This is the component used in the home page to render a card for each
@@ -39,7 +38,7 @@ export function NavigationCardBinding({
 }) {
 
     const userConfigurationPersistence = useUserConfigurationPersistence();
-    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
+    const collectionIcon = <IconForView collectionOrView={collection ?? view} size={"small"}/>;
 
     const navigate = useNavigate();
     const context = useRebaseContext();

package/src/components/HomePage/NavigationGroup.tsx

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, useState } from "react";
-import { cls, IconButton, Typography, ExpandablePanel , iconSize } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
-import { useTranslation } from "@rebasepro/core";
+import { cls, ExpandablePanel, IconButton, iconSize, PencilIcon, Typography } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/app";
 
 export function NavigationGroup({
     children,
@@ -40,8 +39,8 @@ export function NavigationGroup({
                 component={"h2"}
                 color="secondary"
                 className={cls(
-                    "p-4 py-2 rounded",
-                    "font-medium text-sm text-surface-600 dark:text-surface-400"
+                    "px-4 py-1 rounded",
+                    "font-medium text-[10px] uppercase tracking-[0.08em] text-primary/50 dark:text-primary/70"
                 )}
             >
                 {currentGroupName}

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 
 interface RenameGroupDialogProps {
     open: boolean;

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,5 +1,4 @@
 import { cardClickableMixin, cardMixin, cls, Typography } from "@rebasepro/ui";
-import { ArrowRightIcon } from "lucide-react";
 
 import { Link } from "react-router-dom";
 
@@ -36,11 +35,7 @@ export function SmallNavigationCard({
                     </Typography>
                 </div>
 
-                <div className={"p-2"}>
-                    <ArrowRightIcon className="text-primary"/>
-                </div>
             </Link>
 
         </>);
 }
-

package/src/components/{EntityJsonPreview.tsx → JsonPreviewBinding.tsx}

@@ -1,8 +1,8 @@
 import React, { useRef } from "react";
 import { Highlight, themes } from "prism-react-renderer";
-import { useModeController } from "@rebasepro/core";
+import { useModeController } from "@rebasepro/app";
 
-export function EntityJsonPreview({ values }: { values: object }) {
+export function JsonPreviewBinding({ values }: { values: object }) {
     const code = JSON.stringify(values, null, "\t");
     const { mode } = useModeController();
     const preRef = useRef<HTMLPreElement>(null);

package/src/components/PropertyCollectionView.tsx

@@ -101,7 +101,7 @@ export const PropertyCollectionView = ({
     suppressHeader = false,
     size = "small"
 }: {
-    data: any;
+    data: unknown;
     properties: Properties;
     baseKey?: string;
     suppressHeader?: boolean;
@@ -258,6 +258,7 @@ export const PropertyCollectionView = ({
                 <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
                     {Object.entries(data).map(([key, value]) => {
                         if (value === null || value === undefined) return null;
+                        if (baseKey === "" && !properties[key]) return null;
                         const currentKey = baseKey ? `${baseKey}.${key}` : key;
                         return (
                             <PropertyCollectionView

package/src/components/PropertyIdCopyTooltip.tsx

@@ -1,5 +1,4 @@
-import { IconButton, Tooltip, Typography } from "@rebasepro/ui";
-import { CopyIcon } from "lucide-react";
+import { CopyIcon, IconButton, Tooltip, Typography } from "@rebasepro/ui";
 import { useCallback, useState } from "react";
 
 export function PropertyIdCopyTooltip({
@@ -9,7 +8,7 @@ export function PropertyIdCopyTooltip({
 }: {
     propertyKey: string,
     className?: string,
-    children: any
+    children: React.ReactNode
 }) {
     return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
         delayDuration={800}

package/src/components/{RebaseCMS.tsx → RebaseAdmin.tsx}

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect } from "react";
-import { useRebaseRegistryDispatch } from "@rebasepro/core";
-import type { RebaseCMSConfig } from "@rebasepro/types";
+import { useRebaseRegistryDispatch } from "@rebasepro/app";
+import type { RebaseAdminConfig } from "@rebasepro/types";
 
 /**
  * Declarative component to configure the CMS in Rebase.
@@ -10,18 +10,20 @@ import type { RebaseCMSConfig } from "@rebasepro/types";
  * is auto-wired as a native feature (slots, provider, Studio view) without
  * needing any external plugin.
  */
-export function RebaseCMS({ collections, homePage, entityViews, entityActions, plugins, collectionEditor }: RebaseCMSConfig) {
+export function RebaseAdmin({ collections, views, homePage, entityViews, entityActions, collectionEditor, navigationGroupMappings, basePath }: RebaseAdminConfig) {
     const dispatch = useRebaseRegistryDispatch();
 
     useLayoutEffect(() => {
         dispatch.registerCMS({ collections,
+views,
 homePage,
 entityViews,
 entityActions,
-plugins,
-collectionEditor });
+collectionEditor,
+navigationGroupMappings,
+basePath });
         return () => dispatch.unregisterCMS();
-    }, [dispatch, collections, homePage, entityViews, entityActions, plugins, collectionEditor]);
+    }, [dispatch, collections, views, homePage, entityViews, entityActions, collectionEditor, navigationGroupMappings, basePath]);
 
     return null;
 }