admindb 1.2.0 → 2.0.0

package/dist/utils/icons.js

@@ -0,0 +1,72 @@
+"use strict";
+/**
+ * SVG Icons registry for AdminDB.
+ *
+ * Centralizes all SVG icons in a single module, providing consistent
+ * styling, clean templates, and zero inline SVG duplication.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICONS = void 0;
+exports.renderIcon = renderIcon;
+exports.ICONS = {
+    // Navigation & Core
+    menu: '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /></svg>',
+    home: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>',
+    database: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7c0-1.1.9-2 2-2h12a2 2 0 012 2M4 7c0 1.1.9 2 2 2h12a2 2 0 002-2" /></svg>',
+    table: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>',
+    query: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>',
+    designer: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>',
+    plus: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>',
+    book: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>',
+    schema: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>',
+    // Actions
+    search: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>',
+    filter: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414A1 1 0 0014 15.414V20a1 1 0 01-1 1h-2a1 1 0 01-1-1v-4.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>',
+    export: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>',
+    import: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>',
+    seed: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>',
+    edit: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>',
+    trash: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>',
+    copy: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>',
+    duplicate: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" /></svg>',
+    save: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>',
+    run: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+    inspect: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>',
+    sql: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg>',
+    // Arrows & Direction
+    chevronDown: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>',
+    chevronUp: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" /></svg>',
+    chevronLeft: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>',
+    chevronRight: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>',
+    arrowLeft: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>',
+    arrowRight: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>',
+    arrowUp: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h13M3 10l4-4m-4 4l4 4" /></svg>',
+    // Indicators & Status
+    check: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>',
+    x: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>',
+    warning: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>',
+    stats: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>',
+    key: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>',
+    dotsHorizontal: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /></svg>',
+    dotsVertical: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg>',
+    // Auth & Account
+    user: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>',
+    logout: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>',
+    lock: '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>',
+};
+/**
+ * Renders an SVG icon by name with optional custom CSS classes.
+ */
+function renderIcon(name, customClass) {
+    const svg = exports.ICONS[name];
+    if (!svg)
+        return '';
+    if (!customClass)
+        return svg;
+    // Replace existing class attribute or inject new one
+    if (svg.includes('class="')) {
+        return svg.replace(/class="[^"]*"/, `class="${customClass}"`);
+    }
+    return svg.replace('<svg', `<svg class="${customClass}"`);
+}
+//# sourceMappingURL=icons.js.map

package/dist/utils/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/utils/icons.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;AAwDH,gCAUC;AAhEY,QAAA,KAAK,GAA2B;IAC3C,oBAAoB;IACpB,IAAI,EAAE,0NAA0N;IAChO,IAAI,EAAE,mVAAmV;IACzV,QAAQ,EAAE,2SAA2S;IACrT,KAAK,EAAE,2RAA2R;IAClS,KAAK,EAAE,6NAA6N;IACpO,QAAQ,EAAE,iNAAiN;IAC3N,IAAI,EAAE,iNAAiN;IACvN,IAAI,EAAE,qbAAqb;IAC3b,MAAM,EAAE,kwBAAkwB;IAE1wB,UAAU;IACV,MAAM,EAAE,8OAA8O;IACtP,MAAM,EAAE,kXAAkX;IAC1X,MAAM,EAAE,iQAAiQ;IACzQ,MAAM,EAAE,iQAAiQ;IACzQ,IAAI,EAAE,2SAA2S;IACjT,IAAI,EAAE,yTAAyT;IAC/T,KAAK,EAAE,+TAA+T;IACtU,IAAI,EAAE,wTAAwT;IAC9T,SAAS,EAAE,mWAAmW;IAC9W,IAAI,EAAE,8RAA8R;IACpS,GAAG,EAAE,iYAAiY;IACtY,OAAO,EAAE,oZAAoZ;IAC7Z,GAAG,EAAE,kUAAkU;IAEvU,qBAAqB;IACrB,WAAW,EAAE,iNAAiN;IAC9N,SAAS,EAAE,gNAAgN;IAC3N,WAAW,EAAE,kNAAkN;IAC/N,YAAY,EAAE,+MAA+M;IAC7N,SAAS,EAAE,8NAA8N;IACzO,UAAU,EAAE,2NAA2N;IACvO,OAAO,EAAE,6NAA6N;IAEtO,sBAAsB;IACtB,KAAK,EAAE,iNAAiN;IACxN,CAAC,EAAE,uNAAuN;IAC1N,OAAO,EAAE,uUAAuU;IAChV,KAAK,EAAE,gUAAgU;IACvU,GAAG,EAAE,6TAA6T;IAClU,cAAc,EAAE,2TAA2T;IAC3U,YAAY,EAAE,wTAAwT;IAEtU,iBAAiB;IACjB,IAAI,EAAE,sQAAsQ;IAC5Q,MAAM,EAAE,4RAA4R;IACpS,IAAI,EAAE,uSAAuS;CAC9S,CAAC;AAEF;;GAEG;AACH,SAAgB,UAAU,CAAC,IAAY,EAAE,WAAoB;IAC3D,MAAM,GAAG,GAAG,aAAK,CAAC,IAAI,CAAC,CAAC;IACxB,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC;IACpB,IAAI,CAAC,WAAW;QAAE,OAAO,GAAG,CAAC;IAE7B,qDAAqD;IACrD,IAAI,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QAC5B,OAAO,GAAG,CAAC,OAAO,CAAC,eAAe,EAAE,UAAU,WAAW,GAAG,CAAC,CAAC;IAChE,CAAC;IACD,OAAO,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,eAAe,WAAW,GAAG,CAAC,CAAC;AAC5D,CAAC"}

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './csv';
+export * from './logger';
+export * from './colors';

