Toolbar Component (toolbar.tsx)

Types

ToolId

A union type of all possible tool identifiers:

• 'number', 'class', 'index', 'id', 'notes', 'print', 'visibility'

ToolbarProps

Props for the Toolbar component:

• onToolSelect?: (toolId: ToolId, active: boolean) => void
  Callback when a tool is selected or toggled.

• onVisibilityChange?: (visible: boolean) => void
  Callback when the toolbar visibility is toggled.

---

Component

Toolbar({ onToolSelect, onVisibilityChange }: ToolbarProps)

A toolbar UI for selecting annotation tools and toggling visibility.

State:

• activeTools: Set of currently active tool IDs (except print/visibility).

• isVisible: Whether the toolbar is visible.

Features:

• Tool Selection:

  • Buttons for each annotation tool (number, class, index, id, notes).

  • Clicking a tool toggles its active state and calls onToolSelect.

• Print Action:

  • Clicking the print button triggers onToolSelect('print', true).

• Visibility Toggle:

  • Eye/eye-off button toggles toolbar visibility and calls onVisibilityChange.

• Accessibility:

  • Each button has an aria-label for screen readers.

  • Toolbar uses role="toolbar" and aria-label.

Rendering:

• Toolbar is hidden when isVisible is false.

• Active tools are visually highlighted.