From d5428ad3e27dba1f72c48bc59df5e213e02913a1 Mon Sep 17 00:00:00 2001
From: bdnugget <bdbosman@gmail.com>
Date: Sun, 10 May 2026 14:33:50 +0200
Subject: [PATCH] outdated wasm crap probably

---
 index.html | 904 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 655 insertions(+), 249 deletions(-)
diff --git a/index.html b/index.html
index 2e90840..0933244 100644
--- a/index.html
+++ b/index.html
@@ -3,381 +3,787 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Chem Inventory (Offline‑friendly)</title>
+  <title>Chem Inventory</title>
+
   <style>
     :root {
-      --bg: #0f1115; --panel: #171923; --text: #e6e6e6; --muted: #9aa0a6; --accent: #7aa2f7; --danger: #ef5350; --ok: #2e7d32;
+      --bg: #0f1115;
+      --panel: #171923;
+      --text: #e6e6e6;
+      --muted: #9aa0a6;
+      --accent: #7aa2f7;
+      --danger: #ef5350;
+      --border: #232634;
     }
-    * { box-sizing: border-box; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
-    body { margin: 0; background: var(--bg); color: var(--text); }
-    header { padding: 12px 16px; background: #11131a; border-bottom: 1px solid #232634; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
-    header h1 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: 0.3px; }
-    header .spacer { flex: 1; }
-    main { display: grid; grid-template-columns: 360px 1fr; gap: 16px; padding: 16px; }
-    @media (max-width: 900px) { main { grid-template-columns: 1fr; } }
-    .card { background: var(--panel); border: 1px solid #232634; border-radius: 14px; padding: 14px; }
-    .card h2 { margin: 0 0 10px; font-size: 15px; font-weight: 650; color: #d2d5de; }
-    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-    .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
-    label { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: block; }
-    input[type="text"], input[type="number"], select, textarea {
-      width: 100%; padding: 10px 10px; border-radius: 10px; border: 1px solid #2a2f3a; background: #11131a; color: var(--text);
+
+    * {
+      box-sizing: border-box;
+      font-family:
+        Inter,
+        ui-sans-serif,
+        system-ui,
+        sans-serif;
+    }
+
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--text);
+    }
+
+    header {
+      padding: 16px;
+      background: #11131a;
+      border-bottom: 1px solid var(--border);
+
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 20px;
+    }
+
+    .spacer {
+      flex: 1;
+    }
+
+    main {
+      padding: 16px;
+      display: grid;
+      grid-template-columns: 360px 1fr;
+      gap: 16px;
+    }
+
+    @media (max-width: 900px) {
+      main {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .card {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 14px;
+    }
+
+    .card h2 {
+      margin-top: 0;
+      font-size: 16px;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+
+    .row3 {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 8px;
+    }
+
+    label {
+      display: block;
+      font-size: 12px;
+      margin-bottom: 4px;
+      color: var(--muted);
+    }
+
+    input,
+    select,
+    textarea,
+    button {
+      width: 100%;
+      border-radius: 10px;
+      border: 1px solid #2a2f3a;
+      background: #11131a;
+      color: var(--text);
+      padding: 10px;
+    }
+
+    textarea {
+      min-height: 80px;
+      resize: vertical;
+    }
+
+    button {
+      cursor: pointer;
+    }
+
+    button.primary {
+      background: var(--accent);
+      color: #0c1022;
+      font-weight: 700;
+    }
+
+    button.danger {
+      background: var(--danger);
+      color: white;
+    }
+
+    .toolbar {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .toolbar > * {
+      width: auto;
+    }
+
+    .muted {
+      color: var(--muted);
+    }
+
+    .status {
+      font-size: 12px;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    th,
+    td {
+      padding: 10px;
+      border-bottom: 1px solid var(--border);
+      text-align: left;
+      font-size: 13px;
+      vertical-align: top;
+    }
+
+    th {
+      position: sticky;
+      top: 0;
+      background: var(--panel);
+    }
+
+    tr:hover td {
+      background: #121522;
+    }
+
+    .pill {
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: #1e2435;
+      border: 1px solid #2a2f3a;
+      display: inline-block;
+    }
+
+    .right {
+      text-align: right;
+    }
+
+    .kbd {
+      font-family: monospace;
+      background: #202636;
+      padding: 2px 6px;
+      border-radius: 5px;
     }
-    textarea { min-height: 70px; }
-    button { padding: 10px 12px; border-radius: 10px; border: 1px solid #2a2f3a; background: #11131a; color: var(--text); cursor: pointer; }
-    button.primary { background: var(--accent); border-color: #6486df; color: #0b1021; font-weight: 650; }
-    button.ghost { opacity: .9; }
-    button:disabled { opacity: .5; cursor: not-allowed; }
-    .toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
-    .muted { color: var(--muted); font-size: 12px; }
-    table { width: 100%; border-collapse: collapse; }
-    th, td { padding: 8px 10px; border-bottom: 1px solid #232634; font-size: 13px; vertical-align: top; }
-    th { text-align: left; color: #c9ccd6; position: sticky; top: 0; background: var(--panel); z-index: 1; }
-    tr:hover td { background: #131726; }
-    .pill { padding: 2px 8px; border-radius: 999px; background: #1f2433; border: 1px solid #2a2f3a; font-size: 12px; }
-    .right { text-align: right; }
-    .status { font-size: 12px; }
-    .ok { color: #a5d6a7; }
-    .bad { color: #ffcdd2; }
-    .warn { color: #ffe082; }
-    .kbd { background: #22273a; padding: 2px 6px; border: 1px solid #2a2f3a; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
   </style>
-  <!-- sql.js: SQLite compiled to WASM. The file sql-wasm.wasm will be fetched from the same CDN path. -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.2/sql-wasm.js" integrity="sha512-xCwzM3qC3l9tD0I4m4f+fMGP7Gkq3oXvYQ3EnRNu1H7uQdW2zN2H1qLKpVJ8S7iQvQe7f7r9KQf8Q8kP3V5Vxw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.2/sql-wasm.js"
+    integrity="sha512-Rw3r47C4BVCj/4dy0MiF30B9c7+dLNeJdgPkyw8KiiYqUzAP3XFFw90EjO7mHLkJBl7JCm+/iTuL9dGh47lbMw=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer">
+  </script>
 </head>
+
 <body>
   <header>
     <h1>Chem Inventory</h1>
-    <span class="muted">Fast entry now, enrich later.</span>
+
+    <span class="muted">Offline SQLite inventory</span>
+
     <div class="spacer"></div>
+
     <div class="toolbar">
-      <button id="exportDbBtn" title="Download the SQLite .db file">Export DB</button>
-      <button id="exportCsvBtn" title="Download CSV export">Export CSV</button>
-      <label class="kbd" for="importDb">Import DB</label>
-      <input id="importDb" type="file" accept=".db,.sqlite,application/octet-stream" style="display:none" />
+      <button id="exportDbBtn">Export DB</button>
+      <button id="exportCsvBtn">Export CSV</button>
+
+      <label class="kbd" for="importDb">
+        Import DB
+      </label>
+
+      <input
+        id="importDb"
+        type="file"
+        accept=".db,.sqlite"
+        hidden />
     </div>
   </header>
+
   <main>
-    <section class="card" id="entryCard">
-      <h2>New entry</h2>
+    <section class="card">
+      <h2>New Entry</h2>
+
       <div class="row">
         <div>
-          <label for="cas">CAS</label>
-          <input id="cas" type="text" placeholder="e.g. 67-56-1" autocomplete="off" />
+          <label>CAS</label>
+          <input id="cas" placeholder="67-56-1" />
         </div>
+
         <div>
-          <label for="name">Name</label>
-          <input id="name" type="text" placeholder="e.g. Methanol" autocomplete="off" />
+          <label>Name</label>
+          <input id="name" placeholder="Methanol" />
         </div>
       </div>
+
       <div class="row3" style="margin-top:8px">
         <div>
-          <label for="qty">Quantity</label>
-          <input id="qty" type="number" step="0.01" placeholder="e.g. 500" />
+          <label>Quantity</label>
+          <input id="qty" type="number" step="0.01" />
         </div>
+
         <div>
-          <label for="unit">Unit</label>
+          <label>Unit</label>
           <select id="unit">
-            <option value="g">g</option>
-            <option value="mg">mg</option>
-            <option value="kg">kg</option>
-            <option value="mL" selected>mL</option>
-            <option value="L">L</option>
+            <option>mg</option>
+            <option>g</option>
+            <option>kg</option>
+            <option selected>mL</option>
+            <option>L</option>
           </select>
         </div>
+
         <div>
-          <label for="container">Container</label>
+          <label>Container</label>
           <select id="container">
-            <option value="glass" selected>glass</option>
-            <option value="plastic">plastic</option>
-            <option value="metal">metal</option>
-            <option value="other">other</option>
+            <option selected>glass</option>
+            <option>plastic</option>
+            <option>metal</option>
+            <option>other</option>
           </select>
         </div>
       </div>
+
       <div style="margin-top:8px">
-        <label for="notes">Notes</label>
-        <textarea id="notes" placeholder="Label state, purity, supplier, hazards, storage, etc."></textarea>
+        <label>Notes</label>
+        <textarea id="notes"></textarea>
       </div>
+
       <div class="toolbar" style="margin-top:10px">
-        <button id="addBtn" class="primary" title="Enter (Ctrl+Enter)">Add</button>
-        <button id="lookupBtn" class="ghost" title="On-demand lookup via PubChem">Lookup (PubChem)</button>
-        <label><input type="checkbox" id="autoLookup" /> Auto‑lookup on blur</label>
-        <span id="status" class="status muted"></span>
+        <button id="addBtn" class="primary">
+          Add
+        </button>
+
+        <button id="lookupBtn">
+          PubChem Lookup
+        </button>
+
+        <label>
+          <input id="autoLookup" type="checkbox" />
+          Auto lookup
+        </label>
       </div>
-      <p class="muted" style="margin-top:10px">
-        Shortcuts: <span class="kbd">Enter</span> to add, <span class="kbd">Ctrl+Enter</span> to add and keep focus, <span class="kbd">/</span> focuses CAS, <span class="kbd">,</span> focuses Name.
+
+      <p class="muted">
+        <span class="kbd">Enter</span> add entry •
+        <span class="kbd">/</span> CAS focus •
+        <span class="kbd">,</span> Name focus
       </p>
+
+      <div id="status" class="status muted"></div>
     </section>
 
     <section class="card">
       <h2>Inventory</h2>
+
       <div class="toolbar" style="margin-bottom:8px">
-        <input type="text" id="search" placeholder="Filter by CAS or name" />
-        <button id="clearBtn">Clear</button>
+        <input
+          id="search"
+          placeholder="Search..."
+          style="flex:1" />
+
+        <button id="clearBtn">
+          Clear
+        </button>
       </div>
-      <div style="overflow:auto; max-height: 70vh;">
-        <table id="table">
-          <thead><tr>
-            <th>#</th>
-            <th>CAS</th>
-            <th>Name</th>
-            <th class="right">Qty</th>
-            <th>Unit</th>
-            <th>Container</th>
-            <th>Notes</th>
-            <th></th>
-          </tr></thead>
-          <tbody></tbody>
+
+      <div style="overflow:auto;max-height:75vh">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>CAS</th>
+              <th>Name</th>
+              <th>Qty</th>
+              <th>Unit</th>
+              <th>Container</th>
+              <th>Notes</th>
+              <th></th>
+            </tr>
+          </thead>
+
+          <tbody id="tbody"></tbody>
         </table>
       </div>
     </section>
   </main>
 
   <script>
-    // Persistent DB in IndexedDB via sql.js
-    // Schema: items(id INTEGER PK, cas TEXT, name TEXT, qty REAL, unit TEXT, container TEXT, notes TEXT, created_at TEXT)
+    const DB_NAME = "chem_inventory";
+    const STORE_NAME = "sqlite";
+    const DB_KEY = "main";
 
-    let SQL;           // sql.js module
-    let db;            // Database instance
-    const DB_KEY = 'chem_inventory_sqlite';
+    let SQL;
+    let db;
+    let readyPromise;
 
     const $ = (id) => document.getElementById(id);
-    const status = (msg, cls = 'muted') => {
-      const s = $("status"); s.className = `status ${cls}`; s.textContent = msg;
-      if (msg) setTimeout(() => { if ($("status").textContent === msg) status(''); }, 4000);
-    };
+
+    function setStatus(msg, cls = "muted") {
+      const el = $("status");
+
+      el.className = `status ${cls}`;
+      el.textContent = msg;
+
+      if (msg) {
+        setTimeout(() => {
+          if (el.textContent === msg) {
+            el.textContent = "";
+          }
+        }, 4000);
+      }
+    }
+
+    async function openIdb() {
+      return new Promise((resolve, reject) => {
+        const req = indexedDB.open(DB_NAME, 1);
+
+        req.onupgradeneeded = () => {
+          req.result.createObjectStore(STORE_NAME);
+        };
+
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+      });
+    }
+
+    async function saveDb() {
+      const idb = await openIdb();
+
+      return new Promise((resolve, reject) => {
+        const tx = idb.transaction(STORE_NAME, "readwrite");
+
+        tx.objectStore(STORE_NAME).put(db.export(), DB_KEY);
+
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error);
+      });
+    }
+
+    async function loadDbBytes() {
+      const idb = await openIdb();
+
+      return new Promise((resolve, reject) => {
+        const tx = idb.transaction(STORE_NAME, "readonly");
+
+        const req = tx.objectStore(STORE_NAME).get(DB_KEY);
+
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+      });
+    }
 
     async function init() {
-      SQL = await initSqlJs({ locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.2/${file}` });
-      const saved = localStorage.getItem(DB_KEY);
+      SQL = await initSqlJs({
+        locateFile: file =>
+          `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.2/${file}`
+      });
+
+      const saved = await loadDbBytes();
+
       if (saved) {
-        const u8 = Uint8Array.from(atob(saved), c => c.charCodeAt(0));
-        db = new SQL.Database(u8);
+        db = new SQL.Database(saved);
       } else {
         db = new SQL.Database();
-        db.run(`CREATE TABLE IF NOT EXISTS items (
-          id INTEGER PRIMARY KEY AUTOINCREMENT,
-          cas TEXT,
-          name TEXT,
-          qty REAL,
-          unit TEXT,
-          container TEXT,
-          notes TEXT,
-          created_at TEXT
-        );
-        CREATE INDEX IF NOT EXISTS idx_items_cas ON items(cas);
-        CREATE INDEX IF NOT EXISTS idx_items_name ON items(name);`);
-        persist();
+
+        db.run(`
+          CREATE TABLE items (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            cas TEXT,
+            name TEXT,
+            qty REAL,
+            unit TEXT,
+            container TEXT,
+            notes TEXT,
+            created_at TEXT
+          );
+
+          CREATE INDEX idx_cas ON items(cas);
+          CREATE INDEX idx_name ON items(name);
+        `);
+
+        await saveDb();
       }
+
       render();
+
+      setStatus("Database ready", "ok");
     }
 
-    function persist() {
-      const data = db.export();
-      const b64 = btoa(Array.from(data).map(b => String.fromCharCode(b)).join(""));
-      localStorage.setItem(DB_KEY, b64);
-    }
+    async function addItem(rec) {
+      const stmt = db.prepare(`
+        INSERT INTO items (
+          cas,
+          name,
+          qty,
+          unit,
+          container,
+          notes,
+          created_at
+        )
+        VALUES (?, ?, ?, ?, ?, ?, ?)
+      `);
 
-    function addItem(rec) {
-      const stmt = db.prepare(`INSERT INTO items (cas,name,qty,unit,container,notes,created_at) VALUES (?,?,?,?,?,?,?)`);
       stmt.run([
         rec.cas || null,
         rec.name || null,
-        rec.qty != null && rec.qty !== '' ? Number(rec.qty) : null,
+        rec.qty ? Number(rec.qty) : null,
         rec.unit || null,
         rec.container || null,
         rec.notes || null,
         new Date().toISOString()
       ]);
+
       stmt.free();
-      persist();
+
+      await saveDb();
+
       render();
     }
 
-    function deleteItem(id) {
-      db.run(`DELETE FROM items WHERE id = ?`, [id]);
-      persist();
+    async function deleteItem(id) {
+      db.run("DELETE FROM items WHERE id = ?", [id]);
+
+      await saveDb();
+
       render();
     }
 
-    function queryAll(filter) {
-      let sql = `SELECT * FROM items`;
+    function query(filter = "") {
+      let sql = "SELECT * FROM items";
       const params = [];
+
       if (filter) {
-        sql += ` WHERE (cas LIKE ? OR name LIKE ? OR notes LIKE ?)`;
+        sql += `
+          WHERE
+            cas LIKE ?
+            OR name LIKE ?
+            OR notes LIKE ?
+        `;
+
         const f = `%${filter}%`;
+
         params.push(f, f, f);
       }
-      sql += ` ORDER BY id DESC`;
+
+      sql += " ORDER BY id DESC";
+
       const res = db.exec(sql, params);
-      if (!res.length) return [];
-      const cols = res[0].columns; const rows = res[0].values;
-      return rows.map(r => Object.fromEntries(r.map((v,i)=>[cols[i], v])));
+
+      if (!res.length) {
+        return [];
+      }
+
+      const cols = res[0].columns;
+
+      return res[0].values.map(row => {
+        const obj = {};
+
+        cols.forEach((c, i) => {
+          obj[c] = row[i];
+        });
+
+        return obj;
+      });
     }
 
     function render() {
-      const filter = $("search").value.trim();
-      const rows = queryAll(filter);
-      const tbody = document.querySelector('#table tbody');
-      tbody.innerHTML = '';
-      rows.forEach((r, idx) => {
-        const tr = document.createElement('tr');
+      const rows = query($("search").value.trim());
+
+      const tbody = $("tbody");
+
+      tbody.innerHTML = "";
+
+      for (const row of rows) {
+        const tr = document.createElement("tr");
+
         tr.innerHTML = `
-          <td>${r.id}</td>
-          <td><span class="pill">${r.cas ?? ''}</span></td>
-          <td>${r.name ?? ''}</td>
-          <td class="right">${r.qty ?? ''}</td>
-          <td>${r.unit ?? ''}</td>
-          <td>${r.container ?? ''}</td>
-          <td style="white-space: pre-wrap; max-width: 420px;">${r.notes ?? ''}</td>
-          <td class="right"><button data-del="${r.id}">Delete</button></td>
+          <td>${row.id}</td>
+          <td><span class="pill">${escapeHtml(row.cas || "")}</span></td>
+          <td>${escapeHtml(row.name || "")}</td>
+          <td class="right">${row.qty ?? ""}</td>
+          <td>${escapeHtml(row.unit || "")}</td>
+          <td>${escapeHtml(row.container || "")}</td>
+          <td style="white-space:pre-wrap">
+            ${escapeHtml(row.notes || "")}
+          </td>
+          <td>
+            <button
+              class="danger"
+              data-delete="${row.id}">
+              Delete
+            </button>
+          </td>
         `;
+
         tbody.appendChild(tr);
-      });
+      }
     }
 
-    function resetForm(keepFocus=false) {
-      const fields = ['cas','name','qty','unit','container','notes'];
-      fields.forEach(id => { const el = $(id); if (el.tagName === 'SELECT') el.selectedIndex = 0; else el.value = ''; });
-      if (keepFocus) $('cas').focus();
+    function resetForm() {
+      $("cas").value = "";
+      $("name").value = "";
+      $("qty").value = "";
+      $("unit").value = "mL";
+      $("container").value = "glass";
+      $("notes").value = "";
+
+      $("cas").focus();
     }
 
-    function exportDb() {
-      const data = db.export();
-      const blob = new Blob([data], {type: 'application/octet-stream'});
-      const url = URL.createObjectURL(blob);
-      download(url, `chem_inventory_${new Date().toISOString().slice(0,10)}.sqlite`);
+    function escapeHtml(str) {
+      return str
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
     }
 
-    function exportCsv() {
-      const rows = queryAll('');
-      const header = ['id','cas','name','qty','unit','container','notes','created_at'];
-      const esc = s => (s==null?'' : (""+s).replaceAll('"','""'));
-      const csv = [header.join(',')].concat(rows.map(r => header.map(k => `"${esc(r[k])}"`).join(','))).join('\n');
-      const blob = new Blob([csv], {type: 'text/csv'});
-      const url = URL.createObjectURL(blob);
-      download(url, `chem_inventory_${new Date().toISOString().slice(0,10)}.csv`);
-    }
-
-    function download(url, filename) {
-      const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove();
-      URL.revokeObjectURL(url);
-    }
-
-    function importDb(file) {
-      const reader = new FileReader();
-      reader.onload = () => {
-        const u8 = new Uint8Array(reader.result);
-        db = new SQL.Database(u8);
-        persist();
-        render();
-        status('Database imported', 'ok');
+    async function pubchemLookup(cas, name) {
+      const out = {
+        cas: cas.trim(),
+        name: name.trim()
       };
-      reader.readAsArrayBuffer(file);
-    }
 
-    async function pubchemLookup({cas, name}) {
-      // On-demand only. We try CAS first, then name if needed. Returns {cas, name} filled where possible.
-      // CAS via RegistryID: https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/67-56-1/property/IUPACName/JSON
-      const out = { cas: cas?.trim() || '', name: name?.trim() || '' };
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), 8000);
       try {
         if (out.cas && !out.name) {
-          const url = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${encodeURIComponent(out.cas)}/property/IUPACName/JSON`;
-          const r = await fetch(url, { signal: controller.signal });
+          const r = await fetch(
+            `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${encodeURIComponent(out.cas)}/property/IUPACName/JSON`
+          );
+
           if (r.ok) {
             const j = await r.json();
-            const prop = j?.PropertyTable?.Properties?.[0];
-            if (prop?.IUPACName) out.name = prop.IUPACName;
+
+            out.name =
+              j?.PropertyTable?.Properties?.[0]?.IUPACName || "";
           }
         }
+
         if (!out.cas && out.name) {
-          const url = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${encodeURIComponent(out.name)}/xrefs/RN/JSON`;
-          const r = await fetch(url, { signal: controller.signal });
+          const r = await fetch(
+            `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${encodeURIComponent(out.name)}/xrefs/RN/JSON`
+          );
+
           if (r.ok) {
             const j = await r.json();
-            const rn = j?.InformationList?.Information?.[0]?.RN?.[0];
-            if (rn) out.cas = rn;
+
+            out.cas =
+              j?.InformationList?.Information?.[0]?.RN?.[0] || "";
           }
         }
-      } catch (e) {
-        console.warn('PubChem lookup failed', e);
-      } finally { clearTimeout(timeout); }
+      } catch (err) {
+        console.error(err);
+      }
+
       return out;
     }
 
-    // Wire up events
-    document.addEventListener('DOMContentLoaded', init);
+    function download(blob, filename) {
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement("a");
+
+      a.href = url;
+      a.download = filename;
+
+      a.click();
+
+      URL.revokeObjectURL(url);
+    }
+
+    async function exportDb() {
+      const blob = new Blob(
+        [db.export()],
+        { type: "application/octet-stream" }
+      );
+
+      download(blob, "chem_inventory.sqlite");
+    }
+
+    async function exportCsv() {
+      const rows = query();
+
+      const header = [
+        "id",
+        "cas",
+        "name",
+        "qty",
+        "unit",
+        "container",
+        "notes",
+        "created_at"
+      ];
+
+      const csv = [
+        header.join(","),
+        ...rows.map(row =>
+          header
+            .map(h => `"${String(row[h] ?? "").replaceAll('"', '""')}"`)
+            .join(",")
+        )
+      ].join("\n");
+
+      const blob = new Blob(
+        [csv],
+        { type: "text/csv" }
+      );
+
+      download(blob, "chem_inventory.csv");
+    }
+
+    async function importDb(file) {
+      const buf = await file.arrayBuffer();
+
+      db = new SQL.Database(new Uint8Array(buf));
+
+      await saveDb();
+
+      render();
+
+      setStatus("Database imported", "ok");
+    }
+
+    document.addEventListener("DOMContentLoaded", async () => {
+      readyPromise = init();
+
+      try {
+        await readyPromise;
+      } catch (err) {
+        console.error(err);
+
+        setStatus("Initialization failed", "bad");
+      }
+    });
+
+    $("addBtn").addEventListener("click", async () => {
+      await readyPromise;
 
-    $('addBtn').addEventListener('click', () => {
       const rec = {
-        cas: $('cas').value.trim(),
-        name: $('name').value.trim(),
-        qty: $('qty').value,
-        unit: $('unit').value,
-        container: $('container').value,
-        notes: $('notes').value.trim()
+        cas: $("cas").value.trim(),
+        name: $("name").value.trim(),
+        qty: $("qty").value,
+        unit: $("unit").value,
+        container: $("container").value,
+        notes: $("notes").value.trim()
       };
-      if (!rec.cas && !rec.name) { status('Provide CAS or name', 'bad'); return; }
-      addItem(rec);
-      resetForm(true);
+
+      if (!rec.cas && !rec.name) {
+        setStatus("Need CAS or name", "bad");
+        return;
+      }
+
+      await addItem(rec);
+
+      resetForm();
+
+      setStatus("Entry added", "ok");
     });
 
-    $('lookupBtn').addEventListener('click', async () => {
-      const cas = $('cas').value; const name = $('name').value;
-      if (!cas && !name) { status('Nothing to look up', 'warn'); return; }
-      status('Querying PubChem…');
-      const res = await pubchemLookup({cas, name});
-      if (res.cas && !$('cas').value) $('cas').value = res.cas;
-      if (res.name && !$('name').value) $('name').value = res.name;
-      status(res.cas || res.name ? 'Filled from PubChem' : 'No match', res.cas||res.name ? 'ok':'warn');
+    $("lookupBtn").addEventListener("click", async () => {
+      const cas = $("cas").value;
+      const name = $("name").value;
+
+      if (!cas && !name) {
+        setStatus("Nothing to lookup", "bad");
+        return;
+      }
+
+      setStatus("Querying PubChem...");
+
+      const res = await pubchemLookup(cas, name);
+
+      if (res.cas && !$("cas").value) {
+        $("cas").value = res.cas;
+      }
+
+      if (res.name && !$("name").value) {
+        $("name").value = res.name;
+      }
+
+      setStatus("Lookup complete", "ok");
     });
 
-    $('autoLookup').addEventListener('change', e => {
-      status(e.target.checked ? 'Auto‑lookup enabled' : 'Auto‑lookup disabled');
+    $("search").addEventListener("input", render);
+
+    $("clearBtn").addEventListener("click", () => {
+      $("search").value = "";
+      render();
     });
 
-    ['cas','name'].forEach(id => {
-      $(id).addEventListener('blur', async () => {
-        if (!$('autoLookup').checked) return;
-        const cas = $('cas').value; const name = $('name').value;
-        if (!cas || !name) {
-          const res = await pubchemLookup({cas, name});
-          if (res.cas && !cas) $('cas').value = res.cas;
-          if (res.name && !name) $('name').value = res.name;
-        }
-      });
+    $("tbody").addEventListener("click", async (e) => {
+      const btn = e.target.closest("[data-delete]");
+
+      if (!btn) {
+        return;
+      }
+
+      const id = Number(btn.dataset.delete);
+
+      if (!confirm(`Delete item ${id}?`)) {
+        return;
+      }
+
+      await deleteItem(id);
+
+      setStatus("Deleted", "ok");
     });
 
-    $('search').addEventListener('input', render);
+    $("exportDbBtn").addEventListener("click", exportDb);
 
-    document.querySelector('#table').addEventListener('click', (e) => {
-      const btn = e.target.closest('button[data-del]');
-      if (!btn) return;
-      const id = Number(btn.getAttribute('data-del'));
-      if (confirm('Delete entry #' + id + '?')) deleteItem(id);
+    $("exportCsvBtn").addEventListener("click", exportCsv);
+
+    $("importDb").addEventListener("change", async (e) => {
+      const file = e.target.files?.[0];
+
+      if (!file) {
+        return;
+      }
+
+      await importDb(file);
+
+      e.target.value = "";
     });
 
-    $('clearBtn').addEventListener('click', () => { $('search').value=''; render(); });
-
-    $('exportDbBtn').addEventListener('click', exportDb);
-    $('exportCsvBtn').addEventListener('click', exportCsv);
-    $('importDb').addEventListener('change', (e) => {
-      const f = e.target.files?.[0]; if (f) importDb(f);
-      e.target.value = '';
-    });
-
-    // Keyboard shortcuts: Enter to add, Ctrl+Enter keep focus, '/' for CAS, ',' for Name
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' && (document.activeElement.tagName !== 'TEXTAREA')) {
+    document.addEventListener("keydown", (e) => {
+      if (
+        e.key === "Enter" &&
+        document.activeElement.tagName !== "TEXTAREA"
+      ) {
         e.preventDefault();
-        const keep = e.ctrlKey || e.metaKey;
-        $('addBtn').click();
-        if (keep) $('cas').focus();
-      } else if (e.key === '/') { e.preventDefault(); $('cas').focus(); }
-      else if (e.key === ',') { e.preventDefault(); $('name').focus(); }
+
+        $("addBtn").click();
+      }
+
+      if (e.key === "/") {
+        e.preventDefault();
+        $("cas").focus();
+      }
+
+      if (e.key === ",") {
+        e.preventDefault();
+        $("name").focus();
+      }
     });
   </script>
 </body>
