npm - @zenuml/core - Versions diffs - 3.46.0 → 3.46.1 - Mend

@zenuml/core 3.46.0 → 3.46.1

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 (55) hide show

package/.claude/skills/dia-scoring/SKILL.md +139 -0
package/.claude/skills/dia-scoring/agents/openai.yaml +7 -0
package/.claude/skills/dia-scoring/references/selectors-and-keys.md +253 -0
package/CLAUDE.md +1 -1
package/bun.lock +25 -11
package/cy/canonical-history.html +908 -0
package/cy/compare-case.html +357 -0
package/cy/compare-cases.js +824 -0
package/cy/compare.html +35 -0
package/cy/diff-algorithm.js +199 -0
package/cy/element-report.html +705 -0
package/cy/icons-test.html +29 -0
package/cy/legacy-vs-html.html +291 -0
package/cy/native-diff-ext/background.js +60 -0
package/cy/native-diff-ext/bridge.js +26 -0
package/cy/native-diff-ext/content.js +194 -0
package/cy/parity-test.html +122 -0
package/cy/return-in-nested-if.html +29 -0
package/cy/svg-preview.html +56 -0
package/cy/svg-test.html +21 -0
package/cy/theme-default-test.html +28 -0
package/dist/stats.html +1 -1
package/dist/zenuml.esm.mjs +16352 -15223
package/dist/zenuml.js +701 -575
package/docs/superpowers/plans/2026-03-23-svg-parity-features.md +283 -0
package/index.html +568 -73
package/package.json +15 -4
package/scripts/analyze-compare-case/collect-data.mjs +991 -0
package/scripts/analyze-compare-case/config.mjs +102 -0
package/scripts/analyze-compare-case/geometry.mjs +101 -0
package/scripts/analyze-compare-case/native-diff.mjs +224 -0
package/scripts/analyze-compare-case/output.mjs +74 -0
package/scripts/analyze-compare-case/panel-diff.mjs +114 -0
package/scripts/analyze-compare-case/report.mjs +157 -0
package/scripts/analyze-compare-case/residual-scopes.mjs +325 -0
package/scripts/analyze-compare-case/scoring.mjs +816 -0
package/scripts/analyze-compare-case.mjs +149 -0
package/scripts/snapshot-dual.js +34 -34
package/skills/dia-scoring/SKILL.md +129 -0
package/skills/dia-scoring/agents/openai.yaml +7 -0
package/skills/dia-scoring/references/selectors-and-keys.md +253 -0
package/test-setup.ts +8 -0
package/types/index.d.ts +56 -0
package/vite.config.ts +4 -0
package/dist/10029-icon-service-Function-Apps-ObflOLuF.js +0 -5
package/dist/Res_AWS-Identity-Access-Management_IAM-Access-Analyzer_48-BPq60XMY.js +0 -11
package/dist/Res_AWS-Lambda_Lambda-Function_48-Co38UB_2.js +0 -12
package/dist/Res_Amazon-EC2_Instance_48-CRaqbNUl.js +0 -12
package/dist/Res_Amazon-Simple-Notification-Service_Topic_48-q13mxUeM.js +0 -11
package/dist/Res_Amazon-Simple-Queue-Service_Queue_48-D2-8gbFw.js +0 -11
package/dist/Robustness_Diagram_Boundary-nYnmTPs8.js +0 -10
package/dist/Robustness_Diagram_Control-DLNLoMxd.js +0 -11
package/dist/Robustness_Diagram_Entity-Be3kcbIE.js +0 -11
package/dist/actor-BMj_HFpo.js +0 -11
package/dist/database-BKHQQWQK.js +0 -8

package/cy/icons-test.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!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/legacy-vs-html.html ADDED Viewed

@@ -0,0 +1,291 @@
+<!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/native-diff-ext/background.js ADDED Viewed

