feat(macronizer): real editable output + mobile tap-to-readings sheet

Phase 1-2 of the editing overhaul: words render as real text (selectable,
copyable, findable) via a setDisplay setter that keeps the content attribute
in sync; the ambig/unknown highlights move off the ::before painter. Clicking
a vowel toggles its macron, the output is contenteditable, Ctrl+Z/Y undo-redo.

Council-validated mobile model (3 cold agents: touch, a11y, classicist):
desktop keeps hover + click-vowel toggle; on touch, tapping a flagged word
opens the readings sheet (delegated touchend + preventDefault so the OS
keyboard never slides up), tapping a clean word lands a caret, and tapping a
reading row chooses it. Flagged words get a keyboard path (Enter opens the
dialog); the popup becomes role=dialog with a role=status reading
announcement; the sheet gains a scrim + grab handle. Double-click pinning
removed. Copy updated in caption, legend, and help page.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Author: hellpanderrr

wiktionary_pron/css/style.css

@@ -449,6 +449,9 @@ body i.icon-home {
 }
 
 .ipa::before {
+    /* SHARED painter: the transcriber's line mode renders empty
+       <div class="ipa" content="…"> cells and depends on this to paint their text.
+       The macronizer neutralizes it locally (real textContent there). */
     content: attr(content);
 }
 

wiktionary_pron/e2e/editing.spec.js

