@frontmcp/ui 0.12.2 → 1.0.0-beta.2

package/renderer/common/use-renderer-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-renderer-theme.d.ts","sourceRoot":"","sources":["../../../src/renderer/common/use-renderer-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE5D;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,GAAG,mBAAmB,CA8BpE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,mBAAmB,CAGtD"}

package/renderer/csv/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ContentRenderer, RenderOptions } from '../types';
+export declare function detectDelimiter(content: string): string;
+export declare function parseCsv(content: string, delimiter: string): string[][];
+export declare class CsvRenderer implements ContentRenderer {
+    readonly type = "csv";
+    readonly priority = 10;
+    canHandle(content: string): boolean;
+    render(content: string, options?: RenderOptions): React.ReactElement;
+}
+export declare const csvRenderer: CsvRenderer;
+//# sourceMappingURL=index.d.ts.map

package/renderer/csv/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/csv/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAM/D,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CASvD;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,CAKvE;AAuLD,qBAAa,WAAY,YAAW,eAAe;IACjD,QAAQ,CAAC,IAAI,SAAS;IACtB,QAAQ,CAAC,QAAQ,MAAM;IAEvB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAWnC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY;CAQrE;AAED,eAAO,MAAM,WAAW,aAAoB,CAAC"}

package/renderer/csv/index.js

