The workspace page

Almost everything in this documentation is a primitive — a button, a card, an overlay. This is the frame those sit in, and it is the single most-used piece of design in the product: sixteen routes are built from it, from Today to Settings to the CRM. If a new operating surface does not start here, it will not look like Morna.

The frame

Three components, always in this order: WorkspacePage sets the measure, WorkspaceHeader names the surface and carries its actions, and WorkspaceSection divides the body. There is no card, no panel, no box — the page is a column of sections separated by hairlines, and depth is used only where something is genuinely lifted off the page.

Width is a prop with three values, and picking one is a real decision: standard (1180px) for most work, narrow (860px) when the page is mostly prose or settings and a long line would hurt, data (1280px) when a table genuinely needs the room.

Rows & lists

RowList plus OperationalRow is how nearly all workspace content renders. The row is one grid: an optional owner initial, a title that can carry a state chip, an optional description and meta line, and an end slot for controls. It renders as a <div>, an <a>, or a <button> depending on whether you pass href or onClick — so a row is never a div pretending to be clickable.

Three sizes, and they mean different weights of thing: compact (52px) for reference lists, standard (68px) for work, and decision (88px) where the owner is being asked for something. The state chip takes a tone — neutral, attention, success, danger — which maps straight onto the --sem-* ramp and is always preceded by its own dot, so the tone is never the only carrier.

Buttons & notices

WorkspaceButton is the page-grammar control (36px min, radius 8, hairline border), and it is deliberately not @morna/ui’s Button — this one is a plain <button> passthrough that inherits every native attribute, so a workspace page never fights a primitive to get type, disabled or aria-* onto an element. WorkspaceLink is the same face on a Link.

WorkspaceNotice is the page’s one-line answer to something that just happened. Its danger prop does two things at once, which is the point: it recolors the line and switches the live region from role="status" to role="alert". A failure a sighted owner sees immediately is a failure a screen reader announces immediately.

Empty & loading

The page grammar carries its own two waiting states, and they honor the doctrine on honest waiting rather than restating it. WorkspaceEmpty is a plain sentence in the section’s own measure — no illustration, no mascot, no centered nothing. WorkspaceSkeletonRows renders row-shaped placeholders that are capped at three no matter what you pass, because a screenful of shimmer is a claim about how much is coming that the page cannot actually make yet.

The specimen above passes count={9} and renders three rows. That is not a typo in the demo — it is the cap doing its job, live.

The decision review

DecisionReview is the heaviest thing in the module and the only part that takes over the page: it is what renders when the owner opens something waiting on their yes. It scrolls itself into view and takes focus on mount (as an article tabIndex=-1, not a modal — the page underneath stays), and it renders a fixed fact list rather than free prose.

Those facts are the design. Recipient, exact operation, consequence, why now, operating thread, scope, and if it fails — and the last three are hardcoded sentences, not props, precisely so no call site can quietly omit them. Scope always says one recorded action with no follow-on implied; the failure line always distinguishes a proven pre-effect failure (still decidable) from a possibly-started effect (held for reconciliation). When a fact is genuinely missing the component says so — “No complete Move-to-goal chain is recorded for this older action” — rather than dropping the row.

The specimen below is the real component, behind a control on purpose: because it takes focus and scrolls to itself the moment it mounts, rendering it inline would hijack this page on load. Open it and watch it claim the page — that is the behaviour, not a demo affordance. Note the trace row: nothing is passed, so it states the absence rather than hiding it.

VerifiedResult is the counterpart to the review: where a decision asks, this reports. It is the one place the grammar raises its voice — the outcome is set at the header’s own 32px, under a small Verified result label in --sem-success. It is for a landed, evidenced outcome, one per section. A projection or an estimate does not get this treatment.

Choosing a part