# Build the editor chrome

## What you will make

Turn the diagram into an editor frame with a 56-pixel toolbar, a 512-pixel
workspace, and a 32-pixel status bar. The toolbar includes an intentionally
inert Reset view control; its behavior arrives with the view model later.
As an exercise, change the three region heights while keeping their total at
600 pixels.

## How it works

[`Absolute`](/reference/components/absolute/) reads the specified style of each
direct child and gives that child a finite allocation. `left` and `top` place
the region; `width` and `height` define its local available box. The region
component calls [`useLayoutBox()`](/reference/hooks/use-layout-box/) during render to
read that resulting local allocation.

## Build the change

`Toolbar`, `Workspace`, and `StatusBar` all accept the same specified-style
prop because they are direct children of `Absolute`. Each instead draws with a
focused style made from `box.width` and `box.height`. The workspace therefore
keeps node records in local workspace coordinates while Absolute performs the
root placement. See [Compose and lay out scenes](/guides/compose-and-layout/)
for the broader layout model.

## Predict and try

Change the toolbar to 64 pixels and the status bar to 40 pixels, then reduce
the workspace to 496 pixels so the three allocations still total 600. Predict
which values follow automatically: the three background rectangles do, because
they read their allocated boxes; node coordinates do not, because they remain
local workspace geometry.

## Check your result

The three background regions should begin at y=0, y=56, and y=568 with heights
56, 512, and 32. Avoid forwarding a receiver's complete style object directly
to a drawing primitive: that would apply `left` and `top` a second time after
the layout parent has already placed the child. The [layout types](/reference/types/layout/)
show the separate allocation and drawing vocabulary.

## What you learned

Specified style communicates with a direct layout parent, while
`useLayoutBox()` reports the finite local drawing allocation. Keeping those
roles separate makes each region reusable and avoids double-placement mistakes.
The Reset view control is only paint in this chapter, so it cannot imply
behavior before the editor owns a view transform.

[Open the interactive workbench](/playground/#/workbench/diagram-editor-editor-chrome)

## Implementation guidance for agents

Read the [Authoring, signals, and lifecycle companion](/agents/topics/lifecycle/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.