feat(component): PrimarySourceViewer — Historical Document Display

[bntvllnt]

Summary

Document viewer for historical primary sources with pan/zoom, annotations, transcription panel, and contextual notes. For studying historical documents, manuscripts, artworks, and artifacts.

Proposed API

<PrimarySourceViewer
  title="Magna Carta (1215)"
  source={{ type: "image", src: "/magna-carta.jpg", alt: "Magna Carta manuscript" }}
  period="Medieval"
  origin="England"
>
  <PrimarySourceToolbar>
    <PrimarySourceZoom />
    <PrimarySourceRotate />
    <PrimarySourceFullscreen />
  </PrimarySourceToolbar>

  <PrimarySourceAnnotations>
    <PrimarySourceAnnotation
      region={{ x: 120, y: 80, width: 200, height: 50 }}
      note="Royal seal of King John"
      category="artifact"
    />
  </PrimarySourceAnnotations>

  <PrimarySourceTranscription>
    {/* Side panel with modern-language transcription */}
    <p>John, by the grace of God, King of England...</p>
  </PrimarySourceTranscription>

  <PrimarySourceContext>
    <PrimarySourceMetadata>
      <DataListItem label="Date">June 15, 1215</DataListItem>
      <DataListItem label="Location">Runnymede, England</DataListItem>
      <DataListItem label="Significance">Foundation of constitutional law</DataListItem>
    </PrimarySourceMetadata>
    <PrimarySourceQuestions>
      <p>1. What rights does this document establish?</p>
      <p>2. Why was it significant for its time?</p>
    </PrimarySourceQuestions>
  </PrimarySourceContext>
</PrimarySourceViewer>

Requirements

• Image viewer with pan, zoom, rotate
• Region-based annotations (highlight areas with notes)
• Side-by-side transcription panel
• Metadata display (date, origin, significance)
• Discussion questions section
• Multi-page documents (navigation)
• Comparison mode (original vs transcription)
• Full-screen mode
• Responsive: stacked panels on mobile
• Accessible: alt text, keyboard zoom/pan
• Composes: Resizable, Annotation (feat(component): Annotation / Highlight #18), DataList (feat(component): DataList — Key-Value Metadata Display #48)

Educational Use Cases

• Historical document study (constitutions, treaties, letters)
• Art analysis (paintings with annotation)
• Archaeological artifact examination
• Scientific manuscript study (Darwin's notebooks, etc.)
• Religious text study with commentary

References

• Internet Archive Book Reader
• IIIF Image Viewer
• Museum digital collection viewers