markdown-design-doc-viewer-embed 1.5.4 → 1.5.5

package/index.js

@@ -22668,6 +22668,255 @@ function groupChanges(changes) {
   flush();
   return grouped;
 }
+function similarity(before, after, segmenter2) {
+  if (before === after) {
+    return 1;
+  }
+  const total = before.length + after.length;
+  if (total === 0) {
+    return 1;
+  }
+  let common = 0;
+  for (const change of diffWordLists(splitWords(before, segmenter2), splitWords(after, segmenter2)) ?? []) {
+    if (change.type === "equal") {
+      common += change.tokens.join("").length;
+    }
+  }
+  return 2 * common / total;
+}
+
+// src/diff/diffRender.ts
+var SIMILAR = 0.4;
+var CONTAINERS = /* @__PURE__ */ new Set(["bullet_list_open", "ordered_list_open", "table_open"]);
+var WRAPPED = /* @__PURE__ */ new Set(["fence", "html_block", "front_matter"]);
+var isWrapped = (token) => WRAPPED.has(token.type) && !isMermaidFence(token);
+function isCommentsOnly(html2) {
+  let s = html2.trim();
+  if (!s.startsWith("<!--")) {
+    return false;
+  }
+  while (s.startsWith("<!--")) {
+    const end = s.indexOf("-->", 4);
+    if (end < 0) {
+      return false;
+    }
+    s = s.slice(end + 3).trimStart();
+  }
+  return s === "";
+}
+var LIST_MARKER_RE = /^[ \t]*(?:[-*+]|\d{1,9}[.)])[ \t]?/;
+var SPACED = /* @__PURE__ */ new Set(["fence", "mermaid", "code_block", "html_block"]);
+var MAX_COMPARED_PAIRS = 2500;
+function kindOf(token) {
+  if (token.type === "heading_open") {
+    return token.tag;
+  }
+  if (token.type === "fence") {
+    return isMermaidFence(token) ? "mermaid" : "fence";
+  }
+  return token.type;
+}
+function unitsOf(tokens, lines, start, end, level, env) {
+  const units = [];
+  for (let i = start; i < end; ) {
+    const token = tokens[i];
+    if (token.level !== level || token.nesting === -1 || !token.block) {
+      i++;
+      continue;
+    }
+    let close = i;
+    if (token.nesting === 1) {
+      while (close < end && !(tokens[close].level === level && tokens[close].nesting === -1)) {
+        close++;
+      }
+    }
+    if (token.map) {
+      const kind = kindOf(token);
+      let key = lines.slice(token.map[0], token.map[1]).join("\n");
+      if (token.type === "list_item_open") {
+        key = key.replace(LIST_MARKER_RE, "");
+      }
+      key = SPACED.has(kind) ? key.trimEnd() : key.replace(/\s+/g, " ").trim();
+      const hidden = token.type === "html_block" && isCommentsOnly(token.content) || token.type === "front_matter" && env.frontMatter === false;
+      units.push({ start: i, end: close + 1, key, kind, hidden });
+    }
+    i = close + 1;
+  }
+  return units;
+}
+function align(before, after, alike) {
+  const ops = [];
+  let removed = [];
+  let added = [];
+  const flush = () => {
+    const pairs = [];
+    const compareText = removed.length * added.length <= MAX_COMPARED_PAIRS;
+    let next = 0;
+    added.forEach((b, j3) => {
+      const i3 = removed.findIndex((a, k) => k >= next && alike(a, b, compareText));
+      if (i3 >= 0) {
+        pairs.push([i3, j3]);
+        next = i3 + 1;
+      }
+    });
+    let i2 = 0;
+    let j2 = 0;
+    for (const [pi, pj] of [...pairs, [removed.length, added.length]]) {
+      while (i2 < pi) {
+        ops.push({ type: "deleted", before: removed[i2++] });
+      }
+      while (j2 < pj) {
+        ops.push({ type: "added", after: added[j2++] });
+      }
+      if (pi < removed.length) {
+        ops.push({ type: "changed", before: removed[pi], after: added[pj] });
+        i2 = pi + 1;
+        j2 = pj + 1;
+      }
+    }
+    removed = [];
+    added = [];
+  };
+  let i = 0;
+  let j = 0;
+  for (const change of diffArrays(
+    before.map((u) => u.key),
+    after.map((u) => u.key)
+  )) {
+    if (change.removed) {
+      removed.push(...before.slice(i, i += change.count));
+    } else if (change.added) {
+      added.push(...after.slice(j, j += change.count));
+    } else {
+      flush();
+      for (let k = 0; k < change.count; k++) {
+        ops.push({ type: "equal", before: before[i++], after: after[j++] });
+      }
+    }
+  }
+  flush();
+  return ops;
+}
+function renderDiff(md2, beforeSource, afterSource, env = {}) {
+  const segmenter2 = wordSegmenter();
+  const beforeEnv = {
+    resolveResource: env.resolveResource,
+    t: env.t,
+    frontMatter: env.frontMatter,
+    headingNumbers: env.headingNumbers,
+    messageWrapWidth: env.messageWrapWidth,
+    wireframes: env.wireframes,
+    forExport: true,
+    docId: "seqnotes-old"
+  };
+  const beforeTokens = md2.parse(beforeSource, beforeEnv);
+  const afterTokens = md2.parse(afterSource, env);
+  for (const token of beforeTokens) {
+    if (token.type === "heading_open" && token.attrs) {
+      token.attrs = token.attrs.filter(([name]) => name !== "id");
+    }
+  }
+  const beforeLines = beforeSource.split(/\r\n?|\n/);
+  const afterLines = afterSource.split(/\r\n?|\n/);
+  const old = [];
+  const stats = { added: 0, changed: 0, deleted: 0 };
+  const inserted = /* @__PURE__ */ new Map();
+  const insert = (index, token) => {
+    inserted.set(index, [...inserted.get(index) ?? [], token]);
+  };
+  const htmlToken = (content, level) => {
+    const token = new MarkdownItCallable.Token("html_block", "", 0);
+    token.content = content;
+    token.block = true;
+    token.level = level;
+    token.meta = { [RENDERED_HTML]: true };
+    return token;
+  };
+  const wrapped = (mark2, html2) => `<div class="seqnotes-diff-block" data-seqnotes-diff="${mark2}">
+${html2}</div>
+`;
+  const renderBefore = (unit) => md2.renderer.render(beforeTokens.slice(unit.start, unit.end), md2.options, beforeEnv);
+  const mark = (unit, value, oldIndex) => {
+    const token = afterTokens[unit.start];
+    if (isWrapped(token)) {
+      const attrs = oldIndex === void 0 ? "" : ` data-seqnotes-diff-old="${oldIndex}"`;
+      insert(unit.start, htmlToken(`<div class="seqnotes-diff-block" data-seqnotes-diff="${value}"${attrs}>
+`, token.level));
+      insert(unit.end, htmlToken("</div>\n", token.level));
+      return;
+    }
+    token.attrSet("data-seqnotes-diff", value);
+    if (oldIndex !== void 0) {
+      token.attrSet("data-seqnotes-diff-old", String(oldIndex));
+    }
+  };
+  const alike = (a, b, compareText) => a.kind === b.kind && (CONTAINERS.has(a.kind) || a.kind === "mermaid" || compareText && similarity(a.key, b.key, segmenter2) >= SIMILAR);
+  const numberItems = (tokens2, list2, items) => {
+    const start = Number(tokens2[list2.start].attrGet("start") ?? 1);
+    items.forEach((item, i) => tokens2[item.start].attrSet("value", String(start + i)));
+  };
+  const compare = (before, after, level) => {
+    const ops = align(before, after, alike);
+    let deleted = [];
+    const flushDeleted = (index) => {
+      for (const unit of deleted) {
+        const token = beforeTokens[unit.start];
+        let html2;
+        if (isWrapped(token)) {
+          html2 = wrapped("deleted", renderBefore(unit));
+        } else {
+          token.attrSet("data-seqnotes-diff", "deleted");
+          html2 = renderBefore(unit);
+        }
+        insert(index, htmlToken(html2, level));
+        stats.deleted++;
+      }
+      deleted = [];
+    };
+    for (const op of ops) {
+      if (op.type === "deleted") {
+        if (!op.before.hidden) {
+          deleted.push(op.before);
+        }
+        continue;
+      }
+      flushDeleted(op.after.start);
+      if (op.after.hidden) {
+        continue;
+      }
+      if (op.type === "added") {
+        mark(op.after, "added");
+        stats.added++;
+      } else if (op.type === "changed") {
+        const kind = op.after.kind;
+        if (CONTAINERS.has(kind)) {
+          const depth = kind === "table_open" ? 2 : 1;
+          const beforeItems = unitsOf(beforeTokens, beforeLines, op.before.start + 1, op.before.end - 1, level + depth, beforeEnv);
+          const afterItems = unitsOf(afterTokens, afterLines, op.after.start + 1, op.after.end - 1, level + depth, env);
+          if (kind === "ordered_list_open") {
+            numberItems(beforeTokens, op.before, beforeItems);
+            numberItems(afterTokens, op.after, afterItems);
+          }
+          compare(beforeItems, afterItems, level + depth);
+        } else {
+          old.push(renderBefore(op.before));
+          mark(op.after, "changed", old.length - 1);
+          stats.changed++;
+        }
+      }
+    }
+    flushDeleted(after.length > 0 ? after[after.length - 1].end : 0);
+  };
+  compare(unitsOf(beforeTokens, beforeLines, 0, beforeTokens.length, 0, beforeEnv), unitsOf(afterTokens, afterLines, 0, afterTokens.length, 0, env), 0);
+  const tokens = [];
+  for (let i = 0; i <= afterTokens.length; i++) {
+    tokens.push(...inserted.get(i) ?? []);
+    if (i < afterTokens.length) {
+      tokens.push(afterTokens[i]);
+    }
+  }
+  return { html: renderTokens(md2, tokens, env), old, stats };
+}
 
 // src/export/exportPage.ts
 var SCHEME_RE2 = /^[a-z][a-z0-9+.-]*:/i;