package/dist/utils/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./common"), exports);
+__exportStar(require("./csv"), exports);
+__exportStar(require("./logger"), exports);
+__exportStar(require("./colors"), exports);
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,wCAAsB;AACtB,2CAAyB;AACzB,2CAAyB"}

package/dist/{logger.d.ts → utils/logger.d.ts}

@@ -6,5 +6,5 @@ export interface Logger {
     error(...args: unknown[]): void;
     child(scope: string): Logger;
 }
-/** Minimal console logger with level filtering and scoped children. */
+/** Minimal, color-enhanced console logger with level filtering and scoped children. */
 export declare function createLogger(level?: LogLevel, scope?: string): Logger;

package/dist/utils/logger.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLogger = createLogger;
+const colors_1 = require("./colors");
+const LEVELS = { debug: 10, info: 20, warn: 30, error: 40 };
+function formatTime() {
+    const d = new Date();
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+const BADGES = {
+    debug: colors_1.c.magenta('[debug]'),
+    info: colors_1.c.cyan('[info]'),
+    warn: colors_1.c.yellow('[warn]'),
+    error: colors_1.c.red(colors_1.c.bold('[error]')),
+};
+/** Minimal, color-enhanced console logger with level filtering and scoped children. */
+function createLogger(level = 'info', scope = 'admindb') {
+    const threshold = LEVELS[level] ?? LEVELS.info;
+    // Clean scope name (e.g. "admindb:db:users.db" -> "db:users.db")
+    const cleanScope = scope === 'admindb' || scope === 'app' ? '' : scope.replace(/^admindb:/, '');
+    const scopeTag = cleanScope ? colors_1.c.dim(colors_1.c.cyan(`[${cleanScope}]`)) : '';
+    const write = (lv, args) => {
+        if (LEVELS[lv] < threshold)
+            return;
+        const time = colors_1.c.gray(formatTime());
+        const badge = BADGES[lv];
+        const prefix = [time, badge, scopeTag].filter(Boolean).join(' ');
+        // eslint-disable-next-line no-console
+        console.log(prefix, ...args);
+    };
+    return {
+        debug: (...args) => write('debug', args),
+        info: (...args) => write('info', args),
+        warn: (...args) => write('warn', args),
+        error: (...args) => write('error', args),
+        child: (s) => createLogger(level, cleanScope ? `${cleanScope}:${s}` : s),
+    };
+}
+//# sourceMappingURL=logger.js.map

package/dist/utils/logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.js","sourceRoot":"","sources":["../../src/utils/logger.ts"],"names":[],"mappings":";;AA4BA,oCAuBC;AAnDD,qCAA6B;AAY7B,MAAM,MAAM,GAA6B,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAEtF,SAAS,UAAU;IACjB,MAAM,CAAC,GAAG,IAAI,IAAI,EAAE,CAAC;IACrB,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtD,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;AAC9E,CAAC;AAED,MAAM,MAAM,GAA6B;IACvC,KAAK,EAAE,UAAC,CAAC,OAAO,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,UAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACtB,IAAI,EAAE,UAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;IACxB,KAAK,EAAE,UAAC,CAAC,GAAG,CAAC,UAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAEF,uFAAuF;AACvF,SAAgB,YAAY,CAAC,QAAkB,MAAM,EAAE,KAAK,GAAG,SAAS;IACtE,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC;IAE/C,iEAAiE;IACjE,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAChG,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,UAAC,CAAC,GAAG,CAAC,UAAC,CAAC,IAAI,CAAC,IAAI,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,MAAM,KAAK,GAAG,CAAC,EAAY,EAAE,IAAe,EAAQ,EAAE;QACpD,IAAI,MAAM,CAAC,EAAE,CAAC,GAAG,SAAS;YAAE,OAAO;QACnC,MAAM,IAAI,GAAG,UAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjE,sCAAsC;QACtC,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO;QACL,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;QACxC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC;QACtC,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,CAAC;QACtC,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC;QACxC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;KACzE,CAAC;AACJ,CAAC"}

package/dist/views/layouts/main.hbs

@@ -1,5 +1,7 @@
+{{!-- Layout: Main Application Wrapper (renders all pages via {{{body}}}) --}}
 <!DOCTYPE html>
 <html lang="en" data-theme="admindb">
+
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -9,7 +11,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="{{basePath}}/css/app.css" />
   <script>
-    window.APP = { basePath: {{{json basePath}}}, readonly: {{{json readonly}}} };
+    window.APP = { basePath: {{{json basePath}}}, readonly: {{{json readonly}}}, serverless: {{{json serverless}}} };
     // Apply the saved theme before first paint to avoid a flash.
     (function () {
       try {
@@ -18,32 +20,52 @@
       } catch (e) {}
     })();
   </script>
+  <script src="{{basePath}}/js/icons.js" defer></script>
   <script src="{{basePath}}/js/api.js" defer></script>
   <script src="{{basePath}}/js/app.js" defer></script>
+  <script src="{{basePath}}/js/inspector.js" defer></script>
+
 </head>
 <body class="min-h-screen bg-base-200 text-base-content">
   {{#if readonly}}
     <div class="flex items-center justify-center gap-2 bg-warning/15 px-4 py-2 text-center text-sm font-semibold text-warning">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
-      Read-only mode — this database is open without write access. All writes are disabled.
+      <span class="shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
+      {{#if serverless}}
+        Serverless mode active — database is open in read-only mode. Writes and schema modifications are disabled.
+      {{else}}
+        Read-only mode — this database is open without write access. All writes are disabled.
+      {{/if}}
     </div>
   {{/if}}
-  <div class="drawer lg:drawer-open">
-    <input id="sidebar-toggle" type="checkbox" class="drawer-toggle" />
-    <div class="drawer-content flex min-h-screen flex-col">
+  {{#if noSidebar}}
+    <div class="flex min-h-screen flex-col">
       {{> navbar}}
       <main class="mx-auto w-full max-w-[1500px] flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
         {{{body}}}
       </main>
       <footer class="border-t border-base-300 px-6 py-4 text-center text-xs text-base-content/40">
-        AdminDB{{#if version}} v{{version}}{{/if}} · a browser tool for SQLite databases
+        AdminDB{{#if version}} v{{version}}{{/if}} · SQLite & PostgreSQL database administration
       </footer>
     </div>
-    <div class="drawer-side z-40">
-      <label for="sidebar-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
-      {{> sidebar}}
+  {{else}}
+    <div class="drawer lg:drawer-open">
+      <input id="sidebar-toggle" type="checkbox" class="drawer-toggle" />
+      <div class="drawer-content flex min-h-screen flex-col">
+        {{> navbar}}
+        <main class="mx-auto w-full max-w-[1500px] flex-1 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
+          {{{body}}}
+        </main>
+        <footer class="border-t border-base-300 px-6 py-4 text-center text-xs text-base-content/40">
+          AdminDB{{#if version}} v{{version}}{{/if}} · SQLite & PostgreSQL database administration
+        </footer>
+      </div>
+
+      <div class="drawer-side z-40">
+        <label for="sidebar-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
+        {{> sidebar}}
+      </div>
     </div>
-  </div>
+  {{/if}}
   <div id="toast-container" class="pointer-events-none fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-2 px-4"></div>
 </body>
 </html>

package/dist/views/pages/databases.hbs

@@ -1,73 +1,85 @@
+{{!-- Page: Multi-Database Manager Landing · URL: /databases (or / in manager mode) --}}
 <div class="space-y-6">
+
   <!-- Header -->
   <div>
     <p class="text-sm font-semibold uppercase tracking-wider text-primary">Manager</p>
     <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Databases</h1>
-    <p class="mt-1.5 text-sm text-base-content/55">Open a database to browse and edit it, or create a new one.</p>
+    <p class="mt-1.5 text-sm text-base-content/55">Connect to PostgreSQL databases, create SQLite files, or open existing local databases with configurable read/write access.</p>
   </div>
 
-  <!-- New database -->
-  <div class="app-card p-5">
-    <div class="flex flex-wrap items-end gap-3">
-      <div class="w-full max-w-sm">
-        <label class="field-label" for="new-db-name">New database name</label>
-        <input id="new-db-name" class="field-input font-mono" placeholder="e.g. analytics" autocomplete="off" spellcheck="false" />
+  <!-- Connect & Create Actions Grid -->
+  <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
+    <!-- Connect PostgreSQL Database -->
+    <div class="app-card p-5 border border-info/30 bg-info/[0.02]">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 class="flex items-center gap-2 text-sm font-bold uppercase tracking-wide text-info">
+          {{{icon "database" class="h-4 w-4"}}}
+          Connect PostgreSQL
+        </h2>
+        <span class="rounded bg-info/15 px-2 py-0.5 text-[10px] font-bold text-info">Remote / Local</span>
       </div>
-      {{#unless readonly}}
-        <button id="create-db" type="button" class="btn btn-primary btn-sm mb-0.5 gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
-          Create
-        </button>
-      {{else}}
-        <span class="mb-1 text-sm font-medium text-warning">Read-only — creating databases is disabled.</span>
-      {{/unless}}
+      <div class="space-y-3">
+        <div>
+          <label class="field-label" for="pg-conn-name">Connection Name <span class="text-base-content/40">(optional)</span></label>
+          <input id="pg-conn-name" class="field-input font-mono text-xs" placeholder="e.g. prod_postgres" autocomplete="off" spellcheck="false" />
+        </div>
+        <div>
+          <label class="field-label" for="pg-conn-uri">Connection URI <span class="chip chip-type">required</span></label>
+          <input id="pg-conn-uri" class="field-input font-mono text-xs" placeholder="postgresql://user:password@localhost:5432/mydb" autocomplete="off" spellcheck="false" />
+        </div>
+        <div>
+          <label class="flex items-center gap-2 cursor-pointer pt-0.5">
+            <input type="checkbox" id="pg-conn-readonly" class="checkbox checkbox-xs checkbox-primary rounded" />
+            <span class="text-xs font-medium text-base-content/75">Open as Read-only (block writes & schema changes)</span>
+          </label>
+        </div>
+        <div class="pt-1">
+          {{#unless readonly}}
+            <button id="connect-pg" type="button" class="btn btn-info btn-sm gap-1.5 w-full sm:w-auto">
+              {{{icon "plus" class="h-4 w-4"}}}
+              Connect PostgreSQL
+            </button>
+          {{else}}
+            <span class="text-xs font-medium text-warning">Read-only mode — connecting databases is disabled.</span>
+          {{/unless}}
+        </div>
+      </div>
+      <p class="mt-3 text-[11px] text-base-content/45 leading-relaxed">
+        Credentials are encrypted in-memory and sanitized in the UI. Passwords are never sent to the client.
+      </p>
     </div>
-    <p class="mt-2 text-xs text-base-content/40">
-      New databases are created in <code class="font-mono">{{dbDir}}</code>. Files already there are picked up
-      automatically, and any explicitly configured database paths appear here too.
-    </p>
-  </div>
 
-  <!-- Open an existing database file -->
-  {{#if allowBrowse}}
-    <div class="app-card p-5">
-      <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
-        <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Open an existing database</h2>
-        <span class="text-xs text-base-content/40">.db · .sqlite · .sqlite3</span>
-      </div>
-      <div class="flex flex-wrap items-center gap-2">
-        <input id="fs-path" class="field-input font-mono sm:!w-96" placeholder="Absolute path to a folder, e.g. C:\data" autocomplete="off" spellcheck="false" />
-        <button id="fs-go" type="button" class="btn btn-outline btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
-          Go
-        </button>
-        <button id="fs-up" type="button" class="btn btn-ghost btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h13M3 10l4-4m-4 4l4 4" /></svg>
-          Up
-        </button>
+    <!-- Create SQLite Database -->
+    <div class="app-card p-5 border border-emerald-500/30 bg-emerald-500/[0.02]">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 class="flex items-center gap-2 text-sm font-bold uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
+          {{{icon "plus" class="h-4 w-4"}}}
+          Create SQLite Database
+        </h2>
+        <span class="rounded bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold text-emerald-600 dark:text-emerald-400">File-based</span>
       </div>
-      <div class="mt-3 overflow-hidden rounded-xl border border-base-300">
-        <div id="fs-current" class="border-b border-base-200 bg-base-200/50 px-3 py-2 font-mono text-xs text-base-content/60"></div>
-        <div id="fs-listing" class="max-h-80 divide-y divide-base-200/70 overflow-auto"></div>
+      <div class="space-y-3">
+        <div>
+          <label class="field-label" for="new-db-name">Database Name <span class="chip chip-type">required</span></label>
+          <input id="new-db-name" class="field-input font-mono text-xs" placeholder="e.g. analytics" autocomplete="off" spellcheck="false" />
+        </div>
+        <div class="pt-1">
+          {{#unless readonly}}
+            <button id="create-db" type="button" class="btn btn-primary btn-sm gap-1.5 w-full sm:w-auto">
+              {{{icon "plus" class="h-4 w-4"}}}
+              Create SQLite DB
+            </button>
+          {{else}}
+            <span class="text-xs font-medium text-warning">Read-only — creating databases is disabled.</span>
+          {{/unless}}
+        </div>
       </div>
-      <p class="mt-2.5 text-xs text-base-content/45">
-        Browse the filesystem to select an existing database; opening it adds it to the list above so you can
-        switch between databases freely.
-        {{#if browseRoot}}
-          <span class="font-medium text-base-content/60">Browsing is limited to <code class="font-mono">{{browseRoot}}</code>.</span>
-        {{/if}}
-        <span class="font-medium text-warning">This server has no authentication — treat it like a remote filesystem &amp; database shell.</span>
+      <p class="mt-3 text-[11px] text-base-content/45 leading-relaxed">
+        Files are saved to <code class="font-mono">{{dbDir}}</code>. Any <code class="font-mono">.db</code> file dropped there is auto-discovered.
       </p>
     </div>
-  {{else}}
-    <div class="app-card p-5">
-      <p class="text-sm text-base-content/60">
-        <b class="text-base-content/80">File browsing is disabled.</b>
-        This server was started with specific database files, so the filesystem browser is turned off — use the
-        list of available databases below.
-      </p>
-    </div>
-  {{/if}}
+  </div>
 
   <!-- List -->
   <div>
@@ -83,9 +95,10 @@
             <thead>
               <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
                 <th class="font-semibold">Name</th>
+                <th class="font-semibold">Mode</th>
                 <th class="text-right font-semibold">Tables</th>
                 <th class="text-right font-semibold">Size</th>
-                <th class="font-semibold">Modified</th>
+                <th class="font-semibold">Status / Modified</th>
                 <th class="text-right font-semibold">Actions</th>
               </tr>
             </thead>
@@ -94,31 +107,76 @@
                 <tr class="group hover:bg-primary/[0.04]">
                   <td>
                     <a href="{{../basePath}}/{{this.id}}" class="inline-flex items-center gap-2.5">
-                      <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7c0-1.1.9-2 2-2h12a2 2 0 012 2M4 7c0 1.1.9 2 2 2h12a2 2 0 002-2" /></svg>
+                      <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg {{#if this.isPostgres}}bg-info/10 text-info group-hover:bg-info/20{{else}}bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 group-hover:bg-emerald-500/20{{/if}} transition-colors">
+                        {{{icon "database" class="h-4 w-4"}}}
                       </span>
                       <span class="min-w-0">
-                        <span class="block truncate font-mono text-[13.5px] font-semibold">{{this.name}}</span>
-                        <span class="block max-w-[220px] truncate text-[11px] text-base-content/40" title="{{this.path}}">{{this.path}}</span>
+                        <div class="flex items-center gap-1.5">
+                          <span class="truncate font-mono text-[13.5px] font-semibold">{{this.name}}</span>
+                          {{#if this.isPostgres}}
+                            <span class="rounded bg-info/15 px-1.5 py-0.2 text-[10px] font-bold text-info">PostgreSQL</span>
+                          {{else}}
+                            <span class="rounded bg-emerald-500/15 px-1.5 py-0.2 text-[10px] font-bold text-emerald-600 dark:text-emerald-400">SQLite</span>
+                          {{/if}}
+                        </div>
+                        <span class="block max-w-[260px] truncate font-mono text-[11px] text-base-content/40" title="{{this.path}}">{{this.path}}</span>
                       </span>
                     </a>
                   </td>
+                  <td class="align-middle">
+                    {{#if ../readonly}}
+                      <span class="rounded bg-warning/20 px-2 py-0.5 text-[10px] font-bold uppercase text-warning">Read-only</span>
+                    {{else}}
+                      <button type="button" class="js-toggle-db-mode rounded px-2 py-0.5 text-[10px] font-bold uppercase transition hover:opacity-80 {{#if this.readonly}}bg-warning/20 text-warning{{else}}bg-success/20 text-success{{/if}}"
+                        data-id="{{this.id}}" data-readonly="{{#if this.readonly}}true{{else}}false{{/if}}" title="Click to toggle between Writable and Read-only">
+                        {{#if this.readonly}}Read-only{{else}}Writable{{/if}} ⇄
+                      </button>
+                    {{/if}}
+                  </td>
                   <td class="text-right tabular-nums text-base-content/60">{{this.tables}}</td>
                   <td class="text-right tabular-nums text-base-content/60">{{this.sizeLabel}}</td>
                   <td class="text-[13px] text-base-content/55">{{this.modifiedLabel}}</td>
                   <td class="whitespace-nowrap text-right">
-                      <div class="row-actions">
-                        <a href="{{../basePath}}/{{this.id}}" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+                    <div class="row-actions">
+                      <div class="join">
+                        <a href="{{../basePath}}/{{this.id}}" class="btn btn-ghost btn-xs join-item gap-1 text-base-content/70 hover:text-primary">
+                          {{{icon "arrowRight" class="h-3.5 w-3.5"}}}
                           Open
                         </a>
-                        {{#unless ../readonly}}
-                          <button type="button" class="btn btn-ghost btn-xs gap-1 text-error js-delete-db" data-id="{{this.id}}">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                        <div class="dropdown dropdown-end">
+                          <label tabindex="0" role="button" class="btn btn-ghost btn-xs join-item px-1 text-base-content/60 hover:text-base-content" title="Open options">
+                            {{{icon "chevronDown" class="h-3 w-3"}}}
+                          </label>
+                          <ul tabindex="0" class="dropdown-content menu z-50 w-44 rounded-xl border border-base-300 bg-base-100 p-1.5 shadow-lift text-xs">
+                            <li>
+                              <a href="{{../basePath}}/{{this.id}}?readonly=0" class="flex items-center gap-1.5 text-success">
+                                {{{icon "check" class="h-3.5 w-3.5"}}}
+                                Open Writable
+                              </a>
+                            </li>
+                            <li>
+                              <a href="{{../basePath}}/{{this.id}}?readonly=1" class="flex items-center gap-1.5 text-warning">
+                                {{{icon "lock" class="h-3.5 w-3.5"}}}
+                                Open Read-only
+                              </a>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                      {{#unless ../readonly}}
+                        {{#if this.isPostgres}}
+                          <button type="button" class="btn btn-ghost btn-xs gap-1 text-warning js-disconnect-db" data-id="{{this.id}}" data-name="{{this.name}}" title="Disconnect this database from the manager list">
+                            {{{icon "logout" class="h-3.5 w-3.5"}}}
+                            Disconnect
+                          </button>
+                        {{else}}
+                          <button type="button" class="btn btn-ghost btn-xs gap-1 text-error js-delete-db" data-id="{{this.id}}" title="Delete database file from disk">
+                            {{{icon "trash" class="h-3.5 w-3.5"}}}
                             Delete
                           </button>
-                        {{/unless}}
-                      </div>
+                        {{/if}}
+                      {{/unless}}
+                    </div>
                   </td>
                 </tr>
               {{/each}}
@@ -128,16 +186,66 @@
       </div>
     {{else}}
       <div class="empty-state">
-        <span class="empty-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 1.1.9 2 2 2h12a2 2 0 002-2V7M4 7c0-1.1.9-2 2-2h12a2 2 0 012 2M4 7c0 1.1.9 2 2 2h12a2 2 0 002-2" /></svg>
-        </span>
+        <span class="empty-icon">{{{icon "database" class="h-7 w-7"}}}</span>
         <p class="text-sm font-medium text-base-content/70">No databases yet</p>
         <p class="max-w-sm text-sm text-base-content/45">
-          Create one above, or drop <code class="font-mono">.db</code> files into
-          <code class="font-mono">{{dbDir}}</code> and refresh.
+          Connect a PostgreSQL database or create a new SQLite database above to get started.
         </p>
       </div>
     {{/if}}
   </div>
+
+  <!-- Open an existing database file -->
+  {{#if allowBrowse}}
+    <div class="app-card p-5">
+      <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Open an existing SQLite file</h2>
+        <span class="text-xs text-base-content/40">.db · .sqlite · .sqlite3</span>
+      </div>
+      <div class="flex flex-wrap items-center gap-2">
+        <input id="fs-path" class="field-input font-mono sm:!w-96" placeholder="Absolute path to a folder, e.g. C:\data" autocomplete="off" spellcheck="false" />
+        <button id="fs-go" type="button" class="btn btn-outline btn-sm gap-1.5">
+          {{{icon "search" class="h-4 w-4"}}}
+          Go
+        </button>
+        <button id="fs-up" type="button" class="btn btn-ghost btn-sm gap-1.5">
+          {{{icon "arrowUp" class="h-4 w-4"}}}
+          Up
+        </button>
+      </div>
+      <div class="mt-2">
+        <label class="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" id="fs-readonly" class="checkbox checkbox-xs checkbox-primary rounded" />
+          <span class="text-xs font-medium text-base-content/70">Open selected file in Read-only mode</span>
+        </label>
+      </div>
+      <div class="mt-3 overflow-hidden rounded-xl border border-base-300">
+        <div id="fs-current" class="border-b border-base-200 bg-base-200/50 px-3 py-2 font-mono text-xs text-base-content/60"></div>
+        <div id="fs-listing" class="max-h-80 divide-y divide-base-200/70 overflow-auto"></div>
+      </div>
+      <p class="mt-2.5 text-xs text-base-content/45">
+        Browse the filesystem to select an existing database; opening it adds it to the list above.
+        {{#if browseRoot}}
+          <span class="font-medium text-base-content/60">Browsing is limited to <code class="font-mono">{{browseRoot}}</code>.</span>
+        {{/if}}
+      </p>
+    </div>
+  {{/if}}
+
+  <!-- Security Responsibility Notice -->
+  <div class="rounded-xl border border-warning/30 bg-warning/[0.04] p-4 text-xs text-base-content/75 leading-relaxed">
+    <div class="flex items-start gap-2.5">
+      <span class="text-warning shrink-0 mt-0.5">
+        {{{icon "warning" class="h-4 w-4"}}}
+      </span>
+      <div>
+        <span class="font-bold text-warning">Security & Protection Notice:</span>
+        AdminDB's native authentication provides basic single-user password protection. For production environments and internet-facing networks, <strong>it is entirely your responsibility to secure this interface</strong> by placing it behind your web application's own authentication system (e.g., custom Express/Next.js auth middleware, SSO/OAuth, NextAuth), a secure VPN, or an IP-whitelisted reverse proxy with HTTPS.
+      </div>
+    </div>
+  </div>
+
 </div>
 <script src="{{basePath}}/js/databases.js" defer></script>
+
+