markdown-design-doc-viewer-embed 1.5.0 → 1.5.2

package/README.ja.md

@@ -78,6 +78,7 @@ viewer.destroy();
 | `tableTreeHighlight` | `true` | 木構造で表示した表の行の親子をハイライトします。 |
 | `frontMatter` | `true` | front matter を（設計書のヘッダ、または表として）表示します。 |
 | `headingNumbers` | `true` | 紐付いた見出しに `autonumber` の番号を表示します。 |
+| `messageWrapWidth` | `30` | シーケンス図の矢印のラベルをこの文字数（全角は 2 文字と数える）で改行します。`0` にすると改行しません。 |
 | `onOpenLink` | `openLinkInNewTab` | `(href) => void`: 設計書のリンク（ビューアがスクロールする `#見出し` 以外）を開きます。既定では http(s) と mailto のリンクを新しいタブで開き、ほかは何もしません。 |
 | `onRevealLine` | | `(line) => void`: ビューアでダブルクリックした Markdown の行（0 始まり）で呼ばれます（エディタでその行を表示するなど）。ないときはダブルクリックしても何もしません。 |
 

package/README.md

@@ -78,6 +78,7 @@ viewer.destroy();
 | `tableTreeHighlight` | `true` | Highlights the parent and children of a row of a table shown as a tree. |
 | `frontMatter` | `true` | Shows the front matter (as the header of a design document, or as a table). |
 | `headingNumbers` | `true` | Shows the `autonumber` numbers on the linked headings. |
+| `messageWrapWidth` | `30` | Breaks the labels of the arrows of the sequence diagrams into lines at this many characters (a full-width one counts as 2). `0` does not break them. |
 | `onOpenLink` | `openLinkInNewTab` | `(href) => void`: opens a link of the document (other than `#heading`, which the viewer scrolls to). By default, http(s) and mailto links open in a new tab, and the others do nothing. |
 | `onRevealLine` | | `(line) => void`: called with the line (0-based) of the Markdown double-clicked in the viewer, e.g. to show it in an editor. Without it, a double-click does nothing. |
 

package/index.js

