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

package/src/components/SchemaVisualizer/SchemaVisualizer.tsx

@@ -28,9 +28,9 @@ import {
 import {
     useStudioCollectionRegistry,
     IconForView
-} from "@rebasepro/core";
-import type { EntityCollection } from "@rebasepro/types";
-import { isPostgresCollection } from "@rebasepro/types";
+} from "@rebasepro/app";
+import type { CollectionConfig } from "@rebasepro/types";
+import { isPostgresCollectionConfig } from "@rebasepro/types";
 import { useSchemaGraph } from "./useSchemaGraph";
 import type { TableNodeData } from "./useSchemaGraph";
 import { TableNode } from "./TableNode";
@@ -52,7 +52,7 @@ const edgeTypes = {
 function SchemaVisualizerCanvas({
     collections
 }: {
-    collections: EntityCollection[];
+    collections: CollectionConfig[];
 }) {
     const reactFlowInstance = useReactFlow();
     const {
@@ -152,7 +152,7 @@ duration: 400 }
 
     // Group collections for sidebar
     const postgresCollections = useMemo(
-        () => collections.filter(isPostgresCollection),
+        () => collections.filter(isPostgresCollectionConfig),
         [collections]
     );
 
@@ -184,7 +184,7 @@ duration: 400 }
             junctions: junctionNodes.length,
             withRls: postgresCollections.filter(
                 (c) =>
-                    isPostgresCollection(c) &&
+                    isPostgresCollectionConfig(c) &&
                     c.securityRules &&
                     c.securityRules.length > 0
             ).length
@@ -293,7 +293,7 @@ duration: 400 }
                                             )}
                                         </div>
                                         <div className="flex items-center gap-1 shrink-0 ml-1">
