UI Lab

Objects

Workshop objects workbench — index, list, and detail routes composed from data-surface compounds.

Workshop patterns · fixture-only

Three-route browse flow

Module index (ObjectRow list) → typed list (RecordHero + ObjectList) → record detail (DetailSurface + PropertyGrid).

Workshop: /objects, /objects/[type], /objects/[type]/[id] in Workshop.
Avoid: One mega-fixture mixing all three routes — each step is a separate GalleryDemoBlock.

Fixture data only — behaviour matches production chrome

No objects-specific primitives

Every control here is a catalogued compound — RecordHero, ObjectList, PropertyGrid, not domain widgets.

Workshop: Object explorer wiring should import the same @hq/ui exports shown in reference pages.

Fixture data only — behaviour matches production chrome

List table bleed

Wide ObjectList tables use bleed GalleryDemoBlock — matches horizontal scroll on narrow viewports.

Workshop: Workshop list routes wrap tables in ObjectList + TableWrap when columns exceed main width.

Fixture data only — behaviour matches production chrome

Module index

/objects — type picker before drilling into a list. ListSurface + ObjectRow density.

Customers
CRM · 142 records
CRM
Orders
CRM · 89 records
Products
CRM · 56 records

List browse

/objects/[type] — RecordHero, filter bar, ObjectList table, and pagination.

Customers

142 records · sorted by updated
NameStatusARR
Acme CorpActive$1.2M
NorthwindReview$480K

Loading pagination…

Record detail

/objects/[type]/[id] — RecordHero, DetailSurface, PropertyGrid, and activity section.

Customers / Acme Corp

Acme Corp

Enterprise · Owner Jordan Lee

Company

Status
Active
ARR
$1,240,000
Owner
Jordan Lee

Activity

Event stream and assistant context render here.

Workshop mapping

Integration pattern for the objects workbench — compounds live on data-surface reference pages.

Lists

ObjectList, ObjectRow, ListSurface states

Detail

RecordHero, DetailSurface, PropertyGrid