hyperbook 0.84.4 → 0.85.0

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

@@ -1,3 +1,12 @@
+/// <reference path="../hyperbook.types.js" />
+
+/**
+ * Web IDE with HTML/CSS/JS editing.
+ * @type {HyperbookWebide}
+ * @memberof hyperbook
+ * @see hyperbook.store
+ * @see hyperbook.i18n
+ */
 hyperbook.webide = (function () {
   window.codeInput?.registerTemplate(
     "webide-highlighted",
@@ -7,9 +16,7 @@ hyperbook.webide = (function () {
     ]),
   );
 
-  const elems = document.getElementsByClassName("directive-webide");
-
-  for (let elem of elems) {
+  function initElement(elem) {
     const title = elem.getElementsByClassName("container-title")[0];
     /** @type {HTMLTextAreaElement | null} */
     const editorHTML = elem.querySelector(".editor.html");
@@ -33,8 +40,8 @@ hyperbook.webide = (function () {
     const downloadEl = elem.querySelector("button.download");
 
     resetEl?.addEventListener("click", () => {
-      if (window.confirm(i18n.get("webide-reset-prompt"))) {
-        store.webide.delete(id);
+      if (window.confirm(hyperbook.i18n.get("webide-reset-prompt"))) {
+        hyperbook.store.webide.delete(id);
         window.location.reload();
       }
     });
@@ -70,7 +77,7 @@ hyperbook.webide = (function () {
     });
 
     const load = async () => {
-      const result = await store.webide.get(id);
+      const result = await hyperbook.store.webide.get(id);
       if (!result) {
         return;
       }
@@ -84,7 +91,7 @@ hyperbook.webide = (function () {
     load();
 
     const update = () => {
-      store.webide.put({
+      hyperbook.store.webide.put({
         id,
         html: editorHTML?.value,
         css: editorCSS?.value,
@@ -102,7 +109,7 @@ hyperbook.webide = (function () {
     });
 
     editorHTML?.addEventListener("code-input_load", async () => {
-      const result = await store.webide.get(id);
+      const result = await hyperbook.store.webide.get(id);
       if (result) {
         editorHTML.value = result.html;
       }
@@ -115,7 +122,7 @@ hyperbook.webide = (function () {
     });
 
     editorCSS?.addEventListener("code-input_load", async () => {
-      const result = await store.webide.get(id);
+      const result = await hyperbook.store.webide.get(id);
       if (result) {
         editorCSS.value = result.css;
       }
@@ -128,7 +135,7 @@ hyperbook.webide = (function () {
     });
 
     editorJS?.addEventListener("code-input_load", async () => {
-      const result = await store.webide.get(id);
+      const result = await hyperbook.store.webide.get(id);
       if (result) {
         editorJS.value = result.js;
       }
@@ -149,4 +156,32 @@ hyperbook.webide = (function () {
       a.click();
     });
   }
+
+  function init(root) {
+    const elems = root.querySelectorAll(".directive-webide");
+    elems.forEach(initElement);
+  }
+
+  // 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 &&
+          node.classList.contains("directive-webide")
+        ) {
+          initElement(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  return { init };
 })();

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

@@ -0,0 +1,99 @@
+/// <reference path="../hyperbook.types.js" />
+window.hyperbook = window.hyperbook || {};
+
+hyperbook.youtube = hyperbook.youtube || {};
+
+hyperbook.youtube.consent = (function () {
+  var CONSENT_ID = "youtube";
+
+  async function isAllowed() {
+    try {
+      var entry = await hyperbook.store.consent.get(CONSENT_ID);
+      return entry?.allowed === true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  async function allow() {
+    await hyperbook.store.consent.put({ id: CONSENT_ID, allowed: true });
+  }
+
+  function loadContent(wrapper) {
+    var banner = wrapper.querySelector(".directive-youtube-consent-banner");
+    if (banner) {
+      banner.remove();
+    }
+    var iframe = wrapper.querySelector("iframe");
+    if (iframe) {
+      var src = iframe.getAttribute("data-consent-src");
+      if (src) {
+        iframe.setAttribute("src", src);
+        iframe.removeAttribute("data-consent-src");
+        iframe.style.display = "";
+      }
+    }
+  }
+
+  async function initWrapper(wrapper) {
+    if (wrapper.getAttribute("data-consent-initialized")) return;
+    wrapper.setAttribute("data-consent-initialized", "true");
+
+    var allowed = await isAllowed();
+    if (allowed) {
+      loadContent(wrapper);
+      return;
+    }
+
+    var btn = wrapper.querySelector(".directive-youtube-consent-accept-btn");
+    var checkbox = wrapper.querySelector(
+      ".directive-youtube-consent-always-checkbox"
+    );
+    if (btn) {
+      btn.addEventListener("click", async function () {
+        if (checkbox && checkbox.checked) {
+          await allow();
+        }
+        loadContent(wrapper);
+        if (checkbox && checkbox.checked) {
+          document
+            .querySelectorAll(".directive-youtube-consent")
+            .forEach(function (el) {
+              loadContent(el);
+            });
+        }
+      });
+    }
+  }
+
+  function init(root) {
+    var wrappers = root.querySelectorAll
+      ? root.querySelectorAll(".directive-youtube-consent")
+      : [];
+    wrappers.forEach(function (w) {
+      initWrapper(w);
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    init(document);
+  });
+
+  var observer = new MutationObserver(function (mutations) {
+    mutations.forEach(function (mutation) {
+      mutation.addedNodes.forEach(function (node) {
+        if (node.nodeType === 1) {
+          init(node);
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+
+  return {
+    isAllowed: isAllowed,
+    allow: allow,
+    init: init,
+  };
+})();

package/dist/assets/directive-youtube/style.css

@@ -14,3 +14,66 @@
   height: 100%;
 }
 
+.directive-youtube-consent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.directive-youtube-consent iframe[data-consent-src] {
+  display: none;
+}
+
+.directive-youtube-consent-banner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 24px;
+  background-color: var(--color-background-tinted, #f5f5f5);
+  border: 2px solid var(--color-brand, #333);
+  border-radius: 8px;
+  text-align: center;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.directive-youtube-consent-banner-text {
+  font-size: 0.95em;
+  line-height: 1.5;
+  color: var(--color-text, #333);
+  max-width: 600px;
+}
+
+.directive-youtube-consent-always-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.85em;
+  color: var(--color-text, #333);
+  cursor: pointer;
+}
+
+.directive-youtube-consent-always-checkbox {
+  cursor: pointer;
+  margin: 0!important;
+  vertical-align: middle;
+}
+
+.directive-youtube-consent-accept-btn {
+  padding: 8px 24px;
+  background-color: var(--color-brand, #333);
+  color: var(--color-brand-text, #fff);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.95em;
+}
+
+.directive-youtube-consent-accept-btn:hover {
+  opacity: 0.9;
+}
+

package/dist/assets/hyperbook.types.js

@@ -0,0 +1,209 @@
+/**
+ * @file Type definitions for the hyperbook global namespace.
+ * This file is NOT loaded in the browser. It exists solely for IDE support
+ * and JSDoc cross-referencing between scripts.
+ *
+ * Usage: Add the following to the top of any script that references
+ * other hyperbook modules:
+ *   /// <reference path="../hyperbook.types.js" />
+ */
+
+/**
+ * @namespace hyperbook
+ * @description Global namespace for all hyperbook client-side modules.
+ * Initialized by i18n.js (first script to load) with
+ * `window.hyperbook = window.hyperbook || {}`.
+ */
+
+/**
+ * @typedef {Object} HyperbookI18n
+ * @property {(key: string, values?: Record<string, string>) => string} get
+ *   Returns the translated string for the given key, substituting `{{placeholder}}`
+ *   patterns with values from the `values` object. Falls back to the key itself
+ *   if no translation is found.
+ */
+
+/**
+ * @typedef {Object} HyperbookStore
+ * @property {import("dexie").Dexie} db - The underlying Dexie database instance.
+ * @property {import("dexie").Table} currentState - Ephemeral UI state (mouse, scroll, window size).
+ * @property {import("dexie").Table} collapsibles - Persisted open/close state for collapsible elements.
+ * @property {import("dexie").Table} abcMusic - ABC music editor tunes.
+ * @property {import("dexie").Table} audio - Audio playback positions.
+ * @property {import("dexie").Table} bookmarks - User bookmarks (path + label).
+ * @property {import("dexie").Table} p5 - p5.js sketches.
+ * @property {import("dexie").Table} protect - Password hashes for protected content.
+ * @property {import("dexie").Table} pyide - Python IDE scripts.
+ * @property {import("dexie").Table} slideshow - Active slide indices.
+ * @property {import("dexie").Table} tabs - Active tab selections.
+ * @property {import("dexie").Table} excalidraw - Excalidraw drawing state.
+ * @property {import("dexie").Table} webide - Web IDE editor contents (HTML/CSS/JS).
+ * @property {import("dexie").Table} h5p - H5P user data.
+ * @property {import("dexie").Table} geogebra - GeoGebra applet state.
+ * @property {import("dexie").Table} learningmap - Learning map node positions and zoom.
+ * @property {import("dexie").Table} textinput - Text input field values.
+ * @property {import("dexie").Table} custom - Custom directive payload storage.
+ * @property {import("dexie").Table} onlineide - Online IDE scripts.
+ * @property {import("dexie").Table} sqlideScripts - SQL IDE scripts.
+ * @property {import("dexie").Table} sqlideDatabases - SQL IDE databases.
+ * @property {import("dexie").Table} multievent - Multi-event state.
+ * @property {import("dexie").Table} typst - Typst editor code.
+ * @property {() => Promise<void>} export - Export all store data as a JSON download.
+ * @property {() => Promise<void>} reset - Clear all store data after user confirmation.
+ * @property {() => Promise<void>} import - Import store data from a JSON file.
+ */
+
+/**
+ * @typedef {Object} HyperbookCloud
+ * @property {() => Promise<void>} save - Manually trigger a save to the cloud.
+ * @property {() => Promise<void>} sendSnapshot - Send a full snapshot to the cloud.
+ * @property {() => void} userToggle - Toggle the user login/info drawer.
+ * @property {() => Promise<void>} login - Log in with username and password from the form.
+ * @property {() => void} logout - Log out and clear auth state.
+ */
+
+/**
+ * @typedef {Object} HyperbookAbc
+ * @property {(root: HTMLElement) => void} init - Initialize ABC music elements.
+ */
+
+/**
+ * @typedef {Object} HyperbookArchive
+ * @property {() => void} init - Initialize archive download status indicators.
+ */
+
+/**
+ * @typedef {Object} HyperbookAudio
+ * @property {(id: string) => void} togglePlayPause - Toggle play/pause for an audio element.
+ */
+
+/**
+ * @typedef {Object} HyperbookBookmarks
+ * @property {(root?: Document) => void} update - Refresh the bookmarks list in the DOM.
+ */
+
+/**
+ * @typedef {Object} HyperbookDownload
+ * @property {(root: HTMLElement) => void} init - Initialize download status indicators.
+ */
+
+/**
+ * @typedef {Object} HyperbookExcalidraw
+ */
+
+/**
+ * @typedef {Object} HyperbookGeogebra
+ * @property {(root: HTMLElement) => void} init - Initialize GeoGebra applets.
+ */
+
+/**
+ * @typedef {Object} HyperbookH5p
+ * @property {(root: HTMLElement) => Promise<void>} init - Initialize H5P elements.
+ * @property {(id: string) => void} save - Save H5P user data for an element.
+ */
+
+/**
+ * @typedef {Object} HyperbookLearningmap
+ * @property {(root: HTMLElement) => void} init - Initialize learning map elements.
+ */
+
+/**
+ * @typedef {Object} HyperbookMermaid
+ * @property {() => void} init - Initialize mermaid diagrams.
+ */
+
+/**
+ * @typedef {Object} HyperbookOnlineide
+ * @property {(el: HTMLElement) => void} openFullscreen - Open the online IDE in fullscreen.
+ */
+
+/**
+ * @typedef {Object} HyperbookP5
+ */
+
+/**
+ * @typedef {Object} HyperbookProtect
+ * @property {(root: HTMLElement) => void} init - Initialize protected content elements.
+ */
+
+/**
+ * @typedef {Object} HyperbookPython
+ * @property {(root: HTMLElement) => void} init - Initialize Python IDE elements.
+ */
+
+/**
+ * @typedef {Object} HyperbookScratchblock
+ * @property {() => void} init - Render all scratch blocks on the page.
+ */
+
+/**
+ * @typedef {Object} HyperbookSlideshow
+ * @property {(id: string) => void} update - Update slideshow state from store.
+ * @property {(id: string, steps: number) => void} moveBy - Move the slideshow by a number of steps.
+ * @property {(id: string, index: number) => void} setActive - Set the active slide by index.
+ * @property {(root: HTMLElement) => void} init - Initialize slideshows within a root element.
+ */
+
+/**
+ * @typedef {Object} HyperbookSqlide
+ * @property {(el: HTMLElement) => void} openFullscreen - Open the SQL IDE in fullscreen.
+ */
+
+/**
+ * @typedef {Object} HyperbookTabs
+ * @property {(tabsId: string, tabId: string) => void} selectTab - Select a tab by ID.
+ * @property {(root: HTMLElement) => void} init - Initialize tab elements.
+ */
+
+/**
+ * @typedef {Object} HyperbookTextinput
+ * @property {(root: HTMLElement) => void} init - Initialize text input elements.
+ */
+
+/**
+ * @typedef {Object} HyperbookWebide
+ */
+
+/**
+ * Global hyperbook namespace available on `window.hyperbook`.
+ *
+ * @type {{
+ *   i18n: HyperbookI18n,
+ *   store: HyperbookStore,
+ *   cloud?: HyperbookCloud,
+ *   toggleLightbox: (el: HTMLElement) => void,
+ *   toggleBookmark: (key: string, label: string) => void,
+ *   navToggle: () => void,
+ *   tocToggle: () => void,
+ *   searchToggle: () => void,
+ *   search: () => void,
+ *   qrcodeOpen: () => void,
+ *   qrcodeClose: () => void,
+ *   shareOpen: () => void,
+ *   shareClose: () => void,
+ *   shareUpdatePreview: () => void,
+ *   shareCopyUrl: () => void,
+ *   init: (root: HTMLElement) => void,
+ *   abc?: HyperbookAbc,
+ *   archive?: HyperbookArchive,
+ *   audio?: HyperbookAudio,
+ *   bookmarks?: HyperbookBookmarks,
+ *   download?: HyperbookDownload,
+ *   excalidraw?: HyperbookExcalidraw,
+ *   geogebra?: HyperbookGeogebra,
+ *   h5p?: HyperbookH5p,
+ *   learningmap?: HyperbookLearningmap,
+ *   mermaid?: HyperbookMermaid,
+ *   onlineide?: HyperbookOnlineide,
+ *   p5?: HyperbookP5,
+ *   protect?: HyperbookProtect,
+ *   python?: HyperbookPython,
+ *   scratchblock?: HyperbookScratchblock,
+ *   slideshow?: HyperbookSlideshow,
+ *   sqlide?: HyperbookSqlide,
+ *   tabs?: HyperbookTabs,
+ *   textinput?: HyperbookTextinput,
+ *   webide?: HyperbookWebide,
+ * }}
+ */
+var hyperbook;

package/dist/assets/i18n.js

@@ -1,8 +1,22 @@
-var i18n = (function () {
+/// <reference path="./hyperbook.types.js" />
+window.hyperbook = window.hyperbook || {};
+
+/**
+ * Internationalization module providing translation lookups.
+ * @type {HyperbookI18n}
+ * @memberof hyperbook
+ */
+hyperbook.i18n = (function () {
   // LOCALES
   const locales = {};
   // LOCALES
 
+  /**
+   * Get a translated string by key, with optional placeholder substitution.
+   * @param {string} key - The translation key.
+   * @param {Record<string, string>} [values] - Placeholder values to substitute.
+   * @returns {string} The translated string, or the key itself if not found.
+   */
   const get = (key, values) => {
     if (!locales[key]) {
       console.warn(