@rebasepro/core 0.0.1-canary.f81da60 → 0.1.0

package/dist/vitePlugin.d.ts

@@ -7,10 +7,37 @@ export interface RebaseCollectionsPluginOptions {
 }
 /**
  * A Vite plugin that dynamically loads and automatically wires Rebase collections.
- * It provides a virtual module "virtual:rebase-collections" that statically exports the resolved collections array.
+ *
+ * It provides two capabilities:
+ * 1. A **virtual module** `"virtual:rebase-collections"` that statically exports
+ *    the resolved collections array.
+ * 2. A **transform hook** that converts string-based component references
+ *    (e.g. `Field: "../../components/MyField"`) into `LazyComponentRef` objects
+ *    (`{ __rebaseLazy: true, load: () => import(...) }`), enabling code-splitting
+ *    and preventing the backend from loading React-dependent modules.
  */
 export declare function rebaseCollectionsPlugin(options: RebaseCollectionsPluginOptions): {
     name: string;
+    configResolved(config: {
+        root: string;
+    }): void;
     resolveId(id: string): string | null;
     load(id: string): string | null;
+    /**
+     * Transform collection files to convert string component references
+     * into lazy-loading `LazyComponentRef` objects.
+     *
+     * Example transform:
+     * ```
+     * // Input
+     * Field: "../../frontend/src/components/MyField"
+     *
+     * // Output
+     * Field: { __rebaseLazy: true, load: () => import("../../frontend/src/components/MyField") }
+     * ```
+     */
+    transform(code: string, id: string): {
+        code: string;
+        map: null;
+    } | null;
 };

package/dist/vitePlugin.js

