hyperbook 0.84.4 → 0.84.5

package/dist/assets/bootstrap.js

@@ -0,0 +1,248 @@
+/// <reference path="./hyperbook.types.js" />
+window.hyperbook = window.hyperbook || {};
+
+/**
+ * Bootstrap script: initializes collapsibles, search, bookmarks,
+ * standalone mode, and section filtering on DOMContentLoaded.
+ * @type {HyperbookBootstrap}
+ * @memberof hyperbook
+ * @see hyperbook.store
+ */
+hyperbook.bootstrap = (function () {
+  /**
+   * Initialize collapsible elements within the given root.
+   * @param {HTMLElement} root
+   */
+  const initCollapsibles = (root) => {
+    const detailsEls = root.querySelectorAll("details.section, details.directive-collapsible");
+    for (let details of detailsEls) {
+      const id = details.getAttribute("data-id");
+
+      // Prevent link clicks from toggling the details element in navigation
+      if (id && id.startsWith("_nav:") && !details.classList.contains("empty")) {
+        const link = details.querySelector("summary a");
+        link?.addEventListener("click", (event) => {
+          event.stopPropagation();
+        });
+      }
+
+      // Listen for toggle events to persist state and sync with other elements
+      details.addEventListener("toggle", () => {
+        if (id) {
+          if (details.open) {
+            hyperbook.store.collapsibles.put({ id });
+          } else {
+            hyperbook.store.collapsibles.delete(id);
+          }
+
+          // Sync all elements with the same ID
+          const allWithSameId = document.querySelectorAll(`[data-id="${id}"]`);
+          for (let el of allWithSameId) {
+            if (el !== details && el.tagName === "DETAILS") {
+              el.open = details.open;
+            }
+          }
+        }
+
+        setTimeout(() => {
+          window.dispatchEvent(new Event("resize"));
+        }, 100);
+      });
+    }
+    updateCollapsibles(root);
+  };
+
+  /**
+   * Restore collapsible open/close state from the store.
+   * @param {HTMLElement} root
+   */
+  const updateCollapsibles = (root) => {
+    hyperbook.store.collapsibles.toArray().then((collapsibles) => {
+      const detailsEls = root.querySelectorAll("details.section, details.directive-collapsible");
+      for (let details of detailsEls) {
+        const id = details.getAttribute("data-id");
+        if (id) {
+          const shouldBeOpen = collapsibles.some((c) => c.id === id);
+          if (!id.startsWith("_nav:") && details.open !== shouldBeOpen) {
+            details.open = shouldBeOpen;
+          }
+        }
+      }
+    });
+  };
+
+  /**
+   * Initialize search input Enter key handling.
+   * @param {HTMLElement} root
+   */
+  const initSearch = (root) => {
+    const searchInputEl = root.querySelector("#search-input");
+    if (searchInputEl) {
+      searchInputEl.addEventListener("keypress", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          hyperbook.ui.search();
+        }
+      });
+    }
+  };
+
+  /**
+   * Initialize bookmark active states within the given root.
+   * @param {HTMLElement} [root=document]
+   */
+  function initBookmarks(root = document) {
+    const bookmarkEls = root.getElementsByClassName("bookmark");
+    for (let bookmarkEl of bookmarkEls) {
+      const key = bookmarkEl.getAttribute("data-key");
+      hyperbook.store.bookmarks.get(key).then((bookmark) => {
+        if (bookmark) {
+          bookmarkEl.classList.add("active");
+        }
+      });
+    }
+  }
+
+  /**
+   * Initialize all hyperbook elements within a root.
+   * @param {HTMLElement} root
+   */
+  function init(root) {
+    initCollapsibles(root);
+    initSearch(root);
+    initBookmarks(root);
+  }
+
+  /**
+   * Hide TOC toggle button when sections are filtered.
+   */
+  function hideTocWhenFiltered() {
+    const tocToggle = document.getElementById('toc-toggle');
+    if (tocToggle) {
+      tocToggle.style.display = 'none';
+    }
+  }
+
+  /**
+   * Filter sections based on the `sections` query parameter.
+   */
+  function filterSections() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const sectionsParam = urlParams.get('sections');
+    
+    if (!sectionsParam) {
+      return;
+    }
+    
+    const sectionIds = sectionsParam.split(',').map(id => id.trim()).filter(id => id);
+    
+    if (sectionIds.length === 0) {
+      return;
+    }
+    
+    const allHeadings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+    const headingsArray = Array.from(allHeadings);
+    
+    const visibleElements = new Set();
+    
+    sectionIds.forEach(sectionId => {
+      const heading = document.getElementById(sectionId);
+      if (!heading) {
+        return;
+      }
+      
+      const headingLevel = parseInt(heading.tagName.substring(1));
+      
+      visibleElements.add(heading);
+      
+      const headingIndex = headingsArray.indexOf(heading);
+      if (headingIndex === -1) {
+        return;
+      }
+      
+      let currentElement = heading.nextElementSibling;
+      
+      while (currentElement) {
+        const isHeading = /^H[1-6]$/.test(currentElement.tagName);
+        
+        if (isHeading) {
+          const currentLevel = parseInt(currentElement.tagName.substring(1));
+          
+          if (currentLevel <= headingLevel) {
+            break;
+          }
+          
+          visibleElements.add(currentElement);
+        } else {
+          visibleElements.add(currentElement);
+        }
+        
+        currentElement = currentElement.nextElementSibling;
+      }
+    });
+    
+    const markdownDiv = document.querySelector('main article .hyperbook-markdown');
+    if (markdownDiv) {
+      Array.from(markdownDiv.children).forEach(element => {
+        const isUIElement = element.id === 'floating-buttons-container' || 
+                           element.tagName === 'SIDE-DRAWER';
+        
+        if (!visibleElements.has(element) && !isUIElement) {
+          element.style.display = 'none';
+        }
+      });
+      
+      hideTocWhenFiltered();
+    }
+  }
+
+  /**
+   * Check for standalone layout URL parameter or iframe context.
+   */
+  function checkStandaloneMode() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const standaloneParam = urlParams.get('standalone') === 'true';
+    
+    const isVSCodeWebview = typeof acquireVsCodeApi !== 'undefined';
+    const isInIframe = window.self !== window.top && !isVSCodeWebview;
+    
+    if (standaloneParam || isInIframe) {
+      const mainGrid = document.querySelector('.main-grid');
+      if (mainGrid && !mainGrid.classList.contains('layout-standalone')) {
+        mainGrid.classList.add('layout-standalone');
+      }
+      
+      const tocToggle = document.getElementById('toc-toggle');
+      if (tocToggle) {
+        tocToggle.style.display = 'none';
+      }
+      
+      const qrcodeOpen = document.getElementById('qrcode-open');
+      if (qrcodeOpen) {
+        qrcodeOpen.style.display = 'none';
+      }
+    }
+  }
+
+  // Initialize on DOMContentLoaded
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+    checkStandaloneMode();
+    filterSections();
+  });
+
+  // Observe for new elements added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1) {
+          init(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  return { init };
+})();

