@zenuml/core 3.47.8 → 3.48.0

package/skills/dia-scoring/references/selectors-and-keys.md

@@ -1,253 +0,0 @@
-# Selectors And Keys
-
-The analyzer uses these roots:
-
-- HTML root: `#html-output .frame`, fallback `#html-output .sequence-diagram`
-- SVG root: `#svg-output > svg`
-
-Offset anchor:
-
-- All reported offsets use the outermost frame root's top-left corner
-- HTML side: `#html-output .frame`, fallback `#html-output .sequence-diagram`
-- SVG side: `#svg-output > svg`
-- Do not emit final `dx` / `dy` values from participant-local or other nested-container anchors
-
-HTML label extraction:
-
-- Normal messages: iterate `.interaction`, skip `.return`, `.creation`, and self interactions, then read `.message .editable-span-base`
-- Self messages: `.self-invocation .label .editable-span-base`
-- Returns: `.interaction.return .message .editable-span-base`, fallback `.interaction.return .name`
-- Fragment conditions: `.fragment .segment > .text-skin-fragment:not(.finally)`, using only visible child spans when conditional branches are stacked
-- Fragment sections:
-  - `.fragment.fragment-tcf .segment > .header.inline-block.bg-skin-frame.opacity-65`
-  - `.fragment.fragment-tcf .segment > .header.finally`
-
-SVG label extraction:
-
-- Normal messages: `g.message:not(.self-call) > text.message-label`
-- Self messages: `g.message.self-call > text.message-label`
-- Returns: `g.return > text.return-label`
-- Fragment conditions: `g.fragment > text.fragment-condition`
-- Fragment condition / section groups: `g.fragment > g` containing `text.fragment-section-label`
-  - texts starting with `[` are treated as `fragment-condition`
-  - other texts are treated as `fragment-section`
-
-Pairing key:
-
-- Semantic grouping is by `kind + text`
-- Duplicate labels are paired by top-to-bottom order within that group
-- Output key is:
-  - `kind`
-  - `text`
-  - `y_order`
-- Fragment labels also include `owner=<fragment header>` in the human-readable summary when available
-
-Per-letter scoring:
-
-- Grapheme segmentation uses `Intl.Segmenter`, fallback `Array.from`
-- Glyph boxes come from browser layout ranges, not whole-word centroids
-- Numeric `dx` and `dy` are only emitted when direct layout evidence and diff-image evidence agree
-
-Arrow extraction:
-
-- HTML normal/return messages:
-  - line: direct child `svg` line strip inside `.message`
-  - head: direct child arrowhead `svg` inside `.message`
-- HTML self messages:
-  - loop: painted geometry inside `svg.arrow`
-  - parts: outer loop path plus nested arrowhead path
-- SVG normal messages:
-  - line: `line.message-line`
-  - head: `svg.arrow-head`
-- SVG returns:
-  - line: `line.return-line`
-  - head: `polyline.return-arrow`
-- SVG self messages:
-  - loop: painted geometry inside the outer `svg` under `g.message.self-call`
-  - parts: outer loop path plus nested arrowhead path
-
-Arrow scoring:
-
-- Arrows are keyed by sequence number when numbering is available, for example `arrow:1.2.3`
-- Normal and return arrows are measured as one combined geometry item:
-  - line + arrow head together
-- Self arrows are measured as one loop geometry item
-- Self arrows use the union of the painted loop path and arrowhead path, not the outer viewport box
-- Arrow output is endpoint-based, not box-centroid-based
-- For normal and return arrows, report:
-  - `left_dx`
-  - `right_dx`
-  - `width_dx`
-- For self arrows, also report:
-  - `top_dy`
-  - `bottom_dy`
-  - `height_dy`
-- Do not report `dy` for horizontal message arrows
-
-HTML sequence number extraction:
-
-- Normal messages: `.interaction:not(.return):not(.creation):not(.self-invocation):not(.self) > .message > .absolute.text-xs`
-- Self messages: `.interaction.self-invocation > .message .absolute.text-xs`
-- Returns: `.interaction.return > .message > .absolute.text-xs`
-- Fragments: `.fragment > .header > .absolute.text-xs`
-
-SVG sequence number extraction:
-
-- Normal messages: `g.message:not(.self-call) > text.seq-number`
-- Self messages: `g.message.self-call > text.seq-number`
-- Returns: `g.return > text.seq-number`
-- Fragments: `g.fragment > text.seq-number`
-
-## Participant Icon Extraction
-
-## Participant Header Extraction
-
-HTML participant header extraction:
-
-- Participant root: `.participant[data-participant-id]`
-- Participant box: outer border box from the participant root element
-- Participant stereotype: `label.interface`, when present
-- Participant label: last `.name` descendant, measured by glyph boxes
-
-SVG participant header extraction:
-
-- Participant root: `g.participant[data-participant]`
-- Skip `g.participant-bottom`
-- Participant box element: `:scope > rect.participant-box`
-- Participant box measurement must use the painted outer bounds of the stroked rect, not the inset rect geometry
-- Participant stereotype:
-  - prefer `:scope > text.stereotype-label`
-  - fallback: top-most direct `text` child above `text.participant-label`
-- Participant label: `:scope > text.participant-label`
-
-Participant stereotype pairing and scoring:
-
-- Pair by participant name
-- Validate text equality, for example `«BFF»`
-- Measure stereotype offset by per-letter glyph boxes relative to the outermost frame root, not by participant-local anchors or whole-word box centroids
-- Report:
-  - `letter_deltas`
-  - concise aggregate only when the per-letter evidence agrees
-- Do not mark the stereotype clean from glyph boxes alone
-- Also check the live `#diff-panel canvas` over the union of the HTML and SVG stereotype glyph boxes
-- If localized red or blue pixels persist in that stereotype region while glyph-box deltas are `0/0`, classify it as `ambiguous` or `paint-level residual`
-
-Participant box pairing and scoring:
-
-- Pair by participant name
-- Report `html_box` and `svg_box` with `x`, `y`, `w`, `h`
-- Box `x` / `y` values are frame-anchor-relative
-- Report box deltas:
-  - `dx`
-  - `dy`
-  - `dw`
-  - `dh`
-
-HTML icon extraction:
-
-- Participant root: `.participant[data-participant-id]`
-- Top-row participant only: keep the top-most entry for each participant id
-- Icon host: first child inside the centered participant row when it is an async icon host
-  - `[aria-description]`
-  - or contains `svg`
-  - or has `h-6` sizing class from `AsyncIcon`
-- Icon box: union of painted SVG shapes when available, fallback to the host box
-- Participant label: last `.name` descendant, measured by glyph boxes
-
-SVG icon extraction:
-
-- Participant root: `g.participant[data-participant]`
-- Skip `g.participant-bottom`
-- Icon element: `:scope > g[transform]`
-- Icon box: union of painted shapes within that transformed group
-- Participant label: `:scope > text.participant-label`
-
-Icon pairing:
-
-- Pair by participant name
-- Only report participant icon rows for participants where at least one side has an icon
-- Participant labels for icon-bearing participants are paired by participant name, not raw label text
-
-Icon scoring:
-
-- Absolute icon drift:
-  - `icon_dx`
-  - `icon_dy`
-- Absolute icon drift is measured from the outermost frame anchor
-- Relative icon drift against the participant label anchor:
-  - `relative_dx`
-  - `relative_dy`
-- If there is no participant label on one side, use the participant box center as the anchor
-- Report presence mismatch if one renderer has an icon and the other does not
-- Diff confirmation is taken from `#diff-panel canvas`, scoped to the union of the HTML and SVG icon boxes
-
-## Residual Scope Attribution
-
-Residual scope extraction:
-
-- Build connected clusters from the live `#diff-panel canvas` colors:
-  - red = `html-only`
-  - blue = `svg-only`
-- Ignore green `match` and magenta `color diff` pixels for positional scoping
-- Each cluster reports:
-  - `size`
-  - `bbox`
-  - `centroid`
-- These panel-derived clusters are the source of truth for residual hotspots.
-
-Residual scope candidates:
-
-- HTML side:
-  - labels
-  - numbers
-  - arrows
-  - participant stereotypes
-  - participant labels
-  - participant icons
-  - participant boxes
-  - diagram root fallback
-- SVG side:
-  - labels
-  - numbers
-  - arrows
-  - participant stereotypes
-  - participant labels
-  - participant icons
-  - participant boxes
-  - `rect.frame-border-inner`, fallback `rect.frame-border` / `rect.frame-box`
-  - diagram root fallback
-
-Residual scope attribution:
-
-- Pick the closest candidate to the cluster centroid on each side
-- Prefer targets that contain the centroid
-- Prefer more specific categories over large containers:
-  - `participant-icon`
-  - `participant-stereotype`
-  - `label`, `number`, `participant-label`
-  - `arrow`
-  - `participant-box`
-  - `frame-border`
-  - `diagram-root`
-- Use cluster/target overlap and centroid distance as tie-breakers
-
-Residual scope output:
-
-- `residual_scopes`: all attributed clusters
-- `residual_scope_summary`: top 20 concise lines for terminal use
-- `residual_scope_html_only_top`: top 10 `html-only` clusters
-- `residual_scope_svg_only_top`: top 10 `svg-only` clusters
-- When answering from the live panel, also report:
-  - the largest red clusters from `#diff-panel canvas`
-  - the largest blue clusters from `#diff-panel canvas`
-  - approximate diagram-space positions or bounding boxes
-  - attributed HTML and SVG targets for those clusters
-  - a short grouped summary of where the red and blue pixels are concentrated
-
-Live panel validation:
-
-- Source of truth for residual hotspots is `#diff-panel canvas`
-- Confirm the hotspot by reading the panel's actual red and blue pixels at that area
-- If the panel shows no red or blue pixels there, do not report that hotspot as a real residual diff
-- If the panel shows non-zero red or blue totals, do not stop at the totals alone; locate the dominant clusters and report them
-- Do not build or rely on a separate screenshot-to-screenshot diff for pixel comparison when `#diff-panel canvas` is available on the page

