diff --git a/package.json b/package.json
index ceb9dd41..98b20b10 100644
--- a/package.json
+++ b/package.json
@@ -141,6 +141,7 @@
     },
     "./styles.css": "./dist/styles.css",
     "./styles": "./dist/styles.css",
+    "./markdown.css": "./dist/components/Markdown/styles.css",
     "./init.css": "./dist/styles/init.css"
   },
   "files": [
@@ -153,11 +154,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": "node --max-old-space-size=8192 ./node_modules/tsup/dist/cli-default.js && npm run build:css && npm run copy:brand-css && npm run copy:style-css",
+    "build": "node --max-old-space-size=8192 ./node_modules/tsup/dist/cli-default.js && 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",
@@ -181,6 +183,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"
@@ -201,6 +206,15 @@
     "datavis-ace": {
       "optional": true
     },
+    "js-yaml": {
+      "optional": true
+    },
+    "mermaid": {
+      "optional": true
+    },
+    "papaparse": {
+      "optional": true
+    },
     "react": {
       "optional": false
     },
@@ -215,9 +229,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": {
@@ -246,8 +263,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",
@@ -275,6 +294,8 @@
     "eslint-plugin-storybook": "^10.2.11",
     "js-yaml": "^4.1.1",
     "jsdom": "^26.1.0",
+    "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 785183a9..73c98e69 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.8
       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
@@ -114,12 +123,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
@@ -201,6 +216,12 @@ importers:
       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
@@ -245,7 +266,7 @@ importers:
         version: 7.12.1
       ychart:
         specifier: file:./packages/ychart
-        version: '@mieweb/ychart@file:packages/ychart(@popperjs/core@2.11.8)'
+        version: file:packages/ychart
       zod:
         specifier: ^4.4.3
         version: 4.4.3
@@ -266,6 +287,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==}
 
@@ -446,6 +470,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==}
+
   '@codemirror/autocomplete@6.20.3':
     resolution: {integrity: sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==}
 
@@ -748,6 +778,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'}
@@ -892,6 +928,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}
 
@@ -912,10 +951,6 @@ packages:
       wavesurfer.js:
         optional: true
 
-  '@mieweb/ychart@file:packages/ychart':
-    resolution: {directory: packages/ychart, type: directory}
-    engines: {node: '>=24.0.0'}
-
   '@monaco-editor/loader@1.7.0':
     resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==}
 
@@ -1531,6 +1566,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==}
 
@@ -1540,6 +1668,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==}
 
@@ -1552,6 +1683,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==}
 
@@ -1564,6 +1698,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:
@@ -1755,6 +1892,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:
@@ -2163,6 +2303,10 @@ packages:
     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==}
 
@@ -2185,6 +2329,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==}
+
   crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
 
@@ -2206,6 +2356,23 @@ 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.34.0:
+    resolution: {integrity: sha512-62rNSrioXw93uliKFBwjukeQyeWwH2PqDrTac31r2P6464u3AUvTk0xS4LVvT251g7IgkFunrI48ZEZGjywSOg==}
+    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'}
@@ -2284,6 +2451,9 @@ packages:
   d3-org-chart@3.1.1:
     resolution: {integrity: sha512-kDLk3cRqEw5x4KohwZlvTTiPMdY/vo+ROKktyOt9s2Eu0bX/cNlXP9UvM6wXLy9uHmx9D945klSqGlDRXzfK2Q==}
 
+  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'}
@@ -2300,6 +2470,9 @@ packages:
     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'}
@@ -2312,6 +2485,9 @@ packages:
     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'}
@@ -2346,6 +2522,9 @@ packages:
     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==}
 
@@ -2368,6 +2547,9 @@ packages:
   datavis-ace@4.0.0-PRE.2:
     resolution: {integrity: sha512-wz7voSTEepUsSyzfhWCtB7FQbbvCoajg4zBQa8X5eWWUc4qt+41wQcvqeShEQu4osOwwbMZTKcAfaU0cqwmo+A==}
 
+  dayjs@1.11.21:
+    resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -2478,6 +2660,9 @@ packages:
   dompurify@3.2.7:
     resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
 
+  dompurify@3.4.8:
+    resolution: {integrity: sha512-yb1cEmaOum7wFvOCSQxyfgVlv5D47Rc30iZWoMpbDIWTnJ6grDDQyu2KFJzB2k7u0pMuJcQ1zphH//fFnw2tjQ==}
+
   domutils@1.7.0:
     resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
 
@@ -2561,6 +2746,9 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  es-toolkit@1.47.0:
+    resolution: {integrity: sha512-n1GuoD0WEQZMBk5tttoZSqwgyLx01oqa5XsBmCHwPyNe1S9jPBEmtR2pSgp2kJuWE3ciFZ6yRHmY4pM4C3OOkw==}
+
   es5-ext@0.10.64:
     resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
     engines: {node: '>=0.10'}
@@ -2908,6 +3096,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'}
@@ -2943,6 +3134,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'}
@@ -3004,6 +3199,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'}
@@ -3026,6 +3224,9 @@ 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'}
@@ -3433,9 +3634,16 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  katex@0.16.47:
+    resolution: {integrity: sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==}
+    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'}
@@ -3447,6 +3655,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'}
@@ -3548,6 +3762,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==}
 
@@ -3613,6 +3830,16 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
+  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'}
@@ -3620,6 +3847,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'}
@@ -3812,6 +4042,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==}
 
@@ -3830,6 +4063,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'}
@@ -3892,6 +4128,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'}
@@ -4142,6 +4384,9 @@ packages:
     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==}
 
@@ -4391,6 +4636,9 @@ packages:
   style-mod@4.1.3:
     resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
 
+  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'}
@@ -4453,6 +4701,10 @@ packages:
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
+  tinyexec@1.2.4:
+    resolution: {integrity: sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
@@ -4610,6 +4862,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
@@ -4849,6 +5105,9 @@ packages:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
 
+  ychart@file:packages/ychart:
+    resolution: {directory: packages/ychart, type: directory}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -4885,6 +5144,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.2.4
+
   '@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)
@@ -5088,6 +5352,10 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@braintree/sanitize-url@7.1.2': {}
+
+  '@chevrotain/types@11.1.2': {}
+
   '@codemirror/autocomplete@6.20.3':
     dependencies:
       '@codemirror/language': 6.12.3
@@ -5353,6 +5621,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
@@ -5604,6 +5880,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)
@@ -5637,28 +5917,6 @@ snapshots:
       ag-grid-react: 35.1.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       wavesurfer.js: 7.12.1
 
-  '@mieweb/ychart@file:packages/ychart(@popperjs/core@2.11.8)':
-    dependencies:
-      '@codemirror/lang-yaml': 6.1.3
-      '@codemirror/lint': 6.9.5
-      '@codemirror/state': 6.6.0
-      '@codemirror/theme-one-dark': 6.1.3
-      '@codemirror/view': 6.43.0
-      bootstrap: 5.3.8(@popperjs/core@2.11.8)
-      codemirror: 6.0.2
-      d3: 7.9.0
-      d3-array: 3.2.4
-      d3-drag: 3.0.0
-      d3-flextree: 2.1.2
-      d3-hierarchy: 3.1.2
-      d3-org-chart: 3.1.1
-      d3-selection: 3.0.0
-      d3-shape: 3.2.0
-      d3-zoom: 3.0.0
-      js-yaml: 4.1.1
-    transitivePeerDependencies:
-      - '@popperjs/core'
-
   '@monaco-editor/loader@1.7.0':
     dependencies:
       state-local: 1.0.7
