@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/components/RebaseNavigation.tsx

@@ -0,0 +1,230 @@
+import React, { useMemo, lazy, Suspense } from "react";
+import {
+    useRebaseRegistry,
+    useRebaseContext,
+    useAuthController,
+    useCustomizationController,
+    useAdminModeController,
+    useBuildLocalConfigurationPersistence,
+    useInternalUserManagementController,
+    useRebaseClient,
+    StudioBridgeRegistryProvider,
+    useBridgeRegistration,
+    CustomizationControllerContext
+} from "@rebasepro/core";
+import { CircularProgressCenter } from "@rebasepro/ui";
+import type { AppView, CollectionEditorOptions, EntityCustomView, EntityAction } from "@rebasepro/types";
+
+const EMPTY_PLUGINS: any[] = [];
+const EMPTY_COLLECTIONS: any[] = [];
+
+import { useBuildNavigationStateController } from "../hooks/navigation/useBuildNavigationStateController";
+import { useBuildUrlController } from "../hooks/navigation/useBuildUrlController";
+import { useBuildCollectionRegistryController } from "../hooks/navigation/useBuildCollectionRegistryController";
+
+import { CollectionRegistryContext } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { UrlContext } from "../hooks/navigation/contexts/UrlContext";
+import { NavigationStateContext } from "../hooks/navigation/contexts/NavigationStateContext";
+
+import { SideEntityProvider } from "./SideEntityProvider";
+
+// Collection editor internals — used when collectionEditor is enabled
+import { useLocalCollectionsConfigController } from "../collection_editor/useLocalCollectionsConfigController";
+import { ConfigControllerProvider } from "../collection_editor/ConfigControllerProvider";
+
+// Lazy-load the schema view — only fetched when studio schema tool is active
+const CollectionsStudioView = lazy(() =>
+    import("../collection_editor/ui/collection_editor/CollectionsStudioView")
+        .then(m => ({ default: m.CollectionsStudioView }))
+);
+
+export interface RebaseNavigationProps {
+    children: React.ReactNode;
+}
+
+/**
+ * Navigation layer — builds and provides all CMS navigation controllers:
+ * collection registry, URL controller, navigation state, side entity,
+ * and the self-assembling Studio bridge.
+ *
+ * Also handles the collection editor config controller when enabled.
+ *
+ * **Independently usable**: Use this when you need CMS navigation
+ * (entity tables, side panels) in a custom layout.
+ *
+ * @example
+ * ```tsx
+ * <RebaseNavigation>
+ *   <MyCustomLayout>
+ *     <EntityCollectionView ... />
+ *   </MyCustomLayout>
+ * </RebaseNavigation>
+ * ```
+ */
+export function RebaseNavigation({ children }: RebaseNavigationProps) {
+    const registry = useRebaseRegistry();
+    const context = useRebaseContext();
+    const adminModeController = useAdminModeController();
+    const userManagement = useInternalUserManagementController();
+    const userConfigPersistence = useBuildLocalConfigurationPersistence();
+
+    // ── Collection Editor resolution ──────────────────────────────────
+    const collectionEditorConfig = registry.cmsConfig?.collectionEditor;
+    const collectionEditorEnabled = Boolean(collectionEditorConfig);
+    const collectionEditorOptions: CollectionEditorOptions | undefined = useMemo(() => {
+        if (!collectionEditorConfig) return undefined;
+        if (collectionEditorConfig === true) return {};
+        return collectionEditorConfig;
+    }, [collectionEditorConfig]);
+
+    // ── Combine CMS and Studio Configs ────────────────────────────────
+    const cmsCollections = registry.cmsConfig?.collections ?? EMPTY_COLLECTIONS;
+
+    // ── Build the navigation controllers ──────────────────────────────
+    const collectionsBuilder = useMemo(() => Array.isArray(cmsCollections) ? () => [...cmsCollections] : cmsCollections, [cmsCollections]);
+
+    const collectionRegistryController = useBuildCollectionRegistryController({ userConfigPersistence });
+
+    const urlController = useBuildUrlController({
+        basePath: "/",
+        baseCollectionPath: "/c",
+        collectionRegistryController
+    });
+
+    // ── Build config controller internally when collection editor is enabled ──
+    const rebaseClient = useRebaseClient();
+    const authController = useAuthController();
+    const resolvedCollections = useMemo(
+        () => Array.isArray(cmsCollections) ? cmsCollections : [],
+        [cmsCollections]
+    );
+
+    const internalConfigController = useLocalCollectionsConfigController(
+        rebaseClient,
+        resolvedCollections,
+        collectionEditorEnabled ? {
+            readOnly: collectionEditorOptions?.readOnly,
+            getAuthToken: collectionEditorOptions?.getAuthToken ?? authController?.getAuthToken
+        } : { readOnly: true }
+    );
+
+    // ── Auto-inject schema view into Studio devViews ──────────────────
+    const schemaView: AppView | undefined = useMemo(() => {
+        if (!collectionEditorEnabled) return undefined;
+        // Only inject when Studio is registered and includes "schema" tool (or all tools)
+        const studioTools = registry.studioConfig?.tools ?? ["sql", "js", "rls", "schema", "storage"];
+        if (!registry.studioConfig || !studioTools.includes("schema")) return undefined;
+        return {
+            slug: "schema",
+            name: "Edit collections",
+            group: "Database",
+            icon: "LayoutList",
+            nestedRoutes: true,
+            view: (
+                <Suspense fallback={<CircularProgressCenter/>}>
+                    <CollectionsStudioView configController={internalConfigController}/>
+                </Suspense>
+            )
+        };
+    }, [collectionEditorEnabled, registry.studioConfig, internalConfigController]);
+
+    const devViews = useMemo(() => {
+        const base = registry.studioConfig?.devViews ?? [];
+        if (schemaView) return [...base, schemaView];
+        return base;
+    }, [registry.studioConfig?.devViews, schemaView]);
+
+    const navigationStateController = useBuildNavigationStateController({
+        plugins: registry.cmsConfig?.plugins ?? EMPTY_PLUGINS,
+        collections: collectionsBuilder,
+        views: devViews,
+        authController: context.authController!,
+        data: context.data,
+        collectionRegistryController,
+        urlController,
+        adminMode: adminModeController?.mode,
+        userManagement: userManagement as any
+    });
+
+    // ── 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
+    // automatically merged. We re-provide an enriched controller here so that
+    // downstream consumers (EntityEditView, side panels, etc.) can resolve
+    // string-keyed entity views like "blog_preview".
+    const parentCustomizationController = useCustomizationController();
+    const enrichedCustomizationController = useMemo(() => {
+        const cmsEntityViews = (registry.cmsConfig?.entityViews ?? []) as EntityCustomView[];
+        const cmsEntityActions = (registry.cmsConfig?.entityActions ?? []) as EntityAction[];
+        if (cmsEntityViews.length === 0 && cmsEntityActions.length === 0) {
+            return parentCustomizationController;
+        }
+        return {
+            ...parentCustomizationController,
+            entityViews: [
+                ...(parentCustomizationController.entityViews ?? []),
+                ...cmsEntityViews.filter(v => !(parentCustomizationController.entityViews ?? []).some(ev => ev.key === v.key))
+            ],
+            entityActions: [
+                ...(parentCustomizationController.entityActions ?? []),
+                ...cmsEntityActions.filter(a => !(parentCustomizationController.entityActions ?? []).some(ea => ea.key === a.key))
+            ]
+        };
+    }, [parentCustomizationController, registry.cmsConfig?.entityViews, registry.cmsConfig?.entityActions]);
+
+    // ── Inner content with all context providers ──────────────────────
+    const navigationContent = (
+        <CustomizationControllerContext.Provider value={enrichedCustomizationController}>
+        <StudioBridgeRegistryProvider>
+            <CollectionRegistryContext.Provider value={collectionRegistryController}>
+                <UrlContext.Provider value={urlController}>
+                    <NavigationStateContext.Provider value={navigationStateController}>
+                        <SideEntityProvider>
+                            <BridgeAutoRegistrar
+                                collectionRegistryController={collectionRegistryController}
+                                urlController={urlController}
+                                navigationStateController={navigationStateController}
+                            />
+                            {children}
+                        </SideEntityProvider>
+                    </NavigationStateContext.Provider>
+                </UrlContext.Provider>
+            </CollectionRegistryContext.Provider>
+        </StudioBridgeRegistryProvider>
+        </CustomizationControllerContext.Provider>
+    );
+
+    // ── Wrap with ConfigControllerProvider when collection editor is enabled ──
+    if (collectionEditorEnabled) {
+        return (
+            <ConfigControllerProvider
+                collectionConfigController={internalConfigController}
+                pathSuggestions={collectionEditorOptions?.pathSuggestions}
+            >
+                {navigationContent}
+            </ConfigControllerProvider>
+        );
+    }
+
+    return navigationContent;
+}
+
+/**
+ * Internal component that auto-registers CMS controllers into the
+ * self-assembling Studio bridge. Must be rendered inside both the
+ * navigation contexts and the StudioBridgeRegistryProvider.
+ */
+function BridgeAutoRegistrar({
+    collectionRegistryController,
+    urlController,
+    navigationStateController
+}: {
+    collectionRegistryController: any;
+    urlController: any;
+    navigationStateController: any;
+}) {
+    useBridgeRegistration("collectionRegistry", collectionRegistryController);
+    useBridgeRegistration("urlController", urlController);
+    useBridgeRegistration("navigationState", navigationStateController);
+    return null;
+}

