@frontmcp/ui 0.12.2 → 1.0.0-beta.2

package/esm/renderer/common/index.mjs

@@ -0,0 +1,135 @@
+// 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();
+}
+export {
+  ESM_SH_BASE,
+  createLazyImport,
+  esmShUrl,
+  extractThemeValues,
+  injectStylesheet,
+  runtimeImport,
+  runtimeImportWithFallback,
+  useLazyModule,
+  useRendererTheme
+};

package/esm/renderer/csv/index.mjs

@@ -0,0 +1,193 @@
+// libs/ui/src/renderer/csv/index.ts
+import React, { useState, useMemo, useCallback } from "react";
+import Box from "@mui/material/Box";
+import MuiTable from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TablePagination from "@mui/material/TablePagination";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import TextField from "@mui/material/TextField";
+import { styled } 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 = styled(Box, {
+  name: "FrontMcpCsvTable",
+  slot: "Root"
+})({
+  width: "100%"
+});
+var StyledHeaderCell = styled(TableCell, {
+  name: "FrontMcpCsvTable",
+  slot: "Header"
+})(({ theme }) => ({
+  fontWeight: 600,
+  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50],
+  whiteSpace: "nowrap"
+}));
+var FilterToolbar = styled(Box, {
+  name: "FrontMcpCsvTable",
+  slot: "Toolbar"
+})(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  display: "flex",
+  gap: theme.spacing(1)
+}));
+function CsvTableView({ content, className, pageSize = 25 }) {
+  const delimiter = useMemo(() => detectDelimiter(content), [content]);
+  const allRows = useMemo(() => parseCsv(content, delimiter), [content, delimiter]);
+  const headers = allRows[0] ?? [];
+  const dataRows = useMemo(() => allRows.slice(1), [allRows]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(pageSize);
+  const [sortCol, setSortCol] = useState(null);
+  const [sortDir, setSortDir] = useState("asc");
+  const [filter, setFilter] = useState("");
+  const filteredRows = useMemo(() => {
+    if (!filter) return dataRows;
+    const lower = filter.toLowerCase();
+    return dataRows.filter((row) => row.some((cell) => cell.toLowerCase().includes(lower)));
+  }, [dataRows, filter]);
+  const sortedRows = useMemo(() => {
+    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 = useMemo(
+    () => sortedRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+    [sortedRows, page, rowsPerPage]
+  );
+  const handleSort = useCallback((colIndex) => {
+    setSortCol((prev) => {
+      if (prev === colIndex) {
+        setSortDir((d) => d === "asc" ? "desc" : "asc");
+        return colIndex;
+      }
+      setSortDir("asc");
+      return colIndex;
+    });
+  }, []);
+  const handleChangePage = useCallback((_, newPage) => setPage(newPage), []);
+  const handleChangeRowsPerPage = useCallback((e) => {
+    setRowsPerPage(parseInt(e.target.value, 10));
+    setPage(0);
+  }, []);
+  return React.createElement(
+    CsvRoot,
+    { className },
+    React.createElement(
+      FilterToolbar,
+      null,
+      React.createElement(TextField, {
+        size: "small",
+        placeholder: "Filter rows...",
+        value: filter,
+        onChange: (e) => {
+          setFilter(e.target.value);
+          setPage(0);
+        },
+        sx: { minWidth: 200 }
+      })
+    ),
+    React.createElement(
+      TableContainer,
+      { sx: { border: 1, borderColor: "divider", borderRadius: 1 } },
+      React.createElement(
+        MuiTable,
+        { size: "small", stickyHeader: true },
+        React.createElement(
+          TableHead,
+          null,
+          React.createElement(
+            TableRow,
+            null,
+            headers.map(
+              (header, i) => React.createElement(
+                StyledHeaderCell,
+                { key: i },
+                React.createElement(
+                  TableSortLabel,
+                  {
+                    active: sortCol === i,
+                    direction: sortCol === i ? sortDir : "asc",
+                    onClick: () => handleSort(i)
+                  },
+                  header
+                )
+              )
+            )
+          )
+        ),
+        React.createElement(
+          TableBody,
+          null,
+          pageRows.map(
+            (row, ri) => React.createElement(
+              TableRow,
+              { key: ri, hover: true },
+              row.map((cell, ci) => React.createElement(TableCell, { key: ci }, cell))
+            )
+          )
+        )
+      )
+    ),
+    sortedRows.length > rowsPerPage && React.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 React.createElement(CsvTableView, {
+      content,
+      className: options?.className ?? "fmcp-csv-table",
+      pageSize
+    });
+  }
+};
+var csvRenderer = new CsvRenderer();
+export {
+  CsvRenderer,
+  csvRenderer,
+  detectDelimiter,
+  parseCsv
+};

package/esm/renderer/flow/index.mjs

@@ -0,0 +1,259 @@
+// libs/ui/src/renderer/flow/index.ts
+import React, { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import Box from "@mui/material/Box";
+import Alert from "@mui/material/Alert";
+import Typography from "@mui/material/Typography";
+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/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/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/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/flow/index.ts
+var XYFLOW_CSS_URL = "https://esm.sh/@xyflow/react@12/dist/style.css";
+var XYFLOW_CSS_ID = "fmcp-xyflow-css";
+function isFlow(content) {
+  const trimmed = content.trim();
+  if (trimmed.charCodeAt(0) !== 123) return false;
+  return trimmed.includes('"nodes"') && trimmed.includes('"edges"');
+}
+var lazyXYFlow = createLazyImport("@xyflow/react", async () => {
+  const mod = await runtimeImportWithFallback(
+    "@xyflow/react",
+    esmShUrl("@xyflow/react@12", { external: ["react", "react-dom"] })
+  );
+  return mod;
+});
+var FlowRoot = styled(Box, {
+  name: "FrontMcpFlow",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  border: `1px solid ${theme.palette.divider}`
+}));
+function FlowView({ config, className }) {
+  useEffect2(() => {
+    injectStylesheet(XYFLOW_CSS_URL, XYFLOW_CSS_ID);
+  }, []);
+  const themeValues = useRendererTheme();
+  const xyflow = useLazyModule(lazyXYFlow);
+  const height = config.height ?? 500;
+  const styledNodes = useMemo2(() => {
+    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 = useMemo2(() => {
+    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 React.createElement(Alert, { severity: "info" }, "Loading flow diagram library...");
+  }
+  const { ReactFlow, Controls, MiniMap, Background } = xyflow;
+  return React.createElement(
+    FlowRoot,
+    { className },
+    config.title && React.createElement(
+      Typography,
+      { variant: "subtitle1", fontWeight: 600, sx: { p: 1.5, borderBottom: 1, borderColor: "divider" } },
+      config.title
+    ),
+    React.createElement(
+      Box,
+      { sx: { height } },
+      React.createElement(
+        ReactFlow,
+        {
+          nodes: styledNodes,
+          edges: styledEdges,
+          fitView: config.fitView !== false,
+          proOptions: { hideAttribution: true }
+        },
+        React.createElement(Controls, {
+          style: {
+            backgroundColor: themeValues.paper,
+            borderRadius: themeValues.borderRadius,
+            border: `1px solid ${themeValues.divider}`
+          }
+        }),
+        React.createElement(MiniMap, {
+          style: {
+            backgroundColor: themeValues.background,
+            borderRadius: themeValues.borderRadius
+          },
+          nodeColor: themeValues.primary
+        }),
+        Background && React.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 React.createElement(FlowView, {
+        config,
+        className: options?.className ?? "fmcp-flow-content"
+      });
+    } catch {
+      return React.createElement(Alert, { severity: "error" }, "Invalid flow JSON");
+    }
+  }
+};
+var flowRenderer = new FlowRenderer();
+export {
+  FlowRenderer,
+  flowRenderer,
+  isFlow
+};

package/esm/renderer/html/index.mjs

@@ -0,0 +1,99 @@
+// libs/ui/src/renderer/html/index.ts
+import React, { useMemo, useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+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);
+  }
+}
+
+// libs/ui/src/renderer/html/index.ts
+var HtmlRoot = styled(Box, {
+  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] = useState(!!purifyModule);
+  useEffect(() => {
+    if (!purifyModule) {
+      loadDOMPurify().then((mod) => {
+        if (mod) setPurifyReady(true);
+      });
+    }
+  }, []);
+  const sanitized = useMemo(() => sanitizeSync(html), [html, purifyReady]);
+  return React.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 React.createElement(HtmlView, {
+      html: content,
+      className: options?.className ?? "fmcp-html-content"
+    });
+  }
+};
+var htmlRenderer = new HtmlRenderer();
+export {
+  HtmlRenderer,
+  escapeHtml,
+  htmlRenderer
+};