@libredb/studio 0.9.7 → 0.9.13

package/dist/chunk-HGPD6PWV.js

@@ -0,0 +1,1310 @@
+'use strict';
+
+var chunkY52UIFEX_js = require('./chunk-Y52UIFEX.js');
+var chunkQ6LRDBK7_js = require('./chunk-Q6LRDBK7.js');
+var vaul = require('vaul');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var framerMotion = require('framer-motion');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function Drawer(_a) {
+  var props = chunkQ6LRDBK7_js.__objRest(_a, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Root, chunkQ6LRDBK7_js.__spreadValues({ "data-slot": "drawer" }, props));
+}
+function DrawerPortal(_a) {
+  var props = chunkQ6LRDBK7_js.__objRest(_a, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(vaul.Drawer.Portal, chunkQ6LRDBK7_js.__spreadValues({ "data-slot": "drawer-portal" }, props));
+}
+function DrawerOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = chunkQ6LRDBK7_js.__objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Overlay,
+    chunkQ6LRDBK7_js.__spreadValues({
+      "data-slot": "drawer-overlay",
+      className: chunkY52UIFEX_js.cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )
+    }, props)
+  );
+}
+function DrawerContent(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = chunkQ6LRDBK7_js.__objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      vaul.Drawer.Content,
+      chunkQ6LRDBK7_js.__spreadProps(chunkQ6LRDBK7_js.__spreadValues({
+        "data-slot": "drawer-content",
+        className: chunkY52UIFEX_js.cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      })
+    )
+  ] });
+}
+function DrawerHeader(_a) {
+  var _b = _a, { className } = _b, props = chunkQ6LRDBK7_js.__objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    chunkQ6LRDBK7_js.__spreadValues({
+      "data-slot": "drawer-header",
+      className: chunkY52UIFEX_js.cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )
+    }, props)
+  );
+}
+function DrawerTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = chunkQ6LRDBK7_js.__objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Title,
+    chunkQ6LRDBK7_js.__spreadValues({
+      "data-slot": "drawer-title",
+      className: chunkY52UIFEX_js.cn("text-foreground font-semibold", className)
+    }, props)
+  );
+}
+function DrawerDescription(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = chunkQ6LRDBK7_js.__objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vaul.Drawer.Description,
+    chunkQ6LRDBK7_js.__spreadValues({
+      "data-slot": "drawer-description",
+      className: chunkY52UIFEX_js.cn("text-muted-foreground text-sm", className)
+    }, props)
+  );
+}
+
+// src/lib/connection-string-parser.ts
+function parseConnectionString(input) {
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+  if (trimmed.startsWith("mongodb://") || trimmed.startsWith("mongodb+srv://")) {
+    return parseMongoDBString(trimmed);
+  }
+  if (trimmed.startsWith("postgres://") || trimmed.startsWith("postgresql://")) {
+    return parseGenericURL(trimmed, "postgres", "5432");
+  }
+  if (trimmed.startsWith("mysql://")) {
+    return parseGenericURL(trimmed, "mysql", "3306");
+  }
+  if (trimmed.startsWith("redis://") || trimmed.startsWith("rediss://")) {
+    return parseGenericURL(trimmed, "redis", "6379");
+  }
+  if (trimmed.startsWith("oracle://")) {
+    return parseGenericURL(trimmed, "oracle", "1521");
+  }
+  if (trimmed.startsWith("mssql://") || trimmed.startsWith("sqlserver://")) {
+    return parseGenericURL(trimmed, "mssql", "1433");
+  }
+  if (/^Server\s*=/i.test(trimmed)) {
+    return parseADONetString(trimmed);
+  }
+  return null;
+}
+function parseMongoDBString(uri) {
+  const result = {
+    type: "mongodb",
+    connectionString: uri
+  };
+  try {
+    const isSRV = uri.startsWith("mongodb+srv://");
+    const withoutProtocol = uri.replace(/^mongodb(\+srv)?:\/\//, "");
+    const atIndex = withoutProtocol.indexOf("@");
+    const afterAuth = atIndex >= 0 ? withoutProtocol.slice(atIndex + 1) : withoutProtocol;
+    const slashIndex = afterAuth.indexOf("/");
+    if (slashIndex >= 0) {
+      const pathPart = afterAuth.slice(slashIndex + 1);
+      const dbName = pathPart.split("?")[0];
+      if (dbName) result.database = decodeURIComponent(dbName);
+    }
+    if (atIndex >= 0) {
+      const authPart = withoutProtocol.slice(0, atIndex);
+      const colonIndex = authPart.indexOf(":");
+      if (colonIndex >= 0) {
+        result.user = decodeURIComponent(authPart.slice(0, colonIndex));
+        result.password = decodeURIComponent(authPart.slice(colonIndex + 1));
+      } else {
+        result.user = decodeURIComponent(authPart);
+      }
+    }
+    if (!isSRV && slashIndex >= 0) {
+      const hostPart = afterAuth.slice(0, slashIndex);
+      const firstHost = hostPart.split(",")[0];
+      const [host, port] = firstHost.split(":");
+      if (host) result.host = host;
+      if (port) result.port = port;
+    }
+  } catch (e) {
+  }
+  return result;
+}
+function parseADONetString(input) {
+  try {
+    const params = {};
+    input.split(";").forEach((part) => {
+      const eq = part.indexOf("=");
+      if (eq > 0) {
+        const key = part.slice(0, eq).trim().toLowerCase();
+        const val = part.slice(eq + 1).trim();
+        params[key] = val;
+      }
+    });
+    const host = params["server"] || params["data source"] || "localhost";
+    const [hostPart, portPart] = host.split(",");
+    return {
+      type: "mssql",
+      host: hostPart || "localhost",
+      port: portPart || "1433",
+      user: params["user id"] || params["uid"] || void 0,
+      password: params["password"] || params["pwd"] || void 0,
+      database: params["database"] || params["initial catalog"] || void 0
+    };
+  } catch (e) {
+    return null;
+  }
+}
+function parseGenericURL(uri, type, defaultPort) {
+  try {
+    const url = new URL(uri);
+    return {
+      type,
+      host: url.hostname || "localhost",
+      port: url.port || defaultPort,
+      user: url.username ? decodeURIComponent(url.username) : void 0,
+      password: url.password ? decodeURIComponent(url.password) : void 0,
+      database: url.pathname.slice(1) || void 0
+      // remove leading /
+    };
+  } catch (e) {
+    return null;
+  }
+}
+
+// src/hooks/use-connection-form.ts
+function useConnectionForm({ isOpen, onConnect, editConnection, onTestConnection }) {
+  const [type, setType] = React.useState("postgres");
+  const [name, setName] = React.useState("");
+  const [host, setHost] = React.useState("localhost");
+  const [port, setPort] = React.useState("5432");
+  const [user, setUser] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [database, setDatabase] = React.useState("");
+  const [isTesting, setIsTesting] = React.useState(false);
+  const [connectionString, setConnectionString] = React.useState("");
+  const [mongoConnectionMode, setMongoConnectionMode] = React.useState("host");
+  const [environment, setEnvironment] = React.useState("local");
+  const [testResult, setTestResult] = React.useState(null);
+  const [pasteInput, setPasteInput] = React.useState("");
+  const [showPasteInput, setShowPasteInput] = React.useState(false);
+  const [showSSL, setShowSSL] = React.useState(false);
+  const [sslMode, setSSLMode] = React.useState("disable");
+  const [caCert, setCaCert] = React.useState("");
+  const [clientCert, setClientCert] = React.useState("");
+  const [clientKey, setClientKey] = React.useState("");
+  const [showAdvanced, setShowAdvanced] = React.useState(false);
+  const [serviceName, setServiceName] = React.useState("");
+  const [instanceName, setInstanceName] = React.useState("");
+  const [showSSH, setShowSSH] = React.useState(false);
+  const [sshEnabled, setSSHEnabled] = React.useState(false);
+  const [sshHost, setSSHHost] = React.useState("");
+  const [sshPort, setSSHPort] = React.useState("22");
+  const [sshUsername, setSSHUsername] = React.useState("");
+  const [sshAuthMethod, setSSHAuthMethod] = React.useState("password");
+  const [sshPassword, setSSHPassword] = React.useState("");
+  const [sshPrivateKey, setSSHPrivateKey] = React.useState("");
+  const [sshPassphrase, setSSHPassphrase] = React.useState("");
+  const isEditMode = !!editConnection;
+  React.useEffect(() => {
+    var _a, _b;
+    if (editConnection) {
+      setType(editConnection.type);
+      setName(editConnection.name);
+      setHost(editConnection.host || "localhost");
+      setPort(((_a = editConnection.port) == null ? void 0 : _a.toString()) || chunkY52UIFEX_js.getDBConfig(editConnection.type).defaultPort);
+      setUser(editConnection.user || "");
+      setPassword(editConnection.password || "");
+      setDatabase(editConnection.database || "");
+      setConnectionString(editConnection.connectionString || "");
+      setEnvironment(editConnection.environment || "local");
+      if (editConnection.connectionString) {
+        setMongoConnectionMode("connectionString");
+      }
+      if (editConnection.serviceName) {
+        setServiceName(editConnection.serviceName);
+        setShowAdvanced(true);
+      }
+      if (editConnection.instanceName) {
+        setInstanceName(editConnection.instanceName);
+        setShowAdvanced(true);
+      }
+      if (editConnection.ssl) {
+        setSSLMode(editConnection.ssl.mode);
+        setCaCert(editConnection.ssl.caCert || "");
+        setClientCert(editConnection.ssl.clientCert || "");
+        setClientKey(editConnection.ssl.clientKey || "");
+        if (editConnection.ssl.mode !== "disable") setShowSSL(true);
+      }
+      if ((_b = editConnection.sshTunnel) == null ? void 0 : _b.enabled) {
+        setSSHEnabled(true);
+        setShowSSH(true);
+        setSSHHost(editConnection.sshTunnel.host);
+        setSSHPort(editConnection.sshTunnel.port.toString());
+        setSSHUsername(editConnection.sshTunnel.username);
+        setSSHAuthMethod(editConnection.sshTunnel.authMethod);
+        setSSHPassword(editConnection.sshTunnel.password || "");
+        setSSHPrivateKey(editConnection.sshTunnel.privateKey || "");
+        setSSHPassphrase(editConnection.sshTunnel.passphrase || "");
+      }
+    }
+  }, [editConnection]);
+  React.useEffect(() => {
+    if (!isOpen) {
+      setTestResult(null);
+      setShowPasteInput(false);
+      setPasteInput("");
+      if (!editConnection) {
+        setName("");
+        setUser("");
+        setPassword("");
+        setDatabase("");
+        setConnectionString("");
+        setMongoConnectionMode("host");
+        setType("postgres");
+        setHost("localhost");
+        setPort("5432");
+      }
+    }
+  }, [isOpen, editConnection]);
+  const buildConnection = React.useCallback(() => {
+    const sslConfig = sslMode !== "disable" ? chunkQ6LRDBK7_js.__spreadValues(chunkQ6LRDBK7_js.__spreadValues(chunkQ6LRDBK7_js.__spreadValues({
+      mode: sslMode
+    }, caCert ? { caCert } : {}), clientCert ? { clientCert } : {}), clientKey ? { clientKey } : {}) : void 0;
+    const sshConfig = sshEnabled ? chunkQ6LRDBK7_js.__spreadValues(chunkQ6LRDBK7_js.__spreadValues(chunkQ6LRDBK7_js.__spreadValues({
+      enabled: true,
+      host: sshHost,
+      port: parseInt(sshPort) || 22,
+      username: sshUsername,
+      authMethod: sshAuthMethod
+    }, sshAuthMethod === "password" ? { password: sshPassword } : {}), sshAuthMethod === "privateKey" ? { privateKey: sshPrivateKey } : {}), sshPassphrase ? { passphrase: sshPassphrase } : {}) : void 0;
+    return chunkQ6LRDBK7_js.__spreadValues(chunkQ6LRDBK7_js.__spreadValues(chunkQ6LRDBK7_js.__spreadValues(chunkQ6LRDBK7_js.__spreadValues(chunkQ6LRDBK7_js.__spreadValues({
+      id: (editConnection == null ? void 0 : editConnection.id) || Math.random().toString(36).substr(2, 9),
+      name: name || `${type}-connection`,
+      type,
+      host,
+      port: parseInt(port),
+      user,
+      password,
+      database,
+      createdAt: (editConnection == null ? void 0 : editConnection.createdAt) || /* @__PURE__ */ new Date(),
+      environment,
+      color: chunkY52UIFEX_js.ENVIRONMENT_COLORS[environment]
+    }, sslConfig ? { ssl: sslConfig } : {}), sshConfig ? { sshTunnel: sshConfig } : {}), chunkY52UIFEX_js.getDBConfig(type).showConnectionStringToggle && mongoConnectionMode === "connectionString" ? {
+      connectionString,
+      host: void 0,
+      port: void 0,
+      user: void 0,
+      password: void 0
+    } : {}), type === "oracle" && serviceName ? { serviceName } : {}), type === "mssql" && instanceName ? { instanceName } : {});
+  }, [
+    sslMode,
+    caCert,
+    clientCert,
+    clientKey,
+    sshEnabled,
+    sshHost,
+    sshPort,
+    sshUsername,
+    sshAuthMethod,
+    sshPassword,
+    sshPrivateKey,
+    sshPassphrase,
+    editConnection,
+    name,
+    type,
+    host,
+    port,
+    user,
+    password,
+    database,
+    environment,
+    mongoConnectionMode,
+    connectionString,
+    serviceName,
+    instanceName
+  ]);
+  const handleTestConnection = React.useCallback(async () => {
+    setIsTesting(true);
+    setTestResult(null);
+    try {
+      const conn = buildConnection();
+      if (onTestConnection) {
+        const result = await onTestConnection(conn);
+        setTestResult({
+          success: result.success,
+          message: result.success ? `Connected successfully${result.latency ? ` (${result.latency}ms)` : ""}` : result.error || "Connection failed",
+          latency: result.latency
+        });
+      } else {
+        const response = await fetch("/api/db/test-connection", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(conn)
+        });
+        const result = await response.json();
+        setTestResult({
+          success: result.success,
+          message: result.success ? `Connected successfully${result.latency ? ` (${result.latency}ms)` : ""}` : result.error || "Connection failed",
+          latency: result.latency
+        });
+      }
+    } catch (e) {
+      setTestResult({ success: false, message: "Network error - could not reach server" });
+    } finally {
+      setIsTesting(false);
+    }
+  }, [buildConnection, onTestConnection]);
+  const handleConnect = React.useCallback(async () => {
+    setIsTesting(true);
+    setTestResult(null);
+    try {
+      const conn = buildConnection();
+      let result;
+      if (onTestConnection) {
+        result = await onTestConnection(conn);
+      } else {
+        const response = await fetch("/api/db/test-connection", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(conn)
+        });
+        result = await response.json();
+      }
+      if (result.success) {
+        onConnect(conn);
+        setName("");
+        setUser("");
+        setPassword("");
+        setDatabase("");
+        setConnectionString("");
+        setMongoConnectionMode("host");
+        setTestResult(null);
+      } else {
+        setTestResult({ success: false, message: result.error || "Connection failed" });
+      }
+    } catch (e) {
+      setTestResult({ success: false, message: "Network error - could not reach server" });
+    } finally {
+      setIsTesting(false);
+    }
+  }, [buildConnection, type, onConnect, onTestConnection]);
+  const handlePasteConnectionString = React.useCallback(() => {
+    const trimmed = pasteInput.trim();
+    if (!trimmed) return;
+    const parsed = parseConnectionString(trimmed);
+    if (!parsed) {
+      setTestResult({ success: false, message: "Could not parse connection string. Supported formats: postgres://, mysql://, mongodb://, redis://, oracle://, mssql://" });
+      return;
+    }
+    setType(parsed.type);
+    if (parsed.host) setHost(parsed.host);
+    if (parsed.port) setPort(parsed.port);
+    if (parsed.user) setUser(parsed.user);
+    if (parsed.password) setPassword(parsed.password);
+    if (parsed.database) setDatabase(parsed.database);
+    if (parsed.type === "mongodb" && parsed.connectionString) {
+      setConnectionString(parsed.connectionString);
+      setMongoConnectionMode("connectionString");
+    }
+    if (!name) {
+      const dbName = parsed.database || parsed.host || parsed.type;
+      setName(`${dbName}`);
+    }
+    setShowPasteInput(false);
+    setPasteInput("");
+    setTestResult({ success: true, message: "Connection string parsed successfully. Review the fields and connect." });
+  }, [pasteInput, name]);
+  const selectableTypes = ["postgres", "mysql", "oracle", "mssql", "mongodb", "redis"];
+  const dbTypes = selectableTypes.map((t) => {
+    const cfg = chunkY52UIFEX_js.getDBConfig(t);
+    return { value: t, label: cfg.label, icon: cfg.icon, color: cfg.color };
+  });
+  return {
+    // Connection fields
+    type,
+    setType,
+    name,
+    setName,
+    host,
+    setHost,
+    port,
+    setPort,
+    user,
+    setUser,
+    password,
+    setPassword,
+    database,
+    setDatabase,
+    connectionString,
+    setConnectionString,
+    mongoConnectionMode,
+    setMongoConnectionMode,
+    environment,
+    setEnvironment,
+    // UI state
+    isTesting,
+    testResult,
+    setTestResult,
+    pasteInput,
+    setPasteInput,
+    showPasteInput,
+    setShowPasteInput,
+    isEditMode,
+    // SSL/TLS
+    showSSL,
+    setShowSSL,
+    sslMode,
+    setSSLMode,
+    caCert,
+    setCaCert,
+    clientCert,
+    setClientCert,
+    clientKey,
+    setClientKey,
+    // Advanced (Oracle/MSSQL)
+    showAdvanced,
+    setShowAdvanced,
+    serviceName,
+    setServiceName,
+    instanceName,
+    setInstanceName,
+    // SSH Tunnel
+    showSSH,
+    setShowSSH,
+    sshEnabled,
+    setSSHEnabled,
+    sshHost,
+    setSSHHost,
+    sshPort,
+    setSSHPort,
+    sshUsername,
+    setSSHUsername,
+    sshAuthMethod,
+    setSSHAuthMethod,
+    sshPassword,
+    setSSHPassword,
+    sshPrivateKey,
+    setSSHPrivateKey,
+    sshPassphrase,
+    setSSHPassphrase,
+    // Handlers
+    handleTestConnection,
+    handleConnect,
+    handlePasteConnectionString,
+    // Derived data
+    dbTypes
+  };
+}
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(mql.matches);
+    };
+    setIsMobile(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return isMobile;
+}
+function ConnectionModal({ isOpen, onClose, onConnect, editConnection, onTestConnection }) {
+  const isMobile = useIsMobile();
+  const {
+    // Connection fields
+    type,
+    setType,
+    name,
+    setName,
+    host,
+    setHost,
+    port,
+    setPort,
+    user,
+    setUser,
+    password,
+    setPassword,
+    database,
+    setDatabase,
+    connectionString,
+    setConnectionString,
+    mongoConnectionMode,
+    setMongoConnectionMode,
+    environment,
+    setEnvironment,
+    // UI state
+    isTesting,
+    testResult,
+    setTestResult,
+    pasteInput,
+    setPasteInput,
+    showPasteInput,
+    setShowPasteInput,
+    isEditMode,
+    // SSL/TLS
+    showSSL,
+    setShowSSL,
+    sslMode,
+    setSSLMode,
+    caCert,
+    setCaCert,
+    clientCert,
+    setClientCert,
+    clientKey,
+    setClientKey,
+    // Advanced (Oracle/MSSQL)
+    showAdvanced,
+    setShowAdvanced,
+    serviceName,
+    setServiceName,
+    instanceName,
+    setInstanceName,
+    // SSH Tunnel
+    showSSH,
+    setShowSSH,
+    sshEnabled,
+    setSSHEnabled,
+    sshHost,
+    setSSHHost,
+    sshPort,
+    setSSHPort,
+    sshUsername,
+    setSSHUsername,
+    sshAuthMethod,
+    setSSHAuthMethod,
+    sshPassword,
+    setSSHPassword,
+    sshPrivateKey,
+    setSSHPrivateKey,
+    sshPassphrase,
+    setSSHPassphrase,
+    // Handlers
+    handleTestConnection,
+    handleConnect,
+    handlePasteConnectionString,
+    // Derived data
+    dbTypes
+  } = useConnectionForm({ isOpen, onClose, onConnect, editConnection, onTestConnection });
+  const formContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 h-2 w-full bg-blue-600/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { width: 0 },
+        animate: { width: "100%" },
+        className: "h-full bg-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.5)]"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 md:p-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 md:mb-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 rounded-xl bg-blue-500/10 border border-blue-500/20", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { strokeWidth: 1.5, className: "w-5 h-5 text-blue-400" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs md:text-[0.8125rem] font-medium", children: isEditMode ? "Edit Connection" : "New Connection" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-zinc-500", children: isEditMode ? "Update your database connection parameters." : "Configure your database connection parameters securely." }),
+          !isEditMode && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => setShowPasteInput(!showPasteInput),
+              className: "flex items-center gap-1.5 text-xs font-mediumr text-blue-400 hover:text-blue-300 transition-colors px-2 py-1 rounded-md hover:bg-blue-500/10",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClipboardPaste, { strokeWidth: 1.5, className: "w-3 h-3" }),
+                "Paste URL"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showPasteInput && /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          initial: { height: 0, opacity: 0 },
+          animate: { height: "auto", opacity: 1 },
+          exit: { height: 0, opacity: 0 },
+          className: "mb-6 overflow-hidden",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg border border-blue-500/20 bg-blue-500/5 space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-blue-400", children: "Paste Connection URL" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkY52UIFEX_js.Input,
+                {
+                  value: pasteInput,
+                  onChange: (e) => setPasteInput(e.target.value),
+                  placeholder: "postgres://user:pass@host:5432/db  or  mongodb://...",
+                  className: "h-9 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 text-xs font-mono flex-1",
+                  onKeyDown: (e) => e.key === "Enter" && handlePasteConnectionString()
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkY52UIFEX_js.Button,
+                {
+                  size: "sm",
+                  onClick: handlePasteConnectionString,
+                  className: "bg-blue-600 hover:bg-blue-500 text-white h-9 px-4 text-xs font-medium",
+                  children: "Parse"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-zinc-500", children: "Supports: postgres://, mysql://, mongodb://, redis://, oracle://, mssql://" })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 md:space-y-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { strokeWidth: 1.5, className: "w-3 h-3 text-zinc-500" }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { htmlFor: "name", className: "text-xs font-mediumr text-zinc-500", children: "Connection Name" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkY52UIFEX_js.Input,
+            {
+              id: "name",
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              placeholder: "My Database",
+              className: "h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Environment" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: Object.keys(chunkY52UIFEX_js.ENVIRONMENT_COLORS).map((env) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => setEnvironment(env),
+              className: chunkY52UIFEX_js.cn(
+                "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-mediumr transition-all border",
+                environment === env ? "border-white/20 bg-white/5 text-zinc-200" : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "w-2 h-2 rounded-full",
+                    style: { backgroundColor: chunkY52UIFEX_js.ENVIRONMENT_COLORS[env] }
+                  }
+                ),
+                env === "other" ? "Other" : chunkY52UIFEX_js.ENVIRONMENT_LABELS[env]
+              ]
+            },
+            env
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: dbTypes.map((db) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              setType(db.value);
+              const cfg = chunkY52UIFEX_js.getDBConfig(db.value);
+              if (cfg.defaultPort) setPort(cfg.defaultPort);
+              setTestResult(null);
+            },
+            disabled: isEditMode,
+            className: chunkY52UIFEX_js.cn(
+              "flex flex-col items-center justify-center p-3 md:p-4 rounded-xl border transition-all duration-200 gap-2 group",
+              type === db.value ? "bg-blue-600/10 border-blue-500/50 shadow-[0_0_20px_rgba(59,130,246,0.1)]" : "bg-zinc-900/50 border-white/5 hover:border-white/10 hover:bg-zinc-900",
+              isEditMode && type !== db.value && "opacity-30 cursor-not-allowed"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(db.icon, { className: chunkY52UIFEX_js.cn("w-6 h-6 mb-1 transition-transform group-hover:scale-110", type === db.value ? db.color : "text-zinc-600") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkY52UIFEX_js.cn("text-xs font-medium", type === db.value ? "text-zinc-200" : "text-zinc-500"), children: db.label })
+            ]
+          },
+          db.value
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500", children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          chunkY52UIFEX_js.getDBConfig(type).showConnectionStringToggle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-1 rounded-lg bg-zinc-900/50 border border-white/5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setMongoConnectionMode("host"),
+                className: chunkY52UIFEX_js.cn(
+                  "flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-xs font-medium transition-all",
+                  mongoConnectionMode === "host" ? "bg-blue-600/20 text-blue-400 border border-blue-500/30" : "text-zinc-500 hover:text-zinc-300"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { strokeWidth: 1.5, className: "w-3 h-3" }),
+                  "Host / Port"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => setMongoConnectionMode("connectionString"),
+                className: chunkY52UIFEX_js.cn(
+                  "flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-xs font-medium transition-all",
+                  mongoConnectionMode === "connectionString" ? "bg-blue-600/20 text-blue-400 border border-blue-500/30" : "text-zinc-500 hover:text-zinc-300"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { strokeWidth: 1.5, className: "w-3 h-3" }),
+                  "Connection String"
+                ]
+              }
+            )
+          ] }),
+          chunkY52UIFEX_js.getDBConfig(type).showConnectionStringToggle && mongoConnectionMode === "connectionString" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { strokeWidth: 1.5, className: "w-3 h-3 text-zinc-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { htmlFor: "connectionString", className: "text-xs font-mediumr text-zinc-500", children: "Connection URI" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkY52UIFEX_js.Input,
+                {
+                  id: "connectionString",
+                  value: connectionString,
+                  onChange: (e) => setConnectionString(e.target.value),
+                  placeholder: "mongodb://localhost:27017/mydb  or  mongodb+srv://...",
+                  className: "h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs font-mono"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { strokeWidth: 1.5, className: "w-3 h-3 text-zinc-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { htmlFor: "database", className: "text-xs font-mediumr text-zinc-500", children: "Database Name (optional override)" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkY52UIFEX_js.Input,
+                {
+                  id: "database",
+                  value: database,
+                  onChange: (e) => setDatabase(e.target.value),
+                  placeholder: "Extracted from URI if not provided",
+                  className: "h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs font-mono"
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { strokeWidth: 1.5, className: "w-3 h-3 text-zinc-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { htmlFor: "host", className: "text-xs font-mediumr text-zinc-500", children: "Host & Instance" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkY52UIFEX_js.Input,
+                  {
+                    id: "host",
+                    value: host,
+                    onChange: (e) => setHost(e.target.value),
+                    placeholder: "localhost",
+                    className: "md:col-span-3 h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkY52UIFEX_js.Input,
+                  {
+                    id: "port",
+                    value: port,
+                    onChange: (e) => setPort(e.target.value),
+                    className: "h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs font-mono"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Key, { strokeWidth: 1.5, className: "w-3 h-3 text-zinc-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { htmlFor: "user", className: "text-xs font-mediumr text-zinc-500", children: "Username" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkY52UIFEX_js.Input,
+                  {
+                    id: "user",
+                    value: user,
+                    onChange: (e) => setUser(e.target.value),
+                    placeholder: "postgres",
+                    className: "h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { strokeWidth: 1.5, className: "w-3 h-3 text-zinc-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { htmlFor: "password", className: "text-xs font-mediumr text-zinc-500", children: "Password" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkY52UIFEX_js.Input,
+                  {
+                    id: "password",
+                    type: "password",
+                    value: password,
+                    onChange: (e) => setPassword(e.target.value),
+                    placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                    className: "h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { strokeWidth: 1.5, className: "w-3 h-3 text-zinc-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { htmlFor: "database", className: "text-xs font-mediumr text-zinc-500", children: "Database Name" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkY52UIFEX_js.Input,
+                {
+                  id: "database",
+                  value: database,
+                  onChange: (e) => setDatabase(e.target.value),
+                  placeholder: "production_db",
+                  className: "h-10 bg-zinc-900/50 border-white/5 focus:border-blue-500/50 transition-all text-xs font-mono"
+                }
+              )
+            ] })
+          ] })
+        ] }) }),
+        (type === "oracle" || type === "mssql") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowAdvanced(!showAdvanced),
+              className: "flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-all",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { strokeWidth: 1.5, className: "w-3.5 h-3.5 text-orange-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Advanced" }),
+                (serviceName || instanceName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 px-1.5 py-0.5 rounded text-[0.625rem] bg-orange-500/10 text-orange-400 border border-orange-500/20", children: "SET" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: chunkY52UIFEX_js.cn("w-3 h-3 ml-auto transition-transform", showAdvanced && "rotate-180") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showAdvanced && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { height: 0, opacity: 0 },
+              animate: { height: "auto", opacity: 1 },
+              exit: { height: 0, opacity: 0 },
+              className: "overflow-hidden",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg border border-orange-500/10 bg-orange-500/5 space-y-3", children: [
+                type === "oracle" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Service Name" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkY52UIFEX_js.Input,
+                    {
+                      value: serviceName,
+                      onChange: (e) => setServiceName(e.target.value),
+                      placeholder: "ORCL or XEPDB1",
+                      className: "h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-xs"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-zinc-500", children: "If empty, the Database Name field is used as the service name." })
+                ] }),
+                type === "mssql" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Instance Name" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkY52UIFEX_js.Input,
+                    {
+                      value: instanceName,
+                      onChange: (e) => setInstanceName(e.target.value),
+                      placeholder: "SQLEXPRESS",
+                      className: "h-9 bg-zinc-900/50 border-white/5 focus:border-orange-500/50 text-xs"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-zinc-500", children: "For named instances (e.g. SQLEXPRESS). Leave empty for default instance." })
+                ] })
+              ] })
+            }
+          ) })
+        ] }),
+        type !== "sqlite" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowSSL(!showSSL),
+              className: "flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-all",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { strokeWidth: 1.5, className: "w-3.5 h-3.5 text-emerald-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "SSL / TLS" }),
+                sslMode !== "disable" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 px-1.5 py-0.5 rounded text-[0.625rem] bg-emerald-500/10 text-emerald-400 border border-emerald-500/20", children: sslMode.toUpperCase() }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: chunkY52UIFEX_js.cn("w-3 h-3 ml-auto transition-transform", showSSL && "rotate-180") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showSSL && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { height: 0, opacity: 0 },
+              animate: { height: "auto", opacity: 1 },
+              exit: { height: 0, opacity: 0 },
+              className: "overflow-hidden",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg border border-emerald-500/10 bg-emerald-500/5 space-y-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "SSL Mode" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: ["disable", "require", "verify-ca", "verify-full"].map((mode) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setSSLMode(mode),
+                      className: chunkY52UIFEX_js.cn(
+                        "px-2.5 py-1.5 rounded-md text-xs font-mediumr transition-all border",
+                        sslMode === mode ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400" : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+                      ),
+                      children: mode
+                    },
+                    mode
+                  )) })
+                ] }),
+                sslMode !== "disable" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "CA Certificate (PEM)" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        value: caCert,
+                        onChange: (e) => setCaCert(e.target.value),
+                        placeholder: "-----BEGIN CERTIFICATE-----\nPaste CA cert content here...\n-----END CERTIFICATE-----",
+                        rows: 3,
+                        className: "w-full rounded-md bg-zinc-900/50 border border-white/5 focus:border-emerald-500/50 text-xs font-mono text-zinc-300 p-2 resize-none placeholder:text-zinc-600"
+                      }
+                    )
+                  ] }),
+                  (sslMode === "verify-ca" || sslMode === "verify-full") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Client Certificate (PEM)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "textarea",
+                        {
+                          value: clientCert,
+                          onChange: (e) => setClientCert(e.target.value),
+                          placeholder: "-----BEGIN CERTIFICATE-----\nOptional client cert...\n-----END CERTIFICATE-----",
+                          rows: 3,
+                          className: "w-full rounded-md bg-zinc-900/50 border border-white/5 focus:border-emerald-500/50 text-xs font-mono text-zinc-300 p-2 resize-none placeholder:text-zinc-600"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Client Private Key (PEM)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "textarea",
+                        {
+                          value: clientKey,
+                          onChange: (e) => setClientKey(e.target.value),
+                          placeholder: "-----BEGIN PRIVATE KEY-----\nOptional client key...\n-----END PRIVATE KEY-----",
+                          rows: 3,
+                          className: "w-full rounded-md bg-zinc-900/50 border border-white/5 focus:border-emerald-500/50 text-xs font-mono text-zinc-300 p-2 resize-none placeholder:text-zinc-600"
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowSSH(!showSSH),
+              className: "flex items-center gap-2 w-full px-3 py-2 rounded-lg border border-white/5 hover:border-white/10 bg-zinc-900/30 text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-all",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Terminal, { strokeWidth: 1.5, className: "w-3.5 h-3.5 text-purple-500" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "SSH Tunnel" }),
+                sshEnabled && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 px-1.5 py-0.5 rounded text-[0.625rem] bg-purple-500/10 text-purple-400 border border-purple-500/20", children: "ON" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: chunkY52UIFEX_js.cn("w-3 h-3 ml-auto transition-transform", showSSH && "rotate-180") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showSSH && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              initial: { height: 0, opacity: 0 },
+              animate: { height: "auto", opacity: 1 },
+              exit: { height: 0, opacity: 0 },
+              className: "overflow-hidden",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 rounded-lg border border-purple-500/10 bg-purple-500/5 space-y-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: sshEnabled,
+                      onChange: (e) => setSSHEnabled(e.target.checked),
+                      className: "rounded border-white/20 bg-zinc-900/50"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-zinc-300", children: "Enable SSH Tunnel" })
+                ] }),
+                sshEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:col-span-3 space-y-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "SSH Host" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        chunkY52UIFEX_js.Input,
+                        {
+                          value: sshHost,
+                          onChange: (e) => setSSHHost(e.target.value),
+                          placeholder: "bastion.example.com",
+                          className: "h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Port" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        chunkY52UIFEX_js.Input,
+                        {
+                          value: sshPort,
+                          onChange: (e) => setSSHPort(e.target.value),
+                          className: "h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs font-mono"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Username" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      chunkY52UIFEX_js.Input,
+                      {
+                        value: sshUsername,
+                        onChange: (e) => setSSHUsername(e.target.value),
+                        placeholder: "ubuntu",
+                        className: "h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Auth Method" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setSSHAuthMethod("password"),
+                          className: chunkY52UIFEX_js.cn(
+                            "flex-1 px-3 py-1.5 rounded-md text-xs font-mediumr transition-all border",
+                            sshAuthMethod === "password" ? "border-purple-500/30 bg-purple-500/10 text-purple-400" : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+                          ),
+                          children: "Password"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setSSHAuthMethod("privateKey"),
+                          className: chunkY52UIFEX_js.cn(
+                            "flex-1 px-3 py-1.5 rounded-md text-xs font-mediumr transition-all border",
+                            sshAuthMethod === "privateKey" ? "border-purple-500/30 bg-purple-500/10 text-purple-400" : "border-transparent text-zinc-500 hover:text-zinc-300 hover:bg-white/5"
+                          ),
+                          children: "Private Key"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  sshAuthMethod === "password" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "SSH Password" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      chunkY52UIFEX_js.Input,
+                      {
+                        type: "password",
+                        value: sshPassword,
+                        onChange: (e) => setSSHPassword(e.target.value),
+                        placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                        className: "h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Private Key (PEM)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "textarea",
+                        {
+                          value: sshPrivateKey,
+                          onChange: (e) => setSSHPrivateKey(e.target.value),
+                          placeholder: "-----BEGIN OPENSSH PRIVATE KEY-----\nPaste private key here...\n-----END OPENSSH PRIVATE KEY-----",
+                          rows: 4,
+                          className: "w-full rounded-md bg-zinc-900/50 border border-white/5 focus:border-purple-500/50 text-xs font-mono text-zinc-300 p-2 resize-none placeholder:text-zinc-600"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Label, { className: "text-xs font-mediumr text-zinc-500", children: "Passphrase (optional)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        chunkY52UIFEX_js.Input,
+                        {
+                          type: "password",
+                          value: sshPassphrase,
+                          onChange: (e) => setSSHPassphrase(e.target.value),
+                          placeholder: "Key passphrase (if encrypted)",
+                          className: "h-9 bg-zinc-900/50 border-white/5 focus:border-purple-500/50 text-xs"
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ] })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: testResult && /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkY52UIFEX_js.cn(
+              "flex items-center gap-2 p-3 rounded-lg border text-xs",
+              testResult.success ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400" : "bg-red-500/5 border-red-500/20 text-red-400"
+            ), children: [
+              testResult.success ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { strokeWidth: 1.5, className: "w-3.5 h-3.5 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { strokeWidth: 1.5, className: "w-3.5 h-3.5 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-relaxed", children: testResult.message })
+            ] })
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 bg-zinc-900/30 p-4 md:p-6 border-t border-white/5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col-reverse gap-3 md:flex-row md:items-center md:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        chunkY52UIFEX_js.Button,
+        {
+          variant: "ghost",
+          onClick: onClose,
+          className: "w-full md:w-auto text-zinc-500 hover:text-zinc-200 hover:bg-white/5 text-xs font-medium",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkY52UIFEX_js.Button,
+          {
+            variant: "outline",
+            onClick: handleTestConnection,
+            disabled: isTesting,
+            className: "w-full md:w-auto border-white/10 text-zinc-400 hover:text-white hover:bg-white/5 text-xs font-medium h-10 px-4",
+            children: isTesting ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3 h-3 border-2 border-zinc-400/30 border-t-zinc-400 rounded-full animate-spin" }),
+              "Testing..."
+            ] }) : "Test Connection"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkY52UIFEX_js.Button,
+          {
+            onClick: handleConnect,
+            disabled: isTesting || chunkY52UIFEX_js.getDBConfig(type).showConnectionStringToggle && mongoConnectionMode === "connectionString" && !connectionString.trim(),
+            className: "w-full md:w-auto min-w-0 md:min-w-[140px] bg-blue-600 hover:bg-blue-500 text-white font-medium text-xs h-10 shadow-lg shadow-blue-900/20 group relative overflow-hidden",
+            children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isTesting ? /* @__PURE__ */ jsxRuntime.jsxs(
+              framerMotion.motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                className: "flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                  "Connecting..."
+                ]
+              },
+              "testing"
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                className: "flex items-center gap-2",
+                children: isEditMode ? "Save Changes" : "Establish Connection"
+              },
+              "connect"
+            ) })
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Drawer, { open: isOpen, onOpenChange: (open) => {
+      if (!open) onClose();
+    }, children: /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { className: "max-h-[95dvh] bg-[#0a0a0a] border-white/5 text-zinc-200 p-0 flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DrawerHeader, { className: "sr-only", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: isEditMode ? "Edit Connection" : "New Connection" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DrawerDescription, { children: "Configure database connection parameters." })
+      ] }),
+      formContent
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.Dialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkY52UIFEX_js.DialogContent,
+    {
+      className: "sm:max-w-[500px] lg:max-w-[540px] max-h-[90vh] bg-[#0a0a0a] border-white/5 text-zinc-200 p-0 overflow-hidden shadow-2xl flex flex-col",
+      showCloseButton: false,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.DialogTitle, { className: "sr-only", children: isEditMode ? "Edit Connection" : "New Connection" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkY52UIFEX_js.DialogDescription, { className: "sr-only", children: "Configure database connection parameters." }),
+        formContent
+      ]
+    }
+  ) });
+}
+
+exports.ConnectionModal = ConnectionModal;
+//# sourceMappingURL=chunk-HGPD6PWV.js.map
+//# sourceMappingURL=chunk-HGPD6PWV.js.map