@rebasepro/studio 0.0.1-canary.09e5ec5

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@rebasepro/studio",
+  "type": "module",
+  "version": "0.0.1-canary.09e5ec5",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "@types/dagre": "0.7.54",
+    "@xyflow/react": "12.10.2",
+    "dagre": "0.8.5",
+    "pgsql-ast-parser": "12.0.2",
+    "prism-react-renderer": "^2.4.1",
+    "@rebasepro/client": "0.0.1-canary.09e5ec5",
+    "@rebasepro/common": "0.0.1-canary.09e5ec5",
+    "@rebasepro/types": "0.0.1-canary.09e5ec5",
+    "@rebasepro/ui": "0.0.1-canary.09e5ec5",
+    "@rebasepro/utils": "0.0.1-canary.09e5ec5",
+    "@rebasepro/core": "0.0.1-canary.09e5ec5"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "react-router": "^7.0.0",
+    "react-router-dom": "^7.0.0",
+    "@rebasepro/admin": "0.0.1-canary.09e5ec5"
+  },
+  "peerDependenciesMeta": {
+    "@rebasepro/admin": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@jest/globals": "^30.2.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
+    "jest": "^29.7.0",
+    "react-router": "^7.13.1",
+    "react-router-dom": "^7.13.1",
+    "ts-jest": "^29.4.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "9ecf37abf793bd2f2daaaed6f517ee5ee19b01ae",
+  "scripts": {
+    "dev": "vite",
+    "test": "jest --passWithNoTests",
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f"
+  }
+}

package/src/components/ApiExplorer/ApiExplorer.tsx