@@ -22710,6 +22959,17 @@ async function renderForExport(md2, source, env, resolveImage) {
   const { result, resolve } = await withImages((resolveResource) => renderDocument(md2, source, { ...env, forExport: true, resolveResource }), resolveImage);
   return resolve(result);
 }
+async function renderDiffForExport(md2, beforeSource, afterSource, env, resolveImage) {
+  const { result, resolve } = await withImages(
+    (resolveResource) => renderDiff(md2, beforeSource, afterSource, { ...env, forExport: true, resolveResource }),
+    resolveImage
+  );
+  return { html: resolve(result.html), old: result.old.map(resolve), stats: result.stats };
+}
+var DIFF_TITLES = ["diff-added", "diff-changed", "diff-deleted", "diff-no-changes", "diff-previous-title", "diff-next-title", "diff-hide-title", "diff-show-title"];
+function exportDiff({ label, stats }, t) {
+  return { label, stats, titles: Object.fromEntries(DIFF_TITLES.map((name) => [`data-seqnotes-${name}`, t(WEBVIEW_TITLES[name])])) };
+}
 function exportPage({ lang, title, body, styles, script, settings, tocTitle, splitterTitle, diff }) {
   const classes = [
     "seqnotes-viewer",
@@ -25027,7 +25287,12 @@ function setupDiffBar(root, action, { container, titles, scroll }) {
     clearTimeout(focusTimer);
     focusTimer = setTimeout(() => target.classList.remove("seqnotes-diff-focus"), FOCUS_MS);
   }
+  function setLabel(text3) {
+    label.textContent = text3;
+    label.title = text3;
+  }
   return {
+    setLabel,
     show(diff) {
       bar.hidden = !diff;
       current = void 0;
@@ -25035,8 +25300,7 @@ function setupDiffBar(root, action, { container, titles, scroll }) {
       if (!diff) {
         return;
       }
-      label.textContent = diff.label;
-      label.title = diff.label;
+      setLabel(diff.label);
       const { added, changed, deleted } = diff.stats;
       const items = [
         ["added", added, titles.seqnotesDiffAdded],
@@ -26773,7 +27037,7 @@ ${source}`;
       }
     });
     setUpWarnings();
-    diffBar.show(diff);
+    diffBar.show(lastDiff);
     layoutWireframes(root);
     addZoomButtons();
     markZoomableImages();
@@ -27413,7 +27677,13 @@ ${source}`;
     el.classList.remove("seqnotes-wide", "seqnotes-limit-width", "seqnotes-sticky-table-header", "seqnotes-table-tree-highlight");
     el.style.removeProperty("--seqnotes-split");
   }
-  return { handle, destroy };
+  function relabelDiff(label) {
+    if (lastDiff) {
+      lastDiff = { ...lastDiff, label };
+      diffBar.setLabel(label);
+    }
+  }
+  return { handle, destroy, relabelDiff };
 }
 
 // webview/viewerContext.ts
@@ -27472,6 +27742,110 @@ function writeTitles(el, t) {
   }
 }
 
+// src/export/exportIndex.ts
+function documentInfo(md2, source, fallback, frontMatter2 = true) {
+  const tokens = md2.parse(source, {});
+  const entries2 = frontMatterEntries(tokens);
+  const meta = {};
+  for (const { key } of frontMatter2 ? DESIGN_DOC_META : []) {
+    const value = frontMatterValue(entries2, key)?.trim();
+    if (value !== void 0) {
+      meta[key] = value;
+    }
+  }
+  return { title: titleOf(tokens, fallback), meta, designDoc: isDesignDoc(entries2) };
+}
+function compareFolders(a, b) {
+  const as = a === "" ? [] : a.split("/");
+  const bs = b === "" ? [] : b.split("/");
+  for (let i = 0; i < Math.min(as.length, bs.length); i++) {
+    const order = as[i].localeCompare(bs[i]);
+    if (order !== 0) {
+      return order;
+    }
+  }
+  return as.length - bs.length;
+}
+var NO_DESIGN_DOCS = "There are no design docs (Markdown files with type: design_doc in their front matter).";
+function changesCell(changes, t) {
+  const { added, changed, deleted } = changes.stats;
+  const total = added + changed + deleted;
+  let content;
+  if (changes.isNew) {
+    content = `<span class="seqnotes-index-new">${escapeHtml2(t("New"))}</span>`;
+  } else if (total === 0) {
+    content = `<span class="seqnotes-index-unchanged">${escapeHtml2(t("No changes"))}</span>`;
+  } else {
+    const counts = [
+      ["added", added, "{0} added"],
+      ["changed", changed, "{0} changed"],
+      ["deleted", deleted, "{0} deleted"]
+    ];
+    content = '<span class="seqnotes-diff-counts">' + counts.filter(([, count]) => count > 0).map(([kind, count, text3]) => `<span class="seqnotes-diff-count" data-kind="${kind}">${escapeHtml2(t(text3, count))}</span>`).join("") + "</span>";
+  }
+  return `<td class="seqnotes-index-changes" data-seqnotes-sort="${changes.isNew ? Number.MAX_SAFE_INTEGER : total}">${content}</td>`;
+}
+function groupByFolder(entries2, keepOrder = false) {
+  const unique = [...new Set(entries2.map((entry) => entry.folder))];
+  const folders = keepOrder ? unique : unique.sort(compareFolders);
+  return folders.map((folder) => {
+    const rows = entries2.filter((entry) => entry.folder === folder);
+    return { folder, entries: keepOrder ? rows : rows.sort((a, b) => a.file.localeCompare(b.file)) };
+  });
+}
+function indexBody(title, entries2, t, { empty = "", fileLabel, filterPlaceholder, keepOrder = false } = {}) {
+  const columns = DESIGN_DOC_META.filter(({ key }) => entries2.some((entry) => key in entry.meta));
+  const changes = entries2.some((entry) => entry.changes !== void 0);
+  const headers = [
+    { key: "title", label: t("Title") },
+    { key: "file", label: fileLabel ?? t("File") },
+    ...columns.map(({ key, label }) => ({ key, label: t(label) })),
+    ...changes ? [{ key: "changes", label: t("Changes") }] : []
+  ];
+  const head = "<thead><tr>" + headers.map(({ key, label }) => `<th data-seqnotes-column="${key}">${escapeHtml2(label)}</th>`).join("") + "</tr></thead>\n";
+  const row = (entry) => `<tr><td class="seqnotes-index-title"><a href="${escapeHtml2(entry.href)}">${escapeHtml2(entry.title)}</a></td><td class="seqnotes-index-file">${escapeHtml2(entry.file)}</td>` + columns.map(({ key }) => {
+    const value = entry.meta[key];
+    return `<td class="seqnotes-index-${key}">${value === void 0 ? "" : `<span>${escapeHtml2(value)}</span>`}</td>`;
+  }).join("") + (!changes ? "" : entry.changes ? changesCell(entry.changes, t) : '<td class="seqnotes-index-changes"></td>') + "</tr>\n";
+  const tables = groupByFolder(entries2, keepOrder).map(
+    ({ folder, entries: rows }) => (folder === "" ? "" : `<h2>${escapeHtml2(folder)}/</h2>
+`) + `<table>
+${head}<tbody>
+${rows.map(row).join("")}</tbody>
+</table>
+`
+  );
+  const texts = {
+    "filter-label": t("Filter"),
+    "filter-placeholder": filterPlaceholder ?? t("Filter by title, file name or metadata"),
+    // `{0}` documents shown of `{1}`, filled in by the script.
+    count: t("{0} of {1} documents"),
+    "no-match": t("No documents match the filter."),
+    "sort-title": t("Sort by this column")
+  };
+  const attrs = Object.entries(texts).map(([key, text3]) => ` data-seqnotes-${key}="${escapeHtml2(text3)}"`).join("");
+  const body = entries2.length === 0 ? `<p class="seqnotes-index-empty">${escapeHtml2(empty)}</p>
+` : tables.join("");
+  return `<div class="seqnotes-index"${attrs}>
+<h1>${escapeHtml2(title)}</h1>
+${body}</div>`;
+}
+
+// embed/designDocList.ts
+function designDocListHtml(md2, content, t) {
+  const entries2 = content.documents.map((doc) => {
+    const file = doc.file ?? "";
+    const info = documentInfo(md2, doc.markdown, file || doc.href);
+    return { title: doc.title ?? info.title, meta: info.meta, href: doc.href, folder: doc.folder ?? "", file };
+  });
+  return indexBody(content.title ?? t("Design Docs"), entries2, t, {
+    empty: content.empty ?? t(NO_DESIGN_DOCS),
+    fileLabel: content.fileLabel,
+    filterPlaceholder: content.filterPlaceholder,
+    keepOrder: content.keepOrder
+  });
+}
+
 // embed/viewer.ts
 function openLinkInNewTab(href) {
   if (/^(?:https?|mailto):/i.test(href)) {
@@ -27514,14 +27888,21 @@ async function readWireframes(markdown, { readFile, baseUrl }) {
   }
   return loadWireframes(md, wireframeSources(md.parse(markdown, {})), (path) => Promise.resolve().then(() => read(path)).catch(() => void 0));
 }
-var CONTENT_OPTIONS = ["markdown", "baseUrl", "readFile", "resolveResource", "frontMatter", "headingNumbers", "messageWrapWidth"];
+function viewerContent(markdown, env, compareWith, compareLabel) {
+  if (compareWith === void 0) {
+    return { html: renderDocument(md, markdown, env) };
+  }
+  const result = renderDiff(md, compareWith, markdown, env);
+  return { html: result.html, diff: diffView(result, compareLabel) };
+}
+function diffView({ old, stats }, compareLabel) {
+  return { label: compareLabel ?? "", old, stats };
+}
+var CONTENT_OPTIONS = ["markdown", "baseUrl", "readFile", "resolveResource", "frontMatter", "headingNumbers", "messageWrapWidth", "compareWith"];
 var VIEW_OPTIONS = ["documentId", "splitMinWidth", "toc", "diagramLook", "limitContentWidth", "stickyTableHeader", "tableTreeHighlight"];
-function createViewer(container, options) {
-  let current = { ...options };
-  const lang = langOf(options.lang);
-  const t = translator(lang);
+function mountViewer(container, lang, t, options, className = "") {
   const el = document.createElement("div");
-  el.className = "seqnotes-viewer seqnotes-embedded";
+  el.className = `seqnotes-viewer seqnotes-embedded ${className}`.trim();
   el.lang = lang;
   el.dataset.seqnotesTheme = "auto";
   writeTitles(el, t);
@@ -27540,9 +27921,11 @@ function createViewer(container, options) {
   let state;
   const post = (message) => {
     if (message.type === "openLink") {
-      (current.onOpenLink ?? openLinkInNewTab)(message.href);
+      (options().onOpenLink ?? openLinkInNewTab)(message.href);
     } else if (message.type === "revealLine") {
-      current.onRevealLine?.(message.line);
+      options().onRevealLine?.(message.line);
+    } else if (message.type === "closeDiff") {
+      options().onCloseDiff?.();
     }
   };
   const preview = createPreview({
@@ -27556,21 +27939,51 @@ function createViewer(container, options) {
   });
   const systemDark = window.matchMedia("(prefers-color-scheme: dark)");
   const applyTheme = () => {
-    const dark = current.theme === "dark" || current.theme !== "light" && systemDark.matches;
+    const { theme } = options();
+    const dark = theme === "dark" || theme !== "light" && systemDark.matches;
     el.classList.toggle("vscode-dark", dark);
     el.classList.toggle("vscode-light", !dark);
   };
   systemDark.addEventListener("change", applyTheme);
   applyTheme();
+  return {
+    preview,
+    applyTheme,
+    destroy() {
+      preview.destroy();
+      systemDark.removeEventListener("change", applyTheme);
+      stopSizing();
+      el.remove();
+    }
+  };
+}
+function createViewer(container, options) {
+  let current = { ...options };
+  const lang = langOf(options.lang);
+  const t = translator(lang);
   let destroyed = false;
   let resolveReady;
   const ready = new Promise((resolve) => resolveReady = resolve);
   let html2;
+  let diff;
+  let wireframesRead;
   let rendering = Promise.resolve();
   let pending = false;
   let renders = 0;
   let shown = 0;
-  async function show(rendered) {
+  let dismissed;
+  const closeDiff = () => {
+    if (current.onCloseDiff) {
+      current.onCloseDiff();
+    } else if (!destroyed && current.compareWith !== void 0 && current.compareWith !== dismissed) {
+      dismissed = current.compareWith;
+      if (!pending) {
+        rendering = render(true);
+      }
+    }
+  };
+  const { preview, applyTheme, destroy: unmount } = mountViewer(container, lang, t, () => ({ ...current, onCloseDiff: closeDiff }));
+  async function show(rendered, differences) {
     const seq = ++shown;
     await preview.handle({
       type: "update",
@@ -27584,24 +27997,32 @@ function createViewer(container, options) {
       theme: "auto",
       limitContentWidth: current.limitContentWidth ?? true,
       stickyTableHeader: current.stickyTableHeader ?? true,
-      tableTreeHighlight: current.tableTreeHighlight ?? true
+      tableTreeHighlight: current.tableTreeHighlight ?? true,
+      ...differences ? { diff: differences } : {}
     });
     if (seq === shown) {
       resolveReady();
     }
   }
-  async function render() {
+  async function render(sameWireframes = false) {
     const seq = ++renders;
     pending = true;
     const { markdown, baseUrl } = current;
     const resolveResource = current.resolveResource ?? (baseUrl === void 0 ? void 0 : (src) => resolveUrl(src, baseUrl) ?? src);
-    const wireframes2 = await readWireframes(markdown, current);
+    const wireframes2 = sameWireframes && wireframesRead ? wireframesRead.files : await readWireframes(markdown, current);
     if (destroyed || seq !== renders) {
       return;
     }
     pending = false;
-    html2 = renderDocument(md, markdown, { t, frontMatter: current.frontMatter, headingNumbers: current.headingNumbers, messageWrapWidth: current.messageWrapWidth, wireframes: wireframes2, resolveResource });
-    await show(html2);
+    wireframesRead = { files: wireframes2 };
+    const compareWith = current.compareWith === dismissed ? void 0 : current.compareWith;
+    ({ html: html2, diff } = viewerContent(
+      markdown,
+      { t, frontMatter: current.frontMatter, headingNumbers: current.headingNumbers, messageWrapWidth: current.messageWrapWidth, wireframes: wireframes2, resolveResource },
+      compareWith,
+      current.compareLabel
+    ));
+    await show(html2, diff);
   }
   rendering = render();
   return {
@@ -27613,6 +28034,9 @@ function createViewer(container, options) {
       const previous = current;
       current = { ...current, ...changes, lang: current.lang };
       applyTheme();
+      if (current.compareWith !== previous.compareWith) {
+        dismissed = void 0;
+      }
       if (html2 === void 0 || CONTENT_OPTIONS.some((name) => current[name] !== previous[name])) {
         rendering = render();
         return rendering;
@@ -27620,9 +28044,13 @@ function createViewer(container, options) {
       if (pending) {
         return rendering;
       }
+      if (diff !== void 0 && current.compareLabel !== previous.compareLabel) {
+        diff = diffView(diff, current.compareLabel);
+        preview.relabelDiff(diff.label);
+      }
       const revealing = (options2) => options2.onRevealLine !== void 0;
       if (VIEW_OPTIONS.some((name) => current[name] !== previous[name]) || revealing(current) !== revealing(previous)) {
-        return show(html2);
+        return show(html2, diff);
       }
       return Promise.resolve();
     },
@@ -27637,16 +28065,90 @@ function createViewer(container, options) {
         return;
       }
       destroyed = true;
-      preview.destroy();
-      systemDark.removeEventListener("change", applyTheme);
-      stopSizing();
-      el.remove();
+      unmount();
+      resolveReady();
+    }
+  };
+}
+var LIST_URI = "seqnotes-design-doc-list";
+var LIST_CONTENT_OPTIONS = ["documents", "title", "fileLabel", "filterPlaceholder", "empty", "keepOrder"];
+var SCRIPT_SCHEMES = /* @__PURE__ */ new Set(["javascript:", "data:", "vbscript:"]);
+function openLinkInPage(href) {
+  let url;
+  try {
+    url = new URL(href, document.baseURI);
+  } catch {
+    return;
+  }
+  if (!SCRIPT_SCHEMES.has(url.protocol)) {
+    window.location.assign(url.href);
+  }
+}
+function createDesignDocList(container, options) {
+  let current = { ...options };
+  const lang = langOf(options.lang);
+  const t = translator(lang);
+  const { preview, applyTheme, destroy: unmount } = mountViewer(
+    container,
+    lang,
+    t,
+    () => ({ ...current, onOpenLink: current.onOpenLink ?? openLinkInPage }),
+    "seqnotes-embedded-list"
+  );
+  let destroyed = false;
+  let resolveReady;
+  const ready = new Promise((resolve) => resolveReady = resolve);
+  let html2 = designDocListHtml(md, current, t);
+  let shown = 0;
+  async function show() {
+    if (destroyed) {
+      return;
+    }
+    const seq = ++shown;
+    await preview.handle({
+      type: "update",
+      uri: LIST_URI,
+      html: html2,
+      splitMinWidth: 1e3,
+      syncEditor: false,
+      toc: false,
+      diagramLook: "neo",
+      theme: "auto",
+      limitContentWidth: current.limitContentWidth ?? true,
+      stickyTableHeader: false,
+      tableTreeHighlight: false
+    });
+    if (seq === shown) {
+      resolveReady();
+    }
+  }
+  void show();
+  return {
+    ready,
+    update(changes) {
+      if (destroyed) {
+        return Promise.resolve();
+      }
+      const previous = current;
+      current = { ...current, ...changes, lang: current.lang };
+      applyTheme();
+      if (LIST_CONTENT_OPTIONS.some((name) => current[name] !== previous[name])) {
+        html2 = designDocListHtml(md, current, t);
+      }
+      return show();
+    },
+    destroy() {
+      if (destroyed) {
+        return;
+      }
+      destroyed = true;
+      unmount();
       resolveReady();
     }
   };
 }
 var exportCount = 0;
-async function renderExportBody(html2, t, diagramLook) {
+async function renderExportBody(html2, t, diagramLook, diff) {
   const el = document.createElement("div");
   el.className = "seqnotes-viewer seqnotes-embedded vscode-light";
   el.dataset.seqnotesTheme = "light";
@@ -27671,7 +28173,7 @@ async function renderExportBody(html2, t, diagramLook) {
         setState: (next) => state = next
       });
     });
-    await preview.handle({ type: "export", id: 1, html: html2, diagramLook });
+    await preview.handle({ type: "export", id: 1, html: html2, diagramLook, ...diff ? { diff } : {} });
     const { body, error: error2 } = await exported;
     if (body === void 0) {
       throw new Error(error2 ?? "The diagrams could not be rendered.");
@@ -27695,8 +28197,17 @@ async function exportDocument(options, assets) {
       () => path
     );
   };
-  const html2 = await renderForExport(md, markdown, { t, frontMatter: options.frontMatter, headingNumbers: options.headingNumbers, messageWrapWidth: options.messageWrapWidth, wireframes: wireframes2 }, image2);
-  const body = await renderExportBody(html2, t, options.diagramLook ?? "neo");
+  const env = { t, frontMatter: options.frontMatter, headingNumbers: options.headingNumbers, messageWrapWidth: options.messageWrapWidth, wireframes: wireframes2 };
+  let html2;
+  let diff;
+  if (options.compareWith !== void 0) {
+    const result = await renderDiffForExport(md, options.compareWith, markdown, env, image2);
+    html2 = result.html;
+    diff = diffView(result, options.compareLabel);
+  } else {
+    html2 = await renderForExport(md, markdown, env, image2);
+  }
+  const body = await renderExportBody(html2, t, options.diagramLook ?? "neo", diff);
   return exportPage({
     lang,
     title: documentTitle(md, markdown, options.title ?? ""),
@@ -27711,13 +28222,17 @@ async function exportDocument(options, assets) {
       toc: options.toc ?? true
     },
     tocTitle: t(WEBVIEW_TITLES["toc-title"]),
-    splitterTitle: t(WEBVIEW_TITLES["splitter-title"])
+    splitterTitle: t(WEBVIEW_TITLES["splitter-title"]),
+    ...diff ? { diff: exportDiff(diff, t) } : {}
   });
 }
 export {
+  createDesignDocList,
   createViewer,
   exportDocument,
-  openLinkInNewTab
+  openLinkInNewTab,
+  openLinkInPage,
+  viewerContent
 };
 /*! Bundled license information: