@frontmcp/ui 0.12.2 → 1.0.0-beta.2

package/esm/renderer/react/index.mjs

@@ -0,0 +1,230 @@
+// libs/ui/src/renderer/react/index.ts
+import React, { useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Alert from "@mui/material/Alert";
+
+// libs/ui/src/renderer/common/lazy-import.ts
+function runtimeImport(specifier) {
+  const dynamicImport = new Function("s", "return import(s)");
+  return dynamicImport(specifier);
+}
+
+// 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 = React;
+    } 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] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    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 React.createElement(Box, { className, sx: { p: 2, color: "text.secondary" } }, "Transpiling JSX...");
+  }
+  if (error) {
+    return React.createElement(
+      Box,
+      { className },
+      React.createElement(Alert, { severity: "error", sx: { mb: 1 } }, `JSX render error: ${error}`),
+      React.createElement(
+        "pre",
+        { style: { fontFamily: "monospace", whiteSpace: "pre-wrap", fontSize: "0.85em" } },
+        source
+      )
+    );
+  }
+  if (!Component) {
+    return React.createElement(
+      Box,
+      { className },
+      React.createElement(Alert, { severity: "warning" }, "No component exported. Use `export default MyComponent`.")
+    );
+  }
+  return React.createElement(Box, { className }, React.createElement(Component, {}));
+}
+var ReactJsxRenderer = class {
+  type = "jsx";
+  priority = 10;
+  canHandle(content) {
+    return isReactJsx(content);
+  }
+  render(content, options) {
+    return React.createElement(ReactJsxView, {
+      source: content,
+      className: options?.className ?? "fmcp-jsx-content"
+    });
+  }
+};
+var reactJsxRenderer = new ReactJsxRenderer();
+export {
+  ReactJsxRenderer,
+  isReactJsx,
+  parseImports,
+  reactJsxRenderer,
+  rewriteExportDefault,
+  stripImports
+};

package/esm/runtime/index.mjs

@@ -0,0 +1,194 @@
+// 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/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;
+}
+function isBabelLoaded() {
+  return babelState.status === "loaded";
+}
+function resetBabelState() {
+  babelState = { status: "idle" };
+}
+export {
+  BABEL_STANDALONE_CDN,
+  BABEL_STANDALONE_FALLBACK_CDN,
+  detectContentType,
+  isBabelLoaded,
+  loadBabel,
+  resetBabelState,
+  transpileJsx
+};

package/esm/theme/index.mjs

@@ -0,0 +1,93 @@
+// libs/ui/src/theme/create-theme.ts
+import { createTheme } from "@mui/material/styles";
+var SYSTEM_FONT_STACK = [
+  "-apple-system",
+  "BlinkMacSystemFont",
+  '"Segoe UI"',
+  "Roboto",
+  '"Helvetica Neue"',
+  "Arial",
+  "sans-serif"
+].join(",");
+var MONO_FONT_STACK = [
+  '"SF Mono"',
+  '"Fira Code"',
+  '"Fira Mono"',
+  "Menlo",
+  "Consolas",
+  '"DejaVu Sans Mono"',
+  "monospace"
+].join(",");
+function createFrontMcpTheme(config) {
+  const mode = config?.mode ?? "light";
+  const palette = config?.palette;
+  const typography = config?.typography;
+  const shape = config?.shape;
+  return createTheme({
+    palette: {
+      mode,
+      primary: { main: palette?.primary ?? "#0969da" },
+      secondary: { main: palette?.secondary ?? "#8250df" },
+      success: { main: palette?.success ?? "#1a7f37" },
+      warning: { main: palette?.warning ?? "#bf8700" },
+      error: { main: palette?.error ?? "#cf222e" },
+      info: { main: palette?.info ?? "#0550ae" },
+      ...palette?.background ? { background: { default: palette.background, paper: palette.surface ?? palette.background } } : {},
+      ...palette?.text ? { text: { primary: palette.text } } : {}
+    },
+    typography: {
+      fontFamily: typography?.fontFamily ?? SYSTEM_FONT_STACK,
+      fontSize: typography?.fontSize ?? 14
+    },
+    shape: {
+      borderRadius: shape?.borderRadius ?? 8
+    },
+    components: {
+      MuiButtonBase: {
+        defaultProps: {
+          disableRipple: false
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            fontWeight: 500
+          }
+        }
+      }
+    }
+  });
+}
+var defaultTheme = createFrontMcpTheme();
+var darkTheme = createFrontMcpTheme({ mode: "dark" });
+
+// libs/ui/src/theme/FrontMcpThemeProvider.tsx
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FrontMcpThemeProvider({
+  theme: themeConfig,
+  children
+}) {
+  const muiTheme = themeConfig ? createFrontMcpTheme(themeConfig) : defaultTheme;
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: muiTheme, children: [
+    /* @__PURE__ */ jsx(CssBaseline, {}),
+    children
+  ] });
+}
+
+// libs/ui/src/theme/use-theme.ts
+import { useTheme as useMuiTheme } from "@mui/material/styles";
+function useFrontMcpTheme() {
+  return useMuiTheme();
+}
+export {
+  FrontMcpThemeProvider,
+  MONO_FONT_STACK,
+  SYSTEM_FONT_STACK,
+  createFrontMcpTheme,
+  darkTheme,
+  defaultTheme,
+  useFrontMcpTheme
+};

