@frontmcp/ui 1.11.1 → 1.11.3

package/esm/renderer/index.mjs

@@ -175,54 +175,12 @@ function ContentViewInner({ content, options }) {
   return renderContent(content, options);
 }
 
-// libs/ui/src/renderer/common/use-renderer-theme.ts
-import { useMemo } from "react";
-import { useTheme } from "@mui/material/styles";
-function extractThemeValues(theme) {
-  const palette = theme.palette;
-  return {
-    mode: palette.mode,
-    primary: palette.primary.main,
-    secondary: palette.secondary.main,
-    error: palette.error.main,
-    warning: palette.warning.main,
-    success: palette.success.main,
-    info: palette.info.main,
-    background: palette.background.default,
-    paper: palette.background.paper,
-    textPrimary: palette.text.primary,
-    textSecondary: palette.text.secondary,
-    divider: palette.divider,
-    fontFamily: theme.typography.fontFamily ?? "sans-serif",
-    monoFontFamily: theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace',
-    fontSize: theme.typography.fontSize ?? 14,
-    borderRadius: typeof theme.shape.borderRadius === "number" ? theme.shape.borderRadius : 4,
-    seriesColors: [
-      palette.primary.main,
-      palette.secondary.main,
-      palette.error.main,
-      palette.warning.main,
-      palette.success.main,
-      palette.info.main
-    ]
-  };
-}
-function useRendererTheme() {
-  const theme = useTheme();
-  return useMemo(() => extractThemeValues(theme), [theme]);
-}
-
-// libs/ui/src/renderer/common/inject-stylesheet.ts
-function injectStylesheet(href, id) {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(id)) return;
-  const link = document.createElement("link");
-  link.id = id;
-  link.rel = "stylesheet";
-  link.href = href;
-  link.crossOrigin = "anonymous";
-  document.head.appendChild(link);
-}
+// libs/ui/src/renderer/charts/index.ts
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import React2, { useMemo as useMemo2 } from "react";
 
 // libs/ui/src/renderer/common/lazy-import.ts
 var ESM_SH_BASE = "https://esm.sh/";
