@zenuml/core 3.46.0 → 3.46.2

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 (60) hide show
  1. package/.claude/skills/dia-scoring/SKILL.md +139 -0
  2. package/.claude/skills/dia-scoring/agents/openai.yaml +7 -0
  3. package/.claude/skills/dia-scoring/references/selectors-and-keys.md +253 -0
  4. package/.claude/skills/land-pr/SKILL.md +98 -0
  5. package/.claude/skills/ship-branch/SKILL.md +81 -0
  6. package/.claude/skills/submit-branch/SKILL.md +76 -0
  7. package/.claude/skills/validate-branch/SKILL.md +54 -0
  8. package/CLAUDE.md +1 -1
  9. package/bun.lock +25 -11
  10. package/cy/canonical-history.html +908 -0
  11. package/cy/compare-case.html +357 -0
  12. package/cy/compare-cases.js +824 -0
  13. package/cy/compare.html +35 -0
  14. package/cy/diff-algorithm.js +199 -0
  15. package/cy/element-report.html +705 -0
  16. package/cy/icons-test.html +29 -0
  17. package/cy/legacy-vs-html.html +291 -0
  18. package/cy/native-diff-ext/background.js +60 -0
  19. package/cy/native-diff-ext/bridge.js +26 -0
  20. package/cy/native-diff-ext/content.js +194 -0
  21. package/cy/parity-test.html +122 -0
  22. package/cy/return-in-nested-if.html +29 -0
  23. package/cy/svg-preview.html +56 -0
  24. package/cy/svg-test.html +21 -0
  25. package/cy/theme-default-test.html +28 -0
  26. package/dist/stats.html +1 -1
  27. package/dist/zenuml.esm.mjs +16352 -15223
  28. package/dist/zenuml.js +701 -575
  29. package/docs/ship-branch-skill-plan.md +134 -0
  30. package/docs/superpowers/plans/2026-03-23-svg-parity-features.md +283 -0
  31. package/index.html +568 -73
  32. package/package.json +15 -4
  33. package/scripts/analyze-compare-case/collect-data.mjs +991 -0
  34. package/scripts/analyze-compare-case/config.mjs +102 -0
  35. package/scripts/analyze-compare-case/geometry.mjs +101 -0
  36. package/scripts/analyze-compare-case/native-diff.mjs +224 -0
  37. package/scripts/analyze-compare-case/output.mjs +74 -0
  38. package/scripts/analyze-compare-case/panel-diff.mjs +114 -0
  39. package/scripts/analyze-compare-case/report.mjs +157 -0
  40. package/scripts/analyze-compare-case/residual-scopes.mjs +325 -0
  41. package/scripts/analyze-compare-case/scoring.mjs +816 -0
  42. package/scripts/analyze-compare-case.mjs +149 -0
  43. package/scripts/snapshot-dual.js +34 -34
  44. package/skills/dia-scoring/SKILL.md +129 -0
  45. package/skills/dia-scoring/agents/openai.yaml +7 -0
  46. package/skills/dia-scoring/references/selectors-and-keys.md +253 -0
  47. package/test-setup.ts +8 -0
  48. package/types/index.d.ts +56 -0
  49. package/vite.config.ts +4 -0
  50. package/dist/10029-icon-service-Function-Apps-ObflOLuF.js +0 -5
  51. package/dist/Res_AWS-Identity-Access-Management_IAM-Access-Analyzer_48-BPq60XMY.js +0 -11
  52. package/dist/Res_AWS-Lambda_Lambda-Function_48-Co38UB_2.js +0 -12
  53. package/dist/Res_Amazon-EC2_Instance_48-CRaqbNUl.js +0 -12
  54. package/dist/Res_Amazon-Simple-Notification-Service_Topic_48-q13mxUeM.js +0 -11
  55. package/dist/Res_Amazon-Simple-Queue-Service_Queue_48-D2-8gbFw.js +0 -11
  56. package/dist/Robustness_Diagram_Boundary-nYnmTPs8.js +0 -10
  57. package/dist/Robustness_Diagram_Control-DLNLoMxd.js +0 -11
  58. package/dist/Robustness_Diagram_Entity-Be3kcbIE.js +0 -11
  59. package/dist/actor-BMj_HFpo.js +0 -11
  60. package/dist/database-BKHQQWQK.js +0 -8
