feat(component): Annotation / Highlight

[bntvllnt]

Summary

Text annotation and highlighting component for educational content. Allows inline highlights with tooltips, margin notes, and collaborative annotations. Unique to the educational suite.

Motivation

Educational content needs inline annotations — highlight key terms, add instructor notes, show student highlights. This bridges the gap between static content and interactive learning.

Proposed API

{/* Inline highlight with tooltip */}
<Annotate type="definition" note="A function that calls itself">
  recursive function
</Annotate>

{/* Margin note */}
<Annotate type="margin" note="This concept is crucial for the exam">
  <p>Binary search divides the search space in half...</p>
</Annotate>

{/* Highlight with category */}
<Annotate type="highlight" color="yellow" category="key-concept">
  O(log n) time complexity
</Annotate>

Requirements

• Inline text highlighting with color variants
• Hover/click tooltip with annotation content
• Margin notes (rendered in document margin)
• Highlight categories (key-concept, warning, definition, example)
• Color coding per category
• Accessible: ARIA annotations, screen reader support
• Works within MDX content
• Multiple annotations can overlap
• CVA variants for highlight styles

Educational Use Cases

• Instructor annotations on reading material
• Key term highlighting with definitions
• Student note-taking on content
• Code annotation (highlight specific lines with explanations)

Technical Notes

• Renders as <mark> with tooltip wrapper
• Integrates with existing Tooltip component
• MDX-compatible (usable via mdxComponents)

[bntvllnt]

Implementation is active on branch feat/educational-family-batch-1 and tracked in PR #108: #108

[bntvllnt]

Shipped and merged in PR #108: #108