package/tailwind.config.js

@@ -1,126 +0,0 @@
-module.exports = {
-  important: ".zenuml",
-  content: ["./src/**/*.{js,jsx,ts,tsx,vue}", "./index.html"],
-  safelist: [
-    // add classes from tailwind.css
-    "theme-default",
-    "theme-mermaid",
-    "theme-darcula",
-    "theme-sky",
-    "theme-idle-afternoon",
-    "theme-coles",
-    "theme-woolworths",
-    "theme-anz",
-    "theme-nab",
-    "theme-google",
-    "theme-diagramly",
-    "theme-creately",
-    "theme-purple",
-    {
-      pattern: /(bg|text|outline)-.*/,
-    },
-  ],
-  theme: {
-    extend: {
-      colors: {
-        skin: {
-          frame: "var(--color-bg-frame)", // it will generate from/via/to-skin-frame. see lifeline layer
-        },
-      },
-      textColor: {
-        skin: {
-          title:
-            "var(--color-text-title, var(--color-text-message, var(--color-text-base, #000)))",
-          participant:
-            "var(--color-text-participant, var(--color-text-message, var(--color-text-base, #000)))",
-          "lifeline-group-name":
-            "var(--color-text-message, var(--color-text-base, #000))",
-          message: "var(--color-text-message, var(--color-text-base, #000))",
-          "message-arrow":
-            "var(--color-message-arrow, var(--color-border-frame, var(--color-border-base, #000)))", // message arrow head
-          comment:
-            "var(--color-text-comment, var(--color-text-secondary, var(--color-text-base, #000)))",
-          "fragment-header":
-            "var(--color-text-fragment-header, var(--color-text-message, #000))",
-          fragment:
-            "var(--color-text-fragment, var(--color-text-message, #000))",
-          base: "var(--color-text-base)",
-          header: "var(--color-text-header)",
-          secondary: "var(--color-text-secondary)",
-          control:
-            "var(--color-text-control, var(--color-text-secondary, var(--color-text-base, #000)))",
-          muted: "var(--color-text-muted)",
-          hover: "var(--color-text-hover)",
-          link: "var(--color-text-link, var(--color-text-secondary, var(--color-text-base, #000)))",
-          fill: "var(--color-text-fill)",
-        },
-      },
-      backgroundColor: {
-        skin: {
-          canvas:
-            "var(--color-bg-canvas, var(--color-bg-base, var(--color-backup-white, #ffffff)))",
-          frame:
-            "var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, var(--color-backup-white, #ffffff))))",
-          title:
-            "var(--color-bg-title, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, var(--color-backup-white, #ffffff)))))",
-          participant:
-            "var(--color-bg-participant, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, var(--color-backup-white, #ffffff)))))",
-          lifeline:
-            "var(--color-border-participant, var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000))))",
-          divider:
-            "var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000)))",
-          "fragment-header":
-            "var(--color-bg-fragment-header, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, var(--color-backup-white, #ffffff)))))",
-          occurrence:
-            "var(--color-bg-occurrence, var(--color-bg-participant, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, var(--color-backup-white, #ffffff))))))",
-          base: "var(--color-bg-base)",
-          secondary: "var(--color-bg-secondary)",
-          hover: "var(--color-bg-hover)",
-          fill: "var(--color-bg-fill)",
-        },
-      },
-      borderColor: {
-        primary: "var(--color-border-primary)",
-        skin: {
-          frame: "var(--color-border-frame, var(--color-border-base, #000))",
-          participant:
-            "var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000)))",
-          "message-arrow":
-            "var(--color-message-arrow, var(--color-border-frame,  var(--color-border-base, #000)))", // message arrow line
-          fragment:
-            "var(--color-border-fragment, var(--color-border-frame,  var(--color-border-base, #000)))",
-          occurrence:
-            "var(--color-border-occurrence, var(--color-border-frame,  var(--color-border-base, #000)))",
-          base: "var(--color-border-base)",
-          secondary: "var(--color-border-secondary)",
-        },
-      },
-      outlineColor: {
-        skin: {
-          primary: "var(--color-outline-primary)",
-        },
-      },
-      gradientColorStops: {
-        skin: {
-          base: "var(--color-bg-base)",
-          secondary: "var(--color-bg-secondary)",
-        },
-      },
-      boxShadow: {
-        participant: "var(--color-shadow-participant, transparent)",
-        occurrence: "var(--color-shadow-occurrence, transparent)",
-      },
-    },
-  },
-  variants: {
-    extend: {
-      overflow: ["hover", "focus"],
-      whitespace: ["hover", "focus"],
-      display: ["group-hover"],
-    },
-  },
-  corePlugins: {
-    preflight: false,
-  },
-  plugins: [require("@headlessui/tailwindcss")],
-};

