@frontmcp/ui 0.12.2 → 1.0.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontmcp/ui",
-  "version": "0.12.2",
-  "description": "FrontMCP UI - React components and hooks for MCP applications",
+  "version": "1.0.0-beta.2",
+  "description": "FrontMCP UI - MUI-based React components, renderers, and MCP bridge for MCP applications",
   "author": "AgentFront <info@agentfront.dev>",
   "homepage": "https://docs.agentfront.dev",
   "license": "Apache-2.0",
@@ -11,10 +11,16 @@
     "agentfront",
     "frontmcp",
     "react",
+    "mui",
+    "material-ui",
     "hooks",
     "components",
-    "ssr",
-    "jsx"
+    "renderers",
+    "charts",
+    "mermaid",
+    "markdown",
+    "pdf",
+    "maps"
   ],
   "repository": {
     "type": "git",
@@ -40,14 +46,304 @@
         "default": "./esm/index.mjs"
       }
     },
-    "./*": {
+    "./theme": {
       "require": {
-        "types": "./*/index.d.ts",
-        "default": "./*/index.js"
+        "types": "./theme/index.d.ts",
+        "default": "./theme/index.js"
       },
       "import": {
-        "types": "./*/index.d.ts",
-        "default": "./esm/*/index.mjs"
+        "types": "./theme/index.d.ts",
+        "default": "./esm/theme/index.mjs"
+      }
+    },
+    "./components": {
+      "require": {
+        "types": "./components/index.d.ts",
+        "default": "./components/index.js"
+      },
+      "import": {
+        "types": "./components/index.d.ts",
+        "default": "./esm/components/index.mjs"
+      }
+    },
+    "./components/Button": {
+      "require": {
+        "types": "./components/Button/index.d.ts",
+        "default": "./components/Button/index.js"
+      },
+      "import": {
+        "types": "./components/Button/index.d.ts",
+        "default": "./esm/components/Button/index.mjs"
+      }
+    },
+    "./components/Card": {
+      "require": {
+        "types": "./components/Card/index.d.ts",
+        "default": "./components/Card/index.js"
+      },
+      "import": {
+        "types": "./components/Card/index.d.ts",
+        "default": "./esm/components/Card/index.mjs"
+      }
+    },
+    "./components/Alert": {
+      "require": {
+        "types": "./components/Alert/index.d.ts",
+        "default": "./components/Alert/index.js"
+      },
+      "import": {
+        "types": "./components/Alert/index.d.ts",
+        "default": "./esm/components/Alert/index.mjs"
+      }
+    },
+    "./components/Badge": {
+      "require": {
+        "types": "./components/Badge/index.d.ts",
+        "default": "./components/Badge/index.js"
+      },
+      "import": {
+        "types": "./components/Badge/index.d.ts",
+        "default": "./esm/components/Badge/index.mjs"
+      }
+    },
+    "./components/Avatar": {
+      "require": {
+        "types": "./components/Avatar/index.d.ts",
+        "default": "./components/Avatar/index.js"
+      },
+      "import": {
+        "types": "./components/Avatar/index.d.ts",
+        "default": "./esm/components/Avatar/index.mjs"
+      }
+    },
+    "./components/Modal": {
+      "require": {
+        "types": "./components/Modal/index.d.ts",
+        "default": "./components/Modal/index.js"
+      },
+      "import": {
+        "types": "./components/Modal/index.d.ts",
+        "default": "./esm/components/Modal/index.mjs"
+      }
+    },
+    "./components/Table": {
+      "require": {
+        "types": "./components/Table/index.d.ts",
+        "default": "./components/Table/index.js"
+      },
+      "import": {
+        "types": "./components/Table/index.d.ts",
+        "default": "./esm/components/Table/index.mjs"
+      }
+    },
+    "./components/TextField": {
+      "require": {
+        "types": "./components/TextField/index.d.ts",
+        "default": "./components/TextField/index.js"
+      },
+      "import": {
+        "types": "./components/TextField/index.d.ts",
+        "default": "./esm/components/TextField/index.mjs"
+      }
+    },
+    "./components/Select": {
+      "require": {
+        "types": "./components/Select/index.d.ts",
+        "default": "./components/Select/index.js"
+      },
+      "import": {
+        "types": "./components/Select/index.d.ts",
+        "default": "./esm/components/Select/index.mjs"
+      }
+    },
+    "./components/List": {
+      "require": {
+        "types": "./components/List/index.d.ts",
+        "default": "./components/List/index.js"
+      },
+      "import": {
+        "types": "./components/List/index.d.ts",
+        "default": "./esm/components/List/index.mjs"
+      }
+    },
+    "./components/Loader": {
+      "require": {
+        "types": "./components/Loader/index.d.ts",
+        "default": "./components/Loader/index.js"
+      },
+      "import": {
+        "types": "./components/Loader/index.d.ts",
+        "default": "./esm/components/Loader/index.mjs"
+      }
+    },
+    "./renderer": {
+      "require": {
+        "types": "./renderer/index.d.ts",
+        "default": "./renderer/index.js"
+      },
+      "import": {
+        "types": "./renderer/index.d.ts",
+        "default": "./esm/renderer/index.mjs"
+      }
+    },
+    "./renderer/mdx": {
+      "require": {
+        "types": "./renderer/mdx/index.d.ts",
+        "default": "./renderer/mdx/index.js"
+      },
+      "import": {
+        "types": "./renderer/mdx/index.d.ts",
+        "default": "./esm/renderer/mdx/index.mjs"
+      }
+    },
+    "./renderer/html": {
+      "require": {
+        "types": "./renderer/html/index.d.ts",
+        "default": "./renderer/html/index.js"
+      },
+      "import": {
+        "types": "./renderer/html/index.d.ts",
+        "default": "./esm/renderer/html/index.mjs"
+      }
+    },
+    "./renderer/react": {
+      "require": {
+        "types": "./renderer/react/index.d.ts",
+        "default": "./renderer/react/index.js"
+      },
+      "import": {
+        "types": "./renderer/react/index.d.ts",
+        "default": "./esm/renderer/react/index.mjs"
+      }
+    },
+    "./renderer/pdf": {
+      "require": {
+        "types": "./renderer/pdf/index.d.ts",
+        "default": "./renderer/pdf/index.js"
+      },
+      "import": {
+        "types": "./renderer/pdf/index.d.ts",
+        "default": "./esm/renderer/pdf/index.mjs"
+      }
+    },
+    "./renderer/csv": {
+      "require": {
+        "types": "./renderer/csv/index.d.ts",
+        "default": "./renderer/csv/index.js"
+      },
+      "import": {
+        "types": "./renderer/csv/index.d.ts",
+        "default": "./esm/renderer/csv/index.mjs"
+      }
+    },
+    "./renderer/charts": {
+      "require": {
+        "types": "./renderer/charts/index.d.ts",
+        "default": "./renderer/charts/index.js"
+      },
+      "import": {
+        "types": "./renderer/charts/index.d.ts",
+        "default": "./esm/renderer/charts/index.mjs"
+      }
+    },
+    "./renderer/mermaid": {
+      "require": {
+        "types": "./renderer/mermaid/index.d.ts",
+        "default": "./renderer/mermaid/index.js"
+      },
+      "import": {
+        "types": "./renderer/mermaid/index.d.ts",
+        "default": "./esm/renderer/mermaid/index.mjs"
+      }
+    },
+    "./renderer/flow": {
+      "require": {
+        "types": "./renderer/flow/index.d.ts",
+        "default": "./renderer/flow/index.js"
+      },
+      "import": {
+        "types": "./renderer/flow/index.d.ts",
+        "default": "./esm/renderer/flow/index.mjs"
+      }
+    },
+    "./renderer/math": {
+      "require": {
+        "types": "./renderer/math/index.d.ts",
+        "default": "./renderer/math/index.js"
+      },
+      "import": {
+        "types": "./renderer/math/index.d.ts",
+        "default": "./esm/renderer/math/index.mjs"
+      }
+    },
+    "./renderer/maps": {
+      "require": {
+        "types": "./renderer/maps/index.d.ts",
+        "default": "./renderer/maps/index.js"
+      },
+      "import": {
+        "types": "./renderer/maps/index.d.ts",
+        "default": "./esm/renderer/maps/index.mjs"
+      }
+    },
+    "./renderer/image": {
+      "require": {
+        "types": "./renderer/image/index.d.ts",
+        "default": "./renderer/image/index.js"
+      },
+      "import": {
+        "types": "./renderer/image/index.d.ts",
+        "default": "./esm/renderer/image/index.mjs"
+      }
+    },
+    "./renderer/media": {
+      "require": {
+        "types": "./renderer/media/index.d.ts",
+        "default": "./renderer/media/index.js"
+      },
+      "import": {
+        "types": "./renderer/media/index.d.ts",
+        "default": "./esm/renderer/media/index.mjs"
+      }
+    },
+    "./renderer/common": {
+      "require": {
+        "types": "./renderer/common/index.d.ts",
+        "default": "./renderer/common/index.js"
+      },
+      "import": {
+        "types": "./renderer/common/index.d.ts",
+        "default": "./esm/renderer/common/index.mjs"
+      }
+    },
+    "./react": {
+      "require": {
+        "types": "./react/index.d.ts",
+        "default": "./react/index.js"
+      },
+      "import": {
+        "types": "./react/index.d.ts",
+        "default": "./esm/react/index.mjs"
+      }
+    },
+    "./bridge": {
+      "require": {
+        "types": "./bridge/index.d.ts",
+        "default": "./bridge/index.js"
+      },
+      "import": {
+        "types": "./bridge/index.d.ts",
+        "default": "./esm/bridge/index.mjs"
+      }
+    },
+    "./runtime": {
+      "require": {
+        "types": "./runtime/index.d.ts",
+        "default": "./runtime/index.js"
+      },
+      "import": {
+        "types": "./runtime/index.d.ts",
+        "default": "./esm/runtime/index.mjs"
       }
     },
     "./esm": null
@@ -55,20 +351,80 @@
   "engines": {
     "node": ">=22.0.0"
   },
-  "dependencies": {
-    "@mdx-js/mdx": "^3.1.1",
-    "@swc/core": "^1.5.0",
-    "esbuild": "^0.27.3",
-    "zod": "^4.0.0"
-  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@frontmcp/uipack": "0.12.2"
+    "@mui/material": "^7.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "react-pdf": "^9.0.0",
+    "pdfjs-dist": "^4.0.0",
+    "recharts": "^2.13.0",
+    "react-markdown": "^9.0.0",
+    "remark-gfm": "^4.0.0",
+    "rehype-highlight": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "mermaid": "^11.0.0",
+    "@xyflow/react": "^12.0.0",
+    "katex": "^0.16.0",
+    "react-leaflet": "^5.0.0",
+    "leaflet": "^1.9.0",
+    "react-player": "^2.16.0",
+    "dompurify": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-pdf": {
+      "optional": true
+    },
+    "pdfjs-dist": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "rehype-highlight": {
+      "optional": true
+    },
+    "rehype-raw": {
+      "optional": true
+    },
+    "mermaid": {
+      "optional": true
+    },
+    "@xyflow/react": {
+      "optional": true
+    },
+    "katex": {
+      "optional": true
+    },
+    "react-leaflet": {
+      "optional": true
+    },
+    "leaflet": {
+      "optional": true
+    },
+    "react-player": {
+      "optional": true
+    },
+    "dompurify": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
+    "@frontmcp/uipack": "1.0.0-beta.2"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@types/leaflet": "^1.9.0",
+    "@types/dompurify": "^3.0.0",
+    "@types/katex": "^0.16.0",
     "typescript": "^5.9.3"
   }
 }

