@modelcontextprotocol/inspector-client 0.16.8 → 0.17.0

package/dist/assets/{index-3LzLs-Yz.js → index-BB0Z_sAV.js}

@@ -7411,8 +7411,8 @@ function getElementRef$1(element) {
   }
   return element.props.ref || element.ref;
 }
-function createCollection(name) {
-  const PROVIDER_NAME2 = name + "CollectionProvider";
+function createCollection(name2) {
+  const PROVIDER_NAME2 = name2 + "CollectionProvider";
   const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME2);
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
     PROVIDER_NAME2,
@@ -7425,7 +7425,7 @@ function createCollection(name) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref2, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME2;
-  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const COLLECTION_SLOT_NAME = name2 + "CollectionSlot";
   const CollectionSlotImpl = /* @__PURE__ */ createSlot(COLLECTION_SLOT_NAME);
   const CollectionSlot = React.forwardRef(
     (props, forwardedRef) => {
@@ -7436,7 +7436,7 @@ function createCollection(name) {
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
-  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_SLOT_NAME = name2 + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = /* @__PURE__ */ createSlot(ITEM_SLOT_NAME);
   const CollectionItemSlot = React.forwardRef(
@@ -7454,7 +7454,7 @@ function createCollection(name) {
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
-    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const context = useCollectionContext(name2 + "CollectionConsumer", scope);
     const getItems = React.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
@@ -7721,10 +7721,10 @@ function dispatchUpdate() {
   const event = new CustomEvent(CONTEXT_UPDATE);
   document.dispatchEvent(event);
 }
-function handleAndDispatchCustomEvent$1(name, handler, detail, { discrete }) {
+function handleAndDispatchCustomEvent$1(name2, handler, detail, { discrete }) {
   const target = detail.originalEvent.target;
-  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
-  if (handler) target.addEventListener(name, handler, { once: true });
+  const event = new CustomEvent(name2, { bubbles: false, cancelable: true, detail });
+  if (handler) target.addEventListener(name2, handler, { once: true });
   if (discrete) {
     dispatchDiscreteCustomEvent(target, event);
   } else {
@@ -8512,10 +8512,10 @@ function getAnnounceTextContent(container) {
   });
   return textContent;
 }
-function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+function handleAndDispatchCustomEvent(name2, handler, detail, { discrete }) {
   const currentTarget = detail.originalEvent.currentTarget;
-  const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });
-  if (handler) currentTarget.addEventListener(name, handler, { once: true });
+  const event = new CustomEvent(name2, { bubbles: true, cancelable: true, detail });
+  if (handler) currentTarget.addEventListener(name2, handler, { once: true });
   if (discrete) {
     dispatchDiscreteCustomEvent(currentTarget, event);
   } else {
@@ -16246,6 +16246,17 @@ objectType({
   token: stringType(),
   token_type_hint: stringType().optional()
 }).strip();
+const name = "@modelcontextprotocol/inspector-client";
+const version$1 = "0.17.0";
+const packageJson = {
+  name,
+  version: version$1
+};
+const CLIENT_IDENTITY = (() => {
+  const [, name2 = packageJson.name] = packageJson.name.split("/");
+  const version2 = packageJson.version;
+  return { name: name2, version: version2 };
+})();
 const SESSION_KEYS = {
   CODE_VERIFIER: "mcp_code_verifier",
   SERVER_URL: "mcp_server_url",
@@ -17041,14 +17052,9 @@ class InspectorOAuthClientProvider {
     });
   }
   saveClientInformation(clientInformation) {
-    const safeInfo = Object.fromEntries(
-      Object.entries(clientInformation).filter(
-        ([key]) => key !== "client_secret"
-      )
-    );
     saveClientInformationToSessionStorage({
       serverUrl: this.serverUrl,
-      clientInformation: safeInfo,
+      clientInformation,
       isPreregistered: false
     });
   }
@@ -18225,9 +18231,9 @@ function requireUri_all() {
           if (mailtoComponents.subject) headers["subject"] = mailtoComponents.subject;
           if (mailtoComponents.body) headers["body"] = mailtoComponents.body;
           var fields = [];
-          for (var name in headers) {
-            if (headers[name] !== O[name]) {
-              fields.push(name.replace(PCT_ENCODED, decodeUnreserved).replace(PCT_ENCODED, toUpperCase).replace(NOT_HFNAME, pctEncChar) + "=" + headers[name].replace(PCT_ENCODED, decodeUnreserved).replace(PCT_ENCODED, toUpperCase).replace(NOT_HFVALUE, pctEncChar));
+          for (var name2 in headers) {
+            if (headers[name2] !== O[name2]) {
+              fields.push(name2.replace(PCT_ENCODED, decodeUnreserved).replace(PCT_ENCODED, toUpperCase).replace(NOT_HFNAME, pctEncChar) + "=" + headers[name2].replace(PCT_ENCODED, decodeUnreserved).replace(PCT_ENCODED, toUpperCase).replace(NOT_HFVALUE, pctEncChar));
             }
           }
           if (fields.length) {
@@ -23263,9 +23269,9 @@ function requireAjv() {
     }
     return text.slice(0, -separator.length);
   }
-  function addFormat(name, format2) {
+  function addFormat(name2, format2) {
     if (typeof format2 == "string") format2 = new RegExp(format2);
-    this._formats[name] = format2;
+    this._formats[name2] = format2;
     return this;
   }
   function addDefaultMetaSchema(self2) {
@@ -23287,15 +23293,15 @@ function requireAjv() {
     else for (var key in optsSchemas) self2.addSchema(optsSchemas[key], key);
   }
   function addInitialFormats(self2) {
-    for (var name in self2._opts.formats) {
-      var format2 = self2._opts.formats[name];
-      self2.addFormat(name, format2);
+    for (var name2 in self2._opts.formats) {
+      var format2 = self2._opts.formats[name2];
+      self2.addFormat(name2, format2);
     }
   }
   function addInitialKeywords(self2) {
-    for (var name in self2._opts.keywords) {
-      var keyword2 = self2._opts.keywords[name];
-      self2.addKeyword(name, keyword2);
+    for (var name2 in self2._opts.keywords) {
+      var keyword2 = self2._opts.keywords[name2];
+      self2.addKeyword(name2, keyword2);
     }
   }
   function checkUnique(self2, id) {
@@ -23377,9 +23383,9 @@ function generateDefaultValue(schema, propertyName, parentSchema) {
     case "boolean":
       return isRequired ? false : void 0;
     case "array":
-      return [];
+      return isRequired ? [] : void 0;
     case "object": {
-      if (!schema.properties) return {};
+      if (!schema.properties) return isRequired ? {} : void 0;
       const obj = {};
       Object.entries(schema.properties).forEach(([key, prop]) => {
         if (isPropertyRequired(key, schema)) {
@@ -23389,7 +23395,7 @@ function generateDefaultValue(schema, propertyName, parentSchema) {
           }
         }
       });
-      return obj;
+      return isRequired ? obj : Object.keys(obj).length > 0 ? obj : void 0;
     }
     case "null":
       return null;
@@ -23428,6 +23434,21 @@ function normalizeUnionType(schema) {
   }
   return schema;
 }
+function cleanParams(params, schema) {
+  const cleaned = {};
+  const required2 = schema.required || [];
+  for (const [key, value] of Object.entries(params)) {
+    const isFieldRequired = required2.includes(key);
+    if (isFieldRequired) {
+      cleaned[key] = value;
+    } else {
+      if (value !== void 0 && value !== "" && value !== null) {
+        cleaned[key] = value;
+      }
+    }
+  }
+  return cleaned;
+}
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 6e4;
 class Protocol {
   constructor(_options) {
@@ -24908,10 +24929,6 @@ class StreamableHTTPClientTransport {
     return this._protocolVersion;
   }
 }
-const version$1 = "0.16.8";
-const packageJson = {
-  version: version$1
-};
 const getSearchParam = (key) => {
   try {
     const url = new URL(window.location.href);
@@ -25038,6 +25055,7 @@ function useConnection({
   oauthClientId,
   oauthScope,
   config,
+  connectionType = "proxy",
   onNotification,
   onPendingRequest,
   onElicitationRequest,
@@ -25053,6 +25071,10 @@ function useConnection({
   );
   const [requestHistory, setRequestHistory] = reactExports.useState([]);
   const [completionsSupported, setCompletionsSupported] = reactExports.useState(false);
+  const [mcpSessionId, setMcpSessionId] = reactExports.useState(null);
+  const [mcpProtocolVersion, setMcpProtocolVersion] = reactExports.useState(
+    null
+  );
   reactExports.useEffect(() => {
     if (!oauthClientId) {
       clearClientInformationFromSessionStorage({
@@ -25232,38 +25254,64 @@ function useConnection({
     }
     return false;
   };
+  const captureResponseHeaders = (response) => {
+    const sessionId = response.headers.get("mcp-session-id");
+    const protocolVersion = response.headers.get("mcp-protocol-version");
+    if (sessionId && sessionId !== mcpSessionId) {
+      setMcpSessionId(sessionId);
+    }
+    if (protocolVersion && protocolVersion !== mcpProtocolVersion) {
+      setMcpProtocolVersion(protocolVersion);
+    }
+  };
   const connect = async (_e2, retryCount = 0) => {
     var _a;
-    const client2 = new Client(
-      {
-        name: "mcp-inspector",
-        version: packageJson.version
-      },
-      {
-        capabilities: {
-          sampling: {},
-          elicitation: {},
-          roots: {
-            listChanged: true
-          }
+    const clientCapabilities = {
+      capabilities: {
+        sampling: {},
+        elicitation: {},
+        roots: {
+          listChanged: true
         }
       }
+    };
+    const client2 = new Client(
+      CLIENT_IDENTITY,
+      clientCapabilities
     );
-    try {
-      await checkProxyHealth();
-    } catch {
-      setConnectionStatus("error-connecting-to-proxy");
-      return;
+    if (connectionType === "proxy") {
+      try {
+        await checkProxyHealth();
+      } catch {
+        setConnectionStatus("error-connecting-to-proxy");
+        return;
+      }
     }
     let lastRequest = "";
     try {
       const headers = {};
       const serverAuthProvider = new InspectorOAuthClientProvider(sseUrl);
       let finalHeaders = customHeaders || [];
-      if (finalHeaders.length === 0) {
+      const isEmptyAuthHeader = (header) => header.name.trim().toLowerCase() === "authorization" && header.value.trim().toLowerCase() === "bearer";
+      const hasEmptyAuthHeader = finalHeaders.some(
+        (header) => header.enabled && isEmptyAuthHeader(header)
+      );
+      if (hasEmptyAuthHeader) {
+        toast2({
+          title: "Invalid Authorization Header",
+          description: "Authorization header is enabled but empty. Please add a token or disable the header.",
+          variant: "destructive"
+        });
+      }
+      const needsOAuthToken = !finalHeaders.some(
+        (header) => header.enabled && header.name.trim().toLowerCase() === "authorization"
+      );
+      if (needsOAuthToken) {
         const oauthToken = (_a = await serverAuthProvider.tokens()) == null ? void 0 : _a.access_token;
         if (oauthToken) {
           finalHeaders = [
+            // Remove any existing Authorization headers with empty tokens
+            ...finalHeaders.filter((header) => !isEmptyAuthHeader(header)),
             {
               name: "Authorization",
               value: `Bearer ${oauthToken}`,
@@ -25286,90 +25334,140 @@ function useConnection({
       if (customHeaderNames.length > 0) {
         headers["x-custom-auth-headers"] = JSON.stringify(customHeaderNames);
       }
-      const { token: proxyAuthToken, header: proxyAuthTokenHeader } = getMCPProxyAuthToken(config);
-      const proxyHeaders = {};
-      if (proxyAuthToken) {
-        proxyHeaders[proxyAuthTokenHeader] = `Bearer ${proxyAuthToken}`;
-      }
       let transportOptions;
-      let mcpProxyServerUrl;
-      switch (transportType) {
-        case "stdio": {
-          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/stdio`);
-          mcpProxyServerUrl.searchParams.append("command", command);
-          mcpProxyServerUrl.searchParams.append("args", args);
-          mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
-          const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value;
-          if (proxyFullAddress) {
-            mcpProxyServerUrl.searchParams.append(
-              "proxyFullAddress",
-              proxyFullAddress
-            );
-          }
-          transportOptions = {
-            authProvider: serverAuthProvider,
-            eventSourceInit: {
-              fetch: (url, init) => fetch(url, {
-                ...init,
+      let serverUrl;
+      if (connectionType === "direct" && transportType !== "stdio") {
+        serverUrl = new URL(sseUrl);
+        const requestHeaders = { ...headers };
+        if (mcpSessionId) {
+          requestHeaders["mcp-session-id"] = mcpSessionId;
+        }
+        switch (transportType) {
+          case "sse":
+            requestHeaders["Accept"] = "text/event-stream";
+            requestHeaders["content-type"] = "application/json";
+            transportOptions = {
+              fetch: async (url, init) => {
+                const response = await fetch(url, {
+                  ...init,
+                  headers: requestHeaders
+                });
+                captureResponseHeaders(response);
+                return response;
+              },
+              requestInit: {
+                headers: requestHeaders
+              }
+            };
+            break;
+          case "streamable-http":
+            transportOptions = {
+              fetch: async (url, init) => {
+                requestHeaders["Accept"] = "text/event-stream, application/json";
+                requestHeaders["Content-Type"] = "application/json";
+                const response = await fetch(url, {
+                  headers: requestHeaders,
+                  ...init
+                });
+                captureResponseHeaders(response);
+                return response;
+              },
+              requestInit: {
+                headers: requestHeaders
+              },
+              // TODO these should be configurable...
+              reconnectionOptions: {
+                maxReconnectionDelay: 3e4,
+                initialReconnectionDelay: 1e3,
+                reconnectionDelayGrowFactor: 1.5,
+                maxRetries: 2
+              }
+            };
+            break;
+        }
+      } else {
+        const { token: proxyAuthToken, header: proxyAuthTokenHeader } = getMCPProxyAuthToken(config);
+        const proxyHeaders = {};
+        if (proxyAuthToken) {
+          proxyHeaders[proxyAuthTokenHeader] = `Bearer ${proxyAuthToken}`;
+        }
+        let mcpProxyServerUrl;
+        switch (transportType) {
+          case "stdio": {
+            mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/stdio`);
+            mcpProxyServerUrl.searchParams.append("command", command);
+            mcpProxyServerUrl.searchParams.append("args", args);
+            mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
+            const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value;
+            if (proxyFullAddress) {
+              mcpProxyServerUrl.searchParams.append(
+                "proxyFullAddress",
+                proxyFullAddress
+              );
+            }
+            transportOptions = {
+              authProvider: serverAuthProvider,
+              eventSourceInit: {
+                fetch: (url, init) => fetch(url, {
+                  ...init,
+                  headers: { ...headers, ...proxyHeaders }
+                })
+              },
+              requestInit: {
                 headers: { ...headers, ...proxyHeaders }
-              })
-            },
-            requestInit: {
-              headers: { ...headers, ...proxyHeaders }
+              }
+            };
+            break;
+          }
+          case "sse": {
+            mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
+            mcpProxyServerUrl.searchParams.append("url", sseUrl);
+            const proxyFullAddressSSE = config.MCP_PROXY_FULL_ADDRESS.value;
+            if (proxyFullAddressSSE) {
+              mcpProxyServerUrl.searchParams.append(
+                "proxyFullAddress",
+                proxyFullAddressSSE
+              );
             }
-          };
-          break;
-        }
-        case "sse": {
-          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
-          mcpProxyServerUrl.searchParams.append("url", sseUrl);
-          const proxyFullAddressSSE = config.MCP_PROXY_FULL_ADDRESS.value;
-          if (proxyFullAddressSSE) {
-            mcpProxyServerUrl.searchParams.append(
-              "proxyFullAddress",
-              proxyFullAddressSSE
-            );
+            transportOptions = {
+              eventSourceInit: {
+                fetch: (url, init) => fetch(url, {
+                  ...init,
+                  headers: { ...headers, ...proxyHeaders }
+                })
+              },
+              requestInit: {
+                headers: { ...headers, ...proxyHeaders }
+              }
+            };
+            break;
           }
-          transportOptions = {
-            eventSourceInit: {
-              fetch: (url, init) => fetch(url, {
-                ...init,
+          case "streamable-http":
+            mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/mcp`);
+            mcpProxyServerUrl.searchParams.append("url", sseUrl);
+            transportOptions = {
+              eventSourceInit: {
+                fetch: (url, init) => fetch(url, {
+                  ...init,
+                  headers: { ...headers, ...proxyHeaders }
+                })
+              },
+              requestInit: {
                 headers: { ...headers, ...proxyHeaders }
-              })
-            },
-            requestInit: {
-              headers: { ...headers, ...proxyHeaders }
-            }
-          };
-          break;
+              },
+              // TODO these should be configurable...
+              reconnectionOptions: {
+                maxReconnectionDelay: 3e4,
+                initialReconnectionDelay: 1e3,
+                reconnectionDelayGrowFactor: 1.5,
+                maxRetries: 2
+              }
+            };
+            break;
         }
-        case "streamable-http":
-          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/mcp`);
-          mcpProxyServerUrl.searchParams.append("url", sseUrl);
-          transportOptions = {
-            eventSourceInit: {
-              fetch: (url, init) => fetch(url, {
-                ...init,
-                headers: { ...headers, ...proxyHeaders }
-              })
-            },
-            requestInit: {
-              headers: { ...headers, ...proxyHeaders }
-            },
-            // TODO these should be configurable...
-            reconnectionOptions: {
-              maxReconnectionDelay: 3e4,
-              initialReconnectionDelay: 1e3,
-              reconnectionDelayGrowFactor: 1.5,
-              maxRetries: 2
-            }
-          };
-          break;
+        serverUrl = mcpProxyServerUrl;
+        serverUrl.searchParams.append("transportType", transportType);
       }
-      mcpProxyServerUrl.searchParams.append(
-        "transportType",
-        transportType
-      );
       if (onNotification) {
         [
           CancelledNotificationSchema,
@@ -25388,13 +25486,10 @@ function useConnection({
       }
       let capabilities;
       try {
-        const transport = transportType === "streamable-http" ? new StreamableHTTPClientTransport(mcpProxyServerUrl, {
+        const transport = transportType === "streamable-http" ? new StreamableHTTPClientTransport(serverUrl, {
           sessionId: void 0,
           ...transportOptions
-        }) : new SSEClientTransport(
-          mcpProxyServerUrl,
-          transportOptions
-        );
+        }) : new SSEClientTransport(serverUrl, transportOptions);
         await client2.connect(transport);
         setClientTransport(transport);
         capabilities = client2.getServerCapabilities();
@@ -25408,7 +25503,7 @@ function useConnection({
         });
       } catch (error) {
         console.error(
-          `Failed to connect to MCP Server via the MCP Inspector Proxy: ${mcpProxyServerUrl}:`,
+          connectionType === "direct" ? `Failed to connect directly to MCP Server at: ${serverUrl}:` : `Failed to connect to MCP Server via the MCP Inspector Proxy: ${serverUrl}:`,
           error
         );
         if (isProxyAuthError(error)) {
@@ -25489,6 +25584,8 @@ function useConnection({
     setConnectionStatus("disconnected");
     setCompletionsSupported(false);
     setServerCapabilities(null);
+    setMcpSessionId(null);
+    setMcpProtocolVersion(null);
   };
   const clearRequestHistory = () => {
     setRequestHistory([]);
@@ -26177,7 +26274,7 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$y = [
+const __iconNode$z = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -26187,14 +26284,14 @@ const __iconNode$y = [
     }
   ]
 ];
-const Bell = createLucideIcon("bell", __iconNode$y);
+const Bell = createLucideIcon("bell", __iconNode$z);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$x = [
+const __iconNode$y = [
   ["path", { d: "m8 2 1.88 1.88", key: "fmnt4t" }],
   ["path", { d: "M14.12 3.88 16 2", key: "qol33r" }],
   ["path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1", key: "d7y7pr" }],
@@ -26213,134 +26310,134 @@ const __iconNode$x = [
   ["path", { d: "M22 13h-4", key: "1jl80f" }],
   ["path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4", key: "k3fwyw" }]
 ];
-const Bug = createLucideIcon("bug", __iconNode$x);
+const Bug = createLucideIcon("bug", __iconNode$y);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$w = [
+const __iconNode$x = [
   ["path", { d: "M18 6 7 17l-5-5", key: "116fxf" }],
   ["path", { d: "m22 10-7.5 7.5L13 16", key: "ke71qq" }]
 ];
-const CheckCheck = createLucideIcon("check-check", __iconNode$w);
+const CheckCheck = createLucideIcon("check-check", __iconNode$x);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$v = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$v);
+const __iconNode$w = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$w);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$u = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$u);
+const __iconNode$v = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$v);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$t = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$t);
+const __iconNode$u = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$u);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$s = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$s);
+const __iconNode$t = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$t);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [
+const __iconNode$s = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$r);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$s);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [
+const __iconNode$r = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$q);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$r);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [
+const __iconNode$q = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$p);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$q);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$p = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$o);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$p);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-const Circle = createLucideIcon("circle", __iconNode$n);
+const __iconNode$o = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$o);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [
+const __iconNode$n = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$m);
+const Copy = createLucideIcon("copy", __iconNode$n);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [
+const __iconNode$m = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$l);
+const ExternalLink = createLucideIcon("external-link", __iconNode$m);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [
+const __iconNode$l = [
   [
     "path",
     {
@@ -26358,14 +26455,14 @@ const __iconNode$k = [
   ],
   ["path", { d: "m2 2 20 20", key: "1ooewy" }]
 ];
-const EyeOff = createLucideIcon("eye-off", __iconNode$k);
+const EyeOff = createLucideIcon("eye-off", __iconNode$l);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$k = [
   [
     "path",
     {
@@ -26375,40 +26472,40 @@ const __iconNode$j = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$j);
+const Eye = createLucideIcon("eye", __iconNode$k);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M10 9H8", key: "b1mrlr" }],
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$i);
+const FileText = createLucideIcon("file-text", __iconNode$j);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$i = [
   ["path", { d: "M20 7h-3a2 2 0 0 1-2-2V2", key: "x099mo" }],
   ["path", { d: "M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z", key: "18t6ie" }],
   ["path", { d: "M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8", key: "1nja0z" }]
 ];
-const Files = createLucideIcon("files", __iconNode$h);
+const Files = createLucideIcon("files", __iconNode$i);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$h = [
   [
     "path",
     {
@@ -26426,14 +26523,14 @@ const __iconNode$g = [
   ["path", { d: "M3 5a2 2 0 0 0 2 2h3", key: "f2jnh7" }],
   ["path", { d: "M3 3v13a2 2 0 0 0 2 2h3", key: "k8epm1" }]
 ];
-const FolderTree = createLucideIcon("folder-tree", __iconNode$g);
+const FolderTree = createLucideIcon("folder-tree", __iconNode$h);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$g = [
   [
     "path",
     {
@@ -26443,14 +26540,14 @@ const __iconNode$f = [
   ],
   ["path", { d: "M9 18c-4.51 2-5-2-7-2", key: "9comsn" }]
 ];
-const Github = createLucideIcon("github", __iconNode$f);
+const Github = createLucideIcon("github", __iconNode$g);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$f = [
   ["path", { d: "m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9", key: "eefl8a" }],
   ["path", { d: "m18 15 4-4", key: "16gjal" }],
   [
@@ -26461,84 +26558,84 @@ const __iconNode$e = [
     }
   ]
 ];
-const Hammer = createLucideIcon("hammer", __iconNode$e);
+const Hammer = createLucideIcon("hammer", __iconNode$f);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$e = [
   ["line", { x1: "4", x2: "20", y1: "9", y2: "9", key: "4lhtct" }],
   ["line", { x1: "4", x2: "20", y1: "15", y2: "15", key: "vyu0kd" }],
   ["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
   ["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
 ];
-const Hash = createLucideIcon("hash", __iconNode$d);
+const Hash = createLucideIcon("hash", __iconNode$e);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$d = [
   ["path", { d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4", key: "g0fldk" }],
   ["path", { d: "m21 2-9.6 9.6", key: "1j0ho8" }],
   ["circle", { cx: "7.5", cy: "15.5", r: "5.5", key: "yqb3hr" }]
 ];
-const Key = createLucideIcon("key", __iconNode$c);
+const Key = createLucideIcon("key", __iconNode$d);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$b);
+const __iconNode$c = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$c);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$b = [
   ["path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", key: "1lielz" }]
 ];
-const MessageSquare = createLucideIcon("message-square", __iconNode$a);
+const MessageSquare = createLucideIcon("message-square", __iconNode$b);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$9);
+const __iconNode$a = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$a);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-const Play = createLucideIcon("play", __iconNode$8);
+const __iconNode$9 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+const Play = createLucideIcon("play", __iconNode$9);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$7);
+const Plus = createLucideIcon("plus", __iconNode$8);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["path", { d: "M21 8L18.74 5.74A9.75 9.75 0 0 0 12 3C11 3 10.03 3.16 9.13 3.47", key: "1krf6h" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }],
   ["path", { d: "M3 12C3 9.51 4 7.26 5.64 5.64", key: "ruvoct" }],
@@ -26547,38 +26644,38 @@ const __iconNode$6 = [
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M22 22 2 2", key: "1r8tn9" }]
 ];
-const RefreshCwOff = createLucideIcon("refresh-cw-off", __iconNode$6);
+const RefreshCwOff = createLucideIcon("refresh-cw-off", __iconNode$7);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$6 = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$5);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$6);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$5 = [
   ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
 ];
-const RotateCcw = createLucideIcon("rotate-ccw", __iconNode$4);
+const RotateCcw = createLucideIcon("rotate-ccw", __iconNode$5);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$3 = [
+const __iconNode$4 = [
   [
     "path",
     {
@@ -26589,7 +26686,18 @@ const __iconNode$3 = [
   ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
   ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
 ];
-const Save = createLucideIcon("save", __iconNode$3);
+const Save = createLucideIcon("save", __iconNode$4);
+/**
+ * @license lucide-react v0.523.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+const Search = createLucideIcon("search", __iconNode$3);
 /**
  * @license lucide-react v0.523.0 - ISC
  *
@@ -27267,7 +27375,7 @@ function useCopy({ timeout = 500 } = {}) {
 const JsonView = reactExports.memo(
   ({
     data: data2,
-    name,
+    name: name2,
     initialExpandDepth = 3,
     className,
     withCopyButton = true,
@@ -27307,7 +27415,7 @@ const JsonView = reactExports.memo(
         JsonNode,
         {
           data: normalizedData,
-          name,
+          name: name2,
           depth: 0,
           initialExpandDepth,
           isError
@@ -27320,7 +27428,7 @@ JsonView.displayName = "JsonView";
 const JsonNode = reactExports.memo(
   ({
     data: data2,
-    name,
+    name: name2,
     depth = 0,
     initialExpandDepth,
     isError = false
@@ -27348,8 +27456,8 @@ const JsonNode = reactExports.memo(
       };
       if (isEmpty) {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
-            name,
+          name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name2,
             ":"
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: symbolMap.empty })
@@ -27362,8 +27470,8 @@ const JsonNode = reactExports.memo(
             className: "flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/10 dark:hover:bg-gray-800/20",
             onClick: () => setIsExpanded(!isExpanded),
             children: [
-              name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
-                name,
+              name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
+                name2,
                 ":"
               ] }),
               isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: symbolMap.open }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -27404,8 +27512,8 @@ const JsonNode = reactExports.memo(
       const isTooLong = value.length > maxLength;
       if (!isTooLong) {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded hover:bg-gray-800/20", children: [
-          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
-            name,
+          name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name2,
             ":"
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -27425,8 +27533,8 @@ const JsonNode = reactExports.memo(
         ] });
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex mr-1 rounded group hover:bg-gray-800/20", children: [
-        name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
-          name,
+        name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400", children: [
+          name2,
           ":"
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -27451,8 +27559,8 @@ const JsonNode = reactExports.memo(
         return renderString(data2);
       default:
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center mr-1 rounded hover:bg-gray-800/20", children: [
-          name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
-            name,
+          name2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mr-1 text-gray-600 dark:text-gray-400", children: [
+            name2,
             ":"
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: typeStyleMap[dataType] || typeStyleMap.default, children: data2 === null ? "null" : String(data2) })
@@ -28476,8 +28584,8 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = reactExports.useCallback(function(name, delta, target, should) {
-    var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
+  var shouldCancel = reactExports.useCallback(function(name2, delta, target, should) {
+    var event = { name: name2, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
       shouldPreventQueue.current = shouldPreventQueue.current.filter(function(e) {
@@ -29596,7 +29704,7 @@ const computePosition$1 = async (reference, floating, config) => {
   let resetCount = 0;
   for (let i = 0; i < validMiddleware.length; i++) {
     const {
-      name,
+      name: name2,
       fn
     } = validMiddleware[i];
     const {
@@ -29622,8 +29730,8 @@ const computePosition$1 = async (reference, floating, config) => {
     y = nextY != null ? nextY : y;
     middlewareData = {
       ...middlewareData,
-      [name]: {
-        ...middlewareData[name],
+      [name2]: {
+        ...middlewareData[name2],
         ...data2
       }
     };
@@ -31987,6 +32095,23 @@ const Label$1 = reactExports.forwardRef(({ className, ...props }, ref2) => /* @_
   }
 ));
 Label$1.displayName = Root$1.displayName;
+const Input = reactExports.forwardRef(
+  ({ className, type: type2, ...props }, ref2) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        type: type2,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref: ref2,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 const ListPane = ({
   items: items2,
   listItems,
@@ -31996,40 +32121,101 @@ const ListPane = ({
   title: title2,
   buttonText,
   isButtonDisabled
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card border border-border rounded-lg shadow", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold dark:text-white", children: title2 }) }),
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        variant: "outline",
-        className: "w-full mb-4",
-        onClick: listItems,
-        disabled: isButtonDisabled,
-        children: buttonText
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        variant: "outline",
-        className: "w-full mb-4",
-        onClick: clearItems,
-        disabled: items2.length === 0,
-        children: "Clear"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 overflow-y-auto max-h-96", children: items2.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer",
-        onClick: () => setSelectedItem(item),
-        children: renderItem(item)
-      },
-      index2
-    )) })
-  ] })
-] });
+}) => {
+  const [searchQuery, setSearchQuery] = reactExports.useState("");
+  const [isSearchExpanded, setIsSearchExpanded] = reactExports.useState(false);
+  const searchInputRef = reactExports.useRef(null);
+  const filteredItems = reactExports.useMemo(() => {
+    if (!searchQuery.trim()) return items2;
+    return items2.filter((item) => {
+      const searchableText = [
+        item.name || "",
+        item.description || ""
+      ].join(" ").toLowerCase();
+      return searchableText.includes(searchQuery.toLowerCase());
+    });
+  }, [items2, searchQuery]);
+  const handleSearchClick = () => {
+    setIsSearchExpanded(true);
+    setTimeout(() => {
+      var _a;
+      (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+    }, 100);
+  };
+  const handleSearchBlur = () => {
+    if (!searchQuery.trim()) {
+      setIsSearchExpanded(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card border border-border rounded-lg shadow", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold dark:text-white flex-shrink-0", children: title2 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-end min-w-0 flex-1", children: !isSearchExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          name: "search",
+          "aria-label": "Search",
+          onClick: handleSearchClick,
+          className: "p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "w-4 h-4 text-muted-foreground" })
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center w-full max-w-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none z-10" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Input,
+          {
+            ref: searchInputRef,
+            name: "search",
+            type: "text",
+            placeholder: "Search...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            onBlur: handleSearchBlur,
+            className: "pl-10 w-full transition-all duration-300 ease-in-out"
+          }
+        )
+      ] }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "outline",
+          className: "w-full mb-4",
+          onClick: listItems,
+          disabled: isButtonDisabled,
+          children: buttonText
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "outline",
+          className: "w-full mb-4",
+          onClick: clearItems,
+          disabled: items2.length === 0,
+          children: "Clear"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 overflow-y-auto max-h-96", children: [
+        filteredItems.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer",
+            onClick: () => setSelectedItem(item),
+            children: renderItem(item)
+          },
+          index2
+        )),
+        filteredItems.length === 0 && searchQuery && items2.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center py-4 text-muted-foreground", children: [
+          'No items found matching "',
+          searchQuery,
+          '"'
+        ] })
+      ] })
+    ] })
+  ] });
+};
 function debounce(func, wait) {
   let timeout;
   return (...args) => {
@@ -32265,11 +32451,11 @@ class UriTemplate {
         const operator = this.getOperator(expr);
         const exploded = expr.includes("*");
         const names = this.getNames(expr);
-        const name = names[0];
-        for (const name2 of names) {
-          UriTemplate.validateLength(name2, MAX_VARIABLE_LENGTH, "Variable name");
+        const name2 = names[0];
+        for (const name3 of names) {
+          UriTemplate.validateLength(name3, MAX_VARIABLE_LENGTH, "Variable name");
         }
-        parts.push({ name, operator, names, exploded });
+        parts.push({ name: name2, operator, names, exploded });
         i = end + 1;
       } else {
         currentText += template[i];
@@ -32287,7 +32473,7 @@ class UriTemplate {
   }
   getNames(expr) {
     const operator = this.getOperator(expr);
-    return expr.slice(operator.length).split(",").map((name) => name.replace("*", "").trim()).filter((name) => name.length > 0);
+    return expr.slice(operator.length).split(",").map((name2) => name2.replace("*", "").trim()).filter((name2) => name2.length > 0);
   }
   encodeValue(value, operator) {
     UriTemplate.validateLength(value, MAX_VARIABLE_LENGTH, "Variable value");
@@ -32298,12 +32484,12 @@ class UriTemplate {
   }
   expandPart(part, variables) {
     if (part.operator === "?" || part.operator === "&") {
-      const pairs = part.names.map((name) => {
-        const value2 = variables[name];
+      const pairs = part.names.map((name2) => {
+        const value2 = variables[name2];
         if (value2 === void 0)
           return "";
         const encoded2 = Array.isArray(value2) ? value2.map((v) => this.encodeValue(v, part.operator)).join(",") : this.encodeValue(value2.toString(), part.operator);
-        return `${name}=${encoded2}`;
+        return `${name2}=${encoded2}`;
       }).filter((pair) => pair.length > 0);
       if (pairs.length === 0)
         return "";
@@ -32311,7 +32497,7 @@ class UriTemplate {
       return separator + pairs.join("&");
     }
     if (part.names.length > 1) {
-      const values2 = part.names.map((name) => variables[name]).filter((v) => v !== void 0);
+      const values2 = part.names.map((name2) => variables[name2]).filter((v) => v !== void 0);
       if (values2.length === 0)
         return "";
       return values2.map((v) => Array.isArray(v) ? v[0] : v).join(",");
@@ -32363,22 +32549,22 @@ class UriTemplate {
   }
   partToRegExp(part) {
     const patterns = [];
-    for (const name2 of part.names) {
-      UriTemplate.validateLength(name2, MAX_VARIABLE_LENGTH, "Variable name");
+    for (const name3 of part.names) {
+      UriTemplate.validateLength(name3, MAX_VARIABLE_LENGTH, "Variable name");
     }
     if (part.operator === "?" || part.operator === "&") {
       for (let i = 0; i < part.names.length; i++) {
-        const name2 = part.names[i];
+        const name3 = part.names[i];
         const prefix = i === 0 ? "\\" + part.operator : "&";
         patterns.push({
-          pattern: prefix + this.escapeRegExp(name2) + "=([^&]+)",
-          name: name2
+          pattern: prefix + this.escapeRegExp(name3) + "=([^&]+)",
+          name: name3
         });
       }
       return patterns;
     }
     let pattern2;
-    const name = part.name;
+    const name2 = part.name;
     switch (part.operator) {
       case "":
         pattern2 = part.exploded ? "([^/]+(?:,[^/]+)*)" : "([^/,]+)";
@@ -32396,7 +32582,7 @@ class UriTemplate {
       default:
         pattern2 = "([^/]+)";
     }
-    patterns.push({ pattern: pattern2, name });
+    patterns.push({ pattern: pattern2, name: name2 });
     return patterns;
   }
   match(uri) {
@@ -32408,9 +32594,9 @@ class UriTemplate {
         pattern2 += this.escapeRegExp(part);
       } else {
         const patterns = this.partToRegExp(part);
-        for (const { pattern: partPattern, name } of patterns) {
+        for (const { pattern: partPattern, name: name2 } of patterns) {
           pattern2 += partPattern;
-          names.push({ name, exploded: part.exploded });
+          names.push({ name: name2, exploded: part.exploded });
         }
       }
     }
@@ -32422,9 +32608,9 @@ class UriTemplate {
       return null;
     const result = {};
     for (let i = 0; i < names.length; i++) {
-      const { name, exploded } = names[i];
+      const { name: name2, exploded } = names[i];
       const value = match[i + 1];
-      const cleanName = name.replace("*", "");
+      const cleanName = name2.replace("*", "");
       if (exploded && value.includes(",")) {
         result[cleanName] = value.split(",");
       } else {
@@ -32627,23 +32813,6 @@ const ResourcesTab = ({
     ] })
   ] }) });
 };
-const Input = reactExports.forwardRef(
-  ({ className, type: type2, ...props }, ref2) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "input",
-      {
-        type: type2,
-        className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref: ref2,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
 const RootsTab = ({
   roots,
   setRoots,
@@ -32772,7 +32941,7 @@ function requireLib() {
     "\n/**\n * Reset the text fill color so that placeholder is visible\n */\n.".concat(className, ":empty {\n  -webkit-text-fill-color: inherit !important;\n}\n\n/**\n * Hack to apply on some CSS on IE10 and IE11\n */\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n  /**\n    * IE doesn't support '-webkit-text-fill-color'\n    * So we use 'color: transparent' to make the text transparent on IE\n    * Unlike other browsers, it doesn't affect caret color in IE\n    */\n  .").concat(className, " {\n    color: transparent !important;\n  }\n\n  .").concat(className, "::selection {\n    background-color: #accef7 !important;\n    color: transparent !important;\n  }\n}\n")
   );
   var Editor2 = React2.forwardRef(function Editor3(props, ref2) {
-    var autoFocus = props.autoFocus, disabled = props.disabled, form = props.form, highlight = props.highlight, _a = props.ignoreTabKey, ignoreTabKey = _a === void 0 ? false : _a, _b = props.insertSpaces, insertSpaces = _b === void 0 ? true : _b, maxLength = props.maxLength, minLength = props.minLength, name = props.name, onBlur = props.onBlur, onClick = props.onClick, onFocus = props.onFocus, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onValueChange = props.onValueChange, _c = props.padding, padding = _c === void 0 ? 0 : _c, placeholder = props.placeholder, preClassName = props.preClassName, readOnly = props.readOnly, required2 = props.required, style = props.style, _d = props.tabSize, tabSize = _d === void 0 ? 2 : _d, textareaClassName = props.textareaClassName, textareaId = props.textareaId, value = props.value, rest = __rest2(props, ["autoFocus", "disabled", "form", "highlight", "ignoreTabKey", "insertSpaces", "maxLength", "minLength", "name", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onValueChange", "padding", "placeholder", "preClassName", "readOnly", "required", "style", "tabSize", "textareaClassName", "textareaId", "value"]);
+    var autoFocus = props.autoFocus, disabled = props.disabled, form = props.form, highlight = props.highlight, _a = props.ignoreTabKey, ignoreTabKey = _a === void 0 ? false : _a, _b = props.insertSpaces, insertSpaces = _b === void 0 ? true : _b, maxLength = props.maxLength, minLength = props.minLength, name2 = props.name, onBlur = props.onBlur, onClick = props.onClick, onFocus = props.onFocus, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onValueChange = props.onValueChange, _c = props.padding, padding = _c === void 0 ? 0 : _c, placeholder = props.placeholder, preClassName = props.preClassName, readOnly = props.readOnly, required2 = props.required, style = props.style, _d = props.tabSize, tabSize = _d === void 0 ? 2 : _d, textareaClassName = props.textareaClassName, textareaId = props.textareaId, value = props.value, rest = __rest2(props, ["autoFocus", "disabled", "form", "highlight", "ignoreTabKey", "insertSpaces", "maxLength", "minLength", "name", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onValueChange", "padding", "placeholder", "preClassName", "readOnly", "required", "style", "tabSize", "textareaClassName", "textareaId", "value"]);
     var historyRef = React2.useRef({
       stack: [],
       offset: -1
@@ -33045,7 +33214,7 @@ function requireLib() {
       React2.createElement("pre", __assign2({ className: preClassName, "aria-hidden": "true", style: __assign2(__assign2(__assign2({}, styles.editor), styles.highlight), contentStyle) }, typeof highlighted === "string" ? { dangerouslySetInnerHTML: { __html: highlighted + "<br />" } } : { children: highlighted })),
       React2.createElement("textarea", { ref: function(c) {
         return inputRef.current = c;
-      }, style: __assign2(__assign2(__assign2({}, styles.editor), styles.textarea), contentStyle), className: className + (textareaClassName ? " ".concat(textareaClassName) : ""), id: textareaId, value, onChange: handleChange, onKeyDown: handleKeyDown, onClick, onKeyUp, onFocus, onBlur, disabled, form, maxLength, minLength, name, placeholder, readOnly, required: required2, autoFocus, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", spellCheck: false, "data-gramm": false }),
+      }, style: __assign2(__assign2(__assign2({}, styles.editor), styles.textarea), contentStyle), className: className + (textareaClassName ? " ".concat(textareaClassName) : ""), id: textareaId, value, onChange: handleChange, onKeyDown: handleKeyDown, onClick, onKeyUp, onFocus, onBlur, disabled, form, maxLength, minLength, name: name2, placeholder, readOnly, required: required2, autoFocus, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", spellCheck: false, "data-gramm": false }),
       React2.createElement("style", { dangerouslySetInnerHTML: { __html: cssText } })
     );
   });
@@ -33749,10 +33918,10 @@ function requirePrism() {
            * @param {HookCallback} callback The callback function which is given environment variables.
            * @public
            */
-          add: function(name, callback) {
+          add: function(name2, callback) {
             var hooks = _.hooks.all;
-            hooks[name] = hooks[name] || [];
-            hooks[name].push(callback);
+            hooks[name2] = hooks[name2] || [];
+            hooks[name2].push(callback);
           },
           /**
            * Runs a hook invoking all registered callbacks with the given environment variables.
@@ -33763,8 +33932,8 @@ function requirePrism() {
            * @param {Object<string, any>} env The environment variables of the hook passed to all callbacks registered.
            * @public
            */
-          run: function(name, env) {
-            var callbacks = _.hooks.all[name];
+          run: function(name2, env) {
+            var callbacks = _.hooks.all[name2];
             if (!callbacks || !callbacks.length) {
               return;
             }
@@ -33811,8 +33980,8 @@ function requirePrism() {
         }
         _.hooks.run("wrap", env);
         var attributes = "";
-        for (var name in env.attributes) {
-          attributes += " " + name + '="' + (env.attributes[name] || "").replace(/"/g, "&quot;") + '"';
+        for (var name2 in env.attributes) {
+          attributes += " " + name2 + '="' + (env.attributes[name2] || "").replace(/"/g, "&quot;") + '"';
         }
         return "<" + env.tag + ' class="' + env.classes.join(" ") + '"' + attributes + ">" + env.content + "</" + env.tag + ">";
       };
@@ -34673,259 +34842,391 @@ const getArrayItemDefault = (schema) => {
       return null;
   }
 };
-const DynamicJsonForm = ({
-  schema,
-  value,
-  onChange,
-  maxDepth = 3
-}) => {
-  const isOnlyJSON = !isSimpleObject(schema);
-  const [isJsonMode, setIsJsonMode] = reactExports.useState(isOnlyJSON);
-  const [jsonError, setJsonError] = reactExports.useState();
-  const [copiedJson, setCopiedJson] = reactExports.useState(false);
-  const { toast: toast2 } = useToast();
-  const [rawJsonValue, setRawJsonValue] = reactExports.useState(
-    JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
-  );
-  const timeoutRef = reactExports.useRef();
-  const debouncedUpdateParent = reactExports.useCallback(
-    (jsonString) => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+const DynamicJsonForm = reactExports.forwardRef(
+  ({ schema, value, onChange, maxDepth = 3 }, ref2) => {
+    const isOnlyJSON = !isSimpleObject(schema);
+    const [isJsonMode, setIsJsonMode] = reactExports.useState(isOnlyJSON);
+    const [jsonError, setJsonError] = reactExports.useState();
+    const [copiedJson, setCopiedJson] = reactExports.useState(false);
+    const { toast: toast2 } = useToast();
+    const [rawJsonValue, setRawJsonValue] = reactExports.useState(
+      JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
+    );
+    const timeoutRef = reactExports.useRef();
+    const debouncedUpdateParent = reactExports.useCallback(
+      (jsonString) => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+          try {
+            const parsed = JSON.parse(jsonString);
+            onChange(parsed);
+            setJsonError(void 0);
+          } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Invalid JSON";
+            setJsonError(errorMessage);
+            const trimmed = jsonString.trim();
+            if (trimmed.length > 5 && !trimmed.match(/^[\s[{]/)) {
+              onChange(generateDefaultValue(schema));
+            }
+          }
+        }, 300);
+      },
+      [onChange, setJsonError, schema]
+    );
+    reactExports.useEffect(() => {
+      if (!isJsonMode) {
+        setRawJsonValue(
+          JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
+        );
       }
-      timeoutRef.current = setTimeout(() => {
+    }, [value, schema, isJsonMode]);
+    const handleSwitchToFormMode = () => {
+      if (isJsonMode) {
         try {
-          const parsed = JSON.parse(jsonString);
+          const parsed = JSON.parse(rawJsonValue);
           onChange(parsed);
-          setJsonError(void 0);
-        } catch {
+          setIsJsonMode(false);
+        } catch (err) {
+          setJsonError(err instanceof Error ? err.message : "Invalid JSON");
         }
-      }, 300);
-    },
-    [onChange, setJsonError]
-  );
-  reactExports.useEffect(() => {
-    if (!isJsonMode) {
-      setRawJsonValue(
-        JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
-      );
-    }
-  }, [value, schema, isJsonMode]);
-  const handleSwitchToFormMode = () => {
-    if (isJsonMode) {
-      try {
-        const parsed = JSON.parse(rawJsonValue);
-        onChange(parsed);
-        setIsJsonMode(false);
-      } catch (err) {
+      } else {
+        setRawJsonValue(
+          JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
+        );
+        setIsJsonMode(true);
+      }
+    };
+    const formatJson = () => {
+      try {
+        const jsonStr = rawJsonValue.trim();
+        if (!jsonStr) {
+          return;
+        }
+        const formatted = JSON.stringify(JSON.parse(jsonStr), null, 2);
+        setRawJsonValue(formatted);
+        debouncedUpdateParent(formatted);
+        setJsonError(void 0);
+      } catch (err) {
         setJsonError(err instanceof Error ? err.message : "Invalid JSON");
       }
-    } else {
-      setRawJsonValue(
-        JSON.stringify(value ?? generateDefaultValue(schema), null, 2)
-      );
-      setIsJsonMode(true);
-    }
-  };
-  const formatJson = () => {
-    try {
-      const jsonStr = rawJsonValue.trim();
-      if (!jsonStr) {
-        return;
+    };
+    const validateJson = () => {
+      if (!isJsonMode) return { isValid: true, error: null };
+      try {
+        const jsonStr = rawJsonValue.trim();
+        if (!jsonStr) return { isValid: true, error: null };
+        const parsed = JSON.parse(jsonStr);
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        onChange(parsed);
+        setJsonError(void 0);
+        return { isValid: true, error: null };
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Invalid JSON";
+        setJsonError(errorMessage);
+        return { isValid: false, error: errorMessage };
       }
-      const formatted = JSON.stringify(JSON.parse(jsonStr), null, 2);
-      setRawJsonValue(formatted);
-      debouncedUpdateParent(formatted);
-      setJsonError(void 0);
-    } catch (err) {
-      setJsonError(err instanceof Error ? err.message : "Invalid JSON");
-    }
-  };
-  const renderFormFields = (propSchema, currentValue, path = [], depth = 0, parentSchema, propertyName) => {
-    var _a, _b, _c;
-    if (depth >= maxDepth && (propSchema.type === "object" || propSchema.type === "array")) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        JsonEditor,
-        {
-          value: JSON.stringify(
-            currentValue ?? generateDefaultValue(propSchema, propertyName, parentSchema),
-            null,
-            2
-          ),
-          onChange: (newValue) => {
-            try {
-              const parsed = JSON.parse(newValue);
-              handleFieldChange(path, parsed);
-              setJsonError(void 0);
-            } catch (err) {
-              setJsonError(err instanceof Error ? err.message : "Invalid JSON");
+    };
+    const handleCopyJson = reactExports.useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(
+          JSON.stringify(value, null, 2) ?? "[]"
+        );
+        setCopiedJson(true);
+        toast2({
+          title: "JSON copied",
+          description: "The JSON data has been successfully copied to your clipboard."
+        });
+        setTimeout(() => {
+          setCopiedJson(false);
+        }, 2e3);
+      } catch (error) {
+        toast2({
+          title: "Error",
+          description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
+          variant: "destructive"
+        });
+      }
+    }, [toast2, value]);
+    reactExports.useImperativeHandle(ref2, () => ({
+      validateJson
+    }));
+    const renderFormFields = (propSchema, currentValue, path = [], depth = 0, parentSchema, propertyName) => {
+      var _a, _b, _c;
+      if (depth >= maxDepth && (propSchema.type === "object" || propSchema.type === "array")) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          JsonEditor,
+          {
+            value: JSON.stringify(
+              currentValue ?? generateDefaultValue(propSchema, propertyName, parentSchema),
+              null,
+              2
+            ),
+            onChange: (newValue) => {
+              try {
+                const parsed = JSON.parse(newValue);
+                handleFieldChange(path, parsed);
+                setJsonError(void 0);
+              } catch (err) {
+                setJsonError(
+                  err instanceof Error ? err.message : "Invalid JSON"
+                );
+              }
+            },
+            error: jsonError
+          }
+        );
+      }
+      const isRequired = ((_a = parentSchema == null ? void 0 : parentSchema.required) == null ? void 0 : _a.includes(propertyName || "")) ?? false;
+      let fieldType = propSchema.type;
+      if (Array.isArray(fieldType)) {
+        fieldType = fieldType.find((t) => t !== "null") ?? fieldType[0];
+      }
+      switch (fieldType) {
+        case "string": {
+          if (propSchema.oneOf && propSchema.oneOf.every(
+            (option) => typeof option.const === "string" && typeof option.title === "string"
+          )) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "select",
+              {
+                value: currentValue ?? "",
+                onChange: (e) => {
+                  const val = e.target.value;
+                  if (!val && !isRequired) {
+                    handleFieldChange(path, void 0);
+                  } else {
+                    handleFieldChange(path, val);
+                  }
+                },
+                required: isRequired,
+                className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select an option..." }),
+                  propSchema.oneOf.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "option",
+                    {
+                      value: option.const,
+                      children: option.title
+                    },
+                    option.const
+                  ))
+                ]
+              }
+            );
+          }
+          if (propSchema.enum) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "select",
+              {
+                value: currentValue ?? "",
+                onChange: (e) => {
+                  const val = e.target.value;
+                  if (!val && !isRequired) {
+                    handleFieldChange(path, void 0);
+                  } else {
+                    handleFieldChange(path, val);
+                  }
+                },
+                required: isRequired,
+                className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select an option..." }),
+                  propSchema.enum.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option, children: option }, option))
+                ]
+              }
+            );
+          }
+          let inputType = "text";
+          switch (propSchema.format) {
+            case "email":
+              inputType = "email";
+              break;
+            case "uri":
+              inputType = "url";
+              break;
+            case "date":
+              inputType = "date";
+              break;
+            case "date-time":
+              inputType = "datetime-local";
+              break;
+            default:
+              inputType = "text";
+              break;
+          }
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
+            {
+              type: inputType,
+              value: currentValue ?? "",
+              onChange: (e) => {
+                const val = e.target.value;
+                handleFieldChange(path, val);
+              },
+              placeholder: propSchema.description,
+              required: isRequired,
+              minLength: propSchema.minLength,
+              maxLength: propSchema.maxLength,
+              pattern: propSchema.pattern
             }
-          },
-          error: jsonError
+          );
         }
-      );
-    }
-    const isRequired = ((_a = parentSchema == null ? void 0 : parentSchema.required) == null ? void 0 : _a.includes(propertyName || "")) ?? false;
-    let fieldType = propSchema.type;
-    if (Array.isArray(fieldType)) {
-      fieldType = fieldType.find((t) => t !== "null") ?? fieldType[0];
-    }
-    switch (fieldType) {
-      case "string": {
-        if (propSchema.oneOf && propSchema.oneOf.every(
-          (option) => typeof option.const === "string" && typeof option.title === "string"
-        )) {
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "select",
+        case "number":
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
             {
-              value: currentValue ?? "",
+              type: "number",
+              value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
               onChange: (e) => {
                 const val = e.target.value;
                 if (!val && !isRequired) {
                   handleFieldChange(path, void 0);
                 } else {
-                  handleFieldChange(path, val);
+                  const num = Number(val);
+                  if (!isNaN(num)) {
+                    handleFieldChange(path, num);
+                  }
                 }
               },
+              placeholder: propSchema.description,
               required: isRequired,
-              className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select an option..." }),
-                propSchema.oneOf.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "option",
-                  {
-                    value: option.const,
-                    children: option.title
-                  },
-                  option.const
-                ))
-              ]
+              min: propSchema.minimum,
+              max: propSchema.maximum
             }
           );
-        }
-        if (propSchema.enum) {
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "select",
+        case "integer":
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
             {
-              value: currentValue ?? "",
+              type: "number",
+              step: "1",
+              value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
               onChange: (e) => {
                 const val = e.target.value;
                 if (!val && !isRequired) {
                   handleFieldChange(path, void 0);
                 } else {
-                  handleFieldChange(path, val);
+                  const num = Number(val);
+                  if (!isNaN(num) && Number.isInteger(num)) {
+                    handleFieldChange(path, num);
+                  }
                 }
               },
+              placeholder: propSchema.description,
               required: isRequired,
-              className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select an option..." }),
-                propSchema.enum.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: option, children: option }, option))
-              ]
+              min: propSchema.minimum,
+              max: propSchema.maximum
             }
           );
-        }
-        let inputType = "text";
-        switch (propSchema.format) {
-          case "email":
-            inputType = "email";
-            break;
-          case "uri":
-            inputType = "url";
-            break;
-          case "date":
-            inputType = "date";
-            break;
-          case "date-time":
-            inputType = "datetime-local";
-            break;
-          default:
-            inputType = "text";
-            break;
-        }
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            type: inputType,
-            value: currentValue ?? "",
-            onChange: (e) => {
-              const val = e.target.value;
-              handleFieldChange(path, val);
-            },
-            placeholder: propSchema.description,
-            required: isRequired,
-            minLength: propSchema.minLength,
-            maxLength: propSchema.maxLength,
-            pattern: propSchema.pattern
-          }
-        );
-      }
-      case "number":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            type: "number",
-            value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
-            onChange: (e) => {
-              const val = e.target.value;
-              if (!val && !isRequired) {
-                handleFieldChange(path, void 0);
-              } else {
-                const num = Number(val);
-                if (!isNaN(num)) {
-                  handleFieldChange(path, num);
-                }
-              }
-            },
-            placeholder: propSchema.description,
-            required: isRequired,
-            min: propSchema.minimum,
-            max: propSchema.maximum
-          }
-        );
-      case "integer":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            type: "number",
-            step: "1",
-            value: (currentValue == null ? void 0 : currentValue.toString()) ?? "",
-            onChange: (e) => {
-              const val = e.target.value;
-              if (!val && !isRequired) {
-                handleFieldChange(path, void 0);
-              } else {
-                const num = Number(val);
-                if (!isNaN(num) && Number.isInteger(num)) {
-                  handleFieldChange(path, num);
-                }
+        case "boolean":
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
+            {
+              type: "checkbox",
+              checked: currentValue ?? false,
+              onChange: (e) => handleFieldChange(path, e.target.checked),
+              className: "w-4 h-4",
+              required: isRequired
+            }
+          );
+        case "null":
+          return null;
+        case "object":
+          if (!propSchema.properties) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              JsonEditor,
+              {
+                value: JSON.stringify(currentValue ?? {}, null, 2),
+                onChange: (newValue) => {
+                  try {
+                    const parsed = JSON.parse(newValue);
+                    handleFieldChange(path, parsed);
+                    setJsonError(void 0);
+                  } catch (err) {
+                    setJsonError(
+                      err instanceof Error ? err.message : "Invalid JSON"
+                    );
+                  }
+                },
+                error: jsonError
               }
-            },
-            placeholder: propSchema.description,
-            required: isRequired,
-            min: propSchema.minimum,
-            max: propSchema.maximum
+            );
           }
-        );
-      case "boolean":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            type: "checkbox",
-            checked: currentValue ?? false,
-            onChange: (e) => handleFieldChange(path, e.target.checked),
-            className: "w-4 h-4",
-            required: isRequired
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border rounded p-3", children: Object.entries(propSchema.properties).map(([key, subSchema]) => {
+            var _a2;
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium mb-1", children: [
+                key,
+                ((_a2 = propSchema.required) == null ? void 0 : _a2.includes(key)) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+              ] }),
+              renderFormFields(
+                subSchema,
+                currentValue == null ? void 0 : currentValue[key],
+                [...path, key],
+                depth + 1,
+                propSchema,
+                key
+              )
+            ] }, key);
+          }) });
+        case "array": {
+          const arrayValue = Array.isArray(currentValue) ? currentValue : [];
+          if (!propSchema.items) return null;
+          if (isSimpleObject(propSchema.items)) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+              propSchema.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: propSchema.description }),
+              ((_b = propSchema.items) == null ? void 0 : _b.description) && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-500", children: [
+                "Items: ",
+                propSchema.items.description
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+                arrayValue.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                  renderFormFields(
+                    propSchema.items,
+                    item,
+                    [...path, index2.toString()],
+                    depth + 1
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: () => {
+                        const newArray = [...arrayValue];
+                        newArray.splice(index2, 1);
+                        handleFieldChange(path, newArray);
+                      },
+                      children: "Remove"
+                    }
+                  )
+                ] }, index2)),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => {
+                      const defaultValue = getArrayItemDefault(
+                        propSchema.items
+                      );
+                      handleFieldChange(path, [...arrayValue, defaultValue]);
+                    },
+                    title: ((_c = propSchema.items) == null ? void 0 : _c.description) ? `Add new ${propSchema.items.description}` : "Add new item",
+                    children: "Add Item"
+                  }
+                )
+              ] })
+            ] });
           }