@@ -284,7 +242,7 @@ function createLazyImport(moduleId, importer) {
 }
 
 // libs/ui/src/renderer/common/use-lazy-module.ts
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 function useLazyModule(lazy) {
   const [, forceUpdate] = useState(0);
   useEffect(() => {
@@ -300,207 +258,606 @@ function useLazyModule(lazy) {
   return lazy.get();
 }
 
-// libs/ui/src/renderer/mdx/index.ts
-import React2, { useMemo as useMemo2 } from "react";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import Link from "@mui/material/Link";
-import MuiTable from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import { styled } from "@mui/material/styles";
-var lazyReactMarkdown = createLazyImport(
-  "react-markdown",
-  async () => {
-    const mod = await runtimeImportWithFallback(
-      "react-markdown",
-      esmShUrl("react-markdown@9", { external: ["react", "react-dom"] })
-    );
-    return mod;
-  }
-);
-var lazyRemarkGfm = createLazyImport("remark-gfm", async () => {
-  const mod = await runtimeImportWithFallback("remark-gfm", esmShUrl("remark-gfm@4"));
-  return mod;
-});
-var lazyRehypeHighlight = createLazyImport("rehype-highlight", async () => {
-  const mod = await runtimeImportWithFallback("rehype-highlight", esmShUrl("rehype-highlight@7"));
-  return mod;
-});
-var lazyRehypeRaw = createLazyImport("rehype-raw", async () => {
-  const mod = await runtimeImportWithFallback("rehype-raw", esmShUrl("rehype-raw@7"));
-  return mod;
-});
-var MarkdownRoot = styled(Box, {
-  name: "FrontMcpMarkdown",
-  slot: "Root"
-})(() => ({
-  lineHeight: 1.7,
-  "& > *:first-of-type": { marginTop: 0 },
-  "& > *:last-child": { marginBottom: 0 },
-  "& img": { maxWidth: "100%", height: "auto" }
-}));
-var CodeBlock = styled("pre", {
-  name: "FrontMcpMarkdown",
-  slot: "Code"
-})(({ theme }) => {
-  const monoFont = String(
-    theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Roboto Mono", monospace'
-  );
-  return {
-    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[100],
-    padding: theme.spacing(2),
-    borderRadius: Number(theme.shape.borderRadius),
-    overflow: "auto",
-    fontFamily: monoFont,
-    fontSize: "0.875rem",
-    "& code": {
-      backgroundColor: "transparent",
-      padding: 0,
-      fontSize: "inherit",
-      fontFamily: "inherit"
-    }
-  };
-});
-var InlineCode = styled("code")(({ theme }) => {
-  const monoFont = String(
-    theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Roboto Mono", monospace'
-  );
-  return {
-    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200],
-    padding: "2px 6px",
-    borderRadius: Number(theme.shape.borderRadius) / 2,
-    fontFamily: monoFont,
-    fontSize: "0.85em"
-  };
-});
-var Blockquote = styled("blockquote", {
-  name: "FrontMcpMarkdown",
-  slot: "Blockquote"
-})(({ theme }) => ({
-  borderLeft: `4px solid ${theme.palette.primary.main}`,
-  margin: theme.spacing(2, 0),
-  padding: theme.spacing(1, 2),
-  color: theme.palette.text.secondary,
-  "& > p": { margin: 0 }
-}));
-function createMuiComponents() {
+// libs/ui/src/renderer/common/use-renderer-theme.ts
+import { useTheme } from "@mui/material/styles";
+import { useMemo } from "react";
+function extractThemeValues(theme) {
+  const palette = theme.palette;
   return {
-    h1: (props) => React2.createElement(Typography, { ...props, variant: "h4", gutterBottom: true }),
-    h2: (props) => React2.createElement(Typography, { ...props, variant: "h5", gutterBottom: true }),
-    h3: (props) => React2.createElement(Typography, { ...props, variant: "h6", gutterBottom: true }),
-    h4: (props) => React2.createElement(Typography, { ...props, variant: "subtitle1", gutterBottom: true, fontWeight: 600 }),
-    h5: (props) => React2.createElement(Typography, { ...props, variant: "subtitle2", gutterBottom: true }),
-    h6: (props) => React2.createElement(Typography, { ...props, variant: "subtitle2", gutterBottom: true }),
-    p: (props) => React2.createElement(Typography, { ...props, variant: "body1", paragraph: true }),
-    a: (props) => React2.createElement(Link, { ...props, target: "_blank", rel: "noopener noreferrer" }),
-    blockquote: (props) => React2.createElement(Blockquote, props),
-    pre: (props) => React2.createElement(CodeBlock, props),
-    code: ({ inline, className, children, ...rest }) => {
-      if (inline) return React2.createElement(InlineCode, rest, children);
-      return React2.createElement("code", { className, ...rest }, children);
-    },
-    table: (props) => React2.createElement(MuiTable, { ...props, size: "small" }),
-    thead: (props) => React2.createElement(TableHead, props),
-    tbody: (props) => React2.createElement(TableBody, props),
-    tr: (props) => React2.createElement(TableRow, { ...props, hover: true }),
-    th: (props) => React2.createElement(TableCell, { ...props, sx: { fontWeight: 600 } }),
-    td: (props) => React2.createElement(TableCell, props)
+    mode: palette.mode,
+    primary: palette.primary.main,
+    secondary: palette.secondary.main,
+    error: palette.error.main,
+    warning: palette.warning.main,
+    success: palette.success.main,
+    info: palette.info.main,
+    background: palette.background.default,
+    paper: palette.background.paper,
+    textPrimary: palette.text.primary,
+    textSecondary: palette.text.secondary,
+    divider: palette.divider,
+    fontFamily: theme.typography.fontFamily ?? "sans-serif",
+    monoFontFamily: theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace',
+    fontSize: theme.typography.fontSize ?? 14,
+    borderRadius: typeof theme.shape.borderRadius === "number" ? theme.shape.borderRadius : 4,
+    seriesColors: [
+      palette.primary.main,
+      palette.secondary.main,
+      palette.error.main,
+      palette.warning.main,
+      palette.success.main,
+      palette.info.main
+    ]
   };
 }
-function MarkdownView({ content, className }) {
-  const components = useMemo2(() => createMuiComponents(), []);
-  const ReactMarkdownMod = useLazyModule(lazyReactMarkdown);
-  const remarkGfmMod = lazyRemarkGfm.get();
-  const rehypeHighlightMod = lazyRehypeHighlight.get();
-  const rehypeRawMod = lazyRehypeRaw.get();
-  if (ReactMarkdownMod) {
-    const ReactMarkdown = ReactMarkdownMod.default;
-    const remarkPlugins = [];
-    const rehypePlugins = [];
-    if (remarkGfmMod) remarkPlugins.push(remarkGfmMod.default);
-    if (rehypeHighlightMod) rehypePlugins.push(rehypeHighlightMod.default);
-    if (rehypeRawMod) rehypePlugins.push(rehypeRawMod.default);
-    return React2.createElement(
-      MarkdownRoot,
-      { className },
-      React2.createElement(ReactMarkdown, {
-        children: content,
-        remarkPlugins,
-        rehypePlugins,
-        components
-      })
-    );
-  }
-  return React2.createElement(MarkdownRoot, { className }, ...renderFallback(content));
+function useRendererTheme() {
+  const theme = useTheme();
+  return useMemo(() => extractThemeValues(theme), [theme]);
 }
-function renderFallback(content) {
-  const lines = content.split("\n");
-  const elements = [];
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (line.startsWith("# ")) {
-      elements.push(React2.createElement(Typography, { key: i, variant: "h4", gutterBottom: true }, line.slice(2)));
-    } else if (line.startsWith("## ")) {
-      elements.push(React2.createElement(Typography, { key: i, variant: "h5", gutterBottom: true }, line.slice(3)));
-    } else if (line.startsWith("### ")) {
-      elements.push(React2.createElement(Typography, { key: i, variant: "h6", gutterBottom: true }, line.slice(4)));
-    } else if (line.startsWith("- ") || line.startsWith("* ")) {
-      elements.push(React2.createElement("li", { key: i }, line.slice(2)));
-    } else if (line.startsWith("**") && line.endsWith("**")) {
-      elements.push(React2.createElement(Typography, { key: i, variant: "body1", sx: { fontWeight: 700 } }, line.slice(2, -2)));
-    } else if (line.trim()) {
-      elements.push(React2.createElement(Typography, { key: i, variant: "body1", sx: { mb: 2 } }, line));
-    }
-  }
-  return elements;
+
+// libs/ui/src/renderer/charts/index.ts
+var CHART_TYPE_RE2 = /"type"\s*:\s*"(?:bar|line|area|pie|scatter|radar|composed)"/;
+function isChart(content) {
+  const trimmed = content.trim();
+  if (trimmed.charCodeAt(0) !== 123) return false;
+  return CHART_TYPE_RE2.test(trimmed) && trimmed.includes('"data"');
 }
-lazyReactMarkdown.load().catch(() => {
-});
-lazyRemarkGfm.load().catch(() => {
-});
-lazyRehypeHighlight.load().catch(() => {
-});
-lazyRehypeRaw.load().catch(() => {
+var lazyRecharts = createLazyImport("recharts", async () => {
+  const mod = await runtimeImportWithFallback("recharts", esmShUrl("recharts@2", { external: ["react", "react-dom"] }));
+  return mod;
 });
-var MdxRenderer = class {
-  type = "mdx";
-  priority = 5;
-  canHandle(content) {
-    return /^---\s*\n/.test(content) || /import\s+/.test(content) || /<[A-Z]/.test(content) || /^#{1,6}\s+\S/m.test(content) || /^\s*[-*+]\s+\S/m.test(content);
-  }
-  render(content, options) {
-    return React2.createElement(MarkdownView, {
-      content,
-      className: options?.className ?? "fmcp-mdx-content"
-    });
-  }
-};
-var mdxRenderer = new MdxRenderer();
-
-// libs/ui/src/renderer/html/index.ts
-import React3, { useMemo as useMemo3, useState as useState2, useEffect as useEffect2 } from "react";
-import Box2 from "@mui/material/Box";
-import { styled as styled2 } from "@mui/material/styles";
-var HtmlRoot = styled2(Box2, {
-  name: "FrontMcpHtml",
+var ChartRoot = styled(Box, {
+  name: "FrontMcpChart",
   slot: "Root"
 })(({ theme }) => ({
-  "& a": { color: theme.palette.primary.main },
-  "& table": { borderCollapse: "collapse", width: "100%" },
-  "& th, & td": { border: `1px solid ${theme.palette.divider}`, padding: theme.spacing(1) },
-  "& pre": {
-    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[100],
-    padding: theme.spacing(1.5),
-    borderRadius: theme.shape.borderRadius,
-    overflow: "auto"
-  }
+  width: "100%",
+  padding: theme.spacing(2)
 }));
-var purifyModule = null;
-var purifyPromise = null;
-function loadDOMPurify() {
+function ChartView({ config, className }) {
+  const themeValues = useRendererTheme();
+  const recharts = useLazyModule(lazyRecharts);
+  const colors = useMemo2(() => config.colors ?? themeValues.seriesColors, [config.colors, themeValues.seriesColors]);
+  if (!recharts) {
+    return React2.createElement(Alert, { severity: "info" }, "Loading chart library...");
+  }
+  const { ResponsiveContainer, Tooltip, Legend, CartesianGrid, XAxis, YAxis } = recharts;
+  const height = config.height ?? 400;
+  const xKey = config.xKey ?? "name";
+  const yKeys = config.yKeys ?? Object.keys(config.data?.[0] ?? {}).filter((k) => k !== xKey);
+  const chartContent = renderChartType(
+    recharts,
+    config.type,
+    config.data,
+    xKey,
+    yKeys,
+    colors,
+    themeValues.borderRadius
+  );
+  return React2.createElement(
+    ChartRoot,
+    { className },
+    config.title && React2.createElement(
+      Typography,
+      { variant: "subtitle1", gutterBottom: true, sx: { fontWeight: 600, textAlign: "center" } },
+      config.title
+    ),
+    React2.createElement(ResponsiveContainer, { width: "100%", height }, chartContent)
+  );
+}
+function renderChartType(rc, type, data, xKey, yKeys, colors, borderRadius) {
+  const commonProps = { data };
+  const grid = React2.createElement(rc.CartesianGrid, { strokeDasharray: "3 3", opacity: 0.3 });
+  const xAxis = React2.createElement(rc.XAxis, { dataKey: xKey });
+  const yAxis = React2.createElement(rc.YAxis);
+  const tooltip = React2.createElement(rc.Tooltip, { contentStyle: { borderRadius } });
+  const legend = React2.createElement(rc.Legend);
+  switch (type) {
+    case "bar":
+      return React2.createElement(
+        rc.BarChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React2.createElement(rc.Bar, {
+            key,
+            dataKey: key,
+            fill: colors[i % colors.length],
+            radius: [borderRadius, borderRadius, 0, 0]
+          })
+        )
+      );
+    case "line":
+      return React2.createElement(
+        rc.LineChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React2.createElement(rc.Line, {
+            key,
+            type: "monotone",
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            strokeWidth: 2
+          })
+        )
+      );
+    case "area":
+      return React2.createElement(
+        rc.AreaChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React2.createElement(rc.Area, {
+            key,
+            type: "monotone",
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            fill: colors[i % colors.length],
+            fillOpacity: 0.3
+          })
+        )
+      );
+    case "pie":
+      return React2.createElement(
+        rc.PieChart,
+        {},
+        tooltip,
+        legend,
+        React2.createElement(
+          rc.Pie,
+          { data, dataKey: yKeys[0] ?? "value", nameKey: xKey, cx: "50%", cy: "50%", outerRadius: "80%", label: true },
+          ...data.map((_, i) => React2.createElement(rc.Cell, { key: i, fill: colors[i % colors.length] }))
+        )
+      );
+    case "scatter":
+      return React2.createElement(
+        rc.ScatterChart,
+        {},
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React2.createElement(rc.Scatter, { key, name: key, dataKey: key, data, fill: colors[i % colors.length] })
+        )
+      );
+    case "radar":
+      return React2.createElement(
+        rc.RadarChart,
+        { cx: "50%", cy: "50%", outerRadius: "80%", data },
+        React2.createElement(rc.PolarGrid),
+        React2.createElement(rc.PolarAngleAxis, { dataKey: xKey }),
+        React2.createElement(rc.PolarRadiusAxis),
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React2.createElement(rc.Radar, {
+            key,
+            name: key,
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            fill: colors[i % colors.length],
+            fillOpacity: 0.3
+          })
+        )
+      );
+    case "composed":
+      return React2.createElement(
+        rc.ComposedChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map((key, i) => {
+          if (i % 2 === 0) {
+            return React2.createElement(rc.Bar, {
+              key,
+              dataKey: key,
+              fill: colors[i % colors.length],
+              radius: [borderRadius, borderRadius, 0, 0]
+            });
+          }
+          return React2.createElement(rc.Line, {
+            key,
+            type: "monotone",
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            strokeWidth: 2
+          });
+        })
+      );
+    default:
+      return React2.createElement(rc.BarChart, commonProps, grid, xAxis, yAxis, tooltip, legend);
+  }
+}
+lazyRecharts.load().catch(() => {
+});
+var ChartsRenderer = class {
+  type = "chart";
+  priority = 80;
+  canHandle(content) {
+    return isChart(content);
+  }
+  render(content, options) {
+    try {
+      const config = JSON.parse(content);
+      return React2.createElement(ChartView, {
+        config,
+        className: options?.className ?? "fmcp-chart-content"
+      });
+    } catch {
+      return React2.createElement(Alert, { severity: "error" }, "Invalid chart JSON");
+    }
+  }
+};
+var chartsRenderer = new ChartsRenderer();
+
+// libs/ui/src/renderer/csv/index.ts
+import Box2 from "@mui/material/Box";
+import { styled as styled2 } from "@mui/material/styles";
+import MuiTable from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TablePagination from "@mui/material/TablePagination";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import TextField from "@mui/material/TextField";
+import React3, { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
+function detectDelimiter(content) {
+  const firstLine = content.split("\n")[0];
+  const commas = (firstLine.match(/,/g) ?? []).length;
+  const tabs = (firstLine.match(/\t/g) ?? []).length;
+  const semicolons = (firstLine.match(/;/g) ?? []).length;
+  if (tabs > commas && tabs > semicolons) return "	";
+  if (semicolons > commas) return ";";
+  return ",";
+}
+function parseCsv(content, delimiter) {
+  return content.trim().split("\n").map((line) => line.split(delimiter).map((cell) => cell.trim()));
+}
+var CsvRoot = styled2(Box2, {
+  name: "FrontMcpCsvTable",
+  slot: "Root"
+})({
+  width: "100%"
+});
+var StyledHeaderCell = styled2(TableCell, {
+  name: "FrontMcpCsvTable",
+  slot: "Header"
+})(({ theme }) => ({
+  fontWeight: 600,
+  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50],
+  whiteSpace: "nowrap"
+}));
+var FilterToolbar = styled2(Box2, {
+  name: "FrontMcpCsvTable",
+  slot: "Toolbar"
+})(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  display: "flex",
+  gap: theme.spacing(1)
+}));
+function CsvTableView({ content, className, pageSize = 25 }) {
+  const delimiter = useMemo3(() => detectDelimiter(content), [content]);
+  const allRows = useMemo3(() => parseCsv(content, delimiter), [content, delimiter]);
+  const headers = allRows[0] ?? [];
+  const dataRows = useMemo3(() => allRows.slice(1), [allRows]);
+  const [page, setPage] = useState2(0);
+  const [rowsPerPage, setRowsPerPage] = useState2(pageSize);
+  const [sortCol, setSortCol] = useState2(null);
+  const [sortDir, setSortDir] = useState2("asc");
+  const [filter, setFilter] = useState2("");
+  const filteredRows = useMemo3(() => {
+    if (!filter) return dataRows;
+    const lower = filter.toLowerCase();
+    return dataRows.filter((row) => row.some((cell) => cell.toLowerCase().includes(lower)));
+  }, [dataRows, filter]);
+  const sortedRows = useMemo3(() => {
+    if (sortCol === null) return filteredRows;
+    const sorted = [...filteredRows];
+    sorted.sort((a, b) => {
+      const va = a[sortCol] ?? "";
+      const vb = b[sortCol] ?? "";
+      const numA = Number(va);
+      const numB = Number(vb);
+      if (!isNaN(numA) && !isNaN(numB)) {
+        return sortDir === "asc" ? numA - numB : numB - numA;
+      }
+      return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+    });
+    return sorted;
+  }, [filteredRows, sortCol, sortDir]);
+  const pageRows = useMemo3(
+    () => sortedRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+    [sortedRows, page, rowsPerPage]
+  );
+  const handleSort = useCallback((colIndex) => {
+    setSortCol((prev) => {
+      if (prev === colIndex) {
+        setSortDir((d) => d === "asc" ? "desc" : "asc");
+        return colIndex;
+      }
+      setSortDir("asc");
+      return colIndex;
+    });
+  }, []);
+  const handleChangePage = useCallback((_, newPage) => setPage(newPage), []);
+  const handleChangeRowsPerPage = useCallback((e) => {
+    setRowsPerPage(parseInt(e.target.value, 10));
+    setPage(0);
+  }, []);
+  return React3.createElement(
+    CsvRoot,
+    { className },
+    React3.createElement(
+      FilterToolbar,
+      null,
+      React3.createElement(TextField, {
+        size: "small",
+        placeholder: "Filter rows...",
+        value: filter,
+        onChange: (e) => {
+          setFilter(e.target.value);
+          setPage(0);
+        },
+        sx: { minWidth: 200 }
+      })
+    ),
+    React3.createElement(
+      TableContainer,
+      { sx: { border: 1, borderColor: "divider", borderRadius: 1 } },
+      React3.createElement(
+        MuiTable,
+        { size: "small", stickyHeader: true },
+        React3.createElement(
+          TableHead,
+          null,
+          React3.createElement(
+            TableRow,
+            null,
+            headers.map(
+              (header, i) => React3.createElement(
+                StyledHeaderCell,
+                { key: i },
+                React3.createElement(
+                  TableSortLabel,
+                  {
+                    active: sortCol === i,
+                    direction: sortCol === i ? sortDir : "asc",
+                    onClick: () => handleSort(i)
+                  },
+                  header
+                )
+              )
+            )
+          )
+        ),
+        React3.createElement(
+          TableBody,
+          null,
+          pageRows.map(
+            (row, ri) => React3.createElement(
+              TableRow,
+              { key: ri, hover: true },
+              row.map((cell, ci) => React3.createElement(TableCell, { key: ci }, cell))
+            )
+          )
+        )
+      )
+    ),
+    sortedRows.length > rowsPerPage && React3.createElement(TablePagination, {
+      count: sortedRows.length,
+      page,
+      rowsPerPage,
+      onPageChange: handleChangePage,
+      onRowsPerPageChange: handleChangeRowsPerPage,
+      rowsPerPageOptions: [10, 25, 50, 100]
+    })
+  );
+}
+var CsvRenderer = class {
+  type = "csv";
+  priority = 10;
+  canHandle(content) {
+    const lines = content.trim().split("\n").slice(0, 5);
+    if (lines.length < 2) return false;
+    for (const delim of [",", "	", ";"]) {
+      const counts = lines.map((line) => line.split(delim).length);
+      if (counts[0] > 1 && counts.every((c) => c === counts[0])) return true;
+    }
+    return false;
+  }
+  render(content, options) {
+    const pageSize = options?.rendererOptions?.["pageSize"];
+    return React3.createElement(CsvTableView, {
+      content,
+      className: options?.className ?? "fmcp-csv-table",
+      pageSize
+    });
+  }
+};
+var csvRenderer = new CsvRenderer();
+
+// libs/ui/src/renderer/flow/index.ts
+import Alert2 from "@mui/material/Alert";
+import Box3 from "@mui/material/Box";
+import { styled as styled3 } from "@mui/material/styles";
+import Typography2 from "@mui/material/Typography";
+import React4, { useEffect as useEffect2, useMemo as useMemo4 } from "react";
+
+// libs/ui/src/renderer/common/inject-stylesheet.ts
+function injectStylesheet(href, id) {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const link = document.createElement("link");
+  link.id = id;
+  link.rel = "stylesheet";
+  link.href = href;
+  link.crossOrigin = "anonymous";
+  document.head.appendChild(link);
+}
+
+// libs/ui/src/renderer/flow/index.ts
+var XYFLOW_CSS_URL = "https://esm.sh/@xyflow/react@12/dist/style.css";
+var XYFLOW_CSS_ID = "fmcp-xyflow-css";
+function isFlow(content) {
+  const trimmed = content.trim();
+  if (trimmed.charCodeAt(0) !== 123) return false;
+  return trimmed.includes('"nodes"') && trimmed.includes('"edges"');
+}
+var lazyXYFlow = createLazyImport("@xyflow/react", async () => {
+  const mod = await runtimeImportWithFallback(
+    "@xyflow/react",
+    esmShUrl("@xyflow/react@12", { external: ["react", "react-dom"] })
+  );
+  return mod;
+});
+var FlowRoot = styled3(Box3, {
+  name: "FrontMcpFlow",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  border: `1px solid ${theme.palette.divider}`
+}));
+function FlowView({ config, className }) {
+  useEffect2(() => {
+    injectStylesheet(XYFLOW_CSS_URL, XYFLOW_CSS_ID);
+  }, []);
+  const themeValues = useRendererTheme();
+  const xyflow = useLazyModule(lazyXYFlow);
+  const height = config.height ?? 500;
+  const styledNodes = useMemo4(() => {
+    return config.nodes.map((node) => ({
+      ...node,
+      style: {
+        background: themeValues.paper,
+        color: themeValues.textPrimary,
+        border: `1px solid ${themeValues.divider}`,
+        borderRadius: themeValues.borderRadius,
+        padding: 8,
+        fontSize: themeValues.fontSize,
+        fontFamily: themeValues.fontFamily,
+        ...node.style
+      }
+    }));
+  }, [config.nodes, themeValues]);
+  const styledEdges = useMemo4(() => {
+    return config.edges.map((edge, i) => ({
+      ...edge,
+      style: {
+        stroke: themeValues.seriesColors[i % themeValues.seriesColors.length],
+        strokeWidth: 2,
+        ...edge.style
+      }
+    }));
+  }, [config.edges, themeValues]);
+  if (!xyflow) {
+    return React4.createElement(Alert2, { severity: "info" }, "Loading flow diagram library...");
+  }
+  const { ReactFlow, Controls, MiniMap, Background } = xyflow;
+  return React4.createElement(
+    FlowRoot,
+    { className },
+    config.title && React4.createElement(
+      Typography2,
+      { variant: "subtitle1", sx: { fontWeight: 600, p: 1.5, borderBottom: 1, borderColor: "divider" } },
+      config.title
+    ),
+    React4.createElement(
+      Box3,
+      { sx: { height } },
+      React4.createElement(
+        ReactFlow,
+        {
+          nodes: styledNodes,
+          edges: styledEdges,
+          fitView: config.fitView !== false,
+          proOptions: { hideAttribution: true }
+        },
+        React4.createElement(Controls, {
+          style: {
+            backgroundColor: themeValues.paper,
+            borderRadius: themeValues.borderRadius,
+            border: `1px solid ${themeValues.divider}`
+          }
+        }),
+        React4.createElement(MiniMap, {
+          style: {
+            backgroundColor: themeValues.background,
+            borderRadius: themeValues.borderRadius
+          },
+          nodeColor: themeValues.primary
+        }),
+        Background && React4.createElement(Background, {
+          color: themeValues.divider,
+          gap: 16
+        })
+      )
+    )
+  );
+}
+lazyXYFlow.load().catch(() => {
+});
+var FlowRenderer = class {
+  type = "flow";
+  priority = 70;
+  canHandle(content) {
+    return isFlow(content);
+  }
+  render(content, options) {
+    try {
+      const config = JSON.parse(content);
+      return React4.createElement(FlowView, {
+        config,
+        className: options?.className ?? "fmcp-flow-content"
+      });
+    } catch {
+      return React4.createElement(Alert2, { severity: "error" }, "Invalid flow JSON");
+    }
+  }
+};
+var flowRenderer = new FlowRenderer();
+
+// libs/ui/src/renderer/html/index.ts
+import Box4 from "@mui/material/Box";
+import { styled as styled4 } from "@mui/material/styles";
+import React5, { useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } from "react";
+var HtmlRoot = styled4(Box4, {
+  name: "FrontMcpHtml",
+  slot: "Root"
+})(({ theme }) => ({
+  "& a": { color: theme.palette.primary.main },
+  "& table": { borderCollapse: "collapse", width: "100%" },
+  "& th, & td": { border: `1px solid ${theme.palette.divider}`, padding: theme.spacing(1) },
+  "& pre": {
+    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[100],
+    padding: theme.spacing(1.5),
+    borderRadius: theme.shape.borderRadius,
+    overflow: "auto"
+  }
+}));
+var purifyModule = null;
+var purifyPromise = null;
+function loadDOMPurify() {
   if (purifyModule) return Promise.resolve(purifyModule);
   if (purifyPromise) return purifyPromise;
   purifyPromise = runtimeImportWithFallback("dompurify", esmShUrl("dompurify@3")).then((mod) => {
@@ -523,16 +880,16 @@ function sanitizeSync(html) {
 }
 loadDOMPurify();
 function HtmlView({ html, className }) {
-  const [purifyReady, setPurifyReady] = useState2(!!purifyModule);
-  useEffect2(() => {
+  const [purifyReady, setPurifyReady] = useState3(!!purifyModule);
+  useEffect3(() => {
     if (!purifyModule) {
       loadDOMPurify().then((mod) => {
         if (mod) setPurifyReady(true);
       });
     }
   }, []);
-  const sanitized = useMemo3(() => sanitizeSync(html), [html, purifyReady]);
-  return React3.createElement(HtmlRoot, {
+  const sanitized = useMemo5(() => sanitizeSync(html), [html, purifyReady]);
+  return React5.createElement(HtmlRoot, {
     className,
     dangerouslySetInnerHTML: { __html: sanitized }
   });
@@ -544,7 +901,7 @@ var HtmlRenderer = class {
     return /^\s*</.test(content) && /<\/\w+>/.test(content);
   }
   render(content, options) {
-    return React3.createElement(HtmlView, {
+    return React5.createElement(HtmlView, {
       html: content,
       className: options?.className ?? "fmcp-html-content"
     });
@@ -552,251 +909,158 @@ var HtmlRenderer = class {
 };
 var htmlRenderer = new HtmlRenderer();
 
-// libs/ui/src/renderer/react/index.ts
-import React4, { useState as useState3, useEffect as useEffect3 } from "react";
-import Box3 from "@mui/material/Box";
-import Alert from "@mui/material/Alert";
-
-// libs/ui/src/runtime/babel-runtime.ts
-var BABEL_STANDALONE_CDN = "https://esm.sh/@babel/standalone@7";
-var BABEL_STANDALONE_FALLBACK_CDN = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.10/babel.min.js";
-var babelState = { status: "idle" };
-async function loadBabel() {
-  if (babelState.status === "loaded") {
-    return babelState.babel;
-  }
-  if (babelState.status === "loading") {
-    return babelState.promise;
-  }
-  if (babelState.status === "error") {
-    throw babelState.error;
-  }
-  const promise = doLoadBabel();
-  babelState = { status: "loading", promise };
-  try {
-    const babel = await promise;
-    babelState = { status: "loaded", babel };
-    return babel;
-  } catch (error) {
-    const err = error instanceof Error ? error : new Error(String(error));
-    babelState = { status: "error", error: err };
-    throw err;
-  }
-}
-async function doLoadBabel() {
-  const globalBabel = globalThis["Babel"];
-  if (globalBabel && typeof globalBabel.transform === "function") {
-    return globalBabel;
-  }
-  try {
-    const module = await import(
-      /* @vite-ignore */
-      /* webpackIgnore: true */
-      BABEL_STANDALONE_CDN
-    );
-    if (module && typeof module.transform === "function") {
-      return module;
-    }
-    if (module.default && typeof module.default.transform === "function") {
-      return module.default;
-    }
-  } catch {
-  }
-  return new Promise((resolve, reject) => {
-    if (typeof document === "undefined") {
-      reject(new Error("Babel Standalone requires a browser environment"));
-      return;
-    }
-    const script = document.createElement("script");
-    script.src = BABEL_STANDALONE_FALLBACK_CDN;
-    script.crossOrigin = "anonymous";
-    script.onload = () => {
-      const babel = globalThis["Babel"];
-      if (babel && typeof babel.transform === "function") {
-        resolve(babel);
-      } else {
-        reject(new Error("Babel Standalone loaded but transform function not found"));
-      }
-    };
-    script.onerror = () => {
-      reject(new Error(`Failed to load Babel Standalone from ${BABEL_STANDALONE_FALLBACK_CDN}`));
-    };
-    document.head.appendChild(script);
-  });
-}
-async function transpileJsx(source, filename = "component.jsx") {
-  const babel = await loadBabel();
-  const result = babel.transform(source, {
-    presets: ["react"],
-    filename
-  });
-  return result.code;
-}
-
-// libs/ui/src/renderer/react/index.ts
-function isReactJsx(content) {
-  if (/^#{1,6}\s+\S/m.test(content)) return false;
-  return /(?:function|const|class)\s+\w+/.test(content) && /(?:return|=>)[\s(]*</.test(content);
-}
-function parseImports(source) {
-  const results = [];
-  const defaultRe = /^import\s+(\w+)\s+from\s+['"]([^'"]+)['"][\s;]*$/gm;
-  let m;
-  while ((m = defaultRe.exec(source)) !== null) {
-    results.push({ line: m[0], localName: m[1], specifier: m[2], named: false });
-  }
-  const namedRe = /^import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"][\s;]*$/gm;
-  while ((m = namedRe.exec(source)) !== null) {
-    const names = m[1].split(",").map((n) => n.trim()).filter(Boolean);
-    for (const name of names) {
-      results.push({ line: m[0], localName: name, specifier: m[2], named: true });
-    }
-  }
-  return results;
-}
-function stripImports(source) {
-  return source.replace(/^import\s+\w+\s+from\s+['"][^'"]+['"][\s;]*$/gm, "").replace(/^import\s+\{[^}]+\}\s+from\s+['"][^'"]+['"][\s;]*$/gm, "");
-}
-function rewriteExportDefault(source) {
-  let result = source.replace(/^export\s+default\s+(function|class)\b/gm, "var __default__ = $1");
-  result = result.replace(/^export\s+default\s+(\([^)]*\)\s*=>)/gm, "var __default__ = $1");
-  result = result.replace(/^export\s+default\s+(\w+)\s*;?\s*$/gm, "var __default__ = $1;");
-  return result;
-}
-function isReactSpecifier(specifier) {
-  return specifier === "react" || /^https?:\/\/esm\.sh\/react(?:@[\d.]+)?$/.test(specifier);
-}
-async function resolveModules(imports) {
-  const modules = {};
-  const specifierMap = /* @__PURE__ */ new Map();
-  for (const imp of imports) {
-    const existing = specifierMap.get(imp.specifier) ?? [];
-    existing.push(imp);
-    specifierMap.set(imp.specifier, existing);
-  }
-  for (const [specifier, specImports] of specifierMap) {
-    let mod;
-    if (isReactSpecifier(specifier)) {
-      mod = React4;
-    } else {
-      mod = await runtimeImport(specifier);
-    }
-    for (const imp of specImports) {
-      if (imp.named) {
-        modules[imp.localName] = mod[imp.localName] ?? mod["default"]?.[imp.localName];
-      } else {
-        modules[imp.localName] = mod["default"] ?? mod;
-      }
-    }
-  }
-  return modules;
+// libs/ui/src/renderer/image/index.ts
+import Alert3 from "@mui/material/Alert";
+import Box5 from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+import { styled as styled5 } from "@mui/material/styles";
+import Typography3 from "@mui/material/Typography";
+import React6, { useCallback as useCallback2, useEffect as useEffect4, useState as useState4 } from "react";
+var IMAGE_DATA_URI = /^data:image\/(?:png|jpeg|jpg|gif|webp|svg\+xml|avif)[;,]/;
+var IMAGE_URL = /^https?:\/\/[^?#\s]+\.(?:png|jpe?g|gif|webp|svg|avif|ico)(?:\?[^#\s]*)?$/i;
+var IMAGE_SERVICE_URL = /^https?:\/\/(?:picsum\.photos|images\.unsplash\.com|i\.imgur\.com|placekitten\.com|via\.placeholder\.com)\//i;
+function isImage(content) {
+  const trimmed = content.trim();
+  return IMAGE_DATA_URI.test(trimmed) || IMAGE_URL.test(trimmed) || IMAGE_SERVICE_URL.test(trimmed);
 }
-function ReactJsxView({ source, className }) {
-  const [Component, setComponent] = useState3(null);
-  const [error, setError] = useState3(null);
-  const [loading, setLoading] = useState3(true);
-  useEffect3(() => {
-    let cancelled = false;
-    async function transpileAndRender() {
-      try {
-        const imports = parseImports(source);
-        const modules = await resolveModules(imports);
-        let code = stripImports(source);
-        code = rewriteExportDefault(code);
-        code = await transpileJsx(code, "component.jsx");
-        code += "\nreturn __default__;";
-        const argNames = Object.keys(modules);
-        const argValues = argNames.map((n) => modules[n]);
-        const factory = new Function(...argNames, code);
-        const Comp = factory(...argValues);
-        if (!cancelled) {
-          setComponent(() => Comp);
-          setError(null);
-          setLoading(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : String(err));
-          setComponent(null);
-          setLoading(false);
-        }
+var ImageRoot = styled5(Box5, {
+  name: "FrontMcpImage",
+  slot: "Root"
+})({
+  display: "inline-block",
+  position: "relative",
+  maxWidth: "100%"
+});
+var StyledImage = styled5("img", {
+  name: "FrontMcpImage",
+  slot: "Image"
+})({
+  maxWidth: "100%",
+  height: "auto",
+  display: "block",
+  cursor: "pointer",
+  borderRadius: "inherit"
+});
+var LightboxBackdrop = styled5(Box5, {
+  name: "FrontMcpImage",
+  slot: "Lightbox"
+})({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 16
+});
+var LightboxImage = styled5("img")({
+  maxWidth: "90vw",
+  maxHeight: "90vh",
+  objectFit: "contain",
+  borderRadius: 8
+});
+function LightboxOverlay({ src, alt, onClose }) {
+  return React6.createElement(
+    LightboxBackdrop,
+    {
+      onClick: onClose,
+      sx: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1300,
+        bgcolor: "rgba(0,0,0,0.8)"
       }
-    }
-    setLoading(true);
-    setError(null);
-    setComponent(null);
-    transpileAndRender();
-    return () => {
-      cancelled = true;
-    };
-  }, [source]);
-  if (loading) {
-    return React4.createElement(Box3, { className, sx: { p: 2, color: "text.secondary" } }, "Transpiling JSX...");
-  }
+    },
+    React6.createElement(LightboxImage, { src, alt })
+  );
+}
+function ImageView({ src, alt, caption, className }) {
+  const [loaded, setLoaded] = useState4(false);
+  const [error, setError] = useState4(false);
+  const [lightboxOpen, setLightboxOpen] = useState4(false);
+  useEffect4(() => {
+    setLoaded(false);
+    setError(false);
+    setLightboxOpen(false);
+  }, [src]);
+  const handleLoad = useCallback2(() => setLoaded(true), []);
+  const handleError = useCallback2(() => {
+    setLoaded(true);
+    setError(true);
+  }, []);
   if (error) {
-    return React4.createElement(
-      Box3,
-      { className },
-      React4.createElement(Alert, { severity: "error", sx: { mb: 1 } }, `JSX render error: ${error}`),
-      React4.createElement(
-        "pre",
-        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
-        source
-      )
-    );
-  }
-  if (!Component) {
-    return React4.createElement(
-      Box3,
-      { className },
-      React4.createElement(Alert, { severity: "warning" }, "No component exported. Use `export default MyComponent`.")
-    );
+    return React6.createElement(Alert3, { severity: "error" }, `Failed to load image: ${src}`);
   }
-  return React4.createElement(Box3, { className }, React4.createElement(Component, {}));
+  return React6.createElement(
+    ImageRoot,
+    { className },
+    !loaded && React6.createElement(Skeleton, { variant: "rectangular", width: 400, height: 300 }),
+    React6.createElement(StyledImage, {
+      src,
+      alt: alt ?? "Image",
+      onLoad: handleLoad,
+      onError: handleError,
+      onClick: () => setLightboxOpen(true),
+      style: loaded ? void 0 : { display: "none" }
+    }),
+    caption && React6.createElement(
+      Typography3,
+      { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block", textAlign: "center" } },
+      caption
+    ),
+    lightboxOpen && React6.createElement(LightboxOverlay, {
+      src,
+      alt: alt ?? "Image",
+      onClose: () => setLightboxOpen(false)
+    })
+  );
 }
-var ReactJsxRenderer = class {
-  type = "jsx";
-  priority = 10;
+var ImageRenderer = class {
+  type = "image";
+  priority = 30;
   canHandle(content) {
-    return isReactJsx(content);
+    return isImage(content);
   }
   render(content, options) {
-    return React4.createElement(ReactJsxView, {
-      source: content,
-      className: options?.className ?? "fmcp-jsx-content"
+    const caption = options?.rendererOptions?.["caption"];
+    return React6.createElement(ImageView, {
+      src: content.trim(),
+      alt: options?.toolName ?? "Image",
+      caption,
+      className: options?.className ?? "fmcp-image-content"
     });
   }
 };
-var reactJsxRenderer = new ReactJsxRenderer();
+var imageRenderer = new ImageRenderer();
 
-// libs/ui/src/renderer/pdf/index.ts
-import React5, { useState as useState4, useCallback, useMemo as useMemo4 } from "react";
-import Box4 from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import Typography2 from "@mui/material/Typography";
-import TextField from "@mui/material/TextField";
-import { styled as styled3 } from "@mui/material/styles";
-var lazyReactPdf = createLazyImport("react-pdf", async () => {
+// libs/ui/src/renderer/maps/index.ts
+import Alert4 from "@mui/material/Alert";
+import Box6 from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import { styled as styled6 } from "@mui/material/styles";
+import Typography4 from "@mui/material/Typography";
+import React7, { useEffect as useEffect5 } from "react";
+var LEAFLET_CSS_URL = "https://esm.sh/leaflet@1.9.4/dist/leaflet.css";
+var LEAFLET_CSS_ID = "fmcp-leaflet-css";
+var DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+var DEFAULT_ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+var GEOJSON_TYPE_RE2 = /"type"\s*:\s*"(?:FeatureCollection|Feature|Point|LineString|Polygon|MultiPoint|MultiLineString|MultiPolygon|GeometryCollection)"/;
+function isMap(content) {
+  const trimmed = content.trim();
+  if (trimmed.charCodeAt(0) === 123 && GEOJSON_TYPE_RE2.test(trimmed)) return true;
+  try {
+    const parsed = JSON.parse(trimmed);
+    return !!(parsed.center && Array.isArray(parsed.center) || parsed.markers && Array.isArray(parsed.markers) || parsed.geojson && typeof parsed.geojson === "object");
+  } catch {
+    return false;
+  }
+}
+var lazyReactLeaflet = createLazyImport("react-leaflet", async () => {
   const mod = await runtimeImportWithFallback(
-    "react-pdf",
-    esmShUrl("react-pdf@9", { external: ["react", "react-dom"] })
+    "react-leaflet",
+    esmShUrl("react-leaflet@5", { external: ["react", "react-dom"] })
   );
-  const pdfjs = mod["pdfjs"];
-  if (pdfjs?.GlobalWorkerOptions) {
-    pdfjs.GlobalWorkerOptions.workerSrc = `${ESM_SH_BASE}pdfjs-dist@${pdfjs.version ?? "4"}/build/pdf.worker.min.mjs?raw`;
-  }
   return mod;
 });
-function toDataUri(content) {
-  if (content.startsWith("data:")) return content;
-  if (content.startsWith("%PDF-")) {
-    const base64 = typeof btoa === "function" ? btoa(content) : Buffer.from(content).toString("base64");
-    return `data:application/pdf;base64,${base64}`;
-  }
-  return `data:application/pdf;base64,${content}`;
-}
-var PdfRoot = styled3(Box4, {
-  name: "FrontMcpPdf",
+var MapRoot = styled6(Box6, {
+  name: "FrontMcpMap",
   slot: "Root"
 })(({ theme }) => ({
   width: "100%",
@@ -804,650 +1068,562 @@ var PdfRoot = styled3(Box4, {
   overflow: "hidden",
   border: `1px solid ${theme.palette.divider}`
 }));
-var Toolbar = styled3(Box4, {
-  name: "FrontMcpPdf",
-  slot: "Toolbar"
-})(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  padding: theme.spacing(1, 2),
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50]
-}));
-var PageContainer = styled3(Box4, {
-  name: "FrontMcpPdf",
-  slot: "PageContainer"
-})({
-  display: "flex",
-  justifyContent: "center",
-  overflow: "auto",
-  maxHeight: 700
-});
-function PdfView({ content, className, title }) {
-  const [numPages, setNumPages] = useState4(0);
-  const [pageNumber, setPageNumber] = useState4(1);
-  const [scale, setScale] = useState4(1);
-  const reactPdf = useLazyModule(lazyReactPdf);
-  const dataUri = useMemo4(() => toDataUri(content), [content]);
-  const onDocumentLoadSuccess = useCallback(({ numPages: n }) => {
-    setNumPages(n);
+function parseMapConfig(content) {
+  const parsed = JSON.parse(content);
+  if (parsed.type && [
+    "FeatureCollection",
+    "Feature",
+    "Point",
+    "LineString",
+    "Polygon",
+    "MultiPoint",
+    "MultiLineString",
+    "MultiPolygon",
+    "GeometryCollection"
+  ].includes(parsed.type)) {
+    return {
+      center: [0, 0],
+      zoom: 2,
+      geojson: parsed
+    };
+  }
+  return parsed;
+}
+function MapView({ config, className }) {
+  useEffect5(() => {
+    injectStylesheet(LEAFLET_CSS_URL, LEAFLET_CSS_ID);
   }, []);
-  const goToPrev = useCallback(() => setPageNumber((p) => Math.max(1, p - 1)), []);
-  const goToNext = useCallback(() => setPageNumber((p) => Math.min(numPages, p + 1)), []);
-  const zoomIn = useCallback(() => setScale((s) => Math.min(3, s + 0.25)), []);
-  const zoomOut = useCallback(() => setScale((s) => Math.max(0.25, s - 0.25)), []);
-  if (!reactPdf) {
-    return React5.createElement("iframe", {
-      className: className ?? "fmcp-pdf-content",
-      src: dataUri,
-      style: { width: "100%", height: "600px", border: "none" },
-      title: title ?? "PDF Document"
-    });
+  const leaflet = useLazyModule(lazyReactLeaflet);
+  const height = config.height ?? 400;
+  const center = config.center ?? [51.505, -0.09];
+  const zoom = config.zoom ?? 13;
+  if (!leaflet) {
+    return React7.createElement(Alert4, { severity: "info" }, "Loading map library...");
   }
-  const { Document, Page } = reactPdf;
-  return React5.createElement(
-    PdfRoot,
+  const { MapContainer, TileLayer, Marker, Popup, GeoJSON } = leaflet;
+  const tileUrl = config.tileLayer?.url ?? DEFAULT_TILE_URL;
+  const attribution = config.tileLayer?.attribution ?? DEFAULT_ATTRIBUTION;
+  return React7.createElement(
+    MapRoot,
     { className },
-    React5.createElement(
-      Toolbar,
-      null,
-      React5.createElement(
-        IconButton,
-        { size: "small", onClick: goToPrev, disabled: pageNumber <= 1, "aria-label": "Previous page" },
-        "\u25C0"
-      ),
-      React5.createElement(
-        Typography2,
-        { variant: "body2", sx: { minWidth: 80, textAlign: "center" } },
-        `${pageNumber} / ${numPages || "..."}`
-      ),
-      React5.createElement(
-        IconButton,
-        { size: "small", onClick: goToNext, disabled: pageNumber >= numPages, "aria-label": "Next page" },
-        "\u25B6"
-      ),
-      React5.createElement(Box4, { sx: { flex: 1 } }),
-      React5.createElement(IconButton, { size: "small", onClick: zoomOut, "aria-label": "Zoom out" }, "\u2212"),
-      React5.createElement(
-        Typography2,
-        { variant: "body2", sx: { minWidth: 50, textAlign: "center" } },
-        `${Math.round(scale * 100)}%`
-      ),
-      React5.createElement(IconButton, { size: "small", onClick: zoomIn, "aria-label": "Zoom in" }, "+"),
-      React5.createElement(Box4, { sx: { flex: 1 } }),
-      React5.createElement(TextField, {
-        size: "small",
-        type: "number",
-        value: pageNumber,
-        onChange: (e) => {
-          const n = parseInt(e.target.value, 10);
-          if (n >= 1 && n <= numPages) setPageNumber(n);
-        },
-        sx: { width: 70 },
-        slotProps: { htmlInput: { min: 1, max: numPages, "aria-label": "Go to page" } }
-      })
+    config.title && React7.createElement(
+      Typography4,
+      { variant: "subtitle1", sx: { fontWeight: 600, p: 1.5, borderBottom: 1, borderColor: "divider" } },
+      config.title
     ),
-    React5.createElement(
-      PageContainer,
-      null,
-      React5.createElement(
-        Document,
-        { file: dataUri, onLoadSuccess: onDocumentLoadSuccess },
-        React5.createElement(Page, { pageNumber, scale, renderTextLayer: false, renderAnnotationLayer: false })
-      )
+    React7.createElement(
+      MapContainer,
+      {
+        center,
+        zoom,
+        style: { height, width: "100%" },
+        scrollWheelZoom: true
+      },
+      React7.createElement(TileLayer, { url: tileUrl, attribution }),
+      config.markers?.map(
+        (marker, i) => React7.createElement(
+          Marker,
+          { key: i, position: marker.position },
+          marker.popup && React7.createElement(Popup, null, React7.createElement(Paper, { elevation: 0, sx: { p: 1 } }, marker.popup))
+        )
+      ),
+      config.geojson && React7.createElement(GeoJSON, { data: config.geojson })
     )
   );
 }
-lazyReactPdf.load().catch(() => {
+lazyReactLeaflet.load().catch(() => {
 });
-var PdfRenderer = class {
-  type = "pdf";
-  priority = 90;
+var MapsRenderer = class {
+  type = "map";
+  priority = 60;
   canHandle(content) {
-    return content.startsWith("%PDF-") || content.trim().startsWith("JVBER") || /^data:application\/pdf[;,]/.test(content.trim());
+    return isMap(content);
   }
   render(content, options) {
-    return React5.createElement(PdfView, {
-      content,
-      className: options?.className ?? "fmcp-pdf-content",
-      title: options?.toolName ?? "PDF Document"
-    });
+    try {
+      const config = parseMapConfig(content);
+      return React7.createElement(MapView, {
+        config,
+        className: options?.className ?? "fmcp-map-content"
+      });
+    } catch {
+      return React7.createElement(Alert4, { severity: "error" }, "Invalid map/GeoJSON data");
+    }
   }
 };
-var pdfRenderer = new PdfRenderer();
+var mapsRenderer = new MapsRenderer();
 
-// libs/ui/src/renderer/csv/index.ts
-import React6, { useState as useState5, useMemo as useMemo5, useCallback as useCallback2 } from "react";
-import Box5 from "@mui/material/Box";
-import MuiTable2 from "@mui/material/Table";
-import TableBody2 from "@mui/material/TableBody";
-import TableCell2 from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead2 from "@mui/material/TableHead";
-import TableRow2 from "@mui/material/TableRow";
-import TablePagination from "@mui/material/TablePagination";
-import TableSortLabel from "@mui/material/TableSortLabel";
-import TextField2 from "@mui/material/TextField";
-import { styled as styled4 } from "@mui/material/styles";
-function detectDelimiter(content) {
-  const firstLine = content.split("\n")[0];
-  const commas = (firstLine.match(/,/g) ?? []).length;
-  const tabs = (firstLine.match(/\t/g) ?? []).length;
-  const semicolons = (firstLine.match(/;/g) ?? []).length;
-  if (tabs > commas && tabs > semicolons) return "	";
-  if (semicolons > commas) return ";";
-  return ",";
-}
-function parseCsv(content, delimiter) {
-  return content.trim().split("\n").map((line) => line.split(delimiter).map((cell) => cell.trim()));
+// libs/ui/src/renderer/math/index.ts
+import Alert5 from "@mui/material/Alert";
+import Box7 from "@mui/material/Box";
+import { styled as styled7 } from "@mui/material/styles";
+import React8, { useEffect as useEffect6, useMemo as useMemo6 } from "react";
+var KATEX_CSS_URL = "https://esm.sh/katex@0.16.11/dist/katex.min.css";
+var KATEX_CSS_ID = "fmcp-katex-css";
+var MATH_DISPLAY = /\$\$(?:[^$]|\$(?!\$))+\$\$/s;
+var MATH_INLINE = /\$[^$\n]+?\$/;
+var MATH_BRACKET_DISPLAY = /\\\[(?:[^\\]|\\.)*\\\]/s;
+var MATH_PAREN_INLINE = /\\\((?:[^\\]|\\.)*\\\)/s;
+var MATH_BEGIN = /\\begin\{(?:equation|align|gather|matrix|pmatrix|bmatrix|cases)\}/;
+function isMath(content) {
+  const trimmed = content.trim();
+  return MATH_DISPLAY.test(trimmed) || MATH_INLINE.test(trimmed) || MATH_BRACKET_DISPLAY.test(trimmed) || MATH_PAREN_INLINE.test(trimmed) || MATH_BEGIN.test(trimmed);
 }
-var CsvRoot = styled4(Box5, {
-  name: "FrontMcpCsvTable",
-  slot: "Root"
-})({
-  width: "100%"
+var lazyKatex = createLazyImport("katex", async () => {
+  const mod = await runtimeImportWithFallback("katex", esmShUrl("katex@0.16"));
+  return mod;
 });
-var StyledHeaderCell = styled4(TableCell2, {
-  name: "FrontMcpCsvTable",
-  slot: "Header"
+var MathRoot = styled7(Box7, {
+  name: "FrontMcpMath",
+  slot: "Root"
 })(({ theme }) => ({
-  fontWeight: 600,
-  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50],
-  whiteSpace: "nowrap"
+  color: theme.palette.text.primary,
+  "& .katex-display": {
+    margin: theme.spacing(2, 0),
+    textAlign: "center"
+  }
 }));
-var FilterToolbar = styled4(Box5, {
-  name: "FrontMcpCsvTable",
-  slot: "Toolbar"
+var MathDisplay = styled7(Box7, {
+  name: "FrontMcpMath",
+  slot: "Display"
 })(({ theme }) => ({
-  padding: theme.spacing(1, 2),
-  display: "flex",
-  gap: theme.spacing(1)
+  display: "block",
+  textAlign: "center",
+  margin: theme.spacing(2, 0),
+  fontSize: "1.2em",
+  overflow: "auto"
 }));
-function CsvTableView({ content, className, pageSize = 25 }) {
-  const delimiter = useMemo5(() => detectDelimiter(content), [content]);
-  const allRows = useMemo5(() => parseCsv(content, delimiter), [content, delimiter]);
-  const headers = allRows[0] ?? [];
-  const dataRows = useMemo5(() => allRows.slice(1), [allRows]);
-  const [page, setPage] = useState5(0);
-  const [rowsPerPage, setRowsPerPage] = useState5(pageSize);
-  const [sortCol, setSortCol] = useState5(null);
-  const [sortDir, setSortDir] = useState5("asc");
-  const [filter, setFilter] = useState5("");
-  const filteredRows = useMemo5(() => {
-    if (!filter) return dataRows;
-    const lower = filter.toLowerCase();
-    return dataRows.filter((row) => row.some((cell) => cell.toLowerCase().includes(lower)));
-  }, [dataRows, filter]);
-  const sortedRows = useMemo5(() => {
-    if (sortCol === null) return filteredRows;
-    const sorted = [...filteredRows];
-    sorted.sort((a, b) => {
-      const va = a[sortCol] ?? "";
-      const vb = b[sortCol] ?? "";
-      const numA = Number(va);
-      const numB = Number(vb);
-      if (!isNaN(numA) && !isNaN(numB)) {
-        return sortDir === "asc" ? numA - numB : numB - numA;
-      }
-      return sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
-    });
-    return sorted;
-  }, [filteredRows, sortCol, sortDir]);
-  const pageRows = useMemo5(
-    () => sortedRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
-    [sortedRows, page, rowsPerPage]
-  );
-  const handleSort = useCallback2((colIndex) => {
-    setSortCol((prev) => {
-      if (prev === colIndex) {
-        setSortDir((d) => d === "asc" ? "desc" : "asc");
-        return colIndex;
-      }
-      setSortDir("asc");
-      return colIndex;
-    });
-  }, []);
-  const handleChangePage = useCallback2((_, newPage) => setPage(newPage), []);
-  const handleChangeRowsPerPage = useCallback2((e) => {
-    setRowsPerPage(parseInt(e.target.value, 10));
-    setPage(0);
+var MathInline = styled7("span", {
+  name: "FrontMcpMath",
+  slot: "Inline"
+})({
+  display: "inline"
+});
+function parseMathContent(source) {
+  const segments = [];
+  const mathRegex = /(\$\$(?:[^$]|\$(?!\$))+\$\$|\$[^$\n]+?\$|\\\[(?:[^\\]|\\.)*\\\]|\\\((?:[^\\]|\\.)*\\\)|\\begin\{(?:[^\\]|\\.)*\\end\{[^}]+\})/gs;
+  let lastIndex = 0;
+  let match;
+  while ((match = mathRegex.exec(source)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({ type: "text", content: source.slice(lastIndex, match.index) });
+    }
+    const raw = match[0];
+    if (raw.startsWith("$$")) {
+      segments.push({ type: "display", content: raw.slice(2, -2).trim() });
+    } else if (raw.startsWith("\\[")) {
+      segments.push({ type: "display", content: raw.slice(2, -2).trim() });
+    } else if (raw.startsWith("\\begin")) {
+      segments.push({ type: "display", content: raw });
+    } else if (raw.startsWith("\\(")) {
+      segments.push({ type: "inline", content: raw.slice(2, -2).trim() });
+    } else if (raw.startsWith("$")) {
+      segments.push({ type: "inline", content: raw.slice(1, -1).trim() });
+    }
+    lastIndex = match.index + raw.length;
+  }
+  if (lastIndex < source.length) {
+    segments.push({ type: "text", content: source.slice(lastIndex) });
+  }
+  return segments;
+}
+function MathView({ content, className }) {
+  useEffect6(() => {
+    injectStylesheet(KATEX_CSS_URL, KATEX_CSS_ID);
   }, []);
-  return React6.createElement(
-    CsvRoot,
-    { className },
-    React6.createElement(
-      FilterToolbar,
-      null,
-      React6.createElement(TextField2, {
-        size: "small",
-        placeholder: "Filter rows...",
-        value: filter,
-        onChange: (e) => {
-          setFilter(e.target.value);
-          setPage(0);
-        },
-        sx: { minWidth: 200 }
-      })
-    ),
-    React6.createElement(
-      TableContainer,
-      { sx: { border: 1, borderColor: "divider", borderRadius: 1 } },
-      React6.createElement(
-        MuiTable2,
-        { size: "small", stickyHeader: true },
-        React6.createElement(
-          TableHead2,
-          null,
-          React6.createElement(
-            TableRow2,
-            null,
-            headers.map(
-              (header, i) => React6.createElement(
-                StyledHeaderCell,
-                { key: i },
-                React6.createElement(
-                  TableSortLabel,
-                  {
-                    active: sortCol === i,
-                    direction: sortCol === i ? sortDir : "asc",
-                    onClick: () => handleSort(i)
-                  },
-                  header
-                )
-              )
-            )
-          )
-        ),
-        React6.createElement(
-          TableBody2,
-          null,
-          pageRows.map(
-            (row, ri) => React6.createElement(
-              TableRow2,
-              { key: ri, hover: true },
-              row.map((cell, ci) => React6.createElement(TableCell2, { key: ci }, cell))
-            )
-          )
-        )
-      )
-    ),
-    sortedRows.length > rowsPerPage && React6.createElement(TablePagination, {
-      count: sortedRows.length,
-      page,
-      rowsPerPage,
-      onPageChange: handleChangePage,
-      onRowsPerPageChange: handleChangeRowsPerPage,
-      rowsPerPageOptions: [10, 25, 50, 100]
-    })
-  );
+  const katexMod = useLazyModule(lazyKatex);
+  const segments = useMemo6(() => parseMathContent(content), [content]);
+  const renderToString = katexMod?.default?.renderToString ?? katexMod?.renderToString;
+  if (!renderToString) {
+    return React8.createElement(
+      MathRoot,
+      { className },
+      React8.createElement("pre", { style: { fontFamily: "monospace", whiteSpace: "pre-wrap" } }, content)
+    );
+  }
+  const elements = segments.map((seg, i) => {
+    if (seg.type === "text") {
+      return React8.createElement("span", { key: i }, seg.content);
+    }
+    try {
+      const html = renderToString(seg.content, {
+        displayMode: seg.type === "display",
+        throwOnError: false
+      });
+      if (seg.type === "display") {
+        return React8.createElement(MathDisplay, {
+          key: i,
+          dangerouslySetInnerHTML: { __html: html }
+        });
+      }
+      return React8.createElement(MathInline, {
+        key: i,
+        dangerouslySetInnerHTML: { __html: html }
+      });
+    } catch (err) {
+      return React8.createElement(
+        Alert5,
+        { key: i, severity: "error", sx: { my: 1 } },
+        `LaTeX error: ${err instanceof Error ? err.message : String(err)}
+Source: ${seg.content}`
+      );
+    }
+  });
+  return React8.createElement(MathRoot, { className }, ...elements);
 }
-var CsvRenderer = class {
-  type = "csv";
-  priority = 10;
+lazyKatex.load().catch(() => {
+});
+var MathRenderer = class {
+  type = "math";
+  priority = 40;
   canHandle(content) {
-    const lines = content.trim().split("\n").slice(0, 5);
-    if (lines.length < 2) return false;
-    for (const delim of [",", "	", ";"]) {
-      const counts = lines.map((line) => line.split(delim).length);
-      if (counts[0] > 1 && counts.every((c) => c === counts[0])) return true;
-    }
-    return false;
+    return isMath(content);
   }
   render(content, options) {
-    const pageSize = options?.rendererOptions?.["pageSize"];
-    return React6.createElement(CsvTableView, {
+    return React8.createElement(MathView, {
       content,
-      className: options?.className ?? "fmcp-csv-table",
-      pageSize
+      className: options?.className ?? "fmcp-math-content"
     });
   }
-};
-var csvRenderer = new CsvRenderer();
-
-// libs/ui/src/renderer/image/index.ts
-import React7, { useState as useState6, useCallback as useCallback3, useEffect as useEffect4 } from "react";
-import Box6 from "@mui/material/Box";
-import Skeleton from "@mui/material/Skeleton";
-import Alert2 from "@mui/material/Alert";
-import Typography3 from "@mui/material/Typography";
-import { styled as styled5 } from "@mui/material/styles";
-var IMAGE_DATA_URI = /^data:image\/(?:png|jpeg|jpg|gif|webp|svg\+xml|avif)[;,]/;
-var IMAGE_URL = /^https?:\/\/[^?#\s]+\.(?:png|jpe?g|gif|webp|svg|avif|ico)(?:\?[^#\s]*)?$/i;
-var IMAGE_SERVICE_URL = /^https?:\/\/(?:picsum\.photos|images\.unsplash\.com|i\.imgur\.com|placekitten\.com|via\.placeholder\.com)\//i;
-function isImage(content) {
-  const trimmed = content.trim();
-  return IMAGE_DATA_URI.test(trimmed) || IMAGE_URL.test(trimmed) || IMAGE_SERVICE_URL.test(trimmed);
-}
-var ImageRoot = styled5(Box6, {
-  name: "FrontMcpImage",
-  slot: "Root"
-})({
-  display: "inline-block",
-  position: "relative",
-  maxWidth: "100%"
+};
+var mathRenderer = new MathRenderer();
+
+// libs/ui/src/renderer/mdx/index.ts
+import Box8 from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import { styled as styled8 } from "@mui/material/styles";
+import MuiTable2 from "@mui/material/Table";
+import TableBody2 from "@mui/material/TableBody";
+import TableCell2 from "@mui/material/TableCell";
+import TableHead2 from "@mui/material/TableHead";
+import TableRow2 from "@mui/material/TableRow";
+import Typography5 from "@mui/material/Typography";
+import React9, { useMemo as useMemo7 } from "react";
+var lazyReactMarkdown = createLazyImport(
+  "react-markdown",
+  async () => {
+    const mod = await runtimeImportWithFallback(
+      "react-markdown",
+      esmShUrl("react-markdown@9", { external: ["react", "react-dom"] })
+    );
+    return mod;
+  }
+);
+var lazyRemarkGfm = createLazyImport("remark-gfm", async () => {
+  const mod = await runtimeImportWithFallback("remark-gfm", esmShUrl("remark-gfm@4"));
+  return mod;
 });
-var StyledImage = styled5("img", {
-  name: "FrontMcpImage",
-  slot: "Image"
-})({
-  maxWidth: "100%",
-  height: "auto",
-  display: "block",
-  cursor: "pointer",
-  borderRadius: "inherit"
+var lazyRehypeHighlight = createLazyImport("rehype-highlight", async () => {
+  const mod = await runtimeImportWithFallback("rehype-highlight", esmShUrl("rehype-highlight@7"));
+  return mod;
 });
-var LightboxBackdrop = styled5(Box6, {
-  name: "FrontMcpImage",
-  slot: "Lightbox"
-})({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: 16
+var lazyRehypeRaw = createLazyImport("rehype-raw", async () => {
+  const mod = await runtimeImportWithFallback("rehype-raw", esmShUrl("rehype-raw@7"));
+  return mod;
 });
-var LightboxImage = styled5("img")({
-  maxWidth: "90vw",
-  maxHeight: "90vh",
-  objectFit: "contain",
-  borderRadius: 8
+var MarkdownRoot = styled8(Box8, {
+  name: "FrontMcpMarkdown",
+  slot: "Root"
+})(() => ({
+  lineHeight: 1.7,
+  "& > *:first-of-type": { marginTop: 0 },
+  "& > *:last-child": { marginBottom: 0 },
+  "& img": { maxWidth: "100%", height: "auto" }
+}));
+var CodeBlock = styled8("pre", {
+  name: "FrontMcpMarkdown",
+  slot: "Code"
+})(({ theme }) => {
+  const monoFont = String(
+    theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Roboto Mono", monospace'
+  );
+  return {
+    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[100],
+    padding: theme.spacing(2),
+    borderRadius: Number(theme.shape.borderRadius),
+    overflow: "auto",
+    fontFamily: monoFont,
+    fontSize: "0.875rem",
+    "& code": {
+      backgroundColor: "transparent",
+      padding: 0,
+      fontSize: "inherit",
+      fontFamily: "inherit"
+    }
+  };
 });
-function LightboxOverlay({ src, alt, onClose }) {
-  return React7.createElement(
-    LightboxBackdrop,
-    {
-      onClick: onClose,
-      sx: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 1300,
-        bgcolor: "rgba(0,0,0,0.8)"
-      }
-    },
-    React7.createElement(LightboxImage, { src, alt })
+var InlineCode = styled8("code")(({ theme }) => {
+  const monoFont = String(
+    theme.typography["monoFontFamily"] ?? '"SF Mono", "Fira Code", "Roboto Mono", monospace'
   );
+  return {
+    backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200],
+    padding: "2px 6px",
+    borderRadius: Number(theme.shape.borderRadius) / 2,
+    fontFamily: monoFont,
+    fontSize: "0.85em"
+  };
+});
+var Blockquote = styled8("blockquote", {
+  name: "FrontMcpMarkdown",
+  slot: "Blockquote"
+})(({ theme }) => ({
+  borderLeft: `4px solid ${theme.palette.primary.main}`,
+  margin: theme.spacing(2, 0),
+  padding: theme.spacing(1, 2),
+  color: theme.palette.text.secondary,
+  "& > p": { margin: 0 }
+}));
+function createMuiComponents() {
+  return {
+    h1: (props) => React9.createElement(Typography5, { ...props, variant: "h4", gutterBottom: true }),
+    h2: (props) => React9.createElement(Typography5, { ...props, variant: "h5", gutterBottom: true }),
+    h3: (props) => React9.createElement(Typography5, { ...props, variant: "h6", gutterBottom: true }),
+    h4: (props) => React9.createElement(Typography5, { ...props, variant: "subtitle1", gutterBottom: true, fontWeight: 600 }),
+    h5: (props) => React9.createElement(Typography5, { ...props, variant: "subtitle2", gutterBottom: true }),
+    h6: (props) => React9.createElement(Typography5, { ...props, variant: "subtitle2", gutterBottom: true }),
+    p: (props) => React9.createElement(Typography5, { ...props, variant: "body1", paragraph: true }),
+    a: (props) => React9.createElement(Link, { ...props, target: "_blank", rel: "noopener noreferrer" }),
+    blockquote: (props) => React9.createElement(Blockquote, props),
+    pre: (props) => React9.createElement(CodeBlock, props),
+    code: ({ inline, className, children, ...rest }) => {
+      if (inline) return React9.createElement(InlineCode, rest, children);
+      return React9.createElement("code", { className, ...rest }, children);
+    },
+    table: (props) => React9.createElement(MuiTable2, { ...props, size: "small" }),
+    thead: (props) => React9.createElement(TableHead2, props),
+    tbody: (props) => React9.createElement(TableBody2, props),
+    tr: (props) => React9.createElement(TableRow2, { ...props, hover: true }),
+    th: (props) => React9.createElement(TableCell2, { ...props, sx: { fontWeight: 600 } }),
+    td: (props) => React9.createElement(TableCell2, props)
+  };
 }
-function ImageView({ src, alt, caption, className }) {
-  const [loaded, setLoaded] = useState6(false);
-  const [error, setError] = useState6(false);
-  const [lightboxOpen, setLightboxOpen] = useState6(false);
-  useEffect4(() => {
-    setLoaded(false);
-    setError(false);
-    setLightboxOpen(false);
-  }, [src]);
-  const handleLoad = useCallback3(() => setLoaded(true), []);
-  const handleError = useCallback3(() => {
-    setLoaded(true);
-    setError(true);
-  }, []);
-  if (error) {
-    return React7.createElement(Alert2, { severity: "error" }, `Failed to load image: ${src}`);
+function MarkdownView({ content, className }) {
+  const components = useMemo7(() => createMuiComponents(), []);
+  const ReactMarkdownMod = useLazyModule(lazyReactMarkdown);
+  const remarkGfmMod = lazyRemarkGfm.get();
+  const rehypeHighlightMod = lazyRehypeHighlight.get();
+  const rehypeRawMod = lazyRehypeRaw.get();
+  if (ReactMarkdownMod) {
+    const ReactMarkdown = ReactMarkdownMod.default;
+    const remarkPlugins = [];
+    const rehypePlugins = [];
+    if (remarkGfmMod) remarkPlugins.push(remarkGfmMod.default);
+    if (rehypeHighlightMod) rehypePlugins.push(rehypeHighlightMod.default);
+    if (rehypeRawMod) rehypePlugins.push(rehypeRawMod.default);
+    return React9.createElement(
+      MarkdownRoot,
+      { className },
+      React9.createElement(ReactMarkdown, {
+        children: content,
+        remarkPlugins,
+        rehypePlugins,
+        components
+      })
+    );
   }
-  return React7.createElement(
-    ImageRoot,
-    { className },
-    !loaded && React7.createElement(Skeleton, { variant: "rectangular", width: 400, height: 300 }),
-    React7.createElement(StyledImage, {
-      src,
-      alt: alt ?? "Image",
-      onLoad: handleLoad,
-      onError: handleError,
-      onClick: () => setLightboxOpen(true),
-      style: loaded ? void 0 : { display: "none" }
-    }),
-    caption && React7.createElement(
-      Typography3,
-      { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block", textAlign: "center" } },
-      caption
-    ),
-    lightboxOpen && React7.createElement(LightboxOverlay, {
-      src,
-      alt: alt ?? "Image",
-      onClose: () => setLightboxOpen(false)
-    })
-  );
+  return React9.createElement(MarkdownRoot, { className }, ...renderFallback(content));
 }
-var ImageRenderer = class {
-  type = "image";
-  priority = 30;
+function renderFallback(content) {
+  const lines = content.split("\n");
+  const elements = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith("# ")) {
+      elements.push(React9.createElement(Typography5, { key: i, variant: "h4", gutterBottom: true }, line.slice(2)));
+    } else if (line.startsWith("## ")) {
+      elements.push(React9.createElement(Typography5, { key: i, variant: "h5", gutterBottom: true }, line.slice(3)));
+    } else if (line.startsWith("### ")) {
+      elements.push(React9.createElement(Typography5, { key: i, variant: "h6", gutterBottom: true }, line.slice(4)));
+    } else if (line.startsWith("- ") || line.startsWith("* ")) {
+      elements.push(React9.createElement("li", { key: i }, line.slice(2)));
+    } else if (line.startsWith("**") && line.endsWith("**")) {
+      elements.push(
+        React9.createElement(Typography5, { key: i, variant: "body1", sx: { fontWeight: 700 } }, line.slice(2, -2))
+      );
+    } else if (line.trim()) {
+      elements.push(React9.createElement(Typography5, { key: i, variant: "body1", sx: { mb: 2 } }, line));
+    }
+  }
+  return elements;
+}
+lazyReactMarkdown.load().catch(() => {
+});
+lazyRemarkGfm.load().catch(() => {
+});
+lazyRehypeHighlight.load().catch(() => {
+});
+lazyRehypeRaw.load().catch(() => {
+});
+var MdxRenderer = class {
+  type = "mdx";
+  priority = 5;
   canHandle(content) {
-    return isImage(content);
+    return /^---\s*\n/.test(content) || /import\s+/.test(content) || /<[A-Z]/.test(content) || /^#{1,6}\s+\S/m.test(content) || /^\s*[-*+]\s+\S/m.test(content);
   }
   render(content, options) {
-    const caption = options?.rendererOptions?.["caption"];
-    return React7.createElement(ImageView, {
-      src: content.trim(),
-      alt: options?.toolName ?? "Image",
-      caption,
-      className: options?.className ?? "fmcp-image-content"
+    return React9.createElement(MarkdownView, {
+      content,
+      className: options?.className ?? "fmcp-mdx-content"
     });
   }
 };
-var imageRenderer = new ImageRenderer();
+var mdxRenderer = new MdxRenderer();
 
-// libs/ui/src/renderer/charts/index.ts
-import React8, { useMemo as useMemo6 } from "react";
-import Box7 from "@mui/material/Box";
-import Alert3 from "@mui/material/Alert";
-import Typography4 from "@mui/material/Typography";
-import { styled as styled6 } from "@mui/material/styles";
-var CHART_TYPE_RE2 = /"type"\s*:\s*"(?:bar|line|area|pie|scatter|radar|composed)"/;
-function isChart(content) {
+// libs/ui/src/renderer/media/index.ts
+import Box9 from "@mui/material/Box";
+import Paper2 from "@mui/material/Paper";
+import { styled as styled9 } from "@mui/material/styles";
+import React10 from "react";
+var VIDEO_PATTERNS2 = [
+  /^https?:\/\/[^?#\s]+\.(?:mp4|webm|ogg|mov)(?:\?[^#\s]*)?$/i,
+  /^https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be|vimeo\.com)\//i,
+  /^data:video\//
+];
+var AUDIO_PATTERNS2 = [
+  /^https?:\/\/[^?#\s]+\.(?:mp3|wav|ogg|aac|flac|m4a)(?:\?[^#\s]*)?$/i,
+  /^https?:\/\/(?:www\.)?soundcloud\.com\//i,
+  /^data:audio\//
+];
+function isVideo(content) {
   const trimmed = content.trim();
-  if (trimmed.charCodeAt(0) !== 123) return false;
-  return CHART_TYPE_RE2.test(trimmed) && trimmed.includes('"data"');
+  return VIDEO_PATTERNS2.some((p) => p.test(trimmed));
 }
-var lazyRecharts = createLazyImport("recharts", async () => {
-  const mod = await runtimeImportWithFallback("recharts", esmShUrl("recharts@2", { external: ["react", "react-dom"] }));
+function isAudio(content) {
+  const trimmed = content.trim();
+  return AUDIO_PATTERNS2.some((p) => p.test(trimmed));
+}
+function isMedia(content) {
+  return isVideo(content) || isAudio(content);
+}
+var lazyReactPlayer = createLazyImport("react-player", async () => {
+  const mod = await runtimeImportWithFallback(
+    "react-player",
+    esmShUrl("react-player@2", { external: ["react", "react-dom"] })
+  );
   return mod;
 });
-var ChartRoot = styled6(Box7, {
-  name: "FrontMcpChart",
+var MediaRoot = styled9(Paper2, {
+  name: "FrontMcpMedia",
   slot: "Root"
 })(({ theme }) => ({
-  width: "100%",
-  padding: theme.spacing(2)
+  overflow: "hidden",
+  borderRadius: theme.shape.borderRadius
 }));
-function ChartView({ config, className }) {
-  const themeValues = useRendererTheme();
-  const recharts = useLazyModule(lazyRecharts);
-  const colors = useMemo6(() => config.colors ?? themeValues.seriesColors, [config.colors, themeValues.seriesColors]);
-  if (!recharts) {
-    return React8.createElement(Alert3, { severity: "info" }, "Loading chart library...");
+var VideoWrapper = styled9(Box9)({
+  position: "relative",
+  paddingTop: "56.25%",
+  // 16:9 aspect ratio
+  "& > *": {
+    position: "absolute",
+    top: 0,
+    left: 0
   }
-  const { ResponsiveContainer, Tooltip, Legend, CartesianGrid, XAxis, YAxis } = recharts;
-  const height = config.height ?? 400;
-  const xKey = config.xKey ?? "name";
-  const yKeys = config.yKeys ?? Object.keys(config.data?.[0] ?? {}).filter((k) => k !== xKey);
-  const chartContent = renderChartType(
-    recharts,
-    config.type,
-    config.data,
-    xKey,
-    yKeys,
-    colors,
-    themeValues.borderRadius
-  );
-  return React8.createElement(
-    ChartRoot,
-    { className },
-    config.title && React8.createElement(
-      Typography4,
-      { variant: "subtitle1", gutterBottom: true, sx: { fontWeight: 600, textAlign: "center" } },
-      config.title
-    ),
-    React8.createElement(ResponsiveContainer, { width: "100%", height }, chartContent)
-  );
-}
-function renderChartType(rc, type, data, xKey, yKeys, colors, borderRadius) {
-  const commonProps = { data };
-  const grid = React8.createElement(rc.CartesianGrid, { strokeDasharray: "3 3", opacity: 0.3 });
-  const xAxis = React8.createElement(rc.XAxis, { dataKey: xKey });
-  const yAxis = React8.createElement(rc.YAxis);
-  const tooltip = React8.createElement(rc.Tooltip, { contentStyle: { borderRadius } });
-  const legend = React8.createElement(rc.Legend);
-  switch (type) {
-    case "bar":
-      return React8.createElement(
-        rc.BarChart,
-        commonProps,
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => React8.createElement(rc.Bar, {
-            key,
-            dataKey: key,
-            fill: colors[i % colors.length],
-            radius: [borderRadius, borderRadius, 0, 0]
-          })
-        )
-      );
-    case "line":
-      return React8.createElement(
-        rc.LineChart,
-        commonProps,
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => React8.createElement(rc.Line, {
-            key,
-            type: "monotone",
-            dataKey: key,
-            stroke: colors[i % colors.length],
-            strokeWidth: 2
-          })
-        )
-      );
-    case "area":
-      return React8.createElement(
-        rc.AreaChart,
-        commonProps,
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => React8.createElement(rc.Area, {
-            key,
-            type: "monotone",
-            dataKey: key,
-            stroke: colors[i % colors.length],
-            fill: colors[i % colors.length],
-            fillOpacity: 0.3
-          })
-        )
-      );
-    case "pie":
-      return React8.createElement(
-        rc.PieChart,
-        {},
-        tooltip,
-        legend,
-        React8.createElement(
-          rc.Pie,
-          { data, dataKey: yKeys[0] ?? "value", nameKey: xKey, cx: "50%", cy: "50%", outerRadius: "80%", label: true },
-          ...data.map((_, i) => React8.createElement(rc.Cell, { key: i, fill: colors[i % colors.length] }))
-        )
-      );
-    case "scatter":
-      return React8.createElement(
-        rc.ScatterChart,
-        {},
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => React8.createElement(rc.Scatter, { key, name: key, dataKey: key, data, fill: colors[i % colors.length] })
-        )
-      );
-    case "radar":
-      return React8.createElement(
-        rc.RadarChart,
-        { cx: "50%", cy: "50%", outerRadius: "80%", data },
-        React8.createElement(rc.PolarGrid),
-        React8.createElement(rc.PolarAngleAxis, { dataKey: xKey }),
-        React8.createElement(rc.PolarRadiusAxis),
-        tooltip,
-        legend,
-        ...yKeys.map(
-          (key, i) => React8.createElement(rc.Radar, {
-            key,
-            name: key,
-            dataKey: key,
-            stroke: colors[i % colors.length],
-            fill: colors[i % colors.length],
-            fillOpacity: 0.3
-          })
+});
+var AudioWrapper = styled9(Box9)(({ theme }) => ({
+  padding: theme.spacing(1),
+  "& > *": {
+    width: "100%"
+  }
+}));
+function MediaView({ url, isAudioContent, className }) {
+  const reactPlayerMod = useLazyModule(lazyReactPlayer);
+  if (!reactPlayerMod) {
+    if (isAudioContent) {
+      return React10.createElement(
+        MediaRoot,
+        { variant: "outlined", className },
+        React10.createElement(
+          AudioWrapper,
+          null,
+          React10.createElement("audio", { controls: true, src: url, style: { width: "100%" } })
         )
       );
-    case "composed":
-      return React8.createElement(
-        rc.ComposedChart,
-        commonProps,
-        grid,
-        xAxis,
-        yAxis,
-        tooltip,
-        legend,
-        ...yKeys.map((key, i) => {
-          if (i % 2 === 0) {
-            return React8.createElement(rc.Bar, {
-              key,
-              dataKey: key,
-              fill: colors[i % colors.length],
-              radius: [borderRadius, borderRadius, 0, 0]
-            });
-          }
-          return React8.createElement(rc.Line, {
-            key,
-            type: "monotone",
-            dataKey: key,
-            stroke: colors[i % colors.length],
-            strokeWidth: 2
-          });
+    }
+    return React10.createElement(
+      MediaRoot,
+      { variant: "outlined", className },
+      React10.createElement(
+        VideoWrapper,
+        null,
+        React10.createElement("video", {
+          controls: true,
+          src: url,
+          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }
         })
-      );
-    default:
-      return React8.createElement(rc.BarChart, commonProps, grid, xAxis, yAxis, tooltip, legend);
+      )
+    );
+  }
+  const ReactPlayer = reactPlayerMod.default;
+  if (isAudioContent) {
+    return React10.createElement(
+      MediaRoot,
+      { variant: "outlined", className },
+      React10.createElement(
+        AudioWrapper,
+        null,
+        React10.createElement(ReactPlayer, {
+          url,
+          controls: true,
+          width: "100%",
+          height: 50
+        })
+      )
+    );
   }
+  return React10.createElement(
+    MediaRoot,
+    { variant: "outlined", className },
+    React10.createElement(
+      VideoWrapper,
+      null,
+      React10.createElement(ReactPlayer, {
+        url,
+        controls: true,
+        width: "100%",
+        height: "100%"
+      })
+    )
+  );
 }
-lazyRecharts.load().catch(() => {
+lazyReactPlayer.load().catch(() => {
 });
-var ChartsRenderer = class {
-  type = "chart";
-  priority = 80;
+var VideoRenderer = class {
+  type = "video";
+  priority = 20;
   canHandle(content) {
-    return isChart(content);
+    return isVideo(content);
   }
   render(content, options) {
-    try {
-      const config = JSON.parse(content);
-      return React8.createElement(ChartView, {
-        config,
-        className: options?.className ?? "fmcp-chart-content"
-      });
-    } catch {
-      return React8.createElement(Alert3, { severity: "error" }, "Invalid chart JSON");
-    }
+    return React10.createElement(MediaView, {
+      url: content.trim(),
+      isAudioContent: false,
+      className: options?.className ?? "fmcp-media-content"
+    });
   }
 };
-var chartsRenderer = new ChartsRenderer();
+var AudioRenderer = class {
+  type = "audio";
+  priority = 20;
+  canHandle(content) {
+    return isAudio(content);
+  }
+  render(content, options) {
+    return React10.createElement(MediaView, {
+      url: content.trim(),
+      isAudioContent: true,
+      className: options?.className ?? "fmcp-media-content"
+    });
+  }
+};
+var videoRenderer = new VideoRenderer();
+var audioRenderer = new AudioRenderer();
 
 // libs/ui/src/renderer/mermaid/index.ts
-import React9, { useEffect as useEffect5, useRef, useState as useState7, useId } from "react";
-import Box8 from "@mui/material/Box";
-import Alert4 from "@mui/material/Alert";
-import { styled as styled7 } from "@mui/material/styles";
+import Alert6 from "@mui/material/Alert";
+import Box10 from "@mui/material/Box";
+import { styled as styled10 } from "@mui/material/styles";
+import React11, { useEffect as useEffect7, useId, useRef, useState as useState5 } from "react";
 var MERMAID_PATTERN2 = /^\s*(?:graph|sequenceDiagram|classDiagram|stateDiagram|flowchart|erDiagram|gantt|pie|journey|gitGraph)\b/;
 function isMermaid(content) {
   return MERMAID_PATTERN2.test(content.trim());
@@ -1457,7 +1633,7 @@ var lazyMermaid = createLazyImport("mermaid", async () => {
   const mermaid = mod["default"] ?? mod;
   return mermaid;
 });
-var MermaidRoot = styled7(Box8, {
+var MermaidRoot = styled10(Box10, {
   name: "FrontMcpMermaid",
   slot: "Root"
 })(({ theme }) => ({
@@ -1487,11 +1663,11 @@ function getMermaidThemeVariables(tv) {
 }
 function MermaidView({ definition, className }) {
   const containerRef = useRef(null);
-  const [svg, setSvg] = useState7(null);
-  const [error, setError] = useState7(null);
+  const [svg, setSvg] = useState5(null);
+  const [error, setError] = useState5(null);
   const themeValues = useRendererTheme();
   const uniqueId = useId().replace(/:/g, "-");
-  useEffect5(() => {
+  useEffect7(() => {
     let cancelled = false;
     async function renderDiagram() {
       try {
@@ -1520,341 +1696,75 @@ function MermaidView({ definition, className }) {
     };
   }, [definition, themeValues, uniqueId]);
   if (error) {
-    return React9.createElement(
-      Box8,
-      { className },
-      React9.createElement(Alert4, { severity: "error", sx: { mb: 1 } }, `Mermaid parse error: ${error}`),
-      React9.createElement(
-        "pre",
-        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
-        definition
-      )
-    );
-  }
-  if (!svg) {
-    return React9.createElement(
-      MermaidRoot,
-      { className },
-      React9.createElement(Box8, { sx: { color: "text.secondary" } }, "Rendering diagram...")
-    );
-  }
-  return React9.createElement(MermaidRoot, {
-    ref: containerRef,
-    className,
-    dangerouslySetInnerHTML: { __html: svg }
-  });
-}
-lazyMermaid.load().catch(() => {
-});
-var MermaidRenderer = class {
-  type = "mermaid";
-  priority = 50;
-  canHandle(content) {
-    return isMermaid(content);
-  }
-  render(content, options) {
-    return React9.createElement(MermaidView, {
-      definition: content.trim(),
-      className: options?.className ?? "fmcp-mermaid-content"
-    });
-  }
-};
-var mermaidRenderer = new MermaidRenderer();
-
-// libs/ui/src/renderer/flow/index.ts
-import React10, { useEffect as useEffect6, useMemo as useMemo7 } from "react";
-import Box9 from "@mui/material/Box";
-import Alert5 from "@mui/material/Alert";
-import Typography5 from "@mui/material/Typography";
-import { styled as styled8 } from "@mui/material/styles";
-var XYFLOW_CSS_URL = "https://esm.sh/@xyflow/react@12/dist/style.css";
-var XYFLOW_CSS_ID = "fmcp-xyflow-css";
-function isFlow(content) {
-  const trimmed = content.trim();
-  if (trimmed.charCodeAt(0) !== 123) return false;
-  return trimmed.includes('"nodes"') && trimmed.includes('"edges"');
-}
-var lazyXYFlow = createLazyImport("@xyflow/react", async () => {
-  const mod = await runtimeImportWithFallback(
-    "@xyflow/react",
-    esmShUrl("@xyflow/react@12", { external: ["react", "react-dom"] })
-  );
-  return mod;
-});
-var FlowRoot = styled8(Box9, {
-  name: "FrontMcpFlow",
-  slot: "Root"
-})(({ theme }) => ({
-  width: "100%",
-  borderRadius: theme.shape.borderRadius,
-  overflow: "hidden",
-  border: `1px solid ${theme.palette.divider}`
-}));
-function FlowView({ config, className }) {
-  useEffect6(() => {
-    injectStylesheet(XYFLOW_CSS_URL, XYFLOW_CSS_ID);
-  }, []);
-  const themeValues = useRendererTheme();
-  const xyflow = useLazyModule(lazyXYFlow);
-  const height = config.height ?? 500;
-  const styledNodes = useMemo7(() => {
-    return config.nodes.map((node) => ({
-      ...node,
-      style: {
-        background: themeValues.paper,
-        color: themeValues.textPrimary,
-        border: `1px solid ${themeValues.divider}`,
-        borderRadius: themeValues.borderRadius,
-        padding: 8,
-        fontSize: themeValues.fontSize,
-        fontFamily: themeValues.fontFamily,
-        ...node.style
-      }
-    }));
-  }, [config.nodes, themeValues]);
-  const styledEdges = useMemo7(() => {
-    return config.edges.map((edge, i) => ({
-      ...edge,
-      style: {
-        stroke: themeValues.seriesColors[i % themeValues.seriesColors.length],
-        strokeWidth: 2,
-        ...edge.style
-      }
-    }));
-  }, [config.edges, themeValues]);
-  if (!xyflow) {
-    return React10.createElement(Alert5, { severity: "info" }, "Loading flow diagram library...");
-  }
-  const { ReactFlow, Controls, MiniMap, Background } = xyflow;
-  return React10.createElement(
-    FlowRoot,
-    { className },
-    config.title && React10.createElement(
-      Typography5,
-      { variant: "subtitle1", sx: { fontWeight: 600, p: 1.5, borderBottom: 1, borderColor: "divider" } },
-      config.title
-    ),
-    React10.createElement(
-      Box9,
-      { sx: { height } },
-      React10.createElement(
-        ReactFlow,
-        {
-          nodes: styledNodes,
-          edges: styledEdges,
-          fitView: config.fitView !== false,
-          proOptions: { hideAttribution: true }
-        },
-        React10.createElement(Controls, {
-          style: {
-            backgroundColor: themeValues.paper,
-            borderRadius: themeValues.borderRadius,
-            border: `1px solid ${themeValues.divider}`
-          }
-        }),
-        React10.createElement(MiniMap, {
-          style: {
-            backgroundColor: themeValues.background,
-            borderRadius: themeValues.borderRadius
-          },
-          nodeColor: themeValues.primary
-        }),
-        Background && React10.createElement(Background, {
-          color: themeValues.divider,
-          gap: 16
-        })
-      )
-    )
-  );
-}
-lazyXYFlow.load().catch(() => {
-});
-var FlowRenderer = class {
-  type = "flow";
-  priority = 70;
-  canHandle(content) {
-    return isFlow(content);
-  }
-  render(content, options) {
-    try {
-      const config = JSON.parse(content);
-      return React10.createElement(FlowView, {
-        config,
-        className: options?.className ?? "fmcp-flow-content"
-      });
-    } catch {
-      return React10.createElement(Alert5, { severity: "error" }, "Invalid flow JSON");
-    }
-  }
-};
-var flowRenderer = new FlowRenderer();
-
-// libs/ui/src/renderer/math/index.ts
-import React11, { useEffect as useEffect7, useMemo as useMemo8 } from "react";
-import Box10 from "@mui/material/Box";
-import Alert6 from "@mui/material/Alert";
-import { styled as styled9 } from "@mui/material/styles";
-var KATEX_CSS_URL = "https://esm.sh/katex@0.16.11/dist/katex.min.css";
-var KATEX_CSS_ID = "fmcp-katex-css";
-var MATH_DISPLAY = /\$\$(?:[^$]|\$(?!\$))+\$\$/s;
-var MATH_INLINE = /\$[^$\n]+?\$/;
-var MATH_BRACKET_DISPLAY = /\\\[(?:[^\\]|\\.)*\\\]/s;
-var MATH_PAREN_INLINE = /\\\((?:[^\\]|\\.)*\\\)/s;
-var MATH_BEGIN = /\\begin\{(?:equation|align|gather|matrix|pmatrix|bmatrix|cases)\}/;
-function isMath(content) {
-  const trimmed = content.trim();
-  return MATH_DISPLAY.test(trimmed) || MATH_INLINE.test(trimmed) || MATH_BRACKET_DISPLAY.test(trimmed) || MATH_PAREN_INLINE.test(trimmed) || MATH_BEGIN.test(trimmed);
-}
-var lazyKatex = createLazyImport("katex", async () => {
-  const mod = await runtimeImportWithFallback("katex", esmShUrl("katex@0.16"));
-  return mod;
-});
-var MathRoot = styled9(Box10, {
-  name: "FrontMcpMath",
-  slot: "Root"
-})(({ theme }) => ({
-  color: theme.palette.text.primary,
-  "& .katex-display": {
-    margin: theme.spacing(2, 0),
-    textAlign: "center"
-  }
-}));
-var MathDisplay = styled9(Box10, {
-  name: "FrontMcpMath",
-  slot: "Display"
-})(({ theme }) => ({
-  display: "block",
-  textAlign: "center",
-  margin: theme.spacing(2, 0),
-  fontSize: "1.2em",
-  overflow: "auto"
-}));
-var MathInline = styled9("span", {
-  name: "FrontMcpMath",
-  slot: "Inline"
-})({
-  display: "inline"
-});
-function parseMathContent(source) {
-  const segments = [];
-  const mathRegex = /(\$\$(?:[^$]|\$(?!\$))+\$\$|\$[^$\n]+?\$|\\\[(?:[^\\]|\\.)*\\\]|\\\((?:[^\\]|\\.)*\\\)|\\begin\{(?:[^\\]|\\.)*\\end\{[^}]+\})/gs;
-  let lastIndex = 0;
-  let match;
-  while ((match = mathRegex.exec(source)) !== null) {
-    if (match.index > lastIndex) {
-      segments.push({ type: "text", content: source.slice(lastIndex, match.index) });
-    }
-    const raw = match[0];
-    if (raw.startsWith("$$")) {
-      segments.push({ type: "display", content: raw.slice(2, -2).trim() });
-    } else if (raw.startsWith("\\[")) {
-      segments.push({ type: "display", content: raw.slice(2, -2).trim() });
-    } else if (raw.startsWith("\\begin")) {
-      segments.push({ type: "display", content: raw });
-    } else if (raw.startsWith("\\(")) {
-      segments.push({ type: "inline", content: raw.slice(2, -2).trim() });
-    } else if (raw.startsWith("$")) {
-      segments.push({ type: "inline", content: raw.slice(1, -1).trim() });
-    }
-    lastIndex = match.index + raw.length;
-  }
-  if (lastIndex < source.length) {
-    segments.push({ type: "text", content: source.slice(lastIndex) });
-  }
-  return segments;
-}
-function MathView({ content, className }) {
-  useEffect7(() => {
-    injectStylesheet(KATEX_CSS_URL, KATEX_CSS_ID);
-  }, []);
-  const katexMod = useLazyModule(lazyKatex);
-  const segments = useMemo8(() => parseMathContent(content), [content]);
-  const renderToString = katexMod?.default?.renderToString ?? katexMod?.renderToString;
-  if (!renderToString) {
-    return React11.createElement(
-      MathRoot,
-      { className },
-      React11.createElement("pre", { style: { fontFamily: "monospace", whiteSpace: "pre-wrap" } }, content)
-    );
-  }
-  const elements = segments.map((seg, i) => {
-    if (seg.type === "text") {
-      return React11.createElement("span", { key: i }, seg.content);
-    }
-    try {
-      const html = renderToString(seg.content, {
-        displayMode: seg.type === "display",
-        throwOnError: false
-      });
-      if (seg.type === "display") {
-        return React11.createElement(MathDisplay, {
-          key: i,
-          dangerouslySetInnerHTML: { __html: html }
-        });
-      }
-      return React11.createElement(MathInline, {
-        key: i,
-        dangerouslySetInnerHTML: { __html: html }
-      });
-    } catch (err) {
-      return React11.createElement(
-        Alert6,
-        { key: i, severity: "error", sx: { my: 1 } },
-        `LaTeX error: ${err instanceof Error ? err.message : String(err)}
-Source: ${seg.content}`
-      );
-    }
+    return React11.createElement(
+      Box10,
+      { className },
+      React11.createElement(Alert6, { severity: "error", sx: { mb: 1 } }, `Mermaid parse error: ${error}`),
+      React11.createElement(
+        "pre",
+        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
+        definition
+      )
+    );
+  }
+  if (!svg) {
+    return React11.createElement(
+      MermaidRoot,
+      { className },
+      React11.createElement(Box10, { sx: { color: "text.secondary" } }, "Rendering diagram...")
+    );
+  }
+  return React11.createElement(MermaidRoot, {
+    ref: containerRef,
+    className,
+    dangerouslySetInnerHTML: { __html: svg }
   });
-  return React11.createElement(MathRoot, { className }, ...elements);
 }
-lazyKatex.load().catch(() => {
+lazyMermaid.load().catch(() => {
 });
-var MathRenderer = class {
-  type = "math";
-  priority = 40;
+var MermaidRenderer = class {
+  type = "mermaid";
+  priority = 50;
   canHandle(content) {
-    return isMath(content);
+    return isMermaid(content);
   }
   render(content, options) {
-    return React11.createElement(MathView, {
-      content,
-      className: options?.className ?? "fmcp-math-content"
+    return React11.createElement(MermaidView, {
+      definition: content.trim(),
+      className: options?.className ?? "fmcp-mermaid-content"
     });
   }
 };
-var mathRenderer = new MathRenderer();
+var mermaidRenderer = new MermaidRenderer();
 
-// libs/ui/src/renderer/maps/index.ts
-import React12, { useEffect as useEffect8 } from "react";
+// libs/ui/src/renderer/pdf/index.ts
 import Box11 from "@mui/material/Box";
-import Alert7 from "@mui/material/Alert";
-import Paper from "@mui/material/Paper";
+import IconButton from "@mui/material/IconButton";
+import { styled as styled11 } from "@mui/material/styles";
+import TextField2 from "@mui/material/TextField";
 import Typography6 from "@mui/material/Typography";
-import { styled as styled10 } from "@mui/material/styles";
-var LEAFLET_CSS_URL = "https://esm.sh/leaflet@1.9.4/dist/leaflet.css";
-var LEAFLET_CSS_ID = "fmcp-leaflet-css";
-var DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-var DEFAULT_ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
-var GEOJSON_TYPE_RE2 = /"type"\s*:\s*"(?:FeatureCollection|Feature|Point|LineString|Polygon|MultiPoint|MultiLineString|MultiPolygon|GeometryCollection)"/;
-function isMap(content) {
-  const trimmed = content.trim();
-  if (trimmed.charCodeAt(0) === 123 && GEOJSON_TYPE_RE2.test(trimmed)) return true;
-  try {
-    const parsed = JSON.parse(trimmed);
-    return !!(parsed.center && Array.isArray(parsed.center) || parsed.markers && Array.isArray(parsed.markers) || parsed.geojson && typeof parsed.geojson === "object");
-  } catch {
-    return false;
-  }
-}
-var lazyReactLeaflet = createLazyImport("react-leaflet", async () => {
+import React12, { useCallback as useCallback3, useMemo as useMemo8, useState as useState6 } from "react";
+var lazyReactPdf = createLazyImport("react-pdf", async () => {
   const mod = await runtimeImportWithFallback(
-    "react-leaflet",
-    esmShUrl("react-leaflet@5", { external: ["react", "react-dom"] })
+    "react-pdf",
+    esmShUrl("react-pdf@9", { external: ["react", "react-dom"] })
   );
+  const pdfjs = mod["pdfjs"];
+  if (pdfjs?.GlobalWorkerOptions) {
+    pdfjs.GlobalWorkerOptions.workerSrc = `${ESM_SH_BASE}pdfjs-dist@${pdfjs.version ?? "4"}/build/pdf.worker.min.mjs?raw`;
+  }
   return mod;
 });
-var MapRoot = styled10(Box11, {
-  name: "FrontMcpMap",
+function toDataUri(content) {
+  if (content.startsWith("data:")) return content;
+  if (content.startsWith("%PDF-")) {
+    const base64 = typeof btoa === "function" ? btoa(content) : Buffer.from(content).toString("base64");
+    return `data:application/pdf;base64,${base64}`;
+  }
+  return `data:application/pdf;base64,${content}`;
+}
+var PdfRoot = styled11(Box11, {
+  name: "FrontMcpPdf",
   slot: "Root"
 })(({ theme }) => ({
   width: "100%",
@@ -1862,239 +1772,335 @@ var MapRoot = styled10(Box11, {
   overflow: "hidden",
   border: `1px solid ${theme.palette.divider}`
 }));
-function parseMapConfig(content) {
-  const parsed = JSON.parse(content);
-  if (parsed.type && [
-    "FeatureCollection",
-    "Feature",
-    "Point",
-    "LineString",
-    "Polygon",
-    "MultiPoint",
-    "MultiLineString",
-    "MultiPolygon",
-    "GeometryCollection"
-  ].includes(parsed.type)) {
-    return {
-      center: [0, 0],
-      zoom: 2,
-      geojson: parsed
-    };
-  }
-  return parsed;
-}
-function MapView({ config, className }) {
-  useEffect8(() => {
-    injectStylesheet(LEAFLET_CSS_URL, LEAFLET_CSS_ID);
+var Toolbar = styled11(Box11, {
+  name: "FrontMcpPdf",
+  slot: "Toolbar"
+})(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(1, 2),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50]
+}));
+var PageContainer = styled11(Box11, {
+  name: "FrontMcpPdf",
+  slot: "PageContainer"
+})({
+  display: "flex",
+  justifyContent: "center",
+  overflow: "auto",
+  maxHeight: 700
+});
+function PdfView({ content, className, title }) {
+  const [numPages, setNumPages] = useState6(0);
+  const [pageNumber, setPageNumber] = useState6(1);
+  const [scale, setScale] = useState6(1);
+  const reactPdf = useLazyModule(lazyReactPdf);
+  const dataUri = useMemo8(() => toDataUri(content), [content]);
+  const onDocumentLoadSuccess = useCallback3(({ numPages: n }) => {
+    setNumPages(n);
   }, []);
-  const leaflet = useLazyModule(lazyReactLeaflet);
-  const height = config.height ?? 400;
-  const center = config.center ?? [51.505, -0.09];
-  const zoom = config.zoom ?? 13;
-  if (!leaflet) {
-    return React12.createElement(Alert7, { severity: "info" }, "Loading map library...");
+  const goToPrev = useCallback3(() => setPageNumber((p) => Math.max(1, p - 1)), []);
+  const goToNext = useCallback3(() => setPageNumber((p) => Math.min(numPages, p + 1)), []);
+  const zoomIn = useCallback3(() => setScale((s) => Math.min(3, s + 0.25)), []);
+  const zoomOut = useCallback3(() => setScale((s) => Math.max(0.25, s - 0.25)), []);
+  if (!reactPdf) {
+    return React12.createElement("iframe", {
+      className: className ?? "fmcp-pdf-content",
+      src: dataUri,
+      style: { width: "100%", height: "600px", border: "none" },
+      title: title ?? "PDF Document"
+    });
   }
-  const { MapContainer, TileLayer, Marker, Popup, GeoJSON } = leaflet;
-  const tileUrl = config.tileLayer?.url ?? DEFAULT_TILE_URL;
-  const attribution = config.tileLayer?.attribution ?? DEFAULT_ATTRIBUTION;
+  const { Document, Page } = reactPdf;
   return React12.createElement(
-    MapRoot,
+    PdfRoot,
     { className },
-    config.title && React12.createElement(
-      Typography6,
-      { variant: "subtitle1", sx: { fontWeight: 600, p: 1.5, borderBottom: 1, borderColor: "divider" } },
-      config.title
-    ),
     React12.createElement(
-      MapContainer,
-      {
-        center,
-        zoom,
-        style: { height, width: "100%" },
-        scrollWheelZoom: true
-      },
-      React12.createElement(TileLayer, { url: tileUrl, attribution }),
-      config.markers?.map(
-        (marker, i) => React12.createElement(
-          Marker,
-          { key: i, position: marker.position },
-          marker.popup && React12.createElement(Popup, null, React12.createElement(Paper, { elevation: 0, sx: { p: 1 } }, marker.popup))
-        )
+      Toolbar,
+      null,
+      React12.createElement(
+        IconButton,
+        { size: "small", onClick: goToPrev, disabled: pageNumber <= 1, "aria-label": "Previous page" },
+        "\u25C0"
+      ),
+      React12.createElement(
+        Typography6,
+        { variant: "body2", sx: { minWidth: 80, textAlign: "center" } },
+        `${pageNumber} / ${numPages || "..."}`
       ),
-      config.geojson && React12.createElement(GeoJSON, { data: config.geojson })
+      React12.createElement(
+        IconButton,
+        { size: "small", onClick: goToNext, disabled: pageNumber >= numPages, "aria-label": "Next page" },
+        "\u25B6"
+      ),
+      React12.createElement(Box11, { sx: { flex: 1 } }),
+      React12.createElement(IconButton, { size: "small", onClick: zoomOut, "aria-label": "Zoom out" }, "\u2212"),
+      React12.createElement(
+        Typography6,
+        { variant: "body2", sx: { minWidth: 50, textAlign: "center" } },
+        `${Math.round(scale * 100)}%`
+      ),
+      React12.createElement(IconButton, { size: "small", onClick: zoomIn, "aria-label": "Zoom in" }, "+"),
+      React12.createElement(Box11, { sx: { flex: 1 } }),
+      React12.createElement(TextField2, {
+        size: "small",
+        type: "number",
+        value: pageNumber,
+        onChange: (e) => {
+          const n = parseInt(e.target.value, 10);
+          if (n >= 1 && n <= numPages) setPageNumber(n);
+        },
+        sx: { width: 70 },
+        slotProps: { htmlInput: { min: 1, max: numPages, "aria-label": "Go to page" } }
+      })
+    ),
+    React12.createElement(
+      PageContainer,
+      null,
+      React12.createElement(
+        Document,
+        { file: dataUri, onLoadSuccess: onDocumentLoadSuccess },
+        React12.createElement(Page, { pageNumber, scale, renderTextLayer: false, renderAnnotationLayer: false })
+      )
     )
   );
 }
-lazyReactLeaflet.load().catch(() => {
-});
-var MapsRenderer = class {
-  type = "map";
-  priority = 60;
-  canHandle(content) {
-    return isMap(content);
+lazyReactPdf.load().catch(() => {
+});
+var PdfRenderer = class {
+  type = "pdf";
+  priority = 90;
+  canHandle(content) {
+    return content.startsWith("%PDF-") || content.trim().startsWith("JVBER") || /^data:application\/pdf[;,]/.test(content.trim());
+  }
+  render(content, options) {
+    return React12.createElement(PdfView, {
+      content,
+      className: options?.className ?? "fmcp-pdf-content",
+      title: options?.toolName ?? "PDF Document"
+    });
+  }
+};
+var pdfRenderer = new PdfRenderer();
+
+// libs/ui/src/renderer/react/index.ts
+import Alert7 from "@mui/material/Alert";
+import Box12 from "@mui/material/Box";
+import React13, { useEffect as useEffect8, useState as useState7 } from "react";
+
+// libs/ui/src/runtime/babel-runtime.ts
+var BABEL_STANDALONE_CDN = "https://esm.sh/@babel/standalone@7";
+var BABEL_STANDALONE_FALLBACK_CDN = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.10/babel.min.js";
+var babelState = { status: "idle" };
+async function loadBabel() {
+  if (babelState.status === "loaded") {
+    return babelState.babel;
+  }
+  if (babelState.status === "loading") {
+    return babelState.promise;
+  }
+  if (babelState.status === "error") {
+    throw babelState.error;
+  }
+  const promise = doLoadBabel();
+  babelState = { status: "loading", promise };
+  try {
+    const babel = await promise;
+    babelState = { status: "loaded", babel };
+    return babel;
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    babelState = { status: "error", error: err };
+    throw err;
+  }
+}
+async function doLoadBabel() {
+  const globalBabel = globalThis["Babel"];
+  if (globalBabel && typeof globalBabel.transform === "function") {
+    return globalBabel;
+  }
+  try {
+    const module = await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      BABEL_STANDALONE_CDN
+    );
+    if (module && typeof module.transform === "function") {
+      return module;
+    }
+    if (module.default && typeof module.default.transform === "function") {
+      return module.default;
+    }
+  } catch {
+  }
+  return new Promise((resolve, reject) => {
+    if (typeof document === "undefined") {
+      reject(new Error("Babel Standalone requires a browser environment"));
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = BABEL_STANDALONE_FALLBACK_CDN;
+    script.crossOrigin = "anonymous";
+    script.onload = () => {
+      const babel = globalThis["Babel"];
+      if (babel && typeof babel.transform === "function") {
+        resolve(babel);
+      } else {
+        reject(new Error("Babel Standalone loaded but transform function not found"));
+      }
+    };
+    script.onerror = () => {
+      reject(new Error(`Failed to load Babel Standalone from ${BABEL_STANDALONE_FALLBACK_CDN}`));
+    };
+    document.head.appendChild(script);
+  });
+}
+async function transpileJsx(source, filename = "component.jsx") {
+  const babel = await loadBabel();
+  const result = babel.transform(source, {
+    presets: ["react"],
+    filename
+  });
+  return result.code;
+}
+
+// libs/ui/src/renderer/react/index.ts
+function isReactJsx(content) {
+  if (/^#{1,6}\s+\S/m.test(content)) return false;
+  return /(?:function|const|class)\s+\w+/.test(content) && /(?:return|=>)[\s(]*</.test(content);
+}
+function parseImports(source) {
+  const results = [];
+  const defaultRe = /^import\s+(\w+)\s+from\s+['"]([^'"]+)['"][\s;]*$/gm;
+  let m;
+  while ((m = defaultRe.exec(source)) !== null) {
+    results.push({ line: m[0], localName: m[1], specifier: m[2], named: false });
   }
-  render(content, options) {
-    try {
-      const config = parseMapConfig(content);
-      return React12.createElement(MapView, {
-        config,
-        className: options?.className ?? "fmcp-map-content"
-      });
-    } catch {
-      return React12.createElement(Alert7, { severity: "error" }, "Invalid map/GeoJSON data");
+  const namedRe = /^import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"][\s;]*$/gm;
+  while ((m = namedRe.exec(source)) !== null) {
+    const names = m[1].split(",").map((n) => n.trim()).filter(Boolean);
+    for (const name of names) {
+      results.push({ line: m[0], localName: name, specifier: m[2], named: true });
     }
   }
-};
-var mapsRenderer = new MapsRenderer();
-
-// libs/ui/src/renderer/media/index.ts
-import React13 from "react";
-import Box12 from "@mui/material/Box";
-import Paper2 from "@mui/material/Paper";
-import { styled as styled11 } from "@mui/material/styles";
-var VIDEO_PATTERNS2 = [
-  /^https?:\/\/[^?#\s]+\.(?:mp4|webm|ogg|mov)(?:\?[^#\s]*)?$/i,
-  /^https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be|vimeo\.com)\//i,
-  /^data:video\//
-];
-var AUDIO_PATTERNS2 = [
-  /^https?:\/\/[^?#\s]+\.(?:mp3|wav|ogg|aac|flac|m4a)(?:\?[^#\s]*)?$/i,
-  /^https?:\/\/(?:www\.)?soundcloud\.com\//i,
-  /^data:audio\//
-];
-function isVideo(content) {
-  const trimmed = content.trim();
-  return VIDEO_PATTERNS2.some((p) => p.test(trimmed));
+  return results;
 }
-function isAudio(content) {
-  const trimmed = content.trim();
-  return AUDIO_PATTERNS2.some((p) => p.test(trimmed));
+function stripImports(source) {
+  return source.replace(/^import\s+\w+\s+from\s+['"][^'"]+['"][\s;]*$/gm, "").replace(/^import\s+\{[^}]+\}\s+from\s+['"][^'"]+['"][\s;]*$/gm, "");
 }
-function isMedia(content) {
-  return isVideo(content) || isAudio(content);
+function rewriteExportDefault(source) {
+  let result = source.replace(/^export\s+default\s+(function|class)\b/gm, "var __default__ = $1");
+  result = result.replace(/^export\s+default\s+(\([^)]*\)\s*=>)/gm, "var __default__ = $1");
+  result = result.replace(/^export\s+default\s+(\w+)\s*;?\s*$/gm, "var __default__ = $1;");
+  return result;
 }
-var lazyReactPlayer = createLazyImport("react-player", async () => {
-  const mod = await runtimeImportWithFallback(
-    "react-player",
-    esmShUrl("react-player@2", { external: ["react", "react-dom"] })
-  );
-  return mod;
-});
-var MediaRoot = styled11(Paper2, {
-  name: "FrontMcpMedia",
-  slot: "Root"
-})(({ theme }) => ({
-  overflow: "hidden",
-  borderRadius: theme.shape.borderRadius
-}));
-var VideoWrapper = styled11(Box12)({
-  position: "relative",
-  paddingTop: "56.25%",
-  // 16:9 aspect ratio
-  "& > *": {
-    position: "absolute",
-    top: 0,
-    left: 0
+function isReactSpecifier(specifier) {
+  return specifier === "react" || /^https?:\/\/esm\.sh\/react(?:@[\d.]+)?$/.test(specifier);
+}
+async function resolveModules(imports) {
+  const modules = {};
+  const specifierMap = /* @__PURE__ */ new Map();
+  for (const imp of imports) {
+    const existing = specifierMap.get(imp.specifier) ?? [];
+    existing.push(imp);
+    specifierMap.set(imp.specifier, existing);
   }
-});
-var AudioWrapper = styled11(Box12)(({ theme }) => ({
-  padding: theme.spacing(1),
-  "& > *": {
-    width: "100%"
+  for (const [specifier, specImports] of specifierMap) {
+    let mod;
+    if (isReactSpecifier(specifier)) {
+      mod = React13;
+    } else {
+      mod = await runtimeImport(specifier);
+    }
+    for (const imp of specImports) {
+      if (imp.named) {
+        modules[imp.localName] = mod[imp.localName] ?? mod["default"]?.[imp.localName];
+      } else {
+        modules[imp.localName] = mod["default"] ?? mod;
+      }
+    }
   }
-}));
-function MediaView({ url, isAudioContent, className }) {
-  const reactPlayerMod = useLazyModule(lazyReactPlayer);
-  if (!reactPlayerMod) {
-    if (isAudioContent) {
-      return React13.createElement(
-        MediaRoot,
-        { variant: "outlined", className },
-        React13.createElement(
-          AudioWrapper,
-          null,
-          React13.createElement("audio", { controls: true, src: url, style: { width: "100%" } })
-        )
-      );
+  return modules;
+}
+function ReactJsxView({ source, className }) {
+  const [Component, setComponent] = useState7(null);
+  const [error, setError] = useState7(null);
+  const [loading, setLoading] = useState7(true);
+  useEffect8(() => {
+    let cancelled = false;
+    async function transpileAndRender() {
+      try {
+        const imports = parseImports(source);
+        const modules = await resolveModules(imports);
+        let code = stripImports(source);
+        code = rewriteExportDefault(code);
+        code = await transpileJsx(code, "component.jsx");
+        code += "\nreturn __default__;";
+        const argNames = Object.keys(modules);
+        const argValues = argNames.map((n) => modules[n]);
+        const factory = new Function(...argNames, code);
+        const Comp = factory(...argValues);
+        if (!cancelled) {
+          setComponent(() => Comp);
+          setError(null);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+          setComponent(null);
+          setLoading(false);
+        }
+      }
     }
+    setLoading(true);
+    setError(null);
+    setComponent(null);
+    transpileAndRender();
+    return () => {
+      cancelled = true;
+    };
+  }, [source]);
+  if (loading) {
+    return React13.createElement(Box12, { className, sx: { p: 2, color: "text.secondary" } }, "Transpiling JSX...");
+  }
+  if (error) {
     return React13.createElement(
-      MediaRoot,
-      { variant: "outlined", className },
+      Box12,
+      { className },
+      React13.createElement(Alert7, { severity: "error", sx: { mb: 1 } }, `JSX render error: ${error}`),
       React13.createElement(
-        VideoWrapper,
-        null,
-        React13.createElement("video", {
-          controls: true,
-          src: url,
-          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }
-        })
+        "pre",
+        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
+        source
       )
     );
   }
-  const ReactPlayer = reactPlayerMod.default;
-  if (isAudioContent) {
+  if (!Component) {
     return React13.createElement(
-      MediaRoot,
-      { variant: "outlined", className },
-      React13.createElement(
-        AudioWrapper,
-        null,
-        React13.createElement(ReactPlayer, {
-          url,
-          controls: true,
-          width: "100%",
-          height: 50
-        })
-      )
+      Box12,
+      { className },
+      React13.createElement(Alert7, { severity: "warning" }, "No component exported. Use `export default MyComponent`.")
     );
   }
-  return React13.createElement(
-    MediaRoot,
-    { variant: "outlined", className },
-    React13.createElement(
-      VideoWrapper,
-      null,
-      React13.createElement(ReactPlayer, {
-        url,
-        controls: true,
-        width: "100%",
-        height: "100%"
-      })
-    )
-  );
+  return React13.createElement(Box12, { className }, React13.createElement(Component, {}));
 }
-lazyReactPlayer.load().catch(() => {
-});
-var VideoRenderer = class {
-  type = "video";
-  priority = 20;
-  canHandle(content) {
-    return isVideo(content);
-  }
-  render(content, options) {
-    return React13.createElement(MediaView, {
-      url: content.trim(),
-      isAudioContent: false,
-      className: options?.className ?? "fmcp-media-content"
-    });
-  }
-};
-var AudioRenderer = class {
-  type = "audio";
-  priority = 20;
+var ReactJsxRenderer = class {
+  type = "jsx";
+  priority = 10;
   canHandle(content) {
-    return isAudio(content);
+    return isReactJsx(content);
   }
   render(content, options) {
-    return React13.createElement(MediaView, {
-      url: content.trim(),
-      isAudioContent: true,
-      className: options?.className ?? "fmcp-media-content"
+    return React13.createElement(ReactJsxView, {
+      source: content,
+      className: options?.className ?? "fmcp-jsx-content"
     });
   }
 };
-var videoRenderer = new VideoRenderer();
-var audioRenderer = new AudioRenderer();
+var reactJsxRenderer = new ReactJsxRenderer();
 
 // libs/ui/src/renderer/index.ts
 function registerAllRenderers() {