tablegraph 0.1.0

package/README.md

@@ -0,0 +1,59 @@
+# TableGraph
+
+Visualize your database schema as an interactive graph directly in your browser.
+
+<p>
+  <img src="./assets/logo.png" alt="TableGraph logo" width="250" />
+</p>
+
+## What it does
+
+TableGraph connects to your database, reads schema metadata, and opens a local web interface where you can inspect tables, columns, and relationships visually.
+
+## Install
+
+### Global install
+
+```bash
+npm install -g tablegraph
+```
+
+### Or run with npx
+
+```bash
+npx tablegraph --driver postgres --url <connection-url>
+```
+
+## Usage
+
+```bash
+tablegraph --driver postgres --url postgresql://username:password@localhost:5432/db_name
+```
+
+Then open:
+
+```txt
+http://localhost:3001
+```
+
+## Example
+
+```bash
+tablegraph --driver postgres --url postgresql://postgres:postgres@localhost:5434/postgres
+```
+
+## Visualization
+
+<p align="center">
+  <img src="./assets/example.png" alt="TableGraph web visualization" />
+</p>
+
+## Supported drivers
+
+- postgres
+
+## Notes
+
+- Make sure your database is running and accessible
+- Ensure your schema is initialized and contains tables
+- TableGraph runs locally and serves the visualization in your browser

package/dist/cli/index.js

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+import { getDatabaseInfo, supportedDriversList, } from "../core/index.js";
+import { startServer } from "../server/index.js";
+const cliFlags = ["--driver", "--url", "--help"];
+const cliFlagsSet = new Set(cliFlags);
+const supportedDriversSet = new Set(supportedDriversList);
+function invalidUrl(value) {
+    try {
+        new URL(value);
+        return false;
+    }
+    catch {
+        return true;
+    }
+}
+function printHelp() {
+    console.log(`
+Usage:
+  tablegraph [options]
+
+Options:
+  --driver <postgres>
+  --url <connection-url>
+  --help
+
+Examples:
+  tablegraph --driver postgres --url postgresql://username:password@localhost:5432/db_name
+`.trim());
+}
+function parseArgs(args) {
+    const options = {};
+    if (args.includes("--help")) {
+        printHelp();
+        process.exit(0);
+    }
+    if (args.length === 0) {
+        printHelp();
+        process.exit(1);
+    }
+    if (args.length % 2 !== 0) {
+        throw new Error("Flags must be provided as pairs: --flag value.");
+    }
+    for (let i = 0; i < args.length; i += 2) {
+        const flag = args[i];
+        const value = args[i + 1];
+        if (!cliFlagsSet.has(flag)) {
+            throw new Error(`Unsupported flag "${flag}". Valid flags: ${cliFlags.join(", ")}.`);
+        }
+        if (flag === "--help") {
+            continue;
+        }
+        if (!value || value.startsWith("--")) {
+            throw new Error(`Missing value for flag "${flag}".`);
+        }
+        if (flag === "--driver") {
+            if (!supportedDriversSet.has(value)) {
+                throw new Error(`Unsupported driver "${value}". Valid drivers: ${supportedDriversList.join(", ")}.`);
+            }
+            options.driver = value;
+            continue;
+        }
+        if (flag === "--url") {
+            if (invalidUrl(value)) {
+                throw new Error(`Invalid URL "${value}".`);
+            }
+            options.url = value;
+        }
+    }
+    if (!options.driver) {
+        throw new Error('Missing required flag "--driver".');
+    }
+    if (!options.url) {
+        throw new Error('Missing required flag "--url".');
+    }
+    return {
+        driver: options.driver,
+        url: options.url,
+    };
+}
+async function main() {
+    const argList = process.argv.slice(2);
+    const options = parseArgs(argList);
+    const dbInfo = await getDatabaseInfo(options.driver, options.url);
+    if (dbInfo.tables.length === 0) {
+        console.warn([
+            "Warning: no tables were found in the database.",
+            "Make sure you are connecting to the correct database and that your schema has already been initialized.",
+        ].join("\n"));
+    }
+    await startServer(dbInfo);
+}
+main().catch((error) => {
+    const isDev = process.env.NODE_ENV === "development";
+    if (error instanceof Error) {
+        console.error(`Error: ${error.message}`);
+        if (isDev) {
+            console.error(error.stack);
+        }
+        process.exit(1);
+    }
+    console.error("An unexpected error occurred.");
+    if (isDev) {
+        console.error(error);
+    }
+    process.exit(1);
+});