@@ -0,0 +1,135 @@
+import { test, expect } from "@playwright/test";
+
+const PAGE = "/wiktionary_pron/macronizer.html";
+
+async function macronize(page, text) {
+  await page.fill("#text_to_macronize", text);
+  await page.click("#macronize_btn");
+  await expect(page.locator("#resultText .ipa").first()).toBeVisible({ timeout: 120_000 });
+}
+
+// Client-rect centre of one character of the first word span. Uses a Range over the
+// span's text node so the click lands inside the glyph, not on the span's padding.
+async function charCenter(page, charIndex) {
+  return await page.evaluate((charIndex) => {
+    const span = document.querySelector("#resultText .ipa");
+    const tn = span.firstChild;
+    const range = document.createRange();
+    range.setStart(tn, charIndex);
+    range.setEnd(tn, Math.min(charIndex + 1, tn.length));
+    const r = range.getBoundingClientRect();
+    return { x: (r.left + r.right) / 2, y: (r.top + r.bottom) / 2 };
+  }, charIndex);
+}
+
+test.describe("Phase 2 editing", () => {
+  test("click a vowel toggles its macron; Ctrl+Z / Ctrl+Y / Ctrl+Shift+Z round-trip", async ({ page }) => {
+    test.setTimeout(360_000);
+    await page.goto(PAGE);
+    await expect(page.locator("#macronize_btn")).toBeEnabled({ timeout: 240_000 });
+
+    await macronize(page, "divisa");
+    const span = page.locator("#resultText .ipa").first();
+    await expect(span).toHaveAttribute("content", "dīvīsa");
+
+    // Toggle the ī at index 1 → "divīsa" (that single vowel flips).
+    const pt = await charCenter(page, 1);
+    await page.mouse.click(pt.x, pt.y);
+    await expect(span).toHaveAttribute("content", "divīsa");
+
+    // Ctrl+Z undoes the toggle.
+    await page.keyboard.press("Control+z");
+    await expect(span).toHaveAttribute("content", "dīvīsa");
+
+    // Ctrl+Y redoes.
+    await page.keyboard.press("Control+y");
+    await expect(span).toHaveAttribute("content", "divīsa");
+
+    // Ctrl+Shift+Z is the other redo chord — the word stays toggled.
+    await page.keyboard.press("Control+Shift+z");
+    await expect(span).toHaveAttribute("content", "divīsa");
+
+    // Undo again — the round-trip is fully reversible.
+    await page.keyboard.press("Control+z");
+    await expect(span).toHaveAttribute("content", "dīvīsa");
+  });
+
+  test("clicking a consonant does not toggle; typing edits and Ctrl+Z reverts", async ({ page }) => {
+    test.setTimeout(360_000);
+    await page.goto(PAGE);
+    await expect(page.locator("#macronize_btn")).toBeEnabled({ timeout: 240_000 });
+
+    await macronize(page, "divisa");
+    const span = page.locator("#resultText .ipa").first();
+    await expect(span).toHaveAttribute("content", "dīvīsa");
+
+    // Click the consonant v (index 2) — precise hit-testing must NOT toggle a neighbour.
+    const pt = await charCenter(page, 2);
+    await page.mouse.click(pt.x, pt.y);
+    await expect(span).toHaveAttribute("content", "dīvīsa");
+
+    // The caret sits inside the word; typing edits it and the content attr follows.
+    await page.keyboard.type("x");
+    const edited = await span.textContent();
+    expect(edited).toContain("x");
+    await expect(span).toHaveAttribute("content", edited);
+
+    await page.keyboard.press("Control+z");
+    await expect(span).toHaveAttribute("content", "dīvīsa");
+  });
+
+  test("keyboard: Enter on a flagged word opens the readings popup", async ({ page }) => {
+    test.setTimeout(360_000);
+    await page.goto(PAGE);
+    await expect(page.locator("#macronize_btn")).toBeEnabled({ timeout: 240_000 });
+
+    await macronize(page, "divisa");
+    const span = page.locator("#resultText .ipa").first();
+    await expect(span).toHaveAttribute("content", "dīvīsa");
+
+    // Flagged span is focusable; Enter opens the dialog. The word must NOT change
+    // (no accidental toggle from the activation).
+    await span.focus();
+    await page.keyboard.press("Enter");
+    await expect(page.locator(".word-popup .popup-cycle")).toBeVisible({ timeout: 5000 });
+    await expect(span).toHaveAttribute("content", "dīvīsa");
+  });
+
+  test("touch: tap a flagged word opens the sheet, tap a clean word does not", async ({ browser }) => {
+    // hasTouch context so isTouch() is true and the sheet path runs.
+    const context = await browser.newContext({ hasTouch: true, viewport: { width: 390, height: 844 } });
+    const page = await context.newPage();
+    test.setTimeout(360_000);
+    await page.goto(PAGE);
+    await expect(page.locator("#macronize_btn")).toBeEnabled({ timeout: 240_000 });
+
+    await macronize(page, "provinciarum divisa");
+    const clean = page.locator("#resultText .ipa").nth(0);   // prōvinciārum — unambiguous
+    const flagged = page.locator("#resultText .ipa").nth(1); // divisa — 2 readings
+    await expect(clean).toHaveAttribute("content", "prōvinciārum");
+    await expect(clean).not.toHaveClass(/ambig|unknown/);   // premise: provinciarum is clean
+    await expect(flagged).toHaveAttribute("content", "dīvīsa");
+    await expect(flagged).toHaveClass(/ambig/);             // premise: divisa is flagged
+
+    // Tap the CLEAN word → no sheet, no toggle (caret lands for editing).
+    await clean.tap();
+    await expect(page.locator(".word-popup")).not.toBeVisible({ timeout: 5000 });
+    await expect(clean).toHaveAttribute("content", "prōvinciārum");
+
+    // Tap the FLAGGED word → the sheet (readings-first) appears.
+    await flagged.tap();
+    await expect(page.locator(".word-popup.sheet")).toBeVisible({ timeout: 5000 });
+    const readings = page.locator(".word-popup .popup-section", { hasText: /^Possible readings/ });
+    await expect(readings).toBeVisible({ timeout: 5000 });
+
+    // Tap a reading row → the word changes to that spelling and the sheet closes.
+    const rows = page.locator(".word-popup table.readings tr");
+    const rowCount = await rows.count();
+    expect(rowCount).toBeGreaterThan(1);
+    await rows.nth(1).tap();
+    await expect(flagged).not.toHaveAttribute("content", "dīvīsa", { timeout: 5000 });
+    await expect(page.locator(".word-popup.sheet")).not.toBeVisible({ timeout: 5000 });
+
+    await context.close();
+  });
+});

