Правки для синхронизации с основным порталом

src/DiagramEditor.tsx

@@ -44,6 +44,14 @@ import "./diagram.css";
 interface DiagramEditorProps {
   initialValue: DiagramDocument | null;
   onChange: (doc: DiagramDocument) => void;
+  /**
+   * Режим, зафиксированный хостом (см. `?mode=view` в `src/App.tsx`).
+   * Когда задан, переключатель «Просмотр/Редактирование» скрыт: хост,
+   * встроивший приложение только на чтение, всё равно игнорирует
+   * `diagram:change`, и предлагать правки, которые никуда не сохранятся, —
+   * обман пользователя.
+   */
+  lockedMode?: "edit" | "view";
 }
 
 const DEFAULT_EDGE_TYPE = "smoothstep";
@@ -196,13 +204,14 @@ function isEditableTarget(target: EventTarget | null): boolean {
   );
 }
 
-function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
+function DiagramCanvas({ initialValue, onChange, lockedMode }: DiagramEditorProps) {
   const [nodes, setNodes] = useState<Node[]>(() => toRfNodes(initialValue));
   const [edges, setEdges] = useState<Edge[]>(() => toRfEdges(initialValue));
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
   const [focusNodeId, setFocusNodeId] = useState<string | null>(null);
-  const [mode, setMode] = useState<"edit" | "view">("edit");
+  const [selectedMode, setSelectedMode] = useState<"edit" | "view">("edit");
+  const mode = lockedMode ?? selectedMode;
   const [alignmentGuides, setAlignmentGuides] = useState<AlignmentGuide[]>([]);
   const nodeCounter = useRef(0);
   const historyRef = useRef<{ nodes: Node[]; edges: Edge[] }[]>([]);
@@ -834,15 +843,17 @@ function DiagramCanvas({ initialValue, onChange }: DiagramEditorProps) {
                 )}
               </Controls>
               {mode === "edit" && <MiniMap />}
-              <Panel position="top-right" className="diagram-mode-toggle">
-                <ChoiceGroup
-                  size="xs"
-                  name="diagram-mode"
-                  items={MODE_ITEMS}
-                  value={MODE_ITEMS.find((item) => item.mode === mode) ?? null}
-                  onChange={(item) => setMode(item.mode)}
-                />
-              </Panel>
+              {!lockedMode && (
+                <Panel position="top-right" className="diagram-mode-toggle">
+                  <ChoiceGroup
+                    size="xs"
+                    name="diagram-mode"
+                    items={MODE_ITEMS}
+                    value={MODE_ITEMS.find((item) => item.mode === mode) ?? null}
+                    onChange={(item) => setSelectedMode(item.mode)}
+                  />
+                </Panel>
+              )}
               {mode === "edit" && (
                 <Panel position="top-left" className="diagram-toolbar">
                   {NODE_KINDS.map(({ kind, label }) => (