diff --git a/package.json b/package.json
index 7b918a16..d274ec7f 100644
--- a/package.json
+++ b/package.json
@@ -151,6 +151,7 @@
     },
     "./styles.css": "./dist/styles.css",
     "./styles": "./dist/styles.css",
+    "./markdown.css": "./dist/components/Markdown/styles.css",
     "./init.css": "./dist/styles/init.css"
   },
   "files": [
@@ -163,11 +164,12 @@
     "postinstall": "if [ -z \"$_DATAVIS_RELINK\" ] && [ ! -f node_modules/datavis/package.json ] && [ -f packages/datavis/package.json ]; then echo '⚠️  Stale datavis link detected — re-linking submodule...'; _DATAVIS_RELINK=1 pnpm install; fi",
     "dev": "tsup --watch",
     "prebuild": "npm run build:esheet",
-    "build": "tsup && npm run build:css && npm run copy:brand-css && npm run copy:style-css",
+    "build": "tsup && npm run build:css && npm run copy:brand-css && npm run copy:style-css && npm run copy:markdown-css",
     "build:esheet": "if [ ! -f packages/esheet/packages/core/dist/index.d.ts ]; then cd packages/esheet && npm ci && npx nx run-many --target=build --projects=@esheet/core,@esheet/fields,@esheet/adapters,@esheet/builder,@esheet/renderer --parallel; fi",
     "build:css": "npx @tailwindcss/cli -i ./src/styles/base.css -o ./dist/styles.css --minify",
     "copy:brand-css": "cp src/brands/*.css dist/brands/ 2>/dev/null || true",
     "copy:style-css": "mkdir -p dist/styles && cp src/styles/init.css dist/styles/ 2>/dev/null || true",
+    "copy:markdown-css": "mkdir -p dist/components/Markdown && cp src/components/Markdown/styles.css dist/components/Markdown/ 2>/dev/null || true",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
@@ -192,6 +194,9 @@
     "ag-grid-community": ">=32.0.0",
     "ag-grid-react": ">=32.0.0",
     "datavis-ace": "=4.0.0-PRE.2",
+    "js-yaml": ">=4.0.0",
+    "mermaid": ">=10.0.0",
+    "papaparse": ">=5.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "wavesurfer.js": ">=7.0.0"
@@ -215,6 +220,15 @@
     "datavis-ace": {
       "optional": true
     },
+    "js-yaml": {
+      "optional": true
+    },
+    "mermaid": {
+      "optional": true
+    },
+    "papaparse": {
+      "optional": true
+    },
     "react": {
       "optional": false
     },
@@ -229,9 +243,12 @@
     "@swc/helpers": "^0.5.19",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dompurify": "^3.3.1",
     "google-libphonenumber": "^3.2.44",
+    "highlight.js": "^11.11.1",
     "lucide-react": "^0.562.0",
     "luxon": "^3.7.2",
+    "marked": "^17.0.3",
     "tailwind-merge": "^2.6.1"
   },
   "devDependencies": {
@@ -255,8 +272,10 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/google-libphonenumber": "^7.4.30",
+    "@types/js-yaml": "^4.0.9",
     "@types/luxon": "^3.7.1",
     "@types/node": "^22.19.11",
+    "@types/papaparse": "^5.3.16",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.56.1",
@@ -272,6 +291,9 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^10.2.11",
     "jsdom": "^26.1.0",
+    "js-yaml": "^4.1.1",
+    "mermaid": "^11.12.3",
+    "papaparse": "^5.5.3",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7d9b389..58aec21c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,15 +26,24 @@ importers:
       datavis-ace:
         specifier: '=4.0.0-PRE.2'
         version: 4.0.0-PRE.2
+      dompurify:
+        specifier: ^3.3.1
+        version: 3.4.3
       google-libphonenumber:
         specifier: ^3.2.44
         version: 3.2.44
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
       lucide-react:
         specifier: ^0.562.0
         version: 0.562.0(react@19.2.4)
       luxon:
         specifier: ^3.7.2
         version: 3.7.2
+      marked:
+        specifier: ^17.0.3
+        version: 17.0.6
       tailwind-merge:
         specifier: ^2.6.1
         version: 2.6.1
@@ -99,12 +108,18 @@ importers:
       '@types/google-libphonenumber':
         specifier: ^7.4.30
         version: 7.4.30
+      '@types/js-yaml':
+        specifier: ^4.0.9
+        version: 4.0.9
       '@types/luxon':
         specifier: ^3.7.1
         version: 3.7.1
       '@types/node':
         specifier: ^22.19.11
         version: 22.19.11
+      '@types/papaparse':
+        specifier: ^5.3.16
+        version: 5.5.2
       '@types/react':
         specifier: ^19.2.14
         version: 19.2.14
@@ -147,9 +162,18 @@ importers:
       eslint-plugin-storybook:
         specifier: ^10.2.11
         version: 10.2.11(eslint@9.39.3(jiti@2.6.1))(storybook@10.2.11(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      js-yaml:
+        specifier: ^4.1.1
+        version: 4.1.1
       jsdom:
         specifier: ^26.1.0
         version: 26.1.0
+      mermaid:
+        specifier: ^11.12.3
+        version: 11.15.0
+      papaparse:
+        specifier: ^5.5.3
+        version: 5.5.3
       postcss:
         specifier: ^8.5.6
         version: 8.5.6
@@ -200,6 +224,9 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
 
@@ -380,6 +407,12 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@braintree/sanitize-url@7.1.2':
+    resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==}
+
+  '@chevrotain/types@11.1.2':
+    resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==}
+
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
     engines: {node: '>=18'}
@@ -655,6 +688,12 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@3.1.3':
+    resolution: {integrity: sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -784,6 +823,9 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
+  '@mermaid-js/parser@1.1.1':
+    resolution: {integrity: sha512-VuHdsYMK1bT6X2JbcAaWAhugTRvRBRyuZgd+c22swUeI9g/ntaxF7CY7dYarhZovofCbUNO0G7JesfmNtjYOCw==}
+
   '@mieweb/datavis@file:packages/datavis':
     resolution: {directory: packages/datavis, type: directory}
 
@@ -1413,6 +1455,99 @@ packages:
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-axis@3.0.6':
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+
+  '@types/d3-brush@3.0.6':
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+
+  '@types/d3-chord@3.0.6':
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-contour@3.0.6':
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+
+  '@types/d3-delaunay@6.0.4':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
+  '@types/d3-dispatch@3.0.7':
+    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-polygon@3.0.2':
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.3':
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+
+  '@types/d3-scale-chromatic@3.1.0':
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.8':
+    resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
+
+  '@types/d3-time-format@4.0.3':
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/d3@7.4.3':
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
@@ -1422,6 +1557,9 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/google-libphonenumber@7.4.30':
     resolution: {integrity: sha512-Td1X1ayRxePEm6/jPHUBs2tT6TzW1lrVB6ZX7ViPGellyzO/0xMNi+wx5nH6jEitjznq276VGIqjK5qAju0XVw==}
 
@@ -1434,6 +1572,9 @@ packages:
   '@types/istanbul-reports@3.0.4':
     resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
 
+  '@types/js-yaml@4.0.9':
+    resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -1446,6 +1587,9 @@ packages:
   '@types/node@22.19.11':
     resolution: {integrity: sha512-BH7YwL6rA93ReqeQS1c4bsPpcfOmJasG+Fkr6Y59q83f9M1WcBRHR2vM+P9eOisYRcN3ujQoiZY8uk5W+1WL8w==}
 
+  '@types/papaparse@5.5.2':
+    resolution: {integrity: sha512-gFnFp/JMzLHCwRf7tQHrNnfhN4eYBVYYI897CGX4MY1tzY9l2aLkVyx2IlKZ/SAqDbB3I1AOZW5gTMGGsqWliA==}
+
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
@@ -1460,6 +1604,9 @@ packages:
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/wait-on@5.3.4':
     resolution: {integrity: sha512-EBsPjFMrFlMbbUFf9D1Fp+PAB2TwmUn7a3YtHyD9RLuTIk1jDd8SxXVAoez2Ciy+8Jsceo2MYEYZzJ/DvorOKw==}
 
@@ -1634,6 +1781,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@upsetjs/venn.js@2.0.0':
+    resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
+
   '@vitest/coverage-v8@3.2.4':
     resolution: {integrity: sha512-EyF9SXU6kS5Ku/U82E259WSnvg6c8KTjppUncuNdm5QHpe17mwREHnjDzozC8x9MZ0xfBUFSaLkRv4TMA75ALQ==}
     peerDependencies:
@@ -2026,6 +2176,14 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
@@ -2048,6 +2206,12 @@ packages:
   core-js@3.47.0:
     resolution: {integrity: sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==}
 
+  cose-base@1.0.3:
+    resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
+
+  cose-base@2.2.0:
+    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -2066,10 +2230,166 @@ packages:
     resolution: {integrity: sha512-YGZxdTTL9lmLkCUTpg4j0zQ7IhRB5ZmqNBbGCl3Tg6MP/d5/6sY7L5mmTjzbc6JKgVZYiqTQTNhPFsbXNGlRaA==}
     engines: {node: '>=0.8'}
 
+  cytoscape-cose-bilkent@4.1.0:
+    resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape-fcose@2.2.0:
+    resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape@3.33.3:
+    resolution: {integrity: sha512-Gej7U+OKR+LZ8kvX7rb2HhCYJ0IhvEFsnkud4SB1PR+BUY/TsSO0dmOW59WEVLu51b1Rm+gQRKoz4bLYxGSZ2g==}
+    engines: {node: '>=0.10'}
+
+  d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.2:
+    resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
+    engines: {node: '>=12'}
+
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
   d@1.0.2:
     resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
     engines: {node: '>=0.12'}
 
+  dagre-d3-es@7.0.14:
+    resolution: {integrity: sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==}
+
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
@@ -2092,6 +2412,9 @@ packages:
   datavis-ace@4.0.0-PRE.2:
     resolution: {integrity: sha512-wz7voSTEepUsSyzfhWCtB7FQbbvCoajg4zBQa8X5eWWUc4qt+41wQcvqeShEQu4osOwwbMZTKcAfaU0cqwmo+A==}
 
+  dayjs@1.11.20:
+    resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -2151,6 +2474,9 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  delaunator@5.1.0:
+    resolution: {integrity: sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -2196,6 +2522,9 @@ packages:
   domhandler@2.4.2:
     resolution: {integrity: sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==}
 
+  dompurify@3.4.3:
+    resolution: {integrity: sha512-VVwJidIJcp1hpg2OMXML3ZVRPYSZiq4aX7qBh83BSIpOaRDqI+qxhXjjIWnpzkOXhmp0L81lnoME1mnCc9H48A==}
+
   domutils@1.7.0:
     resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
 
@@ -2279,6 +2608,9 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  es-toolkit@1.46.1:
+    resolution: {integrity: sha512-5eNtXOs3tbfxXOj04tjjseeWkRWaoCjdEI+96DgwzZoe6c9juL49pXlzAFTI72aWC9Y8p7168g6XIKjh7k6pyQ==}
+
   es5-ext@0.10.64:
     resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
     engines: {node: '>=0.10'}
@@ -2626,6 +2958,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  hachure-fill@0.5.2:
+    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
+
   has-bigints@1.1.0:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
@@ -2661,6 +2996,10 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   homedir-polyfill@1.0.3:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
@@ -2719,6 +3058,9 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -2741,6 +3083,13 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
@@ -3144,9 +3493,16 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  katex@0.16.46:
+    resolution: {integrity: sha512-WHy4Coo+bGZyH7NwJKHkS04YFsFcarWbAEOAC3EMndzdN6VSZqklLLIgfxzyaW9jDoeGYJX9SWbJPKpecox0Uw==}
+    hasBin: true
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  khroma@2.1.0:
+    resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
+
   kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -3158,6 +3514,12 @@ packages:
     resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
     engines: {node: '>=0.10'}
 
+  layout-base@1.0.2:
+    resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
+
+  layout-base@2.0.1:
+    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+
   leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -3259,6 +3621,9 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
   lodash.flattendeep@4.4.0:
     resolution: {integrity: sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==}
 
@@ -3319,6 +3684,16 @@ packages:
   makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
 
+  marked@16.4.2:
+    resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
+  marked@17.0.6:
+    resolution: {integrity: sha512-gB0gkNafnonOw0obSTEGZTT86IuhILt2Wfx0mWH/1Au83kybTayroZ/V6nS25mN7u8ASy+5fMhgB3XPNrOZdmA==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -3326,6 +3701,9 @@ packages:
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
+  mermaid@11.15.0:
+    resolution: {integrity: sha512-pTMbcf3rWdtLiYGpmoTjHEpeY8seiy6sR+9nD7LOs8KfUbHE4lOUAprTRqRAcWSQ6MQpdX+YEsxShtGsINtPtw==}
+
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
@@ -3515,6 +3893,9 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+
   papaparse@5.5.3:
     resolution: {integrity: sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==}
 
@@ -3533,6 +3914,9 @@ packages:
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
+  path-data-parser@0.1.0:
+    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -3595,6 +3979,12 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  points-on-curve@0.2.0:
+    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
+
+  points-on-path@0.2.1:
+    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -3833,11 +4223,17 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
+  robust-predicates@3.0.3:
+    resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
+
   rollup@4.59.0:
     resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  roughjs@4.6.6:
+    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
+
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
@@ -3845,6 +4241,9 @@ packages:
     resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
     engines: {node: '>=18'}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
@@ -4070,6 +4469,9 @@ packages:
   strip-literal@3.1.0:
     resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
 
+  stylis@4.4.0:
+    resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
+
   sucrase@3.35.1:
     resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -4132,6 +4534,10 @@ packages:
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
+  tinyexec@1.1.2:
+    resolution: {integrity: sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
@@ -4289,6 +4695,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@14.0.0:
+    resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
+    hasBin: true
+
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -4540,6 +4950,11 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
 
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.6.0
+      tinyexec: 1.1.2
+
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -4743,6 +5158,10 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@braintree/sanitize-url@7.1.2': {}
+
+  '@chevrotain/types@11.1.2': {}
+
   '@csstools/color-helpers@5.1.0': {}
 
   '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
@@ -4945,6 +5364,14 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@3.1.3':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/types': 2.0.0
+      import-meta-resolve: 4.2.0
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -5178,6 +5605,10 @@ snapshots:
       '@types/react': 19.2.14
       react: 19.2.4
 
+  '@mermaid-js/parser@1.1.1':
+    dependencies:
+      '@chevrotain/types': 11.1.2
+
   '@mieweb/datavis@file:packages/datavis(ag-grid-community@35.1.0)(ag-grid-react@35.1.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(wavesurfer.js@7.12.1)':
     dependencies:
       '@dnd-kit/core': 6.3.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -5743,12 +6174,131 @@ snapshots:
       '@types/deep-eql': 4.0.2
       assertion-error: 2.0.1
 
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-axis@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-brush@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-chord@3.0.6': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-contour@3.0.6':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-delaunay@6.0.4': {}
+
+  '@types/d3-dispatch@3.0.7': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-dsv@3.0.7': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-polygon@3.0.2': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.3': {}
+
+  '@types/d3-scale-chromatic@3.1.0': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.8':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time-format@4.0.3': {}
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3@7.4.3':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.7
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+
   '@types/deep-eql@4.0.2': {}
 
   '@types/doctrine@0.0.9': {}
 
   '@types/estree@1.0.8': {}
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/google-libphonenumber@7.4.30': {}
 
   '@types/istanbul-lib-coverage@2.0.6': {}
@@ -5761,6 +6311,8 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-report': 3.0.3
 
+  '@types/js-yaml@4.0.9': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/luxon@3.7.1': {}
@@ -5771,6 +6323,10 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/papaparse@5.5.2':
+    dependencies:
+      '@types/node': 22.19.11
+
   '@types/react-dom@19.2.3(@types/react@19.2.14)':
     dependencies:
       '@types/react': 19.2.14
@@ -5783,6 +6339,9 @@ snapshots:
 
   '@types/stack-utils@2.0.3': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/wait-on@5.3.4':
     dependencies:
       '@types/node': 22.19.11
@@ -5945,6 +6504,11 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
+  '@upsetjs/venn.js@2.0.0':
+    optionalDependencies:
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/node@22.19.11)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -6393,6 +6957,10 @@ snapshots:
 
   commander@4.1.1: {}
 
+  commander@7.2.0: {}
+
+  commander@8.3.0: {}
+
   commondir@1.0.1: {}
 
   concat-map@0.0.1: {}
@@ -6407,6 +6975,14 @@ snapshots:
 
   core-js@3.47.0: {}
 
+  cose-base@1.0.3:
+    dependencies:
+      layout-base: 1.0.2
+
+  cose-base@2.2.0:
+    dependencies:
+      layout-base: 2.0.1
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -6427,11 +7003,195 @@ snapshots:
       find-pkg: 0.1.2
       fs-exists-sync: 0.1.0
 
+  cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.3):
+    dependencies:
+      cose-base: 1.0.3
+      cytoscape: 3.33.3
+
+  cytoscape-fcose@2.2.0(cytoscape@3.33.3):
+    dependencies:
+      cose-base: 2.2.0
+      cytoscape: 3.33.3
+
+  cytoscape@3.33.3: {}
+
+  d3-array@2.12.1:
+    dependencies:
+      internmap: 1.0.1
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-axis@3.0.0: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-color@3.1.0: {}
+
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.1.0
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
+  d3-ease@3.0.1: {}
+
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-format@3.1.2: {}
+
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@1.0.9: {}
+
+  d3-path@3.1.0: {}
+
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-sankey@0.12.3:
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@1.3.7:
+    dependencies:
+      d3-path: 1.0.9
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.2
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+
   d@1.0.2:
     dependencies:
       es5-ext: 0.10.64
       type: 2.7.3
 
+  dagre-d3-es@7.0.14:
+    dependencies:
+      d3: 7.9.0
+      lodash-es: 4.18.1
+
   damerau-levenshtein@1.0.8: {}
 
   data-urls@5.0.0:
@@ -6469,6 +7229,8 @@ snapshots:
       sprintf-js: 1.1.3
       underscore: 1.13.8
 
+  dayjs@1.11.20: {}
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -6510,6 +7272,10 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  delaunator@5.1.0:
+    dependencies:
+      robust-predicates: 3.0.3
+
   delayed-stream@1.0.0: {}
 
   dequal@2.0.3: {}
@@ -6547,6 +7313,10 @@ snapshots:
     dependencies:
       domelementtype: 1.3.1
 
+  dompurify@3.4.3:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@1.7.0:
     dependencies:
       dom-serializer: 0.2.2
@@ -6690,6 +7460,8 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  es-toolkit@1.46.1: {}
+
   es5-ext@0.10.64:
     dependencies:
       es6-iterator: 2.0.3
@@ -7128,6 +7900,8 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  hachure-fill@0.5.2: {}
+
   has-bigints@1.1.0: {}
 
   has-flag@3.0.0: {}
@@ -7157,6 +7931,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  highlight.js@11.11.1: {}
+
   homedir-polyfill@1.0.3:
     dependencies:
       parse-passwd: 1.0.0
@@ -7220,6 +7996,8 @@ snapshots:
       pkg-dir: 4.2.0
       resolve-cwd: 3.0.0
 
+  import-meta-resolve@4.2.0: {}
+
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
@@ -7239,6 +8017,10 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  internmap@1.0.1: {}
+
+  internmap@2.0.3: {}
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
@@ -7876,10 +8658,16 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  katex@0.16.46:
+    dependencies:
+      commander: 8.3.0
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
+  khroma@2.1.0: {}
+
   kleur@3.0.3: {}
 
   language-subtag-registry@0.3.23: {}
@@ -7888,6 +8676,10 @@ snapshots:
     dependencies:
       language-subtag-registry: 0.3.23
 
+  layout-base@1.0.2: {}
+
+  layout-base@2.0.1: {}
+
   leven@3.1.0: {}
 
   levn@0.4.1:
@@ -7958,6 +8750,8 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  lodash-es@4.18.1: {}
+
   lodash.flattendeep@4.4.0: {}
 
   lodash.merge@4.6.2: {}
@@ -8010,10 +8804,38 @@ snapshots:
     dependencies:
       tmpl: 1.0.5
 
+  marked@16.4.2: {}
+
+  marked@17.0.6: {}
+
   math-intrinsics@1.1.0: {}
 
   merge-stream@2.0.0: {}
 
+  mermaid@11.15.0:
+    dependencies:
+      '@braintree/sanitize-url': 7.1.2
+      '@iconify/utils': 3.1.3
+      '@mermaid-js/parser': 1.1.1
+      '@types/d3': 7.4.3
+      '@upsetjs/venn.js': 2.0.0
+      cytoscape: 3.33.3
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.3)
+      cytoscape-fcose: 2.2.0(cytoscape@3.33.3)
+      d3: 7.9.0
+      d3-sankey: 0.12.3
+      dagre-d3-es: 7.0.14
+      dayjs: 1.11.20
+      dompurify: 3.4.3
+      es-toolkit: 1.46.1
+      katex: 0.16.46
+      khroma: 2.1.0
+      marked: 16.4.2
+      roughjs: 4.6.6
+      stylis: 4.4.0
+      ts-dedent: 2.2.0
+      uuid: 14.0.0
+
   mime-db@1.52.0: {}
 
   mime-types@2.1.35:
@@ -8227,6 +9049,8 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  package-manager-detector@1.6.0: {}
+
   papaparse@5.5.3: {}
 
   parent-module@1.0.1:
@@ -8246,6 +9070,8 @@ snapshots:
     dependencies:
       entities: 6.0.1
 
+  path-data-parser@0.1.0: {}
+
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
@@ -8294,6 +9120,13 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
+  points-on-curve@0.2.0: {}
+
+  points-on-path@0.2.1:
+    dependencies:
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.6):
@@ -8476,6 +9309,8 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
+  robust-predicates@3.0.3: {}
+
   rollup@4.59.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -8507,10 +9342,19 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.59.0
       fsevents: 2.3.3
 
+  roughjs@4.6.6:
+    dependencies:
+      hachure-fill: 0.5.2
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+
   rrweb-cssom@0.8.0: {}
 
   run-applescript@7.1.0: {}
 
+  rw@1.3.3: {}
+
   rxjs@7.8.2:
     dependencies:
       tslib: 2.8.1
@@ -8788,6 +9632,8 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
+  stylis@4.4.0: {}
+
   sucrase@3.35.1:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -8850,6 +9696,8 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
+  tinyexec@1.1.2: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
@@ -9035,6 +9883,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@14.0.0: {}
+
   uuid@8.3.2: {}
 
   v8-to-istanbul@9.3.0:
diff --git a/src/components/Markdown/CodeBlock.tsx b/src/components/Markdown/CodeBlock.tsx
new file mode 100644
index 00000000..1277318a
--- /dev/null
+++ b/src/components/Markdown/CodeBlock.tsx
@@ -0,0 +1,32 @@
+/**
+ * CodeBlock — Renders a syntax-highlighted code fence using FenceBlock.
+ *
+ * Used by `MarkdownRenderer` for plain (non-special) fenced code blocks.
+ * Highlighting is performed synchronously via the `highlightCode` helper from
+ * `useMarkdown`; if the language was not pre-registered with highlight.js the
+ * helper falls back to escaped raw text.
+ */
+import React, { useMemo } from 'react';
+
+import { FenceBlock } from './FenceBlock';
+import { highlightCode } from './useMarkdown';
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
+  const html = useMemo(() => highlightCode(code, language), [code, language]);
+
+  return (
+    <FenceBlock code={code} language={language}>
+      <pre className="m-0 overflow-x-auto bg-transparent p-3 text-sm">
+        <code
+          className="hljs bg-transparent p-0"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </pre>
+    </FenceBlock>
+  );
+};
diff --git a/src/components/Markdown/CsvBlock.tsx b/src/components/Markdown/CsvBlock.tsx
new file mode 100644
index 00000000..7362f2e2
--- /dev/null
+++ b/src/components/Markdown/CsvBlock.tsx
@@ -0,0 +1,143 @@
+/**
+ * CsvBlock — Renders CSV data as an interactive sortable table.
+ * Requires `papaparse` to be installed by the consumer (optional peer dependency).
+ */
+import { Download } from 'lucide-react';
+import Papa from 'papaparse';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { Button } from '../Button';
+import { FenceBlock } from './FenceBlock';
+
+interface CsvBlockProps {
+  code: string;
+  id: string;
+}
+
+interface SortConfig {
+  column: string;
+  direction: 'asc' | 'desc';
+}
+
+export const CsvBlock: React.FC<CsvBlockProps> = ({ code, id }) => {
+  const [sortConfig, setSortConfig] = useState<SortConfig | null>(null);
+
+  const parsed = useMemo(() => {
+    try {
+      const result = Papa.parse(code, {
+        header: true,
+        dynamicTyping: true,
+        skipEmptyLines: 'greedy' as const,
+      }) as Papa.ParseResult<Record<string, string>>;
+      return { headers: result.meta.fields ?? [], rows: result.data, error: null };
+    } catch (err) {
+      return {
+        headers: [] as string[],
+        rows: [] as Record<string, string>[],
+        error: (err as Error).message,
+      };
+    }
+  }, [code]);
+
+  const sortedRows = useMemo(() => {
+    if (!sortConfig || parsed.error) return parsed.rows;
+    return [...parsed.rows].sort((a, b) => {
+      const aVal = a[sortConfig.column];
+      const bVal = b[sortConfig.column];
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+      const cmp =
+        typeof aVal === 'number' && typeof bVal === 'number'
+          ? aVal - bVal
+          : String(aVal).localeCompare(String(bVal));
+      return sortConfig.direction === 'asc' ? cmp : -cmp;
+    });
+  }, [parsed.rows, sortConfig, parsed.error]);
+
+  const handleSort = useCallback((column: string) => {
+    setSortConfig((prev) => {
+      if (prev?.column === column) {
+        return prev.direction === 'asc' ? { column, direction: 'desc' } : null;
+      }
+      return { column, direction: 'asc' };
+    });
+  }, []);
+
+  const handleExportCsv = useCallback(() => {
+    const csvContent = Papa.unparse(sortedRows);
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `data-${id}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, [sortedRows, id]);
+
+  if (parsed.error) {
+    return (
+      <FenceBlock code={code} language="csv" error={parsed.error}>
+        <div />
+      </FenceBlock>
+    );
+  }
+
+  return (
+    <FenceBlock code={code} language="csv" supportsRawView>
+      <div className="relative">
+        <div className="flex items-center justify-between border-b border-neutral-200 px-3 py-1.5 dark:border-neutral-700">
+          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+            {sortedRows.length} row{sortedRows.length !== 1 ? 's' : ''} × {parsed.headers.length}{' '}
+            column{parsed.headers.length !== 1 ? 's' : ''}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleExportCsv}
+            aria-label="Export CSV"
+            className="h-7 gap-1 px-2 text-xs"
+          >
+            <Download className="h-3 w-3" />
+            Export
+          </Button>
+        </div>
+
+        <div className="max-h-96 overflow-auto">
+          <table className="min-w-full text-sm">
+            <thead className="sticky top-0 bg-neutral-100 dark:bg-neutral-800">
+              <tr>
+                {parsed.headers.map((header) => (
+                  <th
+                    key={header}
+                    onClick={() => handleSort(header)}
+                    className="cursor-pointer select-none whitespace-nowrap px-3 py-2 text-left text-xs font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200"
+                  >
+                    {header}
+                    {sortConfig?.column === header && (
+                      <span className="ml-1">{sortConfig.direction === 'asc' ? '↑' : '↓'}</span>
+                    )}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-neutral-200 dark:divide-neutral-700">
+              {sortedRows.map((row, i) => (
+                <tr key={i} className="hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
+                  {parsed.headers.map((header) => (
+                    <td
+                      key={header}
+                      className="whitespace-nowrap px-3 py-1.5 text-neutral-700 dark:text-neutral-300"
+                    >
+                      {row[header] != null ? String(row[header]) : ''}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </FenceBlock>
+  );
+};
diff --git a/src/components/Markdown/FenceBlock.tsx b/src/components/Markdown/FenceBlock.tsx
new file mode 100644
index 00000000..c38965ea
--- /dev/null
+++ b/src/components/Markdown/FenceBlock.tsx
@@ -0,0 +1,112 @@
+/**
+ * FenceBlock — Base wrapper for code blocks with copy, raw view toggle, and errors.
+ */
+import { Check, ClipboardCopy, Code, Eye } from 'lucide-react';
+import React, { useCallback, useState } from 'react';
+
+import { Button } from '../Button';
+
+export interface FenceBlockProps {
+  /** Raw source code */
+  code: string;
+  /** Language identifier */
+  language?: string;
+  /** Whether to show raw view toggle */
+  supportsRawView?: boolean;
+  /** Error message, if failed rendering */
+  error?: string;
+  /** Rendered content (children) */
+  children: React.ReactNode;
+}
+
+type CopyState = 'idle' | 'copying' | 'success' | 'error';
+
+export const FenceBlock: React.FC<FenceBlockProps> = ({
+  code,
+  language,
+  supportsRawView = false,
+  error,
+  children,
+}) => {
+  const [copyState, setCopyState] = useState<CopyState>('idle');
+  const [showRaw, setShowRaw] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    if (copyState === 'copying') return;
+    setCopyState('copying');
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopyState('success');
+      setTimeout(() => setCopyState('idle'), 2000);
+    } catch {
+      try {
+        const textarea = document.createElement('textarea');
+        textarea.value = code;
+        textarea.style.position = 'fixed';
+        textarea.style.opacity = '0';
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+        setCopyState('success');
+        setTimeout(() => setCopyState('idle'), 2000);
+      } catch {
+        setCopyState('error');
+        setTimeout(() => setCopyState('idle'), 2000);
+      }
+    }
+  }, [code, copyState]);
+
+  return (
+    <div className="group relative my-3 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900">
+      <div className="flex items-center justify-between border-b border-neutral-200 px-3 py-1.5 dark:border-neutral-700">
+        <span className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+          {language || 'text'}
+        </span>
+        <div className="flex items-center gap-1">
+          {supportsRawView && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowRaw((v) => !v)}
+              aria-label={showRaw ? 'Show rendered view' : 'Show raw code'}
+              className="h-7 w-7 p-0"
+            >
+              {showRaw ? <Eye className="h-3.5 w-3.5" /> : <Code className="h-3.5 w-3.5" />}
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleCopy}
+            aria-label="Copy code"
+            className="h-7 w-7 p-0"
+          >
+            {copyState === 'success' ? (
+              <Check className="h-3.5 w-3.5 text-green-500" />
+            ) : (
+              <ClipboardCopy className="h-3.5 w-3.5" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {error ? (
+        <div className="p-3">
+          <div className="rounded-md bg-red-50 p-3 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-300">
+            {error}
+          </div>
+          <pre className="mt-2 overflow-x-auto whitespace-pre-wrap text-xs text-neutral-600 dark:text-neutral-400">
+            <code>{code}</code>
+          </pre>
+        </div>
+      ) : showRaw ? (
+        <pre className="overflow-x-auto p-3 text-sm">
+          <code>{code}</code>
+        </pre>
+      ) : (
+        <div className="overflow-x-auto">{children}</div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Markdown/HtmlPreviewBlock.tsx b/src/components/Markdown/HtmlPreviewBlock.tsx
new file mode 100644
index 00000000..2fe44ce0
--- /dev/null
+++ b/src/components/Markdown/HtmlPreviewBlock.tsx
@@ -0,0 +1,130 @@
+/**
+ * HtmlPreviewBlock — Sandboxed iframe preview for HTML code blocks.
+ */
+import { Code, Eye, Maximize2 } from 'lucide-react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Button } from '../Button';
+import { FenceBlock } from './FenceBlock';
+
+interface HtmlPreviewBlockProps {
+  code: string;
+  id: string;
+}
+
+function isFullDocument(html: string): boolean {
+  return /<!DOCTYPE|<html/i.test(html);
+}
+
+function wrapFragment(html: string): string {
+  return `<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"><style>body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:14px}</style></head>
+<body>${html}</body>
+</html>`;
+}
+
+export const HtmlPreviewBlock: React.FC<HtmlPreviewBlockProps> = ({ code, id }) => {
+  const [showPreview, setShowPreview] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [iframeHeight, setIframeHeight] = useState(200);
+
+  const srcdoc = isFullDocument(code) ? code : wrapFragment(code);
+
+  useEffect(() => {
+    function handleMessage(event: MessageEvent) {
+      if (event.data?.type === 'HTML_PREVIEW_RESIZE' && event.data?.id === id) {
+        setIframeHeight(Math.min(Math.max(event.data.height, 200), 4000));
+      }
+    }
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [id]);
+
+  const handleCloseExpanded = useCallback(() => {
+    setExpanded(false);
+  }, []);
+
+  useEffect(() => {
+    if (!expanded) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setExpanded(false);
+    }
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [expanded]);
+
+  return (
+    <>
+      <FenceBlock code={code} language="html" supportsRawView>
+        <div className="relative">
+          <div className="flex items-center gap-1 border-b border-neutral-200 px-3 py-1 dark:border-neutral-700">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowPreview((v) => !v)}
+              className="h-7 gap-1 px-2 text-xs"
+            >
+              {showPreview ? <Code className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+              {showPreview ? 'Code' : 'Preview'}
+            </Button>
+            {showPreview && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setExpanded(true)}
+                className="h-7 w-7 p-0"
+                aria-label="Expand preview"
+              >
+                <Maximize2 className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
+
+          {showPreview ? (
+            <iframe
+              srcDoc={srcdoc}
+              sandbox="allow-scripts allow-forms"
+              referrerPolicy="no-referrer"
+              className="w-full border-0"
+              style={{ height: iframeHeight }}
+              title="HTML Preview"
+            />
+          ) : (
+            <pre className="overflow-x-auto p-3 text-sm">
+              <code>{code}</code>
+            </pre>
+          )}
+        </div>
+      </FenceBlock>
+
+      {expanded && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+          onClick={handleCloseExpanded}
+          role="dialog"
+          aria-modal="true"
+        >
+          <div
+            className="h-[90vh] w-[90vw] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between border-b border-neutral-200 px-4 py-2 dark:border-neutral-700">
+              <span className="text-sm font-medium">HTML Preview</span>
+              <Button variant="ghost" size="sm" onClick={() => setExpanded(false)}>
+                Close
+              </Button>
+            </div>
+            <iframe
+              srcDoc={srcdoc}
+              sandbox="allow-scripts allow-forms"
+              referrerPolicy="no-referrer"
+              className="h-full w-full border-0"
+              title="HTML Preview (expanded)"
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/Markdown/MarkdownRenderer.tsx b/src/components/Markdown/MarkdownRenderer.tsx
new file mode 100644
index 00000000..051422e3
--- /dev/null
+++ b/src/components/Markdown/MarkdownRenderer.tsx
@@ -0,0 +1,144 @@
+/**
+ * MarkdownRenderer — Renders markdown text with special block handling.
+ *
+ * Converts markdown to HTML via useMarkdown hook, then mounts React components
+ * for special fence blocks (mermaid, csv, survey, html-preview) via portals.
+ */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { CodeBlock } from './CodeBlock';
+import { CsvBlock } from './CsvBlock';
+import { HtmlPreviewBlock } from './HtmlPreviewBlock';
+import { MermaidBlock } from './MermaidBlock';
+import { SurveyBlock } from './SurveyBlock';
+import { useMarkdown } from './useMarkdown';
+
+export interface MarkdownRendererProps {
+  /** Raw markdown text */
+  text: string;
+  /** Cache key (e.g., message._id + revisionNumber) */
+  cacheKey?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether the message is still streaming (may have incomplete blocks) */
+  streaming?: boolean;
+}
+
+interface BlockPortal {
+  id: string;
+  type: string;
+  code: string;
+  language?: string;
+  container: Element;
+}
+
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
+  text,
+  cacheKey,
+  className = '',
+  streaming = false,
+}) => {
+  const { render, renderAsync } = useMarkdown();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [html, setHtml] = useState('');
+  const [portals, setPortals] = useState<BlockPortal[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    // While streaming, append text length to the cache key so each delta
+    // produces a fresh render rather than a stale hit on the messageId.
+    const effectiveKey = streaming
+      ? cacheKey
+        ? `${cacheKey}::${text.length}`
+        : undefined
+      : cacheKey;
+
+    async function doRender() {
+      const rendered = await renderAsync(text, effectiveKey);
+      if (!cancelled) {
+        setHtml(rendered);
+      }
+    }
+
+    if (streaming) {
+      setHtml(render(text, effectiveKey));
+    } else {
+      void doRender();
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [text, cacheKey, streaming, render, renderAsync]);
+
+  useEffect(() => {
+    if (!containerRef.current || !html) return;
+
+    const blocks: BlockPortal[] = [];
+    const placeholders = containerRef.current.querySelectorAll('[data-block-type]');
+
+    for (const el of placeholders) {
+      const type = el.getAttribute('data-block-type');
+      const id = el.getAttribute('data-block-id');
+      const encodedCode = el.getAttribute('data-code');
+
+      if (!type || !id || !encodedCode) continue;
+
+      const code = decodeURIComponent(encodedCode);
+      const language = el.getAttribute('data-lang') ?? undefined;
+      blocks.push({ id, type, code, language, container: el });
+    }
+
+    setPortals(blocks);
+  }, [html]);
+
+  const renderPortal = useCallback((portal: BlockPortal) => {
+    switch (portal.type) {
+      case 'code':
+        return createPortal(
+          <CodeBlock code={portal.code} language={portal.language} />,
+          portal.container,
+          portal.id,
+        );
+      case 'mermaid':
+        return createPortal(
+          <MermaidBlock code={portal.code} id={portal.id} />,
+          portal.container,
+          portal.id,
+        );
+      case 'csv':
+        return createPortal(
+          <CsvBlock code={portal.code} id={portal.id} />,
+          portal.container,
+          portal.id,
+        );
+      case 'survey':
+        return createPortal(
+          <SurveyBlock code={portal.code} id={portal.id} />,
+          portal.container,
+          portal.id,
+        );
+      case 'html-preview':
+        return createPortal(
+          <HtmlPreviewBlock code={portal.code} id={portal.id} />,
+          portal.container,
+          portal.id,
+        );
+      default:
+        return null;
+    }
+  }, []);
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className={`prose prose-sm dark:prose-invert max-w-none ${className}`.trim()}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+      {portals.map(renderPortal)}
+    </>
+  );
+};
diff --git a/src/components/Markdown/MermaidBlock.tsx b/src/components/Markdown/MermaidBlock.tsx
new file mode 100644
index 00000000..b9480720
--- /dev/null
+++ b/src/components/Markdown/MermaidBlock.tsx
@@ -0,0 +1,78 @@
+/**
+ * MermaidBlock — Renders Mermaid diagrams.
+ * Requires `mermaid` to be installed by the consumer (optional peer dependency).
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { FenceBlock } from './FenceBlock';
+
+interface MermaidBlockProps {
+  code: string;
+  id: string;
+}
+
+type MermaidApi = {
+  initialize: (config: Record<string, unknown>) => void;
+  parse: (text: string) => Promise<unknown>;
+  render: (id: string, text: string) => Promise<{ svg: string }>;
+};
+
+let mermaidInstance: MermaidApi | null = null;
+let mermaidReady: Promise<MermaidApi> | null = null;
+
+async function getMermaid(): Promise<MermaidApi> {
+  if (mermaidInstance) return mermaidInstance;
+  if (!mermaidReady) {
+    mermaidReady = import(/* @vite-ignore */ 'mermaid').then((mod) => {
+      const m = (mod as { default: MermaidApi }).default;
+      m.initialize({
+        startOnLoad: false,
+        theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
+        securityLevel: 'loose',
+      });
+      mermaidInstance = m;
+      return m;
+    });
+  }
+  return mermaidReady;
+}
+
+export const MermaidBlock: React.FC<MermaidBlockProps> = ({ code, id }) => {
+  const [svg, setSvg] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+
+  const render = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const mermaid = await getMermaid();
+      await mermaid.parse(code);
+      const { svg: rendered } = await mermaid.render(`mermaid-${id}`, code);
+      setSvg(rendered);
+    } catch (err) {
+      setError((err as Error).message ?? 'Failed to render diagram');
+    } finally {
+      setLoading(false);
+    }
+  }, [code, id]);
+
+  useEffect(() => {
+    void render();
+  }, [render]);
+
+  return (
+    <FenceBlock code={code} language="mermaid" supportsRawView error={error || undefined}>
+      {loading ? (
+        <div className="flex items-center justify-center p-8">
+          <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-500 border-t-transparent" />
+        </div>
+      ) : (
+        <div
+          className="flex justify-center p-4"
+          dangerouslySetInnerHTML={{ __html: svg }}
+        />
+      )}
+    </FenceBlock>
+  );
+};
diff --git a/src/components/Markdown/SurveyBlock.tsx b/src/components/Markdown/SurveyBlock.tsx
new file mode 100644
index 00000000..cc267761
--- /dev/null
+++ b/src/components/Markdown/SurveyBlock.tsx
@@ -0,0 +1,155 @@
+/**
+ * SurveyBlock — Renders survey/questionnaire forms from JSON/YAML data.
+ * Requires `js-yaml` to be installed by the consumer (optional peer dependency).
+ */
+import yaml from 'js-yaml';
+import React, { useMemo } from 'react';
+
+import { FenceBlock } from './FenceBlock';
+
+interface SurveyBlockProps {
+  code: string;
+  id: string;
+}
+
+interface SurveyField {
+  type: string;
+  name: string;
+  title?: string;
+  label?: string;
+  choices?: Array<string | { value: string; text: string }>;
+  isRequired?: boolean;
+}
+
+interface ParsedSurvey {
+  fields: SurveyField[];
+  error: string | null;
+}
+
+function parseSurveyData(code: string): ParsedSurvey {
+  let data: unknown;
+
+  try {
+    data = JSON.parse(code);
+  } catch {
+    try {
+      data = yaml.load(code);
+    } catch (err) {
+      return { fields: [], error: `Failed to parse survey data: ${(err as Error).message}` };
+    }
+  }
+
+  if (!data || typeof data !== 'object') {
+    return { fields: [], error: 'Invalid survey data format' };
+  }
+
+  const obj = data as Record<string, unknown>;
+
+  let elements: unknown[] = [];
+  if (Array.isArray(obj.pages)) {
+    for (const page of obj.pages as Array<Record<string, unknown>>) {
+      if (Array.isArray(page.elements)) {
+        elements = elements.concat(page.elements);
+      }
+    }
+  } else if (Array.isArray(obj.elements)) {
+    elements = obj.elements;
+  } else if (Array.isArray(obj.questions)) {
+    elements = obj.questions;
+  } else if (Array.isArray(obj.fields)) {
+    elements = obj.fields;
+  } else {
+    return { fields: [], error: 'No survey questions found in data' };
+  }
+
+  return { fields: elements as SurveyField[], error: null };
+}
+
+export const SurveyBlock: React.FC<SurveyBlockProps> = ({ code, id }) => {
+  const { fields, error } = useMemo(() => parseSurveyData(code), [code]);
+
+  return (
+    <FenceBlock code={code} language="survey" supportsRawView error={error ?? undefined}>
+      <div className="space-y-4 p-4">
+        <h4 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+          Survey Preview
+        </h4>
+        {fields.map((field, i) => (
+          <div key={field.name ?? i} className="space-y-1.5">
+            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+              {field.title ?? field.label ?? field.name}
+              {field.isRequired && <span className="ml-1 text-red-500">*</span>}
+            </label>
+
+            {(field.type === 'radiogroup' || field.type === 'radio') && field.choices && (
+              <div className="space-y-1">
+                {field.choices.map((choice, ci) => {
+                  const value = typeof choice === 'string' ? choice : choice.value;
+                  const text = typeof choice === 'string' ? choice : choice.text;
+                  return (
+                    <label
+                      key={ci}
+                      className="flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400"
+                    >
+                      <input
+                        type="radio"
+                        name={`${id}-${field.name}`}
+                        value={value}
+                        disabled
+                        className="accent-primary-500"
+                      />
+                      {text}
+                    </label>
+                  );
+                })}
+              </div>
+            )}
+
+            {(field.type === 'checkbox' || field.type === 'boolean') && (
+              <input type="checkbox" disabled className="accent-primary-500" />
+            )}
+
+            {(field.type === 'text' || field.type === 'comment') && (
+              <input
+                type="text"
+                disabled
+                placeholder={field.title ?? field.name}
+                className="w-full rounded-md border border-neutral-300 bg-neutral-100 px-3 py-1.5 text-sm dark:border-neutral-600 dark:bg-neutral-800"
+              />
+            )}
+
+            {field.type === 'rating' && (
+              <div className="flex gap-1">
+                {[1, 2, 3, 4, 5].map((n) => (
+                  <span key={n} className="text-lg text-neutral-300 dark:text-neutral-600">
+                    ★
+                  </span>
+                ))}
+              </div>
+            )}
+
+            {field.type === 'dropdown' && field.choices && (
+              <select
+                disabled
+                className="w-full rounded-md border border-neutral-300 bg-neutral-100 px-3 py-1.5 text-sm dark:border-neutral-600 dark:bg-neutral-800"
+              >
+                {field.choices.map((choice, ci) => {
+                  const value = typeof choice === 'string' ? choice : choice.value;
+                  const text = typeof choice === 'string' ? choice : choice.text;
+                  return (
+                    <option key={ci} value={value}>
+                      {text}
+                    </option>
+                  );
+                })}
+              </select>
+            )}
+          </div>
+        ))}
+        <p className="text-xs text-neutral-400 dark:text-neutral-500">
+          This is a preview. Interactive survey support coming soon.
+        </p>
+      </div>
+    </FenceBlock>
+  );
+};
diff --git a/src/components/Markdown/index.ts b/src/components/Markdown/index.ts
new file mode 100644
index 00000000..03c07556
--- /dev/null
+++ b/src/components/Markdown/index.ts
@@ -0,0 +1,8 @@
+export { CodeBlock } from './CodeBlock';
+export { CsvBlock } from './CsvBlock';
+export { FenceBlock, type FenceBlockProps } from './FenceBlock';
+export { HtmlPreviewBlock } from './HtmlPreviewBlock';
+export { MarkdownRenderer, type MarkdownRendererProps } from './MarkdownRenderer';
+export { MermaidBlock } from './MermaidBlock';
+export { SurveyBlock } from './SurveyBlock';
+export { highlightCode, useMarkdown, type UseMarkdownResult } from './useMarkdown';
diff --git a/src/components/Markdown/styles.css b/src/components/Markdown/styles.css
new file mode 100644
index 00000000..58b1fa4f
--- /dev/null
+++ b/src/components/Markdown/styles.css
@@ -0,0 +1,139 @@
+/*
+ * highlight.js theme — atom-one-light (default) + atom-one-dark (scoped).
+ *
+ * Bundled in-tree (rather than via `@import 'highlight.js/styles/...'`) so we
+ * can scope the dark variant under `[data-theme="dark"]` and keep theme
+ * switching synchronous — no FOUC on streamed code blocks.
+ *
+ * Source: highlight.js v11 atom-one-light / atom-one-dark themes.
+ */
+
+/* Layout (theme-agnostic) */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+
+/* atom-one-light (default) */
+.hljs {
+  color: #383a42;
+  background: #fafafa;
+}
+.hljs-comment,
+.hljs-quote {
+  color: #a0a1a7;
+  font-style: italic;
+}
+.hljs-doctag,
+.hljs-formula,
+.hljs-keyword {
+  color: #a626a4;
+}
+.hljs-deletion,
+.hljs-name,
+.hljs-section,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #e45649;
+}
+.hljs-literal {
+  color: #0184bb;
+}
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: #50a14f;
+}
+.hljs-attr,
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+  color: #986801;
+}
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-symbol,
+.hljs-title {
+  color: #4078f2;
+}
+.hljs-built_in,
+.hljs-class .hljs-title,
+.hljs-title.class_ {
+  color: #c18401;
+}
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-strong {
+  font-weight: 700;
+}
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* atom-one-dark (scoped under data-theme="dark") */
+[data-theme='dark'] .hljs {
+  color: #abb2bf;
+  background: #282c34;
+}
+[data-theme='dark'] .hljs-comment,
+[data-theme='dark'] .hljs-quote {
+  color: #5c6370;
+}
+[data-theme='dark'] .hljs-doctag,
+[data-theme='dark'] .hljs-formula,
+[data-theme='dark'] .hljs-keyword {
+  color: #c678dd;
+}
+[data-theme='dark'] .hljs-deletion,
+[data-theme='dark'] .hljs-name,
+[data-theme='dark'] .hljs-section,
+[data-theme='dark'] .hljs-selector-tag,
+[data-theme='dark'] .hljs-subst {
+  color: #e06c75;
+}
+[data-theme='dark'] .hljs-literal {
+  color: #56b6c2;
+}
+[data-theme='dark'] .hljs-addition,
+[data-theme='dark'] .hljs-attribute,
+[data-theme='dark'] .hljs-meta .hljs-string,
+[data-theme='dark'] .hljs-regexp,
+[data-theme='dark'] .hljs-string {
+  color: #98c379;
+}
+[data-theme='dark'] .hljs-attr,
+[data-theme='dark'] .hljs-number,
+[data-theme='dark'] .hljs-selector-attr,
+[data-theme='dark'] .hljs-selector-class,
+[data-theme='dark'] .hljs-selector-pseudo,
+[data-theme='dark'] .hljs-template-variable,
+[data-theme='dark'] .hljs-type,
+[data-theme='dark'] .hljs-variable {
+  color: #d19a66;
+}
+[data-theme='dark'] .hljs-bullet,
+[data-theme='dark'] .hljs-link,
+[data-theme='dark'] .hljs-meta,
+[data-theme='dark'] .hljs-selector-id,
+[data-theme='dark'] .hljs-symbol,
+[data-theme='dark'] .hljs-title {
+  color: #61aeee;
+}
+[data-theme='dark'] .hljs-built_in,
+[data-theme='dark'] .hljs-class .hljs-title,
+[data-theme='dark'] .hljs-title.class_ {
+  color: #e6c07b;
+}
diff --git a/src/components/Markdown/useMarkdown.ts b/src/components/Markdown/useMarkdown.ts
new file mode 100644
index 00000000..db4fae4d
--- /dev/null
+++ b/src/components/Markdown/useMarkdown.ts
@@ -0,0 +1,289 @@
+/**
+ * useMarkdown — Hook that converts raw Markdown text to sanitised HTML.
+ *
+ * Features:
+ * - GFM + line breaks via `marked`
+ * - Syntax highlighting via `highlight.js` with lazy language loading
+ * - Sanitisation via DOMPurify (target="_blank" on links)
+ * - Special fence blocks emitted as placeholder divs (mermaid, csv, survey,
+ *   html, code) — `MarkdownRenderer` mounts React portals into them.
+ */
+import DOMPurify from 'dompurify';
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import sql from 'highlight.js/lib/languages/sql';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+import { marked, type MarkedOptions, type RendererThis, type Tokens } from 'marked';
+import { useCallback, useMemo } from 'react';
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('ts', typescript);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('html', xml);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('shell', bash);
+hljs.registerLanguage('sh', bash);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('yml', yaml);
+hljs.registerLanguage('markdown', markdown);
+hljs.registerLanguage('md', markdown);
+
+const lazyLanguages: Record<string, () => Promise<unknown>> = {
+  java: () => import('highlight.js/lib/languages/java'),
+  cpp: () => import('highlight.js/lib/languages/cpp'),
+  'c++': () => import('highlight.js/lib/languages/cpp'),
+  c: () => import('highlight.js/lib/languages/c'),
+  csharp: () => import('highlight.js/lib/languages/csharp'),
+  php: () => import('highlight.js/lib/languages/php'),
+  ruby: () => import('highlight.js/lib/languages/ruby'),
+  go: () => import('highlight.js/lib/languages/go'),
+  rust: () => import('highlight.js/lib/languages/rust'),
+  perl: () => import('highlight.js/lib/languages/perl'),
+  r: () => import('highlight.js/lib/languages/r'),
+  makefile: () => import('highlight.js/lib/languages/makefile'),
+  dockerfile: () => import('highlight.js/lib/languages/dockerfile'),
+};
+
+const loadedLanguages = new Set<string>([
+  'javascript',
+  'js',
+  'typescript',
+  'ts',
+  'python',
+  'json',
+  'xml',
+  'html',
+  'css',
+  'bash',
+  'shell',
+  'sh',
+  'sql',
+  'yaml',
+  'yml',
+  'markdown',
+  'md',
+]);
+
+async function ensureLanguage(lang: string): Promise<boolean> {
+  const key = lang.toLowerCase();
+  if (loadedLanguages.has(key)) return true;
+  const loader = lazyLanguages[key];
+  if (!loader) return false;
+  try {
+    const mod = (await loader()) as { default: unknown };
+    hljs.registerLanguage(key, mod.default as Parameters<typeof hljs.registerLanguage>[1]);
+    loadedLanguages.add(key);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Highlight `code` with `highlight.js`. If `lang` is registered, that grammar
+ * is used; otherwise auto-detection is attempted (only accepted when
+ * relevance > 5). Returns `code` HTML-escaped if neither path produces a
+ * usable result.
+ */
+export function highlightCode(code: string, lang?: string): string {
+  if (lang && loadedLanguages.has(lang.toLowerCase())) {
+    try {
+      return hljs.highlight(code, { language: lang.toLowerCase() }).value;
+    } catch {
+      /* fall through */
+    }
+  }
+  try {
+    const result = hljs.highlightAuto(code);
+    if (result.relevance > 5) return result.value;
+  } catch {
+    /* fall through */
+  }
+  return escapeHtml(code);
+}
+
+function sanitise(html: string): string {
+  return DOMPurify.sanitize(html, {
+    ADD_TAGS: ['iframe'],
+    ADD_ATTR: [
+      'target',
+      'rel',
+      'allow',
+      'allowfullscreen',
+      'sandbox',
+      'srcdoc',
+      'data-block-type',
+      'data-block-id',
+      'data-code',
+      'data-lang',
+    ],
+    WHOLE_DOCUMENT: false,
+    RETURN_DOM: false,
+    RETURN_DOM_FRAGMENT: false,
+    FORCE_BODY: false,
+  }) as string;
+}
+
+// Open links in a new tab. DOMPurify hooks are global, so this runs for every
+// consumer once this module is imported — intentional, since rendered links
+// inside chat bubbles should never navigate the host app away.
+DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node instanceof HTMLAnchorElement) {
+    node.setAttribute('target', '_blank');
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+});
+
+function createRenderer() {
+  const renderer = new marked.Renderer();
+  let blockCounter = 0;
+
+  renderer.code = function (token: Tokens.Code) {
+    const { text: code, lang = '' } = token;
+    const normalised = lang.toLowerCase().trim();
+    const blockId = `block-${++blockCounter}`;
+    const encodedCode = encodeURIComponent(code);
+    const escapedLang = escapeHtml(normalised);
+
+    switch (normalised) {
+      case 'mermaid':
+      case 'csv':
+      case 'survey':
+        return `<div data-block-type="${normalised}" data-block-id="${blockId}" data-code="${encodedCode}"></div>`;
+      case 'html':
+        return `<div data-block-type="html-preview" data-block-id="${blockId}" data-code="${encodedCode}"></div>`;
+      default:
+        return `<div data-block-type="code" data-block-id="${blockId}" data-code="${encodedCode}" data-lang="${escapedLang}"></div>`;
+    }
+  };
+
+  renderer.link = function (this: RendererThis, token: Tokens.Link) {
+    const { href, title, tokens } = token;
+    const text = this.parser.parseInline(tokens);
+    const titleAttr = title ? ` title="${escapeHtml(title)}"` : '';
+    return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer"${titleAttr}>${text}</a>`;
+  };
+
+  renderer.table = function (this: RendererThis, token: Tokens.Table) {
+    const headerCells = token.header
+      .map((cell) => `<th>${this.parser.parseInline(cell.tokens)}</th>`)
+      .join('');
+    const bodyRows = token.rows
+      .map((row) => {
+        const cells = row
+          .map((cell) => `<td>${this.parser.parseInline(cell.tokens)}</td>`)
+          .join('');
+        return `<tr>${cells}</tr>`;
+      })
+      .join('');
+    return `<div class="overflow-x-auto"><table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700"><thead><tr>${headerCells}</tr></thead><tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">${bodyRows}</tbody></table></div>`;
+  };
+
+  return { renderer, reset: () => (blockCounter = 0) };
+}
+
+const { renderer, reset: resetBlockCounter } = createRenderer();
+
+const markedOptions: MarkedOptions = {
+  gfm: true,
+  breaks: true,
+  renderer,
+};
+
+marked.setOptions(markedOptions);
+
+// Module-shared LRU cache. Bounded so long-running chats don't grow forever.
+// Move-to-end on hit (`cacheGet`) approximates LRU; eviction drops the
+// oldest entry once the size cap is exceeded.
+const RENDER_CACHE_MAX = 200;
+const renderCache = new Map<string, string>();
+
+function cacheGet(key: string): string | undefined {
+  const value = renderCache.get(key);
+  if (value === undefined) return undefined;
+  renderCache.delete(key);
+  renderCache.set(key, value);
+  return value;
+}
+
+function cacheSet(key: string, value: string): void {
+  if (renderCache.has(key)) renderCache.delete(key);
+  renderCache.set(key, value);
+  if (renderCache.size > RENDER_CACHE_MAX) {
+    const firstKey = renderCache.keys().next().value;
+    if (firstKey !== undefined) renderCache.delete(firstKey);
+  }
+}
+
+export interface UseMarkdownResult {
+  /** Render markdown text to sanitised HTML string */
+  render: (text: string, cacheKey?: string) => string;
+  /** Async-render that lazy-loads needed languages first */
+  renderAsync: (text: string, cacheKey?: string) => Promise<string>;
+  /** Clear the shared render cache (affects all consumers) */
+  clearCache: () => void;
+}
+
+export function useMarkdown(): UseMarkdownResult {
+  const render = useCallback((text: string, cacheKey?: string): string => {
+    if (!text) return '';
+    const key = cacheKey ?? text;
+    const cached = cacheGet(key);
+    if (cached !== undefined) return cached;
+
+    resetBlockCounter();
+    const raw = marked.parse(text, { async: false }) as string;
+    const clean = sanitise(raw);
+    cacheSet(key, clean);
+    return clean;
+  }, []);
+
+  const renderAsync = useCallback(async (text: string, cacheKey?: string): Promise<string> => {
+    if (!text) return '';
+    const key = cacheKey ?? text;
+    const cached = cacheGet(key);
+    if (cached !== undefined) return cached;
+
+    const fenceRegex = /^```(\w+)\s*$/gm;
+    let match: RegExpExecArray | null;
+    const langs: string[] = [];
+    while ((match = fenceRegex.exec(text)) !== null) {
+      langs.push(match[1]);
+    }
+    await Promise.all(langs.map((l) => ensureLanguage(l)));
+
+    resetBlockCounter();
+    const raw = await marked.parse(text);
+    const clean = sanitise(raw);
+    cacheSet(key, clean);
+    return clean;
+  }, []);
+
+  const clearCache = useCallback(() => {
+    renderCache.clear();
+  }, []);
+
+  return useMemo(() => ({ render, renderAsync, clearCache }), [render, renderAsync, clearCache]);
+}
diff --git a/src/index.ts b/src/index.ts
index 6bb35e55..615ba956 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -64,6 +64,7 @@ export * from './components/InvoicePaymentPage';
 export { InvoiceView, type InvoiceViewProps } from './components/InvoiceView';
 export * from './components/LanguageSelector';
 export * from './components/LoadingPage';
+export * from './components/Markdown';
 export * from './components/Messaging';
 export * from './components/Modal';
 export * from './components/NotificationCenter';
diff --git a/tsup.config.ts b/tsup.config.ts
index e559e5a2..be553d47 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -24,6 +24,7 @@ export default defineConfig({
     'components/DateInput/index': 'src/components/DateInput/index.ts',
     'components/Dropdown/index': 'src/components/Dropdown/index.ts',
     'components/Input/index': 'src/components/Input/index.ts',
+    'components/Markdown/index': 'src/components/Markdown/index.ts',
     'components/Modal/index': 'src/components/Modal/index.ts',
     'components/Pagination/index': 'src/components/Pagination/index.ts',
     'components/PhoneInput/index': 'src/components/PhoneInput/index.ts',
@@ -66,6 +67,9 @@ export default defineConfig({
     '@mieweb/datavis',
     '@ozwell/react',
     'datavis-ace',
+    'mermaid',
+    'papaparse',
+    'js-yaml',
     /^@mieweb\/ui\//,
     /^datavis\//,
     /^@esheet\//,