react-webmcp 0.1.1 → 0.2.1

package/dist/index.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var React2 = require('react');
+var React6 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React2__default = /*#__PURE__*/_interopDefault(React2);
+var React6__default = /*#__PURE__*/_interopDefault(React6);
 
 // src/hooks/useWebMCPTool.ts
 
@@ -23,10 +23,12 @@ function isWebMCPTestingAvailable() {
   return typeof window !== "undefined" && typeof window.navigator !== "undefined" && !!window.navigator.modelContextTesting;
 }
 function warnIfUnavailable(hookName) {
-  if (!isWebMCPAvailable()) {
-    console.warn(
-      `[react-webmcp] ${hookName}: navigator.modelContext is not available. Ensure you are running Chrome 146+ with the "WebMCP for testing" flag enabled.`
-    );
+  if (process.env.NODE_ENV !== "production") {
+    if (!isWebMCPAvailable()) {
+      console.warn(
+        `[react-webmcp] ${hookName}: navigator.modelContext is not available. Ensure you are running Chrome 146+ with the "WebMCP for testing" flag enabled.`
+      );
+    }
   }
 }
 
@@ -35,11 +37,11 @@ function toolFingerprint(config) {
   return `${config.name}::${config.description}::${JSON.stringify(config.inputSchema)}::${JSON.stringify(config.outputSchema ?? {})}::${JSON.stringify(config.annotations ?? {})}`;
 }
 function useWebMCPTool(config) {
-  const registeredNameRef = React2.useRef(null);
-  const configRef = React2.useRef(config);
+  const registeredNameRef = React6.useRef(null);
+  const configRef = React6.useRef(config);
   configRef.current = config;
   const fingerprint = toolFingerprint(config);
-  React2.useEffect(() => {
+  React6.useEffect(() => {
     const mc = getModelContext();
     if (!mc) {
       warnIfUnavailable("useWebMCPTool");
@@ -55,17 +57,26 @@ function useWebMCPTool(config) {
       name: config.name,
       description: config.description,
       inputSchema: config.inputSchema,
-      ...config.outputSchema ? { outputSchema: config.outputSchema } : {},
-      ...config.annotations ? { annotations: config.annotations } : {},
       execute: (input) => {
         return configRef.current.execute(input);
       }
     };
+    if (config.outputSchema) {
+      toolDef.outputSchema = config.outputSchema;
+    }
+    if (config.annotations) {
+      toolDef.annotations = config.annotations;
+    }
     try {
       mc.registerTool(toolDef);
       registeredNameRef.current = config.name;
     } catch (err) {
-      console.error(`[react-webmcp] Failed to register tool "${config.name}":`, err);
+      if (process.env.NODE_ENV !== "production") {
+        console.error(
+          `[react-webmcp] Failed to register tool "${config.name}":`,
+          err
+        );
+      }
     }
     return () => {
       try {
@@ -82,25 +93,40 @@ function toolsFingerprint(tools) {
   ).join("|");
 }
 function useWebMCPContext(config) {
-  const toolsRef = React2.useRef(config.tools);
+  const toolsRef = React6.useRef(config.tools);
   toolsRef.current = config.tools;
   const fingerprint = toolsFingerprint(config.tools);
-  React2.useEffect(() => {
+  React6.useEffect(() => {
     const mc = getModelContext();
     if (!mc) {
       warnIfUnavailable("useWebMCPContext");
       return;
     }
-    const stableTools = toolsRef.current.map((tool, idx) => ({
-      ...tool,
-      execute: (input) => {
-        return toolsRef.current[idx].execute(input);
+    const stableTools = toolsRef.current.map((tool, idx) => {
+      const def = {
+        name: tool.name,
+        description: tool.description,
+        inputSchema: tool.inputSchema,
+        execute: (input) => {
+          return toolsRef.current[idx].execute(input);
+        }
+      };
+      if (tool.annotations) {
+        def.annotations = tool.annotations;
+      }
+      if (tool.outputSchema) {
+        def.outputSchema = tool.outputSchema;
       }
-    }));
+      return def;
+    });
     try {
-      mc.provideContext({ tools: stableTools });
+      mc.provideContext({
+        tools: stableTools
+      });
     } catch (err) {
-      console.error("[react-webmcp] Failed to provide context:", err);
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[react-webmcp] Failed to provide context:", err);
+      }
     }
     return () => {
       try {
@@ -111,7 +137,7 @@ function useWebMCPContext(config) {
   }, [fingerprint]);
 }
 function useToolEvent(event, callback, toolNameFilter) {
-  React2.useEffect(() => {
+  React6.useEffect(() => {
     const handler = (e) => {
       const toolName = e.toolName ?? e.detail?.toolName;
       if (!toolName) return;
@@ -134,8 +160,8 @@ function WebMCPForm({
   children,
   ...rest
 }) {
-  const formRef = React2.useRef(null);
-  React2.useEffect(() => {
+  const formRef = React6.useRef(null);
+  React6.useEffect(() => {
     const handleActivated = (e) => {
       const name = e.toolName ?? e.detail?.toolName;
       if (name === toolName && onToolActivated) {
@@ -155,7 +181,7 @@ function WebMCPForm({
       window.removeEventListener("toolcancel", handleCancel);
     };
   }, [toolName, onToolActivated, onToolCancel]);
-  const handleSubmit = React2.useCallback(
+  const handleSubmit = React6.useCallback(
     (e) => {
       if (onSubmit) {
         onSubmit(e.nativeEvent);
@@ -181,7 +207,7 @@ function WebMCPForm({
     }
   );
 }
-var WebMCPInput = React2__default.default.forwardRef(
+var WebMCPInput = React6__default.default.forwardRef(
   ({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
     const webmcpAttrs = {};
     if (toolParamTitle) {
@@ -194,7 +220,7 @@ var WebMCPInput = React2__default.default.forwardRef(
   }
 );
 WebMCPInput.displayName = "WebMCPInput";
-var WebMCPSelect = React2__default.default.forwardRef(({ toolParamTitle, toolParamDescription, children, ...rest }, ref) => {
+var WebMCPSelect = React6__default.default.forwardRef(({ toolParamTitle, toolParamDescription, children, ...rest }, ref) => {
   const webmcpAttrs = {};
   if (toolParamTitle) {
     webmcpAttrs.toolparamtitle = toolParamTitle;
@@ -205,7 +231,7 @@ var WebMCPSelect = React2__default.default.forwardRef(({ toolParamTitle, toolPar
   return /* @__PURE__ */ jsxRuntime.jsx("select", { ref, ...webmcpAttrs, ...rest, children });
 });
 WebMCPSelect.displayName = "WebMCPSelect";
-var WebMCPTextarea = React2__default.default.forwardRef(({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
+var WebMCPTextarea = React6__default.default.forwardRef(({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
   const webmcpAttrs = {};
   if (toolParamTitle) {
     webmcpAttrs.toolparamtitle = toolParamTitle;
@@ -216,12 +242,12 @@ var WebMCPTextarea = React2__default.default.forwardRef(({ toolParamTitle, toolP
   return /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref, ...webmcpAttrs, ...rest });
 });
 WebMCPTextarea.displayName = "WebMCPTextarea";
-var WebMCPReactContext = React2.createContext({
+var WebMCPReactContext = React6.createContext({
   available: false,
   testingAvailable: false
 });
 function WebMCPProvider({ children }) {
-  const value = React2.useMemo(
+  const value = React6.useMemo(
     () => ({
       available: isWebMCPAvailable(),
       testingAvailable: isWebMCPTestingAvailable()
@@ -231,20 +257,354 @@ function WebMCPProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(WebMCPReactContext.Provider, { value, children });
 }
 function useWebMCPStatus() {
-  return React2.useContext(WebMCPReactContext);
+  return React6.useContext(WebMCPReactContext);
+}
+function extractOptions(children) {
+  const results = [];
+  React6__default.default.Children.toArray(children).forEach((child) => {
+    if (!React6__default.default.isValidElement(child)) return;
+    const props = child.props;
+    if (props.value !== void 0 && props.value !== null) {
+      const value = props.value;
+      let label;
+      if (typeof props.children === "string") {
+        label = props.children;
+      } else {
+        label = String(value);
+      }
+      results.push({ value, label });
+    }
+    if (props.children) {
+      results.push(...extractOptions(props.children));
+    }
+  });
+  return results;
+}
+function extractFields(children) {
+  const fields = [];
+  React6__default.default.Children.toArray(children).forEach((child) => {
+    if (!React6__default.default.isValidElement(child)) return;
+    const props = child.props;
+    const inputProps = props.inputProps;
+    const slotInput = props.slotProps?.input;
+    const name = props.name ?? inputProps?.name ?? slotInput?.name;
+    if (name) {
+      const field = { name };
+      if (props.type !== void 0) field.type = props.type;
+      if (props.required !== void 0) field.required = Boolean(props.required);
+      if (props.min !== void 0) field.min = Number(props.min);
+      if (props.max !== void 0) field.max = Number(props.max);
+      if (props.minLength !== void 0) field.minLength = Number(props.minLength);
+      if (props.maxLength !== void 0) field.maxLength = Number(props.maxLength);
+      if (props.pattern !== void 0) field.pattern = props.pattern;
+      if (props.children) {
+        const options = extractOptions(props.children);
+        if (options.length > 0) {
+          field.enumValues = options.map((o) => o.value);
+          field.oneOf = options;
+        }
+      }
+      fields.push(field);
+    } else if (props.children) {
+      fields.push(...extractFields(props.children));
+    }
+  });
+  return fields;
+}
+
+// src/adapters/buildSchema.ts
+function mapHtmlTypeToSchemaType(htmlType) {
+  switch (htmlType) {
+    case "number":
+    case "range":
+      return "number";
+    case "checkbox":
+      return "boolean";
+    default:
+      return "string";
+  }
+}
+function buildInputSchema(fields) {
+  const properties = {};
+  const required = [];
+  const sortedFields = [...fields].sort((a, b) => a.name.localeCompare(b.name));
+  for (const field of sortedFields) {
+    const prop = {
+      type: mapHtmlTypeToSchemaType(field.type)
+    };
+    if (field.title) prop.title = field.title;
+    if (field.description) prop.description = field.description;
+    if (field.min !== void 0) prop.minimum = field.min;
+    if (field.max !== void 0) prop.maximum = field.max;
+    if (field.minLength !== void 0) prop.minLength = field.minLength;
+    if (field.maxLength !== void 0) prop.maxLength = field.maxLength;
+    if (field.pattern) prop.pattern = field.pattern;
+    if (field.enumValues && field.enumValues.length > 0) {
+      prop.enum = field.enumValues;
+    }
+    if (field.oneOf && field.oneOf.length > 0) {
+      prop.oneOf = field.oneOf.map((opt) => ({
+        const: opt.value,
+        title: opt.label
+      }));
+    }
+    properties[field.name] = prop;
+    if (field.required) {
+      required.push(field.name);
+    }
+  }
+  const schema = {
+    type: "object",
+    properties
+  };
+  if (required.length > 0) {
+    schema.required = required.sort();
+  }
+  return schema;
+}
+
+// src/adapters/validateSchema.ts
+function validateSchema(fields, options) {
+  if (process.env.NODE_ENV === "production") return;
+  const strict = options?.strict ?? false;
+  const issues = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const field of fields) {
+    if (seen.has(field.name)) {
+      issues.push(`Duplicate field name "${field.name}".`);
+    }
+    seen.add(field.name);
+    const schemaType = mapHtmlTypeToSchemaType(field.type);
+    if (field.pattern !== void 0 && schemaType !== "string") {
+      issues.push(
+        `Field "${field.name}": pattern is only valid for string types, but type is "${schemaType}".`
+      );
+    }
+    if ((field.min !== void 0 || field.max !== void 0) && schemaType !== "number") {
+      issues.push(
+        `Field "${field.name}": min/max are only valid for number types, but type is "${schemaType}".`
+      );
+    }
+    if ((field.minLength !== void 0 || field.maxLength !== void 0) && schemaType !== "string") {
+      issues.push(
+        `Field "${field.name}": minLength/maxLength are only valid for string types, but type is "${schemaType}".`
+      );
+    }
+    if (field.enumValues && field.enumValues.length > 0) {
+      for (const val of field.enumValues) {
+        const valType = typeof val;
+        if (schemaType === "string" && valType !== "string") {
+          issues.push(
+            `Field "${field.name}": enum value ${JSON.stringify(val)} is not a string.`
+          );
+        }
+        if (schemaType === "number" && valType !== "number") {
+          issues.push(
+            `Field "${field.name}": enum value ${JSON.stringify(val)} is not a number.`
+          );
+        }
+        if (schemaType === "boolean" && valType !== "boolean") {
+          issues.push(
+            `Field "${field.name}": enum value ${JSON.stringify(val)} is not a boolean.`
+          );
+        }
+      }
+    }
+  }
+  for (const issue of issues) {
+    if (strict) {
+      throw new Error(`[react-webmcp] ${issue}`);
+    }
+    console.warn(`[react-webmcp] ${issue}`);
+  }
+}
+
+// src/adapters/useSchemaCollector.ts
+var ToolContext = React6.createContext(null);
+function fieldsFingerprint(fields) {
+  return fields.map(
+    (f) => `${f.name}::${f.type ?? ""}::${f.required ?? ""}::${f.title ?? ""}::${f.description ?? ""}::${JSON.stringify(f.enumValues ?? [])}::${JSON.stringify(f.oneOf ?? [])}::${f.min ?? ""}::${f.max ?? ""}::${f.minLength ?? ""}::${f.maxLength ?? ""}::${f.pattern ?? ""}`
+  ).join("|");
 }
+function mergeField(base, override) {
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    if (override[key] !== void 0) {
+      result[key] = override[key];
+    }
+  }
+  return result;
+}
+function useSchemaCollector({
+  children,
+  fields: fieldsProp,
+  strict
+}) {
+  const contextFieldsRef = React6.useRef(/* @__PURE__ */ new Map());
+  const [version, setVersion] = React6.useState(0);
+  const registerField = React6.useCallback((field) => {
+    contextFieldsRef.current.set(field.name, field);
+    setVersion((v) => v + 1);
+  }, []);
+  const unregisterField = React6.useCallback((name) => {
+    contextFieldsRef.current.delete(name);
+    setVersion((v) => v + 1);
+  }, []);
+  const childrenFields = extractFields(children);
+  const childrenFP = fieldsFingerprint(childrenFields);
+  const merged = React6.useMemo(() => {
+    const fieldMap = /* @__PURE__ */ new Map();
+    for (const field of childrenFields) {
+      fieldMap.set(field.name, field);
+    }
+    if (fieldsProp) {
+      for (const [name, overrides] of Object.entries(fieldsProp)) {
+        const existing = fieldMap.get(name);
+        if (existing) {
+          fieldMap.set(name, mergeField(existing, overrides));
+        } else {
+          fieldMap.set(name, { name, ...overrides });
+        }
+      }
+    }
+    for (const [name, field] of contextFieldsRef.current) {
+      const existing = fieldMap.get(name);
+      if (existing) {
+        fieldMap.set(name, mergeField(existing, field));
+      } else {
+        fieldMap.set(name, field);
+      }
+    }
+    const result = Array.from(fieldMap.values());
+    if (process.env.NODE_ENV !== "production") {
+      validateSchema(result, { strict });
+    }
+    return result;
+  }, [childrenFP, fieldsProp, version, strict]);
+  const mergedFP = fieldsFingerprint(merged);
+  const schema = React6.useMemo(
+    () => buildInputSchema(merged),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mergedFP]
+  );
+  return { schema, registerField, unregisterField };
+}
+function WebMCPTool({
+  name,
+  description,
+  onExecute,
+  fields: fieldsProp,
+  strict,
+  autoSubmit,
+  annotations,
+  onToolActivated,
+  onToolCancel,
+  children
+}) {
+  const { schema, registerField, unregisterField } = useSchemaCollector({
+    children,
+    fields: fieldsProp,
+    strict
+  });
+  const executeRef = React6.useRef(onExecute);
+  executeRef.current = onExecute;
+  useWebMCPTool({
+    name,
+    description,
+    inputSchema: schema,
+    annotations,
+    execute: (input) => executeRef.current(input)
+  });
+  React6.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!onToolActivated && !onToolCancel) return;
+    const handleActivated = (e) => {
+      const toolName = e.toolName ?? e.detail?.toolName;
+      if (toolName === name && onToolActivated) {
+        onToolActivated(toolName);
+      }
+    };
+    const handleCancel = (e) => {
+      const toolName = e.toolName ?? e.detail?.toolName;
+      if (toolName === name && onToolCancel) {
+        onToolCancel(toolName);
+      }
+    };
+    window.addEventListener("toolactivated", handleActivated);
+    window.addEventListener("toolcancel", handleCancel);
+    return () => {
+      window.removeEventListener("toolactivated", handleActivated);
+      window.removeEventListener("toolcancel", handleCancel);
+    };
+  }, [name, onToolActivated, onToolCancel]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ToolContext.Provider, { value: { registerField, unregisterField }, children });
+}
+WebMCPTool.displayName = "WebMCP.Tool";
+function fieldFingerprint(field) {
+  return `${field.name}::${field.type ?? ""}::${field.required ?? ""}::${field.title ?? ""}::${field.description ?? ""}::${JSON.stringify(field.enumValues ?? [])}::${JSON.stringify(field.oneOf ?? [])}::${field.min ?? ""}::${field.max ?? ""}::${field.minLength ?? ""}::${field.maxLength ?? ""}::${field.pattern ?? ""}`;
+}
+function useRegisterField(field) {
+  const ctx = React6.useContext(ToolContext);
+  const fp = fieldFingerprint(field);
+  React6.useEffect(() => {
+    if (!ctx) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[react-webmcp] useRegisterField: no WebMCP.Tool context found for field "${field.name}". Wrap this component in a <WebMCP.Tool> to register fields.`
+        );
+      }
+      return;
+    }
+    ctx.registerField(field);
+    return () => {
+      try {
+        ctx.unregisterField(field.name);
+      } catch {
+      }
+    };
+  }, [fp]);
+}
+function WebMCPField({
+  children,
+  name,
+  ...rest
+}) {
+  const field = { name, ...rest };
+  if (!field.enumValues && !field.oneOf) {
+    const options = extractOptions(children);
+    if (options.length > 0) {
+      field.enumValues = options.map((o) => o.value);
+      field.oneOf = options;
+    }
+  }
+  useRegisterField(field);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+WebMCPField.displayName = "WebMCP.Field";
+
+// src/adapters/index.ts
+var WebMCP = { Tool: WebMCPTool, Field: WebMCPField };
 
+exports.WebMCP = WebMCP;
+exports.WebMCPField = WebMCPField;
 exports.WebMCPForm = WebMCPForm;
 exports.WebMCPInput = WebMCPInput;
 exports.WebMCPProvider = WebMCPProvider;
 exports.WebMCPSelect = WebMCPSelect;
 exports.WebMCPTextarea = WebMCPTextarea;
+exports.WebMCPTool = WebMCPTool;
+exports.buildInputSchema = buildInputSchema;
+exports.extractFields = extractFields;
+exports.extractOptions = extractOptions;
 exports.getModelContext = getModelContext;
 exports.isWebMCPAvailable = isWebMCPAvailable;
 exports.isWebMCPTestingAvailable = isWebMCPTestingAvailable;
+exports.useRegisterField = useRegisterField;
+exports.useSchemaCollector = useSchemaCollector;
 exports.useToolEvent = useToolEvent;
 exports.useWebMCPContext = useWebMCPContext;
 exports.useWebMCPStatus = useWebMCPStatus;
 exports.useWebMCPTool = useWebMCPTool;
+exports.validateSchema = validateSchema;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map