hyperbook 0.83.0 → 0.84.1

package/dist/assets/shell.css

@@ -935,3 +935,197 @@ nav.toc li.level-3 {
 .main-grid.layout-standalone .breadcrumb {
   display: none;
 }
+
+/* User Authentication UI */
+#user-toggle {
+  margin-right: 8px;
+  line-height: 1;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.user-icon {
+  width: 24px;
+  height: 24px;
+  background-color: var(--color-brand-text);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  /* not-logged-in: person with question mark */
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>');
+  opacity: 0.5;
+}
+
+/* logged-in: solid person */
+.user-icon[data-state="logged-in"] {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>');
+  opacity: 1;
+}
+
+/* unsynced: person with exclamation */
+.user-icon[data-state="unsynced"] {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>');
+  opacity: 1;
+  background-color: #f59e0b;
+}
+
+/* syncing: person with rotating animation */
+.user-icon[data-state="syncing"] {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>');
+  opacity: 1;
+  animation: user-icon-pulse 1s ease-in-out infinite;
+}
+
+/* synced: person with checkmark feel */
+.user-icon[data-state="synced"] {
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>');
+  opacity: 1;
+  background-color: #22c55e;
+}
+
+@keyframes user-icon-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+#user-drawer {
+  background: var(--color-background);
+  border-left: 1px solid var(--color-nav-border);
+}
+
+.user-drawer-content {
+  padding: 20px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.user-form,
+.user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.user-form h3,
+.user-info h3 {
+  margin: 0 0 10px 0;
+  color: var(--color-text);
+}
+
+.user-form input {
+  padding: 10px;
+  border: 1px solid var(--color-nav-border);
+  border-radius: 4px;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-size: 14px;
+}
+
+.user-form button,
+.user-info button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  background: var(--color-brand);
+  color: var(--color-brand-text);
+}
+
+.user-form button:hover,
+.user-info button:hover {
+  opacity: 0.9;
+}
+
+.user-info .logout-btn {
+  background: #e74c3c;
+  color: white;
+}
+
+.user-info .logout-btn:hover {
+  background: #c0392b;
+}
+
+.user-error {
+  color: #e74c3c;
+  font-size: 14px;
+  min-height: 20px;
+}
+
+.user-info p {
+  margin: 5px 0;
+  color: var(--color-text);
+}
+
+#user-save-status {
+  font-weight: normal;
+}
+
+#user-save-status.unsaved {
+  color: #f39c12;
+}
+
+#user-save-status.saving {
+  color: #f39c12;
+}
+
+#user-save-status.saved {
+  color: #27ae60;
+}
+
+#user-save-status.error {
+  color: #e74c3c;
+}
+
+#user-save-status.offline {
+  color: #95a5a6;
+}
+
+#user-save-status.offline-queued {
+  color: #f39c12;
+}
+
+#user-save-status.readonly {
+  color: #e67e22;
+  font-weight: bold;
+}
+
+#impersonation-banner {
+  font-family: hyperbook-body, sans-serif;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  background: #e67e22;
+  color: white;
+  padding: 8px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  font-size: 1rem;
+}
+
+#impersonation-banner a {
+  color: white;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+#impersonation-banner a:hover {
+  opacity: 0.8;
+}
+
+#impersonation-banner ~ * {
+  margin-top: 36px;
+}
+
+.hidden {
+  display: none !important;
+}

package/dist/assets/store.js

