react-webmcp 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import React2, { createContext, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import React6, { createContext, useRef, useEffect, useCallback, useMemo, useContext, useState } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 // src/hooks/useWebMCPTool.ts
 
@@ -41,6 +41,23 @@ function useWebMCPTool(config) {
       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);
@@ -66,10 +83,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 () => {
@@ -96,6 +120,16 @@ function useWebMCPContext(config) {
       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,
@@ -201,7 +235,7 @@ function WebMCPForm({
     }
   );
 }
-var WebMCPInput = React2.forwardRef(
+var WebMCPInput = React6.forwardRef(
   ({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
     const webmcpAttrs = {};
     if (toolParamTitle) {
@@ -214,7 +248,7 @@ var WebMCPInput = React2.forwardRef(
   }
 );
 WebMCPInput.displayName = "WebMCPInput";
-var WebMCPSelect = React2.forwardRef(({ toolParamTitle, toolParamDescription, children, ...rest }, ref) => {
+var WebMCPSelect = React6.forwardRef(({ toolParamTitle, toolParamDescription, children, ...rest }, ref) => {
   const webmcpAttrs = {};
   if (toolParamTitle) {
     webmcpAttrs.toolparamtitle = toolParamTitle;
@@ -225,7 +259,7 @@ var WebMCPSelect = React2.forwardRef(({ toolParamTitle, toolParamDescription, ch
   return /* @__PURE__ */ jsx("select", { ref, ...webmcpAttrs, ...rest, children });
 });
 WebMCPSelect.displayName = "WebMCPSelect";
-var WebMCPTextarea = React2.forwardRef(({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
+var WebMCPTextarea = React6.forwardRef(({ toolParamTitle, toolParamDescription, ...rest }, ref) => {
   const webmcpAttrs = {};
   if (toolParamTitle) {
     webmcpAttrs.toolparamtitle = toolParamTitle;
@@ -253,7 +287,332 @@ function WebMCPProvider({ children }) {
 function useWebMCPStatus() {
   return useContext(WebMCPReactContext);
 }
+function extractOptions(children) {
+  const results = [];
+  React6.Children.toArray(children).forEach((child) => {
+    if (!React6.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.Children.toArray(children).forEach((child) => {
+    if (!React6.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 = 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 = useRef(/* @__PURE__ */ new Map());
+  const [version, setVersion] = useState(0);
+  const registerField = useCallback((field) => {
+    contextFieldsRef.current.set(field.name, field);
+    setVersion((v) => v + 1);
+  }, []);
+  const unregisterField = useCallback((name) => {
+    contextFieldsRef.current.delete(name);
+    setVersion((v) => v + 1);
+  }, []);
+  const childrenFields = extractFields(children);
+  const childrenFP = fieldsFingerprint(childrenFields);
+  const merged = 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 = 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 = useRef(onExecute);
+  executeRef.current = onExecute;
+  useWebMCPTool({
+    name,
+    description,
+    inputSchema: schema,
+    annotations,
+    execute: (input) => executeRef.current(input)
+  });
+  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__ */ 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 = useContext(ToolContext);
+  const fp = fieldFingerprint(field);
+  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__ */ jsx(Fragment, { children });
+}
+WebMCPField.displayName = "WebMCP.Field";
+
+// src/adapters/index.ts
+var WebMCP = { Tool: WebMCPTool, Field: WebMCPField };
 
-export { WebMCPForm, WebMCPInput, WebMCPProvider, WebMCPSelect, WebMCPTextarea, getModelContext, isWebMCPAvailable, isWebMCPTestingAvailable, useToolEvent, useWebMCPContext, useWebMCPStatus, useWebMCPTool };
+export { WebMCP, WebMCPField, WebMCPForm, WebMCPInput, WebMCPProvider, WebMCPSelect, WebMCPTextarea, WebMCPTool, buildInputSchema, extractFields, extractOptions, getModelContext, isWebMCPAvailable, isWebMCPTestingAvailable, useRegisterField, useSchemaCollector, useToolEvent, useWebMCPContext, useWebMCPStatus, useWebMCPTool, validateSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map