Server-Side Y Coordinates

.gitignore

@@ -3,6 +3,7 @@
 /playwright-report/
 /playwright/.cache/
 coverage
+tmp/
 
 .wrangler
 

.mcp.json

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

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.

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
 

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "@zenuml/core",

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

cy/async-message-mini-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>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>

cy/async-message-mini-2.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>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 A() {
+  new B() {
+      new C
+  }
+}
+      </pre>
+    </div>
+
+    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

cy/creation-assignment-2.html

@@ -0,0 +1,22 @@
+<!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">
+a = new A()
+      </pre>
+    </div>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

cy/creation-assignment.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">
+A.message
+a = new A()
+      </pre>
+    </div>
+    <script type="module" src="/src/main-cy.ts"></script>
+  </body>
+</html>

cy/demo-mini-1.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>

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>

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>

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.json

@@ -15,6 +15,7 @@
     "test": "bun test src test/unit",
     "pw": "playwright test",
     "pw:ci": "playwright test",
+    "measure:layout": "COLLECT_LAYOUT_METRICS=1 playwright test tests/layout-metrics.spec.ts --reporter=line --project=chromium",
     "pw:update": "playwright test --update-snapshots",
     "pw:update-ci": "playwright test --update-snapshots --reporter=github",
     "pw:ui": "playwright test --ui",