ForgePane

PURPOSE

Center pane of the weapon workbench screen. Renders the editor for the currently selected component, or an empty-state prompt if nothing is selected.

OWNS

• The ForgePane React component (default-exported function).
• The empty-state placeholder markup and its inline styles.
• The padded scroll container that wraps ComponentEditor when a component is selected.

READS FROM

• useWorkbenchStore — subscribes to selectedComponentId to decide between empty state and editor.

PUSHES TO

• Nothing. The pane does not mutate store state or call setters; it only reads selectedComponentId.

DOES NOT

• Does not render the component library or any list of components.
• Does not own selection logic; selection is set elsewhere via selectComponent on useWorkbenchStore.
• Does not implement the editor UI itself; that work is delegated to ComponentEditor.
• Does not handle the ”+ New” action referenced in the empty-state copy; the text is a static prompt.
• Does not fetch, persist, or validate component data.

Signals

• data-testid="forge-empty" on the empty-state container when selectedComponentId is null.
• data-testid="forge-pane" on the editor container when a component is selected.

Entry points

• Named export ForgePane() — rendered by the weapon-workbench screen as the middle pane between the library and any side panels.

Pattern notes

• Selector subscription is a single-field read ((s) => s.selectedComponentId), so the pane only re-renders when the selected ID changes.
• Empty state is a CSS grid with placeItems: 'center' and uses inline styles only.
• The editor branch wraps ComponentEditor in a padding: 16 container with overflow: 'auto' to allow the editor to scroll independently within the pane.
• The ”+ New” hint in the empty-state text is plain markup — clicking it does nothing; the actual new-component action lives outside this file.