# Select nodes with state

## What you will make

Make the gold Sketch card selected at startup, then click any card to select
it. The selected card gets a 5-pixel dark outline, and the status bar reports
`SELECTED · <TITLE>` alongside `ZOOM · 100%`. As an exercise, make clicking
the already selected card clear the selection.

## How it works

The diagram owns ordinary application IDs such as `"idea"` and `"sketch"`;
they are stable model data rather than Canvas target objects. `DiagramEditor`
stores the selected ID with [`useSignal`](/reference/hooks/use-signal/), finds the
matching node record, and passes a boolean plus one selection callback down to
each `NodeCard`.

## Build the change

Only the rounded card body has `onClick` and `cursor: "pointer"`. Its title,
subtitle, ports, edges, and other decorative paint use `pointerEvents="none"`,
so they cannot occlude that intended target. The workspace background owns its
own click handler to clear selection. The available [event types](/reference/types/events/)
describe the DOM-aligned handler surface.

## Predict and try

Click Idea and predict when the status changes. The handler updates the signal, but
it does not synchronously repaint pixels: Pibbl coalesces the request into a
future scheduled frame. Then change `onSelect` so a matching selected ID
becomes `null`; clicking the same body again should show `NO SELECTION`.

## Check your result

The initial status reads `SELECTED · SKETCH`. Clicking the center of Idea's
painted body changes the next painted status to `SELECTED · IDEA`, while
clicking empty workspace clears it. If a label steals a click, it is decorative
paint that has not opted out of targeting; review [Style and draw](/guides/style-and-draw/)
and make that child non-targeting.

## What you learned

Selection is explicit application state: a signal holds the selected model ID,
and the rendered outline and status are consequences of that state. Constraining
interaction to the painted body keeps target ownership legible, while scheduled
rendering keeps rapid state writes coalesced into the next frame.

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

## 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.