Sibling to AppMock, WidgetMock, and SidebarMock. AppMock paints a single product surface. WidgetMock paints one tile. SidebarMock paints one detail panel. MockScene paints them together: free-form positioning, multiple sidebars and widgets in any arrangement, no enforced background, no rotation. Each item carries its own shadow and lifts off whatever card the scene sits inside.
A typed register at the centre with the Metadata sidebar pulled out. Mail and Files lift in from the upper-left and lower-left, Activity charts overlap the sidebar from the right, the calendar grid slides in below. One register row, lit on every workspace surface.
The case sidebar with xWiki open and the OpenConnector run-detail sidebar stand side by side, the werkvoorraad and due-today widgets staggered between them. Two sidebars in one frame is fine; the API does not enforce a centre.
A document flowing through DocuDesk: drop a file in (sm), the signatures sidebar tracks who has signed (md), pending list keeps it moving (sm), the run-detail sidebar (sm) shows OpenConnector delivering it, the recent-runs widget (sm) closes the loop. Each junction overlaps by ~20px so the eye reads continuity.
How to assemble a scene. Pass an items array where every entry carries { type, kind, x, y, size }. type is 'widget' or 'sidebar'; kind is the variant slug (see WidgetMock and SidebarMock); x and y are pixel offsets from the scene's top-left; size picks 'sm', 'md' (default), or 'lg'. Items render in array order so later entries land on top of earlier ones; pass z to override.
Set the canvas with width and height on the scene itself. There is no built-in background; each mock carries its own shadow and border so they read as panels lifted off whatever card you drop the scene into.
The component lives in docusaurus-preset/src/components/MockScene/.