@@ -6199,12 +6457,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': {}
@@ -6217,6 +6594,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': {}
@@ -6227,6 +6606,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
@@ -6404,6 +6787,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)(sass@1.100.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -6872,6 +7260,8 @@ snapshots:
 
   commander@7.2.0: {}
 
+  commander@8.3.0: {}
+
   commondir@1.0.1: {}
 
   concat-map@0.0.1: {}
@@ -6886,6 +7276,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
+
   crelt@1.0.6: {}
 
   cross-spawn@7.0.6:
@@ -6908,6 +7306,22 @@ snapshots:
       find-pkg: 0.1.2
       fs-exists-sync: 0.1.0
 
+  cytoscape-cose-bilkent@4.1.0(cytoscape@3.34.0):
+    dependencies:
+      cose-base: 1.0.3
+      cytoscape: 3.34.0
+
+  cytoscape-fcose@2.2.0(cytoscape@3.34.0):
+    dependencies:
+      cose-base: 2.2.0
+      cytoscape: 3.34.0
+
+  cytoscape@3.34.0: {}
+
+  d3-array@2.12.1:
+    dependencies:
+      internmap: 1.0.1
+
   d3-array@3.2.4:
     dependencies:
       internmap: 2.0.3
@@ -6988,6 +7402,8 @@ snapshots:
       d3-shape: 3.2.0
       d3-zoom: 3.0.0
 
+  d3-path@1.0.9: {}
+
   d3-path@3.1.0: {}
 
   d3-polygon@3.0.1: {}
@@ -6996,6 +7412,11 @@ snapshots:
 
   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
@@ -7011,6 +7432,10 @@ snapshots:
 
   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
@@ -7080,6 +7505,11 @@ snapshots:
       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:
@@ -7117,6 +7547,8 @@ snapshots:
       sprintf-js: 1.1.3
       underscore: 1.13.8
 
+  dayjs@1.11.21: {}
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -7203,6 +7635,10 @@ snapshots:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
+  dompurify@3.4.8:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@1.7.0:
     dependencies:
       dom-serializer: 0.2.2
@@ -7346,6 +7782,8 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  es-toolkit@1.47.0: {}
+
   es5-ext@0.10.64:
     dependencies:
       es6-iterator: 2.0.3
@@ -7784,6 +8222,8 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  hachure-fill@0.5.2: {}
+
   has-bigints@1.1.0: {}
 
   has-flag@3.0.0: {}
@@ -7813,6 +8253,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  highlight.js@11.11.1: {}
+
   homedir-polyfill@1.0.3:
     dependencies:
       parse-passwd: 1.0.0
@@ -7878,6 +8320,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: {}
@@ -7897,6 +8341,8 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  internmap@1.0.1: {}
+
   internmap@2.0.3: {}
 
   is-array-buffer@3.0.5:
@@ -8536,10 +8982,16 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  katex@0.16.47:
+    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: {}
@@ -8548,6 +9000,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:
@@ -8618,6 +9074,8 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  lodash-es@4.18.1: {}
+
   lodash.flattendeep@4.4.0: {}
 
   lodash.merge@4.6.2: {}
@@ -8672,10 +9130,38 @@ snapshots:
 
   marked@14.0.0: {}
 
+  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.34.0
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.34.0)
+      cytoscape-fcose: 2.2.0(cytoscape@3.34.0)
+      d3: 7.9.0
+      d3-sankey: 0.12.3
+      dagre-d3-es: 7.0.14
+      dayjs: 1.11.21
+      dompurify: 3.4.8
+      es-toolkit: 1.47.0
+      katex: 0.16.47
+      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:
@@ -8894,6 +9380,8 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  package-manager-detector@1.6.0: {}
+
   papaparse@5.5.3: {}
 
   parent-module@1.0.1:
@@ -8913,6 +9401,8 @@ snapshots:
     dependencies:
       entities: 6.0.1
 
+  path-data-parser@0.1.0: {}
+
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
@@ -8961,6 +9451,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):
@@ -9178,6 +9675,13 @@ 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: {}
@@ -9475,6 +9979,8 @@ snapshots:
 
   style-mod@4.1.3: {}
 
+  stylis@4.4.0: {}
+
   sucrase@3.35.1:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -9537,6 +10043,8 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
+  tinyexec@1.2.4: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
@@ -9722,6 +10230,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@14.0.0: {}
+
   uuid@8.3.2: {}
 
   v8-to-istanbul@9.3.0:
@@ -9994,6 +10504,8 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
+  ychart@file:packages/ychart: {}
+
   yocto-queue@0.1.0: {}
 
   zod@4.4.3: {}