@@ -14447,6 +14447,8 @@ var bundle_l10n_ja_default = {
   "neo: rounder shapes, with shadows on flowchart nodes. classic: flat, without shadows.": "neo: \u89D2\u304C\u4E38\u304F\u3001\u30D5\u30ED\u30FC\u30C1\u30E3\u30FC\u30C8\u306E\u30CE\u30FC\u30C9\u306B\u5F71\u304C\u4ED8\u304D\u307E\u3059\u3002classic: \u5E73\u5766\u3067\u3001\u5F71\u306F\u4ED8\u304D\u307E\u305B\u3093\u3002",
   "Side-by-Side Width (px)": "\u6A2A\u4E26\u3073\u306B\u3059\u308B\u5E45 (px)",
   "Shows the diagrams beside their step descriptions when the preview is at least this wide.": "\u30D7\u30EC\u30D3\u30E5\u30FC\u306E\u5E45\u304C\u3053\u308C\u4EE5\u4E0A\u306E\u3068\u304D\u3001\u56F3\u3068\u51E6\u7406\u6982\u8981\u3092\u6A2A\u306B\u4E26\u3079\u307E\u3059\u3002",
+  "Arrow Label Width": "\u77E2\u5370\u306E\u30E9\u30D9\u30EB\u306E\u5E45",
+  "Breaks the labels of the arrows of the sequence diagrams into lines at this many characters (a full-width one counts as 2). 0: not broken.": "\u30B7\u30FC\u30B1\u30F3\u30B9\u56F3\u306E\u77E2\u5370\u306E\u30E9\u30D9\u30EB\u3092\u3053\u306E\u6587\u5B57\u6570\uFF08\u5168\u89D2\u306F 2 \u6587\u5B57\u3068\u6570\u3048\u308B\uFF09\u3067\u6539\u884C\u3057\u307E\u3059\u30020 \u306B\u3059\u308B\u3068\u6539\u884C\u3057\u307E\u305B\u3093\u3002",
   "Table of Contents": "\u76EE\u6B21",
   "Shown when hovering the right edge of the preview.": "\u30D7\u30EC\u30D3\u30E5\u30FC\u306E\u53F3\u7AEF\u306B\u30DE\u30A6\u30B9\u3092\u4E57\u305B\u308B\u3068\u958B\u304D\u307E\u3059\u3002",
   "Heading Numbers": "\u898B\u51FA\u3057\u306E\u756A\u53F7",
@@ -14571,9 +14573,10 @@ var bundle_l10n_ja_default = {
   "@goto is ignored because the next line is not a note.": "\u6B21\u306E\u884C\u304C\u30CE\u30FC\u30C8\u3067\u306F\u306A\u3044\u305F\u3081\u3001@goto \u306F\u7121\u8996\u3055\u308C\u307E\u3059\u3002",
   "@goto is ignored because @anchor makes the note a label. A note is a label or a jump, not both.": "@anchor \u3067\u30CE\u30FC\u30C8\u3092\u30E9\u30D9\u30EB\u306B\u3057\u3066\u3044\u308B\u305F\u3081\u3001@goto \u306F\u7121\u8996\u3055\u308C\u307E\u3059\u30021 \u3064\u306E\u30CE\u30FC\u30C8\u306F\u30E9\u30D9\u30EB\u304B\u30B8\u30E3\u30F3\u30D7\u306E\u3069\u3061\u3089\u304B\u3067\u3059\u3002",
   'Label "{0}" is already defined in the sequence diagram.': "\u30E9\u30D9\u30EB\u300C{0}\u300D\u306F\u30B7\u30FC\u30B1\u30F3\u30B9\u56F3\u3067\u3059\u3067\u306B\u5B9A\u7FA9\u3055\u308C\u3066\u3044\u307E\u3059\u3002",
-  '@goto target label "{0}" was not found in the sequence diagram.': "@goto \u3067\u6307\u5B9A\u3057\u305F\u30E9\u30D9\u30EB\u300C{0}\u300D\u304C\u30B7\u30FC\u30B1\u30F3\u30B9\u56F3\u306B\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002",
+  '@goto target label "{0}" was not found in the sequence diagrams of the document.': "@goto \u3067\u6307\u5B9A\u3057\u305F\u30E9\u30D9\u30EB\u300C{0}\u300D\u304C\u6587\u66F8\u306E\u30B7\u30FC\u30B1\u30F3\u30B9\u56F3\u306B\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002",
+  '@goto target label "{0}" is defined in more than one other sequence diagram. Name the label to jump to uniquely with @anchor.': "@goto \u3067\u6307\u5B9A\u3057\u305F\u30E9\u30D9\u30EB\u300C{0}\u300D\u306F\u307B\u304B\u306E\u8907\u6570\u306E\u30B7\u30FC\u30B1\u30F3\u30B9\u56F3\u3067\u5B9A\u7FA9\u3055\u308C\u3066\u3044\u307E\u3059\u3002\u30B8\u30E3\u30F3\u30D7\u5148\u306E\u30E9\u30D9\u30EB\u306B @anchor \u3067\u4E00\u610F\u306A\u540D\u524D\u3092\u4ED8\u3051\u3066\u304F\u3060\u3055\u3044\u3002",
   "Make the next note (or section of a block) a label that notes can jump to.": "\u76F4\u5F8C\u306E\u30CE\u30FC\u30C8\uFF08\u307E\u305F\u306F\u30D6\u30ED\u30C3\u30AF\u306E\u5206\u5C90\uFF09\u3092\u3001\u30CE\u30FC\u30C8\u304B\u3089\u79FB\u52D5\u3067\u304D\u308B\u30E9\u30D9\u30EB\u306B\u3057\u307E\u3059\u3002",
-  "Make the next note jump to a label.": "\u76F4\u5F8C\u306E\u30CE\u30FC\u30C8\u3092\u3001\u30E9\u30D9\u30EB\u3078\u79FB\u52D5\u3059\u308B\u30CE\u30FC\u30C8\u306B\u3057\u307E\u3059\u3002",
+  "Make the next note jump to a label of this or another sequence diagram of the document.": "\u76F4\u5F8C\u306E\u30CE\u30FC\u30C8\u3092\u3001\u3053\u306E\u56F3\u307E\u305F\u306F\u6587\u66F8\u306E\u307B\u304B\u306E\u30B7\u30FC\u30B1\u30F3\u30B9\u56F3\u306E\u30E9\u30D9\u30EB\u3078\u79FB\u52D5\u3059\u308B\u30CE\u30FC\u30C8\u306B\u3057\u307E\u3059\u3002",
   "Go to {0}": "{0} \u3078\u79FB\u52D5",
   "Back to the note you jumped from": "\u79FB\u52D5\u5143\u306E\u30CE\u30FC\u30C8\u306B\u623B\u308B"
 };
@@ -20230,20 +20233,16 @@ function noteJumpWording(t) {
     strayGoto: t("@goto is ignored because the next line is not a note."),
     gotoOnLabel: t("@goto is ignored because @anchor makes the note a label. A note is a label or a jump, not both."),
     duplicateAnchor: (name) => t('Label "{0}" is already defined in the sequence diagram.', name),
-    gotoNotFound: (name) => t('@goto target label "{0}" was not found in the sequence diagram.', name),
+    gotoNotFound: (name) => t('@goto target label "{0}" was not found in the sequence diagrams of the document.', name),
+    gotoAmbiguous: (name) => t('@goto target label "{0}" is defined in more than one other sequence diagram. Name the label to jump to uniquely with @anchor.', name),
     anchorDoc: t("Make the next note (or section of a block) a label that notes can jump to."),
-    gotoDoc: t("Make the next note jump to a label."),
+    gotoDoc: t("Make the next note jump to a label of this or another sequence diagram of the document."),
     // `{0}` is filled in by the webview.
     gotoTitle: t("Go to {0}"),
     backTitle: t("Back to the note you jumped from")
   };
 }
 
