@rebasepro/studio 0.9.1-canary.fd3754b → 0.10.0

package/src/components/LogsExplorer/LogsExplorer.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import { Select, SelectItem, TextField, Checkbox, Label, Typography, cls, defaultBorderMixin } from "@rebasepro/ui";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ArrowDownToLineIcon, Checkbox, cls, defaultBorderMixin, Label, Select, SelectItem, TextField, Typography } from "@rebasepro/ui";
+import { useApiConfig } from "@rebasepro/app";
 
 interface LogEntry {
     id: string;
@@ -25,14 +26,48 @@ const SOURCE_COLORS: Record<string, string> = {
     system: "text-surface-600 dark:text-surface-400"
 };
 
+// Ids are `log_<n>` with a monotonic counter, so numeric comparison tells
+// old entries from new ones across polls.
+const idNum = (entry: LogEntry): number => Number(entry.id.slice("log_".length));
+
+// The window is contiguous and ordered, so identical ends mean identical content.
+const sameLogs = (a: LogEntry[], b: LogEntry[]): boolean =>
+    a.length === b.length &&
+    a[0]?.id === b[0]?.id &&
+    a[a.length - 1]?.id === b[b.length - 1]?.id;
+
+// How close to the bottom edge still counts as "at the bottom".
+const STICK_THRESHOLD = 40;
+
 export function LogsExplorer() {
     const [logs, setLogs] = useState<LogEntry[]>([]);
     const [level, setLevel] = useState<string>("all");
     const [source, setSource] = useState<string>("all");
+    const [searchInput, setSearchInput] = useState("");
     const [search, setSearch] = useState("");
     const [autoScroll, setAutoScroll] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    // Entries that arrived while the user was scrolled away from the bottom.
+    const [newCount, setNewCount] = useState(0);
+    const [atBottom, setAtBottom] = useState(true);
     const containerRef = useRef<HTMLDivElement>(null);
+    // Whether the view is stuck to the bottom right now. A ref, not state:
+    // the scroll handler and the fetch loop both read it synchronously.
+    const stickRef = useRef(true);
+    const lastMaxIdRef = useRef<number | null>(null);
+    const apiConfig = useApiConfig();
+
+    // Debounce the search box so typing doesn't refetch per keystroke.
+    useEffect(() => {
+        const t = setTimeout(() => setSearch(searchInput), 300);
+        return () => clearTimeout(t);
+    }, [searchInput]);
+
     const fetchLogs = useCallback(async () => {
+        if (!apiConfig?.apiUrl) {
+            setError("No API URL configured — cannot load logs.");
+            return;
+        }
         try {
             const params = new URLSearchParams();
             if (level && level !== "all") params.set("level", level);
@@ -40,14 +75,46 @@ export function LogsExplorer() {
             if (search) params.set("search", search);
             params.set("limit", "200");
 
-            const resp = await fetch(`/api/logs?${params}`);
-            if (resp.ok) {
-                const data: { entries?: LogEntry[] } = await resp.json();
-                setLogs(data.entries || []);
+            // Logs are admin-only, so the request must carry the auth token. The
+            // URL is absolute: a relative one would resolve against the frontend
+            // origin, which serves index.html rather than the API.
+            const headers: Record<string, string> = {};
+            const token = apiConfig.getAuthToken ? await apiConfig.getAuthToken() : null;
+            if (token) headers["Authorization"] = `Bearer ${token}`;
+
+            const resp = await fetch(`${apiConfig.apiUrl}/api/logs?${params}`, { headers });
+            if (!resp.ok) {
+                setError(resp.status === 401 || resp.status === 403
+                    ? "Not authorised to read logs — an admin role is required."
+                    : `Could not load logs (HTTP ${resp.status}).`);
+                return;
+            }
+            const data: { entries?: LogEntry[] } = await resp.json();
+            // The API returns newest-first; the view tails like a terminal, so
+            // flip to chronological order (newest at the bottom).
+            const entries = (data.entries || []).slice().reverse();
+
+            const prevMax = lastMaxIdRef.current;
+            if (prevMax != null && !stickRef.current) {
+                const fresh = entries.filter(e => idNum(e) > prevMax).length;
+                if (fresh > 0) setNewCount(c => c + fresh);
             }
-        } catch {
-            /* ignore poll failures */
+            if (entries.length > 0) lastMaxIdRef.current = idNum(entries[entries.length - 1]);
+
+            // Unchanged window → keep the previous array so React leaves the
+            // DOM alone (hover states and text selection survive the poll).
+            setLogs(prev => sameLogs(prev, entries) ? prev : entries);
+            setError(null);
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "Could not load logs.");
         }
+    }, [level, source, search, apiConfig]);
+
+    // A filter change replaces the window wholesale — "new entries since last
+    // poll" stops meaning anything, so the counter starts over.
+    useEffect(() => {
+        lastMaxIdRef.current = null;
+        setNewCount(0);
     }, [level, source, search]);
 
     useEffect(() => {
@@ -82,9 +149,31 @@ export function LogsExplorer() {
         };
     }, [fetchLogs]);
 
-    useEffect(() => {
-        if (autoScroll && containerRef.current) {
-            containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    const scrollToBottom = useCallback(() => {
+        const el = containerRef.current;
+        if (!el) return;
+        el.scrollTop = el.scrollHeight;
+        stickRef.current = true;
+        setAtBottom(true);
+        setNewCount(0);
+    }, []);
+
+    // Stick to the bottom only while the user is already there. Scrolling up
+    // disengages; scrolling back down re-engages. Our own scrollTop writes
+    // always land at the bottom, so they can never disengage it.
+    const handleScroll = useCallback(() => {
+        const el = containerRef.current;
+        if (!el) return;
+        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_THRESHOLD;
+        stickRef.current = nearBottom;
+        setAtBottom(nearBottom);
+        if (nearBottom) setNewCount(0);
+    }, []);
+
+    useLayoutEffect(() => {
+        if (autoScroll && stickRef.current) {
+            const el = containerRef.current;
+            if (el) el.scrollTop = el.scrollHeight;
         }
     }, [logs, autoScroll]);
 
@@ -123,15 +212,18 @@ export function LogsExplorer() {
                 <TextField
                     size="small"
                     placeholder="Search logs..."
-                    value={search}
-                    onChange={e => setSearch(e.target.value)}
+                    value={searchInput}
+                    onChange={e => setSearchInput(e.target.value)}
                     className="flex-1 min-w-[200px]"
                 />
                 <div className="flex items-center gap-1.5 cursor-pointer ml-2">
                     <Checkbox
                         id="auto-scroll"
                         checked={autoScroll}
-                        onCheckedChange={setAutoScroll}
+                        onCheckedChange={(checked: boolean) => {
+                            setAutoScroll(checked);
+                            if (checked) scrollToBottom();
+                        }}
                         size="small"
                         padding={false}
                     />
@@ -148,40 +240,70 @@ export function LogsExplorer() {
                     </Typography>
                 </div>
             </div>
-            
+
+            {/* A failing poll must stay visible even while stale logs are on
+                screen — otherwise the view quietly freezes. */}
+            {error && logs.length > 0 && (
+                <div className={cls(
+                    "px-4 py-1.5 border-b bg-amber-50 dark:bg-amber-950/20 shrink-0",
+                    defaultBorderMixin
+                )}>
+                    <Typography variant="caption" className="text-amber-700 dark:text-amber-400">
+                        {error}
+                    </Typography>
+                </div>
+            )}
+
             {/* Log entries */}
-            <div
-                ref={containerRef}
-                className="flex-1 overflow-auto py-2"
-            >
-                {logs.map(log => (
-                    <div
-                        key={log.id}
-                        className={cls(
-                            "flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors",
-                            defaultBorderMixin
-                        )}
+            <div className="relative flex-1 min-h-0">
+                <div
+                    ref={containerRef}
+                    onScroll={handleScroll}
+                    className="h-full overflow-auto py-2"
+                >
+                    {logs.map(log => (
+                        <div
+                            key={log.id}
+                            className={cls(
+                                "flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors",
+                                defaultBorderMixin
+                            )}
+                        >
+                            <Typography variant="body2" color="secondary" className="w-[72px] shrink-0 font-mono">
+                                {new Date(log.timestamp).toLocaleTimeString()}
+                            </Typography>
+                            <Typography variant="body2" className={cls("w-[48px] shrink-0 uppercase font-semibold font-mono", LEVEL_COLORS[log.level] || "text-surface-500")}>
+                                {log.level}
+                            </Typography>
+                            <Typography variant="body2" className={cls("w-[80px] shrink-0 font-mono", SOURCE_COLORS[log.source] || "text-surface-500")}>
+                                [{log.source}]
+                            </Typography>
+                            <Typography variant="body2" className="flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100">
+                                {log.message}
+                            </Typography>
+                        </div>
+                    ))}
+                    {logs.length === 0 && (
+                        <div className="p-8 text-center">
+                            <Typography
+                                variant="body2"
+                                className={error ? "text-red-600 dark:text-red-500" : undefined}
+                                color={error ? undefined : "secondary"}
+                            >
+                                {error ?? "No log entries yet. Logs will appear here as requests come in."}
+                            </Typography>
+                        </div>
+                    )}
+                </div>
+
+                {autoScroll && !atBottom && newCount > 0 && (
+                    <button
+                        onClick={scrollToBottom}
+                        className="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 rounded-full bg-primary text-white text-xs font-medium pl-2.5 pr-3 py-1.5 shadow-md hover:bg-primary-dark transition-colors"
                     >
-                        <Typography variant="body2" color="secondary" className="w-[72px] shrink-0 font-mono">
-                            {new Date(log.timestamp).toLocaleTimeString()}
-                        </Typography>
-                        <Typography variant="body2" className={cls("w-[48px] shrink-0 uppercase font-semibold font-mono", LEVEL_COLORS[log.level] || "text-surface-500")}>
-                            {log.level}
-                        </Typography>
-                        <Typography variant="body2" className={cls("w-[80px] shrink-0 font-mono", SOURCE_COLORS[log.source] || "text-surface-500")}>
-                            [{log.source}]
-                        </Typography>
-                        <Typography variant="body2" className="flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100">
-                            {log.message}
-                        </Typography>
-                    </div>
-                ))}
-                {logs.length === 0 && (
-                    <div className="p-8 text-center">
-                        <Typography variant="body2" color="secondary">
-                            No log entries yet. Logs will appear here as requests come in.
-                        </Typography>
-                    </div>
+                        <ArrowDownToLineIcon size={14}/>
+                        {newCount} new {newCount === 1 ? "entry" : "entries"}
+                    </button>
                 )}
             </div>
         </div>

package/src/components/RLSEditor/PolicyEditor.tsx

@@ -21,7 +21,7 @@ import {
 } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
 import { MonacoEditor } from "../SQLEditor/MonacoEditor";
-import { PostgresPolicy } from "./RLSEditor";
+import type { PostgresPolicy } from "./RLSEditor";
 
 export interface PolicyEditorProps {
     policy?: PostgresPolicy;
@@ -84,34 +84,34 @@ const POLICY_PRESETS: PolicyPreset[] = [
     {
         id: "user_select_own",
         label: "Users can read their own rows",
-        description: "Users can only read rows where the user_id matches their auth.uid()",
+        description: "Users can only read rows where the uid matches their auth.uid()",
         policyname: "Users can select their own data",
         cmd: "SELECT",
         permissive: "PERMISSIVE",
         roles: ["authenticated"],
-        qual: "auth.uid() = user_id",
+        qual: "auth.uid() = uid",
         with_check: ""
     },
     {
         id: "user_update_own",
         label: "Users can update their own rows",
-        description: "Users can only update rows where the user_id matches their auth.uid()",
+        description: "Users can only update rows where the uid matches their auth.uid()",
         policyname: "Users can update their own data",
         cmd: "UPDATE",
         permissive: "PERMISSIVE",
         roles: ["authenticated"],
-        qual: "auth.uid() = user_id",
-        with_check: "auth.uid() = user_id"
+        qual: "auth.uid() = uid",
+        with_check: "auth.uid() = uid"
     },
     {
         id: "user_delete_own",
         label: "Users can delete their own rows",
-        description: "Users can only delete rows where the user_id matches their auth.uid()",
+        description: "Users can only delete rows where the uid matches their auth.uid()",
         policyname: "Users can delete their own data",
         cmd: "DELETE",
         permissive: "PERMISSIVE",
         roles: ["authenticated"],
-        qual: "auth.uid() = user_id",
+        qual: "auth.uid() = uid",
         with_check: ""
     }
 ];
@@ -187,7 +187,9 @@ export const PolicyEditor = ({
 
     return (
         <>
-            <DialogTitle className="flex justify-between items-center w-full" variant="h6">
+            {/* Inline header: this editor renders as a full pane, not inside a Dialog,
+                so DialogTitle (Radix-bound) cannot be used here. */}
+            <Typography variant="h6" gutterBottom className="mt-8 mx-8 flex justify-between items-center w-full">
                 <div>
                     <div>{policy ? t("studio_policy_edit") : t("studio_policy_create")}</div>
                     <div className="text-sm font-normal text-text-secondary dark:text-text-secondary-dark tracking-wide mt-1">
@@ -197,7 +199,7 @@ export const PolicyEditor = ({
                 <IconButton size="small" onClick={() => setHelpOpen(true)}>
                     <HelpCircleIcon size={iconSize.smallest}/>
                 </IconButton>
-            </DialogTitle>
+            </Typography>
 
             <DialogContent className="p-4 md:p-6 border-t dark:border-surface-950 bg-surface-50 dark:bg-surface-950" includeMargin={false}>
                 <div className="max-w-4xl mx-auto">
@@ -393,7 +395,7 @@ export const PolicyEditor = ({
                                 {t("studio_policy_help_step3_desc")}
                             </Typography>
                             <div className={cls("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", defaultBorderMixin)}>
-                                Example: auth.uid() = user_id
+                                Example: auth.uid() = uid
                             </div>
                             <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark">
                                 {t("studio_policy_help_step3_example")}
@@ -406,7 +408,7 @@ export const PolicyEditor = ({
                                 {t("studio_policy_help_step4_desc")}
                             </Typography>
                             <div className={cls("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", defaultBorderMixin)}>
-                                Example: auth.uid() = user_id
+                                Example: auth.uid() = uid
                             </div>
                             <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark">
                                 {t("studio_policy_help_step4_example")}
@@ -421,7 +423,7 @@ export const PolicyEditor = ({
                             <ul className="list-disc pl-5 space-y-2 text-sm text-text-secondary dark:text-text-secondary-dark font-normal">
                                 <li>
                                     <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">auth.uid()</code>
-                                    <span className="block mt-0.5">Returns the current user&apos;s ID as text. Example: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">auth.uid() = user_id</code></span>
+                                    <span className="block mt-0.5">Returns the current user&apos;s ID as text. Example: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">auth.uid() = uid</code></span>
                                 </li>
                                 <li>
                                     <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">auth.jwt()</code>

package/src/components/RLSEditor/RLSEditor.tsx

@@ -28,6 +28,8 @@ import {
 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/SQLEditor/SQLEditor.tsx

@@ -49,17 +49,9 @@ import { parseFirst } from "pgsql-ast-parser";
 import { determineTableAndPK, resolveQueryCollections, ResolvedQueryCollection } from "../../utils/sql_utils";
 import { ExplainVisualizer } from "./ExplainVisualizer";
 
-export interface SQLEditorColumnInfo {
-    name: string;
-    dataType: string;
-    isPrimaryKey: boolean;
-}
-
-export interface TableInfo {
-    schemaName: string;
-    tableName: string;
-    columns: SQLEditorColumnInfo[];
-}
+import type { SQLEditorColumnInfo, TableInfo } from "./sql_editor_types";
+
+export type { SQLEditorColumnInfo, TableInfo };
 
 const QueryLoadingView = () => {
     const [elapsed, setElapsed] = useState(0);

package/src/components/SQLEditor/SQLEditorSidebar.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { cls, defaultBorderMixin, IconButton, iconSize, Tab, Tabs, Trash2Icon, Typography } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
 import { SchemaBrowser } from "./SchemaBrowser";
-import { TableInfo } from "./SQLEditor";
+import type { TableInfo } from "./sql_editor_types";
 
 export interface Snippet {
     id: string;

package/src/components/SQLEditor/SchemaBrowser.tsx

@@ -14,7 +14,7 @@ import {
     RefreshCwIcon,
     Typography
 } from "@rebasepro/ui";
-import { TableInfo } from "./SQLEditor";
+import type { TableInfo } from "./sql_editor_types";
 import { ErrorView, useTranslation } from "@rebasepro/app";
 
 export const SchemaBrowser = ({
@@ -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/SQLEditor/sql_editor_types.ts

@@ -0,0 +1,18 @@
+/**
+ * Shapes describing the introspected schema the SQL editor works against.
+ * They live here rather than in SQLEditor.tsx because the sidebar, the schema
+ * browser and utils/sql_utils all need them, and importing them from the
+ * component would close a cycle back through it.
+ */
+
+export interface SQLEditorColumnInfo {
+    name: string;
+    dataType: string;
+    isPrimaryKey: boolean;
+}
+
+export interface TableInfo {
+    schemaName: string;
+    tableName: string;
+    columns: SQLEditorColumnInfo[];
+}

package/src/components/SchemaVisualizer/SchemaVisualizer.tsx

@@ -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) => {