@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.82

package/dist/components/devtools/api-explorer/ApiExplorer.js

@@ -0,0 +1,330 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { Code, Menu, X } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+import { ApiEndpointsSidebar } from "./ApiEndpointsSidebar.js";
+import { ApiRequestPanel } from "./ApiRequestPanel.js";
+import { ApiResponsePanel } from "./ApiResponsePanel.js";
+import { useApiRequest } from "../api-tester/hooks/useApiRequest.js";
+import { useApiExplorerNavigation } from "../../../hooks/useApiExplorerNavigation.js";
+import { extractPathParams, buildUrl } from "../api-tester/utils/url-builder.js";
+import { ApiPresetsService } from "../../../lib/services/api-presets.service.js";
+import { ApiDocsService } from "../../../lib/services/api-docs.service.js";
+function findRouteByPath(routes, path) {
+  for (const category of Object.keys(routes)) {
+    const found = routes[category].find((r) => r.path === path);
+    if (found) return found;
+  }
+  return null;
+}
+function createEmptyRows(count = 2) {
+  return Array.from({ length: count }, () => ({
+    id: crypto.randomUUID(),
+    key: "",
+    value: "",
+    enabled: true
+  }));
+}
+function ApiExplorer({ routes, initialEndpoint }) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [selectedEndpoint, setSelectedEndpoint] = useState(null);
+  const [method, setMethod] = useState("GET");
+  const [pathParams, setPathParams] = useState([]);
+  const [queryParams, setQueryParams] = useState(() => createEmptyRows());
+  const [headers, setHeaders] = useState(() => createEmptyRows());
+  const [authType, setAuthType] = useState("session");
+  const [apiKey, setApiKey] = useState("");
+  const [bypassMode, setBypassMode] = useState(false);
+  const [selectedTeamId, setSelectedTeamId] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("activeTeamId");
+    }
+    return null;
+  });
+  const [body, setBody] = useState("");
+  const [tabsModifiedByPreset, setTabsModifiedByPreset] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const endpointPresets = useMemo(() => {
+    if (!selectedEndpoint) return null;
+    return ApiPresetsService.getByEndpoint(selectedEndpoint.path) ?? null;
+  }, [selectedEndpoint == null ? void 0 : selectedEndpoint.path]);
+  const endpointDoc = useMemo(() => {
+    if (!selectedEndpoint) return null;
+    return ApiDocsService.getByEndpoint(selectedEndpoint.path) ?? null;
+  }, [selectedEndpoint == null ? void 0 : selectedEndpoint.path]);
+  const hasInitialized = useRef(false);
+  const { status, response, error, execute, cancel, reset } = useApiRequest();
+  const { selectedMethod: urlMethod, selectedPath: urlPath, navigateToEndpoint } = useApiExplorerNavigation({ basePath: "/devtools/api" });
+  const handleSelectEndpoint = useCallback(
+    (path, selectedMethod, route) => {
+      reset();
+      navigateToEndpoint(selectedMethod, path);
+      setSelectedEndpoint({ path, method: selectedMethod, route });
+      setMethod(selectedMethod);
+      setPathParams(extractPathParams(path));
+      setQueryParams(createEmptyRows());
+      setHeaders(createEmptyRows());
+      setBody("");
+      setTabsModifiedByPreset(/* @__PURE__ */ new Set());
+      setMobileOpen(false);
+    },
+    [reset, navigateToEndpoint]
+  );
+  const handleSend = useCallback(async () => {
+    if (!selectedEndpoint) return;
+    const url = buildUrl(selectedEndpoint.path, pathParams, queryParams);
+    const fullUrl = (typeof window !== "undefined" ? window.location.origin : "") + url;
+    const customHeaders = {};
+    if (bypassMode) {
+      customHeaders["x-admin-bypass"] = "confirm-cross-team-access";
+      if (selectedTeamId) {
+        customHeaders["x-team-id"] = selectedTeamId;
+      }
+    } else {
+      if (selectedTeamId) {
+        customHeaders["x-team-id"] = selectedTeamId;
+      }
+    }
+    for (const h of headers) {
+      if (h.enabled && h.key) {
+        customHeaders[h.key] = h.value;
+      }
+    }
+    await execute({
+      url: fullUrl,
+      method,
+      headers: customHeaders,
+      body: ["POST", "PATCH", "PUT"].includes(method) ? body : void 0,
+      authType,
+      apiKey: authType === "apiKey" ? apiKey : void 0
+    });
+  }, [selectedEndpoint, pathParams, queryParams, headers, method, body, authType, apiKey, bypassMode, selectedTeamId, execute]);
+  const handleApplyPreset = useCallback((preset) => {
+    const modifiedTabs = /* @__PURE__ */ new Set();
+    if (preset.method) {
+      setMethod(preset.method);
+    }
+    if (preset.pathParams && Object.keys(preset.pathParams).length > 0) {
+      setPathParams(
+        (prev) => prev.map((p) => {
+          var _a;
+          return {
+            ...p,
+            value: ((_a = preset.pathParams) == null ? void 0 : _a[p.name]) ?? p.value
+          };
+        })
+      );
+      modifiedTabs.add("params");
+    }
+    if (preset.params && Object.keys(preset.params).length > 0) {
+      const newParams = Object.entries(preset.params).map(([key, value], idx) => ({
+        id: `preset-${idx}-${crypto.randomUUID()}`,
+        key,
+        value: String(value),
+        enabled: true
+      }));
+      setQueryParams(newParams);
+      modifiedTabs.add("params");
+    }
+    if (preset.headers && Object.keys(preset.headers).length > 0) {
+      const newHeaders = Object.entries(preset.headers).map(([key, value], idx) => ({
+        id: `preset-header-${idx}-${crypto.randomUUID()}`,
+        key,
+        value,
+        enabled: true
+      }));
+      setHeaders(newHeaders);
+      modifiedTabs.add("headers");
+    }
+    if (preset.payload && Object.keys(preset.payload).length > 0) {
+      setBody(JSON.stringify(preset.payload, null, 2));
+      modifiedTabs.add("body");
+    }
+    if (preset.sessionConfig) {
+      if (preset.sessionConfig.crossTeam !== void 0) {
+        setBypassMode(preset.sessionConfig.crossTeam);
+      }
+      if (preset.sessionConfig.teamId) {
+        let teamId = preset.sessionConfig.teamId;
+        if (teamId === "{{FIRST_TEAM_ID}}" && typeof window !== "undefined") {
+          teamId = localStorage.getItem("firstTeamId") || localStorage.getItem("activeTeamId") || "";
+        }
+        setSelectedTeamId(teamId);
+      }
+      if (preset.sessionConfig.authType) {
+        setAuthType(preset.sessionConfig.authType);
+      }
+    }
+    setTabsModifiedByPreset(modifiedTabs);
+  }, []);
+  useEffect(() => {
+    if (urlPath && urlMethod) {
+      const route = findRouteByPath(routes, urlPath);
+      if (route && ((selectedEndpoint == null ? void 0 : selectedEndpoint.path) !== urlPath || (selectedEndpoint == null ? void 0 : selectedEndpoint.method) !== urlMethod)) {
+        setSelectedEndpoint({ path: urlPath, method: urlMethod, route });
+        setMethod(urlMethod);
+        setPathParams(extractPathParams(urlPath));
+        setQueryParams(createEmptyRows());
+        setHeaders(createEmptyRows());
+        setBody("");
+        setTabsModifiedByPreset(/* @__PURE__ */ new Set());
+      }
+    }
+  }, [urlPath, urlMethod, routes, selectedEndpoint]);
+  useEffect(() => {
+    if (hasInitialized.current) return;
+    if (urlPath && urlMethod) {
+      const route = findRouteByPath(routes, urlPath);
+      if (route) {
+        hasInitialized.current = true;
+        setSelectedEndpoint({ path: urlPath, method: urlMethod, route });
+        setMethod(urlMethod);
+        setPathParams(extractPathParams(urlPath));
+        return;
+      }
+    }
+    if (initialEndpoint) {
+      const route = findRouteByPath(routes, initialEndpoint.path);
+      if (route) {
+        hasInitialized.current = true;
+        const endpointMethod = initialEndpoint.method;
+        setSelectedEndpoint({ path: initialEndpoint.path, method: endpointMethod, route });
+        setMethod(endpointMethod);
+        setPathParams(extractPathParams(initialEndpoint.path));
+        if (!urlPath) {
+          navigateToEndpoint(endpointMethod, initialEndpoint.path);
+        }
+        return;
+      }
+    }
+    const categories = ["core", "entity", "theme", "plugin"];
+    for (const category of categories) {
+      const categoryRoutes = routes[category];
+      if (categoryRoutes.length > 0) {
+        hasInitialized.current = true;
+        const firstRoute = categoryRoutes[0];
+        const firstMethod = firstRoute.methods[0] || "GET";
+        setSelectedEndpoint({ path: firstRoute.path, method: firstMethod, route: firstRoute });
+        setMethod(firstMethod);
+        setPathParams(extractPathParams(firstRoute.path));
+        navigateToEndpoint(firstMethod, firstRoute.path);
+        break;
+      }
+    }
+  }, [routes, initialEndpoint, urlPath, urlMethod, navigateToEndpoint]);
+  const totalRoutes = Object.values(routes).reduce((sum, arr) => sum + arr.length, 0);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100vh-4rem)] w-full overflow-hidden", "data-cy": sel("devtools.apiExplorer.container"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "lg:hidden fixed top-0 left-0 right-0 z-50 h-14 bg-background border-b flex items-center px-4 gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => setMobileOpen(!mobileOpen),
+          "data-cy": sel("devtools.apiExplorer.mobileToggle"),
+          children: mobileOpen ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Code, { className: "h-5 w-5 text-violet-600" }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "API Explorer" })
+      ] }),
+      selectedEndpoint && /* @__PURE__ */ jsxs("code", { className: "text-xs text-muted-foreground truncate ml-auto", children: [
+        selectedEndpoint.method,
+        " ",
+        selectedEndpoint.path
+      ] })
+    ] }),
+    mobileOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "lg:hidden fixed inset-0 z-40 bg-black/50",
+        onClick: () => setMobileOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed lg:relative z-50 lg:z-auto h-full transition-transform duration-300",
+          "lg:translate-x-0",
+          mobileOpen ? "translate-x-0" : "-translate-x-full"
+        ),
+        children: /* @__PURE__ */ jsx(
+          ApiEndpointsSidebar,
+          {
+            routes,
+            selectedEndpoint: selectedEndpoint ? { path: selectedEndpoint.path, method: selectedEndpoint.method } : null,
+            onSelectEndpoint: handleSelectEndpoint,
+            isCollapsed,
+            onToggleCollapse: () => setIsCollapsed(!isCollapsed)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col lg:flex-row min-w-0 pt-14 lg:pt-0", children: selectedEndpoint ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 lg:flex-[1.2] min-h-0 border-b lg:border-b-0 lg:border-r overflow-hidden", children: /* @__PURE__ */ jsx(
+        ApiRequestPanel,
+        {
+          route: selectedEndpoint.route,
+          basePath: selectedEndpoint.path,
+          method,
+          pathParams,
+          queryParams,
+          headers,
+          authType,
+          apiKey,
+          bypassMode,
+          selectedTeamId,
+          body,
+          status,
+          onMethodChange: setMethod,
+          onPathParamsChange: setPathParams,
+          onQueryParamsChange: setQueryParams,
+          onHeadersChange: setHeaders,
+          onAuthTypeChange: setAuthType,
+          onApiKeyChange: setApiKey,
+          onBypassModeChange: setBypassMode,
+          onTeamChange: setSelectedTeamId,
+          onBodyChange: setBody,
+          onSend: handleSend,
+          onCancel: cancel,
+          endpointPresets,
+          endpointDoc,
+          onApplyPreset: handleApplyPreset,
+          tabsModifiedByPreset,
+          onClearPresetIndicator: (tab) => {
+            setTabsModifiedByPreset((prev) => {
+              const next = new Set(prev);
+              next.delete(tab);
+              return next;
+            });
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "h-[40vh] lg:h-auto lg:flex-1 min-h-[200px] overflow-hidden", children: /* @__PURE__ */ jsx(
+        ApiResponsePanel,
+        {
+          status,
+          response,
+          error
+        }
+      ) })
+    ] }) : (
+      /* Empty state */
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx(Code, { className: "h-12 w-12 mx-auto mb-4 opacity-50" }),
+        /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "No endpoint selected" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: totalRoutes > 0 ? "Select an endpoint from the sidebar to get started" : "No API endpoints available" })
+      ] }) })
+    ) })
+  ] });
+}
+export {
+  ApiExplorer
+};

