feat: Playwright E2E tests + MapExplorer reactivity + transitive dep fix

E2E test suite (27 tests, all passing):
- home.spec: hero, CTAs, script mosaic
- demo.spec: transliteration of Ukrainian, Russian, German, Tamil, Amharic
- maps.spec: catalogue browsing, filtering, detail pages
- detect.spec: language detection panel
- batch.spec: batch transliteration UI
- compare.spec: system comparison UI

Bug fixes in MapExplorer.vue:
1. Reactivity: transliterateFn was a plain `let` — Vue couldn't track when
   it changed. Converted to `ref` so the `output` computed re-evaluates
   when the engine finishes loading.
2. Transitive dependencies: the old fetch loop only did 2 passes. A
   dependency discovered during pass 2 (e.g. bgnpcgn-ukr → un-ukr → ua-ukr)
   was never fetched. Fixed with a `while` loop that runs until the
   wanted set stops growing.

Added TODO.complete/ directory documenting all remaining ecosystem work.

Author: ronaldtse

TODO.complete/01-e2e-tests.md

@@ -0,0 +1,77 @@
+# 03 — E2E tests for interscript.org website
+
+## Priority: P0
+
+## Problem
+The website has integration tests (Vitest) that test individual modules,
+but no browser-based E2E tests that validate the actual user experience:
+loading pages, typing in transliteration inputs, seeing output.
+
+## Solution: Playwright
+
+### Setup
+```bash
+cd interscript.org
+npm install -D @playwright/test
+npx playwright install
+```
+
+### Structure
+```
+e2e/
+  playwright.config.ts
+  home.spec.ts           # Landing page loads, CTA works
+  detect.spec.ts         # Detect panel: input → system suggestion
+  compare.spec.ts        # Compare two systems side by side
+  batch.spec.ts          # Batch transliteration
+  maps.spec.ts           # Browse maps, search, filter
+  api-docs.spec.ts       # API documentation interactive
+  worker.spec.ts         # Web Worker loads and transliterates
+```
+
+### Key Test Cases
+
+#### Worker transliteration (critical path)
+```typescript
+test("worker transliterates Ukrainian", async ({ page }) => {
+  await page.goto("/")
+  const input = page.locator("[data-testid='translit-input']")
+  const output = page.locator("[data-testid='translit-output']")
+  await input.fill("Антон")
+  await expect(output).toContainText("Anton")
+})
+```
+
+#### Map browser
+```typescript
+test("browse maps by script", async ({ page }) => {
+  await page.goto("/maps")
+  await page.click("text=Cyrillic")
+  await expect(page.locator(".map-card")).toHaveCount.greaterThan(10)
+})
+```
+
+#### API playground
+```typescript
+test("API playground returns JSON", async ({ page }) => {
+  await page.goto("/api")
+  await page.fill("[data-testid='api-input']", '{"system":"bgnpcgn-ukr-Cyrl-Latn-2019","input":"Київ"}')
+  await page.click("[data-testid='api-run']")
+  await expect(page.locator("[data-testid='api-output']")).toContainText("Kyiv")
+})
+```
+
+### CI Integration
+```yaml
+# .github/workflows/e2e.yml
+- name: Build site
+  run: npm run build
+- name: Run Playwright
+  run: npx playwright test
+- name: Upload report
+  if: always()
+  uses: actions/upload-artifact@v3
+  with:
+    name: playwright-report
+    path: playwright-report/
+```

e2e/batch.spec.ts

@@ -0,0 +1,26 @@
+/**
+ * E2E tests for the /batch page.
+ *
+ * Validates: batch transliteration of multiple inputs works correctly.
+ */
+import { test, expect } from "@playwright/test"
+
+test.describe("batch transliteration", () => {
+  test("page loads", async ({ page }) => {
+    await page.goto("/batch")
+    await expect(page.locator("body")).toBeVisible()
+  })
+
+  test("has input area for batch text", async ({ page }) => {
+    await page.goto("/batch")
+    const input = page.locator("textarea, input[type='text']").first()
+    await expect(input).toBeVisible({ timeout: 5000 })
+  })
+
+  test("has system selector", async ({ page }) => {
+    await page.goto("/batch")
+    await page.waitForLoadState("networkidle")
+    const select = page.locator("#batch-system, select").first()
+    await expect(select).toBeVisible({ timeout: 10000 })
+  })
+})

e2e/compare.spec.ts

