@rebasepro/admin 0.9.0 → 0.9.1-canary.0de22e0

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,7 +10,7 @@ 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, views, homePage, entityViews, entityActions, collectionEditor, navigationGroupMappings, basePath }: RebaseCMSConfig) {
+export function RebaseAdmin({ collections, views, homePage, entityViews, entityActions, collectionEditor, navigationGroupMappings, basePath }: RebaseAdminConfig) {
     const dispatch = useRebaseRegistryDispatch();
 
     useLayoutEffect(() => {

package/src/components/RebaseAuthGate.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import {
     useRebaseRegistry,
     useAuthController
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { CircularProgressCenter } from "@rebasepro/ui";
-import { LoginView } from "@rebasepro/core";
+import { LoginView } from "@rebasepro/app";
 import type { AuthControllerExtended } from "@rebasepro/types";
 
 /**

package/src/components/RebaseLayout.tsx

@@ -4,10 +4,9 @@ import {
     useAdminModeController,
     useComponentOverride,
     useRebaseRegistry
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 
 import { Scaffold } from "./app/Scaffold";
-import { AppBar } from "./app/AppBar";
 import { Drawer } from "./app/Drawer";
 import { SideDialogs } from "./SideDialogs";
 import { AdminModeSyncer } from "./AdminModeSyncer";
@@ -16,7 +15,7 @@ import type { AppView } from "@rebasepro/types";
 export interface RebaseLayoutProps {
     /** Title shown in the drawer. */
     title?: string;
-    /** Custom AppBar to override the default. */
+    /** Top bar. Only rendered if provided — pass `<AppBar/>` for the default one. */
     appBar?: React.ReactNode;
     /** Custom Drawer to override the default. */
     drawer?: React.ReactNode;
@@ -27,17 +26,18 @@ export interface RebaseLayoutProps {
 }
 
 /**
- * Layout layer — provides the Scaffold, AppBar, Drawer, and SideDialogs.
+ * Layout layer — provides the Scaffold, Drawer, and SideDialogs.
  *
  * Wraps the route outlet with the standard Rebase admin layout.
- * Override individual pieces (appBar, drawer) via props.
+ * Override the drawer via props; pass `appBar` to add a top bar (there is
+ * none by default — the drawer owns navigation and user actions).
  *
  * **Independently usable**: Use this when you want the Rebase layout
  * without its default route definitions.
  *
  * @example
  * ```tsx
- * <RebaseLayout title="My Admin">
+ * <RebaseLayout title="My Admin" appBar={<AppBar/>}>
  *   <Route path="/" element={<MyHomePage />} />
  *   <Route path="/custom" element={<CustomView />} />
  * </RebaseLayout>
@@ -53,14 +53,8 @@ export function RebaseLayout(props: RebaseLayoutProps) {
     } = props;
 
     const adminModeController = useAdminModeController();
-    const ResolvedAppBar = useComponentOverride("Shell.AppBar", AppBar);
     const ResolvedDrawer = useComponentOverride("Shell.Drawer", Drawer);
 
-    const ActiveAppBar = appBar ?? <ResolvedAppBar
-        includeLanguageToggle={false}
-        includeModeToggle={false}
-        includeUserMenu={false}
-    />;
     const ActiveDrawer = drawer ?? (
         <ResolvedDrawer
             title={title}
@@ -71,7 +65,7 @@ export function RebaseLayout(props: RebaseLayoutProps) {
     return (
         <Scaffold autoOpenDrawer={autoOpenDrawer}>
             <AdminModeSyncer devViews={devViews}/>
-            {ActiveAppBar}
+            {appBar}
             {ActiveDrawer}
             <Outlet/>
             <SideDialogs/>

package/src/components/RebaseNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useEffect, lazy, Suspense } from "react";
+import React, { useMemo, useRef, useEffect, useCallback, useContext, lazy, Suspense } from "react";
 import {
     useRebaseRegistry,
     useRebaseContext,
@@ -9,11 +9,12 @@ import {
     useRebaseClient,
     useData,
     useDataSources,
+    CollectionResolverRegistrationContext,
     StudioBridgeRegistryProvider,
     useBridgeRegistration,
     CustomizationControllerContext,
     RebaseDataContext
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { buildRoutedRebaseData, resolveDataSource } from "@rebasepro/common";
 import { CircularProgressCenter } from "@rebasepro/ui";
 import type { AppView, CollectionEditorOptions, EntityCustomView, EntityAction, CollectionConfig, RebasePlugin } from "@rebasepro/types";
@@ -103,6 +104,20 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
     const defaultData = useData();
     const getCollectionRef = useRef(collectionRegistryController.getCollection);
     getCollectionRef.current = collectionRegistryController.getCollection;
+
+    // Hand the data layer a way to read this registry. It was built by <Rebase>,
+    // above us, and needs a collection's primary keys to give its rows an
+    // address — rows themselves carry only columns.
+    //
+    // Registered during render, not in an effect: the views that fetch rows are
+    // below us, and their effects run before ours, so an effect here would bind
+    // after the first page had already been converted. The call only assigns a
+    // ref, so repeating it per render is free.
+    const registerCollectionResolver = useContext(CollectionResolverRegistrationContext);
+    const resolveCollection = useCallback(
+        (slug: string) => getCollectionRef.current(slug),
+        []);
+    registerCollectionResolver(resolveCollection);
     const routedData = useMemo(() => buildRoutedRebaseData({
         defaultData,
         sources: dataSources.sources,
@@ -220,7 +235,7 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
 
     // ── Merge CMS-registered entityViews/entityActions into the customization controller ──
     // The <Rebase> component builds the customizationController from its own props,
-    // but entity views passed to <RebaseCMS> are stored in the registry and not
+    // but entity views passed to <RebaseAdmin> are stored in the registry and not
     // automatically merged. We re-provide an enriched controller here so that
     // downstream consumers (EditViewBinding, side panels, etc.) can resolve
     // string-keyed entity views like "blog_preview".

package/src/components/RebaseRouteDefs.tsx

@@ -7,7 +7,7 @@ import {
     UIReferenceView,
     NotFoundPage,
     useComponentOverride
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { CircularProgressCenter } from "@rebasepro/ui";
 
 import { ContentHomePage as DefaultHomePage } from "./HomePage/ContentHomePage";
@@ -17,8 +17,8 @@ import { CustomViewRoute } from "../routes/CustomViewRoute";
 import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
 import { CollectionEditorDialogs } from "./CollectionEditorDialogs";
 import { useEffect } from "react";
-import { useTranslation } from "@rebasepro/core";
-import { useBreadcrumbsController } from "../index";
+import { useTranslation } from "@rebasepro/app";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 function SettingsView() {
     const { t } = useTranslation();

package/src/components/RebaseShell.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import {
     useRebaseRegistry
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { ErrorBoundary } from "@rebasepro/ui";
 
 import { RebaseAuthGate } from "./RebaseAuthGate";
@@ -11,6 +11,7 @@ import { RebaseRouteDefs } from "./RebaseRouteDefs";
 
 export interface RebaseShellProps {
     title?: string;
+    /** Top bar. Only rendered if provided — pass `<AppBar/>` for the default one. */
     appBar?: React.ReactNode;
     drawer?: React.ReactNode;
     autoOpenDrawer?: boolean;

package/src/components/ReferenceTable/SelectionTableBinding.tsx

@@ -14,16 +14,17 @@ import {
     useDataTableController,
     useLargeLayout,
     usePermissions
-} from "@rebasepro/core";
-import { ErrorView } from "@rebasepro/core";
+} from "@rebasepro/app";
+import { ErrorView } from "@rebasepro/app";
 import { Button, DialogActions, PlusIcon, Typography } from "@rebasepro/ui";
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import { useSelectionController } from "../CollectionViewBinding/useSelectionController";
 
-import { useColumnIds } from "@rebasepro/core";
+import { useColumnIds } from "@rebasepro/app";
 import { useSideDialogContext } from "../SideDialogs";
-import { useAnalyticsController } from "@rebasepro/core";
-import { useUrlController, useSidePanel } from "../../index";
+import { useAnalyticsController } from "@rebasepro/app";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
+import { useSidePanel } from "../../hooks/useSidePanel";
 
 /**
  * @group Components

package/src/components/ReferenceWidget.tsx

@@ -7,7 +7,7 @@ import type { PreviewSize } from "../types/components/PropertyPreviewProps";
 import { getReferenceFrom } from "@rebasepro/common";
 import { ReferencePreview } from "../preview";
 import { Button, cls } from "@rebasepro/ui";
-import { useCollectionRegistryController } from "../index";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 
 export type ReferenceWidgetProps<M extends Record<string, unknown>> = {
     name?: string,

package/src/components/RelationSelector.tsx

@@ -26,7 +26,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Entity, EntityRelation, FilterValues, Relation, getCollectionDataPath } from "@rebasepro/types";
 import { EntityPreviewBindingData } from "./EntityPreviewBinding";
-import { useData, useRelationSelector } from "@rebasepro/core";
+import { useData, useRelationSelector } from "@rebasepro/app";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { normalizeToEntityRelation } from "@rebasepro/common";
 import { EmptyValue } from "../preview";

package/src/components/SearchIconsView.tsx

@@ -10,8 +10,8 @@ import {
     SearchBar,
     Tooltip
 } from "@rebasepro/ui";
-import { iconsSearch } from "@rebasepro/core";
-import { useTranslation } from "@rebasepro/core";
+import { iconsSearch } from "@rebasepro/app";
+import { useTranslation } from "@rebasepro/app";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 

package/src/components/SelectableTable/SelectableTable.tsx

@@ -3,11 +3,11 @@ import type { Property, WhereFilterOp } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { CollectionSize, Entity, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
 import { CellRendererParams, TableView, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams } from "@rebasepro/ui";
-import { DEFAULT_PAGE_SIZE, DataCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/core";
+import { DEFAULT_PAGE_SIZE, DataCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/app";
 import { FilterFormFieldProps } from "@rebasepro/ui";
 import { useOutsideAlerter } from "@rebasepro/ui";
 import { SelectableTableContext } from "./SelectableTableContext";
-import { getRowHeight } from "@rebasepro/core";
+import { getRowHeight } from "@rebasepro/app";
 import { FilterFieldBinding } from "./filters/FilterFieldBinding";
 
 export type SelectableTableProps<M extends Record<string, unknown>> = {

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { DataCollectionTableController } from "@rebasepro/core";
+import { DataCollectionTableController } from "@rebasepro/app";
 
 export const SelectableTableContext = React.createContext<DataCollectionTableController<Record<string, unknown>>>(null! as DataCollectionTableController<Record<string, unknown>>);
 

package/src/components/SelectableTable/filters/BooleanFilterField.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { BooleanSwitchWithLabel } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 
 interface BooleanFieldProps {
     name: string,

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { DateTimeField, Select, SelectItem } from "@rebasepro/ui";
-import { useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 
 interface DateTimeFilterFieldProps {
     name: string,

package/src/components/SelectableTable/filters/FilterFieldBinding.tsx

@@ -8,7 +8,7 @@ import {
     WhereFilterOp
 } from "@rebasepro/types";
 import { enumToObjectEntries, resolveFilterOperators } from "@rebasepro/common";
-import { useCollectionScope, useComponentOverride, useResolvedComponent } from "@rebasepro/core";
+import { useCollectionScope, useComponentOverride, useResolvedComponent } from "@rebasepro/app";
 import { StringNumberFilterField } from "./StringNumberFilterField";
 import { BooleanFilterField } from "./BooleanFilterField";
 import { DateTimeFilterField } from "./DateTimeFilterField";

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -6,8 +6,8 @@ import { Entity, EntityReference } from "@rebasepro/types";
 import { ReferencePreview } from "../../../preview";
 import { Button, Checkbox, Label, Select, SelectItem } from "@rebasepro/ui";
 import { getReferenceFrom } from "@rebasepro/common";
-import { useTranslation } from "@rebasepro/core";
-import { useCollectionRegistryController } from "../../../index";
+import { useTranslation } from "@rebasepro/app";
+import { useCollectionRegistryController } from "../../../hooks/navigation/contexts/CollectionRegistryContext";
 
 interface ReferenceFilterFieldProps {
     name: string,

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -11,7 +11,7 @@ import {
     XIcon
 } from "@rebasepro/ui";
 import { EnumValueConfig } from "@rebasepro/types";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 
 interface StringNumberFilterFieldProps {
     name: string,

package/src/components/SideDialogs.tsx

@@ -2,7 +2,7 @@ import type { SideDialogPanelProps } from "../hooks/useSideDialogsController";
 import React, { useCallback, useContext, useEffect, useState, useMemo } from "react";
 import { useSideDialogsController } from "../hooks";
 import { Sheet, Dialog } from "@rebasepro/ui";
-import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
+import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/app";
 import { ErrorBoundary } from "@rebasepro/ui";
 import type { SidePanelBindingProps } from "@rebasepro/types";
 

package/src/components/SidePanelBinding.tsx

@@ -9,9 +9,10 @@ import { EditViewBinding } from "./EditViewBinding";
 import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
 import { useNavigate } from "react-router-dom";
-import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/core";
-import { useCollectionRegistryController, useSidePanel } from "../index";
-import { useUrlController } from "../index";
+import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/app";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { useSidePanel } from "../hooks/useSidePanel";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { resolveDefaultSelectedView } from "@rebasepro/common";
 
 /**
@@ -61,8 +62,10 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
         if (props.onUpdate) {
             props.onUpdate(params);
         }
-        setShowEditInPanel(false);
+        setEditInDialog(false);
         if (params.status !== "existing") {
+            // A newly created entity replaces the panel with its own address,
+            // which already leaves the edit view behind.
             sidePanelController.replace({
                 path: params.path,
                 entityId: params.entityId,
@@ -70,6 +73,8 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
                 updateUrl: collection?.openEntityMode !== "dialog",
                 collection: params.collection
             });
+        } else {
+            closeEditView();
         }
 
         if (sideDialogsController.pendingClose) {
@@ -89,13 +94,46 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
 
     const collection = collectionRegistryController.getCollection(path) ?? props.collection;
 
-    const [showEditInPanel, setShowEditInPanel] = useState(selectedTab === "edit");
+    // Dialog mode deliberately stays out of the URL, so it is the only case that
+    // needs local edit state. Everywhere else `edit` is a path segment, which
+    // keeps refresh and the back button working the same way they do in split.
+    const isDialogMode = collection?.openEntityMode === "dialog";
+    const [editInDialog, setEditInDialog] = useState(false);
+    const showEditInPanel = isDialogMode ? editInDialog : selectedTab === "edit";
     const isDetailMode = collection?.defaultEntityAction === "view" && !showEditInPanel && Boolean(entityId);
 
     // Reset edit mode when switching entities
     useEffect(() => {
-        setShowEditInPanel(selectedTab === "edit");
-    }, [entityId, selectedTab]);
+        setEditInDialog(false);
+    }, [entityId]);
+
+    const openEditView = useCallback(() => {
+        if (isDialogMode || !entityId) {
+            setEditInDialog(true);
+            return;
+        }
+        sidePanelController.replace({
+            path,
+            entityId,
+            selectedTab: "edit",
+            updateUrl: true,
+            collection
+        });
+    }, [isDialogMode, entityId, path, collection, sidePanelController]);
+
+    const closeEditView = useCallback(() => {
+        if (isDialogMode || !entityId) {
+            setEditInDialog(false);
+            return;
+        }
+        sidePanelController.replace({
+            path,
+            entityId,
+            selectedTab: undefined,
+            updateUrl: true,
+            collection
+        });
+    }, [isDialogMode, entityId, path, collection, sidePanelController]);
 
     // One-time correction: when the side panel opens without the correct
     // selectedTab but the resolved collection (from the registry) has a
@@ -154,7 +192,7 @@ entityId }
                         entityId={entityId!}
                         parentCollectionSlugs={parentCollectionSlugs}
                         parentEntityIds={parentEntityIds}
-                        onEditClick={() => setShowEditInPanel(true)}
+                        onEditClick={openEditView}
                         barActions={({
                             status,
                             values
@@ -203,7 +241,7 @@ entityId }
                         parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
                         onValuesModified={onValuesModified}
                         onSaved={onUpdate}
-                        navigateBack={() => setShowEditInPanel(false)}
+                        navigateBack={closeEditView}
                         barActions={({
                             status,
                             values

package/src/components/SidePanelProvider.tsx

@@ -6,13 +6,14 @@ import { SidePanelControllerContext } from "../hooks/useSidePanel";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
 import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
-import { useCollectionRegistryController, useUrlController } from "../index";
-import { useNavigationStateController } from "../index";
-import { useAuthController, useBridgeRegistration } from "@rebasepro/core";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
+import { useAuthController, useBridgeRegistration, NavigationBlockerProvider } from "@rebasepro/app";
 
 /**
  * Provider that builds the SidePanelController and makes it available
- * via the SidePanelControllerContext from @rebasepro/core.
+ * via the SidePanelControllerContext from @rebasepro/app.
  *
  * After the CMS extraction refactor, `useBuildSidePanel` lives
  * in the CMS package while the context it feeds into lives in core.
@@ -54,14 +55,16 @@ export function SidePanelProvider({ children }: { children: React.ReactNode }) {
     );
 
     return (
-        <BreadcrumbsProvider>
-            <SideDialogsControllerContext.Provider value={sideDialogsController}>
-                <SidePanelControllerContext.Provider value={sidePanelController}>
-                    <BridgeAutoRegistrar sidePanelController={sidePanelController}/>
-                    {children}
-                </SidePanelControllerContext.Provider>
-            </SideDialogsControllerContext.Provider>
-        </BreadcrumbsProvider>
+        <NavigationBlockerProvider>
+            <BreadcrumbsProvider>
+                <SideDialogsControllerContext.Provider value={sideDialogsController}>
+                    <SidePanelControllerContext.Provider value={sidePanelController}>
+                        <BridgeAutoRegistrar sidePanelController={sidePanelController}/>
+                        {children}
+                    </SidePanelControllerContext.Provider>
+                </SideDialogsControllerContext.Provider>
+            </BreadcrumbsProvider>
+        </NavigationBlockerProvider>
     );
 }
 

package/src/components/UserSelector.tsx

@@ -21,7 +21,7 @@ import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { User } from "@rebasepro/types";
-import { useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/core";
+import { useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/app";
 import { EmptyValue } from "../preview";
 
 interface UserSelectorItem {

package/src/components/admin/CreationResultDialog.tsx

@@ -13,7 +13,7 @@ import {
     Tooltip,
     Typography
 } from "@rebasepro/ui";
-import { useSnackbarController, useTranslation } from "@rebasepro/core";
+import { useSnackbarController, useTranslation } from "@rebasepro/app";
 import { UserCreationResult } from "@rebasepro/types";
 
 export function CreationResultDialog({
@@ -90,8 +90,11 @@ export function CreationResultDialog({
                     <div className="flex flex-col gap-4 py-2">
                         <Alert color="warning">
                             <Typography variant="body2">
-                                {t("temporary_password_description") ??
-                                    "Email is not configured. Share this temporary password with the user securely. It will not be shown again."}
+                                {result.emailDeliveryFailed
+                                    ? (t("temporary_password_email_failed_description") ??
+                                        "The email could not be delivered. Share this temporary password with the user securely. It will not be shown again.")
+                                    : (t("temporary_password_description") ??
+                                        "Email is not configured. Share this temporary password with the user securely. It will not be shown again.")}
                             </Typography>
                         </Alert>
 

package/src/components/app/Scaffold.tsx

@@ -3,7 +3,7 @@ import { cls, defaultBorderMixin, IconButton, Sheet, Tooltip } from "@rebasepro/
 import { ChevronLeftIcon, ErrorBoundary, MenuIcon } from "@rebasepro/ui";
 import { deepEqual as equal } from "fast-equals"
 
-import { useLargeLayout, useAdminModeController, useTranslation } from "@rebasepro/core";
+import { useLargeLayout, useAdminModeController, useTranslation } from "@rebasepro/app";
 import { AppContext } from "./useApp";
 
 export const DRAWER_WIDTH = 280;
@@ -141,8 +141,12 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
                         <div
                             className={cls(defaultBorderMixin, "bg-surface-50 dark:bg-surface-800", "grow overflow-auto m-0", {
-                                "lg:mt-4": !hasAppBar,
                                 "mt-1 lg:m-0 lg:mx-2 lg:mb-2 lg:rounded-lg lg:border-t lg:border-x lg:border-solid": padding,
+                                // No app bar means no DrawerHeader spacer above, so inset the
+                                // panel by the same amount as its sides and bottom.
+                                // Must come after the padding classes, which reset lg margins.
+                                "lg:mt-2": !hasAppBar && padding,
+                                "lg:mt-4": !hasAppBar && !padding,
                                 "border-t": hasAppBar && !padding
                             })}>