package/src/components/RebaseRouteDefs.tsx

@@ -0,0 +1,130 @@
+import React, { lazy, Suspense, useMemo } from "react";
+import { Route } from "react-router-dom";
+import {
+    useRebaseRegistry,
+    RebaseRoutes,
+    UserSettingsView,
+    UIReferenceView,
+    NotFoundPage,
+    useInternalUserManagementController
+} from "@rebasepro/core";
+import { CircularProgressCenter } from "@rebasepro/ui";
+
+// Lazy-load admin views — rarely visited, no need in initial bundle
+const ContentHomePage = lazy(() => import("./HomePage/ContentHomePage").then(m => ({ default: m.ContentHomePage })));
+const UsersView = lazy(() => import("./admin/UsersView").then(m => ({ default: m.UsersView })));
+const RolesView = lazy(() => import("./admin/RolesView").then(m => ({ default: m.RolesView })));
+import { RebaseRoute } from "../routes/RebaseRoute";
+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";
+
+function SettingsView() {
+    const { t } = useTranslation();
+    const breadcrumbs = useBreadcrumbsController();
+    useEffect(() => {
+        breadcrumbs.set({
+            breadcrumbs: [{ title: t("project_settings"),
+url: "/settings" }]
+        });
+
+    }, []);
+    return <UserSettingsView/>;
+}
+
+export interface RebaseRouteDefsProps {
+    /** User-provided custom routes to include. */
+    children?: React.ReactNode;
+    /**
+     * Wrap function — receives the route tree and lets you wrap it in a layout.
+     * If provided, the routes are rendered inside this wrapper.
+     * If not provided, routes are rendered directly inside <RebaseRoutes>.
+     */
+    layout?: React.ReactElement;
+}
+
+/**
+ * Route definitions for the CMS.
+ *
+ * Defines all standard routes: home, studio home, collection view,
+ * settings, users, roles, debug, custom views, and a catch-all 404.
+ *
+ * **Independently usable**: Use this when you want Rebase routes
+ * inside your own layout/navigation setup.
+ *
+ * @example
+ * ```tsx
+ * <RebaseNavigation>
+ *   <RebaseRouteDefs layout={<MyCustomLayout />}>
+ *     <Route path="/my-custom" element={<MyView />} />
+ *   </RebaseRouteDefs>
+ * </RebaseNavigation>
+ * ```
+ */
+export function RebaseRouteDefs({ children, layout }: RebaseRouteDefsProps) {
+    const registry = useRebaseRegistry();
+    const userManagement = useInternalUserManagementController();
+    const navigationStateController = useNavigationStateController();
+
+    const cmsHomePage = registry.cmsConfig?.homePage ?? <Suspense fallback={<CircularProgressCenter/>}><ContentHomePage/></Suspense>;
+    const studioHomePage = registry.studioConfig?.homePage;
+
+    const combinedViews = useMemo(() => [
+        ...(navigationStateController.views ?? []),
+        ...(navigationStateController.adminViews ?? [])
+    ], [navigationStateController.views, navigationStateController.adminViews]);
+
+    const routeContents = (
+        <>
+            {/* Core CMS Routes */}
+            <Route path={"/"} element={cmsHomePage}/>
+            {registry.studioConfig && (
+                <Route path={"/s"} element={studioHomePage}/>
+            )}
+
+            <Route path={"/c/*"} element={<RebaseRoute/>}/>
+            <Route path={"/settings"} element={<SettingsView/>}/>
+            {userManagement && <Route path={"/roles"} element={<Suspense fallback={<CircularProgressCenter/>}><RolesView userManagement={userManagement}/></Suspense>}/>}
+            {userManagement && <Route path={"/users"} element={<Suspense fallback={<CircularProgressCenter/>}><UsersView userManagement={userManagement}/></Suspense>}/>}
+
+            {/* Hidden debug route */}
+            <Route path={"/debug/ui"} element={<UIReferenceView/>}/>
+
+            {/* Custom Registered Views */}
+            {combinedViews.map(view => {
+                const slugs = Array.isArray(view.slug) ? view.slug : [view.slug];
+                return slugs.flatMap(slug => {
+                    const routes = [
+                        <Route key={slug} path={slug} element={<CustomViewRoute view={view}/>}/>
+                    ];
+                    if (view.nestedRoutes) {
+                        routes.push(
+                            <Route key={slug + "/*"} path={slug + "/*"} element={<CustomViewRoute view={view}/>}/>
+                        );
+                    }
+                    return routes;
+                });
+            })}
+
+            {/* User Provided Custom Routes */}
+            {children}
+
+            <Route path={"*"} element={navigationStateController.loading ? <CircularProgressCenter/> : <NotFoundPage/>}/>
+        </>
+    );
+
+    return (
+        <>
+            <RebaseRoutes>
+                {layout
+                    ? <Route element={layout}>{routeContents}</Route>
+                    : <Route element={<>{routeContents}</>}>{routeContents}</Route>
+                }
+            </RebaseRoutes>
+            <CollectionEditorDialogs/>
+        </>
+    );
+}

