@frontmcp/ui 0.6.1 → 0.6.2

package/esm/react/index.mjs

@@ -0,0 +1,1183 @@
+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";
+
+// libs/ui/src/bridge/core/adapter-registry.ts
+var AdapterRegistry = class {
+  _adapters = /* @__PURE__ */ new Map();
+  _disabledAdapters = /* @__PURE__ */ new Set();
+  _adapterConfigs = /* @__PURE__ */ new Map();
+  _debug = false;
+  /**
+   * Enable or disable debug logging.
+   */
+  setDebug(enabled) {
+    this._debug = enabled;
+  }
+  /**
+   * Register an adapter factory with the registry.
+   * @param id - Unique adapter identifier
+   * @param factory - Factory function that creates the adapter
+   * @param defaultConfig - Optional default configuration
+   */
+  register(id, factory, defaultConfig) {
+    if (this._adapters.has(id)) {
+      this._log(`Overwriting existing adapter: ${id}`);
+    }
+    this._adapters.set(id, {
+      id,
+      factory,
+      defaultConfig
+    });
+    this._log(`Registered adapter: ${id}`);
+  }
+  /**
+   * Unregister an adapter from the registry.
+   * @param id - Adapter identifier to remove
+   */
+  unregister(id) {
+    const removed = this._adapters.delete(id);
+    if (removed) {
+      this._log(`Unregistered adapter: ${id}`);
+    }
+    return removed;
+  }
+  /**
+   * Check if an adapter is registered.
+   * @param id - Adapter identifier
+   */
+  has(id) {
+    return this._adapters.has(id);
+  }
+  /**
+   * Get all registered adapter IDs.
+   */
+  getRegisteredIds() {
+    return Array.from(this._adapters.keys());
+  }
+  /**
+   * Disable specific adapters (they won't be selected during auto-detection).
+   * @param ids - Adapter IDs to disable
+   */
+  disable(...ids) {
+    for (const id of ids) {
+      this._disabledAdapters.add(id);
+      this._log(`Disabled adapter: ${id}`);
+    }
+  }
+  /**
+   * Enable previously disabled adapters.
+   * @param ids - Adapter IDs to enable
+   */
+  enable(...ids) {
+    for (const id of ids) {
+      this._disabledAdapters.delete(id);
+      this._log(`Enabled adapter: ${id}`);
+    }
+  }
+  /**
+   * Check if an adapter is disabled.
+   * @param id - Adapter identifier
+   */
+  isDisabled(id) {
+    return this._disabledAdapters.has(id);
+  }
+  /**
+   * Set adapter-specific configuration.
+   * @param id - Adapter identifier
+   * @param config - Configuration to apply
+   */
+  configure(id, config) {
+    this._adapterConfigs.set(id, config);
+    this._log(`Configured adapter: ${id}`);
+  }
+  /**
+   * Get an adapter instance by ID.
+   * @param id - Adapter identifier
+   * @returns Adapter instance or undefined if not found/disabled
+   */
+  get(id) {
+    if (this._disabledAdapters.has(id)) {
+      this._log(`Adapter ${id} is disabled`);
+      return void 0;
+    }
+    const registration = this._adapters.get(id);
+    if (!registration) {
+      this._log(`Adapter ${id} not found`);
+      return void 0;
+    }
+    const config = this._mergeConfig(registration.defaultConfig, this._adapterConfigs.get(id));
+    if (config?.enabled === false) {
+      this._log(`Adapter ${id} is disabled via config`);
+      return void 0;
+    }
+    return registration.factory(config);
+  }
+  /**
+   * Auto-detect and return the best adapter for the current environment.
+   * Adapters are checked in priority order (highest first).
+   * @returns The first adapter that can handle the current environment, or undefined
+   */
+  detect() {
+    const candidates = this._getSortedCandidates();
+    for (const registration of candidates) {
+      if (this._disabledAdapters.has(registration.id)) {
+        this._log(`Skipping disabled adapter: ${registration.id}`);
+        continue;
+      }
+      const config = this._mergeConfig(registration.defaultConfig, this._adapterConfigs.get(registration.id));
+      if (config?.enabled === false) {
+        this._log(`Skipping adapter disabled via config: ${registration.id}`);
+        continue;
+      }
+      try {
+        const adapter = registration.factory(config);
+        if (adapter.canHandle()) {
+          this._log(`Detected adapter: ${registration.id} (priority: ${adapter.priority})`);
+          return adapter;
+        }
+        this._log(`Adapter ${registration.id} cannot handle current environment`);
+      } catch (error) {
+        this._log(`Error creating adapter ${registration.id}: ${error}`);
+      }
+    }
+    this._log("No suitable adapter detected");
+    return void 0;
+  }
+  /**
+   * Get all adapters that can handle the current environment.
+   * Useful for debugging or showing available options.
+   * @returns Array of compatible adapters sorted by priority (highest first)
+   */
+  detectAll() {
+    const candidates = this._getSortedCandidates();
+    const compatible = [];
+    for (const registration of candidates) {
+      if (this._disabledAdapters.has(registration.id)) {
+        continue;
+      }
+      const config = this._mergeConfig(registration.defaultConfig, this._adapterConfigs.get(registration.id));
+      if (config?.enabled === false) {
+        continue;
+      }
+      try {
+        const adapter = registration.factory(config);
+        if (adapter.canHandle()) {
+          compatible.push(adapter);
+        }
+      } catch {
+      }
+    }
+    return compatible;
+  }
+  /**
+   * Clear all registered adapters.
+   */
+  clear() {
+    this._adapters.clear();
+    this._disabledAdapters.clear();
+    this._adapterConfigs.clear();
+    this._log("Cleared all adapters");
+  }
+  /**
+   * Get sorted candidate adapters by priority (highest first).
+   */
+  _getSortedCandidates() {
+    const registrations = Array.from(this._adapters.values());
+    const withPriority = registrations.map((reg) => {
+      try {
+        const adapter = reg.factory(reg.defaultConfig);
+        return { registration: reg, priority: adapter.priority };
+      } catch {
+        return { registration: reg, priority: -1 };
+      }
+    });
+    withPriority.sort((a, b) => b.priority - a.priority);
+    return withPriority.map((item) => item.registration);
+  }
+  /**
+   * Merge default config with user config.
+   */
+  _mergeConfig(defaultConfig, userConfig) {
+    if (!defaultConfig && !userConfig) {
+      return void 0;
+    }
+    return {
+      ...defaultConfig,
+      ...userConfig,
+      options: {
+        ...defaultConfig?.options,
+        ...userConfig?.options
+      }
+    };
+  }
+  /**
+   * Log debug message if debugging is enabled.
+   */
+  _log(message) {
+    if (this._debug) {
+      console.log(`[AdapterRegistry] ${message}`);
+    }
+  }
+};
+var defaultRegistry = new AdapterRegistry();
+
+// libs/ui/src/bridge/core/bridge-factory.ts
+var DEFAULT_CONFIG = {
+  debug: false,
+  initTimeout: 5e3
+};
+var FrontMcpBridge = class {
+  _config;
+  _registry;
+  _adapter;
+  _initialized = false;
+  _initPromise;
+  /**
+   * Create a new FrontMcpBridge instance.
+   * @param config - Bridge configuration
+   * @param registry - Optional custom adapter registry (uses default if not provided)
+   */
+  constructor(config = {}, registry) {
+    this._config = { ...DEFAULT_CONFIG, ...config };
+    this._registry = registry || defaultRegistry;
+    if (this._config.debug) {
+      this._registry.setDebug(true);
+    }
+    if (this._config.disabledAdapters) {
+      this._registry.disable(...this._config.disabledAdapters);
+    }
+    if (this._config.adapterConfigs) {
+      for (const [id, adapterConfig] of Object.entries(this._config.adapterConfigs)) {
+        this._registry.configure(id, adapterConfig);
+      }
+    }
+  }
+  // ============================================
+  // Public Properties
+  // ============================================
+  /**
+   * Whether the bridge has been initialized.
+   */
+  get initialized() {
+    return this._initialized;
+  }
+  /**
+   * Current adapter ID, or undefined if not initialized.
+   */
+  get adapterId() {
+    return this._adapter?.id;
+  }
+  /**
+   * Current adapter capabilities, or undefined if not initialized.
+   */
+  get capabilities() {
+    return this._adapter?.capabilities;
+  }
+  // ============================================
+  // Lifecycle
+  // ============================================
+  /**
+   * Initialize the bridge.
+   * Auto-detects the best adapter for the current platform unless
+   * `forceAdapter` is specified in the config.
+   *
+   * @throws Error if no suitable adapter is found
+   */
+  async initialize() {
+    if (this._initPromise) {
+      return this._initPromise;
+    }
+    if (this._initialized) {
+      return;
+    }
+    this._initPromise = this._doInitialize();
+    try {
+      await this._initPromise;
+    } finally {
+      this._initPromise = void 0;
+    }
+  }
+  /**
+   * Internal initialization logic.
+   */
+  async _doInitialize() {
+    this._log("Initializing FrontMcpBridge...");
+    if (this._config.forceAdapter) {
+      this._adapter = this._registry.get(this._config.forceAdapter);
+      if (!this._adapter) {
+        throw new Error(`Forced adapter "${this._config.forceAdapter}" not found or disabled`);
+      }
+      this._log(`Using forced adapter: ${this._config.forceAdapter}`);
+    } else {
+      this._adapter = this._registry.detect();
+      if (!this._adapter) {
+        throw new Error("No suitable adapter detected for current environment");
+      }
+      this._log(`Auto-detected adapter: ${this._adapter.id}`);
+    }
+    try {
+      await this._withTimeout(this._adapter.initialize(), this._config.initTimeout || 5e3);
+      this._initialized = true;
+      this._log(`Bridge initialized with adapter: ${this._adapter.id}`);
+      this._emitEvent("bridge:ready", { adapter: this._adapter.id });
+    } catch (error) {
+      this._emitEvent("bridge:error", {
+        error: error instanceof Error ? error : new Error(String(error)),
+        adapter: this._adapter?.id
+      });
+      throw error;
+    }
+  }
+  /**
+   * Dispose the bridge and release resources.
+   */
+  dispose() {
+    if (this._adapter) {
+      this._adapter.dispose();
+      this._log(`Disposed adapter: ${this._adapter.id}`);
+    }
+    this._adapter = void 0;
+    this._initialized = false;
+  }
+  // ============================================
+  // Adapter Access
+  // ============================================
+  /**
+   * Get the active adapter instance.
+   */
+  getAdapter() {
+    return this._adapter;
+  }
+  /**
+   * Check if a specific capability is available.
+   * @param cap - Capability key to check
+   */
+  hasCapability(cap) {
+    return this._adapter?.capabilities[cap] === true;
+  }
+  // ============================================
+  // Data Access (delegate to adapter)
+  // ============================================
+  /**
+   * Get current theme.
+   */
+  getTheme() {
+    const adapter = this._ensureInitialized();
+    return adapter.getTheme();
+  }
+  /**
+   * Get current display mode.
+   */
+  getDisplayMode() {
+    const adapter = this._ensureInitialized();
+    return adapter.getDisplayMode();
+  }
+  /**
+   * Get tool input arguments.
+   */
+  getToolInput() {
+    const adapter = this._ensureInitialized();
+    return adapter.getToolInput();
+  }
+  /**
+   * Get tool output/result.
+   */
+  getToolOutput() {
+    const adapter = this._ensureInitialized();
+    return adapter.getToolOutput();
+  }
+  /**
+   * Get structured content (parsed output).
+   */
+  getStructuredContent() {
+    const adapter = this._ensureInitialized();
+    return adapter.getStructuredContent();
+  }
+  /**
+   * Get persisted widget state.
+   */
+  getWidgetState() {
+    const adapter = this._ensureInitialized();
+    return adapter.getWidgetState();
+  }
+  /**
+   * Get full host context.
+   */
+  getHostContext() {
+    const adapter = this._ensureInitialized();
+    return adapter.getHostContext();
+  }
+  // ============================================
+  // Actions (delegate to adapter)
+  // ============================================
+  /**
+   * Call a tool on the MCP server.
+   * @param name - Tool name
+   * @param args - Tool arguments
+   */
+  async callTool(name, args) {
+    const adapter = this._ensureInitialized();
+    if (!this.hasCapability("canCallTools")) {
+      throw new Error("Tool calls are not supported by the current adapter");
+    }
+    return adapter.callTool(name, args);
+  }
+  /**
+   * Send a follow-up message to the conversation.
+   * @param content - Message content
+   */
+  async sendMessage(content) {
+    const adapter = this._ensureInitialized();
+    if (!this.hasCapability("canSendMessages")) {
+      throw new Error("Sending messages is not supported by the current adapter");
+    }
+    return adapter.sendMessage(content);
+  }
+  /**
+   * Open an external link.
+   * @param url - URL to open
+   */
+  async openLink(url) {
+    const adapter = this._ensureInitialized();
+    return adapter.openLink(url);
+  }
+  /**
+   * Request a display mode change.
+   * @param mode - Desired display mode
+   */
+  async requestDisplayMode(mode) {
+    const adapter = this._ensureInitialized();
+    return adapter.requestDisplayMode(mode);
+  }
+  /**
+   * Request widget close.
+   */
+  async requestClose() {
+    const adapter = this._ensureInitialized();
+    return adapter.requestClose();
+  }
+  /**
+   * Set widget state (persisted across sessions).
+   * @param state - State object to persist
+   */
+  setWidgetState(state) {
+    const adapter = this._ensureInitialized();
+    adapter.setWidgetState(state);
+  }
+  // ============================================
+  // Events (delegate to adapter)
+  // ============================================
+  /**
+   * Subscribe to host context changes.
+   * @param callback - Called when context changes
+   * @returns Unsubscribe function
+   */
+  onContextChange(callback) {
+    const adapter = this._ensureInitialized();
+    return adapter.onContextChange(callback);
+  }
+  /**
+   * Subscribe to tool result updates.
+   * @param callback - Called when tool result is received
+   * @returns Unsubscribe function
+   */
+  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.
+   */
+  _withTimeout(promise, ms) {
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        reject(new Error(`Operation timed out after ${ms}ms`));
+      }, ms);
+      promise.then((result) => {
+        clearTimeout(timer);
+        resolve(result);
+      }).catch((error) => {
+        clearTimeout(timer);
+        reject(error);
+      });
+    });
+  }
+  /**
+   * Emit a bridge event via CustomEvent.
+   */
+  _emitEvent(type, payload) {
+    if (typeof window !== "undefined" && typeof CustomEvent !== "undefined") {
+      try {
+        const event = new CustomEvent(type, { detail: payload });
+        window.dispatchEvent(event);
+      } catch {
+      }
+    }
+  }
+  /**
+   * Log debug message if debugging is enabled.
+   */
+  _log(message) {
+    if (this._config.debug) {
+      console.log(`[FrontMcpBridge] ${message}`);
+    }
+  }
+};
+
+// libs/ui/src/react/hooks/context.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var McpBridgeContext = createContext(null);
+function McpBridgeProvider({ children, config, onReady, onError }) {
+  const [bridge, setBridge] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    let bridgeInstance = null;
+    const initBridge = async () => {
+      try {
+        bridgeInstance = new FrontMcpBridge(config);
+        await bridgeInstance.initialize();
+        if (mounted) {
+          setBridge(bridgeInstance);
+          setLoading(false);
+          onReady?.(bridgeInstance);
+        }
+      } catch (err) {
+        if (mounted) {
+          const error2 = err instanceof Error ? err : new Error(String(err));
+          setError(error2);
+          setLoading(false);
+          onError?.(error2);
+        }
+      }
+    };
+    initBridge();
+    return () => {
+      mounted = false;
+      if (bridgeInstance) {
+        bridgeInstance.dispose();
+      }
+    };
+  }, [config, onReady, onError]);
+  const contextValue = useMemo(
+    () => ({
+      bridge,
+      loading,
+      error,
+      ready: !loading && !error && bridge !== null,
+      adapterId: bridge?.adapterId,
+      capabilities: bridge?.capabilities
+    }),
+    [bridge, loading, error]
+  );
+  return /* @__PURE__ */ jsx5(McpBridgeContext.Provider, { value: contextValue, children });
+}
+var SSR_DEFAULT_CONTEXT = {
+  bridge: null,
+  loading: false,
+  error: null,
+  ready: false,
+  adapterId: void 0,
+  capabilities: void 0
+};
+function useMcpBridgeContext() {
+  const context = useContext(McpBridgeContext);
+  if (!context) {
+    return SSR_DEFAULT_CONTEXT;
+  }
+  return context;
+}
+function useMcpBridge() {
+  const { bridge } = useMcpBridgeContext();
+  return bridge;
+}
+function useTheme() {
+  const { bridge, ready } = useMcpBridgeContext();
+  const [theme, setTheme] = useState("light");
+  useEffect(() => {
+    if (!ready || !bridge) return;
+    setTheme(bridge.getTheme());
+    const unsubscribe = bridge.onContextChange((changes) => {
+      if (changes.theme) {
+        setTheme(changes.theme);
+      }
+    });
+    return unsubscribe;
+  }, [bridge, ready]);
+  return theme;
+}
+function useDisplayMode() {
+  const { bridge, ready } = useMcpBridgeContext();
+  const [displayMode, setDisplayMode] = useState("inline");
+  useEffect(() => {
+    if (!ready || !bridge) return;
+    setDisplayMode(bridge.getDisplayMode());
+    const unsubscribe = bridge.onContextChange((changes) => {
+      if (changes.displayMode) {
+        setDisplayMode(changes.displayMode);
+      }
+    });
+    return unsubscribe;
+  }, [bridge, ready]);
+  return displayMode;
+}
+function useHostContext() {
+  const { bridge, ready } = useMcpBridgeContext();
+  const [context, setContext] = useState(null);
+  useEffect(() => {
+    if (!ready || !bridge) return;
+    const adapter = bridge.getAdapter?.();
+    if (adapter) {
+      setContext(adapter.getHostContext());
+    }
+    const unsubscribe = bridge.onContextChange((changes) => {
+      setContext((prev) => prev ? { ...prev, ...changes } : null);
+    });
+    return unsubscribe;
+  }, [bridge, ready]);
+  return context;
+}
+function useCapability(cap) {
+  const { capabilities } = useMcpBridgeContext();
+  return capabilities?.[cap] === true;
+}
+
+// libs/ui/src/react/hooks/tools.tsx
+import { useState as useState2, useCallback, useEffect as useEffect2 } from "react";
+function useToolInput() {
+  const { bridge, ready } = useMcpBridgeContext();
+  if (!ready || !bridge) {
+    return null;
+  }
+  try {
+    return bridge.getToolInput();
+  } catch {
+    return null;
+  }
+}
+function useToolOutput() {
+  const { bridge, ready } = useMcpBridgeContext();
+  const [output, setOutput] = useState2(null);
+  useEffect2(() => {
+    if (!ready || !bridge) return;
+    try {
+      const initialOutput = bridge.getToolOutput();
+      if (initialOutput !== void 0) {
+        setOutput(initialOutput);
+      }
+    } catch {
+    }
+    const unsubscribe = bridge.onToolResult((result) => {
+      setOutput(result);
+    });
+    return unsubscribe;
+  }, [bridge, ready]);
+  return output;
+}
+function useStructuredContent() {
+  const { bridge, ready } = useMcpBridgeContext();
+  if (!ready || !bridge) {
+    return null;
+  }
+  try {
+    const adapter = bridge.getAdapter?.();
+    if (adapter) {
+      return adapter.getStructuredContent();
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function useCallTool(toolName, options = {}) {
+  const { bridge, ready } = useMcpBridgeContext();
+  const { onSuccess, onError, resetOnToolChange = true } = options;
+  console.log("useCallTool", toolName, bridge);
+  const [state, setState] = useState2({
+    data: null,
+    loading: false,
+    error: null,
+    called: false
+  });
+  useEffect2(() => {
+    if (resetOnToolChange) {
+      setState({
+        data: null,
+        loading: false,
+        error: null,
+        called: false
+      });
+    }
+  }, [toolName, resetOnToolChange]);
+  const reset = useCallback(() => {
+    setState({
+      data: null,
+      loading: false,
+      error: null,
+      called: false
+    });
+  }, []);
+  const callTool = useCallback(
+    async (args) => {
+      if (!ready || !bridge) {
+        const error = new Error("Bridge not initialized");
+        setState((prev) => ({ ...prev, error, called: true }));
+        onError?.(error);
+        return null;
+      }
+      setState((prev) => ({
+        ...prev,
+        loading: true,
+        error: null,
+        called: true
+      }));
+      try {
+        const result = await bridge.callTool(toolName, args);
+        const data = result;
+        setState({
+          data,
+          loading: false,
+          error: null,
+          called: true
+        });
+        onSuccess?.(data);
+        return data;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState({
+          data: null,
+          loading: false,
+          error,
+          called: true
+        });
+        onError?.(error);
+        return null;
+      }
+    },
+    [bridge, ready, toolName, onSuccess, onError]
+  );
+  return [callTool, state, reset];
+}
+function useToolCalls(toolMap) {
+  const bridge = useMcpBridge();
+  const [states, setStates] = useState2(() => {
+    const initial = {};
+    for (const key of Object.keys(toolMap)) {
+      initial[key] = { data: null, loading: false, error: null, called: false };
+    }
+    return initial;
+  });
+  const createCallFn = useCallback(
+    (key, toolName) => async (args) => {
+      if (!bridge) {
+        setStates((prev) => ({
+          ...prev,
+          [key]: {
+            ...prev[key],
+            error: new Error("Bridge not initialized"),
+            called: true
+          }
+        }));
+        return null;
+      }
+      setStates((prev) => ({
+        ...prev,
+        [key]: { ...prev[key], loading: true, error: null, called: true }
+      }));
+      try {
+        const result2 = await bridge.callTool(toolName, args);
+        setStates((prev) => ({
+          ...prev,
+          [key]: { data: result2, loading: false, error: null, called: true }
+        }));
+        return result2;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setStates((prev) => ({
+          ...prev,
+          [key]: { data: null, loading: false, error, called: true }
+        }));
+        return null;
+      }
+    },
+    [bridge]
+  );
+  const createResetFn = useCallback(
+    (key) => () => {
+      setStates((prev) => ({
+        ...prev,
+        [key]: { data: null, loading: false, error: null, called: false }
+      }));
+    },
+    []
+  );
+  const result = {};
+  for (const [key, toolName] of Object.entries(toolMap)) {
+    const state = states[key] || {
+      data: null,
+      loading: false,
+      error: null,
+      called: false
+    };
+    result[key] = {
+      call: createCallFn(key, toolName),
+      data: state.data,
+      loading: state.loading,
+      error: state.error,
+      reset: createResetFn(key)
+    };
+  }
+  return result;
+}
+function useSendMessage() {
+  const bridge = useMcpBridge();
+  const [state, setState] = useState2({
+    loading: false,
+    error: null,
+    sent: false
+  });
+  const sendMessage = useCallback(
+    async (content) => {
+      if (!bridge) {
+        setState({ loading: false, error: new Error("Bridge not initialized"), sent: false });
+        return;
+      }
+      setState({ loading: true, error: null, sent: false });
+      try {
+        await bridge.sendMessage(content);
+        setState({ loading: false, error: null, sent: true });
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState({ loading: false, error, sent: false });
+      }
+    },
+    [bridge]
+  );
+  return [sendMessage, state];
+}
+function useOpenLink() {
+  const bridge = useMcpBridge();
+  return useCallback(
+    async (url) => {
+      if (!bridge) {
+        console.warn("Bridge not initialized, cannot open link");
+        return;
+      }
+      await bridge.openLink(url);
+    },
+    [bridge]
+  );
+}
+export {
+  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
+};