@rebasepro/studio 0.9.0 → 0.9.1-canary.09aaf62

package/src/components/RLSEditor/RLSEditor.tsx

@@ -1,5 +1,5 @@
 
-import { useStudioCollectionRegistry } from "@rebasepro/core";
+import { useStudioCollectionRegistry } from "@rebasepro/app";
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import {
     Alert,
@@ -25,9 +25,11 @@ import {
     Trash2Icon,
     Typography
 } from "@rebasepro/ui";
-import { useRebaseContext, useSnackbarController, ErrorView, useTranslation } from "@rebasepro/core";
+import { useRebaseContext, useSnackbarController, ErrorView, useTranslation } from "@rebasepro/app";
 import { isPostgresCollectionConfig } from "@rebasepro/types";
 import { REBASE_INTERNAL_SCHEMAS, REBASE_INTERNAL_PREFIXES, JUNCTION_TABLES_SQL } from "@rebasepro/common";
+import { getPolicyNamesForRule, getPolicyNamesForRules, getPolicyOperations } from "@rebasepro/utils";
+import { resolveJunctionSpecs, getJunctionSecurityRules } from "@rebasepro/common";
 import { PolicyEditor } from "./PolicyEditor";
 
 type TableCategory = "collection" | "junction" | "internal" | "other";
@@ -387,28 +389,54 @@ export const RLSEditor = ({ apiUrl = "" }: { apiUrl?: string }) => {
 status: "live" };
         });
 
-        // Merge code-based policies
+        // Merge code-based policies.
+        //
+        // A rule without an explicit `name` still produces policies — Postgres gets
+        // `<table>_<op>_<hash>`, one per operation. Skipping those rules left their
+        // live policies looking like hand-written SQL ("DB Only"), so derive the
+        // names the generator would emit and match on those.
         if (activeCollection && isPostgresCollectionConfig(activeCollection) && activeCollection.securityRules) {
             activeCollection.securityRules.forEach((rule) => {
-                const ruleName = rule.name;
-                if (!ruleName) return;
-
-                policiesMap[ruleName] = {
-                    policyname: ruleName,
-                    tablename: activeTableData.tableName,
-                    permissive: (rule.mode || "permissive").toUpperCase() as PostgresPolicy["permissive"],
-                    cmd: (rule.operation || "ALL").toUpperCase() as PostgresPolicy["cmd"],
-                    roles: [...(rule.roles ?? ["public"])],
-                    qual: rule.using || null,
-                    with_check: rule.withCheck || null,
-                    // "both" = defined in code and live in Postgres (potentially edited)
-                    status: policiesMap[ruleName] ? "both" : "code_only"
-                };
+                const ops = getPolicyOperations(rule);
+                const policyNames = getPolicyNamesForRule(rule, activeTableData.tableName);
+
+                policyNames.forEach((policyName, opIdx) => {
+                    policiesMap[policyName] = {
+                        policyname: policyName,
+                        tablename: activeTableData.tableName,
+                        permissive: (rule.mode || "permissive").toUpperCase() as PostgresPolicy["permissive"],
+                        cmd: (ops[opIdx] ?? rule.operation ?? "ALL").toUpperCase() as PostgresPolicy["cmd"],
+                        roles: [...(rule.roles ?? ["public"])],
+                        qual: rule.using || null,
+                        with_check: rule.withCheck || null,
+                        // "both" = defined in code and live in Postgres (potentially edited)
+                        status: policiesMap[policyName] ? "both" : "code_only"
+                    };
+                });
             });
         }
 
+        // Junction tables have no collection, but their policies are generated
+        // too — derived from the endpoints' relations. Recognise them so they
+        // don't show as hand-written SQL ("DB Only"). If the registry's
+        // collections don't carry resolvable relations, they simply stay "live".
+        if (!activeCollection) {
+            try {
+                const registryCollections = (collectionRegistry.collections ?? []) as unknown as Parameters<typeof resolveJunctionSpecs>[0];
+                const spec = resolveJunctionSpecs(registryCollections).get(activeTableData.tableName);
+                if (spec) {
+                    const generatedNames = getPolicyNamesForRules(getJunctionSecurityRules(spec), spec.table);
+                    for (const p of Object.values(policiesMap)) {
+                        if (generatedNames.has(p.policyname)) p.status = "both";
+                    }
+                }
+            } catch {
+                /* serialized configs without relation closures — leave as live */
+            }
+        }
+
         return Object.values(policiesMap).sort((a, b) => a.policyname.localeCompare(b.policyname));