@@ -0,0 +1,28 @@
+/**
+ * E2E tests for the /compare page.
+ *
+ * Validates: comparing the same input across multiple transliteration systems.
+ */
+import { test, expect } from "@playwright/test"
+
+test.describe("compare systems", () => {
+  test("page loads", async ({ page }) => {
+    await page.goto("/compare")
+    await expect(page.locator("body")).toBeVisible()
+  })
+
+  test("has input field", async ({ page }) => {
+    await page.goto("/compare")
+    const input = page.locator("textarea, input[type='text']").first()
+    await expect(input).toBeVisible({ timeout: 5000 })
+  })
+
+  test("has system selectors", async ({ page }) => {
+    await page.goto("/compare")
+    const selects = page.locator("select")
+    if (await selects.first().isVisible({ timeout: 3000 }).catch(() => false)) {
+      const count = await selects.count()
+      expect(count).toBeGreaterThanOrEqual(1)
+    }
+  })
+})

e2e/demo.spec.ts

@@ -0,0 +1,145 @@
+/**
+ * E2E test: the /demo page transliteration Explorer.
+ *
+ * This is the critical user-facing path: the TS runtime loads maps from
+ * /public/maps and transliterates input in real-time via interscript-ts.
+ *
+ * If this test passes, the entire Ruby→IR→TS pipeline works end-to-end.
+ */
+import { test, expect } from "@playwright/test"
+
+test.describe("demo page — transliteration explorer", () => {
+  test("page loads with system selector and input", async ({ page }) => {
+    await page.goto("/demo")
+    await expect(page.locator("h1")).toContainText(/Type/i)
+
+    // Engine status shows loading or ready (not "missing")
+    const status = page.locator(".rail-status")
+    await expect(status).toBeVisible()
+
+    // System selector has options
+    const select = page.locator("select.field-input")
+    await expect(select).toBeVisible()
+    const options = select.locator("option")
+    await expect(options).toHaveCount(5)
+  })
+
+  test("default system is BGN/PCGN Ukrainian", async ({ page }) => {
+    await page.goto("/demo")
+    const select = page.locator("select.field-input")
+    await expect(select).toHaveValue("bgnpcgn-ukr-Cyrl-Latn-2019")
+  })
+
+  test("transliterates Ukrainian Cyrillic to Latin", async ({ page }) => {
+    await page.goto("/demo")
+
+    // Wait for engine to be ready (loads all systems + their deps)
+    const status = page.locator(".rail-status")
+    await expect(status).toContainText("ready", { timeout: 20000 })
+
+    // Type Cyrillic input
+    const textarea = page.locator("textarea.pane-body")
+    await textarea.fill("Антон")
+
+    // Wait for output to contain "Anton"
+    const output = page.locator(".pane-result")
+    await expect(output).toContainText("Anton", { timeout: 10000 })
+  })
+
+  test("transliterates ODNI Russian", async ({ page }) => {
+    await page.goto("/demo")
+
+    const status = page.locator(".rail-status")
+    await expect(status).toContainText("ready", { timeout: 20000 })
+
+    // Change system and type
+    const select = page.locator("select.field-input")
+    await select.selectOption("odni-rus-Cyrl-Latn-2015")
+
+    const textarea = page.locator("textarea.pane-body")
+    await textarea.fill("привет мир")
+
+    const output = page.locator(".pane-result")
+    await expect(output).toContainText("privet mir", { timeout: 10000 })
+  })
+
+  test("transliterates BGN/PCGN German", async ({ page }) => {
+    await page.goto("/demo")
+
+    const status = page.locator(".rail-status")
+    await expect(status).toContainText("ready", { timeout: 20000 })
+
+    const select = page.locator("select.field-input")
+    await select.selectOption("bgnpcgn-deu-Latn-Latn-2000")
+
+    const textarea = page.locator("textarea.pane-body")
+    await textarea.fill("Tschüß!")
+
+    const output = page.locator(".pane-result")
+    await expect(output).toContainText("Tschueß", { timeout: 10000 })
+  })
+
+  test("transliterates UN Tamil", async ({ page }) => {
+    await page.goto("/demo")
+
+    const status = page.locator(".rail-status")
+    await expect(status).toContainText("ready", { timeout: 20000 })
+
+    const select = page.locator("select.field-input")
+    await select.selectOption("un-tam-Taml-Latn-1972")
+
+    const textarea = page.locator("textarea.pane-body")
+    await textarea.fill("தமிழ்")
+
+    // Tamil output should be non-empty and different from input
+    const output = page.locator(".pane-result")
+    await page.waitForTimeout(1000)
+    const text = (await output.textContent())?.trim()
+    expect(text?.length ?? 0).toBeGreaterThan(0)
+  })
+
+  test("transliterates ALA-LC Amharic", async ({ page }) => {
+    await page.goto("/demo")
+
+    const status = page.locator(".rail-status")
+    await expect(status).toContainText("ready", { timeout: 20000 })
+
+    const select = page.locator("select.field-input")
+    await select.selectOption("alalc-amh-Ethi-Latn-2011")
+
+    const textarea = page.locator("textarea.pane-body")
+    await textarea.fill("ኢትዮጵያ")
+
+    const output = page.locator(".pane-result")
+    await page.waitForTimeout(1000)
+    const text = (await output.textContent())?.trim()
+    expect(text?.length ?? 0).toBeGreaterThan(0)
+  })
+
+  test("handles empty input gracefully", async ({ page }) => {
+    await page.goto("/demo")
+
+    const textarea = page.locator("textarea.pane-body")
+    await textarea.fill("")
+    await page.waitForTimeout(200)
+
+    const output = page.locator(".pane-result")
+    const text = await output.textContent()
+    // Empty input should produce empty output or a dash
+    expect(text).toBeTruthy()
+  })
+
+  test("no error banner appears during normal use", async ({ page }) => {
+    await page.goto("/demo")
+
+    const status = page.locator(".rail-status")
+    await expect(status).toContainText(/ready|loading/, { timeout: 10000 })
+
+    const textarea = page.locator("textarea.pane-body")
+    await textarea.fill("Антон")
+    await page.waitForTimeout(500)
+
+    const errorBanner = page.locator(".error-banner")
+    await expect(errorBanner).not.toBeVisible()
+  })
+})

