Component Badges

Overview

Component badges are small labels that identify component and instance groups on the canvas.

When badges appear

Badges are shown under these rules:

• Main components always show their name badge (as long as the component is visible).
• Instances show badges only when selected or when the instance is in the active scope stack (for example, after entering component edit mode).

Hidden objects do not display badges.

Visual details

• Main components render badges in purple (#8B5CF6).
• Instances render badges in blue (#3B82F6).
• Badge size stays consistent while zooming.
• When multiple component badges would overlap, they stack upward to remain readable.
• Components imported from external libraries are hidden by default and do not render badges.

Sync and cleanup

• Selection visuals, frame labels, and component badges now refresh through one shared visual sync entry point.
• Zoom updates use the same sync path, so badge visibility and label scale stay aligned with selection handles.
• Orphan cleanup runs after object deletion, history restore, and canvas clear to remove stale badges that no longer have a valid group owner.