package/test-compression.html

@@ -1,274 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ZenUML Compression Test</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 20px;
-    }
-    textarea {
-      width: 100%;
-      height: 200px;
-      margin: 10px 0;
-      font-family: monospace;
-    }
-    button {
-      background: #007bff;
-      color: white;
-      border: none;
-      padding: 10px 20px;
-      margin: 5px;
-      cursor: pointer;
-      border-radius: 4px;
-    }
-    button:hover {
-      background: #0056b3;
-    }
-    .output {
-      background: #f4f4f4;
-      padding: 10px;
-      margin: 10px 0;
-      border-radius: 4px;
-      word-break: break-all;
-    }
-    .error {
-      color: red;
-      background: #fee;
-      padding: 10px;
-      margin: 10px 0;
-      border-radius: 4px;
-    }
-    .success {
-      color: green;
-      background: #efe;
-      padding: 10px;
-      margin: 10px 0;
-      border-radius: 4px;
-    }
-  </style>
-</head>
-<body>
-  <h1>ZenUML Compression Test</h1>
-
-  <h2>Test URL Parameter Encoding/Decoding</h2>
-  <textarea id="zenUmlCode" placeholder="Enter ZenUML code here...">title Authentication Flow
-  RET ret = A.methodA() {
-  B.method() {
-    if (X) {
-      C.methodC() {
-        a = A.methodA() {
-          D.method()
-        }
-      }
-    }
-    while (Y) {
-      C.methodC() {
-        A.methodA()
-      }
-    }
-   }
- }
-  </textarea>
-
-  <div>
-    <button onclick="encodeAndCompress()">Encode (Gzip + Base64)</button>
-    <button onclick="testDecode()">Test Decode</button>
-    <button onclick="generateUrl()">Generate URL</button>
-    <button onclick="clearAll()">Clear</button>
-  </div>
-
-  <h3>Encoded Output:</h3>
-  <div id="encodedOutput" class="output"></div>
-
-  <h3>URL:</h3>
-  <div id="urlOutput" class="output"></div>
-
-  <h3>Test Results:</h3>
-  <div id="testResults"></div>
-
-  <script type="module">
-    import pako from 'pako';
-    
-    // Helper function to escape HTML special characters
-    function escapeHtml(unsafe) {
-      return unsafe
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#039;");
-    }
-    
-    // Compression and encoding functions
-    function compressAndEncode(text) {
-      try {
-        // Step 1: Compress with gzip
-        const compressed = pako.gzip(text);
-
-        // Step 2: Convert to base64
-        let binary = '';
-        const bytes = new Uint8Array(compressed);
-        for (let i = 0; i < bytes.byteLength; i++) {
-          binary += String.fromCharCode(bytes[i]);
-        }
-        const base64 = btoa(binary);
-
-        return base64;
-      } catch (error) {
-        console.error('Compression error:', error);
-        throw error;
-      }
-    }
-
-    // Decompression and decoding functions
-    function decodeAndDecompress(base64String) {
-      try {
-        // Step 1: Decode base64
-        const binaryString = atob(base64String);
-
-        // Step 2: Convert to Uint8Array
-        const bytes = new Uint8Array(binaryString.length);
-        for (let i = 0; i < binaryString.length; i++) {
-          bytes[i] = binaryString.charCodeAt(i);
-        }
-
-        // Step 3: Decompress
-        const decompressed = pako.ungzip(bytes, { to: 'string' });
-
-        return decompressed;
-      } catch (error) {
-        console.error('Decompression error:', error);
-        throw error;
-      }
-    }
-
-    function encodeAndCompress() {
-      const zenUmlCode = document.getElementById('zenUmlCode').value;
-      const resultsDiv = document.getElementById('testResults');
-      resultsDiv.innerHTML = '';
-
-      try {
-        const encoded = compressAndEncode(zenUmlCode);
-        document.getElementById('encodedOutput').textContent = encoded;
-
-        // Show compression ratio
-        const originalSize = new Blob([zenUmlCode]).size;
-        const compressedSize = new Blob([encoded]).size;
-        const ratio = ((originalSize - compressedSize) / originalSize * 100).toFixed(2);
-
-        resultsDiv.innerHTML = `
-          <div class="success">
-            Encoding successful!<br>
-            Original size: ${originalSize} bytes<br>
-            Encoded size: ${compressedSize} bytes<br>
-            Compression: ${ratio}% smaller
-          </div>
-        `;
-      } catch (error) {
-        resultsDiv.innerHTML = `<div class="error">Encoding failed: ${escapeHtml(error.message)}</div>`;
-      }
-    }
-
-    function testDecode() {
-      const encoded = document.getElementById('encodedOutput').textContent;
-      const resultsDiv = document.getElementById('testResults');
-
-      if (!encoded) {
-        resultsDiv.innerHTML = '<div class="error">No encoded data to decode. Please encode first.</div>';
-        return;
-      }
-
-      try {
-        const decoded = decodeAndDecompress(encoded);
-        const original = document.getElementById('zenUmlCode').value;
-
-        if (decoded === original) {
-          resultsDiv.innerHTML = `
-            <div class="success">
-              Decoding successful! The decoded content matches the original.<br>
-              <pre>${decoded}</pre>
-            </div>
-          `;
-        } else {
-          resultsDiv.innerHTML = `
-            <div class="error">
-              Decoding mismatch!<br>
-              Original length: ${original.length}<br>
-              Decoded length: ${decoded.length}
-            </div>
-          `;
-        }
-      } catch (error) {
-        resultsDiv.innerHTML = `<div class="error">Decoding failed: ${error.message}</div>`;
-      }
-    }
-
-    function generateUrl() {
-      const encoded = document.getElementById('encodedOutput').textContent;
-
-      if (!encoded) {
-        document.getElementById('urlOutput').innerHTML = '<span style="color: red;">Please encode first</span>';
-        return;
-      }
-
-      const baseUrl = window.location.origin + '/renderer.html';
-      const url = `${baseUrl}?code=${encodeURIComponent(encoded)}`;
-
-      document.getElementById('urlOutput').innerHTML = `
-        <a href="${url}" target="_blank">${url}</a><br>
-        <small>URL length: ${url.length} characters</small>
-      `;
-    }
-
-    function clearAll() {
-      document.getElementById('zenUmlCode').value = '';
-      document.getElementById('encodedOutput').textContent = '';
-      document.getElementById('urlOutput').textContent = '';
-      document.getElementById('testResults').innerHTML = '';
-    }
-
-    // Test some edge cases
-    function runTests() {
-      const testCases = [
-        { name: 'Empty string', input: '' },
-        { name: 'Simple text', input: 'Hello World' },
-        { name: 'Unicode', input: '你好世界 🌍' },
-        { name: 'Special characters', input: '!@#$%^&*()_+-=[]{}|;:,.<>?' }
-      ];
-
-      let results = '<h3>Automated Tests:</h3>';
-
-      for (const test of testCases) {
-        try {
-          const encoded = compressAndEncode(test.input);
-          const decoded = decodeAndDecompress(encoded);
-
-          if (decoded === test.input) {
-            results += `<div class="success">✓ ${test.name}: PASSED</div>`;
-          } else {
-            results += `<div class="error">✗ ${test.name}: FAILED - Mismatch</div>`;
-          }
-        } catch (error) {
-          results += `<div class="error">✗ ${test.name}: ERROR - ${error.message}</div>`;
-        }
-      }
-
-      document.getElementById('testResults').innerHTML = results;
-    }
-
-    // Make functions available globally for onclick handlers
-    window.encodeAndCompress = encodeAndCompress;
-    window.testDecode = testDecode;
-    window.generateUrl = generateUrl;
-    window.clearAll = clearAll;
-    
-    // Run tests on page load
-    runTests();
-  </script>
-</body>
-</html>