@rebasepro/admin 0.9.1-canary.fd3754b → 0.10.0

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -10,7 +10,9 @@ import { FiltersDialog } from "./FiltersDialog";
 import { FilterPresetsButton } from "./FilterPresetsButton";
 import { toArray } from "@rebasepro/utils";
 import { useNavigate } from "react-router-dom";
-import { useUrlController, useCMSContext } from "../../index";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
+import { useCMSContext } from "../../hooks/useCMSContext";
+import { withViewMode } from "../../util/view_mode";
 
 export type CollectionViewStartActionsProps<M extends Record<string, unknown>> = {
     collection: CollectionConfig<M>;
@@ -72,13 +74,7 @@ parentEntityIds,
     };
 
     const handleBackClick = useCallback(() => {
-        let collectionUrl = urlController.buildUrlCollectionPath(path);
-        // Preserve the __view query param so the view mode is retained
-        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-        if (currentViewParam) {
-            collectionUrl += `${collectionUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-        }
-        navigate(collectionUrl);
+        navigate(withViewMode(urlController.buildUrlCollectionPath(path)));
     }, [navigate, urlController, path]);
 
     const backButton = compact && (

package/src/components/CollectionViewBinding/FiltersDialog.tsx

@@ -8,6 +8,24 @@ import { resolveFilterOperators } from "@rebasepro/common";
 import { useCollectionScope, useTranslation } from "@rebasepro/app";
 import { FilterFieldBinding } from "../SelectableTable/filters/FilterFieldBinding";
 
+/**
+ * `WhereFilterOp` is declared twice: once in `@rebasepro/types` as the canonical
+ * operator set every driver translates, and once in `@rebasepro/ui` for the
+ * table's own props. That is deliberate — `ui` is a standalone design system and
+ * depends on no Rebase package, so it cannot import the canonical one (and a
+ * type-only import would not help: `ui` emits declarations with `tsc`, which
+ * references external types rather than inlining them, so its published `.d.ts`
+ * would demand `@rebasepro/types` from every consumer).
+ *
+ * This file is where the two meet and get cast into each other, so it is where
+ * their agreement is checked. Adding an operator to one and not the other stops
+ * this line compiling instead of silently producing a filter the table can build
+ * and no driver can run — or one a driver supports and the table cannot offer.
+ */
+type MutuallyAssignable<A, B> = [A] extends [B] ? ([B] extends [A] ? true : never) : never;
+const _whereFilterOpDefinitionsAgree: MutuallyAssignable<WhereFilterOp, VirtualTableWhereFilterOp> = true;
+void _whereFilterOpDefinitionsAgree;
+
 export interface FiltersDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;

package/src/components/CollectionViewBinding/SplitListView.tsx

@@ -8,11 +8,12 @@ import {
     defaultBorderMixin,
     ResizablePanels
 } from "@rebasepro/ui";
-import { useLargeLayout } from "@rebasepro/app";
-import { useCollectionRegistryController } from "../../index";
+import { useLargeLayout, UnsavedChangesDialog, useNavigationBlocker } from "@rebasepro/app";
+import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
 import { useNavigate, useLocation } from "react-router-dom";
-import { useUrlController } from "../../index";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 import { ErrorBoundary } from "@rebasepro/ui";
+import { withViewMode } from "../../util/view_mode";
 
 export type SplitListViewProps<M extends Record<string, unknown> = Record<string, unknown>> = {
     collection: CollectionConfig<M>;
@@ -55,6 +56,27 @@ export type SplitListViewProps<M extends Record<string, unknown> = Record<string
 
 const PANEL_SIZE_KEY = "rebase_split_list_panel_size";
 
+/**
+ * Whether the element accepts text, and therefore owns the keystroke.
+ * Covers native fields plus the ARIA roles custom editors expose.
+ */
+function isTextEntryTarget(target: HTMLElement | null): boolean {
+    if (!target) return false;
+    const tag = target.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+    if (target.isContentEditable) return true;
+    return Boolean(target.closest('[contenteditable="true"], [role="textbox"], [role="combobox"], [role="searchbox"]'));
+}
+
+/**
+ * Whether a bare letter shortcut may act on this target. Only the list side of
+ * the split owns them — inside the detail panel a keystroke belongs to the form.
+ */
+function isListShortcutTarget(target: HTMLElement | null, detailPanel: HTMLElement | null): boolean {
+    if (!target || target === document.body) return true;
+    return !detailPanel?.contains(target);
+}
+
 function getSavedPanelSize(path: string): number {
     try {
         const saved = localStorage.getItem(`${PANEL_SIZE_KEY}_${path}`);
@@ -115,6 +137,37 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
 
     const showDetail = selectedEntityId !== undefined;
 
+    // ── Unsaved changes ──
+    // The detail form lives inside the split layout, so every way out of it
+    // (Escape, j/k, clicking another row, the browser back button) is a plain
+    // router navigation. A ref — not state — because the blocker predicate must
+    // observe the change synchronously, before the navigation it is guarding.
+    const dirty = useRef(false);
+    const detailPanelRef = useRef<HTMLDivElement>(null);
+    const setDirty = useCallback((modified: boolean) => {
+        dirty.current = modified;
+    }, []);
+
+    // The form remounts per entity, so its dirty state must not leak into the next one.
+    useEffect(() => {
+        dirty.current = false;
+    }, [selectedEntityId]);
+
+    const blocker = useNavigationBlocker(useCallback(({
+        currentLocation,
+        nextLocation
+    }) => {
+        if (!dirty.current) return false;
+        if (currentLocation.pathname === nextLocation.pathname) return false;
+        // Side panel overlays (e.g. following a relation) render above the form
+        // and leave it mounted — nothing is lost in either direction.
+        const nextHash = nextLocation.hash;
+        if (nextHash === "#side" || nextHash === "#new_side") return false;
+        const currentHash = currentLocation.hash;
+        if (currentHash === "#side" || currentHash === "#new_side") return false;
+        return true;
+    }, []));
+
     // Panel size state with persistence
     const [panelSize, setPanelSize] = useState(() => getSavedPanelSize(path));
 
@@ -170,16 +223,15 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
         };
     }, [selectedEntityId]); // Intentionally only depend on selectedEntityId
 
+    // Build a URL below this collection, preserving the active view mode.
+    const buildUrl = useCallback((subPath: string) => {
+        return withViewMode(urlController.buildUrlCollectionPath(subPath));
+    }, [urlController]);
+
     // Close the detail panel: navigate back to the collection path
     const handleCloseDetail = useCallback(() => {
-        let collectionUrl = urlController.buildUrlCollectionPath(path);
-        // Preserve the __view query param so the view mode is retained
-        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-        if (currentViewParam) {
-            collectionUrl += `${collectionUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-        }
-        navigate(collectionUrl);
-    }, [navigate, urlController, path]);
+        navigate(buildUrl(path));
+    }, [navigate, buildUrl, path]);
 
     // ── Keyboard navigation ──
     const entityIds = useMemo(
@@ -189,23 +241,33 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
 
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
-            // Don't intercept when user is typing in an input/textarea
-            const tag = (e.target as HTMLElement)?.tagName;
-            if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || (e.target as HTMLElement)?.isContentEditable) {
-                // Only intercept Escape when inside the detail panel
-                if (e.key === "Escape" && selectedEntityId) {
-                    handleCloseDetail();
+            const target = e.target as HTMLElement | null;
+
+            // Radix overlays own the keyboard while they are open — including Escape.
+            if (document.querySelector('[role="dialog"][data-state="open"]')) return;
+
+            if (e.key === "Escape") {
+                if (!selectedEntityId) return;
+                // First Escape leaves the field (which may also be dismissing its
+                // own dropdown), a second one closes the panel. Closing straight
+                // from a focused field would discard an in-progress edit.
+                if (isTextEntryTarget(target)) {
+                    target?.blur();
                     e.preventDefault();
+                    return;
                 }
-                return;
-            }
-
-            if (e.key === "Escape" && selectedEntityId) {
                 handleCloseDetail();
                 e.preventDefault();
                 return;
             }
 
+            // Record navigation only belongs to the list side. Inside the detail
+            // panel these keys are the form's — arrows move between fields, and a
+            // bare letter is input for widgets that aren't native fields (rich
+            // text, code editors, comboboxes).
+            if (!isListShortcutTarget(target, detailPanelRef.current)) return;
+            if (isTextEntryTarget(target)) return;
+
             // Arrow down / j → next entity
             if ((e.key === "ArrowDown" || e.key === "j") && !e.metaKey && !e.ctrlKey) {
                 e.preventDefault();
@@ -282,6 +344,7 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
 
     const detailPanel = renderedEntityId !== undefined ? (
         <div
+            ref={detailPanelRef}
             className={cls(
                 "flex-1 flex flex-col min-w-0 h-full transition-all ease-out w-full",
                 animationPhase === "entered"
@@ -302,25 +365,15 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                         selectedTab={selectedTab}
                         layout="split"
                         onEditClick={() => {
-                            let entityUrl = urlController.buildUrlCollectionPath(`${path}/${renderedEntityId}/edit`);
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl);
+                            navigate(buildUrl(`${path}/${renderedEntityId}/edit`));
                         }}
                         onTabChange={(params) => {
                             const newSelectedTab = params.selectedTab;
-                            let entityUrl = urlController.buildUrlCollectionPath(
+                            navigate(buildUrl(
                                 newSelectedTab
                                     ? `${path}/${renderedEntityId}/${newSelectedTab}`
                                     : `${path}/${renderedEntityId}`
-                            );
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl);
+                            ));
                         }}
                     />
                     : <EditViewBinding
@@ -332,34 +385,21 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
                         parentEntityIds={usedParentEntityIds}
                         selectedTab={selectedTab}
                         layout="split"
-                        onSaved={(params) => {
-                            let entityUrl = urlController.buildUrlCollectionPath(`${path}/${renderedEntityId}`);
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl, { replace: true });
+                        onValuesModified={setDirty}
+                        onSaved={() => {
+                            setDirty(false);
+                            navigate(buildUrl(`${path}/${renderedEntityId}`), { replace: true });
                         }}
                         navigateBack={() => {
-                            let entityUrl = urlController.buildUrlCollectionPath(`${path}/${renderedEntityId}`);
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl);
+                            navigate(buildUrl(`${path}/${renderedEntityId}`));
                         }}
                         onTabChange={(params) => {
                             const newSelectedTab = params.selectedTab;
-                            let entityUrl = urlController.buildUrlCollectionPath(
+                            navigate(buildUrl(
                                 newSelectedTab
                                     ? `${path}/${renderedEntityId}/${newSelectedTab}`
                                     : `${path}/${renderedEntityId}`
-                            );
-                            const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-                            if (currentViewParam) {
-                                entityUrl += `${entityUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-                            }
-                            navigate(entityUrl);
+                            ));
                         }}
                     />
                 }
@@ -368,14 +408,25 @@ export function SplitListView<M extends Record<string, unknown> = Record<string,
     ) : <></>;
 
     return (
-        <ResizablePanels
-            stacked={!largeLayout}
-            firstPanel={listPanel}
-            secondPanel={detailPanel}
-            showSecondPanel={isDetailVisible}
-            panelSizePercent={animationPhase === "entering" ? 100 : panelSize}
-            onPanelSizeChange={setPanelSize}
-            minPanelSizePx={240}
-        />
+        <>
+            <ResizablePanels
+                stacked={!largeLayout}
+                firstPanel={listPanel}
+                secondPanel={detailPanel}
+                showSecondPanel={isDetailVisible}
+                panelSizePercent={animationPhase === "entering" ? 100 : panelSize}
+                onPanelSizeChange={setPanelSize}
+                minPanelSizePx={240}
+            />
+
+            <UnsavedChangesDialog
+                open={blocker?.state === "blocked"}
+                handleOk={() => {
+                    dirty.current = false;
+                    blocker?.proceed?.();
+                }}
+                handleCancel={() => blocker?.reset?.()}
+                body={<>You have unsaved changes in this <b>{collection.singularName ?? collection.name}</b>.</>}/>
+        </>
     );
 }

package/src/components/CollectionViewBinding/useBoardDataController.tsx

@@ -1,7 +1,7 @@
 import type { CollectionConfig } from "@rebasepro/types";
 import { Entity, FilterValues } from "@rebasepro/types";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useData, useRebaseContext } from "@rebasepro/app";
+import { getRelationIncludeParams, useData, useRebaseContext } from "@rebasepro/app";
 
 const DEFAULT_PAGE_SIZE = 20;
 
@@ -410,18 +410,24 @@ values: { ...e.values,
 
         // Set up listener or fetch
         const accessor = currentDataClient.collection(currentResolvedPath);
+
+        // Eagerly include relations to avoid N+1 fetches.
+        const includeParams = getRelationIncludeParams(currentCollection);
+
         if (accessor.listen) {
             const unsubscribe = accessor.listen({
                 where: whereFilter,
                 limit: itemCount,
-                orderBy: orderByParam
+                orderBy: orderByParam,
+                include: includeParams
             }, res => onUpdate(res.data as Entity<M>[]), onError);
             unsubscribersRef.current[column] = unsubscribe;
         } else {
             accessor.find({
                 where: whereFilter,
                 limit: itemCount,
-                orderBy: orderByParam
+                orderBy: orderByParam,
+                include: includeParams
             })
                 .then(res => onUpdate(res.data as Entity<M>[]))
                 .catch(onError);

package/src/components/DetailViewBinding.tsx

@@ -5,7 +5,8 @@ import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useStat
 import { Entity, EntityStatus, getCollectionDataPath, Property } from "@rebasepro/types";
 import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 
-import { CollectionViewBinding, EntityViewBinding } from "../components";
+import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBinding";
+import { EntityViewBinding } from "./EntityViewBinding";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     Alert,
@@ -39,7 +40,8 @@ import {
     useLargeLayout,
     useSlot
 } from "@rebasepro/app";
-import { useUrlController, useCollectionRegistryController } from "../index";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useNavigate } from "react-router-dom";
 import { getValueInPath } from "@rebasepro/utils";
 import { getEntityTitlePropertyKey, resolveTitleToString } from "../util/previews";

package/src/components/EditFormActions.tsx

@@ -5,7 +5,7 @@ import type { EntityAction, EntityActionClickProps, SidePanelController } from "
 import React, { useMemo } from "react";
 import { Entity, getCollectionDataPath, RebaseContext } from "@rebasepro/types";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
-import { copyEntityAction, deleteEntityAction } from "../components";
+import { copyEntityAction, deleteEntityAction } from "./common/default_entity_actions";
 import { mergeEntityActions } from "../util/entity_actions";
 import { resolveEntityAction } from "../util/resolutions";
 import { Button, CircularProgress, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Tooltip, Typography } from "@rebasepro/ui";
@@ -19,7 +19,7 @@ import { SideDialogController, useSideDialogContext } from "./SideDialogs";
 import { FormexController } from "@rebasepro/forms";
 import { ErrorTooltip } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
-import { useCMSContext } from "../index";
+import { useCMSContext } from "../hooks/useCMSContext";
 
 export function EditFormActions({
     collection,

package/src/components/EditViewBinding.tsx

@@ -5,7 +5,8 @@ import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useStat
 import { Entity, EntityStatus, getCollectionDataPath } from "@rebasepro/types";
 import { PluginProviderStack, resolveComponentRef, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 
-import { CollectionViewBinding, EntityViewBinding } from "../components";
+import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBinding";
+import { EntityViewBinding } from "./EntityViewBinding";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     CenteredView,
@@ -48,7 +49,7 @@ import { JsonPreviewBinding } from "../components/JsonPreviewBinding";
 const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
 import { createFormexStub, getEntityFromCache } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
-import { useUrlController } from "../index";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useNavigate } from "react-router-dom";
 
 import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";

package/src/components/EntityPreviewBinding.tsx

@@ -27,7 +27,8 @@ import { IconForView } from "@rebasepro/app";
 import { getPropertyInPath } from "../util/property_utils";
 import { getEntityPreviewKeys, getEntityTitlePropertyKey } from "../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
-import { useCollectionRegistryController, useSidePanel } from "../index";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { useSidePanel } from "../hooks/useSidePanel";
 
 export type EntityPreviewBindingProps = {
     size?: PreviewSize,

package/src/components/HomePage/ContentHomePage.tsx

@@ -23,7 +23,8 @@ import { useCollapsedGroups, buildCollapsedDefaults, useCustomizationController,
 import { useRestoreScroll } from "@rebasepro/app";
 
 import { SchemaDriftBanner } from "@rebasepro/app";
-import { useBreadcrumbsController, useCMSContext } from "../../index";
+import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
+import { useCMSContext } from "../../hooks/useCMSContext";
 
 export const DEFAULT_GROUP_NAME = "Views";
 export const ADMIN_GROUP_NAME = "Admin";

package/src/components/HomePage/FavouritesView.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 ;
 import { Chip, Collapse, StarIcon } from "@rebasepro/ui";
 import { useUserConfigurationPersistence } from "@rebasepro/app";
-import { useNavigationStateController } from "../../index";
+import { useNavigationStateController } from "../../hooks/navigation/contexts/NavigationStateContext";
 
 function NavigationChip({ entry }: { entry: NavigationEntry }) {
 

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,6 +9,7 @@ import {
     useRebaseClient,
     useData,
     useDataSources,
+    CollectionResolverRegistrationContext,
     StudioBridgeRegistryProvider,
     useBridgeRegistration,
     CustomizationControllerContext,
@@ -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,

package/src/components/RebaseRouteDefs.tsx

@@ -18,7 +18,7 @@ import { useNavigationStateController } from "../hooks/navigation/contexts/Navig
 import { CollectionEditorDialogs } from "./CollectionEditorDialogs";
 import { useEffect } from "react";
 import { useTranslation } from "@rebasepro/app";
-import { useBreadcrumbsController } from "../index";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 function SettingsView() {
     const { t } = useTranslation();

package/src/components/ReferenceTable/SelectionTableBinding.tsx

@@ -23,7 +23,8 @@ import { useSelectionController } from "../CollectionViewBinding/useSelectionCon
 import { useColumnIds } from "@rebasepro/app";
 import { useSideDialogContext } from "../SideDialogs";
 import { useAnalyticsController } from "@rebasepro/app";
-import { useUrlController, useSidePanel } from "../../index";
+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/SelectableTable/filters/ReferenceFilterField.tsx

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

package/src/components/SidePanelBinding.tsx

@@ -10,8 +10,9 @@ import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
 import { useNavigate } from "react-router-dom";
 import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/app";
-import { useCollectionRegistryController, useSidePanel } from "../index";
-import { useUrlController } from "../index";
+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