Начал переводить на consta UI

src/DiagramEditor.tsx

@@ -25,6 +25,9 @@ import {
   type EdgeMouseHandler,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import { Button } from '@consta/uikit/Button';
+import { ChoiceGroup } from '@consta/uikit/ChoiceGroup';
+import { Breadcrumbs } from '@consta/uikit/Breadcrumbs';
 import { nodeTypes, NodesWithChildrenContext, ModeContext } from './nodes';
 import { NodeInspector } from './NodeInspector';
 import { EdgeInspector } from './EdgeInspector';
@@ -52,6 +55,13 @@ const NODE_KINDS: { kind: NodeKind; label: string }[] = [
   { kind: 'inclusiveGateway', label: '+ Вкл. шлюз' },
 ];
 
+// Stable references — ChoiceGroup's controlled `value` is compared against
+// entries in `items` by identity, so this can't be recreated on every render.
+const MODE_ITEMS: { label: string; mode: 'edit' | 'view' }[] = [
+  { label: 'Просмотр', mode: 'view' },
+  { label: 'Редактирование', mode: 'edit' },
+];
+
 const DEFAULT_NODE_SIZE: Record<NodeKind, { width: number; height: number }> = {
   task: { width: 140, height: 50 },
   startEvent: { width: 48, height: 48 },
@@ -634,38 +644,33 @@ function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
             </Controls>
             {mode === 'edit' && <MiniMap />}
             <Panel position="top-right" className="diagram-mode-toggle">
-              <button type="button" disabled={mode === 'view'} onClick={() => setMode('view')}>
-                Просмотр
-              </button>
-              <button type="button" disabled={mode === 'edit'} onClick={() => setMode('edit')}>
-                Редактирование
-              </button>
+              <ChoiceGroup
+                size="xs"
+                name="diagram-mode"
+                items={MODE_ITEMS}
+                value={MODE_ITEMS.find((item) => item.mode === mode) ?? null}
+                onChange={(item) => setMode(item.mode)}
+              />
             </Panel>
             {mode === 'edit' && (
               <Panel position="top-left" className="diagram-toolbar">
                 {NODE_KINDS.map(({ kind, label }) => (
-                  <button key={kind} type="button" onClick={() => addNode(kind)}>
-                    {label}
-                  </button>
+                  <Button key={kind} size="xs" view="secondary" label={label} onClick={() => addNode(kind)} />
                 ))}
               </Panel>
             )}
             <Panel position="top-center" className="diagram-breadcrumbs">
-              <button type="button" disabled={!focusNodeId} onClick={() => goToLevel(null)}>
-                Корень
-              </button>
-              {breadcrumbPath.map((node, index) => (
-                <span key={node.id}>
-                  {' / '}
-                  <button
-                    type="button"
-                    disabled={index === breadcrumbPath.length - 1}
-                    onClick={() => goToLevel(node.id)}
-                  >
-                    {(node.data as DiagramNodeData).label}
-                  </button>
-                </span>
-              ))}
+              <Breadcrumbs
+                size="xs"
+                items={[
+                  { label: 'Корень', onClick: focusNodeId ? () => goToLevel(null) : undefined },
+                  ...breadcrumbPath.map((node, index) => ({
+                    label: (node.data as DiagramNodeData).label,
+                    onClick: index === breadcrumbPath.length - 1 ? undefined : () => goToLevel(node.id),
+                  })),
+                ]}
+                getItemOnClick={(item) => item.onClick}
+              />
             </Panel>
           </ReactFlow>
         </ModeContext.Provider>