@franken-suite/franken-markdown 0.3.0

package/README.md

@@ -0,0 +1,61 @@
+# franken_markdown WASM Package
+
+This directory contains the source wrapper for the browser package. Generated
+`wasm-bindgen` glue is intentionally not committed here; `scripts/check-wasm-package.sh`
+builds it into `target/fmd-checks/wasm-package/`.
+
+## Build
+
+```bash
+rustup target add wasm32-unknown-unknown
+cargo install wasm-bindgen-cli --version 0.2.126 --locked
+scripts/check-wasm-package.sh
+```
+
+The assembled package contains:
+
+- `franken_markdown.js` - ergonomic hand-written ESM wrapper,
+- `franken_markdown.d.ts` - exact TypeScript API contract,
+- `demo/` - static browser demo that uses the public package wrapper,
+- `package.json` - package metadata and exports,
+- `pkg/` - generated wasm-bindgen glue and `.wasm` binary.
+
+## Demo
+
+After `scripts/check-wasm-package.sh`, serve the assembled package directory
+with any static file server and open `demo/index.html`:
+
+```bash
+python3 -m http.server 8787 --directory target/fmd-checks/wasm-package
+```
+
+Then open `http://127.0.0.1:8787/demo/`. The demo is plain HTML/CSS/ESM and
+does not require a bundler or network access for normal rendering. It imports
+`../franken_markdown.js`, renders the HTML preview through `renderHtml`, and
+downloads PDF bytes through `renderPdf`.
+
+## Browser Usage
+
+```js
+import { createRenderer } from "./franken_markdown.js";
+
+const fmd = await createRenderer();
+const html = await fmd.renderHtml("# Hello", { font: "sans", darkMode: "auto" });
+document.body.innerHTML = html.text();
+
+const pdf = await fmd.renderPdf("# Report", {
+  title: "Report",
+  metadataEpochSeconds: 1700000000
+});
+const url = URL.createObjectURL(pdf.blob());
+```
+
+Every render result has:
+
+- `format`: `html` or `pdf`,
+- `mimeType`: browser Blob MIME type,
+- `extension`: default download extension,
+- `sourceLength`: Markdown source byte length,
+- `bytes`: `Uint8Array`,
+- `diagnostics`: recoverable parser diagnostics,
+- `text()`, `blob()`, and `filename()` helpers.

package/demo/demo.js

