@frontmcp/ui 0.12.2 → 1.0.0-beta.1

package/esm/react/index.mjs

@@ -1,274 +1,3 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// libs/ui/src/react/Card.tsx
-import {
-  getCardVariantClasses,
-  getCardSizeClasses,
-  cn
-} from "@frontmcp/uipack/styles";
-
-// libs/ui/src/render/prerender.ts
-async function renderToString(element) {
-  const { prerender } = await import("react-dom/static");
-  const { prelude } = await prerender(element);
-  const reader = prelude.getReader();
-  const chunks = [];
-  while (true) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    if (value) chunks.push(value);
-  }
-  const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
-  const combined = new Uint8Array(totalLength);
-  let offset = 0;
-  for (const chunk of chunks) {
-    combined.set(chunk, offset);
-    offset += chunk.length;
-  }
-  return new TextDecoder().decode(combined);
-}
-function renderToStringSync(element) {
-  const ReactDOMServer = __require("react-dom/server");
-  return ReactDOMServer.renderToStaticMarkup(element);
-}
-
-// libs/ui/src/react/Card.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function Card({
-  title,
-  subtitle,
-  headerActions,
-  footer,
-  variant = "default",
-  size = "md",
-  className,
-  id,
-  clickable,
-  href,
-  children
-}) {
-  const variantClasses = getCardVariantClasses(variant);
-  const sizeClasses = getCardSizeClasses(size);
-  const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
-  const allClasses = cn(variantClasses, sizeClasses, clickableClasses, className);
-  const hasHeader = title || subtitle || headerActions;
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    hasHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-text-primary", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary mt-1", children: subtitle })
-      ] }),
-      headerActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerActions })
-    ] }),
-    children,
-    footer && /* @__PURE__ */ jsx("div", { className: "mt-4 pt-4 border-t border-divider", children: footer })
-  ] });
-  if (href) {
-    return /* @__PURE__ */ jsx("a", { href, className: allClasses, id, children: content });
-  }
-  return /* @__PURE__ */ jsx("div", { className: allClasses, id, children: content });
-}
-async function renderCard(props) {
-  const { children, headerActions, footer, ...rest } = props;
-  const element = /* @__PURE__ */ jsx(
-    Card,
-    {
-      ...rest,
-      headerActions: headerActions ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: headerActions } }) : void 0,
-      footer: footer ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: footer } }) : void 0,
-      children: children ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: children } }) : void 0
-    }
-  );
-  return renderToString(element);
-}
-function renderCardSync(props) {
-  const { children, headerActions, footer, ...rest } = props;
-  const element = /* @__PURE__ */ jsx(
-    Card,
-    {
-      ...rest,
-      headerActions: headerActions ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: headerActions } }) : void 0,
-      footer: footer ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: footer } }) : void 0,
-      children: children ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: children } }) : void 0
-    }
-  );
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/Badge.tsx
-import {
-  getBadgeVariantClasses,
-  getBadgeSizeClasses,
-  getBadgeDotSizeClasses,
-  getBadgeDotVariantClasses,
-  cn as cn2
-} from "@frontmcp/uipack/styles";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function Badge({
-  variant = "default",
-  size = "md",
-  pill = false,
-  icon,
-  dot = false,
-  className,
-  removable = false,
-  onRemove,
-  children
-}) {
-  if (dot) {
-    const dotClasses = cn2(
-      "inline-block rounded-full",
-      getBadgeDotSizeClasses(size),
-      getBadgeDotVariantClasses(variant),
-      className
-    );
-    const label = typeof children === "string" ? children : void 0;
-    return /* @__PURE__ */ jsx2("span", { className: dotClasses, "aria-label": label, title: label });
-  }
-  const variantClasses = getBadgeVariantClasses(variant);
-  const sizeClasses = getBadgeSizeClasses(size);
-  const baseClasses = cn2(
-    "inline-flex items-center font-medium",
-    pill ? "rounded-full" : "rounded-md",
-    variantClasses,
-    sizeClasses,
-    className
-  );
-  return /* @__PURE__ */ jsxs2("span", { className: baseClasses, children: [
-    icon && /* @__PURE__ */ jsx2("span", { className: "mr-1", children: icon }),
-    children,
-    removable && /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        className: "ml-1.5 -mr-1 hover:opacity-70 transition-opacity",
-        "aria-label": "Remove",
-        onClick: onRemove,
-        children: /* @__PURE__ */ jsx2("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
-      }
-    )
-  ] });
-}
-async function renderBadge(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ jsx2(Badge, { ...rest, icon: icon ? /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToString(element);
-}
-function renderBadgeSync(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ jsx2(Badge, { ...rest, icon: icon ? /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/Button.tsx
-import {
-  getButtonVariantClasses,
-  getButtonSizeClasses,
-  BUTTON_BASE_CLASSES,
-  LOADING_SPINNER,
-  cn as cn3
-} from "@frontmcp/uipack/styles";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function Button({
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  loading = false,
-  fullWidth = false,
-  iconPosition = "left",
-  icon,
-  iconOnly = false,
-  type = "button",
-  className,
-  onClick,
-  children
-}) {
-  const variantClasses = getButtonVariantClasses(variant);
-  const sizeClasses = getButtonSizeClasses(size, iconOnly);
-  const disabledClasses = disabled || loading ? "opacity-50 cursor-not-allowed" : "";
-  const widthClasses = fullWidth ? "w-full" : "";
-  const allClasses = cn3(BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className);
-  const iconElement = icon && /* @__PURE__ */ jsx3("span", { className: iconPosition === "left" ? "mr-2" : "ml-2", children: icon });
-  return /* @__PURE__ */ jsxs3("button", { type, className: allClasses, disabled: disabled || loading, onClick, children: [
-    loading && /* @__PURE__ */ jsx3("span", { className: "mr-2", dangerouslySetInnerHTML: { __html: LOADING_SPINNER } }),
-    !loading && icon && iconPosition === "left" && iconElement,
-    !iconOnly && children,
-    !loading && icon && iconPosition === "right" && iconElement
-  ] });
-}
-async function renderButton(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ jsx3(Button, { ...rest, icon: icon ? /* @__PURE__ */ jsx3("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToString(element);
-}
-function renderButtonSync(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ jsx3(Button, { ...rest, icon: icon ? /* @__PURE__ */ jsx3("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/Alert.tsx
-import {
-  getAlertVariantClasses,
-  ALERT_BASE_CLASSES,
-  ALERT_ICONS,
-  CLOSE_ICON,
-  cn as cn4
-} from "@frontmcp/uipack/styles";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function Alert({
-  variant = "info",
-  title,
-  icon,
-  showIcon = true,
-  dismissible = false,
-  onDismiss,
-  className,
-  children
-}) {
-  const variantStyles = getAlertVariantClasses(variant);
-  const allClasses = cn4(ALERT_BASE_CLASSES, variantStyles.container, className);
-  const iconContent = icon || (showIcon ? /* @__PURE__ */ jsx4(
-    "span",
-    {
-      className: cn4("flex-shrink-0", variantStyles.icon),
-      dangerouslySetInnerHTML: { __html: ALERT_ICONS[variant] }
-    }
-  ) : null);
-  return /* @__PURE__ */ jsx4("div", { className: allClasses, role: "alert", children: /* @__PURE__ */ jsxs4("div", { className: "flex", children: [
-    iconContent && /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0 mr-3", children: iconContent }),
-    /* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
-      title && /* @__PURE__ */ jsx4("h4", { className: "font-semibold mb-1", children: title }),
-      /* @__PURE__ */ jsx4("div", { className: "text-sm", children })
-    ] }),
-    dismissible && /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        className: "flex-shrink-0 ml-3 hover:opacity-70 transition-opacity",
-        "aria-label": "Dismiss",
-        onClick: onDismiss,
-        children: /* @__PURE__ */ jsx4("span", { dangerouslySetInnerHTML: { __html: CLOSE_ICON } })
-      }
-    )
-  ] }) });
-}
-async function renderAlert(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ jsx4(Alert, { ...rest, icon: icon ? /* @__PURE__ */ jsx4("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToString(element);
-}
-function renderAlertSync(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ jsx4(Alert, { ...rest, icon: icon ? /* @__PURE__ */ jsx4("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToStringSync(element);
-}
-
 // libs/ui/src/react/hooks/context.tsx
 import { createContext, useContext, useEffect, useState, useMemo } from "react";
 
@@ -809,7 +538,7 @@ var FrontMcpBridge = class {
 };
 
 // libs/ui/src/react/hooks/context.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var McpBridgeContext = createContext(null);
 function McpBridgeProvider({ children, config, onReady, onError }) {
   const [bridge, setBridge] = useState(null);
@@ -855,7 +584,7 @@ function McpBridgeProvider({ children, config, onReady, onError }) {
     }),
     [bridge, loading, error]
   );
-  return /* @__PURE__ */ jsx5(McpBridgeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(McpBridgeContext.Provider, { value: contextValue, children });
 }
 var SSR_DEFAULT_CONTEXT = {
   bridge: null,
@@ -1154,19 +883,7 @@ function useOpenLink() {
   );
 }
 export {
-  Alert,
-  Badge,
-  Button,
-  Card,
   McpBridgeProvider,
-  renderAlert,
-  renderAlertSync,
-  renderBadge,
-  renderBadgeSync,
-  renderButton,
-  renderButtonSync,
-  renderCard,
-  renderCardSync,
   useCallTool,
   useCapability,
   useDisplayMode,

package/esm/renderer/charts/index.mjs

@@ -0,0 +1,336 @@
+// libs/ui/src/renderer/charts/index.ts
+import React, { 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/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/charts/index.ts
+var CHART_TYPE_RE = /"type"\s*:\s*"(?:bar|line|area|pie|scatter|radar|composed)"/;
+function isChart(content) {
+  const trimmed = content.trim();
+  if (trimmed.charCodeAt(0) !== 123) return false;
+  return CHART_TYPE_RE.test(trimmed) && trimmed.includes('"data"');
+}
+var lazyRecharts = createLazyImport("recharts", async () => {
+  const mod = await runtimeImportWithFallback("recharts", esmShUrl("recharts@2", { external: ["react", "react-dom"] }));
+  return mod;
+});
+var ChartRoot = styled(Box, {
+  name: "FrontMcpChart",
+  slot: "Root"
+})(({ theme }) => ({
+  width: "100%",
+  padding: theme.spacing(2)
+}));
+function ChartView({ config, className }) {
+  const themeValues = useRendererTheme();
+  const recharts = useLazyModule(lazyRecharts);
+  const colors = useMemo2(() => config.colors ?? themeValues.seriesColors, [config.colors, themeValues.seriesColors]);
+  if (!recharts) {
+    return React.createElement(Alert, { severity: "info" }, "Loading chart library...");
+  }
+  const { ResponsiveContainer, Tooltip, Legend, CartesianGrid, XAxis, YAxis } = recharts;
+  const height = config.height ?? 400;
+  const xKey = config.xKey ?? "name";
+  const yKeys = config.yKeys ?? Object.keys(config.data?.[0] ?? {}).filter((k) => k !== xKey);
+  const chartContent = renderChartType(
+    recharts,
+    config.type,
+    config.data,
+    xKey,
+    yKeys,
+    colors,
+    themeValues.borderRadius
+  );
+  return React.createElement(
+    ChartRoot,
+    { className },
+    config.title && React.createElement(
+      Typography,
+      { variant: "subtitle1", gutterBottom: true, fontWeight: 600, textAlign: "center" },
+      config.title
+    ),
+    React.createElement(ResponsiveContainer, { width: "100%", height }, chartContent)
+  );
+}
+function renderChartType(rc, type, data, xKey, yKeys, colors, borderRadius) {
+  const commonProps = { data };
+  const grid = React.createElement(rc.CartesianGrid, { strokeDasharray: "3 3", opacity: 0.3 });
+  const xAxis = React.createElement(rc.XAxis, { dataKey: xKey });
+  const yAxis = React.createElement(rc.YAxis);
+  const tooltip = React.createElement(rc.Tooltip, { contentStyle: { borderRadius } });
+  const legend = React.createElement(rc.Legend);
+  switch (type) {
+    case "bar":
+      return React.createElement(
+        rc.BarChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React.createElement(rc.Bar, {
+            key,
+            dataKey: key,
+            fill: colors[i % colors.length],
+            radius: [borderRadius, borderRadius, 0, 0]
+          })
+        )
+      );
+    case "line":
+      return React.createElement(
+        rc.LineChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React.createElement(rc.Line, {
+            key,
+            type: "monotone",
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            strokeWidth: 2
+          })
+        )
+      );
+    case "area":
+      return React.createElement(
+        rc.AreaChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React.createElement(rc.Area, {
+            key,
+            type: "monotone",
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            fill: colors[i % colors.length],
+            fillOpacity: 0.3
+          })
+        )
+      );
+    case "pie":
+      return React.createElement(
+        rc.PieChart,
+        {},
+        tooltip,
+        legend,
+        React.createElement(
+          rc.Pie,
+          { data, dataKey: yKeys[0] ?? "value", nameKey: xKey, cx: "50%", cy: "50%", outerRadius: "80%", label: true },
+          ...data.map((_, i) => React.createElement(rc.Cell, { key: i, fill: colors[i % colors.length] }))
+        )
+      );
+    case "scatter":
+      return React.createElement(
+        rc.ScatterChart,
+        {},
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React.createElement(rc.Scatter, { key, name: key, dataKey: key, data, fill: colors[i % colors.length] })
+        )
+      );
+    case "radar":
+      return React.createElement(
+        rc.RadarChart,
+        { cx: "50%", cy: "50%", outerRadius: "80%", data },
+        React.createElement(rc.PolarGrid),
+        React.createElement(rc.PolarAngleAxis, { dataKey: xKey }),
+        React.createElement(rc.PolarRadiusAxis),
+        tooltip,
+        legend,
+        ...yKeys.map(
+          (key, i) => React.createElement(rc.Radar, {
+            key,
+            name: key,
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            fill: colors[i % colors.length],
+            fillOpacity: 0.3
+          })
+        )
+      );
+    case "composed":
+      return React.createElement(
+        rc.ComposedChart,
+        commonProps,
+        grid,
+        xAxis,
+        yAxis,
+        tooltip,
+        legend,
+        ...yKeys.map((key, i) => {
+          if (i % 2 === 0) {
+            return React.createElement(rc.Bar, {
+              key,
+              dataKey: key,
+              fill: colors[i % colors.length],
+              radius: [borderRadius, borderRadius, 0, 0]
+            });
+          }
+          return React.createElement(rc.Line, {
+            key,
+            type: "monotone",
+            dataKey: key,
+            stroke: colors[i % colors.length],
+            strokeWidth: 2
+          });
+        })
+      );
+    default:
+      return React.createElement(rc.BarChart, commonProps, grid, xAxis, yAxis, tooltip, legend);
+  }
+}
+lazyRecharts.load().catch(() => {
+});
+var ChartsRenderer = class {
+  type = "chart";
+  priority = 80;
+  canHandle(content) {
+    return isChart(content);
+  }
+  render(content, options) {
+    try {
+      const config = JSON.parse(content);
+      return React.createElement(ChartView, {
+        config,
+        className: options?.className ?? "fmcp-chart-content"
+      });
+    } catch {
+      return React.createElement(Alert, { severity: "error" }, "Invalid chart JSON");
+    }
+  }
+};
+var chartsRenderer = new ChartsRenderer();
+export {
+  ChartsRenderer,
+  chartsRenderer,
+  isChart
+};