Search the workshop
The long-form search experience for the Mufflermen catalog, document store, and people directory — distinct from the spotlight command palette. Persistent search bars, faceted filters, results-list cards, relevance scoring, and the analytics card that powers the admin view.
Search the workshop is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Search the workshop: The long-form search experience for the Mufflermen catalog, document store, and people directory — distinct from the spotlight command palette. Persistent search bars, faceted filters, results-list cards, relevance scoring, and the analytics card that powers the admin view.
Pick a surface
Each route opens the primitive in isolation with a focused demo, an explanation of the Oak Flats use case, and accessible keyboard interaction. The full-scene composition wires them all together as a complete search page.
Global search bar
Persistent top-of-app workshop search bar with kbd hint, clear button, and tone variants. Wider than the spotlight palette — designed to live in the masthead.
Inspect primitive states 02Inline search input
In-page filter input with debounced pulse indicator and live result-count chip. Use above any list that supports client-side filtering.
Inspect primitive states 03Suggestion list
Dropdown suggestions grouped by Recent, Popular, and Quick links. Keyboard-navigable with arrow keys plus Enter, ARIA listbox semantics.
Inspect primitive states 04History row
Single search-history entry: query text, semantic time element, optional result count, and a one-click remove control.
Inspect primitive states 05Faceted filter sidebar
Sticky left rail with collapsible groups — checkboxes, chip facets, range sliders, toggles. Powers the long-form search results page.
Inspect primitive states 06Active filter chip bar
Horizontal row of currently-applied filter chips. Each chip is dismissable; a Clear all pill blasts the whole set.
Inspect primitive states 07Results list
Vertical results list with mark-highlighted snippets, kind chips, and metadata. Supports compact and comfortable densities.
Inspect primitive states 08Result card
Generic search result card variant: thumbnail, source line, URL, snippet with query highlighting, and a tag rail.
Inspect primitive states 09Product result
Product-specific result card with SKU, supplier, fitment, stock state, price block, and a view-part CTA.
Inspect primitive states 10File result
File-type result card with kind-tinted icon (pdf, doc, image, sheet, zip), full path, size, modified time, and open CTA.
Inspect primitive states 11Person result
Person result card with avatar fallback, presence dot, role and workshop labels, and quick contact actions (mail / phone / chat).
Inspect primitive states 12Relevance bar
Compact relevance score bar: 0–100% fill with tone-shifting gradient and a paired confidence chip — strong / partial / loose.
Inspect primitive states 13No results state
Search-specific empty state with alternative query chips, a request-this-search CTA, and a back-to-all-results link.
Inspect primitive states 14Analytics card
Admin-side search-analytics card composing the DataTable primitive with a 14-day Sparkline trend and zero-result-rate readout.
Inspect primitive states 15Full search scene
Bonus composition: global bar, faceted sidebar, active filter chips, mixed result types (product / file / person), pagination, sort, and live count — all glued together.
Review full composition