-        );
-      case "null":
-        return null;
-      case "object":
-        if (!propSchema.properties) {
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             JsonEditor,
             {
-              value: JSON.stringify(currentValue ?? {}, null, 2),
+              value: JSON.stringify(currentValue ?? [], null, 2),
               onChange: (newValue) => {
                 try {
                   const parsed = JSON.parse(newValue);
@@ -34941,189 +35242,88 @@ const DynamicJsonForm = ({
             }
           );
         }
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border rounded p-3", children: Object.entries(propSchema.properties).map(([key, subSchema]) => {
-          var _a2;
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "block text-sm font-medium mb-1", children: [
-              key,
-              ((_a2 = propSchema.required) == null ? void 0 : _a2.includes(key)) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
-            ] }),
-            renderFormFields(
-              subSchema,
-              currentValue == null ? void 0 : currentValue[key],
-              [...path, key],
-              depth + 1,
-              propSchema,
-              key
-            )
-          ] }, key);
-        }) });
-      case "array": {
-        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
-        if (!propSchema.items) return null;
-        if (isSimpleObject(propSchema.items)) {
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-            propSchema.description && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600", children: propSchema.description }),
-            ((_b = propSchema.items) == null ? void 0 : _b.description) && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-gray-500", children: [
-              "Items: ",
-              propSchema.items.description
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-              arrayValue.map((item, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-                renderFormFields(
-                  propSchema.items,
-                  item,
-                  [...path, index2.toString()],
-                  depth + 1
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    variant: "outline",
-                    size: "sm",
-                    onClick: () => {
-                      const newArray = [...arrayValue];
-                      newArray.splice(index2, 1);
-                      handleFieldChange(path, newArray);
-                    },
-                    children: "Remove"
-                  }
-                )
-              ] }, index2)),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button,
-                {
-                  variant: "outline",
-                  size: "sm",
-                  onClick: () => {
-                    const defaultValue = getArrayItemDefault(
-                      propSchema.items
-                    );
-                    handleFieldChange(path, [...arrayValue, defaultValue]);
-                  },
-                  title: ((_c = propSchema.items) == null ? void 0 : _c.description) ? `Add new ${propSchema.items.description}` : "Add new item",
-                  children: "Add Item"
-                }
-              )
-            ] })
-          ] });
-        }
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          JsonEditor,
-          {
-            value: JSON.stringify(currentValue ?? [], null, 2),
-            onChange: (newValue) => {
-              try {
-                const parsed = JSON.parse(newValue);
-                handleFieldChange(path, parsed);
-                setJsonError(void 0);
-              } catch (err) {
-                setJsonError(
-                  err instanceof Error ? err.message : "Invalid JSON"
-                );
-              }
-            },
-            error: jsonError
-          }
-        );
+        default:
+          return null;
+      }
+    };
+    const handleFieldChange = (path, fieldValue) => {
+      if (path.length === 0) {
+        onChange(fieldValue);
+        return;
       }
-      default:
-        return null;
-    }
-  };
-  const handleFieldChange = (path, fieldValue) => {
-    if (path.length === 0) {
-      onChange(fieldValue);
-      return;
-    }
-    try {
-      const newValue = updateValueAtPath(value, path, fieldValue);
-      onChange(newValue);
-    } catch (error) {
-      console.error("Failed to update form value:", error);
-      onChange(value);
-    }
-  };
-  const shouldUseJsonMode = schema.type === "object" && (!schema.properties || Object.keys(schema.properties).length === 0);
-  reactExports.useEffect(() => {
-    if (shouldUseJsonMode && !isJsonMode) {
-      setIsJsonMode(true);
-    }
-  }, [shouldUseJsonMode, isJsonMode]);
-  const handleCopyJson = reactExports.useCallback(() => {
-    const copyToClipboard = async () => {
       try {
-        await navigator.clipboard.writeText(
-          JSON.stringify(value, null, 2) ?? "[]"
-        );
-        setCopiedJson(true);
-        toast2({
-          title: "JSON copied",
-          description: "The JSON data has been successfully copied to your clipboard."
-        });
-        setTimeout(() => {
-          setCopiedJson(false);
-        }, 2e3);
+        const newValue = updateValueAtPath(value, path, fieldValue);
+        onChange(newValue);
       } catch (error) {
-        toast2({
-          title: "Error",
-          description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
-          variant: "destructive"
-        });
+        console.error("Failed to update form value:", error);
+        onChange(value);
       }
     };
-    copyToClipboard();
-  }, [toast2, value]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end space-x-2", children: [
-      isJsonMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            type: "button",
-            variant: "outline",
-            size: "sm",
-            onClick: handleCopyJson,
-            children: [
-              copiedJson ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
-              "Copy JSON"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+    const shouldUseJsonMode = schema.type === "object" && (!schema.properties || Object.keys(schema.properties).length === 0);
+    reactExports.useEffect(() => {
+      if (shouldUseJsonMode && !isJsonMode) {
+        setIsJsonMode(true);
+      }
+    }, [shouldUseJsonMode, isJsonMode]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end space-x-2", children: [
+        isJsonMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: handleCopyJson,
+              children: [
+                copiedJson ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCheck, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "h-4 w-4 mr-2" }),
+                "Copy JSON"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: formatJson,
+              children: "Format JSON"
+            }
+          )
+        ] }),
+        !isOnlyJSON && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
-            type: "button",
             variant: "outline",
             size: "sm",
