hyperbook 0.78.0 → 0.79.0

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

@@ -1,4 +1,17 @@
 hyperbook.typst = (function () {
+  // Debounce utility function
+  const debounce = (func, wait) => {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  };
+
   // Register code-input template for typst syntax highlighting
   window.codeInput?.registerTemplate(
     "typst-highlighted",
@@ -67,6 +80,85 @@ hyperbook.typst = (function () {
     return typstLoadPromise;
   };
 
+  // Asset cache for server-loaded images
+  const assetCache = new Map(); // filepath -> Uint8Array
+
+  // Extract relative image paths from typst source
+  const extractRelImagePaths = (src) => {
+    const paths = new Set();
+    const re = /image\s*\(\s*(['"])([^'"]+)\1/gi;
+    let m;
+    while ((m = re.exec(src))) {
+      const p = m[2];
+      // Skip absolute URLs, data URLs, blob URLs, and paths starting with "/"
+      if (/^(https?:|data:|blob:|\/)/i.test(p)) continue;
+      paths.add(p);
+    }
+    return [...paths];
+  };
+
+  // Fetch assets from server using base path
+  const fetchAssets = async (paths, basePath) => {
+    const misses = paths.filter(p => !assetCache.has(p));
+    await Promise.all(misses.map(async (p) => {
+      try {
+        // Construct URL using base path
+        const url = basePath ? `${basePath}/${p}`.replace(/\/+/g, '/') : p;
+        const res = await fetch(url);
+        if (!res.ok) {
+          console.warn(`Image not found: ${p} at ${url} (HTTP ${res.status})`);
+          assetCache.set(p, null); // Mark as failed
+          return;
+        }
+        const buf = await res.arrayBuffer();
+        assetCache.set(p, new Uint8Array(buf));
+      } catch (error) {
+        console.warn(`Error loading image ${p}:`, error);
+        assetCache.set(p, null); // Mark as failed
+      }
+    }));
+  };
+
+  // Build typst preamble with inlined assets
+  const buildAssetsPreamble = () => {
+    if (assetCache.size === 0) return '';
+    const entries = [...assetCache.entries()]
+      .filter(([name, u8]) => u8 !== null) // Skip failed images
+      .map(([name, u8]) => {
+        const nums = Array.from(u8).join(',');
+        return `  "${name}": bytes((${nums}))`;
+      }).join(',\n');
+    if (!entries) return '';
+    return `#let __assets = (\n${entries}\n)\n\n`;
+  };
+
+  // Rewrite image() calls to use inlined assets
+  const rewriteImageCalls = (src) => {
+    if (assetCache.size === 0) return src;
+    return src.replace(/image\s*\(\s*(['"])([^'"]+)\1/g, (m, q, fname) => {
+      if (assetCache.has(fname)) {
+        const asset = assetCache.get(fname);
+        if (asset === null) {
+          // Image not found – replace with error text
+          return `[Image not found: _${fname}_]`;
+        }
+        return `image(__assets.at("${fname}")`;
+      }
+      return m;
+    });
+  };
+
+  // Prepare typst source with server-loaded assets
+  const prepareTypstSourceWithAssets = async (src, basePath) => {
+    const relPaths = extractRelImagePaths(src);
+    if (relPaths.length > 0) {
+      await fetchAssets(relPaths, basePath);
+      const preamble = buildAssetsPreamble();
+      return preamble + rewriteImageCalls(src);
+    }
+    return src;
+  };
+
   // Parse error message from SourceDiagnostic format
   const parseTypstError = (errorMessage) => {
     try {
@@ -82,7 +174,7 @@ hyperbook.typst = (function () {
   };
 
   // Render typst code to SVG
-  const renderTypst = async (code, container, loadingIndicator, sourceFiles, binaryFiles, id, previewContainer) => {
+  const renderTypst = async (code, container, loadingIndicator, sourceFiles, binaryFiles, id, previewContainer, basePath) => {
     // Queue this render to ensure only one compilation runs at a time
     return queueRender(async () => {
       // Show loading indicator
@@ -96,6 +188,9 @@ hyperbook.typst = (function () {
         // Reset shadow files for this render
         $typst.resetShadow();
 
+        // Prepare code with server-loaded assets
+        const preparedCode = await prepareTypstSourceWithAssets(code, basePath);
+
         // Add source files
         for (const { filename, content } of sourceFiles) {
           const path = filename.startsWith('/') ? filename.substring(1) : filename;
@@ -128,7 +223,7 @@ hyperbook.typst = (function () {
           }
         }
 
-        const svg = await $typst.svg({ mainContent: code });
+        const svg = await $typst.svg({ mainContent: preparedCode });
         
         // Remove any existing error overlay from preview-container
         if (previewContainer) {
@@ -204,7 +299,7 @@ hyperbook.typst = (function () {
   };
 
   // Export to PDF
-  const exportPdf = async (code, id, sourceFiles, binaryFiles) => {
+  const exportPdf = async (code, id, sourceFiles, binaryFiles, basePath) => {
     // Queue this export to ensure only one compilation runs at a time
     return queueRender(async () => {
       await loadTypst();
@@ -213,6 +308,9 @@ hyperbook.typst = (function () {
         // Reset shadow files for this export
         $typst.resetShadow();
 
+        // Prepare code with server-loaded assets
+        const preparedCode = await prepareTypstSourceWithAssets(code, basePath);
+
         // Add source files
         for (const { filename, content } of sourceFiles) {
           const path = filename.startsWith('/') ? filename.substring(1) : filename;
@@ -244,7 +342,7 @@ hyperbook.typst = (function () {
           }
         }
 
-        const pdfData = await $typst.pdf({ mainContent: code });
+        const pdfData = await $typst.pdf({ mainContent: preparedCode });
         const pdfFile = new Blob([pdfData], { type: "application/pdf" });
         const link = document.createElement("a");
         link.href = URL.createObjectURL(pdfFile);
@@ -276,6 +374,12 @@ hyperbook.typst = (function () {
     // Parse source files and binary files from data attributes
     const sourceFilesData = elem.getAttribute("data-source-files");
     const binaryFilesData = elem.getAttribute("data-binary-files");
+    let basePath = elem.getAttribute("data-base-path") || "";
+    
+    // Ensure basePath starts with / for absolute paths
+    if (basePath && !basePath.startsWith('/')) {
+      basePath = '/' + basePath;
+    }
     
     let sourceFiles = sourceFilesData 
       ? JSON.parse(atob(sourceFilesData))
@@ -440,10 +544,13 @@ hyperbook.typst = (function () {
         
         const mainFile = sourceFiles.find(f => f.filename === "main.typ" || f.filename === "main.typst");
         const mainCode = mainFile ? mainFile.content : "";
-        renderTypst(mainCode, preview, loadingIndicator, sourceFiles, binaryFiles, id, previewContainer);
+        renderTypst(mainCode, preview, loadingIndicator, sourceFiles, binaryFiles, id, previewContainer, basePath);
       }
     };
 
+    // Create debounced version of rerenderTypst for input events (500ms delay)
+    const debouncedRerenderTypst = debounce(rerenderTypst, 500);
+
     // Add source file button
     addSourceFileBtn?.addEventListener("click", () => {
       const filename = prompt(i18n.get("typst-filename-prompt") || "Enter filename (e.g., helper.typ):");
@@ -548,14 +655,14 @@ hyperbook.typst = (function () {
         // Listen for input changes
         editor.addEventListener("input", () => {
           saveState();
-          rerenderTypst();
+          debouncedRerenderTypst();
         });
       });
     } else if (sourceTextarea) {
       // Preview mode - code is in hidden textarea
       initialCode = sourceTextarea.value;
       loadTypst().then(() => {
-        renderTypst(initialCode, preview, loadingIndicator, sourceFiles, binaryFiles, id, previewContainer);
+        renderTypst(initialCode, preview, loadingIndicator, sourceFiles, binaryFiles, id, previewContainer, basePath);
       });
     }
 
@@ -564,7 +671,7 @@ hyperbook.typst = (function () {
       // Get the main file content
       const mainFile = sourceFiles.find(f => f.filename === "main.typ" || f.filename === "main.typst");
       const code = mainFile ? mainFile.content : (editor ? editor.value : initialCode);
-      await exportPdf(code, id, sourceFiles, binaryFiles);
+      await exportPdf(code, id, sourceFiles, binaryFiles, basePath);
     });
 
     // Download Project button (ZIP with all files)
@@ -590,7 +697,7 @@ hyperbook.typst = (function () {
           if (url.startsWith('data:')) {
             const response = await fetch(url);
             arrayBuffer = await response.arrayBuffer();
-          } else {
+          } else if (url.startsWith('http://') || url.startsWith('https://')) {
             // External URL
             const response = await fetch(url);
             if (response.ok) {
@@ -599,6 +706,16 @@ hyperbook.typst = (function () {
               console.warn(`Failed to load binary file: ${url}`);
               continue;
             }
+          } else {
+            // Relative URL - use basePath to construct full URL
+            const fullUrl = basePath ? `${basePath}/${url}`.replace(/\/+/g, '/') : url;
+            const response = await fetch(fullUrl);
+            if (response.ok) {
+              arrayBuffer = await response.arrayBuffer();
+            } else {
+              console.warn(`Failed to load binary file: ${url} at ${fullUrl}`);
+              continue;
+            }
           }
           
           const path = dest.startsWith('/') ? dest.substring(1) : dest;
@@ -608,6 +725,31 @@ hyperbook.typst = (function () {
         }
       }
 
+      // Also include assets loaded from image() calls in the code
+      const relImagePaths = extractRelImagePaths(code);
+      for (const imagePath of relImagePaths) {
+        // Skip if already in zipFiles or already handled as binary file
+        const normalizedPath = imagePath.startsWith('/') ? imagePath.substring(1) : imagePath;
+        if (zipFiles[normalizedPath]) continue;
+        
+        // Skip absolute URLs, data URLs, and blob URLs
+        if (/^(https?:|data:|blob:)/i.test(imagePath)) continue;
+        
+        try {
+          // Construct URL using basePath
+          const url = basePath ? `${basePath}/${imagePath}`.replace(/\/+/g, '/') : imagePath;
+          const response = await fetch(url);
+          if (response.ok) {
+            const arrayBuffer = await response.arrayBuffer();
+            zipFiles[normalizedPath] = new Uint8Array(arrayBuffer);
+          } else {
+            console.warn(`Failed to load image asset: ${imagePath} at ${url}`);
+          }
+        } catch (error) {
+          console.warn(`Error loading image asset ${imagePath}:`, error);
+        }
+      }
+
       // Create ZIP using UZIP
       const zipData = UZIP.encode(zipFiles);
       const zipBlob = new Blob([zipData], { type: "application/zip" });

package/dist/index.js

@@ -202070,6 +202070,7 @@ var remarkDirectiveTypst_default = (ctx) => () => {
         }
         const isEditMode = mode === "edit";
         const isPreviewMode = mode === "preview" || !isEditMode;
+        const basePath = ctx.navigation.current?.path?.directory || "";
         data.hName = "div";
         data.hProperties = {
           class: ["directive-typst", isPreviewMode ? "preview-only" : ""].join(" ").trim(),
@@ -202079,7 +202080,8 @@ var remarkDirectiveTypst_default = (ctx) => () => {
           ).toString("base64"),
           "data-binary-files": Buffer.from(
             JSON.stringify(binaryFiles)
-          ).toString("base64")
+          ).toString("base64"),
+          "data-base-path": basePath
         };
         const previewContainer = {
           type: "element",
@@ -202500,7 +202502,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"application/1d-interleaved-parityfec
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"hyperbook","version":"0.78.0","author":"Mike Barkmin","homepage":"https://github.com/openpatch/hyperbook#readme","license":"MIT","bin":{"hyperbook":"./dist/index.js"},"files":["dist"],"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/openpatch/hyperbook.git","directory":"packages/hyperbook"},"bugs":{"url":"https://github.com/openpatch/hyperbook/issues"},"engines":{"node":">=18"},"scripts":{"version":"pnpm build","lint":"tsc --noEmit","dev":"ncc build ./index.ts -w -o dist/","build":"rimraf dist && ncc build ./index.ts -o ./dist/ --no-cache --no-source-map-register --external favicons --external sharp && node postbuild.mjs"},"dependencies":{"favicons":"^7.2.0"},"devDependencies":{"create-hyperbook":"workspace:*","@hyperbook/fs":"workspace:*","@hyperbook/markdown":"workspace:*","@hyperbook/types":"workspace:*","@pnpm/exportable-manifest":"1000.0.6","@types/archiver":"6.0.3","@types/async-retry":"1.4.9","@types/cross-spawn":"6.0.6","@types/lunr":"^2.3.7","@types/prompts":"2.4.9","@types/tar":"6.1.13","@types/ws":"^8.5.14","@vercel/ncc":"0.38.3","archiver":"7.0.1","async-retry":"1.3.3","chalk":"5.4.1","chokidar":"4.0.3","commander":"12.1.0","cpy":"11.1.0","cross-spawn":"7.0.6","domutils":"^3.2.2","extract-zip":"^2.0.1","got":"12.6.0","htmlparser2":"^10.0.0","lunr":"^2.3.9","lunr-languages":"^1.14.0","mime":"^4.0.6","prompts":"2.4.2","rimraf":"6.0.1","tar":"7.4.3","update-check":"1.5.4","ws":"^8.18.0"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"hyperbook","version":"0.79.0","author":"Mike Barkmin","homepage":"https://github.com/openpatch/hyperbook#readme","license":"MIT","bin":{"hyperbook":"./dist/index.js"},"files":["dist"],"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/openpatch/hyperbook.git","directory":"packages/hyperbook"},"bugs":{"url":"https://github.com/openpatch/hyperbook/issues"},"engines":{"node":">=18"},"scripts":{"version":"pnpm build","lint":"tsc --noEmit","dev":"ncc build ./index.ts -w -o dist/","build":"rimraf dist && ncc build ./index.ts -o ./dist/ --no-cache --no-source-map-register --external favicons --external sharp && node postbuild.mjs"},"dependencies":{"favicons":"^7.2.0"},"devDependencies":{"create-hyperbook":"workspace:*","@hyperbook/fs":"workspace:*","@hyperbook/markdown":"workspace:*","@hyperbook/types":"workspace:*","@pnpm/exportable-manifest":"1000.0.6","@types/archiver":"6.0.3","@types/async-retry":"1.4.9","@types/cross-spawn":"6.0.6","@types/lunr":"^2.3.7","@types/prompts":"2.4.9","@types/tar":"6.1.13","@types/ws":"^8.5.14","@vercel/ncc":"0.38.3","archiver":"7.0.1","async-retry":"1.3.3","chalk":"5.4.1","chokidar":"4.0.3","commander":"12.1.0","cpy":"11.1.0","cross-spawn":"7.0.6","domutils":"^3.2.2","extract-zip":"^2.0.1","got":"12.6.0","htmlparser2":"^10.0.0","lunr":"^2.3.9","lunr-languages":"^1.14.0","mime":"^4.0.6","prompts":"2.4.2","rimraf":"6.0.1","tar":"7.4.3","update-check":"1.5.4","ws":"^8.18.0"}}');
 
 /***/ })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperbook",
-  "version": "0.78.0",
+  "version": "0.79.0",
   "author": "Mike Barkmin",
   "homepage": "https://github.com/openpatch/hyperbook#readme",
   "license": "MIT",
@@ -58,8 +58,8 @@
     "ws": "^8.18.0",
     "create-hyperbook": "0.3.2",
     "@hyperbook/fs": "0.24.2",
-    "@hyperbook/types": "0.20.0",
-    "@hyperbook/markdown": "0.49.0"
+    "@hyperbook/markdown": "0.50.0",
+    "@hyperbook/types": "0.20.0"
   },
   "scripts": {
     "version": "pnpm build",