sqlite-wasm-viewer 1.1.1 → 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/state.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.isDirty = isDirty;
 exports.selectCell = selectCell;
 exports.selectTable = selectTable;
+exports.selectedCell = selectedCell;
 exports.selectedTable = selectedTable;
 exports.setDirty = setDirty;
 var Bus = _interopRequireWildcard(require("./bus"));
@@ -20,6 +21,9 @@ var _state = {
 function selectedTable() {
   return _state.selectedTable;
 }
+function selectedCell() {
+  return _state.selectedCell;
+}
 function isDirty() {
   return _state.dirty;
 }
@@ -28,6 +32,11 @@ function selectCell(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);
 }

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);
 }

package/dist/viewer.js

@@ -30,7 +30,7 @@ var Viewer = /*#__PURE__*/function () {
       var _this = this;
       this._container = document.createElement('div');
       this._container.id = 'viewer';
-      var closeBtn = document.createElement('div');
+      var closeBtn = document.createElement('button');
       closeBtn.id = 'close_btn';
       closeBtn.innerText = 'Close';
       closeBtn.onclick = function () {

package/dist/views/EditCellView/EditCellView.js

@@ -24,9 +24,14 @@ var EditCellView = /*#__PURE__*/function () {
     this.rootEl = rootEl;
     this.buildDom();
     Bus.listen('cell-selected', function (cell) {
-      _this.currentCell = cell;
-      _this.textArea.value = cell.value;
-      _this.textArea.select();
+      if (cell) {
+        _this.textArea.value = cell.value;
+        _this.textArea.select();
+        _this.textArea.placeholder = '';
+      } else {
+        _this.textArea.value = '';
+        _this.textArea.placeholder = 'Select cell to edit...';
+      }
     });
   }
   _createClass(EditCellView, [{
@@ -39,10 +44,12 @@ var EditCellView = /*#__PURE__*/function () {
       header.innerText = 'Edit Cell';
       container.appendChild(header);
       this.textArea = document.createElement('textarea');
+      this.textArea.placeholder = 'Select cell to edit...';
       this.textArea.id = 'execute_sql_textarea';
       container.appendChild(this.textArea);
       var executeBtn = document.createElement('button');
       executeBtn.innerText = 'Apply';
+      executeBtn.classList.add('panelActionBtn');
       executeBtn.onclick = this.handleApplyEdit.bind(this);
       container.appendChild(executeBtn);
       this.rootEl.appendChild(container);

package/dist/views/EditCellView/styles.css

@@ -1,23 +1,30 @@
 #execute_sql_container {
     display: flex;
     flex-direction: column;
+    height: 100%;
 }
 
 #execute_sql_editor {
     position: relative;
-    background-color: white;
-    height: 300px;
+    background-color: #fff;
+    height: 100%;
 }
 
 #execute_sql_textarea {
     resize: none;
-    height: 300px;
-    background-color: white;
+    height: 100%;
+    min-height: 150px;
+    background: #f8fafc;
     overflow: auto;
     white-space: nowrap;
-    font-size: 10pt;
-    font-family: monospace;
-    line-height: 1.5;
+    font-size: 12px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    line-height: 1.45;
     tab-size: 2;
-    caret-color: black;
+    caret-color: #111827;
+    color: #0f172a;
+    border: 0;
+    border-top: 1px solid #e5e7eb;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0;
 }

package/dist/views/ExecuteSQLView/ExecuteSQLView.js

@@ -32,6 +32,7 @@ var ExecuteSQLView = /*#__PURE__*/function () {
       container.appendChild(this.textArea);
       var executeBtn = document.createElement('button');
       executeBtn.innerText = 'Execute SQL';
+      executeBtn.classList.add('panelActionBtn');
       executeBtn.onclick = this.handleExecuteSql.bind(this);
       container.appendChild(executeBtn);
       this.rootEl.appendChild(container);

package/dist/views/ExecuteSQLView/styles.css

@@ -1,47 +1,51 @@
 #execute_sql_container {
     display: flex;
     flex-direction: column;
+    height: 100%;
 }
 
 #execute_sql_editor {
     position: relative;
-    background-color: white;
-    height: 300px;
+    background-color: #fff;
+    height: 100%;
 }
 
 #execute_sql_textarea, #execute_sql_highlighting {
     resize: none;
-    height: 300px;
-    background-color: white;
+    height: 100%;
+    min-height: 150px;
+    background: #f8fafc;
     overflow: auto;
     white-space: nowrap;
-    font-size: 10pt;
-    font-family: monospace;
-    line-height: 1.5;
+    font-size: 12px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    line-height: 1.45;
     tab-size: 2;
-    caret-color: black;
+    caret-color: #111827;
+    color: #0f172a;
 }
 
 #execute_sql_highlighting {
     z-index: 0;
     margin: 0;
-    padding: 2px;
+    padding: 8px;
+    border-top: 1px solid #e5e7eb;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0;
 }
 
 .highlighting {
-    color: blue;
+    color: #2563eb;
 }
 
 .sql-hl-keyword {
-    color: purple;
-    /* font-weight: 600; */
+    color: #7c3aed;
 }
 
 .sql-hl-special {
-    color: black;
+    color: #0f172a;
 }
 
 .sql-hl-string {
-    color: red;
-    /* font-weight: 600; */
+    color: #dc2626;
 }