@@ -0,0 +1,215 @@
+import { createRenderer } from "../franken_markdown.js";
+
+const sampleMarkdown = `# franken_markdown demo
+
+This preview is rendered by the same browser package API that applications use.
+
+| Item | Status | Notes |
+|---|:---:|---|
+| HTML | ready | Self-contained preview with embedded subset fonts |
+| PDF | ready | Deterministic bytes, tagged text, links, and outlines |
+| WASM | first-class | No filesystem, process, threads, or network in the core |
+
+> Blockquotes, tables, links, lists, and code blocks use the default theme.
+
+\`\`\`rust
+fn main() {
+    println!("render markdown");
+}
+\`\`\`
+
+- Toggle the serif font for long-form reading.
+- Disable dark CSS if the host page needs a fixed light palette.
+- Download a PDF generated from the same Markdown source.
+`;
+
+const els = {
+  markdown: requiredElement("#markdown"),
+  render: requiredElement("#render"),
+  downloadPdf: requiredElement("#download-pdf"),
+  preview: requiredElement("#preview"),
+  diagnostics: requiredElement("#diagnostics"),
+  status: requiredElement("#status"),
+  sourceSize: requiredElement("#source-size"),
+  previewMeta: requiredElement("#preview-meta"),
+  font: requiredElement("#font"),
+  darkMode: requiredElement("#dark-mode"),
+  title: requiredElement("#title"),
+  author: requiredElement("#author"),
+  customCss: requiredElement("#custom-css"),
+  allowHtml: requiredElement("#allow-html"),
+  lineNumbers: requiredElement("#line-numbers")
+};
+
+let renderer = null;
+let renderTimer = 0;
+let lastPdfUrl = null;
+
+function requiredElement(selector) {
+  const element = document.querySelector(selector);
+  if (element === null) {
+    throw new Error(`franken_markdown demo is missing required element ${selector}`);
+  }
+  return element;
+}
+
+els.markdown.value = sampleMarkdown;
+setBusy(true, "loading wasm package");
+createRenderer()
+  .then((created) => {
+    renderer = created;
+    setBusy(false, "ready");
+    schedulePreview();
+  })
+  .catch((error) => {
+    setBusy(false, "wasm load failed");
+    showError(error);
+  });
+
+els.render.addEventListener("click", () => {
+  void renderPreview();
+});
+
+els.downloadPdf.addEventListener("click", () => {
+  void downloadPdf();
+});
+
+for (const input of [
+  els.markdown,
+  els.font,
+  els.darkMode,
+  els.title,
+  els.author,
+  els.customCss,
+  els.allowHtml,
+  els.lineNumbers
+]) {
+  input.addEventListener("input", schedulePreview);
+  input.addEventListener("change", schedulePreview);
+}
+
+function schedulePreview() {
+  window.clearTimeout(renderTimer);
+  updateSourceSize();
+  renderTimer = window.setTimeout(() => {
+    void renderPreview();
+  }, 180);
+}
+
+async function renderPreview() {
+  if (renderer === null) {
+    return;
+  }
+  const markdown = els.markdown.value;
+  const options = renderOptions();
+  if (markdown.trim() === "") {
+    els.preview.srcdoc = "";
+    els.previewMeta.textContent = "empty source";
+    renderDiagnostics([]);
+    return;
+  }
+  setBusy(true, "rendering html");
+  try {
+    const output = await renderer.renderHtml(markdown, options);
+    els.preview.srcdoc = output.text();
+    els.previewMeta.textContent = `${output.sourceLength} source bytes -> ${output.bytes.byteLength} html bytes`;
+    renderDiagnostics(output.diagnostics);
+    setBusy(false, "ready");
+  } catch (error) {
+    setBusy(false, "render failed");
+    showError(error);
+  }
+}
+
+async function downloadPdf() {
+  if (renderer === null) {
+    return;
+  }
+  const markdown = els.markdown.value;
+  if (markdown.trim() === "") {
+    showError(new Error("Markdown input is empty; add content before downloading PDF."));
+    return;
+  }
+  setBusy(true, "rendering pdf");
+  try {
+    const output = await renderer.renderPdf(markdown, renderOptions());
+    if (lastPdfUrl !== null) {
+      URL.revokeObjectURL(lastPdfUrl);
+    }
+    lastPdfUrl = URL.createObjectURL(output.blob());
+    const link = document.createElement("a");
+    link.href = lastPdfUrl;
+    link.download = output.filename(filenameBase());
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    els.previewMeta.textContent = `${output.sourceLength} source bytes -> ${output.bytes.byteLength} pdf bytes`;
+    renderDiagnostics(output.diagnostics);
+    setBusy(false, "pdf ready");
+  } catch (error) {
+    setBusy(false, "pdf failed");
+    showError(error);
+  }
+}
+
+function renderOptions() {
+  const customCss = els.customCss.value.trim() === "" ? undefined : els.customCss.value;
+  return {
+    font: els.font.value,
+    darkMode: els.darkMode.value,
+    title: textOrUndefined(els.title.value),
+    author: textOrUndefined(els.author.value),
+    customCss,
+    allowRawHtml: els.allowHtml.checked,
+    codeLineNumbers: els.lineNumbers.checked,
+    metadataEpochSeconds: 1700000000
+  };
+}
+
+function textOrUndefined(value) {
+  const text = String(value).trim();
+  return text === "" ? undefined : text;
+}
+
+function filenameBase() {
+  return textOrUndefined(els.title.value)
+    ?.toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    || "franken-markdown";
+}
+
+function renderDiagnostics(diagnostics) {
+  els.diagnostics.replaceChildren();
+  if (diagnostics.length === 0) {
+    const item = document.createElement("li");
+    item.className = "empty";
+    item.textContent = "No diagnostics.";
+    els.diagnostics.appendChild(item);
+    return;
+  }
+  for (const diagnostic of diagnostics) {
+    const item = document.createElement("li");
+    item.className = diagnostic.severity === "error" ? "error" : "";
+    item.textContent = `${diagnostic.severity} ${diagnostic.start}-${diagnostic.end}: ${diagnostic.message}`;
+    els.diagnostics.appendChild(item);
+  }
+}
+
+function showError(error) {
+  els.diagnostics.replaceChildren();
+  const item = document.createElement("li");
+  item.className = "error";
+  item.textContent = error instanceof Error ? error.message : String(error);
+  els.diagnostics.appendChild(item);
+}
+
+function updateSourceSize() {
+  els.sourceSize.textContent = `${new TextEncoder().encode(els.markdown.value).byteLength} bytes`;
+}
+
+function setBusy(busy, message) {
+  els.status.textContent = message;
+  els.render.disabled = busy;
+  els.downloadPdf.disabled = busy;
+}

