AppFrame

The frame of a whole screen: the bar at the top, the width the content may reach, and the margins beside it. The width is a token, not a number each application repeats.

When to use it

The outermost element of a screen — IngotPageLayout goes inside it. The frame holds the width and the margins, the layout the vertical rhythm of the blocks within.
The application has a bar at the top. The frame sticks it to the window and lets it span the full width, while its row stays aligned with the content below.
A screen that IS the data — a wide table, a plan, a board — takes width="full". A limit there does not protect the reader, it hides columns from them.

When not to use it

Inside another frame. Two frames stacked mean two sets of margins and content that starts somewhere other than the bar led the reader to expect.
The width of one block inside a page. The reading width of long prose is IngotPageLayout with width="reading".
A modal or a side panel. Those carry their own width and stand above the frame, not inside it.

Properties

children: ReactNode — The screen's content — typically `IngotPageLayout`.
width: "app" | "full" — `app` (the default) stops at `--frame`; `full` lets the content reach both edges. `app` is the default because screens that ARE a wide table are the few, and the rest would be unreadable across a large monitor.
bar: ReactNode — The bar at the top, typically `IngotTopNav`. It sticks to the window and spans its full width; pass `INGOT_FRAME_ROW` to its `contentClassName` so its row lines up with the content below.
className: string — Vertical rhythm only — padding above and below. Width does not belong here.
testId: string — An anchor for tests.