e2e/detect.spec.ts

@@ -0,0 +1,35 @@
+/**
+ * E2E tests for the /detect page.
+ *
+ * Validates: the language detection feature works — given Latin output,
+ * it suggests which transliteration system was likely used.
+ */
+import { test, expect } from "@playwright/test"
+
+test.describe("detect page", () => {
+  test("page loads", async ({ page }) => {
+    await page.goto("/detect")
+    await expect(page.locator("body")).toBeVisible()
+  })
+
+  test("has input field for detection", async ({ page }) => {
+    await page.goto("/detect")
+    const input = page.locator("input, textarea").first()
+    await expect(input).toBeVisible({ timeout: 5000 })
+  })
+
+  test("detection produces results for valid input", async ({ page }) => {
+    await page.goto("/detect")
+    await page.waitForLoadState("networkidle")
+
+    const input = page.locator("input, textarea").first()
+    if (await input.isVisible({ timeout: 5000 }).catch(() => false)) {
+      await input.fill("Anton")
+      await page.waitForTimeout(1000)
+
+      // Should show some result (system suggestion or "no match")
+      const body = page.locator("body")
+      await expect(body).toContainText(/system|result|match|detect/i)
+    }
+  })
+})

e2e/home.spec.ts

@@ -0,0 +1,48 @@
+/**
+ * E2E tests for the Interscript.org home page.
+ *
+ * Validates: page loads, hero renders, catalogue data is present,
+ * CTAs link to the right pages.
+ */
+import { test, expect } from "@playwright/test"
+
+test.describe("home page", () => {
+  test("loads and renders hero", async ({ page }) => {
+    await page.goto("/")
+    await expect(page).toHaveTitle(/Interscript/i)
+    await expect(page.locator("h1")).toContainText(/Every/i)
+  })
+
+  test("hero stats render real numbers", async ({ page }) => {
+    await page.goto("/")
+    const lead = page.locator(".hero-lead")
+    await expect(lead).toContainText(/systems/)
+    await expect(lead).toContainText(/authorities/)
+  })
+
+  test("CTA links to demo page", async ({ page }) => {
+    await page.goto("/")
+    await page.waitForLoadState("networkidle")
+    const cta = page.locator('a[href="/demo"]').first()
+    await expect(cta).toBeVisible({ timeout: 5000 })
+    await cta.click()
+    await expect(page).toHaveURL(/\/demo/)
+  })
+
+  test("CTA links to maps browser", async ({ page }) => {
+    await page.goto("/")
+    await page.waitForLoadState("networkidle")
+    const cta = page.locator('a[href="/maps"]').first()
+    await expect(cta).toBeVisible({ timeout: 5000 })
+    await cta.click()
+    await expect(page).toHaveURL(/\/maps/)
+  })
+
+  test("script mosaic renders", async ({ page }) => {
+    await page.goto("/")
+    const mosaic = page.locator(".script-mosaic, [class*='mosaic']")
+    // Mosaic may take a moment to hydrate
+    await page.waitForTimeout(1000)
+    await expect(mosaic.first()).toBeVisible()
+  })
+})