package/react/index.d.ts

@@ -1,37 +1,7 @@
 /**
- * @file index.ts
- * @description React components and hooks for FrontMCP UI.
+ * @frontmcp/ui/react
  *
- * These are pure React components that can be used:
- * 1. As regular React components in your app
- * 2. To generate static HTML via render functions
- * 3. With hooks to access the MCP bridge
- *
- * @example React usage
- * ```tsx
- * import { Card, Badge, Button, Alert } from '@frontmcp/ui/react';
- *
- * function App() {
- *   return (
- *     <Card title="Welcome" variant="elevated">
- *       <Badge variant="success">New</Badge>
- *       <p>Card content here</p>
- *       <Button variant="primary">Click Me</Button>
- *     </Card>
- *   );
- * }
- * ```
- *
- * @example Static HTML generation
- * ```typescript
- * import { renderCard, renderBadge } from '@frontmcp/ui/react';
- *
- * const cardHtml = await renderCard({
- *   title: 'Welcome',
- *   variant: 'elevated',
- *   children: '<p>Content</p>',
- * });
- * ```
+ * React hooks for MCP bridge integration.
  *
  * @example Using hooks with the MCP bridge
  * ```tsx
@@ -40,40 +10,24 @@
  *   useMcpBridge,
  *   useToolInput,
  *   useCallTool,
- *   useTheme,
  * } from '@frontmcp/ui/react';
  *
- * function App() {
- *   return (
- *     <McpBridgeProvider>
- *       <WeatherWidget />
- *     </McpBridgeProvider>
- *   );
- * }
- *
  * function WeatherWidget() {
  *   const input = useToolInput<{ location: string }>();
- *   const theme = useTheme();
  *   const [getWeather, { data, loading }] = useCallTool('get_weather');
+ *   return <div>{loading ? 'Loading...' : data?.temperature}</div>;
+ * }
  *
+ * function App() {
  *   return (
- *     <Card title={`Weather for ${input?.location}`} variant={theme === 'dark' ? 'elevated' : 'default'}>
- *       {loading ? 'Loading...' : data?.temperature}
- *     </Card>
+ *     <McpBridgeProvider>
+ *       <WeatherWidget />
+ *     </McpBridgeProvider>
  *   );
  * }
  * ```
  *
  * @module @frontmcp/ui/react
  */
