Registry Items
Installable KnearMe-owned list-detail surfaces that turn the design system into a distributable contract, not just a gallery.
Use App Surfaces for when to use the pattern, and Generative UI for how typed renderer output composes into these installable shells.
Registry Surface Map
Installable KnearMe surfaces should be inspectable by contract, not only by where they happen to appear in a demo.
Connected Family
The first registry wave publishes the smallest coherent surface family: selectable preview cards, an expanded inspector rail, and the responsive shell that holds both.
What it is for
Expose installable public contracts for the list-detail interaction without publishing the whole app-surface taxonomy at once.
Use when
You want a reusable preview-to-rail pattern that can live inside chat, project review, or assistant-guided flows.
Do not use when
You need a carousel, PiP, or fullscreen workflow. Those remain conceptual surfaces for now.
Related patterns
App Surfaces · Generative UI · Artifacts
Escalation path
Installable preview card → installable rail → full app-surface recipes.
Developer details
Start from these files when you need to trace the live implementation.
shared/ui/chat/ResultPreviewCard.tsx · shared/ui/chat/InspectorDetailRail.tsx · shared/ui/chat/ListDetailShell.tsx
Thread preview list
Keep the preview lightweight. Let the user scan, select, and only then expand detail in the supporting rail.
Project page candidate
Rosedale limestone porch refresh
- Service
- Stone restoration
- Readiness
- 92% complete
- Focus
- Hero + proof block
- Location
- Toronto, ON
Project page candidate
Danforth brick facade repointing
- Service
- Brick repointing
- Readiness
- 76% complete
- Focus
- Copy clarity
- Location
- East York, ON
Project page candidate
Leslieville storefront repair brief
- Service
- Commercial masonry
- Readiness
- 84% complete
- Focus
- Proof + CTA
- Location
- Toronto, ON