@@ -0,0 +1,60 @@
+// Background service worker: uses chrome.debugger + CDP for element screenshots
+chrome.action.onClicked.addListener(async (tab) => {
+  if (!tab.url || !tab.url.includes("compare-case.html")) return;
+  try {
+    const response = await chrome.tabs.sendMessage(tab.id, { action: "native-diff" });
+    console.log("[native-diff-ext bg]", response?.error || `Done: ${response?.pixelPct}%`);
+  } catch (err) {
+    console.error("[native-diff-ext bg] Failed:", err);
+  }
+});
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  if (msg.action === "cdp-screenshot") {
+    cdpScreenshot(sender.tab.id, msg.selector)
+      .then((dataUrl) => sendResponse({ dataUrl }))
+      .catch((err) => sendResponse({ error: err.message }));
+    return true;
+  }
+});
+// Take a single element screenshot
+async function cdpScreenshot(tabId, selector) {
+  const target = { tabId };
+  try {
+    await chrome.debugger.attach(target, "1.3");
+    const { root } = await cdp(target, "DOM.getDocument", {});
+    return await screenshotNode(target, root.nodeId, selector);
+  } finally {
+    try { await chrome.debugger.detach(target); } catch (_) {}
+  }
+}
+async function screenshotNode(target, rootNodeId, selector) {
+  const { nodeId } = await cdp(target, "DOM.querySelector", {
+    nodeId: rootNodeId,
+    selector,
+  });
+  if (!nodeId) throw new Error(`Element not found: ${selector}`);
+  const { model } = await cdp(target, "DOM.getBoxModel", { nodeId });
+  const border = model.border;
+  const x = border[0];
+  const y = border[1];
+  const width = Math.ceil(border[2] - border[0]);
+  const height = Math.ceil(border[5] - border[1]);
+  const { data } = await cdp(target, "Page.captureScreenshot", {
+    format: "png",
+    clip: { x, y, width, height, scale: 1 },
+    captureBeyondViewport: true,
+  });
+  return "data:image/png;base64," + data;
+}
+function cdp(target, method, params) {
+  return chrome.debugger.sendCommand(target, method, params);
+}

package/cy/native-diff-ext/bridge.js ADDED Viewed

@@ -0,0 +1,26 @@
+// Bridge script: runs in ISOLATED world
+// Relays messages between content.js (MAIN world) and background.js (service worker)
+// Content.js → bridge → background.js: screenshot requests
+window.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "native-diff-screenshot") {
+    console.log("[native-diff-ext bridge] Screenshot request:", event.data.selector);
+    chrome.runtime.sendMessage(
+      { action: "cdp-screenshot", selector: event.data.selector },
+      (response) => {
+        window.postMessage({
+          type: "native-diff-screenshot-response",
+          dataUrl: response?.dataUrl,
+          error: response?.error,
+        }, "*");
+      }
+    );
+  }
+});
+// Icon click → content.js: trigger diff
+chrome.runtime.onMessage.addListener((msg) => {
+  if (msg.action === "native-diff") {
+    window.postMessage({ type: "native-diff-trigger" }, "*");
+  }
+});

package/cy/native-diff-ext/content.js ADDED Viewed

