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

package/src/index.ts

@@ -46,7 +46,7 @@ export {
     DrawerFooterActions,
     AdminModeSyncer,
     // ContentHomePage is lazy-loaded — not re-exported here
-    RebaseCMS,
+    RebaseAdmin,
     RebaseShell,
     RebaseAuthGate,
     RebaseNavigation,
@@ -77,7 +77,7 @@ export {
     mergeEntityActions,
     resolveEntityAction,
     resolveEntityView,
-    // Property utilities (moved from @rebasepro/core — property-aware logic belongs in CMS)
+    // Property utilities (moved from @rebasepro/app — property-aware logic belongs in CMS)
     isReferenceProperty,
     isRelationProperty,
     getIconForWidget,
@@ -87,7 +87,7 @@ export {
     getBracketNotation,
     getPropertiesWithPropertiesOrder,
     getDefaultPropertiesOrder,
-    // Preview utilities (moved from @rebasepro/core — property-aware logic belongs in CMS)
+    // Preview utilities (moved from @rebasepro/app — property-aware logic belongs in CMS)
     getEntityPreviewKeys,
     getEntityTitlePropertyKey
 } from "./util";

package/src/preview/PropertyPreview.tsx

@@ -5,7 +5,7 @@ import { deepEqual as equal } from "fast-equals"
 import { EntityReference, EntityRelation } from "@rebasepro/types";
 import type { PropertyPreviewProps } from "../types/components/PropertyPreviewProps";
 import { resolveProperty, normalizeToEntityRelation } from "@rebasepro/common";
-import { useAuthController, useCustomizationController, resolveComponentRef } from "@rebasepro/core";
+import { useAuthController, useCustomizationController, resolveComponentRef } from "@rebasepro/app";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
@@ -23,7 +23,7 @@ import { ReferencePreview } from "./components/ReferencePreview";
 import { DatePreview } from "./components/DatePreview";
 import { BooleanPreview } from "./components/BooleanPreview";
 import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
-import { ErrorView } from "@rebasepro/core";
+import { ErrorView } from "@rebasepro/app";
 import { RelationPreview } from "./components/RelationPreview";
 import { UserPreview } from "./components/UserPreview";
 

package/src/preview/components/DatePreview.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { format } from "date-fns";
 import * as locales from "date-fns/locale";
-import { useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 import { defaultDateFormat } from "@rebasepro/utils";
 
 export interface DatePreviewProps {

package/src/preview/components/EnumValuesChip.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Chip } from "@rebasepro/ui";
 import { EnumValues } from "@rebasepro/types";
 import { enumToObjectEntries, getLabelOrConfigFrom } from "@rebasepro/common";
-import { buildEnumLabel, getColorScheme } from "@rebasepro/core";
+import { buildEnumLabel, getColorScheme } from "@rebasepro/app";
 
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;

package/src/preview/components/ImagePreview.tsx

@@ -2,8 +2,8 @@ import { CopyIcon, ExternalLinkIcon, ImageOffIcon } from "@rebasepro/ui";
 import React, { CSSProperties, useMemo, useState, useEffect } from "react";import { IconButton, Tooltip } from "@rebasepro/ui";
 import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { getThumbnailMeasure } from "../util";
-import { useTranslation } from "@rebasepro/core";
-import { sanitizeUrl } from "./UrlComponentPreview";
+import { useTranslation } from "@rebasepro/app";
+import { sanitizeUrl } from "../util";
 
 /**
  * @group Preview components

package/src/preview/components/ReferencePreview.tsx

@@ -3,12 +3,12 @@ import * as React from "react";
 
 import { Entity, EntityReference } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useCustomizationController, useFetch, useComponentOverride, CollectionScopeProvider } from "@rebasepro/core";
+import { useCustomizationController, useFetch, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 import { Skeleton } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";
-import { ErrorView } from "@rebasepro/core";
+import { ErrorView } from "@rebasepro/app";
 import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
-import { useCollectionRegistryController } from "../../index";
+import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
 import { getEntityTitlePropertyKey } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 

package/src/preview/components/RelationPreview.tsx

@@ -3,10 +3,10 @@ import * as React from "react";
 
 import { Entity, EntityRelation } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useCustomizationController, useFetch, ErrorView, useComponentOverride, CollectionScopeProvider } from "@rebasepro/core";
+import { useCustomizationController, useFetch, ErrorView, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 import { Skeleton } from "@rebasepro/ui";
-import { EntityPreviewBinding, EntityPreviewContainer } from "../../components";
-import { useCollectionRegistryController } from "../../index";
+import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
+import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
 import { getEntityTitlePropertyKey } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 

package/src/preview/components/StorageThumbnail.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 
 import { renderSkeletonImageThumbnail } from "../property_previews/SkeletonPropertyComponent";
 import { UrlComponentPreview } from "./UrlComponentPreview";
-import { ErrorView, useStorageSource, useStorageSources } from "@rebasepro/core";
+import { ErrorView, useStorageSource, useStorageSources } from "@rebasepro/app";
 import { resolveStorageSource } from "@rebasepro/common";
 import { DownloadConfig, FileType } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";

package/src/preview/components/UrlComponentPreview.tsx

@@ -5,16 +5,9 @@ import { PreviewType } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { cls, ExternalLinkIcon, FileTextIcon, Tooltip, Typography } from "@rebasepro/ui";
 import { EmptyValue } from "./EmptyValue";
-import { getThumbnailMeasure } from "../util";
+import { getThumbnailMeasure, sanitizeUrl } from "../util";
 
-export function sanitizeUrl(url: string | undefined): string {
-    if (!url) return "about:blank";
-    const trimmed = url.trim();
-    if (/^(?:javascript|data|vbscript):/i.test(trimmed)) {
-        return "about:blank";
-    }
-    return trimmed;
-}
+export { sanitizeUrl };
 
 /**
  * @group Preview components

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -2,7 +2,7 @@ import type { ArrayProperty, Property } from "@rebasepro/types";
 import React from "react";
 
 import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { PropertyPreview } from "../PropertyPreview";
 import { ErrorBoundary } from "@rebasepro/ui";
 

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -1,7 +1,7 @@
 import type { ArrayProperty, StringProperty } from "@rebasepro/types";
 import React from "react";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import { StringPropertyPreview } from "../../preview";
+import { StringPropertyPreview } from "./StringPropertyPreview";
 import { ErrorBoundary } from "@rebasepro/ui";
 
 /**

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -1,7 +1,7 @@
 import type { ArrayProperty, Property } from "@rebasepro/types";
 import React from "react";
 import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -2,7 +2,7 @@ import type { ArrayProperty, Property } from "@rebasepro/types";
 import React from "react";
 
 import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin } from "@rebasepro/ui";
 import { ErrorBoundary } from "@rebasepro/ui";

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -1,7 +1,7 @@
 import type { NumberProperty } from "@rebasepro/types";
 import React from "react";
 
-import { EnumValuesChip } from "../../preview";
+import { EnumValuesChip } from "../components/EnumValuesChip";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
 import { enumToObjectEntries } from "@rebasepro/common";
 

package/src/preview/util.ts

@@ -1,5 +1,14 @@
 import { CollectionSize } from "@rebasepro/types";
 import type { PreviewSize } from "../types/components/PropertyPreviewProps";
+export function sanitizeUrl(url: string | undefined): string {
+    if (!url) return "about:blank";
+    const trimmed = url.trim();
+    if (/^(?:javascript|data|vbscript):/i.test(trimmed)) {
+        return "about:blank";
+    }
+    return trimmed;
+}
+
 export const SMALL_THUMBNAIL = 40;
 export const MEDIUM_THUMBNAIL = 100;
 export const LARGE_THUMBNAIL = 200;

package/src/routes/CustomViewRoute.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import type { AppView } from "@rebasepro/types";
-import { useBreadcrumbsController, useUrlController } from "../index";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 
 export function CustomViewRoute({ view }: {
     view: AppView

package/src/routes/RebaseRoute.tsx

@@ -1,17 +1,19 @@
 import type { CollectionConfig, ViewMode } from "@rebasepro/types";
-import { Blocker, useBlocker, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { EditViewBinding } from "../components/EditViewBinding";
 import { DetailViewBinding } from "../components/DetailViewBinding";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { CollectionViewBinding } from "../components";
-import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride } from "@rebasepro/core";
-import { UnsavedChangesDialog } from "@rebasepro/core";
+import { CollectionViewBinding } from "../components/CollectionViewBinding/CollectionViewBinding";
+import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride, useNavigationBlocker } from "@rebasepro/app";
+import { resolveOpenEntityMode, resolveViewMode } from "../util/view_mode";
+import { UnsavedChangesDialog } from "@rebasepro/app";
 import { CircularProgressCenter } from "@rebasepro/ui";
 import { getNavigationEntriesFromPath, NavigationViewCollectionInternal, NavigationViewEntityCustomInternal, NavigationViewInternal } from "@rebasepro/common";
 import { toArray } from "@rebasepro/utils";
-import { useCollectionRegistryController, useUrlController } from "../index";
-import { useBreadcrumbsController } from "../index";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 export function RebaseRoute() {
 
@@ -145,23 +147,16 @@ export function RebaseRoute() {
         if (!collection)
             collection = collectionRegistry.getCollection(firstCollectionEntry.slug);
 
-        // Resolve the effective openEntityMode based on the current view mode.
-        // Priority: collection.openEntityMode (explicit) > view-mode-based default.
-        // View mode priority: URL __view param > saved user config > collection default.
-        let effectiveOpenMode: "side_panel" | "full_screen" | "split" | "dialog" | undefined = collection?.openEntityMode;
-        if (!effectiveOpenMode && collection) {
-            const urlViewParam = new URLSearchParams(location.search).get("__view");
-            let currentViewMode: ViewMode = collection.defaultViewMode ?? "list";
-            if (urlViewParam && ["list", "table", "kanban", "cards"].includes(urlViewParam)) {
-                currentViewMode = urlViewParam as ViewMode;
-            } else {
-                const savedView = userConfigPersistence?.getCollectionConfig(collection.slug)?.defaultViewMode;
-                if (savedView) currentViewMode = savedView as ViewMode;
-            }
-            if (currentViewMode === "kanban") effectiveOpenMode = "side_panel";
-            else if (currentViewMode === "table" || currentViewMode === "cards") effectiveOpenMode = "full_screen";
-            else effectiveOpenMode = "split";
-        }
+        const effectiveOpenMode = collection
+            ? resolveOpenEntityMode({
+                collection,
+                viewMode: resolveViewMode({
+                    collection,
+                    search: location.search,
+                    savedViewMode: userConfigPersistence?.getCollectionConfig(collection.slug)?.defaultViewMode as ViewMode | undefined
+                })
+            })
+            : undefined;
         if (collection && effectiveOpenMode === "split") {
             // Extract subcollection tab from the 3rd entry if present
             let selectedTab: string | undefined;
@@ -292,7 +287,7 @@ function EntityFullScreenRoute({
 
     const entityPath = basePath + `/${entityId}`;
 
-    const blocker = useBlocker(({
+    const blocker = useNavigationBlocker(useCallback(({
         currentLocation,
         nextLocation
     }) => {
@@ -315,7 +310,7 @@ function EntityFullScreenRoute({
             return false;
 
         return blocked.current;
-    });
+    }, [entityPath, basePath]));
 
     const lastCollectionEntry = [...navigationEntries].reverse().find((entry) => entry.type === "collection");
 

package/src/types/components/formex.tsx

@@ -1,2 +1,2 @@
-export type { FormexController, FormexResetProps } from "@rebasepro/formex";
+export type { FormexController, FormexResetProps } from "@rebasepro/forms";
 

package/src/util/navigation_utils.ts

@@ -1,4 +1,5 @@
 import type { CollectionConfig, UrlController, SidePanelController, NavigateOptions } from "@rebasepro/types";
+import { withViewMode } from "./view_mode";
 
 // Canonical path utilities — single source of truth in @rebasepro/common
 export {
@@ -71,11 +72,7 @@ export function navigateToEntity({
         if (entityId && selectedTab) {
             to += `/${selectedTab}`;
         }
-        // Preserve the __view query param so the target route knows the current view mode
-        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-        if (currentViewParam) {
-            to += `${to.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-        }
+        to = withViewMode(to);
         if (!entityId) {
             to += "#new";
         }

package/src/util/previews.ts

@@ -66,7 +66,9 @@ export function getEntityTitlePropertyKey<M extends Record<string, unknown>>(col
     const hasExplicitOrder = !!(collection.propertiesOrder as string[] | undefined);
     const orderToSearch = (collection.propertiesOrder as string[]) || Object.keys(collection.properties);
 
-    // If explicit propertiesOrder is set, allow the first non-ID relation or string to be the titleKey
+    // If explicit propertiesOrder is set, allow the first non-ID relation or string to be the titleKey.
+    // Storage/image properties are excluded — they are rendered by the dedicated image slot,
+    // so using one here would duplicate the same image in both the image and title slots.
     if (hasExplicitOrder) {
         for (const key of orderToSearch) {
             const property = collection.properties[key];
@@ -76,7 +78,7 @@ export function getEntityTitlePropertyKey<M extends Record<string, unknown>>(col
                 if (isIdProp || key === "id" || isHiddenProperty(prop)) {
                     continue;
                 }
-                if (prop.type === "relation" || prop.type === "string") {
+                if (prop.type === "relation" || (prop.type === "string" && !isStorageProperty(prop))) {
                     return key;
                 }
             }

package/src/util/view_mode.ts

@@ -0,0 +1,102 @@
+import type { CollectionConfig, ViewMode } from "@rebasepro/types";
+
+/**
+ * Query param that carries the active collection view mode across navigations.
+ */
+export const VIEW_MODE_PARAM = "__view";
+
+export const VIEW_MODES: ViewMode[] = ["list", "table", "cards", "kanban"];
+
+export const DEFAULT_VIEW_MODE: ViewMode = "list";
+
+export type OpenEntityMode = "side_panel" | "full_screen" | "split" | "dialog";
+
+export const DEFAULT_OPEN_ENTITY_MODE: OpenEntityMode = "split";
+
+export function isViewMode(value: string | null | undefined): value is ViewMode {
+    return Boolean(value) && VIEW_MODES.includes(value as ViewMode);
+}
+
+/**
+ * Read the active view mode from a query string, if it holds a valid one.
+ *
+ * @param search a query string (e.g. `location.search`). Falls back to the
+ *        current browser location when omitted.
+ */
+export function getViewModeFromSearch(search?: string): ViewMode | null {
+    const source = search ?? (typeof window !== "undefined" ? window.location.search : "");
+    const value = new URLSearchParams(source).get(VIEW_MODE_PARAM);
+    return isViewMode(value) ? value : null;
+}
+
+/**
+ * Append the active view mode to a URL so the target route keeps rendering the
+ * view the user was last looking at.
+ *
+ * Every entity/collection navigation must go through this — a missed call site
+ * silently resets the user's view mode mid-session.
+ *
+ * @param url the URL to decorate. May already contain a query string and/or hash.
+ * @param search query string to read the view mode from. Defaults to the
+ *        current browser location.
+ */
+export function withViewMode(url: string, search?: string): string {
+    const viewMode = getViewModeFromSearch(search);
+    if (!viewMode) return url;
+
+    // Preserve any hash — the param belongs to the query, which precedes it.
+    const hashIndex = url.indexOf("#");
+    const hash = hashIndex >= 0 ? url.substring(hashIndex) : "";
+    const base = hashIndex >= 0 ? url.substring(0, hashIndex) : url;
+
+    if (new URLSearchParams(base.split("?")[1] ?? "").has(VIEW_MODE_PARAM)) {
+        return url;
+    }
+
+    const separator = base.includes("?") ? "&" : "?";
+    return `${base}${separator}${VIEW_MODE_PARAM}=${viewMode}${hash}`;
+}
+
+/**
+ * Resolve the view mode for a collection, honouring the documented priority:
+ * URL param > saved user config > collection default.
+ */
+export function resolveViewMode({
+    collection,
+    search,
+    savedViewMode
+}: {
+    collection?: Pick<CollectionConfig<any>, "defaultViewMode">;
+    search?: string;
+    savedViewMode?: ViewMode | null;
+}): ViewMode {
+    const fromUrl = getViewModeFromSearch(search);
+    if (fromUrl) return fromUrl;
+    if (isViewMode(savedViewMode)) return savedViewMode;
+    return collection?.defaultViewMode ?? DEFAULT_VIEW_MODE;
+}
+
+/**
+ * Resolve how clicking an entity should present it.
+ *
+ * An explicit `collection.openEntityMode` always wins. Otherwise the mode is
+ * derived from the active view mode, so the presentation suits the surface the
+ * user is looking at: a board keeps its columns behind an overlay, a wide table
+ * hands the entity the full width, and list/card views use master-detail.
+ *
+ * This is the single source of truth — row clicks, find-by-id and the router
+ * must all resolve through it, otherwise the same entity opens differently
+ * depending on how it was reached.
+ */
+export function resolveOpenEntityMode({
+    collection,
+    viewMode
+}: {
+    collection?: Pick<CollectionConfig<any>, "openEntityMode">;
+    viewMode?: ViewMode;
+}): OpenEntityMode {
+    if (collection?.openEntityMode) return collection.openEntityMode;
+    if (viewMode === "kanban") return "side_panel";
+    if (viewMode === "table" || viewMode === "cards") return "full_screen";
+    return DEFAULT_OPEN_ENTITY_MODE;
+}