@zenuml/core 3.43.3 → 3.44.0

package/.mcp.json

@@ -0,0 +1,16 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp", "--browser", "msedge"],
+      "env": {}
+    },
+    "chrome-devtools": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "chrome-devtools-mcp"],
+      "env": {}
+    }
+  }
+}

package/AGENTS.md

@@ -0,0 +1,26 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+`src/` holds the TypeScript/React core plus ANTLR grammars in `src/g4/` whose generated output belongs in `src/generated-parser/`. Static assets stay in `public/`, while demos and docs live in `playground/` and `docs/`. Bun specs reside in `test/unit/` (fixtures in `test/`); Playwright suites and snapshots live in `tests/`. Tooling sits in `scripts/`, `antlr/`, `types/`, and the repo-level configs (including `wrangler.toml`).
+
+## Build, Test, and Development Commands
+- `bun install` – install dependencies (Bun 1.x, Node ≥20).
+- `bun run dev` – Vite dev server on `http://localhost:8080`.
+- `bun run build` – library bundle via `vite.config.lib.ts`.
+- `bun run build:site` / `bun run build:gh-pages` – demo/docs build (standard vs GitHub Pages).
+- `bun run test` – Bun unit tests covering `src` and `test/unit`.
+- `bun run pw`, `bun run pw:smoke`, `bun run pw:update` – Playwright full suite, smoke subset, snapshot refresh.
+- `bun run worker:dev` / `worker:deploy(:staging)` – build site then run or ship the Cloudflare Worker.
+- `bun run antlr:lexer && bun run antlr:parser` (plus `antlr:clear`) – regenerate parser artifacts after grammar edits.
+
+## Coding Style & Naming Conventions
+Stick to 2-space indentation, TypeScript, and arrow components with PascalCase names. Hooks/atoms stay camelCase (`modeAtom`), constants SCREAMING_SNAKE_CASE, and specs follow `FeatureName.spec.ts`. Scope Tailwind utilities under `.zenuml`; styles belong in `src/assets/tailwind.css` or the relevant component SCSS. Run `bun run eslint` and `bun run prettier` before committing.
+
+## Testing Guidelines
+Touching parser, rendering, or positioning code requires matching `*.spec.ts/tsx` updates, with fixtures held in `test/unit/parser/fixture`. Keep Bun tests deterministic (fake timers, no global state leaks) and prefer small diagrams. UI or regression work belongs in `tests/*.spec.ts` with stable selectors; refresh snapshots via `pw:update`. Every fix ships with a failing test first and, when visuals change, the updated snapshot artifacts.
+
+## Commit & Pull Request Guidelines
+Follow the conventional pattern (`fix:`, `feat:`, `refactor:`, etc.) and reference issues using `(#123)` in the subject. PRs summarize intent, list the verification commands (`bun run test`, `bun run pw:smoke`, etc.), and attach screenshots or GIFs for UI updates. Call out parser regeneration, config edits, or worker deploy steps so reviewers can verify the correct artifacts.
+
+## Security & Configuration Tips
+Keep secrets out of git—Wrangler reads Cloudflare credentials from your local profile, and environment overrides stay in untracked `.env`. Document worker route or KV changes in the PR, verify them in staging, and scrub proprietary diagrams before committing docs or tests.

package/CLAUDE.md

@@ -90,11 +90,12 @@ Output formats:
 Uses Bun as the package manager and JavaScript runtime. Bun is a fast all-in-one JavaScript runtime that includes a package manager, test runner, and bundler.
 
 ### Test Configuration
-- **Unit tests with Bun**: `bun run test:bun` - Runs unit tests in `src/` and `test/unit/` folders (excludes `/tests` E2E folder)
-- **Vitest**: `bun run test` - Uses Vitest for compatibility with existing test suite
+- **Unit tests with Bun**: `bun test` (alias: `bun run test`) - Runs unit tests in `src/` and `test/unit/` folders (excludes `/tests` E2E folder)
+- **Vitest**: Tests also support Vitest for IDE integration compatibility
 - **E2E tests**: `bun pw` - Runs Playwright tests in `/tests` folder
-- Tests use `vi` mocking utilities which are mapped to Jest-compatible APIs in `test-setup.ts`
-- Coverage is disabled by default due to resource issues; enable with `bun test --coverage`
+- **Test setup**: `test/setup.ts` configures test environment (mocks IntersectionObserver, etc.)
+- Tests use `vi` mocking utilities from Vitest
+- Test files use `.spec.ts` extension and are co-located with source files
 
 ## Development Notes
 

package/TUTORIAL.md

@@ -18,7 +18,7 @@ npm install @zenuml/core
 or
 
 ```bash
-yarn add @zenuml/core
+bun add @zenuml/core
 ```
 
 ### Usage

package/bun.lock

@@ -56,6 +56,8 @@
         "happy-dom": "^18.0.1",
         "jsdom": "^26.1.0",
         "less": "^4.3.0",
+        "pixelmatch": "^7.1.0",
+        "pngjs": "^7.0.0",
         "postcss": "^8.5.3",
         "prettier": "3.5.3",
         "rollup-plugin-visualizer": "^6.0.5",
@@ -1043,10 +1045,14 @@
 
     "pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
 