@@ -9,7 +9,7 @@ store.version(2).stores({
             mouseX,
             mouseY,
             scrollX,
-            scorllY,
+            scrollY,
             windowWidth,
             windowHeight
   `,
@@ -32,14 +32,141 @@ store.version(2).stores({
   multievent: `id,state`,
   typst: `id,code`,
 });
-var sqlIdeDB = new Dexie("SQL-IDE");
-sqlIdeDB.version(0.1).stores({
-  scripts: `scriptId,script`,
-});
-var learnJDB = new Dexie("LearnJ");
-learnJDB.version(1).stores({
-  scripts: `scriptId,script`,
-});
+
+/**
+ * Read all data from an external IndexedDB database using the raw API.
+ * Returns a Dexie-export-compatible object, or null if the DB doesn't exist.
+ */
+function exportExternalDB(dbName) {
+  return new Promise((resolve) => {
+    const request = indexedDB.open(dbName);
+    request.onerror = () => resolve(null);
+    request.onsuccess = (event) => {
+      const db = event.target.result;
+      const storeNames = Array.from(db.objectStoreNames);
+      if (storeNames.length === 0) {
+        db.close();
+        resolve(null);
+        return;
+      }
+      const result = {
+        formatName: "dexie",
+        formatVersion: 1,
+        data: {
+          databaseName: dbName,
+          databaseVersion: db.version,
+          tables: [],
+        },
+      };
+      const tx = db.transaction(storeNames, "readonly");
+      let pending = storeNames.length;
+      storeNames.forEach((name) => {
+        const objectStore = tx.objectStore(name);
+        const tableInfo = {
+          name: name,
+          schema: objectStore.keyPath ? `${objectStore.keyPath}` : "++id",
+          rowCount: 0,
+          rows: [],
+        };
+        const cursorReq = objectStore.openCursor();
+        cursorReq.onsuccess = (e) => {
+          const cursor = e.target.result;
+          if (cursor) {
+            tableInfo.rows.push(cursor.value);
+            cursor.continue();
+          } else {
+            tableInfo.rowCount = tableInfo.rows.length;
+            result.data.tables.push(tableInfo);
+            pending--;
+            if (pending === 0) {
+              db.close();
+              resolve(result);
+            }
+          }
+        };
+        cursorReq.onerror = () => {
+          pending--;
+          if (pending === 0) {
+            db.close();
+            resolve(result);
+          }
+        };
+      });
+    };
+  });
+}
+
+/**
+ * Import data into an external IndexedDB database using the raw API.
+ * Accepts a Dexie-export-compatible object. Clears existing data before importing.
+ */
+function importExternalDB(dbName, exportData) {
+  return new Promise((resolve, reject) => {
+    const tables = exportData?.data?.tables;
+    if (!tables || tables.length === 0) { resolve(); return; }
+
+    // Determine the version the external tool uses (keep it in sync)
+    const request = indexedDB.open(dbName);
+    request.onerror = () => reject(request.error);
+
+    request.onupgradeneeded = (event) => {
+      // DB didn't exist yet — create the object stores from the export data
+      const db = event.target.result;
+      tables.forEach((table) => {
+        if (!db.objectStoreNames.contains(table.name)) {
+          const keyPath = table.schema && !table.schema.startsWith('++')
+            ? table.schema.split(',')[0].trim()
+            : null;
+          db.createObjectStore(table.name, keyPath ? { keyPath } : { autoIncrement: true });
+        }
+      });
+    };
+
+    request.onsuccess = (event) => {
+      const db = event.target.result;
+      const storeNames = tables
+        .map((t) => t.name)
+        .filter((n) => db.objectStoreNames.contains(n));
+      if (storeNames.length === 0) { db.close(); resolve(); return; }
+
+      const tx = db.transaction(storeNames, "readwrite");
+      // Clear then re-populate each store
+      storeNames.forEach((name) => {
+        const objectStore = tx.objectStore(name);
+        objectStore.clear();
+        const table = tables.find((t) => t.name === name);
+        if (table && table.rows) {
+          table.rows.forEach((row) => objectStore.put(row));
+        }
+      });
+      tx.oncomplete = () => { db.close(); resolve(); };
+      tx.onerror = () => { db.close(); reject(tx.error); };
+    };
+  });
+}
+
+/**
+ * Clear all tables in an external IndexedDB database using the raw API.
+ */
+function clearExternalDB(dbName) {
+  return new Promise((resolve) => {
+    const request = indexedDB.open(dbName);
+    request.onerror = () => resolve();
+    request.onsuccess = (event) => {
+      const db = event.target.result;
+      const storeNames = Array.from(db.objectStoreNames);
+      if (storeNames.length === 0) {
+        db.close();
+        resolve();
+        return;
+      }
+      const tx = db.transaction(storeNames, "readwrite");
+      storeNames.forEach((name) => tx.objectStore(name).clear());
+      tx.oncomplete = () => { db.close(); resolve(); };
+      tx.onerror = () => { db.close(); resolve(); };
+    };
+  });
+}
 
 const initStore = async () => {
   store.currentState.put({
@@ -68,20 +195,21 @@ const initStore = async () => {
     });
   });
 };
+
 initStore();
 
 async function hyperbookExport() {
   const hyperbook = await store.export({ prettyJson: true });
-  const sqlIde = await sqlIdeDB.export({ prettyJson: true });
-  const learnJ = await learnJDB.export({ prettyJson: true });
+  const sqlIde = await exportExternalDB('SQL-IDE');
+  const learnJ = await exportExternalDB('LearnJ');
 
   const data = {
     version: 1,
     origin: window.location.origin,
     data: {
       hyperbook: JSON.parse(await hyperbook.text()),
-      sqlIde: JSON.parse(await sqlIde.text()),
-      learnJ: JSON.parse(await learnJ.text()),
+      sqlIde: sqlIde || {},
+      learnJ: learnJ || {},
     },
   };
 
@@ -108,8 +236,8 @@ async function hyperbookReset() {
   }
 
   clearTable(store);
-  clearTable(learnJDB);
-  clearTable(sqlIdeDB);
+  await clearExternalDB('LearnJ');
+  await clearExternalDB('SQL-IDE');
 
   alert(i18n.get("store-reset-sucessful"));
   window.location.reload();
@@ -146,16 +274,14 @@ async function hyperbookImport() {
       const hyperbookBlob = new Blob([JSON.stringify(hyperbook)], {
         type: "application/json",
       });
-      const sqlIdeBlob = new Blob([JSON.stringify(sqlIde)], {
-        type: "application/json",
-      });
-      const learnJBlob = new Blob([JSON.stringify(learnJ)], {
-        type: "application/json",
-      });
 
       await store.import(hyperbookBlob, { clearTablesBeforeImport: true });
-      await sqlIdeDB.import(sqlIdeBlob, { clearTablesBeforeImport: true });
-      await learnJDB.import(learnJBlob, { clearTablesBeforeImport: true });
+      if (sqlIde) {
+        await importExternalDB('SQL-IDE', sqlIde);
+      }
+      if (learnJ) {
+        await importExternalDB('LearnJ', learnJ);
+      }
 
       alert(i18n.get("store-import-sucessful"));
       window.location.reload();