package/index.d.ts

@@ -1,37 +1,29 @@
 /**
  * @frontmcp/ui
  *
- * UI component library for FrontMCP applications.
- * Provides HTML components, React components, and rendering utilities.
+ * MUI-based React component library for FrontMCP applications.
+ * Provides themed components, content renderers, and MCP bridge hooks.
  *
- * For build tools, bundling, platform adapters, and theming, use @frontmcp/uipack.
- *
- * @example HTML components
+ * @example Theme
  * ```typescript
- * import { button, card, alert, badge } from '@frontmcp/ui/components';
- * import { baseLayout } from '@frontmcp/ui/layouts';
+ * import { FrontMcpThemeProvider, createFrontMcpTheme } from '@frontmcp/ui/theme';
  * ```
  *
- * @example Theme (from uipack)
+ * @example Components
  * ```typescript
- * import { DEFAULT_THEME, createTheme } from '@frontmcp/uipack/theme';
+ * import { Button, Card, Alert } from '@frontmcp/ui/components';
  * ```
  *
- * @example React components
+ * @example React hooks
  * ```typescript
- * import { Button, Card, Alert, Badge } from '@frontmcp/ui/react';
- * import { useMcpBridge, useCallTool } from '@frontmcp/ui/react/hooks';
+ * import { useMcpBridge, useCallTool } from '@frontmcp/ui/react';
  * ```
  *
- * @example Universal renderer
+ * @example Renderer
  * ```typescript
- * import { UniversalApp, FrontMCPProvider } from '@frontmcp/ui/universal';
+ * import { renderContent, detectContentType } from '@frontmcp/ui/renderer';
  * ```
  */
-export * from './components';
-export * from './layouts';
 export { type PlatformAdapter, type AdapterCapabilities, type BridgeConfig, FrontMcpBridge, createBridge, AdapterRegistry, defaultRegistry, registerAdapter, generateBridgeIIFE, generatePlatformBundle, UNIVERSAL_BRIDGE_SCRIPT, BRIDGE_SCRIPT_TAGS, } from './bridge';
-export { registerAllComponents, registerFmcpButton, registerFmcpCard, registerFmcpAlert, registerFmcpBadge, registerFmcpInput, registerFmcpSelect, FmcpButton, FmcpCard, FmcpAlert, FmcpBadge, FmcpInput, FmcpSelect, FmcpElement, } from './web-components';
 export * from './react';
-export { ReactRenderer, reactRenderer, ReactRendererAdapter, createReactAdapter, loadReactAdapter } from './renderers';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAKH,cAAc,cAAc,CAAC;AAK7B,cAAc,WAAW,CAAC;AAK1B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAEjB,cAAc,EACd,YAAY,EAEZ,eAAe,EACf,eAAe,EACf,eAAe,EAEf,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAKlB,OAAO,EAEL,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAElB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EAEV,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAK1B,cAAc,SAAS,CAAC;AAKxB,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAKH,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAEjB,cAAc,EACd,YAAY,EAEZ,eAAe,EACf,eAAe,EACf,eAAe,EAEf,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAKlB,cAAc,SAAS,CAAC"}