@frontmcp/ui 0.12.2 → 1.0.0-beta.2

package/renderer/html/index.js

@@ -0,0 +1,130 @@
+"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/html/index.ts
+var html_exports = {};
+__export(html_exports, {
+  HtmlRenderer: () => HtmlRenderer,
+  escapeHtml: () => escapeHtml,
+  htmlRenderer: () => htmlRenderer
+});
+module.exports = __toCommonJS(html_exports);
+var import_react = __toESM(require("react"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_styles = 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);
+  }
+}
+
+// libs/ui/src/renderer/html/index.ts
+var HtmlRoot = (0, import_styles.styled)(import_Box.default, {
+  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] = (0, import_react.useState)(!!purifyModule);
+  (0, import_react.useEffect)(() => {
+    if (!purifyModule) {
+      loadDOMPurify().then((mod) => {
+        if (mod) setPurifyReady(true);
+      });
+    }
+  }, []);
+  const sanitized = (0, import_react.useMemo)(() => sanitizeSync(html), [html, purifyReady]);
+  return import_react.default.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 import_react.default.createElement(HtmlView, {
+      html: content,
+      className: options?.className ?? "fmcp-html-content"
+    });
+  }
+};
+var htmlRenderer = new HtmlRenderer();

package/renderer/image/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ContentRenderer, RenderOptions } from '../types';
+export declare function isImage(content: string): boolean;
+export declare class ImageRenderer implements ContentRenderer {
+    readonly type = "image";
+    readonly priority = 30;
+    canHandle(content: string): boolean;
+    render(content: string, options?: RenderOptions): React.ReactElement;
+}
+export declare const imageRenderer: ImageRenderer;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAW/D,wBAAgB,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAGhD;AAgID,qBAAa,aAAc,YAAW,eAAe;IACnD,QAAQ,CAAC,IAAI,WAAW;IACxB,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;CASrE;AAED,eAAO,MAAM,aAAa,eAAsB,CAAC"}

package/renderer/image/index.js

@@ -0,0 +1,156 @@
+"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/image/index.ts
+var image_exports = {};
+__export(image_exports, {
+  ImageRenderer: () => ImageRenderer,
+  imageRenderer: () => imageRenderer,
+  isImage: () => isImage
+});
+module.exports = __toCommonJS(image_exports);
+var import_react = __toESM(require("react"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Skeleton = __toESM(require("@mui/material/Skeleton"));
+var import_Alert = __toESM(require("@mui/material/Alert"));
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_styles = require("@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 = (0, import_styles.styled)(import_Box.default, {
+  name: "FrontMcpImage",
+  slot: "Root"
+})({
+  display: "inline-block",
+  position: "relative",
+  maxWidth: "100%"
+});
+var StyledImage = (0, import_styles.styled)("img", {
+  name: "FrontMcpImage",
+  slot: "Image"
+})({
+  maxWidth: "100%",
+  height: "auto",
+  display: "block",
+  cursor: "pointer",
+  borderRadius: "inherit"
+});
+var LightboxBackdrop = (0, import_styles.styled)(import_Box.default, {
+  name: "FrontMcpImage",
+  slot: "Lightbox"
+})({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 16
+});
+var LightboxImage = (0, import_styles.styled)("img")({
+  maxWidth: "90vw",
+  maxHeight: "90vh",
+  objectFit: "contain",
+  borderRadius: 8
+});
+function LightboxOverlay({ src, alt, onClose }) {
+  return import_react.default.createElement(
+    LightboxBackdrop,
+    {
+      onClick: onClose,
+      sx: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1300,
+        bgcolor: "rgba(0,0,0,0.8)"
+      }
+    },
+    import_react.default.createElement(LightboxImage, { src, alt })
+  );
+}
+function ImageView({ src, alt, caption, className }) {
+  const [loaded, setLoaded] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(false);
+  const [lightboxOpen, setLightboxOpen] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setLoaded(false);
+    setError(false);
+    setLightboxOpen(false);
+  }, [src]);
+  const handleLoad = (0, import_react.useCallback)(() => setLoaded(true), []);
+  const handleError = (0, import_react.useCallback)(() => {
+    setLoaded(true);
+    setError(true);
+  }, []);
+  if (error) {
+    return import_react.default.createElement(import_Alert.default, { severity: "error" }, `Failed to load image: ${src}`);
+  }
+  return import_react.default.createElement(
+    ImageRoot,
+    { className },
+    !loaded && import_react.default.createElement(import_Skeleton.default, { variant: "rectangular", width: 400, height: 300 }),
+    import_react.default.createElement(StyledImage, {
+      src,
+      alt: alt ?? "Image",
+      onLoad: handleLoad,
+      onError: handleError,
+      onClick: () => setLightboxOpen(true),
+      style: loaded ? void 0 : { display: "none" }
+    }),
+    caption && import_react.default.createElement(
+      import_Typography.default,
+      { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block", textAlign: "center" } },
+      caption
+    ),
+    lightboxOpen && import_react.default.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 import_react.default.createElement(ImageView, {
+      src: content.trim(),
+      alt: options?.toolName ?? "Image",
+      caption,
+      className: options?.className ?? "fmcp-image-content"
+    });
+  }
+};
+var imageRenderer = new ImageRenderer();

package/renderer/index.d.ts

@@ -0,0 +1,32 @@
+export type { ContentRenderer, RenderOptions, ContentType } from './types';
+export { detectContentType, renderContent, registerRenderer, clearRegistry, getRenderer, getRegisteredRenderers, ContentView, type ContentViewProps, type DetectedContentType, } from './auto-detect';
+export { useRendererTheme, extractThemeValues, type RendererThemeValues } from './common';
+export { injectStylesheet } from './common';
+export { createLazyImport, runtimeImportWithFallback, esmShUrl, ESM_SH_BASE, type LazyImport, type LazyImportState, } from './common';
+export { useLazyModule } from './common';
+export { MdxRenderer, mdxRenderer } from './mdx';
+export { HtmlRenderer, htmlRenderer } from './html';
+export { ReactJsxRenderer, reactJsxRenderer } from './react';
+export { PdfRenderer, pdfRenderer } from './pdf';
+export { CsvRenderer, csvRenderer } from './csv';
+export { ImageRenderer, imageRenderer } from './image';
+export { ChartsRenderer, chartsRenderer } from './charts';
+export { MermaidRenderer, mermaidRenderer } from './mermaid';
+export { FlowRenderer, flowRenderer } from './flow';
+export { MathRenderer, mathRenderer } from './math';
+export { MapsRenderer, mapsRenderer } from './maps';
+export { VideoRenderer, AudioRenderer, videoRenderer, audioRenderer } from './media';
+export { isImage } from './image';
+export { isChart } from './charts';
+export { isMermaid } from './mermaid';
+export { isFlow } from './flow';
+export { isMath } from './math';
+export { isMap } from './maps';
+export { isVideo, isAudio, isMedia } from './media';
+export { isReactJsx } from './react';
+/**
+ * Register all built-in renderers with the auto-detect registry.
+ * Call this once at app startup if you want all renderers available.
+ */
+export declare function registerAllRenderers(): void;
+//# sourceMappingURL=index.d.ts.map

package/renderer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/renderer/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,sBAAsB,EACtB,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EACL,gBAAgB,EAChB,yBAAyB,EACzB,QAAQ,EACR,WAAW,EACX,KAAK,UAAU,EACf,KAAK,eAAe,GACrB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGrF,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiBrC;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAoB3C"}