package/demo/index.html

@@ -0,0 +1,395 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>franken_markdown WASM Demo</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --bg: #f6f7f9;
+        --panel: #ffffff;
+        --panel-2: #f0f3f7;
+        --text: #16181d;
+        --muted: #626a78;
+        --line: #d9dee7;
+        --accent: #1769aa;
+        --accent-2: #0f7f68;
+        --danger: #a61b3c;
+        --shadow: 0 14px 30px rgba(33, 42, 55, 0.10);
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background: var(--bg);
+        color: var(--text);
+        font-family:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          "Segoe UI", sans-serif;
+      }
+
+      button,
+      input,
+      select,
+      textarea {
+        font: inherit;
+      }
+
+      .app {
+        min-height: 100vh;
+        display: grid;
+        grid-template-rows: auto 1fr;
+      }
+
+      .topbar {
+        display: grid;
+        grid-template-columns: minmax(210px, 1fr) auto;
+        gap: 12px;
+        align-items: center;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--line);
+        background: var(--panel);
+      }
+
+      .brand {
+        min-width: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 12px;
+        align-items: baseline;
+      }
+
+      .brand strong {
+        font-size: 15px;
+        letter-spacing: 0;
+      }
+
+      .brand span,
+      .status {
+        color: var(--muted);
+        font-size: 12px;
+      }
+
+      .actions {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .button {
+        border: 1px solid var(--line);
+        border-radius: 6px;
+        background: var(--panel);
+        color: var(--text);
+        min-height: 34px;
+        padding: 0 12px;
+        cursor: pointer;
+      }
+
+      .button.primary {
+        border-color: var(--accent);
+        background: var(--accent);
+        color: #ffffff;
+      }
+
+      .button.secondary {
+        border-color: var(--accent-2);
+        color: var(--accent-2);
+      }
+
+      .button:disabled {
+        cursor: wait;
+        opacity: 0.62;
+      }
+
+      .workspace {
+        display: grid;
+        grid-template-columns: minmax(280px, 0.88fr) minmax(320px, 1.12fr);
+        gap: 12px;
+        min-height: 0;
+        padding: 12px;
+      }
+
+      .pane {
+        min-width: 0;
+        min-height: 0;
+        display: grid;
+        grid-template-rows: auto 1fr;
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        background: var(--panel);
+        box-shadow: var(--shadow);
+        overflow: hidden;
+      }
+
+      .pane header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        padding: 10px 12px;
+        border-bottom: 1px solid var(--line);
+        background: var(--panel-2);
+      }
+
+      .pane h2 {
+        margin: 0;
+        font-size: 13px;
+        font-weight: 650;
+      }
+
+      .editor-body {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        min-height: 0;
+      }
+
+      .controls {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(120px, 1fr));
+        gap: 8px;
+        padding: 10px;
+        border-bottom: 1px solid var(--line);
+      }
+
+      .field {
+        min-width: 0;
+        display: grid;
+        gap: 4px;
+      }
+
+      .field.wide {
+        grid-column: span 2;
+      }
+
+      label,
+      .check span {
+        color: var(--muted);
+        font-size: 11px;
+      }
+
+      input,
+      select,
+      textarea {
+        width: 100%;
+        border: 1px solid var(--line);
+        border-radius: 6px;
+        background: #ffffff;
+        color: var(--text);
+        outline-color: var(--accent);
+      }
+
+      input,
+      select {
+        height: 34px;
+        padding: 0 8px;
+      }
+
+      textarea {
+        min-height: 0;
+        resize: none;
+        line-height: 1.45;
+        padding: 10px;
+        tab-size: 2;
+      }
+
+      #markdown {
+        border: 0;
+        border-radius: 0;
+        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+        font-size: 13px;
+      }
+
+      #custom-css {
+        min-height: 72px;
+        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+        font-size: 12px;
+      }
+
+      .checks {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: end;
+        gap: 8px 14px;
+      }
+
+      .check {
+        display: inline-flex;
+        gap: 6px;
+        align-items: center;
+        min-height: 34px;
+      }
+
+      .check input {
+        width: 16px;
+        height: 16px;
+      }
+
+      .preview-wrap {
+        display: grid;
+        grid-template-rows: 1fr minmax(94px, 0.26fr);
+        min-height: 0;
+      }
+
+      #preview {
+        width: 100%;
+        height: 100%;
+        min-height: 320px;
+        border: 0;
+        background: #ffffff;
+      }
+
+      .diagnostics {
+        border-top: 1px solid var(--line);
+        background: #fbfcfd;
+        overflow: auto;
+      }
+
+      .diagnostics h3 {
+        margin: 10px 12px 4px;
+        color: var(--muted);
+        font-size: 11px;
+        font-weight: 650;
+        text-transform: uppercase;
+      }
+
+      .diagnostics ul {
+        margin: 0;
+        padding: 0 12px 12px;
+        list-style: none;
+      }
+
+      .diagnostics li {
+        border-left: 3px solid var(--accent);
+        margin-top: 7px;
+        padding: 4px 8px;
+        color: var(--text);
+        font-size: 12px;
+      }
+
+      .diagnostics li.error {
+        border-left-color: var(--danger);
+      }
+
+      .empty {
+        color: var(--muted);
+      }
+
+      @media (max-width: 980px) {
+        .topbar,
+        .workspace {
+          grid-template-columns: 1fr;
+        }
+
+        .actions {
+          justify-content: start;
+        }
+
+        .controls {
+          grid-template-columns: repeat(2, minmax(120px, 1fr));
+        }
+      }
+
+      @media (max-width: 620px) {
+        .controls {
+          grid-template-columns: 1fr;
+        }
+
+        .field.wide {
+          grid-column: auto;
+        }
+
+        .actions {
+          flex-wrap: wrap;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="app">
+      <div class="topbar">
+        <div class="brand">
+          <strong>franken_markdown</strong>
+          <span id="status" class="status">loading wasm package</span>
+        </div>
+        <div class="actions">
+          <button id="render" class="button primary" type="button">Render</button>
+          <button id="download-pdf" class="button secondary" type="button">Download PDF</button>
+        </div>
+      </div>
+
+      <section class="workspace" aria-label="Markdown demo workspace">
+        <section class="pane" aria-label="Markdown input">
+          <header>
+            <h2>Markdown</h2>
+            <span id="source-size" class="status">0 bytes</span>
+          </header>
+          <div class="editor-body">
+            <div class="controls">
+              <label class="field">
+                Font
+                <select id="font">
+                  <option value="sans">Sans</option>
+                  <option value="serif">Serif</option>
+                </select>
+              </label>
+              <label class="field">
+                Dark CSS
+                <select id="dark-mode">
+                  <option value="auto">Auto</option>
+                  <option value="disabled">Disabled</option>
+                </select>
+              </label>
+              <label class="field">
+                Title
+                <input id="title" value="franken_markdown demo" />
+              </label>
+              <label class="field">
+                Author
+                <input id="author" value="FMD" />
+              </label>
+              <label class="field wide">
+                Custom CSS
+                <textarea id="custom-css" spellcheck="false" placeholder="body { max-width: 860px; }"></textarea>
+              </label>
+              <div class="checks">
+                <label class="check">
+                  <input id="allow-html" type="checkbox" />
+                  <span>Allow raw HTML</span>
+                </label>
+                <label class="check">
+                  <input id="line-numbers" type="checkbox" checked />
+                  <span>PDF line numbers</span>
+                </label>
+              </div>
+            </div>
+            <textarea id="markdown" spellcheck="false"></textarea>
+          </div>
+        </section>
+
+        <section class="pane" aria-label="Rendered output">
+          <header>
+            <h2>Preview</h2>
+            <span id="preview-meta" class="status">waiting</span>
+          </header>
+          <div class="preview-wrap">
+            <iframe id="preview" title="Rendered HTML preview" sandbox=""></iframe>
+            <aside class="diagnostics" aria-live="polite">
+              <h3>Diagnostics</h3>
+              <ul id="diagnostics">
+                <li class="empty">No diagnostics yet.</li>
+              </ul>
+            </aside>
+          </div>
+        </section>
+      </section>
+    </main>
+
+    <script type="module" src="./demo.js"></script>
+  </body>
+</html>