package/dist/views/ExplorerView/ExplorerView.js

@@ -204,6 +204,6 @@ function createExplorerView(rootEl, viewEl) {
   if (!_explorerView) {
     _explorerView = new ExplorerView(rootEl, viewEl);
   } else {
-    console.warn('ExplorerView is already created');
+    // console.warn('ExplorerView is already created');
   }
 }

package/dist/views/ExplorerView/styles.css

@@ -1,19 +1,21 @@
 #explorer_tree {
-    padding: 8px;
-    padding-left: 20px;
+    padding: 8px 8px 8px 20px;
     overflow-y: auto;
     scrollbar-gutter: stable;
+    background: #fff;
 }
 
 #explorer_tree .item {
-    height: 20px;
+    height: 26px;
     white-space: nowrap;
     text-overflow: ellipsis;
-    background-color: darkgray;
+    background: transparent;
+    border-radius: 6px;
+    color: #334155;
 }
 
 #explorer_tree .item > .label {
-    padding: 2px 4px;
+    padding: 4px 8px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
@@ -24,14 +26,15 @@
 
 #explorer_tree .expand {
     position: absolute;
-    top: 1px;
+    top: 3px;
     left: -20px;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all .1s ease-in;
+    color: #64748b;
+    transition: all 0.12s ease-in;
 }
 
 #explorer_tree .expanded {
@@ -43,16 +46,25 @@
     cursor: pointer;
 }
 
+#explorer_tree .table:hover,
+#explorer_tree .db:hover {
+    background: #f1f5f9;
+}
+
 #explorer_tree .table.selected {
-    background-color: rgb(128, 128, 128);
+    background: #e2e8f0;
+    color: #0f172a;
+    font-weight: 600;
 }
 
 #viewer #full_label {
     position: absolute;
     pointer-events: none;
     z-index: 99999;
-    border: 1px solid gray;
-    background-color: darkgray;
-    padding: 2px 4px;
-    border-radius: 2px;
+    border: 1px solid #cbd5e1;
+    background-color: #fff;
+    color: #0f172a;
+    padding: 4px 8px;
+    border-radius: 6px;
+    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
 }

package/dist/views/SqlLogView/styles.css

@@ -2,9 +2,19 @@
     flex-grow: 1;
     display: flex;
     flex-direction: column;
+    height: 100%;
 }
 
 #query_log_text {
     resize: none;
     height: 100%;
+    min-height: 150px;
+    background: #f8fafc;
+    color: #1e293b;
+    border: 0;
+    border-top: 1px solid #e5e7eb;
+    border-radius: 0;
+    font-size: 12px;
+    line-height: 1.45;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 }

package/dist/views/TableView/TableView.js

@@ -310,6 +310,6 @@ function createTableView(rootEl) {
   if (!_tableView) {
     _tableView = new TableView(rootEl);
   } else {
-    console.warn('TableView is already created');
+    // console.warn('TableView is already created');
   }
 }

