@frontmcp/ui 0.12.2 → 1.0.0-beta.1

package/react/index.js

@@ -1,9 +1,7 @@
 "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)
@@ -17,32 +15,12 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/react/index.ts
 var react_exports = {};
 __export(react_exports, {
-  Alert: () => Alert,
-  Badge: () => Badge,
-  Button: () => Button,
-  Card: () => Card,
   McpBridgeProvider: () => McpBridgeProvider,
-  renderAlert: () => renderAlert,
-  renderAlertSync: () => renderAlertSync,
-  renderBadge: () => renderBadge,
-  renderBadgeSync: () => renderBadgeSync,
-  renderButton: () => renderButton,
-  renderButtonSync: () => renderButtonSync,
-  renderCard: () => renderCard,
-  renderCardSync: () => renderCardSync,
   useCallTool: () => useCallTool,
   useCapability: () => useCapability,
   useDisplayMode: () => useDisplayMode,
@@ -59,248 +37,6 @@ __export(react_exports, {
 });
 module.exports = __toCommonJS(react_exports);
 
-// libs/ui/src/react/Card.tsx
-var import_styles = require("@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
-var import_jsx_runtime = require("react/jsx-runtime");
-function Card({
-  title,
-  subtitle,
-  headerActions,
-  footer,
-  variant = "default",
-  size = "md",
-  className,
-  id,
-  clickable,
-  href,
-  children
-}) {
-  const variantClasses = (0, import_styles.getCardVariantClasses)(variant);
-  const sizeClasses = (0, import_styles.getCardSizeClasses)(size);
-  const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
-  const allClasses = (0, import_styles.cn)(variantClasses, sizeClasses, clickableClasses, className);
-  const hasHeader = title || subtitle || headerActions;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold text-text-primary", children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-text-secondary mt-1", children: subtitle })
-      ] }),
-      headerActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: headerActions })
-    ] }),
-    children,
-    footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 pt-4 border-t border-divider", children: footer })
-  ] });
-  if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, className: allClasses, id, children: content });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: allClasses, id, children: content });
-}
-async function renderCard(props) {
-  const { children, headerActions, footer, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Card,
-    {
-      ...rest,
-      headerActions: headerActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: headerActions } }) : void 0,
-      footer: footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: footer } }) : void 0,
-      children: children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: children } }) : void 0
-    }
-  );
-  return renderToString(element);
-}
-function renderCardSync(props) {
-  const { children, headerActions, footer, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Card,
-    {
-      ...rest,
-      headerActions: headerActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: headerActions } }) : void 0,
-      footer: footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: footer } }) : void 0,
-      children: children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: children } }) : void 0
-    }
-  );
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/Badge.tsx
-var import_styles2 = require("@frontmcp/uipack/styles");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Badge({
-  variant = "default",
-  size = "md",
-  pill = false,
-  icon,
-  dot = false,
-  className,
-  removable = false,
-  onRemove,
-  children
-}) {
-  if (dot) {
-    const dotClasses = (0, import_styles2.cn)(
-      "inline-block rounded-full",
-      (0, import_styles2.getBadgeDotSizeClasses)(size),
-      (0, import_styles2.getBadgeDotVariantClasses)(variant),
-      className
-    );
-    const label = typeof children === "string" ? children : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: dotClasses, "aria-label": label, title: label });
-  }
-  const variantClasses = (0, import_styles2.getBadgeVariantClasses)(variant);
-  const sizeClasses = (0, import_styles2.getBadgeSizeClasses)(size);
-  const baseClasses = (0, import_styles2.cn)(
-    "inline-flex items-center font-medium",
-    pill ? "rounded-full" : "rounded-md",
-    variantClasses,
-    sizeClasses,
-    className
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: baseClasses, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-1", children: icon }),
-    children,
-    removable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "ml-1.5 -mr-1 hover:opacity-70 transition-opacity",
-        "aria-label": "Remove",
-        onClick: onRemove,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(Badge, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToString(element);
-}
-function renderBadgeSync(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/Button.tsx
-var import_styles3 = require("@frontmcp/uipack/styles");
-var import_jsx_runtime3 = require("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 = (0, import_styles3.getButtonVariantClasses)(variant);
-  const sizeClasses = (0, import_styles3.getButtonSizeClasses)(size, iconOnly);
-  const disabledClasses = disabled || loading ? "opacity-50 cursor-not-allowed" : "";
-  const widthClasses = fullWidth ? "w-full" : "";
-  const allClasses = (0, import_styles3.cn)(import_styles3.BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className);
-  const iconElement = icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: iconPosition === "left" ? "mr-2" : "ml-2", children: icon });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { type, className: allClasses, disabled: disabled || loading, onClick, children: [
-    loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mr-2", dangerouslySetInnerHTML: { __html: import_styles3.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__ */ (0, import_jsx_runtime3.jsx)(Button, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToString(element);
-}
-function renderButtonSync(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/Alert.tsx
-var import_styles4 = require("@frontmcp/uipack/styles");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function Alert({
-  variant = "info",
-  title,
-  icon,
-  showIcon = true,
-  dismissible = false,
-  onDismiss,
-  className,
-  children
-}) {
-  const variantStyles = (0, import_styles4.getAlertVariantClasses)(variant);
-  const allClasses = (0, import_styles4.cn)(import_styles4.ALERT_BASE_CLASSES, variantStyles.container, className);
-  const iconContent = icon || (showIcon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "span",
-    {
-      className: (0, import_styles4.cn)("flex-shrink-0", variantStyles.icon),
-      dangerouslySetInnerHTML: { __html: import_styles4.ALERT_ICONS[variant] }
-    }
-  ) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: allClasses, role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex", children: [
-    iconContent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0 mr-3", children: iconContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { className: "font-semibold mb-1", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm", children })
-    ] }),
-    dismissible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "flex-shrink-0 ml-3 hover:opacity-70 transition-opacity",
-        "aria-label": "Dismiss",
-        onClick: onDismiss,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { dangerouslySetInnerHTML: { __html: import_styles4.CLOSE_ICON } })
-      }
-    )
-  ] }) });
-}
-async function renderAlert(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Alert, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToString(element);
-}
-function renderAlertSync(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Alert, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToStringSync(element);
-}
-
 // libs/ui/src/react/hooks/context.tsx
 var import_react = require("react");
 