@@ -0,0 +1,194 @@
+// Content script: runs in MAIN world (has access to page's window functions)
+// Uses CDP element screenshots via bridge.js → background.js
+// Hides neighboring panels before each screenshot to prevent overlap.
+//
+// Diff algorithm lives in cy/diff-algorithm.js, loaded by compare-case.html
+// and exposed as window.diffFromImages. This script only handles screenshots
+// and orchestration.
+// Auto-run on page load
+window.addEventListener("load", () => {
+  console.log("[native-diff-ext] Page loaded, waiting 1s for renderers...");
+  setTimeout(() => {
+    console.log("[native-diff-ext] Starting native diff...");
+    runNativeDiff();
+  }, 1000);
+});
+// Icon click trigger from bridge.js
+window.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "native-diff-trigger") {
+    console.log("[native-diff-ext] Triggered by icon click");
+    runNativeDiff();
+  }
+});
+// Request a single CDP element screenshot via bridge
+function screenshotOne(selector) {
+  return new Promise((resolve) => {
+    function handler(event) {
+      if (event.data && event.data.type === "native-diff-screenshot-response") {
+        window.removeEventListener("message", handler);
+        resolve(event.data);
+      }
+    }
+    window.addEventListener("message", handler);
+    window.postMessage({ type: "native-diff-screenshot", selector }, "*");
+  });
+}
+async function runNativeDiff() {
+  if (typeof window.prepareHtmlForCapture !== "function") {
+    console.error("[native-diff-ext] prepareHtmlForCapture not found");
+    return;
+  }
+  if (typeof window.diffFromImages !== "function") {
+    console.error("[native-diff-ext] diffFromImages not found — compare-case.html must load diff-algorithm.js");
+    return;
+  }
+  // 1. Prepare: hide HTML chrome (same as skill's page.evaluate step)
+  console.log("[native-diff-ext] Preparing HTML for capture...");
+  window.prepareHtmlForCapture();
+  // 2. Determine selectors
+  const htmlSelector = document.querySelector("#html-output .frame")
+    ? "#html-output .frame"
+    : "#html-output .sequence-diagram";
+  const svgSelector = "#svg-output > svg";
+  // 3. Screenshot HTML (CDP clip isolates the element — no need to hide siblings)
+  console.log("[native-diff-ext] Taking HTML screenshot...");
+  const htmlCapture = await screenshotOne(htmlSelector);
+  if (htmlCapture.error) {
+    console.error("[native-diff-ext] HTML screenshot failed:", htmlCapture.error);
+    window.restoreHtmlAfterCapture();
+    return;
+  }
+  // 4. Screenshot SVG
+  console.log("[native-diff-ext] Taking SVG screenshot...");
+  const svgCapture = await screenshotOne(svgSelector);
+  // 5. Restore HTML chrome
+  window.restoreHtmlAfterCapture();
+  if (svgCapture.error) {
+    console.error("[native-diff-ext] SVG screenshot failed:", svgCapture.error);
+    return;
+  }
+  console.log("[native-diff-ext] Screenshots captured. Running diff...");
+  // 6. Run diff via shared algorithm (exposed by compare-case.html)
+  const result = await window.diffFromImages(htmlCapture.dataUrl, svgCapture.dataUrl);
+  console.log("[native-diff-ext] Done!", result.pixelPct + "% pixel match", result.posPct + "% position-only match");
+  // Post result back for icon-click flow
+  window.postMessage({ type: "native-diff-result", result }, "*");
+  // Batch mode: if __cr_cases is set in localStorage, save result and auto-advance
+  try {
+    const batchCases = localStorage.getItem("__cr_cases");
+    if (batchCases) {
+      const cases = JSON.parse(batchCases);
+      const results = JSON.parse(localStorage.getItem("__cr_results") || "{}");
+      const currentCase = new URLSearchParams(window.location.search).get("case");
+      if (currentCase && !results[currentCase]) {
+        // Get the DSL for this case from the page (exposed by compare-case.html)
+        const dsl = window.__currentDSL || "";
+        results[currentCase] = { score: result.pixelPct, posScore: result.posPct, dsl };
+        localStorage.setItem("__cr_results", JSON.stringify(results));
+        const doneCount = Object.keys(results).length;
+        console.log(`[native-diff-ext] Batch: ${currentCase}=${result.pixelPct}% px / ${result.posPct}% pos (${doneCount}/${cases.length})`);
+        if (doneCount < cases.length) {
+          const idx = cases.indexOf(currentCase);
+          if (idx >= 0 && idx + 1 < cases.length) {
+            setTimeout(() => {
+              window.location.href = `/cy/compare-case.html?case=${cases[idx + 1]}`;
+            }, 200);
+          }
+        } else {
+          const elapsed = ((Date.now() - parseInt(localStorage.getItem("__cr_start") || "0")) / 1000).toFixed(1);
+          console.log(`[native-diff-ext] Batch DONE in ${elapsed}s`);
+          // Save to IndexedDB for history tracking
+          saveBatchToHistory(results, elapsed);
+          // Clear batch vars so extension doesn't re-trigger on subsequent page loads
+          localStorage.removeItem("__cr_cases");
+          localStorage.removeItem("__cr_results");
+          localStorage.removeItem("__cr_start");
+        }
+      }
+    }
+  } catch (e) { /* batch mode is optional, don't break normal flow */ }
+}
+// ---- IndexedDB history storage ----
+// Database: "canonical-history", store: "runs"
+// Each run: { timestamp, elapsed, cases: { name: { score, dsl } }, average }
+function openHistoryDB() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open("canonical-history", 1);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains("runs")) {
+        db.createObjectStore("runs", { keyPath: "timestamp" });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+async function saveBatchToHistory(results, elapsed) {
+  try {
+    const db = await openHistoryDB();
+    const scores = Object.values(results).map(r => typeof r === "object" ? r.score : r);
+    const posScores = Object.values(results).map(r => {
+      if (typeof r === "object" && typeof r.posScore === "number") return r.posScore;
+      return typeof r === "object" ? r.score : r;
+    });
+    const average = scores.length > 0
+      ? parseFloat((scores.reduce((a, b) => a + b, 0) / scores.length).toFixed(1))
+      : 0;
+    const averagePos = posScores.length > 0
+      ? parseFloat((posScores.reduce((a, b) => a + b, 0) / posScores.length).toFixed(1))
+      : average;
+    const record = {
+      timestamp: new Date().toISOString(),
+      elapsed,
+      cases: results,
+      average,
+      averagePos,
+      caseCount: Object.keys(results).length,
+    };
+    const tx = db.transaction("runs", "readwrite");
+    tx.objectStore("runs").add(record);
+    await new Promise((resolve, reject) => {
+      tx.oncomplete = resolve;
+      tx.onerror = () => reject(tx.error);
+    });
+    console.log(`[native-diff-ext] History saved: avg=${average}% px / ${averagePos}% pos, ${Object.keys(results).length} cases`);
+    db.close();
+  } catch (e) {
+    console.error("[native-diff-ext] Failed to save history:", e);
+  }
+}
+// Expose history reader for dashboard pages
+window.__getCanonicalHistory = async function() {
+  const db = await openHistoryDB();
+  const tx = db.transaction("runs", "readonly");
+  const store = tx.objectStore("runs");
+  return new Promise((resolve, reject) => {
+    const req = store.getAll();
+    req.onsuccess = () => { db.close(); resolve(req.result); };
+    req.onerror = () => { db.close(); reject(req.error); };
+  });
+};