Meeting Finder

Accessibility

• Timelines and avatars are decorative, because each suggestion says the same in words.
• Results are announced.
• Notes pair color with a check or a warning icon, so status is never color only.
• On Mobile the button reads Find but keeps the name Find times, and its tap area stays 44 px.

Motion

• The panel fades and rises 8 px in 400 ms on first render.
• Suggestions fade in over 240 ms with a 40 ms stagger.
• The proposed ring slides to the picked time in 240 ms, by transform only.
• Skeletons shimmer while searching and pause offscreen.
• With reduced motion, the panel only fades, the ring swaps at once and skeletons stay still.

Responsive behavior

• 600 px on Web and full width on Mobile.
• Mobile narrows the name column to 44 px and shortens the button to Find, 28 px tall with a 44 px hit area. The prompt wraps to two lines and ends with an ellipsis beyond that. Chip values and chips after the third are kept for screen readers only. Names, times and notes stay on one line and end with an ellipsis.

Performance

• No loop at rest. The skeleton shimmer runs only while searching, pauses offscreen and stays still with reduced motion.
• One proposed ring spans every lane and slides by transform, so picking a time never lays the timeline out again.

• Import MeetingFinder from @/components/fetaui/meeting-finder. It composes Button, Avatar and Badge.
• Give each person a person or src for the avatar, or it shows initials from name. Give each constraint a kind (duration, people, date, time) for its icon, and an optional value. Pass removable to add remove buttons.
• onFind gets the prompt and constraints, and returns ranked suggestions. The demo returns fixed times after a timer, so connect your own calendar and model.
• A rejected onFind shows failedMessage, and an empty result shows emptyMessage.
• busy, start and end are decimal hours inside from and to. onPick fires when someone picks a suggestion, but not for the first one, which is picked by default.