package/dist/views/TableView/styles.css

@@ -1,5 +1,5 @@
 #table_view {
-    padding: 5px;
+    padding: 0;
     flex: 1;
     position: relative;
     overflow: hidden;
@@ -8,77 +8,101 @@
 }
 
 #table_view_header {
-    max-height: 20px;
-    flex-basis: 20px;
+    max-height: 34px;
+    flex-basis: 34px;
     left: 0;
     right: 0;
     position: sticky;
     line-height: 1.1rem;
-    padding: 8px;
-    background-color: lightgray;
+    padding: 8px 10px;
+    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
 }
 
 #table_view_header_title {
-    padding: 8px;
+    padding-right: 8px;
 }
 
 #table_container {
-    overflow-y: scroll;
-    display: flex;
+    overflow: auto;
+    flex: 1;
+    background: #fff;
 }
 
 #table_container table {
-    flex: 1;
     table-layout: fixed;
     width: 100%;
-    background-color: whitesmoke;
+    background: #fff;
     border-collapse: collapse;
     border-spacing: 0;
 }
 
 #table_container tbody {
-    flex: 1;
-    overflow-y: scroll;
     position: relative;
 }
 
 #table_container .columnHeaderCell {
-    height: 60px;
+    height: 62px;
     position: sticky;
     top: 0;
-    background-color: darkgray;
+    padding: 6px;
+    background: #f8fafc;
     z-index: 2;
+    color: #334155;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 #table_container .columnFilterCell {
-    padding-top: 5px;
+    padding-top: 6px;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 #table_container .columnFilterCell input {
-    width: calc(100% - 8px);
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 12px;
 }
 
 #table_container td, #table_container .columnHeaderCell {
-    border: 1px solid lightgray;
+    border: 1px solid #e2e8f0;
 }
 
 #table_container td.selected {
-    background-color: lightslategray;
-    color: white;
+    background: #2563eb;
+    color: #fff;
 }
 
 #table_container td div {
     height: 40px;
     box-sizing: border-box;
-    padding: 4px;
+    padding: 10px 8px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: pre;
-    font-size: 15px;
-    line-height: 1.1em;
+    font-size: 13px;
+    line-height: 1.2em;
+}
+
+#table_container tbody tr:nth-child(even) td:not(.selected) {
+    background: #fcfdff;
+}
+
+#table_container tbody tr:hover td:not(.selected) {
+    background: #eff6ff;
+}
+
+#table_container tbody tr:hover td.selected {
+    background: #2563eb;
 }
 
 #table_container .nullValue {
     font-style: italic;
-    color: gray;
+    color: #64748b;
+}
+
+::placeholder {
+    color: #959595; /* Use any color format (HEX, RGB, Name) */
+    opacity: 1;    /* Required for Firefox to show full color */
 }

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "sqlite-wasm-viewer",
-  "version": "1.1.1",
-  "description": "An SQLite OPFS database viewer that enables database inspection and SQL command execution.",
+  "version": "1.2.0",
+  "description": "Browser SQLite OPFS viewer for @sqlite.org/sqlite-wasm: inspect OPFS-backed databases, run SQL, and filter tables.",
   "main": "dist/index.js",
+  "homepage": "https://github.com/mifozski/sqlite-wasm-viewer#readme",
+  "bugs": {
+    "url": "https://github.com/mifozski/sqlite-wasm-viewer/issues"
+  },
   "scripts": {
     "build": "yarn build-transpile && yarn build-copy-css",
     "build-transpile": "babel src --extensions .ts --out-dir=dist --presets=@babel/env,@babel/typescript",
@@ -11,10 +15,16 @@
   },
   "keywords": [
     "sqlite",
+    "sqlite-wasm",
     "opfs",
+    "opfs-viewer",
     "wasm",
+    "viewer",
+    "browser",
     "sql",
-    "database"
+    "database",
+    "inspector",
+    "sqlite-wasm-viewer"
   ],
   "author": {
     "name": "Andrey Efimov",