diff --git a/src/components/Markdown/CodeBlock.tsx b/src/components/Markdown/CodeBlock.tsx
new file mode 100644
index 00000000..95a36ccb
--- /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..a8a9a255
--- /dev/null
+++ b/src/components/Markdown/CsvBlock.tsx
@@ -0,0 +1,245 @@
+/** CSV data rendered as a sortable table. Requires `papaparse`. */
+import { Download } from 'lucide-react';
+import React, { useCallback, useEffect, 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';
+}
+
+type CsvRow = Record<string, unknown>;
+// Minimal surface of papaparse we actually use, avoiding overload conflicts.
+interface PapaApi {
+  parse(
+    input: string,
+    config?: Record<string, unknown>
+  ): {
+    meta: { fields?: string[] };
+    data: CsvRow[];
+    errors: Array<{ message: string }>;
+  };
+  unparse(data: unknown): string;
+}
+
+let papaPromise: Promise<PapaApi> | null = null;
+function loadPapa() {
+  if (!papaPromise) {
+    papaPromise = import(/* @vite-ignore */ 'papaparse')
+      .then((mod: { default?: PapaApi } & Partial<PapaApi>) => {
+        const api: PapaApi = (mod.default ?? mod) as PapaApi;
+        if (!api?.parse) throw new Error('papaparse export not found');
+        return api;
+      })
+      .catch((err) => {
+        papaPromise = null;
+        throw err as Error;
+      });
+  }
+  return papaPromise;
+}
+
+interface ParsedCsv {
+  headers: string[];
+  rows: CsvRow[];
+  error: string | null;
+}
+
+export const CsvBlock: React.FC<CsvBlockProps> = ({ code, id }) => {
+  const [sortConfig, setSortConfig] = useState<SortConfig | null>(null);
+  const [papa, setPapa] = useState<PapaApi | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadPapa()
+      .then((api) => {
+        if (!cancelled) setPapa(api);
+      })
+      .catch(() => {
+        if (!cancelled)
+          setLoadError(
+            'CSV preview requires the `papaparse` package. Install it with `npm install papaparse`.'
+          );
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const parsed = useMemo<ParsedCsv>(() => {
+    if (!papa) return { headers: [], rows: [], error: null };
+    try {
+      const result = papa.parse(code, {
+        header: true,
+        dynamicTyping: true,
+        skipEmptyLines: 'greedy',
+      });
+      if (result.errors?.length) {
+        return {
+          headers: result.meta.fields ?? [],
+          rows: result.data,
+          error: result.errors.map((e) => e.message).join('; '),
+        };
+      }
+      return {
+        headers: result.meta.fields ?? [],
+        rows: result.data,
+        error: null,
+      };
+    } catch (err) {
+      return { headers: [], rows: [], error: (err as Error).message };
+    }
+  }, [code, papa]);
+
+  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(() => {
+    if (!papa) return;
+    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`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+  }, [sortedRows, id, papa]);
+
+  if (loadError) {
+    return (
+      <FenceBlock code={code} language="csv" error={loadError}>
+        <div />
+      </FenceBlock>
+    );
+  }
+
+  if (!papa) {
+    return (
+      <FenceBlock code={code} language="csv" supportsRawView>
+        <div className="flex items-center justify-center p-6 text-sm text-neutral-500">
+          Loading CSV parser…
+        </div>
+      </FenceBlock>
+    );
+  }
+
+  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) => {
+                  const isSorted = sortConfig?.column === header;
+                  const ariaSort = isSorted
+                    ? sortConfig.direction === 'asc'
+                      ? 'ascending'
+                      : 'descending'
+                    : 'none';
+                  return (
+                    <th
+                      key={header}
+                      scope="col"
+                      aria-sort={ariaSort}
+                      className="px-3 py-2 text-left text-xs font-medium whitespace-nowrap text-neutral-600 dark:text-neutral-400"
+                    >
+                      <button
+                        type="button"
+                        onClick={() => handleSort(header)}
+                        className="flex w-full cursor-pointer items-center gap-1 text-left font-medium select-none hover:text-neutral-900 dark:hover:text-neutral-200"
+                      >
+                        {header}
+                        {isSorted && (
+                          <span aria-hidden="true">
+                            {sortConfig.direction === 'asc' ? '↑' : '↓'}
+                          </span>
+                        )}
+                      </button>
+                    </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="px-3 py-1.5 whitespace-nowrap 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..10e532fd
--- /dev/null
+++ b/src/components/Markdown/FenceBlock.tsx
@@ -0,0 +1,129 @@
+/**
+ * FenceBlock — Base wrapper for code blocks with copy, raw view toggle, and errors.
+ */
+import { Check, ClipboardCopy, Code, Eye } from 'lucide-react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { Button } from '../Button';
+
+export interface FenceBlockProps {
+  code: string;
+  language?: string;
+  supportsRawView?: boolean;
+  error?: string;
+  children: React.ReactNode;
+  /** Extra buttons rendered in the header before the copy button */
+  headerActions?: React.ReactNode;
+}
+
+type CopyState = 'idle' | 'copying' | 'success' | 'error';
+
+export const FenceBlock: React.FC<FenceBlockProps> = ({
+  code,
+  language,
+  supportsRawView = false,
+  error,
+  children,
+  headerActions,
+}) => {
+  const [copyState, setCopyState] = useState<CopyState>('idle');
+  const [showRaw, setShowRaw] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+
+  const scheduleReset = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setCopyState('idle'), 2000);
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    if (copyState === 'copying') return;
+    setCopyState('copying');
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopyState('success');
+      scheduleReset();
+    } 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');
+      } catch {
+        setCopyState('error');
+      }
+      scheduleReset();
+    }
+  }, [code, copyState, scheduleReset]);
+
+  return (
+    <div className="group relative my-3 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-[#1a1d24]">
+      <div className="flex items-center justify-between border-b border-neutral-200 px-3 py-1.5 dark:border-white/[0.08]">
+        <span className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+          {language
+            ? language.charAt(0).toUpperCase() + language.slice(1)
+            : 'Text'}
+        </span>
+        <div className="flex items-center gap-1">
+          {headerActions}
+          {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 text-xs whitespace-pre-wrap 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..b686010f
--- /dev/null
+++ b/src/components/Markdown/HtmlPreviewBlock.tsx
@@ -0,0 +1,152 @@
+/** Sandboxed iframe preview for HTML code blocks. */
+import { Code, Eye, Maximize2 } from 'lucide-react';
+import React, { useCallback, useEffect, useRef, 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 iframeRef = useRef<HTMLIFrameElement>(null);
+  const [iframeHeight, setIframeHeight] = useState(200);
+
+  const srcdoc = isFullDocument(code) ? code : wrapFragment(code);
+
+  useEffect(() => {
+    function handleMessage(event: globalThis.MessageEvent) {
+      // Sandboxed srcDoc iframes report origin "null"; validate source to prevent spoofing.
+      if (event.origin !== 'null' && event.origin !== window.location.origin)
+        return;
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      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]);
+
+  useEffect(() => {
+    if (!expanded) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') setExpanded(false);
+    }
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [expanded]);
+
+  const togglePreview = useCallback(() => setShowPreview((v) => !v), []);
+
+  const headerActions = (
+    <>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={togglePreview}
+        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>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      <FenceBlock code={code} language="html" headerActions={headerActions}>
+        <div className="relative">
+          {showPreview ? (
+            <iframe
+              ref={iframeRef}
+              srcDoc={srcdoc}
+              // `allow-scripts` lets previewed HTML run its own JS (charts, demos,
+              // and the optional resize-postMessage handshake). It is intentionally
+              // NOT paired with `allow-same-origin`, so the content runs in an
+              // opaque (null) origin with no access to this page, cookies, or storage.
+              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"
+          role="dialog"
+          aria-modal="true"
+          aria-label="HTML Preview"
+        >
+          <button
+            type="button"
+            aria-label="Close preview"
+            className="absolute inset-0 h-full w-full cursor-default border-0 bg-transparent p-0"
+            onClick={() => setExpanded(false)}
+          />
+          <div className="relative h-[90vh] w-[90vw] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900">
+            <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.stories.tsx b/src/components/Markdown/MarkdownRenderer.stories.tsx
new file mode 100644
index 00000000..1d874432
--- /dev/null
+++ b/src/components/Markdown/MarkdownRenderer.stories.tsx
@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { MarkdownRenderer } from './MarkdownRenderer';
+
+const meta: Meta<typeof MarkdownRenderer> = {
+  title: 'Components/Markdown/MarkdownRenderer',
+  component: MarkdownRenderer,
+  parameters: { layout: 'padded' },
+};
+export default meta;
+
+type Story = StoryObj<typeof MarkdownRenderer>;
+
+const CODE_BLOCKS_MD = `
+# Markdown Renderer
+
+Inline \`code\` and **bold**, _italic_, ~~strikethrough~~, and a [link](https://github.com/mieweb/ui).
+
+## Code Block
+
+\`\`\`typescript
+function greet(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+console.log(greet('World'));
+\`\`\`
+
+## Table
+
+| Name  | Role      | Active |
+|-------|-----------|--------|
+| Alice | Engineer  | Yes    |
+| Bob   | Designer  | No     |
+| Carol | PM        | Yes    |
+`;
+
+const CSV_MD = `
+## CSV Block
+
+\`\`\`csv
+Name,Age,Department,Salary
+Alice,32,Engineering,95000
+Bob,28,Design,78000
+Carol,35,Product,102000
+Dave,41,Engineering,115000
+\`\`\`
+`;
+
+const SURVEY_MD = `
+## Survey Block
+
+\`\`\`survey
+{
+  "elements": [
+    { "type": "text", "name": "full_name", "title": "Full Name", "isRequired": true },
+    { "type": "radiogroup", "name": "experience", "title": "Years of experience", "choices": ["0-1", "2-5", "5-10", "10+"] },
+    { "type": "checkbox", "name": "newsletter", "title": "Subscribe to newsletter" },
+    { "type": "dropdown", "name": "role", "title": "Your role", "choices": ["Engineer", "Designer", "PM", "Other"] },
+    { "type": "rating", "name": "satisfaction", "title": "Overall satisfaction" }
+  ]
+}
+\`\`\`
+`;
+
+const HTML_MD = `
+## HTML Preview
+
+\`\`\`html
+<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"><style>
+  body { font-family: system-ui, sans-serif; padding: 16px; }
+  h2 { color: #2563eb; }
+  button { background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
+  button:hover { background: #1d4ed8; }
+</style></head>
+<body>
+  <h2>Interactive HTML Preview</h2>
+  <p>This is rendered inside a sandboxed iframe.</p>
+  <button onclick="this.textContent='Clicked!'">Click me</button>
+</body>
+</html>
+\`\`\`
+`;
+
+const MERMAID_MD = `
+## Mermaid Diagram
+
+\`\`\`mermaid
+graph TD
+  A[User] -->|sends message| B(MarkdownRenderer)
+  B --> C{Block type?}
+  C -->|code| D[FenceBlock]
+  C -->|csv| E[CsvBlock]
+  C -->|mermaid| F[MermaidBlock]
+  C -->|survey| G[SurveyBlock]
+  C -->|html| H[HtmlPreviewBlock]
+\`\`\`
+`;
+
+export const CodeBlocks: Story = {
+  args: { text: CODE_BLOCKS_MD },
+};
+
+export const CsvBlock: Story = {
+  args: { text: CSV_MD },
+};
+
+export const SurveyBlock: Story = {
+  args: { text: SURVEY_MD },
+};
+
+export const HtmlPreview: Story = {
+  args: { text: HTML_MD },
+};
+
+export const MermaidDiagram: Story = {
+  args: { text: MERMAID_MD },
+};
+
+export const AllBlocks: Story = {
+  args: {
+    text: [CODE_BLOCKS_MD, CSV_MD, SURVEY_MD, HTML_MD, MERMAID_MD].join(
+      '\n---\n'
+    ),
+  },
+};
diff --git a/src/components/Markdown/MarkdownRenderer.tsx b/src/components/Markdown/MarkdownRenderer.tsx
new file mode 100644
index 00000000..790c0287
--- /dev/null
+++ b/src/components/Markdown/MarkdownRenderer.tsx
@@ -0,0 +1,155 @@
+/**
+ * MarkdownRenderer — renders markdown with React components for special fence blocks.
+ */
+import React, { Suspense, lazy, useEffect, useState } from 'react';
+
+import './styles.css';
+import { CodeBlock } from './CodeBlock';
+import { useMarkdown } from './useMarkdown';
+
+// Block components are lazy-loaded so optional peer deps (papaparse, js-yaml, mermaid)
+// aren't bundled unless actually rendered.
+const CsvBlock = lazy(() =>
+  import('./CsvBlock').then((m) => ({ default: m.CsvBlock }))
+);
+const HtmlPreviewBlock = lazy(() =>
+  import('./HtmlPreviewBlock').then((m) => ({ default: m.HtmlPreviewBlock }))
+);
+const MermaidBlock = lazy(() =>
+  import('./MermaidBlock').then((m) => ({ default: m.MermaidBlock }))
+);
+const SurveyBlock = lazy(() =>
+  import('./SurveyBlock').then((m) => ({ default: m.SurveyBlock }))
+);
+
+const BlockFallback: React.FC = () => (
+  <div className="flex items-center justify-center p-4 text-sm text-neutral-500">
+    Loading…
+  </div>
+);
+
+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;
+}
+
+// Matches fence block markers emitted by useMarkdown (sentinel data-md-fence prevents raw-HTML injection)
+const BLOCK_RE =
+  /<div data-block-type="([^"]+)" data-block-id="([^"]+)" data-code="([^"]*)"([^>]*\bdata-md-fence="1"[^>]*)><\/div>/g;
+
+interface HtmlSegment {
+  html: string;
+}
+interface BlockSegment {
+  type: string;
+  id: string;
+  code: string;
+  lang?: string;
+}
+type Segment = HtmlSegment | BlockSegment;
+
+function splitHtml(html: string): Segment[] {
+  const segments: Segment[] = [];
+  let last = 0;
+  for (const m of html.matchAll(BLOCK_RE)) {
+    if (m.index > last) segments.push({ html: html.slice(last, m.index) });
+    const langMatch = m[4]?.match(/data-lang="([^"]*)"/)?.[1];
+    segments.push({
+      type: m[1],
+      id: m[2],
+      code: (() => {
+        try {
+          return decodeURIComponent(m[3]);
+        } catch {
+          return m[3];
+        }
+      })(),
+      lang: langMatch ?? undefined,
+    });
+    last = m.index + m[0].length;
+  }
+  if (last < html.length) segments.push({ html: html.slice(last) });
+  return segments;
+}
+
+function renderBlock(seg: BlockSegment): React.ReactNode {
+  const wrap = (node: React.ReactNode) => (
+    <Suspense key={seg.id} fallback={<BlockFallback />}>
+      {node}
+    </Suspense>
+  );
+  switch (seg.type) {
+    case 'mermaid':
+      return wrap(<MermaidBlock code={seg.code} id={seg.id} />);
+    case 'csv':
+      return wrap(<CsvBlock code={seg.code} id={seg.id} />);
+    case 'survey':
+      return wrap(<SurveyBlock code={seg.code} id={seg.id} />);
+    case 'html-preview':
+      return wrap(<HtmlPreviewBlock code={seg.code} id={seg.id} />);
+    case 'code':
+      return wrap(
+        <CodeBlock code={seg.code} language={seg.lang || undefined} />
+      );
+    default:
+      return null;
+  }
+}
+
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
+  text,
+  cacheKey,
+  className = '',
+  streaming = false,
+}) => {
+  const { render, renderAsync } = useMarkdown();
+  const [html, setHtml] = useState('');
+
+  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]);
+
+  const segments = splitHtml(html);
+  const proseClass = `md-prose ${className}`.trim();
+
+  return (
+    <div className={proseClass}>
+      {segments.map((seg, i) =>
+        'html' in seg ? (
+          <div key={i} dangerouslySetInnerHTML={{ __html: seg.html }} />
+        ) : (
+          renderBlock(seg)
+        )
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Markdown/MermaidBlock.tsx b/src/components/Markdown/MermaidBlock.tsx
new file mode 100644
index 00000000..1127144d
--- /dev/null
+++ b/src/components/Markdown/MermaidBlock.tsx
@@ -0,0 +1,178 @@
+/**
+ * MermaidBlock — Renders Mermaid diagrams.
+ * Requires `mermaid` to be installed by the consumer (optional peer dependency).
+ */
+import DOMPurify from 'dompurify';
+import React, { useCallback, useEffect, useMemo, 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;
+let mermaidTheme: 'dark' | 'default' = 'default';
+
+function currentTheme(): 'dark' | 'default' {
+  return document.documentElement.classList.contains('dark') ||
+    document.documentElement.getAttribute('data-theme') === 'dark'
+    ? 'dark'
+    : 'default';
+}
+
+function buildConfig(theme: 'dark' | 'default'): Record<string, unknown> {
+  const base: Record<string, unknown> = {
+    startOnLoad: false,
+    theme,
+    securityLevel: 'strict',
+  };
+  if (theme === 'dark') {
+    base.themeVariables = {
+      nodeBorder: '#6b7280',
+      mainBkg: '#4a4a4a',
+      nodeTextColor: '#ffffff',
+      clusterBkg: '#374151',
+      titleColor: '#ffffff',
+      edgeLabelBackground: '#374151',
+      lineColor: '#9ca3af',
+    };
+  }
+  return base;
+}
+
+async function getMermaid(): Promise<MermaidApi> {
+  const theme = currentTheme();
+  if (mermaidInstance) {
+    if (theme !== mermaidTheme) {
+      mermaidTheme = theme;
+      mermaidInstance.initialize(buildConfig(theme));
+    }
+    return mermaidInstance;
+  }
+  if (!mermaidReady) {
+    mermaidReady = import(/* @vite-ignore */ 'mermaid').then((mod) => {
+      const m = (mod as { default: MermaidApi }).default;
+      mermaidTheme = currentTheme();
+      m.initialize(buildConfig(mermaidTheme));
+      mermaidInstance = m;
+      return m;
+    });
+  }
+  return mermaidReady;
+}
+
+function sanitiseSvg(svg: string): string {
+  return DOMPurify.sanitize(svg, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    // Allow <style> so mermaid's embedded CSS applies, and <foreignObject>
+    // so node label text renders (mermaid escapes its content in strict mode).
+    ADD_TAGS: ['style', 'foreignObject'],
+    ADD_ATTR: [
+      'style',
+      'class',
+      'dominant-baseline',
+      'text-anchor',
+      'font-size',
+      'font-family',
+      'marker-end',
+      'marker-start',
+      'marker-mid',
+      'stroke-dasharray',
+      'stroke-width',
+    ],
+    FORBID_TAGS: ['script'],
+    FORBID_ATTR: ['onload', 'onerror', 'onclick', 'onmouseover'],
+  }) as string;
+}
+
+export const MermaidBlock: React.FC<MermaidBlockProps> = ({ code, id }) => {
+  const [svg, setSvg] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+
+  // Derive an accessible label from the diagram's declared type (first keyword).
+  const diagramLabel = useMemo(() => {
+    const firstWord =
+      code
+        .trim()
+        .split(/[\s\n]/)[0]
+        ?.toLowerCase() ?? '';
+    const typeMap: Record<string, string> = {
+      graph: 'Flowchart',
+      flowchart: 'Flowchart',
+      sequencediagram: 'Sequence diagram',
+      classdiagram: 'Class diagram',
+      statediagram: 'State diagram',
+      'statediagram-v2': 'State diagram',
+      erdiagram: 'Entity relationship diagram',
+      gantt: 'Gantt chart',
+      pie: 'Pie chart',
+      journey: 'User journey diagram',
+      gitgraph: 'Git graph',
+      mindmap: 'Mind map',
+      timeline: 'Timeline',
+      quadrantchart: 'Quadrant chart',
+    };
+    return `${typeMap[firstWord] ?? 'Mermaid'} diagram`;
+  }, [code]);
+
+  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(sanitiseSvg(rendered));
+    } catch (err) {
+      setError((err as Error).message ?? 'Failed to render diagram');
+    } finally {
+      setLoading(false);
+    }
+  }, [code, id]);
+
+  useEffect(() => {
+    void render();
+  }, [render]);
+
+  // Re-render when the page theme changes (dark ↔ light)
+  useEffect(() => {
+    const observer = new MutationObserver(() => void render());
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme'],
+    });
+    return () => observer.disconnect();
+  }, [render]);
+
+  return (
+    <FenceBlock
+      code={code}
+      language="mermaid"
+      supportsRawView
+      error={error || undefined}
+    >
+      {loading ? (
+        <div className="flex items-center justify-center p-8">
+          <div className="border-primary-500 h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" />
+        </div>
+      ) : (
+        <div
+          className="mermaid-svg flex justify-center p-4"
+          role="img"
+          aria-label={diagramLabel}
+          dangerouslySetInnerHTML={{ __html: svg }}
+        />
+      )}
+    </FenceBlock>
+  );
+};
diff --git a/src/components/Markdown/README.md b/src/components/Markdown/README.md
new file mode 100644
index 00000000..e104f40b
--- /dev/null
+++ b/src/components/Markdown/README.md
@@ -0,0 +1,105 @@
+# MarkdownRenderer
+
+Renders markdown to React with rich fenced-code block support. Fenced blocks with special language tags (`csv`, `mermaid`, `survey`, `html`) are replaced by interactive React components; all other code blocks get syntax highlighting via highlight.js.
+
+## Installation
+
+```bash
+# peer deps — only install what you use
+pnpm add mermaid       # mermaid diagrams
+pnpm add papaparse     # csv blocks
+pnpm add js-yaml       # survey blocks
+```
+
+Import the stylesheet once in your app entry (or Storybook's `preview.ts`):
+
+```ts
+import '@mieweb/ui/markdown.css';
+```
+
+## Basic usage
+
+```tsx
+import { MarkdownRenderer } from '@mieweb/ui';
+
+<MarkdownRenderer text={markdownString} />;
+```
+
+## Props
+
+| Prop        | Type      | Default | Description                                             |
+| ----------- | --------- | ------- | ------------------------------------------------------- |
+| `text`      | `string`  | —       | Raw markdown source                                     |
+| `cacheKey`  | `string`  | —       | Stable key for render caching (e.g. `message._id`)      |
+| `className` | `string`  | `''`    | Extra CSS classes on the root element                   |
+| `streaming` | `boolean` | `false` | Use synchronous rendering for token-by-token AI streams |
+
+### `streaming` prop
+
+When `true`, each render is synchronous so new tokens appear immediately without waiting for lazy language imports. Switch back to `false` once the stream completes to trigger a final async render with full syntax highlighting.
+
+```tsx
+// While streaming
+<MarkdownRenderer text={partialText} cacheKey={msgId} streaming />
+
+// After stream ends
+<MarkdownRenderer text={finalText} cacheKey={msgId} />
+```
+
+## Special fence languages
+
+### `mermaid` — diagrams
+
+````md
+```mermaid
+graph TD
+  A[User] --> B[MarkdownRenderer]
+```
+````
+
+Requires `mermaid` as a peer dependency. Diagrams re-render automatically when the page theme changes (dark ↔ light).
+
+### `csv` — sortable table
+
+````md
+```csv
+Name,Age,Role
+Alice,32,Engineer
+Bob,28,Designer
+```
+````
+
+Requires `papaparse` as a peer dependency. Includes column sorting and CSV export.
+
+### `survey` — form fields
+
+````md
+```survey
+{
+  "elements": [
+    { "type": "text", "name": "name", "title": "Full Name" },
+    { "type": "radiogroup", "name": "exp", "title": "Experience", "choices": ["0-1", "2-5", "5+"] }
+  ]
+}
+```
+````
+
+Requires `js-yaml` as a peer dependency.
+
+### `html` — sandboxed preview
+
+````md
+```html
+<h1>Hello</h1>
+<button onclick="alert('hi')">Click me</button>
+```
+````
+
+Rendered in a sandboxed iframe (`allow-scripts allow-forms`). Toggle between Preview and Code views in the block header.
+
+## Security
+
+- All HTML output is sanitised with **DOMPurify** before rendering.
+- Anchor tags get `target="_blank" rel="noopener noreferrer"` automatically.
+- Block markers include a sentinel attribute (`data-md-fence="1"`) so raw HTML injected into markdown cannot spoof special blocks.
+- `javascript:` URLs and event handler attributes are stripped.
diff --git a/src/components/Markdown/SurveyBlock.tsx b/src/components/Markdown/SurveyBlock.tsx
new file mode 100644
index 00000000..9d5227ec
--- /dev/null
+++ b/src/components/Markdown/SurveyBlock.tsx
@@ -0,0 +1,251 @@
+/** Survey/questionnaire preview from JSON or YAML. Requires `js-yaml` for YAML input. */
+import React, { useEffect, useState } 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;
+}
+
+type YamlLoadFn = (input: string) => unknown;
+let yamlPromise: Promise<YamlLoadFn> | null = null;
+function loadYaml(): Promise<YamlLoadFn> {
+  if (!yamlPromise) {
+    yamlPromise = import(/* @vite-ignore */ 'js-yaml')
+      .then((mod) => {
+        const api =
+          (mod as { default?: { load?: YamlLoadFn }; load?: YamlLoadFn })
+            .default ?? mod;
+        const load = (api as { load?: YamlLoadFn }).load;
+        if (typeof load !== 'function')
+          throw new Error('js-yaml load not found');
+        return load;
+      })
+      .catch((err) => {
+        yamlPromise = null;
+        throw err;
+      });
+  }
+  return yamlPromise;
+}
+
+function tryParseJson(
+  code: string
+): { ok: true; data: unknown } | { ok: false } {
+  try {
+    return { ok: true, data: JSON.parse(code) };
+  } catch {
+    return { ok: false };
+  }
+}
+
+function elementsToParsed(data: unknown): ParsedSurvey {
+  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 [parsed, setParsed] = useState<ParsedSurvey | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const jsonResult = tryParseJson(code);
+    if (jsonResult.ok) {
+      setParsed(elementsToParsed(jsonResult.data));
+      return;
+    }
+
+    loadYaml()
+      .then((load) => {
+        try {
+          const data = load(code);
+          if (!cancelled) setParsed(elementsToParsed(data));
+        } catch (err) {
+          if (!cancelled)
+            setParsed({
+              fields: [],
+              error: `Failed to parse survey data: ${(err as Error).message}`,
+            });
+        }
+      })
+      .catch(() => {
+        if (!cancelled)
+          setParsed({
+            fields: [],
+            error:
+              'Survey preview requires the `js-yaml` package for YAML input. Install it with `npm install js-yaml`.',
+          });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [code]);
+
+  if (!parsed) {
+    return (
+      <FenceBlock code={code} language="survey" supportsRawView>
+        <div className="flex items-center justify-center p-6 text-sm text-neutral-500">
+          Loading survey…
+        </div>
+      </FenceBlock>
+    );
+  }
+
+  const { fields, error } = parsed;
+
+  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) => {
+          const fieldId = `${id}-field-${field.name ?? i}`;
+          return (
+            <div key={field.name ?? i} className="space-y-1.5">
+              <label
+                htmlFor={fieldId}
+                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
+                  id={fieldId}
+                  type="checkbox"
+                  disabled
+                  className="accent-primary-500"
+                />
+              )}
+
+              {(field.type === 'text' || field.type === 'comment') && (
+                <input
+                  id={fieldId}
+                  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
+                  role="img"
+                  className="flex gap-1"
+                  aria-label="Rating: 0 out of 5"
+                >
+                  {[1, 2, 3, 4, 5].map((n) => (
+                    <span
+                      key={n}
+                      aria-hidden="true"
+                      className="text-lg text-neutral-500 dark:text-neutral-500"
+                    >
+                      ★
+                    </span>
+                  ))}
+                </div>
+              )}
+
+              {field.type === 'dropdown' && field.choices && (
+                <select
+                  id={fieldId}
+                  name={fieldId}
+                  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-600 dark:text-neutral-400">
+          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..c862fcf3
--- /dev/null
+++ b/src/components/Markdown/index.ts
@@ -0,0 +1,15 @@
+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..edd62528
--- /dev/null
+++ b/src/components/Markdown/styles.css
@@ -0,0 +1,351 @@
+/*
+ * 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;
+  /* Transparent so the parent container's background is the single source of truth */
+  background: transparent;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+
+/* atom-one-light (default) */
+.hljs {
+  color: #383a42;
+  background: #fafafa;
+}
+.hljs-comment,
+.hljs-quote {
+  color: #707179;
+  font-style: italic;
+}
+.hljs-doctag,
+.hljs-formula,
+.hljs-keyword {
+  color: #a626a4;
+}
+.hljs-deletion,
+.hljs-name,
+.hljs-section,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #d72f20;
+}
+.hljs-literal {
+  color: #0179ac;
+}
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: #3f7f3e;
+}
+.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: #2867f0;
+}
+.hljs-built_in,
+.hljs-class .hljs-title,
+.hljs-title.class_ {
+  color: #986801;
+}
+.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,
+.dark .hljs {
+  color: #abb2bf;
+  background: #1a1d24;
+}
+[data-theme='dark'] .hljs-comment,
+.dark .hljs-comment,
+[data-theme='dark'] .hljs-quote,
+.dark .hljs-quote {
+  color: #8e95a2;
+}
+[data-theme='dark'] .hljs-doctag,
+.dark .hljs-doctag,
+[data-theme='dark'] .hljs-formula,
+.dark .hljs-formula,
+[data-theme='dark'] .hljs-keyword,
+.dark .hljs-keyword {
+  color: #c678dd;
+}
+[data-theme='dark'] .hljs-deletion,
+.dark .hljs-deletion,
+[data-theme='dark'] .hljs-name,
+.dark .hljs-name,
+[data-theme='dark'] .hljs-section,
+.dark .hljs-section,
+[data-theme='dark'] .hljs-selector-tag,
+.dark .hljs-selector-tag,
+[data-theme='dark'] .hljs-subst,
+.dark .hljs-subst {
+  color: #e2747d;
+}
+[data-theme='dark'] .hljs-literal,
+.dark .hljs-literal {
+  color: #56b6c2;
+}
+[data-theme='dark'] .hljs-addition,
+.dark .hljs-addition,
+[data-theme='dark'] .hljs-attribute,
+.dark .hljs-attribute,
+[data-theme='dark'] .hljs-meta .hljs-string,
+.dark .hljs-meta .hljs-string,
+[data-theme='dark'] .hljs-regexp,
+.dark .hljs-regexp,
+[data-theme='dark'] .hljs-string,
+.dark .hljs-string {
+  color: #98c379;
+}
+[data-theme='dark'] .hljs-attr,
+.dark .hljs-attr,
+[data-theme='dark'] .hljs-number,
+.dark .hljs-number,
+[data-theme='dark'] .hljs-selector-attr,
+.dark .hljs-selector-attr,
+[data-theme='dark'] .hljs-selector-class,
+.dark .hljs-selector-class,
+[data-theme='dark'] .hljs-selector-pseudo,
+.dark .hljs-selector-pseudo,
+[data-theme='dark'] .hljs-template-variable,
+.dark .hljs-template-variable,
+[data-theme='dark'] .hljs-type,
+.dark .hljs-type,
+[data-theme='dark'] .hljs-variable,
+.dark .hljs-variable {
+  color: #d19a66;
+}
+[data-theme='dark'] .hljs-bullet,
+.dark .hljs-bullet,
+[data-theme='dark'] .hljs-link,
+.dark .hljs-link,
+[data-theme='dark'] .hljs-meta,
+.dark .hljs-meta,
+[data-theme='dark'] .hljs-selector-id,
+.dark .hljs-selector-id,
+[data-theme='dark'] .hljs-symbol,
+.dark .hljs-symbol,
+[data-theme='dark'] .hljs-title,
+.dark .hljs-title {
+  color: #61aeee;
+}
+[data-theme='dark'] .hljs-built_in,
+.dark .hljs-built_in,
+[data-theme='dark'] .hljs-class .hljs-title,
+.dark .hljs-class .hljs-title,
+[data-theme='dark'] .hljs-title.class_,
+.dark .hljs-title.class_ {
+  color: #e6c07b;
+}
+
+/* ============================================================
+ * Markdown prose typography — scoped to .md-prose.
+ * @tailwindcss/typography is not a dependency; these styles
+ * replicate the essential subset used by MarkdownRenderer.
+ * ============================================================ */
+.md-prose {
+  color: #374151;
+  line-height: 1.7;
+  font-size: 0.9375rem;
+}
+.md-prose h1,
+.md-prose h2,
+.md-prose h3,
+.md-prose h4,
+.md-prose h5,
+.md-prose h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  color: #111827;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+.md-prose h1 {
+  font-size: 1.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0.25em;
+}
+.md-prose h2 {
+  font-size: 1.375rem;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0.2em;
+}
+.md-prose h3 {
+  font-size: 1.125rem;
+}
+.md-prose h4 {
+  font-size: 1rem;
+}
+.md-prose p {
+  margin-top: 0;
+  margin-bottom: 0.75em;
+}
+.md-prose a {
+  color: #2563eb;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.md-prose a:hover {
+  color: #1d4ed8;
+}
+.md-prose strong {
+  font-weight: 600;
+}
+.md-prose em {
+  font-style: italic;
+}
+.md-prose del {
+  text-decoration: line-through;
+}
+/* Inline code — avoid overriding code inside pre (hljs blocks) */
+.md-prose :not(pre) > code {
+  font-size: 0.875em;
+  background: #f3f4f6;
+  border-radius: 0.25rem;
+  padding: 0.125em 0.375em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: #be185d;
+}
+.md-prose ul,
+.md-prose ol {
+  margin-top: 0;
+  margin-bottom: 0.75em;
+  padding-left: 1.75em;
+}
+.md-prose ul {
+  list-style-type: disc;
+}
+.md-prose ol {
+  list-style-type: decimal;
+}
+.md-prose li {
+  margin-bottom: 0.25em;
+}
+.md-prose hr {
+  border: none;
+  border-top: 1px solid #e5e7eb;
+  margin: 1.5em 0;
+}
+.md-prose blockquote {
+  border-left: 3px solid #d1d5db;
+  padding-left: 1em;
+  margin: 1em 0;
+  color: #6b7280;
+  font-style: italic;
+}
+/* Tables — full borders with vertical separators */
+.md-prose table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.875rem;
+  margin-bottom: 0.75em;
+}
+.md-prose th,
+.md-prose td {
+  border: 1px solid #e5e7eb;
+  padding: 0.5em 0.75em;
+  text-align: left;
+}
+.md-prose th {
+  font-weight: 600;
+  background: #f9fafb;
+}
+
+/* Dark overrides */
+[data-theme='dark'] .md-prose,
+.dark .md-prose {
+  color: #d1d5db;
+}
+[data-theme='dark'] .md-prose h1,
+.dark .md-prose h1,
+[data-theme='dark'] .md-prose h2,
+.dark .md-prose h2,
+[data-theme='dark'] .md-prose h3,
+.dark .md-prose h3,
+[data-theme='dark'] .md-prose h4,
+.dark .md-prose h4 {
+  color: #f9fafb;
+  border-color: #374151;
+}
+[data-theme='dark'] .md-prose a,
+.dark .md-prose a {
+  color: #60a5fa;
+}
+[data-theme='dark'] .md-prose a:hover,
+.dark .md-prose a:hover {
+  color: #93c5fd;
+}
+[data-theme='dark'] .md-prose :not(pre) > code,
+.dark .md-prose :not(pre) > code {
+  background: #1f2937;
+  color: #f9a8d4;
+}
+[data-theme='dark'] .md-prose hr,
+.dark .md-prose hr {
+  border-color: #374151;
+}
+[data-theme='dark'] .md-prose blockquote,
+.dark .md-prose blockquote {
+  border-color: #4b5563;
+  color: #9ca3af;
+}
+[data-theme='dark'] .md-prose th,
+.dark .md-prose th,
+[data-theme='dark'] .md-prose td,
+.dark .md-prose td {
+  border-color: #374151;
+}
+[data-theme='dark'] .md-prose th,
+.dark .md-prose th {
+  background: #1f2937;
+}
+
+/* Mermaid — improve edge / arrowhead visibility in dark mode */
+[data-theme='dark'] .mermaid-svg svg .edgePath path,
+.dark .mermaid-svg svg .edgePath path,
+[data-theme='dark'] .mermaid-svg svg .flowchart-link,
+.dark .mermaid-svg svg .flowchart-link {
+  stroke: #9ca3af;
+  stroke-width: 1.5px;
+}
+[data-theme='dark'] .mermaid-svg svg marker path,
+.dark .mermaid-svg svg marker path {
+  fill: #9ca3af;
+  stroke: #9ca3af;
+}
diff --git a/src/components/Markdown/useMarkdown.ts b/src/components/Markdown/useMarkdown.ts
new file mode 100644
index 00000000..dd518d12
--- /dev/null
+++ b/src/components/Markdown/useMarkdown.ts
@@ -0,0 +1,297 @@
+/** useMarkdown — converts markdown to sanitised HTML with hljs highlighting and special fence blocks. */
+import DOMPurify from 'dompurify';
+import hljs from 'highlight.js/lib/core';
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+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 Tokens } from 'marked';
+import { useCallback, useMemo, useRef } from 'react';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('typescript', 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('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',
+  'typescript',
+  'python',
+  'json',
+  'xml',
+  'html',
+  'css',
+  'bash',
+  'shell',
+  '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;
+  }
+}
+
+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_ATTR: [
+      'target',
+      'rel',
+      'data-block-type',
+      'data-block-id',
+      'data-code',
+      'data-lang',
+      'data-md-fence',
+    ],
+  }) as string;
+}
+
+// Use globalThis to prevent duplicate DOMPurify hook registration across HMR reloads.
+const _g = globalThis as unknown as Record<string, boolean>;
+// Guard against SSR: DOMPurify hooks operate on the DOM, so only register in the browser.
+if (typeof document !== 'undefined' && !_g.__markdownAnchorHookInstalled) {
+  _g.__markdownAnchorHookInstalled = true;
+  DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
+    const isAnchor =
+      (typeof HTMLAnchorElement !== 'undefined' &&
+        node instanceof HTMLAnchorElement) ||
+      node.nodeName === 'A';
+    if (isAnchor) {
+      node.setAttribute('target', '_blank');
+      node.setAttribute('rel', 'noopener noreferrer');
+    }
+  });
+}
+
+let blockCounter = 0;
+
+function createRenderer() {
+  const renderer = new marked.Renderer();
+
+  renderer.code = function (this: unknown, token: Tokens.Code) {
+    const { text: code, lang = '' } = token;
+    const normalised = lang.toLowerCase().trim();
+    const blockId = `block-${++blockCounter}`;
+    const encodedCode = encodeURIComponent(code);
+    const sentinel = 'data-md-fence="1"';
+
+    switch (normalised) {
+      case 'mermaid':
+        return `<div data-block-type="mermaid" data-block-id="${blockId}" data-code="${encodedCode}" ${sentinel}></div>`;
+      case 'csv':
+        return `<div data-block-type="csv" data-block-id="${blockId}" data-code="${encodedCode}" ${sentinel}></div>`;
+      case 'survey':
+        return `<div data-block-type="survey" data-block-id="${blockId}" data-code="${encodedCode}" ${sentinel}></div>`;
+      case 'html':
+        return `<div data-block-type="html-preview" data-block-id="${blockId}" data-code="${encodedCode}" ${sentinel}></div>`;
+      default:
+        return `<div data-block-type="code" data-block-id="${blockId}" data-code="${encodedCode}" data-lang="${escapeHtml(normalised)}" ${sentinel}></div>`;
+    }
+  };
+
+  renderer.link = function (this: unknown, token: Tokens.Link) {
+    const { href, title, tokens } = token;
+    const text =
+      this && typeof (this as Record<string, unknown>).parser === 'object'
+        ? (
+            this as {
+              parser: { parseInline: (t: Tokens.Link['tokens']) => string };
+            }
+          ).parser.parseInline(tokens)
+        : token.text;
+    const titleAttr = title ? ` title="${escapeHtml(title)}"` : '';
+    return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer"${titleAttr}>${text}</a>`;
+  };
+
+  renderer.table = function (this: unknown, token: Tokens.Table) {
+    const headerCells = token.header
+      .map((cell) => {
+        const content =
+          this && typeof (this as Record<string, unknown>).parser === 'object'
+            ? (
+                this as {
+                  parser: {
+                    parseInline: (t: Tokens.TableCell['tokens']) => string;
+                  };
+                }
+              ).parser.parseInline(cell.tokens)
+            : cell.text;
+        return `<th>${content}</th>`;
+      })
+      .join('');
+
+    const bodyRows = token.rows
+      .map((row) => {
+        const cells = row
+          .map((cell) => {
+            const content =
+              this &&
+              typeof (this as Record<string, unknown>).parser === 'object'
+                ? (
+                    this as {
+                      parser: {
+                        parseInline: (t: Tokens.TableCell['tokens']) => string;
+                      };
+                    }
+                  ).parser.parseInline(cell.tokens)
+                : cell.text;
+            return `<td>${content}</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;
+}
+
+function makeMarkedOptions(): MarkedOptions {
+  return { gfm: true, breaks: true, renderer: createRenderer() };
+}
+
+const CACHE_MAX = 100;
+const renderCache = new Map<string, string>();
+function cacheSet(key: string, value: string) {
+  if (renderCache.size >= CACHE_MAX) {
+    renderCache.delete(renderCache.keys().next().value as string);
+  }
+  renderCache.set(key, value);
+}
+
+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 render cache */
+  clearCache: () => void;
+}
+
+export function useMarkdown(): UseMarkdownResult {
+  const cacheRef = useRef(renderCache);
+
+  const render = useCallback((text: string, cacheKey?: string): string => {
+    if (!text) return '';
+    const key = cacheKey ?? text;
+    const cached = cacheRef.current.get(key);
+    if (cached) return cached;
+
+    const raw = marked.parse(text, {
+      ...makeMarkedOptions(),
+      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 = cacheRef.current.get(key);
+      if (cached) return cached;
+
+      // Allow `+`, `-`, `.` in language identifiers (c++, objective-c, bash-session, etc.)
+      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)));
+
+      const raw = await marked.parse(text, makeMarkedOptions());
+      const clean = sanitise(raw);
+      cacheSet(key, clean);
+      return clean;
+    },
+    []
+  );
+
+  const clearCache = useCallback(() => {
+    cacheRef.current.clear();
+  }, []);
+
+  return useMemo(
+    () => ({ render, renderAsync, clearCache }),
+    [render, renderAsync, clearCache]
+  );
+}
diff --git a/src/index.ts b/src/index.ts
index 1b38b497..aa82e83d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -69,6 +69,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/src/tailwind-preset.ts b/src/tailwind-preset.ts
index b8269e8a..5f9ce05d 100644
--- a/src/tailwind-preset.ts
+++ b/src/tailwind-preset.ts
@@ -80,6 +80,8 @@ export const miewebUISafelist = [
   'opacity-0',
   'group-hover:opacity-100',
   'focus:opacity-100',
+  // Markdown SurveyBlock
+  'accent-primary-500',
   // Opacity-modifier variants for semantic colors used by components
   'bg-background/60',
   'bg-background/80',
diff --git a/tsup.config.ts b/tsup.config.ts
index 8a842cea..4369265a 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -28,6 +28,7 @@ export default defineConfig({
     'components/FloatingWindow/index': 'src/components/FloatingWindow/index.ts',
     'components/Input/index': 'src/components/Input/index.ts',
     'components/Label/index': 'src/components/Label/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',
@@ -74,6 +75,9 @@ export default defineConfig({
     '@mieweb/ui',
     '@mieweb/datavis',
     'datavis-ace',
+    'mermaid',
+    'papaparse',
+    'js-yaml',
     /^@mieweb\/ui\//,
     /^datavis\//,
     /^@esheet\//,