@frontmcp/ui 0.6.0 → 0.6.2

package/esm/react/{index.js → index.mjs}

@@ -5,150 +5,12 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
-// libs/ui/src/styles/variants.ts
-var CARD_VARIANTS = {
-  default: "bg-white border border-border rounded-xl shadow-sm",
-  outlined: "bg-transparent border-2 border-border rounded-xl",
-  elevated: "bg-white rounded-xl shadow-lg",
-  filled: "bg-gray-50 rounded-xl",
-  ghost: "bg-transparent"
-};
-var CARD_SIZES = {
-  sm: "p-4",
-  md: "p-6",
-  lg: "p-8"
-};
-function getCardVariantClasses(variant) {
-  return CARD_VARIANTS[variant];
-}
-function getCardSizeClasses(size) {
-  return CARD_SIZES[size];
-}
-var BADGE_VARIANTS = {
-  default: "bg-gray-100 text-gray-800",
-  primary: "bg-primary/10 text-primary",
-  secondary: "bg-secondary/10 text-secondary",
-  success: "bg-success/10 text-success",
-  warning: "bg-warning/10 text-warning",
-  danger: "bg-danger/10 text-danger",
-  info: "bg-blue-100 text-blue-800",
-  outline: "border border-border text-text-primary bg-transparent"
-};
-var BADGE_SIZES = {
-  sm: "px-2 py-0.5 text-xs",
-  md: "px-2.5 py-1 text-xs",
-  lg: "px-3 py-1.5 text-sm"
-};
-var BADGE_DOT_SIZES = {
-  sm: "w-2 h-2",
-  md: "w-2.5 h-2.5",
-  lg: "w-3 h-3"
-};
-var BADGE_DOT_VARIANTS = {
-  default: "bg-gray-400",
-  primary: "bg-primary",
-  secondary: "bg-secondary",
-  success: "bg-success",
-  warning: "bg-warning",
-  danger: "bg-danger",
-  info: "bg-blue-500",
-  outline: "border border-current"
-};
-function getBadgeVariantClasses(variant) {
-  return BADGE_VARIANTS[variant];
-}
-function getBadgeSizeClasses(size) {
-  return BADGE_SIZES[size];
-}
-function getBadgeDotSizeClasses(size) {
-  return BADGE_DOT_SIZES[size];
-}
-function getBadgeDotVariantClasses(variant) {
-  return BADGE_DOT_VARIANTS[variant];
-}
-var BUTTON_VARIANTS = {
-  primary: "bg-primary hover:bg-primary/90 text-white shadow-sm",
-  secondary: "bg-secondary hover:bg-secondary/90 text-white shadow-sm",
-  outline: "border-2 border-primary text-primary hover:bg-primary/10",
-  ghost: "text-text-primary hover:bg-gray-100",
-  danger: "bg-danger hover:bg-danger/90 text-white shadow-sm",
-  success: "bg-success hover:bg-success/90 text-white shadow-sm",
-  link: "text-primary hover:text-primary/80 hover:underline"
-};
-var BUTTON_SIZES = {
-  xs: "px-2.5 py-1.5 text-xs",
-  sm: "px-3 py-2 text-sm",
-  md: "px-4 py-2.5 text-sm",
-  lg: "px-5 py-3 text-base",
-  xl: "px-6 py-3.5 text-lg"
-};
-var BUTTON_ICON_SIZES = {
-  xs: "p-1.5",
-  sm: "p-2",
-  md: "p-2.5",
-  lg: "p-3",
-  xl: "p-4"
-};
-var BUTTON_BASE_CLASSES = "inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2";
-function getButtonVariantClasses(variant) {
-  return BUTTON_VARIANTS[variant];
-}
-function getButtonSizeClasses(size, iconOnly) {
-  return iconOnly ? BUTTON_ICON_SIZES[size] : BUTTON_SIZES[size];
-}
-var ALERT_VARIANTS = {
-  info: {
-    container: "bg-blue-50 border-blue-200 text-blue-800",
-    icon: "text-blue-500"
-  },
-  success: {
-    container: "bg-success/10 border-success/30 text-success",
-    icon: "text-success"
-  },
-  warning: {
-    container: "bg-warning/10 border-warning/30 text-warning",
-    icon: "text-warning"
-  },
-  danger: {
-    container: "bg-danger/10 border-danger/30 text-danger",
-    icon: "text-danger"
-  },
-  neutral: {
-    container: "bg-gray-50 border-gray-200 text-gray-800",
-    icon: "text-gray-500"
-  }
-};
-var ALERT_BASE_CLASSES = "rounded-lg border p-4";
-function getAlertVariantClasses(variant) {
-  return ALERT_VARIANTS[variant];
-}
-var ALERT_ICONS = {
-  info: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-  </svg>`,
-  success: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-  </svg>`,
-  warning: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-  </svg>`,
-  danger: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-  </svg>`,
-  neutral: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-  </svg>`
-};
-var CLOSE_ICON = `<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-</svg>`;
-var LOADING_SPINNER = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
-  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-</svg>`;
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
+// libs/ui/src/react/Card.tsx
+import {
+  getCardVariantClasses,
+  getCardSizeClasses,
+  cn
+} from "@frontmcp/uipack/styles";
 
 // libs/ui/src/render/prerender.ts
 async function renderToString(element) {
@@ -239,6 +101,13 @@ function renderCardSync(props) {
 }
 
 // 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",
@@ -252,7 +121,7 @@ function Badge({
   children
 }) {
   if (dot) {
-    const dotClasses = cn(
+    const dotClasses = cn2(
       "inline-block rounded-full",
       getBadgeDotSizeClasses(size),
       getBadgeDotVariantClasses(variant),
@@ -263,7 +132,7 @@ function Badge({
   }
   const variantClasses = getBadgeVariantClasses(variant);
   const sizeClasses = getBadgeSizeClasses(size);
-  const baseClasses = cn(
+  const baseClasses = cn2(
     "inline-flex items-center font-medium",
     pill ? "rounded-full" : "rounded-md",
     variantClasses,
@@ -297,6 +166,13 @@ function renderBadgeSync(props) {
 }
 
 // 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",
@@ -316,7 +192,7 @@ function Button({
   const sizeClasses = getButtonSizeClasses(size, iconOnly);
   const disabledClasses = disabled || loading ? "opacity-50 cursor-not-allowed" : "";
   const widthClasses = fullWidth ? "w-full" : "";
-  const allClasses = cn(BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className);
+  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 } }),
@@ -337,6 +213,13 @@ function renderButtonSync(props) {
 }
 
 // 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",
@@ -349,11 +232,11 @@ function Alert({
   children
 }) {
   const variantStyles = getAlertVariantClasses(variant);
-  const allClasses = cn(ALERT_BASE_CLASSES, variantStyles.container, className);
+  const allClasses = cn4(ALERT_BASE_CLASSES, variantStyles.container, className);
   const iconContent = icon || (showIcon ? /* @__PURE__ */ jsx4(
     "span",
     {
-      className: cn("flex-shrink-0", variantStyles.icon),
+      className: cn4("flex-shrink-0", variantStyles.icon),
       dangerouslySetInnerHTML: { __html: ALERT_ICONS[variant] }
     }
   ) : null);
@@ -750,50 +633,50 @@ var FrontMcpBridge = class {
    * Get current theme.
    */
   getTheme() {
-    this._ensureInitialized();
-    return this._adapter.getTheme();
+    const adapter = this._ensureInitialized();
+    return adapter.getTheme();
   }
   /**
    * Get current display mode.
    */
   getDisplayMode() {
-    this._ensureInitialized();
-    return this._adapter.getDisplayMode();
+    const adapter = this._ensureInitialized();
+    return adapter.getDisplayMode();
   }
   /**
    * Get tool input arguments.
    */
   getToolInput() {
-    this._ensureInitialized();
-    return this._adapter.getToolInput();
+    const adapter = this._ensureInitialized();
+    return adapter.getToolInput();
   }
   /**
    * Get tool output/result.
    */
   getToolOutput() {
-    this._ensureInitialized();
-    return this._adapter.getToolOutput();
+    const adapter = this._ensureInitialized();
+    return adapter.getToolOutput();
   }
   /**
    * Get structured content (parsed output).
    */
   getStructuredContent() {
-    this._ensureInitialized();
-    return this._adapter.getStructuredContent();
+    const adapter = this._ensureInitialized();
+    return adapter.getStructuredContent();
   }
   /**
    * Get persisted widget state.
    */
   getWidgetState() {
-    this._ensureInitialized();
-    return this._adapter.getWidgetState();
+    const adapter = this._ensureInitialized();
+    return adapter.getWidgetState();
   }
   /**
    * Get full host context.
    */
   getHostContext() {
-    this._ensureInitialized();
-    return this._adapter.getHostContext();
+    const adapter = this._ensureInitialized();
+    return adapter.getHostContext();
   }
   // ============================================
   // Actions (delegate to adapter)
@@ -804,53 +687,53 @@ var FrontMcpBridge = class {
    * @param args - Tool arguments
    */
   async callTool(name, args) {
-    this._ensureInitialized();
+    const adapter = this._ensureInitialized();
     if (!this.hasCapability("canCallTools")) {
       throw new Error("Tool calls are not supported by the current adapter");
     }
-    return this._adapter.callTool(name, args);
+    return adapter.callTool(name, args);
   }
   /**
    * Send a follow-up message to the conversation.
    * @param content - Message content
    */
   async sendMessage(content) {
-    this._ensureInitialized();
+    const adapter = this._ensureInitialized();
     if (!this.hasCapability("canSendMessages")) {
       throw new Error("Sending messages is not supported by the current adapter");
     }
-    return this._adapter.sendMessage(content);
+    return adapter.sendMessage(content);
   }
   /**
    * Open an external link.
    * @param url - URL to open
    */
   async openLink(url) {
-    this._ensureInitialized();
-    return this._adapter.openLink(url);
+    const adapter = this._ensureInitialized();
+    return adapter.openLink(url);
   }
   /**
    * Request a display mode change.
    * @param mode - Desired display mode
    */
   async requestDisplayMode(mode) {
-    this._ensureInitialized();
-    return this._adapter.requestDisplayMode(mode);
+    const adapter = this._ensureInitialized();
+    return adapter.requestDisplayMode(mode);
   }
   /**
    * Request widget close.
    */
   async requestClose() {
-    this._ensureInitialized();
-    return this._adapter.requestClose();
+    const adapter = this._ensureInitialized();
+    return adapter.requestClose();
   }
   /**
    * Set widget state (persisted across sessions).
    * @param state - State object to persist
    */
   setWidgetState(state) {
-    this._ensureInitialized();
-    this._adapter.setWidgetState(state);
+    const adapter = this._ensureInitialized();
+    adapter.setWidgetState(state);
   }
   // ============================================
   // Events (delegate to adapter)
@@ -861,8 +744,8 @@ var FrontMcpBridge = class {
    * @returns Unsubscribe function
    */
   onContextChange(callback) {
-    this._ensureInitialized();
-    return this._adapter.onContextChange(callback);
+    const adapter = this._ensureInitialized();
+    return adapter.onContextChange(callback);
   }
   /**
    * Subscribe to tool result updates.
@@ -870,19 +753,21 @@ var FrontMcpBridge = class {
    * @returns Unsubscribe function
    */
   onToolResult(callback) {
-    this._ensureInitialized();
-    return this._adapter.onToolResult(callback);
+    const adapter = this._ensureInitialized();
+    return adapter.onToolResult(callback);
   }
   // ============================================
   // Private Helpers
   // ============================================
   /**
    * Ensure the bridge is initialized before operations.
+   * Returns the adapter for type-safe access.
    */
   _ensureInitialized() {
     if (!this._initialized || !this._adapter) {
       throw new Error("FrontMcpBridge is not initialized. Call initialize() first.");
     }
+    return this._adapter;
   }
   /**
    * Wrap a promise with a timeout.
@@ -1043,7 +928,7 @@ function useCapability(cap) {
 }
 
 // libs/ui/src/react/hooks/tools.tsx
-import { useState as useState2, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useCallback, useEffect as useEffect2 } from "react";
 function useToolInput() {
   const { bridge, ready } = useMcpBridgeContext();
   if (!ready || !bridge) {
@@ -1109,7 +994,7 @@ function useCallTool(toolName, options = {}) {
       });
     }
   }, [toolName, resetOnToolChange]);
-  const reset = useCallback2(() => {
+  const reset = useCallback(() => {
     setState({
       data: null,
       loading: false,
@@ -1117,7 +1002,7 @@ function useCallTool(toolName, options = {}) {
       called: false
     });
   }, []);
-  const callTool = useCallback2(
+  const callTool = useCallback(
     async (args) => {
       if (!ready || !bridge) {
         const error = new Error("Bridge not initialized");
@@ -1167,7 +1052,7 @@ function useToolCalls(toolMap) {
     }
     return initial;
   });
-  const createCallFn = useCallback2(
+  const createCallFn = useCallback(
     (key, toolName) => async (args) => {
       if (!bridge) {
         setStates((prev) => ({
@@ -1202,7 +1087,7 @@ function useToolCalls(toolMap) {
     },
     [bridge]
   );
-  const createResetFn = useCallback2(
+  const createResetFn = useCallback(
     (key) => () => {
       setStates((prev) => ({
         ...prev,
@@ -1236,7 +1121,7 @@ function useSendMessage() {
     error: null,
     sent: false
   });
-  const sendMessage = useCallback2(
+  const sendMessage = useCallback(
     async (content) => {
       if (!bridge) {
         setState({ loading: false, error: new Error("Bridge not initialized"), sent: false });
@@ -1257,7 +1142,7 @@ function useSendMessage() {
 }
 function useOpenLink() {
   const bridge = useMcpBridge();
-  return useCallback2(
+  return useCallback(
     async (url) => {
       if (!bridge) {
         console.warn("Bridge not initialized, cannot open link");
@@ -1268,85 +1153,12 @@ function useOpenLink() {
     [bridge]
   );
 }
-
-// libs/ui/src/theme/platforms.ts
-var CLAUDE_PLATFORM = {
-  id: "claude",
-  name: "Claude (Artifacts)",
-  supportsWidgets: true,
-  supportsTailwind: true,
-  supportsHtmx: false,
-  // Network blocked, HTMX won't work for API calls
-  networkMode: "blocked",
-  scriptStrategy: "inline",
-  maxInlineSize: 100 * 1024,
-  // 100KB limit for artifacts
-  cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
-  options: {
-    mode: "artifacts",
-    framework: "react"
-    // Claude artifacts prefer React
-  }
-};
-
-// libs/ui/src/utils/escape-html.ts
-function escapeHtml(str) {
-  if (str === null || str === void 0) {
-    return "";
-  }
-  const s = String(str);
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
-}
-
-// libs/ui/src/react/utils.ts
-var cachedReactDOMServer = null;
-function getReactDOMServer() {
-  if (!cachedReactDOMServer) {
-    try {
-      cachedReactDOMServer = __require("react-dom/server");
-    } catch {
-      return null;
-    }
-  }
-  return cachedReactDOMServer;
-}
-function renderChildrenToString(children) {
-  if (children == null) {
-    return "";
-  }
-  if (typeof children === "string") {
-    return escapeHtml(children);
-  }
-  if (typeof children === "number") {
-    return String(children);
-  }
-  if (typeof children === "boolean") {
-    return "";
-  }
-  try {
-    const server = getReactDOMServer();
-    if (server) {
-      return server.renderToStaticMarkup(children);
-    }
-    return String(children);
-  } catch {
-    return String(children);
-  }
-}
-function isBrowser() {
-  return typeof window !== "undefined";
-}
-function isServer() {
-  return typeof window === "undefined";
-}
 export {
   Alert,
   Badge,
   Button,
   Card,
   McpBridgeProvider,
-  isBrowser,
-  isServer,
   renderAlert,
   renderAlertSync,
   renderBadge,
@@ -1355,7 +1167,6 @@ export {
   renderButtonSync,
   renderCard,
   renderCardSync,
-  renderChildrenToString,
   useCallTool,
   useCapability,
   useDisplayMode,