/annotator improvements and page selector component

[thehabes]

Summary

Adds a reusable tpen-page-selector web component that allows users to navigate between manuscript pages in the /annotator interface. The tpen-page-selector component can be used directly by HTML interfaces or within other components. We are putting it in the tpen-line-parser component as opposed to directly on line-parser.html so that it can be easily positioned among other components being used the same way ('Go To Project Management', 'Auto Parse', etc.)

Closes #339
Closes #413
Closes #420

Changes

New Component: tpen-page-selector

• Dropdown selector for navigating between pages in a project
• Follows established component patterns (CleanupRegistry, onProjectReady, CheckPermissions)
• Uses Shadow DOM with part="select" for interface-specific styling
• Self-removes when user lacks PAGE ANY view access or project has only one page
• Deduplicates pages across multiple layers
• Sanitizes page labels to prevent XSS via #escapeHtml() method
• Dispatches tpen-page-selected event for future SPA-style navigation

Integration with Line Parser

• Imports and renders <tpen-page-selector> in the annotator interface
• Styled to match existing UI buttons (positioned top-right below Auto Parse)
• Includes focus-visible styles for keyboard accessibility
• Truncates long page labels with text-overflow: ellipsis
• Null-safe rendering (handles case where selector removes itself)

Bug Fixes

• CONTRIBUTOR permissions (Change for CONTRIBUTOR permissions on annotator #426): Changed permission check from checkAllAccess() to checkEditAccess() && checkCreateAccess(), allowing CONTRIBUTOR role users to access the annotator interface
• Button consistency (Action Buttons Text Oddity in /annotator #420): Changed action buttons from mixed <input type="button"> and <a> elements to consistent <button type="button"> elements for uniform font rendering
• beforeunload handler: Fixed to use correct modern browser API (ev.preventDefault() + ev.returnValue = '') instead of non-functional confirm() pattern

Documentation

• Added tpen-page-selected event to common events list in CLAUDE.md

[github-actions]

🚀 Deployed on https://698265c03048b84ca952af0c--tpen-interfaces-preview.netlify.app

[thehabes]

💡 Future Enhancement Suggestion: SPA-style Navigation

The page selector currently triggers a full page reload on navigation via location.href. For a smoother user experience in the future, consider implementing SPA-style navigation:

1. The tpen-page-selected event is already being dispatched with { pageId, pageIndex, page }
2. The line-parser component could listen for this event and:
   • Update the URL via history.pushState() instead of location.href
   • Fetch new page data dynamically
   • Re-render the annotations without a full page reload

This would require architectural changes to support dynamic page loading in the line-parser component, but would significantly improve the UX for users navigating between pages frequently.

---

This is a suggestion for future improvement, not a blocker for this PR.

This is also the behavior of the page turner in /transcribe. #428 has been generated to note this improvement idea.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.