import {
  ChangeEvent,
  DragEvent,
  memo,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { createPortal } from "react-dom";
import type {
  CSSProperties,
  KeyboardEvent as ReactKeyboardEvent,
  MouseEvent as ReactMouseEvent,
  PointerEvent as ReactPointerEvent,
  ReactNode,
} from "react";
import {
  ChevronDown,
  ChevronUp,
  ClipboardPaste,
  Copy,
  Download,
  FileCode2,
  FileDown,
  FileUp,
  FlipHorizontal2,
  FolderOpen,
  Grid2X2,
  Grip,
  ListChecks,
  Magnet,
  Maximize2,
  Minimize2,
  Move,
  Play,
  Redo2,
  RotateCw,
  Save,
  Square,
  SquareTerminal,
  Trash2,
  Undo2,
  type LucideIcon,
} from "lucide-react";
import {
  ConnectionLineType,
  ConnectionMode,
  Handle,
  Panel,
  PanOnScrollMode,
  Position,
  ReactFlow,
  ReactFlowProvider,
  ViewportPortal,
  SelectionMode,
  addEdge,
  applyNodeChanges,
  type Connection,
  type Edge,
  type EdgeChange,
  type EdgeMouseHandler,
  type Node as ReactFlowNode,
  type NodeChange,
  type NodeMouseHandler,
  type NodeProps,
  type NodeTypes,
  type OnConnectStart,
  type OnNodeDrag,
  type OnSelectionChangeFunc,
  type Viewport,
  useEdgesState,
  useNodesState,
  useReactFlow,
  useStore,
  useStoreApi,
  useUpdateNodeInternals,
} from "@xyflow/react";
import {
  CANVAS_GRID_SIZE,
  CanvasGridBackground,
  type CanvasGridVisibility,
} from "./CanvasGridBackground";
import {
  EmptySimulationResultsView,
  SimulationResultsView,
  type ResultVariableMetadata,
  type SimulationResultsSnapshot,
} from "./SimulationResultsView";
import { AutoFitView } from "./AutoFitView";
import { DockedSimulationConsole } from "./DockedSimulationConsole";
import {
  ComponentSymbol,
  componentSymbolLayout,
  componentSymbolPresentation,
  componentSymbolVariantKey,
  hasComponentSymbol,
} from "./ComponentSymbol";
import type {
  ComponentSymbolLayout,
  ComponentSymbolPortAnchor,
  ComponentSymbolSize,
  ComponentSymbolViewBox,
} from "./componentSymbols/types";
import {
  LMECHN1_MAX_RIGHT_PORT_COUNT,
  lmechn1RightPortCount,
} from "./componentSymbols/mechanical";
import {
  SIMULATION_ACTIVITY_STALL_TIMEOUT_MS,
  SIMULATION_ACTIVITY_STALL_TIMEOUT_SECONDS,
  SIMULATION_SOLVER_STALL_TIMEOUT_MINUTES,
  SIMULATION_SOLVER_STALL_TIMEOUT_MS,
  solverActivityStallTimeoutMessage,
  solverStallTimeoutMessage,
} from "./simulationTimeout";
import {
  CONTACT_AWARE_EDGE_TYPE,
  contactAwareEdgeTypes,
} from "./ContactAwareEdge";
import {
  buildOrthogonalRoutePoints,
  detectEdgeCrossingJumps,
  edgePointIsFinite,
  orthogonalEdgePoints,
  orthogonalPolylinePath,
  type EdgeRouteData,
  type EdgeRoutePoint,
} from "./edgeRouting";
import {
  ParameterTable,
  loadParameterColumnLayout,
  saveParameterColumnLayout,
  type ParameterColumnLayout,
  type ParameterTableGroup,
  type ParameterTableRow,
} from "./ParameterTable";
import {
  evaluateParameterExpression,
  isParameterExpressionValue,
  isScientificNotationValue,
} from "./parameterExpression";
import {
  WorkspaceViewTabs,
  type WorkspaceView,
} from "./WorkspaceViewTabs";

type ParameterValue = number | string;
type UnitQuantity = string;
type ParameterScientificNotation = {
  text: string;
  unit: string;
};
type PortKind = "physical" | "signal";
type PortNominalRole = "inlet" | "outlet" | "bidirectional" | "input" | "output";
type PortSide = "left" | "right";
type NodeRotation = 0 | 90 | 180 | 270;

type PortDefinition = {
  name: string;
  kind: PortKind;
  domain: string;
  nominalRole: PortNominalRole;
  positiveFlowDirection?: "intoComponent";
  side: PortSide;
};

type PortConnectionState =
  | "idle"
  | "connected"
  | "origin"
  | "compatible"
  | "incompatible";

type ActivePortConnection = {
  nodeId: string;
  portName: string;
  mode: "drag" | "click";
};

type PortConnectionDraft = {
  pointer: EdgeRoutePoint | null;
  waypoints: EdgeRoutePoint[];
};

type ContactSnapMatch = {
  connection: Connection;
  draggedNodeId: string;
  draggedPortName: string;
  targetNodeId: string;
  targetPortName: string;
};

type ContactSnapCandidate = {
  matches: ContactSnapMatch[];
  positionDelta: { x: number; y: number };
};

type ContactDragSession = {
  contactEdgeIds: Set<string>;
  disconnected: boolean;
  draggedNodeIds: Set<string>;
  effectiveEdges: SimulationEdge[];
  lastCandidate: ContactSnapCandidate | null;
  lastEvaluatedPosition: { x: number; y: number } | null;
  lastSnapRadius: number;
  multipleNodes: boolean;
  nodeId: string;
  snapSearchContext: ContactSnapSearchContext;
  startPosition: { x: number; y: number };
};

type UnitOption = {
  value: string;
  label: string;
  toBase: (value: number) => number;
  fromBase: (value: number) => number;
};

type ParameterDefinition = {
  label: string;
  description?: string;
  unit?: string;
  quantity?: UnitQuantity;
  default: ParameterValue;
  min?: number;
  max?: number;
  minExclusive?: boolean;
  editor?: "choice" | "amesimGasReference" | "amesimGasPropertyModel";
  options?: ParameterOption[];
  visibleWhen?: ParameterVisibilityCondition[];
};

type ParameterOption = {
  value: number;
  label: string;
};

type ParameterVisibilityCondition = {
  parameter: string;
  values: number[];
};

type ParameterGroupDefinition = {
  id: string;
  label: string;
  order: number;
  parameters: string[];
  defaultExpanded: boolean;
};

type ComponentDefinition = {
  type: string;
  label: string;
  modelType: string;
  modelVersion: string;
  symbol: string;
  order: number;
  category: {
    id: string;
    label: string;
    order: number;
  };
  role?: "amesimGasMediumDefinition";
  ports: PortDefinition[];
  parameters: Record<string, ParameterDefinition>;
  parameterGroups?: ParameterGroupDefinition[];
};

type ComponentLibraryDefinition = {
  id: string;
  label: string;
  version: string;
  sourcePackage: string;
  temporary: boolean;
  order: number;
  components: ComponentDefinition[];
};

type ComponentCatalogParameterPayload = {
  name: string;
  label: string;
  description?: string;
  quantity: string;
  unit: string;
  default: number;
  minimum?: number;
  maximum?: number;
  minimumExclusive: boolean;
  editor?: "choice" | "amesimGasReference" | "amesimGasPropertyModel";
  options?: ParameterOption[];
  visibleWhen?: ParameterVisibilityCondition[];
};

type ComponentCatalogComponentPayload = {
  type: string;
  label: string;
  modelType: string;
  modelVersion: string;
  symbol: string;
  order: number;
  category: {
    id: string;
    label: string;
    order: number;
  };
  role?: "amesimGasMediumDefinition";
  ports: Array<PortDefinition & { order: number }>;
  parameters: ComponentCatalogParameterPayload[];
  parameterGroups?: Array<{
    id: string;
    label: string;
    order: number;
    parameters: string[];
    defaultExpanded?: boolean;
  }>;
};

type ComponentCatalogResponse = {
  schemaVersion: number;
  libraries: Array<
    Omit<ComponentLibraryDefinition, "components"> & {
      components: ComponentCatalogComponentPayload[];
    }
  >;
};

type ComponentCatalogStatus = "loading" | "ready" | "error";

class ComponentCatalogLibraryError extends Error {
  readonly libraryName: string;

  constructor(libraryName: string, message: string) {
    super(message);
    this.name = "ComponentCatalogLibraryError";
    this.libraryName = libraryName;
  }
}

type SimulationNodeData = {
  label: string;
  componentType: string;
  modelType: string;
  modelVersion?: string;
  modelContractIssues?: string[];
  symbol?: string;
  ports: PortDefinition[];
  parameters: Record<string, ParameterValue>;
  parameterUnits: Record<string, string>;
  parameterScientificNotation: Record<string, ParameterScientificNotation>;
  rotation: NodeRotation;
  mirrored: boolean;
  portConnectionStates?: Record<string, PortConnectionState>;
  hideConnectedPortIndexLabels?: boolean;
};

type SimulationNode = ReactFlowNode<SimulationNodeData, "simulationComponent">;
type SimulationEdge = Edge;

type ComponentPortPresentationData = Pick<
  SimulationNodeData,
  "componentType" | "modelType" | "ports" | "parameters"
>;

function isLmechn1NodeData(data: ComponentPortPresentationData) {
  return (
    data.componentType === "amesim_lmechn1" ||
    data.modelType === "amesim_lmechn1"
  );
}

/**
 * LMECHN1 的目录合同始终保留 21 个端口；工作区只展示当前 N 个右侧端口
 * 和编号为 N+1 的左侧参考端口。
 */
function displayedPortsForNodeData(data: ComponentPortPresentationData) {
  if (!isLmechn1NodeData(data)) {
    return data.ports;
  }
  const rightPortCount = lmechn1RightPortCount(data.parameters);
  const portsByName = new Map(data.ports.map((port) => [port.name, port]));
  const referencePort = portsByName.get(`port_${rightPortCount + 1}`);
  const rightPorts = Array.from({ length: rightPortCount }, (_, index) =>
    portsByName.get(`port_${index + 1}`),
  ).filter((port): port is PortDefinition => Boolean(port));
  return [
    ...(referencePort ? [{ ...referencePort, side: "left" as const }] : []),
    ...rightPorts.map((port) => ({ ...port, side: "right" as const })),
  ];
}

type SimulationNumericKey = "t_start" | "t_stop" | "step" | "max_step";

type SimulationConfig = {
  t_start: ParameterValue;
  t_stop: ParameterValue;
  step: ParameterValue;
  max_step: ParameterValue;
  method: string;
};

type ResolvedSimulationConfig = {
  t_start: number;
  t_stop: number;
  step: number;
  max_step: number;
  method: string;
};

type ProjectNodePayload = {
  id: string;
  type: "simulationComponent";
  position: {
    x: number;
    y: number;
  };
  data: Omit<
    SimulationNodeData,
    "modelContractIssues" | "parameterUnits" | "parameterScientificNotation"
  > & {
    parameterUnits?: Record<string, string>;
    parameterScientificNotation?: Record<string, ParameterScientificNotation>;
  };
};

type ProjectEdgePayload = {
  id: string;
  source: string;
  target: string;
  sourceHandle: string;
  targetHandle: string;
  data: {
    isContactEdge: boolean;
    routePoints?: EdgeRoutePoint[];
  };
};

type ReactFlowProjectPayload = {
  projectSchemaVersion: 1;
  name: string;
  nodes: ProjectNodePayload[];
  edges: ProjectEdgePayload[];
  simulation: SimulationConfig;
};

type ExecutableProjectPayload = Omit<ReactFlowProjectPayload, "simulation"> & {
  simulation: ResolvedSimulationConfig;
};

type SimulationResult = {
  success: boolean;
  status: "completed" | "stopped" | "stalled" | "failed";
  partial: boolean;
  message: string;
  simulatedUntil: number;
  requestedStopTime: number;
  variables: ResultVariableMetadata[];
  final: Record<string, number>;
  series: Record<string, number[]>;
  diagnostics: {
    pressureFlow: {
      solveCount: number;
      maxScaledResidual: number;
      maxEvaluationsPerSolve: number;
    };
    stream: {
      maxIterationsPerSolve: number;
    };
    stateCount: number;
    sampleCount: number;
  };
};

type ValidationIssue = {
  id: string;
  severity: "error" | "warning";
  message: string;
  nodeId?: string;
  edgeId?: string;
};

type EditorSnapshot = {
  nodes: SimulationNode[];
  edges: SimulationEdge[];
  projectName: string;
  signature: string;
  simulationConfig: SimulationConfig;
};

type EditorClipboard = {
  nodes: SimulationNode[];
  edges: SimulationEdge[];
};

type PendingPaste = {
  anchor: { x: number; y: number };
  edges: SimulationEdge[];
  nodes: SimulationNode[];
  repairedReferenceCount: number;
  snapOffset: { x: number; y: number };
};

type PendingPasteMiddlePointer = {
  pointerId: number;
  startX: number;
  startY: number;
  moved: boolean;
};

type RenderedNodeCacheEntry = {
  presentationContext: object;
  presentationSignature: string;
  renderedNode: SimulationNode;
  sourceNode: SimulationNode;
};

type CachedNodePortGeometry = {
  mirrored: boolean;
  placementByPort: Map<string, { flowX: number; flowY: number }>;
  positionX: number;
  positionY: number;
  rotation: number;
  sourceData: SimulationNode["data"];
};

type RenderedEdgeCacheEntry = {
  presentationSignature: string;
  renderedEdge: SimulationEdge;
  sourceEdge: SimulationEdge;
};

type ModelingPaneLayout = {
  paletteWidth: number;
  propertiesWidth: number;
  componentParametersHeight: number;
};

type ModelingPaneResizeKind =
  | "palette-width"
  | "properties-width"
  | "component-parameters-height";

type ModelingPaneResizeState = {
  kind: ModelingPaneResizeKind;
  pointerId: number;
  startX: number;
  startY: number;
  startSize: number;
};

type PaletteIconPreview = {
  definition: ComponentDefinition;
  left: number;
  top: number;
};

const AUTOSAVE_KEY = "system-simulation-flow:autosave";
const PROJECT_KEY_PREFIX = "system-simulation-flow:project:";
const RESULT_SNAPSHOT_KEY = "system-simulation-flow:latest-result";
const CONSOLE_PLACEMENT_KEY = "system-simulation-flow:console-positions";
const MODELING_PANE_LAYOUT_KEY = "system-simulation-flow:modeling-pane-layout";
const CANVAS_GRID_VISIBILITY_KEY = "system-simulation-flow:canvas-grid-visibility";
const PALETTE_COLLAPSED_SECTIONS_KEY =
  "system-simulation-flow:palette-collapsed-sections";
const PALETTE_ICON_PREVIEW_DELAY_MS = 500;
const CONSOLE_VIEWPORT_MARGIN = 8;
const SIMULATION_STREAM_IDLE_TIMEOUT_MS = 30_000;
const GRID_SIZE = CANVAS_GRID_SIZE;
const MODELING_DEFAULT_EDGE_OPTIONS = {
  interactionWidth: 28,
  type: CONTACT_AWARE_EDGE_TYPE,
};
const MODELING_DELETE_KEYS = ["Backspace", "Delete"];
const MODELING_PAN_ON_DRAG = [1];
const MODELING_PRO_OPTIONS = { hideAttribution: true };
const MODELING_SNAP_GRID: [number, number] = [GRID_SIZE, GRID_SIZE];
const MODELING_PANE_SPLITTER_SIZE = 7;
const MIN_PALETTE_WIDTH = 180;
const MAX_PALETTE_WIDTH = 420;
const MIN_PROPERTIES_WIDTH = 280;
const MAX_PROPERTIES_WIDTH = 560;
const PROPERTIES_PANE_SPLITTER_SIZE = 7;
const MIN_COMPONENT_PARAMETERS_HEIGHT = 120;
const MIN_SIMULATION_SETTINGS_HEIGHT = 120;
const MIN_MODELING_CANVAS_WIDTH = 420;
const MODELING_PANE_KEYBOARD_STEP = 20;
const HISTORY_LIMIT = 50;
const SYMBOL_ENVELOPE_PADDING_PX = 2;
const PORT_INDEX_OUTSET_PX = 18;
const PORT_INDEX_TANGENT_OFFSET_PX = 12;
const PORT_INDEX_LABEL_HEIGHT_PX = 20;
const PORT_INDEX_LABEL_MIN_WIDTH_PX = 20;
const PORT_INDEX_LABEL_CHARACTER_WIDTH_PX = 10;
const PORT_INDEX_LABEL_GAP_PX = 1;
const PORT_INDEX_LABEL_LANE_GAP_PX = 2;
// 接触吸附同时保留最小屏幕半径与最小画布半径：
// 缩小时不会缩成难以命中的像素范围，放大时也不会因换算后半径过小而难以对接。
const CONTACT_SNAP_RADIUS_PX = 10;
const CONTACT_SNAP_RADIUS_FLOW = 10;
const CONTACT_DISCONNECT_DISTANCE_PX = 8;
const CONTACT_GEOMETRY_TOLERANCE = 0.5;
const CONTACT_DELETE_SEPARATION = 16;
// 功能 4 审阅开关：关闭即可恢复旧浮动控制台，且不影响复制、粘贴与画布操作。
const USE_DOCKED_SIMULATION_CONSOLE = true;

function contactSnapRadiusForZoom(zoom: number) {
  const safeZoom = Math.max(zoom, 0.1);
  return Math.max(CONTACT_SNAP_RADIUS_FLOW, CONTACT_SNAP_RADIUS_PX / safeZoom);
}

type SymbolEnvelope = {
  left: number;
  top: number;
  width: number;
  height: number;
};

type CanvasSelectionRect = {
  x: number;
  y: number;
  width: number;
  height: number;
};

type ScreenRectangle = {
  left: number;
  top: number;
  right: number;
  bottom: number;
};

function screenRectanglesOverlap(
  selection: ScreenRectangle,
  target: ScreenRectangle,
): boolean {
  return (
    selection.left < target.right &&
    selection.right > target.left &&
    selection.top < target.bottom &&
    selection.bottom > target.top
  );
}

function defaultSymbolEnvelope(layout: ComponentSymbolLayout): SymbolEnvelope {
  return {
    left: 0,
    top: 0,
    width: layout.symbolSize.width,
    height: layout.symbolSize.height,
  };
}

type SymbolViewBoxTransform = {
  offsetX: number;
  offsetY: number;
  scale: number;
};

/** 与 SVG 默认的 xMidYMid meet 规则保持一致，接口和图形共用同一换算。 */
function symbolViewBoxTransform(
  viewBox: ComponentSymbolViewBox,
  symbolSize: ComponentSymbolSize,
): SymbolViewBoxTransform {
  const scale = Math.min(
    symbolSize.width / viewBox.width,
    symbolSize.height / viewBox.height,
  );
  return {
    scale,
    offsetX: (symbolSize.width - viewBox.width * scale) / 2,
    offsetY: (symbolSize.height - viewBox.height * scale) / 2,
  };
}

function symbolPointToPixels(
  point: ComponentSymbolPortAnchor,
  layout: ComponentSymbolLayout,
) {
  const transform = symbolViewBoxTransform(layout.viewBox, layout.symbolSize);
  return {
    x:
      transform.offsetX +
      (point.x - layout.viewBox.x) * transform.scale,
    y:
      transform.offsetY +
      (point.y - layout.viewBox.y) * transform.scale,
  };
}

function measuredSymbolEnvelope(
  svg: SVGSVGElement,
  layout: ComponentSymbolLayout,
): SymbolEnvelope {
  const viewBox = svg.viewBox.baseVal;
  const geometryBounds = svg.getBBox();
  let bounds: Pick<DOMRect, "x" | "y" | "width" | "height"> = geometryBounds;
  try {
    const paintBounds = svg.getBBox({
      fill: true,
      stroke: true,
      markers: true,
      clipped: false,
    });
    const includesPaintOutsideGeometry =
      paintBounds.x < geometryBounds.x ||
      paintBounds.y < geometryBounds.y ||
      paintBounds.x + paintBounds.width >
        geometryBounds.x + geometryBounds.width ||
      paintBounds.y + paintBounds.height >
        geometryBounds.y + geometryBounds.height;
    if (includesPaintOutsideGeometry) {
      bounds = paintBounds;
    }
  } catch {
    // Older SVG implementations may not support the getBBox options object.
  }
  if (bounds === geometryBounds) {
    const maximumStrokeWidth = Array.from(svg.querySelectorAll<SVGElement>("*"))
      .map((element) => getComputedStyle(element))
      .filter((style) => style.stroke !== "none")
      .reduce(
        (maximum, style) =>
          Math.max(maximum, Number.parseFloat(style.strokeWidth) || 0),
        0,
      );
    if (maximumStrokeWidth > 0) {
      const strokeScaling = svg.dataset.symbolStrokeScaling;
      const viewBoxScale =
        viewBox.width > 0 && viewBox.height > 0
          ? symbolViewBoxTransform(
              {
                x: viewBox.x,
                y: viewBox.y,
                width: viewBox.width,
                height: viewBox.height,
              },
              layout.symbolSize,
            ).scale
          : 1;
      // non-scaling-stroke 的 computed strokeWidth 是最终 CSS 像素；
      // 选择包络在 viewBox 坐标中计算，需要先换回 SVG 逻辑单位。
      const strokeWidthInViewBox =
        strokeScaling === "independent" && viewBoxScale > 0
          ? maximumStrokeWidth / viewBoxScale
          : maximumStrokeWidth;
      const strokeRadius = strokeWidthInViewBox / 2;
      bounds = {
        x: geometryBounds.x - strokeRadius,
        y: geometryBounds.y - strokeRadius,
        width: geometryBounds.width + strokeWidthInViewBox,
        height: geometryBounds.height + strokeWidthInViewBox,
      };
    }
  }
  if (
    viewBox.width <= 0 ||
    viewBox.height <= 0 ||
    bounds.width <= 0 ||
    bounds.height <= 0
  ) {
    return defaultSymbolEnvelope(layout);
  }

  const transform = symbolViewBoxTransform(
    { x: viewBox.x, y: viewBox.y, width: viewBox.width, height: viewBox.height },
    layout.symbolSize,
  );
  const left =
    transform.offsetX +
    (bounds.x - viewBox.x) * transform.scale -
    SYMBOL_ENVELOPE_PADDING_PX;
  const top =
    transform.offsetY +
    (bounds.y - viewBox.y) * transform.scale -
    SYMBOL_ENVELOPE_PADDING_PX;
  const right =
    transform.offsetX +
    (bounds.x + bounds.width - viewBox.x) * transform.scale +
    SYMBOL_ENVELOPE_PADDING_PX;
  const bottom =
    transform.offsetY +
    (bounds.y + bounds.height - viewBox.y) * transform.scale +
    SYMBOL_ENVELOPE_PADDING_PX;
  const roundPixel = (value: number) => Math.round(value * 100) / 100;

  return {
    left: roundPixel(left),
    top: roundPixel(top),
    width: roundPixel(Math.max(1, right - left)),
    height: roundPixel(Math.max(1, bottom - top)),
  };
}

const SYMBOL_ENVELOPE_CACHE_LIMIT = 512;
const symbolEnvelopeCache = new Map<string, SymbolEnvelope>();

function cacheSymbolEnvelope(key: string, envelope: SymbolEnvelope) {
  if (!symbolEnvelopeCache.has(key) && symbolEnvelopeCache.size >= SYMBOL_ENVELOPE_CACHE_LIMIT) {
    const oldestKey = symbolEnvelopeCache.keys().next().value;
    if (typeof oldestKey === "string") {
      symbolEnvelopeCache.delete(oldestKey);
    }
  }
  symbolEnvelopeCache.set(key, envelope);
}

function defaultModelingPaneLayout(): ModelingPaneLayout {
  return {
    paletteWidth: 230,
    propertiesWidth: 330,
    componentParametersHeight: 340,
  };
}

function loadModelingPaneLayout(): ModelingPaneLayout {
  const fallback = defaultModelingPaneLayout();
  try {
    const parsed = JSON.parse(
      localStorage.getItem(MODELING_PANE_LAYOUT_KEY) ?? "null",
    ) as Partial<ModelingPaneLayout> | null;
    if (!parsed) {
      return fallback;
    }
    return {
      paletteWidth: Number.isFinite(parsed.paletteWidth)
        ? Math.min(
            MAX_PALETTE_WIDTH,
            Math.max(MIN_PALETTE_WIDTH, Number(parsed.paletteWidth)),
          )
        : fallback.paletteWidth,
      propertiesWidth: Number.isFinite(parsed.propertiesWidth)
        ? Math.min(
            MAX_PROPERTIES_WIDTH,
            Math.max(MIN_PROPERTIES_WIDTH, Number(parsed.propertiesWidth)),
          )
        : fallback.propertiesWidth,
      componentParametersHeight: Number.isFinite(
        parsed.componentParametersHeight,
      )
        ? Math.max(
            MIN_COMPONENT_PARAMETERS_HEIGHT,
            Number(parsed.componentParametersHeight),
          )
        : fallback.componentParametersHeight,
    };
  } catch {
    return fallback;
  }
}

function clampModelingPaneLayout(
  layout: ModelingPaneLayout,
  workbenchWidth: number,
  workbenchHeight: number,
): ModelingPaneLayout {
  let paletteWidth = Math.min(
    MAX_PALETTE_WIDTH,
    Math.max(MIN_PALETTE_WIDTH, layout.paletteWidth),
  );
  let propertiesWidth = Math.min(
    MAX_PROPERTIES_WIDTH,
    Math.max(MIN_PROPERTIES_WIDTH, layout.propertiesWidth),
  );
  const availableSideWidth = Math.max(
    MIN_PALETTE_WIDTH + MIN_PROPERTIES_WIDTH,
    workbenchWidth -
      MIN_MODELING_CANVAS_WIDTH -
      MODELING_PANE_SPLITTER_SIZE * 2,
  );
  let overflow = paletteWidth + propertiesWidth - availableSideWidth;
  if (overflow > 0) {
    const propertiesReduction = Math.min(
      overflow,
      propertiesWidth - MIN_PROPERTIES_WIDTH,
    );
    propertiesWidth -= propertiesReduction;
    overflow -= propertiesReduction;
  }
  if (overflow > 0) {
    paletteWidth -= Math.min(
      overflow,
      paletteWidth - MIN_PALETTE_WIDTH,
    );
  }
  const maximumComponentParametersHeight = Math.max(
    MIN_COMPONENT_PARAMETERS_HEIGHT,
    workbenchHeight -
      PROPERTIES_PANE_SPLITTER_SIZE -
      MIN_SIMULATION_SETTINGS_HEIGHT,
  );
  const requestedComponentParametersHeight = Number.isFinite(
    layout.componentParametersHeight,
  )
    ? layout.componentParametersHeight
    : defaultModelingPaneLayout().componentParametersHeight;
  const componentParametersHeight = Math.min(
    maximumComponentParametersHeight,
    Math.max(
      MIN_COMPONENT_PARAMETERS_HEIGHT,
      requestedComponentParametersHeight,
    ),
  );
  return { paletteWidth, propertiesWidth, componentParametersHeight };
}

function loadCanvasGridVisibility(): CanvasGridVisibility {
  try {
    const parsed = JSON.parse(
      localStorage.getItem(CANVAS_GRID_VISIBILITY_KEY) ?? "null",
    ) as Partial<CanvasGridVisibility> | null;
    if (
      parsed &&
      typeof parsed.lines === "boolean" &&
      typeof parsed.dots === "boolean"
    ) {
      return { lines: parsed.lines, dots: parsed.dots };
    }
  } catch {
    // Use the default view when browser storage is unavailable or invalid.
  }
  return { lines: false, dots: true };
}

function loadPaletteCollapsedSections() {
  try {
    const parsed = JSON.parse(
      localStorage.getItem(PALETTE_COLLAPSED_SECTIONS_KEY) ?? "[]",
    ) as unknown;
    if (!Array.isArray(parsed)) {
      return new Set<string>();
    }
    return new Set(
      parsed.filter(
        (value): value is string =>
          typeof value === "string" &&
          (value.startsWith("library:") || value.startsWith("category:")),
      ),
    );
  } catch {
    return new Set<string>();
  }
}

function paletteLibraryCollapseKey(libraryId: string) {
  return `library:${libraryId}`;
}

function paletteCategoryCollapseKey(libraryId: string, categoryId: string) {
  return `category:${libraryId}:${categoryId}`;
}

function paletteLibraryContentId(libraryId: string) {
  return `palette-library-content-${encodeURIComponent(libraryId)}`;
}

function paletteCategoryItemsId(libraryId: string, categoryId: string) {
  return `palette-category-items-${encodeURIComponent(libraryId)}-${encodeURIComponent(categoryId)}`;
}

const identityUnit = (value: number) => value;
const scaleUnit = (factor: number) => ({
  toBase: (value: number) => value * factor,
  fromBase: (value: number) => value / factor,
});

const unitOptions: Record<UnitQuantity, UnitOption[]> = {
  area: [
    { value: "m2", label: "m²", toBase: identityUnit, fromBase: identityUnit },
    { value: "cm2", label: "cm²", ...scaleUnit(1e-4) },
    { value: "mm2", label: "mm²", ...scaleUnit(1e-6) },
  ],
  heat_transfer_coefficient: [
    {
      value: "W/(m2*K)",
      label: "W/(m²·K)",
      toBase: identityUnit,
      fromBase: identityUnit,
    },
  ],
  pressure: [
    { value: "Pa", label: "Pa", toBase: identityUnit, fromBase: identityUnit },
    { value: "kPa", label: "kPa", ...scaleUnit(1_000) },
    { value: "MPa", label: "MPa", ...scaleUnit(1_000_000) },
    { value: "bar", label: "bar", ...scaleUnit(100_000) },
  ],
  volume: [
    { value: "m3", label: "m³", toBase: identityUnit, fromBase: identityUnit },
    { value: "L", label: "L", ...scaleUnit(0.001) },
    { value: "mL", label: "mL", ...scaleUnit(0.000001) },
  ],
  temperature: [
    { value: "K", label: "K", toBase: identityUnit, fromBase: identityUnit },
    {
      value: "degC",
      label: "°C",
      toBase: (value) => value + 273.15,
      fromBase: (value) => value - 273.15,
    },
  ],
  length: [
    { value: "m", label: "m", toBase: identityUnit, fromBase: identityUnit },
    { value: "cm", label: "cm", ...scaleUnit(0.01) },
    { value: "mm", label: "mm", ...scaleUnit(0.001) },
  ],
};

const defaultSimulationConfig: ResolvedSimulationConfig = {
  t_start: 0,
  t_stop: 2,
  step: 0.1,
  max_step: 0.005,
  method: "BDF",
};

type SimulationConsoleLevel = "info" | "success" | "warning" | "error";
type SimulationConsoleMode = "minimized" | "normal" | "maximized";

type ConsolePosition = {
  x: number;
  y: number;
};

type ConsolePlacement = ConsolePosition & {
  horizontalAnchor: "left" | "right";
  verticalAnchor: "top" | "bottom";
};

type ConsoleDragState = {
  pointerId: number;
  offsetX: number;
  offsetY: number;
  width: number;
  height: number;
};

type SimulationConsoleEntry = {
  id: number;
  timestamp: string;
  level: SimulationConsoleLevel;
  message: string;
  format: "message" | "xml";
};

type SimulationProgressState = {
  state: "idle" | "running" | "success" | "warning" | "error";
  percent: number;
  message: string;
  startTime: number;
  simulatedTime: number;
  totalTime: number;
};

type SimulationStreamIssue = {
  code?: string;
  message?: string;
};

type SimulationActivityTelemetry = {
  activitySequence?: number;
  activityKind?: string;
  currentTrialTime?: number | null;
  rhsCallCount?: number;
  acceptedStepSequence?: number;
  acceptedTime?: number | null;
};

export type SimulationActivityWatchdogStatus =
  | "progressing"
  | "slow-active"
  | "slow-telemetry-unavailable"
  | "stalled";

export type SimulationActivityWatchdogState = {
  lastAcceptedProgressAt: number;
  lastActivityChangeAt: number | null;
  lastActivitySequence: number | null;
  lastAcceptedStepSequence: number | null;
  lastAcceptedTime: number | null;
  integratingPhaseActive: boolean;
};

export type SimulationActivityWatchdogObservation = {
  status: SimulationActivityWatchdogStatus;
  acceptedProgressIdleMs: number;
  activityIdleMs: number | null;
  activityTelemetryAvailable: boolean;
};

type SimulationCancelReason = "user" | "stalled";

type SimulationTaskResponse = {
  simulationId: string;
  status: "queued" | "running" | "cancelling" | "completed" | "stopped" | "stalled" | "failed";
  cancelReason: SimulationCancelReason | null;
  result: SimulationResult | null;
  error: SimulationStreamEvent | null;
};

type SimulationStreamEvent =
  | ({
      event: "progress";
      progress: number;
      phase: string;
      message: string;
      heartbeat?: boolean;
      simulatedTime?: number;
      totalTime?: number;
    } & SimulationActivityTelemetry)
  | {
      event: "result";
      progress: number;
      phase: "complete";
      message: string;
      simulatedTime?: number;
      totalTime?: number;
      result: SimulationResult;
    }
  | {
      event: "error";
      progress: number;
      phase: "failed";
      status: number;
      message: string;
      detail?: unknown;
      simulatedTime?: number;
      totalTime?: number;
    };

export function createSimulationActivityWatchdog(
  now = Date.now(),
): SimulationActivityWatchdogState {
  return {
    lastAcceptedProgressAt: now,
    lastActivityChangeAt: null,
    lastActivitySequence: null,
    lastAcceptedStepSequence: null,
    lastAcceptedTime: null,
    integratingPhaseActive: false,
  };
}

export function isSimulationSolverActivityPhase(phase: string): boolean {
  return phase === "integrating";
}

export function observeSimulationActivityWatchdog(
  current: SimulationActivityWatchdogState,
  event: SimulationActivityTelemetry & { heartbeat?: boolean; phase?: string },
  now = Date.now(),
  stallTimeoutMs = SIMULATION_ACTIVITY_STALL_TIMEOUT_MS,
  legacyStallTimeoutMs = SIMULATION_SOLVER_STALL_TIMEOUT_MS,
): {
  state: SimulationActivityWatchdogState;
  observation: SimulationActivityWatchdogObservation;
} {
  const reportsPhase = typeof event.phase === "string";
  if (reportsPhase && !isSimulationSolverActivityPhase(event.phase!)) {
    return {
      state: createSimulationActivityWatchdog(now),
      observation: {
        status: "progressing",
        acceptedProgressIdleMs: 0,
        activityIdleMs: null,
        activityTelemetryAvailable: false,
      },
    };
  }

  const baseline =
    reportsPhase && !current.integratingPhaseActive
      ? {
          ...createSimulationActivityWatchdog(now),
          integratingPhaseActive: true,
        }
      : current;
  let acceptedProgress = event.heartbeat !== true;
  let lastAcceptedStepSequence = baseline.lastAcceptedStepSequence;
  let lastAcceptedTime = baseline.lastAcceptedTime;

  if (
    typeof event.acceptedStepSequence === "number" &&
    Number.isFinite(event.acceptedStepSequence)
  ) {
    if (
      lastAcceptedStepSequence !== null &&
      event.acceptedStepSequence !== lastAcceptedStepSequence
    ) {
      acceptedProgress = true;
    }
    lastAcceptedStepSequence = event.acceptedStepSequence;
  }
  if (typeof event.acceptedTime === "number" && Number.isFinite(event.acceptedTime)) {
    if (lastAcceptedTime !== null && event.acceptedTime !== lastAcceptedTime) {
      acceptedProgress = true;
    }
    lastAcceptedTime = event.acceptedTime;
  }

  let lastActivityChangeAt = baseline.lastActivityChangeAt;
  let lastActivitySequence = baseline.lastActivitySequence;
  const reportsActivitySequence =
    typeof event.activitySequence === "number" &&
    Number.isFinite(event.activitySequence);
  if (reportsActivitySequence) {
    if (
      lastActivitySequence === null ||
      event.activitySequence !== lastActivitySequence
    ) {
      lastActivityChangeAt = now;
    }
    lastActivitySequence = event.activitySequence!;
  }

  const lastAcceptedProgressAt = acceptedProgress
    ? now
    : baseline.lastAcceptedProgressAt;
  const acceptedProgressIdleMs = Math.max(0, now - lastAcceptedProgressAt);
  const activityIdleMs =
    lastActivityChangeAt === null
      ? null
      : Math.max(0, now - lastActivityChangeAt);
  const effectiveStallTimeoutMs = Math.max(0, stallTimeoutMs);
  const effectiveLegacyStallTimeoutMs = Math.max(
    effectiveStallTimeoutMs,
    legacyStallTimeoutMs,
  );
  let status: SimulationActivityWatchdogStatus = "progressing";
  if (acceptedProgressIdleMs >= effectiveStallTimeoutMs) {
    if (!reportsActivitySequence || activityIdleMs === null) {
      status =
        acceptedProgressIdleMs >= effectiveLegacyStallTimeoutMs
          ? "stalled"
          : "slow-telemetry-unavailable";
    } else if (activityIdleMs >= effectiveStallTimeoutMs) {
      status = "stalled";
    } else {
      status = "slow-active";
    }
  }

  return {
    state: {
      lastAcceptedProgressAt,
      lastActivityChangeAt,
      lastActivitySequence,
      lastAcceptedStepSequence,
      lastAcceptedTime,
      integratingPhaseActive:
        reportsPhase || baseline.integratingPhaseActive,
    },
    observation: {
      status,
      acceptedProgressIdleMs,
      activityIdleMs,
      activityTelemetryAvailable: reportsActivitySequence,
    },
  };
}
const SUPPORTED_SOLVER_METHODS = ["BDF", "Radau", "LSODA", "RK45", "RK23", "DOP853"];
const simulationConfigLabels: Record<SimulationNumericKey, string> = {
  t_start: "起始时间",
  t_stop: "结束时间",
  step: "采样步长",
  max_step: "最大积分步长",
};

function normalizeComponentCatalog(payload: unknown): ComponentLibraryDefinition[] {
  const catalog = payload as ComponentCatalogResponse | null;
  if (
    !catalog ||
    catalog.schemaVersion !== 1 ||
    !Array.isArray(catalog.libraries)
  ) {
    throw new Error("组件目录格式不受支持");
  }

  const componentTypes = new Set<string>();
  const libraries = catalog.libraries.map((library, libraryIndex) => {
    const libraryName =
      typeof library?.label === "string" && library.label.trim()
        ? library.label.trim()
        : typeof library?.id === "string" && library.id.trim()
          ? library.id.trim()
          : `第 ${libraryIndex + 1} 个组件库`;
    if (
      !library ||
      typeof library.id !== "string" ||
      typeof library.label !== "string" ||
      typeof library.version !== "string" ||
      !Array.isArray(library.components)
    ) {
      throw new ComponentCatalogLibraryError(
        libraryName,
        `组件库 ${libraryName} 声明不完整`,
      );
    }
    const components = library.components.map((component) => {
      if (
        !component ||
        typeof component.type !== "string" ||
        typeof component.modelType !== "string" ||
        typeof component.modelVersion !== "string" ||
        typeof component.label !== "string" ||
        !Array.isArray(component.ports) ||
        !Array.isArray(component.parameters)
      ) {
        throw new ComponentCatalogLibraryError(
          libraryName,
          `组件库 ${libraryName} 包含无效元件`,
        );
      }
      if (componentTypes.has(component.type)) {
        throw new ComponentCatalogLibraryError(
          libraryName,
          `组件库 ${libraryName} 包含重复组件类型：${component.type}`,
        );
      }
      componentTypes.add(component.type);

      const parameters = Object.fromEntries(
        component.parameters.map((parameter) => {
          const visibleWhen = normalizeParameterVisibilityConditions(
            parameter.visibleWhen,
          );
          return [
            parameter.name,
            {
              label: parameter.label || parameter.name,
              ...(typeof parameter.description === "string" &&
              parameter.description.trim()
                ? { description: parameter.description.trim() }
                : {}),
              ...(parameter.unit ? { unit: parameter.unit } : {}),
              ...(parameter.quantity && parameter.quantity !== "dimensionless"
                ? { quantity: parameter.quantity }
                : {}),
              default: parameter.default,
              ...(parameter.minimum !== undefined
                ? { min: parameter.minimum }
                : {}),
              ...(parameter.maximum !== undefined
                ? { max: parameter.maximum }
                : {}),
              ...(parameter.minimumExclusive
                ? { minExclusive: true }
                : {}),
              ...(parameter.editor === "choice" ||
              parameter.editor === "amesimGasReference" ||
              parameter.editor === "amesimGasPropertyModel"
                ? { editor: parameter.editor }
                : {}),
              ...(Array.isArray(parameter.options)
                ? {
                    options: parameter.options.flatMap((option) =>
                      Number.isFinite(Number(option?.value)) &&
                      typeof option?.label === "string"
                        ? [{ value: Number(option.value), label: option.label }]
                        : [],
                    ),
                  }
                : {}),
              ...(visibleWhen ? { visibleWhen } : {}),
            },
          ] as const;
        }),
      );
      const parameterGroups = normalizeParameterGroups(
        component.parameterGroups,
        new Set(Object.keys(parameters)),
      );

      return {
        type: component.type,
        label: component.label,
        modelType: component.modelType,
        modelVersion: component.modelVersion,
        symbol: component.symbol || component.type,
        order: Number(component.order) || 0,
        category: {
          id: component.category?.id || "uncategorized",
          label: component.category?.label || "其他元件",
          order: Number(component.category?.order) || 0,
        },
        ...(component.role === "amesimGasMediumDefinition"
          ? { role: "amesimGasMediumDefinition" as const }
          : {}),
        ports: component.ports.map((port) => ({
          name: port.name,
          kind: port.kind,
          domain: port.domain,
          nominalRole: port.nominalRole,
          ...(port.positiveFlowDirection === "intoComponent"
            ? { positiveFlowDirection: "intoComponent" as const }
            : {}),
          side: port.side,
        })),
        parameters,
        ...(parameterGroups.length > 0 ? { parameterGroups } : {}),
      } satisfies ComponentDefinition;
    });

    return {
      id: library.id,
      label: library.label,
      version: library.version,
      sourcePackage: library.sourcePackage,
      temporary: Boolean(library.temporary),
      order: Number(library.order) || 0,
      components: components.sort(
        (first, second) => first.order - second.order || first.type.localeCompare(second.type),
      ),
    };
  });

  if (componentTypes.size === 0) {
    throw new Error("组件目录为空");
  }
  return libraries.sort(
    (first, second) => first.order - second.order || first.id.localeCompare(second.id),
  );
}

function groupLibraryComponents(library: ComponentLibraryDefinition) {
  const categories = new Map<
    string,
    {
      id: string;
      label: string;
      order: number;
      components: ComponentDefinition[];
    }
  >();
  library.components.forEach((component) => {
    const category = categories.get(component.category.id) ?? {
      ...component.category,
      components: [],
    };
    category.components.push(component);
    categories.set(component.category.id, category);
  });
  return [...categories.values()]
    .map((category) => ({
      ...category,
      components: category.components.sort(
        (first, second) => first.order - second.order || first.type.localeCompare(second.type),
      ),
    }))
    .sort(
      (first, second) => first.order - second.order || first.id.localeCompare(second.id),
    );
}

const nextNodeNumberByType: Record<string, number> = {};

function defaultParameters(definition: ComponentDefinition) {
  return Object.fromEntries(
    Object.entries(definition.parameters).map(([key, parameter]) => [
      key,
      parameter.editor === "amesimGasReference" ? 0 : parameter.default,
    ]),
  );
}

function defaultParameterUnits(definition: ComponentDefinition) {
  return Object.fromEntries(
    Object.entries(definition.parameters)
      .filter(([, parameter]) => parameter.unit)
      .map(([key, parameter]) => [key, parameter.unit as string]),
  );
}

function ungroupedParameterPriority(
  key: string,
  definition: ParameterDefinition,
) {
  if (key === "gi") {
    return 0;
  }
  return definition.editor ? 1 : 2;
}

function orderedParameterEntries(
  definition: ComponentDefinition,
): Array<[string, ParameterDefinition]> {
  const entries = Object.entries(definition.parameters);
  const entryByName = new Map(entries);
  const groupedNames = new Set(
    definition.parameterGroups?.flatMap((group) => group.parameters) ?? [],
  );
  const ungroupedEntries = entries
    .map((entry, index) => ({ entry, index }))
    .filter(({ entry: [key] }) => !groupedNames.has(key))
    .sort(
      (first, second) =>
        ungroupedParameterPriority(first.entry[0], first.entry[1]) -
          ungroupedParameterPriority(second.entry[0], second.entry[1]) ||
        first.index - second.index,
    )
    .map(({ entry }) => entry);
  const groupedEntries =
    definition.parameterGroups?.flatMap((group) =>
      group.parameters.flatMap((name) => {
        const parameter = entryByName.get(name);
        return parameter
          ? ([[name, parameter]] as Array<[string, ParameterDefinition]>)
          : [];
      }),
    ) ?? [];
  return [...ungroupedEntries, ...groupedEntries];
}

function buildNodeData(definition: ComponentDefinition): SimulationNodeData {
  return {
    label: definition.label,
    componentType: definition.type,
    modelType: definition.modelType,
    modelVersion: definition.modelVersion,
    symbol: definition.symbol,
    ports: definition.ports.map((port) => ({ ...port })),
    parameters: defaultParameters(definition),
    parameterUnits: defaultParameterUnits(definition),
    parameterScientificNotation: {},
    rotation: 0,
    mirrored: false,
  };
}

const AMESIM_BUILTIN_GAS_INDEX = 0;
const AMESIM_MIN_DEFINED_GAS_INDEX = 1;
const AMESIM_MAX_DEFINED_GAS_INDEX = 99;

type AmesimGasMediumOption = {
  value: number;
};

type AmesimGasReferenceRepair = {
  nodes: SimulationNode[];
  repairedReferenceCount: number;
};

function componentDefinitionForNode(
  node: SimulationNode,
  componentDefinitions: ComponentDefinition[],
) {
  return (
    componentDefinitions.find(
      (definition) => definition.type === node.data.componentType,
    ) ??
    componentDefinitions.find(
      (definition) => definition.modelType === node.data.modelType,
    )
  );
}

function isAmesimGasMediumDefinition(
  definition: ComponentDefinition | undefined,
) {
  return definition?.role === "amesimGasMediumDefinition";
}

function normalizeAmesimGasIndex(
  value: ParameterValue | undefined,
  minimum = AMESIM_BUILTIN_GAS_INDEX,
) {
  if (typeof value === "string" && value.trim() === "") {
    return null;
  }
  const numericValue = Number(value);
  if (
    !Number.isInteger(numericValue) ||
    numericValue < minimum ||
    numericValue > AMESIM_MAX_DEFINED_GAS_INDEX
  ) {
    return null;
  }
  return numericValue;
}

function definedAmesimGasIndices(
  nodes: SimulationNode[],
  componentDefinitions: ComponentDefinition[],
) {
  const indices = new Set<number>();
  nodes.forEach((node) => {
    const definition = componentDefinitionForNode(node, componentDefinitions);
    if (!isAmesimGasMediumDefinition(definition)) {
      return;
    }
    const index = normalizeAmesimGasIndex(
      node.data.parameters.gi,
      AMESIM_MIN_DEFINED_GAS_INDEX,
    );
    if (index !== null) {
      indices.add(index);
    }
  });
  return indices;
}

function nextAvailableAmesimGasIndex(usedIndices: ReadonlySet<number>) {
  for (
    let index = AMESIM_MIN_DEFINED_GAS_INDEX;
    index <= AMESIM_MAX_DEFINED_GAS_INDEX;
    index += 1
  ) {
    if (!usedIndices.has(index)) {
      return index;
    }
  }
  return null;
}

function buildAmesimGasMediumOptions(
  nodes: SimulationNode[],
  componentDefinitions: ComponentDefinition[],
): AmesimGasMediumOption[] {
  const options: AmesimGasMediumOption[] = [
    {
      value: AMESIM_BUILTIN_GAS_INDEX,
    },
  ];
  const seenIndices = new Set<number>();

  nodes.forEach((node) => {
    const definition = componentDefinitionForNode(node, componentDefinitions);
    if (!isAmesimGasMediumDefinition(definition)) {
      return;
    }
    const index = normalizeAmesimGasIndex(
      node.data.parameters.gi,
      AMESIM_MIN_DEFINED_GAS_INDEX,
    );
    if (index === null || seenIndices.has(index)) {
      return;
    }
    seenIndices.add(index);
    options.push({
      value: index,
    });
  });

  return [
    options[0],
    ...options.slice(1).sort((first, second) => first.value - second.value),
  ];
}

function repairAmesimGasReferences(
  nodes: SimulationNode[],
  componentDefinitions: ComponentDefinition[],
): AmesimGasReferenceRepair {
  const availableIndices = definedAmesimGasIndices(nodes, componentDefinitions);
  availableIndices.add(AMESIM_BUILTIN_GAS_INDEX);
  let repairedReferenceCount = 0;
  let changed = false;

  const repairedNodes = nodes.map((node) => {
    const definition = componentDefinitionForNode(node, componentDefinitions);
    if (!definition || isAmesimGasMediumDefinition(definition)) {
      return node;
    }
    const referenceKeys = Object.entries(definition.parameters)
      .filter(([, parameter]) => parameter.editor === "amesimGasReference")
      .map(([key]) => key);
    if (referenceKeys.length === 0) {
      return node;
    }

    let parameters = node.data.parameters;
    let nodeChanged = false;
    referenceKeys.forEach((key) => {
      const index = normalizeAmesimGasIndex(parameters[key]);
      if (index !== null && availableIndices.has(index)) {
        return;
      }
      if (!nodeChanged) {
        parameters = { ...parameters };
        nodeChanged = true;
      }
      parameters[key] = AMESIM_BUILTIN_GAS_INDEX;
      repairedReferenceCount += 1;
    });
    if (!nodeChanged) {
      return node;
    }
    changed = true;
    return {
      ...node,
      data: {
        ...node.data,
        parameters,
      },
    };
  });

  return {
    nodes: changed ? repairedNodes : nodes,
    repairedReferenceCount,
  };
}

function assignMissingAmesimGasDefinitionIndices(
  nodes: SimulationNode[],
  componentDefinitions: ComponentDefinition[],
) {
  const usedIndices = definedAmesimGasIndices(nodes, componentDefinitions);
  let assignedDefinitionCount = 0;
  let exhaustedDefinitionCount = 0;

  const indexedNodes = nodes.map((node) => {
    const definition = componentDefinitionForNode(node, componentDefinitions);
    if (
      node.data.modelContractIssues?.length ||
      !isAmesimGasMediumDefinition(definition)
    ) {
      return node;
    }
    const currentIndex = normalizeAmesimGasIndex(
      node.data.parameters.gi,
      AMESIM_MIN_DEFINED_GAS_INDEX,
    );
    if (currentIndex !== null) {
      return node;
    }
    const nextIndex = nextAvailableAmesimGasIndex(usedIndices);
    if (nextIndex === null) {
      exhaustedDefinitionCount += 1;
      return node;
    }
    usedIndices.add(nextIndex);
    assignedDefinitionCount += 1;
    return {
      ...node,
      data: {
        ...node.data,
        parameters: {
          ...node.data.parameters,
          gi: nextIndex,
        },
      },
    };
  });

  return {
    nodes: indexedNodes,
    assignedDefinitionCount,
    exhaustedDefinitionCount,
  };
}

type SimulationComponentNodeProps = NodeProps<SimulationNode>;

function SimulationComponentNodeImpl({
  id,
  data,
  isConnectable,
  selected,
}: SimulationComponentNodeProps) {
  const updateNodeInternals = useUpdateNodeInternals();
  const viewportZoom = useStore((flowState) => flowState.transform[2]);
  const symbolContainerRef = useRef<HTMLDivElement>(null);
  const rotation = normalizeNodeRotation(data.rotation);
  const mirrored = Boolean(data.mirrored);
  const vertical = rotation === 90 || rotation === 270;
  const symbol = data.symbol ?? data.componentType;
  const hasDedicatedSymbol = hasComponentSymbol(symbol);
  const symbolPresentation = componentSymbolPresentation(symbol);
  const layout = useMemo(
    () => componentSymbolLayout(symbol, data.parameters),
    [data.parameters, symbol],
  );
  const renderedSize = nodeFrameDimensions(layout, rotation);
  const layoutSignature = useMemo(
    () =>
      `${layout.viewBox.x}:${layout.viewBox.y}:${layout.viewBox.width}:${layout.viewBox.height}:${layout.symbolSize.width}:${layout.symbolSize.height}:${layout.nodeSize.width}:${layout.nodeSize.height}:${JSON.stringify(layout.portAnchors ?? {})}`,
    [layout],
  );
  const symbolVariantKey = useMemo(
    () => componentSymbolVariantKey(symbol, data.parameters),
    [data.parameters, symbol],
  );
  const symbolEnvelopeCacheKey = `${symbol}|${symbolVariantKey}|${layoutSignature}`;
  const nodeInternalsGeometryKey = `${layoutSignature}|${rotation}|${mirrored ? 1 : 0}`;
  const previousNodeInternalsGeometryKeyRef = useRef(nodeInternalsGeometryKey);
  const [symbolEnvelope, setSymbolEnvelope] = useState<SymbolEnvelope>(
    () =>
      symbolEnvelopeCache.get(symbolEnvelopeCacheKey) ??
      defaultSymbolEnvelope(layout),
  );
  const displayedPorts = useMemo(
    () => displayedPortsForNodeData(data),
    [data.componentType, data.modelType, data.parameters, data.ports],
  );
  const portPlacements = useMemo(
    () =>
      transformedPortPlacements(
        displayedPorts,
        rotation,
        mirrored,
        layout,
      ),
    [displayedPorts, layout, mirrored, rotation],
  );
  const visiblePortIndexPlacements = data.hideConnectedPortIndexLabels
    ? portPlacements.filter(
        ({ port }) => data.portConnectionStates?.[port.name] !== "connected",
      )
    : portPlacements;
  const portIndexLabels = selected
    ? portIndexLabelPlacements(
        displayedPorts,
        visiblePortIndexPlacements,
        layout,
        rotation,
      )
    : [];
  const inverseViewportScale = viewportZoom > 0 ? 1 / viewportZoom : 1;
  const nodeLayoutStyle = {
    width: renderedSize.width,
    height: renderedSize.height,
    "--node-frame-width": `${layout.nodeSize.width}px`,
    "--node-frame-height": `${layout.nodeSize.height}px`,
    "--node-symbol-width": `${layout.symbolSize.width}px`,
    "--node-symbol-height": `${layout.symbolSize.height}px`,
  } as CSSProperties;

  useLayoutEffect(() => {
    if (!hasDedicatedSymbol) {
      return;
    }
    const cachedEnvelope = symbolEnvelopeCache.get(symbolEnvelopeCacheKey);
    if (cachedEnvelope) {
      setSymbolEnvelope(cachedEnvelope);
      return;
    }
    const svg = symbolContainerRef.current?.querySelector<SVGSVGElement>(
      ".component-symbol-svg",
    );
    if (!svg) {
      return;
    }
    const nextEnvelope = measuredSymbolEnvelope(svg, layout);
    cacheSymbolEnvelope(symbolEnvelopeCacheKey, nextEnvelope);
    setSymbolEnvelope((currentEnvelope) =>
      currentEnvelope.left === nextEnvelope.left &&
      currentEnvelope.top === nextEnvelope.top &&
      currentEnvelope.width === nextEnvelope.width &&
      currentEnvelope.height === nextEnvelope.height
        ? currentEnvelope
        : nextEnvelope,
    );
  }, [hasDedicatedSymbol, layout, symbolEnvelopeCacheKey]);

  useEffect(() => {
    if (previousNodeInternalsGeometryKeyRef.current === nodeInternalsGeometryKey) {
      return;
    }
    previousNodeInternalsGeometryKeyRef.current = nodeInternalsGeometryKey;
    updateNodeInternals(id);
  }, [id, nodeInternalsGeometryKey, updateNodeInternals]);

  return (
    <div
      className={`sim-node sim-node-${data.componentType} ${vertical ? "orientation-vertical" : ""} ${hasDedicatedSymbol ? "component-icon-only" : "generic-component"} ${symbolPresentation === "bare" ? "symbol-presentation-bare" : ""} ${selected ? "selected" : ""} ${data.modelContractIssues?.length ? "model-contract-incompatible" : ""}`}
      data-model-contract-compatible={data.modelContractIssues?.length ? "false" : "true"}
      data-node-layout-height={renderedSize.height}
      data-node-layout-tier={layout.tier}
      data-node-layout-width={renderedSize.width}
      style={nodeLayoutStyle}
    >
      <div
        className="sim-node-frame"
        style={{
          transform: `translate(-50%, -50%) rotate(${rotation}deg) scaleX(${mirrored ? -1 : 1})`,
        }}
      >
      </div>
      {portPlacements.map(({ port, position, x, y }) => {
        const connectionState = data.portConnectionStates?.[port.name] ?? "idle";
        const isConnected = connectionState === "connected";
        return (
          <Handle
            aria-label={`${data.label} 端口 ${port.name}`}
            className={`port-handle port-handle-${port.kind} port-connection-${connectionState}`}
            data-connected={isConnected ? "true" : "false"}
            data-connection-state={connectionState}
            data-port-domain={port.domain}
            data-port-kind={port.kind}
            data-port-name={port.name}
            id={port.name}
            isConnectable={isConnectable && !isConnected}
            isConnectableEnd={
              isConnectable &&
              (connectionState === "idle" || connectionState === "compatible")
            }
            isConnectableStart={
              isConnectable &&
              (connectionState === "idle" || connectionState === "origin")
            }
            key={port.name}
            position={position}
            style={{
              left: x,
              top: y,
              transform: `scale(${inverseViewportScale}) translate(-50%, -50%)`,
              transformOrigin: "0 0",
            }}
            title={`${port.name} (${port.domain})`}
            type={portHandleType(port)}
          >
            <svg
              aria-hidden="true"
              className="port-handle-glyph"
              preserveAspectRatio="xMidYMid meet"
              shapeRendering="geometricPrecision"
              style={{
                transform: `scale(${viewportZoom})`,
                transformOrigin: "center",
              }}
              viewBox="0 0 6 6"
            >
              {port.kind === "physical" ? (
                <circle
                  className="port-handle-glyph-shape"
                  cx="3"
                  cy="3"
                  data-port-glyph-shape="circle"
                  r="2.5"
                />
              ) : (
                <rect
                  className="port-handle-glyph-shape"
                  data-port-glyph-shape="signal"
                  height="5"
                  rx="1.25"
                  ry="1.25"
                  width="5"
                  x="0.5"
                  y="0.5"
                />
              )}
            </svg>
          </Handle>
        );
      })}
      {hasDedicatedSymbol ? (
        <div className="node-symbol-anchor" aria-hidden="true">
          <div
            className="node-symbol"
            ref={symbolContainerRef}
            style={{
              transform: `rotate(${rotation}deg) scaleX(${mirrored ? -1 : 1})`,
            }}
          >
            <div
              className="node-symbol-envelope"
              data-symbol-envelope="true"
              style={{
                left: symbolEnvelope.left,
                top: symbolEnvelope.top,
                width: symbolEnvelope.width,
                height: symbolEnvelope.height,
              }}
            />
            <ComponentSymbol
              parameters={data.parameters}
              symbol={symbol}
              surface="canvas"
            />
          </div>
        </div>
      ) : null}
      {portIndexLabels.map((label) => (
        <span
          aria-hidden="true"
          className="port-index-label"
          data-port-index={label.text}
          data-port-name={label.portName}
          key={label.portName}
          style={{ left: label.x, top: label.y }}
        >
          {label.text}
        </span>
      ))}
      {data.modelContractIssues?.length ? (
        <span
          aria-label={`${data.label} 模型合同不兼容`}
          className="model-contract-warning"
          role="img"
          title={data.modelContractIssues.join("\n")}
        >
          !
        </span>
      ) : null}
      <div className="node-label">{data.label}</div>
    </div>
  );
}

const SimulationComponentNode = memo(
  SimulationComponentNodeImpl,
  (
    previous: SimulationComponentNodeProps,
    next: SimulationComponentNodeProps,
  ) =>
    previous.id === next.id &&
    previous.data === next.data &&
    previous.isConnectable === next.isConnectable &&
    previous.selected === next.selected,
);
SimulationComponentNode.displayName = "SimulationComponentNode";

function normalizeNodeRotation(value: unknown): NodeRotation {
  return value === 90 || value === 180 || value === 270 ? value : 0;
}

function nextNodeRotation(value: unknown): NodeRotation {
  return ((normalizeNodeRotation(value) + 90) % 360) as NodeRotation;
}

function rotatedDimensions(size: ComponentSymbolSize, rotation: NodeRotation) {
  const vertical = rotation === 90 || rotation === 270;
  return vertical
    ? { width: size.height, height: size.width }
    : { width: size.width, height: size.height };
}

function nodeFrameDimensions(
  layout: ComponentSymbolLayout,
  rotation: NodeRotation,
) {
  return rotatedDimensions(layout.nodeSize, rotation);
}

function rotateNodeClockwise(node: SimulationNode): SimulationNode {
  const currentRotation = normalizeNodeRotation(node.data.rotation);
  const nextRotation = nextNodeRotation(currentRotation);
  const symbol = node.data.symbol ?? node.data.componentType;
  const layout = componentSymbolLayout(symbol, node.data.parameters);
  const currentSize = nodeFrameDimensions(layout, currentRotation);
  const nextSize = nodeFrameDimensions(layout, nextRotation);
  return {
    ...node,
    position: {
      x: node.position.x + (currentSize.width - nextSize.width) / 2,
      y: node.position.y + (currentSize.height - nextSize.height) / 2,
    },
    data: {
      ...node.data,
      rotation: nextRotation,
    },
  };
}

function portHandleType(port: PortDefinition) {
  if (port.kind === "signal") {
    return port.nominalRole === "output" ? ("source" as const) : ("target" as const);
  }
  return "source" as const;
}

function transformedPortPlacements(
  ports: PortDefinition[],
  rotation: NodeRotation,
  mirrored: boolean,
  layout: ComponentSymbolLayout,
) {
  const renderedSize = nodeFrameDimensions(layout, rotation);
  const portAnchors = layout.portAnchors;

  return (["left", "right"] as PortSide[]).flatMap((side) => {
    const sidePorts = ports.filter((port) => port.side === side);
    const sideAnchors = portAnchors?.[side];
    const usesSymbolAnchors = sideAnchors?.length === sidePorts.length;
    return sidePorts.map((port, index) => {
      const anchor = usesSymbolAnchors ? sideAnchors[index] : undefined;
      const symbolPoint = anchor ? symbolPointToPixels(anchor, layout) : undefined;
      let x = symbolPoint
        ? symbolPoint.x - layout.symbolSize.width / 2
        : side === "left"
          ? -layout.nodeSize.width / 2
          : layout.nodeSize.width / 2;
      let y = symbolPoint
        ? symbolPoint.y - layout.symbolSize.height / 2
        : -layout.nodeSize.height / 2 +
          ((index + 1) * layout.nodeSize.height) / (sidePorts.length + 1);

      if (mirrored) {
        x = -x;
      }

      [x, y] = rotatePoint(x, y, rotation);
      const renderedX = renderedSize.width / 2 + x;
      const renderedY = renderedSize.height / 2 + y;

      return {
        port,
        position: transformedPortPosition(
          side,
          rotation,
          mirrored,
          layout.viewBox,
          anchor,
        ),
        x: renderedX,
        y: renderedY,
      };
    });
  });
}

type TransformedPortPlacement = ReturnType<
  typeof transformedPortPlacements
>[number];

type PortIndexLabelPlacement = {
  order: number;
  portName: string;
  position: Position;
  text: string;
  x: number;
  y: number;
};

function portIndexText(port: PortDefinition, index: number) {
  const numericSuffix = port.name.match(/^port_([1-9]\d*)$/)?.[1];
  if (numericSuffix !== undefined) {
    const parsed = Number(numericSuffix);
    if (Number.isSafeInteger(parsed)) {
      return String(parsed);
    }
  }
  return String(index + 1);
}

function portIndexLabelWidth(text: string) {
  return Math.max(
    PORT_INDEX_LABEL_MIN_WIDTH_PX,
    text.length * PORT_INDEX_LABEL_CHARACTER_WIDTH_PX + 4,
  );
}

function packPortIndexLabelLane(
  labels: PortIndexLabelPlacement[],
  position: Position,
  axisLength: number,
) {
  const verticalEdge = position === Position.Left || position === Position.Right;
  const coordinate = (label: PortIndexLabelPlacement) =>
    verticalEdge ? label.y : label.x;
  const extent = (label: PortIndexLabelPlacement) =>
    verticalEdge ? PORT_INDEX_LABEL_HEIGHT_PX : portIndexLabelWidth(label.text);
  const sorted = [...labels].sort(
    (first, second) =>
      coordinate(first) - coordinate(second) || first.order - second.order,
  );
  if (sorted.length < 2) {
    return sorted;
  }

  const packedCoordinates: number[] = [];
  for (const [index, label] of sorted.entries()) {
    const target = coordinate(label);
    if (index === 0) {
      packedCoordinates.push(target);
      continue;
    }
    const previous = sorted[index - 1];
    const minimumCoordinate =
      packedCoordinates[index - 1] +
      extent(previous) / 2 +
      extent(label) / 2 +
      PORT_INDEX_LABEL_GAP_PX;
    packedCoordinates.push(Math.max(target, minimumCoordinate));
  }

  const idealShift =
    sorted.reduce(
      (sum, label, index) => sum + coordinate(label) - packedCoordinates[index],
      0,
    ) / sorted.length;
  const minimumShift = extent(sorted[0]) / 2 - packedCoordinates[0];
  const maximumShift =
    axisLength -
    extent(sorted[sorted.length - 1]) / 2 -
    packedCoordinates[packedCoordinates.length - 1];
  const shift =
    minimumShift <= maximumShift
      ? Math.min(Math.max(idealShift, minimumShift), maximumShift)
      : idealShift;

  return sorted.map((label, index) => {
    const adjustedCoordinate = packedCoordinates[index] + shift;
    return verticalEdge
      ? { ...label, y: adjustedCoordinate }
      : { ...label, x: adjustedCoordinate };
  });
}

function offsetPortIndexLabelOutward(
  label: PortIndexLabelPlacement,
  distance: number,
) {
  if (label.position === Position.Left) {
    return { ...label, x: label.x - distance };
  }
  if (label.position === Position.Right) {
    return { ...label, x: label.x + distance };
  }
  if (label.position === Position.Top) {
    return { ...label, y: label.y - distance };
  }
  return { ...label, y: label.y + distance };
}

function spreadPortIndexLabels(
  labels: PortIndexLabelPlacement[],
  position: Position,
  axisLength: number,
) {
  if (labels.length === 0) {
    return labels;
  }
  const verticalEdge = position === Position.Left || position === Position.Right;
  const coordinate = (label: PortIndexLabelPlacement) =>
    verticalEdge ? label.y : label.x;
  const extent = (label: PortIndexLabelPlacement) =>
    verticalEdge ? PORT_INDEX_LABEL_HEIGHT_PX : portIndexLabelWidth(label.text);
  const normalExtent = (label: PortIndexLabelPlacement) =>
    verticalEdge ? portIndexLabelWidth(label.text) : PORT_INDEX_LABEL_HEIGHT_PX;
  const sorted = [...labels].sort(
    (first, second) =>
      coordinate(first) - coordinate(second) || first.order - second.order,
  );
  const requiredSpan =
    sorted.reduce((sum, label) => sum + extent(label), 0) +
    PORT_INDEX_LABEL_GAP_PX * Math.max(0, sorted.length - 1);
  const laneCount = Math.min(
    sorted.length,
    Math.max(1, Math.ceil(requiredSpan / axisLength)),
  );
  const lanes = Array.from(
    { length: laneCount },
    () => [] as PortIndexLabelPlacement[],
  );
  sorted.forEach((label, index) => lanes[index % laneCount].push(label));
  const laneStep =
    Math.max(...sorted.map(normalExtent)) + PORT_INDEX_LABEL_LANE_GAP_PX;

  return lanes.flatMap((lane, laneIndex) =>
    packPortIndexLabelLane(lane, position, axisLength).map((label) =>
      offsetPortIndexLabelOutward(
        label,
        PORT_INDEX_OUTSET_PX + laneIndex * laneStep,
      ),
    ),
  );
}

function portIndexLabelPlacements(
  ports: PortDefinition[],
  placements: TransformedPortPlacement[],
  layout: ComponentSymbolLayout,
  rotation: NodeRotation,
) {
  const indexByPortName = new Map(
    ports.map((port, index) => [port.name, index] as const),
  );
  const labels = placements.map(({ port, position, x, y }, order) => {
    const index = indexByPortName.get(port.name) ?? order;
    const label: PortIndexLabelPlacement = {
      order,
      portName: port.name,
      position,
      text: portIndexText(port, index),
      x,
      y,
    };
    if (position === Position.Left || position === Position.Right) {
      label.y -= PORT_INDEX_TANGENT_OFFSET_PX;
    } else {
      label.x += PORT_INDEX_TANGENT_OFFSET_PX;
    }
    return label;
  });
  const renderedSize = nodeFrameDimensions(layout, rotation);
  const spreadByOrder = new Map<number, PortIndexLabelPlacement>();
  for (const position of [
    Position.Left,
    Position.Right,
    Position.Top,
    Position.Bottom,
  ]) {
    const group = labels.filter((label) => label.position === position);
    const axisLength =
      position === Position.Left || position === Position.Right
        ? renderedSize.height
        : renderedSize.width;
    for (const label of spreadPortIndexLabels(group, position, axisLength)) {
      spreadByOrder.set(label.order, label);
    }
  }
  return labels.map((label) => spreadByOrder.get(label.order) ?? label);
}

function rotatePoint(x: number, y: number, rotation: NodeRotation): [number, number] {
  if (rotation === 90) {
    return [-y, x];
  }
  if (rotation === 180) {
    return [-x, -y];
  }
  if (rotation === 270) {
    return [y, -x];
  }
  return [x, y];
}

function transformedPortPosition(
  side: PortSide,
  rotation: NodeRotation,
  mirrored: boolean,
  viewBox: ComponentSymbolViewBox,
  anchor?: ComponentSymbolPortAnchor,
) {
  let directionX = side === "left" ? -1 : 1;
  let directionY = 0;

  if (anchor) {
    const closestEdge = [
      { distance: anchor.x - viewBox.x, x: -1, y: 0 },
      {
        distance: viewBox.x + viewBox.width - anchor.x,
        x: 1,
        y: 0,
      },
      { distance: anchor.y - viewBox.y, x: 0, y: -1 },
      {
        distance: viewBox.y + viewBox.height - anchor.y,
        x: 0,
        y: 1,
      },
    ].reduce((closest, candidate) =>
      candidate.distance < closest.distance ? candidate : closest,
    );
    directionX = closestEdge.x;
    directionY = closestEdge.y;
  }

  if (mirrored) {
    directionX = -directionX;
  }
  const [x, y] = rotatePoint(directionX, directionY, rotation);
  if (x < -0.01) {
    return Position.Left;
  }
  if (x > 0.01) {
    return Position.Right;
  }
  if (y < 0) {
    return Position.Top;
  }
  return Position.Bottom;
}

function nodePortFlowPlacementsWithLayout(
  node: SimulationNode,
  layout: ComponentSymbolLayout,
) {
  const rotation = normalizeNodeRotation(node.data.rotation);
  return transformedPortPlacements(
    displayedPortsForNodeData(node.data),
    rotation,
    Boolean(node.data.mirrored),
    layout,
  ).map((placement) => ({
    ...placement,
    flowX: node.position.x + placement.x,
    flowY: node.position.y + placement.y,
  }));
}

function nodePortFlowPlacements(node: SimulationNode) {
  const symbol = node.data.symbol ?? node.data.componentType;
  return nodePortFlowPlacementsWithLayout(
    node,
    componentSymbolLayout(symbol, node.data.parameters),
  );
}

function nodePortFlowPlacement(node: SimulationNode, portName: string | null) {
  if (!portName) {
    return undefined;
  }
  return nodePortFlowPlacements(node).find(
    (placement) => placement.port.name === portName,
  );
}

function resultNodePortFlowPlacement(
  node: SimulationResultsSnapshot["project"]["nodes"][number],
  portName: string | null,
) {
  return nodePortFlowPlacement(node as unknown as SimulationNode, portName);
}

function connectionForContactPorts(
  draggedNode: SimulationNode,
  draggedPort: PortDefinition,
  targetNode: SimulationNode,
  targetPort: PortDefinition,
): Connection {
  if (draggedPort.kind === "signal" && draggedPort.nominalRole === "input") {
    return {
      source: targetNode.id,
      sourceHandle: targetPort.name,
      target: draggedNode.id,
      targetHandle: draggedPort.name,
    };
  }
  return {
    source: draggedNode.id,
    sourceHandle: draggedPort.name,
    target: targetNode.id,
    targetHandle: targetPort.name,
  };
}

type ContactSnapPair = ContactSnapMatch & {
  distance: number;
  draggedNodeOrder: number;
  draggedPortOrder: number;
  targetNodeOrder: number;
  targetPortOrder: number;
};

type ContactSnapPlacement = ReturnType<typeof nodePortFlowPlacements>[number];

type ContactSnapIndexedTarget = {
  key: string;
  placement: ContactSnapPlacement;
  targetNode: SimulationNode;
  targetNodeOrder: number;
  targetPortOrder: number;
};

type ContactSnapSearchContext = {
  buckets: Map<string, ContactSnapIndexedTarget[]>;
  cellSize: number;
  draggedNodeIdsKey: string;
  occupiedPorts: Set<string>;
  targetByPortKey: Map<string, ContactSnapIndexedTarget>;
};

function contactSnapDraggedNodeIdsKey(nodeIds: ReadonlySet<string>) {
  return [...nodeIds].sort().join("\u001f");
}

function contactSnapCell(value: number, cellSize: number) {
  return Math.floor(value / cellSize);
}

function contactSnapBucketKey(cellX: number, cellY: number) {
  return `${cellX}:${cellY}`;
}

function contactSnapTargetsNear(
  context: ContactSnapSearchContext,
  flowX: number,
  flowY: number,
  radius: number,
) {
  const minCellX = contactSnapCell(flowX - radius, context.cellSize);
  const maxCellX = contactSnapCell(flowX + radius, context.cellSize);
  const minCellY = contactSnapCell(flowY - radius, context.cellSize);
  const maxCellY = contactSnapCell(flowY + radius, context.cellSize);
  const targets: ContactSnapIndexedTarget[] = [];
  for (let cellX = minCellX; cellX <= maxCellX; cellX += 1) {
    for (let cellY = minCellY; cellY <= maxCellY; cellY += 1) {
      targets.push(
        ...(context.buckets.get(contactSnapBucketKey(cellX, cellY)) ?? []),
      );
    }
  }
  return targets;
}

function compareContactSnapPairs(
  first: ContactSnapPair,
  second: ContactSnapPair,
) {
  return (
    first.distance - second.distance ||
    first.draggedNodeOrder - second.draggedNodeOrder ||
    first.draggedPortOrder - second.draggedPortOrder ||
    first.targetNodeOrder - second.targetNodeOrder ||
    first.targetPortOrder - second.targetPortOrder ||
    first.draggedNodeId.localeCompare(second.draggedNodeId) ||
    first.draggedPortName.localeCompare(second.draggedPortName) ||
    first.targetNodeId.localeCompare(second.targetNodeId) ||
    first.targetPortName.localeCompare(second.targetPortName)
  );
}

function buildContactSnapSearchContext(
  draggedNodeIds: ReadonlySet<string>,
  nodes: SimulationNode[],
  edges: SimulationEdge[],
): ContactSnapSearchContext {
  const occupiedPorts = new Set<string>();
  edges.forEach((edge) => {
    if (edge.sourceHandle) {
      occupiedPorts.add(portConnectionKey(edge.source, edge.sourceHandle));
    }
    if (edge.targetHandle) {
      occupiedPorts.add(portConnectionKey(edge.target, edge.targetHandle));
    }
  });
  const cellSize = CONTACT_SNAP_RADIUS_FLOW;
  const buckets = new Map<string, ContactSnapIndexedTarget[]>();
  const targetByPortKey = new Map<string, ContactSnapIndexedTarget>();
  nodes.forEach((targetNode, targetNodeOrder) => {
    if (draggedNodeIds.has(targetNode.id)) {
      return;
    }
    const targetPortOrder = new Map(
      targetNode.data.ports.map((port, index) => [port.name, index] as const),
    );
    nodePortFlowPlacements(targetNode).forEach((placement) => {
      const key = portConnectionKey(targetNode.id, placement.port.name);
      if (occupiedPorts.has(key)) {
        return;
      }
      const indexedTarget: ContactSnapIndexedTarget = {
        key,
        placement,
        targetNode,
        targetNodeOrder,
        targetPortOrder:
          targetPortOrder.get(placement.port.name) ?? Number.MAX_SAFE_INTEGER,
      };
      const bucketKey = contactSnapBucketKey(
        contactSnapCell(placement.flowX, cellSize),
        contactSnapCell(placement.flowY, cellSize),
      );
      const bucket = buckets.get(bucketKey);
      if (bucket) {
        bucket.push(indexedTarget);
      } else {
        buckets.set(bucketKey, [indexedTarget]);
      }
      targetByPortKey.set(key, indexedTarget);
    });
  });
  return {
    buckets,
    cellSize,
    draggedNodeIdsKey: contactSnapDraggedNodeIdsKey(draggedNodeIds),
    occupiedPorts,
    targetByPortKey,
  };
}

function availableContactSnapPairs(
  draggedNodes: SimulationNode[],
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  maximumDistance: number,
  searchContext?: ContactSnapSearchContext,
) {
  const draggedNodeIds = new Set(draggedNodes.map((node) => node.id));
  const draggedNodeIdsKey = contactSnapDraggedNodeIdsKey(draggedNodeIds);
  const resolvedContext =
    searchContext?.draggedNodeIdsKey === draggedNodeIdsKey
      ? searchContext
      : buildContactSnapSearchContext(draggedNodeIds, nodes, edges);
  const { occupiedPorts } = resolvedContext;
  const pairs: ContactSnapPair[] = [];
  const maximumDistanceSquared = maximumDistance * maximumDistance;

  draggedNodes.forEach((draggedNode, draggedNodeOrder) => {
    const draggedPortOrder = new Map(
      draggedNode.data.ports.map((port, index) => [port.name, index] as const),
    );
    const draggedPlacements = nodePortFlowPlacements(draggedNode).filter(
      (placement) =>
        !occupiedPorts.has(
          portConnectionKey(draggedNode.id, placement.port.name),
        ),
    );
    for (const draggedPlacement of draggedPlacements) {
      for (const indexedTarget of contactSnapTargetsNear(
        resolvedContext,
        draggedPlacement.flowX,
        draggedPlacement.flowY,
        maximumDistance,
      )) {
        const { placement: targetPlacement, targetNode } = indexedTarget;
        if (!arePortsCompatible(draggedPlacement.port, targetPlacement.port)) {
          continue;
        }
        const deltaX = targetPlacement.flowX - draggedPlacement.flowX;
        const deltaY = targetPlacement.flowY - draggedPlacement.flowY;
        const distanceSquared = deltaX * deltaX + deltaY * deltaY;
        if (distanceSquared > maximumDistanceSquared) {
          continue;
        }
        pairs.push({
          connection: connectionForContactPorts(
            draggedNode,
            draggedPlacement.port,
            targetNode,
            targetPlacement.port,
          ),
          distance: Math.sqrt(distanceSquared),
          draggedNodeId: draggedNode.id,
          draggedNodeOrder,
          draggedPortName: draggedPlacement.port.name,
          draggedPortOrder:
            draggedPortOrder.get(draggedPlacement.port.name) ??
            Number.MAX_SAFE_INTEGER,
          targetNodeId: targetNode.id,
          targetNodeOrder: indexedTarget.targetNodeOrder,
          targetPortOrder: indexedTarget.targetPortOrder,
          targetPortName: targetPlacement.port.name,
        });
      }
    }
  });

  return pairs.sort(compareContactSnapPairs);
}

function maximumContactSnapMatches(pairs: ContactSnapPair[]) {
  // 二分图最大匹配的两侧都使用完整 nodeId:portName，避免块内多个
  // 组件拥有同名 port_1 时互相覆盖。
  const pairsByDraggedPort = new Map<string, ContactSnapPair[]>();
  pairs.forEach((pair) => {
    const key = portConnectionKey(pair.draggedNodeId, pair.draggedPortName);
    const current = pairsByDraggedPort.get(key) ?? [];
    current.push(pair);
    pairsByDraggedPort.set(key, current);
  });
  const pairByTargetPort = new Map<string, ContactSnapPair>();

  const assignDraggedPort = (
    draggedPortKey: string,
    visitedTargetPorts: Set<string>,
  ): boolean => {
    for (const pair of pairsByDraggedPort.get(draggedPortKey) ?? []) {
      const targetKey = portConnectionKey(pair.targetNodeId, pair.targetPortName);
      if (visitedTargetPorts.has(targetKey)) {
        continue;
      }
      visitedTargetPorts.add(targetKey);
      const currentPair = pairByTargetPort.get(targetKey);
      const currentDraggedKey = currentPair
        ? portConnectionKey(
            currentPair.draggedNodeId,
            currentPair.draggedPortName,
          )
        : null;
      if (
        currentDraggedKey &&
        !assignDraggedPort(currentDraggedKey, visitedTargetPorts)
      ) {
        continue;
      }
      pairByTargetPort.set(targetKey, pair);
      return true;
    }
    return false;
  };

  for (const draggedPortKey of pairsByDraggedPort.keys()) {
    assignDraggedPort(draggedPortKey, new Set());
  }

  return [...pairByTargetPort.values()].sort(compareContactSnapPairs);
}

function findContactSnapCandidate(
  draggedNodes: SimulationNode[],
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  maximumDistance: number,
  searchContext?: ContactSnapSearchContext,
) {
  if (draggedNodes.length === 0) {
    return null;
  }
  const draggedNodeIds = new Set(draggedNodes.map((node) => node.id));
  const draggedNodeIdsKey = contactSnapDraggedNodeIdsKey(draggedNodeIds);
  const resolvedContext =
    searchContext?.draggedNodeIdsKey === draggedNodeIdsKey
      ? searchContext
      : buildContactSnapSearchContext(draggedNodeIds, nodes, edges);
  const nearbyPairs = availableContactSnapPairs(
    draggedNodes,
    nodes,
    edges,
    maximumDistance,
    resolvedContext,
  );
  const anchor = nearbyPairs[0];
  if (!anchor) {
    return null;
  }
  const draggedNode = draggedNodes.find(
    (node) => node.id === anchor.draggedNodeId,
  );
  const draggedPlacement = draggedNode
    ? nodePortFlowPlacement(draggedNode, anchor.draggedPortName)
    : undefined;
  const targetPlacement = resolvedContext.targetByPortKey.get(
    portConnectionKey(anchor.targetNodeId, anchor.targetPortName),
  )?.placement;
  if (!draggedPlacement || !targetPlacement) {
    return null;
  }
  const positionDelta = {
    x: targetPlacement.flowX - draggedPlacement.flowX,
    y: targetPlacement.flowY - draggedPlacement.flowY,
  };
  const snappedDraggedNodes = draggedNodes.map((node) => ({
    ...node,
    position: {
      x: node.position.x + positionDelta.x,
      y: node.position.y + positionDelta.y,
    },
  }));
  // 整个块只采用一个平移量；仅建立该统一落点下真正重合的端口。
  const exactPairs = availableContactSnapPairs(
    snappedDraggedNodes,
    nodes,
    edges,
    CONTACT_GEOMETRY_TOLERANCE,
    resolvedContext,
  );
  const matches = maximumContactSnapMatches(exactPairs).map(
    ({
      connection,
      draggedNodeId,
      draggedPortName,
      targetNodeId,
      targetPortName,
    }) => ({
      connection,
      draggedNodeId,
      draggedPortName,
      targetNodeId,
      targetPortName,
    }),
  );
  return matches.length > 0 ? { matches, positionDelta } : null;
}

function sameContactSnapCandidate(
  first: ContactSnapCandidate | null,
  second: ContactSnapCandidate | null,
) {
  return (
    first === second ||
    (Boolean(first) &&
      Boolean(second) &&
      first?.positionDelta.x === second?.positionDelta.x &&
      first?.positionDelta.y === second?.positionDelta.y &&
      first?.matches.length === second?.matches.length &&
      first?.matches.every((match, index) => {
        const other = second?.matches[index];
        return Boolean(
          other &&
            match.draggedNodeId === other.draggedNodeId &&
            match.draggedPortName === other.draggedPortName &&
            match.targetNodeId === other.targetNodeId &&
            match.targetPortName === other.targetPortName,
        );
      }))
  );
}

function isContactEdgeGeometry(nodes: SimulationNode[], edge: SimulationEdge) {
  const sourceNode = nodes.find((node) => node.id === edge.source);
  const targetNode = nodes.find((node) => node.id === edge.target);
  if (!sourceNode || !targetNode) {
    return false;
  }
  const source = nodePortFlowPlacement(sourceNode, edge.sourceHandle ?? null);
  const target = nodePortFlowPlacement(targetNode, edge.targetHandle ?? null);
  return Boolean(
    source &&
      target &&
      Math.hypot(target.flowX - source.flowX, target.flowY - source.flowY) <=
        CONTACT_GEOMETRY_TOLERANCE,
  );
}

function routePointsForEdge(edge: SimulationEdge) {
  const routePoints = (edge.data as EdgeRouteData | undefined)?.routePoints;
  return Array.isArray(routePoints) && routePoints.every(edgePointIsFinite)
    ? routePoints
    : [];
}

function translateEdgeRoute(
  edge: SimulationEdge,
  deltaX: number,
  deltaY: number,
): SimulationEdge {
  const routePoints = routePointsForEdge(edge);
  if (
    routePoints.length === 0 ||
    (Math.abs(deltaX) <= 0.001 && Math.abs(deltaY) <= 0.001)
  ) {
    return edge;
  }
  return {
    ...edge,
    data: {
      ...edge.data,
      routePoints: routePoints.map((point) => ({
        x: point.x + deltaX,
        y: point.y + deltaY,
      })),
    },
  };
}

function translateInternalEdgeRoutes(
  edges: SimulationEdge[],
  movedNodeIds: ReadonlySet<string>,
  deltaX: number,
  deltaY: number,
) {
  let changed = false;
  const translated = edges.map((edge) => {
    if (!movedNodeIds.has(edge.source) || !movedNodeIds.has(edge.target)) {
      return edge;
    }
    const next = translateEdgeRoute(edge, deltaX, deltaY);
    changed ||= next !== edge;
    return next;
  });
  return changed ? translated : edges;
}

type NodePortGeometryIndex = Map<
  string,
  Map<string, { flowX: number; flowY: number }>
>;

function buildNodePortGeometryIndex(nodes: SimulationNode[]): NodePortGeometryIndex {
  return new Map(
    nodes.map((node) => [
      node.id,
      new Map(
        nodePortFlowPlacements(node).map((placement) => [
          placement.port.name,
          { flowX: placement.flowX, flowY: placement.flowY },
        ] as const),
      ),
    ] as const),
  );
}

function isContactEdgeGeometryInIndex(
  geometryIndex: NodePortGeometryIndex,
  edge: SimulationEdge,
) {
  const source = edge.sourceHandle
    ? geometryIndex.get(edge.source)?.get(edge.sourceHandle)
    : undefined;
  const target = edge.targetHandle
    ? geometryIndex.get(edge.target)?.get(edge.targetHandle)
    : undefined;
  return Boolean(
    source &&
      target &&
      Math.hypot(target.flowX - source.flowX, target.flowY - source.flowY) <=
        CONTACT_GEOMETRY_TOLERANCE,
  );
}

function separateDeletedContactEdges(
  nodes: SimulationNode[],
  deletedEdges: SimulationEdge[],
) {
  const offsets = new Map<string, { x: number; y: number }>();
  deletedEdges.forEach((edge) => {
    if (!isContactEdgeGeometry(nodes, edge)) {
      return;
    }
    const sourceNode = nodes.find((node) => node.id === edge.source);
    const targetNode = nodes.find((node) => node.id === edge.target);
    if (!sourceNode || !targetNode) {
      return;
    }
    const sourceSize = nodeFrameDimensions(
      componentSymbolLayout(
        sourceNode.data.symbol ?? sourceNode.data.componentType,
        sourceNode.data.parameters,
      ),
      normalizeNodeRotation(sourceNode.data.rotation),
    );
    const targetSize = nodeFrameDimensions(
      componentSymbolLayout(
        targetNode.data.symbol ?? targetNode.data.componentType,
        targetNode.data.parameters,
      ),
      normalizeNodeRotation(targetNode.data.rotation),
    );
    const centerDelta = {
      x:
        targetNode.position.x +
        targetSize.width / 2 -
        (sourceNode.position.x + sourceSize.width / 2),
      y:
        targetNode.position.y +
        targetSize.height / 2 -
        (sourceNode.position.y + sourceSize.height / 2),
    };
    const magnitude = Math.hypot(centerDelta.x, centerDelta.y) || 1;
    const current = offsets.get(targetNode.id) ?? { x: 0, y: 0 };
    offsets.set(targetNode.id, {
      x: current.x + (centerDelta.x / magnitude) * CONTACT_DELETE_SEPARATION,
      y: current.y + (centerDelta.y / magnitude) * CONTACT_DELETE_SEPARATION,
    });
  });
  if (offsets.size === 0) {
    return nodes;
  }
  return nodes.map((node) => {
    const offset = offsets.get(node.id);
    return offset
      ? {
          ...node,
          position: {
            x: node.position.x + offset.x,
            y: node.position.y + offset.y,
          },
        }
      : node;
  });
}

function disconnectInvalidatedContactEdges(
  previousNodes: SimulationNode[],
  nextNodes: SimulationNode[],
  edges: SimulationEdge[],
  transformedNodeIds: Set<string>,
) {
  const removedEdges: SimulationEdge[] = [];
  const previousGeometry = buildNodePortGeometryIndex(previousNodes);
  const nextGeometry = buildNodePortGeometryIndex(nextNodes);
  const remainingEdges = edges.filter((edge) => {
    const affected =
      transformedNodeIds.has(edge.source) || transformedNodeIds.has(edge.target);
    const invalidated =
      affected &&
      isContactEdgeGeometryInIndex(previousGeometry, edge) &&
      !isContactEdgeGeometryInIndex(nextGeometry, edge);
    if (invalidated) {
      removedEdges.push(edge);
    }
    return !invalidated;
  });
  return { remainingEdges, removedEdges };
}

type ToolbarButtonProps = {
  label: string;
  icon: LucideIcon;
  onClick: () => void;
  disabled?: boolean;
  pressed?: boolean;
  accent?: boolean;
  primary?: boolean;
};

function ToolbarButton({
  label,
  icon: Icon,
  onClick,
  disabled = false,
  pressed,
  accent = false,
  primary = false,
}: ToolbarButtonProps) {
  return (
    <span className="toolbar-item" data-tooltip={label}>
      <button
        aria-label={label}
        aria-pressed={pressed}
        className={`editor-tool-button ${pressed ? "active" : ""} ${accent ? "accent" : ""} ${primary ? "primary" : ""}`}
        disabled={disabled}
        onClick={onClick}
        type="button"
      >
        <Icon aria-hidden="true" size={18} strokeWidth={1.8} />
      </button>
    </span>
  );
}

type SimulationConsoleProps = {
  entries: SimulationConsoleEntry[];
  mode: SimulationConsoleMode;
  progress: SimulationProgressState;
  onClear: () => void;
  onModeChange: (mode: SimulationConsoleMode) => void;
  onStop: () => void;
  stopPending: boolean;
};

const consoleLevelLabels: Record<SimulationConsoleLevel, string> = {
  info: "信息",
  success: "完成",
  warning: "警告",
  error: "错误",
};

function simulationProgressClockText(progress: SimulationProgressState) {
  const simulatedTime = Number.isFinite(progress.simulatedTime)
    ? progress.simulatedTime
    : progress.startTime;
  const totalTime = Number.isFinite(progress.totalTime)
    ? progress.totalTime
    : progress.startTime;
  return `${simulatedTime.toFixed(2)} s / ${totalTime.toFixed(2)} s`;
}

function simulationTimePercent(
  startTime: number,
  simulatedTime: number,
  totalTime: number,
) {
  const duration = totalTime - startTime;
  if (!Number.isFinite(duration) || duration <= 0) {
    return 0;
  }
  return Math.min(
    100,
    Math.max(0, Math.round((100 * (simulatedTime - startTime)) / duration)),
  );
}

type NormalizedSimulationProgress = {
  percent: number;
  simulatedTime: number;
  totalTime: number;
};

function normalizeSimulationProgressEvent(
  event: Extract<SimulationStreamEvent, { event: "progress" }>,
  config: ResolvedSimulationConfig,
): NormalizedSimulationProgress {
  const totalTime = Number.isFinite(event.totalTime)
    ? Number(event.totalTime)
    : config.t_stop;
  const preparationPhase = [
    "queued",
    "validation",
    "compilation",
    "initialization",
    "initializing",
  ].includes(event.phase);
  if (preparationPhase) {
    return {
      percent: 0,
      simulatedTime: config.t_start,
      totalTime,
    };
  }

  if (Number.isFinite(event.simulatedTime)) {
    const simulatedTime = Math.min(
      totalTime,
      Math.max(config.t_start, Number(event.simulatedTime)),
    );
    return {
      percent: simulationTimePercent(
        config.t_start,
        simulatedTime,
        totalTime,
      ),
      simulatedTime,
      totalTime,
    };
  }

  return {
    percent: 0,
    simulatedTime: config.t_start,
    totalTime,
  };
}

function isConsolePosition(value: unknown): value is ConsolePosition {
  if (!value || typeof value !== "object") {
    return false;
  }

  const position = value as Partial<ConsolePosition>;
  return (
    typeof position.x === "number" &&
    Number.isFinite(position.x) &&
    typeof position.y === "number" &&
    Number.isFinite(position.y)
  );
}

function isConsolePlacement(value: unknown): value is ConsolePlacement {
  if (!isConsolePosition(value)) {
    return false;
  }

  const placement = value as Partial<ConsolePlacement>;
  return (
    (placement.horizontalAnchor === "left" ||
      placement.horizontalAnchor === "right") &&
    (placement.verticalAnchor === "top" || placement.verticalAnchor === "bottom")
  );
}

function consolePlacementFromPosition(
  position: ConsolePosition,
  width: number,
  height: number,
  horizontalAnchor?: ConsolePlacement["horizontalAnchor"],
  verticalAnchor?: ConsolePlacement["verticalAnchor"],
): ConsolePlacement {
  const nextHorizontalAnchor =
    horizontalAnchor ??
    (position.x + width / 2 <= window.innerWidth / 2 ? "left" : "right");
  const nextVerticalAnchor =
    verticalAnchor ??
    (position.y + height / 2 <= window.innerHeight / 2 ? "top" : "bottom");

  return {
    x: Math.round(nextHorizontalAnchor === "left" ? position.x : position.x + width),
    y: Math.round(nextVerticalAnchor === "top" ? position.y : position.y + height),
    horizontalAnchor: nextHorizontalAnchor,
    verticalAnchor: nextVerticalAnchor,
  };
}

function estimateConsoleSize(mode: "minimized" | "normal") {
  const mobile = window.innerWidth <= 640;
  const viewportPadding = mobile ? 16 : 28;
  return {
    width: Math.min(mode === "minimized" ? 480 : 760, window.innerWidth - viewportPadding),
    height:
      mode === "minimized"
        ? 40
        : mobile
          ? Math.min(300, window.innerHeight - 16)
          : 270,
  };
}

function loadConsolePlacement(): ConsolePlacement | undefined {
  try {
    const storedValue = localStorage.getItem(CONSOLE_PLACEMENT_KEY);
    if (!storedValue) {
      return undefined;
    }

    const parsedValue = JSON.parse(storedValue) as Record<string, unknown>;
    if (isConsolePlacement(parsedValue)) {
      return parsedValue;
    }
    return undefined;
  } catch {
    return undefined;
  }
}

function storeConsolePlacement(placement: ConsolePlacement | undefined) {
  try {
    if (placement) {
      localStorage.setItem(CONSOLE_PLACEMENT_KEY, JSON.stringify(placement));
    } else {
      localStorage.removeItem(CONSOLE_PLACEMENT_KEY);
    }
  } catch {
    // The console remains movable when browser storage is unavailable.
  }
}

function clampConsolePosition(
  position: ConsolePosition,
  width: number,
  height: number,
): ConsolePosition {
  const maxX = Math.max(
    CONSOLE_VIEWPORT_MARGIN,
    window.innerWidth - width - CONSOLE_VIEWPORT_MARGIN,
  );
  const maxY = Math.max(
    CONSOLE_VIEWPORT_MARGIN,
    window.innerHeight - height - CONSOLE_VIEWPORT_MARGIN,
  );

  return {
    x: Math.round(Math.min(Math.max(CONSOLE_VIEWPORT_MARGIN, position.x), maxX)),
    y: Math.round(Math.min(Math.max(CONSOLE_VIEWPORT_MARGIN, position.y), maxY)),
  };
}

function clampConsolePlacement(
  placement: ConsolePlacement,
  width: number,
  height: number,
): ConsolePlacement {
  const unclampedPosition = {
    x: placement.horizontalAnchor === "left" ? placement.x : placement.x - width,
    y: placement.verticalAnchor === "top" ? placement.y : placement.y - height,
  };
  const position = clampConsolePosition(unclampedPosition, width, height);
  return consolePlacementFromPosition(
    position,
    width,
    height,
    placement.horizontalAnchor,
    placement.verticalAnchor,
  );
}

function consolePlacementsEqual(
  first: ConsolePlacement,
  second: ConsolePlacement,
) {
  return (
    first.x === second.x &&
    first.y === second.y &&
    first.horizontalAnchor === second.horizontalAnchor &&
    first.verticalAnchor === second.verticalAnchor
  );
}

function SimulationConsole({
  entries,
  mode,
  progress,
  onClear,
  onModeChange,
  onStop,
  stopPending,
}: SimulationConsoleProps) {
  const logRef = useRef<HTMLDivElement>(null);
  const consoleRef = useRef<HTMLElement>(null);
  const dragStateRef = useRef<ConsoleDragState | null>(null);
  const [placement, setPlacement] = useState<ConsolePlacement | undefined>(
    loadConsolePlacement,
  );
  const [dragging, setDragging] = useState(false);

  useEffect(() => {
    if (mode !== "minimized" && logRef.current) {
      logRef.current.scrollTop = logRef.current.scrollHeight;
    }
  }, [entries, mode]);

  useEffect(() => {
    storeConsolePlacement(placement);
  }, [placement]);

  useEffect(() => {
    dragStateRef.current = null;
    setDragging(false);
  }, [mode]);

  useLayoutEffect(() => {
    if (mode === "maximized") {
      return;
    }

    const consoleElement = consoleRef.current;
    if (!consoleElement) {
      return;
    }

    const bounds = consoleElement.getBoundingClientRect();
    setPlacement((currentPlacement) => {
      const nextPlacement = currentPlacement
        ? clampConsolePlacement(currentPlacement, bounds.width, bounds.height)
        : consolePlacementFromPosition(
            { x: bounds.left, y: bounds.top },
            bounds.width,
            bounds.height,
          );
      return currentPlacement && consolePlacementsEqual(currentPlacement, nextPlacement)
        ? currentPlacement
        : nextPlacement;
    });
  }, [mode]);

  useEffect(() => {
    if (mode === "maximized") {
      return undefined;
    }

    const clampCurrentPlacement = () => {
      const consoleElement = consoleRef.current;
      if (!consoleElement) {
        return;
      }

      const bounds = consoleElement.getBoundingClientRect();
      setPlacement((currentPlacement) => {
        if (!currentPlacement) {
          return currentPlacement;
        }

        const nextPlacement = clampConsolePlacement(
          currentPlacement,
          bounds.width,
          bounds.height,
        );
        return consolePlacementsEqual(currentPlacement, nextPlacement)
          ? currentPlacement
          : nextPlacement;
      });
    };

    window.addEventListener("resize", clampCurrentPlacement);
    return () => window.removeEventListener("resize", clampCurrentPlacement);
  }, [mode]);

  const requestConsoleMode = (nextMode: SimulationConsoleMode) => {
    if (mode !== "maximized" && consoleRef.current) {
      const bounds = consoleRef.current.getBoundingClientRect();
      setPlacement(
        consolePlacementFromPosition(
          { x: bounds.left, y: bounds.top },
          bounds.width,
          bounds.height,
        ),
      );
    }
    onModeChange(nextMode);
  };

  const startConsoleDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
    if (mode === "maximized" || event.button !== 0 || !consoleRef.current) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();
    const bounds = consoleRef.current.getBoundingClientRect();
    dragStateRef.current = {
      pointerId: event.pointerId,
      offsetX: event.clientX - bounds.left,
      offsetY: event.clientY - bounds.top,
      width: bounds.width,
      height: bounds.height,
    };
    setPlacement(
      consolePlacementFromPosition(
        { x: bounds.left, y: bounds.top },
        bounds.width,
        bounds.height,
      ),
    );
    event.currentTarget.setPointerCapture(event.pointerId);
    setDragging(true);
  };

  const moveConsole = (event: ReactPointerEvent<HTMLButtonElement>) => {
    const dragState = dragStateRef.current;
    if (!dragState || dragState.pointerId !== event.pointerId) {
      return;
    }

    event.preventDefault();
    const nextPosition = clampConsolePosition(
      {
        x: event.clientX - dragState.offsetX,
        y: event.clientY - dragState.offsetY,
      },
      dragState.width,
      dragState.height,
    );
    setPlacement(
      consolePlacementFromPosition(
        nextPosition,
        dragState.width,
        dragState.height,
      ),
    );
  };

  const stopConsoleDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
    const dragState = dragStateRef.current;
    if (!dragState || dragState.pointerId !== event.pointerId) {
      return;
    }

    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
    dragStateRef.current = null;
    setDragging(false);
  };

  const resetConsolePosition = () => {
    if (mode === "maximized") {
      return;
    }

    const consoleElement = consoleRef.current;
    if (!consoleElement) {
      return;
    }

    const bounds = consoleElement.getBoundingClientRect();
    const viewportInset = window.innerWidth <= 640 ? 8 : 14;
    const defaultPosition =
      mode === "minimized"
        ? {
            x: window.innerWidth - bounds.width - viewportInset,
            y: window.innerHeight - bounds.height - viewportInset,
          }
        : {
            x: (window.innerWidth - bounds.width) / 2,
            y: window.innerHeight - bounds.height - viewportInset,
          };
    setPlacement(
      consolePlacementFromPosition(
        clampConsolePosition(defaultPosition, bounds.width, bounds.height),
        bounds.width,
        bounds.height,
      ),
    );
  };

  const canStop = progress.state === "running" && !stopPending;
  const consoleStyle: CSSProperties | undefined = mode !== "maximized" && placement
    ? {
        bottom:
          placement.verticalAnchor === "bottom"
            ? Math.round(window.innerHeight - placement.y)
            : "auto",
        left: placement.horizontalAnchor === "left" ? placement.x : "auto",
        right:
          placement.horizontalAnchor === "right"
            ? Math.round(window.innerWidth - placement.x)
            : "auto",
        top: placement.verticalAnchor === "top" ? placement.y : "auto",
        transform: "none",
      }
    : undefined;

  if (mode === "minimized") {
    return (
      <aside
        aria-label="仿真控制台"
        className={`simulation-console minimized ${dragging ? "dragging" : ""}`}
        data-editor-shortcuts-ignore="true"
        ref={consoleRef}
        style={consoleStyle}
      >
        <div className="simulation-console-collapsed">
          <button
            aria-label="移动控制台"
            className="simulation-console-collapsed-move"
            onDoubleClick={resetConsolePosition}
            onLostPointerCapture={stopConsoleDrag}
            onPointerCancel={stopConsoleDrag}
            onPointerDown={startConsoleDrag}
            onPointerMove={moveConsole}
            onPointerUp={stopConsoleDrag}
            title="拖动移动控制台，双击恢复默认位置"
            type="button"
          >
            <Move aria-hidden="true" size={16} strokeWidth={1.8} />
          </button>
          <button
            aria-label={stopPending ? "正在停止仿真" : "停止仿真"}
            className={`simulation-console-collapsed-stop ${canStop ? "active" : ""}`}
            disabled={!canStop}
            onClick={onStop}
            title={canStop ? "停止当前仿真" : "当前没有可停止的仿真"}
            type="button"
          >
            <Square aria-hidden="true" fill="currentColor" size={13} strokeWidth={1.8} />
          </button>
          <button
            aria-label="展开仿真控制台"
            className="simulation-console-collapsed-open"
            onClick={() => requestConsoleMode("normal")}
            title="展开仿真控制台"
            type="button"
          >
            <SquareTerminal aria-hidden="true" size={17} />
            <strong>仿真控制台</strong>
            {progress.state === "running" ? (
              <span className="simulation-console-collapsed-status">
                {simulationProgressClockText(progress)} · {progress.percent}%
              </span>
            ) : (
              <span aria-hidden="true" />
            )}
            <ChevronUp aria-hidden="true" size={17} />
          </button>
        </div>
      </aside>
    );
  }

  return (
    <aside
      aria-label="仿真控制台"
      className={`simulation-console ${mode} ${dragging ? "dragging" : ""}`}
      data-editor-shortcuts-ignore="true"
      ref={consoleRef}
      style={consoleStyle}
    >
      <header className="simulation-console-header">
        <div className="simulation-console-title">
          <SquareTerminal aria-hidden="true" size={17} />
          <strong>仿真控制台</strong>
          {progress.state === "running" ? <span>运行中</span> : null}
        </div>
        <div className="simulation-console-actions">
          {mode === "normal" ? (
            <button
              aria-label="移动控制台"
              className="simulation-console-move-button"
              onDoubleClick={resetConsolePosition}
              onLostPointerCapture={stopConsoleDrag}
              onPointerCancel={stopConsoleDrag}
              onPointerDown={startConsoleDrag}
              onPointerMove={moveConsole}
              onPointerUp={stopConsoleDrag}
              title="拖动移动控制台，双击恢复默认位置"
              type="button"
            >
              <Move aria-hidden="true" size={16} strokeWidth={1.8} />
            </button>
          ) : null}
          <button
            aria-label={stopPending ? "正在停止仿真" : "停止仿真"}
            className={`simulation-console-stop-button ${canStop ? "active" : ""}`}
            disabled={!canStop}
            onClick={onStop}
            title={canStop ? "停止当前仿真" : "当前没有可停止的仿真"}
            type="button"
          >
            <Square aria-hidden="true" fill="currentColor" size={13} strokeWidth={1.8} />
          </button>
          <button
            aria-label="清空控制台"
            disabled={entries.length === 0}
            onClick={onClear}
            title="清空控制台"
            type="button"
          >
            <Trash2 aria-hidden="true" size={16} />
          </button>
          {mode === "normal" ? (
            <button
              aria-label="最大化控制台"
              onClick={() => requestConsoleMode("maximized")}
              title="最大化控制台"
              type="button"
            >
              <Maximize2 aria-hidden="true" size={16} />
            </button>
          ) : (
            <button
              aria-label="还原控制台"
              onClick={() => requestConsoleMode("normal")}
              title="还原控制台"
              type="button"
            >
              <Minimize2 aria-hidden="true" size={16} />
            </button>
          )}
          <button
            aria-label="最小化控制台"
            onClick={() => requestConsoleMode("minimized")}
            title="最小化控制台"
            type="button"
          >
            <ChevronDown aria-hidden="true" size={17} />
          </button>
        </div>
      </header>

      <div className={`simulation-console-progress ${progress.state}`}>
        <div className="simulation-console-progress-label">
          <span>{progress.message}</span>
          <div className="simulation-console-progress-metrics">
            <span>{simulationProgressClockText(progress)}</span>
            <strong>{progress.percent}%</strong>
          </div>
        </div>
        <div
          aria-label={`仿真进度 ${progress.percent}%，${simulationProgressClockText(progress)}`}
          aria-valuemax={100}
          aria-valuemin={0}
          aria-valuenow={progress.percent}
          className="simulation-console-progress-track"
          role="progressbar"
        >
          <span style={{ width: `${progress.percent}%` }} />
        </div>
      </div>

      <div
        aria-label="控制台日志"
        className="simulation-console-log"
        ref={logRef}
        role="region"
      >
        {entries.length === 0 ? (
          <div className="simulation-console-empty">暂无仿真消息</div>
        ) : (
          entries.map((entry) => (
            <div
              className={`simulation-console-entry ${entry.level} ${entry.format}`}
              data-entry-id={entry.id}
              key={entry.id}
            >
              <time>{entry.timestamp}</time>
              <span className="simulation-console-entry-level">
                {consoleLevelLabels[entry.level]}
              </span>
              {entry.format === "xml" ? (
                <pre
                  aria-label="生成的系统 XML"
                  className="simulation-console-entry-xml"
                >
                  {entry.message}
                </pre>
              ) : (
                <span className="simulation-console-entry-message">{entry.message}</span>
              )}
            </div>
          ))
        )}
      </div>
    </aside>
  );
}

type DeferredNumberInputProps = {
  ariaLabel?: string;
  invalid?: boolean;
  value: number | string;
  onCommit: (value: string) => void;
  onEditEnd?: () => void;
  onEditStart?: () => void;
};

function DeferredNumberInput({
  ariaLabel,
  invalid = false,
  value,
  onCommit,
  onEditEnd,
  onEditStart,
}: DeferredNumberInputProps) {
  const committedText = String(value);
  const [draftText, setDraftText] = useState(committedText);
  const committedTextRef = useRef(committedText);
  const draftTextRef = useRef(committedText);
  const editingRef = useRef(false);
  const cancelCommitRef = useRef(false);

  useEffect(() => {
    committedTextRef.current = committedText;
    if (!editingRef.current) {
      draftTextRef.current = committedText;
      setDraftText(committedText);
    }
  }, [committedText]);

  return (
    <input
      aria-invalid={invalid}
      aria-label={ariaLabel}
      className="parameter-number-input"
      inputMode="text"
      onBlur={() => {
        editingRef.current = false;
        if (cancelCommitRef.current) {
          cancelCommitRef.current = false;
        } else {
          onCommit(draftTextRef.current);
        }
        window.setTimeout(() => onEditEnd?.(), 0);
      }}
      onChange={(event) => {
        draftTextRef.current = event.target.value;
        setDraftText(event.target.value);
      }}
      onFocus={() => {
        editingRef.current = true;
        cancelCommitRef.current = false;
        onEditStart?.();
      }}
      onKeyDown={(event) => {
        if (event.key === "Enter") {
          event.preventDefault();
          event.currentTarget.blur();
        } else if (event.key === "Escape") {
          event.preventDefault();
          cancelCommitRef.current = true;
          draftTextRef.current = committedTextRef.current;
          setDraftText(committedTextRef.current);
          event.currentTarget.blur();
        }
      }}
      spellCheck={false}
      type="text"
      value={draftText}
    />
  );
}

type FlowViewportWorldBounds = {
  minX: number;
  minY: number;
  maxX: number;
  maxY: number;
};

const FLOW_VIEWPORT_DEFAULT_HALF_EXTENT = 2_000;
const FLOW_VIEWPORT_NODE_MARGIN = 600;
const FLOW_VIEWPORT_SCROLLBAR_CONTENT_LIMIT_PX = 8_000_000;

function defaultFlowViewportWorldBounds(): FlowViewportWorldBounds {
  return {
    minX: -FLOW_VIEWPORT_DEFAULT_HALF_EXTENT,
    minY: -FLOW_VIEWPORT_DEFAULT_HALF_EXTENT,
    maxX: FLOW_VIEWPORT_DEFAULT_HALF_EXTENT,
    maxY: FLOW_VIEWPORT_DEFAULT_HALF_EXTENT,
  };
}

function FlowViewportScrollbars({
  deferBounds = false,
  nodes,
}: {
  deferBounds?: boolean;
  nodes: SimulationNode[];
}) {
  const reactFlow = useReactFlow<SimulationNode, SimulationEdge>();
  const transform = useStore((flowState) => flowState.transform);
  const canvasWidth = useStore((flowState) => flowState.width);
  const canvasHeight = useStore((flowState) => flowState.height);
  const horizontalRef = useRef<HTMLDivElement>(null);
  const verticalRef = useRef<HTMLDivElement>(null);
  const [scrollbarViewport, setScrollbarViewport] = useState({
    horizontalWidth: 0,
    verticalHeight: 0,
  });
  const [worldBounds, setWorldBounds] = useState<FlowViewportWorldBounds>(
    defaultFlowViewportWorldBounds,
  );
  const nodeBoundsRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
  const nodeBounds = useMemo(() => {
    if (deferBounds) {
      return nodeBoundsRef.current;
    }
    return nodes.length > 0
      ? reactFlow.getNodesBounds(nodes)
      : { x: 0, y: 0, width: 0, height: 0 };
  }, [deferBounds, nodes, reactFlow]);
  useLayoutEffect(() => {
    if (!deferBounds) {
      nodeBoundsRef.current = nodeBounds;
    }
  }, [deferBounds, nodeBounds]);
  const zoom = Math.max(transform[2], 0.01);
  const visibleLeft = -transform[0] / zoom;
  const visibleTop = -transform[1] / zoom;
  const visibleWidth = canvasWidth / zoom;
  const visibleHeight = canvasHeight / zoom;

  useLayoutEffect(() => {
    if (nodes.length === 0) {
      setWorldBounds(defaultFlowViewportWorldBounds());
      return;
    }
    setWorldBounds((current) => {
      const next = {
        minX: Math.min(
          current.minX,
          nodeBounds.x - FLOW_VIEWPORT_NODE_MARGIN,
          visibleLeft,
        ),
        minY: Math.min(
          current.minY,
          nodeBounds.y - FLOW_VIEWPORT_NODE_MARGIN,
          visibleTop,
        ),
        maxX: Math.max(
          current.maxX,
          nodeBounds.x + nodeBounds.width + FLOW_VIEWPORT_NODE_MARGIN,
          visibleLeft + visibleWidth,
        ),
        maxY: Math.max(
          current.maxY,
          nodeBounds.y + nodeBounds.height + FLOW_VIEWPORT_NODE_MARGIN,
          visibleTop + visibleHeight,
        ),
      };
      return next.minX === current.minX &&
        next.minY === current.minY &&
        next.maxX === current.maxX &&
        next.maxY === current.maxY
        ? current
        : next;
    });
  }, [
    nodeBounds.height,
    nodeBounds.width,
    nodeBounds.x,
    nodeBounds.y,
    nodes.length,
    visibleHeight,
    visibleLeft,
    visibleTop,
    visibleWidth,
  ]);

  useLayoutEffect(() => {
    const updateScrollbarViewport = () => {
      const next = {
        horizontalWidth: horizontalRef.current?.clientWidth ?? 0,
        verticalHeight: verticalRef.current?.clientHeight ?? 0,
      };
      setScrollbarViewport((current) =>
        current.horizontalWidth === next.horizontalWidth &&
        current.verticalHeight === next.verticalHeight
          ? current
          : next,
      );
    };
    updateScrollbarViewport();
    const resizeObserver = new ResizeObserver(updateScrollbarViewport);
    if (horizontalRef.current) {
      resizeObserver.observe(horizontalRef.current);
    }
    if (verticalRef.current) {
      resizeObserver.observe(verticalRef.current);
    }
    return () => resizeObserver.disconnect();
  }, []);

  const horizontalScrollRange = Math.min(
    FLOW_VIEWPORT_SCROLLBAR_CONTENT_LIMIT_PX,
    Math.max(0, (worldBounds.maxX - worldBounds.minX) * zoom - canvasWidth),
  );
  const verticalScrollRange = Math.min(
    FLOW_VIEWPORT_SCROLLBAR_CONTENT_LIMIT_PX,
    Math.max(0, (worldBounds.maxY - worldBounds.minY) * zoom - canvasHeight),
  );
  const horizontalContentWidth = Math.max(
    scrollbarViewport.horizontalWidth,
    horizontalScrollRange + scrollbarViewport.horizontalWidth,
  );
  const verticalContentHeight = Math.max(
    scrollbarViewport.verticalHeight,
    verticalScrollRange + scrollbarViewport.verticalHeight,
  );
  const horizontalWorldRange = Math.max(
    0,
    worldBounds.maxX - worldBounds.minX - visibleWidth,
  );
  const verticalWorldRange = Math.max(
    0,
    worldBounds.maxY - worldBounds.minY - visibleHeight,
  );
  const expectedScrollLeft = Math.min(
    horizontalScrollRange,
    horizontalWorldRange > 0
      ? ((visibleLeft - worldBounds.minX) / horizontalWorldRange) *
          horizontalScrollRange
      : 0,
  );
  const expectedScrollTop = Math.min(
    verticalScrollRange,
    verticalWorldRange > 0
      ? ((visibleTop - worldBounds.minY) / verticalWorldRange) *
          verticalScrollRange
      : 0,
  );

  useLayoutEffect(() => {
    const horizontal = horizontalRef.current;
    const vertical = verticalRef.current;
    if (horizontal && Math.abs(horizontal.scrollLeft - expectedScrollLeft) > 0.5) {
      horizontal.scrollLeft = expectedScrollLeft;
    }
    if (vertical && Math.abs(vertical.scrollTop - expectedScrollTop) > 0.5) {
      vertical.scrollTop = expectedScrollTop;
    }
  }, [expectedScrollLeft, expectedScrollTop, horizontalContentWidth, verticalContentHeight]);

  const setHorizontalViewportFromScroll = (nextScrollLeft: number) => {
    const nextVisibleLeft =
      worldBounds.minX +
      (horizontalScrollRange > 0
        ? (nextScrollLeft / horizontalScrollRange) * horizontalWorldRange
        : 0);
    void reactFlow.setViewport({
      x: -nextVisibleLeft * zoom,
      y: transform[1],
      zoom,
    });
  };
  const setVerticalViewportFromScroll = (nextScrollTop: number) => {
    const nextVisibleTop =
      worldBounds.minY +
      (verticalScrollRange > 0
        ? (nextScrollTop / verticalScrollRange) * verticalWorldRange
        : 0);
    void reactFlow.setViewport({
      x: transform[0],
      y: -nextVisibleTop * zoom,
      zoom,
    });
  };

  return (
    <div aria-label="建模画布滚动条" className="flow-viewport-scrollbars">
      <div
        aria-label="水平滚动画布"
        aria-orientation="horizontal"
        aria-valuemax={Math.round(horizontalScrollRange)}
        aria-valuemin={0}
        aria-valuenow={Math.round(expectedScrollLeft)}
        className="flow-viewport-scrollbar flow-viewport-scrollbar-horizontal nowheel nopan"
        onScroll={(event) => {
          const nextScrollLeft = event.currentTarget.scrollLeft;
          if (Math.abs(nextScrollLeft - expectedScrollLeft) <= 0.5) {
            return;
          }
          setHorizontalViewportFromScroll(nextScrollLeft);
        }}
        onKeyDown={(event) => {
          const horizontal = event.currentTarget;
          const lineStep = 40;
          const pageStep = Math.max(40, horizontal.clientWidth * 0.8);
          const nextScrollLeft =
            event.key === "ArrowLeft"
              ? horizontal.scrollLeft - lineStep
              : event.key === "ArrowRight"
                ? horizontal.scrollLeft + lineStep
                : event.key === "PageUp"
                  ? horizontal.scrollLeft - pageStep
                  : event.key === "PageDown"
                    ? horizontal.scrollLeft + pageStep
                    : event.key === "Home"
                      ? 0
                      : event.key === "End"
                        ? horizontalScrollRange
                        : null;
          if (nextScrollLeft === null) {
            return;
          }
          event.preventDefault();
          horizontal.scrollLeft = Math.max(
            0,
            Math.min(horizontalScrollRange, nextScrollLeft),
          );
        }}
        ref={horizontalRef}
        role="scrollbar"
        tabIndex={0}
      >
        <span
          aria-hidden="true"
          className="flow-viewport-scrollbar-spacer"
          style={{ width: horizontalContentWidth }}
        />
      </div>
      <div
        aria-label="垂直滚动画布"
        aria-orientation="vertical"
        aria-valuemax={Math.round(verticalScrollRange)}
        aria-valuemin={0}
        aria-valuenow={Math.round(expectedScrollTop)}
        className="flow-viewport-scrollbar flow-viewport-scrollbar-vertical nowheel nopan"
        onScroll={(event) => {
          const nextScrollTop = event.currentTarget.scrollTop;
          if (Math.abs(nextScrollTop - expectedScrollTop) <= 0.5) {
            return;
          }
          setVerticalViewportFromScroll(nextScrollTop);
        }}
        onKeyDown={(event) => {
          const vertical = event.currentTarget;
          const lineStep = 40;
          const pageStep = Math.max(40, vertical.clientHeight * 0.8);
          const nextScrollTop =
            event.key === "ArrowUp"
              ? vertical.scrollTop - lineStep
              : event.key === "ArrowDown"
                ? vertical.scrollTop + lineStep
                : event.key === "PageUp"
                  ? vertical.scrollTop - pageStep
                  : event.key === "PageDown"
                    ? vertical.scrollTop + pageStep
                    : event.key === "Home"
                      ? 0
                      : event.key === "End"
                        ? verticalScrollRange
                        : null;
          if (nextScrollTop === null) {
            return;
          }
          event.preventDefault();
          vertical.scrollTop = Math.max(
            0,
            Math.min(verticalScrollRange, nextScrollTop),
          );
        }}
        ref={verticalRef}
        role="scrollbar"
        tabIndex={0}
      >
        <span
          aria-hidden="true"
          className="flow-viewport-scrollbar-spacer"
          style={{ height: verticalContentHeight }}
        />
      </div>
      <span aria-hidden="true" className="flow-viewport-scrollbar-corner" />
    </div>
  );
}

function connectionDraftTargetPosition(
  source: EdgeRoutePoint,
  target: EdgeRoutePoint,
) {
  const deltaX = target.x - source.x;
  const deltaY = target.y - source.y;
  if (Math.abs(deltaX) >= Math.abs(deltaY)) {
    return deltaX >= 0 ? Position.Left : Position.Right;
  }
  return deltaY >= 0 ? Position.Top : Position.Bottom;
}

function ConnectionDraftOverlay({
  activeConnection,
  draft,
  nodes,
}: {
  activeConnection: ActivePortConnection | null;
  draft: PortConnectionDraft | null;
  nodes: SimulationNode[];
}) {
  if (!activeConnection || activeConnection.mode !== "click" || !draft?.pointer) {
    return null;
  }
  const source = nodes.find((node) => node.id === activeConnection.nodeId);
  const sourcePlacement = source
    ? nodePortFlowPlacement(source, activeConnection.portName)
    : undefined;
  if (!sourcePlacement) {
    return null;
  }
  const sourcePoint = {
    x: sourcePlacement.flowX,
    y: sourcePlacement.flowY,
  };
  const routePoints = buildOrthogonalRoutePoints(
    sourcePoint,
    draft.pointer,
    sourcePlacement.position,
    connectionDraftTargetPosition(sourcePoint, draft.pointer),
    draft.waypoints,
  );
  const points = [sourcePoint, ...routePoints, draft.pointer];
  return (
    <ViewportPortal>
      <svg
        aria-hidden="true"
        className="manual-connection-draft"
        height="1"
        overflow="visible"
        width="1"
      >
        <path
          className="react-flow__connection-path"
          d={orthogonalPolylinePath(points)}
          data-waypoint-count={draft.waypoints.length}
        />
        {draft.waypoints.map((waypoint, index) => (
          <circle
            className="manual-connection-waypoint"
            cx={waypoint.x}
            cy={waypoint.y}
            key={`${waypoint.x}:${waypoint.y}:${index}`}
            r={3.5}
          />
        ))}
      </svg>
    </ViewportPortal>
  );
}

function PortGeometryRefresh({
  nodeIds,
  requestKey,
}: {
  nodeIds: string[];
  requestKey: number;
}) {
  const zoom = useStore((state) => state.transform[2]);
  const updateNodeInternals = useUpdateNodeInternals();
  const lastRefreshKeyRef = useRef("");

  useLayoutEffect(() => {
    const refreshKey = `${requestKey}:${zoom}:${nodeIds.join("\u001f")}`;
    if (lastRefreshKeyRef.current === refreshKey || nodeIds.length === 0) {
      return;
    }
    lastRefreshKeyRef.current = refreshKey;
    const frame = window.requestAnimationFrame(() => {
      updateNodeInternals(nodeIds);
    });
    return () => window.cancelAnimationFrame(frame);
  }, [nodeIds, requestKey, updateNodeInternals, zoom]);

  return null;
}

function isVisibleComponentLibrary(library: ComponentLibraryDefinition) {
  return library.id !== "experimental";
}

function FlowWorkbench() {
  const [componentLibraries, setComponentLibraries] =
    useState<ComponentLibraryDefinition[]>([]);
  const [componentCatalogStatus, setComponentCatalogStatus] =
    useState<ComponentCatalogStatus>("loading");
  const [componentCatalogMessage, setComponentCatalogMessage] =
    useState("正在加载后端组件目录");
  const componentDefinitions = useMemo(
    () => componentLibraries.flatMap((library) => library.components),
    [componentLibraries],
  );
  const defaultParametersByComponentType = useMemo(
    () =>
      new Map(
        componentDefinitions.map((definition) => [
          definition.type,
          defaultParameters(definition),
        ] as const),
      ),
    [componentDefinitions],
  );
  const visibleComponentLibraries = useMemo(
    () => componentLibraries.filter(isVisibleComponentLibrary),
    [componentLibraries],
  );
  const [nodes, setNodes] = useNodesState<SimulationNode>([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState<SimulationEdge>([]);
  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
  const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
  const [componentParameterDraftErrors, setComponentParameterDraftErrors] =
    useState<Record<string, string>>({});
  const [activePortConnection, setActivePortConnection] =
    useState<ActivePortConnection | null>(null);
  const [portConnectionDraft, setPortConnectionDraft] =
    useState<PortConnectionDraft | null>(null);
  const [contactSnapCandidate, setContactSnapCandidate] =
    useState<ContactSnapCandidate | null>(null);
  const [nodeDragActive, setNodeDragActive] = useState(false);
  const [projectName, setProjectName] = useState("demo-system");
  const [simulationConfig, setSimulationConfig] = useState<SimulationConfig>(
    defaultSimulationConfig,
  );
  const [resultSnapshot, setResultSnapshot] =
    useState<SimulationResultsSnapshot | null>(loadStoredResultSnapshot);
  const [hasUnreadResults, setHasUnreadResults] = useState(false);
  const [activeView, setActiveView] = useState<WorkspaceView>(
    workspaceViewFromLocation,
  );
  const [modelingFitRequest, setModelingFitRequest] = useState(1);
  const [busy, setBusy] = useState(false);
  const [consoleEntries, setConsoleEntries] = useState<SimulationConsoleEntry[]>([]);
  const [consoleMode, setConsoleMode] = useState<SimulationConsoleMode>("minimized");
  const [pendingPaste, setPendingPaste] = useState<PendingPaste | null>(null);
  const [simulationStopPending, setSimulationStopPending] = useState(false);
  const [simulationProgress, setSimulationProgress] = useState<SimulationProgressState>({
    state: "idle",
    percent: 0,
    message: "等待仿真任务",
    startTime: defaultSimulationConfig.t_start,
    simulatedTime: defaultSimulationConfig.t_start,
    totalTime: defaultSimulationConfig.t_stop,
  });
  const [snapEnabled, setSnapEnabled] = useState(true);
  const [gridVisibility, setGridVisibility] = useState<CanvasGridVisibility>(
    loadCanvasGridVisibility,
  );
  const [collapsedPaletteSections, setCollapsedPaletteSections] =
    useState<Set<string>>(loadPaletteCollapsedSections);
  const [paletteIconPreview, setPaletteIconPreview] =
    useState<PaletteIconPreview | null>(null);
  const [parameterColumnLayout, setParameterColumnLayout] =
    useState<ParameterColumnLayout>(loadParameterColumnLayout);
  const [modelingPaneLayout, setModelingPaneLayout] =
    useState<ModelingPaneLayout>(loadModelingPaneLayout);
  const [activeModelingPaneResize, setActiveModelingPaneResize] =
    useState<ModelingPaneResizeKind | null>(null);
  const [modelingWorkbenchHeight, setModelingWorkbenchHeight] = useState(0);
  const effectiveComponentParametersHeight = Number.isFinite(
    modelingPaneLayout.componentParametersHeight,
  )
    ? modelingPaneLayout.componentParametersHeight
    : defaultModelingPaneLayout().componentParametersHeight;
  const [validationIssues, setValidationIssues] = useState<ValidationIssue[]>([]);
  const [validatedSignature, setValidatedSignature] = useState("");
  const projectChangeSignatureRef = useRef("");
  const validationSignatureRef = useRef("");
  const [saveState, setSaveState] = useState("正在检查本地草稿...");
  const [autosaveReady, setAutosaveReady] = useState(false);
  const [recoveryProject, setRecoveryProject] = useState<ReactFlowProjectPayload | null>(null);
  const [historyAvailability, setHistoryAvailability] = useState({
    canUndo: false,
    canRedo: false,
  });
  const reactFlow = useReactFlow<SimulationNode, SimulationEdge>();
  const reactFlowStore = useStoreApi<SimulationNode, SimulationEdge>();
  const multipleNodesSelected = useMemo(() => {
    let selectedCount = 0;
    for (const node of nodes) {
      if (node.selected && (selectedCount += 1) > 1) {
        return true;
      }
    }
    return false;
  }, [nodes]);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const workbenchRef = useRef<HTMLElement>(null);
  const modelingPaneResizeRef = useRef<ModelingPaneResizeState | null>(null);
  const nodesRef = useRef(nodes);
  const edgesRef = useRef(edges);
  const projectNameRef = useRef(projectName);
  const simulationConfigRef = useRef(simulationConfig);
  const historyRef = useRef<EditorSnapshot[]>([]);
  const futureRef = useRef<EditorSnapshot[]>([]);
  const clipboardRef = useRef<EditorClipboard | null>(null);
  const pendingPasteRef = useRef<PendingPaste | null>(null);
  const portConnectionDraftRef = useRef<PortConnectionDraft | null>(null);
  const modelingViewportRef = useRef<Viewport>({ x: 0, y: 0, zoom: 1 });
  const lastFlowPointerRef = useRef<{ x: number; y: number } | null>(null);
  const pendingPasteMiddlePointerRef = useRef<PendingPasteMiddlePointer | null>(
    null,
  );
  const renderedNodeCacheRef = useRef<Map<string, RenderedNodeCacheEntry>>(
    new Map(),
  );
  const nodePortGeometryCacheRef = useRef<Map<string, CachedNodePortGeometry>>(
    new Map(),
  );
  const renderedEdgeCacheRef = useRef<Map<string, RenderedEdgeCacheEntry>>(
    new Map(),
  );
  const renderedEdgesArrayRef = useRef<SimulationEdge[]>([]);
  const renderedEdgesSourceRef = useRef<SimulationEdge[] | null>(null);
  const renderedEdgesSelectedIdRef = useRef<string | null>(null);
  const amesimGasMediumOptionsCacheRef = useRef<{
    definitions: ComponentDefinition[];
    nodeDataById: Map<string, SimulationNode["data"]>;
    options: AmesimGasMediumOption[];
  } | null>(null);
  const consoleEntryIdRef = useRef(0);
  const activeSimulationIdRef = useRef<string | null>(null);
  const paletteIconPreviewTimerRef = useRef<number | null>(null);
  const suppressCancelledConnectionRef = useRef(false);
  const contactDragSessionRef = useRef<ContactDragSession | null>(null);
  const tightSelectionRectRef = useRef<CanvasSelectionRect | null>(null);
  const tightSelectionFrameRef = useRef<number | null>(null);
  const tightSelectionNodeIdsRef = useRef<Set<string>>(new Set());
  const tightSelectionPointerIdRef = useRef<number | null>(null);
  const tightSelectionPointerTargetRef = useRef<Element | null>(null);

  nodesRef.current = nodes;
  edgesRef.current = edges;
  projectNameRef.current = projectName;
  simulationConfigRef.current = simulationConfig;
  pendingPasteRef.current = pendingPaste;
  portConnectionDraftRef.current = portConnectionDraft;

  const clearContactSnapCandidate = useCallback(() => {
    setContactSnapCandidate(null);
  }, []);

  const cancelPortConnection = useCallback(() => {
    const flowState = reactFlowStore.getState();
    if (flowState.connection.inProgress) {
      suppressCancelledConnectionRef.current = true;
    }
    flowState.cancelConnection();
    // React Flow 12 的拖拽取消不会同时清理点击连线起点。
    reactFlowStore.setState({ connectionClickStartHandle: null });
    portConnectionDraftRef.current = null;
    setPortConnectionDraft(null);
    setActivePortConnection(null);
    setNodeDragActive(false);
    contactDragSessionRef.current = null;
    clearContactSnapCandidate();
  }, [clearContactSnapCandidate, reactFlowStore]);

  const applyTightSelectionRect = useCallback(
    (selectionRect: CanvasSelectionRect) => {
      const flowState = reactFlowStore.getState();
      const flowRoot = flowState.domNode;
      if (!flowRoot) {
        return;
      }

      const selectedNodeIds = new Set<string>();
      if (selectionRect.width > 0 && selectionRect.height > 0) {
        const flowBounds = flowRoot.getBoundingClientRect();
        const selectionBounds: ScreenRectangle = {
          left: flowBounds.left + selectionRect.x,
          top: flowBounds.top + selectionRect.y,
          right: flowBounds.left + selectionRect.x + selectionRect.width,
          bottom: flowBounds.top + selectionRect.y + selectionRect.height,
        };
        const nodeElements = new Map(
          Array.from(
            flowRoot.querySelectorAll<HTMLElement>(
              ".react-flow__node[data-id]",
            ),
          ).flatMap((element) =>
            element.dataset.id ? [[element.dataset.id, element] as const] : [],
          ),
        );

        for (const internalNode of flowState.nodeLookup.values()) {
          if (internalNode.hidden || internalNode.selectable === false) {
            continue;
          }
          const nodeElement = nodeElements.get(internalNode.id);
          if (!nodeElement) {
            continue;
          }
          const selectionTarget =
            nodeElement.querySelector<HTMLElement>(
              '[data-symbol-envelope="true"]',
            ) ?? nodeElement;
          const targetBounds = selectionTarget.getBoundingClientRect();
          if (
            targetBounds.width > 0 &&
            targetBounds.height > 0 &&
            screenRectanglesOverlap(selectionBounds, targetBounds)
          ) {
            selectedNodeIds.add(internalNode.id);
          }
        }
      }

      tightSelectionNodeIdsRef.current = selectedNodeIds;
      // React Flow 内部状态和受控 nodes 的更新时序不同；两侧任一不一致都
      // 强制写回，避免选中框、工具栏及接口编号各自看到不同的选择集合。
      const controlledSelectionNeedsCorrection = nodesRef.current.some(
        (node) => Boolean(node.selected) !== selectedNodeIds.has(node.id),
      );
      const internalSelectionNeedsCorrection = Array.from(
        flowState.nodeLookup.values(),
      ).some(
        (node) => Boolean(node.selected) !== selectedNodeIds.has(node.id),
      );
      if (internalSelectionNeedsCorrection) {
        // React Flow 的框选会在 onNodesChange 之前直接修改 nodeLookup；同步
        // 覆盖该值，避免透明节点外框造成的错误虚线框先进入浏览器绘制。
        for (const internalNode of flowState.nodeLookup.values()) {
          internalNode.selected = selectedNodeIds.has(internalNode.id);
        }
      }
      const nodesNeedCorrection =
        controlledSelectionNeedsCorrection || internalSelectionNeedsCorrection;
      if (nodesNeedCorrection) {
        setNodes((currentNodes) => {
          let changed = false;
          const nextNodes = currentNodes.map((node) => {
            const selected = selectedNodeIds.has(node.id);
            const internalSelected = Boolean(
              flowState.nodeLookup.get(node.id)?.selected,
            );
            if (
              Boolean(node.selected) === selected &&
              internalSelected === selected
            ) {
              return node;
            }
            changed = true;
            return { ...node, selected };
          });
          const resolvedNodes = changed ? nextNodes : currentNodes;
          nodesRef.current = resolvedNodes;
          return resolvedNodes;
        });
      }
      const internallySelectedEdgeIds = new Set(
        Array.from(flowState.edgeLookup.values())
          .filter((edge) => Boolean(edge.selected))
          .map((edge) => edge.id),
      );
      const edgesNeedCorrection =
        internallySelectedEdgeIds.size > 0 ||
        edgesRef.current.some((edge) => Boolean(edge.selected));
      if (edgesNeedCorrection) {
        setEdges((currentEdges) => {
          let changed = false;
          const nextEdges = currentEdges.map((edge) => {
            // 批量框选只选择组件，不额外高亮其连接线。
            if (!edge.selected && !internallySelectedEdgeIds.has(edge.id)) {
              return edge;
            }
            changed = true;
            return { ...edge, selected: false };
          });
          const resolvedEdges = changed ? nextEdges : currentEdges;
          edgesRef.current = resolvedEdges;
          return resolvedEdges;
        });
      }

      setSelectedNodeId(
        selectedNodeIds.size === 1
          ? (selectedNodeIds.values().next().value ?? null)
          : null,
      );
      setSelectedEdgeId(null);
    },
    [reactFlowStore, setEdges, setNodes],
  );

  const flushTightSelection = useCallback(() => {
    if (tightSelectionFrameRef.current !== null) {
      window.cancelAnimationFrame(tightSelectionFrameRef.current);
      tightSelectionFrameRef.current = null;
    }
    const selectionRect = tightSelectionRectRef.current;
    if (selectionRect) {
      applyTightSelectionRect(selectionRect);
    }
  }, [applyTightSelectionRect]);

  const finishTightSelection = useCallback(() => {
    flushTightSelection();
    const hasSelectedNodes = tightSelectionNodeIdsRef.current.size > 0;
    tightSelectionPointerIdRef.current = null;
    tightSelectionPointerTargetRef.current = null;
    // React Flow 会在 onSelectionEnd 返回后再次写入原始节点框结果，因此延后一拍校正内部状态。
    window.queueMicrotask(() => {
      const completedRect = tightSelectionRectRef.current;
      if (completedRect) {
        applyTightSelectionRect(completedRect);
      }
      const flowState = reactFlowStore.getState();
      if (
        !flowState.userSelectionActive &&
        flowState.nodesSelectionActive !== hasSelectedNodes
      ) {
        reactFlowStore.setState({ nodesSelectionActive: hasSelectedNodes });
      }
      tightSelectionRectRef.current = null;
    });
  }, [applyTightSelectionRect, flushTightSelection, reactFlowStore]);

  const cancelTightSelection = useCallback(() => {
    const flowState = reactFlowStore.getState();
    if (!flowState.userSelectionActive && !flowState.userSelectionRect) {
      return;
    }
    flushTightSelection();
    const hasSelectedNodes = tightSelectionRectRef.current
      ? tightSelectionNodeIdsRef.current.size > 0
      : nodesRef.current.some((node) => Boolean(node.selected));
    reactFlowStore.setState({
      userSelectionActive: false,
      userSelectionRect: null,
      nodesSelectionActive: hasSelectedNodes,
    });
    tightSelectionRectRef.current = null;
    tightSelectionPointerIdRef.current = null;
    tightSelectionPointerTargetRef.current = null;
  }, [flushTightSelection, reactFlowStore]);

  const handleTightSelectionPointerCancel = useCallback(() => {
    const flowState = reactFlowStore.getState();
    if (flowState.userSelectionActive) {
      // React Flow 12.11 的 pointercancel 不会重置其私有 selectionInProgress；
      // 在状态仍处于框选模式时补发一次被内部 capture 吞掉的 click，只用于清理该标记。
      flowState.domNode
        ?.querySelector<HTMLElement>(".react-flow__pane")
        ?.click();
    }
    cancelTightSelection();
  }, [cancelTightSelection, reactFlowStore]);

  const rememberFlowPointer = useCallback(
    (event: ReactPointerEvent<HTMLElement>) => {
      if (event.button === 0 && event.isPrimary) {
        tightSelectionPointerIdRef.current = event.pointerId;
        tightSelectionPointerTargetRef.current =
          event.target instanceof Element ? event.target : null;
      }
    },
    [],
  );

  const cancelTightSelectionOnWindowBlur = useCallback(() => {
    const flowState = reactFlowStore.getState();
    if (!flowState.userSelectionActive && !flowState.userSelectionRect) {
      return;
    }
    const pointerId = tightSelectionPointerIdRef.current;
    const pointerTarget = tightSelectionPointerTargetRef.current;
    if (
      pointerTarget &&
      pointerId !== null &&
      pointerTarget.hasPointerCapture(pointerId)
    ) {
      try {
        // React Flow 会在实际 pointer target 上建立捕获；向同一元素发取消事件，
        // 事件冒泡到 pane 后可停止其私有自动平移循环。
        pointerTarget.dispatchEvent(
          new PointerEvent("pointercancel", {
            bubbles: true,
            isPrimary: true,
            pointerId,
            pointerType: "mouse",
          }),
        );
      } finally {
        const currentState = reactFlowStore.getState();
        if (currentState.userSelectionActive || currentState.userSelectionRect) {
          cancelTightSelection();
        }
      }
      return;
    }
    cancelTightSelection();
  }, [cancelTightSelection, reactFlowStore]);

  useEffect(() => {
    const unsubscribe = reactFlowStore.subscribe((flowState, previousState) => {
      const selectionRect = flowState.userSelectionRect;
      if (selectionRect === previousState.userSelectionRect) {
        return;
      }
      if (
        selectionRect &&
        !flowState.userSelectionActive &&
        selectionRect.width === 0 &&
        selectionRect.height === 0
      ) {
        if (tightSelectionFrameRef.current !== null) {
          window.cancelAnimationFrame(tightSelectionFrameRef.current);
          tightSelectionFrameRef.current = null;
        }
        tightSelectionRectRef.current = null;
        tightSelectionNodeIdsRef.current = new Set(
          nodesRef.current
            .filter((node) => Boolean(node.selected))
            .map((node) => node.id),
        );
        return;
      }
      if (
        !selectionRect ||
        !flowState.userSelectionActive
      ) {
        return;
      }

      tightSelectionRectRef.current = {
        x: selectionRect.x,
        y: selectionRect.y,
        width: selectionRect.width,
        height: selectionRect.height,
      };
      // React Flow 会先按整个透明节点外框写入选择集，再发布当前框选矩形。
      // 必须在同一事件周期按实际图标包络覆盖，避免误选状态先绘制一帧。
      applyTightSelectionRect(tightSelectionRectRef.current);
      // 自动平移会先更新视口，再刷新 DOM transform；下一帧按最新矩形
      // 复核一次，确保屏幕坐标包络与移动后的视图保持一致。
      if (tightSelectionFrameRef.current === null) {
        tightSelectionFrameRef.current = window.requestAnimationFrame(() => {
          tightSelectionFrameRef.current = null;
          const pendingRect = tightSelectionRectRef.current;
          if (pendingRect) {
            applyTightSelectionRect(pendingRect);
          }
        });
      }
    });

    return () => {
      unsubscribe();
      if (tightSelectionFrameRef.current !== null) {
        window.cancelAnimationFrame(tightSelectionFrameRef.current);
        tightSelectionFrameRef.current = null;
      }
    };
  }, [applyTightSelectionRect, reactFlowStore]);

  useEffect(() => {
    window.addEventListener("blur", cancelTightSelectionOnWindowBlur);
    return () =>
      window.removeEventListener("blur", cancelTightSelectionOnWindowBlur);
  }, [cancelTightSelectionOnWindowBlur]);

  const dismissPaletteIconPreview = useCallback(() => {
    if (paletteIconPreviewTimerRef.current !== null) {
      window.clearTimeout(paletteIconPreviewTimerRef.current);
      paletteIconPreviewTimerRef.current = null;
    }
    setPaletteIconPreview(null);
  }, []);

  const schedulePaletteIconPreview = useCallback(
    (target: HTMLElement, definition: ComponentDefinition) => {
      dismissPaletteIconPreview();
      const bounds = target.getBoundingClientRect();
      const estimatedPreviewWidth = 196;
      const estimatedPreviewHeight = 112;
      const left = Math.max(
        8,
        Math.min(bounds.right + 12, window.innerWidth - estimatedPreviewWidth - 8),
      );
      const top = Math.max(
        8,
        Math.min(bounds.top, window.innerHeight - estimatedPreviewHeight - 8),
      );
      paletteIconPreviewTimerRef.current = window.setTimeout(() => {
        paletteIconPreviewTimerRef.current = null;
        setPaletteIconPreview({ definition, left, top });
      }, PALETTE_ICON_PREVIEW_DELAY_MS);
    },
    [dismissPaletteIconPreview],
  );

  const togglePaletteSection = useCallback(
    (key: string) => {
      dismissPaletteIconPreview();
      setCollapsedPaletteSections((current) => {
        const next = new Set(current);
        if (next.has(key)) {
          next.delete(key);
        } else {
          next.add(key);
        }
        return next;
      });
    },
    [dismissPaletteIconPreview],
  );

  useEffect(() => {
    const controller = new AbortController();

    const loadComponentCatalog = async () => {
      try {
        const response = await fetch("/api/components/catalog", {
          cache: "no-store",
          signal: controller.signal,
        });
        if (!response.ok) {
          throw new Error(`${response.status} ${response.statusText}`.trim());
        }
        const libraries = normalizeComponentCatalog(await response.json());
        if (controller.signal.aborted) {
          return;
        }
        const visibleLibraries = libraries.filter(isVisibleComponentLibrary);
        if (visibleLibraries.length === 0) {
          throw new Error("后端目录中没有可显示的正式组件库");
        }
        setComponentLibraries(libraries);
        setComponentCatalogStatus("ready");
        setComponentCatalogMessage(`已加载 ${visibleLibraries.length} 个组件库`);
      } catch (error) {
        if (controller.signal.aborted) {
          return;
        }
        setComponentLibraries([]);
        setComponentCatalogStatus("error");
        setComponentCatalogMessage(
          error instanceof ComponentCatalogLibraryError
            ? `加载失败的组件库：${error.libraryName}。详细原因：${error.message}`
            : `正式组件库目录加载失败（当前包括 AMESim 组件库）；目录接口不可用，无法确认是否还有其他组件库受影响。详细原因：${formatError(error)}`,
        );
      }
    };

    void loadComponentCatalog();
    return () => controller.abort();
  }, []);

  useEffect(() => {
    try {
      localStorage.setItem(
        MODELING_PANE_LAYOUT_KEY,
        JSON.stringify(modelingPaneLayout),
      );
    } catch {
      // Resizing remains available when browser storage is unavailable.
    }
  }, [modelingPaneLayout]);

  useEffect(() => {
    try {
      localStorage.setItem(
        CANVAS_GRID_VISIBILITY_KEY,
        JSON.stringify(gridVisibility),
      );
    } catch {
      // Grid controls remain available when browser storage is unavailable.
    }
  }, [gridVisibility]);

  useEffect(() => {
    try {
      localStorage.setItem(
        PALETTE_COLLAPSED_SECTIONS_KEY,
        JSON.stringify([...collapsedPaletteSections]),
      );
    } catch {
      // Section toggles remain available when browser storage is unavailable.
    }
  }, [collapsedPaletteSections]);

  useEffect(() => {
    saveParameterColumnLayout(parameterColumnLayout);
  }, [parameterColumnLayout]);

  useEffect(() => {
    const dismissOnViewportChange = () => dismissPaletteIconPreview();
    window.addEventListener("scroll", dismissOnViewportChange, true);
    window.addEventListener("resize", dismissOnViewportChange);
    return () => {
      window.removeEventListener("scroll", dismissOnViewportChange, true);
      window.removeEventListener("resize", dismissOnViewportChange);
      if (paletteIconPreviewTimerRef.current !== null) {
        window.clearTimeout(paletteIconPreviewTimerRef.current);
        paletteIconPreviewTimerRef.current = null;
      }
    };
  }, [dismissPaletteIconPreview]);

  useLayoutEffect(() => {
    if (activeView !== "modeling") {
      return;
    }
    const workbench = workbenchRef.current;
    if (!workbench || typeof ResizeObserver === "undefined") {
      return;
    }
    const clampToWorkbench = (width: number, height: number) => {
      if (width <= 0 || height <= 0) {
        return;
      }
      setModelingWorkbenchHeight((current) =>
        current === height ? current : height,
      );
      setModelingPaneLayout((current) => {
        const next = clampModelingPaneLayout(current, width, height);
        return next.paletteWidth === current.paletteWidth &&
          next.propertiesWidth === current.propertiesWidth &&
          next.componentParametersHeight === current.componentParametersHeight
          ? current
          : next;
      });
    };
    clampToWorkbench(workbench.clientWidth, workbench.clientHeight);
    const observer = new ResizeObserver(([entry]) => {
      if (entry) {
        clampToWorkbench(entry.contentRect.width, entry.contentRect.height);
      }
    });
    observer.observe(workbench);
    return () => observer.disconnect();
  }, [activeView]);

  const setModelingPaneSize = (
    kind: ModelingPaneResizeKind,
    requestedSize: number,
  ) => {
    const workbenchBounds = workbenchRef.current?.getBoundingClientRect();
    if (!workbenchBounds) {
      return;
    }
    setModelingPaneLayout((current) => {
      if (kind === "component-parameters-height") {
        const maximum = Math.max(
          MIN_COMPONENT_PARAMETERS_HEIGHT,
          workbenchBounds.height -
            PROPERTIES_PANE_SPLITTER_SIZE -
            MIN_SIMULATION_SETTINGS_HEIGHT,
        );
        return {
          ...current,
          componentParametersHeight: Math.min(
            maximum,
            Math.max(MIN_COMPONENT_PARAMETERS_HEIGHT, requestedSize),
          ),
        };
      }
      if (kind === "palette-width") {
        const maximum = Math.max(
          MIN_PALETTE_WIDTH,
          Math.min(
            MAX_PALETTE_WIDTH,
            workbenchBounds.width -
              current.propertiesWidth -
              MIN_MODELING_CANVAS_WIDTH -
              MODELING_PANE_SPLITTER_SIZE * 2,
          ),
        );
        return {
          ...current,
          paletteWidth: Math.min(
            maximum,
            Math.max(MIN_PALETTE_WIDTH, requestedSize),
          ),
        };
      }
      const maximum = Math.max(
        MIN_PROPERTIES_WIDTH,
        Math.min(
          MAX_PROPERTIES_WIDTH,
          workbenchBounds.width -
            current.paletteWidth -
            MIN_MODELING_CANVAS_WIDTH -
            MODELING_PANE_SPLITTER_SIZE * 2,
        ),
      );
      return {
        ...current,
        propertiesWidth: Math.min(
          maximum,
          Math.max(MIN_PROPERTIES_WIDTH, requestedSize),
        ),
      };
    });
  };

  const startModelingPaneResize = (
    event: ReactPointerEvent<HTMLDivElement>,
    kind: ModelingPaneResizeKind,
  ) => {
    event.preventDefault();
    modelingPaneResizeRef.current = {
      kind,
      pointerId: event.pointerId,
      startX: event.clientX,
      startY: event.clientY,
      startSize:
        kind === "palette-width"
          ? modelingPaneLayout.paletteWidth
          : kind === "properties-width"
            ? modelingPaneLayout.propertiesWidth
            : effectiveComponentParametersHeight,
    };
    event.currentTarget.setPointerCapture(event.pointerId);
    setActiveModelingPaneResize(kind);
  };

  const moveModelingPaneResize = (
    event: ReactPointerEvent<HTMLDivElement>,
  ) => {
    const resize = modelingPaneResizeRef.current;
    if (!resize || resize.pointerId !== event.pointerId) {
      return;
    }
    event.preventDefault();
    const delta =
      resize.kind === "component-parameters-height"
        ? event.clientY - resize.startY
        : event.clientX - resize.startX;
    setModelingPaneSize(
      resize.kind,
      resize.startSize +
        (resize.kind === "properties-width" ? -delta : delta),
    );
  };

  const stopModelingPaneResize = (
    event: ReactPointerEvent<HTMLDivElement>,
  ) => {
    if (modelingPaneResizeRef.current?.pointerId !== event.pointerId) {
      return;
    }
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
    modelingPaneResizeRef.current = null;
    setActiveModelingPaneResize(null);
  };

  const resizeModelingPaneWithKeyboard = (
    event: ReactKeyboardEvent<HTMLDivElement>,
    kind: ModelingPaneResizeKind,
  ) => {
    const decreaseKey =
      kind === "component-parameters-height" ? "ArrowUp" : "ArrowLeft";
    const increaseKey =
      kind === "component-parameters-height" ? "ArrowDown" : "ArrowRight";
    if (event.key !== decreaseKey && event.key !== increaseKey) {
      return;
    }
    event.preventDefault();
    const direction = event.key === increaseKey ? 1 : -1;
    const currentSize =
      kind === "palette-width"
        ? modelingPaneLayout.paletteWidth
        : kind === "properties-width"
          ? modelingPaneLayout.propertiesWidth
          : effectiveComponentParametersHeight;
    setModelingPaneSize(
      kind,
      currentSize +
        MODELING_PANE_KEYBOARD_STEP *
          (kind === "properties-width" ? -direction : direction),
    );
  };

  const resetModelingPaneSize = (kind: ModelingPaneResizeKind) => {
    const defaults = defaultModelingPaneLayout();
    setModelingPaneSize(
      kind,
      kind === "palette-width"
        ? defaults.paletteWidth
        : kind === "properties-width"
          ? defaults.propertiesWidth
          : defaults.componentParametersHeight,
    );
  };

  const changeConsoleMode = useCallback((mode: SimulationConsoleMode) => {
    setConsoleMode(mode);
  }, []);

  const appendConsoleEntry = useCallback(
    (
      level: SimulationConsoleLevel,
      message: string,
      format: SimulationConsoleEntry["format"] = "message",
    ) => {
      const entry: SimulationConsoleEntry = {
        id: ++consoleEntryIdRef.current,
        timestamp: new Date().toLocaleTimeString("zh-CN", { hour12: false }),
        level,
        message,
        format,
      };
      setConsoleEntries((currentEntries) => [
        ...currentEntries.slice(-399),
        entry,
      ]);
    },
    [],
  );

  const requestModelingFitView = useCallback(() => {
    setModelingFitRequest((request) => request + 1);
  }, []);

  const changeWorkspaceView = useCallback(
    (view: WorkspaceView) => {
      if (pendingPasteRef.current) {
        appendConsoleEntry("info", "请先放置或按 Esc 取消待放置组件");
        return;
      }
      if (view !== "modeling") {
        cancelPortConnection();
      }
      setActiveView(view);
      if (view === "results") {
        setHasUnreadResults(false);
      }
      const nextHash = view === "results" ? "#/results" : "#/modeling";
      if (window.location.hash !== nextHash) {
        window.history.pushState({ workspaceView: view }, "", nextHash);
      }
    },
    [appendConsoleEntry, cancelPortConnection],
  );

  const loadSimulationResultsSnapshot = useCallback(
    (snapshot: SimulationResultsSnapshot) => {
      setResultSnapshot(snapshot);
      storeResultSnapshot(snapshot);
      appendConsoleEntry(
        "success",
        `已加载结果文件：${snapshot.project.name}`,
      );
      changeWorkspaceView("results");
    },
    [appendConsoleEntry, changeWorkspaceView],
  );

  const nodeTypes = useMemo<NodeTypes>(
    () => ({ simulationComponent: SimulationComponentNode }),
    [],
  );

  const selectedNode = nodes.find((node) => node.id === selectedNodeId) ?? null;
  const selectedNodesForTools = nodes.filter(
    (node) => node.selected || node.id === selectedNodeId,
  );
  const allSelectedNodesMirrored =
    selectedNodesForTools.length > 0 &&
    selectedNodesForTools.every((node) => Boolean(node.data.mirrored));
  const selectedDefinition = selectedNode
    ? componentDefinitions.find((definition) => definition.type === selectedNode.data.componentType)
    : null;
  const amesimGasMediumOptionsComputation = useMemo(() => {
    const cached = amesimGasMediumOptionsCacheRef.current;
    const canReuse =
      cached?.definitions === componentDefinitions &&
      cached.nodeDataById.size === nodes.length &&
      nodes.every((node) => cached.nodeDataById.get(node.id) === node.data);
    if (canReuse) {
      return cached;
    }
    return {
      definitions: componentDefinitions,
      nodeDataById: new Map(
        nodes.map((node) => [node.id, node.data] as const),
      ),
      options: buildAmesimGasMediumOptions(nodes, componentDefinitions),
    };
  }, [componentDefinitions, nodes]);
  useLayoutEffect(() => {
    amesimGasMediumOptionsCacheRef.current = amesimGasMediumOptionsComputation;
  }, [amesimGasMediumOptionsComputation]);
  const amesimGasMediumOptions = amesimGasMediumOptionsComputation.options;

  const buildCurrentProject = useCallback(
    () => buildProjectPayload(projectName, nodes, edges, simulationConfig),
    [edges, nodes, projectName, simulationConfig],
  );

  const projectChangeSignature = useMemo(
    () =>
      nodeDragActive && projectChangeSignatureRef.current
        ? projectChangeSignatureRef.current
        : projectContentSignature(
            projectName,
            nodes,
            edges,
            simulationConfig,
          ),
    [edges, nodeDragActive, nodes, projectName, simulationConfig],
  );
  const validationSignature = useMemo(
    () =>
      nodeDragActive && validationSignatureRef.current
        ? validationSignatureRef.current
        : modelValidationSignature(nodes, edges, simulationConfig),
    [edges, nodeDragActive, nodes, simulationConfig],
  );
  useLayoutEffect(() => {
    if (!nodeDragActive) {
      projectChangeSignatureRef.current = projectChangeSignature;
      validationSignatureRef.current = validationSignature;
    }
  }, [nodeDragActive, projectChangeSignature, validationSignature]);
  const validationCurrent = validatedSignature === validationSignature;
  const duplicateNames = useMemo(() => findDuplicateNames(nodes), [nodes]);
  const validationSeverityByNode = useMemo(
    () => {
      const severities = new Map<string, ValidationIssue["severity"]>();
      if (!validationCurrent) {
        return severities;
      }
      validationIssues.forEach((issue) => {
        if (
          issue.nodeId &&
          (issue.severity === "error" || !severities.has(issue.nodeId))
        ) {
          severities.set(issue.nodeId, issue.severity);
        }
      });
      return severities;
    },
    [validationCurrent, validationIssues],
  );
  const connectedPortKeys = useMemo(() => {
    const keys = new Set<string>();
    edges.forEach((edge) => {
      if (edge.sourceHandle) {
        keys.add(portConnectionKey(edge.source, edge.sourceHandle));
      }
      if (edge.targetHandle) {
        keys.add(portConnectionKey(edge.target, edge.targetHandle));
      }
    });
    return keys;
  }, [edges]);
  const contactSnapOriginPortKeys = useMemo(
    () =>
      new Set(
        contactSnapCandidate?.matches.map((match) =>
          portConnectionKey(
            match.draggedNodeId,
            match.draggedPortName,
          ),
        ) ?? [],
      ),
    [contactSnapCandidate],
  );
  const contactSnapTargetPortKeys = useMemo(
    () =>
      new Set(
        contactSnapCandidate?.matches.map((match) =>
          portConnectionKey(match.targetNodeId, match.targetPortName),
        ) ?? [],
      ),
    [contactSnapCandidate],
  );
  const activeConnectionPort = useMemo(
    () =>
      activePortConnection
        ? findNodePort(
            nodes,
            activePortConnection.nodeId,
            activePortConnection.portName,
          )
        : undefined,
    [activePortConnection, nodes],
  );
  const renderedNodePresentationContext = useMemo(
    () => ({
      activeConnectionPort,
      activePortConnection,
      connectedPortKeys,
      contactSnapOriginPortKeys,
      contactSnapTargetPortKeys,
      multipleNodesSelected,
      validationSeverityByNode,
    }),
    [
      activeConnectionPort,
      activePortConnection,
      connectedPortKeys,
      contactSnapOriginPortKeys,
      contactSnapTargetPortKeys,
      multipleNodesSelected,
      validationSeverityByNode,
    ],
  );
  const renderedNodeComputation = useMemo(
    () => {
      const previousCache = renderedNodeCacheRef.current;
      const nextCache = new Map<string, RenderedNodeCacheEntry>();
      const nextRenderedNodes = nodes.map((node) => {
        const cached = previousCache.get(node.id);
        if (
          cached?.presentationContext === renderedNodePresentationContext &&
          cached.sourceNode.data === node.data &&
          cached.sourceNode.className === node.className
        ) {
          if (cached.sourceNode === node) {
            nextCache.set(node.id, cached);
            return cached.renderedNode;
          }
          const renderedNode: SimulationNode = {
            ...node,
            className: cached.renderedNode.className,
            data: cached.renderedNode.data,
          };
          nextCache.set(node.id, {
            ...cached,
            renderedNode,
            sourceNode: node,
          });
          return renderedNode;
        }
        const hasDedicatedSymbol = hasComponentSymbol(
          node.data.symbol ?? node.data.componentType,
        );
        const portStateSignature: string[] = [];
        const portConnectionStates = Object.fromEntries(
          node.data.ports.map((port) => {
            const key = portConnectionKey(node.id, port.name);
            let state: PortConnectionState = "idle";
            if (connectedPortKeys.has(key)) {
              state = "connected";
            } else if (contactSnapOriginPortKeys.has(key)) {
              state = "origin";
            } else if (contactSnapTargetPortKeys.has(key)) {
              state = "compatible";
            } else if (
              activePortConnection?.nodeId === node.id &&
              activePortConnection.portName === port.name
            ) {
              state = "origin";
            } else if (activePortConnection && activeConnectionPort) {
              state =
                activePortConnection.nodeId !== node.id &&
                arePortsCompatible(activeConnectionPort, port)
                  ? "compatible"
                  : "incompatible";
            }
            portStateSignature.push(`${port.name}:${state}`);
            return [port.name, state];
          }),
        );
        const className = [
          node.className,
          hasDedicatedSymbol ? "component-icon-node" : "",
          validationSeverityByNode.has(node.id)
            ? `validation-${validationSeverityByNode.get(node.id)}`
            : "",
        ]
          .filter(Boolean)
          .join(" ");
        const presentationSignature = [
          className,
          multipleNodesSelected ? "hide-connected-labels" : "show-all-labels",
          ...portStateSignature,
        ].join("|");
        const canReusePresentation =
          cached?.sourceNode.data === node.data &&
          cached.presentationSignature === presentationSignature;
        if (
          cached?.sourceNode === node &&
          canReusePresentation
        ) {
          nextCache.set(
            node.id,
            cached.presentationContext === renderedNodePresentationContext
              ? cached
              : {
                  ...cached,
                  presentationContext: renderedNodePresentationContext,
                },
          );
          return cached.renderedNode;
        }
        const renderedData = canReusePresentation
          ? cached.renderedNode.data
          : {
              ...node.data,
              hideConnectedPortIndexLabels: multipleNodesSelected,
              portConnectionStates,
            };
        const renderedNode: SimulationNode = {
          ...node,
          className: className || undefined,
          data: renderedData,
        };
        nextCache.set(node.id, {
          presentationContext: renderedNodePresentationContext,
          presentationSignature,
          renderedNode,
          sourceNode: node,
        });
        return renderedNode;
      });
      return { cache: nextCache, nodes: nextRenderedNodes };
    },
    [
      activeConnectionPort,
      activePortConnection,
      contactSnapOriginPortKeys,
      contactSnapTargetPortKeys,
      connectedPortKeys,
      multipleNodesSelected,
      nodes,
      renderedNodePresentationContext,
      validationSeverityByNode,
    ],
  );
  useLayoutEffect(() => {
    renderedNodeCacheRef.current = renderedNodeComputation.cache;
  }, [renderedNodeComputation.cache]);
  const renderedNodes = renderedNodeComputation.nodes;

  function handleEdgeRouteEditStart() {
    recordHistory();
  }

  function handleEdgeRoutePointsChange(
    edgeId: string,
    routePoints: EdgeRoutePoint[],
  ) {
    setEdges((currentEdges) => {
      let changed = false;
      const nextEdges = currentEdges.map((edge) => {
        if (edge.id !== edgeId) {
          return edge;
        }
        changed = true;
        return {
          ...edge,
          data: {
            ...edge.data,
            isContactEdge: false,
            routePoints: routePoints.map((point) => ({ ...point })),
          },
        };
      });
      const resolvedEdges = changed ? nextEdges : currentEdges;
      edgesRef.current = resolvedEdges;
      return resolvedEdges;
    });
  }

  const edgeIndexesByNodeId = useMemo(() => {
    const indexes = new Map<string, number[]>();
    edges.forEach((edge, edgeIndex) => {
      const sourceIndexes = indexes.get(edge.source) ?? [];
      sourceIndexes.push(edgeIndex);
      indexes.set(edge.source, sourceIndexes);
      if (edge.target !== edge.source) {
        const targetIndexes = indexes.get(edge.target) ?? [];
        targetIndexes.push(edgeIndex);
        indexes.set(edge.target, targetIndexes);
      }
    });
    return indexes;
  }, [edges]);
  const renderedEdgeComputation = useMemo(
    () => {
      const nodeById = new Map(nodes.map((node) => [node.id, node] as const));
      const previousGeometryCache = nodePortGeometryCacheRef.current;
      const geometryUpdates = new Map<string, CachedNodePortGeometry>();
      const geometryDeletes: string[] = [];
      const geometryMatchesNode = (
        cached: CachedNodePortGeometry | undefined,
        node: SimulationNode,
      ) =>
        Boolean(
          cached &&
            cached.sourceData === node.data &&
            cached.positionX === node.position.x &&
            cached.positionY === node.position.y &&
            cached.rotation === normalizeNodeRotation(node.data.rotation) &&
            cached.mirrored === Boolean(node.data.mirrored),
        );
      const geometryForNode = (node: SimulationNode): CachedNodePortGeometry => {
        const updated = geometryUpdates.get(node.id);
        if (updated) {
          return updated;
        }
        const rotation = normalizeNodeRotation(node.data.rotation);
        const mirrored = Boolean(node.data.mirrored);
        const cached = previousGeometryCache.get(node.id);
        if (cached && geometryMatchesNode(cached, node)) {
          geometryUpdates.set(node.id, cached);
          return cached;
        }
        const geometry: CachedNodePortGeometry = {
          mirrored,
          placementByPort: new Map(
            nodePortFlowPlacements(node).map((placement) => [
              placement.port.name,
              { flowX: placement.flowX, flowY: placement.flowY },
            ] as const),
          ),
          positionX: node.position.x,
          positionY: node.position.y,
          rotation,
          sourceData: node.data,
        };
        geometryUpdates.set(node.id, geometry);
        return geometry;
      };
      const previousEdgeCache = renderedEdgeCacheRef.current;
      const previousRenderedEdges = renderedEdgesArrayRef.current;
      const requiresFullRecompute =
        renderedEdgesSourceRef.current !== edges ||
        previousRenderedEdges.length !== edges.length ||
        renderedEdgesSelectedIdRef.current !== selectedEdgeId;
      const affectedEdgeIndexes = new Set<number>();
      if (requiresFullRecompute) {
        edges.forEach((_edge, edgeIndex) => affectedEdgeIndexes.add(edgeIndex));
      } else {
        nodes.forEach((node) => {
          if (geometryMatchesNode(previousGeometryCache.get(node.id), node)) {
            return;
          }
          for (const edgeIndex of edgeIndexesByNodeId.get(node.id) ?? []) {
            affectedEdgeIndexes.add(edgeIndex);
          }
        });
        for (const nodeId of previousGeometryCache.keys()) {
          if (nodeById.has(nodeId)) {
            continue;
          }
          geometryDeletes.push(nodeId);
          for (const edgeIndex of edgeIndexesByNodeId.get(nodeId) ?? []) {
            affectedEdgeIndexes.add(edgeIndex);
          }
        }
      }

      const edgeCacheUpdates = new Map<string, RenderedEdgeCacheEntry>();
      let nextRenderedEdges = previousRenderedEdges;
      let renderedEdgesChanged = false;
      const updateRenderedEdge = (edgeIndex: number) => {
        const edge = edges[edgeIndex];
        if (!edge) {
          return;
        }
        const selected = edge.selected || edge.id === selectedEdgeId;
        const sourceNode = nodeById.get(edge.source);
        const targetNode = nodeById.get(edge.target);
        const source =
          sourceNode && edge.sourceHandle
            ? geometryForNode(sourceNode).placementByPort.get(edge.sourceHandle)
            : undefined;
        const target =
          targetNode && edge.targetHandle
            ? geometryForNode(targetNode).placementByPort.get(edge.targetHandle)
            : undefined;
        const contact = Boolean(
          source &&
            target &&
            Math.hypot(target.flowX - source.flowX, target.flowY - source.flowY) <=
              CONTACT_GEOMETRY_TOLERANCE,
        );
        const className = [
          edge.className,
          contact ? "editor-edge-contact" : "",
          selected ? "editor-edge-selected" : "",
        ]
          .filter(Boolean)
          .join(" ");
        const presentationSignature = `${className}|${contact ? "contact" : "line"}|${selected ? "selected" : "idle"}`;
        const cached = previousEdgeCache.get(edge.id);
        if (
          cached?.sourceEdge === edge &&
          cached.presentationSignature === presentationSignature
        ) {
          if (requiresFullRecompute) {
            edgeCacheUpdates.set(edge.id, cached);
          }
          if (
            requiresFullRecompute ||
            previousRenderedEdges[edgeIndex] !== cached.renderedEdge
          ) {
            if (!renderedEdgesChanged) {
              nextRenderedEdges = previousRenderedEdges.slice();
              renderedEdgesChanged = true;
            }
            nextRenderedEdges[edgeIndex] = cached.renderedEdge;
          }
          return;
        }
        const renderedEdge: SimulationEdge = {
          ...edge,
          className: className || undefined,
          data: {
            ...edge.data,
            editable: !contact,
            isContactEdge: contact,
            onRouteEditStart: handleEdgeRouteEditStart,
            onRoutePointsChange: handleEdgeRoutePointsChange,
          },
          focusable: contact ? false : edge.focusable,
          selectable: contact ? false : edge.selectable,
          type: CONTACT_AWARE_EDGE_TYPE,
        };
        edgeCacheUpdates.set(edge.id, {
          presentationSignature,
          renderedEdge,
          sourceEdge: edge,
        });
        if (!renderedEdgesChanged) {
          nextRenderedEdges = previousRenderedEdges.slice();
          renderedEdgesChanged = true;
        }
        nextRenderedEdges[edgeIndex] = renderedEdge;
      };

      if (requiresFullRecompute) {
        nextRenderedEdges = new Array<SimulationEdge>(edges.length);
        renderedEdgesChanged = true;
      }
      [...affectedEdgeIndexes]
        .sort((first, second) => first - second)
        .forEach(updateRenderedEdge);
      return {
        edgeCacheUpdates,
        edges: nextRenderedEdges,
        fullRecompute: requiresFullRecompute,
        geometryDeletes,
        geometryUpdates,
        selectedEdgeId,
        sourceEdges: edges,
      };
    },
    [edgeIndexesByNodeId, edges, nodes, selectedEdgeId],
  );
  useLayoutEffect(() => {
    if (renderedEdgeComputation.fullRecompute) {
      nodePortGeometryCacheRef.current = renderedEdgeComputation.geometryUpdates;
      renderedEdgeCacheRef.current = renderedEdgeComputation.edgeCacheUpdates;
    } else {
      renderedEdgeComputation.geometryDeletes.forEach((nodeId) => {
        nodePortGeometryCacheRef.current.delete(nodeId);
      });
      renderedEdgeComputation.geometryUpdates.forEach((geometry, nodeId) => {
        nodePortGeometryCacheRef.current.set(nodeId, geometry);
      });
      renderedEdgeComputation.edgeCacheUpdates.forEach((entry, edgeId) => {
        renderedEdgeCacheRef.current.set(edgeId, entry);
      });
    }
    renderedEdgesArrayRef.current = renderedEdgeComputation.edges;
    renderedEdgesSourceRef.current = renderedEdgeComputation.sourceEdges;
    renderedEdgesSelectedIdRef.current = renderedEdgeComputation.selectedEdgeId;
  }, [renderedEdgeComputation]);
  const renderedEdges = renderedEdgeComputation.edges;
  const crossingJumpsByEdgeId = useMemo(() => {
    const nodeById = new Map(nodes.map((node) => [node.id, node] as const));
    return detectEdgeCrossingJumps(
      renderedEdges.flatMap((edge) => {
        if (edge.data?.isContactEdge === true) {
          return [];
        }
        const sourceNode = nodeById.get(edge.source);
        const targetNode = nodeById.get(edge.target);
        const source = sourceNode
          ? nodePortFlowPlacement(sourceNode, edge.sourceHandle ?? null)
          : undefined;
        const target = targetNode
          ? nodePortFlowPlacement(targetNode, edge.targetHandle ?? null)
          : undefined;
        if (!source || !target) {
          return [];
        }
        return [
          {
            id: edge.id,
            nodeIds: [edge.source, edge.target] as const,
            points: orthogonalEdgePoints({
              routePoints: routePointsForEdge(edge),
              sourcePosition: source.position,
              sourceX: source.flowX,
              sourceY: source.flowY,
              targetPosition: target.position,
              targetX: target.flowX,
              targetY: target.flowY,
            }),
          },
        ];
      }),
    );
  }, [nodes, renderedEdges]);
  const routedRenderedEdges = useMemo(
    () =>
      renderedEdges.map((edge) => {
        const crossingJumps = crossingJumpsByEdgeId.get(edge.id);
        return crossingJumps?.length
          ? {
              ...edge,
              data: {
                ...edge.data,
                crossingJumps,
              },
            }
          : edge;
      }),
    [crossingJumpsByEdgeId, renderedEdges],
  );
  const flowNodes = useMemo(() => {
    if (!pendingPaste) {
      return renderedNodes;
    }
    const pendingConnectedPortKeys = new Set<string>();
    pendingPaste.edges.forEach((edge) => {
      if (edge.sourceHandle) {
        pendingConnectedPortKeys.add(
          portConnectionKey(edge.source, edge.sourceHandle),
        );
      }
      if (edge.targetHandle) {
        pendingConnectedPortKeys.add(
          portConnectionKey(edge.target, edge.targetHandle),
        );
      }
    });
    const previewNodes = pendingPaste.nodes.map((node) => ({
      ...node,
      className: [
        node.className,
        hasComponentSymbol(node.data.symbol ?? node.data.componentType)
          ? "component-icon-node"
          : "",
        "pending-paste-node",
      ]
        .filter(Boolean)
        .join(" "),
      connectable: false,
      deletable: false,
      draggable: false,
      focusable: false,
      selectable: false,
      selected: false,
      data: {
        ...node.data,
        hideConnectedPortIndexLabels: true,
        portConnectionStates: Object.fromEntries(
          node.data.ports.map((port) => {
            const key = portConnectionKey(node.id, port.name);
            return [
              port.name,
              pendingConnectedPortKeys.has(key)
                ? "connected"
                : contactSnapOriginPortKeys.has(key)
                  ? "origin"
                  : "idle",
            ];
          }),
        ) as Record<string, PortConnectionState>,
      },
    }));
    return [
      ...renderedNodes.map((node) => ({ ...node, selected: false })),
      ...previewNodes,
    ];
  }, [contactSnapOriginPortKeys, pendingPaste, renderedNodes]);
  const flowEdges = useMemo(() => {
    if (!pendingPaste) {
      return routedRenderedEdges;
    }
    const previewEdges = pendingPaste.edges.map((edge) => {
      const contact = isContactEdgeGeometry(pendingPaste.nodes, edge);
      return {
        ...edge,
        className: [edge.className, "pending-paste-edge"]
          .filter(Boolean)
          .join(" "),
        deletable: false,
        focusable: false,
        selectable: false,
        selected: false,
        data: {
          ...edge.data,
          isContactEdge: contact,
        },
        type: CONTACT_AWARE_EDGE_TYPE,
      };
    });
    return [
      ...routedRenderedEdges.map((edge) => ({
        ...edge,
        className: edge.className
          ?.split(/\s+/)
          .filter((className) => className !== "editor-edge-selected")
          .join(" "),
        selected: false,
      })),
      ...previewEdges,
    ];
  }, [pendingPaste, routedRenderedEdges]);

  const updateHistoryAvailability = useCallback(() => {
    setHistoryAvailability({
      canUndo: historyRef.current.length > 0,
      canRedo: futureRef.current.length > 0,
    });
  }, []);

  const captureSnapshot = useCallback(
    (): EditorSnapshot => {
      const signature =
        projectChangeSignatureRef.current ||
        projectContentSignature(
          projectNameRef.current,
          nodesRef.current,
          edgesRef.current,
          simulationConfigRef.current,
        );
      return {
        // 编辑器节点和边按不可变方式更新；历史记录保留结构共享，恢复时再深拷贝。
        // 这样拖动开始时无需同步克隆整张大图。
        nodes: nodesRef.current.slice(),
        edges: edgesRef.current.slice(),
        projectName: projectNameRef.current,
        signature,
        simulationConfig: { ...simulationConfigRef.current },
      };
    },
    [],
  );

  const recordHistory = useCallback(() => {
    const snapshot = captureSnapshot();
    const previous = historyRef.current.at(-1);
    if (!previous || snapshotSignature(previous) !== snapshotSignature(snapshot)) {
      historyRef.current.push(snapshot);
      if (historyRef.current.length > HISTORY_LIMIT) {
        historyRef.current.shift();
      }
    }
    futureRef.current = [];
    updateHistoryAvailability();
  }, [captureSnapshot, updateHistoryAvailability]);

  const finishHistoryEdit = useCallback(() => {
    const latest = historyRef.current.at(-1);
    if (latest && snapshotSignature(latest) === snapshotSignature(captureSnapshot())) {
      historyRef.current.pop();
      updateHistoryAvailability();
    }
  }, [captureSnapshot, updateHistoryAvailability]);

  const restoreSnapshot = useCallback(
    (snapshot: EditorSnapshot) => {
      cancelPortConnection();
      const restoredNodes = cloneValue(snapshot.nodes).map((node) => ({
        ...node,
        selected: false,
      }));
      setNodes(restoredNodes);
      setEdges(cloneValue(snapshot.edges).map((edge) => ({ ...edge, selected: false })));
      setProjectName(snapshot.projectName);
      setSimulationConfig({ ...snapshot.simulationConfig });
      setSelectedNodeId(null);
      setSelectedEdgeId(null);
      syncNextNodeNumbers(restoredNodes);
    },
    [cancelPortConnection, setEdges, setNodes],
  );

  const undo = useCallback(() => {
    const previous = historyRef.current.pop();
    if (!previous) {
      return;
    }
    futureRef.current.push(captureSnapshot());
    restoreSnapshot(previous);
    updateHistoryAvailability();
    appendConsoleEntry("info", "已撤销上一步操作");
  }, [appendConsoleEntry, captureSnapshot, restoreSnapshot, updateHistoryAvailability]);

  const redo = useCallback(() => {
    const next = futureRef.current.pop();
    if (!next) {
      return;
    }
    historyRef.current.push(captureSnapshot());
    restoreSnapshot(next);
    updateHistoryAvailability();
    appendConsoleEntry("info", "已重做上一步操作");
  }, [appendConsoleEntry, captureSnapshot, restoreSnapshot, updateHistoryAvailability]);

  const rotateSelection = useCallback(() => {
    const selectedIds = new Set(
      nodesRef.current
        .filter((node) => node.selected || node.id === selectedNodeId)
        .map((node) => node.id),
    );
    if (selectedIds.size === 0) {
      appendConsoleEntry("warning", "请先选择需要旋转的组件");
      return;
    }
    recordHistory();
    const previousNodes = nodesRef.current;
    const rotatedNodes = previousNodes.map((node) =>
      selectedIds.has(node.id) ? rotateNodeClockwise(node) : node,
    );
    const { remainingEdges, removedEdges } = disconnectInvalidatedContactEdges(
      previousNodes,
      rotatedNodes,
      edgesRef.current,
      selectedIds,
    );
    nodesRef.current = rotatedNodes;
    edgesRef.current = remainingEdges;
    setNodes(rotatedNodes);
    if (removedEdges.length > 0) {
      setEdges(remainingEdges);
      appendConsoleEntry(
        "info",
        `旋转使接口分离，已断开 ${removedEdges.length} 个接触连接`,
      );
    }
    appendConsoleEntry("info", `已顺时针旋转 ${selectedIds.size} 个组件`);
  }, [appendConsoleEntry, recordHistory, selectedNodeId, setEdges, setNodes]);

  const mirrorSelection = useCallback(() => {
    const selectedNodes = nodesRef.current.filter(
      (node) => node.selected || node.id === selectedNodeId,
    );
    if (selectedNodes.length === 0) {
      appendConsoleEntry("warning", "请先选择需要镜像的组件");
      return;
    }
    const selectedIds = new Set(selectedNodes.map((node) => node.id));
    const nextMirrored = !selectedNodes.every((node) => Boolean(node.data.mirrored));
    recordHistory();
    const previousNodes = nodesRef.current;
    const mirroredNodes = previousNodes.map((node) =>
      selectedIds.has(node.id)
        ? {
            ...node,
            data: {
              ...node.data,
              mirrored: nextMirrored,
            },
          }
        : node,
    );
    const { remainingEdges, removedEdges } = disconnectInvalidatedContactEdges(
      previousNodes,
      mirroredNodes,
      edgesRef.current,
      selectedIds,
    );
    nodesRef.current = mirroredNodes;
    edgesRef.current = remainingEdges;
    setNodes(mirroredNodes);
    if (removedEdges.length > 0) {
      setEdges(remainingEdges);
      appendConsoleEntry(
        "info",
        `镜像使接口分离，已断开 ${removedEdges.length} 个接触连接`,
      );
    }
    appendConsoleEntry(
      "info",
      `${nextMirrored ? "已镜像" : "已取消镜像"} ${selectedIds.size} 个组件`,
    );
  }, [appendConsoleEntry, recordHistory, selectedNodeId, setEdges, setNodes]);

  const handleNodesChange = useCallback(
    (changes: NodeChange<SimulationNode>[]) => {
      const removesNodes = changes.some((change) => change.type === "remove");
      if (!removesNodes) {
        setNodes((currentNodes) => applyNodeChanges(changes, currentNodes));
        return;
      }

      cancelPortConnection();
      recordHistory();
      const preview = repairAmesimGasReferences(
        applyNodeChanges(changes, nodesRef.current),
        componentDefinitions,
      );
      setNodes((currentNodes) =>
        repairAmesimGasReferences(
          applyNodeChanges(changes, currentNodes),
          componentDefinitions,
        ).nodes,
      );
      if (preview.repairedReferenceCount > 0) {
        appendConsoleEntry(
          "warning",
          `介质定义已删除，${preview.repairedReferenceCount} 个介质物性引用已切回 0 — 空气（理想气体，内置默认）`,
        );
      }
    },
    [
      appendConsoleEntry,
      cancelPortConnection,
      componentDefinitions,
      recordHistory,
      setNodes,
    ],
  );

  const handleEdgesChange = useCallback(
    (changes: EdgeChange<SimulationEdge>[]) => {
      const removedEdgeIds = new Set(
        changes
          .filter((change) => change.type === "remove")
          .map((change) => change.id),
      );
      if (removedEdgeIds.size > 0) {
        recordHistory();
        const selectedNodeIds = new Set(
          nodesRef.current
            .filter((node) => node.selected || node.id === selectedNodeId)
            .map((node) => node.id),
        );
        const deletedContactEdges = edgesRef.current.filter(
          (edge) =>
            removedEdgeIds.has(edge.id) &&
            !selectedNodeIds.has(edge.source) &&
            !selectedNodeIds.has(edge.target),
        );
        const separatedNodes = separateDeletedContactEdges(
          nodesRef.current,
          deletedContactEdges,
        );
        if (separatedNodes !== nodesRef.current) {
          nodesRef.current = separatedNodes;
          setNodes(separatedNodes);
        }
      }
      onEdgesChange(changes);
    },
    [onEdgesChange, recordHistory, selectedNodeId, setNodes],
  );

  const handleNodeDragStart = useCallback<OnNodeDrag<SimulationNode>>(
    (_event, draggedNode, draggedNodes) => {
      setNodeDragActive(true);
      recordHistory();
      clearContactSnapCandidate();
      const movingNodes =
        draggedNodes.length > 0 ? draggedNodes : [draggedNode];
      const draggedNodeIds = new Set(movingNodes.map((node) => node.id));
      const draggedNodeById = new Map(
        movingNodes.map((node) => [node.id, node] as const),
      );
      const effectiveNodes = nodesRef.current.map((node) => {
        const moved = draggedNodeById.get(node.id);
        return moved
          ? { ...node, position: { ...moved.position } }
          : node;
      });
      const contactEdgeIds = new Set(
        edgesRef.current.flatMap((edge) => {
          const sourceMoves = draggedNodeIds.has(edge.source);
          const targetMoves = draggedNodeIds.has(edge.target);
          // Only a contact crossing the block boundary is disconnected.
          // Internal contact topology moves with the block and remains hidden.
          return sourceMoves !== targetMoves &&
            isContactEdgeGeometry(effectiveNodes, edge)
            ? [edge.id]
            : [];
        }),
      );
      contactDragSessionRef.current = {
        contactEdgeIds,
        disconnected: false,
        draggedNodeIds,
        effectiveEdges: edgesRef.current,
        lastCandidate: null,
        lastEvaluatedPosition: null,
        lastSnapRadius: 0,
        multipleNodes: draggedNodeIds.size > 1,
        nodeId: draggedNode.id,
        snapSearchContext: buildContactSnapSearchContext(
          draggedNodeIds,
          effectiveNodes,
          edgesRef.current,
        ),
        startPosition: { ...draggedNode.position },
      };
    },
    [clearContactSnapCandidate, recordHistory],
  );

  const handleNodeDrag = useCallback<OnNodeDrag<SimulationNode>>(
    (_event, draggedNode, draggedNodes) => {
      const session = contactDragSessionRef.current;
      if (!session || session.nodeId !== draggedNode.id) {
        return;
      }
      const movingNodes =
        draggedNodes.length > 0 ? draggedNodes : [draggedNode];
      const draggedNodeById = new Map(
        movingNodes.map((node) => [node.id, node] as const),
      );
      const effectiveNodes = nodesRef.current.map((node) => {
        const moved = draggedNodeById.get(node.id);
        return moved
          ? { ...node, position: { ...moved.position } }
          : node;
      });
      const effectiveDraggedNodes = effectiveNodes.filter((node) =>
        session.draggedNodeIds.has(node.id),
      );
      const effectivePrimary =
        effectiveDraggedNodes.find((node) => node.id === session.nodeId) ??
        draggedNode;
      const screenDistance =
        Math.hypot(
          effectivePrimary.position.x - session.startPosition.x,
          effectivePrimary.position.y - session.startPosition.y,
        ) * reactFlow.getZoom();
      const disconnectDistance = session.multipleNodes
        ? 0.5
        : CONTACT_DISCONNECT_DISTANCE_PX;
      if (
        !session.disconnected &&
        session.contactEdgeIds.size > 0 &&
        screenDistance >= disconnectDistance
      ) {
        const remainingEdges = session.effectiveEdges.filter(
          (edge) => !session.contactEdgeIds.has(edge.id),
        );
        session.disconnected = true;
        session.effectiveEdges = remainingEdges;
        session.snapSearchContext = buildContactSnapSearchContext(
          session.draggedNodeIds,
          effectiveNodes,
          remainingEdges,
        );
        edgesRef.current = remainingEdges;
        setEdges(remainingEdges);
        setSelectedEdgeId((current) =>
          current && session.contactEdgeIds.has(current) ? null : current,
        );
      }

      const snapRadius = contactSnapRadiusForZoom(reactFlow.getZoom());
      const candidate = findContactSnapCandidate(
        effectiveDraggedNodes,
        effectiveNodes,
        session.effectiveEdges,
        snapRadius,
        session.snapSearchContext,
      );
      session.lastCandidate = candidate;
      session.lastEvaluatedPosition = { ...effectivePrimary.position };
      session.lastSnapRadius = snapRadius;
      setContactSnapCandidate((current) =>
        sameContactSnapCandidate(current, candidate) ? current : candidate,
      );
      const previewBlockDelta = {
        x: effectivePrimary.position.x - session.startPosition.x,
        y: effectivePrimary.position.y - session.startPosition.y,
      };
      const previewEdges = translateInternalEdgeRoutes(
        session.effectiveEdges,
        session.draggedNodeIds,
        previewBlockDelta.x,
        previewBlockDelta.y,
      );
      if (previewEdges !== session.effectiveEdges) {
        edgesRef.current = previewEdges;
        setEdges(previewEdges);
      }
    },
    [reactFlow, setEdges],
  );

  const handleNodeDragStop = useCallback<OnNodeDrag<SimulationNode>>(
    (_event, draggedNode, draggedNodes) => {
      setNodeDragActive(false);
      const session = contactDragSessionRef.current;
      if (!session || session.nodeId !== draggedNode.id) {
        clearContactSnapCandidate();
        return;
      }
      const movingNodes =
        draggedNodes.length > 0 ? draggedNodes : [draggedNode];
      const draggedNodeById = new Map(
        movingNodes.map((node) => [node.id, node] as const),
      );
      const effectiveNodes = nodesRef.current.map((node) => {
        const moved = draggedNodeById.get(node.id);
        return moved
          ? { ...node, position: { ...moved.position } }
          : node;
      });
      const effectiveDraggedNodes = effectiveNodes.filter((node) =>
        session.draggedNodeIds.has(node.id),
      );
      const effectivePrimary =
        effectiveDraggedNodes.find((node) => node.id === session.nodeId) ??
        draggedNode;
      const snapRadius = contactSnapRadiusForZoom(reactFlow.getZoom());
      const canReuseLastCandidate =
        session.lastEvaluatedPosition?.x === effectivePrimary.position.x &&
        session.lastEvaluatedPosition.y === effectivePrimary.position.y &&
        session.lastSnapRadius === snapRadius;
      const candidate = canReuseLastCandidate
        ? session.lastCandidate
        : findContactSnapCandidate(
            effectiveDraggedNodes,
            effectiveNodes,
            session.effectiveEdges,
            snapRadius,
            session.snapSearchContext,
          );

      contactDragSessionRef.current = null;
      clearContactSnapCandidate();
      const finalNodes = candidate
        ? effectiveNodes.map((node) =>
            session.draggedNodeIds.has(node.id)
              ? {
                  ...node,
                  position: {
                    x: node.position.x + candidate.positionDelta.x,
                    y: node.position.y + candidate.positionDelta.y,
                  },
                }
              : node,
          )
        : effectiveNodes;
      const finalPrimary =
        finalNodes.find((node) => node.id === session.nodeId) ??
        effectivePrimary;
      const blockDelta = {
        x: finalPrimary.position.x - session.startPosition.x,
        y: finalPrimary.position.y - session.startPosition.y,
      };
      let connectedEdges = session.effectiveEdges.filter(
        (edge) =>
          !session.contactEdgeIds.has(edge.id) ||
          isContactEdgeGeometry(finalNodes, edge),
      );
      connectedEdges = translateInternalEdgeRoutes(
        connectedEdges,
        session.draggedNodeIds,
        blockDelta.x,
        blockDelta.y,
      );

      const timestamp = Date.now();
      candidate?.matches.forEach((match, index) => {
        const contactEdge: SimulationEdge = {
          ...match.connection,
          id: `edge-contact-${match.connection.source}-${match.connection.sourceHandle}-${match.connection.target}-${match.connection.targetHandle}-${timestamp}-${index}`,
          type: CONTACT_AWARE_EDGE_TYPE,
        };
        if (
          canConnectPorts(finalNodes, connectedEdges, contactEdge) &&
          isContactEdgeGeometry(finalNodes, contactEdge)
        ) {
          connectedEdges = addEdge(contactEdge, connectedEdges);
        }
      });

      nodesRef.current = finalNodes;
      edgesRef.current = connectedEdges;
      setNodes(finalNodes);
      setEdges(connectedEdges);
      setSelectedEdgeId(null);
    },
    [clearContactSnapCandidate, reactFlow, setEdges, setNodes],
  );

  const beginPortConnection = useCallback(
    (
      nodeId: string | null,
      portName: string | null,
      mode: ActivePortConnection["mode"],
    ) => {
      const port = nodeId && portName
        ? findNodePort(nodesRef.current, nodeId, portName)
        : undefined;
      if (
        !nodeId ||
        !portName ||
        !port ||
        !portAcceptsAnotherConnection(edgesRef.current, nodeId, port)
      ) {
        cancelPortConnection();
        return;
      }
      suppressCancelledConnectionRef.current = false;
      if (mode === "click") {
        const placement = nodePortFlowPlacement(
          nodesRef.current.find((node) => node.id === nodeId) as SimulationNode,
          portName,
        );
        const draft: PortConnectionDraft = {
          pointer: placement
            ? { x: placement.flowX, y: placement.flowY }
            : null,
          waypoints: [],
        };
        portConnectionDraftRef.current = draft;
        setPortConnectionDraft(draft);
      }
      setActivePortConnection((current) => {
        if (mode === "drag" && current?.mode === "click") {
          return current;
        }
        return { nodeId, portName, mode };
      });
    },
    [cancelPortConnection],
  );

  const endDragPortConnection = useCallback(() => {
    suppressCancelledConnectionRef.current = false;
    setActivePortConnection((current) =>
      current?.mode === "click" ? current : null,
    );
  }, []);

  const endClickPortConnection = useCallback(() => {
    suppressCancelledConnectionRef.current = false;
    portConnectionDraftRef.current = null;
    setPortConnectionDraft(null);
    setActivePortConnection(null);
  }, []);

  const onConnect = useCallback(
    (connection: Connection) => {
      const clearConnectionUi = () => {
        portConnectionDraftRef.current = null;
        setPortConnectionDraft(null);
        setActivePortConnection(null);
      };
      if (suppressCancelledConnectionRef.current) {
        clearConnectionUi();
        return;
      }
      if (!canConnectPorts(nodesRef.current, edgesRef.current, connection)) {
        clearConnectionUi();
        return;
      }

      let routePoints: EdgeRoutePoint[] | undefined;
      const draft = portConnectionDraftRef.current;
      if (activePortConnection?.mode === "click" && draft) {
        const sourceNode = nodesRef.current.find(
          (node) => node.id === connection.source,
        );
        const targetNode = nodesRef.current.find(
          (node) => node.id === connection.target,
        );
        const sourcePlacement = sourceNode
          ? nodePortFlowPlacement(sourceNode, connection.sourceHandle ?? null)
          : undefined;
        const targetPlacement = targetNode
          ? nodePortFlowPlacement(targetNode, connection.targetHandle ?? null)
          : undefined;
        const originIsSource =
          activePortConnection.nodeId === connection.source &&
          activePortConnection.portName === connection.sourceHandle;
        const originIsTarget =
          activePortConnection.nodeId === connection.target &&
          activePortConnection.portName === connection.targetHandle;
        if (sourcePlacement && targetPlacement && (originIsSource || originIsTarget)) {
          const orderedWaypoints = originIsSource
            ? draft.waypoints
            : [...draft.waypoints].reverse();
          routePoints = buildOrthogonalRoutePoints(
            { x: sourcePlacement.flowX, y: sourcePlacement.flowY },
            { x: targetPlacement.flowX, y: targetPlacement.flowY },
            sourcePlacement.position,
            targetPlacement.position,
            orderedWaypoints,
          );
        }
      }

      recordHistory();
      setEdges((currentEdges) => {
        const nextEdges = addEdge(
          {
            ...connection,
            data: {
              isContactEdge: false,
              ...(routePoints && routePoints.length > 0
                ? { routePoints }
                : {}),
            },
            id: `edge-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}-${Date.now()}`,
            type: CONTACT_AWARE_EDGE_TYPE,
          },
          currentEdges,
        );
        edgesRef.current = nextEdges;
        return nextEdges;
      });
      suppressCancelledConnectionRef.current = false;
      clearConnectionUi();
    },
    [activePortConnection, recordHistory, setEdges],
  );

  const isValidConnection = useCallback(
    (connection: Connection | SimulationEdge) =>
      canConnectPorts(nodesRef.current, edgesRef.current, connection),
    [],
  );

  const onDragStart = (event: DragEvent<HTMLButtonElement>, type: string) => {
    if (pendingPasteRef.current) {
      event.preventDefault();
      return;
    }
    dismissPaletteIconPreview();
    event.dataTransfer.setData("application/system-component", type);
    event.dataTransfer.effectAllowed = "move";
    const definition = componentDefinitions.find((item) => item.type === type);
    const paletteSymbol =
      document.querySelector<HTMLElement>(
        `.palette-canvas-drag-template[data-component-type="${CSS.escape(type)}"] > .component-symbol`,
      ) ??
      event.currentTarget.querySelector<HTMLElement>(
        ".palette-icon > .component-symbol",
      );
    if (definition && paletteSymbol) {
      const layout = componentSymbolLayout(
        definition.symbol,
        defaultParameters(definition),
      );
      const viewportZoom = Math.max(reactFlow.getZoom(), 0.01);
      const canvasViewBox = `${layout.viewBox.x} ${layout.viewBox.y} ${layout.viewBox.width} ${layout.viewBox.height}`;
      const preview = document.createElement("div");
      const previewSymbol = paletteSymbol.cloneNode(true) as HTMLElement;
      // 模型库图标有独立的缩略图占比；待拖入态切回工作区 viewBox 和当前缩放，避免落下时跳变。
      preview.className = "component-drag-preview";
      preview.setAttribute("aria-hidden", "true");
      preview.dataset.componentType = type;
      preview.style.width = `${layout.nodeSize.width * viewportZoom}px`;
      preview.style.height = `${layout.nodeSize.height * viewportZoom}px`;
      previewSymbol.classList.remove("component-symbol-palette");
      previewSymbol.classList.add("component-symbol-canvas");
      previewSymbol.removeAttribute("data-palette-occupancy");
      previewSymbol.dataset.symbolViewBox = canvasViewBox;
      previewSymbol.style.width = `${layout.symbolSize.width}px`;
      previewSymbol.style.height = `${layout.symbolSize.height}px`;
      previewSymbol.style.transform = `scale(${viewportZoom})`;
      previewSymbol.style.transformOrigin = "center";
      previewSymbol
        .querySelector<SVGSVGElement>(".component-symbol-svg")
        ?.setAttribute("viewBox", canvasViewBox);
      preview.append(previewSymbol);
      document.body.appendChild(preview);
      event.dataTransfer.setDragImage(
        preview,
        Math.round(preview.offsetWidth / 2),
        Math.round(preview.offsetHeight / 2),
      );
      window.setTimeout(() => preview.remove(), 0);
    }
  };

  const onDrop = useCallback(
    (event: DragEvent<HTMLDivElement>) => {
      event.preventDefault();
      if (pendingPasteRef.current) {
        return;
      }
      const type = event.dataTransfer.getData("application/system-component");
      const definition = componentDefinitions.find((item) => item.type === type);
      if (!definition) {
        return;
      }

      const dropPoint = reactFlow.screenToFlowPosition({
        x: event.clientX,
        y: event.clientY,
      });
      const mediumIndex = isAmesimGasMediumDefinition(definition)
        ? nextAvailableAmesimGasIndex(
            definedAmesimGasIndices(nodesRef.current, componentDefinitions),
          )
        : null;
      if (isAmesimGasMediumDefinition(definition) && mediumIndex === null) {
        appendConsoleEntry(
          "error",
          "无法添加介质定义：可用介质定义索引 1..99 已全部占用",
        );
        return;
      }
      const id = takeNextNodeId(
        definition.type,
        new Set(nodesRef.current.map((node) => node.id)),
      );
      const data = { ...buildNodeData(definition), label: id };
      if (mediumIndex !== null) {
        data.parameters = {
          ...data.parameters,
          gi: mediumIndex,
        };
      }
      const layout = componentSymbolLayout(
        data.symbol ?? data.componentType,
        data.parameters,
      );
      const initialSize = nodeFrameDimensions(
        layout,
        normalizeNodeRotation(data.rotation),
      );
      const centeredPosition = {
        x: dropPoint.x - initialSize.width / 2,
        y: dropPoint.y - initialSize.height / 2,
      };
      const position = snapEnabled
        ? {
            x: Math.round(centeredPosition.x / GRID_SIZE) * GRID_SIZE,
            y: Math.round(centeredPosition.y / GRID_SIZE) * GRID_SIZE,
          }
        : centeredPosition;
      const node: SimulationNode = {
        id,
        type: "simulationComponent",
        position,
        selected: true,
        data,
      };
      recordHistory();
      setNodes((currentNodes) => [
        ...currentNodes.map((currentNode) => ({
          ...currentNode,
          selected: false,
        })),
        node,
      ]);
      setEdges((currentEdges) =>
        currentEdges.map((edge) => ({ ...edge, selected: false })),
      );
      setSelectedNodeId(id);
      setSelectedEdgeId(null);
    },
    [
      appendConsoleEntry,
      componentDefinitions,
      reactFlow,
      recordHistory,
      setEdges,
      setNodes,
      snapEnabled,
    ],
  );

  const updateSelectedNode = (updater: (node: SimulationNode) => SimulationNode) => {
    if (!selectedNodeId) {
      return;
    }
    setNodes((currentNodes) =>
      currentNodes.map((node) => (node.id === selectedNodeId ? updater(node) : node)),
    );
  };

  const updateSelectedParameter = (
    key: string,
    definition: ParameterDefinition,
    displayValue: string,
  ) => {
    const selectedUnit =
      selectedNode?.data.parameterUnits[key] ?? definition.unit ?? "";
    const unit = findUnitOption(definition, selectedUnit);
    const normalizedDisplayValue = displayValue.trim();
    const numericValue = Number(normalizedDisplayValue);
    const hasFiniteNumericValue =
      normalizedDisplayValue !== "" && Number.isFinite(numericValue);
    const convertedBaseValue = hasFiniteNumericValue
      ? unit.toBase(numericValue)
      : numericValue;
    const baseValue = hasFiniteNumericValue
      ? convertedBaseValue
      : normalizedDisplayValue;
    const scientificNotation =
      hasFiniteNumericValue &&
      Number.isFinite(convertedBaseValue) &&
      isScientificNotationValue(normalizedDisplayValue)
        ? { text: normalizedDisplayValue, unit: selectedUnit }
        : null;
    let lmechn1PositionOffset: { x: number; y: number } | null = null;

    const draftErrorKey = selectedNodeId ? `${selectedNodeId}:${key}` : key;
    if (
      selectedNode &&
      isLmechn1NodeData(selectedNode.data) &&
      key === "v1"
    ) {
      const nextRightPortCount = convertedBaseValue;
      const validationError =
        !hasFiniteNumericValue || !Number.isInteger(nextRightPortCount)
          ? "右侧端口数量必须为整数"
          : nextRightPortCount < 1
            ? "右侧端口数量不能小于1"
            : nextRightPortCount > LMECHN1_MAX_RIGHT_PORT_COUNT
              ? "右侧端口数量不能超过20"
              : "";
      if (validationError) {
        setComponentParameterDraftErrors((current) => ({
          ...current,
          [draftErrorKey]: validationError,
        }));
        return;
      }

      const previousRightPortCount = lmechn1RightPortCount(
        selectedNode.data.parameters,
      );
      if (nextRightPortCount < previousRightPortCount) {
        const portsThatWouldDisappear = new Set(
          Array.from(
            { length: previousRightPortCount - nextRightPortCount },
            (_, index) => `port_${nextRightPortCount + 1 + index}`,
          ),
        );
        const connectedDisappearingPort = edgesRef.current.some(
          (edge) =>
            (edge.source === selectedNode.id &&
              portsThatWouldDisappear.has(edge.sourceHandle ?? "")) ||
            (edge.target === selectedNode.id &&
              portsThatWouldDisappear.has(edge.targetHandle ?? "")),
        );
        if (connectedDisappearingPort) {
          const message = "请先断开将被隐藏的右侧端口连接";
          setComponentParameterDraftErrors((current) => ({
            ...current,
            [draftErrorKey]: message,
          }));
          appendConsoleEntry("warning", message);
          return;
        }
      }

      setComponentParameterDraftErrors((current) => {
        if (!(draftErrorKey in current)) {
          return current;
        }
        const next = { ...current };
        delete next[draftErrorKey];
        return next;
      });
      if (nextRightPortCount !== previousRightPortCount) {
        const symbol = selectedNode.data.symbol ?? selectedNode.data.componentType;
        const rotation = normalizeNodeRotation(selectedNode.data.rotation);
        const previousSize = nodeFrameDimensions(
          componentSymbolLayout(symbol, selectedNode.data.parameters),
          rotation,
        );
        const nextSize = nodeFrameDimensions(
          componentSymbolLayout(symbol, {
            ...selectedNode.data.parameters,
            v1: nextRightPortCount,
          }),
          rotation,
        );
        lmechn1PositionOffset = {
          x: (previousSize.width - nextSize.width) / 2,
          y: (previousSize.height - nextSize.height) / 2,
        };
        const previousReferencePort = `port_${previousRightPortCount + 1}`;
        const nextReferencePort = `port_${nextRightPortCount + 1}`;
        setEdges((currentEdges) => {
          const nextEdges = currentEdges.map((edge) => ({
            ...edge,
            ...(edge.source === selectedNode.id &&
            edge.sourceHandle === previousReferencePort
              ? { sourceHandle: nextReferencePort }
              : {}),
            ...(edge.target === selectedNode.id &&
            edge.targetHandle === previousReferencePort
              ? { targetHandle: nextReferencePort }
              : {}),
          }));
          edgesRef.current = nextEdges;
          return nextEdges;
        });
      }
    } else {
      setComponentParameterDraftErrors((current) => {
        if (!(draftErrorKey in current)) {
          return current;
        }
        const next = { ...current };
        delete next[draftErrorKey];
        return next;
      });
    }

    updateSelectedNode((node) => {
      const parameterScientificNotation = {
        ...node.data.parameterScientificNotation,
      };
      if (scientificNotation) {
        parameterScientificNotation[key] = scientificNotation;
      } else {
        delete parameterScientificNotation[key];
      }
      return {
        ...node,
        ...(lmechn1PositionOffset
          ? {
              position: {
                x: node.position.x + lmechn1PositionOffset.x,
                y: node.position.y + lmechn1PositionOffset.y,
              },
            }
          : {}),
        data: {
          ...node.data,
          parameters: {
            ...node.data.parameters,
            [key]: baseValue,
          },
          parameterScientificNotation,
        },
      };
    });
  };

  const updateSelectedChoice = (key: string, value: number) => {
    updateSelectedNode((node) => {
      const parameterScientificNotation = {
        ...node.data.parameterScientificNotation,
      };
      delete parameterScientificNotation[key];
      return {
        ...node,
        data: {
          ...node.data,
          parameters: {
            ...node.data.parameters,
            [key]: value,
          },
          parameterScientificNotation,
        },
      };
    });
  };

  const updateSelectedParameterUnit = (key: string, unit: string) => {
    updateSelectedNode((node) => ({
      ...node,
      data: {
        ...node.data,
        parameterUnits: {
          ...node.data.parameterUnits,
          [key]: unit,
        },
      },
    }));
  };

  const copySelection = useCallback(() => {
    const selectedNodes = nodesRef.current.filter(
      (node) => node.selected || node.id === selectedNodeId,
    );
    if (selectedNodes.length === 0) {
      appendConsoleEntry("warning", "请先选择需要复制的组件");
      return;
    }
    const selectedIds = new Set(selectedNodes.map((node) => node.id));
    clipboardRef.current = {
      nodes: cloneValue(selectedNodes),
      edges: cloneValue(
        edgesRef.current.filter(
          (edge) => selectedIds.has(edge.source) && selectedIds.has(edge.target),
        ),
      ),
    };
    appendConsoleEntry("info", `已复制 ${selectedNodes.length} 个组件`);
  }, [appendConsoleEntry, selectedNodeId]);

  const flowPointForScreenPoint = useCallback(
    (screenPoint: { x: number; y: number }) => {
      const flowPoint = reactFlow.screenToFlowPosition(screenPoint);
      return snapEnabled
        ? {
            x: Math.round(flowPoint.x / GRID_SIZE) * GRID_SIZE,
            y: Math.round(flowPoint.y / GRID_SIZE) * GRID_SIZE,
          }
        : flowPoint;
    },
    [reactFlow, snapEnabled],
  );

  const positionPendingPasteAtScreenPoint = useCallback(
    (screenPoint: { x: number; y: number }) => {
      const current = pendingPasteRef.current;
      if (!current) {
        return;
      }
      const nextAnchor = flowPointForScreenPoint(screenPoint);
      // Positions currently include the previous snap offset. Remove it while
      // following the raw pointer, then derive a fresh block-wide snap.
      const rawDelta = {
        x: nextAnchor.x - current.anchor.x - current.snapOffset.x,
        y: nextAnchor.y - current.anchor.y - current.snapOffset.y,
      };
      const pendingNodeIds = new Set(current.nodes.map((node) => node.id));
      const rawNodes = current.nodes.map((node) => ({
        ...node,
        position: {
          x: node.position.x + rawDelta.x,
          y: node.position.y + rawDelta.y,
        },
      }));
      const rawEdges = translateInternalEdgeRoutes(
        current.edges,
        pendingNodeIds,
        rawDelta.x,
        rawDelta.y,
      );
      const allNodes = [...nodesRef.current, ...rawNodes];
      const allEdges = [...edgesRef.current, ...rawEdges];
      const candidate = findContactSnapCandidate(
        rawNodes,
        allNodes,
        allEdges,
        contactSnapRadiusForZoom(reactFlow.getZoom()),
      );
      const snapOffset = candidate?.positionDelta ?? { x: 0, y: 0 };
      const nextNodes = rawNodes.map((node) => ({
        ...node,
        position: {
          x: node.position.x + snapOffset.x,
          y: node.position.y + snapOffset.y,
        },
      }));
      const nextEdges = translateInternalEdgeRoutes(
        rawEdges,
        pendingNodeIds,
        snapOffset.x,
        snapOffset.y,
      );
      const next = {
        ...current,
        anchor: nextAnchor,
        edges: nextEdges,
        nodes: nextNodes,
        snapOffset,
      };
      pendingPasteRef.current = next;
      setPendingPaste(next);
      setContactSnapCandidate((existing) =>
        sameContactSnapCandidate(existing, candidate) ? existing : candidate,
      );
    },
    [flowPointForScreenPoint, reactFlow, setPendingPaste],
  );

  const syncPendingPasteToPointer = useCallback(() => {
    const pointer = lastFlowPointerRef.current;
    if (pointer && pendingPasteRef.current) {
      positionPendingPasteAtScreenPoint(pointer);
    }
  }, [positionPendingPasteAtScreenPoint]);

  const rotatePendingPaste = useCallback(() => {
    setPendingPaste((current) => {
      if (!current) {
        return current;
      }
      const next = {
        ...current,
        // A rotated block gets a fresh automatic internal route. Absolute
        // manual bends from the previous orientation must not remain behind.
        edges: current.edges.map((edge) => ({
          ...edge,
          data: {
            ...edge.data,
            routePoints: undefined,
          },
        })),
        nodes: current.nodes.map(rotateNodeClockwise),
      };
      pendingPasteRef.current = next;
      return next;
    });
    clearContactSnapCandidate();
  }, [clearContactSnapCandidate, setPendingPaste]);

  const cancelPendingPaste = useCallback(() => {
    if (!pendingPasteRef.current) {
      return;
    }
    pendingPasteRef.current = null;
    pendingPasteMiddlePointerRef.current = null;
    setPendingPaste(null);
    clearContactSnapCandidate();
    appendConsoleEntry("info", "已取消粘贴放置");
  }, [appendConsoleEntry, clearContactSnapCandidate]);

  const commitPendingPaste = useCallback(() => {
    const pending = pendingPasteRef.current;
    if (!pending) {
      return;
    }
    const occupiedNodeIds = new Set(nodesRef.current.map((node) => node.id));
    const incomingNodeIds = new Set<string>();
    const conflictingNode = pending.nodes.find((node) => {
      const conflict = occupiedNodeIds.has(node.id) || incomingNodeIds.has(node.id);
      incomingNodeIds.add(node.id);
      return conflict;
    });
    const occupiedEdgeIds = new Set(edgesRef.current.map((edge) => edge.id));
    const incomingEdgeIds = new Set<string>();
    const conflictingEdge = pending.edges.find((edge) => {
      const conflict = occupiedEdgeIds.has(edge.id) || incomingEdgeIds.has(edge.id);
      incomingEdgeIds.add(edge.id);
      return conflict;
    });
    if (conflictingNode || conflictingEdge) {
      pendingPasteRef.current = null;
      pendingPasteMiddlePointerRef.current = null;
      setPendingPaste(null);
      clearContactSnapCandidate();
      appendConsoleEntry(
        "error",
        `粘贴已取消：检测到重复${conflictingNode ? `节点 ID ${conflictingNode.id}` : `连接 ID ${conflictingEdge?.id}`}`,
      );
      return;
    }

    const pendingNodeIds = new Set(pending.nodes.map((node) => node.id));
    const combinedNodes = [...nodesRef.current, ...pending.nodes];
    const combinedEdges = [...edgesRef.current, ...pending.edges];
    const candidate = findContactSnapCandidate(
      pending.nodes,
      combinedNodes,
      combinedEdges,
      contactSnapRadiusForZoom(reactFlow.getZoom()),
    );
    const placementDelta = candidate?.positionDelta ?? { x: 0, y: 0 };
    const placedNodes = pending.nodes.map((node) => ({
      ...node,
      position: {
        x: node.position.x + placementDelta.x,
        y: node.position.y + placementDelta.y,
      },
      selected: true,
    }));
    const placedInternalEdges = translateInternalEdgeRoutes(
      pending.edges,
      pendingNodeIds,
      placementDelta.x,
      placementDelta.y,
    ).map((edge) => ({ ...edge, selected: false }));
    const nextNodes = [
      ...nodesRef.current.map((node) => ({ ...node, selected: false })),
      ...placedNodes,
    ];
    let nextEdges: SimulationEdge[] = [
      ...edgesRef.current.map((edge) => ({ ...edge, selected: false })),
      ...placedInternalEdges,
    ];
    const timestamp = Date.now();
    let attachedPortCount = 0;
    candidate?.matches.forEach((match, index) => {
      const contactEdge: SimulationEdge = {
        ...match.connection,
        id: `edge-contact-${match.connection.source}-${match.connection.sourceHandle}-${match.connection.target}-${match.connection.targetHandle}-${timestamp}-paste-${index}`,
        type: CONTACT_AWARE_EDGE_TYPE,
      };
      if (
        canConnectPorts(nextNodes, nextEdges, contactEdge) &&
        isContactEdgeGeometry(nextNodes, contactEdge)
      ) {
        nextEdges = addEdge(contactEdge, nextEdges);
        attachedPortCount += 1;
      }
    });

    recordHistory();
    nodesRef.current = nextNodes;
    edgesRef.current = nextEdges;
    setNodes(nextNodes);
    setEdges(nextEdges);
    setSelectedNodeId(placedNodes.length === 1 ? placedNodes[0].id : null);
    setSelectedEdgeId(null);
    pendingPasteRef.current = null;
    pendingPasteMiddlePointerRef.current = null;
    setPendingPaste(null);
    clearContactSnapCandidate();
    appendConsoleEntry(
      "info",
      `已粘贴 ${placedNodes.length} 个组件${attachedPortCount > 0 ? `，并吸附连接 ${attachedPortCount} 个端口` : ""}`,
    );
    if (pending.repairedReferenceCount > 0) {
      appendConsoleEntry(
        "warning",
        `${pending.repairedReferenceCount} 个粘贴的介质物性引用没有对应介质定义，已切回 0 — 空气（理想气体，内置默认）`,
      );
    }
  }, [
    appendConsoleEntry,
    clearContactSnapCandidate,
    reactFlow,
    recordHistory,
    setEdges,
    setNodes,
  ]);

  const pasteSelection = useCallback(() => {
    const clipboard = clipboardRef.current;
    if (!clipboard || clipboard.nodes.length === 0) {
      appendConsoleEntry("warning", "剪贴板中没有可粘贴的组件");
      return;
    }

    const existingMediumIndices = definedAmesimGasIndices(
      nodesRef.current,
      componentDefinitions,
    );
    const reservedMediumIndices = new Set(existingMediumIndices);
    const assignedIndexByCopiedNodeId = new Map<string, number>();
    const copiedMediumNodeIdsByOldIndex = new Map<number, string[]>();
    for (const node of clipboard.nodes) {
      const definition = componentDefinitionForNode(node, componentDefinitions);
      if (!isAmesimGasMediumDefinition(definition)) {
        continue;
      }
      const nextIndex = nextAvailableAmesimGasIndex(reservedMediumIndices);
      if (nextIndex === null) {
        appendConsoleEntry(
          "error",
          "无法粘贴介质定义：可用介质定义索引 1..99 不足",
        );
        return;
      }
      reservedMediumIndices.add(nextIndex);
      assignedIndexByCopiedNodeId.set(node.id, nextIndex);
      const oldIndex = normalizeAmesimGasIndex(
        node.data.parameters.gi,
        AMESIM_MIN_DEFINED_GAS_INDEX,
      );
      if (oldIndex !== null) {
        const nodeIds = copiedMediumNodeIdsByOldIndex.get(oldIndex) ?? [];
        nodeIds.push(node.id);
        copiedMediumNodeIdsByOldIndex.set(oldIndex, nodeIds);
      }
    }
    const copiedIndexRemap = new Map<number, number>();
    const ambiguousCopiedIndices = new Set<number>();
    copiedMediumNodeIdsByOldIndex.forEach((nodeIds, oldIndex) => {
      if (nodeIds.length !== 1) {
        ambiguousCopiedIndices.add(oldIndex);
        return;
      }
      const assignedIndex = assignedIndexByCopiedNodeId.get(nodeIds[0]);
      if (assignedIndex !== undefined) {
        copiedIndexRemap.set(oldIndex, assignedIndex);
      }
    });

    const flowRoot = reactFlowStore.getState().domNode;
    const flowBounds = flowRoot?.getBoundingClientRect();
    const screenAnchor = lastFlowPointerRef.current ?? {
      x: flowBounds ? flowBounds.left + flowBounds.width / 2 : window.innerWidth / 2,
      y: flowBounds ? flowBounds.top + flowBounds.height / 2 : window.innerHeight / 2,
    };
    lastFlowPointerRef.current = screenAnchor;
    const anchor = flowPointForScreenPoint(screenAnchor);
    const copiedBounds = clipboard.nodes.reduce(
      (bounds, node) => {
        const size = nodeFrameDimensions(
          componentSymbolLayout(
            node.data.symbol ?? node.data.componentType,
            node.data.parameters,
          ),
          normalizeNodeRotation(node.data.rotation),
        );
        return {
          minX: Math.min(bounds.minX, node.position.x),
          minY: Math.min(bounds.minY, node.position.y),
          maxX: Math.max(bounds.maxX, node.position.x + size.width),
          maxY: Math.max(bounds.maxY, node.position.y + size.height),
        };
      },
      {
        minX: Number.POSITIVE_INFINITY,
        minY: Number.POSITIVE_INFINITY,
        maxX: Number.NEGATIVE_INFINITY,
        maxY: Number.NEGATIVE_INFINITY,
      },
    );
    const copiedCenter = {
      x: (copiedBounds.minX + copiedBounds.maxX) / 2,
      y: (copiedBounds.minY + copiedBounds.maxY) / 2,
    };
    const initialPasteDelta = {
      x: anchor.x - copiedCenter.x,
      y: anchor.y - copiedCenter.y,
    };
    const idMap = new Map<string, string>();
    const reservedNodeIds = new Set(nodesRef.current.map((node) => node.id));
    const usedNames = new Set(nodesRef.current.map((node) => node.data.label.trim()));
    let repairedPastedReferenceCount = 0;
    const pastedNodes = clipboard.nodes.map((node) => {
      const id = takeNextNodeId(node.data.componentType, reservedNodeIds);
      reservedNodeIds.add(id);
      idMap.set(node.id, id);
      const label = makeUniqueName(`${node.data.label}_副本`, usedNames);
      usedNames.add(label);
      const definition = componentDefinitionForNode(node, componentDefinitions);
      const parameters = { ...cloneValue(node.data.parameters) };
      if (isAmesimGasMediumDefinition(definition)) {
        parameters.gi = assignedIndexByCopiedNodeId.get(node.id) as number;
      } else if (definition) {
        Object.entries(definition.parameters).forEach(([key, parameter]) => {
          if (parameter.editor !== "amesimGasReference") {
            return;
          }
          const oldIndex = normalizeAmesimGasIndex(parameters[key]);
          if (oldIndex === AMESIM_BUILTIN_GAS_INDEX) {
            parameters[key] = AMESIM_BUILTIN_GAS_INDEX;
          } else if (oldIndex !== null && copiedIndexRemap.has(oldIndex)) {
            parameters[key] = copiedIndexRemap.get(oldIndex) as number;
          } else if (
            oldIndex !== null &&
            !ambiguousCopiedIndices.has(oldIndex) &&
            existingMediumIndices.has(oldIndex)
          ) {
            parameters[key] = oldIndex;
          } else {
            parameters[key] = AMESIM_BUILTIN_GAS_INDEX;
            repairedPastedReferenceCount += 1;
          }
        });
      }
      return {
        ...cloneValue(node),
        id,
        position: {
          x: node.position.x + initialPasteDelta.x,
          y: node.position.y + initialPasteDelta.y,
        },
        selected: false,
        data: {
          ...cloneValue(node.data),
          label,
          parameters,
        },
      } satisfies SimulationNode;
    });
    const reservedEdgeIds = new Set(edgesRef.current.map((edge) => edge.id));
    const pastedEdges = clipboard.edges.map((edge, index) => {
      const id = takeNextCopiedEdgeId(index, reservedEdgeIds);
      reservedEdgeIds.add(id);
      return translateEdgeRoute(
        {
          ...cloneValue(edge),
          id,
          source: idMap.get(edge.source) as string,
          target: idMap.get(edge.target) as string,
          selected: false,
        },
        initialPasteDelta.x,
        initialPasteDelta.y,
      );
    });

    const nextPendingPaste = {
      anchor,
      edges: pastedEdges,
      nodes: pastedNodes,
      repairedReferenceCount: repairedPastedReferenceCount,
      snapOffset: { x: 0, y: 0 },
    } satisfies PendingPaste;
    cancelPortConnection();
    setSelectedNodeId(null);
    setSelectedEdgeId(null);
    pendingPasteRef.current = nextPendingPaste;
    setPendingPaste(nextPendingPaste);
    appendConsoleEntry(
      "info",
      `已准备 ${pastedNodes.length} 个组件：左键放置，中键旋转，Esc 取消`,
    );
  }, [
    appendConsoleEntry,
    cancelPortConnection,
    componentDefinitions,
    flowPointForScreenPoint,
    reactFlowStore,
  ]);

  const handleFlowPointerDownCapture = useCallback(
    (event: ReactPointerEvent<HTMLElement>) => {
      lastFlowPointerRef.current = { x: event.clientX, y: event.clientY };
      rememberFlowPointer(event);
      if (pendingPasteRef.current && event.button === 1) {
        pendingPasteMiddlePointerRef.current = {
          pointerId: event.pointerId,
          startX: event.clientX,
          startY: event.clientY,
          moved: false,
        };
      }
    },
    [rememberFlowPointer],
  );

  const handleFlowPointerMoveCapture = useCallback(
    (event: ReactPointerEvent<HTMLElement>) => {
      lastFlowPointerRef.current = { x: event.clientX, y: event.clientY };
      const middlePointer = pendingPasteMiddlePointerRef.current;
      if (
        middlePointer &&
        middlePointer.pointerId === event.pointerId &&
        Math.hypot(
          event.clientX - middlePointer.startX,
          event.clientY - middlePointer.startY,
        ) > 4
      ) {
        middlePointer.moved = true;
      }
      if (pendingPasteRef.current) {
        positionPendingPasteAtScreenPoint(lastFlowPointerRef.current);
      }
      const connectionDraft = portConnectionDraftRef.current;
      if (connectionDraft) {
        const pointer = reactFlow.screenToFlowPosition(
          { x: event.clientX, y: event.clientY },
          { snapToGrid: false },
        );
        if (
          connectionDraft.pointer?.x !== pointer.x ||
          connectionDraft.pointer?.y !== pointer.y
        ) {
          const nextDraft = { ...connectionDraft, pointer };
          portConnectionDraftRef.current = nextDraft;
          setPortConnectionDraft(nextDraft);
        }
      }
    },
    [positionPendingPasteAtScreenPoint, reactFlow],
  );

  const handleFlowPointerUpCapture = useCallback(
    (event: ReactPointerEvent<HTMLElement>) => {
      lastFlowPointerRef.current = { x: event.clientX, y: event.clientY };
      const middlePointer = pendingPasteMiddlePointerRef.current;
      if (!middlePointer || middlePointer.pointerId !== event.pointerId) {
        return;
      }
      pendingPasteMiddlePointerRef.current = null;
      if (!middlePointer.moved && pendingPasteRef.current) {
        rotatePendingPaste();
      }
    },
    [rotatePendingPaste],
  );

  const handleFlowClickCapture = useCallback(
    (event: ReactMouseEvent<HTMLElement>) => {
      if (!pendingPasteRef.current || event.button !== 0) {
        return;
      }
      const target = event.target instanceof Element ? event.target : null;
      if (
        target?.closest(
          ".flow-viewport-scrollbars, .react-flow__panel, button, input, select, textarea, a, [role='button'], [role='scrollbar']",
        )
      ) {
        return;
      }
      event.preventDefault();
      event.stopPropagation();
      commitPendingPaste();
    },
    [commitPendingPaste],
  );

  const updateSimulationConfig = (key: keyof SimulationConfig, value: string) => {
    const normalizedValue = value.trim();
    const numericValue = Number(normalizedValue);
    setSimulationConfig((current) => ({
      ...current,
      [key]:
        key === "method"
          ? value
          : normalizedValue !== "" && Number.isFinite(numericValue)
            ? isScientificNotationValue(normalizedValue)
              ? normalizedValue
              : numericValue
            : normalizedValue,
    }));
  };

  const generateXml = () => {
    try {
      const xml = buildSystemXml(buildCurrentProject(), componentDefinitions, nodes);
      appendConsoleEntry(
        "success",
        `XML 已生成：${nodes.length} 个组件，${edges.length} 条连接`,
      );
      appendConsoleEntry("info", xml, "xml");
    } catch (error) {
      appendConsoleEntry("error", `XML 生成失败：${formatError(error)}`);
    }
  };

  const downloadXml = () => {
    try {
      const xml = buildSystemXml(buildCurrentProject(), componentDefinitions, nodes);
      downloadText(`${safeFilename(projectName)}.xml`, xml);
      appendConsoleEntry("success", `XML 已下载：${safeFilename(projectName)}.xml`);
    } catch (error) {
      appendConsoleEntry("error", `XML 下载失败：${formatError(error)}`);
    }
  };

  const applyProject = useCallback(
    (project: ReactFlowProjectPayload, message: string, addToHistory = true) => {
      cancelPortConnection();
      if (addToHistory) {
        recordHistory();
      }
      const legacyMigration = migrateLegacyAmesimComponents(
        project,
        componentDefinitions,
      );
      const normalizedNodes = legacyMigration.project.nodes.map((node) =>
        normalizeLoadedNode(
          node,
          componentDefinitions,
        ),
      );
      const indexedMedia = assignMissingAmesimGasDefinitionIndices(
        normalizedNodes,
        componentDefinitions,
      );
      const loadedNodes = indexedMedia.nodes;
      const edgeNormalization = loadProjectEdges(
        legacyMigration.project.edges,
        loadedNodes,
      );
      const loadedEdges = edgeNormalization.edges;
      setNodes(loadedNodes);
      setEdges(loadedEdges);
      setProjectName(project.name || "untitled");
      setSimulationConfig({ ...defaultSimulationConfig, ...project.simulation });
      setSelectedNodeId(null);
      setSelectedEdgeId(null);
      setValidationIssues([]);
      setValidatedSignature("");
      syncNextNodeNumbers(loadedNodes);
      appendConsoleEntry("success", message);
      if (legacyMigration.migratedLmechn1NodeCount > 0) {
        appendConsoleEntry(
          "info",
          `已升级 ${legacyMigration.migratedLmechn1NodeCount} 个 LMECHN1 元件的动态端口合同`,
        );
      }
      if (legacyMigration.migratedForcNodeCount > 0) {
        appendConsoleEntry(
          "info",
          `已升级 ${legacyMigration.migratedForcNodeCount} 个 FORC 元件的显式力方向合同`,
        );
      }
      loadedNodes
        .flatMap((node) => node.data.modelContractIssues ?? [])
        .forEach((issue) => appendConsoleEntry("error", `${issue}；该组件仅可查看，不能仿真`));
      edgeNormalization.droppedEdges.forEach(({ id, reason }) =>
        appendConsoleEntry(
          "warning",
          `已丢弃失效连接 ${id}：${reason}`,
        ),
      );
      if (indexedMedia.assignedDefinitionCount > 0) {
        appendConsoleEntry(
          "info",
          `已为 ${indexedMedia.assignedDefinitionCount} 个介质定义补充分配介质定义索引`,
        );
      }
      if (indexedMedia.exhaustedDefinitionCount > 0) {
        appendConsoleEntry(
          "error",
          `${indexedMedia.exhaustedDefinitionCount} 个介质定义无法分配 1..99 索引，请删除多余定义`,
        );
      }
      requestModelingFitView();
    },
    [
      appendConsoleEntry,
      cancelPortConnection,
      componentDefinitions,
      recordHistory,
      requestModelingFitView,
      setEdges,
      setNodes,
    ],
  );

  const saveProject = () => {
    try {
      const project = buildCurrentProject();
      localStorage.setItem(localProjectKey(project.name), JSON.stringify(project));
      localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(project));
      setSaveState(`已保存 ${formatTime(new Date())}`);
      appendConsoleEntry(
        "success",
        `工程已保存到浏览器：${project.nodes.length} 个组件，${project.edges.length} 条连接`,
      );
    } catch (error) {
      appendConsoleEntry("error", `保存失败：${formatError(error)}`);
    }
  };

  const loadProject = () => {
    if (pendingPasteRef.current) {
      return;
    }
    const name = projectName.trim() || "untitled";
    try {
      const project = parseProjectPayload(localStorage.getItem(localProjectKey(name)));
      if (!project) {
        appendConsoleEntry("warning", `没有找到本地工程：${name}`);
        return;
      }
      applyProject(
        project,
        `工程已加载：${project.nodes.length} 个组件，${project.edges.length} 条连接`,
      );
    } catch (error) {
      appendConsoleEntry("error", `加载失败：${formatError(error)}`);
    }
  };

  const exportProject = () => {
    const project = buildCurrentProject();
    downloadFile(
      `${safeFilename(project.name)}.json`,
      JSON.stringify(project, null, 2),
      "application/json;charset=utf-8",
    );
    appendConsoleEntry("success", `工程 JSON 已导出：${safeFilename(project.name)}.json`);
  };

  const importProject = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file || pendingPasteRef.current) {
      return;
    }
    try {
      const fileText = await file.text();
      if (pendingPasteRef.current) {
        return;
      }
      const project = parseProjectPayload(fileText);
      if (!project) {
        throw new Error("文件不是有效的 ReactFlow 工程 JSON");
      }
      applyProject(project, `已导入工程：${file.name}`);
    } catch (error) {
      appendConsoleEntry("error", `导入失败：${formatError(error)}`);
    }
  };

  const checkModel = useCallback(() => {
    const issues = validateModel(
      nodesRef.current,
      edgesRef.current,
      simulationConfigRef.current,
      componentDefinitions,
    );
    const signature = modelValidationSignature(
      nodesRef.current,
      edgesRef.current,
      simulationConfigRef.current,
    );
    setValidationIssues(issues);
    setValidatedSignature(signature);
    const errorCount = issues.filter((issue) => issue.severity === "error").length;
    const warningCount = issues.length - errorCount;
    const summary =
      errorCount === 0
        ? warningCount === 0
          ? "模型检查通过"
          : `模型检查通过，存在 ${warningCount} 条警告`
        : `模型检查发现 ${errorCount} 个错误、${warningCount} 条警告`;
    issues.forEach((issue) =>
      appendConsoleEntry(issue.severity === "error" ? "error" : "warning", issue.message),
    );
    appendConsoleEntry(
      errorCount > 0 ? "error" : warningCount > 0 ? "warning" : "success",
      summary,
    );
    return issues;
  }, [appendConsoleEntry, componentDefinitions]);

  const publishSimulationResult = (
    result: SimulationResult,
    project: ExecutableProjectPayload,
  ) => {
    const resultStatus = result.status ?? (result.success ? "completed" : "failed");
    const sampleCount = Math.min(
      result.diagnostics.sampleCount,
      result.series.time?.length ?? 0,
    );
    const hasUsableSamples = sampleCount >= 2;
    const startTime = project.simulation.t_start;
    const finalSimulatedTime = Number.isFinite(result.simulatedUntil)
      ? result.simulatedUntil
      : startTime;
    const finalTotalTime = Number.isFinite(result.requestedStopTime)
      ? result.requestedStopTime
      : project.simulation.t_stop;
    const finalPercent =
      resultStatus === "completed"
        ? 100
        : simulationTimePercent(
            startTime,
            finalSimulatedTime,
            finalTotalTime,
          );
    const simulatedUntil = Number.isFinite(result.simulatedUntil)
      ? formatNumber(result.simulatedUntil)
      : "未知时间";
    const statusMessages = {
      completed: `仿真完成，已生成新的结果，共 ${sampleCount} 个采样点`,
      stopped: `仿真已手动终止，已保留计算至 ${simulatedUntil} s 的 ${sampleCount} 个采样点`,
      stalled: `仿真因进度异常而终止，已保留计算至 ${simulatedUntil} s 的 ${sampleCount} 个采样点`,
      failed: `仿真异常终止，已保留计算至 ${simulatedUntil} s 的 ${sampleCount} 个采样点`,
    } as const;
    const statusMessage = statusMessages[resultStatus];

    if (resultStatus === "completed") {
      setSimulationProgress({
        state: "success",
        percent: 100,
        message: "仿真完成，新结果可查看",
        startTime,
        simulatedTime: finalTotalTime,
        totalTime: finalTotalTime,
      });
      appendConsoleEntry(
        "success",
        `${statusMessage}，可在“结果”页签查看；最大方程残差 ${formatNumber(result.diagnostics.pressureFlow.maxScaledResidual)}`,
      );
    } else {
      setSimulationProgress((current) => ({
        ...current,
        state: resultStatus === "stopped" ? "warning" : "error",
        percent: finalPercent,
        message:
          resultStatus === "stopped"
            ? "仿真已停止"
            : resultStatus === "stalled"
              ? "仿真因进度异常终止"
              : "仿真异常终止",
        startTime,
        simulatedTime: finalSimulatedTime,
        totalTime: finalTotalTime,
      }));
      appendConsoleEntry(resultStatus === "stopped" ? "warning" : "error", statusMessage);
    }

    if (!hasUsableSamples) {
      appendConsoleEntry("warning", "有效计算步不足，未生成部分结果页面");
      return;
    }

    const nextSnapshot: SimulationResultsSnapshot = {
      id: `simulation-${Date.now()}`,
      createdAt: new Date().toISOString(),
      project: cloneValue(project),
      result: cloneValue(result),
    };
    setResultSnapshot(nextSnapshot);
    storeResultSnapshot(nextSnapshot);
    setHasUnreadResults(true);
  };

  const stopSimulation = async () => {
    const simulationId = activeSimulationIdRef.current;
    if (!simulationId || simulationStopPending || simulationProgress.state !== "running") {
      return;
    }

    setSimulationStopPending(true);
    setSimulationProgress((current) => ({ ...current, message: "正在停止仿真" }));
    appendConsoleEntry("warning", "已请求停止仿真，正在等待当前积分步结束并整理部分结果");
    try {
      const response = await requestSimulationCancellation(simulationId, "user");
      if (!response.accepted) {
        appendConsoleEntry("info", "仿真任务已经结束，正在读取最终状态");
      }
    } catch (error) {
      setSimulationStopPending(false);
      setSimulationProgress((current) => ({
        ...current,
        message: "停止请求失败，仿真可能仍在运行",
      }));
      appendConsoleEntry("error", `停止仿真失败：${formatError(error)}`);
    }
  };

  const runSimulation = async () => {
    const issues = checkModel();
    const modelErrors = issues.filter((issue) => issue.severity === "error");
    const simulationResolution = resolveSimulationConfig(
      simulationConfigRef.current,
    );
    const progressConfig = simulationResolution.ok
      ? simulationResolution.value
      : defaultSimulationConfig;
    if (modelErrors.length > 0) {
      setSimulationProgress({
        state: "error",
        percent: 0,
        message: "模型检查未通过",
        startTime: progressConfig.t_start,
        simulatedTime: progressConfig.t_start,
        totalTime: progressConfig.t_stop,
      });
      return;
    }
    if (!simulationResolution.ok) {
      appendConsoleEntry("error", simulationResolution.message);
      return;
    }
    const project: ExecutableProjectPayload = {
      ...buildCurrentProject(),
      simulation: simulationResolution.value,
    };
    setSimulationProgress({
      state: "running",
      percent: 0,
      message: "正在提交仿真任务",
      startTime: project.simulation.t_start,
      simulatedTime: project.simulation.t_start,
      totalTime: project.simulation.t_stop,
    });
    appendConsoleEntry(
      "info",
      `开始仿真：${projectNameRef.current || "untitled"}，时间范围 ${project.simulation.t_start} - ${project.simulation.t_stop} s`,
    );
    await runBusyAction("正在编译模型并运行仿真...", async () => {
      const xml = buildSystemXml(project, componentDefinitions, nodesRef.current);
      const simulationId = createSimulationId();
      activeSimulationIdRef.current = simulationId;
      setSimulationStopPending(false);
      let lastLoggedPhase = "";
      let lastLoggedBucket = -1;
      let lastWatchdogStatus: SimulationActivityWatchdogStatus = "progressing";
      try {
        const result = await streamSystemSimulation(
          xml,
          (event, watchdog) => {
            if (event.event !== "progress") {
              return;
            }
            const normalizedProgress = normalizeSimulationProgressEvent(
              event,
              project.simulation,
            );
            const reportsSimulationTime = ![
              "queued",
              "validation",
              "compilation",
              "initialization",
              "initializing",
            ].includes(event.phase);
            const progressMessage =
              watchdog?.status === "slow-active"
                ? `正在处理耗时积分步，内部计算仍活跃${
                    event.activityKind ? `（${event.activityKind}）` : ""
                  }，可手动停止`
                : watchdog?.status === "slow-telemetry-unavailable"
                  ? "积分步耗时较长，后端未提供活动遥测；任务保持运行，可手动停止"
                  : event.message;
            setSimulationProgress((current) => ({
              ...current,
              state: "running",
              percent: normalizedProgress.percent,
              message: progressMessage,
              simulatedTime: normalizedProgress.simulatedTime,
              totalTime: normalizedProgress.totalTime,
            }));
            if (watchdog && watchdog.status !== lastWatchdogStatus) {
              if (watchdog.status === "slow-active") {
                appendConsoleEntry(
                  "warning",
                  `积分步超过 ${SIMULATION_ACTIVITY_STALL_TIMEOUT_SECONDS} 秒尚未接受，但后端内部活动仍在推进；继续等待，可随时手动停止`,
                );
              } else if (watchdog.status === "slow-telemetry-unavailable") {
                appendConsoleEntry(
                  "warning",
                  `积分步超过 ${SIMULATION_ACTIVITY_STALL_TIMEOUT_SECONDS} 秒尚未接受，且后端未提供活动遥测；将按 ${SIMULATION_SOLVER_STALL_TIMEOUT_MINUTES} 分钟保守上限继续等待，可手动停止`,
                );
              } else if (lastWatchdogStatus !== "progressing") {
                appendConsoleEntry("info", "求解器已接受新的积分步，仿真继续推进");
              }
              lastWatchdogStatus = watchdog.status;
            }
            const progressBucket = Math.floor(normalizedProgress.percent / 10);
            if (event.phase !== lastLoggedPhase || progressBucket !== lastLoggedBucket) {
              const progressDetail = reportsSimulationTime
                ? ` (${normalizedProgress.simulatedTime.toFixed(2)} s / ${normalizedProgress.totalTime.toFixed(2)} s，${normalizedProgress.percent}%)`
                : "";
              appendConsoleEntry("info", `${event.message}${progressDetail}`);
              lastLoggedPhase = event.phase;
              lastLoggedBucket = progressBucket;
            }
          },
          simulationId,
        );
        publishSimulationResult(result, project);
      } catch (error) {
        let failure: unknown = error;
        if (
          error instanceof SimulationStreamError &&
          (error.code === "STREAM_IDLE_TIMEOUT" || error.code === "SOLVER_STALLED")
        ) {
          setSimulationStopPending(true);
          appendConsoleEntry(
            "error",
            error.code === "SOLVER_STALLED"
              ? error.message.includes("内部活动")
                ? solverActivityStallTimeoutMessage("recovering")
                : solverStallTimeoutMessage("recovering")
              : "超过 30 秒未收到后端数据，正在终止任务并恢复部分结果",
          );
          try {
            await requestSimulationCancellation(simulationId, "stalled");
            const task = await waitForSimulationTaskCompletion(simulationId);
            if (task.result) {
              publishSimulationResult(task.result, project);
              return;
            }
            if (task.error?.event === "error") {
              failure = new SimulationStreamError(
                task.error.message,
                [],
                task.error.status,
              );
            } else {
              failure = new SimulationStreamError("仿真异常终止且没有可恢复的部分结果");
            }
          } catch (recoveryError) {
            failure = recoveryError;
          }
        }

        const message = formatError(failure);
        setSimulationProgress((current) => ({
          ...current,
          state: "error",
          percent: current.percent,
          message: "仿真失败",
        }));
        appendConsoleEntry("error", `仿真失败：${message}`);
        if (failure instanceof SimulationStreamError) {
          failure.issues
            .filter((issue) => issue !== message)
            .forEach((issue) => appendConsoleEntry("error", issue));
        }
        return;
      } finally {
        activeSimulationIdRef.current = null;
        setSimulationStopPending(false);
      }
    });
  };

  async function runBusyAction(message: string, action: () => Promise<void>) {
    setBusy(true);
    appendConsoleEntry("info", message);
    try {
      await action();
    } catch (error) {
      appendConsoleEntry("error", `操作失败：${formatError(error)}`);
    } finally {
      setBusy(false);
    }
  }

  const restoreRecoveryProject = () => {
    if (!recoveryProject || pendingPasteRef.current) {
      return;
    }
    applyProject(recoveryProject, "已恢复上次自动保存的工程", false);
    setRecoveryProject(null);
    setAutosaveReady(true);
  };

  const discardRecoveryProject = () => {
    localStorage.removeItem(AUTOSAVE_KEY);
    setRecoveryProject(null);
    setAutosaveReady(true);
    setSaveState("尚未保存");
    appendConsoleEntry("info", "已忽略上次的自动保存草稿");
  };

  const selectAllElements = useCallback(() => {
    setNodes((currentNodes) => currentNodes.map((node) => ({ ...node, selected: true })));
    setEdges((currentEdges) =>
      currentEdges.map((edge) =>
        edge.selected ? { ...edge, selected: false } : edge,
      ),
    );
    setSelectedNodeId(null);
    setSelectedEdgeId(null);
  }, [setEdges, setNodes]);

  const deleteSelection = useCallback(() => {
    const nodeIds = new Set(
      nodesRef.current
        .filter((node) => node.selected || node.id === selectedNodeId)
        .map((node) => node.id),
    );
    const edgeIds = new Set(
      edgesRef.current
        .filter((edge) => edge.selected || edge.id === selectedEdgeId)
        .map((edge) => edge.id),
    );
    if (nodeIds.size === 0 && edgeIds.size === 0) {
      appendConsoleEntry("warning", "请先选择需要删除的组件或连接");
      return;
    }
    cancelPortConnection();
    recordHistory();
    const remainingNodes = nodesRef.current.filter((node) => !nodeIds.has(node.id));
    const repairedGasReferences = repairAmesimGasReferences(
      remainingNodes,
      componentDefinitions,
    );
    const explicitlyDeletedEdges = edgesRef.current.filter(
      (edge) =>
        edgeIds.has(edge.id) &&
        !nodeIds.has(edge.source) &&
        !nodeIds.has(edge.target),
    );
    const separatedNodes = separateDeletedContactEdges(
      repairedGasReferences.nodes,
      explicitlyDeletedEdges,
    );
    const remainingEdges = edgesRef.current.filter(
        (edge) =>
          !edgeIds.has(edge.id) &&
          !nodeIds.has(edge.source) &&
          !nodeIds.has(edge.target),
    );
    nodesRef.current = separatedNodes;
    edgesRef.current = remainingEdges;
    setNodes(separatedNodes);
    setEdges(remainingEdges);
    setSelectedNodeId(null);
    setSelectedEdgeId(null);
    appendConsoleEntry(
      "info",
      `已删除 ${nodeIds.size} 个组件和 ${edgeIds.size} 条连接`,
    );
    if (repairedGasReferences.repairedReferenceCount > 0) {
      appendConsoleEntry(
        "warning",
        `介质定义已删除，${repairedGasReferences.repairedReferenceCount} 个介质物性引用已切回 0 — 空气（理想气体，内置默认）`,
      );
    }
  }, [
    appendConsoleEntry,
    cancelPortConnection,
    componentDefinitions,
    recordHistory,
    selectedEdgeId,
    selectedNodeId,
    setEdges,
    setNodes,
  ]);

  const toggleSnap = () => {
    const nextEnabled = !snapEnabled;
    setSnapEnabled(nextEnabled);
  };

  const toggleGridLines = () => {
    const nextVisible = !gridVisibility.lines;
    setGridVisibility((current) => ({ ...current, lines: nextVisible }));
  };

  const toggleGridDots = () => {
    const nextVisible = !gridVisibility.dots;
    setGridVisibility((current) => ({ ...current, dots: nextVisible }));
  };

  const fitModelingView = () => {
    if (nodesRef.current.length === 0) {
      appendConsoleEntry("warning", "画布中没有可适配的组件");
      return;
    }
    void reactFlow.fitView({ duration: 180, minZoom: 0.1, padding: 0.18 });
  };

  useEffect(() => {
    try {
      const project = parseProjectPayload(localStorage.getItem(AUTOSAVE_KEY));
      if (project && (project.nodes.length > 0 || project.edges.length > 0)) {
        setRecoveryProject(project);
        setSaveState("发现可恢复的本地草稿");
      } else {
        setAutosaveReady(true);
        setSaveState("尚未保存");
      }
    } catch {
      localStorage.removeItem(AUTOSAVE_KEY);
      setAutosaveReady(true);
      setSaveState("尚未保存");
    }
  }, []);

  useEffect(() => {
    if (!autosaveReady || nodeDragActive || recoveryProject) {
      return;
    }
    setSaveState("有未保存更改");
    const timer = window.setTimeout(() => {
      try {
        const project = buildProjectPayload(
          projectNameRef.current,
          nodesRef.current,
          edgesRef.current,
          simulationConfigRef.current,
        );
        localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(project));
        setSaveState(`已自动保存 ${formatTime(new Date())}`);
      } catch (error) {
        setSaveState(`自动保存失败：${formatError(error)}`);
      }
    }, 600);
    return () => window.clearTimeout(timer);
  }, [autosaveReady, nodeDragActive, projectChangeSignature, recoveryProject]);

  useEffect(() => {
    const syncViewFromLocation = () => {
      if (pendingPasteRef.current) {
        if (window.location.hash !== "#/modeling") {
          window.history.replaceState(
            { workspaceView: "modeling" },
            "",
            "#/modeling",
          );
        }
        setActiveView("modeling");
        return;
      }
      setActiveView(workspaceViewFromLocation());
    };
    window.addEventListener("hashchange", syncViewFromLocation);
    window.addEventListener("popstate", syncViewFromLocation);
    return () => {
      window.removeEventListener("hashchange", syncViewFromLocation);
      window.removeEventListener("popstate", syncViewFromLocation);
    };
  }, []);

  useEffect(() => {
    if (activeView !== "modeling") {
      cancelPortConnection();
    }
  }, [activeView, cancelPortConnection]);

  useEffect(() => {
    if (activeView === "results" && hasUnreadResults) {
      setHasUnreadResults(false);
    }
  }, [activeView, hasUnreadResults]);

  useEffect(() => {
    if (activeView !== "modeling") {
      return;
    }
    const handleKeyDown = (event: KeyboardEvent) => {
      const key = event.key.toLowerCase();
      const commandKey = event.ctrlKey || event.metaKey;
      if (event.key === "Escape" && pendingPasteRef.current) {
        event.preventDefault();
        cancelPendingPaste();
        return;
      }
      if (event.key === "Escape" && activePortConnection) {
        event.preventDefault();
        cancelPortConnection();
        return;
      }
      if (shouldPreserveNativeConsoleShortcut(event, commandKey, key)) {
        return;
      }
      if (event.ctrlKey && !event.shiftKey && key === "r") {
        event.preventDefault();
        pendingPasteRef.current ? rotatePendingPaste() : rotateSelection();
        return;
      }
      if (
        isEditableTarget(event.target) ||
        (event.target instanceof Element &&
          Boolean(event.target.closest("[data-editor-shortcuts-ignore='true']")))
      ) {
        return;
      }
      if (
        pendingPasteRef.current &&
        ((event.shiftKey && !commandKey && !event.altKey && key === "h") ||
          (commandKey && ["a", "c", "v", "y", "z"].includes(key)))
      ) {
        event.preventDefault();
        return;
      }
      if (event.shiftKey && !commandKey && !event.altKey && key === "h") {
        event.preventDefault();
        mirrorSelection();
      } else if (commandKey && key === "z") {
        event.preventDefault();
        event.shiftKey ? redo() : undo();
      } else if (commandKey && key === "y") {
        event.preventDefault();
        redo();
      } else if (commandKey && key === "c") {
        event.preventDefault();
        copySelection();
      } else if (commandKey && key === "v") {
        event.preventDefault();
        pasteSelection();
      } else if (commandKey && key === "a") {
        event.preventDefault();
        selectAllElements();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [
    activePortConnection,
    activeView,
    cancelPendingPaste,
    cancelPortConnection,
    copySelection,
    mirrorSelection,
    pasteSelection,
    redo,
    rotatePendingPaste,
    rotateSelection,
    selectAllElements,
    undo,
  ]);

  const simulationConsole = USE_DOCKED_SIMULATION_CONSOLE ? (
    <DockedSimulationConsole
      entries={consoleEntries}
      mode={consoleMode}
      onClear={() => setConsoleEntries([])}
      onModeChange={changeConsoleMode}
      onStop={() => void stopSimulation()}
      progress={simulationProgress}
      stopPending={simulationStopPending}
    />
  ) : (
    <SimulationConsole
      entries={consoleEntries}
      mode={consoleMode}
      onClear={() => setConsoleEntries([])}
      onModeChange={changeConsoleMode}
      onStop={() => void stopSimulation()}
      progress={simulationProgress}
      stopPending={simulationStopPending}
    />
  );
  const handleDragConnectStart = useCallback<OnConnectStart>(
    (_event, { nodeId, handleId }) =>
      beginPortConnection(nodeId, handleId, "drag"),
    [beginPortConnection],
  );
  const handleClickConnectStart = useCallback<OnConnectStart>(
    (_event, { nodeId, handleId }) =>
      beginPortConnection(nodeId, handleId, "click"),
    [beginPortConnection],
  );
  const handleModelingEdgeClick = useCallback<
    EdgeMouseHandler<SimulationEdge>
  >(
    (_event, edge) => {
      cancelPortConnection();
      setSelectedEdgeId(edge.id);
      setSelectedNodeId(null);
    },
    [cancelPortConnection],
  );
  const handleModelingEdgesDelete = useCallback(() => {
    setSelectedEdgeId(null);
  }, []);
  const handleModelingNodeClick = useCallback<
    NodeMouseHandler<SimulationNode>
  >(
    (event, node) => {
      if (
        !(event.target instanceof Element) ||
        !event.target.closest(".port-handle")
      ) {
        cancelPortConnection();
      }
      setSelectedNodeId(node.id);
      setSelectedEdgeId(null);
    },
    [cancelPortConnection],
  );
  const handleModelingNodesDelete = useCallback(() => {
    setSelectedNodeId(null);
    cancelPortConnection();
  }, [cancelPortConnection]);
  const handleModelingPaneClick = useCallback(
    (event: ReactMouseEvent) => {
      setSelectedNodeId(null);
      setSelectedEdgeId(null);
      const connectionDraft = portConnectionDraftRef.current;
      if (activePortConnection?.mode === "click" && connectionDraft) {
        const waypoint = reactFlow.screenToFlowPosition(
          { x: event.clientX, y: event.clientY },
          { snapToGrid: false },
        );
        const previousWaypoint = connectionDraft.waypoints.at(-1);
        if (
          !previousWaypoint ||
          Math.hypot(
            waypoint.x - previousWaypoint.x,
            waypoint.y - previousWaypoint.y,
          ) > 1
        ) {
          const nextDraft = {
            pointer: waypoint,
            waypoints: [...connectionDraft.waypoints, waypoint],
          };
          portConnectionDraftRef.current = nextDraft;
          setPortConnectionDraft(nextDraft);
        }
        return;
      }
      cancelPortConnection();
    },
    [activePortConnection, cancelPortConnection, reactFlow],
  );
  const handleModelingSelectionChange = useCallback<
    OnSelectionChangeFunc<SimulationNode, SimulationEdge>
  >(({ nodes: selectedNodes, edges: selectedEdges }) => {
    setSelectedNodeId(selectedNodes.length === 1 ? selectedNodes[0].id : null);
    setSelectedEdgeId(
      selectedNodes.length === 0 && selectedEdges.length === 1
        ? selectedEdges[0].id
        : null,
    );
  }, []);

  if (activeView === "results") {
    return resultSnapshot ? (
      <ReactFlowProvider>
        <SimulationResultsView
          gridVisibility={gridVisibility}
          key={resultSnapshot.id}
          nodeTypes={nodeTypes}
          onSnapshotLoad={loadSimulationResultsSnapshot}
          onViewChange={changeWorkspaceView}
          resolvePortPlacement={resultNodePortFlowPlacement}
          snapshot={resultSnapshot}
        />
      </ReactFlowProvider>
    ) : (
      <EmptySimulationResultsView
        onSnapshotLoad={loadSimulationResultsSnapshot}
        onViewChange={changeWorkspaceView}
      />
    );
  }

  const componentNameError = selectedNode
    ? !selectedNode.data.label.trim()
      ? "组件名称不能为空"
      : duplicateNames.has(selectedNode.data.label.trim())
        ? "组件名称不能重复"
        : ""
    : "";
  const componentParameterRows: ParameterTableRow[] =
    selectedNode && selectedDefinition
      ? [
          {
            id: "component-name",
            name: "组件名称",
            value: (
              <input
                aria-invalid={Boolean(componentNameError)}
                aria-label="组件名称"
                onBlur={finishHistoryEdit}
                onChange={(event) =>
                  updateSelectedNode((node) => ({
                    ...node,
                    data: { ...node.data, label: event.target.value },
                  }))
                }
                onFocus={recordHistory}
                value={selectedNode.data.label}
              />
            ),
            error: componentNameError || undefined,
            description: "画布中用于识别该组件的名称，必须非空且不能与其他组件重复。",
          },
          {
            id: "component-id",
            name: "节点 ID",
            value: (
              <span className="parameter-table-read-only-value">
                {selectedNode.id}
              </span>
            ),
            readOnly: true,
            description: "系统为画布节点分配的稳定标识，用于工程数据和连接关系。",
          },
          ...orderedParameterEntries(selectedDefinition)
            .filter(([, definition]) =>
              parameterIsVisible(definition, selectedNode.data.parameters),
            )
            .map(([key, definition]): ParameterTableRow => {
              const selectedUnit =
                selectedNode.data.parameterUnits[key] ?? definition.unit ?? "";
              const units = parameterUnitOptions(definition);
              const baseValue = selectedNode.data.parameters[key] ?? "";
              const displayValue = displayParameterValue(
                baseValue,
                definition,
                selectedUnit,
                selectedNode.data.parameterScientificNotation[key],
              );
              const mediumDefinitionIndex =
                isAmesimGasMediumDefinition(selectedDefinition) && key === "gi";
              const gasReference =
                !mediumDefinitionIndex &&
                definition.editor === "amesimGasReference";
              const gasPropertyModel =
                definition.editor === "amesimGasPropertyModel";
              const genericChoice = definition.editor === "choice";
              const parameterLabel = mediumDefinitionIndex
                ? "介质定义索引"
                : gasReference
                  ? "介质物性索引"
                  : definition.label;
              const gasReferenceIndex = gasReference
                ? normalizeAmesimGasIndex(baseValue)
                : null;
              const gasReferenceAvailable =
                gasReferenceIndex !== null &&
                amesimGasMediumOptions.some(
                  (option) => option.value === gasReferenceIndex,
                );
              const optionValue = numericChoiceValue(baseValue);
              const optionAvailable =
                (gasPropertyModel || genericChoice) &&
                optionValue !== null &&
                (definition.options ?? []).some(
                  (option) => option.value === optionValue,
                );
              const draftError = componentParameterDraftErrors[
                `${selectedNode.id}:${key}`
              ];
              const error =
                draftError || componentParameterValidationMessage(
                  definition,
                  baseValue,
                  selectedUnit,
                  gasReference ? amesimGasMediumOptions : undefined,
                  selectedDefinition.type,
                  key,
                );
              let valueControl: ReactNode;
              if (mediumDefinitionIndex) {
                valueControl = (
                  <input
                    aria-label={`${parameterLabel}（自动分配）`}
                    className="parameter-table-read-only-value"
                    readOnly
                    value={String(baseValue)}
                  />
                );
              } else if (gasReference) {
                valueControl = (
                  <select
                    aria-invalid={Boolean(error)}
                    aria-label={parameterLabel}
                    onBlur={finishHistoryEdit}
                    onChange={(event) =>
                      updateSelectedChoice(key, Number(event.target.value))
                    }
                    onFocus={recordHistory}
                    value={
                      gasReferenceAvailable ? String(gasReferenceIndex) : ""
                    }
                  >
                    {!gasReferenceAvailable ? (
                      <option disabled value="">
                        当前引用无效，请重新选择
                      </option>
                    ) : null}
                    {amesimGasMediumOptions.map((option) => (
                      <option key={option.value} value={option.value}>
                        {option.value}
                      </option>
                    ))}
                  </select>
                );
              } else if (gasPropertyModel || genericChoice) {
                valueControl = (
                  <select
                    aria-invalid={Boolean(error)}
                    aria-label={parameterLabel}
                    onBlur={finishHistoryEdit}
                    onChange={(event) =>
                      updateSelectedChoice(key, Number(event.target.value))
                    }
                    onFocus={recordHistory}
                    value={
                      optionAvailable ? String(optionValue) : ""
                    }
                  >
                    {!optionAvailable ? (
                      <option disabled value="">
                        {gasPropertyModel
                          ? "当前模型无效，请重新选择"
                          : "当前选项无效，请重新选择"}
                      </option>
                    ) : null}
                    {(definition.options ?? []).map((option) => (
                      <option key={option.value} value={option.value}>
                        {option.label}
                      </option>
                    ))}
                  </select>
                );
              } else {
                valueControl = (
                  <DeferredNumberInput
                    ariaLabel={definition.label}
                    invalid={Boolean(error)}
                    onCommit={(value) =>
                      updateSelectedParameter(key, definition, value)
                    }
                    onEditEnd={finishHistoryEdit}
                    onEditStart={recordHistory}
                    value={displayValue}
                  />
                );
              }
              const unitControl =
                units.length > 0 ? (
                  <select
                    aria-label={`${definition.label}单位`}
                    onBlur={finishHistoryEdit}
                    onChange={(event) =>
                      updateSelectedParameterUnit(key, event.target.value)
                    }
                    onFocus={recordHistory}
                    value={selectedUnit}
                  >
                    {units.map((unit) => (
                      <option key={unit.value} value={unit.value}>
                        {unit.label}
                      </option>
                    ))}
                  </select>
                ) : undefined;
              return {
                id: `component-parameter-${key}`,
                name: parameterLabel,
                value: valueControl,
                unit: unitControl,
                error: error || undefined,
                readOnly: mediumDefinitionIndex,
                help: mediumDefinitionIndex
                  ? "索引由画布自动维护；0 保留给内置空气。"
                  : undefined,
                description: definition.description,
                defaultValue: parameterDefaultMetadata(
                  definition,
                  selectedUnit,
                ),
                range: parameterRangeMetadata(definition, selectedUnit),
                currentUnit: parameterCurrentUnitMetadata(
                  definition,
                  selectedUnit,
                ),
                calculatedValue: parameterCalculatedValueMetadata(
                  baseValue,
                  definition,
                  selectedUnit,
                ),
              };
            }),
        ]
      : [];
  const componentParameterGroups: ParameterTableGroup[] =
    selectedNode && selectedDefinition
      ? (selectedDefinition.parameterGroups ?? []).flatMap((group) => {
          const rowIds = group.parameters.flatMap((name) => {
            const definition = selectedDefinition.parameters[name];
            return definition &&
              parameterIsVisible(definition, selectedNode.data.parameters)
              ? [`component-parameter-${name}`]
              : [];
          });
          const invalidParameters = group.parameters.filter((name) => {
            const definition = selectedDefinition.parameters[name];
            if (!definition) {
              return false;
            }
            const selectedUnit =
              selectedNode.data.parameterUnits[name] ?? definition.unit ?? "";
            const mediumDefinitionIndex =
              isAmesimGasMediumDefinition(selectedDefinition) && name === "gi";
            const gasReference =
              !mediumDefinitionIndex &&
              definition.editor === "amesimGasReference";
            return Boolean(
              componentParameterValidationMessage(
                definition,
                selectedNode.data.parameters[name] ?? "",
                selectedUnit,
                gasReference ? amesimGasMediumOptions : undefined,
                selectedDefinition.type,
                name,
              ),
            );
          });
          const hiddenErrorCount = invalidParameters.filter((name) => {
            const definition = selectedDefinition.parameters[name];
            return (
              definition &&
              !parameterIsVisible(definition, selectedNode.data.parameters)
            );
          }).length;
          return rowIds.length > 0 || invalidParameters.length > 0
            ? [
                {
                  id: `${selectedNode.id}:${group.id}`,
                  label: group.label,
                  rowIds,
                  defaultExpanded: group.defaultExpanded,
                  errorCount: invalidParameters.length,
                  hiddenErrorCount,
                },
              ]
            : [];
        })
      : [];

  const simulationSettingErrors = simulationConfigValidationMessages(
    simulationConfig,
  );
  const simulationSettingRows: ParameterTableRow[] = [
    {
      id: "simulation-t-start",
      name: "起始时间",
      value: (
        <DeferredNumberInput
          ariaLabel="起始时间"
          invalid={Boolean(simulationSettingErrors.t_start)}
          value={simulationConfig.t_start}
          onCommit={(value) => updateSimulationConfig("t_start", value)}
          onEditEnd={finishHistoryEdit}
          onEditStart={recordHistory}
        />
      ),
      unit: <span>s</span>,
      description: "仿真时间区间的起点。",
      defaultValue: `${defaultSimulationConfig.t_start} s`,
      range: "有限数值",
      currentUnit: "s",
      error: simulationSettingErrors.t_start,
      calculatedValue: simulationCalculatedValueMetadata(
        simulationConfig.t_start,
        "s",
      ),
    },
    {
      id: "simulation-t-stop",
      name: "结束时间",
      value: (
        <DeferredNumberInput
          ariaLabel="结束时间"
          invalid={Boolean(simulationSettingErrors.t_stop)}
          value={simulationConfig.t_stop}
          onCommit={(value) => updateSimulationConfig("t_stop", value)}
          onEditEnd={finishHistoryEdit}
          onEditStart={recordHistory}
        />
      ),
      unit: <span>s</span>,
      description: "仿真时间区间的终点，必须大于起始时间。",
      defaultValue: `${defaultSimulationConfig.t_stop} s`,
      range: "> 起始时间",
      currentUnit: "s",
      error: simulationSettingErrors.t_stop,
      calculatedValue: simulationCalculatedValueMetadata(
        simulationConfig.t_stop,
        "s",
      ),
    },
    {
      id: "simulation-step",
      name: "采样步长",
      value: (
        <DeferredNumberInput
          ariaLabel="采样步长"
          invalid={Boolean(simulationSettingErrors.step)}
          value={simulationConfig.step}
          onCommit={(value) => updateSimulationConfig("step", value)}
          onEditEnd={finishHistoryEdit}
          onEditStart={recordHistory}
        />
      ),
      unit: <span>s</span>,
      description: "仿真结果输出与采样的时间间隔，必须大于 0。",
      defaultValue: `${defaultSimulationConfig.step} s`,
      range: "> 0",
      currentUnit: "s",
      error: simulationSettingErrors.step,
      calculatedValue: simulationCalculatedValueMetadata(
        simulationConfig.step,
        "s",
      ),
    },
    {
      id: "simulation-max-step",
      name: "最大积分步长",
      value: (
        <DeferredNumberInput
          ariaLabel="最大积分步长"
          invalid={Boolean(simulationSettingErrors.max_step)}
          value={simulationConfig.max_step}
          onCommit={(value) => updateSimulationConfig("max_step", value)}
          onEditEnd={finishHistoryEdit}
          onEditStart={recordHistory}
        />
      ),
      unit: <span>s</span>,
      description: "积分器允许采用的最大内部时间步长，必须大于 0。",
      defaultValue: `${defaultSimulationConfig.max_step} s`,
      range: "> 0",
      currentUnit: "s",
      error: simulationSettingErrors.max_step,
      calculatedValue: simulationCalculatedValueMetadata(
        simulationConfig.max_step,
        "s",
      ),
    },
    {
      id: "simulation-method",
      name: "求解器",
      value: (
        <select
          aria-label="求解器"
          value={simulationConfig.method}
          onChange={(event) =>
            updateSimulationConfig("method", event.target.value)
          }
          onBlur={finishHistoryEdit}
          onFocus={recordHistory}
        >
          {SUPPORTED_SOLVER_METHODS.map((method) => (
            <option key={method} value={method}>
              {method}
            </option>
          ))}
        </select>
      ),
      description: "用于求解模型微分方程的数值积分方法。",
      defaultValue: defaultSimulationConfig.method,
      range: SUPPORTED_SOLVER_METHODS.join(" / "),
    },
  ];
  const parameterTableAvailableWidth = Math.max(
    0,
    modelingPaneLayout.propertiesWidth,
  );

  return (
    <>
      <div className="app-shell">
      <header className="topbar">
        <div>
          <div className="product-name">System Simulation Flow</div>
          <div className="product-meta">React Flow 建模与仿真 MVP</div>
        </div>
        <WorkspaceViewTabs
          activeView="modeling"
          hasResults={Boolean(resultSnapshot)}
          hasUnreadResults={hasUnreadResults}
          onViewChange={changeWorkspaceView}
        />
        <div className="topbar-actions">
          <label className="project-name-field">
            <span>工程</span>
            <input
              disabled={Boolean(pendingPaste)}
              value={projectName}
              onChange={(event) => setProjectName(event.target.value)}
              onBlur={finishHistoryEdit}
              onFocus={recordHistory}
            />
          </label>
          <span className="save-indicator">{saveState}</span>
          <input
            accept="application/json,.json"
            className="visually-hidden"
            onChange={importProject}
            ref={fileInputRef}
            type="file"
          />
        </div>
      </header>

      <nav aria-label="工程与绘图工具" className="editor-toolbar">
        <div aria-label="工程文件" className="toolbar-group" role="group">
          <ToolbarButton
            disabled={busy || Boolean(pendingPaste)}
            icon={Save}
            label="保存工程"
            onClick={saveProject}
          />
          <ToolbarButton
            disabled={busy || Boolean(pendingPaste)}
            icon={FolderOpen}
            label="加载工程"
            onClick={loadProject}
          />
          <ToolbarButton
            disabled={Boolean(pendingPaste)}
            icon={FileDown}
            label="导出工程 JSON"
            onClick={exportProject}
          />
          <ToolbarButton
            disabled={Boolean(pendingPaste)}
            icon={FileUp}
            label="导入工程 JSON"
            onClick={() => fileInputRef.current?.click()}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="系统 XML" className="toolbar-group" role="group">
          <ToolbarButton
            disabled={busy || Boolean(pendingPaste)}
            icon={FileCode2}
            label="生成系统 XML"
            onClick={generateXml}
          />
          <ToolbarButton
            disabled={busy || Boolean(pendingPaste)}
            icon={Download}
            label="下载系统 XML"
            onClick={downloadXml}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="历史记录" className="toolbar-group" role="group">
          <ToolbarButton
            disabled={Boolean(pendingPaste) || !historyAvailability.canUndo}
            icon={Undo2}
            label="撤销 (Ctrl+Z)"
            onClick={undo}
          />
          <ToolbarButton
            disabled={Boolean(pendingPaste) || !historyAvailability.canRedo}
            icon={Redo2}
            label="重做 (Ctrl+Y)"
            onClick={redo}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="编辑" className="toolbar-group" role="group">
          <ToolbarButton
            disabled={Boolean(pendingPaste)}
            icon={Copy}
            label="复制 (Ctrl+C)"
            onClick={copySelection}
          />
          <ToolbarButton
            disabled={Boolean(pendingPaste)}
            icon={ClipboardPaste}
            label="粘贴 (Ctrl+V)"
            onClick={pasteSelection}
          />
          <ToolbarButton
            disabled={Boolean(pendingPaste)}
            icon={Trash2}
            label="删除 (Delete)"
            onClick={deleteSelection}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="组件变换" className="toolbar-group" role="group">
          <ToolbarButton
            disabled={!pendingPaste && selectedNodesForTools.length === 0}
            icon={RotateCw}
            label="顺时针旋转 90° (Ctrl+R)"
            onClick={pendingPaste ? rotatePendingPaste : rotateSelection}
          />
          <ToolbarButton
            disabled={Boolean(pendingPaste) || selectedNodesForTools.length === 0}
            icon={FlipHorizontal2}
            label="水平镜像 (Shift+H)"
            onClick={mirrorSelection}
            pressed={allSelectedNodesMirrored}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="画布显示" className="toolbar-group" role="group">
          <ToolbarButton
            icon={Magnet}
            label={snapEnabled ? "关闭网格吸附" : "开启网格吸附"}
            onClick={toggleSnap}
            pressed={snapEnabled}
          />
          <ToolbarButton
            icon={Grid2X2}
            label={gridVisibility.lines ? "隐藏主网格线" : "显示主网格线"}
            onClick={toggleGridLines}
            pressed={gridVisibility.lines}
          />
          <ToolbarButton
            icon={Grip}
            label={gridVisibility.dots ? "隐藏网格点" : "显示网格点"}
            onClick={toggleGridDots}
            pressed={gridVisibility.dots}
          />
          <ToolbarButton
            icon={Maximize2}
            label="适配视图"
            onClick={fitModelingView}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="模型检查与仿真" className="toolbar-group" role="group">
          <ToolbarButton
            accent
            disabled={Boolean(pendingPaste)}
            icon={ListChecks}
            label="检查模型"
            onClick={checkModel}
          />
          <ToolbarButton
            disabled={busy || Boolean(pendingPaste)}
            icon={Play}
            label="运行仿真"
            onClick={runSimulation}
            primary
          />
        </div>
      </nav>

      <main
        className={`workbench ${activeModelingPaneResize ? `resizing-${activeModelingPaneResize}` : ""}`}
        ref={workbenchRef}
        style={
          {
            "--palette-width": `${modelingPaneLayout.paletteWidth}px`,
            "--properties-width": `${modelingPaneLayout.propertiesWidth}px`,
            "--component-parameters-height": `${effectiveComponentParametersHeight}px`,
          } as CSSProperties
        }
      >
        <aside className="palette">
          <div className="panel-title palette-panel-title">
            <span>组件库</span>
            <small
              aria-describedby={
                componentCatalogStatus === "error"
                  ? "component-catalog-error-detail"
                  : undefined
              }
              aria-label={
                componentCatalogStatus === "ready"
                  ? componentCatalogMessage
                  : `组件库${componentCatalogStatus === "loading" ? "正在加载" : "加载失败"}：${componentCatalogMessage}`
              }
              aria-live="polite"
              className={`catalog-source ${componentCatalogStatus}`}
              title={componentCatalogMessage}
              role="status"
              tabIndex={componentCatalogStatus === "error" ? 0 : undefined}
            >
              <span aria-hidden="true" className="catalog-source-dot" />
              {componentCatalogStatus === "ready"
                ? componentCatalogMessage
                : componentCatalogStatus === "loading"
                  ? "加载中"
                  : "加载失败"}
              {componentCatalogStatus === "error" ? (
                <span
                  className="catalog-source-tooltip"
                  id="component-catalog-error-detail"
                  role="tooltip"
                >
                  {componentCatalogMessage}
                </span>
              ) : null}
            </small>
          </div>
          <div className="palette-list">
            {visibleComponentLibraries.map((library) => {
              const libraryCollapseKey = paletteLibraryCollapseKey(library.id);
              const libraryExpanded =
                !collapsedPaletteSections.has(libraryCollapseKey);
              const libraryContentId = paletteLibraryContentId(library.id);
              return (
                <section className="palette-library" key={library.id}>
                  <div className="palette-library-heading">
                    <button
                      aria-controls={libraryContentId}
                      aria-expanded={libraryExpanded}
                      className="palette-collapse-toggle palette-library-toggle"
                      onClick={() => togglePaletteSection(libraryCollapseKey)}
                      type="button"
                    >
                      <ChevronDown
                        aria-hidden="true"
                        className="palette-collapse-chevron"
                        size={14}
                        strokeWidth={1.8}
                      />
                      <strong>{library.label}</strong>
                    </button>
                    <small>
                      {library.components.length} 个组件
                    </small>
                  </div>
                  {libraryExpanded ? (
                    <div className="palette-library-content" id={libraryContentId}>
                      {groupLibraryComponents(library).map((category) => {
                        const categoryCollapseKey = paletteCategoryCollapseKey(
                          library.id,
                          category.id,
                        );
                        const categoryExpanded =
                          !collapsedPaletteSections.has(categoryCollapseKey);
                        const categoryItemsId = paletteCategoryItemsId(
                          library.id,
                          category.id,
                        );
                        return (
                          <div className="palette-category" key={category.id}>
                            <button
                              aria-controls={categoryItemsId}
                              aria-expanded={categoryExpanded}
                              className="palette-category-title palette-collapse-toggle"
                              onClick={() =>
                                togglePaletteSection(categoryCollapseKey)
                              }
                              type="button"
                            >
                              <ChevronDown
                                aria-hidden="true"
                                className="palette-collapse-chevron"
                                size={13}
                                strokeWidth={1.8}
                              />
                              <span>{category.label}</span>
                            </button>
                            {categoryExpanded ? (
                              <div
                                className="palette-category-items"
                                id={categoryItemsId}
                              >
                                {category.components.map((definition) => (
                                  <button
                                    aria-describedby={
                                      paletteIconPreview?.definition.type ===
                                      definition.type
                                        ? "palette-icon-preview"
                                        : undefined
                                    }
                                    aria-label={definition.label}
                                    className="palette-item"
                                    disabled={Boolean(pendingPaste)}
                                    draggable={!pendingPaste}
                                    key={definition.type}
                                    onBlur={dismissPaletteIconPreview}
                                    onDragStart={(event) =>
                                      onDragStart(event, definition.type)
                                    }
                                    onFocus={(event) =>
                                      schedulePaletteIconPreview(
                                        event.currentTarget,
                                        definition,
                                      )
                                    }
                                    onMouseEnter={(event) =>
                                      schedulePaletteIconPreview(
                                        event.currentTarget,
                                        definition,
                                      )
                                    }
                                    onMouseLeave={dismissPaletteIconPreview}
                                    type="button"
                                  >
                                    <span className="palette-icon">
                                      <ComponentSymbol
                                        parameters={defaultParametersByComponentType.get(
                                          definition.type,
                                        )}
                                        surface="palette"
                                        symbol={definition.symbol}
                                      />
                                    </span>
                                    <span className="palette-item-copy">
                                      <strong className="palette-item-name">
                                        {definition.label}
                                      </strong>
                                    </span>
                                  </button>
                                ))}
                              </div>
                            ) : null}
                          </div>
                        );
                      })}
                    </div>
                  ) : null}
                </section>
              );
            })}
          </div>
        </aside>
        <div aria-hidden="true" className="palette-canvas-drag-templates">
          {visibleComponentLibraries.flatMap((library) =>
            library.components.map((definition) => (
              <span
                className="palette-canvas-drag-template"
                data-component-type={definition.type}
                key={definition.type}
              >
                <ComponentSymbol
                  parameters={defaultParametersByComponentType.get(
                    definition.type,
                  )}
                  surface="canvas"
                  symbol={definition.symbol}
                />
              </span>
            )),
          )}
        </div>

        <div
          aria-label="调整组件库宽度"
          aria-orientation="vertical"
          aria-valuemax={MAX_PALETTE_WIDTH}
          aria-valuemin={MIN_PALETTE_WIDTH}
          aria-valuenow={Math.round(modelingPaneLayout.paletteWidth)}
          className="modeling-pane-splitter"
          onDoubleClick={() => resetModelingPaneSize("palette-width")}
          onKeyDown={(event) =>
            resizeModelingPaneWithKeyboard(event, "palette-width")
          }
          onLostPointerCapture={stopModelingPaneResize}
          onPointerCancel={stopModelingPaneResize}
          onPointerDown={(event) =>
            startModelingPaneResize(event, "palette-width")
          }
          onPointerMove={moveModelingPaneResize}
          onPointerUp={stopModelingPaneResize}
          role="separator"
          tabIndex={0}
          title="拖动调整组件库宽度，双击恢复默认"
        >
          <span aria-hidden="true" />
        </div>

        <div className="modeling-canvas-stack">
          <section
            className={[
              "flow-canvas",
              activePortConnection?.mode === "click" ? "connection-planning" : "",
            ].filter(Boolean).join(" ")}
          onClickCapture={handleFlowClickCapture}
          onDragOver={(event) => {
            if (pendingPasteRef.current) {
              event.dataTransfer.dropEffect = "none";
              return;
            }
            event.preventDefault();
            event.dataTransfer.dropEffect = "move";
          }}
          onDrop={onDrop}
          onPointerCancelCapture={() => {
            pendingPasteMiddlePointerRef.current = null;
            setNodeDragActive(false);
            contactDragSessionRef.current = null;
            clearContactSnapCandidate();
            handleTightSelectionPointerCancel();
          }}
          onPointerDownCapture={handleFlowPointerDownCapture}
          onPointerMoveCapture={handleFlowPointerMoveCapture}
          onPointerUpCapture={handleFlowPointerUpCapture}
        >
          <ReactFlow
            colorMode="light"
            connectionMode={ConnectionMode.Loose}
            connectionLineType={ConnectionLineType.Step}
            connectionRadius={24}
            connectionDragThreshold={0}
            defaultEdgeOptions={MODELING_DEFAULT_EDGE_OPTIONS}
            defaultViewport={modelingViewportRef.current}
            edges={flowEdges}
            edgeTypes={contactAwareEdgeTypes}
            elementsSelectable={!pendingPaste}
            nodeTypes={nodeTypes}
            nodes={flowNodes}
            nodesConnectable={!pendingPaste}
            nodesDraggable={!pendingPaste}
            deleteKeyCode={pendingPaste ? null : MODELING_DELETE_KEYS}
            onConnect={onConnect}
            onConnectEnd={endDragPortConnection}
            onConnectStart={handleDragConnectStart}
            onClickConnectEnd={endClickPortConnection}
            onClickConnectStart={handleClickConnectStart}
            isValidConnection={isValidConnection}
            minZoom={0.1}
            onEdgeClick={handleModelingEdgeClick}
            onEdgesChange={handleEdgesChange}
            onEdgesDelete={handleModelingEdgesDelete}
            onNodeClick={handleModelingNodeClick}
            onNodeDrag={handleNodeDrag}
            onNodeDragStart={handleNodeDragStart}
            onNodeDragStop={handleNodeDragStop}
            onNodesChange={handleNodesChange}
            onNodesDelete={handleModelingNodesDelete}
            onMove={(_event, viewport) => {
              modelingViewportRef.current = { ...viewport };
              syncPendingPasteToPointer();
            }}
            onPaneClick={handleModelingPaneClick}
            onSelectionChange={handleModelingSelectionChange}
            onSelectionEnd={finishTightSelection}
            panActivationKeyCode="Space"
            panOnDrag={MODELING_PAN_ON_DRAG}
            panOnScroll
            panOnScrollMode={PanOnScrollMode.Vertical}
            panOnScrollSpeed={1}
            preventScrolling
            proOptions={MODELING_PRO_OPTIONS}
            selectionMode={SelectionMode.Partial}
            selectionOnDrag={!pendingPaste}
            snapGrid={MODELING_SNAP_GRID}
            snapToGrid={snapEnabled}
            zoomActivationKeyCode="Control"
            zoomOnDoubleClick={false}
            zoomOnPinch
            zoomOnScroll={false}
          >
            <AutoFitView
              enabled={renderedNodes.length > 0}
              expectedNodeCount={renderedNodes.length}
              requestKey={modelingFitRequest}
            />
            <PortGeometryRefresh
              nodeIds={renderedNodes.map((node) => node.id)}
              requestKey={modelingFitRequest}
            />
            <ConnectionDraftOverlay
              activeConnection={activePortConnection}
              draft={portConnectionDraft}
              nodes={nodes}
            />
            <CanvasGridBackground visibility={gridVisibility} />
            {pendingPaste ? (
              <Panel className="pending-paste-hint" position="top-center">
                待放置：左键放置 · 中键旋转 · Esc 取消
              </Panel>
            ) : null}
            {!pendingPaste && activePortConnection?.mode === "click" ? (
              <Panel className="pending-paste-hint" position="top-center">
                连接模式：单击空白添加折点 · 单击兼容端口完成 · Esc 取消
              </Panel>
            ) : null}
            {recoveryProject ? (
              <Panel className="recovery-banner" position="top-center">
                <span>检测到上次自动保存的工程</span>
                <button
                  disabled={Boolean(pendingPaste)}
                  onClick={restoreRecoveryProject}
                  type="button"
                >
                  恢复
                </button>
                <button
                  disabled={Boolean(pendingPaste)}
                  onClick={discardRecoveryProject}
                  type="button"
                >
                  忽略
                </button>
              </Panel>
            ) : null}
            <FlowViewportScrollbars
              deferBounds={nodeDragActive}
              nodes={renderedNodes}
            />
          </ReactFlow>
          </section>
          {USE_DOCKED_SIMULATION_CONSOLE ? simulationConsole : null}
        </div>

        <div
          aria-label="调整参数面板宽度"
          aria-orientation="vertical"
          aria-valuemax={MAX_PROPERTIES_WIDTH}
          aria-valuemin={MIN_PROPERTIES_WIDTH}
          aria-valuenow={Math.round(modelingPaneLayout.propertiesWidth)}
          className="modeling-pane-splitter"
          onDoubleClick={() => resetModelingPaneSize("properties-width")}
          onKeyDown={(event) =>
            resizeModelingPaneWithKeyboard(event, "properties-width")
          }
          onLostPointerCapture={stopModelingPaneResize}
          onPointerCancel={stopModelingPaneResize}
          onPointerDown={(event) =>
            startModelingPaneResize(event, "properties-width")
          }
          onPointerMove={moveModelingPaneResize}
          onPointerUp={stopModelingPaneResize}
          role="separator"
          tabIndex={0}
          title="拖动调整参数面板宽度，双击恢复默认"
        >
          <span aria-hidden="true" />
        </div>

        <aside
          aria-disabled={Boolean(pendingPaste)}
          className="properties"
          inert={Boolean(pendingPaste)}
        >
          <section
            aria-label="组件参数子栏"
            className="properties-subpane component-parameters-pane"
          >
            <div className="panel-title">组件参数</div>
            <div className="properties-subpane-content">
              {selectedNode && selectedDefinition ? (
                <ParameterTable
                  ariaLabel="组件参数"
                  availableWidth={parameterTableAvailableWidth}
                  columnLayout={parameterColumnLayout}
                  groups={componentParameterGroups}
                  onColumnLayoutChange={setParameterColumnLayout}
                  rows={componentParameterRows}
                />
              ) : (
                <div className="empty-state">选择画布上的组件后编辑参数</div>
              )}
            </div>
          </section>

          <div
            aria-label="调整组件参数和仿真设置区域高度"
            aria-orientation="horizontal"
            aria-valuemax={Math.max(
              MIN_COMPONENT_PARAMETERS_HEIGHT,
              effectiveComponentParametersHeight,
              modelingWorkbenchHeight -
                PROPERTIES_PANE_SPLITTER_SIZE -
                MIN_SIMULATION_SETTINGS_HEIGHT,
            )}
            aria-valuemin={MIN_COMPONENT_PARAMETERS_HEIGHT}
            aria-valuenow={Math.round(
              effectiveComponentParametersHeight,
            )}
            className="properties-pane-splitter"
            onDoubleClick={() =>
              resetModelingPaneSize("component-parameters-height")
            }
            onKeyDown={(event) =>
              resizeModelingPaneWithKeyboard(
                event,
                "component-parameters-height",
              )
            }
            onLostPointerCapture={stopModelingPaneResize}
            onPointerCancel={stopModelingPaneResize}
            onPointerDown={(event) =>
              startModelingPaneResize(event, "component-parameters-height")
            }
            onPointerMove={moveModelingPaneResize}
            onPointerUp={stopModelingPaneResize}
            role="separator"
            tabIndex={0}
            title="拖动调整两个参数子栏的高度，双击恢复默认"
          >
            <span aria-hidden="true" />
          </div>

          <section
            aria-label="仿真设置子栏"
            className="properties-subpane simulation-settings-pane"
          >
            <div className="panel-title">仿真设置</div>
            <div className="properties-subpane-content">
              <ParameterTable
                ariaLabel="仿真设置"
                availableWidth={parameterTableAvailableWidth}
                columnLayout={parameterColumnLayout}
                onColumnLayoutChange={setParameterColumnLayout}
                rows={simulationSettingRows}
              />
            </div>
          </section>
        </aside>
        </main>
      </div>
      {!USE_DOCKED_SIMULATION_CONSOLE ? simulationConsole : null}
      {paletteIconPreview && typeof document !== "undefined"
        ? createPortal(
            <div
              className="palette-icon-preview"
              id="palette-icon-preview"
              role="tooltip"
              style={{
                left: paletteIconPreview.left,
                position: "fixed",
                top: paletteIconPreview.top,
              }}
            >
              <span className="palette-icon-preview-symbol">
                <ComponentSymbol
                  parameters={defaultParameters(paletteIconPreview.definition)}
                  surface="palette"
                  symbol={paletteIconPreview.definition.symbol}
                />
              </span>
              <span className="palette-icon-preview-label">
                {paletteIconPreview.definition.label}
              </span>
            </div>,
            document.body,
          )
        : null}
    </>
  );
}

function buildProjectPayload(
  name: string,
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  simulation: SimulationConfig,
  calculateContactGeometry = true,
): ReactFlowProjectPayload {
  const contactGeometry = calculateContactGeometry
    ? buildNodePortGeometryIndex(nodes)
    : null;
  return {
    projectSchemaVersion: 1,
    name: name.trim() || "untitled",
    nodes: nodes.map((node) => ({
      id: node.id,
      type: "simulationComponent",
      position: {
        x: node.position.x,
        y: node.position.y,
      },
      data: {
        label: node.data.label,
        componentType: node.data.componentType,
        modelType: node.data.modelType,
        modelVersion: node.data.modelVersion,
        ports: node.data.ports.map((port) => ({ ...port })),
        parameters: { ...node.data.parameters },
        parameterUnits: { ...node.data.parameterUnits },
        parameterScientificNotation: {
          ...node.data.parameterScientificNotation,
        },
        rotation: normalizeNodeRotation(node.data.rotation),
        mirrored: Boolean(node.data.mirrored),
      },
    })),
    edges: edges.map((edge) => {
      if (
        typeof edge.sourceHandle !== "string" ||
        typeof edge.targetHandle !== "string"
      ) {
        throw new Error(`连接 ${edge.id} 缺少明确的接口标识`);
      }
      const routePoints = routePointsForEdge(edge);
      return {
        id: edge.id,
        source: edge.source,
        target: edge.target,
        sourceHandle: edge.sourceHandle,
        targetHandle: edge.targetHandle,
        data: {
          isContactEdge: contactGeometry
            ? isContactEdgeGeometryInIndex(contactGeometry, edge)
            : Boolean(edge.data?.isContactEdge),
          ...(routePoints.length > 0
            ? {
                routePoints: routePoints.map((point) => ({
                  ...point,
                })),
              }
            : {}),
        },
      };
    }),
    simulation,
  };
}

function numericChoiceValue(value: ParameterValue | undefined) {
  if (typeof value === "string" && value.trim() === "") {
    return null;
  }
  const numericValue = Number(value);
  return Number.isFinite(numericValue) ? numericValue : null;
}

function parameterIsVisible(
  definition: ParameterDefinition,
  parameters: Record<string, ParameterValue>,
) {
  // 只有一个固定选项的参数不是用户可配置项，不在右侧参数表制造无效行。
  if (definition.editor === "choice" && definition.options?.length === 1) {
    return false;
  }
  return (
    !definition.visibleWhen?.length ||
    definition.visibleWhen.every((condition) => {
      const currentValue = numericChoiceValue(parameters[condition.parameter]);
      return currentValue !== null && condition.values.includes(currentValue);
    })
  );
}

function normalizeParameterGroups(
  value: unknown,
  parameterNames: ReadonlySet<string>,
): ParameterGroupDefinition[] {
  if (!Array.isArray(value)) {
    return [];
  }
  const groupIds = new Set<string>();
  const groupedParameters = new Set<string>();
  const groups = value.flatMap((entry) => {
    if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
      return [];
    }
    const candidate = entry as Record<string, unknown>;
    const id = typeof candidate.id === "string" ? candidate.id.trim() : "";
    const label =
      typeof candidate.label === "string" ? candidate.label.trim() : "";
    if (!id || !label || groupIds.has(id) || !Array.isArray(candidate.parameters)) {
      return [];
    }
    const parameters = candidate.parameters.flatMap((parameter) => {
      if (
        typeof parameter !== "string" ||
        !parameterNames.has(parameter) ||
        groupedParameters.has(parameter)
      ) {
        return [];
      }
      groupedParameters.add(parameter);
      return [parameter];
    });
    if (parameters.length === 0) {
      return [];
    }
    groupIds.add(id);
    const numericOrder = Number(candidate.order);
    return [
      {
        id,
        label,
        order: Number.isInteger(numericOrder) ? numericOrder : 0,
        parameters,
        defaultExpanded: candidate.defaultExpanded === true,
      },
    ];
  });
  return groups.sort(
    (first, second) => first.order - second.order || first.id.localeCompare(second.id),
  );
}

function normalizeParameterVisibilityConditions(
  value: unknown,
): ParameterVisibilityCondition[] | undefined {
  if (!Array.isArray(value)) {
    return undefined;
  }
  const conditions = value.flatMap((entry) => {
    if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
      return [];
    }
    const candidate = entry as Record<string, unknown>;
    if (typeof candidate.parameter !== "string" || !candidate.parameter.trim()) {
      return [];
    }
    if (!Array.isArray(candidate.values)) {
      return [];
    }
    const values = [
      ...new Set(
        candidate.values.flatMap((item) => {
          const numericValue = Number(item);
          return Number.isFinite(numericValue) ? [numericValue] : [];
        }),
      ),
    ];
    return values.length > 0
      ? [{ parameter: candidate.parameter.trim(), values }]
      : [];
  });
  return conditions.length > 0 ? conditions : undefined;
}

function normalizeParameterScientificNotation(
  value: unknown,
): Record<string, ParameterScientificNotation> {
  if (!value || typeof value !== "object" || Array.isArray(value)) {
    return {};
  }
  const normalized: Record<string, ParameterScientificNotation> = {};
  Object.entries(value as Record<string, unknown>).forEach(([key, entry]) => {
    if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
      return;
    }
    const candidate = entry as Record<string, unknown>;
    if (
      typeof candidate.text !== "string" ||
      typeof candidate.unit !== "string" ||
      !isScientificNotationValue(candidate.text)
    ) {
      return;
    }
    normalized[key] = {
      text: candidate.text.trim(),
      unit: candidate.unit,
    };
  });
  return normalized;
}

/** 升级本次合同变更前保存的 AMESim 机械元件，保留其可执行语义。 */
function migrateLegacyAmesimComponents(
  project: ReactFlowProjectPayload,
  componentDefinitions: ComponentDefinition[],
) {
  const lmechn1Definition = componentDefinitions.find(
    (definition) =>
      definition.type === "amesim_lmechn1" &&
      definition.modelType === "amesim_lmechn1",
  );
  const forcDefinition = componentDefinitions.find(
    (definition) =>
      definition.type === "amesim_forc" &&
      definition.modelType === "amesim_forc",
  );

  const referencePortByNodeId = new Map<string, string>();
  let migratedForcNodeCount = 0;
  const nodes = project.nodes.map((node) => {
    const isLegacyLmechn1 =
      node.data.componentType === "amesim_lmechn1" &&
      node.data.modelType === "amesim_lmechn1" &&
      node.data.modelVersion === "0.1.0";
    if (
      isLegacyLmechn1 &&
      lmechn1Definition &&
      lmechn1Definition.modelVersion !== "0.1.0"
    ) {
      const rightPortCount = Number(node.data.parameters.v1);
      if (
        Number.isInteger(rightPortCount) &&
        rightPortCount >= 1 &&
        rightPortCount <= 8
      ) {
        referencePortByNodeId.set(node.id, `port_${rightPortCount + 1}`);
        return {
          ...node,
          data: {
            ...node.data,
            modelVersion: lmechn1Definition.modelVersion,
            // 旧 sum 数值没有参与方程；新合同仅公开实际支持的标准节点模式。
            parameters: { ...node.data.parameters, sum: 1 },
          },
        };
      }
    }

    const isLegacyForc =
      node.data.componentType === "amesim_forc" &&
      node.data.modelType === "amesim_forc" &&
      node.data.modelVersion === "0.1.0";
    if (
      isLegacyForc &&
      forcDefinition &&
      forcDefinition.modelVersion !== "0.1.0"
    ) {
      migratedForcNodeCount += 1;
      return {
        ...node,
        data: {
          ...node.data,
          modelVersion: forcDefinition.modelVersion,
          parameters: {
            ...node.data.parameters,
            direction: node.data.parameters.direction ?? 1,
          },
        },
      };
    }
    return node;
  });

  const edges = project.edges.map((edge) => {
    const sourceReferencePort = referencePortByNodeId.get(edge.source);
    const targetReferencePort = referencePortByNodeId.get(edge.target);
    return {
      ...edge,
      sourceHandle:
        sourceReferencePort && edge.sourceHandle === "port_9"
          ? sourceReferencePort
          : edge.sourceHandle,
      targetHandle:
        targetReferencePort && edge.targetHandle === "port_9"
          ? targetReferencePort
          : edge.targetHandle,
    };
  });

  return {
    project: { ...project, nodes, edges },
    migratedLmechn1NodeCount: referencePortByNodeId.size,
    migratedForcNodeCount,
  };
}

function normalizeLoadedNode(
  node: ProjectNodePayload,
  componentDefinitions: ComponentDefinition[],
): SimulationNode {
  const definition =
    componentDefinitions.find((item) => item.type === node.data.componentType) ??
    componentDefinitions.find((item) => item.modelType === node.data.modelType);
  const rawParameters = node.data.parameters;
  const modelContractCompatible = Boolean(
    definition &&
      node.data.componentType === definition.type &&
      node.data.modelType === definition.modelType &&
      node.data.modelVersion === definition.modelVersion,
  );
  const parameters = definition && modelContractCompatible
    ? { ...defaultParameters(definition), ...rawParameters }
    : { ...rawParameters };
  if (
    modelContractCompatible &&
    isAmesimGasMediumDefinition(definition) &&
    !Object.prototype.hasOwnProperty.call(rawParameters, "gi")
  ) {
    parameters.gi = "";
  }
  const parameterUnits = definition && modelContractCompatible
    ? { ...defaultParameterUnits(definition), ...(node.data.parameterUnits ?? {}) }
    : { ...(node.data.parameterUnits ?? {}) };
  const parameterScientificNotation = normalizeParameterScientificNotation(
    node.data.parameterScientificNotation,
  );
  const modelContractIssues = loadedNodeModelContractIssues(
    node,
    definition,
  );

  return {
    id: node.id,
    type: "simulationComponent",
    position: {
      x: node.position?.x ?? 0,
      y: node.position?.y ?? 0,
    },
    data: {
      label: node.data.label || definition?.label || node.id,
      componentType: node.data.componentType || definition?.type || "component",
      modelType: node.data.modelType || definition?.modelType || node.data.componentType,
      modelVersion: node.data.modelVersion,
      ...(modelContractIssues.length > 0 ? { modelContractIssues } : {}),
      // Catalog symbols are versioned presentation metadata. Prefer the current
      // definition so projects saved with an old generic icon are upgraded on load.
      symbol: definition?.symbol || node.data.symbol || node.data.componentType,
      ports: normalizeLoadedPorts(node.data.ports, definition),
      parameters,
      parameterUnits,
      parameterScientificNotation,
      rotation: normalizeNodeRotation(node.data.rotation),
      mirrored: Boolean(node.data.mirrored),
    },
  };
}

function normalizeLoadedPorts(
  rawPorts: PortDefinition[],
  definition?: ComponentDefinition,
): PortDefinition[] {
  const loadedPorts = rawPorts.map((port) => ({ ...port }));
  if (!definition) {
    return loadedPorts;
  }

  // 工程端口只是历史快照。端口名称及 kind/domain/role/flow direction
  // 都属于当前模型版本的目录合同，不能被旧工程覆盖或凭位置猜测。
  return definition.ports.map((port) => ({ ...port }));
}

function loadedNodeModelContractIssues(
  node: ProjectNodePayload,
  definition: ComponentDefinition | undefined,
) {
  const label = node.data.label || node.id;
  const issues: string[] = [];
  if (!definition) {
    issues.push(`组件“${label}”找不到当前组件目录定义`);
    return issues;
  }
  if (
    node.data.componentType !== definition.type ||
    node.data.modelType !== definition.modelType
  ) {
    issues.push(
      `组件“${label}”的工程类型与当前目录不一致（工程 ${node.data.componentType}/${node.data.modelType}，目录 ${definition.type}/${definition.modelType}）`,
    );
  }
  if (!node.data.modelVersion) {
    issues.push(`组件“${label}”缺少 modelVersion，无法确认方程和参数含义`);
  } else if (node.data.modelVersion !== definition.modelVersion) {
    issues.push(
      `组件“${label}”模型版本不匹配（工程 ${node.data.modelVersion}，当前 ${definition.modelVersion}）`,
    );
  }

  return issues;
}

function isPortNominalRole(value: unknown): value is PortNominalRole {
  return ["inlet", "outlet", "bidirectional", "input", "output"].includes(
    String(value),
  );
}

function findNodePort(
  nodes: SimulationNode[],
  componentId: string | null,
  portName: string | null,
) {
  if (!componentId || !portName) {
    return undefined;
  }
  const node = nodes.find((candidate) => candidate.id === componentId);
  return node
    ? displayedPortsForNodeData(node.data).find((port) => port.name === portName)
    : undefined;
}

function portConnectionKey(nodeId: string, portName: string) {
  return `${nodeId}:${portName}`;
}

function isPortConnected(
  edges: SimulationEdge[],
  nodeId: string,
  portName: string,
) {
  return edges.some(
    (edge) =>
      (edge.source === nodeId && edge.sourceHandle === portName) ||
      (edge.target === nodeId && edge.targetHandle === portName),
  );
}

function portAcceptsAnotherConnection(
  edges: SimulationEdge[],
  nodeId: string,
  port: PortDefinition,
) {
  return !isPortConnected(edges, nodeId, port.name);
}

function arePortsCompatible(first: PortDefinition, second: PortDefinition) {
  if (first.kind !== second.kind || first.domain !== second.domain) {
    return false;
  }
  if (first.kind === "physical") {
    return true;
  }
  return new Set([first.nominalRole, second.nominalRole]).size === 2 &&
    [first.nominalRole, second.nominalRole].every((role) =>
      role === "input" || role === "output",
    );
}

function canConnectPorts(
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  connection: Connection | SimulationEdge,
) {
  if (
    !connection.source ||
    !connection.target ||
    connection.source === connection.target
  ) {
    return false;
  }
  const first = findNodePort(nodes, connection.source, connection.sourceHandle ?? null);
  const second = findNodePort(nodes, connection.target, connection.targetHandle ?? null);
  if (!first || !second || !arePortsCompatible(first, second)) {
    return false;
  }
  return (
    portAcceptsAnotherConnection(edges, connection.source, first) &&
    portAcceptsAnotherConnection(edges, connection.target, second)
  );
}

function connectionIdentity(edge: SimulationEdge, unordered: boolean) {
  const endpoints = [
    `${edge.source}:${edge.sourceHandle ?? ""}`,
    `${edge.target}:${edge.targetHandle ?? ""}`,
  ];
  if (unordered) {
    endpoints.sort();
  }
  return endpoints.join(unordered ? "--" : "->");
}

function loadProjectEdges(edges: ProjectEdgePayload[], nodes: SimulationNode[]) {
  const loadedEdges: SimulationEdge[] = [];
  const droppedEdges: Array<{ id: string; reason: string }> = [];
  const nodeById = new Map(nodes.map((node) => [node.id, node] as const));
  const portByNodeId = new Map(
    nodes.map((node) => [
      node.id,
      new Map(
        displayedPortsForNodeData(node.data).map((port) => [port.name, port] as const),
      ),
    ] as const),
  );
  const occupiedPortKeys = new Set<string>();
  edges.forEach((edge) => {
    const routePoints = Array.isArray(edge.data.routePoints)
      ? edge.data.routePoints.map((point) => ({ ...point }))
      : undefined;
    const candidate: SimulationEdge = {
      ...edge,
      data: {
        ...edge.data,
        ...(routePoints && routePoints.length > 0 ? { routePoints } : {}),
      },
      type: CONTACT_AWARE_EDGE_TYPE,
    };
    const reason = loadedEdgeContractIssue(
      nodeById,
      portByNodeId,
      occupiedPortKeys,
      candidate,
    );
    if (reason) {
      droppedEdges.push({ id: edge.id, reason });
      return;
    }
    loadedEdges.push(candidate);
    occupiedPortKeys.add(
      portConnectionKey(candidate.source, candidate.sourceHandle ?? ""),
    );
    occupiedPortKeys.add(
      portConnectionKey(candidate.target, candidate.targetHandle ?? ""),
    );
  });
  return { edges: loadedEdges, droppedEdges };
}

function projectContentSignature(
  name: string,
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  simulation: SimulationConfig,
) {
  // 选择、拖动和参数编辑需要快速判断“模型检查结果是否仍有效”。
  // 接触边状态可由节点位置和接口信息推导，不应为生成签名再次执行整图几何计算。
  return JSON.stringify(
    buildProjectPayload(name, nodes, edges, simulation, false),
  );
}

function modelValidationSignature(
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  simulation: SimulationConfig,
) {
  // 画布坐标、旋转、镜像和科学计数法展示格式不参与模型有效性判断。
  // 将它们排除后，移动/选择元件不会让检查结果失效，也不会序列化无关展示状态。
  return JSON.stringify({
    nodes: nodes.map((node) => ({
      id: node.id,
      label: node.data.label,
      componentType: node.data.componentType,
      modelType: node.data.modelType,
      modelVersion: node.data.modelVersion,
      modelContractIssues: node.data.modelContractIssues,
      ports: node.data.ports,
      parameters: node.data.parameters,
      parameterUnits: node.data.parameterUnits,
    })),
    edges: edges.map((edge) => ({
      id: edge.id,
      source: edge.source,
      sourceHandle: edge.sourceHandle,
      target: edge.target,
      targetHandle: edge.targetHandle,
    })),
    simulation,
  });
}

function loadedEdgeContractIssue(
  nodeById: ReadonlyMap<string, SimulationNode>,
  portByNodeId: ReadonlyMap<string, ReadonlyMap<string, PortDefinition>>,
  occupiedPortKeys: ReadonlySet<string>,
  edge: SimulationEdge,
) {
  if (edge.source === edge.target) {
    return "不允许连接同一组件";
  }
  const sourceNode = nodeById.get(edge.source);
  const targetNode = nodeById.get(edge.target);
  if (!sourceNode || !targetNode) {
    return "引用了不存在的组件";
  }
  const sourcePort = portByNodeId.get(sourceNode.id)?.get(edge.sourceHandle ?? "");
  const targetPort = portByNodeId.get(targetNode.id)?.get(edge.targetHandle ?? "");
  if (!sourcePort || !targetPort) {
    const endpoints = [
      !sourcePort ? `${sourceNode.data.label}.${edge.sourceHandle ?? "?"}` : null,
      !targetPort ? `${targetNode.data.label}.${edge.targetHandle ?? "?"}` : null,
    ].filter(Boolean);
    return `端口 ${endpoints.join("、")} 不在当前组件目录中（可能已删除或改名）`;
  }
  if (!arePortsCompatible(sourcePort, targetPort)) {
    return "当前目录中的端口类型、物理域或信号方向不兼容";
  }
  if (
    occupiedPortKeys.has(portConnectionKey(sourceNode.id, sourcePort.name)) ||
    occupiedPortKeys.has(portConnectionKey(targetNode.id, targetPort.name))
  ) {
    return "当前目录合同不允许端口被多条连接占用";
  }
  return null;
}

function takeNextNodeId(
  componentType: string,
  reservedNodeIds: ReadonlySet<string> = new Set(),
) {
  let nextNumber = nextNodeNumberByType[componentType] ?? 1;
  let candidate = `${componentType}_${nextNumber}`;
  while (reservedNodeIds.has(candidate)) {
    nextNumber += 1;
    candidate = `${componentType}_${nextNumber}`;
  }
  nextNodeNumberByType[componentType] = nextNumber + 1;
  return candidate;
}

function takeNextCopiedEdgeId(index: number, reservedEdgeIds: ReadonlySet<string>) {
  const baseId = `edge-copy-${Date.now()}-${index}`;
  let candidate = baseId;
  let suffix = 1;
  while (reservedEdgeIds.has(candidate)) {
    candidate = `${baseId}-${suffix}`;
    suffix += 1;
  }
  return candidate;
}

function syncNextNodeNumbers(nodes: SimulationNode[]) {
  Object.keys(nextNodeNumberByType).forEach((type) => {
    delete nextNodeNumberByType[type];
  });

  nodes.forEach((node) => {
    const componentType = node.data.componentType;
    const idPrefix = `${componentType}_`;
    if (!node.id.startsWith(idPrefix)) {
      return;
    }

    const nodeNumber = Number(node.id.slice(idPrefix.length));
    if (!Number.isInteger(nodeNumber) || nodeNumber < 1) {
      return;
    }

    nextNodeNumberByType[componentType] = Math.max(
      nextNodeNumberByType[componentType] ?? 1,
      nodeNumber + 1,
    );
  });
}

function findUnitOption(definition: ParameterDefinition, unitValue: string) {
  const options = parameterUnitOptions(definition);
  if (options.length === 0) {
    return { value: "", label: "", toBase: identityUnit, fromBase: identityUnit };
  }
  return (
    options.find((unit) => unit.value === unitValue) ??
    options[0]
  );
}

function parameterUnitOptions(definition: ParameterDefinition): UnitOption[] {
  if (!definition.unit) {
    return [];
  }
  const configured = definition.quantity
    ? unitOptions[definition.quantity]
    : undefined;
  if (configured?.length) {
    return configured;
  }
  return [
    {
      value: definition.unit,
      label: definition.unit,
      toBase: identityUnit,
      fromBase: identityUnit,
    },
  ];
}

function displayParameterValue(
  baseValue: ParameterValue,
  definition: ParameterDefinition,
  selectedUnit: string,
  scientificNotation?: ParameterScientificNotation,
) {
  if (typeof baseValue === "string" && baseValue.trim() === "") {
    return "";
  }
  const numericValue = Number(baseValue);
  if (!Number.isFinite(numericValue)) {
    return String(baseValue);
  }
  const displayValue = findUnitOption(definition, selectedUnit).fromBase(numericValue);
  if (
    scientificNotation &&
    isScientificNotationValue(scientificNotation.text)
  ) {
    return scientificNotation.unit === selectedUnit
      ? scientificNotation.text.trim()
      : formatScientificEditableNumber(displayValue, scientificNotation.text);
  }
  return formatEditableNumber(displayValue);
}

function formatEditableNumber(value: number) {
  if (!Number.isFinite(value)) {
    return "";
  }
  return Number(value.toPrecision(12)).toString();
}

const SCIENTIFIC_NOTATION_STYLE_PATTERN =
  /^[+-]?(?:\d+(?:\.(\d*))?|\.(\d+))([eE])([+-]?)(\d+)$/;

function formatScientificEditableNumber(value: number, notationHint: string) {
  if (!Number.isFinite(value)) {
    return "";
  }
  const style = SCIENTIFIC_NOTATION_STYLE_PATTERN.exec(notationHint.trim());
  if (!style) {
    return Number(value.toPrecision(12)).toExponential();
  }

  const minimumFractionDigits = (style[1] ?? style[2] ?? "").length;
  const exponentMarker = style[3];
  const showPositiveExponentSign = style[4] === "+";
  const roundedDisplayValue = Number(value.toPrecision(15));
  const [rawMantissa, rawExponent] = roundedDisplayValue.toExponential().split("e");
  const [wholePart, rawFraction = ""] = rawMantissa.split(".");
  let fraction = rawFraction;
  while (fraction.endsWith("0") && fraction.length > minimumFractionDigits) {
    fraction = fraction.slice(0, -1);
  }
  if (fraction.length < minimumFractionDigits) {
    fraction = fraction.padEnd(minimumFractionDigits, "0");
  }

  const exponent = Number(rawExponent);
  const exponentSign = exponent < 0 ? "-" : showPositiveExponentSign ? "+" : "";
  const exponentDigits = String(Math.abs(exponent));
  return `${wholePart}${fraction ? `.${fraction}` : ""}${exponentMarker}${exponentSign}${exponentDigits}`;
}

function parameterMetadataValue(
  value: ParameterValue,
  definition: ParameterDefinition,
  selectedUnit: string,
) {
  const displayValue = displayParameterValue(value, definition, selectedUnit);
  const option = definition.options?.find(
    (candidate) => candidate.value === Number(value),
  );
  return option ? `${displayValue}（${option.label}）` : displayValue;
}

function parameterDefaultMetadata(
  definition: ParameterDefinition,
  selectedUnit: string,
) {
  const defaultValue =
    definition.editor === "amesimGasReference" ? 0 : definition.default;
  return parameterMetadataValue(defaultValue, definition, selectedUnit);
}

function parameterRangeMetadata(
  definition: ParameterDefinition,
  selectedUnit: string,
) {
  const limits: string[] = [];
  if (definition.min !== undefined) {
    limits.push(
      `${definition.minExclusive ? ">" : "≥"} ${parameterMetadataValue(
        definition.min,
        definition,
        selectedUnit,
      )}`,
    );
  }
  if (definition.max !== undefined) {
    limits.push(
      `≤ ${parameterMetadataValue(definition.max, definition, selectedUnit)}`,
    );
  }
  if (limits.length > 0) {
    return limits.join("，");
  }
  if (definition.options?.length) {
    return definition.options
      .map((option) => `${option.value}（${option.label}）`)
      .join(" / ");
  }
  return undefined;
}

function parameterCurrentUnitMetadata(
  definition: ParameterDefinition,
  selectedUnit: string,
) {
  return parameterUnitOptions(definition).length > 0
    ? findUnitOption(definition, selectedUnit).label
    : undefined;
}

type NumericInputResolution =
  | { ok: true; value: number; expression: boolean }
  | { ok: false; message: string; expression: boolean };

function resolveNumericInput(value: ParameterValue): NumericInputResolution {
  if (typeof value === "number") {
    return Number.isFinite(value)
      ? { ok: true, value, expression: false }
      : { ok: false, message: "请输入有限数值", expression: false };
  }

  const normalizedValue = value.trim();
  if (!normalizedValue) {
    return { ok: false, message: "参数不能为空", expression: false };
  }
  const numericValue = Number(normalizedValue);
  if (Number.isFinite(numericValue)) {
    return { ok: true, value: numericValue, expression: false };
  }

  const evaluated = evaluateParameterExpression(normalizedValue);
  return evaluated.ok
    ? { ok: true, value: evaluated.value, expression: true }
    : {
        ok: false,
        message: `等式无法计算：${evaluated.message}`,
        expression: true,
      };
}

function resolveParameterValue(
  value: ParameterValue,
  definition: ParameterDefinition,
  selectedUnit: string,
): NumericInputResolution {
  const resolved = resolveNumericInput(value);
  if (!resolved.ok) {
    return resolved;
  }
  if (resolved.expression && definition.editor) {
    return {
      ok: false,
      message: "该离散参数只能通过下拉栏选择",
      expression: true,
    };
  }
  if (!resolved.expression) {
    return resolved;
  }

  const baseValue = findUnitOption(definition, selectedUnit).toBase(
    resolved.value,
  );
  return Number.isFinite(baseValue)
    ? { ...resolved, value: baseValue }
    : {
        ok: false,
        message: "等式换算到基础单位后不是有限数值",
        expression: true,
      };
}

function parameterCalculatedValueMetadata(
  value: ParameterValue,
  definition: ParameterDefinition,
  selectedUnit: string,
) {
  if (!isParameterExpressionValue(value)) {
    return undefined;
  }
  const resolved = resolveParameterValue(value, definition, selectedUnit);
  if (!resolved.ok || !resolved.expression) {
    return undefined;
  }
  const unit = findUnitOption(definition, selectedUnit);
  const displayValue = unit.fromBase(resolved.value);
  return `${formatEditableNumber(displayValue)}${unit.label ? ` ${unit.label}` : ""}`;
}

function parameterValidationMessage(
  definition: ParameterDefinition,
  value: ParameterValue,
  selectedUnit: string,
) {
  const resolved = resolveParameterValue(value, definition, selectedUnit);
  if (!resolved.ok) {
    return resolved.message;
  }
  const numericValue = resolved.value;
  if (
    definition.options &&
    !definition.options.some((option) => option.value === numericValue)
  ) {
    return "不在支持的可选项中";
  }
  if (
    definition.min !== undefined &&
    (definition.minExclusive ? numericValue <= definition.min : numericValue < definition.min)
  ) {
    return definition.minExclusive
      ? `必须大于 ${definition.min}`
      : `不能小于 ${definition.min}`;
  }
  if (definition.max !== undefined && numericValue > definition.max) {
    return `不能大于 ${definition.max}`;
  }
  return "";
}

function componentParameterValidationMessage(
  definition: ParameterDefinition,
  value: ParameterValue,
  selectedUnit: string,
  gasMediumOptions?: readonly AmesimGasMediumOption[],
  componentType?: string,
  parameterName?: string,
) {
  if (gasMediumOptions !== undefined) {
    const gasReferenceIndex = normalizeAmesimGasIndex(value);
    if (
      gasReferenceIndex === null ||
      !gasMediumOptions.some((option) => option.value === gasReferenceIndex)
    ) {
      return "引用的介质定义不存在";
    }
  }
  if (componentType === "amesim_lmechn1" && parameterName === "v1") {
    const resolved = resolveParameterValue(value, definition, selectedUnit);
    if (resolved.ok) {
      if (resolved.value > LMECHN1_MAX_RIGHT_PORT_COUNT) {
        return "右侧端口数量不能超过20";
      }
      if (resolved.value < 1) {
        return "右侧端口数量不能小于1";
      }
      if (!Number.isInteger(resolved.value)) {
        return "右侧端口数量必须为整数";
      }
    }
  }
  return parameterValidationMessage(definition, value, selectedUnit);
}

function simulationCalculatedValueMetadata(
  value: ParameterValue,
  unit: string,
) {
  if (!isParameterExpressionValue(value)) {
    return undefined;
  }
  const resolved = resolveNumericInput(value);
  if (!resolved.ok || !resolved.expression) {
    return undefined;
  }
  return `${formatEditableNumber(resolved.value)}${unit ? ` ${unit}` : ""}`;
}

function simulationConfigValidationMessages(
  simulation: SimulationConfig,
): Partial<Record<SimulationNumericKey, string>> {
  const resolutions = {
    t_start: resolveNumericInput(simulation.t_start),
    t_stop: resolveNumericInput(simulation.t_stop),
    step: resolveNumericInput(simulation.step),
    max_step: resolveNumericInput(simulation.max_step),
  } satisfies Record<SimulationNumericKey, NumericInputResolution>;
  const messages: Partial<Record<SimulationNumericKey, string>> = {};

  (Object.keys(resolutions) as SimulationNumericKey[]).forEach((key) => {
    const resolved = resolutions[key];
    if (!resolved.ok) {
      messages[key] = resolved.message;
    }
  });
  if (
    resolutions.t_start.ok &&
    resolutions.t_stop.ok &&
    resolutions.t_stop.value <= resolutions.t_start.value
  ) {
    messages.t_stop = "必须大于起始时间";
  }
  if (resolutions.step.ok && resolutions.step.value <= 0) {
    messages.step = "必须大于 0";
  }
  if (resolutions.max_step.ok && resolutions.max_step.value <= 0) {
    messages.max_step = "必须大于 0";
  }
  return messages;
}

type SimulationConfigResolution =
  | { ok: true; value: ResolvedSimulationConfig }
  | { ok: false; message: string };

function resolveSimulationConfig(
  simulation: SimulationConfig,
): SimulationConfigResolution {
  const messages = simulationConfigValidationMessages(simulation);
  const firstInvalidKey = (Object.keys(messages) as SimulationNumericKey[])[0];
  if (firstInvalidKey) {
    return {
      ok: false,
      message: `仿真设置“${simulationConfigLabels[firstInvalidKey]}”：${messages[firstInvalidKey]}`,
    };
  }
  return {
    ok: true,
    value: {
      t_start: (resolveNumericInput(simulation.t_start) as { ok: true; value: number })
        .value,
      t_stop: (resolveNumericInput(simulation.t_stop) as { ok: true; value: number })
        .value,
      step: (resolveNumericInput(simulation.step) as { ok: true; value: number })
        .value,
      max_step: (
        resolveNumericInput(simulation.max_step) as { ok: true; value: number }
      ).value,
      method: simulation.method,
    },
  };
}

function findDuplicateNames(nodes: SimulationNode[]) {
  const counts = new Map<string, number>();
  nodes.forEach((node) => {
    const name = node.data.label.trim();
    if (name) {
      counts.set(name, (counts.get(name) ?? 0) + 1);
    }
  });
  return new Set(
    [...counts.entries()].filter(([, count]) => count > 1).map(([name]) => name),
  );
}

function validateModel(
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  simulation: SimulationConfig,
  componentDefinitions: ComponentDefinition[],
) {
  const issues: ValidationIssue[] = [];
  let issueNumber = 0;
  const addIssue = (
    severity: ValidationIssue["severity"],
    message: string,
    location: Pick<ValidationIssue, "nodeId" | "edgeId"> = {},
  ) => {
    issueNumber += 1;
    issues.push({ id: `validation-${issueNumber}`, severity, message, ...location });
  };

  if (nodes.length === 0) {
    addIssue("error", "画布中没有组件");
  }

  const nodeMap = new Map(nodes.map((node) => [node.id, node]));
  const duplicateNames = findDuplicateNames(nodes);
  const gasMediumNodesByIndex = new Map<number, SimulationNode[]>();
  nodes.forEach((node) => {
    const definition = componentDefinitionForNode(node, componentDefinitions);
    if (!isAmesimGasMediumDefinition(definition)) {
      return;
    }
    const index = normalizeAmesimGasIndex(
      node.data.parameters.gi,
      AMESIM_MIN_DEFINED_GAS_INDEX,
    );
    if (index === null) {
      addIssue(
        "error",
        `${node.data.label}：介质定义索引必须是 1..99 的整数`,
        { nodeId: node.id },
      );
      return;
    }
    const definitionsAtIndex = gasMediumNodesByIndex.get(index) ?? [];
    definitionsAtIndex.push(node);
    gasMediumNodesByIndex.set(index, definitionsAtIndex);
  });
  gasMediumNodesByIndex.forEach((mediumNodes, index) => {
    if (mediumNodes.length <= 1) {
      return;
    }
    mediumNodes.forEach((node) => {
      addIssue(
        "error",
        `${node.data.label}：介质定义索引 ${index} 重复`,
        { nodeId: node.id },
      );
    });
  });

  nodes.forEach((node) => {
    const definition = componentDefinitionForNode(node, componentDefinitions);
    if (!node.data.label.trim()) {
      addIssue("error", `${node.id} 的组件名称为空`, { nodeId: node.id });
    } else if (duplicateNames.has(node.data.label.trim())) {
      addIssue("error", `组件名称“${node.data.label.trim()}”重复`, { nodeId: node.id });
    }
    if (!definition) {
      addIssue("error", `${node.id} 的组件类型不受支持`, { nodeId: node.id });
      return;
    }
    const modelContractIssues = new Set(node.data.modelContractIssues ?? []);
    if (
      node.data.componentType !== definition.type ||
      node.data.modelType !== definition.modelType
    ) {
      modelContractIssues.add(
        `${node.data.label}：工程组件类型与当前目录定义不一致`,
      );
    }
    if (!node.data.modelVersion) {
      modelContractIssues.add(
        `${node.data.label}：缺少 modelVersion，无法确认方程和参数含义`,
      );
    } else if (node.data.modelVersion !== definition.modelVersion) {
      modelContractIssues.add(
        `${node.data.label}：模型版本不匹配（工程 ${node.data.modelVersion}，当前 ${definition.modelVersion}）`,
      );
    }
    if (definition.modelType === "amesim_mecmas21") {
      (["useFriction", "strib"] as const).forEach((name) => {
        const value = numericChoiceValue(node.data.parameters[name]);
        if (value !== 1 && value !== 2) {
          modelContractIssues.add(
            `${node.data.label}：${name}=${String(node.data.parameters[name])} 不是统一的 AMESim 1/2 编码`,
          );
        }
      });
    }
    modelContractIssues.forEach((message) =>
      addIssue("error", message, { nodeId: node.id }),
    );
    Object.entries(definition.parameters).forEach(([key, parameter]) => {
      const selectedUnit =
        node.data.parameterUnits[key] ?? parameter.unit ?? "";
      const message = componentParameterValidationMessage(
        parameter,
        node.data.parameters[key] ?? "",
        selectedUnit,
        undefined,
        definition.type,
        key,
      );
      if (message) {
        const messageSeparator = message.startsWith("等式") ? "：" : "";
        addIssue("error", `${node.data.label}：${parameter.label}${messageSeparator}${message}`, {
          nodeId: node.id,
        });
      }
    });
    if (!isAmesimGasMediumDefinition(definition)) {
      Object.entries(definition.parameters).forEach(([key, parameter]) => {
        if (parameter.editor !== "amesimGasReference") {
          return;
        }
        const index = normalizeAmesimGasIndex(node.data.parameters[key]);
        if (index === null) {
          addIssue(
            "error",
            `${node.data.label}：介质物性索引必须是 0..99 的整数`,
            { nodeId: node.id },
          );
          return;
        }
        if (index === AMESIM_BUILTIN_GAS_INDEX) {
          return;
        }
        const providers = gasMediumNodesByIndex.get(index) ?? [];
        if (providers.length === 0) {
          addIssue(
            "error",
            `${node.data.label}：介质物性索引 ${index} 没有对应的介质定义`,
            { nodeId: node.id },
          );
        } else if (providers.length > 1) {
          addIssue(
            "error",
            `${node.data.label}：介质物性索引 ${index} 对应多个介质定义`,
            { nodeId: node.id },
          );
        }
      });
    }
    displayedPortsForNodeData(node.data).forEach((port) => {
      const connectionCount = edges.filter(
        (edge) =>
          (edge.source === node.id && edge.sourceHandle === port.name) ||
          (edge.target === node.id && edge.targetHandle === port.name),
      ).length;
      if (connectionCount === 0) {
        addIssue("error", `${node.data.label} 的端口 ${port.name} 未连接`, { nodeId: node.id });
      } else if (connectionCount > 1) {
        addIssue("error", `${node.data.label} 的端口 ${port.name} 存在多条连接`, {
          nodeId: node.id,
        });
      }
    });
  });

  const connectionKeys = new Set<string>();
  edges.forEach((edge) => {
    const source = nodeMap.get(edge.source);
    const target = nodeMap.get(edge.target);
    if (!source || !target) {
      addIssue("error", `连接 ${edge.id} 引用了不存在的组件`, { edgeId: edge.id });
      return;
    }
    const sourcePort = findNodePort(nodes, source.id, edge.sourceHandle ?? null);
    const targetPort = findNodePort(nodes, target.id, edge.targetHandle ?? null);
    if (!sourcePort) {
      addIssue("error", `连接 ${edge.id} 的源端口无效`, {
        edgeId: edge.id,
        nodeId: source.id,
      });
    }
    if (!targetPort) {
      addIssue("error", `连接 ${edge.id} 的目标端口无效`, {
        edgeId: edge.id,
        nodeId: target.id,
      });
    }
    if (sourcePort && targetPort && !arePortsCompatible(sourcePort, targetPort)) {
      addIssue("error", `连接 ${edge.id} 的端口类型或物理域不兼容`, { edgeId: edge.id });
    }
    const key = connectionIdentity(edge, sourcePort?.kind === "physical");
    if (connectionKeys.has(key)) {
      addIssue("warning", "检测到重复连接", { edgeId: edge.id });
    }
    connectionKeys.add(key);
  });

  const pneumaticAdjacency = new Map<string, Set<string>>();
  nodes.forEach((node) => {
    if (
      node.data.ports.some(
        (port) => port.kind === "physical" && port.domain === "pneumatic",
      )
    ) {
      pneumaticAdjacency.set(node.id, new Set());
    }
  });
  edges.forEach((edge) => {
    const source = nodeMap.get(edge.source);
    const target = nodeMap.get(edge.target);
    const sourcePort = source?.data.ports.find(
      (port) => port.name === edge.sourceHandle,
    );
    const targetPort = target?.data.ports.find(
      (port) => port.name === edge.targetHandle,
    );
    if (
      !source ||
      !target ||
      sourcePort?.kind !== "physical" ||
      targetPort?.kind !== "physical" ||
      sourcePort.domain !== "pneumatic" ||
      targetPort.domain !== "pneumatic"
    ) {
      return;
    }
    pneumaticAdjacency.get(source.id)?.add(target.id);
    pneumaticAdjacency.get(target.id)?.add(source.id);
  });

  const visitedPneumaticNodes = new Set<string>();
  pneumaticAdjacency.forEach((_, startNodeId) => {
    if (visitedPneumaticNodes.has(startNodeId)) {
      return;
    }
    const pendingNodeIds = [startNodeId];
    const connectedNodeIds: string[] = [];
    while (pendingNodeIds.length > 0) {
      const nodeId = pendingNodeIds.pop() as string;
      if (visitedPneumaticNodes.has(nodeId)) {
        continue;
      }
      visitedPneumaticNodes.add(nodeId);
      connectedNodeIds.push(nodeId);
      pneumaticAdjacency.get(nodeId)?.forEach((neighborId) => {
        if (!visitedPneumaticNodes.has(neighborId)) {
          pendingNodeIds.push(neighborId);
        }
      });
    }

    const referencedIndices = new Set<number>();
    const referencingNodes = new Map<string, SimulationNode>();
    connectedNodeIds.forEach((nodeId) => {
      const node = nodeMap.get(nodeId);
      if (!node) {
        return;
      }
      const definition = componentDefinitionForNode(node, componentDefinitions);
      if (!definition || isAmesimGasMediumDefinition(definition)) {
        return;
      }
      Object.entries(definition.parameters).forEach(([key, parameter]) => {
        if (parameter.editor !== "amesimGasReference") {
          return;
        }
        const index = normalizeAmesimGasIndex(node.data.parameters[key]);
        if (index === null) {
          return;
        }
        referencedIndices.add(index);
        referencingNodes.set(node.id, node);
      });
    });
    if (referencedIndices.size <= 1) {
      return;
    }
    const indexList = [...referencedIndices]
      .sort((first, second) => first - second)
      .join("、");
    referencingNodes.forEach((node) => {
      addIssue(
        "error",
        `${node.data.label}：同一气路引用了不同的介质物性索引（${indexList}）`,
        { nodeId: node.id },
      );
    });
  });

  const simulationErrors = simulationConfigValidationMessages(simulation);
  (Object.keys(simulationErrors) as SimulationNumericKey[]).forEach((key) => {
    const message = simulationErrors[key];
    if (message) {
      addIssue("error", `仿真设置：${simulationConfigLabels[key]}：${message}`);
    }
  });
  if (!SUPPORTED_SOLVER_METHODS.includes(simulation.method)) {
    addIssue("error", "求解器不受支持");
  }

  return issues;
}

function workspaceViewFromLocation(): WorkspaceView {
  return window.location.hash === "#/results" ? "results" : "modeling";
}


function loadStoredResultSnapshot(): SimulationResultsSnapshot | null {
  try {
    const raw = sessionStorage.getItem(RESULT_SNAPSHOT_KEY);
    if (!raw) {
      return null;
    }
    const value = JSON.parse(raw) as unknown;
    if (!isSimulationResultsSnapshot(value)) {
      sessionStorage.removeItem(RESULT_SNAPSHOT_KEY);
      return null;
    }
    return value;
  } catch {
    return null;
  }
}

function storeResultSnapshot(snapshot: SimulationResultsSnapshot) {
  try {
    sessionStorage.setItem(RESULT_SNAPSHOT_KEY, JSON.stringify(snapshot));
  } catch {
    // Large result sets remain available in memory for the current page.
  }
}

function isSimulationResultsSnapshot(
  value: unknown,
): value is SimulationResultsSnapshot {
  if (!value || typeof value !== "object") {
    return false;
  }
  const snapshot = value as Partial<SimulationResultsSnapshot>;
  return (
    typeof snapshot.id === "string" &&
    typeof snapshot.createdAt === "string" &&
    Boolean(snapshot.project) &&
    snapshot.project?.projectSchemaVersion === 1 &&
    typeof snapshot.project?.name === "string" &&
    Array.isArray(snapshot.project?.nodes) &&
    Array.isArray(snapshot.project?.edges) &&
    Boolean(snapshot.result) &&
    Array.isArray(snapshot.result?.variables) &&
    Boolean(snapshot.result?.series) &&
    Array.isArray(snapshot.result?.series?.time)
  );
}

function cloneValue<T>(value: T): T {
  return structuredClone(value);
}

function snapshotSignature(snapshot: EditorSnapshot) {
  return (
    snapshot.signature ||
    projectContentSignature(
      snapshot.projectName,
      snapshot.nodes,
      snapshot.edges,
      snapshot.simulationConfig,
    )
  );
}

function makeUniqueName(baseName: string, usedNames: Set<string>) {
  if (!usedNames.has(baseName)) {
    return baseName;
  }
  let suffix = 2;
  while (usedNames.has(`${baseName}_${suffix}`)) {
    suffix += 1;
  }
  return `${baseName}_${suffix}`;
}

function isProjectRecord(value: unknown): value is Record<string, unknown> {
  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
}

function isParameterValueRecord(value: unknown) {
  return (
    isProjectRecord(value) &&
    Object.values(value).every(
      (entry) => typeof entry === "string" || typeof entry === "number",
    )
  );
}

function isStringRecord(value: unknown) {
  return (
    isProjectRecord(value) &&
    Object.values(value).every((entry) => typeof entry === "string")
  );
}

function isProjectPortDefinitionValue(value: unknown): value is PortDefinition {
  if (!isProjectRecord(value)) {
    return false;
  }
  return (
    typeof value.name === "string" &&
    value.name.length > 0 &&
    (value.kind === "physical" || value.kind === "signal") &&
    typeof value.domain === "string" &&
    value.domain.length > 0 &&
    isPortNominalRole(value.nominalRole) &&
    (value.positiveFlowDirection === undefined ||
      value.positiveFlowDirection === "intoComponent") &&
    (value.side === "left" || value.side === "right")
  );
}

function isProjectNodePayloadValue(value: unknown): value is ProjectNodePayload {
  if (
    !isProjectRecord(value) ||
    !isProjectRecord(value.position) ||
    !isProjectRecord(value.data)
  ) {
    return false;
  }
  const data = value.data;
  if (
    typeof value.id !== "string" ||
    value.id.length === 0 ||
    value.type !== "simulationComponent" ||
    !Number.isFinite(value.position.x) ||
    !Number.isFinite(value.position.y) ||
    typeof data.label !== "string" ||
    typeof data.componentType !== "string" ||
    data.componentType.length === 0 ||
    typeof data.modelType !== "string" ||
    data.modelType.length === 0 ||
    (data.modelVersion !== undefined && typeof data.modelVersion !== "string") ||
    !Array.isArray(data.ports) ||
    !data.ports.every(isProjectPortDefinitionValue) ||
    !isParameterValueRecord(data.parameters) ||
    (data.parameterUnits !== undefined && !isStringRecord(data.parameterUnits)) ||
    (data.parameterScientificNotation !== undefined &&
      !isProjectRecord(data.parameterScientificNotation)) ||
    ![0, 90, 180, 270].includes(Number(data.rotation)) ||
    typeof data.mirrored !== "boolean"
  ) {
    return false;
  }
  const portNames = data.ports.map((port) => port.name);
  return new Set(portNames).size === portNames.length;
}

function isProjectEdgePayloadValue(value: unknown): value is ProjectEdgePayload {
  if (!(
    isProjectRecord(value) &&
    typeof value.id === "string" &&
    value.id.length > 0 &&
    typeof value.source === "string" &&
    value.source.length > 0 &&
    typeof value.target === "string" &&
    value.target.length > 0 &&
    typeof value.sourceHandle === "string" &&
    value.sourceHandle.length > 0 &&
    typeof value.targetHandle === "string" &&
    value.targetHandle.length > 0 &&
    isProjectRecord(value.data) &&
    typeof value.data.isContactEdge === "boolean"
  )) {
    return false;
  }
  const routePoints = value.data.routePoints;
  return (
    routePoints === undefined ||
    (Array.isArray(routePoints) &&
      routePoints.every(
        (point) =>
          isProjectRecord(point) &&
          typeof point.x === "number" &&
          Number.isFinite(point.x) &&
          typeof point.y === "number" &&
          Number.isFinite(point.y),
      ))
  );
}

function isSimulationConfigValue(value: unknown): value is SimulationConfig {
  if (!isProjectRecord(value) || typeof value.method !== "string") {
    return false;
  }
  return [value.t_start, value.t_stop, value.step, value.max_step].every(
    (entry) => typeof entry === "number" || typeof entry === "string",
  );
}

function parseProjectPayload(raw: string | null): ReactFlowProjectPayload | null {
  if (!raw) {
    return null;
  }
  const value = JSON.parse(raw) as unknown;
  if (!isProjectRecord(value)) {
    return null;
  }
  if (
    value.projectSchemaVersion !== 1 ||
    typeof value.name !== "string" ||
    !Array.isArray(value.nodes) ||
    !value.nodes.every(isProjectNodePayloadValue) ||
    !Array.isArray(value.edges) ||
    !value.edges.every(isProjectEdgePayloadValue) ||
    !isSimulationConfigValue(value.simulation)
  ) {
    return null;
  }
  const project = value as ReactFlowProjectPayload;
  const nodeIds = project.nodes.map((node) => node.id);
  const edgeIds = project.edges.map((edge) => edge.id);
  if (
    new Set(nodeIds).size !== nodeIds.length ||
    new Set(edgeIds).size !== edgeIds.length
  ) {
    return null;
  }
  // 连接是否仍符合当前目录合同只能在目录加载后判断。解析阶段保留它们，
  // applyProject 会按当前端口定义逐条丢弃失效连接并向用户报告原因。
  return project;
}

function localProjectKey(name: string) {
  return `${PROJECT_KEY_PREFIX}${encodeURIComponent(name.trim() || "untitled")}`;
}

function isEditableTarget(target: EventTarget | null) {
  return (
    target instanceof HTMLElement &&
    (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName))
  );
}

function nodeIsInsideElement(node: Node | null, element: Element) {
  if (!node) {
    return false;
  }
  return element.contains(node.nodeType === Node.TEXT_NODE ? node.parentElement : node);
}

function shouldPreserveNativeConsoleShortcut(
  event: KeyboardEvent,
  commandKey: boolean,
  key: string,
) {
  const targetInsideConsole =
    event.target instanceof Element &&
    Boolean(event.target.closest("[data-editor-shortcuts-ignore='true']"));
  if (targetInsideConsole) {
    return true;
  }
  if (!commandKey || key !== "c") {
    return false;
  }
  const selection = window.getSelection();
  if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
    return false;
  }
  const consoleElement = document.querySelector(
    "[data-editor-shortcuts-ignore='true']",
  );
  if (!consoleElement) {
    return false;
  }
  return (
    nodeIsInsideElement(selection.anchorNode, consoleElement) ||
    nodeIsInsideElement(selection.focusNode, consoleElement) ||
    nodeIsInsideElement(
      selection.getRangeAt(0).commonAncestorContainer,
      consoleElement,
    )
  );
}

function formatTime(date: Date) {
  return date.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
}

function projectExecutionContractIssues(
  project: ReactFlowProjectPayload,
  componentDefinitions: ComponentDefinition[],
  sourceNodes: SimulationNode[] = [],
) {
  const issues = new Set(
    sourceNodes.flatMap((node) => node.data.modelContractIssues ?? []),
  );
  project.nodes.forEach((node) => {
    const label = node.data.label || node.id;
    const definition = componentDefinitions.find(
      (candidate) => candidate.type === node.data.componentType,
    );
    if (!definition) {
      issues.add(`组件“${label}”找不到当前组件目录定义`);
      return;
    }
    if (node.data.modelType !== definition.modelType) {
      issues.add(
        `组件“${label}”模型类型不匹配（工程 ${node.data.modelType}，当前 ${definition.modelType}）`,
      );
    }
    if (!node.data.modelVersion) {
      issues.add(`组件“${label}”缺少 modelVersion，无法确认方程和参数含义`);
    } else if (node.data.modelVersion !== definition.modelVersion) {
      issues.add(
        `组件“${label}”模型版本不匹配（工程 ${node.data.modelVersion}，当前 ${definition.modelVersion}）`,
      );
    }
    if (definition.modelType !== "amesim_mecmas21") {
      return;
    }
    (["useFriction", "strib"] as const).forEach((name) => {
      const value = numericChoiceValue(node.data.parameters[name]);
      if (value !== 1 && value !== 2) {
        issues.add(
          `组件“${label}”的 ${name}=${String(node.data.parameters[name])} 不是统一的 AMESim 1/2 编码`,
        );
      }
    });
  });
  return [...issues];
}

function buildSystemXml(
  project: ReactFlowProjectPayload,
  componentDefinitions: ComponentDefinition[],
  sourceNodes: SimulationNode[] = [],
) {
  const contractIssues = projectExecutionContractIssues(
    project,
    componentDefinitions,
    sourceNodes,
  );
  if (contractIssues.length > 0) {
    throw new Error(
      `工程包含不兼容的模型合同，不能生成执行 XML：\n- ${contractIssues.join("\n- ")}`,
    );
  }
  const simulationResolution = resolveSimulationConfig(project.simulation);
  if (!simulationResolution.ok) {
    throw new Error(simulationResolution.message);
  }
  const resolvedSimulation = simulationResolution.value;
  const xmlDocument = document.implementation.createDocument("", "System", null);
  const system = xmlDocument.documentElement;
  if (project.name.trim()) {
    system.setAttribute("name", project.name.trim());
  }
  system.setAttribute("schemaVersion", "3");
  system.setAttribute("unitSystem", "SI");

  const simulation = xmlDocument.createElement("Simulation");
  simulation.setAttribute("tStart", String(resolvedSimulation.t_start));
  simulation.setAttribute("tStop", String(resolvedSimulation.t_stop));
  simulation.setAttribute("sampleStep", String(resolvedSimulation.step));
  simulation.setAttribute("maxStep", String(resolvedSimulation.max_step));
  simulation.setAttribute("method", resolvedSimulation.method);
  const components = xmlDocument.createElement("Components");
  const connections = xmlDocument.createElement("Connections");
  const registeredPortsByNodeId = new Map<string, PortDefinition[]>();
  const exportedEdgeIds = new Set<string>();
  system.append(simulation, components, connections);

  project.nodes.forEach((node) => {
    if (registeredPortsByNodeId.has(node.id)) {
      throw new Error(`工程包含重复的组件 ID：${node.id}`);
    }
    const definitionByComponentType = componentDefinitions.find(
      (candidate) => candidate.type === node.data.componentType,
    );
    const definitionByModelType = componentDefinitions.find(
      (candidate) => candidate.modelType === node.data.modelType,
    );
    const definition = definitionByComponentType ?? definitionByModelType;
    if (!definition) {
      throw new Error(
        `组件“${node.data.label || node.id}”找不到目录定义，无法确定模型版本`,
      );
    }
    if (
      definition.type !== node.data.componentType ||
      definition.modelType !== node.data.modelType
    ) {
      throw new Error(
        `组件“${node.data.label || node.id}”的工程类型与目录定义不一致：` +
        `componentType=${node.data.componentType}，modelType=${node.data.modelType}`,
      );
    }
    registeredPortsByNodeId.set(
      node.id,
      displayedPortsForNodeData({
        componentType: definition.type,
        modelType: definition.modelType,
        ports: definition.ports,
        parameters: node.data.parameters,
      }),
    );
    const unknownParameters = Object.keys(node.data.parameters).filter(
      (name) => !Object.prototype.hasOwnProperty.call(definition.parameters, name),
    );
    if (unknownParameters.length > 0) {
      throw new Error(
        `组件“${node.data.label || node.id}”包含目录未定义的参数：${unknownParameters.join(
          "、",
        )}`,
      );
    }
    const component = xmlDocument.createElement("Component");
    component.setAttribute("id", node.id);
    component.setAttribute("type", definition.modelType);
    component.setAttribute("modelVersion", definition.modelVersion);

    Object.entries(definition.parameters).forEach(([name, parameterDefinition]) => {
      const value = node.data.parameters[name] ?? parameterDefinition.default;
      const selectedUnit =
        node.data.parameterUnits?.[name] ?? parameterDefinition?.unit ?? "";
      const validationMessage = componentParameterValidationMessage(
        parameterDefinition,
        value,
        selectedUnit,
        undefined,
        definition.type,
        name,
      );
      if (validationMessage) {
        throw new Error(
          `组件“${node.data.label || node.id}”的参数“${parameterDefinition.label}”：${validationMessage}`,
        );
      }
      const resolved = resolveParameterValue(value, parameterDefinition, selectedUnit);
      if (!resolved.ok) {
        throw new Error(
          `组件“${node.data.label || node.id}”的参数“${parameterDefinition.label}”：${resolved.message}`,
        );
      }
      const parameter = xmlDocument.createElement("Parameter");
      parameter.setAttribute("name", name);
      // Number#toString emits the shortest decimal that round-trips to the
      // same IEEE-754 value. UI formatting intentionally uses fewer digits,
      // but the execution XML must not change the resolved physical input.
      parameter.setAttribute("value", String(resolved.value));
      component.appendChild(parameter);
    });
    components.appendChild(component);
  });

  project.edges.forEach((edge) => {
    if (exportedEdgeIds.has(edge.id)) {
      throw new Error(`工程包含重复的连接 ID：${edge.id}`);
    }
    exportedEdgeIds.add(edge.id);
    const metadata = projectConnectionMetadata(
      registeredPortsByNodeId,
      edge,
    );
    const connection = xmlDocument.createElement("Connection");
    connection.setAttribute("id", edge.id);
    metadata.endpoints.forEach((endpoint) => {
      const endpointElement = xmlDocument.createElement("Endpoint");
      endpointElement.setAttribute("component", endpoint.component);
      endpointElement.setAttribute("port", endpoint.port);
      connection.appendChild(endpointElement);
    });
    connections.appendChild(connection);
  });

  indentXmlElement(system);
  return `<?xml version="1.0" encoding="UTF-8"?>\n${new XMLSerializer().serializeToString(system)}`;
}

function projectConnectionMetadata(
  registeredPortsByNodeId: Map<string, PortDefinition[]>,
  edge: ProjectEdgePayload,
) {
  const first = findRegisteredPort(
    registeredPortsByNodeId,
    edge.source,
    edge.sourceHandle,
  );
  const second = findRegisteredPort(
    registeredPortsByNodeId,
    edge.target,
    edge.targetHandle,
  );
  if (!first || !second) {
    throw new Error(`连接 ${edge.id} 引用了不存在的组件端口`);
  }
  if (!arePortsCompatible(first, second)) {
    throw new Error(`连接 ${edge.id} 的端口类型或物理域不兼容`);
  }

  const endpoints: Array<{
    component: string;
    port: string;
    role?: "source" | "target";
  }> = [
    { component: edge.source, port: first.name },
    { component: edge.target, port: second.name },
  ];
  if (first.kind === "signal") {
    if (first.nominalRole === "input") {
      endpoints.reverse();
    }
    endpoints[0].role = "source";
    endpoints[1].role = "target";
  }

  return {
    kind: first.kind,
    domain: first.domain,
    endpoints,
  };
}

function findRegisteredPort(
  registeredPortsByNodeId: Map<string, PortDefinition[]>,
  componentId: string,
  portName: string | null,
) {
  if (!portName) {
    return undefined;
  }
  return registeredPortsByNodeId
    .get(componentId)
    ?.find((port) => port.name === portName);
}

function indentXmlElement(element: Element, depth = 0) {
  const children = Array.from(element.children);
  if (children.length === 0) {
    return;
  }
  children.forEach((child) => {
    element.insertBefore(
      element.ownerDocument.createTextNode(`\n${"  ".repeat(depth + 1)}`),
      child,
    );
    indentXmlElement(child, depth + 1);
  });
  element.appendChild(
    element.ownerDocument.createTextNode(`\n${"  ".repeat(depth)}`),
  );
}

class SimulationStreamError extends Error {
  readonly issues: string[];
  readonly status?: number;
  readonly code?: "STREAM_IDLE_TIMEOUT" | "SOLVER_STALLED";

  constructor(
    message: string,
    issues: string[] = [],
    status?: number,
    code?: "STREAM_IDLE_TIMEOUT" | "SOLVER_STALLED",
  ) {
    super(message);
    this.name = "SimulationStreamError";
    this.issues = issues;
    this.status = status;
    this.code = code;
  }
}

async function readSimulationStreamChunk(
  reader: ReadableStreamDefaultReader<Uint8Array>,
): Promise<ReadableStreamReadResult<Uint8Array>> {
  let timeoutId: number | undefined;
  const inactivityTimeout = new Promise<never>((_, reject) => {
    timeoutId = window.setTimeout(() => {
      reject(
        new SimulationStreamError(
          "超过 30 秒未收到仿真进度，进度连接可能已经中断，请刷新页面后重试",
          [],
          undefined,
          "STREAM_IDLE_TIMEOUT",
        ),
      );
    }, SIMULATION_STREAM_IDLE_TIMEOUT_MS);
  });

  try {
    return await Promise.race([reader.read(), inactivityTimeout]);
  } finally {
    if (timeoutId !== undefined) {
      window.clearTimeout(timeoutId);
    }
  }
}

async function streamSystemSimulation(
  xml: string,
  onEvent: (
    event: SimulationStreamEvent,
    watchdog?: SimulationActivityWatchdogObservation,
  ) => void,
  simulationId: string,
): Promise<SimulationResult> {
  const abortController = new AbortController();
  const response = await fetch("/api/system-xml/simulate-stream", {
    method: "POST",
    headers: {
      "Content-Type": "application/xml",
      "X-Simulation-Id": simulationId,
    },
    body: xml,
    signal: abortController.signal,
  });
  if (!response.ok) {
    if (response.status === 404) {
      throw new SimulationStreamError(
        "当前 FastAPI 未加载流式仿真接口，请重启后端服务",
        [],
        response.status,
      );
    }
    if (response.status === 502 || response.status === 503) {
      throw new SimulationStreamError(
        "无法连接 FastAPI 仿真服务，请确认 8000 端口已启动",
        [],
        response.status,
      );
    }
    throw new SimulationStreamError(await readApiError(response), [], response.status);
  }
  if (!response.body) {
    throw new SimulationStreamError("浏览器未收到仿真进度数据流");
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let buffer = "";
  let result: SimulationResult | null = null;
  let activityWatchdog = createSimulationActivityWatchdog();

  const consumeLine = (line: string) => {
    const trimmed = line.trim();
    if (!trimmed) {
      return;
    }
    const parsed = JSON.parse(trimmed) as Partial<SimulationStreamEvent>;
    if (
      parsed.event !== "progress" &&
      parsed.event !== "result" &&
      parsed.event !== "error"
    ) {
      throw new SimulationStreamError("仿真服务返回了无法识别的进度消息");
    }
    const event = parsed as SimulationStreamEvent;
    let watchdogObservation: SimulationActivityWatchdogObservation | undefined;
    if (event.event === "progress") {
      const watched = observeSimulationActivityWatchdog(
        activityWatchdog,
        event,
      );
      activityWatchdog = watched.state;
      if (isSimulationSolverActivityPhase(event.phase)) {
        watchdogObservation = watched.observation;
        if (watchdogObservation.status === "stalled") {
          throw new SimulationStreamError(
            watchdogObservation.activityTelemetryAvailable
              ? solverActivityStallTimeoutMessage("detected")
              : solverStallTimeoutMessage("detected"),
            [],
            undefined,
            "SOLVER_STALLED",
          );
        }
      }
    }
    onEvent(event, watchdogObservation);
    if (event.event === "result") {
      result = event.result;
      return;
    }
    if (event.event === "error") {
      const detail = event.detail;
      const issues =
        detail && typeof detail === "object" && Array.isArray((detail as { issues?: unknown }).issues)
          ? ((detail as { issues: SimulationStreamIssue[] }).issues ?? [])
              .map((issue) => {
                if (typeof issue.message !== "string") {
                  return "";
                }
                return typeof issue.code === "string"
                  ? `${issue.code}：${issue.message}`
                  : issue.message;
              })
              .filter(Boolean)
          : typeof detail === "string" && detail !== event.message
            ? [detail]
            : [];
      throw new SimulationStreamError(event.message, issues, event.status);
    }
  };

  try {
    while (true) {
      const { done, value } = await readSimulationStreamChunk(reader);
      buffer += decoder.decode(value, { stream: !done });
      let newlineIndex = buffer.indexOf("\n");
      while (newlineIndex >= 0) {
        consumeLine(buffer.slice(0, newlineIndex));
        buffer = buffer.slice(newlineIndex + 1);
        newlineIndex = buffer.indexOf("\n");
      }
      if (done) {
        consumeLine(buffer);
        break;
      }
    }
  } finally {
    abortController.abort();
    try {
      await reader.cancel();
    } catch {
      // The stream may already be closed or aborted.
    }
    reader.releaseLock();
  }

  if (!result) {
    throw new SimulationStreamError("仿真进度流已结束，但没有返回结果");
  }
  return result;
}

function createSimulationId() {
  if (typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }
  return `simulation-${Date.now()}-${Math.random().toString(16).slice(2)}`;
}

async function requestSimulationCancellation(
  simulationId: string,
  reason: SimulationCancelReason,
) {
  const response = await fetch(
    `/api/system-xml/simulations/${encodeURIComponent(simulationId)}/cancel`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ reason }),
    },
  );
  if (!response.ok) {
    throw new SimulationStreamError(await readApiError(response), [], response.status);
  }
  return (await response.json()) as {
    simulationId: string;
    accepted: boolean;
    status: SimulationTaskResponse["status"];
  };
}

async function readSimulationTask(simulationId: string) {
  const response = await fetch(
    `/api/system-xml/simulations/${encodeURIComponent(simulationId)}`,
  );
  if (!response.ok) {
    throw new SimulationStreamError(await readApiError(response), [], response.status);
  }
  return (await response.json()) as SimulationTaskResponse;
}

async function waitForSimulationTaskCompletion(
  simulationId: string,
  timeoutMs = 30_000,
) {
  const deadline = Date.now() + timeoutMs;
  while (true) {
    const task = await readSimulationTask(simulationId);
    if (task.result || task.error || ["completed", "stopped", "stalled", "failed"].includes(task.status)) {
      return task;
    }
    if (Date.now() >= deadline) {
      throw new SimulationStreamError(
        "停止请求已发送，但后端未能在 30 秒内整理出部分结果",
      );
    }
    await new Promise((resolve) => window.setTimeout(resolve, 500));
  }
}

async function postXml<TResponse>(url: string, xml: string): Promise<TResponse> {
  const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/xml" },
    body: xml,
  });
  if (!response.ok) {
    throw new Error(await readApiError(response));
  }
  return (await response.json()) as TResponse;
}

async function readApiError(response: Response) {
  const text = await response.text();
  if (!text) {
    return `${response.status} ${response.statusText}`;
  }
  try {
    const parsed = JSON.parse(text) as { detail?: unknown };
    if (typeof parsed.detail === "string") {
      return parsed.detail;
    }
    if (parsed.detail && typeof parsed.detail === "object") {
      const detail = parsed.detail as {
        message?: unknown;
        issues?: Array<{ code?: unknown; message?: unknown }>;
      };
      const messages = Array.isArray(detail.issues)
        ? detail.issues
            .map((issue) =>
              typeof issue.message === "string"
                ? `${typeof issue.code === "string" ? `${issue.code}：` : ""}${issue.message}`
                : "",
            )
            .filter(Boolean)
        : [];
      if (messages.length > 0) {
        return messages.join("；");
      }
      if (typeof detail.message === "string") {
        return detail.message;
      }
    }
  } catch {
    return text;
  }
  return text;
}

function downloadText(filename: string, content: string) {
  downloadFile(filename, content, "application/xml;charset=utf-8");
}

function downloadFile(filename: string, content: string, mimeType: string) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  link.remove();
  URL.revokeObjectURL(url);
}

function safeFilename(value: string) {
  return (value.trim() || "system").replace(/[\\/:*?"<>|]+/g, "_");
}

function formatError(error: unknown) {
  if (error instanceof Error) {
    return error.message;
  }
  return String(error);
}

function formatNumber(value: number) {
  if (!Number.isFinite(value)) {
    return "-";
  }
  if (Math.abs(value) >= 100000 || (Math.abs(value) > 0 && Math.abs(value) < 0.001)) {
    return value.toExponential(4);
  }
  return value.toFixed(4).replace(/\.?0+$/, "");
}

export default function App() {
  return (
    <ReactFlowProvider>
      <FlowWorkbench />
    </ReactFlowProvider>
  );
}