@rebasepro/admin 0.11.0 → 0.11.1-canary.g8caabf3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.11.1-canary.g8caabf3",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -83,14 +83,14 @@
     "react-dropzone": "^15.0.0",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/admin-types": "0.11.0",
-    "@rebasepro/common": "0.11.0",
-    "@rebasepro/forms": "0.11.0",
-    "@rebasepro/app": "0.11.0",
-    "@rebasepro/inference": "0.11.0",
-    "@rebasepro/types": "0.11.0",
-    "@rebasepro/ui": "0.11.0",
-    "@rebasepro/utils": "0.11.0"
+    "@rebasepro/admin-types": "0.11.1-canary.g8caabf3",
+    "@rebasepro/app": "0.11.1-canary.g8caabf3",
+    "@rebasepro/forms": "0.11.1-canary.g8caabf3",
+    "@rebasepro/common": "0.11.1-canary.g8caabf3",
+    "@rebasepro/types": "0.11.1-canary.g8caabf3",
+    "@rebasepro/ui": "0.11.1-canary.g8caabf3",
+    "@rebasepro/utils": "0.11.1-canary.g8caabf3",
+    "@rebasepro/inference": "0.11.1-canary.g8caabf3"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/collection_editor/CollectionEditorDialogsContext.tsx

@@ -5,7 +5,7 @@ import React, { createContext, useContext } from "react";
  * sets and CollectionEditorDialogs reads.
  *
  * This indirection exists because ConfigControllerProvider is a root-scope
- * plugin provider that wraps <RebaseShell>, therefore living ABOVE the CMS
+ * plugin provider that wraps <RebaseShell>, therefore living ABOVE the admin
  * context providers (CollectionRegistryContext, NavigationStateContext,
  * UrlContext).  The actual dialog components need those contexts, so they
  * must render inside the shell tree.

package/src/collection_editor/ConfigControllerProvider.tsx

@@ -245,7 +245,7 @@ parentEntityIds,
         }, [onAnalyticsEvent, pathSuggestions]);
 
         // Build the dialog props objects that will be consumed by