package/dist/components/devtools/api-explorer/ApiRequestPanel.d.ts

@@ -0,0 +1,39 @@
+import type { HttpMethod, AuthType, KeyValuePair, PathParam, RequestStatus } from '../api-tester/types';
+import type { ApiRouteEntry } from '../../../lib/services/api-routes.service';
+import type { ApiEndpointPresets, ApiPreset } from '../../../types/api-presets';
+interface ApiRequestPanelProps {
+    route: ApiRouteEntry;
+    basePath: string;
+    method: HttpMethod;
+    pathParams: PathParam[];
+    queryParams: KeyValuePair[];
+    headers: KeyValuePair[];
+    authType: AuthType;
+    apiKey: string;
+    bypassMode: boolean;
+    selectedTeamId: string | null;
+    body: string;
+    status: RequestStatus;
+    onMethodChange: (method: HttpMethod) => void;
+    onPathParamsChange: (params: PathParam[]) => void;
+    onQueryParamsChange: (params: KeyValuePair[]) => void;
+    onHeadersChange: (headers: KeyValuePair[]) => void;
+    onAuthTypeChange: (type: AuthType) => void;
+    onApiKeyChange: (key: string) => void;
+    onBypassModeChange: (enabled: boolean) => void;
+    onTeamChange: (teamId: string | null) => void;
+    onBodyChange: (body: string) => void;
+    onSend: () => void;
+    onCancel: () => void;
+    endpointPresets?: ApiEndpointPresets | null;
+    endpointDoc?: {
+        path: string;
+        title: string;
+    } | null;
+    onApplyPreset?: (preset: ApiPreset) => void;
+    tabsModifiedByPreset?: Set<'params' | 'headers' | 'body'>;
+    onClearPresetIndicator?: (tab: 'params' | 'headers' | 'body') => void;
+}
+export declare function ApiRequestPanel({ route, basePath, method, pathParams, queryParams, headers, authType, apiKey, bypassMode, selectedTeamId, body, status, onMethodChange, onPathParamsChange, onQueryParamsChange, onHeadersChange, onAuthTypeChange, onApiKeyChange, onBypassModeChange, onTeamChange, onBodyChange, onSend, onCancel, endpointPresets, endpointDoc, onApplyPreset, tabsModifiedByPreset, onClearPresetIndicator, }: ApiRequestPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ApiRequestPanel.d.ts.map

package/dist/components/devtools/api-explorer/ApiRequestPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiRequestPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiRequestPanel.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACvG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAa/E,UAAU,oBAAoB;IAC5B,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,UAAU,CAAA;IAClB,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB,WAAW,EAAE,YAAY,EAAE,CAAA;IAC3B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,QAAQ,EAAE,QAAQ,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,aAAa,CAAA;IACrB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,kBAAkB,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAA;IACjD,mBAAmB,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IACrD,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IAClD,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC1C,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,kBAAkB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IAEpB,eAAe,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IAC3C,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IACpD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAA;IAE3C,oBAAoB,CAAC,EAAE,GAAG,CAAC,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA;IACzD,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,KAAK,IAAI,CAAA;CACtE;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,cAAc,EACd,IAAI,EACJ,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,eAAe,EACf,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,sBAAsB,GACvB,EAAE,oBAAoB,2CA8NtB"}

package/dist/components/devtools/api-explorer/ApiRequestPanel.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Send, X } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import { Badge } from "../../ui/badge.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs.js";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { useTranslations } from "next-intl";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+import { MethodSelector } from "../api-tester/MethodSelector.js";
+import { PathParamsEditor } from "../api-tester/PathParamsEditor.js";
+import { KeyValueEditor } from "../api-tester/KeyValueEditor.js";
+import { AuthSelector } from "../api-tester/AuthSelector.js";
+import { PayloadEditor } from "../api-tester/PayloadEditor.js";
+import { buildUrl, validatePathParams, validateJsonBody } from "../api-tester/utils/url-builder.js";
+import { PresetsTab } from "./PresetsTab.js";
+import { ApiDocsModal } from "./ApiDocsModal.js";
+const methodColors = {
+  GET: "bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border-emerald-500/30",
+  POST: "bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30",
+  PATCH: "bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30",
+  PUT: "bg-orange-500/20 text-orange-600 dark:text-orange-400 border-orange-500/30",
+  DELETE: "bg-red-500/20 text-red-600 dark:text-red-400 border-red-500/30",
+  OPTIONS: "bg-gray-500/20 text-gray-600 dark:text-gray-400 border-gray-500/30"
+};
+function ApiRequestPanel({
+  route,
+  basePath,
+  method,
+  pathParams,
+  queryParams,
+  headers,
+  authType,
+  apiKey,
+  bypassMode,
+  selectedTeamId,
+  body,
+  status,
+  onMethodChange,
+  onPathParamsChange,
+  onQueryParamsChange,
+  onHeadersChange,
+  onAuthTypeChange,
+  onApiKeyChange,
+  onBypassModeChange,
+  onTeamChange,
+  onBodyChange,
+  onSend,
+  onCancel,
+  endpointPresets,
+  endpointDoc,
+  onApplyPreset,
+  tabsModifiedByPreset,
+  onClearPresetIndicator
+}) {
+  const t = useTranslations("devtools.apiTester");
+  const previewUrl = useMemo(() => {
+    const origin = typeof window !== "undefined" ? window.location.origin : "";
+    return origin + buildUrl(basePath, pathParams, queryParams);
+  }, [basePath, pathParams, queryParams]);
+  const canSend = useMemo(() => {
+    const pathErrors = validatePathParams(pathParams);
+    const bodyError = ["POST", "PATCH", "PUT"].includes(method) ? validateJsonBody(body) : null;
+    return pathErrors.length === 0 && !bodyError;
+  }, [pathParams, method, body]);
+  const showPayloadEditor = ["POST", "PATCH", "PUT"].includes(method);
+  const handlePathParamsChange = (params) => {
+    onPathParamsChange(params);
+    onClearPresetIndicator == null ? void 0 : onClearPresetIndicator("params");
+  };
+  const handleQueryParamsChange = (params) => {
+    onQueryParamsChange(params);
+    onClearPresetIndicator == null ? void 0 : onClearPresetIndicator("params");
+  };
+  const handleHeadersChange = (newHeaders) => {
+    onHeadersChange(newHeaders);
+    onClearPresetIndicator == null ? void 0 : onClearPresetIndicator("headers");
+  };
+  const handleBodyChange = (newBody) => {
+    onBodyChange(newBody);
+    onClearPresetIndicator == null ? void 0 : onClearPresetIndicator("body");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", "data-cy": sel("devtools.apiExplorer.request.panel"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "p-4 border-b space-y-3 bg-muted/30", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "outline",
+            className: cn("font-mono text-sm px-2 py-1 border", methodColors[method]),
+            children: method
+          }
+        ),
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-sm font-medium flex-1 truncate", children: basePath }),
+        route.source && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs shrink-0", children: route.source }),
+        endpointDoc && /* @__PURE__ */ jsx(ApiDocsModal, { docPath: endpointDoc.path, title: endpointDoc.title }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              onClick: onSend,
+              disabled: !canSend || status === "loading",
+              size: "sm",
+              "data-cy": sel("devtools.apiExplorer.request.sendBtn"),
+              children: [
+                /* @__PURE__ */ jsx(Send, { className: "h-4 w-4 mr-2" }),
+                status === "loading" ? t("sending") : t("sendRequest")
+              ]
+            }
+          ),
+          status === "loading" && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onCancel, "data-cy": sel("devtools.apiExplorer.request.cancelBtn"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        MethodSelector,
+        {
+          methods: route.methods,
+          selected: method,
+          onSelect: onMethodChange
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "bg-background rounded-md border p-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground uppercase tracking-wide mb-1", children: t("urlPreview") }),
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-xs break-all text-foreground", children: previewUrl })
+      ] }),
+      /* @__PURE__ */ jsx(
+        AuthSelector,
+        {
+          authType,
+          apiKey,
+          bypassMode,
+          selectedTeamId,
+          onAuthTypeChange,
+          onApiKeyChange,
+          onBypassModeChange,
+          onTeamChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "params", className: "flex-1 flex flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b px-4", children: /* @__PURE__ */ jsxs(TabsList, { className: "h-9 bg-transparent p-0 border-0", children: [
+        /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: "params",
+            className: "data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-3 pb-2",
+            "data-cy": sel("devtools.apiExplorer.request.tabParams"),
+            children: [
+              (tabsModifiedByPreset == null ? void 0 : tabsModifiedByPreset.has("params")) && /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-primary mr-1.5", title: "Modified by preset" }),
+              "Params",
+              (pathParams.length > 0 || queryParams.length > 0) && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1.5 text-[10px] px-1.5", children: pathParams.length + queryParams.length })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: "headers",
+            className: "data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-3 pb-2",
+            "data-cy": sel("devtools.apiExplorer.request.tabHeaders"),
+            children: [
+              (tabsModifiedByPreset == null ? void 0 : tabsModifiedByPreset.has("headers")) && /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-primary mr-1.5", title: "Modified by preset" }),
+              "Headers",
+              headers.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1.5 text-[10px] px-1.5", children: headers.length })
+            ]
+          }
+        ),
+        showPayloadEditor && /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: "body",
+            className: "data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-3 pb-2",
+            "data-cy": sel("devtools.apiExplorer.request.tabBody"),
+            children: [
+              (tabsModifiedByPreset == null ? void 0 : tabsModifiedByPreset.has("body")) && /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-primary mr-1.5", title: "Modified by preset" }),
+              "Body"
+            ]
+          }
+        ),
+        endpointPresets && endpointPresets.presets.length > 0 && /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: "presets",
+            className: "data-[state=active]:bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none px-3 pb-2",
+            "data-cy": sel("devtools.apiExplorer.request.tabPresets"),
+            children: [
+              "Presets",
+              /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1.5 text-[10px] px-1.5", children: endpointPresets.presets.length })
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs(ScrollArea, { className: "flex-1", children: [
+        /* @__PURE__ */ jsxs(TabsContent, { value: "params", className: "m-0 p-4 space-y-4", children: [
+          pathParams.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Path Parameters" }),
+            /* @__PURE__ */ jsx(PathParamsEditor, { params: pathParams, onChange: handlePathParamsChange })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium mb-2", children: "Query Parameters" }),
+            /* @__PURE__ */ jsx(
+              KeyValueEditor,
+              {
+                items: queryParams,
+                onChange: handleQueryParamsChange,
+                dataCyPrefix: "api-request-query"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(TabsContent, { value: "headers", className: "m-0 p-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-3", children: t("headersInfo") }),
+          /* @__PURE__ */ jsx(
+            KeyValueEditor,
+            {
+              items: headers,
+              onChange: handleHeadersChange,
+              dataCyPrefix: "api-request-headers"
+            }
+          )
+        ] }),
+        showPayloadEditor && /* @__PURE__ */ jsx(TabsContent, { value: "body", className: "m-0 p-4", children: /* @__PURE__ */ jsx(PayloadEditor, { value: body, onChange: handleBodyChange }) }),
+        endpointPresets && endpointPresets.presets.length > 0 && onApplyPreset && /* @__PURE__ */ jsx(TabsContent, { value: "presets", className: "m-0", children: /* @__PURE__ */ jsx(
+          PresetsTab,
+          {
+            endpointPresets,
+            currentMethod: method,
+            onApplyPreset
+          }
+        ) })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  ApiRequestPanel
+};

package/dist/components/devtools/api-explorer/ApiResponsePanel.d.ts

@@ -0,0 +1,9 @@
+import type { ApiResponse, RequestStatus } from '../api-tester/types';
+interface ApiResponsePanelProps {
+    status: RequestStatus;
+    response: ApiResponse | null;
+    error: string | null;
+}
+export declare function ApiResponsePanel({ status, response, error }: ApiResponsePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ApiResponsePanel.d.ts.map

package/dist/components/devtools/api-explorer/ApiResponsePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiResponsePanel.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiResponsePanel.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAErE,UAAU,qBAAqB;IAC7B,MAAM,EAAE,aAAa,CAAA;IACrB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB;AASD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,qBAAqB,2CA6HlF"}