eruda-storage 0.1.0

package/dist/index.js

@@ -0,0 +1,1313 @@
+let storagePatched = false;
+const STORAGE_CHANGE_EVENT = "eruda-storage-change";
+const dispatchStorageChange = () => {
+    window.dispatchEvent(new Event(STORAGE_CHANGE_EVENT));
+};
+const patchStorageMutations = () => {
+    if (storagePatched)
+        return;
+    storagePatched = true;
+    const setItem = Storage.prototype.setItem;
+    Storage.prototype.setItem = function patchedSetItem(key, value) {
+        const result = setItem.call(this, key, value);
+        dispatchStorageChange();
+        return result;
+    };
+    const removeItem = Storage.prototype.removeItem;
+    Storage.prototype.removeItem = function patchedRemoveItem(key) {
+        const result = removeItem.call(this, key);
+        dispatchStorageChange();
+        return result;
+    };
+    const clear = Storage.prototype.clear;
+    Storage.prototype.clear = function patchedClear() {
+        const result = clear.call(this);
+        dispatchStorageChange();
+        return result;
+    };
+};
+const STYLE = `
+.eruda-storage-tool {
+  position: relative;
+  height: 100%;
+  max-height: 100%;
+  color: #d6d6d6;
+  background: #242424;
+  font-size: 13px;
+  overflow: hidden;
+}
+.eruda-storage-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 6px 8px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #454545;
+  background: #2f2f2f;
+}
+.eruda-storage-toolbar button,
+.eruda-storage-editor-actions button {
+  border: 1px solid #5f5f5f;
+  border-radius: 4px;
+  color: #ddd;
+  background: #3a3a3a;
+  height: 26px;
+  padding: 0 9px;
+  cursor: pointer;
+}
+.eruda-storage-toolbar button:disabled {
+  color: #777;
+  cursor: not-allowed;
+}
+.eruda-storage-filter {
+  min-width: 0;
+  flex: 1;
+  height: 26px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 14px;
+  outline: none;
+  color: #eee;
+  background: #444;
+}
+.eruda-storage-layout {
+  display: flex;
+  height: calc(100% - 38px);
+  min-height: 0;
+  overflow: hidden;
+}
+.eruda-storage-sidebar {
+  width: 34%;
+  min-width: 120px;
+  max-width: 230px;
+  overflow: auto;
+  border-right: 1px solid #555;
+  background: #292929;
+}
+.eruda-storage-nav,
+.eruda-storage-store {
+  display: block;
+  width: 100%;
+  border: 0;
+  box-sizing: border-box;
+  color: #ddd;
+  background: transparent;
+  text-align: left;
+  padding: 9px 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.eruda-storage-db {
+  padding-left: 18px;
+  color: #cfcfcf;
+}
+.eruda-storage-store {
+  padding-left: 34px;
+  color: #bbb;
+}
+.eruda-storage-nav.is-active,
+.eruda-storage-store.is-active {
+  background: #174a87;
+  color: #fff;
+}
+.eruda-storage-db-title {
+  padding: 8px 10px 4px;
+  color: #8fbfff;
+  word-break: break-all;
+}
+.eruda-storage-panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.eruda-storage-title {
+  flex: none;
+  padding: 12px 14px;
+  border-bottom: 1px solid #494949;
+  color: #fff;
+  font-size: 15px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.eruda-storage-table-wrap {
+  flex: 0 1 auto;
+  max-height: 52%;
+  min-height: 96px;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.eruda-storage-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.eruda-storage-table th,
+.eruda-storage-table td {
+  height: 28px;
+  padding: 0 8px;
+  border-right: 1px solid #4b4b4b;
+  border-bottom: 1px solid #333;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.eruda-storage-table th {
+  position: sticky;
+  top: 0;
+  color: #ddd;
+  background: #383838;
+  text-align: left;
+  z-index: 1;
+}
+.eruda-storage-table tr {
+  cursor: pointer;
+}
+.eruda-storage-table tr:nth-child(even) td {
+  background: #2d2d2d;
+}
+.eruda-storage-table tr.is-selected td {
+  background: #27538d;
+  color: #fff;
+}
+.eruda-storage-empty {
+  padding: 18px 14px;
+  color: #aaa;
+}
+.eruda-storage-db-overview {
+  flex: 1;
+  min-height: 0;
+  padding: 16px 14px;
+  border-top: 1px solid #444;
+  color: #ddd;
+  background: #242424;
+  overflow: auto;
+}
+.eruda-storage-db-meta {
+  margin-bottom: 18px;
+  border-bottom: 1px solid #4a4a4a;
+}
+.eruda-storage-db-meta-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 45%) 1fr;
+  gap: 12px;
+  padding: 6px 0;
+}
+.eruda-storage-db-meta-key {
+  color: #9cdcfe;
+}
+.eruda-storage-db-meta-value {
+  color: #eee;
+  word-break: break-all;
+}
+.eruda-storage-db-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.eruda-storage-db-actions button {
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid #4f8dcc;
+  border-radius: 15px;
+  color: #8ab4f8;
+  background: transparent;
+  cursor: pointer;
+}
+.eruda-storage-detail {
+  flex: 0 0 auto;
+  min-height: 0;
+  max-height: none;
+  border-top: 1px solid #555;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-x pan-y;
+  background: #202020;
+}
+.eruda-storage-detail pre {
+  margin: 0;
+  padding: 12px 14px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #dfe8b8;
+}
+.eruda-storage-tree {
+  display: inline-block;
+  width: max-content;
+  min-width: 100%;
+  padding: 10px 8px;
+  box-sizing: border-box;
+  color: #dfe8b8;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+}
+.eruda-storage-tree-row {
+  display: flex;
+  align-items: flex-start;
+  width: max-content;
+  min-height: 20px;
+  white-space: nowrap;
+}
+.eruda-storage-tree-toggle {
+  position: relative;
+  flex: none;
+  width: 16px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  color: #bbb;
+  background: transparent;
+  cursor: pointer;
+}
+.eruda-storage-tree-toggle::before {
+  position: absolute;
+  top: 6px;
+  left: 4px;
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 7px solid #bbb;
+  content: "";
+}
+.eruda-storage-tree-toggle.is-expanded::before {
+  top: 7px;
+  left: 2px;
+  transform: rotate(90deg);
+}
+.eruda-storage-tree-spacer {
+  display: inline-block;
+  width: 16px;
+  height: 20px;
+  flex: none;
+}
+.eruda-storage-tree-content {
+  color: #d4d4d4;
+}
+.eruda-storage-tree-key {
+  color: #9cdcfe;
+}
+.eruda-storage-tree-index {
+  color: #dcdcaa;
+}
+.eruda-storage-tree-colon {
+  color: #cfcfcf;
+  margin-right: 4px;
+}
+.eruda-storage-tree-string {
+  color: #ce9178;
+}
+.eruda-storage-tree-number {
+  color: #b5cea8;
+}
+.eruda-storage-tree-boolean {
+  color: #569cd6;
+}
+.eruda-storage-tree-null {
+  color: #569cd6;
+}
+.eruda-storage-tree-summary {
+  color: #aaa;
+}
+.eruda-storage-editor-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.62);
+  z-index: 20;
+}
+.eruda-storage-editor {
+  width: min(92%, 520px);
+  max-height: 88%;
+  padding: 12px;
+  box-sizing: border-box;
+  border: 1px solid #646464;
+  border-radius: 6px;
+  background: #2e2e2e;
+  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
+}
+.eruda-storage-editor h3 {
+  margin: 0 0 10px;
+  font-size: 15px;
+  color: #fff;
+}
+.eruda-storage-editor label {
+  display: block;
+  margin: 8px 0 4px;
+  color: #bbb;
+}
+.eruda-storage-editor input,
+.eruda-storage-editor textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #555;
+  border-radius: 4px;
+  outline: none;
+  color: #eee;
+  background: #1f1f1f;
+}
+.eruda-storage-editor input {
+  height: 30px;
+  padding: 0 8px;
+}
+.eruda-storage-editor textarea {
+  height: 160px;
+  padding: 8px;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.eruda-storage-editor-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 10px;
+}
+`;
+const escapeHtml = (value) => value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+const safeJsonStringify = (value) => {
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+};
+const formatValue = (value) => {
+    if (typeof value === "string") {
+        try {
+            return JSON.stringify(JSON.parse(value), null, 2);
+        }
+        catch {
+            return value;
+        }
+    }
+    return safeJsonStringify(value);
+};
+const parseEditableValue = (value) => {
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return value;
+    }
+};
+const requestToPromise = (request) => new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+});
+const txDone = (tx) => new Promise((resolve, reject) => {
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+    tx.onabort = () => reject(tx.error);
+});
+class ErudaStorageTool {
+    constructor(eruda) {
+        this.eruda = eruda;
+        this.name = "Storage";
+        this.activeKind = "local";
+        this.dbs = [];
+        this.editor = null;
+        this.filter = "";
+        this.selectedDb = "";
+        this.selectedIndex = -1;
+        this.selectedStore = "";
+        this.stores = [];
+        this.rows = [];
+        this.detailTouchX = 0;
+        this.detailTouchY = 0;
+        this.detailExpandedPaths = new Set();
+        this.detailSelectedKey = "";
+        this.isVisible = false;
+        this.lastSnapshot = "";
+        this.handleExternalStorageChange = () => {
+            if (!this.isVisible)
+                return;
+            this.refreshIfChanged();
+        };
+        this.handleVisibilityChange = () => {
+            if (document.visibilityState === "visible") {
+                this.handleExternalStorageChange();
+            }
+        };
+        this.keepDetailScroll = (event) => {
+            const target = event.target;
+            const detailEl = target instanceof Element ? target.closest(".eruda-storage-detail") : null;
+            if (!detailEl)
+                return;
+            if (event instanceof WheelEvent) {
+                detailEl.scrollTop += event.deltaY;
+                detailEl.scrollLeft += event.shiftKey ? event.deltaY : event.deltaX;
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            if (event instanceof TouchEvent && event.touches[0]) {
+                const currentX = event.touches[0].clientX;
+                const currentY = event.touches[0].clientY;
+                detailEl.scrollLeft += this.detailTouchX - currentX;
+                detailEl.scrollTop += this.detailTouchY - currentY;
+                this.detailTouchX = currentX;
+                this.detailTouchY = currentY;
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.handleDetailTouchStart = (event) => {
+            var _a, _b, _c, _d;
+            const target = event.target;
+            if (!(target instanceof Element) || !target.closest(".eruda-storage-detail"))
+                return;
+            this.detailTouchX = (_b = (_a = event.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX) !== null && _b !== void 0 ? _b : 0;
+            this.detailTouchY = (_d = (_c = event.touches[0]) === null || _c === void 0 ? void 0 : _c.clientY) !== null && _d !== void 0 ? _d : 0;
+        };
+        this.handleClick = (event) => {
+            var _a, _b, _c, _d, _e;
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            const detailToggle = target.closest("[data-detail-path]");
+            if (detailToggle) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.toggleDetailPath((_a = detailToggle.dataset.detailPath) !== null && _a !== void 0 ? _a : "");
+                return;
+            }
+            const actionEl = target.closest("[data-action]");
+            if (actionEl) {
+                event.preventDefault();
+                this.handleAction((_b = actionEl.dataset.action) !== null && _b !== void 0 ? _b : "");
+                return;
+            }
+            const navEl = target.closest("[data-kind]");
+            if (navEl) {
+                this.activeKind = navEl.dataset.kind;
+                this.selectedIndex = -1;
+                this.refresh();
+                return;
+            }
+            const storeEl = target.closest("[data-db][data-store]");
+            if (storeEl) {
+                this.activeKind = "indexeddb";
+                this.selectedDb = (_c = storeEl.dataset.db) !== null && _c !== void 0 ? _c : "";
+                this.selectedStore = (_d = storeEl.dataset.store) !== null && _d !== void 0 ? _d : "";
+                this.selectedIndex = -1;
+                void this.refreshIndexedDbRows();
+                return;
+            }
+            const dbEl = target.closest("[data-db-only]");
+            if (dbEl) {
+                this.activeKind = "indexeddb";
+                this.selectedDb = (_e = dbEl.dataset.dbOnly) !== null && _e !== void 0 ? _e : "";
+                this.selectedStore = "";
+                this.selectedIndex = -1;
+                void this.refreshStores();
+                return;
+            }
+            const rowEl = target.closest("[data-row-index]");
+            if (rowEl) {
+                this.selectRow(Number(rowEl.dataset.rowIndex));
+                this.renderSelection();
+            }
+        };
+        this.handleDoubleClick = (event) => {
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            if (target.closest("[data-row-index]")) {
+                this.openEditor("edit");
+            }
+        };
+        this.handleInput = (event) => {
+            const target = event.target;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            if (target.dataset.role !== "filter")
+                return;
+            this.filter = target.value;
+            this.selectedIndex = -1;
+            this.render();
+        };
+    }
+    init($el) {
+        this.root = this.resolveElement($el);
+        this.root.style.height = "100%";
+        this.root.style.overflow = "hidden";
+        this.styleEl = this.eruda.util.evalCss(STYLE);
+        patchStorageMutations();
+        this.bindEvents();
+        this.refresh();
+    }
+    show() {
+        var _a;
+        this.isVisible = true;
+        (_a = this.root) === null || _a === void 0 ? void 0 : _a.style.setProperty("display", "block");
+        this.startAutoRefresh();
+        this.refreshIfChanged();
+        this.syncScrollLayout();
+        return this;
+    }
+    hide() {
+        var _a;
+        this.isVisible = false;
+        this.stopAutoRefresh();
+        (_a = this.root) === null || _a === void 0 ? void 0 : _a.style.setProperty("display", "none");
+        return this;
+    }
+    destroy() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.stopAutoRefresh();
+        (_a = this.styleEl) === null || _a === void 0 ? void 0 : _a.remove();
+        (_b = this.root) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.handleClick);
+        (_c = this.root) === null || _c === void 0 ? void 0 : _c.removeEventListener("dblclick", this.handleDoubleClick);
+        (_d = this.root) === null || _d === void 0 ? void 0 : _d.removeEventListener("input", this.handleInput);
+        (_e = this.root) === null || _e === void 0 ? void 0 : _e.removeEventListener("wheel", this.keepDetailScroll);
+        (_f = this.root) === null || _f === void 0 ? void 0 : _f.removeEventListener("touchstart", this.handleDetailTouchStart);
+        (_g = this.root) === null || _g === void 0 ? void 0 : _g.removeEventListener("touchmove", this.keepDetailScroll);
+        window.removeEventListener("storage", this.handleExternalStorageChange);
+        window.removeEventListener(STORAGE_CHANGE_EVENT, this.handleExternalStorageChange);
+        window.removeEventListener("focus", this.handleExternalStorageChange);
+        document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+    }
+    resolveElement($el) {
+        var _a;
+        const wrapped = $el;
+        return (_a = wrapped[0]) !== null && _a !== void 0 ? _a : $el;
+    }
+    bindEvents() {
+        if (!this.root)
+            return;
+        this.root.addEventListener("click", this.handleClick);
+        this.root.addEventListener("dblclick", this.handleDoubleClick);
+        this.root.addEventListener("input", this.handleInput);
+        this.root.addEventListener("wheel", this.keepDetailScroll);
+        this.root.addEventListener("touchstart", this.handleDetailTouchStart);
+        this.root.addEventListener("touchmove", this.keepDetailScroll);
+        window.addEventListener("storage", this.handleExternalStorageChange);
+        window.addEventListener(STORAGE_CHANGE_EVENT, this.handleExternalStorageChange);
+        window.addEventListener("focus", this.handleExternalStorageChange);
+        document.addEventListener("visibilitychange", this.handleVisibilityChange);
+    }
+    startAutoRefresh() {
+        this.stopAutoRefresh();
+        this.refreshTimer = window.setInterval(() => {
+            this.refreshIfChanged();
+        }, 1500);
+    }
+    stopAutoRefresh() {
+        if (this.refreshTimer === undefined)
+            return;
+        window.clearInterval(this.refreshTimer);
+        this.refreshTimer = undefined;
+    }
+    handleAction(action) {
+        if (action === "refresh") {
+            this.refresh();
+            return;
+        }
+        if (action === "add") {
+            this.openEditor("add");
+            return;
+        }
+        if (action === "edit") {
+            this.openEditor("edit");
+            return;
+        }
+        if (action === "delete") {
+            void this.deleteSelected();
+            return;
+        }
+        if (action === "clear") {
+            void this.clearActive();
+            return;
+        }
+        if (action === "delete-db") {
+            void this.deleteSelectedDatabase();
+            return;
+        }
+        if (action === "refresh-db") {
+            void this.refreshStores();
+            return;
+        }
+        if (action === "editor-close") {
+            this.editor = null;
+            this.render();
+            return;
+        }
+        if (action === "editor-save") {
+            void this.saveEditor();
+        }
+    }
+    refresh() {
+        var _a;
+        if (this.activeKind === "indexeddb") {
+            void this.refreshIndexedDb();
+            return;
+        }
+        const selectedKey = (_a = this.selectedRow()) === null || _a === void 0 ? void 0 : _a.key;
+        this.rows = this.readRows();
+        this.lastSnapshot = this.createSnapshot();
+        this.restoreSelection(selectedKey);
+        this.render();
+    }
+    refreshIfChanged() {
+        var _a;
+        if (this.editor)
+            return;
+        if (this.activeKind === "indexeddb") {
+            void this.refreshIndexedDbIfChanged();
+            return;
+        }
+        const nextRows = this.readRows();
+        const nextSnapshot = this.createSnapshot(nextRows);
+        if (nextSnapshot === this.lastSnapshot)
+            return;
+        const selectedKey = (_a = this.selectedRow()) === null || _a === void 0 ? void 0 : _a.key;
+        this.rows = nextRows;
+        this.lastSnapshot = nextSnapshot;
+        this.restoreSelection(selectedKey);
+        this.render();
+    }
+    readRows() {
+        if (this.activeKind === "local") {
+            return this.readWebStorage(localStorage);
+        }
+        if (this.activeKind === "session") {
+            return this.readWebStorage(sessionStorage);
+        }
+        if (this.activeKind === "cookie") {
+            return this.readCookies();
+        }
+        return this.rows;
+    }
+    readWebStorage(storage) {
+        var _a;
+        const rows = [];
+        for (let index = 0; index < storage.length; index += 1) {
+            const key = storage.key(index);
+            if (key === null)
+                continue;
+            rows.push({ key, value: (_a = storage.getItem(key)) !== null && _a !== void 0 ? _a : "" });
+        }
+        return rows.sort((left, right) => left.key.localeCompare(right.key));
+    }
+    readCookies() {
+        if (!document.cookie)
+            return [];
+        return document.cookie
+            .split(";")
+            .map((item) => item.trim())
+            .filter(Boolean)
+            .map((item) => {
+            const separatorIndex = item.indexOf("=");
+            const key = separatorIndex >= 0 ? item.slice(0, separatorIndex) : item;
+            const value = separatorIndex >= 0 ? item.slice(separatorIndex + 1) : "";
+            return {
+                key: decodeURIComponent(key),
+                value: decodeURIComponent(value),
+            };
+        })
+            .sort((left, right) => left.key.localeCompare(right.key));
+    }
+    async refreshIndexedDb() {
+        this.renderLoading();
+        const factory = indexedDB;
+        if (!factory.databases) {
+            this.rows = [];
+            this.dbs = [];
+            this.stores = [];
+            this.render();
+            return;
+        }
+        const dbs = await factory.databases();
+        this.dbs = dbs
+            .filter((db) => Boolean(db.name))
+            .map((db) => ({ name: db.name, version: db.version }))
+            .sort((left, right) => left.name.localeCompare(right.name));
+        if (this.selectedDb && !this.dbs.some((db) => db.name === this.selectedDb)) {
+            this.selectedDb = "";
+            this.selectedStore = "";
+        }
+        if (!this.selectedDb && this.dbs[0]) {
+            this.selectedDb = this.dbs[0].name;
+        }
+        await this.refreshStores();
+    }
+    async refreshStores() {
+        this.stores = [];
+        this.rows = [];
+        if (!this.selectedDb) {
+            this.render();
+            return;
+        }
+        const db = await this.openDb(this.selectedDb);
+        this.stores = Array.from(db.objectStoreNames).sort((left, right) => left.localeCompare(right));
+        db.close();
+        if (this.selectedStore && !this.stores.includes(this.selectedStore)) {
+            this.selectedStore = "";
+        }
+        await this.refreshIndexedDbRows();
+    }
+    async refreshIndexedDbRows() {
+        if (!this.selectedDb || !this.selectedStore) {
+            this.rows = [];
+            this.render();
+            return;
+        }
+        this.renderLoading();
+        const db = await this.openDb(this.selectedDb);
+        const tx = db.transaction(this.selectedStore, "readonly");
+        const store = tx.objectStore(this.selectedStore);
+        const rows = [];
+        await new Promise((resolve, reject) => {
+            const request = store.openCursor();
+            request.onerror = () => reject(request.error);
+            request.onsuccess = () => {
+                const cursor = request.result;
+                if (!cursor) {
+                    resolve();
+                    return;
+                }
+                rows.push({
+                    key: safeJsonStringify(cursor.primaryKey),
+                    value: formatValue(cursor.value),
+                    rawKey: cursor.primaryKey,
+                    rawValue: cursor.value,
+                });
+                cursor.continue();
+            };
+        });
+        db.close();
+        this.rows = rows;
+        this.lastSnapshot = this.createSnapshot();
+        this.render();
+    }
+    async refreshIndexedDbIfChanged() {
+        var _a;
+        if (!this.selectedDb || !this.selectedStore) {
+            await this.refreshIndexedDb();
+            return;
+        }
+        const db = await this.openDb(this.selectedDb);
+        const tx = db.transaction(this.selectedStore, "readonly");
+        const store = tx.objectStore(this.selectedStore);
+        const rows = [];
+        await new Promise((resolve, reject) => {
+            const request = store.openCursor();
+            request.onerror = () => reject(request.error);
+            request.onsuccess = () => {
+                const cursor = request.result;
+                if (!cursor) {
+                    resolve();
+                    return;
+                }
+                rows.push({
+                    key: safeJsonStringify(cursor.primaryKey),
+                    value: formatValue(cursor.value),
+                    rawKey: cursor.primaryKey,
+                    rawValue: cursor.value,
+                });
+                cursor.continue();
+            };
+        });
+        db.close();
+        const nextSnapshot = this.createSnapshot(rows);
+        if (nextSnapshot === this.lastSnapshot)
+            return;
+        const selectedKey = (_a = this.selectedRow()) === null || _a === void 0 ? void 0 : _a.key;
+        this.rows = rows;
+        this.lastSnapshot = nextSnapshot;
+        this.restoreSelection(selectedKey);
+        this.render();
+    }
+    openDb(name) {
+        return requestToPromise(indexedDB.open(name));
+    }
+    filteredRows() {
+        const keyword = this.filter.trim().toLowerCase();
+        if (!keyword)
+            return this.rows;
+        return this.rows.filter((row) => row.key.toLowerCase().includes(keyword) || row.value.toLowerCase().includes(keyword));
+    }
+    selectedRow() {
+        return this.filteredRows()[this.selectedIndex];
+    }
+    selectRow(index) {
+        var _a;
+        this.selectedIndex = index;
+        const row = this.selectedRow();
+        const detailKey = (_a = row === null || row === void 0 ? void 0 : row.key) !== null && _a !== void 0 ? _a : "";
+        if (detailKey === this.detailSelectedKey)
+            return;
+        this.detailSelectedKey = detailKey;
+        this.detailExpandedPaths = new Set(["$"]);
+    }
+    toggleDetailPath(path) {
+        if (!path)
+            return;
+        if (this.detailExpandedPaths.has(path)) {
+            this.detailExpandedPaths.delete(path);
+        }
+        else {
+            this.detailExpandedPaths.add(path);
+        }
+        this.renderSelection();
+    }
+    createSnapshot(rows = this.rows) {
+        return rows.map((row) => `${row.key}\u0000${row.value}`).join("\u0001");
+    }
+    restoreSelection(selectedKey) {
+        if (!selectedKey) {
+            this.selectedIndex = -1;
+            return;
+        }
+        const index = this.filteredRows().findIndex((row) => row.key === selectedKey);
+        this.selectedIndex = index;
+    }
+    renderSelection() {
+        if (!this.root)
+            return;
+        const row = this.selectedRow();
+        this.root.querySelectorAll(".eruda-storage-table tr.is-selected").forEach((el) => {
+            el.classList.remove("is-selected");
+        });
+        const rowEl = this.root.querySelector(`[data-row-index="${this.selectedIndex}"]`);
+        rowEl === null || rowEl === void 0 ? void 0 : rowEl.classList.add("is-selected");
+        const detailEl = this.root.querySelector(".eruda-storage-detail");
+        if (detailEl) {
+            detailEl.innerHTML = this.renderDetail(row);
+        }
+        this.updateToolbarState(Boolean(row));
+    }
+    updateToolbarState(hasSelected) {
+        if (!this.root)
+            return;
+        this.root.querySelectorAll('[data-action="edit"], [data-action="delete"]').forEach((button) => {
+            button.disabled = !hasSelected;
+        });
+    }
+    openEditor(mode) {
+        var _a, _b;
+        const row = this.selectedRow();
+        if (mode === "edit" && !row)
+            return;
+        this.editor = {
+            mode,
+            key: (_a = row === null || row === void 0 ? void 0 : row.key) !== null && _a !== void 0 ? _a : "",
+            value: (_b = row === null || row === void 0 ? void 0 : row.value) !== null && _b !== void 0 ? _b : "",
+            originalKey: row === null || row === void 0 ? void 0 : row.key,
+            readonlyKey: this.activeKind === "indexeddb" && mode === "edit",
+        };
+        this.render();
+    }
+    async saveEditor() {
+        var _a, _b, _c, _d;
+        if (!this.editor)
+            return;
+        const keyInput = (_a = this.root) === null || _a === void 0 ? void 0 : _a.querySelector("[data-editor-key]");
+        const valueInput = (_b = this.root) === null || _b === void 0 ? void 0 : _b.querySelector("[data-editor-value]");
+        const key = (_c = keyInput === null || keyInput === void 0 ? void 0 : keyInput.value.trim()) !== null && _c !== void 0 ? _c : "";
+        const value = (_d = valueInput === null || valueInput === void 0 ? void 0 : valueInput.value) !== null && _d !== void 0 ? _d : "";
+        if (!key && this.activeKind !== "indexeddb")
+            return;
+        if (this.activeKind === "local") {
+            this.saveWebStorage(localStorage, key, value);
+        }
+        else if (this.activeKind === "session") {
+            this.saveWebStorage(sessionStorage, key, value);
+        }
+        else if (this.activeKind === "cookie") {
+            this.setCookie(key, value);
+        }
+        else {
+            await this.saveIndexedDbValue(key, value);
+        }
+        this.editor = null;
+        this.selectedIndex = -1;
+        this.refresh();
+    }
+    saveWebStorage(storage, key, value) {
+        var _a;
+        const originalKey = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.originalKey;
+        if (originalKey && originalKey !== key) {
+            storage.removeItem(originalKey);
+        }
+        storage.setItem(key, value);
+    }
+    setCookie(key, value) {
+        document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}; path=/; max-age=31536000; SameSite=Lax`;
+    }
+    async saveIndexedDbValue(key, value) {
+        var _a;
+        if (!this.selectedDb || !this.selectedStore)
+            return;
+        const db = await this.openDb(this.selectedDb);
+        const tx = db.transaction(this.selectedStore, "readwrite");
+        const store = tx.objectStore(this.selectedStore);
+        const parsedValue = parseEditableValue(value);
+        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.mode) === "edit") {
+            const row = this.selectedRow();
+            if (store.keyPath === null) {
+                store.put(parsedValue, row === null || row === void 0 ? void 0 : row.rawKey);
+            }
+            else {
+                store.put(parsedValue);
+            }
+        }
+        else if (store.keyPath === null) {
+            store.add(parsedValue, parseEditableValue(key));
+        }
+        else {
+            store.add(parsedValue);
+        }
+        await txDone(tx);
+        db.close();
+    }
+    async deleteSelected() {
+        const row = this.selectedRow();
+        if (!row)
+            return;
+        if (this.activeKind === "local") {
+            localStorage.removeItem(row.key);
+        }
+        else if (this.activeKind === "session") {
+            sessionStorage.removeItem(row.key);
+        }
+        else if (this.activeKind === "cookie") {
+            document.cookie = `${encodeURIComponent(row.key)}=; path=/; max-age=0`;
+        }
+        else {
+            await this.deleteIndexedDbRow(row);
+        }
+        this.selectedIndex = -1;
+        this.refresh();
+    }
+    async deleteIndexedDbRow(row) {
+        if (!this.selectedDb || !this.selectedStore)
+            return;
+        const db = await this.openDb(this.selectedDb);
+        const tx = db.transaction(this.selectedStore, "readwrite");
+        tx.objectStore(this.selectedStore).delete(row.rawKey);
+        await txDone(tx);
+        db.close();
+    }
+    async clearActive() {
+        if (this.activeKind === "local") {
+            localStorage.clear();
+        }
+        else if (this.activeKind === "session") {
+            sessionStorage.clear();
+        }
+        else if (this.activeKind === "cookie") {
+            for (const row of this.rows) {
+                document.cookie = `${encodeURIComponent(row.key)}=; path=/; max-age=0`;
+            }
+        }
+        else {
+            await this.clearIndexedDbStore();
+        }
+        this.selectedIndex = -1;
+        this.refresh();
+    }
+    async clearIndexedDbStore() {
+        if (!this.selectedDb || !this.selectedStore)
+            return;
+        const db = await this.openDb(this.selectedDb);
+        const tx = db.transaction(this.selectedStore, "readwrite");
+        tx.objectStore(this.selectedStore).clear();
+        await txDone(tx);
+        db.close();
+    }
+    async deleteSelectedDatabase() {
+        if (!this.selectedDb)
+            return;
+        const dbName = this.selectedDb;
+        await new Promise((resolve, reject) => {
+            const request = indexedDB.deleteDatabase(dbName);
+            request.onerror = () => reject(request.error);
+            request.onblocked = () => reject(new Error(`Delete IndexedDB "${dbName}" blocked.`));
+            request.onsuccess = () => resolve();
+        });
+        this.selectedDb = "";
+        this.selectedStore = "";
+        this.selectedIndex = -1;
+        await this.refreshIndexedDb();
+    }
+    renderLoading() {
+        if (!this.root)
+            return;
+        this.root.innerHTML = `<div class="eruda-storage-tool"><div class="eruda-storage-empty">Loading...</div></div>`;
+    }
+    render() {
+        if (!this.root)
+            return;
+        const rows = this.filteredRows();
+        const selected = rows[this.selectedIndex];
+        const isDbOverview = this.isIndexedDbDatabaseOverview();
+        this.root.innerHTML = `
+      <div class="eruda-storage-tool">
+        ${this.renderToolbar()}
+        <div class="eruda-storage-layout">
+          ${this.renderSidebar()}
+          <section class="eruda-storage-panel">
+            <div class="eruda-storage-title">${escapeHtml(this.currentTitle())}${isDbOverview ? "" : ` (${rows.length})`}</div>
+            ${isDbOverview ? this.renderDatabaseOverview() : this.renderRowsPanel(rows, selected)}
+          </section>
+        </div>
+        ${this.renderEditor()}
+      </div>
+    `;
+        this.syncScrollLayout();
+    }
+    renderRowsPanel(rows, selected) {
+        return `
+      <div class="eruda-storage-table-wrap">
+        ${this.renderTable(rows)}
+      </div>
+      <div class="eruda-storage-detail">
+        ${this.renderDetail(selected)}
+      </div>
+    `;
+    }
+    syncScrollLayout() {
+        window.requestAnimationFrame(() => {
+            if (!this.root)
+                return;
+            const panel = this.root.querySelector(".eruda-storage-panel");
+            const title = this.root.querySelector(".eruda-storage-title");
+            const tableWrap = this.root.querySelector(".eruda-storage-table-wrap");
+            const detail = this.root.querySelector(".eruda-storage-detail");
+            if (!panel || !title || !tableWrap || !detail)
+                return;
+            const panelHeight = panel.clientHeight;
+            const titleHeight = title.offsetHeight;
+            const availableHeight = Math.max(panelHeight - titleHeight, 180);
+            const tableHeight = Math.max(96, Math.floor(availableHeight * 0.48));
+            const detailHeight = Math.max(96, availableHeight - tableHeight);
+            tableWrap.style.height = `${tableHeight}px`;
+            tableWrap.style.maxHeight = `${tableHeight}px`;
+            detail.style.height = `${detailHeight}px`;
+            detail.style.maxHeight = `${detailHeight}px`;
+        });
+    }
+    renderToolbar() {
+        const hasSelected = Boolean(this.selectedRow());
+        const canAdd = this.activeKind !== "indexeddb" || Boolean(this.selectedDb && this.selectedStore);
+        const canClear = this.activeKind !== "indexeddb" || Boolean(this.selectedDb && this.selectedStore);
+        return `
+      <div class="eruda-storage-toolbar">
+        <button data-action="refresh" title="Refresh">Refresh</button>
+        <input class="eruda-storage-filter" data-role="filter" placeholder="Filter" value="${escapeHtml(this.filter)}" />
+        <button data-action="add" title="Add" ${canAdd ? "" : "disabled"}>Add</button>
+        <button data-action="edit" title="Edit" ${hasSelected ? "" : "disabled"}>Edit</button>
+        <button data-action="delete" title="Delete" ${hasSelected ? "" : "disabled"}>Delete</button>
+        <button data-action="clear" title="Clear" ${canClear ? "" : "disabled"}>Clear</button>
+      </div>
+    `;
+    }
+    renderSidebar() {
+        return `
+      <aside class="eruda-storage-sidebar">
+        ${this.renderNav("local", "Local Storage")}
+        ${this.renderNav("session", "Session Storage")}
+        ${this.renderNav("cookie", "Cookie")}
+        ${this.renderNav("indexeddb", "IndexedDB")}
+        ${this.renderIndexedDbTree()}
+      </aside>
+    `;
+    }
+    renderNav(kind, label) {
+        const active = this.activeKind === kind && (kind !== "indexeddb" || (!this.selectedDb && !this.selectedStore));
+        return `<button class="eruda-storage-nav ${active ? "is-active" : ""}" data-kind="${kind}">${label}</button>`;
+    }
+    renderIndexedDbTree() {
+        if (this.activeKind !== "indexeddb")
+            return "";
+        if (!("databases" in indexedDB)) {
+            return `<div class="eruda-storage-empty">indexedDB.databases() is not supported.</div>`;
+        }
+        if (this.dbs.length === 0) {
+            return `<div class="eruda-storage-empty">Empty</div>`;
+        }
+        return this.dbs
+            .map((db) => {
+            const stores = db.name === this.selectedDb
+                ? this.stores
+                    .map((store) => `<button class="eruda-storage-store ${store === this.selectedStore ? "is-active" : ""}" data-db="${escapeHtml(db.name)}" data-store="${escapeHtml(store)}" title="${escapeHtml(store)}">${escapeHtml(store)}</button>`)
+                    .join("")
+                : "";
+            const version = db.version ? ` v${db.version}` : "";
+            return `<button class="eruda-storage-nav eruda-storage-db ${db.name === this.selectedDb && !this.selectedStore ? "is-active" : ""}" data-db-only="${escapeHtml(db.name)}" title="${escapeHtml(db.name)}${version}">${escapeHtml(db.name)}${version}</button>${stores}`;
+        })
+            .join("");
+    }
+    renderTable(rows) {
+        if (rows.length === 0) {
+            return `<div class="eruda-storage-empty">Empty</div>`;
+        }
+        return `
+      <table class="eruda-storage-table">
+        <thead>
+          <tr><th>Key</th><th>Value</th></tr>
+        </thead>
+        <tbody>
+          ${rows
+            .map((row, index) => `
+                <tr class="${index === this.selectedIndex ? "is-selected" : ""}" data-row-index="${index}">
+                  <td title="${escapeHtml(row.key)}">${escapeHtml(row.key)}</td>
+                  <td title="${escapeHtml(row.value)}">${escapeHtml(row.value)}</td>
+                </tr>
+              `)
+            .join("")}
+        </tbody>
+      </table>
+    `;
+    }
+    renderDatabaseOverview() {
+        var _a;
+        const dbInfo = this.dbs.find((db) => db.name === this.selectedDb);
+        if (!this.selectedDb || !dbInfo) {
+            return `<div class="eruda-storage-db-overview"><div class="eruda-storage-empty">Select an IndexedDB database.</div></div>`;
+        }
+        return `
+      <div class="eruda-storage-db-overview">
+        <div class="eruda-storage-db-meta">
+          ${this.renderDatabaseMetaRow("Storage bucket name", "Default bucket")}
+          ${this.renderDatabaseMetaRow("Version", String((_a = dbInfo.version) !== null && _a !== void 0 ? _a : ""))}
+          ${this.renderDatabaseMetaRow("Object stores", String(this.stores.length))}
+        </div>
+        <div class="eruda-storage-db-actions">
+          <button data-action="delete-db">Delete database</button>
+          <button data-action="refresh-db">Refresh database</button>
+        </div>
+      </div>
+    `;
+    }
+    renderDatabaseMetaRow(label, value) {
+        return `
+      <div class="eruda-storage-db-meta-row">
+        <span class="eruda-storage-db-meta-key">${escapeHtml(label)}</span>
+        <span class="eruda-storage-db-meta-value">${escapeHtml(value)}</span>
+      </div>
+    `;
+    }
+    renderDetail(row) {
+        if (!row) {
+            return `<pre>Select a row to preview value.</pre>`;
+        }
+        const value = this.toDetailValue(row);
+        return `<div class="eruda-storage-tree">${this.renderTreeNode("$", "", value, 0, true)}</div>`;
+    }
+    toDetailValue(row) {
+        if (row.rawValue !== undefined)
+            return row.rawValue;
+        return parseEditableValue(row.value);
+    }
+    renderTreeNode(path, key, value, depth, isRoot = false) {
+        if (this.isRecord(value)) {
+            const entries = Array.isArray(value)
+                ? value.map((item, index) => [String(index), item])
+                : Object.entries(value);
+            const hasChildren = entries.length > 0;
+            const expanded = this.detailExpandedPaths.has(path);
+            const summary = Array.isArray(value) ? `Array(${value.length})` : `{${entries.length ? "..." : ""}}`;
+            const label = isRoot
+                ? `<span class="eruda-storage-tree-summary">${escapeHtml(summary)}</span>`
+                : `${this.renderKey(key)}<span class="eruda-storage-tree-summary">${escapeHtml(summary)}</span>`;
+            const children = expanded
+                ? entries.map(([childKey, childValue]) => this.renderTreeNode(`${path}.${childKey}`, childKey, childValue, depth + 1)).join("")
+                : "";
+            return `
+        <div class="eruda-storage-tree-row" style="padding-left: ${depth * 12}px">
+          ${hasChildren
+                ? `<button class="eruda-storage-tree-toggle ${expanded ? "is-expanded" : ""}" data-detail-path="${escapeHtml(path)}"></button>`
+                : `<span class="eruda-storage-tree-spacer"></span>`}
+          <span class="eruda-storage-tree-content">${label}</span>
+        </div>
+        ${children}
+      `;
+        }
+        const label = isRoot ? this.renderPrimitive(value) : `${this.renderKey(key)}${this.renderPrimitive(value)}`;
+        return `
+      <div class="eruda-storage-tree-row" style="padding-left: ${depth * 12}px">
+        <span class="eruda-storage-tree-spacer"></span>
+        <span>${label}</span>
+      </div>
+    `;
+    }
+    renderKey(key) {
+        const keyClassName = /^\d+$/.test(key) ? "eruda-storage-tree-index" : "eruda-storage-tree-key";
+        return `<span class="${keyClassName}">${escapeHtml(key)}</span><span class="eruda-storage-tree-colon">:</span>`;
+    }
+    isRecord(value) {
+        return typeof value === "object" && value !== null;
+    }
+    renderPrimitive(value) {
+        if (value === null)
+            return `<span class="eruda-storage-tree-null">null</span>`;
+        if (typeof value === "string")
+            return `<span class="eruda-storage-tree-string">"${escapeHtml(value)}"</span>`;
+        if (typeof value === "number")
+            return `<span class="eruda-storage-tree-number">${value}</span>`;
+        if (typeof value === "boolean")
+            return `<span class="eruda-storage-tree-boolean">${value}</span>`;
+        if (value === undefined)
+            return `<span class="eruda-storage-tree-null">undefined</span>`;
+        return `<span class="eruda-storage-tree-summary">${escapeHtml(String(value))}</span>`;
+    }
+    renderEditor() {
+        if (!this.editor)
+            return "";
+        const title = this.editor.mode === "add" ? "Add Storage Item" : "Edit Storage Item";
+        return `
+      <div class="eruda-storage-editor-mask">
+        <div class="eruda-storage-editor">
+          <h3>${title}</h3>
+          <label>Key</label>
+          <input data-editor-key value="${escapeHtml(this.editor.key)}" ${this.editor.readonlyKey ? "readonly" : ""} />
+          <label>Value</label>
+          <textarea data-editor-value>${escapeHtml(this.editor.value)}</textarea>
+          <div class="eruda-storage-editor-actions">
+            <button data-action="editor-close">Cancel</button>
+            <button data-action="editor-save">Save</button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    currentTitle() {
+        if (this.activeKind === "local")
+            return `${location.origin} / Local Storage`;
+        if (this.activeKind === "session")
+            return `${location.origin} / Session Storage`;
+        if (this.activeKind === "cookie")
+            return `${location.origin} / Cookie`;
+        if (this.selectedDb && this.selectedStore)
+            return `IndexedDB / ${this.selectedDb} / ${this.selectedStore}`;
+        if (this.selectedDb)
+            return this.selectedDb;
+        return "IndexedDB";
+    }
+    isIndexedDbDatabaseOverview() {
+        return this.activeKind === "indexeddb" && Boolean(this.selectedDb) && !this.selectedStore;
+    }
+}
+export const createErudaStoragePlugin = (eruda) => new ErudaStorageTool(eruda);
+export default createErudaStoragePlugin;
+//# sourceMappingURL=index.js.map