What the registry is
The component registry at app/components/directory/registry.ts is a metadata catalog of every visual element the YP site can render. It does not contain React components directly — it describes what components exist, what they do, and how they relate to data fields and page surfaces.
The registry has 5 categories with 52 total entries.
Categories
Bands (8 entries)
Full-width horizontal sections that stack to form a page. Each band is a self-contained layout region.
- band.top-navigation — sticky header with brand, links, theme toggle, CTA
- band.message — dismissible announcement alert
- band.hero-search — primary search prompt with value proposition and quick chips
- band.breadcrumb — SEO breadcrumb trail
- band.results-info — result count, active query summary, filter chips
- band.directory-shell — the main content area: filter sidebar + sort toolbar + result cards + pager
- band.footer-links — repeated navigation and browse links
- band.copyright — legal footer with terms and privacy links
Blocks (13 entries)
Smaller components that live inside bands. Blocks are the building units of each band.
- block.logo-home-link — brand/logo link
- block.primary-menu — public page links
- block.admin-menu — admin tooling dropdown
- block.business-login-cta — owner login call-to-action
- block.theme-toggle — light/dark switch
- block.message-alert — announcement with dismiss
- block.hero-copy — headline and supporting text
- block.prompt-search — natural-language search input
- block.hero-suggestion-chips — quick search/filter chips
- block.filter-sidebar — desktop filter rail
- block.sort-toolbar — sort select and view switch
- block.business-card — listing card with photo, facts, actions
- block.pagination — page controls with preserved query state
Filter templates (12 entries)
Reusable filter UI patterns. Each template handles one type of user input for narrowing search results.
- text-search — free text, name, address
- select-single — status, category, sort mode
- checkbox-group — multi-select types and services
- parent-child-tree — nested categories and locations
- numeric-range — rating, price, distance ranges
- date-period — recency and verification date
- time-period — opening hours and weekly schedule
- map-area — geographic box, radius, viewport
- image-selector — visual category browsing
- compact-mode-switch — view mode or binary toggle
- availability-toggle — has website, has phone, open now
- internal-hidden — admin-only or system fields
Field UI mappings (12 fields)
Maps each business data field to its rendering on 5 different surfaces: display, edit, filter, publicCard, and adminDetail. For example, the rating field renders as a rating summary on public cards, a trust score on admin detail, a numeric-range filter, and a number editor.
Page templates (11 entries)
Full-page compositions that combine bands and blocks into a complete route. Templates like directory-home, find-business, about, faq, contact, and business-login define the page structure.
How it connects to AI-driven page composition
The registry is designed to support a future AI-driven workflow:
- User enters a natural-language prompt (e.g. "show me reviews of realtors in Amsterdam")
- The OpenAI interpreter analyzes the prompt and returns data + component hints
- The component hints are registry keywords (e.g.
block.business-card,filter.template.checkbox-group) - The site renderer looks up the hinted components in the registry and assembles the page
Because every component has a stable keyword, a description, and a data contract, the AI can select and compose components without inventing new UI shapes. The registry acts as the contract between AI output and site rendering.
Viewing the registry
The full registry is rendered as a live page at /design-system (also /admin/components). Each entry shows its keyword, title, and description.