-            onClick: formatJson,
-            children: "Format JSON"
+            onClick: handleSwitchToFormMode,
+            children: isJsonMode ? "Switch to Form" : "Switch to JSON"
           }
         )
       ] }),
-      !isOnlyJSON && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: handleSwitchToFormMode, children: isJsonMode ? "Switch to Form" : "Switch to JSON" })
-    ] }),
-    isJsonMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      JsonEditor,
-      {
-        value: rawJsonValue,
-        onChange: (newValue) => {
-          setRawJsonValue(newValue);
-          debouncedUpdateParent(newValue);
-        },
-        error: jsonError
-      }
-    ) : (
-      // If schema type is object but value is not an object or is empty, and we have actual JSON data,
-      // render a simple representation of the JSON data
-      schema.type === "object" && (typeof value !== "object" || value === null || Object.keys(value).length === 0) && rawJsonValue && rawJsonValue !== "{}" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 border rounded-md p-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Form view not available for this JSON structure. Using simplified view:" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto", children: rawJsonValue }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Use JSON mode for full editing capabilities." })
-      ] }) : renderFormFields(schema, value)
-    )
-  ] });
-};
+      isJsonMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        JsonEditor,
+        {
+          value: rawJsonValue,
+          onChange: (newValue) => {
+            setRawJsonValue(newValue);
+            debouncedUpdateParent(newValue);
+          },
+          error: jsonError
+        }
+      ) : (
+        // If schema type is object but value is not an object or is empty, and we have actual JSON data,
+        // render a simple representation of the JSON data
+        schema.type === "object" && (typeof value !== "object" || value === null || Object.keys(value).length === 0) && rawJsonValue && rawJsonValue !== "{}" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 border rounded-md p-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Form view not available for this JSON structure. Using simplified view:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto", children: rawJsonValue }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "Use JSON mode for full editing capabilities." })
+        ] }) : renderFormFields(schema, value)
+      )
+    ] });
+  }
+);
 const SamplingRequest = ({
   onApprove,
   request,
@@ -35314,7 +35514,7 @@ var Select$1 = (props) => {
     defaultValue,
     onValueChange,
     dir,
-    name,
+    name: name2,
     autoComplete,
     disabled,
     required: required2,
@@ -35384,7 +35584,7 @@ var Select$1 = (props) => {
             "aria-hidden": true,
             required: required2,
             tabIndex: -1,
-            name,
+            name: name2,
             autoComplete,
             value,
             onChange: (event) => setValue(event.target.value),
@@ -36578,7 +36778,7 @@ const useTheme = () => {
     [theme, setThemeWithSideEffect]
   );
 };
-const version = "0.16.8";
+const version = "0.17.0";
 var [createTooltipContext] = createContextScope("Tooltip", [
   createPopperScope
 ]);
@@ -37084,7 +37284,7 @@ var Switch$1 = reactExports.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeSwitch,
-      name,
+      name: name2,
       checked: checkedProp,
       defaultChecked,
       required: required2,
@@ -37132,7 +37332,7 @@ var Switch$1 = reactExports.forwardRef(
         {
           control: button,
           bubbles: !hasConsumerStoppedPropagationRef.current,
-          name,
+          name: name2,
           value,
           checked,
           required: required2,
@@ -37299,8 +37499,8 @@ const CustomHeaders = ({
         return;
       }
       const newHeaders = Object.entries(parsed).map(
-        ([name, value]) => ({
-          name,
+        ([name2, value]) => ({
+          name: name2,
           value: String(value),
           enabled: true
         })
@@ -37473,7 +37673,9 @@ const Sidebar = ({
   sendLogLevelRequest,
   loggingSupported,
   config,
-  setConfig
+  setConfig,
+  connectionType,
+  setConnectionType
 }) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = reactExports.useState(false);
@@ -37483,6 +37685,7 @@ const Sidebar = ({
   const [copiedServerEntry, setCopiedServerEntry] = reactExports.useState(false);
   const [copiedServerFile, setCopiedServerFile] = reactExports.useState(false);
   const { toast: toast2 } = useToast();
+  const connectionTypeTip = "Connect to server directly (requires CORS config on server) or via MCP Inspector Proxy";
   const reportError2 = reactExports.useCallback(
     (error) => {
       toast2({
@@ -37635,10 +37838,22 @@ const Sidebar = ({
             }
           )
         ] })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", htmlFor: "sse-url-input", children: "URL" }),
-        sseUrl ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium", htmlFor: "sse-url-input", children: "URL" }),
+          sseUrl ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Input,
+              {
+                id: "sse-url-input",
+                placeholder: "URL",
+                value: sseUrl,
+                onChange: (e) => setSseUrl(e.target.value),
+                className: "font-mono"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: sseUrl })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             Input,
             {
               id: "sse-url-input",
@@ -37647,19 +37862,36 @@ const Sidebar = ({
               onChange: (e) => setSseUrl(e.target.value),
               className: "font-mono"
             }
-          ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: sseUrl })
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            id: "sse-url-input",
-            placeholder: "URL",
-            value: sseUrl,
-            onChange: (e) => setSseUrl(e.target.value),
-            className: "font-mono"
-          }
-        )
-      ] }) }),
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "label",
+              {
+                className: "text-sm font-medium",
+                htmlFor: "connection-type-select",
+                children: "Connection Type"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Select,
+              {
+                value: connectionType,
+                onValueChange: (value) => setConnectionType(value),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { id: "connection-type-select", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select connection type" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "proxy", children: "Via Proxy" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "direct", children: "Direct" })
+                  ] })
+                ]
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: connectionTypeTip })
+        ] })
+      ] }),
       transportType === "stdio" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           Button,
