Move web UI tests to Playwright; add 4 more converter docs/copy updates

[MelbourneDeveloper]

TLDR

Replaces happy-dom UI unit tests with real-browser Playwright E2E specs (desktop + mobile), adds a coverage merger between vitest and Playwright, and updates docs/copy to advertise the four new converters (F#, Dart, PHP, Protobuf) that already exist in the framework.

Details

New: Playwright E2E harness for the web package

• Adds @playwright/test, monocart-coverage-reports, and a packages/web/playwright.config.ts with desktop + mobile projects (viewports 1400x900 and 420x900, isMobile/hasTouch on mobile).
• New e2e-harness.html page (+ eleventy/harness.njk, e2e/harness.ts) exposes the web package's UI modules on window.__E2E so specs can drive them in real CSS/DOM context. Entry registered in vite.config.ts and vite-plugin-copy-eleventy.ts; marked eleventyExcludeFromCollections and robots-blocked.
• E2E specs added under packages/web/e2e/: converter.spec.ts, editor-zoom.spec.ts, playground.spec.ts, splitter.spec.ts, viewport.spec.ts, zoom-controls.spec.ts — plus support/coverage-fixture.ts (CDP coverage capture) and support/global-teardown.ts.
• New tsconfig.e2e.json; scripts/**/* and e2e/**/* added to tsconfig.json include list.
• make test-playwright Makefile target for iterating on E2E only.
• CI installs Chromium before running make ci (.github/workflows/ci.yml).

Coverage merging

• New packages/web/scripts/merge-coverage.ts unions vitest (v8) and Playwright (monocart) istanbul coverage-final.json files at line identity, writes coverage/merged/coverage-summary.json, mirrors it to coverage/coverage-summary.json for the repo-level ratcheter, and enforces coverage-thresholds.json against the merged result.
• vitest.config.ts no longer enforces threshold directly — coverage emits JSON to coverage/vitest/ and the merger owns threshold enforcement.

Deleted (moved to Playwright)

• packages/web/test/converter.test.ts, editor-zoom.test.ts, playground.test.ts, splitter.test.ts, viewport.test.ts, zoom-controls.test.ts — all the happy-dom UI-interaction suites. Their black-box behaviour is now covered in the real browser.

UI/source tweaks

• src/splitter.ts: initSplitter now accepts storageKey, orientation ("auto" | "row" | "col"), and defaultRatio, replacing the hard-coded portrait-only behaviour.
• src/converter.ts, src/playground.ts: minor refactors aligned with the new splitter signature and harness mount.
• src/styles.css: hooks editor + backdrop selectors unified with the other editors; converter page switches to a full-viewport flex layout (no vertical scroll on mobile); mobile docs nav becomes a <details> disclosure; blog-index/post-main/post-header/post-title CSS dedup'd.

Docs & copy

• docs/specs/converters.md, docs/specs/api.md, docs/specs/getting-started.md, docs/shared/intro.md, eleventy/blog/welcome.md, eleventy/index.njk, eleventy/converter.njk, eleventy/docs.njk — all updated from "5 languages (TS/Python/Rust/Go/C#)" to "9 languages (+ F#, Dart, PHP, Protobuf)" and call out lossless round-tripping. Converter table rows added for the four new languages.
• packages/typediagram/test/markdown.test.ts and packages/vscode/test/markdown-it-plugin.test.ts: new interleaved-fence, multi-fence, indented-fake-fence, long-backtick-fence, and bad-fence-between-good-fences tests.
• Claude.md: testing rules clarified — "Don't split tests for assertions or user interactions. Merge them."

How Do The Automated Tests Prove It Works?

• [WEB-SPLITTER] … specs run against both desktop (col-resize, gridTemplateColumns) and mobile (row-resize, gridTemplateRows) viewports and verify applies default 50/50 split in landscape, uses gridTemplateRows in portrait (mobile), restores persisted ratio from localStorage, clamps stored ratio below MIN, clamps stored ratio above MAX (0.15/0.85), drag updates grid and pointerup saves ratio, pointercancel ends the drag and saves ratio, and the two no-op paths.
• [WEB-EDITOR-ZOOM] proves default 13px, persisted-size restore + clamp (8–32), and Ctrl/Meta wheel zoom including the plain-wheel no-op.
• [WEB-ZOOM-CONTROLS] asserts the bar renders 5 buttons, routes clicks to each of zoomIn/zoomOut/reset/fit, exports no-ops when no SVG is present, and triggers an anchor download (diagram.svg, blob: href) when the viewport contains an SVG.
• [WEB-CONVERTER] exercises all 9 language tabs, flip behaviour, Rust + flip filling all three panels (no 'No Rust type definitions found'), round-trip back to the original TD source, and scroll-sync between textarea and backdrop.
• [WEB-PLAYGROUND] + [WEB-PLAYGROUND-PRESETS] cover source/hooks tabs, real debounced re-render on hook input, localStorage persistence, syntax-highlight backdrop tokens, the invalid-hook diagnostic, preset chip append/remove, aria-pressed state, z-index ordering, and hand-typing a preset block lighting up the matching chip.
• [WEB-VIEWPORT] proves pan/zoom preservation across re-renders — the bug-fix invariant from the old unit test, now in a real browser.
• Markdown tests prove interleaved prose → heading → list → fence → quote ordering is preserved, adjacent typeDiagram fences don't collapse into one regex match, non-typediagram fences between typediagram fences survive untouched, indented four-space fake fences are ignored, and long-backtick fences (≥4) parse.
• make ci continues to run fmt-check → lint → test → build → bundle-size. make test now runs vitest + Playwright for the web package and fails if the merged coverage drops below coverage-thresholds.json.