<RulesetEditor
  initialNodes={nodes}
  initialEdges={edges}
/>

<RulesetEditor
  catalog={catalog}            // blocks with typed params, from data
  choices={{ brokers: [...] }} // lists for source fields
  initialNodes={nodes}
  initialEdges={edges}
  initialGroups={groups}
  active={chain.active}        // a missing required param is then an error
  onChange={(graph) => save(graph)}
/>

// The blocks are scattered: press "Arrange the blocks" (bottom right) for a layered layout, one undo step.
// Shift / Ctrl / ⌘ and drag on the empty canvas draws a selection frame; the frame button does it with one finger.
// Drag a block: it snaps to a 12 px grid and to the edges of other blocks (guide lines); hold Alt to move freely.
// The mini map shows above 30 blocks or when blocks leave the view; the binoculars button toggles it.
const ref = useRef<RulesetEditorRef>(null);
<RulesetEditor ref={ref} catalog={catalog} initialNodes={nodes} initialEdges={edges}
  onSelectionChange={(ids) => setSelected(ids)}
  nodeMenuItems={({ nodeIds }) => [{ kind: 'item', label: 'Open live data', onSelect: () => open(nodeIds) }]}
  toolbarExtra={<MyButton />} bannerSlot={<DraftBanner />} />
ref.current?.arrange(); ref.current?.select(['n1']); ref.current?.reveal('n4');

<RulesetEditor readOnly catalog={catalog} initialNodes={nodes} initialEdges={edges} />

<RulesetEditor />