package/dist/core/core.js

@@ -0,0 +1,108 @@
+import { Pool } from "pg";
+export const supportedDriversList = ["postgres"];
+async function getTables(pool) {
+    const query = `
+    SELECT
+      table_schema,
+      table_name,
+      table_type
+    FROM information_schema.tables
+    WHERE table_schema NOT IN ('pg_catalog', 'information_schema')
+      AND table_type = 'BASE TABLE'
+    ORDER BY table_schema, table_name;
+  `;
+    const result = await pool.query(query);
+    return result.rows;
+}
+async function getColumns(pool) {
+    const query = `
+    SELECT
+      table_schema,
+      table_name,
+      column_name,
+      ordinal_position,
+      udt_name
+    FROM information_schema.columns
+    WHERE table_schema NOT IN ('pg_catalog', 'information_schema')
+    ORDER BY table_schema, table_name, ordinal_position;
+  `;
+    const result = await pool.query(query);
+    return result.rows;
+}
+async function getForeignKeys(pool) {
+    const query = `
+    SELECT
+      tc.constraint_name,
+      tc.table_schema AS source_schema,
+      tc.table_name AS source_table,
+      kcu.column_name AS source_column,
+      ccu.table_schema AS target_schema,
+      ccu.table_name AS target_table,
+      ccu.column_name AS target_column
+    FROM information_schema.table_constraints AS tc
+    JOIN information_schema.key_column_usage AS kcu
+      ON tc.constraint_name = kcu.constraint_name
+      AND tc.table_schema = kcu.table_schema
+    JOIN information_schema.constraint_column_usage AS ccu
+      ON ccu.constraint_name = tc.constraint_name
+      AND ccu.table_schema = tc.table_schema
+    WHERE tc.constraint_type = 'FOREIGN KEY'
+      AND tc.table_schema NOT IN ('pg_catalog', 'information_schema')
+    ORDER BY
+      source_schema,
+      source_table,
+      tc.constraint_name,
+      source_column;
+  `;
+    const result = await pool.query(query);
+    return result.rows;
+}
+function makeTableKey(schema, table) {
+    return `${schema}.${table}`;
+}
+export async function getDatabaseInfo(driver, url) {
+    switch (driver) {
+        case "postgres": {
+            const pool = new Pool({ connectionString: url });
+            try {
+                const [allTables, allColumns, allForeignKeys] = await Promise.all([
+                    getTables(pool),
+                    getColumns(pool),
+                    getForeignKeys(pool),
+                ]);
+                const columnsByTable = new Map();
+                for (const column of allColumns) {
+                    const key = makeTableKey(column.table_schema, column.table_name);
+                    const current = columnsByTable.get(key) ?? [];
+                    current.push({
+                        name: column.column_name,
+                        position: Number(column.ordinal_position),
+                        type: column.udt_name,
+                    });
+                    columnsByTable.set(key, current);
+                }
+                const tables = allTables.map((table) => {
+                    const key = makeTableKey(table.table_schema, table.table_name);
+                    return {
+                        schema: table.table_schema,
+                        name: table.table_name,
+                        columns: columnsByTable.get(key) ?? [],
+                    };
+                });
+                const relations = allForeignKeys.map((fk) => ({
+                    name: fk.constraint_name,
+                    fromSchema: fk.source_schema,
+                    fromTable: fk.source_table,
+                    fromColumn: fk.source_column,
+                    toSchema: fk.target_schema,
+                    toTable: fk.target_table,
+                    toColumn: fk.target_column,
+                }));
+                return { tables, relations };
+            }
+            finally {
+                await pool.end();
+            }
+        }
+    }
+}

package/dist/core/index.js

@@ -0,0 +1 @@
+export { getDatabaseInfo, supportedDriversList, } from "./core.js";

package/dist/server/index.js

@@ -0,0 +1 @@
+export { startServer } from "./start-server.js";

package/dist/server/start-server.js

