@frontmcp/react 0.0.1

package/index.js

@@ -0,0 +1,1821 @@
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/react/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Adapter: () => import_sdk3.Adapter,
+  AgentContent: () => AgentContent,
+  AgentSearch: () => AgentSearch,
+  App: () => import_sdk3.App,
+  ComponentRegistry: () => ComponentRegistry,
+  DynamicRegistry: () => DynamicRegistry,
+  DynamicRenderer: () => DynamicRenderer,
+  ExecutionContextBase: () => import_sdk4.ExecutionContextBase,
+  FrontMcp: () => import_sdk3.FrontMcp,
+  FrontMcpAdapter: () => import_sdk3.FrontMcpAdapter,
+  FrontMcpApp: () => import_sdk3.FrontMcpApp,
+  FrontMcpContext: () => FrontMcpContext,
+  FrontMcpPlugin: () => import_sdk3.FrontMcpPlugin,
+  FrontMcpPrompt: () => import_sdk3.FrontMcpPrompt,
+  FrontMcpProvider: () => FrontMcpProvider,
+  FrontMcpResource: () => import_sdk3.FrontMcpResource,
+  FrontMcpResourceTemplate: () => import_sdk3.FrontMcpResourceTemplate,
+  FrontMcpTool: () => import_sdk3.FrontMcpTool,
+  OutputDisplay: () => OutputDisplay,
+  Plugin: () => import_sdk3.Plugin,
+  Prompt: () => import_sdk3.Prompt,
+  PromptContext: () => import_sdk4.PromptContext,
+  PromptForm: () => PromptForm,
+  Resource: () => import_sdk3.Resource,
+  ResourceContext: () => import_sdk4.ResourceContext,
+  ResourceTemplate: () => import_sdk3.ResourceTemplate,
+  ResourceViewer: () => ResourceViewer,
+  ServerRegistry: () => ServerRegistry,
+  Tool: () => import_sdk3.Tool,
+  ToolContext: () => import_sdk4.ToolContext,
+  ToolForm: () => ToolForm,
+  clearCreateCache: () => import_sdk.clearCreateCache,
+  connect: () => import_sdk2.connect,
+  connectClaude: () => import_sdk2.connectClaude,
+  connectLangChain: () => import_sdk2.connectLangChain,
+  connectOpenAI: () => import_sdk2.connectOpenAI,
+  connectVercelAI: () => import_sdk2.connectVercelAI,
+  create: () => import_sdk.create,
+  createStore: () => createStore,
+  frontMcpPrompt: () => import_sdk3.frontMcpPrompt,
+  frontMcpResource: () => import_sdk3.frontMcpResource,
+  frontMcpResourceTemplate: () => import_sdk3.frontMcpResourceTemplate,
+  frontMcpTool: () => import_sdk3.frontMcpTool,
+  mcpComponent: () => mcpComponent,
+  mcpLazy: () => mcpLazy,
+  prompt: () => import_sdk3.prompt,
+  readDomById: () => readDomById,
+  readDomBySelector: () => readDomBySelector,
+  reduxStore: () => reduxStore,
+  resource: () => import_sdk3.resource,
+  resourceTemplate: () => import_sdk3.resourceTemplate,
+  serverRegistry: () => serverRegistry,
+  tool: () => import_sdk3.tool,
+  useCallTool: () => useCallTool,
+  useComponentTree: () => useComponentTree,
+  useDynamicResource: () => useDynamicResource,
+  useDynamicTool: () => useDynamicTool,
+  useFrontMcp: () => useFrontMcp,
+  useGetPrompt: () => useGetPrompt,
+  useListPrompts: () => useListPrompts,
+  useListResources: () => useListResources,
+  useListTools: () => useListTools,
+  useReadResource: () => useReadResource,
+  useResolvedServer: () => useResolvedServer,
+  useServer: () => useServer,
+  useStoreResource: () => useStoreResource,
+  valtioStore: () => valtioStore
+});
+module.exports = __toCommonJS(index_exports);
+var import_sdk = require("@frontmcp/sdk");
+var import_sdk2 = require("@frontmcp/sdk");
+var import_sdk3 = require("@frontmcp/sdk");
+var import_sdk4 = require("@frontmcp/sdk");
+
+// libs/react/src/registry/ServerRegistry.ts
+var ServerRegistry = class {
+  entries = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  version = 0;
+  register(name, server) {
+    this.entries.set(name, {
+      server,
+      client: null,
+      status: "idle",
+      error: null,
+      tools: [],
+      resources: [],
+      resourceTemplates: [],
+      prompts: []
+    });
+    this.notify();
+  }
+  unregister(name) {
+    this.entries.delete(name);
+    this.notify();
+  }
+  get(name) {
+    return this.entries.get(name);
+  }
+  has(name) {
+    return this.entries.has(name);
+  }
+  list() {
+    return [...this.entries.keys()];
+  }
+  async connect(name) {
+    const entry = this.entries.get(name);
+    if (!entry) throw new Error(`Server "${name}" not registered`);
+    if (entry.client) return entry.client;
+    this.entries.set(name, { ...entry, status: "connecting", error: null });
+    this.notify();
+    try {
+      const client = await entry.server.connect();
+      const [toolsResult, resourcesResult, templatesResult, promptsResult] = await Promise.all([
+        client.listTools(),
+        client.listResources(),
+        client.listResourceTemplates(),
+        client.listPrompts()
+      ]);
+      const connected = {
+        ...entry,
+        client,
+        tools: toolsResult,
+        resources: resourcesResult.resources ?? [],
+        resourceTemplates: templatesResult.resourceTemplates ?? [],
+        prompts: promptsResult.prompts ?? [],
+        status: "connected",
+        error: null
+      };
+      this.entries.set(name, connected);
+      this.notify();
+      return client;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.entries.set(name, { ...entry, error, status: "error" });
+      this.notify();
+      throw error;
+    }
+  }
+  async connectAll() {
+    await Promise.all(this.list().map((name) => this.connect(name)));
+  }
+  update(name, partial) {
+    const entry = this.entries.get(name);
+    if (entry) {
+      this.entries.set(name, { ...entry, ...partial });
+      this.notify();
+    }
+  }
+  clear() {
+    this.entries.clear();
+    this.notify();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  getVersion() {
+    return this.version;
+  }
+  notify() {
+    this.version++;
+    this.listeners.forEach((l) => l());
+  }
+};
+var serverRegistry = new ServerRegistry();
+
+// libs/react/src/registry/DynamicRegistry.ts
+var DynamicRegistry = class {
+  tools = /* @__PURE__ */ new Map();
+  resources = /* @__PURE__ */ new Map();
+  toolRefCounts = /* @__PURE__ */ new Map();
+  resourceRefCounts = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  version = 0;
+  /**
+   * Register a dynamic tool. Returns an unregister function
+   * suitable for useEffect cleanup.
+   *
+   * Multiple registrations of the same name are ref-counted:
+   * subsequent registrations update the definition but the tool
+   * is only removed when every registrant has unregistered.
+   */
+  registerTool(def) {
+    const existing = this.toolRefCounts.get(def.name) ?? 0;
+    this.toolRefCounts.set(def.name, existing + 1);
+    this.tools.set(def.name, def);
+    if (existing === 0) {
+      this.notify();
+    }
+    let called = false;
+    return () => {
+      if (called) return;
+      called = true;
+      this.unregisterTool(def.name);
+    };
+  }
+  unregisterTool(name) {
+    const count = this.toolRefCounts.get(name);
+    if (count == null) return;
+    if (count <= 1) {
+      this.toolRefCounts.delete(name);
+      this.tools.delete(name);
+      this.notify();
+    } else {
+      this.toolRefCounts.set(name, count - 1);
+    }
+  }
+  /**
+   * Register a dynamic resource. Returns an unregister function
+   * suitable for useEffect cleanup.
+   *
+   * Multiple registrations of the same URI are ref-counted.
+   */
+  registerResource(def) {
+    const existing = this.resourceRefCounts.get(def.uri) ?? 0;
+    this.resourceRefCounts.set(def.uri, existing + 1);
+    this.resources.set(def.uri, def);
+    if (existing === 0) {
+      this.notify();
+    }
+    let called = false;
+    return () => {
+      if (called) return;
+      called = true;
+      this.unregisterResource(def.uri);
+    };
+  }
+  unregisterResource(uri) {
+    const count = this.resourceRefCounts.get(uri);
+    if (count == null) return;
+    if (count <= 1) {
+      this.resourceRefCounts.delete(uri);
+      this.resources.delete(uri);
+      this.notify();
+    } else {
+      this.resourceRefCounts.set(uri, count - 1);
+    }
+  }
+  /** Update the execute function for an existing tool (for stale closure prevention). */
+  updateToolExecute(name, execute) {
+    const existing = this.tools.get(name);
+    if (existing) {
+      existing.execute = execute;
+    }
+  }
+  /** Update the read function for an existing resource and notify subscribers. */
+  updateResourceRead(uri, read) {
+    const existing = this.resources.get(uri);
+    if (existing) {
+      existing.read = read;
+      this.notify();
+    }
+  }
+  getTools() {
+    return [...this.tools.values()];
+  }
+  getResources() {
+    return [...this.resources.values()];
+  }
+  findTool(name) {
+    return this.tools.get(name);
+  }
+  findResource(uri) {
+    return this.resources.get(uri);
+  }
+  hasTool(name) {
+    return this.tools.has(name);
+  }
+  hasResource(uri) {
+    return this.resources.has(uri);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  getVersion() {
+    return this.version;
+  }
+  clear() {
+    if (this.tools.size === 0 && this.resources.size === 0) return;
+    this.tools.clear();
+    this.resources.clear();
+    this.toolRefCounts.clear();
+    this.resourceRefCounts.clear();
+    this.notify();
+  }
+  notify() {
+    this.version++;
+    this.listeners.forEach((l) => {
+      l();
+    });
+  }
+};
+
+// libs/react/src/registry/createWrappedServer.ts
+function patchClientWithDynamic(client, dynamicRegistry) {
+  if (typeof client.callTool === "function") {
+    const originalCallTool = client.callTool.bind(client);
+    client.callTool = async (name, args) => {
+      const dynamicTool = dynamicRegistry.findTool(name);
+      if (dynamicTool) {
+        return dynamicTool.execute(args ?? {});
+      }
+      return originalCallTool(name, args);
+    };
+  }
+  if (typeof client.readResource === "function") {
+    const originalReadResource = client.readResource.bind(client);
+    client.readResource = async (uri) => {
+      const dynamicResource = dynamicRegistry.findResource(uri);
+      if (dynamicResource) {
+        return dynamicResource.read();
+      }
+      return originalReadResource(uri);
+    };
+  }
+  return client;
+}
+function createWrappedServer(base, dynamicRegistry) {
+  return {
+    get ready() {
+      return base.ready;
+    },
+    async listTools(options) {
+      const baseResult = await base.listTools(options);
+      const dynamicTools = dynamicRegistry.getTools();
+      if (dynamicTools.length === 0) return baseResult;
+      const dynamicNames = new Set(dynamicTools.map((t) => t.name));
+      const baseTools = (baseResult.tools ?? []).filter((t) => !dynamicNames.has(t.name));
+      const mergedTools = [
+        ...baseTools,
+        ...dynamicTools.map((t) => ({
+          name: t.name,
+          description: t.description,
+          inputSchema: t.inputSchema
+        }))
+      ];
+      return { ...baseResult, tools: mergedTools };
+    },
+    async callTool(name, args, options) {
+      const dynamicTool = dynamicRegistry.findTool(name);
+      if (dynamicTool) {
+        return dynamicTool.execute(args ?? {});
+      }
+      return base.callTool(name, args, options);
+    },
+    async listResources(options) {
+      const baseResult = await base.listResources(options);
+      const dynamicResources = dynamicRegistry.getResources();
+      if (dynamicResources.length === 0) return baseResult;
+      const dynamicUris = new Set(dynamicResources.map((r) => r.uri));
+      const baseResources = (baseResult.resources ?? []).filter(
+        (r) => !dynamicUris.has(r.uri)
+      );
+      const mergedResources = [
+        ...baseResources,
+        ...dynamicResources.map((r) => ({
+          uri: r.uri,
+          name: r.name ?? r.uri,
+          description: r.description,
+          mimeType: r.mimeType
+        }))
+      ];
+      return { ...baseResult, resources: mergedResources };
+    },
+    async listResourceTemplates(options) {
+      return base.listResourceTemplates(options);
+    },
+    async readResource(uri, options) {
+      const dynamicResource = dynamicRegistry.findResource(uri);
+      if (dynamicResource) {
+        return dynamicResource.read();
+      }
+      return base.readResource(uri, options);
+    },
+    async listPrompts(options) {
+      return base.listPrompts(options);
+    },
+    async getPrompt(name, args, options) {
+      return base.getPrompt(name, args, options);
+    },
+    async listJobs(options) {
+      return base.listJobs(options);
+    },
+    async executeJob(name, input, options) {
+      return base.executeJob(name, input, options);
+    },
+    async getJobStatus(runId, options) {
+      return base.getJobStatus(runId, options);
+    },
+    async listWorkflows(options) {
+      return base.listWorkflows(options);
+    },
+    async executeWorkflow(name, input, options) {
+      return base.executeWorkflow(name, input, options);
+    },
+    async getWorkflowStatus(runId, options) {
+      return base.getWorkflowStatus(runId, options);
+    },
+    async connect(sessionIdOrOptions) {
+      const client = await base.connect(sessionIdOrOptions);
+      return patchClientWithDynamic(client, dynamicRegistry);
+    },
+    async dispose() {
+      return base.dispose();
+    }
+  };
+}
+
+// libs/react/src/provider/FrontMcpContext.ts
+var import_react = require("react");
+
+// libs/react/src/components/ComponentRegistry.ts
+var ComponentRegistry = class {
+  entries = /* @__PURE__ */ new Map();
+  register(uri, component, meta) {
+    const name = extractName(uri);
+    this.entries.set(uri, { uri, name, component, description: meta?.description });
+  }
+  registerAll(map) {
+    for (const [uri, component] of Object.entries(map)) {
+      this.register(uri, component);
+    }
+  }
+  get(uri) {
+    return this.entries.get(uri)?.component;
+  }
+  /**
+   * Resolve a shorthand name like `'UserCard'` by trying
+   * `component://UserCard`, `element://UserCard`, `page://UserCard`.
+   */
+  resolve(type) {
+    const exact = this.entries.get(type);
+    if (exact) return exact.component;
+    for (const protocol of ["component://", "element://", "page://"]) {
+      const entry = this.entries.get(`${protocol}${type}`);
+      if (entry) return entry.component;
+    }
+    return void 0;
+  }
+  has(uri) {
+    return this.entries.has(uri);
+  }
+  list() {
+    return Array.from(this.entries.values()).map(({ uri, name, description }) => ({
+      uri,
+      name,
+      description
+    }));
+  }
+  clear() {
+    this.entries.clear();
+  }
+};
+function extractName(uri) {
+  const idx = uri.indexOf("://");
+  return idx >= 0 ? uri.slice(idx + 3) : uri;
+}
+
+// libs/react/src/provider/FrontMcpContext.ts
+var defaultDynamicRegistry = new DynamicRegistry();
+var FrontMcpContext = (0, import_react.createContext)({
+  name: "default",
+  registry: new ComponentRegistry(),
+  dynamicRegistry: defaultDynamicRegistry,
+  getDynamicRegistry: () => defaultDynamicRegistry,
+  connect: async () => {
+  }
+});
+
+// libs/react/src/provider/FrontMcpProvider.tsx
+var import_react3 = __toESM(require("react"));
+
+// libs/react/src/state/useStoreRegistration.ts
+var import_react2 = require("react");
+var VALID_NAME_RE = /^[a-zA-Z0-9_-]+$/;
+function validateStoreName(name) {
+  if (!name || !VALID_NAME_RE.test(name)) {
+    throw new Error(`useStoreRegistration: invalid store name "${name}". Names must match ${VALID_NAME_RE}.`);
+  }
+}
+function useStoreRegistration(stores, dynamicRegistry) {
+  (0, import_react2.useEffect)(() => {
+    if (stores.length === 0) return;
+    const cleanups = [];
+    for (const adapter of stores) {
+      const { name, subscribe, selectors, actions } = adapter;
+      validateStoreName(name);
+      const getStateWrapper = () => adapter.getState();
+      const readState = async () => ({
+        contents: [
+          {
+            uri: `state://${name}`,
+            mimeType: "application/json",
+            text: JSON.stringify(getStateWrapper())
+          }
+        ]
+      });
+      cleanups.push(
+        dynamicRegistry.registerResource({
+          uri: `state://${name}`,
+          name: `${name}-state`,
+          description: `Full state of ${name} store`,
+          mimeType: "application/json",
+          read: readState
+        })
+      );
+      const selectorEntries = [];
+      if (selectors) {
+        for (const [key, selector] of Object.entries(selectors)) {
+          if (!key || !VALID_NAME_RE.test(key)) {
+            throw new Error(`useStoreRegistration: invalid selector key "${key}". Keys must match ${VALID_NAME_RE}.`);
+          }
+          const uri = `state://${name}/${key}`;
+          const readSelector = async () => ({
+            contents: [
+              {
+                uri,
+                mimeType: "application/json",
+                text: JSON.stringify(selector(getStateWrapper()))
+              }
+            ]
+          });
+          selectorEntries.push({ uri, readSelector });
+          cleanups.push(
+            dynamicRegistry.registerResource({
+              uri,
+              name: `${name}-${key}`,
+              description: `Selector "${key}" from ${name} store`,
+              mimeType: "application/json",
+              read: readSelector
+            })
+          );
+        }
+      }
+      const unsubscribe = subscribe(() => {
+        dynamicRegistry.updateResourceRead(`state://${name}`, readState);
+        for (const { uri, readSelector } of selectorEntries) {
+          dynamicRegistry.updateResourceRead(uri, readSelector);
+        }
+      });
+      cleanups.push(unsubscribe);
+      if (actions) {
+        for (const [key, action] of Object.entries(actions)) {
+          const toolName = `${name}_${key}`;
+          const execute = async (args) => {
+            const argsArray = args["args"];
+            const result = await (Array.isArray(argsArray) ? action(...argsArray) : action(args));
+            return {
+              content: [{ type: "text", text: JSON.stringify({ success: true, result }) }]
+            };
+          };
+          cleanups.push(
+            dynamicRegistry.registerTool({
+              name: toolName,
+              description: `Action "${key}" on ${name} store`,
+              inputSchema: {
+                type: "object",
+                properties: {
+                  args: { type: "array", description: "Arguments to pass to the action" }
+                }
+              },
+              execute
+            })
+          );
+        }
+      }
+    }
+    return () => {
+      cleanups.forEach((fn) => {
+        fn();
+      });
+    };
+  }, [stores, dynamicRegistry]);
+}
+
+// libs/react/src/provider/FrontMcpProvider.tsx
+function FrontMcpProvider({
+  name: nameProp,
+  server,
+  servers,
+  components,
+  stores,
+  autoConnect = true,
+  children,
+  onConnected,
+  onError
+}) {
+  const resolvedName = nameProp ?? "default";
+  const mountedRef = (0, import_react3.useRef)(true);
+  const clientRef = (0, import_react3.useRef)(null);
+  const registry = (0, import_react3.useMemo)(() => {
+    const reg = new ComponentRegistry();
+    if (components) {
+      reg.registerAll(components);
+    }
+    return reg;
+  }, [components]);
+  const registryMapRef = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
+  const getDynamicRegistry = (0, import_react3.useCallback)(
+    (serverName) => {
+      const key = serverName ?? resolvedName;
+      let reg = registryMapRef.current.get(key);
+      if (!reg) {
+        reg = new DynamicRegistry();
+        registryMapRef.current.set(key, reg);
+      }
+      return reg;
+    },
+    [resolvedName]
+  );
+  const dynamicRegistry = (0, import_react3.useMemo)(() => getDynamicRegistry(resolvedName), [getDynamicRegistry, resolvedName]);
+  useStoreRegistration(stores ?? [], dynamicRegistry);
+  const wrappedServer = (0, import_react3.useMemo)(() => createWrappedServer(server, dynamicRegistry), [server, dynamicRegistry]);
+  (0, import_react3.useEffect)(() => {
+    serverRegistry.register(resolvedName, wrappedServer);
+    if (servers) {
+      for (const [sName, srv] of Object.entries(servers)) {
+        const srvRegistry = getDynamicRegistry(sName);
+        const wrappedSrv = createWrappedServer(srv, srvRegistry);
+        serverRegistry.register(sName, wrappedSrv);
+      }
+    }
+    return () => {
+      serverRegistry.unregister(resolvedName);
+      if (servers) {
+        for (const sName of Object.keys(servers)) {
+          serverRegistry.unregister(sName);
+          const srvRegistry = registryMapRef.current.get(sName);
+          if (srvRegistry) {
+            srvRegistry.clear();
+            registryMapRef.current.delete(sName);
+          }
+        }
+      }
+    };
+  }, [resolvedName, wrappedServer, servers, getDynamicRegistry]);
+  (0, import_react3.useEffect)(() => {
+    const refreshServerEntry = (name) => {
+      const entry = serverRegistry.get(name);
+      if (!entry || !entry.client) return;
+      const srv = entry.server;
+      if (!srv) return;
+      Promise.all([srv.listTools(), srv.listResources()]).then(([toolsResult, resourcesResult]) => {
+        if (mountedRef.current) {
+          serverRegistry.update(name, {
+            tools: toolsResult.tools ?? [],
+            resources: resourcesResult.resources ?? []
+          });
+        }
+      }).catch(() => {
+      });
+    };
+    const unsubs = [];
+    unsubs.push(
+      dynamicRegistry.subscribe(() => {
+        refreshServerEntry(resolvedName);
+      })
+    );
+    if (servers) {
+      for (const sName of Object.keys(servers)) {
+        const srvRegistry = registryMapRef.current.get(sName);
+        if (srvRegistry) {
+          unsubs.push(
+            srvRegistry.subscribe(() => {
+              refreshServerEntry(sName);
+            })
+          );
+        }
+      }
+    }
+    return () => {
+      unsubs.forEach((fn) => {
+        fn();
+      });
+    };
+  }, [dynamicRegistry, resolvedName, servers]);
+  const connectClient = (0, import_react3.useCallback)(async () => {
+    if (clientRef.current) return;
+    try {
+      serverRegistry.update(resolvedName, { status: "connecting", error: null });
+      const client = await wrappedServer.connect();
+      clientRef.current = client;
+      const safeList = (fn, fallback) => fn().catch(() => fallback);
+      const [toolsResult, resourcesResult, templatesResult, promptsResult] = await Promise.all([
+        safeList(() => client.listTools(), []),
+        safeList(() => client.listResources(), { resources: [] }),
+        safeList(() => client.listResourceTemplates(), { resourceTemplates: [] }),
+        safeList(() => client.listPrompts(), { prompts: [] })
+      ]);
+      if (mountedRef.current) {
+        const dynamicTools = dynamicRegistry.getTools().map((t) => ({
+          name: t.name,
+          description: t.description,
+          inputSchema: t.inputSchema
+        }));
+        const dynamicResources = dynamicRegistry.getResources().map((r) => ({
+          uri: r.uri,
+          name: r.name,
+          description: r.description,
+          mimeType: r.mimeType
+        }));
+        const baseTools = toolsResult;
+        const dynamicToolNames = new Set(dynamicTools.map((t) => t.name));
+        const filteredBaseTools = (Array.isArray(baseTools) ? baseTools : []).filter(
+          (t) => !dynamicToolNames.has(t.name)
+        );
+        const baseResources = resourcesResult.resources ?? [];
+        const dynamicResourceUris = new Set(dynamicResources.map((r) => r.uri));
+        const filteredBaseResources = baseResources.filter((r) => !dynamicResourceUris.has(r.uri));
+        serverRegistry.update(resolvedName, {
+          client,
+          status: "connected",
+          error: null,
+          tools: [...filteredBaseTools, ...dynamicTools],
+          resources: [...filteredBaseResources, ...dynamicResources],
+          resourceTemplates: templatesResult.resourceTemplates ?? [],
+          prompts: promptsResult.prompts ?? []
+        });
+        onConnected?.(client);
+      }
+      if (servers) {
+        for (const sName of Object.keys(servers)) {
+          serverRegistry.connect(sName).catch(() => {
+          });
+        }
+      }
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      if (mountedRef.current) {
+        serverRegistry.update(resolvedName, { error: e, status: "error" });
+        onError?.(e);
+      }
+    }
+  }, [resolvedName, wrappedServer, servers, onConnected, onError, dynamicRegistry]);
+  (0, import_react3.useEffect)(() => {
+    mountedRef.current = true;
+    if (autoConnect) {
+      connectClient();
+    }
+    return () => {
+      mountedRef.current = false;
+      clientRef.current = null;
+    };
+  }, [autoConnect, connectClient]);
+  const contextValue = (0, import_react3.useMemo)(
+    () => ({
+      name: resolvedName,
+      registry,
+      dynamicRegistry,
+      getDynamicRegistry,
+      connect: connectClient
+    }),
+    [resolvedName, registry, dynamicRegistry, getDynamicRegistry, connectClient]
+  );
+  return import_react3.default.createElement(FrontMcpContext.Provider, { value: contextValue }, children);
+}
+
+// libs/react/src/hooks/useResolvedServer.ts
+var import_react5 = require("react");
+
+// libs/react/src/hooks/useServer.ts
+var import_react4 = require("react");
+function useServer(name) {
+  const subscribe = (0, import_react4.useCallback)((cb) => serverRegistry.subscribe(cb), []);
+  const getSnapshot = (0, import_react4.useCallback)(() => {
+    return serverRegistry.get(name ?? "default");
+  }, [name]);
+  return (0, import_react4.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+}
+
+// libs/react/src/hooks/useResolvedServer.ts
+function useResolvedServer(serverName) {
+  const ctx = (0, import_react5.useContext)(FrontMcpContext);
+  const resolvedName = serverName ?? ctx.name;
+  const entry = useServer(resolvedName);
+  return { entry, name: resolvedName, registry: ctx.registry, connect: ctx.connect };
+}
+
+// libs/react/src/hooks/useFrontMcp.ts
+function useFrontMcp(name) {
+  const { entry, name: resolvedName, registry, connect: connect2 } = useResolvedServer(name);
+  return {
+    name: resolvedName,
+    server: entry?.server ?? null,
+    client: entry?.client ?? null,
+    status: entry?.status ?? "idle",
+    error: entry?.error ?? null,
+    tools: entry?.tools ?? [],
+    resources: entry?.resources ?? [],
+    resourceTemplates: entry?.resourceTemplates ?? [],
+    prompts: entry?.prompts ?? [],
+    registry,
+    connect: connect2
+  };
+}
+
+// libs/react/src/hooks/useCallTool.ts
+var import_react6 = require("react");
+function useCallTool(toolName, options = {}) {
+  const { onSuccess, onError, resetOnToolChange = true, server: serverName } = options;
+  const { entry } = useResolvedServer(serverName);
+  const client = entry?.client ?? null;
+  const status = entry?.status ?? "idle";
+  const [state, setState] = (0, import_react6.useState)({
+    data: null,
+    loading: false,
+    error: null,
+    called: false
+  });
+  (0, import_react6.useEffect)(() => {
+    if (resetOnToolChange) {
+      setState({ data: null, loading: false, error: null, called: false });
+    }
+  }, [toolName, resetOnToolChange]);
+  const reset = (0, import_react6.useCallback)(() => {
+    setState({ data: null, loading: false, error: null, called: false });
+  }, []);
+  const callTool = (0, import_react6.useCallback)(
+    async (args) => {
+      if (status !== "connected" || !client) {
+        const error = new Error("FrontMCP not connected");
+        setState((prev) => ({ ...prev, error, called: true }));
+        onError?.(error);
+        return null;
+      }
+      setState((prev) => ({ ...prev, loading: true, error: null, called: true }));
+      try {
+        const result = await client.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;
+      }
+    },
+    [client, status, toolName, onSuccess, onError]
+  );
+  return [callTool, state, reset];
+}
+
+// libs/react/src/hooks/useReadResource.ts
+var import_react7 = require("react");
+function useReadResource(uriOrOptions, maybeOptions) {
+  const uri = typeof uriOrOptions === "string" ? uriOrOptions : void 0;
+  const options = typeof uriOrOptions === "object" ? uriOrOptions : maybeOptions;
+  const serverName = options?.server;
+  const { entry } = useResolvedServer(serverName);
+  const client = entry?.client ?? null;
+  const status = entry?.status ?? "idle";
+  const [state, setState] = (0, import_react7.useState)({
+    data: null,
+    loading: false,
+    error: null
+  });
+  const read = (0, import_react7.useCallback)(
+    async (targetUri) => {
+      if (status !== "connected" || !client) {
+        const error = new Error("FrontMCP not connected");
+        setState({ data: null, loading: false, error });
+        return null;
+      }
+      setState({ data: null, loading: true, error: null });
+      try {
+        const result = await client.readResource(targetUri);
+        setState({ data: result, loading: false, error: null });
+        return result;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState({ data: null, loading: false, error });
+        return null;
+      }
+    },
+    [client, status]
+  );
+  (0, import_react7.useEffect)(() => {
+    if (uri && status === "connected" && client) {
+      read(uri);
+    }
+  }, [uri, status, client, read]);
+  if (uri !== void 0) {
+    return {
+      ...state,
+      refetch: () => {
+        read(uri);
+      }
+    };
+  }
+  return [read, state];
+}
+
+// libs/react/src/hooks/useGetPrompt.ts
+var import_react8 = require("react");
+function useGetPrompt(promptName, options) {
+  const { entry } = useResolvedServer(options?.server);
+  const client = entry?.client ?? null;
+  const status = entry?.status ?? "idle";
+  const [state, setState] = (0, import_react8.useState)({
+    data: null,
+    loading: false,
+    error: null
+  });
+  const getPrompt = (0, import_react8.useCallback)(
+    async (args) => {
+      if (status !== "connected" || !client) {
+        const error = new Error("FrontMCP not connected");
+        setState({ data: null, loading: false, error });
+        return null;
+      }
+      setState({ data: null, loading: true, error: null });
+      try {
+        const result = await client.getPrompt(promptName, args);
+        setState({ data: result, loading: false, error: null });
+        return result;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setState({ data: null, loading: false, error });
+        return null;
+      }
+    },
+    [client, status, promptName]
+  );
+  return [getPrompt, state];
+}
+
+// libs/react/src/hooks/useListTools.ts
+var EMPTY_TOOLS = [];
+function useListTools(options) {
+  const { entry } = useResolvedServer(options?.server);
+  return entry?.tools ?? EMPTY_TOOLS;
+}
+
+// libs/react/src/hooks/useListResources.ts
+var EMPTY_RESOURCES = [];
+var EMPTY_TEMPLATES = [];
+function useListResources(options) {
+  const { entry } = useResolvedServer(options?.server);
+  return {
+    resources: entry?.resources ?? EMPTY_RESOURCES,
+    resourceTemplates: entry?.resourceTemplates ?? EMPTY_TEMPLATES
+  };
+}
+
+// libs/react/src/hooks/useListPrompts.ts
+var EMPTY_PROMPTS = [];
+function useListPrompts(options) {
+  const { entry } = useResolvedServer(options?.server);
+  return entry?.prompts ?? EMPTY_PROMPTS;
+}
+
+// libs/react/src/hooks/useStoreResource.ts
+var import_react9 = require("react");
+function parseResourceContent(result) {
+  const r = result;
+  if (r?.contents?.[0]?.text) {
+    try {
+      return JSON.parse(r.contents[0].text);
+    } catch {
+      return r.contents[0].text;
+    }
+  }
+  return result;
+}
+function useStoreResource(uri, options) {
+  const { entry } = useResolvedServer(options?.server);
+  const client = entry?.client ?? null;
+  const status = entry?.status ?? "idle";
+  const [state, setState] = (0, import_react9.useState)({ data: null, loading: true, error: null });
+  const uriRef = (0, import_react9.useRef)(uri);
+  uriRef.current = uri;
+  const fetchResource = (0, import_react9.useCallback)(async () => {
+    if (status !== "connected" || !client) return;
+    try {
+      const result = await client.readResource(uri);
+      setState({ data: parseResourceContent(result), loading: false, error: null });
+    } catch (err) {
+      setState({ data: null, loading: false, error: err instanceof Error ? err : new Error(String(err)) });
+    }
+  }, [uri, client, status]);
+  const fetchRef = (0, import_react9.useRef)(fetchResource);
+  fetchRef.current = fetchResource;
+  (0, import_react9.useEffect)(() => {
+    if (status !== "connected" || !client) return;
+    let cancelled = false;
+    setState((prev) => ({ ...prev, loading: true }));
+    fetchRef.current();
+    let unsubNotification;
+    (async () => {
+      try {
+        await client.subscribeResource(uri);
+      } catch {
+      }
+      if (cancelled) {
+        client.unsubscribeResource(uri).catch(() => {
+        });
+        return;
+      }
+      unsubNotification = client.onResourceUpdated((updatedUri) => {
+        if (updatedUri === uriRef.current) {
+          fetchRef.current();
+        }
+      });
+    })();
+    return () => {
+      cancelled = true;
+      unsubNotification?.();
+      client.unsubscribeResource(uri).catch(() => {
+      });
+    };
+  }, [uri, client, status]);
+  return {
+    ...state,
+    refetch: fetchResource
+  };
+}
+
+// libs/react/src/hooks/useDynamicTool.ts
+var import_react10 = require("react");
+
+// libs/react/src/utils/zodToJsonSchema.ts
+var import_v4 = require("zod/v4");
+function zodToJsonSchema(schema) {
+  return (0, import_v4.toJSONSchema)(schema);
+}
+
+// libs/react/src/hooks/useDynamicTool.ts
+function useDynamicTool(options) {
+  const { name, description, enabled = true } = options;
+  const { getDynamicRegistry } = (0, import_react10.useContext)(FrontMcpContext);
+  const dynamicRegistry = getDynamicRegistry(options.server);
+  const resolvedInputSchema = (0, import_react10.useMemo)(() => {
+    if ("schema" in options && options.schema) {
+      return zodToJsonSchema(options.schema);
+    }
+    return options.inputSchema;
+  }, ["schema" in options ? options.schema : void 0, "inputSchema" in options ? options.inputSchema : void 0]);
+  const executeRef = (0, import_react10.useRef)(options.execute);
+  executeRef.current = options.execute;
+  const schemaRef = (0, import_react10.useRef)("schema" in options && options.schema ? options.schema : null);
+  schemaRef.current = "schema" in options && options.schema ? options.schema : null;
+  (0, import_react10.useEffect)(() => {
+    if (!enabled) return;
+    const stableExecute = async (args) => {
+      const zodSchema = schemaRef.current;
+      if (zodSchema) {
+        const result = zodSchema.safeParse(args);
+        if (!result.success) {
+          return {
+            isError: true,
+            content: [
+              {
+                type: "text",
+                text: JSON.stringify({
+                  error: "validation_error",
+                  issues: result.error.issues.map((i) => ({
+                    path: i.path,
+                    message: i.message
+                  }))
+                })
+              }
+            ]
+          };
+        }
+        return executeRef.current(result.data);
+      }
+      return executeRef.current(args);
+    };
+    const unregister = dynamicRegistry.registerTool({
+      name,
+      description,
+      inputSchema: resolvedInputSchema,
+      execute: stableExecute
+    });
+    return unregister;
+  }, [dynamicRegistry, name, description, resolvedInputSchema, enabled]);
+}
+
+// libs/react/src/hooks/useDynamicResource.ts
+var import_react11 = require("react");
+function useDynamicResource(options) {
+  const { uri, name, description, mimeType, read, enabled = true } = options;
+  const { getDynamicRegistry } = (0, import_react11.useContext)(FrontMcpContext);
+  const dynamicRegistry = getDynamicRegistry(options.server);
+  const readRef = (0, import_react11.useRef)(read);
+  readRef.current = read;
+  (0, import_react11.useEffect)(() => {
+    if (!enabled) return;
+    const stableRead = () => readRef.current();
+    const unregister = dynamicRegistry.registerResource({
+      uri,
+      name,
+      description,
+      mimeType,
+      read: stableRead
+    });
+    return unregister;
+  }, [dynamicRegistry, uri, name, description, mimeType, enabled]);
+}
+
+// libs/react/src/hooks/useComponentTree.ts
+var import_react12 = require("react");
+var RFC_3986_SCHEME_RE = /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//;
+function walkDom(element, maxDepth, includeProps, depth = 0) {
+  if (depth > maxDepth) return null;
+  const component = element.getAttribute("data-component") ?? void 0;
+  const tag = element.tagName.toLowerCase();
+  const children = [];
+  for (let i = 0; i < element.children.length; i++) {
+    const child = walkDom(element.children[i], maxDepth, includeProps, depth + 1);
+    if (child) children.push(child);
+  }
+  const node = {
+    component: component ?? tag,
+    tag,
+    children
+  };
+  if (includeProps) {
+    const props = {};
+    for (let i = 0; i < element.attributes.length; i++) {
+      const attr = element.attributes[i];
+      if (attr.name.startsWith("data-") && attr.name !== "data-component") {
+        props[attr.name] = attr.value;
+      }
+    }
+    if (Object.keys(props).length > 0) {
+      node.props = props;
+    }
+  }
+  return node;
+}
+function useComponentTree(options) {
+  const { rootRef, uri = "react://component-tree", maxDepth = 10, includeProps = false, server } = options;
+  if (!RFC_3986_SCHEME_RE.test(uri)) {
+    throw new Error("URI must have a valid scheme (e.g., file://, https://, custom://)");
+  }
+  const read = (0, import_react12.useCallback)(async () => {
+    const root = rootRef.current;
+    if (!root) {
+      return {
+        contents: [{ uri, mimeType: "application/json", text: JSON.stringify({ error: "Root element not mounted" }) }]
+      };
+    }
+    const tree = walkDom(root, maxDepth, includeProps);
+    return {
+      contents: [{ uri, mimeType: "application/json", text: JSON.stringify(tree) }]
+    };
+  }, [rootRef, uri, maxDepth, includeProps]);
+  useDynamicResource({
+    uri,
+    name: "component-tree",
+    description: "React component tree (DOM-based with data-component attributes)",
+    mimeType: "application/json",
+    read,
+    server
+  });
+}
+
+// libs/react/src/components/DynamicRenderer.tsx
+var import_react13 = __toESM(require("react"));
+function DynamicRenderer({ tree, registry, fallback }) {
+  return renderNode(tree, registry, fallback, 0);
+}
+function renderNode(node, registry, fallback, index) {
+  const Component = registry.resolve(node.type) ?? fallback ?? "div";
+  const childElements = renderChildren(node.children, registry, fallback);
+  return import_react13.default.createElement(
+    Component,
+    { ...node.props, key: `dynamic-${index}` },
+    ...childElements
+  );
+}
+function renderChildren(children, registry, fallback) {
+  if (children === void 0 || children === null) {
+    return [];
+  }
+  if (typeof children === "string") {
+    return [children];
+  }
+  if (Array.isArray(children)) {
+    return children.map((child, i) => renderNode(child, registry, fallback, i));
+  }
+  return [renderNode(children, registry, fallback, 0)];
+}
+
+// libs/react/src/components/DomResources.ts
+function readDomById(id) {
+  if (typeof document === "undefined") {
+    return {
+      contents: [
+        {
+          uri: `dom://byId/${id}`,
+          mimeType: "text/plain",
+          text: "DOM not available (not in a browser environment)"
+        }
+      ]
+    };
+  }
+  const el = document.getElementById(id);
+  if (!el) {
+    return {
+      contents: [
+        {
+          uri: `dom://byId/${id}`,
+          mimeType: "text/plain",
+          text: `Element with id "${id}" not found`
+        }
+      ]
+    };
+  }
+  return {
+    contents: [
+      {
+        uri: `dom://byId/${id}`,
+        mimeType: "application/json",
+        text: JSON.stringify({
+          outerHTML: el.outerHTML,
+          textContent: el.textContent ?? "",
+          tagName: el.tagName.toLowerCase()
+        })
+      }
+    ]
+  };
+}
+function readDomBySelector(selector) {
+  if (typeof document === "undefined") {
+    return {
+      contents: [
+        {
+          uri: `dom://selector/${selector}`,
+          mimeType: "text/plain",
+          text: "DOM not available (not in a browser environment)"
+        }
+      ]
+    };
+  }
+  let elements;
+  try {
+    elements = document.querySelectorAll(selector);
+  } catch {
+    return {
+      contents: [
+        {
+          uri: `dom://selector/${selector}`,
+          mimeType: "text/plain",
+          text: `Invalid selector: "${selector}"`
+        }
+      ]
+    };
+  }
+  if (elements.length === 0) {
+    return {
+      contents: [
+        {
+          uri: `dom://selector/${selector}`,
+          mimeType: "text/plain",
+          text: `No elements found matching "${selector}"`
+        }
+      ]
+    };
+  }
+  const items = Array.from(elements).map((el) => ({
+    outerHTML: el.outerHTML,
+    textContent: el.textContent ?? "",
+    tagName: el.tagName.toLowerCase()
+  }));
+  return {
+    contents: [
+      {
+        uri: `dom://selector/${selector}`,
+        mimeType: "application/json",
+        text: JSON.stringify(items)
+      }
+    ]
+  };
+}
+
+// libs/react/src/components/ToolForm.tsx
+var import_react14 = __toESM(require("react"));
+function ToolForm({
+  tool: tool2,
+  onSubmit,
+  renderField,
+  submitLabel = "Call Tool"
+}) {
+  const schema = tool2.inputSchema ?? {};
+  const properties = schema["properties"] ?? {};
+  const required = schema["required"] ?? [];
+  const [values, setValues] = (0, import_react14.useState)({});
+  const handleSubmit = (0, import_react14.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const args = {};
+      for (const [key, prop] of Object.entries(properties)) {
+        const raw = values[key] ?? "";
+        if (!required.includes(key) && raw === "") continue;
+        if (prop["type"] === "number" || prop["type"] === "integer") {
+          args[key] = Number(raw);
+        } else if (prop["type"] === "boolean") {
+          args[key] = raw === "true";
+        } else {
+          args[key] = raw;
+        }
+      }
+      onSubmit(args);
+    },
+    [values, properties, required, onSubmit]
+  );
+  const handleChange = (0, import_react14.useCallback)((key, value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  return import_react14.default.createElement(
+    "form",
+    { onSubmit: handleSubmit },
+    ...Object.entries(properties).map(([key, prop]) => {
+      const isRequired = required.includes(key);
+      const enumValues = prop["enum"];
+      const fieldType = getFieldType(prop);
+      const value = values[key] ?? "";
+      if (renderField) {
+        return import_react14.default.createElement(
+          import_react14.default.Fragment,
+          { key },
+          renderField({
+            name: key,
+            type: fieldType,
+            required: isRequired,
+            description: prop["description"],
+            enumValues,
+            value,
+            onChange: (v) => handleChange(key, v)
+          })
+        );
+      }
+      return import_react14.default.createElement(
+        "div",
+        { key, style: { marginBottom: "8px" } },
+        import_react14.default.createElement(
+          "label",
+          { htmlFor: `field-${key}`, style: { display: "block", marginBottom: "4px" } },
+          `${key}${isRequired ? " *" : ""}`
+        ),
+        enumValues ? import_react14.default.createElement(
+          "select",
+          {
+            id: `field-${key}`,
+            value: value || enumValues[0] || "",
+            onChange: (e) => handleChange(key, e.target.value)
+          },
+          ...enumValues.map((v) => import_react14.default.createElement("option", { key: v, value: v }, v))
+        ) : import_react14.default.createElement("input", {
+          id: `field-${key}`,
+          type: fieldType === "number" || fieldType === "integer" ? "number" : "text",
+          step: fieldType === "integer" ? "1" : void 0,
+          placeholder: prop["description"] ?? "",
+          required: isRequired,
+          value,
+          onChange: (e) => handleChange(key, e.target.value)
+        })
+      );
+    }),
+    import_react14.default.createElement("button", { type: "submit" }, submitLabel)
+  );
+}
+function getFieldType(prop) {
+  if (prop["enum"]) return "enum";
+  return prop["type"] ?? "string";
+}
+
+// libs/react/src/components/PromptForm.tsx
+var import_react15 = __toESM(require("react"));
+function PromptForm({
+  prompt: prompt2,
+  onSubmit,
+  renderField,
+  submitLabel = "Get Prompt"
+}) {
+  const args = prompt2.arguments ?? [];
+  const [values, setValues] = (0, import_react15.useState)({});
+  const handleSubmit = (0, import_react15.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const result = {};
+      for (const arg of args) {
+        result[arg.name] = values[arg.name] ?? "";
+      }
+      onSubmit(result);
+    },
+    [values, args, onSubmit]
+  );
+  const handleChange = (0, import_react15.useCallback)((key, value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  return import_react15.default.createElement(
+    "form",
+    { onSubmit: handleSubmit },
+    ...args.map((arg) => {
+      const value = values[arg.name] ?? "";
+      if (renderField) {
+        return import_react15.default.createElement(
+          import_react15.default.Fragment,
+          { key: arg.name },
+          renderField({
+            name: arg.name,
+            type: "string",
+            required: arg.required ?? false,
+            description: arg.description,
+            value,
+            onChange: (v) => handleChange(arg.name, v)
+          })
+        );
+      }
+      return import_react15.default.createElement(
+        "div",
+        { key: arg.name, style: { marginBottom: "8px" } },
+        import_react15.default.createElement(
+          "label",
+          { htmlFor: `prompt-${arg.name}`, style: { display: "block", marginBottom: "4px" } },
+          `${arg.name}${arg.required ? " *" : ""}`
+        ),
+        import_react15.default.createElement("textarea", {
+          id: `prompt-${arg.name}`,
+          name: arg.name,
+          placeholder: arg.description ?? "",
+          required: arg.required,
+          value,
+          onChange: (e) => handleChange(arg.name, e.target.value),
+          rows: 3,
+          style: { width: "100%" }
+        })
+      );
+    }),
+    import_react15.default.createElement("button", { type: "submit" }, submitLabel)
+  );
+}
+
+// libs/react/src/components/ResourceViewer.tsx
+var import_react16 = __toESM(require("react"));
+function ResourceViewer({ data, loading, error }) {
+  if (loading) {
+    return import_react16.default.createElement("div", { "data-testid": "resource-loading" }, "Loading...");
+  }
+  if (error) {
+    return import_react16.default.createElement(
+      "div",
+      { "data-testid": "resource-error", style: { color: "red" } },
+      `Error: ${error.message}`
+    );
+  }
+  if (!data || !data.contents || data.contents.length === 0) {
+    return import_react16.default.createElement("div", { "data-testid": "resource-empty" }, "No content");
+  }
+  return import_react16.default.createElement(
+    "div",
+    { "data-testid": "resource-viewer" },
+    ...data.contents.map(
+      (content, i) => import_react16.default.createElement(
+        "div",
+        { key: `${content.uri}-${i}`, style: { marginBottom: "8px" } },
+        import_react16.default.createElement("div", { style: { fontSize: "0.8em", color: "#666" } }, content.uri),
+        content.mimeType === "application/json" ? import_react16.default.createElement("pre", { style: { overflow: "auto" } }, formatJson(content.text ?? "")) : import_react16.default.createElement("div", null, content.text ?? "")
+      )
+    )
+  );
+}
+function formatJson(text) {
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2);
+  } catch {
+    return text;
+  }
+}
+
+// libs/react/src/components/OutputDisplay.tsx
+var import_react17 = __toESM(require("react"));
+function OutputDisplay({ data, loading, error }) {
+  if (loading) {
+    return import_react17.default.createElement("div", { "data-testid": "output-loading" }, "Loading...");
+  }
+  if (error) {
+    return import_react17.default.createElement(
+      "div",
+      { "data-testid": "output-error", style: { color: "red" } },
+      `Error: ${error.message}`
+    );
+  }
+  if (data === null || data === void 0) {
+    return import_react17.default.createElement("div", { "data-testid": "output-empty" }, "");
+  }
+  let formatted;
+  if (typeof data === "string") {
+    formatted = data;
+  } else {
+    try {
+      formatted = JSON.stringify(data, null, 2);
+    } catch {
+      formatted = String(data);
+    }
+  }
+  return import_react17.default.createElement(
+    "pre",
+    { "data-testid": "output-display", style: { overflow: "auto", whiteSpace: "pre-wrap" } },
+    formatted
+  );
+}
+
+// libs/react/src/components/AgentContent.tsx
+var import_react18 = __toESM(require("react"));
+function AgentContent({
+  name,
+  description,
+  inputSchema = { type: "object" },
+  render,
+  fallback = null,
+  server
+}) {
+  const [lastData, setLastData] = (0, import_react18.useState)(null);
+  const execute = (0, import_react18.useCallback)(
+    async (args) => {
+      setLastData(args);
+      return {
+        content: [{ type: "text", text: JSON.stringify({ success: true, rendered: name }) }]
+      };
+    },
+    [name]
+  );
+  useDynamicTool({ name, description, inputSchema, execute, server });
+  return import_react18.default.createElement(import_react18.default.Fragment, null, lastData !== null ? render(lastData) : fallback);
+}
+
+// libs/react/src/components/AgentSearch.tsx
+var import_react19 = __toESM(require("react"));
+function AgentSearch({
+  toolName,
+  description,
+  placeholder,
+  onResults,
+  renderInput,
+  server
+}) {
+  const [query, setQuery] = (0, import_react19.useState)("");
+  const execute = (0, import_react19.useCallback)(
+    async (args) => {
+      const results = args["results"] ?? args;
+      onResults(results);
+      return {
+        content: [{ type: "text", text: JSON.stringify({ success: true, delivered: true }) }]
+      };
+    },
+    [onResults]
+  );
+  useDynamicTool({
+    name: toolName,
+    description,
+    inputSchema: {
+      type: "object",
+      properties: {
+        query: { type: "string", description: "The search query" },
+        results: { type: "array", description: "Search results to display" }
+      }
+    },
+    execute,
+    server
+  });
+  const readQuery = (0, import_react19.useCallback)(
+    async () => ({
+      contents: [{ uri: `search://${toolName}/query`, mimeType: "text/plain", text: query }]
+    }),
+    [query, toolName]
+  );
+  useDynamicResource({
+    uri: `search://${toolName}/query`,
+    name: `${toolName}-query`,
+    description: `Current search query for ${toolName}`,
+    mimeType: "text/plain",
+    read: readQuery,
+    server
+  });
+  const inputProps = {
+    value: query,
+    onChange: setQuery,
+    placeholder
+  };
+  if (renderInput) {
+    return import_react19.default.createElement(import_react19.default.Fragment, null, renderInput(inputProps));
+  }
+  return import_react19.default.createElement("input", {
+    type: "text",
+    value: query,
+    onChange: (e) => setQuery(e.target.value),
+    placeholder
+  });
+}
+
+// libs/react/src/components/mcpComponent.tsx
+var import_react20 = __toESM(require("react"));
+var import_zod = require("zod");
+var MCP_LAZY_MARKER = /* @__PURE__ */ Symbol.for("frontmcp:lazy");
+function mcpLazy(factory) {
+  return Object.assign(factory, { [MCP_LAZY_MARKER]: true });
+}
+function DefaultTable({ rows, columns }) {
+  return import_react20.default.createElement(
+    "table",
+    null,
+    import_react20.default.createElement(
+      "thead",
+      null,
+      import_react20.default.createElement(
+        "tr",
+        null,
+        columns.map((col) => import_react20.default.createElement("th", { key: col.key }, col.header))
+      )
+    ),
+    import_react20.default.createElement(
+      "tbody",
+      null,
+      rows.map(
+        (row, i) => import_react20.default.createElement(
+          "tr",
+          { key: i },
+          columns.map((col) => {
+            const value = row[col.key];
+            const rendered = col.render ? col.render(value) : String(value ?? "");
+            return import_react20.default.createElement("td", { key: col.key }, rendered);
+          })
+        )
+      )
+    )
+  );
+}
+function isLazyImport(fn) {
+  if (typeof fn !== "function") return false;
+  return MCP_LAZY_MARKER in fn;
+}
+function mcpComponent(component, options) {
+  const { name, description, schema, fallback = null, server, columns } = options;
+  const isTableMode = component === null && columns != null;
+  let ResolvedComponent = null;
+  if (component !== null && !isTableMode) {
+    if (isLazyImport(component)) {
+      ResolvedComponent = import_react20.default.lazy(component);
+    } else {
+      ResolvedComponent = component;
+    }
+  }
+  let toolSchema;
+  if (isTableMode) {
+    toolSchema = import_zod.z.object({ rows: import_zod.z.array(schema) });
+  } else {
+    toolSchema = schema;
+  }
+  const isLazy = component !== null && !isTableMode && isLazyImport(component);
+  const McpWrappedComponent = Object.assign(
+    function McpWrappedComponentInner(directProps) {
+      const [lastData, setLastData] = (0, import_react20.useState)(null);
+      const [tableRows, setTableRows] = (0, import_react20.useState)(null);
+      const execute = (0, import_react20.useCallback)(
+        async (args) => {
+          if (isTableMode) {
+            const data2 = args;
+            setTableRows(data2.rows);
+          } else {
+            setLastData(args);
+          }
+          return {
+            content: [{ type: "text", text: JSON.stringify({ success: true, rendered: name }) }]
+          };
+        },
+        [name]
+      );
+      useDynamicTool({
+        name,
+        description: description ?? name,
+        schema: toolSchema,
+        execute,
+        server
+      });
+      const hasDirectProps = Object.keys(directProps).length > 0;
+      if (isTableMode && columns) {
+        if (tableRows !== null) {
+          return import_react20.default.createElement(DefaultTable, { rows: tableRows, columns });
+        }
+        return import_react20.default.createElement(import_react20.default.Fragment, null, fallback);
+      }
+      const data = hasDirectProps ? { ...lastData, ...directProps } : lastData;
+      if (data !== null && ResolvedComponent) {
+        if (isLazy) {
+          return import_react20.default.createElement(
+            import_react20.Suspense,
+            { fallback: fallback ?? null },
+            import_react20.default.createElement(ResolvedComponent, data)
+          );
+        }
+        return import_react20.default.createElement(ResolvedComponent, data);
+      }
+      if (hasDirectProps && ResolvedComponent) {
+        if (isLazy) {
+          return import_react20.default.createElement(
+            import_react20.Suspense,
+            { fallback: fallback ?? null },
+            import_react20.default.createElement(ResolvedComponent, directProps)
+          );
+        }
+        return import_react20.default.createElement(ResolvedComponent, directProps);
+      }
+      return import_react20.default.createElement(import_react20.default.Fragment, null, fallback);
+    },
+    { toolName: name }
+  );
+  McpWrappedComponent.displayName = `mcpComponent(${name})`;
+  return McpWrappedComponent;
+}
+
+// libs/react/src/state/adapters/reduxAdapter.ts
+function reduxStore(options) {
+  const { store, name = "redux", selectors, actions: rawActions } = options;
+  let actions;
+  if (rawActions) {
+    actions = {};
+    for (const [key, actionCreator] of Object.entries(rawActions)) {
+      actions[key] = (...args) => {
+        const action = actionCreator(...args);
+        return store.dispatch(action);
+      };
+    }
+  }
+  return {
+    name,
+    getState: store.getState.bind(store),
+    subscribe: store.subscribe.bind(store),
+    selectors,
+    actions
+  };
+}
+
+// libs/react/src/state/adapters/valtioAdapter.ts
+function getByPath(obj, path) {
+  const parts = path.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current == null || typeof current !== "object") return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function valtioStore(options) {
+  const { proxy, subscribe: valtioSubscribe, name = "valtio", paths, mutations } = options;
+  let selectors;
+  if (paths) {
+    selectors = {};
+    for (const [key, path] of Object.entries(paths)) {
+      selectors[key] = (state) => getByPath(state, path);
+    }
+  }
+  let actions;
+  if (mutations) {
+    actions = {};
+    for (const [key, mutation] of Object.entries(mutations)) {
+      actions[key] = (...args) => mutation(...args);
+    }
+  }
+  return {
+    name,
+    getState: () => JSON.parse(JSON.stringify(proxy)),
+    subscribe: (cb) => valtioSubscribe(proxy, cb),
+    selectors,
+    actions
+  };
+}
+
+// libs/react/src/state/adapters/createStore.ts
+function createStore(options) {
+  return {
+    name: options.name,
+    getState: options.getState,
+    subscribe: options.subscribe,
+    selectors: options.selectors,
+    actions: options.actions
+  };
+}