npm - @zenuml/core - Versions diffs - 3.46.4 → 3.46.5 - Mend

@zenuml/core 3.46.4 → 3.46.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/.claude/skills/babysit-pr/SKILL.md +203 -0
package/.claude/skills/babysit-pr/agents/openai.yaml +7 -0
package/.claude/skills/dia-scoring/SKILL.md +1 -1
package/.claude/skills/propagate-core-release/SKILL.md +200 -0
package/.claude/skills/propagate-core-release/agents/openai.yaml +7 -0
package/.claude/skills/propagate-core-release/references/downstreams.md +41 -0
package/dist/stats.html +1 -1
package/dist/zenuml.esm.mjs +3 -3
package/dist/zenuml.js +3 -3
package/docs/superpowers/plans/2026-03-27-e2e-test-reorg.md +698 -0
package/{cy → e2e/data}/compare-cases.js +70 -37
package/{cy/smoke-editable-label.html → e2e/fixtures/editable-label.html} +1 -1
package/{cy/editable-span-test.html → e2e/fixtures/editable-span.html} +1 -1
package/e2e/fixtures/fixture.html +31 -0
package/{cy → e2e/tools}/canonical-history.html +1 -1
package/{cy → e2e/tools}/compare-case.html +3 -3
package/{cy → e2e/tools}/compare.html +2 -2
package/{cy → e2e/tools}/native-diff-ext/content.js +2 -2
package/firebase-debug.log +108 -0
package/index.html +2 -2
package/mermaid-zenuml-async-spa-auth.png +0 -0
package/mermaid-zenuml-async-spa-auth.snapshot.md +96 -0
package/package.json +1 -1
package/scripts/analyze-compare-case/collect-data.mjs +1 -1
package/scripts/analyze-compare-case.mjs +1 -1
package/skills/dia-scoring/SKILL.md +1 -1
package/vite.config.ts +5 -5
package/cy/async-message-1.html +0 -32
package/cy/async-message-2.html +0 -46
package/cy/async-message-3.html +0 -41
package/cy/creation-rtl.html +0 -28
package/cy/defect-406-alt-under-creation.html +0 -40
package/cy/demo1.html +0 -28
package/cy/demo3.html +0 -28
package/cy/demo4.html +0 -28
package/cy/element-report.html +0 -705
package/cy/fragments-with-return.html +0 -35
package/cy/icons-test.html +0 -29
package/cy/if-fragment.html +0 -28
package/cy/legacy-vs-html.html +0 -291
package/cy/named-parameters.html +0 -30
package/cy/nested-interaction-with-fragment.html +0 -34
package/cy/nested-interaction-with-outbound.html +0 -34
package/cy/parity-test.html +0 -122
package/cy/return-in-nested-if.html +0 -29
package/cy/return.html +0 -38
package/cy/self-sync-message-at-root.html +0 -28
package/cy/smoke-creation.html +0 -26
package/cy/smoke-fragment-issue.html +0 -36
package/cy/smoke-fragment.html +0 -42
package/cy/smoke-interaction.html +0 -34
package/cy/smoke.html +0 -40
package/cy/theme-default-test.html +0 -28
package/cy/vertical-1.html +0 -25
package/cy/vertical-10.html +0 -33
package/cy/vertical-11.html +0 -29
package/cy/vertical-2.html +0 -23
package/cy/vertical-3.html +0 -37
package/cy/vertical-4.html +0 -42
package/cy/vertical-5.html +0 -40
package/cy/vertical-6.html +0 -29
package/cy/vertical-7.html +0 -27
package/cy/vertical-8.html +0 -32
package/cy/vertical-9.html +0 -25
package/cy/xss.html +0 -21
/package/{cy → e2e/data}/diff-algorithm.js +0 -0
/package/{cy → e2e/fixtures}/svg-test.html +0 -0
/package/{cy → e2e/tools}/native-diff-ext/background.js +0 -0
/package/{cy → e2e/tools}/native-diff-ext/bridge.js +0 -0
/package/{cy → e2e/tools}/svg-preview.html +0 -0

package/cy/fragments-with-return.html DELETED Viewed

@@ -1,35 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>If-Else and Try-Catch with Return</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-A.method {
-  if(x) {
-    return x
-  } else {
-    return y
-  }
-  try {
-    return 1
-  } catch {
-    return 2
-  } finally {
-    return 3
-  }
-}</pre>
-    </div>
-    <script type="module" src="/src/main-cy.ts"></script>
-  </body>
-</html>