-// src/markdown/htmlTags.ts
-var RAW_TEXT = "script|style|textarea|title";
-var ATTR_RE = /([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
-var decodeAttribute = (md2, value) => md2.utils.unescapeAll(value.replace(/\\/g, "\\\\"));
-
 // src/diagrams/sequence.ts
 var ARROWS = [
   "<<-->>",
@@ -20520,6 +20519,104 @@ function stripStepNumber(heading2) {
   return void 0;
 }
 
+// src/diagrams/sequenceWrap.ts
+var DEFAULT_MESSAGE_WRAP_WIDTH = 30;
+var WIDE_RE = /[ᄀ-ᅟ⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦\u{1F300}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{1F900}-\u{1FAFF}\u{20000}-\u{3FFFD}]/u;
+var NO_START = new Set(Array.from("\u3001\u3002\uFF0C\uFF0E\u30FB\uFF1A\uFF1B\uFF1F\uFF01\u309D\u309E\u30FC\u30A1\u30A3\u30A5\u30A7\u30A9\u30C3\u30E3\u30E5\u30E7\u30EE\u30F5\u30F6\u3041\u3043\u3045\u3047\u3049\u3063\u3083\u3085\u3087\u308E\u3095\u3096\uFF09\u3015\uFF3D\uFF5D\u3009\u300B\u300D\u300F\u3011\u3019\u3017\u301F\u2019\u201D\uFF60\xBB,.:;!?)]}"));
+var NO_END = new Set(Array.from("\uFF08\u3014\uFF3B\uFF5B\u3008\u300A\u300C\u300E\u3010\u3018\u3016\u301D\u2018\u201C\uFF5F\xAB([{"));
+var KEEP_RE = /<br\s*\/?>|#|;|%%|\$\$|^:?(?:no)?wrap:/i;
+var TAG_RE = /<\/?[a-z][a-z0-9]*(?:\s[^>]*)?\/?>/;
+var keepsLabel = (text3) => KEEP_RE.test(text3) || TAG_RE.test(text3);
+var charWidth = (c) => WIDE_RE.test(c) ? 2 : 1;
+var textWidth = (text3) => Array.from(text3).reduce((sum, c) => sum + charWidth(c), 0);
+function canBreakBefore(chars, i) {
+  const before = chars[i - 1];
+  const after = chars[i];
+  if (before === " " || after === " ") {
+    return true;
+  }
+  if (NO_START.has(after) || NO_END.has(before)) {
+    return false;
+  }
+  if (before === "/" && after !== "/") {
+    return true;
+  }
+  return WIDE_RE.test(before) || WIDE_RE.test(after);
+}
+function fillLines(chars, limit) {
+  const lines = [];
+  let start = 0;
+  while (start < chars.length) {
+    while (chars[start] === " ") {
+      start++;
+    }
+    if (start >= chars.length) {
+      break;
+    }
+    let width = 0;
+    let end = start;
+    let lastBreak = -1;
+    while (end < chars.length) {
+      if (end > start && canBreakBefore(chars, end)) {
+        lastBreak = end;
+      }
+      const w = charWidth(chars[end]);
+      if (end > start && width + w > limit) {
+        break;
+      }
+      width += w;
+      end++;
+    }
+    const cut = end < chars.length && lastBreak > start ? lastBreak : end;
+    lines.push(chars.slice(start, cut).join("").trimEnd());
+    start = cut;
+  }
+  return lines;
+}
+function wrapLabel(text3, maxWidth) {
+  const normalized = text3.replace(/\s+/g, " ").trim();
+  const total = textWidth(normalized);
+  if (maxWidth <= 0 || total <= maxWidth) {
+    return [normalized];
+  }
+  const chars = Array.from(normalized);
+  const count = fillLines(chars, maxWidth).length;
+  for (let limit = Math.ceil(total / count); limit < maxWidth; limit++) {
+    const lines = fillLines(chars, limit);
+    if (lines.length <= count) {
+      return lines;
+    }
+  }
+  return fillLines(chars, maxWidth);
+}
+function wrapSequenceMessages(source, maxWidth) {
+  if (!(maxWidth > 0) || !isSequenceDiagram(source)) {
+    return source;
+  }
+  const { messages } = parseSequence(source, 0);
+  const lines = source.split("\n");
+  let changed = false;
+  for (const { line } of messages) {
+    const raw = lines[line];
+    const colon = raw.indexOf(":");
+    const label = raw.slice(colon + 1);
+    const text3 = label.trim();
+    if (keepsLabel(text3) || textWidth(text3) <= maxWidth) {
+      continue;
+    }
+    const lead = /^\s*/.exec(label)[0];
+    const trail = /\s*$/.exec(label)[0];
+    lines[line] = `${raw.slice(0, colon + 1)}${lead}${wrapLabel(text3, maxWidth).join("<br>")}${trail}`;
+    changed = true;
+  }
+  return changed ? lines.join("\n") : source;
+}
+
+// src/markdown/htmlTags.ts
+var RAW_TEXT = "script|style|textarea|title";
+var ATTR_RE = /([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+var decodeAttribute = (md2, value) => md2.utils.unescapeAll(value.replace(/\\/g, "\\\\"));
+
 // src/diagrams/diagramNodes.ts
 function readNodes(lines, start, firstLine, rules, reader) {
   const excluded = reader.excluded ?? /* @__PURE__ */ new Set();
@@ -21618,13 +21715,35 @@ function noteJumps(sequence, marked, translate, warnings) {
       byName.set(anchor.name, { ...anchor });
     }
   }
-  for (const note of notes) {
-    if (note.goto !== void 0 && !byName.has(note.goto)) {
-      warnings.push({ line: note.gotoLine ?? note.line, message: wording.gotoNotFound(note.goto) });
+  return { notes, anchors: [...byName.values()] };
+}
+function jumpsBetweenDiagrams(diagrams, translate, warnings) {
+  const wording = noteJumpWording(translate);
+  const byName = /* @__PURE__ */ new Map();
+  for (const diagram of diagrams) {
+    for (const anchor of diagram.anchors ?? []) {
+      const found = byName.get(anchor.name) ?? [];
+      found.push({ diagram, anchor });
+      byName.set(anchor.name, found);
+    }
+  }
+  for (const diagram of diagrams) {
+    const own = new Set(diagram.anchors?.map((a) => a.name));
+    for (const note of diagram.notes ?? []) {
+      if (note.goto === void 0 || own.has(note.goto)) {
+        continue;
+      }
+      const found = byName.get(note.goto) ?? [];
+      if (found.length === 1) {
+        note.gotoDiagram = found[0].diagram.id;
+        found[0].anchor.jumpedFrom = true;
+        continue;
+      }
+      const line = note.gotoLine ?? note.line;
+      warnings.push({ line, message: found.length === 0 ? wording.gotoNotFound(note.goto) : wording.gotoAmbiguous(note.goto) });
       delete note.goto;
     }
   }
-  return { notes, anchors: [...byName.values()] };
 }
 function wireframeDiagram(token, index, id, translate, warnings) {
   const { src, options, file, parts } = wireframeOf(token);
@@ -21663,6 +21782,7 @@ function linkDiagrams(tokens, translate = formatMessage) {
       diagrams.push(wireframeDiagram(token, index, diagrams.length, translate, warnings));
     }
   });
+  jumpsBetweenDiagrams(diagrams, translate, warnings);
   const pairedFences = new Set(diagrams.filter((d) => d.paired).map((d) => d.fenceIndex));
   for (const token of tokens) {
     if (token.level === 0 && token.type === "html_block" && LEGACY_END_MARKER_RE.test(token.content)) {
@@ -22069,16 +22189,17 @@ function diagramAttributes(token, env) {
       }))
     };
     const notes = diagram.notes ?? [];
-    if (notes.some((n) => n.anchor !== void 0 || n.goto !== void 0)) {
+    if (notes.some((n) => n.anchor !== void 0 || n.goto !== void 0) || diagram.anchors?.some((a) => a.jumpedFrom)) {
       const wording = noteJumpWording(env?.t ?? formatMessage);
-      meta.notes = notes.map(({ index, line: line2, text: text3, anchor, goto }) => ({ index, line: line2, text: text3, anchor, goto }));
-      meta.anchors = diagram.anchors?.map(({ name, title, occurrence, firstTarget }) => ({ name, title, occurrence, firstTarget }));
+      meta.notes = notes.map(({ index, line: line2, text: text3, anchor, goto, gotoDiagram }) => ({ index, line: line2, text: text3, anchor, goto, gotoDiagram }));
+      meta.anchors = diagram.anchors?.map(({ name, title, occurrence, firstTarget, jumpedFrom }) => ({ name, title, occurrence, firstTarget, jumpedFrom }));
       meta.jumpTitles = { goto: wording.gotoTitle, back: wording.backTitle };
     }
     attrs += ` data-seqnotes-meta="${escapeHtml2(JSON.stringify(meta))}"`;
   }
   return attrs;
 }
+var mermaidSource = (content, env) => wrapSequenceMessages(content, env?.messageWrapWidth ?? DEFAULT_MESSAGE_WRAP_WIDTH);
 function mermaidFence(md2) {
   const defaultFence = md2.renderer.rules.fence;
   md2.renderer.rules.fence = (tokens, idx, options, env, self) => {
@@ -22086,7 +22207,7 @@ function mermaidFence(md2) {
     if (!isMermaidFence(token)) {
       return defaultFence(tokens, idx, options, env, self);
     }
-    return `<div class="seqnotes-mermaid"${diagramAttributes(token, env)}><pre class="seqnotes-mermaid-src">${escapeHtml2(token.content)}</pre></div>
+    return `<div class="seqnotes-mermaid"${diagramAttributes(token, env)}><pre class="seqnotes-mermaid-src">${escapeHtml2(mermaidSource(token.content, env))}</pre></div>
 `;
   };
 }
@@ -25362,6 +25483,96 @@ function restorePlain(root, indexes) {
   });
 }
 
+// webview/splitter.ts
+var MIN_SPLIT = 20;
+var MAX_SPLIT = 80;
+function applySplit(el, percent) {
+  if (percent === void 0 || !Number.isFinite(percent)) {
+    el.style.removeProperty("--seqnotes-split");
+    return void 0;
+  }
+  percent = Math.min(MAX_SPLIT, Math.max(MIN_SPLIT, percent));
+  el.style.setProperty("--seqnotes-split", `${percent}%`);
+  return percent;
+}
+var KEY_STEP = 5;
+function addSplitter(pair, title, onSplit, signal) {
+  const splitter = document.createElement("div");
+  splitter.className = "seqnotes-splitter";
+  splitter.title = title;
+  splitter.tabIndex = 0;
+  splitter.setAttribute("role", "separator");
+  splitter.setAttribute("aria-orientation", "vertical");
+  splitter.setAttribute("aria-valuemin", String(MIN_SPLIT));
+  splitter.setAttribute("aria-valuemax", String(MAX_SPLIT));
+  const column = pair.querySelector(".seqnotes-seq-col");
+  column?.after(splitter);
+  const current = () => {
+    const width = pair.getBoundingClientRect().width;
+    return width > 0 && column ? column.getBoundingClientRect().width / width * 100 : 0;
+  };
+  const showValue = () => splitter.setAttribute("aria-valuenow", String(Math.round(current())));
+  const split = (percent) => {
+    onSplit(percent);
+    showValue();
+  };
+  splitter.addEventListener(
+    "pointerdown",
+    (e) => {
+      e.preventDefault();
+      splitter.setPointerCapture(e.pointerId);
+      const move = (ev) => {
+        const r = pair.getBoundingClientRect();
+        split((ev.clientX - r.left) / r.width * 100);
+      };
+      const end = () => {
+        splitter.removeEventListener("pointermove", move);
+        splitter.removeEventListener("lostpointercapture", end);
+      };
+      splitter.addEventListener("pointermove", move, { signal });
+      splitter.addEventListener("lostpointercapture", end, { signal });
+    },
+    { signal }
+  );
+  splitter.addEventListener(
+    "dblclick",
+    (e) => {
+      e.stopPropagation();
+      split(void 0);
+    },
+    { signal }
+  );
+  splitter.addEventListener("focus", showValue, { signal });
+  splitter.addEventListener(
+    "keydown",
+    (e) => {
+      let percent;
+      switch (e.key) {
+        case "ArrowLeft":
+          percent = current() - KEY_STEP;
+          break;
+        case "ArrowRight":
+          percent = current() + KEY_STEP;
+          break;
+        case "Home":
+          percent = MIN_SPLIT;
+          break;
+        case "End":
+          percent = MAX_SPLIT;
+          break;
+        case "Enter":
+          percent = void 0;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      split(percent);
+    },
+    { signal }
+  );
+}
+
 // webview/toc.ts
 var TOC_CURRENT = "seqnotes-toc-current";
 var TOC_CURRENT_RATIO = 0.2;
@@ -25506,7 +25717,7 @@ var HOVER = "seqnotes-jump-hover";
 var FLASH = "seqnotes-flash";
 var JUMP_ELEMENTS = "svg [data-seqnotes-goto], svg [data-seqnotes-anchor]";
 var FLASH_MS = 1200;
-function textWidth(text3, fontSize2) {
+function textWidth2(text3, fontSize2) {
   let em = 0;
   for (const c of text3) {
     em += /[ᄀ-ᅟ①-⓿⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/.test(c) ? 1 : 0.6;
@@ -25530,7 +25741,8 @@ function makeBadge(group) {
   if (!(height > 0)) {
     return;
   }
-  if (texts.length === 1) {
+  const larger = (t) => textWidth2(t.textContent ?? "", fontSize(t) * BADGE_FONT_SCALE) + height * 0.5;
+  if (texts.length === 1 && larger(texts[0]) <= width) {
     const [text3] = texts;
     text3.style.fontSize = `${fontSize(text3) * BADGE_FONT_SCALE}px`;
     text3.setAttribute("y", String(num(rect, "y") + height / 2));
@@ -25542,7 +25754,7 @@ function makeBadge(group) {
       tspan.removeAttribute("y");
     }
   }
-  const textW = Math.max(...texts.map((t) => textWidth(t.textContent ?? "", fontSize(t))));
+  const textW = Math.max(...texts.map((t) => textWidth2(t.textContent ?? "", fontSize(t))));
   const badge = Math.max(height, textW + height * 0.5);
   if (!(badge < width)) {
     return;
@@ -25616,6 +25828,7 @@ function annotateNotes(svg2, meta) {
   if (!notes) {
     return;
   }
+  svg2.setAttribute("data-seqnotes-diagram", String(meta.id));
   const groups = Array.from(svg2.querySelectorAll('g[data-et="note"]'));
   let assigned;
   if (groups.length === notes.length) {
@@ -25644,6 +25857,9 @@ function annotateNotes(svg2, meta) {
     } else if (note.goto !== void 0) {
       group.classList.add("seqnotes-goto");
       group.setAttribute("data-seqnotes-goto", note.goto);
+      if (note.gotoDiagram !== void 0) {
+        group.setAttribute("data-seqnotes-goto-diagram", String(note.gotoDiagram));
+      }
       const title = document.createElementNS(SVG_NS, "title");
       title.textContent = (meta.jumpTitles?.goto ?? "{0}").replace("{0}", note.goto);
       group.prepend(title);
@@ -25669,13 +25885,14 @@ function annotateNotes(svg2, meta) {
   const boxes = blockBoxes(svg2);
   for (const { els, name, fromLabel } of labels) {
     const el = els[0];
-    const firstTarget = meta.anchors?.find((a) => a.name === name)?.firstTarget;
+    const anchor = meta.anchors?.find((a) => a.name === name);
+    const firstTarget = anchor?.firstTarget;
     for (const e of els) {
       if (firstTarget !== void 0) {
         e.setAttribute("data-seqnotes-first-target", firstTarget);
       }
     }
-    if (notes.some((n) => n.goto === name)) {
+    if (notes.some((n) => n.goto === name) || anchor?.jumpedFrom) {
       focusable(el, name);
     }
     const r = sectionRect(boxes, el, fromLabel);
@@ -25701,6 +25918,17 @@ function setupNoteJumps(root, { scroll, pin, signal }) {
   let hovered = [];
   const svgOf = (el) => el.closest("svg");
   const byAttr = (svg2, attr, name) => Array.from(svg2.querySelectorAll(`[${attr}="${CSS.escape(name)}"]`));
+  const targetSvg = (note) => {
+    const other = note.getAttribute("data-seqnotes-goto-diagram");
+    return other === null ? svgOf(note) : root.querySelector(`svg[data-seqnotes-diagram="${CSS.escape(other)}"]`);
+  };
+  const notesTo = (svg2, name) => {
+    const id = svg2.getAttribute("data-seqnotes-diagram");
+    return byAttr(root, "data-seqnotes-goto", name).filter((n) => {
+      const other = n.getAttribute("data-seqnotes-goto-diagram");
+      return other === null ? svgOf(n) === svg2 : other === id;
+    });
+  };
   function clearHover() {
     hovered.forEach((el) => el.classList.remove(HOVER));
     hovered = [];
@@ -25761,22 +25989,26 @@ function setupNoteJumps(root, { scroll, pin, signal }) {
     }
   }
   function jump(from, keyboard) {
-    const svg2 = svgOf(from);
+    const svg2 = targetSvg(from);
     const name = from.getAttribute("data-seqnotes-goto");
     const anchor = svg2 && name !== null ? byAttr(svg2, "data-seqnotes-anchor", name)[0] : void 0;
     if (!svg2 || name === null || !anchor) {
       return;
     }
+    const target = anchor.getAttribute("data-seqnotes-first-target");
+    const pair = anchor.closest(".seqnotes-pair");
+    const sideBySide = pair !== null && isSideBySide(pair);
+    if (sideBySide && svg2 !== svgOf(from)) {
+      scroll.reveal(pair, "start", "auto");
+    }
     scrollColumnTo(anchor, true, scroll);
     const branch = byAttr(svg2, "data-seqnotes-branch", name)[0];
     flash(branch ?? anchor);
     if (branch) {
       flash(anchor);
     }
-    const target = anchor.getAttribute("data-seqnotes-first-target");
-    const pair = anchor.closest(".seqnotes-pair");
     if (target !== null && pair) {
-      pin({ pair, target, kind: "message" }, isSideBySide(pair));
+      pin({ pair, target, kind: "message" }, sideBySide);
     }
     showBack(anchor, from);
     if (keyboard) {
@@ -25789,7 +26021,7 @@ function setupNoteJumps(root, { scroll, pin, signal }) {
     if (!svg2 || name === null) {
       return;
     }
-    const notes = byAttr(svg2, "data-seqnotes-goto", name);
+    const notes = notesTo(svg2, name);
     if (notes.length === 0) {
       return;
     }
@@ -25821,8 +26053,9 @@ function setupNoteJumps(root, { scroll, pin, signal }) {
       }
       const goto = el.getAttribute("data-seqnotes-goto");
       const name = goto ?? el.getAttribute("data-seqnotes-anchor");
-      const related = [...byAttr(svg2, "data-seqnotes-anchor", name), ...goto !== null ? [] : byAttr(svg2, "data-seqnotes-goto", name)];
-      hovered = [el, ...related, ...byAttr(svg2, "data-seqnotes-branch", name)];
+      const labelSvg = goto !== null ? targetSvg(el) : svg2;
+      const related = labelSvg ? [...byAttr(labelSvg, "data-seqnotes-anchor", name), ...byAttr(labelSvg, "data-seqnotes-branch", name)] : [];
+      hovered = [el, ...related, ...goto !== null ? [] : notesTo(svg2, name)];
       hovered.forEach((r) => r.classList.add(HOVER));
     },
     { signal }
@@ -26128,46 +26361,14 @@ function createPreview(ctx) {
     el.classList.toggle("seqnotes-wide", previewWidth() >= splitMinWidth);
   }
   const stopResize = scroll.onResize(applyLayout);
-  const MIN_SPLIT = 20;
-  const MAX_SPLIT = 80;
   function setSplit(percent) {
-    const style = el.style;
-    if (percent === void 0) {
-      style.removeProperty("--seqnotes-split");
-    } else {
-      percent = Math.min(MAX_SPLIT, Math.max(MIN_SPLIT, percent));
-      style.setProperty("--seqnotes-split", `${percent}%`);
-    }
+    const split = applySplit(el, percent);
     const state = ctx.getState();
     if (state) {
-      ctx.setState({ ...state, split: percent });
+      ctx.setState({ ...state, split });
     }
   }
   setSplit(ctx.getState()?.split);
-  function addSplitter(pair) {
-    const splitter = document.createElement("div");
-    splitter.className = "seqnotes-splitter";
-    splitter.title = titles.seqnotesSplitterTitle ?? "";
-    pair.querySelector(".seqnotes-seq-col")?.after(splitter);
-    splitter.addEventListener("pointerdown", (e) => {
-      e.preventDefault();
-      splitter.setPointerCapture(e.pointerId);
-      const move = (ev) => {
-        const r = pair.getBoundingClientRect();
-        setSplit((ev.clientX - r.left) / r.width * 100);
-      };
-      const up = () => {
-        splitter.removeEventListener("pointermove", move);
-        splitter.removeEventListener("pointerup", up);
-      };
-      splitter.addEventListener("pointermove", move);
-      splitter.addEventListener("pointerup", up);
-    });
-    splitter.addEventListener("dblclick", (e) => {
-      e.stopPropagation();
-      setSplit(void 0);
-    });
-  }
   let previewTheme = titles.seqnotesTheme === "light" || titles.seqnotesTheme === "dark" ? titles.seqnotesTheme : "auto";
   function isVscodeDark() {
     return !el.classList.contains("vscode-light") && !el.classList.contains("vscode-high-contrast-light");
@@ -26280,8 +26481,13 @@ ${source}`;
     } else {
       const unused = [...meta.messages];
       assigned = groups.map((group) => {
-        const label = normalizeLabel(group.slice(0, -1).map((t) => t.textContent ?? "").join(" "));
-        const i = unused.findIndex((m) => normalizeLabel(m.text) === label);
+        const lines = group.slice(0, -1).map((t) => t.textContent ?? "");
+        const label = normalizeLabel(lines.join(" "));
+        const compact = compactLabel(lines.join(""));
+        let i = unused.findIndex((m) => normalizeLabel(m.text) === label);
+        if (i < 0) {
+          i = unused.findIndex((m) => compactLabel(m.text) === compact);
+        }
         return i >= 0 ? unused.splice(i, 1)[0] : void 0;
       });
     }
@@ -26463,7 +26669,7 @@ ${source}`;
     root.querySelectorAll(".seqnotes-pair").forEach((pair2) => {
       wrapSections(pair2);
       if (!pair2.classList.contains("seqnotes-pair-stacked")) {
-        addSplitter(pair2);
+        addSplitter(pair2, titles.seqnotesSplitterTitle ?? "", setSplit, signal);
       }
     });
     setUpWarnings();
@@ -27218,7 +27424,7 @@ function fetchFrom(baseUrl) {
     }
   };
 }
-var CONTENT_OPTIONS = ["markdown", "baseUrl", "readFile", "resolveResource", "frontMatter", "headingNumbers"];
+var CONTENT_OPTIONS = ["markdown", "baseUrl", "readFile", "resolveResource", "frontMatter", "headingNumbers", "messageWrapWidth"];
 var VIEW_OPTIONS = ["documentId", "splitMinWidth", "toc", "diagramLook", "limitContentWidth", "stickyTableHeader", "tableTreeHighlight"];
 function createViewer(container, options) {
   let current = { ...options };
@@ -27306,7 +27512,7 @@ function createViewer(container, options) {
       return;
     }
     pending = false;
-    html2 = renderDocument(md, markdown, { t, frontMatter: current.frontMatter, headingNumbers: current.headingNumbers, wireframes: wireframes2, resolveResource });
+    html2 = renderDocument(md, markdown, { t, frontMatter: current.frontMatter, headingNumbers: current.headingNumbers, messageWrapWidth: current.messageWrapWidth, wireframes: wireframes2, resolveResource });
     await show(html2);
   }
   rendering = render();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-design-doc-viewer-embed",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "The viewer of Markdown Design Doc Viewer to embed in a web app (React or not): design documents in Markdown with their mermaid sequence diagrams, flowcharts, ER and state diagrams and wireframes linked to the steps after them.",
   "license": "MIT",
   "repository": {

package/react.js

@@ -26,14 +26,14 @@ var DesignDocViewer = forwardRef(function DesignDocViewer2({ className, style, .
       viewer.current = void 0;
     };
   }, [options.lang]);
-  const { markdown, documentId, baseUrl, readFile, resolveResource, theme, diagramLook, splitMinWidth, toc, limitContentWidth, stickyTableHeader, tableTreeHighlight, frontMatter, headingNumbers } = options;
+  const { markdown, documentId, baseUrl, readFile, resolveResource, theme, diagramLook, splitMinWidth, toc, limitContentWidth, stickyTableHeader, tableTreeHighlight, frontMatter, headingNumbers, messageWrapWidth } = options;
   useEffect(() => {
     if (created.current) {
       created.current = false;
       return;
     }
     void viewer.current?.update(viewerOptions());
-  }, [options.lang, markdown, documentId, baseUrl, readFile, resolveResource, theme, diagramLook, splitMinWidth, toc, limitContentWidth, stickyTableHeader, tableTreeHighlight, frontMatter, headingNumbers, revealing]);
+  }, [options.lang, markdown, documentId, baseUrl, readFile, resolveResource, theme, diagramLook, splitMinWidth, toc, limitContentWidth, stickyTableHeader, tableTreeHighlight, frontMatter, headingNumbers, messageWrapWidth, revealing]);
   useImperativeHandle(ref, () => ({
     scrollToLine: (line) => viewer.current?.scrollToLine(line),
     markLine: (line) => viewer.current?.markLine(line)

package/types/embed/viewer.d.ts

@@ -40,6 +40,11 @@ export interface ViewerOptions {
     frontMatter?: boolean;
     /** Shows the `autonumber` numbers on the linked headings. true by default. */
     headingNumbers?: boolean;
+    /**
+     * Breaks the labels of the arrows of the sequence diagrams into lines at this many characters (a full-width one
+     * counts as 2). 0 does not break them. 30 by default.
+     */
+    messageWrapWidth?: number;
     /**
      * Opens a link of the document (other than `#heading`, which the viewer scrolls to). By default, http(s) and mailto
      * links open in a new tab, and the others do nothing.

package/viewer.css

@@ -1076,6 +1076,12 @@ html:has(> body[data-seqnotes-theme=dark]:is(.vscode-light, .vscode-high-contras
 .seqnotes-viewer.seqnotes-wide .seqnotes-splitter:active::after {
   background: var(--vscode-sash-hoverBorder, var(--seqnotes-accent));
 }
+.seqnotes-viewer.seqnotes-wide .seqnotes-splitter:focus {
+  outline: none;
+}
+.seqnotes-viewer.seqnotes-wide .seqnotes-splitter:focus-visible::after {
+  background: var(--vscode-focusBorder, var(--seqnotes-accent));
+}
 .seqnotes-viewer.seqnotes-wide .seqnotes-pair:not(.seqnotes-pair-stacked) > .seqnotes-seq-col {
   align-self: start;
   position: sticky;