Fix blank canvas on pages without line annotations and add user guidance

[Copilot]

Pages with no line annotations displayed blank instead of showing the canvas image. updateTranscriptionImages() returned early when thisLine was undefined, preventing canvas setup.

Changes

• Handle empty pages: When this.#page.items?.[0] is undefined, extract canvasID from page target via setCanvasAndSelector(null, this.#page) and render full canvas
• Default region: Display top 10% of canvas height (120px fallback) matching existing behavior for pages with lines
• User guidance modal: Added dismissible alert that appears when a page has no line annotations, providing:
  • Clear message about missing line annotations
  • Link to annotation interface (/interfaces/annotator) with properly encoded project and page IDs
  • "Got it" button to dismiss the alert

// Handle pages with no lines - still load the canvas
if (!thisLine) {
  const { canvasID } = this.setCanvasAndSelector(null, this.#page)
  if (!canvasID) return
  const canvas = this.#canvas = await vault.get(canvasID, 'canvas')
  const regionValue = `0,0,${canvas?.width ?? 'full'},${(canvas?.height && canvas?.height / 10) ?? 120}`
  topImage.canvas = canvasID
  bottomImage.canvas = canvas
  topImage.setAttribute('region', regionValue)
  // Show alert to inform user about missing lines
  this.showNoLinesAlert()
  return
}

Security

• URL parameters are properly encoded using encodeURIComponent() to prevent injection vulnerabilities
• DOM elements created programmatically (no innerHTML) for secure content rendering
• Styles added via <style> element instead of inline styles

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Loading Temp Pages in Transcribe Interface</issue_title>
<issue_description>I thought we previously had something special for this. It loads, but it is blank

---

---

I attempted to change lines to get the image to load, but it didn't do anything and caused console errors, probably because this project has never been given a line. </issue_description>

<agent_instructions>review the code for possible mishandling when pages load that have no lines or pages. The default behavior should prevent this, as the project should only be able to exist with at least one layer and page, though it might not have lines on it.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Loading Temp Pages in Transcribe Interface #361

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[cubap]

also include a dismissible modal that the page has no lines with a line to the annotation interface to define lines manually.

[Copilot]

also include a dismissible modal that the page has no lines with a line to the annotation interface to define lines manually.

Added in commit 65fa6e2. The modal appears when a page has no lines with a link to /interfaces/annotator?projectId=X&pageId=Y and can be dismissed by clicking "Got it". URL parameters are properly encoded for security.

[github-actions]

🚀 Deployed on https://6942fbbc536c1128db9a0f1f--tpen-interfaces-preview.netlify.app

[cubap]

This illustrates some issues in annotator that I believe are being handled elsewhere. The pageID is read correctly, but the fetch it fires is /interfaces/annotator/{pageID} instead of to the API.