@frontmcp/ui 0.12.2 → 1.0.0-beta.1

package/esm/renderer/index.mjs

@@ -0,0 +1,2173 @@
+// libs/ui/src/renderer/auto-detect.ts
+import React, { Suspense } from "react";
+
+// libs/ui/src/runtime/content-detector.ts
+var JSX_PATTERNS = [
+  // JSX-specific syntax: self-closing tags with capitalized names
+  /<[A-Z][a-zA-Z0-9]*[\s/>]/,
+  // JSX expressions: {someVar} or {() => ...}
+  /\{[a-zA-Z_$][\w$.]*\}/,
+  // React hooks: useState, useEffect, etc.
+  /\buse[A-Z]\w+\s*\(/,
+  // Arrow function components or function declarations: const Foo = / function Foo(
+  /(?:const|let|var|function)\s+[A-Z]\w*\s*[=(]/,
+  // Import from react
+  /import\s[^\n]{1,200}from\s+['"]react['"]/,
+  // JSX pragma or import
+  /\/\*\*?\s*@jsx\b/,
+  // export default function/const (component pattern)
+  /export\s+default\s+function\s+[A-Z]/
+];
+var MDX_PATTERNS = [
+  // MDX frontmatter
+  /^---\s*\n/,
+  // Markdown headings
+  /^#{1,6}\s+\S/m,
+  // MDX import statements followed by markdown
+  /^import\s[^\n]*\n+#/m,
+  // MDX export default (layout pattern)
+  /^export\s+default\s+/m,
+  // Markdown bullet lists
+  /^\s*[-*+]\s+\S/m,
+  // Markdown links
+  /\[[^\]]+\]\([^)]+\)/,
+  // Markdown code blocks
+  /^```\w*/m,
+  // Markdown emphasis
+  /(?:\*\*|__)(?:(?!\*\*|__).)+(?:\*\*|__)/
+];
+var CHART_TYPE_RE = /"type"\s*:\s*"(?:bar|line|area|pie|scatter|radar|composed)"/;
+var MERMAID_PATTERN = /^\s*(?:graph|sequenceDiagram|classDiagram|stateDiagram|flowchart|erDiagram|gantt|pie|journey|gitGraph)\b/;
+function looksLikeChart(s) {
+  return s.charCodeAt(0) === 123 && CHART_TYPE_RE.test(s) && s.includes('"data"');
+}
+function looksLikeFlow(s) {
+  return s.charCodeAt(0) === 123 && s.includes('"nodes"') && s.includes('"edges"');
+}
+var MATH_PATTERNS = [
+  /\$\$(?:[^$]|\$(?!\$))+\$\$/s,
+  /\$[^$\n]+?\$/,
+  /\\\[(?:[^\\]|\\.)*\\\]/s,
+  /\\\((?:[^\\]|\\.)*\\\)/s,
+  /\\begin\{(?:equation|align|gather|matrix|pmatrix|bmatrix|cases)\}/
+];
+var GEOJSON_TYPE_RE = /"type"\s*:\s*"(?:FeatureCollection|Feature|Point|LineString|Polygon|MultiPoint|MultiLineString|MultiPolygon|GeometryCollection)"/;
+function looksLikeMap(s) {
+  return s.charCodeAt(0) === 123 && GEOJSON_TYPE_RE.test(s);
+}
+var IMAGE_PATTERNS = [
+  /^data:image\/(?:png|jpeg|jpg|gif|webp|svg\+xml)[;,]/,
+  /^https?:\/\/[^?#\s]+\.(?:png|jpe?g|gif|webp|svg|avif|ico)(?:\?[^#\s]*)?$/i
+];
+var VIDEO_PATTERNS = [
+  /^https?:\/\/[^?#\s]+\.(?:mp4|webm|ogg|mov)(?:\?[^#\s]*)?$/i,
+  /^https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be|vimeo\.com)\//i,
+  /^data:video\//
+];
+var AUDIO_PATTERNS = [
+  /^https?:\/\/[^?#\s]+\.(?:mp3|wav|ogg|aac|flac|m4a)(?:\?[^#\s]*)?$/i,
+  /^https?:\/\/(?:www\.)?soundcloud\.com\//i,
+  /^data:audio\//
+];
+function detectContentType(content) {
+  if (!content || typeof content !== "string") {
+    return "html";
+  }
+  const trimmed = content.trim();
+  if (looksLikeChart(trimmed)) return "chart";
+  if (looksLikeFlow(trimmed)) return "flow";
+  if (looksLikeMap(trimmed)) return "map";
+  if (MERMAID_PATTERN.test(trimmed)) return "mermaid";
+  if (MATH_PATTERNS.some((p) => p.test(trimmed))) return "math";
+  if (IMAGE_PATTERNS.some((p) => p.test(trimmed))) return "image";
+  if (VIDEO_PATTERNS.some((p) => p.test(trimmed))) return "video";
+  if (AUDIO_PATTERNS.some((p) => p.test(trimmed))) return "audio";
+  const jsxScore = countMatches(trimmed, JSX_PATTERNS);
+  const mdxScore = countMatches(trimmed, MDX_PATTERNS);
+  if (jsxScore > 0 && jsxScore >= mdxScore) {
+    return "jsx";
+  }
+  if (mdxScore >= 2) {
+    return "mdx";
+  }
+  if (mdxScore === 1 && /^import\s+/m.test(trimmed)) {
+    return "mdx";
+  }
+  return "html";
+}
+function countMatches(content, patterns) {
+  let count = 0;
+  for (const pattern of patterns) {
+    if (pattern.test(content)) {
+      count++;
+    }
+  }
+  return count;
+}
+
+// libs/ui/src/renderer/auto-detect.ts
+var PDF_HEADER = "%PDF-";
+var BASE64_PDF_PREFIX = "JVBER";
+function isPdf(content) {
+  if (content.startsWith(PDF_HEADER)) return true;
+  const trimmed = content.trim();
+  return trimmed.startsWith(BASE64_PDF_PREFIX) || /^data:application\/pdf[;,]/.test(trimmed);
+}
+function isCsv(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;
+}
+function detectContentType2(content) {
+  if (isPdf(content)) return "pdf";
+  if (isCsv(content)) return "csv";
+  return detectContentType(content);
+}
+var rendererRegistry = [];
+var rendererByType = /* @__PURE__ */ new Map();
+function sortRegistry() {
+  rendererRegistry.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+}
+function registerRenderer(renderer) {
+  if (rendererByType.has(renderer.type)) {
+    const idx = rendererRegistry.findIndex((r) => r.type === renderer.type);
+    if (idx !== -1) rendererRegistry.splice(idx, 1);
+  }
+  rendererRegistry.push(renderer);
+  rendererByType.set(renderer.type, renderer);
+  sortRegistry();
+}
+function clearRegistry() {
+  rendererRegistry.length = 0;
+  rendererByType.clear();
+}
+function getRenderer(type) {
+  return rendererByType.get(type);
+}
+function getRegisteredRenderers() {
+  return rendererRegistry;
+}
+function renderContent(content, options) {
+  const type = detectContentType2(content);
+  for (const renderer of rendererRegistry) {
+    if (renderer.canHandle(content)) {
+      return renderer.render(content, options);
+    }
+  }
+  const exact = rendererByType.get(type);
+  if (exact) {
+    return exact.render(content, options);
+  }
+  throw new Error(`No renderer found for content type: ${type}`);
+}
+function ContentView({ content, options, fallback }) {
+  return React.createElement(
+    Suspense,
+    { fallback: fallback ?? React.createElement("div", { className: "fmcp-content-loading" }, "Loading...") },
+    React.createElement(ContentViewInner, { content, options })
+  );
+}
+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/common/lazy-import.ts
+var ESM_SH_BASE = "https://esm.sh/";
+function esmShUrl(pkg, options) {
+  let url = `${ESM_SH_BASE}${pkg}`;
+  if (options?.external?.length) {
+    url += `?external=${options.external.join(",")}`;
+  }
+  return url;
+}
+function runtimeImport(specifier) {
+  const dynamicImport = new Function("s", "return import(s)");
+  return dynamicImport(specifier);
+}
+async function runtimeImportWithFallback(bareSpecifier, fallbackUrl) {
+  try {
+    return await runtimeImport(bareSpecifier);
+  } catch {
+    return runtimeImport(fallbackUrl);
+  }
+}
+function createLazyImport(moduleId, importer) {
+  let state = { status: "idle" };
+  const doImport = importer ?? (async () => {
+    const mod = await runtimeImport(moduleId);
+    return mod["default"] ?? mod;
+  });
+  return {
+    load() {
+      if (state.status === "loaded") return Promise.resolve(state.module);
+      if (state.status === "loading") return state.promise;
+      if (state.status === "error") {
+        state = { status: "idle" };
+      }
+      const promise = doImport().then(
+        (mod) => {
+          state = { status: "loaded", module: mod };
+          return mod;
+        },
+        (err) => {
+          const error = err instanceof Error ? err : new Error(`Failed to load module "${moduleId}": ${String(err)}`);
+          state = { status: "error", error };
+          throw error;
+        }
+      );
+      state = { status: "loading", promise };
+      return promise;
+    },
+    get() {
+      return state.status === "loaded" ? state.module : void 0;
+    },
+    getState() {
+      return state;
+    },
+    reset() {
+      state = { status: "idle" };
+    }
+  };
+}
+
+// libs/ui/src/renderer/common/use-lazy-module.ts
+import { useState, useEffect } from "react";
+function useLazyModule(lazy) {
+  const [, forceUpdate] = useState(0);
+  useEffect(() => {
+    if (lazy.getState().status === "loaded") {
+      forceUpdate((n) => n + 1);
+      return;
+    }
+    lazy.load().then(
+      () => forceUpdate((n) => n + 1),
+      () => forceUpdate((n) => n + 1)
+    );
+  }, [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() {
+  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)
+  };
+}
+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 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", fontWeight: 700 }, line.slice(2, -2)));
+    } else if (line.trim()) {
+      elements.push(React2.createElement(Typography, { key: i, variant: "body1", paragraph: true }, 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 /^---\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",
+  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) => {
+    purifyModule = mod;
+    return purifyModule;
+  }).catch(() => {
+    purifyModule = null;
+    purifyPromise = null;
+    return null;
+  });
+  return purifyPromise;
+}
+function escapeHtml(html) {
+  return html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function sanitizeSync(html) {
+  if (!purifyModule) return escapeHtml(html);
+  const sanitize = purifyModule.default?.sanitize ?? purifyModule.sanitize;
+  return sanitize ? sanitize(html) : escapeHtml(html);
+}
+loadDOMPurify();
+function HtmlView({ html, className }) {
+  const [purifyReady, setPurifyReady] = useState2(!!purifyModule);
+  useEffect2(() => {
+    if (!purifyModule) {
+      loadDOMPurify().then((mod) => {
+        if (mod) setPurifyReady(true);
+      });
+    }
+  }, []);
+  const sanitized = useMemo3(() => sanitizeSync(html), [html, purifyReady]);
+  return React3.createElement(HtmlRoot, {
+    className,
+    dangerouslySetInnerHTML: { __html: sanitized }
+  });
+}
+var HtmlRenderer = class {
+  type = "html";
+  priority = 0;
+  canHandle(content) {
+    return /^\s*</.test(content) && /<\/\w+>/.test(content);
+  }
+  render(content, options) {
+    return React3.createElement(HtmlView, {
+      html: content,
+      className: options?.className ?? "fmcp-html-content"
+    });
+  }
+};
+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;
+}
+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);
+        }
+      }
+    }
+    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...");
+  }
+  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 React4.createElement(Box3, { className }, React4.createElement(Component, {}));
+}
+var ReactJsxRenderer = class {
+  type = "jsx";
+  priority = 10;
+  canHandle(content) {
+    return isReactJsx(content);
+  }
+  render(content, options) {
+    return React4.createElement(ReactJsxView, {
+      source: content,
+      className: options?.className ?? "fmcp-jsx-content"
+    });
+  }
+};
+var reactJsxRenderer = new ReactJsxRenderer();
+
+// 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 () => {
+  const mod = await runtimeImportWithFallback(
+    "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;
+});
+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",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  borderRadius: theme.shape.borderRadius,
+  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);
+  }, []);
+  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 { Document, Page } = reactPdf;
+  return React5.createElement(
+    PdfRoot,
+    { 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" } }
+      })
+    ),
+    React5.createElement(
+      PageContainer,
+      null,
+      React5.createElement(
+        Document,
+        { file: dataUri, onLoadSuccess: onDocumentLoadSuccess },
+        React5.createElement(Page, { pageNumber, scale, renderTextLayer: false, renderAnnotationLayer: false })
+      )
+    )
+  );
+}
+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 React5.createElement(PdfView, {
+      content,
+      className: options?.className ?? "fmcp-pdf-content",
+      title: options?.toolName ?? "PDF Document"
+    });
+  }
+};
+var pdfRenderer = new PdfRenderer();
+
+// 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()));
+}
+var CsvRoot = styled4(Box5, {
+  name: "FrontMcpCsvTable",
+  slot: "Root"
+})({
+  width: "100%"
+});
+var StyledHeaderCell = styled4(TableCell2, {
+  name: "FrontMcpCsvTable",
+  slot: "Header"
+})(({ theme }) => ({
+  fontWeight: 600,
+  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50],
+  whiteSpace: "nowrap"
+}));
+var FilterToolbar = styled4(Box5, {
+  name: "FrontMcpCsvTable",
+  slot: "Toolbar"
+})(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  display: "flex",
+  gap: theme.spacing(1)
+}));
+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);
+  }, []);
+  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]
+    })
+  );
+}
+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 React6.createElement(CsvTableView, {
+      content,
+      className: options?.className ?? "fmcp-csv-table",
+      pageSize
+    });
+  }
+};
+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 StyledImage = styled5("img", {
+  name: "FrontMcpImage",
+  slot: "Image"
+})({
+  maxWidth: "100%",
+  height: "auto",
+  display: "block",
+  cursor: "pointer",
+  borderRadius: "inherit"
+});
+var LightboxBackdrop = styled5(Box6, {
+  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 React7.createElement(
+    LightboxBackdrop,
+    {
+      onClick: onClose,
+      sx: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1300,
+        bgcolor: "rgba(0,0,0,0.8)"
+      }
+    },
+    React7.createElement(LightboxImage, { src, alt })
+  );
+}
+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}`);
+  }
+  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)
+    })
+  );
+}
+var ImageRenderer = class {
+  type = "image";
+  priority = 30;
+  canHandle(content) {
+    return isImage(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"
+    });
+  }
+};
+var imageRenderer = new ImageRenderer();
+
+// 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) {
+  const trimmed = content.trim();
+  if (trimmed.charCodeAt(0) !== 123) return false;
+  return CHART_TYPE_RE2.test(trimmed) && trimmed.includes('"data"');
+}
+var lazyRecharts = createLazyImport("recharts", async () => {
+  const mod = await runtimeImportWithFallback("recharts", esmShUrl("recharts@2", { external: ["react", "react-dom"] }));
+  return mod;
+});
+var ChartRoot = styled6(Box7, {
+  name: "FrontMcpChart",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  padding: theme.spacing(2)
+}));
+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...");
+  }
+  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, 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
+          })
+        )
+      );
+    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
+          });
+        })
+      );
+    default:
+      return React8.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 React8.createElement(ChartView, {
+        config,
+        className: options?.className ?? "fmcp-chart-content"
+      });
+    } catch {
+      return React8.createElement(Alert3, { severity: "error" }, "Invalid chart JSON");
+    }
+  }
+};
+var chartsRenderer = new ChartsRenderer();
+
+// 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";
+var MERMAID_PATTERN2 = /^\s*(?:graph|sequenceDiagram|classDiagram|stateDiagram|flowchart|erDiagram|gantt|pie|journey|gitGraph)\b/;
+function isMermaid(content) {
+  return MERMAID_PATTERN2.test(content.trim());
+}
+var lazyMermaid = createLazyImport("mermaid", async () => {
+  const mod = await runtimeImportWithFallback("mermaid", esmShUrl("mermaid@11"));
+  const mermaid = mod["default"] ?? mod;
+  return mermaid;
+});
+var MermaidRoot = styled7(Box8, {
+  name: "FrontMcpMermaid",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  padding: theme.spacing(2),
+  "& svg": {
+    maxWidth: "100%",
+    height: "auto"
+  }
+}));
+function getMermaidTheme(tv) {
+  return tv.mode === "dark" ? "dark" : "default";
+}
+function getMermaidThemeVariables(tv) {
+  return {
+    primaryColor: tv.primary,
+    secondaryColor: tv.secondary,
+    tertiaryColor: tv.info,
+    primaryTextColor: tv.textPrimary,
+    secondaryTextColor: tv.textSecondary,
+    lineColor: tv.divider,
+    fontFamily: tv.fontFamily,
+    fontSize: `${tv.fontSize}px`
+  };
+}
+function MermaidView({ definition, className }) {
+  const containerRef = useRef(null);
+  const [svg, setSvg] = useState7(null);
+  const [error, setError] = useState7(null);
+  const themeValues = useRendererTheme();
+  const uniqueId = useId().replace(/:/g, "-");
+  useEffect5(() => {
+    let cancelled = false;
+    async function renderDiagram() {
+      try {
+        const mermaid = lazyMermaid.get() ?? await lazyMermaid.load();
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: getMermaidTheme(themeValues),
+          themeVariables: getMermaidThemeVariables(themeValues),
+          securityLevel: "strict"
+        });
+        const result = await mermaid.render(`mermaid-${uniqueId}`, definition);
+        if (!cancelled) {
+          setSvg(result.svg);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+          setSvg(null);
+        }
+      }
+    }
+    renderDiagram();
+    return () => {
+      cancelled = true;
+    };
+  }, [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", fontWeight: 600, sx: { 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(MathRoot, { className }, ...elements);
+}
+lazyKatex.load().catch(() => {
+});
+var MathRenderer = class {
+  type = "math";
+  priority = 40;
+  canHandle(content) {
+    return isMath(content);
+  }
+  render(content, options) {
+    return React11.createElement(MathView, {
+      content,
+      className: options?.className ?? "fmcp-math-content"
+    });
+  }
+};
+var mathRenderer = new MathRenderer();
+
+// libs/ui/src/renderer/maps/index.ts
+import React12, { useEffect as useEffect8 } from "react";
+import Box11 from "@mui/material/Box";
+import Alert7 from "@mui/material/Alert";
+import Paper from "@mui/material/Paper";
+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 () => {
+  const mod = await runtimeImportWithFallback(
+    "react-leaflet",
+    esmShUrl("react-leaflet@5", { external: ["react", "react-dom"] })
+  );
+  return mod;
+});
+var MapRoot = styled10(Box11, {
+  name: "FrontMcpMap",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  borderRadius: theme.shape.borderRadius,
+  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);
+  }, []);
+  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 { MapContainer, TileLayer, Marker, Popup, GeoJSON } = leaflet;
+  const tileUrl = config.tileLayer?.url ?? DEFAULT_TILE_URL;
+  const attribution = config.tileLayer?.attribution ?? DEFAULT_ATTRIBUTION;
+  return React12.createElement(
+    MapRoot,
+    { className },
+    config.title && React12.createElement(
+      Typography6,
+      { variant: "subtitle1", fontWeight: 600, sx: { 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))
+        )
+      ),
+      config.geojson && React12.createElement(GeoJSON, { data: config.geojson })
+    )
+  );
+}
+lazyReactLeaflet.load().catch(() => {
+});
+var MapsRenderer = class {
+  type = "map";
+  priority = 60;
+  canHandle(content) {
+    return isMap(content);
+  }
+  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");
+    }
+  }
+};
+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));
+}
+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 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
+  }
+});
+var AudioWrapper = styled11(Box12)(({ theme }) => ({
+  padding: theme.spacing(1),
+  "& > *": {
+    width: "100%"
+  }
+}));
+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 React13.createElement(
+      MediaRoot,
+      { variant: "outlined", className },
+      React13.createElement(
+        VideoWrapper,
+        null,
+        React13.createElement("video", {
+          controls: true,
+          src: url,
+          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }
+        })
+      )
+    );
+  }
+  const ReactPlayer = reactPlayerMod.default;
+  if (isAudioContent) {
+    return React13.createElement(
+      MediaRoot,
+      { variant: "outlined", className },
+      React13.createElement(
+        AudioWrapper,
+        null,
+        React13.createElement(ReactPlayer, {
+          url,
+          controls: true,
+          width: "100%",
+          height: 50
+        })
+      )
+    );
+  }
+  return React13.createElement(
+    MediaRoot,
+    { variant: "outlined", className },
+    React13.createElement(
+      VideoWrapper,
+      null,
+      React13.createElement(ReactPlayer, {
+        url,
+        controls: true,
+        width: "100%",
+        height: "100%"
+      })
+    )
+  );
+}
+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;
+  canHandle(content) {
+    return isAudio(content);
+  }
+  render(content, options) {
+    return React13.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/index.ts
+function registerAllRenderers() {
+  const all = [
+    pdfRenderer,
+    chartsRenderer,
+    flowRenderer,
+    mapsRenderer,
+    mermaidRenderer,
+    mathRenderer,
+    imageRenderer,
+    videoRenderer,
+    audioRenderer,
+    csvRenderer,
+    reactJsxRenderer,
+    mdxRenderer,
+    htmlRenderer
+  ];
+  for (const renderer of all) {
+    registerRenderer(renderer);
+  }
+}
+export {
+  AudioRenderer,
+  ChartsRenderer,
+  ContentView,
+  CsvRenderer,
+  ESM_SH_BASE,
+  FlowRenderer,
+  HtmlRenderer,
+  ImageRenderer,
+  MapsRenderer,
+  MathRenderer,
+  MdxRenderer,
+  MermaidRenderer,
+  PdfRenderer,
+  ReactJsxRenderer,
+  VideoRenderer,
+  audioRenderer,
+  chartsRenderer,
+  clearRegistry,
+  createLazyImport,
+  csvRenderer,
+  detectContentType2 as detectContentType,
+  esmShUrl,
+  extractThemeValues,
+  flowRenderer,
+  getRegisteredRenderers,
+  getRenderer,
+  htmlRenderer,
+  imageRenderer,
+  injectStylesheet,
+  isAudio,
+  isChart,
+  isFlow,
+  isImage,
+  isMap,
+  isMath,
+  isMedia,
+  isMermaid,
+  isReactJsx,
+  isVideo,
+  mapsRenderer,
+  mathRenderer,
+  mdxRenderer,
+  mermaidRenderer,
+  pdfRenderer,
+  reactJsxRenderer,
+  registerAllRenderers,
+  registerRenderer,
+  renderContent,
+  runtimeImportWithFallback,
+  useLazyModule,
+  useRendererTheme,
+  videoRenderer
+};