import { useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next';
import type { Components } from 'react-markdown';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { manualTexts } from '../constants/manualTexts';
import { btnSecondary } from '../styles/buttonStyles';
import { getFocusableElements } from '../utils/dom';
import { MermaidBlock } from './MermaidBlock';
/** Props for the ManualModal component. */
export interface ManualModalProps {
open: boolean;
onClose: () => void;
gamePath: string;
}
/** Static remark plugins array — defined outside component to avoid re-creating on every render. */
⋮----
/** Static markdown component overrides — defined outside component to avoid re-rendering the entire tree on every render. */
⋮----
pre(
⋮----
// Unwrap when the child is a mermaid diagram rendered by the code override
⋮----
code(
⋮----
return
⋮----
// biome-ignore lint/a11y/noStaticElementInteractions: overlay backdrop dismisses modal on click
⋮----
{/* biome-ignore lint/a11y/useKeyWithClickEvents: keyboard events handled at document level via useEffect */}
⋮----