@@ -0,0 +1,224 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// libs/ui/src/renderer/csv/index.ts
+var csv_exports = {};
+__export(csv_exports, {
+  CsvRenderer: () => CsvRenderer,
+  csvRenderer: () => csvRenderer,
+  detectDelimiter: () => detectDelimiter,
+  parseCsv: () => parseCsv
+});
+module.exports = __toCommonJS(csv_exports);
+var import_react = __toESM(require("react"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Table = __toESM(require("@mui/material/Table"));
+var import_TableBody = __toESM(require("@mui/material/TableBody"));
+var import_TableCell = __toESM(require("@mui/material/TableCell"));
+var import_TableContainer = __toESM(require("@mui/material/TableContainer"));
+var import_TableHead = __toESM(require("@mui/material/TableHead"));
+var import_TableRow = __toESM(require("@mui/material/TableRow"));
+var import_TablePagination = __toESM(require("@mui/material/TablePagination"));
+var import_TableSortLabel = __toESM(require("@mui/material/TableSortLabel"));
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var import_styles = require("@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 = (0, import_styles.styled)(import_Box.default, {
+  name: "FrontMcpCsvTable",
+  slot: "Root"
+})({
+  width: "100%"
+});
+var StyledHeaderCell = (0, import_styles.styled)(import_TableCell.default, {
+  name: "FrontMcpCsvTable",
+  slot: "Header"
+})(({ theme }) => ({
+  fontWeight: 600,
+  backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[50],
+  whiteSpace: "nowrap"
+}));
+var FilterToolbar = (0, import_styles.styled)(import_Box.default, {
+  name: "FrontMcpCsvTable",
+  slot: "Toolbar"
+})(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  display: "flex",
+  gap: theme.spacing(1)
+}));
+function CsvTableView({ content, className, pageSize = 25 }) {
+  const delimiter = (0, import_react.useMemo)(() => detectDelimiter(content), [content]);
+  const allRows = (0, import_react.useMemo)(() => parseCsv(content, delimiter), [content, delimiter]);
+  const headers = allRows[0] ?? [];
+  const dataRows = (0, import_react.useMemo)(() => allRows.slice(1), [allRows]);
+  const [page, setPage] = (0, import_react.useState)(0);
+  const [rowsPerPage, setRowsPerPage] = (0, import_react.useState)(pageSize);
+  const [sortCol, setSortCol] = (0, import_react.useState)(null);
+  const [sortDir, setSortDir] = (0, import_react.useState)("asc");
+  const [filter, setFilter] = (0, import_react.useState)("");
+  const filteredRows = (0, import_react.useMemo)(() => {
+    if (!filter) return dataRows;
+    const lower = filter.toLowerCase();
+    return dataRows.filter((row) => row.some((cell) => cell.toLowerCase().includes(lower)));
+  }, [dataRows, filter]);
+  const sortedRows = (0, import_react.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 = (0, import_react.useMemo)(
+    () => sortedRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
+    [sortedRows, page, rowsPerPage]
+  );
+  const handleSort = (0, import_react.useCallback)((colIndex) => {
+    setSortCol((prev) => {
+      if (prev === colIndex) {
+        setSortDir((d) => d === "asc" ? "desc" : "asc");
+        return colIndex;
+      }
+      setSortDir("asc");
+      return colIndex;
+    });
+  }, []);
+  const handleChangePage = (0, import_react.useCallback)((_, newPage) => setPage(newPage), []);
+  const handleChangeRowsPerPage = (0, import_react.useCallback)((e) => {
+    setRowsPerPage(parseInt(e.target.value, 10));
+    setPage(0);
+  }, []);
+  return import_react.default.createElement(
+    CsvRoot,
+    { className },
+    import_react.default.createElement(
+      FilterToolbar,
+      null,
+      import_react.default.createElement(import_TextField.default, {
+        size: "small",
+        placeholder: "Filter rows...",
+        value: filter,
+        onChange: (e) => {
+          setFilter(e.target.value);
+          setPage(0);
+        },
+        sx: { minWidth: 200 }
+      })
+    ),
+    import_react.default.createElement(
+      import_TableContainer.default,
+      { sx: { border: 1, borderColor: "divider", borderRadius: 1 } },
+      import_react.default.createElement(
+        import_Table.default,
+        { size: "small", stickyHeader: true },
+        import_react.default.createElement(
+          import_TableHead.default,
+          null,
+          import_react.default.createElement(
+            import_TableRow.default,
+            null,
+            headers.map(
+              (header, i) => import_react.default.createElement(
+                StyledHeaderCell,
+                { key: i },
+                import_react.default.createElement(
+                  import_TableSortLabel.default,
+                  {
+                    active: sortCol === i,
+                    direction: sortCol === i ? sortDir : "asc",
+                    onClick: () => handleSort(i)
+                  },
+                  header
+                )
+              )
+            )
+          )
+        ),
+        import_react.default.createElement(
+          import_TableBody.default,
+          null,
+          pageRows.map(
+            (row, ri) => import_react.default.createElement(
+              import_TableRow.default,
+              { key: ri, hover: true },
+              row.map((cell, ci) => import_react.default.createElement(import_TableCell.default, { key: ci }, cell))
+            )
+          )
+        )
+      )
+    ),
+    sortedRows.length > rowsPerPage && import_react.default.createElement(import_TablePagination.default, {
+      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 import_react.default.createElement(CsvTableView, {
+      content,
+      className: options?.className ?? "fmcp-csv-table",
+      pageSize
+    });
+  }
+};
+var csvRenderer = new CsvRenderer();

package/renderer/flow/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { ContentRenderer, RenderOptions } from '../types';
+export interface FlowNode {
+    id: string;
+    data: {
+        label: string;
+        [key: string]: unknown;
+    };
+    position: {
+        x: number;
+        y: number;
+    };
+    type?: string;
+    style?: Record<string, unknown>;
+}
+export interface FlowEdge {
+    id: string;
+    source: string;
+    target: string;
+    label?: string;
+    animated?: boolean;
+    type?: string;
+    style?: Record<string, unknown>;
+}
+export interface FlowConfig {
+    nodes: FlowNode[];
+    edges: FlowEdge[];
+    fitView?: boolean;
+    title?: string;
+    height?: number;
+}
+export declare function isFlow(content: string): boolean;
+export declare class FlowRenderer implements ContentRenderer {
+    readonly type = "flow";
+    readonly priority = 70;
+    canHandle(content: string): boolean;
+    render(content: string, options?: RenderOptions): React.ReactElement;
+}
+export declare const flowRenderer: FlowRenderer;
+//# sourceMappingURL=index.d.ts.map

package/renderer/flow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/flow/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AASlD,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAa/D,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IAChD,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAI/C;AA8ID,qBAAa,YAAa,YAAW,eAAe;IAClD,QAAQ,CAAC,IAAI,UAAU;IACvB,QAAQ,CAAC,QAAQ,MAAM;IAEvB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAInC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY;CAWrE;AAED,eAAO,MAAM,YAAY,cAAqB,CAAC"}

package/renderer/flow/index.js

@@ -0,0 +1,290 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// libs/ui/src/renderer/flow/index.ts
+var flow_exports = {};
+__export(flow_exports, {
+  FlowRenderer: () => FlowRenderer,
+  flowRenderer: () => flowRenderer,
+  isFlow: () => isFlow
+});
+module.exports = __toCommonJS(flow_exports);
+var import_react3 = __toESM(require("react"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Alert = __toESM(require("@mui/material/Alert"));
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_styles2 = require("@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
+var import_react = require("react");
+var import_styles = require("@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 = (0, import_styles.useTheme)();
+  return (0, import_react.useMemo)(() => extractThemeValues(theme), [theme]);
+}
+
+// libs/ui/src/renderer/common/use-lazy-module.ts
+var import_react2 = require("react");
+function useLazyModule(lazy) {
+  const [, forceUpdate] = (0, import_react2.useState)(0);
+  (0, import_react2.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 = (0, import_styles2.styled)(import_Box.default, {
+  name: "FrontMcpFlow",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  border: `1px solid ${theme.palette.divider}`
+}));
+function FlowView({ config, className }) {
+  (0, import_react3.useEffect)(() => {
+    injectStylesheet(XYFLOW_CSS_URL, XYFLOW_CSS_ID);
+  }, []);
+  const themeValues = useRendererTheme();
+  const xyflow = useLazyModule(lazyXYFlow);
+  const height = config.height ?? 500;
+  const styledNodes = (0, import_react3.useMemo)(() => {
+    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 = (0, import_react3.useMemo)(() => {
+    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 import_react3.default.createElement(import_Alert.default, { severity: "info" }, "Loading flow diagram library...");
+  }
+  const { ReactFlow, Controls, MiniMap, Background } = xyflow;
+  return import_react3.default.createElement(
+    FlowRoot,
+    { className },
+    config.title && import_react3.default.createElement(
+      import_Typography.default,
+      { variant: "subtitle1", fontWeight: 600, sx: { p: 1.5, borderBottom: 1, borderColor: "divider" } },
+      config.title
+    ),
+    import_react3.default.createElement(
+      import_Box.default,
+      { sx: { height } },
+      import_react3.default.createElement(
+        ReactFlow,
+        {
+          nodes: styledNodes,
+          edges: styledEdges,
+          fitView: config.fitView !== false,
+          proOptions: { hideAttribution: true }
+        },
+        import_react3.default.createElement(Controls, {
+          style: {
+            backgroundColor: themeValues.paper,
+            borderRadius: themeValues.borderRadius,
+            border: `1px solid ${themeValues.divider}`
+          }
+        }),
+        import_react3.default.createElement(MiniMap, {
+          style: {
+            backgroundColor: themeValues.background,
+            borderRadius: themeValues.borderRadius
+          },
+          nodeColor: themeValues.primary
+        }),
+        Background && import_react3.default.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 import_react3.default.createElement(FlowView, {
+        config,
+        className: options?.className ?? "fmcp-flow-content"
+      });
+    } catch {
+      return import_react3.default.createElement(import_Alert.default, { severity: "error" }, "Invalid flow JSON");
+    }
+  }
+};
+var flowRenderer = new FlowRenderer();

package/renderer/html/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ContentRenderer, RenderOptions } from '../types';
+/** @internal Exported for testing */
+export declare function escapeHtml(html: string): string;
+export declare class HtmlRenderer implements ContentRenderer {
+    readonly type = "html";
+    readonly priority = 0;
+    canHandle(content: string): boolean;
+    render(content: string, options?: RenderOptions): React.ReactElement;
+}
+export declare const htmlRenderer: HtmlRenderer;
+//# sourceMappingURL=index.d.ts.map

package/renderer/html/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/html/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAgD/D,qCAAqC;AACrC,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAO/C;AA2CD,qBAAa,YAAa,YAAW,eAAe;IAClD,QAAQ,CAAC,IAAI,UAAU;IACvB,QAAQ,CAAC,QAAQ,KAAK;IAEtB,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO;IAInC,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY;CAMrE;AAED,eAAO,MAAM,YAAY,cAAqB,CAAC"}