@rebasepro/studio 0.0.1-canary.09e5ec5

package/src/components/SQLEditor/SQLEditorSidebar.tsx

@@ -0,0 +1,174 @@
+
+import React, { useState } from "react";
+import { Typography, cls, defaultBorderMixin, Tabs, Tab, IconButton , iconSize } from "@rebasepro/ui";
+import { Trash2Icon } from "lucide-react";
+import { useTranslation } from "@rebasepro/core";
+import { SchemaBrowser } from "./SchemaBrowser";
+import { TableInfo } from "./SQLEditor";
+
+export interface Snippet {
+    id: string;
+    name: string;
+    sql: string;
+    createdAt: number;
+    isFavorite?: boolean;
+}
+
+interface SQLEditorSidebarProps {
+    onSelectSnippet: (sql: string) => void;
+    onTableClick: (tableName: string) => void;
+    snippets: Snippet[];
+    history: string[];
+    onDeleteSnippet: (id: string) => void;
+    schemas: Record<string, TableInfo[]>;
+    isSchemaLoading: boolean;
+    schemaError: string | null;
+    onRetrySchema: () => void;
+}
+
+export const SQLEditorSidebar = ({
+    onSelectSnippet,
+    onTableClick,
+    snippets,
+    history,
+    onDeleteSnippet,
+    schemas,
+    isSchemaLoading,
+    schemaError,
+    onRetrySchema
+}: SQLEditorSidebarProps) => {
+    const [activeTab, setActiveTab] = useState<"schema" | "snippets" | "history">("schema");
+    const { t } = useTranslation();
+
+    return (
+        <div className={cls("flex flex-col h-full w-full bg-white dark:bg-surface-950 border-r", defaultBorderMixin)}>
+            <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "schema" | "snippets" | "history")} variant="boxy" className="border-b border-surface-200 dark:border-surface-950">
+                <Tab value="schema">{t("studio_sql_sidebar_schema")}</Tab>
+                <Tab value="snippets">{t("studio_sql_sidebar_snippets")}</Tab>
+                <Tab value="history">{t("studio_sql_sidebar_history")}</Tab>
+            </Tabs>
+
+            <div className="flex-grow overflow-hidden relative">
+                {activeTab === "schema" && (
+                    <SchemaBrowser
+                        onTableClick={onTableClick}
+                        schemas={schemas}
+                        isSchemaLoading={isSchemaLoading}
+                        schemaError={schemaError}
+                        onRetrySchema={onRetrySchema}
+                    />
+                )}
+
+                {activeTab === "snippets" && (() => {
+                    const favorites = snippets.filter(s => s.isFavorite);
+                    const others = snippets.filter(s => !s.isFavorite);
+
+                    return (
+                        <div className="flex flex-col h-full">
+                            <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
+                                <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">{t("studio_sql_sidebar_snippets")}</Typography>
+                            </div>
+                            <div className="flex-grow overflow-y-auto p-2 space-y-2 no-scrollbar">
+                                {snippets.length === 0 ? (
+                                    <div className="p-4 text-center">
+                                        <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark">{t("studio_sql_sidebar_no_snippets")}</Typography>
+                                    </div>
+                                ) : (
+                                    <>
+                                        {favorites.length > 0 && (
+                                            <div className="mb-4">
+                                                <Typography variant="caption" className="text-[10px] font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1 flex items-center">
+                                                    <svg className="w-3 h-3 mr-1 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd"/></svg>
+                                                    Favorites
+                                                </Typography>
+                                                <div className="space-y-2">
+                                                    {favorites.map(snippet => (
+                                                        <div
+                                                            key={snippet.id}
+                                                            className={cls("group p-2 rounded border hover:border-surface-400 dark:hover:border-surface-600 bg-white dark:bg-surface-900 transition-all cursor-pointer relative", defaultBorderMixin)}
+                                                            onClick={() => onSelectSnippet(snippet.sql)}
+                                                        >
+                                                            <Typography variant="body2" className="text-text-primary dark:text-text-primary-dark font-medium text-[13px] truncate pr-6">{snippet.name}</Typography>
+                                                            <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark text-[10px] block mt-1 truncate">{snippet.sql}</Typography>
+                                                            <IconButton
+                                                                size="smallest"
+                                                                className="absolute right-1 top-1 opacity-0 group-hover:opacity-100 text-text-disabled hover:text-red-500 transition-opacity"
+                                                                onClick={(e) => {
+                                                                    e.stopPropagation();
+                                                                    onDeleteSnippet(snippet.id);
+                                                                }}
+                                                            >
+                                                                <Trash2Icon size={iconSize.smallest}/>
+                                                            </IconButton>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        )}
+                                        {others.length > 0 && (
+                                            <div>
+                                                {favorites.length > 0 && (
+                                                    <Typography variant="caption" className="text-[10px] font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1 mt-4">
+                                                        Others
+                                                    </Typography>
+                                                )}
+                                                <div className="space-y-2">
+                                                    {others.map(snippet => (
+                                                        <div
+                                                            key={snippet.id}
+                                                            className={cls("group p-2 rounded border hover:border-surface-400 dark:hover:border-surface-600 bg-white dark:bg-surface-900 transition-all cursor-pointer relative", defaultBorderMixin)}
+                                                            onClick={() => onSelectSnippet(snippet.sql)}
+                                                        >
+                                                            <Typography variant="body2" className="text-text-primary dark:text-text-primary-dark font-medium text-[13px] truncate pr-6">{snippet.name}</Typography>
+                                                            <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark text-[10px] block mt-1 truncate">{snippet.sql}</Typography>
+                                                            <IconButton
+                                                                size="smallest"
+                                                                className="absolute right-1 top-1 opacity-0 group-hover:opacity-100 text-text-disabled hover:text-red-500 transition-opacity"
+                                                                onClick={(e) => {
+                                                                    e.stopPropagation();
+                                                                    onDeleteSnippet(snippet.id);
+                                                                }}
+                                                            >
+                                                                <Trash2Icon size={iconSize.smallest}/>
+                                                            </IconButton>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        )}
+                                    </>
+                                )}
+                            </div>
+                        </div>
+                    );
+                })()}
+
+                {activeTab === "history" && (
+                    <div className="flex flex-col h-full">
+                        <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
+                            <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">{t("studio_sql_sidebar_history")}</Typography>
+                        </div>
+                        <div className="flex-grow overflow-y-auto p-1 space-y-1 no-scrollbar">
+                            {history.length === 0 ? (
+                                <div className="p-4 text-center">
+                                    <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark">{t("studio_sql_sidebar_no_history")}</Typography>
+                                </div>
+                            ) : (
+                                [...history].reverse().map((sql, i) => (
+                                    <div
+                                        key={i}
+                                        className="p-2 py-1.5 rounded hover:bg-surface-100 dark:hover:bg-surface-950 cursor-pointer group transition-colors flex items-start"
+                                        onClick={() => onSelectSnippet(sql)}
+                                    >
+                                        <svg className="w-3 h-3 mt-1 mr-2 text-text-disabled dark:text-text-disabled-dark group-hover:text-primary transition-colors flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                                        <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark group-hover:text-text-primary dark:group-hover:text-text-primary-dark text-[11px] line-clamp-2 leading-tight flex-grow">{sql}</Typography>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

package/src/components/SQLEditor/SchemaBrowser.tsx

@@ -0,0 +1,158 @@
+
+import React, { useState } from "react";
+import { Typography, CircularProgress, cls, IconButton, defaultBorderMixin, Menu, MenuItem, Button , iconSize } from "@rebasepro/ui";
+import { CopyIcon, MoreVerticalIcon, RefreshCwIcon } from "lucide-react";
+import { TableInfo } from "./SQLEditor";
+import { ErrorView, useTranslation } from "@rebasepro/core";
+
+export const SchemaBrowser = ({
+    onTableClick,
+    schemas,
+    isSchemaLoading,
+    schemaError,
+    onRetrySchema
+}: {
+    onTableClick?: (tableName: string) => void,
+    schemas: Record<string, TableInfo[]>,
+    isSchemaLoading: boolean,
+    schemaError: string | null,
+    onRetrySchema: () => void
+}) => {
+    const [expandedSchemas, setExpandedSchemas] = useState<Record<string, boolean>>({ public: true });
+    const [expandedTables, setExpandedTables] = useState<Record<string, boolean>>({});
+    const { t } = useTranslation();
+
+    if (isSchemaLoading) return <div className="p-4 flex justify-center"><CircularProgress size="small"/></div>;
+    if (schemaError) return (
+        <div className="p-2">
+            <ErrorView error={schemaError} onRetry={onRetrySchema}/>
+        </div>
+    );
+
+    return (
+        <div className="flex flex-col h-full overflow-hidden">
+            <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
+                <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">{t("studio_schema_tables")}</Typography>
+                <IconButton size="small" onClick={onRetrySchema} title="Refresh schema">
+                    <RefreshCwIcon size={iconSize.smallest}/>
+                </IconButton>
+            </div>
+
+            <div className="flex-grow overflow-y-auto no-scrollbar p-1">
+                {Object.keys(schemas).length === 0 ? (
+                    <div className="p-4 text-center">
+                        <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark italic">{t("studio_schema_no_tables")}</Typography>
+                    </div>
+                ) : Object.entries(schemas).map(([schemaName, tables]) => (
+                    <div key={schemaName} className="mb-2">
+                        <div
+                            className="flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors"
+                            onClick={() => setExpandedSchemas(prev => ({ ...prev,
+[schemaName]: !prev[schemaName] }))}
+                        >
+                            <svg className={cls("w-3 h-3 mr-1 transition-transform", expandedSchemas[schemaName] ? "rotate-90" : "")} fill="currentColor" viewBox="0 0 20 20"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>
+                            <Typography variant="body2" className="text-text-primary dark:text-text-primary-dark font-medium text-xs truncate flex-grow">{schemaName}</Typography>
+                        </div>
+
+                        {expandedSchemas[schemaName] && (
+                            <div className="ml-3 mt-1 space-y-1">
+                                {tables.map(table => (
+                                    <div key={table.tableName}>
+                                        <div
+                                            className="flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-950 rounded transition-colors group relative"
+                                            onClick={() => setExpandedTables(prev => ({ ...prev,
+[`${schemaName}.${table.tableName}`]: !prev[`${schemaName}.${table.tableName}`] }))}
+                                        >
+                                            <svg className={cls("w-3 h-3 mr-1 transition-transform shrink-0", expandedTables[`${schemaName}.${table.tableName}`] ? "rotate-90" : "")} fill="currentColor" viewBox="0 0 20 20"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>
+                                            <svg className="w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
+                                            <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark text-xs truncate flex-1 min-w-0">{table.tableName}</Typography>
+
+                                            <div className="flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-100 dark:bg-surface-950 px-1 gap-1 rounded transition-opacity">
+                                                <IconButton
+                                                    size="smallest"
+                                                    className="transition-colors text-text-secondary hover:text-text-primary pointer-events-auto"
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        navigator.clipboard.writeText(table.tableName);
+                                                    }}
+                                                    title="CopyIcon table name"
+                                                >
+                                                    <CopyIcon size={iconSize.smallest}/>
+                                                </IconButton>
+
+                                                <Menu
+                                                    trigger={
+                                                        <IconButton
+                                                            size={"smallest"}
+                                                            className="transition-colors text-text-secondary hover:text-text-primary pointer-events-auto"
+                                                            onClick={(e) => e.stopPropagation()}
+                                                            title="Generate SQL templates"
+                                                        >
+                                                            <MoreVerticalIcon size={iconSize.smallest}/>
+                                                        </IconButton>
+                                                    }
+                                                >
+                                                    <MenuItem dense className="text-xs" onClick={(e: React.MouseEvent) => {
+                                                        e.stopPropagation();
+                                                        onTableClick?.(`SELECT * FROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} LIMIT 100;`);
+                                                    }}>SELECT (Top 100)</MenuItem>
+                                                    <MenuItem dense className="text-xs" onClick={(e: React.MouseEvent) => {
+                                                        e.stopPropagation();
+                                                        onTableClick?.(`SELECT \n  ${table.columns.map(c => c.name).join(",\n  ")}\nFROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName};`);
+                                                    }}>SELECT (All columns)</MenuItem>
+                                                    <MenuItem dense className="text-xs" onClick={(e: React.MouseEvent) => {
+                                                        e.stopPropagation();
+                                                        onTableClick?.(`INSERT INTO ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} (\n  ${table.columns.map(c => c.name).join(",\n  ")}\n) VALUES (\n  ${table.columns.map(() => "?").join(",\n  ")}\n);`);
+                                                    }}>INSERT statement</MenuItem>
+                                                    <MenuItem dense className="text-xs" onClick={(e: React.MouseEvent) => {
+                                                        e.stopPropagation();
+                                                        onTableClick?.(`UPDATE ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} \nSET \n  ${table.columns.map(c => `${c.name} = ?`).join(",\n  ")}\nWHERE id = ?;`);
+                                                    }}>UPDATE statement</MenuItem>
+                                                </Menu>
+
+                                                <Button
+                                                    variant="text"
+                                                    size="small"
+                                                    className="text-[10px] text-primary uppercase min-h-0 py-0.5 px-1 font-medium ml-1 flex-shrink-0 leading-none h-[22px]"
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        onTableClick?.(`SELECT * FROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} LIMIT 100;`);
+                                                    }}
+                                                >
+                                                    SELECT
+                                                </Button>
+                                            </div>
+                                        </div>
+
+                                        {expandedTables[`${schemaName}.${table.tableName}`] && (
+                                            <div className={cls("ml-5 mt-1 space-y-0.5 border-l", defaultBorderMixin)}>
+                                                {table.columns.map(col => (
+                                                    <div key={col.name} className="flex items-center p-1 group pl-2 hover:bg-surface-50 dark:hover:bg-surface-950 rounded-r relative min-h-[28px]">
+                                                        <svg className="w-3 h-3 mr-1.5 text-text-disabled dark:text-text-disabled-dark shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 4.5v15m6-15v15m-10.5-1.5h15c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125h-15c-.621 0-1.125.504-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125Z"/></svg>
+                                                        <Typography variant="caption" className="text-text-primary dark:text-text-primary-dark text-[11px] truncate flex-grow mr-2">{col.name}</Typography>
+                                                        <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark text-[9px] truncate mr-1 uppercase shrink-0" title={col.dataType}>{col.dataType}</Typography>
+                                                        <IconButton
+                                                            size="smallest"
+                                                            className="opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-50 dark:bg-surface-950 transition-colors pointer-events-auto"
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                navigator.clipboard.writeText(col.name);
+                                                            }}
+                                                            title="CopyIcon column name"
+                                                        >
+                                                            <CopyIcon size={iconSize.smallest}/>
+                                                        </IconButton>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};

package/src/components/SchemaVisualizer/RelationEdge.tsx

@@ -0,0 +1,102 @@
+import React, { memo } from "react";
+import { BaseEdge, getSmoothStepPath, EdgeLabelRenderer } from "@xyflow/react";
+import type { EdgeProps } from "@xyflow/react";
+import { cls } from "@rebasepro/ui";
+import type { RelationEdgeData } from "./schema-visualizer.utils";
+
+/**
+ * Custom React Flow edge that renders relations with style variations
+ * based on cardinality and direction.
+ *
+ * - Owning one-to-one: solid, primary color
+ * - Many-to-many (junction): solid, violet
+ * - Inverse: dashed, muted
+ * - Join path: dotted, muted
+ */
+const RelationEdgeInner = ({
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    data,
+    selected
+}: EdgeProps) => {
+    const edgeData = data as RelationEdgeData | undefined;
+
+    const [edgePath, labelX, labelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: 8
+    });
+
+    const isInverse = edgeData?.direction === "inverse";
+    const isJoinPath = edgeData?.hasJoinPath;
+    const isJunction = edgeData?.hasJunction;
+
+    // Determine stroke style
+    let strokeColor = "var(--rf-edge-stroke, #94a3b8)";
+    let strokeDasharray: string | undefined;
+    let strokeWidth = 1.5;
+
+    if (selected) {
+        strokeColor = "var(--rf-edge-stroke-selected, #6366f1)";
+        strokeWidth = 2.5;
+    } else if (isJunction) {
+        strokeColor = "#8b5cf6"; // violet
+    } else if (isInverse) {
+        strokeDasharray = "6 3";
+        strokeColor = "#94a3b8";
+    } else if (isJoinPath) {
+        strokeDasharray = "3 3";
+        strokeColor = "#94a3b8";
+    } else {
+        strokeColor = "#6366f1"; // primary/indigo
+    }
+
+    return (
+        <>
+            <BaseEdge
+                id={id}
+                path={edgePath}
+                style={{
+                    stroke: strokeColor,
+                    strokeWidth,
+                    strokeDasharray
+                }}
+            />
+            {edgeData?.label && (
+                <EdgeLabelRenderer>
+                    <div
+                        style={{
+                            position: "absolute",
+                            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+                            pointerEvents: "all"
+                        }}
+                        className={cls(
+                            "px-1.5 py-0.5 rounded text-[9px] font-mono font-semibold leading-none",
+                            "bg-white dark:bg-surface-900 border",
+                            selected
+                                ? "border-primary text-primary"
+                                : isJunction
+                                  ? "border-violet-200 dark:border-violet-800 text-violet-600 dark:text-violet-400"
+                                  : isInverse || isJoinPath
+                                    ? "border-surface-200 dark:border-surface-700 text-text-disabled dark:text-text-disabled-dark"
+                                    : "border-primary/30 dark:border-primary/30 text-primary"
+                        )}
+                    >
+                        {edgeData.label}
+                    </div>
+                </EdgeLabelRenderer>
+            )}
+        </>
+    );
+};
+
+export const RelationEdge = memo(RelationEdgeInner);