The workspace L-chrome regions, mounted live: the top bar, the library rail, the canvas frame, the props rail and the status bar — then the five composed into the full L-chrome. Each card below is the real portal region rendered in isolation with stub contexts; the documentation sections that follow are generated from the component YAML.
Full workspace L-chrome (all five regions assembled)
The centre region of the workspace L-chrome — the placement slot the canvas occupies between the library rail and the props rail, below the top bar and above the status bar. It defines the geometry the canvas fills. The live canvas depends on the SSE-backed EntityStore and the renderer, which cannot be stubbed for a static showcase, so the harness specimen renders the correctly-sized centre frame as a presentational placeholder rather than a live canvas.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
Describing or reviewing the workspace centre canvas region geometry
Showing the placement slot the canvas occupies within the L-chrome
Verifying canvas-frame sizing against the chrome-geometry contract
When not to use
A generic content container — use container
A live element canvas with real data — that needs the running app shell
The full assembled chrome — use workspace-chrome-full-l
Accessibility
Role: main
No keyboard shortcuts
Screen reader: Announced as the main landmark — the primary content region of the workspace, framed by the surrounding chrome landmarks.
Notes: The showcase specimen is a presentational frame only; the live canvas contributes its own interactive semantics when mounted in the app.
Props
Name
Type
Default
Description
region_label
string
Canvas
Visible label used by the showcase specimen.
region_hint
string
Center placement slot · CenterView/Panel host · drill-in target
Compact anatomy hint for the specimen.
Examples
Canvas frame specimen
Main canvas placement slot within the workspace L-chrome.
CanvasCenter placement slot · CenterView host
YAML
type: stack
props:
direction: column
gap: xs
children:
- type: text
slots:
default: Canvas
- type: text
slots:
default: Center placement slot · CenterView host
The complete workspace L-chrome assembled from its five regions: the top bar across the top, a horizontal row of the library rail, the canvas frame and the props rail, and the status bar along the bottom. The top bar and library rail form the "L"; the props rail and status bar close it. The harness specimen composes the five presentational region specimens and renders the canvas as a frame since the live canvas needs the running app shell.
Readiness
complete
Preview
live
Props
1
Examples
1
Code
implementation mapped
When to use
Showing how the five chrome regions compose into the workspace layout
Reviewing the overall workspace L-chrome shape as a single specimen
Verifying region-to-region geometry against the chrome-geometry contract
When not to use
Reviewing one region in isolation — use the per-region workspace-chrome entry
A generic application layout shell — use app-shell-root
The live authenticated workspace — that is the running portal app, not a specimen
Accessibility
Role: presentation
No keyboard shortcuts
Screen reader: A presentational composition wrapper; the assistive-tech semantics come from the nested regions — the banner top bar, the navigation library rail, the main canvas, the complementary props rail and the contentinfo status bar.
Notes: The wrapper itself declares no landmark role; each composed region carries its own so the assembled chrome exposes the full landmark set.
Props
Name
Type
Default
Description
regions
array
—
The five workspace regions composed by the specimen.
Examples
Workspace L-chrome
The five workspace regions assembled as the L-chrome contract.
Top barLibrary rail · Canvas · Properties railStatus bar
YAML
type: stack
props:
direction: column
gap: sm
children:
- type: text
slots:
default: Top bar
- type: text
slots:
default: Library rail · Canvas · Properties rail
- type: text
slots:
default: Status bar
The left arm of the workspace L-chrome. A vertical rail of element-library category buttons and the always-present create affordance, from which a user opens the library or starts a new element. With the top bar it closes the workspace "L". The real `LibraryCategoryRail` reads seven contexts, all The showcase specimen records the library rail's placement and create affordance without needing the live element tree.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
Describing or reviewing the workspace library rail region in isolation
Showing the element-library category buttons and create affordance as a unit
Verifying the rail's empty-spine behaviour without a live element tree
When not to use
A general vertical navigation menu — use a navigation primitive
The element property sections — use workspace-chrome-props-rail
The full assembled chrome — use workspace-chrome-full-l
Accessibility
Role: navigation
Tab — Moves focus down the rail's category buttons.
Enter — Activates the focused category or create button.
Screen reader: Announced as a navigation landmark labelled for the element library. Each category and the create affordance are individually labelled.
Notes: The rail keeps the create button reachable even in its empty-spine state so a workspace with no elements is never a dead end.
Props
Name
Type
Default
Description
region_label
string
Library rail
Visible label used by the showcase specimen.
region_hint
string
Left edge · category buttons · opens the library overlay
Compact anatomy hint for the specimen.
Examples
Library rail specimen
Left rail region with category buttons and create affordance.
Library railLeft edge · category buttons · create
YAML
type: stack
props:
direction: column
gap: xs
children:
- type: text
slots:
default: Library rail
- type: text
slots:
default: Left edge · category buttons · create
The right arm of the workspace L-chrome — a vertical column of property sections for the currently focused element, falling back to the circle's own sections when nothing is focused. It closes the chrome opposite the library rail. The showcase specimen documents placement and region purpose without mounting live focus state.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
Describing or reviewing the workspace properties rail region in isolation
Showing the property-section column for a focused element as a unit
Verifying the rail's no-focus fallback to circle property sections
When not to use
An inline property editor inside a panel body — use a form primitive
The element-library category buttons — use workspace-chrome-library-rail
The full assembled chrome — use workspace-chrome-full-l
Accessibility
Role: complementary
Tab — Moves focus through the property sections and their controls.
Screen reader: Announced as a complementary landmark holding the focused element's property sections; each section is a labelled group.
Notes: The rail is complementary to the canvas main region — it supports the focused element rather than carrying primary content.
Props
Name
Type
Default
Description
region_label
string
Properties rail
Visible label used by the showcase specimen.
region_hint
string
Right edge · property sections · opens the properties overlay
Compact anatomy hint for the specimen.
Examples
Properties rail specimen
Right rail region for property sections.
Properties railRight edge · property sections
YAML
type: stack
props:
direction: column
gap: xs
children:
- type: text
slots:
default: Properties rail
- type: text
slots:
default: Right edge · property sections
The bottom region of the workspace L-chrome — a persistent horizontal bar that surfaces activity, metrics, execution presence and transient toasts. It closes the chrome below the canvas and the two rails. The real The showcase specimen documents the region geometry and content slots without mounting live execution or SSE state.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
Describing or reviewing the workspace status bar region in isolation
Showing activity, metrics and execution presence as one bottom-bar unit
Verifying status-bar geometry against the chrome-geometry contract
When not to use
A progress indicator inside a panel body — use a progress primitive
A transient notification on its own — use banner or a toast primitive
The full assembled chrome — use workspace-chrome-full-l
Accessibility
Role: contentinfo
Tab — Moves focus across the status-bar affordances.
Screen reader: Announced as the contentinfo landmark; live activity and metrics updates are exposed through polite live regions within it.
Notes: As a landmark there must be exactly one contentinfo per workspace document, distinct from the top bar's banner landmark.
Props
Name
Type
Default
Description
region_label
string
Status bar
Visible label used by the showcase specimen.
region_hint
string
Bottom strip · activity · metrics · toast feed
Compact anatomy hint for the specimen.
Examples
Status bar specimen
Bottom status region with activity, metrics, and toast affordance slots.
Status barBottom strip · activity · metrics · toast feed
YAML
type: stack
props:
direction: column
gap: xs
children:
- type: text
slots:
default: Status bar
- type: text
slots:
default: Bottom strip · activity · metrics · toast feed
The top arm of the workspace L-chrome. A persistent horizontal bar that hosts the brand lockup, the active circle and navigation context, the panel-toggle controls and activity affordances. It is one of the two arms (with the library rail) that form the workspace "L". The real The showcase specimen documents structure and geometry without mounting the authenticated `TopBar` context graph.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
Describing or reviewing the workspace top-bar region in isolation
Showing the brand, navigation context and panel toggles as one unit
Verifying top-bar geometry against the chrome-geometry contract
When not to use
A generic page header outside the workspace — use page-header
An application toolbar inside a panel body — use a panel-local bar
The full assembled chrome — use workspace-chrome-full-l
Accessibility
Role: banner
Tab — Moves focus across the top-bar controls left to right.
Screen reader: Announced as the page banner landmark. Brand, circle name and panel toggles are individually labelled controls within it.
Notes: As a landmark region there must be exactly one banner per workspace document; the status bar is a separate contentinfo landmark.