-                                            {isPostgresCollection(collection) &&
+                                            {isPostgresCollectionConfig(collection) &&
                                                 collection.securityRules &&
                                                 collection.securityRules
                                                     .length > 0 && (
@@ -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) => {
@@ -629,7 +630,7 @@ duration: 400 }
 export const SchemaVisualizer = () => {
     const { collections: registryCollections } =
         useStudioCollectionRegistry() as {
-            collections?: EntityCollection[];
+            collections?: CollectionConfig[];
         };
 
     // Merge registry collections with any passed collections

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/SchemaVisualizer/useSchemaGraph.ts

@@ -1,8 +1,8 @@
 import { useMemo, useState, useCallback, useEffect } from "react";
 import type { Node, Edge } from "@xyflow/react";
 import { MarkerType } from "@xyflow/react";
-import { isPostgresCollection } from "@rebasepro/types";
-import type { EntityCollection, PostgresCollection, Relation } from "@rebasepro/types";
+import { isPostgresCollectionConfig } from "@rebasepro/types";
+import type { CollectionConfig, PostgresCollectionConfig, Relation } from "@rebasepro/types";
 import { resolveCollectionRelations } from "@rebasepro/common";
 import { getLayoutedElements, getCardinalityLabel, getTypeLabel, NODE_WIDTH } from "./schema-visualizer.utils";
 import type { LayoutDirection, RelationEdgeData } from "./schema-visualizer.utils";
@@ -36,9 +36,9 @@ export interface TableNodeData {
     [key: string]: unknown;
 }
 
-// ─── Extract columns from an EntityCollection ─────────────────────────
+// ─── Extract columns from a CollectionConfig ─────────────────────────
 
-const extractColumns = (collection: EntityCollection): ColumnInfo[] => {
+const extractColumns = (collection: CollectionConfig): ColumnInfo[] => {
     const columns: ColumnInfo[] = [];
     const properties = collection.properties ?? {};
 
@@ -79,7 +79,7 @@ const extractColumns = (collection: EntityCollection): ColumnInfo[] => {
     }
 
     // Add FK columns from owning relations
-    if (isPostgresCollection(collection)) {
+    if (isPostgresCollectionConfig(collection)) {
         try {
             const resolvedRelations = resolveCollectionRelations(collection);
             for (const rel of Object.values(resolvedRelations)) {
@@ -117,7 +117,7 @@ const extractColumns = (collection: EntityCollection): ColumnInfo[] => {
 // ─── Build graph from collections ─────────────────────────────────────
 
 const buildGraph = (
-    collections: EntityCollection[],
+    collections: CollectionConfig[],
     direction: LayoutDirection
 ): { nodes: Node[]; edges: Edge[] } => {
     const nodes: Node[] = [];
@@ -143,7 +143,7 @@ const buildGraph = (
 
     // 1. Create nodes for each collection
     for (const collection of collections) {
-        if (!isPostgresCollection(collection)) continue;
+        if (!isPostgresCollectionConfig(collection)) continue;
 
         const tableName = collection.table ?? collection.slug;
         const nodeId = `table-${tableName}`;
@@ -177,7 +177,7 @@ y: 0 },
     const processedJunctions = new Set<string>();
 
     for (const collection of collections) {
-        if (!isPostgresCollection(collection)) continue;
+        if (!isPostgresCollectionConfig(collection)) continue;
 
         const tableName = collection.table ?? collection.slug;
         const sourceNodeId = tableToNodeId.get(tableName);
@@ -191,14 +191,14 @@ y: 0 },
         }
 
         for (const [relationKey, rel] of Object.entries(resolvedRelations)) {
-            let targetCollection: EntityCollection;
+            let targetCollection: CollectionConfig;
             try {
                 targetCollection = rel.target();
             } catch {
                 continue;
             }
 
-            if (!isPostgresCollection(targetCollection)) continue;
+            if (!isPostgresCollectionConfig(targetCollection)) continue;
 
             const targetTable = targetCollection.table ?? targetCollection.slug;
             const targetNodeId = tableToNodeId.get(targetTable);
@@ -356,7 +356,7 @@ export interface UseSchemaGraphResult {
 }
 
 export const useSchemaGraph = (
-    collections: EntityCollection[] | undefined
+    collections: CollectionConfig[] | undefined
 ): UseSchemaGraphResult => {
     const [direction, setDirection] = useState<LayoutDirection>("LR");
     const [version, setVersion] = useState(0);

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,21 +1,21 @@
 // ─── 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 {
     StudioBridgeProvider,
     StudioBridgeContext,
     useStudioCollectionRegistry,
-    useStudioSideEntityController,
+    useStudioSidePanelController,
     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.

package/src/utils/pgColumnToProperty.ts

@@ -1,4 +1,4 @@
-import type { EntityCollection, PostgresProperties, Property, StringProperty, NumberProperty, ArrayProperty, TableColumnInfo, TableMetadata, SecurityOperation, SecurityRule } from "@rebasepro/types";
+import type { CollectionConfig, PostgresProperties, Property, StringProperty, NumberProperty, ArrayProperty, TableColumnInfo, TableMetadata, SecurityOperation, SecurityRule } from "@rebasepro/types";
 
 /**
  * Maps a PostgreSQL column data type to a Rebase property type.
@@ -194,13 +194,13 @@ label: v.replace(/_/g, " ").replace(/\b\w/g, (c: string) => c.toUpperCase()) }))
 }
 
 /**
- * Builds a partial EntityCollection from PostgreSQL table metadata.
+ * Builds a partial CollectionConfig from PostgreSQL table metadata.
  * This is used when creating a new collection from an existing database table.
  */
 export function buildCollectionFromTableMetadata(
     tableName: string,
     metadata: TableMetadata
-): Partial<EntityCollection> {
+): Partial<CollectionConfig> {
     const properties: Record<string, Property> = {};
     const propertiesOrder: string[] = [];
     const relations: Array<{

package/src/utils/sql_utils.test.ts

@@ -2,7 +2,7 @@
 import { describe, it, expect } from "@jest/globals";
 import { determineTableAndPK, extractTablesFromQuery, resolveQueryCollections } from "./sql_utils";
 import { TableInfo } from "../components/SQLEditor/SQLEditor";
-import { EntityCollection } from "@rebasepro/types";
+import { CollectionConfig } from "@rebasepro/types";
 
 const mockSchemas: Record<string, TableInfo[]> = {
     "public": [
@@ -81,31 +81,31 @@ isPrimaryKey: false }
     ]
 };
 
-const mockCollections: EntityCollection[] = [
+const mockCollections: CollectionConfig[] = [
     {
         slug: "users",
         name: "Users",
         table: "users",
         properties: {}
-    } as EntityCollection,
+    } as CollectionConfig,
     {
         slug: "roles",
         name: "Roles",
         table: "roles",
         properties: {}
-    } as EntityCollection,
+    } as CollectionConfig,
     {
         slug: "blogPosts",
         name: "Blog Posts",
         table: "blog_posts",
         properties: {}
-    } as EntityCollection,
+    } as CollectionConfig,
     {
         slug: "blog-entries", // slug with hyphen, no table → falls back to snake_case "blog_entries"
         name: "Blog Entries",
         table: "",
         properties: {}
-    } as EntityCollection
+    } as CollectionConfig
 ];
 
 describe("determineTableAndPK", () => {

package/src/utils/sql_utils.ts

@@ -1,6 +1,6 @@
 import { parseFirst } from "pgsql-ast-parser";
 import { TableInfo } from "../components/SQLEditor/SQLEditor";
-import { EntityCollection } from "@rebasepro/types";
+import { CollectionConfig } from "@rebasepro/types";
 
 /**
  * A table extracted from a SQL query's FROM/JOIN clauses.
@@ -19,7 +19,7 @@ export interface ResolvedQueryCollection {
     /** SQL alias if present (e.g. "bp") */
     tableAlias?: string;
     /** The matched collection */
-    collection: EntityCollection;
+    collection: CollectionConfig;
     /** Columns from this table that are present in the result set */
     columns: string[];
     /** The result column name that holds the primary key for this table (e.g. "id", "author_id") */
@@ -77,7 +77,7 @@ import { toSnakeCase } from "@rebasepro/utils";
 export function resolveQueryCollections(
     sqlString: string,
     schemas: Record<string, TableInfo[]>,
-    collections: EntityCollection[],
+    collections: CollectionConfig[],
     resultColumns?: string[]
 ): ResolvedQueryCollection[] {
     const tables = extractTablesFromQuery(sqlString);