react-webmcp 0.2.0 → 0.3.0

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
 
@@ -37,16 +37,33 @@ 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");
       return;
     }
+    if (!config.name) {
+      throw new Error("[react-webmcp] Tool name must be a non-empty string.");
+    }
+    if (!config.description) {
+      throw new Error(
+        `[react-webmcp] Tool "${config.name}" description must be a non-empty string.`
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && config.inputSchema) {
+      try {
+        JSON.stringify(config.inputSchema);
+      } catch (e) {
+        throw new Error(
+          `[react-webmcp] Tool "${config.name}" inputSchema is not JSON-serializable: ${e instanceof Error ? e.message : String(e)}`
+        );
+      }
+    }
     if (registeredNameRef.current && registeredNameRef.current !== config.name) {
       try {
         mc.unregisterTool(registeredNameRef.current);
@@ -72,10 +89,17 @@ function useWebMCPTool(config) {
       registeredNameRef.current = config.name;
     } catch (err) {
       if (process.env.NODE_ENV !== "production") {
-        console.error(
-          `[react-webmcp] Failed to register tool "${config.name}":`,
-          err
-        );
+        const isDuplicate = err instanceof DOMException && err.name === "InvalidStateError";
+        if (isDuplicate) {
+          console.warn(
+            `[react-webmcp] Tool "${config.name}" is already registered (InvalidStateError). This may indicate a duplicate registration or a missed unregisterTool().`
+          );
+        } else {
+          console.error(
+            `[react-webmcp] Failed to register tool "${config.name}":`,
+            err
+          );
+        }
       }
     }
     return () => {
@@ -93,15 +117,25 @@ 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;
     }
+    for (const tool of toolsRef.current) {
+      if (!tool.name) {
+        throw new Error("[react-webmcp] Tool name must be a non-empty string.");
+      }
+      if (!tool.description) {
+        throw new Error(
+          `[react-webmcp] Tool "${tool.name}" description must be a non-empty string.`
+        );
+      }
+    }
     const stableTools = toolsRef.current.map((tool, idx) => {
       const def = {
         name: tool.name,
@@ -137,7 +171,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;
@@ -160,8 +194,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) {
@@ -181,7 +215,7 @@ function WebMCPForm({
       window.removeEventListener("toolcancel", handleCancel);
     };
   }, [toolName, onToolActivated, onToolCancel]);
-  const handleSubmit = React2.useCallback(
+  const handleSubmit = React6.useCallback(
     (e) => {
       if (onSubmit) {
         onSubmit(e.nativeEvent);
@@ -207,7 +241,7 @@ function WebMCPForm({
     }
   );
 }
-var WebMCPInput = React2__default.default.forwardRef(
+var WebMCPInput = React6__default.default.forwardRef(
   ({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
     const webmcpAttrs = {};
     if (toolParamTitle) {
@@ -220,7 +254,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;
@@ -231,7 +265,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;
@@ -242,12 +276,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()
@@ -257,20 +291,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