@frontmcp/ui 0.12.2 → 1.0.0-beta.2

package/esm/renderer/media/index.mjs

@@ -0,0 +1,235 @@
+// libs/ui/src/renderer/media/index.ts
+import React from "react";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import { styled } from "@mui/material/styles";
+
+// 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/media/index.ts
+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 isVideo(content) {
+  const trimmed = content.trim();
+  return VIDEO_PATTERNS.some((p) => p.test(trimmed));
+}
+function isAudio(content) {
+  const trimmed = content.trim();
+  return AUDIO_PATTERNS.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 = styled(Paper, {
+  name: "FrontMcpMedia",
+  slot: "Root"
+})(({ theme }) => ({
+  overflow: "hidden",
+  borderRadius: theme.shape.borderRadius
+}));
+var VideoWrapper = styled(Box)({
+  position: "relative",
+  paddingTop: "56.25%",
+  // 16:9 aspect ratio
+  "& > *": {
+    position: "absolute",
+    top: 0,
+    left: 0
+  }
+});
+var AudioWrapper = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(1),
+  "& > *": {
+    width: "100%"
+  }
+}));
+function MediaView({ url, isAudioContent, className }) {
+  const reactPlayerMod = useLazyModule(lazyReactPlayer);
+  if (!reactPlayerMod) {
+    if (isAudioContent) {
+      return React.createElement(
+        MediaRoot,
+        { variant: "outlined", className },
+        React.createElement(
+          AudioWrapper,
+          null,
+          React.createElement("audio", { controls: true, src: url, style: { width: "100%" } })
+        )
+      );
+    }
+    return React.createElement(
+      MediaRoot,
+      { variant: "outlined", className },
+      React.createElement(
+        VideoWrapper,
+        null,
+        React.createElement("video", {
+          controls: true,
+          src: url,
+          style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }
+        })
+      )
+    );
+  }
+  const ReactPlayer = reactPlayerMod.default;
+  if (isAudioContent) {
+    return React.createElement(
+      MediaRoot,
+      { variant: "outlined", className },
+      React.createElement(
+        AudioWrapper,
+        null,
+        React.createElement(ReactPlayer, {
+          url,
+          controls: true,
+          width: "100%",
+          height: 50
+        })
+      )
+    );
+  }
+  return React.createElement(
+    MediaRoot,
+    { variant: "outlined", className },
+    React.createElement(
+      VideoWrapper,
+      null,
+      React.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 React.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 React.createElement(MediaView, {
+      url: content.trim(),
+      isAudioContent: true,
+      className: options?.className ?? "fmcp-media-content"
+    });
+  }
+};
+var videoRenderer = new VideoRenderer();
+var audioRenderer = new AudioRenderer();
+export {
+  AudioRenderer,
+  VideoRenderer,
+  audioRenderer,
+  isAudio,
+  isMedia,
+  isVideo,
+  videoRenderer
+};

package/esm/renderer/mermaid/index.mjs

@@ -0,0 +1,220 @@
+// libs/ui/src/renderer/mermaid/index.ts
+import React, { useEffect, useRef, useState, useId } from "react";
+import Box from "@mui/material/Box";
+import Alert from "@mui/material/Alert";
+import { styled } from "@mui/material/styles";
+
+// 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-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/mermaid/index.ts
+var MERMAID_PATTERN = /^\s*(?:graph|sequenceDiagram|classDiagram|stateDiagram|flowchart|erDiagram|gantt|pie|journey|gitGraph)\b/;
+function isMermaid(content) {
+  return MERMAID_PATTERN.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 = styled(Box, {
+  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] = useState(null);
+  const [error, setError] = useState(null);
+  const themeValues = useRendererTheme();
+  const uniqueId = useId().replace(/:/g, "-");
+  useEffect(() => {
+    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 React.createElement(
+      Box,
+      { className },
+      React.createElement(Alert, { severity: "error", sx: { mb: 1 } }, `Mermaid parse error: ${error}`),
+      React.createElement(
+        "pre",
+        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
+        definition
+      )
+    );
+  }
+  if (!svg) {
+    return React.createElement(
+      MermaidRoot,
+      { className },
+      React.createElement(Box, { sx: { color: "text.secondary" } }, "Rendering diagram...")
+    );
+  }
+  return React.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 React.createElement(MermaidView, {
+      definition: content.trim(),
+      className: options?.className ?? "fmcp-mermaid-content"
+    });
+  }
+};
+var mermaidRenderer = new MermaidRenderer();
+export {
+  MermaidRenderer,
+  isMermaid,
+  mermaidRenderer
+};

package/esm/renderer/pdf/index.mjs

@@ -0,0 +1,229 @@
+// libs/ui/src/renderer/pdf/index.ts
+import React, { useState as useState2, useCallback, useMemo } from "react";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import { styled } from "@mui/material/styles";
+
+// 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/pdf/index.ts
+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 = styled(Box, {
+  name: "FrontMcpPdf",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  border: `1px solid ${theme.palette.divider}`
+}));
+var Toolbar = styled(Box, {
+  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 = styled(Box, {
+  name: "FrontMcpPdf",
+  slot: "PageContainer"
+})({
+  display: "flex",
+  justifyContent: "center",
+  overflow: "auto",
+  maxHeight: 700
+});
+function PdfView({ content, className, title }) {
+  const [numPages, setNumPages] = useState2(0);
+  const [pageNumber, setPageNumber] = useState2(1);
+  const [scale, setScale] = useState2(1);
+  const reactPdf = useLazyModule(lazyReactPdf);
+  const dataUri = useMemo(() => 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 React.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 React.createElement(
+    PdfRoot,
+    { className },
+    React.createElement(
+      Toolbar,
+      null,
+      React.createElement(
+        IconButton,
+        { size: "small", onClick: goToPrev, disabled: pageNumber <= 1, "aria-label": "Previous page" },
+        "\u25C0"
+      ),
+      React.createElement(
+        Typography,
+        { variant: "body2", sx: { minWidth: 80, textAlign: "center" } },
+        `${pageNumber} / ${numPages || "..."}`
+      ),
+      React.createElement(
+        IconButton,
+        { size: "small", onClick: goToNext, disabled: pageNumber >= numPages, "aria-label": "Next page" },
+        "\u25B6"
+      ),
+      React.createElement(Box, { sx: { flex: 1 } }),
+      React.createElement(IconButton, { size: "small", onClick: zoomOut, "aria-label": "Zoom out" }, "\u2212"),
+      React.createElement(
+        Typography,
+        { variant: "body2", sx: { minWidth: 50, textAlign: "center" } },
+        `${Math.round(scale * 100)}%`
+      ),
+      React.createElement(IconButton, { size: "small", onClick: zoomIn, "aria-label": "Zoom in" }, "+"),
+      React.createElement(Box, { sx: { flex: 1 } }),
+      React.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" } }
+      })
+    ),
+    React.createElement(
+      PageContainer,
+      null,
+      React.createElement(
+        Document,
+        { file: dataUri, onLoadSuccess: onDocumentLoadSuccess },
+        React.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 React.createElement(PdfView, {
+      content,
+      className: options?.className ?? "fmcp-pdf-content",
+      title: options?.toolName ?? "PDF Document"
+    });
+  }
+};
+var pdfRenderer = new PdfRenderer();
+export {
+  PdfRenderer,
+  pdfRenderer
+};