@@ -0,0 +1,122 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>SVG Parity Test - Side by Side</title>
6
+ <style>
7
+ body { margin: 0; font-family: sans-serif; }
8
+ .controls { padding: 10px; background: #1e293b; color: white; display: flex; gap: 16px; align-items: center; }
9
+ .controls select, .controls button { font-size: 14px; padding: 4px 8px; }
10
+ .container { display: flex; gap: 0; }
11
+ .panel { flex: 1; overflow: auto; }
12
+ .panel h3 { margin: 0; padding: 8px 16px; background: #334155; color: white; font-size: 13px; }
13
+ .panel-content { padding: 10px; background: white; }
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <div class="controls">
18
+ <label>Test case: </label>
19
+ <select id="case-select"></select>
20
+ </div>
21
+ <div class="container">
22
+ <div class="panel">
23
+ <h3>HTML/React Renderer (theme-default)</h3>
24
+ <div class="panel-content" id="html-output">
25
+ <div id="diagram"><pre class="zenuml" style="margin: 0">A -> B: hello</pre></div>
26
+ </div>
27
+ </div>
28
+ <div class="panel">
29
+ <h3>Native SVG Renderer (theme-default)</h3>
30
+ <div class="panel-content" id="svg-output"></div>
31
+ </div>
32
+ </div>
33
+ <script type="module">
34
+ import ZenUml from "/src/core.tsx";
35
+ import { renderToSvg } from "/src/svg/renderToSvg.ts";
36
+
37
+ const CASES = {
38
+ "simple-messages": `A -> B: hello
39
+ B -> C: process
40
+ C -> B: result
41
+ B -> A: done`,
42
+ "self-call": `A.method() {
43
+ B.method
44
+ }`,
45
+ "fragment-if": `A -> B: request
46
+ if(condition) {
47
+ B -> C: process
48
+ } else {
49
+ B -> D: fallback
50
+ }`,
51
+ "fragment-loop": `A -> B: request
52
+ loop(condition) {
53
+ B -> C: process
54
+ }`,
55
+ "fragment-tcf": `A.method {
56
+ try {
57
+ B.process
58
+ } catch(error) {
59
+ C.handle
60
+ } finally {
61
+ D.cleanup
62
+ }
63
+ }`,
64
+ "creation": `A.m {
65
+ new B(1,2,3)
66
+ }`,
67
+ "return": `A B C
68
+ A->B.method() {
69
+ C.call {
70
+ return result
71
+ }
72
+ return done
73
+ }`,
74
+ "async": `A->B: async
75
+ B->C: async
76
+ C->A: async`,
77
+ "nested": `A.Read() {
78
+ B.Submit() {
79
+ Process() {
80
+ if (true) {
81
+ ProcessCallback() {
82
+ A.method
83
+ }
84
+ }
85
+ }
86
+ }
87
+ }`,
88
+ };
89
+
90
+ const select = document.getElementById("case-select");
91
+ const svgOutput = document.getElementById("svg-output");
92
+ const htmlEl = document.querySelector("pre.zenuml");
93
+
94
+ let zenUml;
95
+
96
+ for (const name of Object.keys(CASES)) {
97
+ const opt = document.createElement("option");
98
+ opt.value = name;
99
+ opt.textContent = name;
100
+ select.appendChild(opt);
101
+ }
102
+
103
+ async function render(name) {
104
+ const code = CASES[name];
105
+
106
+ // SVG side
107
+ const result = renderToSvg(code);
108
+ svgOutput.innerHTML = result.svg;
109
+
110
+ // HTML side - recreate ZenUml instance
111
+ const diagram = document.getElementById("diagram");
112
+ diagram.innerHTML = '<pre class="zenuml" style="margin: 0">' + code + '</pre>';
113
+ const pre = diagram.querySelector("pre.zenuml");
114
+ zenUml = new ZenUml(pre);
115
+ await zenUml.render(code, { theme: "theme-default" });
116
+ }
117
+
118
+ select.addEventListener("change", () => render(select.value));
119
+ render(select.value);
120
+ </script>
121
+ </body>
122
+ </html>
@@ -0,0 +1,29 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
7
+ <title>Return in Nested If</title>
8
+ <style>
9
+ body {
10
+ margin: 0;
11
+ }
12
+ </style>
13
+ </head>
14
+ <body>
15
+ <div id="diagram" class="diagram">
16
+ <pre class="zenuml" style="margin: 0">
17
+ A.m {
18
+ if (condition) {
19
+ return ret
20
+ if(x) {
21
+ new B
22
+ }
23
+ }
24
+ }
25
+ </pre>
26
+ </div>
27
+ <script type="module" src="/src/main-cy.ts"></script>
28
+ </body>
29
+ </html>
@@ -0,0 +1,56 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>ZenUML SVG Preview</title>
6
+ <style>
7
+ * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
8
+ body { margin: 0; display: flex; height: 100vh; }
9
+ #editor-panel { width: 35%; border-right: 1px solid #ddd; display: flex; flex-direction: column; }
10
+ #editor-panel h3 { margin: 0; padding: 12px 16px; background: #1e293b; color: white; font-size: 14px; }
11
+ #code { flex: 1; padding: 16px; font-family: "JetBrains Mono", monospace; font-size: 14px; border: none; resize: none; outline: none; }
12
+ #preview-panel { flex: 1; display: flex; flex-direction: column; }
13
+ #preview-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #1e293b; color: white; font-size: 14px; }
14
+ #preview-header h3 { margin: 0; }
15
+ #stats { font-size: 11px; color: #94a3b8; font-family: monospace; }
16
+ #svg-container { flex: 1; padding: 20px; overflow: auto; background: #f8fafc; }
17
+ #svg-container svg { border: 1px dashed #cbd5e1; background: white; }
18
+ </style>
19
+ </head>
20
+ <body>
21
+ <div id="editor-panel">
22
+ <h3>ZenUML Code</h3>
23
+ <textarea id="code">title Order Service
24
+ A -> B: hello
25
+ B -> C: process
26
+ C -> B: result
27
+ B -> A: done</textarea>
28
+ </div>
29
+ <div id="preview-panel">
30
+ <div id="preview-header">
31
+ <h3>Native SVG Output</h3>
32
+ <span id="stats"></span>
33
+ </div>
34
+ <div id="svg-container"></div>
35
+ </div>
36
+ <script type="module">
37
+ import { renderToSvg } from "/src/svg/renderToSvg.ts";
38
+
39
+ const codeEl = document.getElementById("code");
40
+ const containerEl = document.getElementById("svg-container");
41
+ const statsEl = document.getElementById("stats");
42
+
43
+ function update() {
44
+ const code = codeEl.value;
45
+ const t0 = performance.now();
46
+ const result = renderToSvg(code);
47
+ const dt = (performance.now() - t0).toFixed(1);
48
+ containerEl.innerHTML = result.svg;
49
+ statsEl.textContent = `${result.width}x${result.height} | ${dt}ms`;
50
+ }
51
+
52
+ codeEl.addEventListener("input", update);
53
+ update();
54
+ </script>
55
+ </body>
56
+ </html>
@@ -0,0 +1,21 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
+ <title>SVG Parity Test</title>
7
+ <style>
8
+ body { margin: 0; background: white; }
9
+ </style>
10
+ </head>
11
+ <body>
12
+ <div id="svg-output"></div>
13
+ <script type="module">
14
+ import { renderToSvg } from "/src/svg/renderToSvg.ts";
15
+ window.__renderSvg = (code) => {
16
+ const result = renderToSvg(code);
17
+ document.getElementById("svg-output").innerHTML = result.svg;
18
+ };
19
+ </script>
20
+ </body>
21
+ </html>
@@ -0,0 +1,28 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Theme Default Test</title>
6
+ <style>
7
+ body { margin: 0; }
8
+ </style>
9
+ </head>
10
+ <body>
11
+ <div id="diagram" class="diagram">
12
+ <pre class="zenuml" style="margin: 0">
13
+ A -> B: hello
14
+ B -> C: process
15
+ C -> B: result
16
+ B -> A: done
17
+ </pre>
18
+ </div>
19
+ <script type="module">
20
+ import ZenUml from "/src/core.tsx";
21
+ const elm = document.querySelector("pre.zenuml");
22
+ const code = elm.textContent.trim();
23
+ const zenUml = new ZenUml(elm);
24
+ window.zenUml = zenUml;
25
+ zenUml.render(code, { theme: "theme-default" });
26
+ </script>
27
+ </body>
28
+ </html>