@hyperbook/markdown 0.44.1 → 0.46.0

package/dist/index.js

@@ -61265,6 +61265,7 @@ function remarkDirectiveTabs_default(ctx) {
           if (!tabsId) {
             tabsId = hash(node3);
           }
+          const instanceId = hash(node3);
           registerDirective(
             file,
             "tabs",
@@ -61291,8 +61292,23 @@ function remarkDirectiveTabs_default(ctx) {
             }
             tabTitleElements.push({
               type: "element",
-              tagName: "button",
+              tagName: "input",
               properties: {
+                type: "radio",
+                name: `tabs-${instanceId}`,
+                id: `tab-${instanceId}-${tabId}`,
+                "data-tab-id": tabId,
+                "data-tabs-id": tabsId,
+                class: "tab-input",
+                checked: first
+              },
+              children: []
+            });
+            tabTitleElements.push({
+              type: "element",
+              tagName: "label",
+              properties: {
+                for: `tab-${instanceId}-${tabId}`,
                 "data-tab-id": tabId,
                 "data-tabs-id": tabsId,
                 class: "tab" + (first ? " active" : "")
@@ -61312,7 +61328,15 @@ function remarkDirectiveTabs_default(ctx) {
             });
             first = false;
           }
+          const radioInputs = [];
+          const labelElements = [];
+          for (let i = 0; i < tabTitleElements.length; i += 2) {
+            radioInputs.push(tabTitleElements[i]);
+            labelElements.push(tabTitleElements[i + 1]);
+          }
           data.hChildren = [
+            ...radioInputs,
+            // Radio inputs as direct children
             {
               type: "element",
               tagName: "div",
@@ -61320,7 +61344,8 @@ function remarkDirectiveTabs_default(ctx) {
                 class: "tabs",
                 "data-tabs-id": tabsId
               },
-              children: tabTitleElements
+              children: labelElements
+              // Only labels in tabs div
             },
             ...tabContentElements
           ];
@@ -61488,7 +61513,27 @@ var en_default = {
   "webide-reset": "Reset",
   "webide-reset-prompt": "Are you sure you want to reset the code?",
   "webide-copy": "Copy",
-  "webide-download": "Download"
+  "webide-download": "Download",
+  "typst-code": "Typst",
+  "typst-reset": "Reset",
+  "typst-reset-prompt": "Are you sure you want to reset the code?",
+  "typst-download-pdf": "Download PDF",
+  "typst-pdf-error": "Error exporting PDF",
+  "typst-download-project": "Download Project",
+  "typst-loading": "Loading Typst...",
+  "typst-add-source-file": "Add source file",
+  "typst-add-binary-file": "Add binary file",
+  "typst-source": "Source",
+  "typst-binary": "Binary",
+  "typst-add": "Add",
+  "typst-delete-file": "Delete file",
+  "typst-delete-confirm": "Delete",
+  "typst-filename-prompt": "Enter filename (e.g., helper.typ):",
+  "typst-filename-error": "Filename must end with .typ or .typst",
+  "typst-filename-exists": "File already exists",
+  "typst-file-replace": "Replace existing file?",
+  "typst-binary-files": "Binary Files",
+  "typst-no-binary-files": "No binary files"
 };
 
 // locales/de.json
@@ -61547,7 +61592,27 @@ var de_default = {
   "webide-reset": "Zur\xFCcksetzen",
   "webide-reset-prompt": "Sind Sie sicher, dass Sie den Code zur\xFCcksetzen m\xF6chten?",
   "webide-copy": "Kopieren",
-  "webide-download": "Herunterladen"
+  "webide-download": "Herunterladen",
+  "typst-code": "Typst",
+  "typst-reset": "Zur\xFCcksetzen",
+  "typst-reset-prompt": "Sind Sie sicher, dass Sie den Code zur\xFCcksetzen m\xF6chten?",
+  "typst-download-pdf": "PDF herunterladen",
+  "typst-pdf-error": "Fehler beim PDF-Export",
+  "typst-download-project": "Projekt herunterladen",
+  "typst-loading": "Typst wird geladen...",
+  "typst-add-source-file": "Quelldatei hinzuf\xFCgen",
+  "typst-add-binary-file": "Bin\xE4rdatei hinzuf\xFCgen",
+  "typst-source": "Quelle",
+  "typst-binary": "Bin\xE4r",
+  "typst-add": "Hinzuf\xFCgen",
+  "typst-delete-file": "Datei l\xF6schen",
+  "typst-delete-confirm": "L\xF6schen",
+  "typst-filename-prompt": "Dateiname eingeben (z.B. helper.typ):",
+  "typst-filename-error": "Dateiname muss auf .typ oder .typst enden",
+  "typst-filename-exists": "Datei existiert bereits",
+  "typst-file-replace": "Existierende Datei ersetzen?",
+  "typst-binary-files": "Bin\xE4rdateien",
+  "typst-no-binary-files": "Keine Bin\xE4rdateien"
 };
 
 // src/i18n.ts
@@ -62509,7 +62574,8 @@ var rehypeHtmlStructure_default = (ctx) => () => {
         type: "element",
         tagName: "html",
         properties: {
-          lang: config2.language || "es"
+          lang: config2.language || "es",
+          class: "no-js"
         },
         children: [
           {
@@ -62649,6 +62715,19 @@ var rehypeHtmlStructure_default = (ctx) => () => {
                   }
                 ]
               },
+              {
+                type: "element",
+                tagName: "script",
+                properties: {},
+                children: [
+                  {
+                    type: "raw",
+                    value: `
+// Remove no-js class as soon as JavaScript is available
+document.documentElement.classList.remove('no-js');`
+                  }
+                ]
+              },
               {
                 type: "element",
                 tagName: "script",
@@ -62727,6 +62806,15 @@ window.Prism.manual = true;`
                 },
                 children: []
               },
+              {
+                type: "element",
+                tagName: "script",
+                properties: {
+                  src: makeUrl(["prism", "prism-typst.js"], "assets"),
+                  defer: true
+                },
+                children: []
+              },
               {
                 type: "element",
                 tagName: "link",
@@ -62979,69 +63067,7 @@ var makeNavigationPageElement = (ctx, page) => {
 };
 var makeNavigationSectionElement = (ctx, section) => {
   const { virtual, isEmpty, href, name, pages, sections, expanded } = section;
-  const children = [];
   let isExpanded = ctx.navigation.current?.href?.startsWith(href || "") || expanded;
-  if (!virtual) {
-    if (isEmpty) {
-      children.push({
-        type: "element",
-        tagName: "div",
-        properties: {
-          class: [
-            "collapsible",
-            "name",
-            "empty",
-            ctx.navigation.current?.href === href ? "active" : "",
-            isExpanded ? "expanded" : ""
-          ].join(" ")
-        },
-        children: [
-          {
-            type: "element",
-            tagName: "span",
-            properties: {
-              class: "label"
-            },
-            children: [
-              {
-                type: "text",
-                value: name
-              }
-            ]
-          }
-        ]
-      });
-    } else {
-      children.push({
-        type: "element",
-        tagName: "div",
-        properties: {
-          class: [
-            "collapsible",
-            "name",
-            ctx.navigation.current?.href === href ? "active" : "",
-            isExpanded ? "expanded" : ""
-          ].join(" ")
-        },
-        children: [
-          {
-            type: "element",
-            tagName: "a",
-            properties: {
-              href: ctx.makeUrl(href || "", "book"),
-              class: "label"
-            },
-            children: [
-              {
-                type: "text",
-                value: name
-              }
-            ]
-          }
-        ]
-      });
-    }
-  }
   const pagesElements = pages.filter((page) => !page.hide).map((page) => makeNavigationPageElement(ctx, page));
   const linksElements = [];
   if (pagesElements.length > 0) {
@@ -63056,22 +63082,86 @@ var makeNavigationSectionElement = (ctx, section) => {
   }
   const sectionElements = sections.filter((s3) => !s3.hide).map((s3) => makeNavigationSectionElement(ctx, s3));
   linksElements.push(...sectionElements);
-  children.push({
-    type: "element",
-    tagName: "div",
-    properties: {
-      class: virtual ? "links" : "collapsible-content links"
-    },
-    children: linksElements
-  });
+  if (virtual) {
+    return {
+      type: "element",
+      tagName: "div",
+      properties: {
+        class: "virtual-section"
+      },
+      children: [
+        {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: "links"
+          },
+          children: linksElements
+        }
+      ]
+    };
+  }
+  const summaryChildren = [];
+  if (isEmpty) {
+    summaryChildren.push({
+      type: "element",
+      tagName: "span",
+      properties: {
+        class: "label"
+      },
+      children: [
+        {
+          type: "text",
+          value: name
+        }
+      ]
+    });
+  } else {
+    summaryChildren.push({
+      type: "element",
+      tagName: "a",
+      properties: {
+        href: ctx.makeUrl(href || "", "book"),
+        class: "label"
+      },
+      children: [
+        {
+          type: "text",
+          value: name
+        }
+      ]
+    });
+  }
   return {
     type: "element",
-    tagName: "div",
+    tagName: "details",
     properties: {
       "data-id": `_nav:${href}`,
-      class: virtual ? "virtual-section" : "section"
+      class: [
+        "section",
+        ctx.navigation.current?.href === href ? "active" : "",
+        isEmpty ? "empty" : ""
+      ].join(" "),
+      open: isExpanded
     },
-    children
+    children: [
+      {
+        type: "element",
+        tagName: "summary",
+        properties: {
+          class: "name"
+        },
+        children: summaryChildren
+      },
+      {
+        type: "element",
+        tagName: "div",
+        properties: {
+          class: "links"
+        },
+        children: linksElements
+      }
+    ]
   };
 };
 var makeNavigationElements = (ctx) => {
@@ -64338,10 +64428,8 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
       return [
         {
           type: "element",
-          tagName: "button",
-          properties: {
-            class: "collapsible"
-          },
+          tagName: "summary",
+          properties: {},
           children: [
             {
               type: "text",
@@ -64353,7 +64441,7 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
           type: "element",
           tagName: "div",
           properties: {
-            class: "collapsible-content"
+            class: "content"
           },
           children: element5.children.flatMap(transformCollapsible)
         }
@@ -64376,7 +64464,7 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
       expectContainerDirective(node3, file, name);
       registerDirective(file, name, [], ["style.css"], []);
       node3.attributes = {};
-      data.hName = "div";
+      data.hName = "details";
       data.hProperties = {
         class: "directive-collapsible",
         "data-id": id
@@ -64388,10 +64476,8 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
       data.hChildren = [
         {
           type: "element",
-          tagName: "button",
-          properties: {
-            class: "collapsible"
-          },
+          tagName: "summary",
+          properties: {},
           children: [
             {
               type: "text",
@@ -64403,7 +64489,7 @@ var remarkDirectiveCollapsible_default = (ctx) => () => {
           type: "element",
           tagName: "div",
           properties: {
-            class: "collapsible-content"
+            class: "content"
           },
           children: collapsibleContent
         }
@@ -78918,6 +79004,378 @@ var remarkDirectiveTextinput_default = (ctx) => () => {
   };
 };
 
+// src/remarkDirectiveTypst.ts
+function htmlEntities4(str) {
+  return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var remarkDirectiveTypst_default = (ctx) => () => {
+  const name = "typst";
+  return (tree, file) => {
+    visit(tree, function(node3) {
+      if (isDirective(node3) && node3.name === name) {
+        const {
+          height = "auto",
+          id = hash(node3),
+          mode = "preview"
+        } = node3.attributes || {};
+        const data = node3.data || (node3.data = {});
+        expectContainerDirective(node3, file, name);
+        registerDirective(file, name, ["client.js"], ["style.css"], []);
+        requestJS(file, ["code-input", "code-input.min.js"]);
+        requestCSS(file, ["code-input", "code-input.min.css"]);
+        requestJS(file, ["code-input", "auto-close-brackets.min.js"]);
+        requestJS(file, ["code-input", "indent.min.js"]);
+        requestJS(file, ["uzip", "uzip.js"]);
+        const sourceFiles = [];
+        const binaryFiles = [];
+        for (const child of node3.children) {
+          if (child.type === "text") {
+            const text9 = child.value;
+            const fileMatches = text9.matchAll(
+              /@file\s+dest="([^"]+)"\s+src="([^"]+)"/g
+            );
+            for (const match of fileMatches) {
+              const dest = match[1];
+              const src = match[2];
+              const url = ctx.makeUrl(
+                src,
+                "public",
+                ctx.navigation.current || void 0
+              );
+              binaryFiles.push({ dest, url });
+            }
+            const sourceMatches = text9.matchAll(
+              /@source\s+dest="([^"]+)"\s+src="([^"]+)"/g
+            );
+            for (const match of sourceMatches) {
+              const dest = match[1];
+              const src = match[2];
+              const content5 = readFile(src, ctx) || "";
+              sourceFiles.push({ filename: dest, content: content5 });
+            }
+          } else if (child.type === "paragraph") {
+            for (const textNode of child.children) {
+              if (textNode.type === "text") {
+                const text9 = textNode.value;
+                const fileMatches = text9.matchAll(
+                  /@file\s+dest="([^"]+)"\s+src="([^"]+)"/g
+                );
+                for (const match of fileMatches) {
+                  const dest = match[1];
+                  const src = match[2];
+                  const url = ctx.makeUrl(
+                    src,
+                    "public",
+                    ctx.navigation.current || void 0
+                  );
+                  binaryFiles.push({ dest, url });
+                }
+                const sourceMatches = text9.matchAll(
+                  /@source\s+dest="([^"]+)"\s+src="([^"]+)"/g
+                );
+                for (const match of sourceMatches) {
+                  const dest = match[1];
+                  const src = match[2];
+                  const content5 = readFile(src, ctx) || "";
+                  sourceFiles.push({ filename: dest, content: content5 });
+                }
+              }
+            }
+          }
+        }
+        const codeBlocks = node3.children.filter(
+          (n) => n.type === "code" && (n.lang === "typ" || n.lang === "typst")
+        );
+        if (codeBlocks.length > 0) {
+          for (const codeBlock of codeBlocks) {
+            const filename = codeBlock.meta?.trim() || "main.typ";
+            sourceFiles.push({
+              filename,
+              content: codeBlock.value
+            });
+          }
+        }
+        let mainSource = sourceFiles.find(
+          (f) => f.filename == "main.typ" || f.filename == "main.typst"
+        );
+        if (!mainSource && sourceFiles.length > 0) {
+          mainSource = sourceFiles[0];
+        } else if (!mainSource) {
+          mainSource = { filename: "main.typ", content: "" };
+        }
+        const isEditMode = mode === "edit";
+        const isPreviewMode = mode === "preview" || !isEditMode;
+        data.hName = "div";
+        data.hProperties = {
+          class: ["directive-typst", isPreviewMode ? "preview-only" : ""].join(" ").trim(),
+          "data-id": id,
+          "data-source-files": Buffer.from(
+            JSON.stringify(sourceFiles)
+          ).toString("base64"),
+          "data-binary-files": Buffer.from(
+            JSON.stringify(binaryFiles)
+          ).toString("base64")
+        };
+        const previewContainer = {
+          type: "element",
+          tagName: "div",
+          properties: {
+            class: "preview-container",
+            style: `height: ${height};`
+          },
+          children: [
+            {
+              type: "element",
+              tagName: "div",
+              properties: {
+                class: "typst-loading"
+              },
+              children: [
+                {
+                  type: "element",
+                  tagName: "div",
+                  properties: {
+                    class: "typst-spinner"
+                  },
+                  children: []
+                },
+                {
+                  type: "element",
+                  tagName: "span",
+                  properties: {},
+                  children: [
+                    {
+                      type: "text",
+                      value: i18n.get("typst-loading")
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              type: "element",
+              tagName: "div",
+              properties: {
+                class: "typst-preview"
+              },
+              children: []
+            }
+          ]
+        };
+        const downloadButton = {
+          type: "element",
+          tagName: "button",
+          properties: {
+            class: "download-pdf"
+          },
+          children: [
+            {
+              type: "text",
+              value: i18n.get("typst-download-pdf")
+            }
+          ]
+        };
+        const downloadProjectButton = {
+          type: "element",
+          tagName: "button",
+          properties: {
+            class: "download-project"
+          },
+          children: [
+            {
+              type: "text",
+              value: i18n.get("typst-download-project")
+            }
+          ]
+        };
+        if (isEditMode) {
+          data.hChildren = [
+            previewContainer,
+            {
+              type: "element",
+              tagName: "div",
+              properties: {
+                class: "editor-container"
+              },
+              children: [
+                {
+                  type: "element",
+                  tagName: "div",
+                  properties: {
+                    class: "file-tabs"
+                  },
+                  children: [
+                    {
+                      type: "element",
+                      tagName: "div",
+                      properties: {
+                        class: "tabs-list"
+                      },
+                      children: []
+                    },
+                    {
+                      type: "element",
+                      tagName: "button",
+                      properties: {
+                        class: "add-source-file",
+                        title: i18n.get("typst-add-source-file")
+                      },
+                      children: [
+                        {
+                          type: "text",
+                          value: "+"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  type: "element",
+                  tagName: "details",
+                  properties: {
+                    class: "binary-files-section"
+                  },
+                  children: [
+                    {
+                      type: "element",
+                      tagName: "summary",
+                      properties: {},
+                      children: [
+                        {
+                          type: "element",
+                          tagName: "span",
+                          properties: {
+                            class: "summary-text"
+                          },
+                          children: [
+                            {
+                              type: "element",
+                              tagName: "span",
+                              properties: {
+                                class: "summary-indicator"
+                              },
+                              children: [
+                                {
+                                  type: "text",
+                                  value: "\u25B6"
+                                }
+                              ]
+                            },
+                            {
+                              type: "text",
+                              value: i18n.get("typst-binary-files")
+                            }
+                          ]
+                        }
+                      ]
+                    },
+                    {
+                      type: "element",
+                      tagName: "div",
+                      properties: {
+                        class: "binary-files-list"
+                      },
+                      children: []
+                    },
+                    {
+                      type: "element",
+                      tagName: "div",
+                      properties: {
+                        class: "binary-files-actions"
+                      },
+                      children: [
+                        {
+                          type: "element",
+                          tagName: "button",
+                          properties: {
+                            class: "add-binary-file",
+                            title: i18n.get("typst-add-binary-file")
+                          },
+                          children: [
+                            {
+                              type: "text",
+                              value: "+ " + i18n.get("typst-add")
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  type: "element",
+                  tagName: "code-input",
+                  properties: {
+                    class: "editor typst active line-numbers",
+                    language: "typst",
+                    template: "typst-highlighted"
+                  },
+                  children: [
+                    {
+                      type: "raw",
+                      value: htmlEntities4(mainSource.content)
+                    }
+                  ]
+                },
+                {
+                  type: "element",
+                  tagName: "div",
+                  properties: {
+                    class: "buttons bottom"
+                  },
+                  children: [
+                    {
+                      type: "element",
+                      tagName: "button",
+                      properties: {
+                        class: "reset"
+                      },
+                      children: [
+                        {
+                          type: "text",
+                          value: i18n.get("typst-reset")
+                        }
+                      ]
+                    },
+                    downloadProjectButton,
+                    downloadButton
+                  ]
+                }
+              ]
+            }
+          ];
+        } else {
+          data.hChildren = [
+            previewContainer,
+            {
+              type: "element",
+              tagName: "div",
+              properties: {
+                class: "buttons bottom"
+              },
+              children: [downloadProjectButton, downloadButton]
+            },
+            {
+              type: "element",
+              tagName: "textarea",
+              properties: {
+                class: "typst-source hidden",
+                style: "display: none;"
+              },
+              children: [
+                {
+                  type: "text",
+                  value: mainSource.content
+                }
+              ]
+            }
+          ];
+        }
+      }
+    });
+  };
+};
+
 // src/process.ts
 var remark = (ctx) => {
   i18n.init(ctx.config.language || "en");
@@ -78962,6 +79420,7 @@ var remark = (ctx) => {
     remarkDirectiveMultievent_default(ctx),
     remarkDirectiveLearningmap_default(ctx),
     remarkDirectiveTextinput_default(ctx),
+    remarkDirectiveTypst_default(ctx),
     remarkCode_default(ctx),
     remarkMath,
     /* needs to be last directive */