@@ -38121,7 +38353,7 @@ function CheckboxProvider(props) {
     defaultChecked,
     disabled,
     form,
-    name,
+    name: name2,
     onCheckedChange,
     required: required2,
     value = "on",
@@ -38147,7 +38379,7 @@ function CheckboxProvider(props) {
     setChecked,
     control,
     setControl,
-    name,
+    name: name2,
     form,
     value,
     hasConsumerStoppedPropagationRef,
@@ -38223,7 +38455,7 @@ var Checkbox$1 = reactExports.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeCheckbox,
-      name,
+      name: name2,
       checked,
       defaultChecked,
       required: required2,
@@ -38242,7 +38474,7 @@ var Checkbox$1 = reactExports.forwardRef(
         disabled,
         required: required2,
         onCheckedChange,
-        name,
+        name: name2,
         form,
         value,
         internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -38300,7 +38532,7 @@ var CheckboxBubbleInput = reactExports.forwardRef(
       defaultChecked,
       required: required2,
       disabled,
-      name,
+      name: name2,
       value,
       form,
       bubbleInput,
@@ -38335,7 +38567,7 @@ var CheckboxBubbleInput = reactExports.forwardRef(
         defaultChecked: defaultChecked ?? defaultCheckedRef.current,
         required: required2,
         disabled,
-        name,
+        name: name2,
         value,
         form,
         ...props,
@@ -38389,7 +38621,7 @@ Checkbox.displayName = Checkbox$1.displayName;
 const ResourceLinkView = reactExports.memo(
   ({
     uri,
-    name,
+    name: name2,
     description: description2,
     mimeType,
     resourceContent,
@@ -38444,7 +38676,7 @@ const ResourceLinkView = reactExports.memo(
                 onReadResource && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 flex-shrink-0", "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: expanded ? "▼" : "▶" }) })
               ] })
             ] }),