package/cy/icons-test.html DELETED Viewed

@@ -1,29 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>Icons Test</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-@Actor User
-@Database DB &lt;&lt;database&gt;&gt;
-@Queue MQ &lt;&lt;sqs&gt;&gt;
-User.login() {
-  DB.verify()
-  MQ.enqueue()
-}
-      </pre>
-    </div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

package/cy/if-fragment.html DELETED Viewed

@@ -1,28 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>vue-sequence smoke 1</title>
-    <style>
-      body {
-        margin: 0; /* mostly for demo on mobile */
-      }
-    </style>
-  </head>
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-        title Issue 232 - wrong layout for if-fragment
-        Client -> Server:SendRequest
-if(true){
-  Server -> Server: processRequest
-}</pre
-      >
-    </div>
-    <!-- built files will be auto injected -->
-    <script type="module" src="/src/main-cy.ts"></script>
-  </body>
-</html>

package/cy/legacy-vs-html.html DELETED Viewed

@@ -1,291 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Legacy vs HTML Vertical Mode</title>
-    <style>
-      body { margin: 0; font-family: system-ui, sans-serif; }
-      .page-header { padding: 8px 16px; background: #1e293b; color: white; display: flex; gap: 12px; align-items: center; }
-      .page-header h2 { margin: 0; font-size: 14px; font-weight: 600; }
-      .nav { display: flex; gap: 8px; margin-left: auto; align-items: center; }
-      .nav a { color: #93c5fd; text-decoration: none; font-size: 12px; padding: 4px 10px; background: #334155; border-radius: 4px; }
-      .nav a:hover { text-decoration: underline; }
-      .nav a.hidden { visibility: hidden; }
-      .container { display: flex; gap: 0; }
-      .panel { flex: 1; overflow: auto; border-right: 1px solid #e2e8f0; }
-      .panel:last-child { border-right: none; }
-      .panel-header { padding: 6px 12px; background: #334155; color: white; font-size: 13px; font-weight: 600; }
-      .panel-content { padding: 0; background: white; }
-      .panel-info { padding: 8px 12px; background: #f1f5f9; font-size: 12px; font-family: monospace; color: #475569; border-top: 1px solid #e2e8f0; }
-      .delta { padding: 8px 16px; font-size: 13px; font-family: monospace; display: none; }
-    </style>
-  </head>
-  <body>
-    <div class="page-header">
-      <h2 id="case-name">Vertical Mode Comparison</h2>
-      <div class="nav">
-        <a id="prev-link" href="#">&larr; Prev</a>
-        <a id="next-link" href="#">Next &rarr;</a>
-      </div>
-    </div>
-    <div id="delta-bar" class="delta"></div>
-    <div class="container">
-      <div class="panel">
-        <div class="panel-header">HTML Mode (VerticalCoordinates)</div>
-        <div class="panel-content" id="html-output"></div>
-        <div class="panel-info" id="html-info">Loading...</div>
-      </div>
-      <div class="panel">
-        <div class="panel-header">Legacy Mode (DOM Measurement)</div>
-        <div class="panel-content" id="legacy-output"></div>
-        <div class="panel-info" id="legacy-info">Loading...</div>
-      </div>
-    </div>
-    <script type="module">
-      import ZenUml from "/src/core.tsx";
-      const CASES = {
-        "return-in-nested-if": `A.m {
-  if (condition) {
-    return ret
-    if(x) {
-      new B
-    }
-  }
-}`,
-        "vertical-1": `// red
-// green
-a = A.m111
-new E`,
-        "vertical-2": `// [red]
-new B`,
-        "vertical-3": `if(x) {
-  // comment
-  new A
-} else {
-  new B
-}
-new C
-try {
-  new D
-} catch {
-  par {
-    new E
-    new F
-  }
-}`,
-        "vertical-4": `if(x) {
-  // comment
-  new A
-} else {
-  new B
-}
-new C
-try {
-  new D
-} catch {
-  par {
-    new E
-    new F
-    if(x) {
-      new X
-    } else {
-      new Y
-    }
-  }
-}`,
-        "vertical-5": `par {
-  new F
-  if(x) {
-    new X
-  } else {
-    try {
-      new Y
-    } catch {
-      par {
-        new G
-        if(x) {
-          new H
-        } else {
-          new I
-        }
-      }
-    }
-  }
-}`,
-        "vertical-6": `new a
-if(x) {
-	new b
-} else {
-	new c
-	new e
-}
-new D`,
-        "vertical-7": `A.method
-section(){
-    new B
-}`,
-        "vertical-8": `new Creation() {
-  return from_creation
-}
-return "from if to original source"
-try {
-  new AHasAVeryLongNameLongNameLongNameLongName() {
-    new CreatWithinCreat()
-  }
-}`,
-        "vertical-9": `A0->A0: self
-new A`,
-        "vertical-10": `new E
-E.messageA()
-new A {
-  if (x) {
-    new D
-  }
-  new B {
-    new C
-  }
-}`,
-        "vertical-11": `A.call {
-  // pre creation
-  A->B: prep
-  a = new A()
-  a->B: post
-}`,
-      };
-      const caseNames = Object.keys(CASES);
-      const params = new URLSearchParams(window.location.search);
-      const caseName = params.get("case") || caseNames[0];
-      const code = CASES[caseName];
-      // Update title
-      document.title = `Legacy vs HTML: ${caseName}`;
-      document.getElementById("case-name").textContent = caseName;
-      // Prev/Next navigation
-      const idx = caseNames.indexOf(caseName);
-      const prevLink = document.getElementById("prev-link");
-      const nextLink = document.getElementById("next-link");
-      if (idx > 0) {
-        prevLink.href = `?case=${encodeURIComponent(caseNames[idx - 1])}`;
-      } else {
-        prevLink.classList.add("hidden");
-      }
-      if (idx < caseNames.length - 1) {
-        nextLink.href = `?case=${encodeURIComponent(caseNames[idx + 1])}`;
-      } else {
-        nextLink.classList.add("hidden");
-      }
-      if (code === undefined) {
-        const errP = document.createElement("p");
-        errP.style.color = "red";
-        errP.textContent = "Unknown case: " + caseName;
-        document.getElementById("html-output").appendChild(errP);
-      } else {
-        function createPanel(containerId, mode) {
-          const container = document.getElementById(containerId);
-          const pre = document.createElement("pre");
-          pre.className = "zenuml";
-          pre.style.margin = "0";
-          pre.textContent = code;
-          container.appendChild(pre);
-          const zenUml = new ZenUml(pre);
-          zenUml.setVerticalMode(mode);
-          zenUml.render(code, { theme: "theme-default" });
-          return zenUml;
-        }
-        function measureCreationParticipants(containerId) {
-          const container = document.getElementById(containerId);
-          const diagram = container.querySelector(".sequence-diagram");
-          if (!diagram) return {};
-          // Hide footer
-          const footer = container.querySelector(".footer");
-          if (footer) footer.style.display = "none";
-          const dRect = diagram.getBoundingClientRect();
-          const results = {};
-          container.querySelectorAll("[data-participant-id]").forEach(el => {
-            const name = el.getAttribute("data-participant-id");
-            // Check if this is a creation participant (lifeline paddingTop > 20)
-            const lifeline = container.querySelector(`[id="${name}"]`);
-            const pt = lifeline ? parseFloat(lifeline.style.paddingTop) : 0;
-            if (pt > 20) {
-              const rect = el.getBoundingClientRect();
-              results[name] = Math.round(rect.top - dRect.top);
-            }
-          });
-          return results;
-        }
-        // Render both panels
-        createPanel("html-output", "html");
-        createPanel("legacy-output", "legacy");
-        // Poll until both panels have .sequence-diagram, then measure
-        const poll = setInterval(() => {
-          const htmlDiag = document.querySelector('#html-output .sequence-diagram');
-          const legacyDiag = document.querySelector('#legacy-output .sequence-diagram');
-          if (!htmlDiag || !legacyDiag) return;
-          clearInterval(poll);
-          setTimeout(() => {
-            const htmlPositions = measureCreationParticipants("html-output");
-            const legacyPositions = measureCreationParticipants("legacy-output");
-            const allNames = new Set([...Object.keys(htmlPositions), ...Object.keys(legacyPositions)]);
-            if (allNames.size === 0) {
-              document.getElementById("html-info").textContent = "No creation participants";
-              document.getElementById("legacy-info").textContent = "No creation participants";
-              const bar = document.getElementById("delta-bar");
-              bar.style.display = "block";
-              bar.textContent = "No creation participants in this case";
-              bar.style.background = "#e2e8f0";
-              bar.style.color = "#475569";
-              return;
-            }
-            const htmlLines = [];
-            const legacyLines = [];
-            const deltaLines = [];
-            let allMatch = true;
-            for (const name of allNames) {
-              const h = htmlPositions[name];
-              const l = legacyPositions[name];
-              htmlLines.push(`${name}: ${h != null ? h + 'px' : 'n/a'}`);
-              legacyLines.push(`${name}: ${l != null ? l + 'px' : 'n/a'}`);
-              if (h != null && l != null) {
-                const delta = l - h;
-                if (delta !== 0) allMatch = false;
-                deltaLines.push(`${name}: ${delta === 0 ? 'identical' : delta + 'px'} (html=${h}, legacy=${l})`);
-              }
-            }
-            document.getElementById("html-info").textContent = htmlLines.join(' | ');
-            document.getElementById("legacy-info").textContent = legacyLines.join(' | ');
-            const bar = document.getElementById("delta-bar");
-            bar.style.display = "block";
-            bar.textContent = allMatch
-              ? `All creation participants identical`
-              : deltaLines.join(' | ');
-            bar.style.background = allMatch ? "#d1fae5" : "#fef3c7";
-            bar.style.color = allMatch ? "#065f46" : "#92400e";
-            console.info("[Parity] %s: %s", caseName, allMatch ? "all identical" : deltaLines.join(", "));
-          }, 500);
-        }, 100);
-      }
-    </script>
-  </body>
-</html>

package/cy/named-parameters.html DELETED Viewed

@@ -1,30 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>Named Parameters Test</title>
-    <style>
-      body {
-        margin: 0; /* mostly for demo on mobile */
-      }
-    </style>
-  </head>
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-title Named Parameters Test
-// Testing named parameter syntax (param=value)
-A.method(userId=123, name="John")
-B.create(type="User", active=true)
-C.mixedCall(1, name="Mixed", enabled=false)
-D.oldStyle(1, 2, 3)
-E.complex(first="value1", second=42, third=true, fourth="final")
-</pre
-      >
-    </div>
-    <!-- built files will be auto injected -->
-    <script type="module" src="/src/main-cy.ts"></script>
-  </body>
-</html>

package/cy/nested-interaction-with-fragment.html DELETED Viewed

@@ -1,34 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>Nested Interaction with Fragment Test</title>
-    <style>
-      body {
-        margin: 0; /* mostly for demo on mobile */
-      }
-    </style>
-  </head>
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-        title Nested Interaction with Fragment and Self-Invocation
-        A.Read() {
-          B.Submit() {
-            Process() {
-              if (true) {
-                ProcessCallback() {
-                  A.method
-                }
-              }
-            }
-          }
-        }</pre
-      >
-    </div>
-    <!-- built files will be auto injected -->
-    <script type="module" src="/src/main-cy.ts"></script>
-  </body>
-</html>

package/cy/nested-interaction-with-outbound.html DELETED Viewed

@@ -1,34 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>Nested Interaction with Outbound Message and Fragment Test</title>
-    <style>
-      body {
-        margin: 0; /* mostly for demo on mobile */
-      }
-    </style>
-  </head>
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-        title Nested Interaction with Outbound Message and Fragment
-        A.Read() {
-          B.Submit() {
-            C->B.method {
-              if (true) {
-                ProcessCallback() {
-                  A.method
-                }
-              }
-            }
-          }
-        }</pre
-      >
-    </div>
-    <!-- built files will be auto injected -->
-    <script type="module" src="/src/main-cy.ts"></script>
-  </body>
-</html>

package/cy/parity-test.html DELETED Viewed

@@ -1,122 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>SVG Parity Test - Side by Side</title>
-    <style>
-      body { margin: 0; font-family: sans-serif; }
-      .controls { padding: 10px; background: #1e293b; color: white; display: flex; gap: 16px; align-items: center; }
-      .controls select, .controls button { font-size: 14px; padding: 4px 8px; }
-      .container { display: flex; gap: 0; }
-      .panel { flex: 1; overflow: auto; }
-      .panel h3 { margin: 0; padding: 8px 16px; background: #334155; color: white; font-size: 13px; }
-      .panel-content { padding: 10px; background: white; }
-    </style>
-  </head>
-  <body>
-    <div class="controls">
-      <label>Test case: </label>
-      <select id="case-select"></select>
-    </div>
-    <div class="container">
-      <div class="panel">
-        <h3>HTML/React Renderer (theme-default)</h3>
-        <div class="panel-content" id="html-output">
-          <div id="diagram"><pre class="zenuml" style="margin: 0">A -> B: hello</pre></div>
-        </div>
-      </div>
-      <div class="panel">
-        <h3>Native SVG Renderer (theme-default)</h3>
-        <div class="panel-content" id="svg-output"></div>
-      </div>
-    </div>
-    <script type="module">
-      import ZenUml from "/src/core.tsx";
-      import { renderToSvg } from "/src/svg/renderToSvg.ts";
-      const CASES = {
-        "simple-messages": `A -> B: hello
-B -> C: process
-C -> B: result
-B -> A: done`,
-        "self-call": `A.method() {
-  B.method
-}`,
-        "fragment-if": `A -> B: request
-if(condition) {
-  B -> C: process
-} else {
-  B -> D: fallback
-}`,
-        "fragment-loop": `A -> B: request
-loop(condition) {
-  B -> C: process
-}`,
-        "fragment-tcf": `A.method {
-  try {
-    B.process
-  } catch(error) {
-    C.handle
-  } finally {
-    D.cleanup
-  }
-}`,
-        "creation": `A.m {
-  new B(1,2,3)
-}`,
-        "return": `A B C
-A->B.method() {
-  C.call {
-    return result
-  }
-  return done
-}`,
-        "async": `A->B: async
-B->C: async
-C->A: async`,
-        "nested": `A.Read() {
-  B.Submit() {
-    Process() {
-      if (true) {
-        ProcessCallback() {
-          A.method
-        }
-      }
-    }
-  }
-}`,
-      };
-      const select = document.getElementById("case-select");
-      const svgOutput = document.getElementById("svg-output");
-      const htmlEl = document.querySelector("pre.zenuml");
-      let zenUml;
-      for (const name of Object.keys(CASES)) {
-        const opt = document.createElement("option");
-        opt.value = name;
-        opt.textContent = name;
-        select.appendChild(opt);
-      }
-      async function render(name) {
-        const code = CASES[name];
-        // SVG side
-        const result = renderToSvg(code);
-        svgOutput.innerHTML = result.svg;
-        // HTML side - recreate ZenUml instance
-        const diagram = document.getElementById("diagram");
-        diagram.innerHTML = '<pre class="zenuml" style="margin: 0">' + code + '</pre>';
-        const pre = diagram.querySelector("pre.zenuml");
-        zenUml = new ZenUml(pre);
-        await zenUml.render(code, { theme: "theme-default" });
-      }
-      select.addEventListener("change", () => render(select.value));
-      render(select.value);
-    </script>
-  </body>
-</html>

package/cy/return-in-nested-if.html DELETED Viewed

@@ -1,29 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>Return in Nested If</title>
-    <style>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-A.m {
-  if (condition) {
-    return ret
-    if(x) {
-      new B
-    }
-  }
-}
-      </pre>
-    </div>
-    <script type="module" src="/src/main-cy.ts"></script>
-  </body>
-</html>

package/cy/return.html DELETED Viewed

@@ -1,38 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>vue-sequence smoke 1</title>
-    <style>
-      body {
-        margin: 0; /* mostly for demo on mobile */
-      }
-    </style>
-  </head>
-  <body>
-    <div id="diagram" class="diagram">
-      <pre class="zenuml" style="margin: 0">
-A B C D
-A->B.method() {
-  ret0_assign_rtl =C.method_long_to_give_space {
-    @return C->D: ret1_annotation_ltr
-    ret5_assign_ltr = B.method
-    B.method2 {
-      return ret2_return_ltr
-    }
-  }
-  return ret2_return_rtl
-  @return B->A: ret4_annotation_rtl
-}
-</pre
-      >
-    </div>
-    <!-- built files will be auto injected -->
-    <script type="module" src="/src/main-cy.ts"></script>
-  </body>
-</html>