package/dist/assets/cloud.js

@@ -1,4 +1,15 @@
-window.hyperbook.cloud = (function () {
+/// <reference path="./hyperbook.types.js" />
+window.hyperbook = window.hyperbook || {};
+
+/**
+ * Cloud sync integration for hyperbook store data.
+ * Handles authentication, event-based sync, and snapshot sync.
+ * @type {HyperbookCloud}
+ * @memberof hyperbook
+ * @see hyperbook.store
+ * @see hyperbook.i18n
+ */
+hyperbook.cloud = (function () {
   // ===== Cloud Integration =====
   const AUTH_TOKEN_KEY = "hyperbook_auth_token";
   const AUTH_USER_KEY = "hyperbook_auth_user";
@@ -188,8 +199,8 @@ window.hyperbook.cloud = (function () {
     }
 
     async sendSnapshot() {
-      const hyperbookExport = await store.export({ prettyJson: false });
-      const exportData = JSON.parse(await hyperbookExport.text());
+      const storeExport = await hyperbook.store.db.export({ prettyJson: false });
+      const exportData = JSON.parse(await storeExport.text());
 
       const data = await apiRequest(
         `/api/store/${HYPERBOOK_CLOUD.id}/snapshot`,
@@ -532,7 +543,7 @@ window.hyperbook.cloud = (function () {
           const blob = new Blob([JSON.stringify(hyperbook)], {
             type: "application/json",
           });
-          await store.import(blob, { clearTablesBeforeImport: true });
+          await hyperbook.store.db.import(blob, { clearTablesBeforeImport: true });
         }
 
         // Track the server's lastEventId
@@ -589,7 +600,7 @@ window.hyperbook.cloud = (function () {
       });
 
       // Hook Dexie tables to capture granular events (skip currentState — ephemeral UI data)
-      store.tables.forEach((table) => {
+      hyperbook.store.tables.forEach((table) => {
         if (table.name === "currentState") return;
 
         table.hook("creating", function (primKey, obj) {
@@ -656,29 +667,29 @@ window.hyperbook.cloud = (function () {
     statusEl.className = status;
 
     if (status === "unsaved") {
-      statusEl.textContent = i18n.get("user-unsaved", {}, "Unsaved changes");
+      statusEl.textContent = hyperbook.i18n.get("user-unsaved", {}, "Unsaved changes");
       updateUserIconState("logged-in");
     } else if (status === "saving") {
-      statusEl.textContent = i18n.get("user-saving", {}, "Saving...");
+      statusEl.textContent = hyperbook.i18n.get("user-saving", {}, "Saving...");
       updateUserIconState("syncing");
     } else if (status === "saved") {
-      statusEl.textContent = i18n.get("user-saved", {}, "Saved");
+      statusEl.textContent = hyperbook.i18n.get("user-saved", {}, "Saved");
       updateUserIconState("synced");
     } else if (status === "error") {
-      statusEl.textContent = i18n.get("user-save-error", {}, "Save Error");
+      statusEl.textContent = hyperbook.i18n.get("user-save-error", {}, "Save Error");
       updateUserIconState("unsynced");
     } else if (status === "offline") {
-      statusEl.textContent = i18n.get("user-offline", {}, "Offline");
+      statusEl.textContent = hyperbook.i18n.get("user-offline", {}, "Offline");
       updateUserIconState("unsynced");
     } else if (status === "offline-queued") {
-      statusEl.textContent = i18n.get(
+      statusEl.textContent = hyperbook.i18n.get(
         "user-offline-queued",
         {},
         "Saved locally",
       );
       updateUserIconState("logged-in");
     } else if (status === "readonly") {
-      statusEl.textContent = i18n.get("user-readonly", {}, "Read-Only Mode");
+      statusEl.textContent = hyperbook.i18n.get("user-readonly", {}, "Read-Only Mode");
       statusEl.className = "readonly";
       updateUserIconState("synced");
     }
@@ -707,7 +718,7 @@ window.hyperbook.cloud = (function () {
     const errorEl = document.getElementById("user-login-error");
 
     if (!username || !password) {
-      errorEl.textContent = i18n.get(
+      errorEl.textContent = hyperbook.i18n.get(
         "user-login-required",
         {},
         "Username and password required",
@@ -721,14 +732,14 @@ window.hyperbook.cloud = (function () {
       errorEl.textContent = "";
     } catch (error) {
       errorEl.textContent =
-        error.message || i18n.get("user-login-failed", {}, "Login failed");
+        error.message || hyperbook.i18n.get("user-login-failed", {}, "Login failed");
     }
   };
 
   const logout = () => {
     if (
       confirm(
-        i18n.get("user-logout-confirm", {}, "Are you sure you want to logout?"),
+        hyperbook.i18n.get("user-logout-confirm", {}, "Are you sure you want to logout?"),
       )
     ) {
       hyperbookLogout();
@@ -761,8 +772,8 @@ window.hyperbook.cloud = (function () {
       const banner = document.createElement("div");
       banner.id = "impersonation-banner";
       banner.innerHTML = `
-        <span>${i18n.get("user-impersonating", {}, "Impersonating")}: <strong>${user ? user.username : ""}</strong> — ${i18n.get("user-readonly", {}, "Read-Only Mode")}</span>
-        <a href="#" id="exit-impersonation">${i18n.get("user-exit-impersonation", {}, "Exit Impersonation")}</a>
+        <span>${hyperbook.i18n.get("user-impersonating", {}, "Impersonating")}: <strong>${user ? user.username : ""}</strong> — ${hyperbook.i18n.get("user-readonly", {}, "Read-Only Mode")}</span>
+        <a href="#" id="exit-impersonation">${hyperbook.i18n.get("user-exit-impersonation", {}, "Exit Impersonation")}</a>
       `;
       document.body.prepend(banner);
 

package/dist/assets/directive-abc-music/client.js

@@ -1,3 +1,11 @@
+/// <reference path="../hyperbook.types.js" />
+
+/**
+ * ABC music notation rendering and editing.
+ * @type {HyperbookAbc}
+ * @memberof hyperbook
+ * @see hyperbook.store
+ */
 hyperbook.abc = (function () {
   window.codeInput?.registerTemplate(
     "abc-highlighted",
@@ -33,7 +41,7 @@ hyperbook.abc = (function () {
       });
 
       resetEl?.addEventListener("click", () => {
-        store.abcMusic.delete(id);
+        hyperbook.store.abcMusic.delete(id);
         window.location.reload();
       });
 
@@ -46,7 +54,7 @@ hyperbook.abc = (function () {
       });
 
       editorEl.addEventListener("code-input_load", async () => {
-        const storeResult = await store.abcMusic
+        const storeResult = await hyperbook.store.abcMusic
           .where("id")
           .equals(editorEl.id)
           .first();
@@ -70,7 +78,7 @@ hyperbook.abc = (function () {
         });
 
         editorEl.addEventListener("change", () => {
-          store.abcMusic.put({
+          hyperbook.store.abcMusic.put({
             id: editorEl.id,
             tune: editorEl.value,
           });

package/dist/assets/directive-archive/client.js

@@ -1,4 +1,12 @@
-hyperbook.download = (function () {
+/// <reference path="../hyperbook.types.js" />
+
+/**
+ * Archive download management.
+ * @type {HyperbookArchive}
+ * @memberof hyperbook
+ * @see hyperbook.i18n
+ */
+hyperbook.archive = (function () {
   function initElement(el) {
     const labelEl = el.getElementsByClassName("label")[0];
     const src = el.href;
@@ -7,10 +15,10 @@ hyperbook.download = (function () {
       const isOnline = r.ok;
       if (isOnline) {
         labelEl.classList.remove("offline");
-        labelEl.innerHTML = labelEl.innerHTML.replace(`(${i18n.get("archive-offline")})`, "");
+        labelEl.innerHTML = labelEl.innerHTML.replace(`(${hyperbook.i18n.get("archive-offline")})`, "");
       } else {
         labelEl.classList.add("offline");
-        labelEl.innerHTML += ` (${i18n.get("archive-offline")})`;
+        labelEl.innerHTML += ` (${hyperbook.i18n.get("archive-offline")})`;
       }
     });
   }
@@ -36,5 +44,10 @@ hyperbook.download = (function () {
 
   observer.observe(document.body, { childList: true, subtree: true });
 
-  init();
+  // Initialize existing elements on document load
+  document.addEventListener("DOMContentLoaded", () => {
+    init();
+  });
+
+  return { init };
 })();

package/dist/assets/directive-audio/client.js

@@ -1,3 +1,11 @@
+/// <reference path="../hyperbook.types.js" />
+
+/**
+ * Audio player with playback controls and state persistence.
+ * @type {HyperbookAudio}
+ * @memberof hyperbook
+ * @see hyperbook.store
+ */
 hyperbook.audio = (function () {
   /**
    * @param {number} seconds
@@ -23,37 +31,68 @@ hyperbook.audio = (function () {
    */
   const wavesurferInstances = {};
 
-  function init() {
-    const els = document.getElementsByClassName("wave");
+  function initElement(el) {
+    const src = el.getAttribute("data-src");
+    const id = el.id;
+
+    if (wavesurferInstances[id]) return;
+
+    const wavesurfer = window.WaveSurfer.create({
+      container: el,
+      cursorWidth: 4,
+      barWidth: 4,
+      barGap: 5,
+      barRadius: 2,
+      height: 64,
+      url: src,
+    });
+    wavesurfer.on("ready", () => update(id));
+    wavesurfer.on("audioprocess", () => update(id));
+    wavesurfer.on("pause", () => update(id));
+    wavesurfer.on("finish", () => update(id));
+    wavesurfer.on("play", () => update(id));
+    wavesurferInstances[id] = wavesurfer;
+
+    hyperbook.store.audio.get(id).then((result) => {
+      if (result) {
+        wavesurfer.setTime(result.time);
+      }
+    });
+  }
+
+  function init(root) {
+    const els = root.getElementsByClassName("wave");
     for (let el of els) {
-      const src = el.getAttribute("data-src");
-      const id = el.id;
-
-      const wavesurfer = window.WaveSurfer.create({
-        container: el,
-        cursorWidth: 4,
-        barWidth: 4,
-        barGap: 5,
-        barRadius: 2,
-        height: 64,
-        url: src,
-      });
-      wavesurfer.on("ready", () => update(id));
-      wavesurfer.on("audioprocess", () => update(id));
-      wavesurfer.on("pause", () => update(id));
-      wavesurfer.on("finish", () => update(id));
-      wavesurfer.on("play", () => update(id));
-      wavesurferInstances[id] = wavesurfer;
-
-      store.audio.get(id).then((result) => {
-        if (result) {
-          wavesurfer.setTime(result.time);
-        }
-      });
+      initElement(el);
     }
   }
 
-  init();
+  // Initialize existing elements on document load
+  document.addEventListener("DOMContentLoaded", () => {
+    init(document);
+  });
+
+  // Observe for new elements added to the DOM
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === 1) {
+          if (node.classList.contains("wave")) {
+            initElement(node);
+          } else {
+            const waves = node.getElementsByClassName?.("wave");
+            if (waves) {
+              for (let el of waves) {
+                initElement(el);
+              }
+            }
+          }
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
 
   /**
    * @param {string} id
@@ -78,7 +117,7 @@ hyperbook.audio = (function () {
       playEl.classList.remove("playing");
     }
 
-    store.audio.put({ id, time });
+    hyperbook.store.audio.put({ id, time });
 
     durationEl.innerHTML = ` ${secondsToTimestamp(time)}/${secondsToTimestamp(duration)}`;
   }

package/dist/assets/directive-bookmarks/client.js

@@ -1,6 +1,14 @@
+/// <reference path="../hyperbook.types.js" />
+
+/**
+ * Bookmark management and navigation.
+ * @type {HyperbookBookmarks}
+ * @memberof hyperbook
+ * @see hyperbook.store
+ */
 hyperbook.bookmarks = (function () {
   function update(root = document) {
-    store.bookmarks
+    hyperbook.store.bookmarks
       .toArray()
       .then((bookmarks) => {
         return bookmarks.map((bookmark) => {

package/dist/assets/directive-download/client.js

@@ -1,3 +1,11 @@
+/// <reference path="../hyperbook.types.js" />
+
+/**
+ * File download management.
+ * @type {HyperbookDownload}
+ * @memberof hyperbook
+ * @see hyperbook.i18n
+ */
 hyperbook.download = (function () {
   const init = (root) => {
     const els = root.getElementsByClassName("directive-download");
@@ -10,10 +18,10 @@ hyperbook.download = (function () {
         const isOnline = r.ok;
         if (isOnline) {
           labelEl.classList.remove("offline");
-          labelEl.innerHTML.replace(`(${i18n.get("download-offline")})`, "");
+          labelEl.innerHTML.replace(`(${hyperbook.i18n.get("download-offline")})`, "");
         } else {
           labelEl.classList.add("offline");
-          labelEl.innerHTML += ` (${i18n.get("download-offline")})`;
+          labelEl.innerHTML += ` (${hyperbook.i18n.get("download-offline")})`;
         }
       });
     }

package/dist/assets/directive-excalidraw/client.js

@@ -1,6 +1,15 @@
+/// <reference path="../hyperbook.types.js" />
+
 window.EXCALIDRAW_ASSET_PATH =
   window.HYPERBOOK_ASSETS + "directive-excalidraw/";
 
+/**
+ * Excalidraw whiteboard integration.
+ * @type {HyperbookExcalidraw}
+ * @memberof hyperbook
+ */
 hyperbook.excalidraw = (function () {
   const elems = document.getElementsByClassName("directive-excalidraw");
+
+  return {};
 })();