sqlite-wasm-viewer 1.0.13 → 1.2.0

package/README.md

@@ -4,6 +4,8 @@ A simple web-based SQLite browser that lets you inspect SQLite databases created
 
 ![Viewer](screenshot.png)
 
+Demo: https://sqlite-wasm-viewer.mysticeggs.xyz/demo/
+
 # Installation
 ```
 npm install --save sqlite-wasm-viewer

package/dist/DbViewerWorker.js

@@ -88,7 +88,6 @@ var DbViewerWorker = /*#__PURE__*/function () {
                 rawStatement.bind(parameters);
               }
               while (rawStatement.step()) {
-                // Kysely expects the results to be in the object mode
                 var row = rawStatement.get({});
                 resultRows.push(row);
               }

package/dist/DbWorker.js

@@ -3,5 +3,15 @@
 var _DbViewerWorker = require("./DbViewerWorker");
 var dbWorker = new _DbViewerWorker.DbViewerWorker();
 onmessage = function onmessage(message) {
-  dbWorker.post(message);
+  try {
+    dbWorker.post(message);
+  } catch (e) {
+    if (message.data.type === 'query') {
+      postMessage({
+        type: 'error',
+        sql: message.data.query.sql,
+        errorMsg: e.toString()
+      });
+    }
+  }
 };

package/dist/ListVirtualizer.js

@@ -84,6 +84,13 @@ var ListVirtualizer = /*#__PURE__*/function () {
       first = first < 0 ? 0 : first;
       this.renderChunk(first);
     }
+  }, {
+    key: "update",
+    value: function update() {
+      var first = Math.ceil(this.scrollTop / this.itemHeight - this.screenItemsLen);
+      first = first < 0 ? 0 : first;
+      this.renderChunk(first);
+    }
   }]);
   return ListVirtualizer;
 }();

package/dist/QueryRunner.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.QueryRunner = void 0;
-var _viewerState = require("./viewerState");
+exports.queryRunner = exports.QueryRunner = void 0;
+var Bus = _interopRequireWildcard(require("./bus"));
+var _state = require("./state");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -12,41 +15,35 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var QueryRunner = /*#__PURE__*/function () {
-  function QueryRunner(db) {
+  function QueryRunner() {
+    var _this = this;
     _classCallCheck(this, QueryRunner);
-    this.db = db;
-    this.listeners = [];
+    Bus.listen('db-connector-ready', function (db) {
+      _this.db = db;
+      Bus.emit('query-runner-ready', true);
+    });
   }
   _createClass(QueryRunner, [{
     key: "runQuery",
     value: function runQuery(query, label) {
-      var currentDatabase = _viewerState.ViewerState.instance.selectedTable;
-      if (!currentDatabase) {
+      if (!this.db) {
+        return;
+      }
+      var currentTable = (0, _state.selectedTable)();
+      if (!currentTable) {
         return;
       }
       this.db.post({
         type: 'query',
         query: query,
-        databasePath: currentDatabase.databasePath,
+        databasePath: currentTable.databasePath,
         label: label
       });
-      this.listeners.forEach(function (listener) {
-        listener(query);
-      });
-    }
-  }, {
-    key: "addListener",
-    value: function addListener(listener) {
-      var _this = this;
-      if (this.listeners.indexOf(listener) !== -1) {
-        throw new Error('Listener is already added');
-      }
-      this.listeners.push(listener);
-      return function () {
-        _this.listeners.splice(_this.listeners.indexOf(listener), 1);
-      };
+      Bus.emit('query-run', query);
     }
   }]);
   return QueryRunner;
 }();
-exports.QueryRunner = QueryRunner;
+exports.QueryRunner = QueryRunner;
+var queryRunner = new QueryRunner();
+exports.queryRunner = queryRunner;

package/dist/bus.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emit = emit;
+exports.listen = listen;
+exports.remove = remove;
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var _listeners = {};
+function listen(type, listener) {
+  var listeners = _listeners[type];
+  if (!listeners) {
+    listeners = _listeners[type] = [];
+  }
+  listeners.push(listener);
+}
+function remove(type, listener) {
+  var listeners = _listeners[type];
+  if (!listeners) {
+    return;
+  }
+  var idx = listeners.indexOf(listener);
+  if (idx >= 0) {
+    listeners.splice(idx, 1);
+  }
+}
+function emit(type, event) {
+  var listeners = _listeners[type];
+  if (!listeners) {
+    return;
+  }
+  var _iterator = _createForOfIteratorHelper(listeners),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var listener = _step.value;
+      listener(event);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+}

package/dist/dbWorkerConnector.js

@@ -0,0 +1,63 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.connectToWorker = connectToWorker;
+var _dbScanner = require("./dbScanner");
+var Bus = _interopRequireWildcard(require("./bus"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function connectToWorker(config) {
+  var worker = new Worker(new URL('./DbWorker', import.meta.url), {
+    type: 'module'
+  });
+  var collectDbFilesPromise = (0, _dbScanner.collectDbFiles)(config.isSqliteDatabase);
+  var dbs = {};
+  worker.onmessage = function (message) {
+    if (message.data.type === 'onReady') {
+      var db = {
+        post: function post(mess) {
+          worker.postMessage(mess);
+        },
+        on: function on(mess) {
+          var _worker$onmessage;
+          (_worker$onmessage = worker.onmessage) === null || _worker$onmessage === void 0 ? void 0 : _worker$onmessage.call(worker, mess);
+        }
+      };
+      Bus.emit('db-connector-ready', db);
+      collectDbFilesPromise.then(function (dbFiles) {
+        dbFiles.forEach(function (dbFile) {
+          var dbFilepath = dbFile;
+          var dbName = dbFile;
+          dbs[dbFilepath] = {
+            filename: dbName,
+            tables: []
+          };
+          worker.postMessage({
+            type: 'readSchema',
+            path: dbFile
+          });
+        });
+      });
+    } else if (message.data.type === 'onSchema') {
+      var tables = message.data.schema.map(function (tableSchema) {
+        return tableSchema[0];
+      });
+      dbs[message.data.dbName].tables = tables;
+      Bus.emit('db-found', dbs[message.data.dbName]);
+    } else if (message.data.type === 'onQuery') {
+      Bus.emit('query-results', message.data);
+    } else if (message.data.type === 'error') {
+      Bus.emit('query-run', {
+        sql: message.data.sql,
+        errorMsg: message.data.errorMsg,
+        parameters: []
+      });
+    }
+  };
+  worker.postMessage({
+    type: 'init'
+  });
+}

package/dist/index.js

@@ -8,22 +8,8 @@ exports.hideViewer = hideViewer;
 exports.setConfig = setConfig;
 exports.showViewer = showViewer;
 require("./styles.css");
-var _TableView = require("./views/TableView/TableView");
-var _ExecuteSQLView = require("./views/ExecuteSQLView/ExecuteSQLView");
-var _QueryRunner = require("./QueryRunner");
-var _SqlLogView = require("./views/SqlLogView/SqlLogView");
-var _ExplorerView = require("./views/ExplorerView/ExplorerView");
-var _dbScanner = require("./dbScanner");
-var _EditCellView = require("./views/EditCellView/EditCellView");
-var _viewerState = require("./viewerState");
-var _resizeHandler = require("./utils/resizeHandler");
-var viewer = null;
-var dbListEl = null;
-var tableViewer = null;
-var middlePanel = null;
-var rightPanel = null;
-var explorerView = null;
-var queryRunner = null;
+var _viewer2 = require("./viewer");
+var _viewer;
 var defaultSqliteExtension = ['db', 'sqlite'];
 function defaultIsSqliteDatabase(filename) {
   return defaultSqliteExtension.some(function (ext) {
@@ -40,103 +26,15 @@ function setConfig(userConfig) {
   Object.freeze(config);
 }
 function showViewer() {
-  if (!viewer) {
-    viewer = document.createElement('div');
-    viewer.id = 'viewer';
-    (0, _viewerState.initState)(viewer);
-    var closeBtn = document.createElement('div');
-    closeBtn.id = 'close_btn';
-    closeBtn.innerText = 'Close';
-    closeBtn.onclick = function () {
+  if (!_viewer) {
+    _viewer = new _viewer2.Viewer(config, function () {
       hideViewer();
-    };
-    viewer.appendChild(closeBtn);
-
-    // Left Panel
-    dbListEl = document.createElement('div');
-    dbListEl.id = 'db_list';
-    viewer.appendChild(dbListEl);
-
-    // Middle Panel
-    middlePanel = document.createElement('div');
-    middlePanel.id = 'middle_panel';
-    var listResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(dbListEl, middlePanel, true, viewer);
-    viewer.appendChild(listResizeHandlerEl);
-    var tableViewEl = document.createElement('div');
-    tableViewEl.id = 'table_view';
-    middlePanel.appendChild(tableViewEl);
-    viewer.append(middlePanel);
-
-    // Right Panel
-    rightPanel = document.createElement('div');
-    rightPanel.id = 'right_panel';
-    var executeSqlView = new _ExecuteSQLView.ExecuteSQLView(rightPanel);
-    var editCellView = new _EditCellView.EditCellView(viewer, rightPanel);
-    var rightPanelResizeHandlerEl = (0, _resizeHandler.createResizeHandler)(middlePanel, rightPanel, false, viewer);
-    viewer.appendChild(rightPanelResizeHandlerEl);
-    viewer.append(rightPanel);
-    var worker = new Worker(new URL('./DbWorker', import.meta.url), {
-      type: 'module'
-    });
-    explorerView = new _ExplorerView.ExplorerView(dbListEl, viewer);
-    var collectDbFilesPromise = (0, _dbScanner.collectDbFiles)(config.isSqliteDatabase);
-    var dbs = {};
-    worker.onmessage = function (message) {
-      if (message.data.type === 'onReady') {
-        collectDbFilesPromise.then(function (dbFiles) {
-          dbFiles.forEach(function (dbFile) {
-            var dbFilepath = dbFile;
-            var dbName = dbFile;
-            dbs[dbFilepath] = {
-              filename: dbName,
-              tables: []
-            };
-            worker.postMessage({
-              type: 'readSchema',
-              path: dbFile
-            });
-          });
-        });
-      } else if (message.data.type === 'onSchema') {
-        var _explorerView;
-        var tables = message.data.schema.map(function (tableSchema) {
-          return tableSchema[0];
-        });
-        dbs[message.data.dbName].tables = tables;
-        (_explorerView = explorerView) === null || _explorerView === void 0 ? void 0 : _explorerView.addDatabaseItem(dbs[message.data.dbName]);
-      } else if (message.data.type === 'onQuery') {
-        if (message.data.label === 'tableViewColumns') {
-          var _tableViewer;
-          (_tableViewer = tableViewer) === null || _tableViewer === void 0 ? void 0 : _tableViewer.setTableColumns(message.data.result.resultRows || []);
-        }
-        if (message.data.label === 'tableView') {
-          var _tableViewer2;
-          (_tableViewer2 = tableViewer) === null || _tableViewer2 === void 0 ? void 0 : _tableViewer2.setTableResults(message.data.result.resultRows || []);
-        }
-      }
-    };
-    var db = {
-      post: function post(message) {
-        worker.postMessage(message);
-      },
-      on: function on(message) {
-        var _worker$onmessage;
-        (_worker$onmessage = worker.onmessage) === null || _worker$onmessage === void 0 ? void 0 : _worker$onmessage.call(worker, message);
-      }
-    };
-    queryRunner = new _QueryRunner.QueryRunner(db);
-    (0, _SqlLogView.initSqlLogView)(rightPanel, queryRunner);
-    tableViewer = new _TableView.TableView(viewer, tableViewEl, queryRunner);
-    executeSqlView.setDb(queryRunner);
-    editCellView.setDb(queryRunner);
-    worker.postMessage({
-      type: 'init'
     });
   }
-  document.body.appendChild(viewer);
+  document.body.appendChild(_viewer.element);
 }
 function hideViewer() {
-  if (viewer) {
-    document.body.removeChild(viewer);
+  if (_viewer) {
+    document.body.removeChild(_viewer.element);
   }
 }

package/dist/state.js

@@ -0,0 +1,46 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDirty = isDirty;
+exports.selectCell = selectCell;
+exports.selectTable = selectTable;
+exports.selectedCell = selectedCell;
+exports.selectedTable = selectedTable;
+exports.setDirty = setDirty;
+var Bus = _interopRequireWildcard(require("./bus"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _state = {
+  selectedCell: null,
+  selectedTable: null,
+  dirty: false
+};
+function selectedTable() {
+  return _state.selectedTable;
+}
+function selectedCell() {
+  return _state.selectedCell;
+}
+function isDirty() {
+  return _state.dirty;
+}
+function selectCell(cell) {
+  _state.selectedCell = cell;
+  Bus.emit('cell-selected', cell);
+}
+function selectTable(table) {
+  var _state$selectedTable;
+  var hasChanged = ((_state$selectedTable = _state.selectedTable) === null || _state$selectedTable === void 0 ? void 0 : _state$selectedTable.tableName) !== table.tableName;
+  if (hasChanged) {
+    selectCell(null);
+  }
+  _state.selectedTable = table;
+  Bus.emit('table-selected', table);
+}
+function setDirty(dirty) {
+  _state.dirty = dirty;
+  Bus.emit('db-dirtied', dirty);
+}

package/dist/styles.css

@@ -4,10 +4,14 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: whitesmoke;
+    background: linear-gradient(180deg, #f4f7fb 0%, #edf2f8 100%);
     display: flex;
-    padding: 10px;
-    padding-top: 20px;
+    padding: 12px;
+    padding-top: 44px;
+    gap: 10px;
+    color: #111827;
+    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
+    font-size: 13px;
 }
 
 #viewer * {
@@ -15,22 +19,40 @@
 }
 
 #viewer .viewHeader {
-    max-height: 20px;
-    flex-basis: 20px;
+    max-height: 34px;
+    flex-basis: 34px;
     flex-shrink: 0;
-    line-height: 1.1rem;
-    padding: 8px;
+    line-height: 1.2rem;
+    padding: 8px 10px;
     display: flex;
     align-items: center;
     gap: 8px;
-    background-color: lightgray;
+    border-bottom: 1px solid #e5e7eb;
+    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
+    font-weight: 600;
+    color: #334155;
 }
 
 #viewer #close_btn {
     position: absolute;
-    left: 10px;
-    top: 0px;
+    top: 12px;
+    left: 14px;
+    z-index: 5;
+    padding: 2px 10px;
+    min-height: 26px;
+    border-radius: 999px;
     cursor: pointer;
+    color: #334155;
+    background: #ffffff;
+    border: 1px solid #b8c6d9;
+    font-size: 12px;
+    line-height: 1.2;
+    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
+}
+
+#viewer #close_btn:hover {
+    background: #f8fafc;
+    border-color: #94a3b8;
 }
 
 #viewer #db_list {
@@ -38,24 +60,33 @@
     min-width: 180px;
     max-width: 750px;
     flex: 0 0 auto;
-    padding: 5px;
+    padding: 0;
     background-color: darkgray;
     display: flex;
     flex-direction: column;
+    border: 1px solid #dbe2ea;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #fff;
+    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
 }
 
 #viewer #tree_root {
     flex-grow: 1;
-    padding: 5px;
-    background-color: darkgray;
+    padding: 0;
+    background-color: #fff;
 }
 
 #viewer #middle_panel {
-    background-color: darkgray;
+    background: #fff;
     flex: 1;
     flex-basis: 800px;
     display: flex;
     flex-direction: column;
+    border: 1px solid #dbe2ea;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
 }
 
 #viewer #right_panel {
@@ -63,31 +94,85 @@
     min-width: 180px;
     max-width: 500px;
     flex: 0 0 auto;
-    padding: 5px;
-    background-color: darkgray;
+    padding: 0;
+    background: transparent;
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 10px;
 }
 
 #viewer #right_panel > div {
     height: 33.33%;
+    border: 1px solid #dbe2ea;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #fff;
+    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
 }
 
 #viewer .resizeDragHandler {
-    width: 8px;
+    width: 10px;
     flex-shrink: 0;
     cursor: col-resize;
+    position: relative;
 }
 
 #viewer .resizeDragHandler:hover::after {
-    border: 2px solid gray;
-    border-radius: 2px;
+    border: 2px solid #94a3b8;
+    border-radius: 999px;
     content: '';
     display: block;
-    height: 80%;
+    height: 72%;
     margin: 0 auto;
     position: relative;
-    top: 10%;
+    top: 14%;
     width: 0;
+}
+
+#viewer button,
+#viewer input,
+#viewer textarea {
+    font: inherit;
+}
+
+#viewer button {
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+    color: #1e293b;
+    padding: 4px 10px;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+#viewer button.panelActionBtn {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 9px;
+    border-bottom-right-radius: 9px;
+}
+
+#viewer button:hover:not([disabled]) {
+    border-color: #94a3b8;
+    background: #f8fafc;
+}
+
+#viewer button[disabled] {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+#viewer input,
+#viewer textarea {
+    border: 1px solid #cbd5e1;
+    background: #fff;
+    color: #111827;
+    padding: 6px 8px;
+}
+
+#viewer input:focus,
+#viewer textarea:focus {
+    outline: none;
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
 }