@@ -0,0 +1,61 @@
+import * as http from "node:http";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import { sendJson, sendResponse, sendText, getContentType, readStaticFile, resolveStaticFilePath, } from "./utils.js";
+export async function startServer(dbInfo, options = {}) {
+    const port = options.port ?? 3001;
+    const isDev = process.env.NODE_ENV === "development";
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+    const webDir = path.resolve(__dirname, "../web");
+    const cachedResources = new Map();
+    const server = http.createServer(async (req, res) => {
+        const method = req.method ?? "GET";
+        const requestUrl = req.url ?? "/";
+        if (method !== "GET") {
+            sendText(res, 405, "Method Not Allowed");
+            return;
+        }
+        if (requestUrl === "/api/db-info") {
+            sendJson(res, 200, dbInfo);
+            return;
+        }
+        if (isDev) {
+            sendText(res, 404, "Frontend assets are served by the Vite dev server in development.");
+            return;
+        }
+        const filePath = resolveStaticFilePath(webDir, requestUrl);
+        if (filePath === null) {
+            sendText(res, 403, "Forbidden");
+            return;
+        }
+        try {
+            let file = cachedResources.get(filePath);
+            if (!file) {
+                file = await readStaticFile(filePath);
+                cachedResources.set(filePath, file);
+            }
+            sendResponse(res, {
+                statusCode: 200,
+                contentType: getContentType(filePath),
+                body: file,
+            });
+        }
+        catch {
+            sendText(res, 404, "Not Found");
+        }
+    });
+    await new Promise((resolve, reject) => {
+        server.once("error", reject);
+        server.listen(port, () => {
+            if (isDev) {
+                console.log(`API server running at http://localhost:${port}`);
+                console.log("Frontend is served by the Vite dev server.");
+            }
+            else {
+                console.log(`View your database graph at http://localhost:${port}`);
+            }
+            resolve();
+        });
+    });
+}

package/dist/server/utils.js

@@ -0,0 +1,53 @@
+import path from "node:path";
+import fs from "node:fs/promises";
+export function sendResponse(res, options) {
+    const { statusCode, contentType = "text/plain; charset=utf-8", body = "", } = options;
+    res.statusCode = statusCode;
+    res.setHeader("Content-Type", contentType);
+    res.end(body);
+}
+export function sendText(res, statusCode, body = "") {
+    sendResponse(res, {
+        statusCode,
+        contentType: "text/plain; charset=utf-8",
+        body,
+    });
+}
+export function sendJson(res, statusCode, data) {
+    sendResponse(res, {
+        statusCode,
+        contentType: "application/json; charset=utf-8",
+        body: JSON.stringify(data),
+    });
+}
+const MIME_TYPES = {
+    ".html": "text/html; charset=utf-8",
+    ".js": "text/javascript; charset=utf-8",
+    ".css": "text/css; charset=utf-8",
+    ".json": "application/json; charset=utf-8",
+    ".svg": "image/svg+xml",
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".webp": "image/webp",
+    ".ico": "image/x-icon",
+};
+export function getContentType(filePath) {
+    const extension = path.extname(filePath).toLowerCase();
+    return MIME_TYPES[extension] ?? "application/octet-stream";
+}
+export function getPathname(requestUrl) {
+    return decodeURIComponent(requestUrl.split("?")[0] ?? "/");
+}
+export function resolveStaticFilePath(rootDir, requestUrl) {
+    const pathname = decodeURIComponent(requestUrl.split("?")[0] ?? "/");
+    const relativePath = pathname === "/" ? "index.html" : pathname.replace(/^\/+/, "");
+    const filePath = path.resolve(rootDir, relativePath);
+    if (!filePath.startsWith(rootDir)) {
+        return null;
+    }
+    return filePath;
+}
+export async function readStaticFile(filePath) {
+    return fs.readFile(filePath);
+}

package/dist/web/assets/index-lXWmY9mA.css