-        // CollectionEditorDialogs (rendered inside RebaseShell where CMS
+        // CollectionEditorDialogs (rendered inside RebaseShell where admin
         // contexts are available).
         const collectionDialogProps = useMemo(() => {
             if (!currentDialog) return undefined;

package/src/collection_editor/_cms_internals.ts

@@ -1,7 +1,7 @@
 /**
  * Internal re-exports for the collection editor module.
  * This avoids circular imports by pointing directly at source files
- * rather than going through the CMS barrel (index.ts).
+ * rather than going through the admin barrel (index.ts).
  */
 
 // Hooks

package/src/collection_editor/extensibility_types.ts

@@ -160,7 +160,7 @@ export interface CollectionEditorExtensionProps {
      * reading from React contexts.
      *
      * Use this when embedding the collection editor outside of the Rebase
-     * CMS, where the Rebase context providers are not available.
+     * admin, where the Rebase context providers are not available.
      *
      * Default: false (standard Rebase mode).
      */

package/src/collection_editor/index.ts

@@ -1,9 +1,9 @@
 // Collection Editor — moved from @rebasepro/studio
-// This module provides the visual schema/collection editor for the CMS.
+// This module provides the visual schema/collection editor for the admin.
 //
 // IMPORTANT: Heavy UI components (CollectionEditorDialog, CollectionStudioView,
 // CollectionsStudioView, PropertyForm, PropertyFormDialog) are NOT re-exported
-// here to keep the main CMS bundle lean. Import them from
+// here to keep the main admin bundle lean. Import them from
 // "@rebasepro/admin/collection_editor_ui" instead — they live in a separate chunk
 // that is loaded on demand.
 

package/src/collection_editor/ui/collection_editor/EntityActionsEditTab.tsx

@@ -145,7 +145,7 @@ export function EntityActionsEditTab({
                     title={<>Remove this action?</>}
                     body={<>This will <b>not
                         delete any data</b>, only
-                        the action in the CMS</>}/>}
+                        the action in the admin</>}/>}
 
             <EntityActionsSelectDialog
                 open={addEntityActionDialogOpen}

package/src/collection_editor/ui/collection_editor/GetCodeDialog.tsx

@@ -27,7 +27,7 @@ export function GetCodeDialog({
         <DialogContent>
 
             <Typography variant={"body2"} className={"my-4 mb-8"}>
-                If you want to customise the collection in code, you can add this collection code to your CMS
+                If you want to customise the collection in code, you can add this collection code to your admin
                 app configuration.
                 More info in the <a
                     rel="noopener noreferrer"

package/src/collection_editor/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -214,7 +214,7 @@ export function SubcollectionsEditTab({
                     title={<>Delete this subcollection?</>}
                     body={<> This will <b>not
                         delete any data</b>, only
-                        the collection in the CMS</>}/>}
+                        the collection in the admin</>}/>}
             {viewToDelete &&
                 <ConfirmationDialog open={Boolean(viewToDelete)}
                     onAccept={() => {
@@ -225,7 +225,7 @@ export function SubcollectionsEditTab({
                     title={<>Remove this view?</>}
                     body={<>This will <b>not
                         delete any data</b>, only
-                        the view in the CMS</>}/>}
+                        the view in the admin</>}/>}
 
             <CollectionEditorDialog
                 open={Boolean(currentDialog)}

package/src/components/CollectionEditorDialogs.tsx

@@ -16,12 +16,12 @@ const PropertyFormDialog = lazy(() =>
 
 /**
  * Renders the CollectionEditorDialog and PropertyFormDialog inside
- * the RebaseShell tree where CMS-internal contexts
+ * the RebaseShell tree where admin-internal contexts
  * (CollectionRegistryContext, NavigationStateContext, UrlContext)
  * are available.
  *
  * Both dialog components are loaded dynamically via React.lazy so that
- * production CMS bundles that never open the collection editor don't pay
+ * production admin bundles that never open the collection editor don't pay
  * the download/parse cost up-front.
  *
  * The dialog state (open/close, props) is managed by ConfigControllerProvider

package/src/components/CollectionTableBinding/CollectionRowActions.tsx

@@ -16,9 +16,10 @@ import {
     Tooltip
 } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
+import { getIcon } from "@rebasepro/app";
 import { getEntityFromCache } from "@rebasepro/app";
 import { getLocalChangesBackup } from "@rebasepro/app";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 
 /**
  *
@@ -79,7 +80,7 @@ export const CollectionRowActions = function CollectionRowActions({
         isDraggable?: boolean;
     }) {
 
-    const context = useCMSContext();
+    const context = useAdminContext();
     const sidePanelCtrl = context.sidePanelController;
     const { t } = useTranslation();
 
@@ -140,7 +141,7 @@ export const CollectionRowActions = function CollectionRowActions({
                                 });
                             }}
                             size={iconSize}>
-                            {action.icon}
+                            {getIcon(action.icon, undefined, undefined, "smallest")}
                         </IconButton>;
                         if (isEditAction && hasDraft) {
                             iconButton = (
@@ -183,7 +184,7 @@ export const CollectionRowActions = function CollectionRowActions({
                                             openEntityMode: openEntityMode ?? collection?.openEntityMode
                                         });
                                     }}>
-                                    {action.icon}
+                                    {getIcon(action.icon, undefined, undefined, "smallest")}
                                     {action.name}
                                 </MenuItem>
                             ))}

package/src/components/CollectionViewBinding/CollectionListViewBinding.tsx

@@ -22,9 +22,10 @@ import {
 import { useAnalyticsController } from "@rebasepro/app";
 import { getEntityPreviewKeys } from "../../util/previews";
 import { IconForView } from "@rebasepro/app";
+import { getIcon } from "@rebasepro/app";
 import { getValueInPath } from "@rebasepro/utils";
 import { useCollectionSlotKeys, resolveEntitySlots, type CollectionSlotKeys } from "./usePreviewSlots";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 import { resolveEntityAction } from "../../util/resolutions";
 
 export type CollectionListViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {
@@ -265,8 +266,8 @@ year: diffDays > 365 ? "numeric" : undefined });
 }
 
 /**
- * Classic CMS list view for displaying entities.
- * Designed to be the most familiar, stereotypical CMS content management view:
+ * Classic admin list view for displaying entities.
+ * Designed to be the most familiar, stereotypical admin content management view:
  * - Clean rows with checkbox, icon/avatar, title, metadata, and actions
  * - Column-sortable headers
  * - Infinite scroll
@@ -289,7 +290,7 @@ export function CollectionListViewBinding<M extends Record<string, unknown> = Re
     const authController = useAuthController();
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
-    const context = useCMSContext();
+    const context = useAdminContext();
 
     const containerRef = useRef<HTMLDivElement>(null);
     const [containerWidth, setContainerWidth] = useState(1200);
@@ -622,7 +623,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     isLast: boolean;
     isActive?: boolean;
     listViewActions?: EntityAction[];
-    context?: ReturnType<typeof useCMSContext>;
+    context?: ReturnType<typeof useAdminContext>;
     path?: string;
     selectionController?: SelectionController<M>;
     openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
@@ -864,7 +865,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                                         openEntityMode: openEntityMode ?? collection?.openEntityMode ?? "full_screen"
                                     });
                                 }}>
-                                {action.icon}
+                                {getIcon(action.icon, undefined, undefined, "smallest")}
                             </IconButton>
                         </Tooltip>
                     ))}
@@ -888,7 +889,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     isLast: boolean;
     isActive?: boolean;
     listViewActions?: EntityAction[];
-    context?: ReturnType<typeof useCMSContext>;
+    context?: ReturnType<typeof useAdminContext>;
     path?: string;
     selectionController?: SelectionController<M>;
     openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";

package/src/components/CollectionViewBinding/CollectionViewActions.tsx

@@ -13,7 +13,7 @@ const ImportCollectionAction = lazy(() => import("../../data_import/import").the
 const ExportCollectionAction = lazy(() => import("../../data_export/export").then(m => ({ default: m.ExportCollectionAction })));
 import { EditorCollectionAction } from "../../collection_editor/ui/EditorCollectionAction";
 import { useCollectionEditorController } from "../../collection_editor/useCollectionEditorController";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 
 export type CollectionViewActionsProps<M extends Record<string, unknown>> = {
     collection: AdminCollection<M>;
@@ -52,7 +52,7 @@ export function CollectionViewActions<M extends Record<string, unknown>>({
     children,
     openNewDocument
 }: CollectionViewActionsProps<M>) {
-    const context = useCMSContext();
+    const context = useAdminContext();
 
     const { canCreate, canDelete } = usePermissions();
 

package/src/components/CollectionViewBinding/CollectionViewBinding.tsx

@@ -75,7 +75,7 @@ import { addRecentId, getRecentIds } from "./utils";
 import { isViewMode, OpenEntityMode, resolveOpenEntityMode, VIEW_MODE_PARAM } from "../../util/view_mode";
 import { mergeDeep } from "@rebasepro/utils";
 import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../../hooks/useSidePanel";
 import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
@@ -167,7 +167,7 @@ const CollectionViewBindingInner = React.memo(
     ) {
 
         const { t } = useTranslation();
-        const context = useCMSContext();
+        const context = useAdminContext();
         const collectionRegistry = useCollectionRegistryController();
         const urlController = useUrlController();
         const breadcrumbs = useBreadcrumbsController();

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -11,7 +11,7 @@ import { FilterPresetsButton } from "./FilterPresetsButton";
 import { toArray } from "@rebasepro/utils";
 import { useNavigate } from "react-router-dom";
 import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 import { withViewMode } from "../../util/view_mode";
 
 export type CollectionViewStartActionsProps<M extends Record<string, unknown>> = {
@@ -43,7 +43,7 @@ export function CollectionViewStartActions<M extends Record<string, unknown>>({
     openNewDocument
 }: CollectionViewStartActionsProps<M>) {
 
-    const context = useCMSContext();
+    const context = useAdminContext();
     const largeLayout = useLargeLayout();
     const { t } = useTranslation();
 

package/src/components/DefaultDrawer.tsx

@@ -33,9 +33,9 @@ import { LanguageToggle, RebaseLogo } from "@rebasepro/app";
 import { useApp } from "./app/useApp";
 
 /**
- * Default drawer used in the CMS.
+ * Default drawer used in the admin.
  *
- * When no `children` are provided, renders the full CMS navigation
+ * When no `children` are provided, renders the full admin navigation
  * (collection groups, mode switch, plugin slots).
  *
  * When `children` **are** provided, renders the shared drawer shell
@@ -60,7 +60,7 @@ export function DefaultDrawer({
     logoDestination?: string;
     /**
      * Custom navigation content for the drawer.
-     * When provided, replaces the default CMS navigation (collection groups,
+     * When provided, replaces the default admin navigation (collection groups,
      * mode switch, slots). The shared shell (logo, scroll area, footer
      * actions, collapse toggle) is still rendered around it.
      */
@@ -115,7 +115,7 @@ export function DefaultDrawer({
                         ? "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)"
                         : "linear-gradient(to bottom, black 0, black calc(100% - 20px), transparent 100%)"
                 }}>
-                {children ?? <CMSNavigationContent />}
+                {children ?? <AdminNavigationContent />}
             </div>
 
             {footerActions !== null && (
@@ -138,11 +138,11 @@ export function DefaultDrawer({
 }
 
 /**
- * Default CMS navigation content — rendered inside DefaultDrawer when no
+ * Default admin navigation content — rendered inside DefaultDrawer when no
  * custom `children` are provided.  Contains the mode switch, navigation
  * groups, and header / footer plugin slots.
  */
-function CMSNavigationContent() {
+function AdminNavigationContent() {
 
     const {
         drawerHovered,
@@ -166,7 +166,7 @@ function CMSNavigationContent() {
     const allNavigationEntries = navigationState.topLevelNavigation?.navigationEntries ?? [];
 
     // Build a set of Studio-only dev view slugs so we can distinguish them from
-    // CMS custom views added via <RebaseAdmin views={...}> or plugins.
+    // admin 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));
@@ -176,7 +176,7 @@ function CMSNavigationContent() {
     }, [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.
+    // Content mode shows collections, admin custom views, and admin entries — but not Studio dev views.
     const filteredEntries = adminModeController.mode === "studio"
         ? allNavigationEntries.filter(e => (e.type === "view" && studioViewSlugs.has(e.slug)) || e.type === "admin")
         : allNavigationEntries.filter(e => e.type !== "view" || !studioViewSlugs.has(e.slug));
@@ -189,6 +189,16 @@ function CMSNavigationContent() {
         ...[...entryGroups].filter(g => !orderedGroups.includes(g))
     ];
 
+    // Group header icons, declared on `navigationGroupMappings`. Keyed by name
+    // because that is what a navigation entry's `group` holds.
+    const groupIcons = useMemo(() => {
+        const icons = new Map<string, string>();
+        (registry.cmsConfig?.navigationGroupMappings ?? []).forEach(mapping => {
+            if (mapping.icon) icons.set(mapping.name, mapping.icon);
+        });
+        return icons;
+    }, [registry.cmsConfig?.navigationGroupMappings]);
+
     // Collapsible groups state - using "drawer" namespace for independent state from home page
     const collapsedDefaults = useMemo(
         () => buildCollapsedDefaults(registry.cmsConfig?.navigationGroupMappings, "drawer"),
@@ -244,6 +254,7 @@ context });
                         tooltipsOpen={tooltipsOpen}
                         adminMenuOpen={adminMenuOpen}
                         onItemClick={onItemClick}
+                        icon={groupIcons.get(group)}
                     />
                 );
             })}

package/src/components/DeleteEntityDialog.tsx

@@ -10,7 +10,7 @@ import {
     useSnackbarController,
     useTranslation
 } from "@rebasepro/app";
-import { useCMSContext } from "../hooks";
+import { useAdminContext } from "../hooks";
 import { EntityViewBinding } from "./EntityViewBinding";
 import type { AdminCollection } from "@rebasepro/admin-types";
 
@@ -54,7 +54,7 @@ export function DeleteEntityDialog<M extends Record<string, unknown>>({
     const { t } = useTranslation();
     const [loading, setLoading] = useState(false);
 
-    const context = useCMSContext();
+    const context = useAdminContext();
     const entityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
         ? entityOrEntitiesToDelete[0]
         : entityOrEntitiesToDelete;

package/src/components/DetailViewBinding.tsx

@@ -11,6 +11,7 @@ import { EntityViewBinding } from "./EntityViewBinding";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     Alert,
+    ArrowLeftIcon,
     Button,
     CenteredView,
     cls,
@@ -470,7 +471,24 @@ entityId }
             );
         });
 
-    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog";
+    // Full screen is the one layout with no way out of its own: a side panel and a
+    // dialog can be dismissed, and a split keeps the list beside it, but opening an
+    // entity full screen replaces the collection entirely and left browser Back as
+    // the only route back to it — which is not an affordance the page shows, and is
+    // wrong anyway once the user has moved between tabs inside the entity.
+    const backToCollectionButton = layout === "full_screen" ? (
+        <Tooltip title={t("back")}>
+            <IconButton
+                size="small"
+                aria-label={t("back")}
+                onClick={() => navigate(urlController.buildUrlCollectionPath(path))}
+            >
+                <ArrowLeftIcon size={iconSize.smallest} />
+            </IconButton>
+        </Tooltip>
+    ) : null;
+
+    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog" || Boolean(backToCollectionButton);
 
     const fullScreenButton = !barActions && (layout === "side_panel" || layout === "split" || layout === "dialog") && entityId ? (
         <Tooltip title={"Open full screen"}>
@@ -562,6 +580,8 @@ entityId }
         {shouldShowTopBar && <div
             className={cls("h-[52px] items-center flex overflow-hidden w-full border-b pl-2 pr-2 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
+            {backToCollectionButton}
+
             {fullScreenButton}
 
             {barActions?.({

package/src/components/DrawerNavigationGroup.tsx

@@ -2,7 +2,7 @@ import type { NavigationEntry } from "@rebasepro/admin-types";
 import React from "react";
 import { ChevronDownIcon, cls, iconSize, Typography } from "@rebasepro/ui";
 
-import { IconForView } from "@rebasepro/app";
+import { IconForView, getIcon } from "@rebasepro/app";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";
 import { useTranslation, useComponentOverride } from "@rebasepro/app";
 
@@ -47,6 +47,13 @@ export interface DrawerNavigationGroupProps {
      * Hide the group header (title and expandable panel)
      */
     hideHeader?: boolean;
+    /**
+     * Lucide icon name for the group header, from `NavigationGroupMapping.icon`.
+     *
+     * Supplying one moves the visual anchor from the rows to the group: the header
+     * gets the icon, and the entries below trade theirs for an indent.
+     */
+    icon?: string;
 }
 
 /**
@@ -63,10 +70,17 @@ export function DrawerNavigationGroup({
     adminMenuOpen,
     headerActions,
     onItemClick,
-    hideHeader
+    hideHeader,
+    icon
 }: DrawerNavigationGroupProps) {
     const { t } = useTranslation();
     const ResolvedDrawerNavigationItem = useComponentOverride("Shell.DrawerNavigationItem", DrawerNavigationItem);
+
+    // Indent the entries only when the group itself is carrying the icon. Without a
+    // header there is nothing to indent under, and collapsed to a rail the entry
+    // icons are the only affordance left, so both cases keep the original rows.
+    const groupIcon = !hideHeader && drawerOpen ? getIcon(icon, undefined, undefined, "small") : undefined;
+    const indentEntries = Boolean(groupIcon);
     return (
         <div
             className={"my-2 mx-2 flex flex-col"}
@@ -83,14 +97,23 @@ export function DrawerNavigationGroup({
                     <ChevronDownIcon
                         size={iconSize.small}
                         className={cls(
-                            "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1",
+                            "text-surface-500 dark:text-surface-400 transition-transform duration-200 mr-1",
                             collapsed ? "-rotate-90" : "rotate-0"
                         )}
                     />
+                    {groupIcon && (
+                        <span className="shrink-0 mr-2 flex items-center text-surface-600 dark:text-surface-300 [&>svg]:size-4">
+                            {groupIcon}
+                        </span>
+                    )}
                     <Typography
                         variant={"caption"}
                         color={"secondary"}
-                        className="font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400"
+                        // A category label is the thing you scan to find anything else in
+                        // the drawer, so it is read far more often than it is read *past*.
+                        // At 11px uppercase in surface-400 it sat below the contrast of the
+                        // rows it labels, which inverted that.
+                        className="font-semibold text-[12px] uppercase tracking-wide flex-grow line-clamp-1 text-surface-600 dark:text-surface-300"
                     >
                         {(group || t("views_group"))}
                     </Typography>
@@ -122,6 +145,7 @@ export function DrawerNavigationGroup({
                         onClick={() => onItemClick?.(entry)}
                         url={entry.url}
                         name={entry.name}
+                        indented={indentEntries}
                     />
                 ))}
             </div>

package/src/components/DrawerNavigationItem.tsx

@@ -10,7 +10,8 @@ export function DrawerNavigationItem({
     adminMenuOpen,
     tooltipsOpen,
     url,
-    onClick
+    onClick,
+    indented = false
 }: {
     icon: React.ReactElement,
     name: string,
@@ -19,12 +20,25 @@ export function DrawerNavigationItem({
     adminMenuOpen?: boolean,
     url: string,
     onClick?: () => void,
+    /**
+     * Render as a child of an icon-bearing group: no icon of its own, indented to
+     * sit under the group's label. Set by {@link DrawerNavigationGroup} only when
+     * the group actually has an icon and the drawer is expanded.
+     */
+    indented?: boolean,
 }) {
 
-    const iconWrap = <div
-        className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4 group-hover/nav:text-primary transition-colors duration-150"}>
-        {icon}
-    </div>;
+    // Indented rows give up the icon rather than keeping it *and* indenting: a
+    // per-row icon repeated down a group is what flattens the hierarchy, since
+    // every row then reads at the weight of the category above it. The indent is
+    // the same 44px the icon occupied, so labels stay on the original grid and the
+    // rail width does not change.
+    const iconWrap = indented
+        ? <div className={"shrink-0 w-[44px] h-[30px]"} aria-hidden={true}/>
+        : <div
+            className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4 group-hover/nav:text-primary transition-colors duration-150"}>
+            {icon}
+        </div>;
 
     const listItem = <div>
         <NavLink

package/src/components/EditFormActions.tsx

@@ -20,7 +20,8 @@ import { SideDialogController, useSideDialogContext } from "./SideDialogs";
 import { FormexController } from "@rebasepro/forms";
 import { ErrorTooltip } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
-import { useCMSContext } from "../hooks/useCMSContext";
+import { getIcon } from "@rebasepro/app";
+import { useAdminContext } from "../hooks/useAdminContext";
 import { useChildViewSource } from "../hooks/useChildViewSource";
 
 export function EditFormActions({
@@ -40,7 +41,7 @@ export function EditFormActions({
 }: EntityFormActionsProps) {
 
     const { canCreate, canDelete } = usePermissions();
-    const context = useCMSContext();
+    const context = useAdminContext();
     const sidePanelController = context.sidePanelController;
     const sideDialogContext = useSideDialogContext();
     const customizationController = useCustomizationController();
@@ -371,7 +372,7 @@ function EntityActionButton({
                     });
                 }
             }}>
-            {loading ? <CircularProgress size={"smallest"}/> : action.icon}
+            {loading ? <CircularProgress size={"smallest"}/> : getIcon(action.icon, undefined, undefined, "smallest")}
         </IconButton>
     </Tooltip>;
 }

package/src/components/EditViewBinding.tsx

@@ -70,7 +70,7 @@ export type OnTabChangeParams<M extends Record<string, unknown>> = {
 
 export interface EditViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> {
     /**
-     * The CMS path of the entity, e.g. "users" or "products".
+     * The admin path of the entity, e.g. "users" or "products".
      */
     path: string;
     collection: AdminCollection<M>;

package/src/components/HomePage/ContentHomePage.tsx

@@ -24,7 +24,7 @@ import { useRestoreScroll } from "@rebasepro/app";
 
 import { SchemaDriftBanner } from "@rebasepro/app";
 import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
-import { useCMSContext } from "../../hooks/useCMSContext";
+import { useAdminContext } from "../../hooks/useAdminContext";
 
 export const DEFAULT_GROUP_NAME = "Views";
 export const ADMIN_GROUP_NAME = "Admin";
@@ -43,7 +43,7 @@ export function ContentHomePage({
     hiddenGroups?: string[];
 }) {
 
-    const context = useCMSContext();
+    const context = useAdminContext();
     const { navigationStateController } = context;
     const customizationController = useCustomizationController();
     const adminModeController = useAdminModeController();
@@ -65,7 +65,7 @@ export function ContentHomePage({
     } = 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.
+    // admin 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));
@@ -74,7 +74,7 @@ export function ContentHomePage({
     }, [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.
+    // Content mode shows collections, admin custom views, and admin entries — but not Studio dev views.
     const rawNavigationEntries = useMemo(() => {
         if (adminModeController.mode === "studio") {
             return unFilteredNavigationEntries.filter(e => (e.type === "view" && studioViewSlugs.has(e.slug)) || e.type === "admin");