-            name && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1", children: name }),
+            name2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100 mb-1", children: name2 }),
             description2 && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-300 leading-relaxed", children: description2 })
           ] })
         }
@@ -38626,6 +38858,7 @@ const ToolsTab = ({
   setSelectedTool,
   toolResult,
   nextCursor,
+  error,
   resourceContent,
   onReadResource
 }) => {
@@ -38633,8 +38866,17 @@ const ToolsTab = ({
   const [isToolRunning, setIsToolRunning] = reactExports.useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = reactExports.useState(false);
   const [isMetaExpanded, setIsMetaExpanded] = reactExports.useState(false);
+  const [hasValidationErrors, setHasValidationErrors] = reactExports.useState(false);
+  const formRefs = reactExports.useRef({});
   const { toast: toast2 } = useToast();
   const { copied, setCopied } = useCopy();
+  const checkValidationErrors = () => {
+    const errors = Object.values(formRefs.current).some(
+      (ref2) => ref2 && !ref2.validateJson().isValid
+    );
+    setHasValidationErrors(errors);
+    return errors;
+  };
   reactExports.useEffect(() => {
     const params2 = Object.entries(
       (selectedTool == null ? void 0 : selectedTool.inputSchema.properties) ?? []
@@ -38647,6 +38889,8 @@ const ToolsTab = ({
       )
     ]);
     setParams(Object.fromEntries(params2));
+    setHasValidationErrors(false);
+    formRefs.current = {};
   }, [selectedTool]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "tools", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -38671,6 +38915,11 @@ const ToolsTab = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-card border border-border rounded-lg shadow", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-semibold", children: selectedTool ? selectedTool.name : "Select a tool" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4", children: selectedTool ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+        error && /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { variant: "destructive", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: "Error" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: error })
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: selectedTool.description }),
         Object.entries(selectedTool.inputSchema.properties ?? []).map(
           ([key, value]) => {
@@ -38716,16 +38965,27 @@ const ToolsTab = ({
                   id: key,
                   name: key,
                   placeholder: prop.description,
-                  value: params[key] ?? "",
-                  onChange: (e) => setParams({
-                    ...params,
-                    [key]: e.target.value === "" ? void 0 : e.target.value
-                  }),
+                  value: params[key] === void 0 ? "" : String(params[key]),
+                  onChange: (e) => {
+                    const value2 = e.target.value;
+                    if (value2 === "") {
+                      setParams({
+                        ...params,
+                        [key]: void 0
+                      });
+                    } else {
+                      setParams({
+                        ...params,
+                        [key]: value2
+                      });
+                    }
+                  },
                   className: "mt-1"
                 }
               ) : prop.type === "object" || prop.type === "array" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 DynamicJsonForm,
                 {
+                  ref: (ref2) => formRefs.current[key] = ref2,
                   schema: {
                     type: prop.type,
                     properties: prop.properties,
@@ -38738,6 +38998,7 @@ const ToolsTab = ({
                       ...params,
                       [key]: newValue
                     });
+                    setTimeout(checkValidationErrors, 100);
                   }
                 }
               ) }) : prop.type === "number" || prop.type === "integer" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -38747,19 +39008,35 @@ const ToolsTab = ({
                   id: key,
                   name: key,
                   placeholder: prop.description,
-                  value: params[key] ?? "",
+                  value: params[key] === void 0 ? "" : String(params[key]),
                   onChange: (e) => {
                     const value2 = e.target.value;
-                    setParams({
-                      ...params,
-                      [key]: value2 === "" ? "" : Number(value2)
-                    });
+                    if (value2 === "") {
+                      setParams({
+                        ...params,
+                        [key]: void 0
+                      });
+                    } else {
+                      const num = Number(value2);
+                      if (!isNaN(num)) {
+                        setParams({
+                          ...params,
+                          [key]: num
+                        });
+                      } else {
+                        setParams({
+                          ...params,
+                          [key]: value2
+                        });
+                      }
+                    }
                   },
                   className: "mt-1"
                 }
               ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 DynamicJsonForm,
                 {
+                  ref: (ref2) => formRefs.current[key] = ref2,
                   schema: {
                     type: prop.type,
                     properties: prop.properties,
@@ -38772,6 +39049,7 @@ const ToolsTab = ({
                       ...params,
                       [key]: newValue
                     });
+                    setTimeout(checkValidationErrors, 100);
                   }
                 }
               ) })
