@rebasepro/admin 0.0.1-canary.f81da60 → 0.1.2

package/src/components/app/Scaffold.tsx

@@ -137,7 +137,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                         {hasAppBar && <DrawerHeader/>}
 
                         <div
-                            className={cls(defaultBorderMixin, "bg-white dark:bg-surface-800", "grow overflow-auto m-0", {
+                            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,
                                 "border-t": hasAppBar && !padding
@@ -158,7 +158,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
 const DrawerHeader = () => {
     return (
-        <div className="flex flex-col min-h-16"></div>
+        <div className="flex flex-col min-h-14"></div>
     );
 };
 
@@ -185,7 +185,7 @@ function DrawerWrapper(props: {
 
     const innerDrawer = <div
         className={cls("h-full overflow-hidden", defaultBorderMixin,
-            isFloating ? `absolute top-0 left-0 bottom-0 z-50 bg-surface-50 ${darkBgFloating} shadow-2xl border-r` : `relative bg-surface-50 ${darkBg}`)}
+            isFloating ? `absolute top-0 left-0 bottom-0 z-50 bg-surface-50 ${darkBgFloating} shadow-lg border-r` : `relative bg-surface-50 ${darkBg}`)}
         style={{
             width: visualWidth,
             transition: "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"

package/src/components/field_configs.tsx

@@ -344,10 +344,10 @@ export function getFieldConfig(property: Property, propertyConfigs: Record<strin
 
 export function getDefaultFieldId(property: Property) {
     if (property.type === "string") {
-        if (property.ui?.multiline) {
-            return "multiline";
-        } else if (property.ui?.markdown) {
+        if (property.ui?.markdown) {
             return "markdown";
+        } else if (property.ui?.multiline) {
+            return "multiline";
         } else if (property.storage) {
             return "file_upload";
         } else if (property.ui?.url) {

package/src/form/PropertyFieldBinding.tsx

@@ -1,9 +1,11 @@
 import type { EntityCollection } from "@rebasepro/types";
 import type { FieldProps, PropertyFieldBindingProps } from "../types/fields";
 import type { RebasePlugin, PluginFieldBuilderParams, Property } from "@rebasepro/types";
-import React, { ComponentType, ReactElement, useCallback, useRef } from "react";
+import React, { ComponentType, ReactElement, Suspense, useCallback, useRef } from "react";
 import { deepEqual as equal } from "fast-equals"
 
+import { resolveComponentRef } from "@rebasepro/core";
+
 import { Field, FieldProps as FormexFieldProps, getIn } from "@rebasepro/formex";
 
 ;
@@ -114,8 +116,9 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
                 } else if (readOnly) {
                     Component = ReadOnlyFieldBinding;
                 } else if (resolvedProperty.ui?.Field) {
-                    if (typeof resolvedProperty.ui?.Field === "function") {
-                        Component = resolvedProperty.ui?.Field as ComponentType<FieldProps<any>>;
+                    const resolved = resolveComponentRef(resolvedProperty.ui.Field);
+                    if (resolved) {
+                        Component = resolved as ComponentType<FieldProps<any>>;
                     }
                 } else {
                     const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
@@ -139,7 +142,7 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
                         index,
                         authController
                     }) as Property | null;
-                    Component = configProperty?.ui?.Field as ComponentType<FieldProps> | undefined;
+                    Component = resolveComponentRef(configProperty?.ui?.Field) as ComponentType<FieldProps> | undefined;
                 }
                 if (!Component) {
                     console.warn(`No field component found for property ${propertyKey}`);
@@ -265,8 +268,9 @@ function FieldInternal<CustomProps, M extends Record<string, any>>
 
     return (
         <ErrorBoundary>
-
-            <UsedComponent {...cmsFieldProps}/>
+            <Suspense fallback={null}>
+                <UsedComponent {...cmsFieldProps}/>
+            </Suspense>
 
             {underlyingValueHasChanged && !isSubmitting &&
                 <Typography variant={"caption"} className={"ml-3.5"}>

package/src/hooks/navigation/useResolvedViews.tsx

@@ -21,7 +21,7 @@ import { AuthController, RebaseData, User } from "@rebasepro/types";
 import { UserManagementDelegate } from "@rebasepro/types";
 
 import { resolveAppViews } from "./useNavigationResolution";
-import { NAVIGATION_ADMIN_GROUP_NAME } from "./utils";
+
 
 // Lazy-load admin views — only rendered when navigation reaches /users or /roles
 const UsersView = lazy(() => import("../../components/admin/UsersView").then(m => ({ default: m.UsersView })));
@@ -128,7 +128,6 @@ export function useResolvedViews<USER extends User>(
             views.push({
                 slug: "users",
                 name: "Users",
-                group: NAVIGATION_ADMIN_GROUP_NAME,
                 icon: "Headset",
                 view: usersViewElement
             });
@@ -136,7 +135,6 @@ export function useResolvedViews<USER extends User>(
                 views.push({
                     slug: "roles",
                     name: "Roles",
-                    group: NAVIGATION_ADMIN_GROUP_NAME,
                     icon: "Shield",
                     view: rolesViewElement
                 });

package/src/hooks/navigation/useTopLevelNavigation.ts

@@ -152,7 +152,7 @@ export function useTopLevelNavigation(
                 if (adminView.hideFromNavigation) return acc;
 
                 const pathKey = adminView.slug;
-                let groupName = adminView.group?.trim() || NAVIGATION_ADMIN_GROUP_NAME;
+                let groupName = NAVIGATION_ADMIN_GROUP_NAME;
 
                 if (finalNavigationGroupMappings) {
                     for (const pluginGroupDef of finalNavigationGroupMappings) {

package/src/hooks/navigation/utils.ts

@@ -11,7 +11,7 @@ export function getGroup(collectionOrView: EntityCollection<any, any> | AppView)
     if (!trimmed || trimmed === "") {
         return NAVIGATION_DEFAULT_GROUP_NAME;
     }
-    return trimmed ?? NAVIGATION_DEFAULT_GROUP_NAME;
+    return trimmed;
 }
 
 export function computeNavigationGroups({

package/src/preview/PropertyPreview.tsx

@@ -1,11 +1,11 @@
 import type { ArrayProperty, MapProperty, NumberProperty, Property, StringProperty } from "@rebasepro/types";
-import React, { createElement } from "react";
+import React, { createElement, Suspense } from "react";
 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 } from "@rebasepro/core";
+import { useAuthController, useCustomizationController, resolveComponentRef } from "@rebasepro/core";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
@@ -57,17 +57,21 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
     if (property === null) {
         content = <EmptyValue/>;
     } else if (property.ui?.Preview) {
-        content = createElement(property.ui?.Preview,
-            {
-                propertyKey,
-                value,
-                property,
-                size,
-                height,
-                width,
-                // entity,
-                customProps: property.ui?.customProps
-            });
+        const ResolvedPreview = resolveComponentRef(property.ui.Preview);
+        if (ResolvedPreview) {
+            content = <Suspense fallback={null}>
+                {createElement(ResolvedPreview,
+                    {
+                        propertyKey,
+                        value,
+                        property,
+                        size,
+                        height,
+                        width,
+                        customProps: property.ui?.customProps
+                    })}
+            </Suspense>;
+        }
     } else if (value === undefined || value === null) {
         content = <EmptyValue/>;
     } else if (property.type === "string") {

package/src/routes/RebaseRoute.tsx

@@ -235,6 +235,10 @@ function EntityFullScreenRoute({
     const navigate = useNavigate();
     const location = useLocation();
 
+    // defaultValues may be carried via location.state when openNewDocument() is called
+    // for full-screen mode. We read it once on mount — after that, the form owns its state.
+    const defaultValues = (location.state as { defaultValues?: Record<string, unknown> } | null)?.defaultValues;
+
     // Preserve the current hash (e.g. #full) across tab/save navigations
     const hash = location.hash;
 
@@ -289,10 +293,27 @@ function EntityFullScreenRoute({
     let blocker: Blocker | undefined = undefined;
     try {
         blocker = useBlocker(({
+            currentLocation,
             nextLocation
         }) => {
             if (nextLocation.pathname.startsWith(entityPath))
                 return false;
+
+            // Side panel overlay navigations preserve the underlying form via
+            // base_location in router state — no data is lost in either direction.
+
+            // Opening a side panel (e.g. clicking a relation arrow)
+            const nextHash = nextLocation.hash;
+            if (nextHash === "#side" || nextHash === "#new_side")
+                return false;
+
+            // Closing a side panel (navigate(-1) back to the form's own path)
+            const currentHash = currentLocation.hash;
+            if ((currentHash === "#side" || currentHash === "#new_side") &&
+                (nextLocation.pathname === basePath ||
+                 nextLocation.pathname.startsWith(entityPath)))
+                return false;
+
             return blocked.current;
         });
     } catch (e) {
@@ -330,14 +351,18 @@ function EntityFullScreenRoute({
             path={collectionPath}
             copy={isCopy}
             selectedTab={selectedTab ?? undefined}
+            defaultValues={isNew ? defaultValues : undefined}
             onValuesModified={(modified) => blocked.current = modified}
             onSaved={(params) => {
                 const newSelectedTab = params.selectedTab;
                 const newEntityId = params.entityId;
+                // Clear the hash after saving a new entity — preserving #new
+                // would cause the route to re-parse as "new" and show "not found".
+                const savedHash = isNew ? "" : hash;
                 if (newSelectedTab) {
-                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}${hash}`, { replace: true });
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}${savedHash}`, { replace: true });
                 } else {
-                    navigate(`${basePath}/${newEntityId}${hash}`, { replace: true });
+                    navigate(`${basePath}/${newEntityId}${savedHash}`, { replace: true });
                 }
             }}
             onTabChange={(params) => {

package/src/util/navigation_utils.ts

@@ -23,6 +23,7 @@ export function navigateToEntity({
     copy,
     path,
     selectedTab,
+    defaultValues,
     sideEntityController,
     onClose,
     navigation
@@ -34,6 +35,15 @@ export function navigateToEntity({
         entityId?: string | number;
         selectedTab?: string;
         copy?: boolean;
+        /**
+         * Pre-populate the new entity form with these values.
+         * Only applied when entityId is not set (i.e. "new" mode).
+         *
+         * Side panel: passed through EntitySidePanelProps → EntityEditView.
+         * Full screen: carried via React Router location.state so the route
+         * component can read it on mount without polluting the URL.
+         */
+        defaultValues?: Record<string, unknown>;
         path: string;
         sideEntityController: SideEntityController;
         onClose?: () => void;
@@ -49,7 +59,8 @@ export function navigateToEntity({
             selectedTab,
             collection,
             updateUrl: true,
-            onClose
+            onClose,
+            defaultValues
         });
 
     } else {
@@ -68,7 +79,10 @@ export function navigateToEntity({
         if (copy) {
             to += "#copy";
         }
-        navigation.navigate(to);
+        // Use React Router location.state to carry defaultValues — the correct SPA
+        // approach. No URL size limits, no encoding, nothing in the address bar.
+        // EntityFullScreenRoute reads location.state.defaultValues on mount.
+        navigation.navigate(to, defaultValues ? { state: { defaultValues } } : undefined);
     }
 
 }

package/src/util/previews.ts

@@ -35,16 +35,25 @@ export function getEntityTitlePropertyKey<M extends Record<string, unknown>>(col
     if (collection.titleProperty) {
         return collection.titleProperty as string;
     }
-    // find first text field property
-    for (const key in collection.properties) {
+    
+    const orderToSearch = (collection.propertiesOrder as string[]) || Object.keys(collection.properties);
+    let firstStringCandidate: string | undefined;
+
+    for (const key of orderToSearch) {
         const property = collection.properties[key];
-        if (!isPropertyBuilder(property)) {
+        if (property && !isPropertyBuilder(property)) {
             const prop = property as Property;
             if (prop.type === "string" && !prop.ui?.multiline && !prop.ui?.markdown && !prop.storage && !prop.isId) {
-                return key;
+                if (!firstStringCandidate) {
+                    firstStringCandidate = key;
+                }
+                const lowerKey = key.toLowerCase();
+                if (["name", "title", "label", "displayname", "username"].includes(lowerKey)) {
+                    return key; // Immediate return if it's a strong title candidate
+                }
             }
         }
     }
-    return undefined;
+    return firstStringCandidate;
 }