@@ -1,8 +1,22 @@
+import path from "path";
+const LAZY_COMPONENT_KEYS = ["Field", "Preview", "Builder"];
+function buildTransformRegex() {
+  const keys = LAZY_COMPONENT_KEYS.join("|");
+  return new RegExp(
+    `((?:${keys})\\s*:\\s*)(['"])(\\.\\.?\\/[^'"]+)\\2`,
+    "g"
+  );
+}
 function rebaseCollectionsPlugin(options) {
   const virtualModuleId = "virtual:rebase-collections";
   const resolvedVirtualModuleId = "\0" + virtualModuleId;
+  let resolvedCollectionsDir;
+  const transformRegex = buildTransformRegex();
   return {
     name: "rebase-collections-plugin",
+    configResolved(config) {
+      resolvedCollectionsDir = path.isAbsolute(options.collectionsDir) ? options.collectionsDir : path.resolve(config.root, options.collectionsDir);
+    },
     resolveId(id) {
       if (id === virtualModuleId) {
         return resolvedVirtualModuleId;
@@ -21,6 +35,34 @@ function rebaseCollectionsPlugin(options) {
                 `;
       }
       return null;
+    },
+    /**
+     * Transform collection files to convert string component references
+     * into lazy-loading `LazyComponentRef` objects.
+     *
+     * Example transform:
+     * ```
+     * // Input
+     * Field: "../../frontend/src/components/MyField"
+     *
+     * // Output
+     * Field: { __rebaseLazy: true, load: () => import("../../frontend/src/components/MyField") }
+     * ```
+     */
+    transform(code, id) {
+      if (!resolvedCollectionsDir) return null;
+      if (!id.startsWith(resolvedCollectionsDir)) return null;
+      if (!/\.tsx?$/.test(id)) return null;
+      transformRegex.lastIndex = 0;
+      if (!transformRegex.test(code)) return null;
+      transformRegex.lastIndex = 0;
+      const transformed = code.replace(
+        transformRegex,
+        (_match, prefix, quote, importPath) => {
+          return `${prefix}{ __rebaseLazy: true, load: () => import(${quote}${importPath}${quote}) }`;
+        }
+      );
+      return { code: transformed, map: null };
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/core",
   "type": "module",
-  "version": "0.0.1-canary.f81da60",
+  "version": "0.1.0",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -52,11 +52,11 @@
     "i18next": "^23.16.4",
     "notistack": "^3.0.2",
     "react-i18next": "^14.1.3",
-    "@rebasepro/common": "0.0.1-canary.f81da60",
-    "@rebasepro/ui": "0.0.1-canary.f81da60",
-    "@rebasepro/types": "0.0.1-canary.f81da60",
-    "@rebasepro/utils": "0.0.1-canary.f81da60",
-    "@rebasepro/formex": "0.0.1-canary.f81da60"
+    "@rebasepro/utils": "0.1.0",
+    "@rebasepro/common": "0.1.0",
+    "@rebasepro/formex": "0.1.0",
+    "@rebasepro/types": "0.1.0",
+    "@rebasepro/ui": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/components/BootstrapAdminBanner.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { useInternalUserManagementController } from "../hooks/useInternalUserManagementController";
+import { useAuthController } from "../hooks/useAuthController";
+import { useTranslation } from "../hooks/useTranslation";
+import { useSnackbarController } from "../hooks/useSnackbarController";
+import { Button, CircularProgress, Typography } from "@rebasepro/ui";
+
+export interface BootstrapAdminBannerProps {
+    className?: string;
+}
+
+export function BootstrapAdminBanner({
+    className
+}: BootstrapAdminBannerProps) {
+    const userManagement = useInternalUserManagementController();
+    const { user: loggedInUser } = useAuthController();
+    const { t } = useTranslation();
+    const snackbarController = useSnackbarController();
+    const [bootstrapping, setBootstrapping] = useState(false);
+
+    // If we're not running locally, don't render anything
+    if (typeof window !== "undefined" && window.location.hostname !== "localhost" && window.location.hostname !== "127.0.0.1") {
+        return null;
+    }
+
+    if (!userManagement || !loggedInUser) {
+        return null;
+    }
+
+    const { users, loading: delegateLoading, bootstrapAdmin, usersError } = userManagement;
+    const hasAdmin = users.some(u => u.roles?.includes("admin"));
+
+    if (delegateLoading || hasAdmin || usersError || !bootstrapAdmin) {
+        return null;
+    }
+
+    const handleBootstrap = async () => {
+        if (!bootstrapAdmin) return;
+        setBootstrapping(true);
+        try {
+            await bootstrapAdmin();
+            snackbarController.open({ type: "success", message: t("bootstrap_admin_success") || "Admin successfully created" });
+            window.location.reload();
+        } catch (error: unknown) {
+            snackbarController.open({ type: "error", message: error instanceof Error ? error.message : t("failed_to_bootstrap_admin") || "Failed to bootstrap admin" });
+        } finally {
+            setBootstrapping(false);
+        }
+    };
+
+    return (
+        <div className={`bg-yellow-100 dark:bg-yellow-900 border border-yellow-400 dark:border-yellow-700 rounded p-4 flex items-center justify-between ${className || ""}`}>
+            <div>
+                <Typography variant="label" className="text-yellow-800 dark:text-yellow-200">
+                    {t("no_users_or_roles_defined") || "No admins found. Click to add your user as admin."}
+                </Typography>
+            </div>
+            <Button
+                onClick={handleBootstrap}
+                disabled={bootstrapping}
+            >
+                {bootstrapping ? <CircularProgress size="small"/> : (t("add_logged_user_as_admin") || "Add logged user as admin")}
+            </Button>
+        </div>
+    );
+}

package/src/components/LoginView/LoginView.tsx

@@ -1,6 +1,23 @@
-
 import React, { ReactNode, useEffect, useRef, useState } from "react";
 
+/** Google Identity Services SDK — injected by the GIS <script> tag. */
+declare global {
+    interface Window {
+        google?: {
+            accounts: {
+                oauth2: {
+                    initCodeClient(config: {
+                        client_id: string;
+                        scope: string;
+                        ux_mode: "popup" | "redirect";
+                        callback: (response: { code?: string; error?: string }) => void;
+                    }): { requestCode(): void };
+                };
+            };
+        };
+    }
+}
+
 import { Button, cls, IconButton, LoadingButton, Menu, MenuItem, TextField, Typography, iconSize } from "@rebasepro/ui";
 import { ArrowLeftIcon, MailIcon, MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
 import { AuthControllerExtended, User } from "@rebasepro/types";
@@ -119,7 +136,9 @@ export function LoginView({
 
     // Resolve capabilities — explicit props override authController.capabilities
     const caps = authController.capabilities ?? {};
-    const isBootstrapMode = needsSetup ?? (authController as any).needsSetup ?? false;
+    const isBootstrapMode = needsSetup
+        ?? ("needsSetup" in authController && !!(authController as { needsSetup?: boolean }).needsSetup)
+        ?? false;
     const canRegister = registrationEnabled ?? caps.registration ?? false;
     const hasGoogleLogin = googleEnabled ?? caps.googleLogin ?? false;
     const hasPasswordReset = caps.passwordReset ?? !!authController.forgotPassword;
@@ -243,15 +262,18 @@ export function LoginView({
                                         />
                                     )}
                                     {showRegistration && (
-                                        <Button
-                                            className="w-full"
-                                            variant="filled"
-                                            color="primary"
-                                            size="large"
-                                            onClick={() => switchMode("register")}
-                                        >
-                                            Create an account
-                                        </Button>
+                                        <div className="mt-2 text-center">
+                                            <Typography variant="body2" color="secondary">
+                                                Don&apos;t have an account?{" "}
+                                                <button
+                                                    type="button"
+                                                    className="font-semibold hover:underline cursor-pointer text-primary-600 dark:text-primary-400"
+                                                    onClick={() => switchMode("register")}
+                                                >
+                                                    Create one
+                                                </button>
+                                            </Typography>
+                                        </div>
                                     )}
                                 </div>
                             )}
@@ -342,24 +364,30 @@ function GoogleLoginButton({
     googleClientId: string,
     authController: AuthControllerExtended
 }) {
-    const tokenClientRef = useRef<any>(null);
+    const codeClientRef = useRef<{ requestCode(): void } | null>(null);
 
     useEffect(() => {
         if (!authController.googleLogin) return;
 
-        const google = (window as any).google;
-        if (!google || tokenClientRef.current) return;
+        const google = window.google;
+        if (!google || codeClientRef.current) return;
 
-        tokenClientRef.current = google.accounts.oauth2.initTokenClient({
+        codeClientRef.current = google.accounts.oauth2.initCodeClient({
             client_id: googleClientId,
             scope: "openid email profile",
-            callback: async (response: { access_token?: string; error?: string }) => {
-                if (response.error || !response.access_token) {
+            ux_mode: "popup",
+            callback: async (response: { code?: string; error?: string }) => {
+                if (response.error || !response.code) {
                     console.error("Google login error:", response.error);
                     return;
                 }
                 try {
-                    await authController.googleLogin!(response.access_token, "accessToken");
+                    // Send the authorization code to the backend.
+                    // redirectUri "postmessage" is required when using popup ux_mode.
+                    await authController.googleLogin!({
+                        code: response.code,
+                        redirectUri: "postmessage"
+                    });
                 } catch (err: unknown) {
                     console.error("Google login error:", err);
                 }
@@ -368,11 +396,11 @@ function GoogleLoginButton({
     }, [googleClientId, authController]);
 
     const handleClick = () => {
-        if (!tokenClientRef.current) {
+        if (!codeClientRef.current) {
             console.error("Google Sign-In not loaded");
             return;
         }
-        tokenClientRef.current.requestAccessToken();
+        codeClientRef.current.requestCode();
     };
 
     return (

package/src/components/common/useDataTableController.tsx

@@ -81,7 +81,16 @@ export function useDataTableController<M extends Record<string, any> = any, USER
     const paginationEnabled = collection.pagination === undefined || Boolean(collection.pagination);
     const pageSize = typeof collection.pagination === "number" ? collection.pagination : DEFAULT_PAGE_SIZE;
 
-    const [searchString, setSearchString] = React.useState<string | undefined>();
+    const location = useLocation();
+
+    const [searchString, setSearchString] = React.useState<string | undefined>(() => {
+        if (updateUrl) {
+            const params = new URLSearchParams(location.search);
+            const urlSearch = params.get("search");
+            return urlSearch ? decodeURIComponent(urlSearch) : undefined;
+        }
+        return undefined;
+    });
 
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
         sortBy?: [string, "asc" | "desc"]) => {
@@ -97,8 +106,6 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         return sort;
     }, [sort, fixedFilter]);
 
-    const location = useLocation();
-
     const {
         filterValues: filterUrl,
         sortBy: sortUrl
@@ -128,6 +135,11 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         } else {
             setSortBy(urlSortBy as [Extract<keyof M, string> | (string & {}), "asc" | "desc"] | undefined);
         }
+
+        // Sync search string from URL
+        const urlParams = new URLSearchParams(location.search);
+        const urlSearch = urlParams.get("search");
+        setSearchString(urlSearch ? decodeURIComponent(urlSearch) : undefined);
     }, [location.search, updateUrl, fixedFilter, checkFilterCombination]);
 
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);

package/src/components/index.tsx

@@ -22,4 +22,4 @@ export * from "./LoginView";
 
 export * from "./RebaseAuth";
 
-
+export * from "./BootstrapAdminBanner";

package/src/core/Rebase.tsx

@@ -116,20 +116,21 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
         }
 
         // 2. Auto-derive from the client's WebSocket connection (Rebase backend)
-        const ws = (client as any)?.ws;
-        if (ws && typeof ws.executeSql === "function") {
+        const ws = client?.ws;
+        if (ws && typeof (ws as Record<string, unknown>).executeSql === "function") {
+            const wsAdmin = ws as import("@rebasepro/types").DatabaseAdmin;
             return {
-                executeSql: ws.executeSql.bind(ws),
-                fetchAvailableDatabases: ws.fetchAvailableDatabases?.bind(ws),
-                fetchAvailableRoles: ws.fetchAvailableRoles?.bind(ws),
-                fetchCurrentDatabase: ws.fetchCurrentDatabase?.bind(ws),
-                fetchUnmappedTables: ws.fetchUnmappedTables?.bind(ws),
-                fetchTableMetadata: ws.fetchTableMetadata?.bind(ws),
+                executeSql: wsAdmin.executeSql!.bind(wsAdmin),
+                fetchAvailableDatabases: wsAdmin.fetchAvailableDatabases?.bind(wsAdmin),
+                fetchAvailableRoles: wsAdmin.fetchAvailableRoles?.bind(wsAdmin),
+                fetchCurrentDatabase: wsAdmin.fetchCurrentDatabase?.bind(wsAdmin),
+                fetchUnmappedTables: wsAdmin.fetchUnmappedTables?.bind(wsAdmin),
+                fetchTableMetadata: wsAdmin.fetchTableMetadata?.bind(wsAdmin),
                 // Branch admin capabilities
-                ...(typeof ws.createBranch === "function" ? {
-                    createBranch: ws.createBranch.bind(ws),
-                    deleteBranch: ws.deleteBranch.bind(ws),
-                    listBranches: ws.listBranches.bind(ws)
+                ...(typeof wsAdmin.createBranch === "function" ? {
+                    createBranch: wsAdmin.createBranch.bind(wsAdmin),
+                    deleteBranch: wsAdmin.deleteBranch!.bind(wsAdmin),
+                    listBranches: wsAdmin.listBranches!.bind(wsAdmin)
                 } : {})
             };
         }
@@ -224,7 +225,7 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
         </RebaseI18nProvider>
     );
 
-    const resolvedApiUrl = apiUrl ?? (client as any)?.baseUrl;
+    const resolvedApiUrl = apiUrl ?? client?.baseUrl;
 
     if (resolvedApiUrl) {
         return (
@@ -255,7 +256,12 @@ function RebaseInternal({
     }) : children;
 
     const plugins = customizationController.plugins;
-    if (!loading && plugins && plugins.length > 0) {
+    const authController = context.authController;
+    const authReady = !loading
+        && !authController.authLoading
+        && (Boolean(authController.user) || authController.loginSkipped);
+
+    if (authReady && plugins && plugins.length > 0) {
         return (
             <PluginProviderStack
                 plugins={plugins}

package/src/hooks/index.tsx

@@ -45,3 +45,4 @@ export * from "./useRebaseClient";
 
 export * from "./useAnalyticsController";
 export * from "./useUserConfigurationPersistence";
+export * from "./useResolvedComponent";

package/src/hooks/useCollapsedGroups.ts

@@ -7,10 +7,18 @@ const STORAGE_KEY_PREFIX = "rebase-collapsed-groups";
  * with localStorage persistence. Automatically cleans up stale group entries
  * when groups are removed from the navigation.
  *
+ * Groups that have never been toggled by the user fall back to
+ * `defaults[groupName]` (driven by `collapsedByDefault` in config).
+ *
  * @param groupNames - Array of group names to track
  * @param namespace - Namespace for localStorage key (e.g., "home", "drawer") to allow independent state
+ * @param defaults - Optional map of group name → collapsed boolean from config
  */
-export function useCollapsedGroups(groupNames: string[], namespace = "default") {
+export function useCollapsedGroups(
+    groupNames: string[],
+    namespace = "default",
+    defaults?: Record<string, boolean>
+) {
     const storageKey = `${STORAGE_KEY_PREFIX}-${namespace}`;
 
     // Load collapsed groups from localStorage on mount
@@ -57,13 +65,23 @@ export function useCollapsedGroups(groupNames: string[], namespace = "default")
     }, [groupNames]);
 
     const isGroupCollapsed = useCallback((name: string) => {
-        return !!collapsedGroups[name];
-    }, [collapsedGroups]);
+        // If the user has explicitly toggled this group, use that value
+        if (name in collapsedGroups) {
+            return collapsedGroups[name];
+        }
+        // Otherwise fall back to the config default
+        return defaults?.[name] ?? false;
+    }, [collapsedGroups, defaults]);
 
     const toggleGroupCollapsed = useCallback((name: string) => {
-        setCollapsedGroups(prev => ({ ...prev,
-[name]: !prev[name] }));
-    }, []);
+        setCollapsedGroups(prev => {
+            // Resolve current effective state (explicit or default)
+            const currentlyCollapsed = name in prev
+                ? prev[name]
+                : (defaults?.[name] ?? false);
+            return { ...prev, [name]: !currentlyCollapsed };
+        });
+    }, [defaults]);
 
     return useMemo(() => ({
         isGroupCollapsed,
@@ -71,3 +89,27 @@ export function useCollapsedGroups(groupNames: string[], namespace = "default")
     }), [isGroupCollapsed, toggleGroupCollapsed]);
 }
 
+/**
+ * Build a defaults map from navigationGroupMappings for a given namespace.
+ * Returns a Record<groupName, collapsed> that can be passed to useCollapsedGroups.
+ */
+export function buildCollapsedDefaults(
+    mappings: Array<{ name: string; collapsedByDefault?: boolean | { drawer?: boolean; home?: boolean } }> | undefined,
+    namespace: "drawer" | "home"
+): Record<string, boolean> {
+    if (!mappings) return {};
+    const result: Record<string, boolean> = {};
+    for (const mapping of mappings) {
+        const val = mapping.collapsedByDefault;
+        if (val === undefined) continue;
+        if (typeof val === "boolean") {
+            result[mapping.name] = val;
+        } else {
+            const ns = val[namespace];
+            if (ns !== undefined) {
+                result[mapping.name] = ns;
+            }
+        }
+    }
+    return result;
+}

package/src/hooks/useRebaseContext.tsx

@@ -1,5 +1,6 @@
 import { AuthController, RebaseContext, User } from "@rebasepro/types";
 import { useAuthController } from "./useAuthController";
+import { useRebaseClient } from "./useRebaseClient";
 import { useData } from "./data/useData";
 import { useStorageSource } from "./useStorageSource";
 import { useSnackbarController } from "./useSnackbarController";
@@ -11,9 +12,7 @@ import { useEffectiveRoleController } from "./useEffectiveRoleController";
 import React, { useEffect, useContext } from "react";
 import { useInternalUserManagementController } from "./useInternalUserManagementController";
 
-// Temporary context for databaseAdmin - assuming we might add one, or we need to get it from Rebase.tsx.
-// Wait, `databaseAdmin` hasn't been added to a context yet. Let's add it to a context in Rebase.tsx later.
-// Let's create a placeholder for databaseAdmin context access.
+// DatabaseAdmin is provided by <Rebase> via DatabaseAdminContext.
 import { DatabaseAdminContext } from "../contexts/DatabaseAdminContext";
 
 /**
@@ -27,6 +26,8 @@ import { DatabaseAdminContext } from "../contexts/DatabaseAdminContext";
  */
 export const useRebaseContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): RebaseContext<USER, AuthControllerType> => {
 
+    const client = useRebaseClient<any>();
+
     const authController = useAuthController<USER, AuthControllerType>();
     const data = useData();
     const storageSource = useStorageSource();
@@ -52,7 +53,8 @@ export const useRebaseContext = <USER extends User = User, AuthControllerType ex
         analyticsController,
         userManagement,
         effectiveRoleController,
-        databaseAdmin
+        databaseAdmin,
+        client: client! // Client should be provided
     });
 
     React.useEffect(() => {
@@ -67,9 +69,12 @@ export const useRebaseContext = <USER extends User = User, AuthControllerType ex
             analyticsController,
             userManagement,
             effectiveRoleController,
-            databaseAdmin
+            databaseAdmin,
+            client: client!
         };
-    }, [authController, dialogsController, effectiveRoleController, data, databaseAdmin]);
+    }, [authController, data, storageSource, snackbarController, userConfigPersistence,
+        dialogsController, customizationController, analyticsController, userManagement,
+        effectiveRoleController, databaseAdmin, client]);
 
     return rebaseContextRef.current;
 }