wiktionary_pron/e2e/macronizer.spec.js

@@ -33,6 +33,10 @@ test.describe("macronizer", () => {
       "prōvinciārum",
       { timeout: 120_000 },
     );
+    // Phase 1 (editing overhaul): the output is REAL text now — selectable and
+    // copyable. The content attribute stays in sync, and textContent must match.
+    const first = page.locator("#resultText .ipa").first();
+    await expect(first).toHaveText("prōvinciārum", { timeout: 5_000 });
   });
 
   test("dark mode toggle changes its own icon, not the home button's", async ({

wiktionary_pron/e2e/popup-check.spec.js

@@ -11,7 +11,8 @@ test("popup shows RFTagger disagreement + Morpheus dedup for currito", async ({
   await page.click("#macronize_btn");
   await expect(page.locator("#resultText .ipa").first()).toBeVisible({ timeout: 120_000 });
 
-  await page.locator("#resultText .ipa").first().click();
+  // Desktop: hovering a flagged word opens the popup (single-click toggles a vowel).
+  await page.locator("#resultText .ipa").first().hover();
 
   // 0. Readings come FIRST (the debug detail is collapsed behind <details>)
   const readings = page.locator(".word-popup .popup-section", { hasText: /^Possible readings/ });
@@ -53,7 +54,8 @@ test("v/u words cycle reversibly — divisa's original spelling must come back",
   await expect(span).toHaveAttribute("content", "dīvīsa");
   const initial = await span.getAttribute("content");
 
-  await span.click(); // hover already opened the popup; this pins it (may cycle once)
+  // Desktop: hovering the flagged word opens the popup (a single click would toggle).
+  await span.hover();
   const nextBtn = page.locator(".word-popup .popup-cycle");
   await expect(nextBtn).toBeVisible({ timeout: 5000 });
 

wiktionary_pron/help/macronizer.html

@@ -63,10 +63,10 @@ <h2 id="reading">Reading the output</h2>
 
     <ul>
         <li><strong>Yellow</strong> — the word has <strong>more than one possible reading</strong>, and
-            the tool picked the one it thought fit the sentence. <strong>Click the word</strong> (or focus
-            it with Tab and press Enter) to cycle through the alternatives; the text updates, and so do the
-            Copy and export buttons. If the tool guessed <i>Galliā</i> where you wanted <i>Gallia</i>,
-            this is how you fix it.
+            the tool picked the one it thought fit the sentence. <strong>Tap the word</strong> on a phone,
+            or on a computer focus it with Tab and press Enter, to choose a reading from the list; the
+            text updates, and so do the Copy and export buttons. If the tool guessed <i>Galliā</i> where
+            you wanted <i>Gallia</i>, this is how you fix it.
         </li>
         <li><strong>Red</strong> — the word is <strong>not in the wordlist</strong>. Morpheus is asked
             to analyse it from its stem and ending; if even Morpheus doesn't recognise it, the vowel
@@ -78,9 +78,10 @@ <h2 id="reading">Reading the output</h2>
         </li>
     </ul>
 
-    <p>Hover a word (or tap it on a phone) to open its analysis: the RFTagger tag decoded into plain
-        features, the lemma, whether it was found in the wordlist, and every reading Morpheus found.
-        The reading currently shown in the text is highlighted among the candidates.</p>
+    <p>Hover a word on a computer (or tap a highlighted word on a phone) to open its analysis: the
+        RFTagger tag decoded into plain features, the lemma, whether it was found in the wordlist, and
+        every reading Morpheus found. The reading currently shown in the text is highlighted among the
+        candidates; tap a reading to choose it.</p>
 
     <h2>The options</h2>