Oak Flats UI Primitives Catalogue

Searchable canned-response library. Left rail lists macros (title + shortcut + category). Right preview shows the resolved body, the variable placeholder chips and an Insert action. The Insert button toggles aria-pressed so screen-reader users know which macro was applied last.

Production answer

Macro picker is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Macro picker states

Generative search brief

Macro picker: Searchable canned-response library. Left rail lists macros (title + shortcut + category). Right preview shows the resolved body, the variable placeholder chips and an Insert action. The Insert button toggles aria-pressed so screen-reader users know which macro was applied last.

Live primitive · 5 macros · search + preview + insert

Macros5

Booking confirmation

/book-ok

G'day {{customer.firstName}}, your booking is locked in for {{booking.date}} at {{booking.time}} in {{booking.bay}}. ETA on the floor is {{booking.eta}}. Bring the keys, we'll handle the rest.

Cheers,
The Mufflermen team

{{customer.firstName}}First name{{booking.date}}Booking date{{booking.time}}Booking time{{booking.bay}}Assigned bay{{booking.eta}}Floor ETA