-    }, [activeTableData, activeCollection]);
+    }, [activeTableData, activeCollection, collectionRegistry.collections]);
 
     // Stats for the info tab
     const rlsStats = useMemo(() => {
@@ -816,8 +844,10 @@ message: e instanceof Error ? e.message : String(e) });
                                                     </Typography>
                                                     <Typography variant="caption" className="opacity-80">
                                                         This is an auto-generated junction table for a many-to-many relation.
-                                                        Its access is typically managed through the related collections&apos; policies.
-                                                        You can still add RLS policies directly if needed.
+                                                        Rebase derives its policies: rows are readable when both related rows
+                                                        are, and writable following the declaring collection&apos;s update rules
+                                                        (plus the server/admin baseline). You can still add RLS policies
+                                                        directly to broaden access.
                                                     </Typography>
                                                 </div>
                                             </div>

package/src/components/RebaseStudio.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense, useLayoutEffect, useMemo } from "react";
-import { useRebaseRegistryDispatch } from "@rebasepro/core";
+import { useRebaseRegistryDispatch } from "@rebasepro/app";
 import type { RebaseStudioConfig, AppView } from "@rebasepro/types";
 import { CircularProgressCenter } from "@rebasepro/ui";
 
@@ -12,6 +12,7 @@ const StorageView = lazy(() => import("./StorageView/StorageView").then(m => ({
 const CronJobsView = lazy(() => import("./CronJobs/CronJobsView").then(m => ({ default: m.CronJobsView })));
 const SchemaVisualizer = lazy(() => import("./SchemaVisualizer/SchemaVisualizer").then(m => ({ default: m.SchemaVisualizer })));
 const BranchesView = lazy(() => import("./Branches/BranchesView").then(m => ({ default: m.BranchesView })));
+const BackupsView = lazy(() => import("./Backups/BackupsView").then(m => ({ default: m.BackupsView })));
 const ApiExplorer = lazy(() => import("./ApiExplorer/ApiExplorer").then(m => ({ default: m.ApiExplorer })));
 const LogsExplorer = lazy(() => import("./LogsExplorer/LogsExplorer").then(m => ({ default: m.LogsExplorer })));
 const ApiKeysView = lazy(() => import("./ApiKeys/ApiKeysView").then(m => ({ default: m.ApiKeysView })));
@@ -23,7 +24,7 @@ import { StudioHomePage } from "./StudioHomePage";
  * Renders nothing — purely registers config into the RebaseRegistry.
  *
  * The "schema" tool (collection editor view) is now a built-in CMS feature.
- * When `<RebaseCMS collectionEditor={...}>` is used, the schema view is
+ * When `<RebaseAdmin collectionEditor={...}>` is used, the schema view is
  * automatically injected into Studio — no manual wiring needed.
  */
 const DEFAULT_HOME_PAGE = <StudioHomePage/>;
@@ -35,7 +36,7 @@ export function RebaseStudio({ tools, homePage }: RebaseStudioConfig) {
 
     const devViews: AppView[] = useMemo(() => {
         const views: AppView[] = [];
-        const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "api", "logs", "api-keys"];
+        const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "backups", "api", "logs", "api-keys"];
         const suspense = (el: React.ReactNode) => <Suspense fallback={<CircularProgressCenter/>}>{el}</Suspense>;
 
         if (activeTools.includes("sql")) {
@@ -93,6 +94,14 @@ group: "Database",
 icon: "GitBranch",
 description: "Create and manage database branches",
 view: suspense(<BranchesView/>) });
+        }
+        if (activeTools.includes("backups")) {
+            views.push({ slug: "backups",
+name: "Backups",
+group: "Database",
+icon: "Database",
+description: "Download database backups",
+view: suspense(<BackupsView/>) });
         }
         if (activeTools.includes("api")) {
             views.push({ slug: "api",

package/src/components/SQLEditor/MonacoEditor.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import Editor, { Monaco, OnMount } from "@monaco-editor/react";
 import type { editor, Position, IRange } from "monaco-editor";
 import { cls, defaultBorderMixin } from "@rebasepro/ui";
-import { useModeController } from "@rebasepro/core";
+import { useModeController } from "@rebasepro/app";
 
 export type MonacoEditorProps = {
     value: string;

package/src/components/SQLEditor/SQLEditor.tsx

@@ -1,6 +1,6 @@
 
-import { IconForView } from "@rebasepro/core";
-import { useStudioCollectionRegistry, useStudioSidePanelController } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
+import { useStudioCollectionRegistry, useStudioSidePanelController } from "@rebasepro/app";
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -42,7 +42,7 @@ import {
     XIcon
 } from "@rebasepro/ui";
 
-import { useRebaseContext, useSnackbarController, ConfirmationDialog, ErrorView, useTranslation } from "@rebasepro/core";
+import { useRebaseContext, useSnackbarController, ConfirmationDialog, ErrorView, useTranslation } from "@rebasepro/app";
 import { MonacoEditor } from "./MonacoEditor";
 import { SQLEditorSidebar, Snippet } from "./SQLEditorSidebar";
 import { parseFirst } from "pgsql-ast-parser";

package/src/components/SQLEditor/SQLEditorSidebar.tsx

@@ -1,7 +1,7 @@
 
 import React, { useState } from "react";
 import { cls, defaultBorderMixin, IconButton, iconSize, Tab, Tabs, Trash2Icon, Typography } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 import { SchemaBrowser } from "./SchemaBrowser";
 import { TableInfo } from "./SQLEditor";
 

package/src/components/SQLEditor/SchemaBrowser.tsx

@@ -15,7 +15,7 @@ import {
     Typography
 } from "@rebasepro/ui";
 import { TableInfo } from "./SQLEditor";
-import { ErrorView, useTranslation } from "@rebasepro/core";
+import { ErrorView, useTranslation } from "@rebasepro/app";
 
 export const SchemaBrowser = ({
     onTableClick,
@@ -86,7 +86,7 @@ export const SchemaBrowser = ({
                                                         e.stopPropagation();
                                                         navigator.clipboard.writeText(table.tableName);
                                                     }}
-                                                    title="CopyIcon table name"
+                                                    title="Copy table name"
                                                 >
                                                     <CopyIcon size={iconSize.small}/>
                                                 </IconButton>
@@ -148,7 +148,7 @@ export const SchemaBrowser = ({
                                                                 e.stopPropagation();
                                                                 navigator.clipboard.writeText(col.name);
                                                             }}
-                                                            title="CopyIcon column name"
+                                                            title="Copy column name"
                                                         >
                                                             <CopyIcon size={iconSize.smallest}/>
                                                         </IconButton>

package/src/components/SchemaVisualizer/SchemaVisualizer.tsx

@@ -28,7 +28,7 @@ import {
 import {
     useStudioCollectionRegistry,
     IconForView
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import type { CollectionConfig } from "@rebasepro/types";
 import { isPostgresCollectionConfig } from "@rebasepro/types";
 import { useSchemaGraph } from "./useSchemaGraph";
@@ -543,7 +543,8 @@ duration: 400 }
                             />
                             <Controls
                                 showInteractive={false}
-                                className="!bg-white dark:!bg-surface-900 !border !border-surface-200/40 dark:!border-surface-700/40 !shadow-sm !rounded-lg"
+                                // mb clears the legend overlay pinned at bottom-left
+                                className="!mb-16 !bg-white dark:!bg-surface-900 !border !border-surface-200/40 dark:!border-surface-700/40 !shadow-sm !rounded-lg dark:[--xy-controls-button-background-color:var(--color-surface-900)] dark:[--xy-controls-button-background-color-hover:var(--color-surface-800)] dark:[--xy-controls-button-color:var(--color-surface-300)] dark:[--xy-controls-button-color-hover:var(--color-surface-50)] dark:[--xy-controls-button-border-color:var(--color-surface-700)]"
                             />
                             <MiniMap
                                 nodeStrokeColor={(n) => {

package/src/components/SchemaVisualizer/TableNode.tsx

@@ -2,7 +2,7 @@ import React, { memo, useMemo } from "react";
 import { Handle, Position } from "@xyflow/react";
 import type { NodeProps } from "@xyflow/react";
 import { Typography, Chip, Tooltip, cls } from "@rebasepro/ui";
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import type { TableNodeData, ColumnInfo } from "./useSchemaGraph";
 import { getColumnRowY, getHeaderHeight } from "./schema-visualizer.utils";
 

package/src/components/StorageView/StorageView.tsx

@@ -41,7 +41,7 @@ import {
     VideoIcon,
     XIcon
 } from "@rebasepro/ui";
-import { useStorageSource, useStorageSources, useSnackbarController, ErrorView, useApiConfig } from "@rebasepro/core";
+import { useStorageSource, useStorageSources, useSnackbarController, ErrorView, useApiConfig } from "@rebasepro/app";
 import { DEFAULT_STORAGE_SOURCE_KEY, type StorageListResult } from "@rebasepro/types";
 import { useSearchParams } from "react-router-dom";
 import { useDropzone } from "react-dropzone";

package/src/components/StudioHomePage.tsx

@@ -1,19 +1,19 @@
-import type { HomePageSection, PluginGenericProps } from "@rebasepro/types";
+import type { AppView, HomePageSection, PluginGenericProps } from "@rebasepro/types";
 import React, { useEffect, useMemo, useState } from "react";
 import { Card, cls, Container, ExpandablePanel, Typography } from "@rebasepro/ui";
-import { IconForView, useRebaseContext, useRestoreScroll, useSlot } from "@rebasepro/core";
+import { IconForView, useRebaseContext, useRebaseRegistry, useRestoreScroll, useSlot } from "@rebasepro/app";
 import { useNavigate } from "react-router-dom";
-import { useStudioBreadcrumbs, SchemaDriftBanner } from "@rebasepro/core";
+import { useStudioBreadcrumbs, SchemaDriftBanner } from "@rebasepro/app";
 
 /* ═══════════════════════════════════════════════════════════════
-   Static studio tool definitions
+   Studio tool sections, derived from the registered Studio views
    ═══════════════════════════════════════════════════════════════ */
 
 interface StudioTool {
     path: string;
     name: string;
     description: string;
-    icon: string;
+    icon?: string | React.ReactNode;
 }
 
 interface StudioSection {
@@ -21,85 +21,44 @@ interface StudioSection {
     tools: StudioTool[];
 }
 
-const SECTIONS: StudioSection[] = [
-    {
-        label: "Database",
-        tools: [
-            { path: "/schema",
-name: "Collections",
-description: "Define and manage your data model and collection schemas",
-icon: "LayoutList" },
-            { path: "/schema-visualizer",
-name: "Schema Visualizer",
-description: "Interactive ERD showing tables, columns, and relationships",
-icon: "Network" },
-            { path: "/sql",
-name: "SQL Console",
-description: "Execute raw SQL queries directly against your database",
-icon: "terminal" },
-            { path: "/branches",
-name: "Branches",
-description: "Create and manage isolated database copies for development",
-icon: "GitBranch" },
-            { path: "/rls",
-name: "RLS Policies",
-description: "Configure Row Level Security for fine-grained data access",
-icon: "ShieldCheck" },
-            { path: "/logs",
-name: "Logs Explorer",
-description: "Real-time system, query, and authentication logs",
-icon: "Activity" }
-        ]
-    },
-    {
-        label: "Compute",
-        tools: [
-            { path: "/js",
-name: "JS Console",
-description: "Run JavaScript with the Rebase SDK in a live sandbox",
-icon: "code" },
-            { path: "/cron",
-name: "Cron Jobs",
-description: "Monitor and manage scheduled background tasks",
-icon: "Clock" }
-        ]
-    },
-    {
-        label: "API",
-        tools: [
-            { path: "/api",
-name: "API Explorer",
-description: "Interactive API documentation with live request testing",
-icon: "BookOpen" }
-        ]
-    },
-    {
-        label: "Storage",
-        tools: [
-            { path: "/storage",
-name: "Storage",
-description: "Browse, upload, and manage files in your storage bucket",
-icon: "HardDrive" }
-        ]
-    },
-    {
-        label: "Access Control",
-        tools: [
-            { path: "/users",
-name: "Users",
-description: "Manage developers and assign roles in your workspace",
-icon: "group" },
-            { path: "/roles",
-name: "Roles",
-description: "Create and configure fine-grained access permissions",
-icon: "ShieldEllipsis" },
-            { path: "/api-keys",
-name: "API Keys",
-description: "Create and manage scoped keys for machine-to-machine access",
-icon: "KeyRound" }
-        ]
+/** The view metadata the cards need — not the rendered `view` itself. */
+type StudioViewMeta = Pick<AppView, "slug" | "name" | "group" | "description" | "icon" | "hideFromNavigation">;
+
+/** Group order for the home page; unknown groups are appended in view order. */
+const GROUP_ORDER = ["Database", "Compute", "Storage", "API", "Access Control"];
+
+const UNGROUPED_LABEL = "Tools";
+
+/**
+ * Build the home page sections from the Studio views that are actually
+ * registered, so a card exists if and only if its route does. A hand-written
+ * list drifts: it used to advertise Users and Roles pages that 404, while
+ * omitting the Backups view that does exist.
+ */
+function buildSections(views: StudioViewMeta[]): StudioSection[] {
+    const byGroup = new Map<string, StudioTool[]>();
+
+    for (const view of views) {
+        if (view.hideFromNavigation) continue;
+        const label = view.group ?? UNGROUPED_LABEL;
+        const tools = byGroup.get(label) ?? [];
+        tools.push({
+            path: `/${view.slug}`,
+            name: view.name,
+            description: view.description ?? "",
+            icon: view.icon
+        });
+        byGroup.set(label, tools);
     }
-];
+
+    const ordered = [
+        ...GROUP_ORDER.filter(g => byGroup.has(g)),
+        ...[...byGroup.keys()].filter(g => !GROUP_ORDER.includes(g))
+    ];
+
+    return ordered.map(label => ({ label,
+tools: byGroup.get(label)! }));
+}
 
 /* ═══════════════════════════════════════════════════════════════ */
 
@@ -151,6 +110,7 @@ export function StudioHomePage({
     const context = useRebaseContext();
     const breadcrumbs = useStudioBreadcrumbs();
     const navigate = useNavigate();
+    const registry = useRebaseRegistry();
 
     useEffect(() => {
         breadcrumbs.set({ breadcrumbs: [] });
@@ -162,10 +122,25 @@ export function StudioHomePage({
 
     const pluginActions = useSlot("home.actions", sectionProps);
 
-    const filteredSections = useMemo(
-        () => SECTIONS.filter(s => !hiddenGroups?.includes(s.label)),
-        [hiddenGroups]
-    );
+    // The collection editor ("schema") is not part of `devViews` — RebaseNavigation
+    // injects it when the CMS enables a collection editor. Mirror that condition so
+    // the card tracks the route.
+    const schemaEnabled = Boolean(registry.studioConfig && registry.cmsConfig?.collectionEditor);
+
+    const filteredSections = useMemo(() => {
+        const views: StudioViewMeta[] = [];
+        if (schemaEnabled) {
+            views.push({
+                slug: "schema",
+                name: "Collections",
+                group: "Database",
+                icon: "LayoutList",
+                description: "Define and manage your data model and collection schemas"
+            });
+        }
+        views.push(...(registry.studioConfig?.devViews ?? []));
+        return buildSections(views).filter(s => !hiddenGroups?.includes(s.label));
+    }, [registry.studioConfig?.devViews, schemaEnabled, hiddenGroups]);
 
     const groupNames = useMemo(
         () => filteredSections.map(s => s.label),

package/src/index.ts

@@ -1,5 +1,5 @@
 // ─── Bridge ─────────────────────────────────────────────────────────
-// Re-export the Studio Bridge from @rebasepro/core.
+// Re-export the Studio Bridge from @rebasepro/app.
 // The bridge lives in core so both studio and CMS can access it
 // without circular dependencies.
 export {
@@ -10,12 +10,12 @@ export {
     useStudioUrlController,
     useStudioNavigationState,
     useStudioBreadcrumbs
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 export type {
     StudioBridge,
     BreadcrumbEntry,
     BreadcrumbsController
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 
 // ─── Studio Entry Point ─────────────────────────────────────────────
 // Only export the lightweight orchestrator & home page.