package/src/components/RebaseShell.tsx

@@ -0,0 +1,70 @@
+import React, { useMemo } from "react";
+import {
+    useRebaseRegistry
+} from "@rebasepro/core";
+
+import { RebaseAuthGate } from "./RebaseAuthGate";
+import { RebaseNavigation } from "./RebaseNavigation";
+import { RebaseLayout } from "./RebaseLayout";
+import { RebaseRouteDefs } from "./RebaseRouteDefs";
+
+export interface RebaseShellProps {
+    title?: string;
+    appBar?: React.ReactNode;
+    drawer?: React.ReactNode;
+    autoOpenDrawer?: boolean;
+    children?: React.ReactNode;
+}
+
+/**
+ * Convenience component that composes all four CMS layers:
+ *
+ * ```
+ * <RebaseAuthGate>
+ *   <RebaseNavigation>
+ *     <RebaseRouteDefs layout={<RebaseLayout>}>
+ *       {children}
+ *     </RebaseRouteDefs>
+ *   </RebaseNavigation>
+ * </RebaseAuthGate>
+ * ```
+ *
+ * Each layer is independently usable — see their individual docs.
+ * RebaseShell is sugar that composes them all with sensible defaults.
+ */
+export function RebaseShell(props: RebaseShellProps) {
+    const {
+        title = "Rebase",
+        appBar,
+        drawer,
+        autoOpenDrawer = false,
+        children
+    } = props;
+
+    const registry = useRebaseRegistry();
+
+    // Compute devViews for the layout's AdminModeSyncer
+    const devViews = useMemo(() => {
+        return registry.studioConfig?.devViews ?? [];
+    }, [registry.studioConfig?.devViews]);
+
+    return (
+        <RebaseAuthGate>
+            <RebaseNavigation>
+                <RebaseRouteDefs
+                    layout={
+                        <RebaseLayout
+                            title={title}
+                            appBar={appBar}
+                            drawer={drawer}
+                            autoOpenDrawer={autoOpenDrawer}
+                            devViews={devViews}
+                        />
+                    }
+                >
+                    {children}
+                </RebaseRouteDefs>
+            </RebaseNavigation>
+        </RebaseAuthGate>
+    );
+}