From f6075445e0f802d88b7625f46d386fa6008a0a82 Mon Sep 17 00:00:00 2001
From: Jocs <luoran1988@126.com>
Date: Thu, 21 May 2026 11:39:51 +0800
Subject: [PATCH 1/3] =?UTF-8?q?test(e2e):=20Phase=204=20=E2=80=94=20stabil?=
 =?UTF-8?q?ity=20/=20perf=20/=20a11y=20guardrails?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds 28 new Playwright specs across five buckets, landing the full
Phase 4 BACKLOG scope on the muya-e2e suite. Total test count grows
from 54 passed / 1 skipped to 83 passed / 1 skipped.

Stability
- stability/listener-leak.spec.ts: direct regression for PR-17
  (commit 39852a6). 50× setContent/locale/destroy/rebuild loop;
  asserts EventCenter `events` (DOM) and `listeners` (pub/sub)
  arrays stay within ±5 across rebuild cycles.
- stability/perf.spec.ts: 10k-paragraph setContent timed via
  performance.now(); 60s budget against the unbundled Vite dev
  server (~20s observed locally). Tagged @perf for future
  PR-time / nightly split.

Accessibility
- a11y/host-scan.spec.ts: @axe-core/playwright scan of the clean
  host plus IFT, slash menu, link tools, image tools, and table
  tools open states. Fails on `critical` only; non-critical
  violations logged for Phase 5 triage. Excludes `.tools` (host
  test-harness toolbar, not muya's a11y surface).

Option matrix
- options/autopair.spec.ts: full on/off matrix for
  autoPairBracket / autoPairMarkdownSyntax / autoPairQuote plus
  all-off combo.
- options/focus-mode.spec.ts: option round-trips through the
  constructor (no visual marker assertion — focusMode is
  currently a no-op in the render path; tightened spec deferred
  to Phase 5).
- options/spellcheck.spec.ts: asserts `spellcheck` attribute on
  `.mu-editor` root for both states.
- options/disable-html.spec.ts: asserts `.mu-disable-html-render`
  class and that raw HTML stays as escaped source vs. live DOM.

Edges
- edges/empty-and-tiny.spec.ts: setContent(''), setContent('a'),
  10× rapid setContent without awaits. Cursor placement and
  final-state correctness.

Static export
- export/markdown-to-html.spec.ts: heading/list/code-block/KaTeX
  shape; mermaid container; script-injection sanitised away
  (Phase 3 deferred this — landed here). Includes the
  payload-execution sentinel that Phase 3 PR #237 marked for
  Phase 4.

Infrastructure
- e2e/host/main.ts: exposes window.MarkdownToHtml and
  window.__e2e.rebuildMuya(opts) helper for option-matrix specs.
- e2e/types.d.ts: typed augmentation of Window for the new globals.
- e2e/package.json: adds @axe-core/playwright devDep.
- e2e/tests/helpers/selectors.ts: adds htmlDisabled and htmlPreview
  selectors; documents the .mu-disable-html-render flag class.

Phase 5 follow-ups captured in e2e/BACKLOG.md: triage non-critical
axe violations, label the host toolbar so the scan exclusion can
drop, tighten the focusMode spec once the render path applies the
marker class, add a MutationObserver leak guard, and wire a perf
lane against a production bundle.

Validation:
- pnpm e2e — 83 passed, 1 skipped (Phase 2 clipboard fixme).
- pnpm test — 386 passed (unit baseline untouched).
- pnpm exec eslint e2e — clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 e2e/BACKLOG.md                            |  44 ++++---
 e2e/host/main.ts                          |  45 ++++++--
 e2e/package.json                          |   1 +
 e2e/tests/a11y/host-scan.spec.ts          | 125 ++++++++++++++++++++
 e2e/tests/edges/empty-and-tiny.spec.ts    |  78 +++++++++++++
 e2e/tests/export/markdown-to-html.spec.ts | 117 +++++++++++++++++++
 e2e/tests/helpers/selectors.ts            |   4 +
 e2e/tests/options/autopair.spec.ts        | 134 ++++++++++++++++++++++
 e2e/tests/options/disable-html.spec.ts    |  71 ++++++++++++
 e2e/tests/options/focus-mode.spec.ts      |  53 +++++++++
 e2e/tests/options/spellcheck.spec.ts      |  23 ++++
 e2e/tests/stability/listener-leak.spec.ts | 108 +++++++++++++++++
 e2e/tests/stability/perf.spec.ts          |  70 +++++++++++
 e2e/types.d.ts                            |  14 ++-
 pnpm-lock.yaml                            |  19 +++
 15 files changed, 882 insertions(+), 24 deletions(-)
 create mode 100644 e2e/tests/a11y/host-scan.spec.ts
 create mode 100644 e2e/tests/edges/empty-and-tiny.spec.ts
 create mode 100644 e2e/tests/export/markdown-to-html.spec.ts
 create mode 100644 e2e/tests/options/autopair.spec.ts
 create mode 100644 e2e/tests/options/disable-html.spec.ts
 create mode 100644 e2e/tests/options/focus-mode.spec.ts
 create mode 100644 e2e/tests/options/spellcheck.spec.ts
 create mode 100644 e2e/tests/stability/listener-leak.spec.ts
 create mode 100644 e2e/tests/stability/perf.spec.ts

diff --git a/e2e/BACKLOG.md b/e2e/BACKLOG.md
index 598bbba2..c148c9e1 100644
--- a/e2e/BACKLOG.md
+++ b/e2e/BACKLOG.md
@@ -5,7 +5,7 @@
 | 1 | P0 smoke + key interaction skeleton (infra) | 28 (1 fixme) | ~3-4 min | ✅ landed |
 | 2 | Cross-browser matrix + drag/IME | +20 → 48 | +4-6 min | ⏳ pending |
 | 3 | Render depth + remaining blocks + security | +23 → 78 (1 fixme) | +2-3 min | ✅ landed |
-| 4 | Stability / performance / a11y guardrails | +25 → 98 | +3-5 min | ⏳ pending |
+| 4 | Stability / performance / a11y guardrails | +28 → 106 | +3-5 min | ✅ landed |
 
 Phase 1 baseline (PR landing snapshot):
 
@@ -81,32 +81,46 @@ Local runtime ~+2s on top of Phase 1 baseline.
 
 ### Listener-leak regression (PR-17 redux)
 
-- [ ] Loop `setContent` / `locale()` / `destroy()` + `new Muya()` 50× → assert `EventCenter` listener count stays bounded.
-- [ ] Snapshot `MutationObserver` count and listeners on `domNode`.
+- [x] Loop `setContent` / `locale()` / `destroy()` + `new Muya()` 50× → assert `EventCenter` listener count stays bounded. → `e2e/tests/stability/listener-leak.spec.ts`. Asserts on `eventCenter.events.length` (DOM listener array, NOT a Map as the original brief described) and `eventCenter.listeners` (custom pub/sub) — both stay within ±5 across 49 rebuild cycles.
+- [ ] Snapshot `MutationObserver` count and listeners on `domNode`. → deferred. muya doesn't currently expose any `MutationObserver` registration through the public API; would require an internal hook.
 
 ### Performance smoke
 
-- [ ] Construct 10 000-paragraph markdown → time `setContent` (< 5s budget on CI).
-- [ ] Scroll to bottom — first frame < 1 s.
+- [x] Construct 10 000-paragraph markdown → time `setContent`. → `e2e/tests/stability/perf.spec.ts`. Budget is currently 60 s (not the 5 s target the brief asked for) — local Chromium against the Vite dev server lands in ~20 s; the muya render path runs synchronous per-block. Phase 5 should tighten this against a production bundle.
+- [x] Scroll to bottom — last paragraph visible within 5 s.
 
 ### Accessibility
 
-- [ ] Add `@axe-core/playwright` devDep.
-- [ ] Scan the host page after init (clean state).
-- [ ] Scan with each floating plugin shown (IFT, slash, link tools, image tools, table tools, preview toolbar).
-- [ ] Fail on any `critical` violation; allow Phase 4 to start with the lowest tier (`serious+`) and tighten over time.
+- [x] Add `@axe-core/playwright` devDep.
+- [x] Scan the host page after init (clean state).
+- [x] Scan with each floating plugin shown (IFT, slash, link tools, image tools, table tools). PreviewToolBar covered in Phase 3.
+- [x] Fail on any `critical` violation. → `.exclude(['.tools'])` keeps test-harness toolbar markup out of the scan (it's unlabeled `<select>`/`<button>` only used by tests; not part of muya's a11y surface).
 
 ### Option matrix
 
-- [ ] `autoPairBracket` / `autoPairMarkdownSyntax` / `autoPairQuote` — full on/off matrix × representative input sequences (`(text`, `**text`, `"text`).
-- [ ] `focusMode: true` — toggle active paragraph, assert visual distinction.
-- [ ] `spellcheckEnabled` — assert `spellcheck` attribute reflects.
-- [ ] `disableHtml` — assert raw HTML stays unrendered.
+- [x] `autoPairBracket` / `autoPairMarkdownSyntax` / `autoPairQuote` — full on/off matrix × representative input sequences. → `e2e/tests/options/autopair.spec.ts`.
+- [x] `focusMode: true` — option round-trips. → `e2e/tests/options/focus-mode.spec.ts`. **Caveat:** `focusMode` is currently a no-op in the implementation: the option flag and `MU_FOCUS_MODE` class name exist, but no render path applies the class. The spec asserts the option survives the constructor and the editor still functions; once a render path lands, tighten the spec to assert the marker class.
+- [x] `spellcheckEnabled` — assert `spellcheck` attribute reflects. → `e2e/tests/options/spellcheck.spec.ts`.
+- [x] `disableHtml` — assert raw HTML stays unrendered. → `e2e/tests/options/disable-html.spec.ts`.
 
 ### Edge inputs
 
-- [ ] Empty document (`setContent('')`) — cursor placement, no crash.
-- [ ] Single-character document — cursor at index 0/1 correct.
+- [x] Empty document (`setContent('')`) — cursor placement, no crash.
+- [x] Single-character document — cursor at index 0/1 correct.
+- [x] 10× rapid setContent without awaits — final state matches the last call.
+
+### MarkdownToHtml static export
+
+- [x] Static export shape: heading, list, code-block, KaTeX class, mermaid container.
+- [x] Script-injection sanitised away by DOMPurify (no `<script>` survives `generate()`, mounting the output into the DOM does not execute the injected script).
+
+### Phase 4 follow-ups → Phase 5 idea bank
+
+- **a11y violations.** axe-core surfaced these non-critical findings during Phase 4 (logged in CI). Triage and either fix or document as known accepted: `landmark-one-main` (moderate), `region` (moderate), `scrollable-region-focusable` (serious), `page-has-heading-one` (moderate), `color-contrast` (serious, slash menu). The Phase 4 a11y bar is critical-only; Phase 5 should tighten to `serious+`.
+- **a11y of host test-harness toolbar.** `e2e/host/index.html`'s `.tools` block has unlabeled form controls (`<select id="language-select">` etc.) — excluded from axe scans in Phase 4. Add labels so we can drop the exclusion.
+- **Perf against production bundle.** Phase 4 perf spec runs against the Vite dev server (unbundled, no minification). 10k-paragraph `setContent` budget is 60s; against a production bundle the target should be the brief's original 5s. Wire a `vite build` + preview server option to e2e/ for a dedicated `@perf` lane.
+- **focusMode render path.** Surface `MU_FOCUS_MODE` class on the editor root when `focusMode: true`, then tighten `e2e/tests/options/focus-mode.spec.ts` to assert the visual marker.
+- **MutationObserver leak guard.** Extend the listener-leak spec to also count `MutationObserver` registrations once muya exposes that surface.
 
 ---
 
diff --git a/e2e/host/main.ts b/e2e/host/main.ts
index 4c6445d0..5eb4e161 100644
--- a/e2e/host/main.ts
+++ b/e2e/host/main.ts
@@ -11,6 +11,7 @@ import {
     InlineFormatToolbar,
     ja,
     LinkTools,
+    MarkdownToHtml,
     Muya,
     ParagraphFrontButton,
     ParagraphFrontMenu,
@@ -24,6 +25,7 @@ import {
 import './style.css';
 
 // Intl.Segmenter polyfill — required on Firefox; harmless on Chromium.
+// eslint-disable-next-line no-restricted-syntax -- forced cast: `Intl` is augmented globally in types.d.ts to declare `Segmenter`, but TS still types `globalThis.Intl` as `{}` for the runtime side. We narrow via a private alias rather than poking the global namespace from the polyfill site.
 const intlNs = Intl as unknown as { Segmenter?: typeof Intl.Segmenter };
 if (!intlNs.Segmenter) {
     const polyfill = await import('intl-segmenter-polyfill/dist/bundled');
@@ -79,16 +81,43 @@ const HOST_OPTIONS = {
     codeBlockLineNumbers: true,
 } satisfies Partial<IMuyaOptions>;
 
-const container = document.querySelector<HTMLElement>('#editor')!;
-const muya = new Muya(container, {
-    markdown: INITIAL_MARKDOWN,
-    ...HOST_OPTIONS,
-});
-muya.locale(en);
-muya.init();
+// `editor-container` parents the live `#editor` div. Phase 4 rebuilds
+// destroy → re-create the editor under this parent (the destroy() call
+// removes the previous #editor from the DOM, so we need a new node to
+// host the next Muya).
+const editorParent = document.querySelector<HTMLElement>('.editor-container')!;
+
+function makeEditorNode(): HTMLElement {
+    const node = document.createElement('div');
+    node.id = 'editor';
+    editorParent.appendChild(node);
+    return node;
+}
+
+function bootMuya(container: HTMLElement, options: Partial<IMuyaOptions>): Muya {
+    const next = new Muya(container, { markdown: INITIAL_MARKDOWN, ...options });
+    next.locale(en);
+    next.init();
+    return next;
+}
+
+const initialContainer = document.querySelector<HTMLElement>('#editor')!;
+let muya = bootMuya(initialContainer, HOST_OPTIONS);
 
 window.muya = muya;
-window.__e2e = { linkJumps, INITIAL_MARKDOWN, PICKED_IMAGE_URL, UPLOADED_IMAGE_URL };
+window.MarkdownToHtml = MarkdownToHtml;
+window.__e2e = {
+    linkJumps,
+    INITIAL_MARKDOWN,
+    PICKED_IMAGE_URL,
+    UPLOADED_IMAGE_URL,
+    rebuildMuya: (options: Partial<IMuyaOptions> = {}) => {
+        muya.destroy();
+        const fresh = makeEditorNode();
+        muya = bootMuya(fresh, { ...HOST_OPTIONS, ...options });
+        window.muya = muya;
+    },
+};
 
 // Toolbar wiring (mirrors the buttons declared in index.html).
 const $ = <T extends HTMLElement>(id: string): T => document.querySelector<T>(id)!;
diff --git a/e2e/package.json b/e2e/package.json
index 24e0cddc..bb5fbe21 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -18,6 +18,7 @@
         "intl-segmenter-polyfill": "^0.4.4"
     },
     "devDependencies": {
+        "@axe-core/playwright": "^4.10.0",
         "@playwright/test": "^1.50.0",
         "@types/node": "^22.10.0",
         "vite": "^8.0.13"
diff --git a/e2e/tests/a11y/host-scan.spec.ts b/e2e/tests/a11y/host-scan.spec.ts
new file mode 100644
index 00000000..0d23acd7
--- /dev/null
+++ b/e2e/tests/a11y/host-scan.spec.ts
@@ -0,0 +1,125 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '../fixtures/muya';
+import { slowType } from '../helpers/keyboard';
+import { editor, floats } from '../helpers/selectors';
+
+// `axe-core` is a transitive dep of `@axe-core/playwright`. We don't list it
+// as a direct dependency so we lift `Result` off the return type of
+// AxeBuilder().analyze() rather than importing `axe-core` directly.
+type IAxeViolation = Awaited<ReturnType<InstanceType<typeof AxeBuilder>['analyze']>>['violations'][number];
+
+/**
+ * Accessibility smoke. Phase 4 starts with the lowest tier — `critical`
+ * only — and tightens over time as we fix issues. Non-critical
+ * violations are surfaced via `console.log` in CI logs so Phase 5 can
+ * triage them.
+ *
+ * axe-core categorizes violations by `impact`: 'minor' | 'moderate' |
+ * 'serious' | 'critical'. We currently assert only on `critical` so
+ * Phase 4 lands green; Phase 5 should tighten to `serious+` once the
+ * known offenders (likely contrast/aria from third-party CSS) are
+ * filed as follow-ups.
+ *
+ * Scope: every scan EXCLUDES `.tools`, the host test-harness toolbar
+ * (it's just bare <select>/<button> markup with no labels — fixing it
+ * isn't on the muya editor's critical path). Excluding it keeps the
+ * focus on the editor + its mounted float plugins, which is the
+ * actually-shipped a11y surface. The host-toolbar violations are
+ * captured as Phase 5 follow-up in BACKLOG.
+ */
+
+const EXCLUDE_HOST_TOOLBAR = ['.tools'] as const;
+
+function criticalViolations(violations: ReadonlyArray<IAxeViolation>): IAxeViolation[] {
+    return violations.filter(v => v.impact === 'critical');
+}
+
+function logNonCritical(scope: string, violations: ReadonlyArray<IAxeViolation>): void {
+    if (violations.length > 0) {
+        // eslint-disable-next-line no-console -- CI log breadcrumb for Phase 5 triage
+        console.log(`[a11y/${scope}] non-critical violations:`, violations.map(v => `${v.id} (${v.impact})`).join(', '));
+    }
+}
+
+test.describe('a11y / host page scan', () => {
+    test('clean host page has no critical violations after init', async ({ page }) => {
+        const results = await new AxeBuilder({ page })
+            .exclude([...EXCLUDE_HOST_TOOLBAR])
+            .analyze();
+        const critical = criticalViolations(results.violations);
+        logNonCritical('clean', results.violations);
+        expect(critical, critical.length ? `critical: ${critical.map(v => v.id).join(', ')}` : '').toEqual([]);
+    });
+
+    test('inline format toolbar visible: no critical violations', async ({ page }) => {
+        // Select text in the host's initial markdown to surface the IFT.
+        await page.locator(editor.paragraph).first().click();
+        await page.keyboard.press('Home');
+        await page.keyboard.down('Shift');
+        await page.keyboard.press('End');
+        await page.keyboard.up('Shift');
+        await expect(page.locator(floats.inlineFormatToolbar)).toBeVisible();
+
+        const results = await new AxeBuilder({ page }).exclude([...EXCLUDE_HOST_TOOLBAR]).analyze();
+        const critical = criticalViolations(results.violations);
+        logNonCritical('ift', results.violations);
+        expect(critical, critical.length ? `critical: ${critical.map(v => v.id).join(', ')}` : '').toEqual([]);
+    });
+
+    test('slash menu open: no critical violations', async ({ page }) => {
+        await page.evaluate(() => window.muya!.setContent(''));
+        await page.locator(editor.paragraph).first().click();
+        await page.keyboard.type('/');
+        await expect(page.locator(floats.quickInsert)).toBeVisible();
+
+        const results = await new AxeBuilder({ page }).exclude([...EXCLUDE_HOST_TOOLBAR]).analyze();
+        const critical = criticalViolations(results.violations);
+        logNonCritical('slash', results.violations);
+        expect(critical, critical.length ? `critical: ${critical.map(v => v.id).join(', ')}` : '').toEqual([]);
+    });
+
+    test('link tools floating popup: no critical violations', async ({ page }) => {
+        await page.evaluate(() => {
+            window.muya!.setContent('A [link](https://example.com) here.');
+        });
+        await page.locator(editor.paragraph).first().click({ position: { x: 2, y: 2 } });
+        await page.locator('span.mu-link').first().hover();
+        await expect(page.locator(floats.linkTools)).toBeVisible();
+
+        const results = await new AxeBuilder({ page }).exclude([...EXCLUDE_HOST_TOOLBAR]).analyze();
+        const critical = criticalViolations(results.violations);
+        logNonCritical('link-tools', results.violations);
+        expect(critical, critical.length ? `critical: ${critical.map(v => v.id).join(', ')}` : '').toEqual([]);
+    });
+
+    test('image toolbar visible after clicking an image: no critical violations', async ({ page }) => {
+        await page.evaluate(() => {
+            window.muya!.setContent('![alt](https://example.test/host-img.png "t")');
+        });
+        const image = page.locator(editor.image).first();
+        await expect(image).toBeVisible();
+        await image.click();
+
+        const results = await new AxeBuilder({ page }).exclude([...EXCLUDE_HOST_TOOLBAR]).analyze();
+        const critical = criticalViolations(results.violations);
+        logNonCritical('image-tools', results.violations);
+        expect(critical, critical.length ? `critical: ${critical.map(v => v.id).join(', ')}` : '').toEqual([]);
+    });
+
+    test('table tools visible after clicking into a table cell: no critical violations', async ({ page }) => {
+        await page.evaluate(() => {
+            window.muya!.setContent('| h1 | h2 |\n| --- | --- |\n| a | b |');
+        });
+        const table = page.locator(editor.table).first();
+        await expect(table).toBeVisible();
+        // Click into a body cell — both TableDragBar and TableColumnToolbar
+        // mount their floats but only become visible on cell focus / hover.
+        await table.locator('td').first().click();
+        await slowType(page, 'x');
+
+        const results = await new AxeBuilder({ page }).exclude([...EXCLUDE_HOST_TOOLBAR]).analyze();
+        const critical = criticalViolations(results.violations);
+        logNonCritical('table-tools', results.violations);
+        expect(critical, critical.length ? `critical: ${critical.map(v => v.id).join(', ')}` : '').toEqual([]);
+    });
+});
diff --git a/e2e/tests/edges/empty-and-tiny.spec.ts b/e2e/tests/edges/empty-and-tiny.spec.ts
new file mode 100644
index 00000000..094065a6
--- /dev/null
+++ b/e2e/tests/edges/empty-and-tiny.spec.ts
@@ -0,0 +1,78 @@
+import { expect, test } from '../fixtures/muya';
+import { getMarkdown } from '../helpers/api';
+import { editor } from '../helpers/selectors';
+
+/**
+ * Edge inputs — degenerate documents and rapid mutation. Verifies the
+ * editor doesn't crash, leaves the cursor in a sane place, and survives
+ * back-to-back setContent calls without state corruption.
+ */
+test.describe('edges / empty and tiny documents', () => {
+    test('setContent("") leaves a single empty paragraph and no crash', async ({ page }) => {
+        await page.evaluate(() => window.muya!.setContent(''));
+
+        // muya normalizes the empty input to one empty paragraph block.
+        const state = await page.evaluate(() => window.muya!.getState() as Array<{ name: string; text?: string }>);
+        expect(state.length).toBeGreaterThan(0);
+        // The first block should be a paragraph with empty (or absent) text.
+        expect(state[0].name).toBe('paragraph');
+        expect((state[0].text ?? '').length).toBe(0);
+
+        // A paragraph block is rendered in the DOM, and can be focused.
+        await expect(page.locator(editor.paragraph).first()).toBeVisible();
+        await page.locator(editor.paragraph).first().click();
+
+        // Editor is alive: typing a single character lands in state.
+        await page.keyboard.type('x');
+        await expect(page.locator(editor.paragraph).first()).toContainText('x');
+        const md = await getMarkdown(page);
+        expect(md.trim()).toBe('x');
+    });
+
+    test('setContent("a") — single character round-trips and cursor is valid', async ({ page }) => {
+        await page.evaluate(() => window.muya!.setContent('a'));
+
+        const state = await page.evaluate(() => window.muya!.getState() as Array<{ name: string; text?: string }>);
+        expect(state.length).toBe(1);
+        expect(state[0].name).toBe('paragraph');
+        expect(state[0].text).toBe('a');
+
+        await expect(page.locator(editor.paragraph).first()).toContainText('a');
+        await page.locator(editor.paragraph).first().click();
+
+        // After clicking into the paragraph, document.getSelection() exposes
+        // anchor/focus offsets — both should be a finite, non-negative number.
+        const sel = await page.evaluate(() => {
+            const s = window.getSelection();
+            if (s == null)
+                return null;
+            return {
+                anchorOffset: s.anchorOffset,
+                focusOffset: s.focusOffset,
+                isCollapsed: s.isCollapsed,
+            };
+        });
+        expect(sel).not.toBeNull();
+        expect(sel!.anchorOffset).toBeGreaterThanOrEqual(0);
+        expect(sel!.focusOffset).toBeGreaterThanOrEqual(0);
+        // Cursor lands at 0 or 1 (either end of the one-char content).
+        expect(sel!.anchorOffset).toBeLessThanOrEqual(1);
+    });
+
+    test('10× rapid setContent without awaiting — final state matches the last call', async ({ page }) => {
+        // All ten setContent calls happen in one synchronous JS turn — no
+        // awaits, no microtask between them. The editor must end up in the
+        // state of the last call with no leftover artifacts of the prior nine.
+        await page.evaluate(() => {
+            for (let i = 0; i < 10; i++)
+                window.muya!.setContent(`# round ${i}`);
+        });
+
+        const md = await getMarkdown(page);
+        expect(md.trim()).toBe('# round 9');
+
+        const headings = await page.locator(editor.atxHeading).count();
+        expect(headings).toBe(1);
+        await expect(page.locator(editor.atxHeading).first()).toContainText('round 9');
+    });
+});
diff --git a/e2e/tests/export/markdown-to-html.spec.ts b/e2e/tests/export/markdown-to-html.spec.ts
new file mode 100644
index 00000000..940f9d79
--- /dev/null
+++ b/e2e/tests/export/markdown-to-html.spec.ts
@@ -0,0 +1,117 @@
+import { expect, test } from '../fixtures/muya';
+
+/**
+ * Public `MarkdownToHtml` static-export class. Host exposes it on
+ * `window.MarkdownToHtml`. The class returns a full
+ * `<!DOCTYPE html>…</html>` document from `generate()` with the rendered
+ * markdown body wrapped in `<article class="markdown-body">`. Sanitisation
+ * is handled by DOMPurify inside `renderHtml`.
+ *
+ * Sanity check: this is the SAME pipeline that ships to consumers, so
+ * we want to verify it for shape AND for XSS safety.
+ */
+
+const SAMPLE_MARKDOWN = `# Heading
+
+- one
+- two
+- three
+
+\`\`\`js
+const x = 1;
+\`\`\`
+
+$$a \\ne b$$
+`;
+
+test.describe('export / MarkdownToHtml', () => {
+    test('window.MarkdownToHtml is exposed by the host', async ({ page }) => {
+        const isClass = await page.evaluate(() => typeof window.MarkdownToHtml === 'function');
+        expect(isClass).toBe(true);
+    });
+
+    test('generate() emits heading, list, code-block, and KaTeX markup', async ({ page }) => {
+        const html = await page.evaluate(async (md) => {
+            // Cast away the optional — the previous test asserts presence.
+            const instance = new window.MarkdownToHtml!(md);
+            return instance.generate();
+        }, SAMPLE_MARKDOWN);
+
+        expect(html).toMatch(/<!DOCTYPE html>/i);
+        // Body markup is wrapped in <article class="markdown-body">
+        expect(html).toContain('<article class="markdown-body">');
+        // Heading rendered.
+        expect(html).toMatch(/<h1[^>]*>\s*Heading\s*<\/h1>/);
+        // Unordered list rendered (three list items).
+        expect(html).toContain('<ul>');
+        expect(html).toContain('one');
+        expect(html).toContain('two');
+        expect(html).toContain('three');
+        // Fenced code-block rendered as <pre><code>.
+        expect(html).toMatch(/<pre><code[^>]*>/);
+        // KaTeX math rendering produces a katex span class on the math
+        // node. We assert on the substring rather than parsing, since
+        // KaTeX HTML structure is intricate.
+        expect(html).toContain('katex');
+    });
+
+    test('mermaid diagram input renders a mermaid container', async ({ page }) => {
+        // A fenced code block with `mermaid` language is the standard
+        // mermaid input shape. MarkdownToHtml::renderMermaid promotes
+        // it to a `<div class="mermaid">` post-process, then runs the
+        // mermaid renderer over it.
+        const mermaidMd = `\`\`\`mermaid\ngraph TD; A-->B;\n\`\`\`\n`;
+        const html = await page.evaluate(async (md) => {
+            const instance = new window.MarkdownToHtml!(md);
+            return instance.generate();
+        }, mermaidMd);
+
+        // After mermaid.run, the container either holds an SVG or the
+        // original .mermaid div (when the renderer no-ops on parse
+        // failure). Either way the class survives the pipeline.
+        expect(html).toMatch(/class="mermaid"|<svg/);
+    });
+
+    test('script injection: <script> tag is sanitised away and does not execute', async ({ page }) => {
+        // Crucial XSS guarantee. The markdown payload below would, if
+        // unsanitised, cause `window.__exported = true` on the host
+        // page (we don't insert the output into the DOM, but a script
+        // could still execute via inline event handlers).
+        const xssMd = `# Hello\n\nbefore <script>(window).__exported = true;<\/script> after\n`;
+
+        // Clear the sentinel first.
+        await page.evaluate(() => {
+            (window as Window & { __exported?: boolean }).__exported = false;
+        });
+
+        const html = await page.evaluate(async (md) => {
+            const instance = new window.MarkdownToHtml!(md);
+            return instance.generate();
+        }, xssMd);
+
+        // No `<script>` in the output (case-insensitive — DOMPurify
+        // returns lowercase tag names but the original could be mixed).
+        expect(html.toLowerCase()).not.toContain('<script');
+
+        // Insert the output's <article> body into a sandboxed div in the
+        // host page and confirm no script side-effect. Pulls just the
+        // <article>...</article> chunk to skip the <head><script> link
+        // tags MarkdownToHtml wraps around the body.
+        const sideEffect = await page.evaluate((generated) => {
+            const articleMatch = generated.match(/<article[\s\S]*?<\/article>/i);
+            if (!articleMatch)
+                return { mounted: false, exported: undefined as boolean | undefined };
+            const wrapper = document.createElement('div');
+            wrapper.style.display = 'none';
+            wrapper.innerHTML = articleMatch[0];
+            document.body.appendChild(wrapper);
+            const exported = (window as Window & { __exported?: boolean }).__exported;
+            wrapper.remove();
+            return { mounted: true, exported };
+        }, html);
+
+        expect(sideEffect.mounted).toBe(true);
+        // The original payload should not have flipped the sentinel.
+        expect(sideEffect.exported).toBe(false);
+    });
+});
diff --git a/e2e/tests/helpers/selectors.ts b/e2e/tests/helpers/selectors.ts
index f68e7623..cbbbcd96 100644
--- a/e2e/tests/helpers/selectors.ts
+++ b/e2e/tests/helpers/selectors.ts
@@ -24,6 +24,10 @@ export const editor = {
     tableCell: '.mu-table-cell',
     htmlBlock: '.mu-html-block',
     htmlPreview: '.mu-html-preview',
+    // When `disableHtml: true`, the html-block wrapper carries an extra
+    // class so syntax-highlight CSS knows not to render the preview. Source
+    // of truth: packages/core/src/block/commonMark/html/index.ts.
+    htmlDisabled: '.mu-disable-html-render',
     mathBlock: '.mu-math-block',
     mathRender: '.mu-math-render',
     katex: '.katex',
diff --git a/e2e/tests/options/autopair.spec.ts b/e2e/tests/options/autopair.spec.ts
new file mode 100644
index 00000000..1878b996
--- /dev/null
+++ b/e2e/tests/options/autopair.spec.ts
@@ -0,0 +1,134 @@
+import type { IMuyaOptions } from '@muyajs/core';
+import type { Page } from '@playwright/test';
+import { expect, test } from '../fixtures/muya';
+import { getMarkdown } from '../helpers/api';
+import { editor } from '../helpers/selectors';
+
+/**
+ * Auto-pair option matrix.
+ *
+ * Behaviour we exercise (from `packages/core/src/block/base/content.ts`):
+ *   - `autoPairBracket`     — typing `(`, `[`, `{` inserts the matching close
+ *     when the cursor is at end-of-line or before whitespace.
+ *   - `autoPairMarkdownSyntax` — typing `*`, `_`, `` ` ``, `$`, `~` pairs the marker.
+ *   - `autoPairQuote`       — typing `"` (or `'` after non-word) pairs the quote.
+ *
+ * For each (option-on, option-off) variant we rebuild Muya via the host
+ * helper `window.__e2e.rebuildMuya(...)` so the constructor option is
+ * actually consumed (the option is read inside autoPair from
+ * `this.muya.options`, captured at constructor time).
+ */
+
+/**
+ * Rebuild Muya with the given options, then click into a fresh
+ * paragraph and wait for the editor to register the click — only after
+ * `activeContentBlock` is non-null is it safe to fire keyboard input.
+ * Without this sync barrier the test is flaky on parallel CI runs
+ * because the click can race with the editor's mount.
+ */
+async function rebuildAndFocus(page: Page, opts: Partial<IMuyaOptions>): Promise<void> {
+    await page.evaluate((o) => {
+        window.__e2e!.rebuildMuya(o);
+        window.muya!.setContent('');
+    }, opts);
+    const paragraph = page.locator(editor.paragraph).first();
+    await expect(paragraph).toBeVisible();
+    await paragraph.click();
+    await page.waitForFunction(() => window.muya!.editor.activeContentBlock != null);
+}
+
+async function getFirstBlockText(page: Page): Promise<string> {
+    return page.evaluate(() => {
+        const state = window.muya!.getState() as Array<{ text?: string }>;
+        return state[0]?.text ?? '';
+    });
+}
+
+test.describe('options / auto-pair matrix', () => {
+    test('autoPairBracket: on → `(` produces `()`', async ({ page }) => {
+        await rebuildAndFocus(page, {
+            autoPairBracket: true,
+            autoPairMarkdownSyntax: false,
+            autoPairQuote: false,
+        });
+        await page.keyboard.type('(');
+        await expect(page.locator(editor.paragraph).first()).toContainText('()');
+        const md = await getMarkdown(page);
+        expect(md).toContain('()');
+    });
+
+    test('autoPairBracket: off → `(` produces `(` only', async ({ page }) => {
+        await rebuildAndFocus(page, {
+            autoPairBracket: false,
+            autoPairMarkdownSyntax: false,
+            autoPairQuote: false,
+        });
+        await page.keyboard.type('(');
+        await expect(page.locator(editor.paragraph).first()).toContainText('(');
+        expect(await getFirstBlockText(page)).toBe('(');
+    });
+
+    test('autoPairMarkdownSyntax: on → `*` produces `**`', async ({ page }) => {
+        await rebuildAndFocus(page, {
+            autoPairBracket: false,
+            autoPairMarkdownSyntax: true,
+            autoPairQuote: false,
+        });
+        await page.keyboard.type('*');
+        // Wait for state to reflect the paired insertion.
+        await expect.poll(() => getFirstBlockText(page)).toBe('**');
+    });
+
+    test('autoPairMarkdownSyntax: off → `*` stays single', async ({ page }) => {
+        await rebuildAndFocus(page, {
+            autoPairBracket: false,
+            autoPairMarkdownSyntax: false,
+            autoPairQuote: false,
+        });
+        await page.keyboard.type('*');
+        await expect.poll(() => getFirstBlockText(page)).toBe('*');
+    });
+
+    test('autoPairQuote: on → `"` produces `""`', async ({ page }) => {
+        await rebuildAndFocus(page, {
+            autoPairBracket: false,
+            autoPairMarkdownSyntax: false,
+            autoPairQuote: true,
+        });
+        await page.keyboard.type('"');
+        await expect.poll(() => getFirstBlockText(page)).toBe('""');
+    });
+
+    test('autoPairQuote: off → `"` stays single', async ({ page }) => {
+        await rebuildAndFocus(page, {
+            autoPairBracket: false,
+            autoPairMarkdownSyntax: false,
+            autoPairQuote: false,
+        });
+        await page.keyboard.type('"');
+        await expect.poll(() => getFirstBlockText(page)).toBe('"');
+    });
+
+    test('all-off combo: no pairing happens for any of `(`, `*`, `"`', async ({ page }) => {
+        await rebuildAndFocus(page, {
+            autoPairBracket: false,
+            autoPairMarkdownSyntax: false,
+            autoPairQuote: false,
+        });
+        await page.keyboard.type('(');
+        await expect.poll(() => getFirstBlockText(page)).toBe('(');
+
+        // Reset paragraph and re-focus for the next char.
+        await page.evaluate(() => window.muya!.setContent(''));
+        await page.locator(editor.paragraph).first().click();
+        await page.waitForFunction(() => window.muya!.editor.activeContentBlock != null);
+        await page.keyboard.type('*');
+        await expect.poll(() => getFirstBlockText(page)).toBe('*');
+
+        await page.evaluate(() => window.muya!.setContent(''));
+        await page.locator(editor.paragraph).first().click();
+        await page.waitForFunction(() => window.muya!.editor.activeContentBlock != null);
+        await page.keyboard.type('"');
+        await expect.poll(() => getFirstBlockText(page)).toBe('"');
+    });
+});
diff --git a/e2e/tests/options/disable-html.spec.ts b/e2e/tests/options/disable-html.spec.ts
new file mode 100644
index 00000000..c7dcb71d
--- /dev/null
+++ b/e2e/tests/options/disable-html.spec.ts
@@ -0,0 +1,71 @@
+import type { TState } from '@muyajs/core';
+import { expect, test } from '../fixtures/muya';
+import { editor } from '../helpers/selectors';
+
+/**
+ * `disableHtml: true` option.
+ *
+ * Source of truth: `packages/core/src/block/commonMark/html/index.ts`
+ * pushes the `mu-disable-html-render` class onto the html-block element,
+ * and `packages/core/src/utils/index.ts::sanitize` escapes the HTML
+ * before passing it through DOMPurify when the flag is set. The
+ * combined effect is that markup inside an html-block is shown as
+ * source rather than rendered as live HTML.
+ *
+ * What we verify:
+ *   1. The wrapper div gets the `mu-disable-html-render` class.
+ *   2. The preview pane's `innerHTML` does NOT contain a parsed
+ *      `<div class="injected">` (which would mean the HTML rendered).
+ *      Instead, the escaped source must appear as text.
+ */
+test.describe('options / disableHtml', () => {
+    test('disableHtml: true — html block is flagged and HTML is not rendered live', async ({ page }) => {
+        await page.evaluate(() => {
+            window.__e2e!.rebuildMuya({ disableHtml: true });
+            // setContent with a top-level html block. The IHtmlBlockState
+            // shape is `{ name: 'html-block', text: '<div ...>...</div>' }`.
+            window.muya!.setContent([{
+                name: 'html-block',
+                text: '<div class="injected"><span class="inside">payload</span></div>',
+            }] as TState[]);
+        });
+
+        // The html-block wrapper carries both `.mu-html-block` and the
+        // `.mu-disable-html-render` flag class.
+        const wrapper = page.locator(editor.htmlBlock).first();
+        await expect(wrapper).toBeVisible();
+        await expect(wrapper).toHaveClass(/mu-disable-html-render/);
+
+        // The preview pane should not contain a parsed .injected div —
+        // its text-content should show the escaped tags instead.
+        const preview = wrapper.locator(editor.htmlPreview);
+        // The preview innerHTML must not contain the live `<div class="injected">`.
+        const previewInnerHtml = await preview.evaluate(el => el.innerHTML);
+        expect(previewInnerHtml).not.toContain('<div class="injected">');
+        // Visible text should contain the raw markup (entity-escaped) — at
+        // minimum the tag name and the payload word.
+        await expect(preview).toContainText('payload');
+        await expect(preview).toContainText('div');
+    });
+
+    test('disableHtml: false (default) — same content renders the inner <div>', async ({ page }) => {
+        await page.evaluate(() => {
+            window.__e2e!.rebuildMuya({ disableHtml: false });
+            window.muya!.setContent([{
+                name: 'html-block',
+                text: '<div class="injected"><span class="inside">payload</span></div>',
+            }] as TState[]);
+        });
+
+        const wrapper = page.locator(editor.htmlBlock).first();
+        await expect(wrapper).toBeVisible();
+        // The disable class must NOT be present.
+        const className = await wrapper.evaluate(el => el.className);
+        expect(className).not.toContain('mu-disable-html-render');
+
+        // Preview should contain a real .injected div in its parsed DOM.
+        const preview = wrapper.locator(editor.htmlPreview);
+        const injected = preview.locator('.injected');
+        await expect(injected).toHaveCount(1);
+    });
+});
diff --git a/e2e/tests/options/focus-mode.spec.ts b/e2e/tests/options/focus-mode.spec.ts
new file mode 100644
index 00000000..138f0298
--- /dev/null
+++ b/e2e/tests/options/focus-mode.spec.ts
@@ -0,0 +1,53 @@
+import { expect, test } from '../fixtures/muya';
+import { editor } from '../helpers/selectors';
+
+/**
+ * `focusMode: true` constructor option.
+ *
+ * Current state of the codebase: `focusMode` is declared in
+ * `IMuyaOptions`, defaulted to `false`, and reserved a class name
+ * `CLASS_NAMES.MU_FOCUS_MODE` ('mu-focus-mode') — but no code path
+ * actually applies that class to the DOM when the option is enabled.
+ * This makes focus-mode currently a no-op option.
+ *
+ * What this spec asserts (the option *is* respected by the constructor):
+ *   1. `new Muya(container, { focusMode: true })` boots without crashing.
+ *   2. `muya.options.focusMode === true` after rebuild.
+ *   3. The active paragraph can still be focused and typed into.
+ *
+ * What this spec deliberately does NOT assert: a visual marker on
+ * non-active paragraphs. There is no such marker today. See BACKLOG
+ * Phase 5 follow-up — once focus-mode renders a marker class, this
+ * spec should be tightened to assert it.
+ */
+test.describe('options / focus-mode', () => {
+    test('focusMode: true — rebuild boots, option reflected, editor usable', async ({ page }) => {
+        await page.evaluate(() => {
+            window.__e2e!.rebuildMuya({ focusMode: true });
+            window.muya!.setContent('# heading\n\nparagraph A\n\nparagraph B\n');
+        });
+        const focusModeOption = await page.evaluate(() => window.muya!.options.focusMode);
+        expect(focusModeOption).toBe(true);
+
+        // Sanity: editor renders multiple blocks and can be focused.
+        await expect(page.locator(editor.atxHeading).first()).toBeVisible();
+        await expect(page.locator(editor.paragraph).nth(0)).toContainText('paragraph A');
+        await expect(page.locator(editor.paragraph).nth(1)).toContainText('paragraph B');
+
+        // Click into paragraph B; the editor should remain alive.
+        await page.locator(editor.paragraph).nth(1).click();
+        const focused = await page.evaluate(() => {
+            const active = window.muya!.editor.activeContentBlock;
+            return active != null;
+        });
+        expect(focused).toBe(true);
+    });
+
+    test('focusMode: false (default) — option reflected as false', async ({ page }) => {
+        await page.evaluate(() => {
+            window.__e2e!.rebuildMuya({ focusMode: false });
+        });
+        const value = await page.evaluate(() => window.muya!.options.focusMode);
+        expect(value).toBe(false);
+    });
+});
diff --git a/e2e/tests/options/spellcheck.spec.ts b/e2e/tests/options/spellcheck.spec.ts
new file mode 100644
index 00000000..7bd0255f
--- /dev/null
+++ b/e2e/tests/options/spellcheck.spec.ts
@@ -0,0 +1,23 @@
+import { expect, test } from '../fixtures/muya';
+import { editor } from '../helpers/selectors';
+
+/**
+ * `spellcheckEnabled` option.
+ *
+ * Source of truth: `packages/core/src/muya.ts::getContainer` sets
+ * `newContainer.setAttribute('spellcheck', spellcheckEnabled ? 'true' : 'false')`
+ * at editor construction. The attribute is on the `.mu-editor` root.
+ */
+test.describe('options / spellcheck', () => {
+    test('spellcheckEnabled: true → editor root has spellcheck="true"', async ({ page }) => {
+        await page.evaluate(() => window.__e2e!.rebuildMuya({ spellcheckEnabled: true }));
+        const value = await page.locator(editor.root).getAttribute('spellcheck');
+        expect(value).toBe('true');
+    });
+
+    test('spellcheckEnabled: false → editor root has spellcheck="false"', async ({ page }) => {
+        await page.evaluate(() => window.__e2e!.rebuildMuya({ spellcheckEnabled: false }));
+        const value = await page.locator(editor.root).getAttribute('spellcheck');
+        expect(value).toBe('false');
+    });
+});
diff --git a/e2e/tests/stability/listener-leak.spec.ts b/e2e/tests/stability/listener-leak.spec.ts
new file mode 100644
index 00000000..5654e786
--- /dev/null
+++ b/e2e/tests/stability/listener-leak.spec.ts
@@ -0,0 +1,108 @@
+import { expect, test } from '../fixtures/muya';
+
+/**
+ * Direct regression test for the EventCenter listener-leak fix in PR-17
+ * (commit 39852a6). The bug: muya.destroy() detached DOM events but did
+ * NOT clear the custom pub/sub `listeners` map, so blocks from the
+ * destroyed instance kept their closures referenced via on()/once()
+ * subscriptions — a hot rebuild loop (e.g. theme toggle, locale switch)
+ * would grow listener arrays unboundedly.
+ *
+ * The fix added `unsubscribeAll()` to EventCenter and a call to it from
+ * Muya.destroy(). This spec exercises that path 50× and asserts the
+ * listener-array footprint stays bounded.
+ *
+ * Snapshot field shapes (see packages/core/src/event/index.ts):
+ *   - `events`: Array<{ eventId, target, event, listener, capture }>
+ *     — DOM listeners. Cleared by detachAllDomEvents().
+ *   - `listeners`: Record<eventName, Array<{ listener, once }>>
+ *     — pub/sub subscriptions. Cleared by unsubscribeAll(). This is
+ *     where the original leak lived.
+ *
+ * Note: the BACKLOG description referred to a `Map` named `events`, but
+ * the actual implementation uses an `IEvent[]` array. The leak target
+ * is `listeners` (the custom pub/sub), not `events` (DOM bindings).
+ * Both are asserted below.
+ */
+test.describe('stability / listener leak', () => {
+    test('50× setContent/locale/destroy/init cycle keeps listener count bounded', async ({ page }) => {
+        // First, snapshot the counts right after the host's initial boot
+        // (before the loop runs). The fixture has already waited for
+        // muya.init() to finish, so this is a clean baseline.
+        const baseline = await page.evaluate(() => ({
+            domEvents: window.muya!.eventCenter.events.length,
+            listenerEventNames: Object.keys(window.muya!.eventCenter.listeners).length,
+            listenerTotal: Object.values(window.muya!.eventCenter.listeners)
+                .reduce((sum, arr) => sum + arr.length, 0),
+        }));
+
+        // Capture snapshot after iteration #1 (the first rebuild) so we
+        // compare against a *rebuilt* baseline, not the host's initial
+        // boot — the host registers UI plugins that bind extra DOM
+        // listeners only on first init.
+        let afterIter1: typeof baseline | null = null;
+
+        // Loop 50× — single page.evaluate so we don't pay the
+        // Playwright<->page roundtrip cost on every iteration. Three
+        // throw-away locale objects suffice for the "switch locale 3
+        // ways" requirement — content doesn't matter because the bug
+        // we're guarding against is the *count* of listeners retained
+        // across destroy, not what the locale resources do.
+        const afterLoop = await page.evaluate(({ baselineDomEvents }) => {
+            const stubLocales = [
+                { name: 'stub-a', resource: { hello: 'A' } },
+                { name: 'stub-b', resource: { hello: 'B' } },
+                { name: 'stub-c', resource: { hello: 'C' } },
+            ];
+
+            const snapshots: Array<{ domEvents: number; listenerTotal: number; listenerEventNames: number }> = [];
+
+            for (let i = 0; i < 50; i++) {
+                window.muya!.setContent('foo');
+                window.muya!.setContent('bar');
+                window.muya!.locale(stubLocales[0]);
+                window.muya!.locale(stubLocales[1]);
+                window.muya!.locale(stubLocales[2]);
+                window.__e2e!.rebuildMuya();
+
+                if (i === 0 || i === 49) {
+                    snapshots.push({
+                        domEvents: window.muya!.eventCenter.events.length,
+                        listenerEventNames: Object.keys(window.muya!.eventCenter.listeners).length,
+                        listenerTotal: Object.values(window.muya!.eventCenter.listeners)
+                            .reduce((sum, arr) => sum + arr.length, 0),
+                    });
+                }
+            }
+
+            return { iter1: snapshots[0], iter50: snapshots[1], baselineDomEvents };
+        }, { baselineDomEvents: baseline.domEvents });
+
+        afterIter1 = afterLoop.iter1;
+        const afterIter50 = afterLoop.iter50;
+
+        // Sanity: both snapshots actually captured something.
+        expect(afterIter1).not.toBeNull();
+        expect(afterIter50).not.toBeNull();
+
+        // Core regression assertion: the listener-total must not grow
+        // unboundedly across 49 rebuild cycles. ±5 is the leak budget
+        // from the task spec — generous enough to absorb stable per-instance
+        // setup differences but tight enough to catch a true leak (the
+        // original bug would have grown by ~hundreds over 50 iterations).
+        const delta = Math.abs(afterIter50.listenerTotal - afterIter1.listenerTotal);
+        expect(delta, `listener total grew by ${delta} over 49 rebuilds (iter1=${afterIter1.listenerTotal}, iter50=${afterIter50.listenerTotal})`).toBeLessThanOrEqual(5);
+
+        // DOM events array also shouldn't grow unboundedly. After each
+        // destroy() detachAllDomEvents resets it to []; the new instance
+        // re-binds focus/blur and the floats re-attach their handlers.
+        // A fresh instance has a fixed-size set of DOM bindings.
+        const domDelta = Math.abs(afterIter50.domEvents - afterIter1.domEvents);
+        expect(domDelta, `domEvents grew by ${domDelta} (iter1=${afterIter1.domEvents}, iter50=${afterIter50.domEvents})`).toBeLessThanOrEqual(5);
+
+        // Tail of distinct event names (Object.keys of listeners) must not
+        // grow either — each new instance subscribes to the same set.
+        const namesDelta = Math.abs(afterIter50.listenerEventNames - afterIter1.listenerEventNames);
+        expect(namesDelta).toBeLessThanOrEqual(2);
+    });
+});
diff --git a/e2e/tests/stability/perf.spec.ts b/e2e/tests/stability/perf.spec.ts
new file mode 100644
index 00000000..3afa597d
--- /dev/null
+++ b/e2e/tests/stability/perf.spec.ts
@@ -0,0 +1,70 @@
+import { expect, test } from '../fixtures/muya';
+import { editor } from '../helpers/selectors';
+
+/**
+ * Perf smoke: not a benchmark, just a regression guard. The 10k-paragraph
+ * setContent benchmark is intentionally large enough that any quadratic
+ * regression on the render path lights up loudly; the wall-clock budgets
+ * are generous so CI variance doesn't cause flakes.
+ *
+ * Observed numbers (local Chromium against the Vite dev server, M-class
+ * macOS) at PR-4 baseline:
+ *   - setContent(10000 paragraphs): ~20s wall clock. Yes, slow — muya
+ *     re-renders synchronously per block via snabbdom and the Vite dev
+ *     server adds unbundled-module overhead. Bundled production builds
+ *     are materially faster, but we test against the dev server here.
+ *   - scrollIntoView + last paragraph visible: well under 1s.
+ *
+ * Budget = 60_000ms (= the per-test timeout in playwright.config). The
+ * goal is to catch a 5-10× regression on this path, not to pin a number.
+ * A future Phase-5 nightly job can tighten this against a production
+ * build.
+ *
+ * Tagged @perf so a future Phase-2 CI config can `--grep-invert "@perf"`
+ * for the PR-time runs and keep this in a nightly schedule.
+ */
+test.describe('stability / perf smoke @perf', () => {
+    // The setContent of 10k paragraphs alone routinely takes 15-25s on the
+    // Vite dev server, which exceeds the default 30s suite timeout. Bump
+    // the per-test timeout for this spec only.
+    test.setTimeout(120_000);
+
+    test('setContent with 10k paragraphs finishes within the budget and scroll is reachable', async ({ page }) => {
+        // 10k short paragraphs joined with the blank-line separator marked
+        // requires for distinct paragraph nodes. Building the string from
+        // inside page.evaluate avoids transferring a multi-MB payload
+        // across the Playwright IPC channel for every retry.
+        const result = await page.evaluate(() => {
+            const N = 10_000;
+            const lines: string[] = [];
+            for (let i = 0; i < N; i++)
+                lines.push(`paragraph ${i}`);
+            const md = lines.join('\n\n');
+
+            const t0 = performance.now();
+            window.muya!.setContent(md);
+            const t1 = performance.now();
+
+            return { ms: t1 - t0, n: N };
+        });
+
+        // Wide budget — see file header. Tighten once we have a baseline.
+        expect(result.ms, `setContent(${result.n} paragraphs) took ${result.ms.toFixed(0)}ms`).toBeLessThan(60_000);
+
+        // Confirm the DOM actually rendered the count we asked for.
+        // `count()` walks the page synchronously — we use it once here
+        // (not in a polling expect) because rendering completes inside
+        // setContent's synchronous call path.
+        const paragraphCount = await page.locator(editor.paragraph).count();
+        expect(paragraphCount).toBe(result.n);
+
+        // Scroll the last paragraph into view and assert it becomes
+        // visible within 5s. The .last() chain selects the bottom of
+        // the 10k-paragraph tree. 5s allows for a slow CI runner — the
+        // task spec asks for 1s on a fast box; in practice paint after
+        // scroll lands in tens of ms.
+        const lastParagraph = page.locator(editor.paragraph).last();
+        await lastParagraph.scrollIntoViewIfNeeded({ timeout: 5_000 });
+        await expect(lastParagraph).toContainText(`paragraph ${result.n - 1}`, { timeout: 5_000 });
+    });
+});
diff --git a/e2e/types.d.ts b/e2e/types.d.ts
index 53aea4c5..6b159f0c 100644
--- a/e2e/types.d.ts
+++ b/e2e/types.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 
-import type { Muya } from '@muyajs/core';
+import type { IMuyaOptions, MarkdownToHtml, Muya } from '@muyajs/core';
 
 declare global {
     // eslint-disable-next-line ts/naming-convention -- augmenting the global Window must keep its name
@@ -9,6 +9,10 @@ declare global {
         // callbacks can drive the editor through the public API.
         muya?: Muya;
 
+        // Public class exposed by host/main.ts for Phase 4 export specs that
+        // exercise the static markdown → HTML pipeline.
+        MarkdownToHtml?: typeof MarkdownToHtml;
+
         // Test-only globals exposed by host/main.ts. Aggregated under a single
         // namespace so the real Window surface stays clean.
         __e2e?: {
@@ -16,6 +20,14 @@ declare global {
             INITIAL_MARKDOWN: string;
             PICKED_IMAGE_URL: string;
             UPLOADED_IMAGE_URL: string;
+            /**
+             * Tear down the current Muya instance and create a fresh one with
+             * the given options merged over the host defaults. Mirrors the
+             * `rebuildEditor` pattern in `examples/src/main.ts`. Required by
+             * Phase 4 option-matrix specs that need a different
+             * `IMuyaOptions` than the host's default boot.
+             */
+            rebuildMuya: (options?: Partial<IMuyaOptions>) => void;
         };
 
         // XSS canary used by tests/security/sanitize.spec.ts. If a malicious
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1a74834..503a4505 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,9 @@ importers:
         specifier: ^0.4.4
         version: 0.4.4
     devDependencies:
+      '@axe-core/playwright':
+        specifier: ^4.10.0
+        version: 4.11.3(playwright-core@1.60.0)
       '@playwright/test':
         specifier: ^1.50.0
         version: 1.60.0
@@ -275,6 +278,11 @@ packages:
   '@antfu/utils@9.3.0':
     resolution: {integrity: sha512-9hFT4RauhcUzqOE4f1+frMKLZrgNog5b06I7VmZQV1BkvwvqrbC8EBZf3L1eEL2AKb6rNKjER0sEvJiSP1FXEA==}
 
+  '@axe-core/playwright@4.11.3':
+    resolution: {integrity: sha512-h/kfksv4F0cVIDlKpT4700OehdRgpvuVskuQ2nb7/JmtWUXpe9ftHAPtwyXGvVSsa6SJ64A9ER7Zrzc/sIvC4w==}
+    peerDependencies:
+      playwright-core: '>= 1.0.0'
+
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -1943,6 +1951,10 @@ packages:
     resolution: {integrity: sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==}
     hasBin: true
 
+  axe-core@4.11.4:
+    resolution: {integrity: sha512-KunSNx+TVpkAw/6ULfhnx+HWRecjqZGTOyquAoWHYLRSdK1tB5Ihce1ZW+UY3fj33bYAFWPu7W/GRSmmrCGuxA==}
+    engines: {node: '>=4'}
+
   bail@1.0.5:
     resolution: {integrity: sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==}
 
@@ -6127,6 +6139,11 @@ snapshots:
 
   '@antfu/utils@9.3.0': {}
 
+  '@axe-core/playwright@4.11.3(playwright-core@1.60.0)':
+    dependencies:
+      axe-core: 4.11.4
+      playwright-core: 1.60.0
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -7931,6 +7948,8 @@ snapshots:
       postcss: 7.0.39
       postcss-value-parser: 4.2.0
 
+  axe-core@4.11.4: {}
+
   bail@1.0.5: {}
 
   balanced-match@1.0.2: {}

From 62e2518ff691985aa767091ff081f66d63523a0b Mon Sep 17 00:00:00 2001
From: Jocs <luoran1988@126.com>
Date: Thu, 21 May 2026 12:03:06 +0800
Subject: [PATCH 2/3] docs(e2e): clarify perf-spec timeout budgets (Copilot
 review)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header said "Budget = 60_000ms (= the per-test timeout in
playwright.config)" — wrong on both counts: the config default is
30_000ms, the per-spec override is 120_000ms, and the 60_000ms is the
setContent assertion budget (not the test timeout). Rewrote the header
to list the three numbers separately and explain why they differ, plus
expanded the inline comment above setTimeout to note it's a 4× ceiling
above the assertion budget so regressions surface as a meaningful
expect failure, not a stack-trace timeout.

No behavior change.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 e2e/tests/stability/perf.spec.ts | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/e2e/tests/stability/perf.spec.ts b/e2e/tests/stability/perf.spec.ts
index 3afa597d..57b22878 100644
--- a/e2e/tests/stability/perf.spec.ts
+++ b/e2e/tests/stability/perf.spec.ts
@@ -15,18 +15,26 @@ import { editor } from '../helpers/selectors';
  *     are materially faster, but we test against the dev server here.
  *   - scrollIntoView + last paragraph visible: well under 1s.
  *
- * Budget = 60_000ms (= the per-test timeout in playwright.config). The
- * goal is to catch a 5-10× regression on this path, not to pin a number.
- * A future Phase-5 nightly job can tighten this against a production
- * build.
+ * Three timeouts are at play here — they intentionally differ; don't try
+ * to "consolidate" them:
+ *   - playwright.config `timeout: 30_000` — the default for every other
+ *     spec. setContent(10k) alone routinely takes 15-25s on the Vite dev
+ *     server, so the suite default is too tight for this spec.
+ *   - `test.setTimeout(120_000)` below — the ceiling for the whole test
+ *     body (setContent + scroll + assertions). Wide enough to ride out
+ *     CI variance and still surface a runaway regression as a timeout.
+ *   - `expect(result.ms).toBeLessThan(60_000)` further down — the actual
+ *     setContent perf budget. This is the assertion that catches a 5-10×
+ *     regression on the render path. A future Phase-5 nightly job can
+ *     tighten this against a production bundle.
  *
  * Tagged @perf so a future Phase-2 CI config can `--grep-invert "@perf"`
  * for the PR-time runs and keep this in a nightly schedule.
  */
 test.describe('stability / perf smoke @perf', () => {
-    // The setContent of 10k paragraphs alone routinely takes 15-25s on the
-    // Vite dev server, which exceeds the default 30s suite timeout. Bump
-    // the per-test timeout for this spec only.
+    // Per-spec ceiling: 4× the assertion budget below, so an actual
+    // regression surfaces via the expect (with a useful message), not a
+    // Playwright timeout (with a stack trace).
     test.setTimeout(120_000);
 
     test('setContent with 10k paragraphs finishes within the budget and scroll is reachable', async ({ page }) => {

From 26f235f93d669d7b7a45d1a5a4a8542e19d9ef11 Mon Sep 17 00:00:00 2001
From: Jocs <luoran1988@126.com>
Date: Thu, 21 May 2026 12:18:09 +0800
Subject: [PATCH 3/3] fix(e2e): use muya.focus() instead of click+wait for
 autopair tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CI's bundled Chromium-for-Testing fails 7/7 autopair tests because the
sync barrier — click empty paragraph then waitForFunction
activeContentBlock != null — never resolves. Root cause: clicking an
*empty* `.mu-paragraph` lands the browser selection anchor on the
paragraph element itself rather than on a text node inside it.
muya/editor/index.ts dispatchEvents then sees no anchorBlock from
selection.getSelection() and explicitly sets activeContentBlock = null
before returning, so the wait times out at 30s.

Replaced the click+wait pattern with:
1. window.muya.focus() — uses muya's API to setCursor(0, 0, …) on the
   first leaf block, establishing a real Range with a text-node anchor.
2. window.muya.domNode.focus() — ensures DOM activeElement is the
   contenteditable so subsequent page.keyboard.type() lands there.

No behavior change locally (7/7 still pass via system Chrome). Fixes
CI failures on bundled Chromium.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 e2e/tests/options/autopair.spec.ts | 50 ++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/e2e/tests/options/autopair.spec.ts b/e2e/tests/options/autopair.spec.ts
index 1878b996..27ef8a1c 100644
--- a/e2e/tests/options/autopair.spec.ts
+++ b/e2e/tests/options/autopair.spec.ts
@@ -20,21 +20,32 @@ import { editor } from '../helpers/selectors';
  */
 
 /**
- * Rebuild Muya with the given options, then click into a fresh
- * paragraph and wait for the editor to register the click — only after
- * `activeContentBlock` is non-null is it safe to fire keyboard input.
- * Without this sync barrier the test is flaky on parallel CI runs
- * because the click can race with the editor's mount.
+ * Rebuild Muya with the given options and place the cursor in a fresh
+ * empty paragraph, ready for keyboard input.
+ *
+ * The naive approach (`paragraph.click()` + wait for
+ * `activeContentBlock != null`) fails on headless Chromium-for-Testing:
+ * clicking an *empty* `.mu-paragraph` lands the browser selection
+ * anchor on the paragraph element itself rather than on a text node,
+ * so muya's `selection.getSelection()` returns null/no-anchor and the
+ * editor dispatch explicitly sets `activeContentBlock = null` and
+ * returns (editor/index.ts ~line 99). The wait then times out.
+ *
+ * Robust alternative: drive the cursor through muya's own API
+ * (`muya.focus()` → `firstLeafBlock.setCursor(0, 0, …)`), which
+ * positions a real selection inside the leaf content. Then call
+ * `.focus()` on the contenteditable container so DOM focus is on
+ * the editor and subsequent `page.keyboard.type(...)` events route
+ * through muya's input handler.
  */
 async function rebuildAndFocus(page: Page, opts: Partial<IMuyaOptions>): Promise<void> {
     await page.evaluate((o) => {
         window.__e2e!.rebuildMuya(o);
         window.muya!.setContent('');
+        window.muya!.focus();
+        window.muya!.domNode.focus();
     }, opts);
-    const paragraph = page.locator(editor.paragraph).first();
-    await expect(paragraph).toBeVisible();
-    await paragraph.click();
-    await page.waitForFunction(() => window.muya!.editor.activeContentBlock != null);
+    await expect(page.locator(editor.paragraph).first()).toBeVisible();
 }
 
 async function getFirstBlockText(page: Page): Promise<string> {
@@ -118,16 +129,23 @@ test.describe('options / auto-pair matrix', () => {
         await page.keyboard.type('(');
         await expect.poll(() => getFirstBlockText(page)).toBe('(');
 
-        // Reset paragraph and re-focus for the next char.
-        await page.evaluate(() => window.muya!.setContent(''));
-        await page.locator(editor.paragraph).first().click();
-        await page.waitForFunction(() => window.muya!.editor.activeContentBlock != null);
+        // Reset paragraph and re-focus for the next char. Same caveat as
+        // rebuildAndFocus: drive focus via muya's API + domNode.focus()
+        // because clicking an empty paragraph doesn't establish a
+        // text-node selection in headless Chromium.
+        await page.evaluate(() => {
+            window.muya!.setContent('');
+            window.muya!.focus();
+            window.muya!.domNode.focus();
+        });
         await page.keyboard.type('*');
         await expect.poll(() => getFirstBlockText(page)).toBe('*');
 
-        await page.evaluate(() => window.muya!.setContent(''));
-        await page.locator(editor.paragraph).first().click();
-        await page.waitForFunction(() => window.muya!.editor.activeContentBlock != null);
+        await page.evaluate(() => {
+            window.muya!.setContent('');
+            window.muya!.focus();
+            window.muya!.domNode.focus();
+        });
         await page.keyboard.type('"');
         await expect.poll(() => getFirstBlockText(page)).toBe('"');
     });