+    "pixelmatch": ["pixelmatch@7.1.0", "", { "dependencies": { "pngjs": "^7.0.0" }, "bin": { "pixelmatch": "bin/pixelmatch" } }, "sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng=="],
+
     "playwright": ["playwright@1.55.0", "", { "dependencies": { "playwright-core": "1.55.0" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-sdCWStblvV1YU909Xqx0DhOjPZE4/5lJsIS84IfN9dAZfcl/CIZ5O8l3o0j7hPMjDvqoTF8ZUcc+i/GL5erstA=="],
 
     "playwright-core": ["playwright-core@1.55.0", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-GvZs4vU3U5ro2nZpeiwyb0zuFaqb9sUiAJuyrWpcGouD8y9/HLgGbNRjIph7zU9D3hnPaisMl9zG9CgFi/biIg=="],
 
+    "pngjs": ["pngjs@7.0.0", "", {}, "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow=="],
+
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
     "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],

package/bunfig.toml

@@ -41,7 +41,7 @@ auto = "auto"
 save = true
 
 # Print changes to lockfile
-print = "yarn"
+print = "bun"
 
 [run]
 # Bun runtime settings for scripts

package/cy/demo1.html

@@ -0,0 +1,28 @@
+<!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>Demo1 DSL</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" id="dsl-slot" style="margin: 0"></pre>
+    </div>
+
+    <script type="module">
+      import demo1 from "/src/demo1.js";
+      const target = document.getElementById("dsl-slot");
+      if (target) {
+        target.textContent = demo1;
+      }
+    </script>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/demo3.html

@@ -0,0 +1,28 @@
+<!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>Demo3 DSL</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" id="dsl-slot" style="margin: 0"></pre>
+    </div>
+
+    <script type="module">
+      import demo3 from "/src/demo3.js";
+      const target = document.getElementById("dsl-slot");
+      if (target) {
+        target.textContent = demo3;
+      }
+    </script>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/demo4.html

@@ -0,0 +1,28 @@
+<!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>Demo4 DSL</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" id="dsl-slot" style="margin: 0"></pre>
+    </div>
+
+    <script type="module">
+      import demo4 from "/src/demo4.js";
+      const target = document.getElementById("dsl-slot");
+      if (target) {
+        target.textContent = demo4;
+      }
+    </script>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/smoke-fragment.html

@@ -33,8 +33,7 @@ if(x) {
     }
   }
 }
-</pre
-      >
+      </pre>
     </div>
 
     <!-- built files will be auto injected -->

package/cy/vertical-1.html

@@ -0,0 +1,25 @@
+<!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>Creation Assignment</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+// red
+// green
+a = A.m111
+new E
+      </pre>
+    </div>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-10.html

@@ -0,0 +1,33 @@
+<!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>Self Sync Message at Root</title>
+    <style>
+      body {
+        margin: 0; /* mostly for demo on mobile */
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+new E
+E.messageA()
+new A {
+  if (x) {
+    new D
+  }
+  new B {
+    new C
+  }
+}
+      </pre>
+    </div>
+
+    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-11.html

@@ -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>Self Sync Message at Root</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.call {
+  // pre creation
+  A->B: prep
+  a = new A()
+  a->B: post
+}
+      </pre>
+    </div>
+
+    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-2.html

@@ -0,0 +1,23 @@
+<!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>Creation Assignment</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+// [red]
+new B
+      </pre>
+    </div>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-3.html

@@ -0,0 +1,37 @@
+<!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>Creation Assignment</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+if(x) {
+  // comment
+  new A
+} else {
+  new B
+}
+
+new C
+try {
+  new D
+} catch {
+  par {
+    new E
+    new F
+  }
+}
+      </pre>
+    </div>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-4.html

@@ -0,0 +1,42 @@
+<!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>Creation Assignment</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+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
+    }
+  }
+}
+      </pre>
+    </div>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-5.html

@@ -0,0 +1,40 @@
+<!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>Creation Assignment</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+par {
+  new F
+  if(x) {
+    new X
+  } else {
+    try {
+      new Y
+    } catch {
+      par {
+        new G
+        if(x) {
+          new H
+        } else {
+          new I
+        }
+      }
+    }
+  }
+}
+      </pre>
+    </div>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-6.html

@@ -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>Creation Assignment</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+new a
+if(x) {
+	new b
+} else {
+	new c
+	new e
+}
+new D
+      </pre>
+    </div>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-7.html

@@ -0,0 +1,27 @@
+<!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>Demo1 DSL</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+A.method
+section(){
+    new B
+}
+      </pre>
+    </div>
+
+    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-8.html

@@ -0,0 +1,32 @@
+<!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>Demo1 DSL</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+new Creation() {
+  return from_creation
+}
+return "from if to original source"
+try {
+  new AHasAVeryLongNameLongNameLongNameLongName() {
+    new CreatWithinCreat()
+  }
+}
+      </pre>
+    </div>
+
+    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

package/cy/vertical-9.html

@@ -0,0 +1,25 @@
+<!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>Self Sync Message at Root</title>
+    <style>
+      body {
+        margin: 0; /* mostly for demo on mobile */
+      }
+    </style>
+  </head>
+  <body>
+    <div id="diagram" class="diagram">
+      <pre class="zenuml" style="margin: 0">
+A0->A0: self
+new A
+      </pre>
+    </div>
+
+    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>