@@ -0,0 +1 @@
+html,body,#root{width:100%;height:100%;margin:0;font-family:Inter,system-ui,sans-serif}.react-flow{--xy-edge-stroke-default:#b1b1b7;--xy-edge-stroke-width-default:1;--xy-edge-stroke-selected-default:#555;--xy-connectionline-stroke-default:#b1b1b7;--xy-connectionline-stroke-width-default:1;--xy-attribution-background-color-default:#ffffff80;--xy-minimap-background-color-default:#fff;--xy-minimap-mask-background-color-default:#f0f0f099;--xy-minimap-mask-stroke-color-default:transparent;--xy-minimap-mask-stroke-width-default:1;--xy-minimap-node-background-color-default:#e2e2e2;--xy-minimap-node-stroke-color-default:transparent;--xy-minimap-node-stroke-width-default:2;--xy-background-color-default:transparent;--xy-background-pattern-dots-color-default:#91919a;--xy-background-pattern-lines-color-default:#eee;--xy-background-pattern-cross-color-default:#e2e2e2;background-color:var(--xy-background-color,var(--xy-background-color-default));--xy-node-color-default:inherit;--xy-node-border-default:1px solid #1a192b;--xy-node-background-color-default:#fff;--xy-node-group-background-color-default:#f0f0f040;--xy-node-boxshadow-hover-default:0 1px 4px 1px #00000014;--xy-node-boxshadow-selected-default:0 0 0 .5px #1a192b;--xy-node-border-radius-default:3px;--xy-handle-background-color-default:#1a192b;--xy-handle-border-color-default:#fff;--xy-selection-background-color-default:#0059dc14;--xy-selection-border-default:1px dotted #0059dccc;--xy-controls-button-background-color-default:#fefefe;--xy-controls-button-background-color-hover-default:#f4f4f4;--xy-controls-button-color-default:inherit;--xy-controls-button-color-hover-default:inherit;--xy-controls-button-border-color-default:#eee;--xy-controls-box-shadow-default:0 0 2px 1px #00000014;--xy-edge-label-background-color-default:#fff;--xy-edge-label-color-default:inherit;--xy-resize-background-color-default:#3367d9;direction:ltr}.react-flow.dark{--xy-edge-stroke-default:#3e3e3e;--xy-edge-stroke-width-default:1;--xy-edge-stroke-selected-default:#727272;--xy-connectionline-stroke-default:#b1b1b7;--xy-connectionline-stroke-width-default:1;--xy-attribution-background-color-default:#96969640;--xy-minimap-background-color-default:#141414;--xy-minimap-mask-background-color-default:#3c3c3c99;--xy-minimap-mask-stroke-color-default:transparent;--xy-minimap-mask-stroke-width-default:1;--xy-minimap-node-background-color-default:#2b2b2b;--xy-minimap-node-stroke-color-default:transparent;--xy-minimap-node-stroke-width-default:2;--xy-background-color-default:#141414;--xy-background-pattern-dots-color-default:#777;--xy-background-pattern-lines-color-default:#777;--xy-background-pattern-cross-color-default:#777;--xy-node-color-default:#f8f8f8;--xy-node-border-default:1px solid #3c3c3c;--xy-node-background-color-default:#1e1e1e;--xy-node-group-background-color-default:#f0f0f040;--xy-node-boxshadow-hover-default:0 1px 4px 1px #ffffff14;--xy-node-boxshadow-selected-default:0 0 0 .5px #999;--xy-handle-background-color-default:#bebebe;--xy-handle-border-color-default:#1e1e1e;--xy-selection-background-color-default:#c8c8dc14;--xy-selection-border-default:1px dotted #c8c8dccc;--xy-controls-button-background-color-default:#2b2b2b;--xy-controls-button-background-color-hover-default:#3e3e3e;--xy-controls-button-color-default:#f8f8f8;--xy-controls-button-color-hover-default:#fff;--xy-controls-button-border-color-default:#5b5b5b;--xy-controls-box-shadow-default:0 0 2px 1px #00000014;--xy-edge-label-background-color-default:#141414;--xy-edge-label-color-default:#f8f8f8}.react-flow__background{background-color:var(--xy-background-color-props,var(--xy-background-color,var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke,var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width,var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke,var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width,var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{pointer-events:none;position:absolute;overflow:visible}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:.5s linear infinite dashdraw}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected,var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;user-select:none}.react-flow__arrowhead polyline{stroke:var(--xy-edge-stroke,var(--xy-edge-stroke-default))}.react-flow__arrowhead polyline.arrowclosed{fill:var(--xy-edge-stroke,var(--xy-edge-stroke-default))}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:.5s linear infinite dashdraw}svg.react-flow__connectionline{z-index:1001;position:absolute;overflow:visible}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{-webkit-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default;position:absolute}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:0 0;pointer-events:none}.react-flow__nodesselection-rect{pointer-events:all;cursor:grab;position:absolute}.react-flow__handle{pointer-events:none;background-color:var(--xy-handle-background-color,var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color,var(--xy-handle-border-color-default));border-radius:100%;width:6px;min-width:5px;height:6px;min-height:5px;position:absolute}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;bottom:0;left:50%;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__pane.selection .react-flow__panel{pointer-events:none}.react-flow__panel{z-index:5;margin:15px;position:absolute}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.top.center,.react-flow__panel.bottom.center{left:50%;transform:translate(-15px)translate(-50%)}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.left.center,.react-flow__panel.right.center{top:50%;transform:translateY(-15px)translateY(-50%)}.react-flow__attribution{background:var(--xy-attribution-background-color,var(--xy-attribution-background-color-default));margin:0;padding:2px 3px;font-size:10px}.react-flow__attribution a{color:#999;text-decoration:none}@keyframes dashdraw{0%{stroke-dashoffset:10px}}.react-flow__edgelabel-renderer{pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__viewport-portal{-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;left:0}.react-flow__minimap{background:var(--xy-minimap-background-color-props,var(--xy-minimap-background-color,var(--xy-minimap-background-color-default)))}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var(--xy-minimap-mask-background-color-props,var(--xy-minimap-mask-background-color,var(--xy-minimap-mask-background-color-default)));stroke:var(--xy-minimap-mask-stroke-color-props,var(--xy-minimap-mask-stroke-color,var(--xy-minimap-mask-stroke-color-default)));stroke-width:var(--xy-minimap-mask-stroke-width-props,var(--xy-minimap-mask-stroke-width,var(--xy-minimap-mask-stroke-width-default)))}.react-flow__minimap-node{fill:var(--xy-minimap-node-background-color-props,var(--xy-minimap-node-background-color,var(--xy-minimap-node-background-color-default)));stroke:var(--xy-minimap-node-stroke-color-props,var(--xy-minimap-node-stroke-color,var(--xy-minimap-node-stroke-color-default)));stroke-width:var(--xy-minimap-node-stroke-width-props,var(--xy-minimap-node-stroke-width,var(--xy-minimap-node-stroke-width-default)))}.react-flow__background-pattern.dots{fill:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-dots-color-default)))}.react-flow__background-pattern.lines{stroke:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-lines-color-default)))}.react-flow__background-pattern.cross{stroke:var(--xy-background-pattern-color-props,var(--xy-background-pattern-color,var(--xy-background-pattern-cross-color-default)))}.react-flow__controls{box-shadow:var(--xy-controls-box-shadow,var(--xy-controls-box-shadow-default));flex-direction:column;display:flex}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{background:var(--xy-controls-button-background-color,var(--xy-controls-button-background-color-default));border:none;border-bottom:1px solid var(--xy-controls-button-border-color-props,var(--xy-controls-button-border-color,var(--xy-controls-button-border-color-default)));width:26px;height:26px;color:var(--xy-controls-button-color-props,var(--xy-controls-button-color,var(--xy-controls-button-color-default)));cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;padding:4px;display:flex}.react-flow__controls-button svg{fill:currentColor;width:100%;max-width:12px;max-height:12px}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{border-radius:var(--xy-node-border-radius,var(--xy-node-border-radius-default));width:150px;color:var(--xy-node-color,var(--xy-node-color-default));text-align:center;border:var(--xy-node-border,var(--xy-node-border-default));background-color:var(--xy-node-background-color,var(--xy-node-background-color-default));padding:10px;font-size:12px}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover,var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected,var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color,var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color,var(--xy-selection-background-color-default));border:var(--xy-selection-border,var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var(--xy-controls-button-background-color-hover-props,var(--xy-controls-button-background-color-hover,var(--xy-controls-button-background-color-hover-default)));color:var(--xy-controls-button-color-hover-props,var(--xy-controls-button-color-hover,var(--xy-controls-button-color-hover-default)))}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__controls.horizontal .react-flow__controls-button{border-bottom:none;border-right:1px solid var(--xy-controls-button-border-color-props,var(--xy-controls-button-border-color,var(--xy-controls-button-border-color-default)))}.react-flow__controls.horizontal .react-flow__controls-button:last-child{border-right:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{background-color:var(--xy-resize-background-color,var(--xy-resize-background-color-default));border:1px solid #fff;border-radius:1px;width:5px;height:5px;translate:-50% -50%}.react-flow__resize-control.handle.left{top:50%;left:0}.react-flow__resize-control.handle.right{top:50%;left:100%}.react-flow__resize-control.handle.top{top:0;left:50%}.react-flow__resize-control.handle.bottom{top:100%;left:50%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color,var(--xy-resize-background-color-default));border-style:solid;border-width:0}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;height:100%;top:0;transform:translate(-50%)}.react-flow__resize-control.line.left{border-left-width:1px;left:0}.react-flow__resize-control.line.right{border-right-width:1px;left:100%}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{width:100%;height:1px;left:0;transform:translateY(-50%)}.react-flow__resize-control.line.top{border-top-width:1px;top:0}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color,var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color,var(--xy-edge-label-color-default))}