chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web)
- Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config
- Implement Docker service architecture (Varnish, Directus, Gatekeeper)
- Setup environment-aware Gitea Actions deployment

apps/web/src/components/Mermaid.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+
+interface MermaidProps {
+  graph: string;
+  id?: string;
+}
+
+export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
+  const [id, setId] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setId(providedId || `mermaid-${Math.random().toString(36).substring(2, 11)}`);
+  }, [providedId]);
+  const [isRendered, setIsRendered] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: 'default',
+      darkMode: false,
+      themeVariables: {
+        fontFamily: 'Inter, system-ui, sans-serif',
+        fontSize: '16px',
+        primaryColor: '#ffffff',
+        nodeBorder: '#e2e8f0',
+        mainBkg: '#ffffff',
+        lineColor: '#cbd5e1',
+      },
+      securityLevel: 'loose',
+    });
+
+    const render = async () => {
+      if (containerRef.current && id) {
+        try {
+          const { svg } = await mermaid.render(`${id}-svg`, graph);
+          containerRef.current.innerHTML = svg;
+          setIsRendered(true);
+        } catch (err) {
+          console.error('Mermaid rendering failed:', err);
+          setError('Failed to render diagram. Please check the syntax.');
+          setIsRendered(true);
+        }
+      }
+    };
+
+    if (id) {
+      render();
+    }
+  }, [graph, id]);
+
+  if (!id) return null;
+
+  return (
+    <div className="mermaid-wrapper my-8 not-prose">
+      <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-500 hover:border-slate-400">
+        <div className="px-4 py-3 border-b border-slate-100 bg-white flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <svg className="w-3.5 h-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+            </svg>
+            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">Diagram</span>
+          </div>
+        </div>
+        <div className="mermaid-container p-8 md:p-12 overflow-x-auto flex justify-center bg-white">
+          <div 
+            ref={containerRef}
+            className={`mermaid transition-opacity duration-500 w-full max-w-4xl ${isRendered ? 'opacity-100' : 'opacity-0'}`}
+            id={id}
+          >
+            {error ? (
+              <div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
+                {error}
+              </div>
+            ) : (
+              graph
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};