@@ -841,7 +577,7 @@ var FrontMcpBridge = class {
 };
 
 // libs/ui/src/react/hooks/context.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var McpBridgeContext = (0, import_react.createContext)(null);
 function McpBridgeProvider({ children, config, onReady, onError }) {
   const [bridge, setBridge] = (0, import_react.useState)(null);
@@ -887,7 +623,7 @@ function McpBridgeProvider({ children, config, onReady, onError }) {
     }),
     [bridge, loading, error]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(McpBridgeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(McpBridgeContext.Provider, { value: contextValue, children });
 }
 var SSR_DEFAULT_CONTEXT = {
   bridge: null,
@@ -1185,32 +921,3 @@ function useOpenLink() {
     [bridge]
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Alert,
-  Badge,
-  Button,
-  Card,
-  McpBridgeProvider,
-  renderAlert,
-  renderAlertSync,
-  renderBadge,
-  renderBadgeSync,
-  renderButton,
-  renderButtonSync,
-  renderCard,
-  renderCardSync,
-  useCallTool,
-  useCapability,
-  useDisplayMode,
-  useHostContext,
-  useMcpBridge,
-  useMcpBridgeContext,
-  useOpenLink,
-  useSendMessage,
-  useStructuredContent,
-  useTheme,
-  useToolCalls,
-  useToolInput,
-  useToolOutput
-});

package/renderer/auto-detect.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { type RuntimeContentType } from '../runtime/content-detector';
+import type { RenderOptions, ContentRenderer, ContentType } from './types';
+export type DetectedContentType = RuntimeContentType | 'pdf' | 'csv';
+export declare function detectContentType(content: string): DetectedContentType;
+/**
+ * Register a content renderer. Higher priority renderers are checked first.
+ * If a renderer with the same type is already registered, it is replaced.
+ */
+export declare function registerRenderer(renderer: ContentRenderer): void;
+/**
+ * Clear all registered renderers. Useful for testing.
+ */
+export declare function clearRegistry(): void;
+/**
+ * Get a renderer by content type string.
+ */
+export declare function getRenderer(type: string): ContentRenderer | undefined;
+/**
+ * Get all registered renderers (sorted by priority, descending).
+ */
+export declare function getRegisteredRenderers(): readonly ContentRenderer[];
+/**
+ * Render content by auto-detecting type and finding a matching renderer.
+ */
+export declare function renderContent(content: string, options?: RenderOptions): React.ReactElement;
+export interface ContentViewProps {
+    content: string;
+    options?: RenderOptions;
+    fallback?: React.ReactNode;
+}
+/**
+ * React component that auto-detects content type and renders it
+ * with Suspense boundary for lazy-loaded renderers.
+ */
+export declare function ContentView({ content, options, fallback }: ContentViewProps): React.ReactElement;
+export { registerRenderer as addRenderer };
+export type { ContentType };
+//# sourceMappingURL=auto-detect.d.ts.map

package/renderer/auto-detect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-detect.d.ts","sourceRoot":"","sources":["../../src/renderer/auto-detect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAuC,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC3G,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3E,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG,KAAK,GAAG,KAAK,CAAC;AAsBrE,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,CAItE;AAaD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAQhE;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,IAAI,CAGpC;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAErE;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,eAAe,EAAE,CAEnE;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CAiB1F;AAMD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAMhG;AAMD,OAAO,EAAE,gBAAgB,IAAI,WAAW,EAAE,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/renderer/charts/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ContentRenderer, RenderOptions } from '../types';
+export interface ChartData {
+    type: 'bar' | 'line' | 'area' | 'pie' | 'scatter' | 'radar' | 'composed';
+    data: Record<string, unknown>[];
+    xKey?: string;
+    yKeys?: string[];
+    colors?: string[];
+    labels?: Record<string, string>;
+    title?: string;
+    width?: number;
+    height?: number;
+}
+export declare function isChart(content: string): boolean;
+export declare class ChartsRenderer implements ContentRenderer {
+    readonly type = "chart";
+    readonly priority = 80;
+    canHandle(content: string): boolean;
+    render(content: string, options?: RenderOptions): React.ReactElement;
+}
+export declare const chartsRenderer: ChartsRenderer;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer/charts/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAM/D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IACzE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAQD,wBAAgB,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAIhD;AA4QD,qBAAa,cAAe,YAAW,eAAe;IACpD,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;CAWrE;AAED,eAAO,MAAM,cAAc,gBAAuB,CAAC"}