-export { Card, renderCard, renderCardSync } from './Card';
-export { Badge, renderBadge, renderBadgeSync } from './Badge';
-export { Button, renderButton, renderButtonSync } from './Button';
-export { Alert, renderAlert, renderAlertSync } from './Alert';
 export { McpBridgeProvider, useMcpBridgeContext, useMcpBridge, useTheme, useDisplayMode, useHostContext, useCapability, useToolInput, useToolOutput, useStructuredContent, useCallTool, useToolCalls, useSendMessage, useOpenLink, type McpBridgeContextValue, type McpBridgeProviderProps, type ToolState, type UseCallToolOptions, type UseCallToolReturn, } from './hooks';
-export type { CardProps, CardRenderProps } from './Card';
-export type { BadgeProps, BadgeRenderProps } from './Badge';
-export type { ButtonProps, ButtonRenderProps } from './Button';
-export type { AlertProps, AlertRenderProps } from './Alert';
-export type { FmcpCard, FmcpBadge, FmcpButton, FmcpAlert, FmcpInput, FmcpSelect } from './types';
 //# sourceMappingURL=index.d.ts.map

package/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAGH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EAEL,iBAAiB,EAEjB,mBAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,cAAc,EACd,aAAa,EAEb,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,WAAW,EAEX,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC;AAGjB,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACzD,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC/D,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAM5D,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAGH,OAAO,EAEL,iBAAiB,EAEjB,mBAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,cAAc,EACd,aAAa,EAEb,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,WAAW,EAEX,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC"}