@@ -38839,6 +39117,7 @@ const ToolsTab = ({
             Button,
             {
               onClick: async () => {
+                if (checkValidationErrors()) return;
                 try {
                   setIsToolRunning(true);
                   await callTool(selectedTool.name, params);
@@ -38846,7 +39125,7 @@ const ToolsTab = ({
                   setIsToolRunning(false);
                 }
               },
-              disabled: isToolRunning,
+              disabled: isToolRunning || hasValidationErrors,
               children: isToolRunning ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "w-4 h-4 mr-2 animate-spin" }),
                 "Running..."
@@ -38865,10 +39144,10 @@ const ToolsTab = ({
                     JSON.stringify(params, null, 2)
                   );
                   setCopied(true);
-                } catch (error) {
+                } catch (error2) {
                   toast2({
                     title: "Error",
-                    description: `There was an error copying input to the clipboard: ${error instanceof Error ? error.message : String(error)}`,
+                    description: `There was an error copying input to the clipboard: ${error2 instanceof Error ? error2.message : String(error2)}`,
                     variant: "destructive"
                   });
                 }
@@ -39050,6 +39329,11 @@ const App = () => {
   const [args, setArgs] = reactExports.useState(getInitialArgs);
   const [sseUrl, setSseUrl] = reactExports.useState(getInitialSseUrl);
   const [transportType, setTransportType] = reactExports.useState(getInitialTransportType);
+  const [connectionType, setConnectionType] = reactExports.useState(
+    () => {
+      return localStorage.getItem("lastConnectionType") || "proxy";
+    }
+  );
   const [logLevel, setLogLevel] = reactExports.useState("debug");
   const [notifications, setNotifications] = reactExports.useState([]);
   const [roots, setRoots] = reactExports.useState([]);
@@ -39090,7 +39374,7 @@ const App = () => {
       {
         name: "Authorization",
         value: "Bearer ",
-        enabled: true
+        enabled: false
       }
     ];
   });
@@ -39152,6 +39436,7 @@ const App = () => {
     oauthClientId,
     oauthScope,
     config,
+    connectionType,
     onNotification: (notification) => {
       setNotifications((prev) => [...prev, notification]);
     },
@@ -39218,6 +39503,9 @@ const App = () => {
   reactExports.useEffect(() => {
     localStorage.setItem("lastTransportType", transportType);
   }, [transportType]);
+  reactExports.useEffect(() => {
+    localStorage.setItem("lastConnectionType", connectionType);
+  }, [connectionType]);
   reactExports.useEffect(() => {
     if (bearerToken) {
       localStorage.setItem("lastBearerToken", bearerToken);
@@ -39485,12 +39773,12 @@ const App = () => {
     );
     setNextResourceTemplateCursor(response.nextCursor);
   };
-  const getPrompt = async (name, args2 = {}) => {
+  const getPrompt = async (name2, args2 = {}) => {
     lastToolCallOriginTabRef.current = currentTabRef.current;
     const response = await sendMCPRequest(
       {
         method: "prompts/get",
-        params: { name, arguments: args2 }
+        params: { name: name2, arguments: args2 }
       },
       GetPromptResultSchema,
       "prompts"
@@ -39569,15 +39857,17 @@ const App = () => {
     setNextToolCursor(response.nextCursor);
     cacheToolOutputSchemas(response.tools);
   };
-  const callTool = async (name, params) => {
+  const callTool = async (name2, params) => {
     lastToolCallOriginTabRef.current = currentTabRef.current;
     try {
+      const tool = tools.find((t) => t.name === name2);
+      const cleanedParams = (tool == null ? void 0 : tool.inputSchema) ? cleanParams(params, tool.inputSchema) : params;
       const response = await sendMCPRequest(
         {
           method: "tools/call",
           params: {
-            name,
-            arguments: params,
+            name: name2,
+            arguments: cleanedParams,
             _meta: {
               progressToken: progressTokenRef.current++
             }
@@ -39587,6 +39877,7 @@ const App = () => {
         "tools"
       );
       setToolResult(response);
+      setErrors((prev) => ({ ...prev, tools: null }));
     } catch (e) {
       const toolResult2 = {
         content: [
@@ -39598,6 +39889,7 @@ const App = () => {
         isError: true
       };
       setToolResult(toolResult2);
+      setErrors((prev) => ({ ...prev, tools: null }));
     }
   };
   const handleRootsChange = async () => {
@@ -39627,13 +39919,13 @@ const App = () => {
   ) });
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthCallback-7gQlGWPl.js"), true ? [] : void 0)
+      () => __vitePreload(() => import("./OAuthCallback-C0JXhwud.js"), true ? [] : void 0)
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthCallback, { onConnect: onOAuthConnect }) });
   }
   if (window.location.pathname === "/oauth/callback/debug") {
     const OAuthDebugCallback = React.lazy(
-      () => __vitePreload(() => import("./OAuthDebugCallback-67pOP7RZ.js"), true ? [] : void 0)
+      () => __vitePreload(() => import("./OAuthDebugCallback-TZR9iqA_.js"), true ? [] : void 0)
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(OAuthDebugCallback, { onConnect: onOAuthDebugConnect }) });
   }
@@ -39675,7 +39967,9 @@ const App = () => {
               onDisconnect: disconnectMcpServer,
               logLevel,
               sendLogLevelRequest,
-              loggingSupported: !!(serverCapabilities == null ? void 0 : serverCapabilities.logging) || false
+              loggingSupported: !!(serverCapabilities == null ? void 0 : serverCapabilities.logging) || false,
+              connectionType,
+              setConnectionType
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -39843,9 +40137,9 @@ const App = () => {
                     setPrompts([]);
                     setNextPromptCursor(void 0);
                   },
-                  getPrompt: (name, args2) => {
+                  getPrompt: (name2, args2) => {
                     clearError("prompts");
-                    getPrompt(name, args2);
+                    getPrompt(name2, args2);
                   },
                   selectedPrompt,
                   setSelectedPrompt: (prompt) => {
@@ -39873,10 +40167,10 @@ const App = () => {
                     setNextToolCursor(void 0);
                     cacheToolOutputSchemas([]);
                   },
-                  callTool: async (name, params) => {
+                  callTool: async (name2, params) => {
                     clearError("tools");
                     setToolResult(null);
-                    await callTool(name, params);
+                    await callTool(name2, params);
                   },
                   selectedTool,
                   setSelectedTool: (tool) => {