@@ -0,0 +1,290 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { useApiConfig, useAuthController } from "@rebasepro/core";
+import {
+    CircularProgress,
+    Typography,
+    Alert,
+    cls,
+    Button,
+    Chip,
+    defaultBorderMixin,
+    SearchBar,
+    iconSize
+} from "@rebasepro/ui";
+import { BookOpenIcon, PlayIcon } from "lucide-react";
+import { EndpointDetail } from "./EndpointDetail";
+import { TryItPanel } from "./TryItPanel";
+import type { OpenApiSpec, ParsedEndpoint } from "./types";
+import { parseOpenApiSpec } from "./parseSpec";
+
+/**
+ * Custom-built API Explorer for Rebase Studio.
+ * No external dependencies — renders the OpenAPI spec natively
+ * with deep integration into the Rebase auth system.
+ */
+export function ApiExplorer() {
+    const apiConfig = useApiConfig();
+    const authController = useAuthController();
+    const apiUrl = apiConfig?.apiUrl;
+
+    const [spec, setSpec] = useState<OpenApiSpec | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const [selectedEndpoint, setSelectedEndpoint] = useState<ParsedEndpoint | null>(null);
+    const [sidebarFilter, setSidebarFilter] = useState("");
+    const [tryItOpen, setTryItOpen] = useState(false);
+
+    // Fetch OpenAPI spec
+    useEffect(() => {
+        if (!apiUrl) return;
+        let cancelled = false;
+        const specUrl = `${apiUrl.replace(/\/+$/, "")}/api/docs`;
+
+        (async () => {
+            try {
+                const res = await fetch(specUrl);
+                if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+                const data = await res.json();
+                if (!cancelled) {
+                    setSpec(data);
+                    setLoading(false);
+                }
+            } catch (err: any) {
+                if (!cancelled) {
+                    setError(err.message ?? "Failed to load API spec");
+                    setLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [apiUrl]);
+
+    // Parse spec into grouped endpoints
+    const { groups, allEndpoints } = useMemo(() => {
+        if (!spec) return { groups: [],
+allEndpoints: [] };
+        return parseOpenApiSpec(spec);
+    }, [spec]);
+
+    // Filter
+    const filteredGroups = useMemo(() => {
+        if (!sidebarFilter.trim()) return groups;
+        const q = sidebarFilter.toLowerCase();
+        return groups
+            .map((g) => ({
+                ...g,
+                endpoints: g.endpoints.filter(
+                    (e) =>
+                        e.path.toLowerCase().includes(q) ||
+                        e.summary.toLowerCase().includes(q) ||
+                        e.method.toLowerCase().includes(q)
+                )
+            }))
+            .filter((g) => g.endpoints.length > 0);
+    }, [groups, sidebarFilter]);
+
+    // Auto-select first endpoint
+    useEffect(() => {
+        if (!selectedEndpoint && allEndpoints.length > 0) {
+            setSelectedEndpoint(allEndpoints[0]);
+        }
+    }, [allEndpoints, selectedEndpoint]);
+
+    // ── States ───────────────────────────────────────────────────────
+    if (!apiUrl) {
+        return (
+            <div className="flex items-center justify-center h-full w-full p-8">
+                <Alert color="warning">
+                    <Typography variant="body2">
+                        No API URL configured. Ensure your app provides an{" "}
+                        <code className="font-mono text-xs">apiUrl</code>.
+                    </Typography>
+                </Alert>
+            </div>
+        );
+    }
+
+    if (loading) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full w-full gap-4">
+                <CircularProgress size="medium"/>
+                <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark animate-pulse">
+                    Loading API specification…
+                </Typography>
+            </div>
+        );
+    }
+
+    if (error || !spec) {
+        return (
+            <div className="flex items-center justify-center h-full w-full p-8">
+                <Alert color="error">
+                    <Typography variant="body2">{error ?? "Unknown error"}</Typography>
+                </Alert>
+            </div>
+        );
+    }
+
+    const METHOD_COLORS: Record<string, string> = {
+        get: "text-blue-600 dark:text-blue-400",
+        post: "text-emerald-600 dark:text-emerald-400",
+        put: "text-amber-600 dark:text-amber-400",
+        patch: "text-orange-600 dark:text-orange-400",
+        delete: "text-red-600 dark:text-red-400"
+    };
+
+    return (
+        <div className="flex h-full w-full overflow-hidden">
+            {/* ── Sidebar ──────────────────────────────────────── */}
+            <div
+                className={cls(
+                    "w-72 min-w-[272px] flex flex-col h-full overflow-hidden border-r",
+                    defaultBorderMixin,
+                    "bg-surface-50 dark:bg-surface-900"
+                )}
+            >
+                {/* Header */}
+                <div className="p-4 space-y-3">
+                    <div className="flex items-center gap-2">
+                        <BookOpenIcon size={iconSize.medium} className="text-primary dark:text-primary-dark" />
+                        <Typography variant="subtitle2" className="font-semibold">
+                            {spec.info?.title ?? "API Reference"}
+                        </Typography>
+                    </div>
+                    {spec.info?.version && (
+                        <Chip size="smallest" colorScheme="cyanDarker">
+                            v{spec.info.version}
+                        </Chip>
+                    )}
+                    {/* Search */}
+                    <div className="mb-2">
+                        <SearchBar
+                            placeholder="Filter endpoints…"
+                            size="small"
+                            onTextSearch={(val) => setSidebarFilter(val || "")}
+                        />
+                    </div>
+
+                    {/* Auth status removed to avoid redundancy with the AuthSimulationSelector */}
+                </div>
+
+                {/* Endpoint list */}
+                <div className="flex-1 overflow-y-auto px-2 pb-4">
+                    {filteredGroups.map((group) => (
+                        <div key={group.tag} className="mb-3">
+                            <Typography
+                                variant="caption"
+                                className="px-2 py-1.5 text-text-secondary dark:text-text-secondary-dark uppercase tracking-wider font-semibold text-[10px]"
+                            >
+                                {group.tag}
+                            </Typography>
+                            {group.endpoints.map((ep) => {
+                                const isSelected = selectedEndpoint?.id === ep.id;
+                                return (
+                                    <button
+                                        key={ep.id}
+                                        onClick={() => {
+                                            setSelectedEndpoint(ep);
+                                            setTryItOpen(false);
+                                        }}
+                                        className={cls(
+                                            "w-full flex items-center justify-between gap-2 px-2.5 py-1.5 rounded-lg text-left text-sm transition-all",
+                                            "hover:bg-surface-200 dark:hover:bg-surface-800",
+                                            isSelected
+                                                ? "bg-surface-200 dark:bg-surface-800 font-medium"
+                                                : "text-text-primary dark:text-text-primary-dark"
+                                        )}
+                                    >
+                                        <span className="truncate text-[13px] opacity-90">{ep.summary || ep.shortPath}</span>
+                                        <span
+                                            className={cls(
+                                                "text-[10px] font-bold uppercase shrink-0",
+                                                METHOD_COLORS[ep.method] ?? "text-text-secondary"
+                                            )}
+                                        >
+                                            {ep.method}
+                                        </span>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    ))}
+                    {filteredGroups.length === 0 && (
+                        <Typography
+                            variant="body2"
+                            className="text-center text-text-secondary dark:text-text-secondary-dark py-8"
+                        >
+                            No endpoints match
+                        </Typography>
+                    )}
+                </div>
+            </div>
+
+            {/* ── Main content ─────────────────────────────────── */}
+            <div className="flex-1 flex flex-col h-full overflow-hidden">
+                {selectedEndpoint ? (
+                    <>
+                        {/* Top bar */}
+                        <div
+                            className={cls(
+                                "flex items-center justify-between px-5 py-3 gap-4 shrink-0 border-b z-10",
+                                defaultBorderMixin,
+                                "bg-surface-50/80 dark:bg-surface-950/80 backdrop-blur-md sticky top-0"
+                            )}
+                        >
+                            <div className="flex items-center gap-3 min-w-0">
+                                <span
+                                    className={cls(
+                                        "text-xs font-bold uppercase",
+                                        METHOD_COLORS[selectedEndpoint.method] ?? ""
+                                    )}
+                                >
+                                    {selectedEndpoint.method}
+                                </span>
+                                <code className="text-sm font-mono text-text-primary dark:text-text-primary-dark truncate">
+                                    {selectedEndpoint.path}
+                                </code>
+                            </div>
+                            <Button
+                                variant={tryItOpen ? "filled" : "outlined"}
+                                size="small"
+                                onClick={() => setTryItOpen((v) => !v)}
+                            >
+                                <PlayIcon size={iconSize.small} className="mr-1" />
+                                Try It
+                            </Button>
+                        </div>
+
+                        {/* Body */}
+                        <div className="flex-1 overflow-y-auto">
+                            {tryItOpen ? (
+                                <TryItPanel
+                                    key={selectedEndpoint.operationId || selectedEndpoint.path}
+                                    endpoint={selectedEndpoint}
+                                    apiUrl={apiUrl}
+                                    getAuthToken={apiConfig?.getAuthToken ?? authController.getAuthToken}
+                                    user={authController.user}
+                                    basePath={spec?.servers?.[0]?.url || ""}
+                                />
+                            ) : (
+                                <EndpointDetail endpoint={selectedEndpoint} spec={spec}/>
+                            )}
+                        </div>
+                    </>
+                ) : (
+                    <div className="flex items-center justify-center h-full">
+                        <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark">
+                            Select an endpoint from the sidebar
+                        </Typography>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+ApiExplorer.displayName = "ApiExplorer";
+

package/src/components/ApiExplorer/EndpointDetail.tsx

@@ -0,0 +1,271 @@
+import React from "react";
+import { Typography, Chip, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+import { SlidersHorizontalIcon, UploadIcon, ArrowRightFromLineIcon } from "lucide-react";
+import type { ParsedEndpoint, OpenApiSpec, OpenApiSchema } from "./types";
+import { resolveRef, resolveRefName } from "./parseSpec";
+
+/**
+ * Renders the documentation view for a single API endpoint:
+ * parameters, request body schema, response schemas.
+ */
+export function EndpointDetail({ endpoint, spec }: { endpoint: ParsedEndpoint; spec: OpenApiSpec }) {
+    return (
+        <div className="p-6 space-y-8 max-w-4xl">
+            {/* Summary / Description */}
+            {(endpoint.summary || endpoint.description) && (
+                <div>
+                    {endpoint.summary && (
+                        <Typography variant="h6" className="font-semibold mb-1">
+                            {endpoint.summary}
+                        </Typography>
+                    )}
+                    {endpoint.description && (
+                        <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark">
+                            {endpoint.description}
+                        </Typography>
+                    )}
+                </div>
+            )}
+
+            {/* Parameters */}
+            {endpoint.parameters.length > 0 && (
+                <section>
+                    <SectionHeading icon={<SlidersHorizontalIcon size={iconSize.small} className="text-text-secondary dark:text-text-secondary-dark" />} title="Parameters"/>
+                    <div className={cls("rounded-lg border overflow-hidden", defaultBorderMixin)}>
+                        <table className="w-full text-sm">
+                            <thead>
+                                <tr className="bg-surface-100 dark:bg-surface-900 text-left">
+                                    <th className="px-4 py-2 font-medium text-text-secondary dark:text-text-secondary-dark">
+                                        Name
+                                    </th>
+                                    <th className="px-4 py-2 font-medium text-text-secondary dark:text-text-secondary-dark">
+                                        In
+                                    </th>
+                                    <th className="px-4 py-2 font-medium text-text-secondary dark:text-text-secondary-dark">
+                                        Type
+                                    </th>
+                                    <th className="px-4 py-2 font-medium text-text-secondary dark:text-text-secondary-dark">
+                                        Description
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {endpoint.parameters.map((p, i) => (
+                                    <tr
+                                        key={p.name + i}
+                                        className={cls("border-t", defaultBorderMixin)}
+                                    >
+                                        <td className="px-4 py-2.5">
+                                            <code className="text-xs font-mono font-semibold">{p.name}</code>
+                                            {p.required && <span className="text-red-500 ml-1 text-xs">*</span>}
+                                        </td>
+                                        <td className="px-4 py-2.5">
+                                            <Chip
+                                                size="smallest"
+                                                colorScheme={p.in === "path" ? "orangeDarker" : "cyanDarker"}
+                                            >
+                                                {p.in}
+                                            </Chip>
+                                        </td>
+                                        <td className="px-4 py-2.5 text-xs font-mono text-text-secondary dark:text-text-secondary-dark">
+                                            {schemaTypeLabel(p.schema)}
+                                        </td>
+                                        <td className="px-4 py-2.5 text-xs text-text-secondary dark:text-text-secondary-dark">
+                                            {p.description ?? "—"}
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </section>
+            )}
+
+            {/* Request Body */}
+            {endpoint.requestBody && (
+                <section>
+                    <SectionHeading icon={<UploadIcon size={iconSize.small} className="text-text-secondary dark:text-text-secondary-dark" />} title="Request Body"/>
+                    {Object.entries(endpoint.requestBody.content ?? {}).map(([contentType, media]) => (
+                        <div key={contentType}>
+                            <Chip size="smallest" colorScheme="blueDarker" className="mb-3">
+                                {contentType}
+                            </Chip>
+                            {media.schema && <SchemaBlock schema={media.schema} spec={spec} depth={0}/>}
+                        </div>
+                    ))}
+                </section>
+            )}
+
+            {/* Responses */}
+            <section>
+                <SectionHeading icon={<ArrowRightFromLineIcon size={iconSize.small} className="text-text-secondary dark:text-text-secondary-dark" />} title="Responses"/>
+                <div className="space-y-3">
+                    {Object.entries(endpoint.responses).map(([code, res]) => (
+                        <div
+                            key={code}
+                            className={cls("rounded-lg border overflow-hidden", defaultBorderMixin)}
+                        >
+                            <div
+                                className={cls(
+                                    "flex items-center gap-3 px-4 py-2.5",
+                                    "bg-surface-50 dark:bg-surface-900/50"
+                                )}
+                            >
+                                <StatusBadge code={code}/>
+                                <Typography
+                                    variant="body2"
+                                    className="text-text-secondary dark:text-text-secondary-dark text-xs"
+                                >
+                                    {res.description}
+                                </Typography>
+                            </div>
+                            {res.content &&
+                                Object.entries(res.content).map(
+                                    ([ct, media]) =>
+                                        media.schema && (
+                                            <div
+                                                key={ct}
+                                                className={cls("px-4 py-3 border-t", defaultBorderMixin)}
+                                            >
+                                                <SchemaBlock schema={media.schema} spec={spec} depth={0}/>
+                                            </div>
+                                        )
+                                )}
+                        </div>
+                    ))}
+                </div>
+            </section>
+        </div>
+    );
+}
+
+/* ── Schema Block ─────────────────────────────────────────────────── */
+
+function SchemaBlock({ schema, spec, depth }: { schema: OpenApiSchema; spec: OpenApiSpec; depth: number }) {
+    // Resolve $ref
+    if (schema.$ref) {
+        const name = resolveRefName(schema.$ref);
+        const resolved = resolveRef(spec, schema.$ref);
+        return (
+            <div>
+                <Typography
+                    variant="caption"
+                    className="text-primary dark:text-primary-dark font-mono text-xs mb-2 block"
+                >
+                    {name}
+                </Typography>
+                <SchemaBlock schema={resolved} spec={spec} depth={depth}/>
+            </div>
+        );
+    }
+
+    // Object with properties
+    if (schema.properties) {
+        const required = new Set(schema.required ?? []);
+        return (
+            <div
+                className={cls(
+                    "rounded-lg overflow-hidden",
+                    depth > 0 && `border ml-4 mt-1 ${defaultBorderMixin}`
+                )}
+            >
+                <table className="w-full text-xs">
+                    <tbody>
+                        {Object.entries(schema.properties).map(([key, prop]) => (
+                            <tr
+                                key={key}
+                                className={cls("border-t first:border-t-0", defaultBorderMixin)}
+                            >
+                                <td className="px-3 py-2 align-top w-36">
+                                    <code className="font-mono font-semibold text-text-primary dark:text-text-primary-dark">
+                                        {key}
+                                    </code>
+                                    {required.has(key) && <span className="text-red-500 ml-0.5">*</span>}
+                                    {prop.readOnly && (
+                                        <span className="ml-1.5 text-[9px] text-text-secondary dark:text-text-secondary-dark italic">
+                                            read-only
+                                        </span>
+                                    )}
+                                </td>
+                                <td className="px-3 py-2 align-top w-28">
+                                    <span className="font-mono text-text-secondary dark:text-text-secondary-dark">
+                                        {schemaTypeLabel(prop)}
+                                    </span>
+                                </td>
+                                <td className="px-3 py-2 align-top text-text-secondary dark:text-text-secondary-dark">
+                                    {prop.description ?? ""}
+                                    {prop.enum && (
+                                        <div className="flex flex-wrap gap-1 mt-1">
+                                            {prop.enum.map((v) => (
+                                                <span
+                                                    key={String(v)}
+                                                    className="px-1.5 py-0.5 rounded bg-surface-200 dark:bg-surface-800 text-[10px] font-mono"
+                                                >
+                                                    {String(v)}
+                                                </span>
+                                            ))}
+                                        </div>
+                                    )}
+                                    {prop.properties && <SchemaBlock schema={prop} spec={spec} depth={depth + 1}/>}
+                                    {prop.$ref && <SchemaBlock schema={prop} spec={spec} depth={depth + 1}/>}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+
+    // Array
+    if (schema.type === "array" && schema.items) {
+        return (
+            <div>
+                <span className="font-mono text-xs text-text-secondary dark:text-text-secondary-dark">Array of:</span>
+                <SchemaBlock schema={schema.items} spec={spec} depth={depth + 1}/>
+            </div>
+        );
+    }
+
+    // Primitive
+    return (
+        <span className="font-mono text-xs text-text-secondary dark:text-text-secondary-dark">
+            {schemaTypeLabel(schema)}
+        </span>
+    );
+}
+
+/* ── Helpers ──────────────────────────────────────────────────────── */
+
+function schemaTypeLabel(schema?: OpenApiSchema): string {
+    if (!schema) return "any";
+    if (schema.$ref) return resolveRefName(schema.$ref);
+    if (schema.type === "array") return `${schemaTypeLabel(schema.items)}[]`;
+    if (schema.format) return `${schema.type} (${schema.format})`;
+    return schema.type ?? "object";
+}
+
+function SectionHeading({ icon, title }: { icon: React.ReactNode; title: string }) {
+    return (
+        <div className="flex items-center gap-2 mb-3">
+            {icon}
+            <Typography variant="subtitle2" className="font-semibold text-sm">
+                {title}
+            </Typography>
+        </div>
+    );
+}
+
+function StatusBadge({ code }: { code: string }) {
+    const n = parseInt(code, 10);
+    const color =
+        n < 300
+            ? "text-emerald-600 dark:text-emerald-400"
+            : n < 400
+              ? "text-blue-600 dark:text-blue-400"
+              : n < 500
+                ? "text-amber-600 dark:text-amber-400"
+                : "text-red-600 dark:text-red-400";
+
+    return <span className={cls("text-xs font-bold font-mono", color)}>{code}</span>;
+}