Improve alert security and encapsulation

- Encode URL parameters to prevent injection vulnerabilities
- Replace innerHTML with DOM element creation for better security
- Add CSS via style element instead of inline styles
- Add fallback for potential future public API on AlertContainer

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

Author: Copilot

interfaces/transcription/index.js

@@ -424,12 +424,46 @@ export default class TranscriptionInterface extends HTMLElement {
     const alertContainer = document.querySelector('tpen-alert-container')
     if (!alertContainer) return
 
+    // Build URL with proper encoding
+    const projectId = encodeURIComponent(TPEN.screen?.projectInQuery ?? '')
+    const pageId = encodeURIComponent(TPEN.screen?.pageInQuery ?? '')
+    const annotatorUrl = `/interfaces/annotator?projectId=${projectId}&pageId=${pageId}`
+    
     const alertElem = document.createElement('tpen-alert')
-    const message = document.createElement('div')
-    message.innerHTML = `
-      <p style="margin-bottom: 1em;">This page has no line annotations defined.</p>
-      <p>To add lines, visit the <a href="/interfaces/annotator?projectId=${TPEN.screen?.projectInQuery ?? ''}&pageId=${TPEN.screen?.pageInQuery ?? ''}" style="color: #4fc3f7; text-decoration: underline;">annotation interface</a>.</p>
+    
+    // Add styles for the alert content
+    const style = document.createElement('style')
+    style.textContent = `
+      .no-lines-message p:first-child {
+        margin-bottom: 1em;
+      }
+      .alert-link {
+        color: #4fc3f7;
+        text-decoration: underline;
+      }
     `
+    alertElem.shadowRoot.appendChild(style)
+    
+    // Create message with proper DOM elements
+    const messageContainer = document.createElement('div')
+    messageContainer.classList.add('no-lines-message')
+    
+    const paragraph1 = document.createElement('p')
+    paragraph1.textContent = 'This page has no line annotations defined.'
+    
+    const paragraph2 = document.createElement('p')
+    paragraph2.textContent = 'To add lines, visit the '
+    
+    const link = document.createElement('a')
+    link.href = annotatorUrl
+    link.textContent = 'annotation interface'
+    link.classList.add('alert-link')
+    
+    paragraph2.appendChild(link)
+    paragraph2.appendChild(document.createTextNode('.'))
+    
+    messageContainer.appendChild(paragraph1)
+    messageContainer.appendChild(paragraph2)
 
     const okButton = document.createElement('button')
     const buttonContainer = document.createElement('div')
@@ -441,14 +475,19 @@ export default class TranscriptionInterface extends HTMLElement {
     }
     okButton.addEventListener('click', handleOk)
 
-    alertElem.appendChild(message)
+    alertElem.appendChild(messageContainer)
     buttonContainer.appendChild(okButton)
     alertElem.appendChild(buttonContainer)
 
-    const screenLockingSection = alertContainer.shadowRoot.querySelector('.alert-area')
-    if (screenLockingSection) {
-      screenLockingSection.appendChild(alertElem)
-      alertElem.show()
+    // Use the container's method if available, otherwise access shadow DOM
+    if (typeof alertContainer.addCustomAlert === 'function') {
+      alertContainer.addCustomAlert(alertElem)
+    } else {
+      const screenLockingSection = alertContainer.shadowRoot.querySelector('.alert-area')
+      if (screenLockingSection) {
+        screenLockingSection.appendChild(alertElem)
+        alertElem.show()
+      }
     }
   }