@djangocfg/ui-tools 2.1.91

package/dist/PlaygroundLayout-3YVSAEAF.cjs

@@ -0,0 +1,1003 @@
+'use strict';
+
+var chunk7DGDQVQW_cjs = require('./chunk-7DGDQVQW.cjs');
+var chunkUQ3XI5MY_cjs = require('./chunk-UQ3XI5MY.cjs');
+var lucideReact = require('lucide-react');
+var components = require('@djangocfg/ui-core/components');
+var hooks = require('@djangocfg/ui-core/hooks');
+var React = require('react');
+var consola = require('consola');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var consola__default = /*#__PURE__*/_interopDefault(consola);
+
+var useMobile = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+  const isMobile = hooks.useIsMobile();
+  return {
+    isMobile,
+    isDesktop: !isMobile
+  };
+}, "useMobile");
+var extractEndpoints = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((schema) => {
+  const endpointMap = /* @__PURE__ */ new Map();
+  if (!schema.paths) return [];
+  const baseUrl = schema.servers && schema.servers.length > 0 ? schema.servers[0].url : "";
+  for (const [path, methods] of Object.entries(schema.paths)) {
+    const getOperation = methods.get;
+    if (!getOperation) continue;
+    const op = getOperation;
+    const description = op.description || op.summary || `GET ${path}`;
+    const category = op.tags?.[0] || "Other";
+    const parameters = [];
+    if (op.parameters) {
+      for (const param of op.parameters) {
+        parameters.push({
+          name: param.name,
+          type: param.schema?.type || "string",
+          required: param.required || false,
+          description: param.description
+        });
+      }
+    }
+    const responses = [];
+    if (op.responses) {
+      for (const [code, response] of Object.entries(op.responses)) {
+        responses.push({
+          code,
+          description: response.description || `Response ${code}`
+        });
+      }
+    }
+    const endpoint = {
+      name: path.split("/").pop() || path,
+      method: "GET",
+      path: baseUrl + path,
+      // Combine baseUrl with path
+      description,
+      category,
+      parameters: parameters.length > 0 ? parameters : void 0,
+      requestBody: void 0,
+      // GET requests don't have request body
+      responses: responses.length > 0 ? responses : void 0
+    };
+    endpointMap.set(path, endpoint);
+  }
+  return Array.from(endpointMap.values());
+}, "extractEndpoints");
+var getCategories = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((endpoints) => {
+  const categories = /* @__PURE__ */ new Set();
+  endpoints.forEach((endpoint) => categories.add(endpoint.category));
+  return Array.from(categories).sort();
+}, "getCategories");
+var fetchSchema = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(async (url) => {
+  const response = await fetch(url, {
+    headers: {
+      "Accept": "application/json"
+    }
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch schema: ${response.statusText}`);
+  }
+  return response.json();
+}, "fetchSchema");
+function useOpenApiSchema({
+  schemas,
+  defaultSchemaId
+}) {
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [currentSchemaId, setCurrentSchemaId] = React.useState(
+    defaultSchemaId || schemas[0]?.id
+  );
+  const [loadedSchemas, setLoadedSchemas] = React.useState(
+    /* @__PURE__ */ new Map()
+  );
+  const currentSchema = React.useMemo(
+    () => schemas.find((s) => s.id === currentSchemaId) || null,
+    [schemas, currentSchemaId]
+  );
+  const currentOpenApiSchema = React.useMemo(
+    () => currentSchemaId ? loadedSchemas.get(currentSchemaId) : null,
+    [loadedSchemas, currentSchemaId]
+  );
+  const endpoints = React.useMemo(
+    () => currentOpenApiSchema ? extractEndpoints(currentOpenApiSchema) : [],
+    [currentOpenApiSchema]
+  );
+  const categories = React.useMemo(() => getCategories(endpoints), [endpoints]);
+  React.useEffect(() => {
+    if (!currentSchema) return;
+    if (loadedSchemas.has(currentSchema.id)) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    fetchSchema(currentSchema.url).then((schema) => {
+      setLoadedSchemas((prev) => new Map(prev).set(currentSchema.id, schema));
+      consola__default.default.success(`Schema loaded: ${currentSchema.name}`);
+      setLoading(false);
+    }).catch((err) => {
+      consola__default.default.error(`Error loading schema from ${currentSchema.url}:`, err);
+      setError(err instanceof Error ? err.message : "Failed to load schema");
+      setLoading(false);
+    });
+  }, [currentSchema, loadedSchemas]);
+  const setCurrentSchema = React.useCallback((schemaId) => {
+    setCurrentSchemaId(schemaId);
+  }, []);
+  const refresh = React.useCallback(() => {
+    if (!currentSchema) return;
+    setLoading(true);
+    setError(null);
+    setLoadedSchemas((prev) => {
+      const next = new Map(prev);
+      next.delete(currentSchema.id);
+      return next;
+    });
+    fetchSchema(currentSchema.url).then((schema) => {
+      setLoadedSchemas((prev) => new Map(prev).set(currentSchema.id, schema));
+      consola__default.default.success(`Schema refreshed: ${currentSchema.name}`);
+      setLoading(false);
+    }).catch((err) => {
+      consola__default.default.error(`Error refreshing schema from ${currentSchema.url}:`, err);
+      setError(err instanceof Error ? err.message : "Failed to refresh schema");
+      setLoading(false);
+    });
+  }, [currentSchema]);
+  return {
+    loading,
+    error,
+    endpoints,
+    categories,
+    schemas,
+    currentSchema,
+    setCurrentSchema,
+    refresh
+  };
+}
+chunkUQ3XI5MY_cjs.__name(useOpenApiSchema, "useOpenApiSchema");
+var VersionSelector = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+  const { state, config, setSelectedVersion } = chunk7DGDQVQW_cjs.usePlaygroundContext();
+  const { endpoints } = useOpenApiSchema({
+    schemas: config.schemas,
+    defaultSchemaId: config.defaultSchemaId
+  });
+  const currentVersion = chunk7DGDQVQW_cjs.getVersionById(state.selectedVersion);
+  const versionStats = chunk7DGDQVQW_cjs.getVersionStats(endpoints);
+  const handleVersionChange = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((versionId) => {
+    setSelectedVersion(versionId);
+  }, "handleVersionChange");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { className: "h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: "API Version:" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(components.Select, { value: state.selectedVersion, onValueChange: handleVersionChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.SelectTrigger, { className: "w-48", children: /* @__PURE__ */ jsxRuntime.jsx(components.SelectValue, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(components.SelectContent, { children: chunk7DGDQVQW_cjs.API_VERSIONS.map((version) => /* @__PURE__ */ jsxRuntime.jsx(components.SelectItem, { value: version.id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: version.name }),
+          version.isDefault && /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: "secondary", className: "text-xs", children: "Default" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground ml-2", children: [
+          versionStats[version.id] || 0,
+          " endpoints"
+        ] })
+      ] }) }, version.id)) })
+    ] }),
+    currentVersion && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-3 w-3" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentVersion.description })
+    ] })
+  ] });
+}, "VersionSelector");
+var categoryIcons = {
+  "Authentication": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: "h-4 w-4" }),
+  "Users": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "h-4 w-4" }),
+  "Data": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { className: "h-4 w-4" }),
+  "Analytics": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-4 w-4" }),
+  "Files": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-4 w-4" }),
+  "Settings": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4" }),
+  "Other": /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-4 w-4" })
+};
+var EndpointsLibrary = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+  const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } = chunk7DGDQVQW_cjs.usePlaygroundContext();
+  const { endpoints, categories, loading, error } = useOpenApiSchema({
+    schemas: config.schemas,
+    defaultSchemaId: config.defaultSchemaId
+  });
+  const [viewMode, setViewMode] = React__default.default.useState("table");
+  const getRelativePath = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((fullPath) => {
+    try {
+      const url = new URL(fullPath);
+      return url.pathname;
+    } catch {
+      return fullPath;
+    }
+  }, "getRelativePath");
+  const filteredEndpoints = React.useMemo(() => {
+    let filtered = chunk7DGDQVQW_cjs.deduplicateEndpoints(endpoints, state.selectedVersion);
+    if (state.selectedCategory && state.selectedCategory !== "All") {
+      filtered = filtered.filter((endpoint) => endpoint.category === state.selectedCategory);
+    }
+    if (state.searchTerm) {
+      const searchLower = state.searchTerm.toLowerCase();
+      filtered = filtered.filter(
+        (endpoint) => endpoint.name.toLowerCase().includes(searchLower) || endpoint.description.toLowerCase().includes(searchLower) || endpoint.path.toLowerCase().includes(searchLower)
+      );
+    }
+    return filtered;
+  }, [endpoints, state.selectedCategory, state.searchTerm, state.selectedVersion]);
+  const handleEndpointSelect = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((endpoint) => {
+    setSelectedEndpoint(endpoint);
+  }, "handleEndpointSelect");
+  const getMethodBadges = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((methods) => {
+    return methods.split(", ").map((method) => /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: chunk7DGDQVQW_cjs.getMethodColor(method) === "success" ? "default" : "secondary", className: "text-xs", children: method }, method));
+  }, "getMethodBadges");
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "API Endpoints" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components.Skeleton, { className: "h-8 w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx(components.Skeleton, { className: "h-8 w-48" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(components.Skeleton, { className: "h-20 w-full" }, i)) })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "API Endpoints" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(components.Card, { className: "bg-destructive/10 border-destructive/20", children: /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-destructive", children: [
+        "Error loading endpoints: ",
+        error
+      ] }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "API Endpoints" }),
+        /* @__PURE__ */ jsxRuntime.jsx(VersionSelector, {})
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded-md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.Button,
+            {
+              variant: viewMode === "table" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => setViewMode("table"),
+              className: "rounded-r-none",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.Button,
+            {
+              variant: viewMode === "grid" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => setViewMode("grid"),
+              className: "rounded-l-none",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid3X3, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(components.Select, { value: state.selectedCategory, onValueChange: setSelectedCategory, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(components.SelectTrigger, { className: "w-32", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4 mr-2" }),
+            /* @__PURE__ */ jsxRuntime.jsx(components.SelectValue, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(components.SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components.SelectItem, { value: "All", children: "All" }),
+            categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(components.SelectItem, { value: category, children: category }, category))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.Input,
+            {
+              placeholder: "Search endpoints...",
+              value: state.searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              className: "w-48 pl-8"
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    viewMode === "table" ? /* @__PURE__ */ jsxRuntime.jsx(components.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.TableRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components.TableHead, { className: "text-foreground", children: "Methods" }),
+        /* @__PURE__ */ jsxRuntime.jsx(components.TableHead, { className: "text-foreground", children: "Path" }),
+        /* @__PURE__ */ jsxRuntime.jsx(components.TableHead, { className: "text-foreground", children: "Description" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(components.TableBody, { children: filteredEndpoints.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(components.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(components.TableCell, { colSpan: 3, className: "text-center py-8 text-muted-foreground", children: "No endpoints found" }) }) : filteredEndpoints.map((endpoint) => /* @__PURE__ */ jsxRuntime.jsxs(
+        components.TableRow,
+        {
+          className: `cursor-pointer transition-colors hover:bg-muted/50 ${state.selectedEndpoint?.path === endpoint.path ? "bg-primary/10" : ""}`,
+          onClick: () => handleEndpointSelect(endpoint),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex space-x-1", children: getMethodBadges(endpoint.method) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(components.TableCell, { className: "font-mono text-sm text-muted-foreground", children: getRelativePath(endpoint.path) }),
+            /* @__PURE__ */ jsxRuntime.jsx(components.TableCell, { className: "text-sm text-muted-foreground max-w-xs truncate", children: endpoint.description })
+          ]
+        },
+        `${endpoint.method}-${endpoint.path}`
+      )) })
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: filteredEndpoints.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full text-center py-8 text-muted-foreground", children: "No endpoints found" }) : filteredEndpoints.map((endpoint) => /* @__PURE__ */ jsxRuntime.jsxs(
+      components.Card,
+      {
+        className: `cursor-pointer transition-all hover:shadow-md ${state.selectedEndpoint?.path === endpoint.path ? "ring-2 ring-primary" : ""}`,
+        onClick: () => handleEndpointSelect(endpoint),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components.CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(components.CardTitle, { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+              categoryIcons[endpoint.category] || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: endpoint.name })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex space-x-1", children: getMethodBadges(endpoint.method) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(components.CardContent, { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-mono text-muted-foreground break-all", children: getRelativePath(endpoint.path) }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: endpoint.description })
+          ] })
+        ]
+      },
+      `${endpoint.method}-${endpoint.path}`
+    )) })
+  ] });
+}, "EndpointsLibrary");
+var stepConfig = {
+  endpoints: {
+    title: "Endpoints",
+    icon: lucideReact.Code,
+    description: "Select API endpoint"
+  },
+  request: {
+    title: "Request",
+    icon: lucideReact.Send,
+    description: "Configure request"
+  },
+  response: {
+    title: "Response",
+    icon: lucideReact.FileText,
+    description: "View response"
+  }
+};
+var PlaygroundStepper = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+  const { state, setCurrentStep, goToNextStep, goToPreviousStep } = chunk7DGDQVQW_cjs.usePlaygroundContext();
+  const { currentStep, steps } = state;
+  const currentIndex = steps.indexOf(currentStep);
+  const canGoNext = currentIndex < steps.length - 1;
+  const canGoPrevious = currentIndex > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-4", children: steps.map((step, index) => {
+      const config = stepConfig[step];
+      const Icon = config.icon;
+      const isActive = step === currentStep;
+      const isCompleted = index < currentIndex;
+      const isClickable = index <= currentIndex + 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          components.Button,
+          {
+            variant: isActive ? "default" : "ghost",
+            size: "sm",
+            onClick: () => isClickable && setCurrentStep(step),
+            className: `flex items-center space-x-2 ${isClickable ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`,
+            disabled: !isClickable,
+            children: [
+              isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: config.title })
+            ]
+          }
+        ),
+        index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-px bg-border" })
+      ] }, step);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        components.Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: goToPreviousStep,
+          disabled: !canGoPrevious,
+          className: "flex items-center space-x-1",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Previous" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        components.Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: goToNextStep,
+          disabled: !canGoNext,
+          className: "flex items-center space-x-1",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Next" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}, "PlaygroundStepper");
+var EndpointInfo = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+  const { state } = chunk7DGDQVQW_cjs.usePlaygroundContext();
+  const { selectedEndpoint } = state;
+  const endpointJson = React.useMemo(() => {
+    if (!selectedEndpoint) return "";
+    return JSON.stringify({
+      name: selectedEndpoint.name,
+      method: selectedEndpoint.method,
+      path: selectedEndpoint.path,
+      description: selectedEndpoint.description,
+      parameters: selectedEndpoint.parameters,
+      requestBody: selectedEndpoint.requestBody,
+      responses: selectedEndpoint.responses
+    }, null, 2);
+  }, [selectedEndpoint]);
+  if (!selectedEndpoint) {
+    return null;
+  }
+  const getMethodBadges = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((methods) => {
+    return methods.split(", ").map((method) => /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: chunk7DGDQVQW_cjs.getMethodColor(method) === "success" ? "default" : "secondary", className: "text-xs", children: method }, method));
+  }, "getMethodBadges");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Selected Endpoint" }),
+      /* @__PURE__ */ jsxRuntime.jsx(components.CopyButton, { value: endpointJson, variant: "outline", size: "sm", children: "Copy" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(components.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.CardTitle, { className: "flex items-center justify-between text-sm text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: selectedEndpoint.name })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex space-x-1", children: getMethodBadges(selectedEndpoint.method) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(components.CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-mono text-muted-foreground break-all", children: selectedEndpoint.path }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: selectedEndpoint.description })
+        ] }),
+        selectedEndpoint.parameters && selectedEndpoint.parameters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(components.Collapsible, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(components.CollapsibleTrigger, { className: "flex items-center space-x-2 text-sm font-medium text-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Parameters (",
+              selectedEndpoint.parameters.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(components.CollapsibleContent, { className: "mt-2 space-y-2", children: selectedEndpoint.parameters.map((param, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: param.required ? "destructive" : "secondary", className: "text-xs", children: param.required ? "Required" : "Optional" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-muted-foreground", children: [
+              param.name,
+              ": ",
+              param.type
+            ] }),
+            param.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+              "- ",
+              param.description
+            ] })
+          ] }, index)) })
+        ] }),
+        selectedEndpoint.requestBody && /* @__PURE__ */ jsxRuntime.jsxs(components.Collapsible, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(components.CollapsibleTrigger, { className: "flex items-center space-x-2 text-sm font-medium text-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Request Body" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(components.CollapsibleContent, { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+              "Type: ",
+              selectedEndpoint.requestBody.type
+            ] }),
+            selectedEndpoint.requestBody.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1", children: selectedEndpoint.requestBody.description })
+          ] }) })
+        ] }),
+        selectedEndpoint.responses && selectedEndpoint.responses.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(components.Collapsible, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(components.CollapsibleTrigger, { className: "flex items-center space-x-2 text-sm font-medium text-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Responses (",
+              selectedEndpoint.responses.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(components.CollapsibleContent, { className: "mt-2 space-y-2", children: selectedEndpoint.responses.map((response, index) => {
+            const statusColor = chunk7DGDQVQW_cjs.getStatusColor(parseInt(response.code));
+            const badgeVariant = statusColor === "success" ? "default" : statusColor === "error" ? "destructive" : "secondary";
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 text-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: badgeVariant, className: "text-xs", children: response.code }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: response.description })
+            ] }, index);
+          }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}, "EndpointInfo");
+var RequestParametersForm = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+  const { state, setParameters } = chunk7DGDQVQW_cjs.usePlaygroundContext();
+  const [formData, setFormData] = React.useState({});
+  const [activeTab, setActiveTab] = React.useState("required");
+  React.useEffect(() => {
+    if (state.selectedEndpoint?.parameters) {
+      const initialData = {};
+      state.selectedEndpoint.parameters.forEach((param) => {
+        initialData[param.name] = "";
+      });
+      setFormData(initialData);
+    }
+  }, [state.selectedEndpoint?.path, state.selectedEndpoint?.parameters]);
+  const handleInputChange = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((name, value) => {
+    const newFormData = {
+      ...formData,
+      [name]: value
+    };
+    setFormData(newFormData);
+    setParameters(newFormData);
+  }, "handleInputChange");
+  const handleClearForm = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+    setFormData({});
+    setParameters({});
+  }, "handleClearForm");
+  const handleGenerateJson = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+    const hasData = Object.values(formData).some((value) => value !== "" && value !== null && value !== void 0);
+    if (hasData) {
+      const jsonString = JSON.stringify(formData, null, 2);
+      navigator.clipboard.writeText(jsonString);
+    }
+  }, "handleGenerateJson");
+  if (!state.selectedEndpoint) return null;
+  const requiredParams = state.selectedEndpoint.parameters?.filter((param) => param.required) || [];
+  const optionalParams = state.selectedEndpoint.parameters?.filter((param) => !param.required) || [];
+  const hasParameters = (state.selectedEndpoint.parameters?.length || 0) > 0;
+  if (!hasParameters) {
+    return null;
+  }
+  const hasFormData = Object.values(formData).some((value) => value !== "" && value !== null && value !== void 0);
+  const ParameterField = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(({ param }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(components.Label, { htmlFor: param.name, className: "text-xs font-medium text-foreground", children: [
+        param.name,
+        param.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+      ] }),
+      param.description && /* @__PURE__ */ jsxRuntime.jsx(components.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircle, { className: "h-3 w-3 text-muted-foreground hover:text-foreground cursor-help" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(components.TooltipContent, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: param.description }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components.Input,
+      {
+        id: param.name,
+        value: formData[param.name] || "",
+        onChange: (e) => handleInputChange(param.name, e.target.value),
+        placeholder: `Enter ${param.name}${param.required ? "" : " (optional)"}`,
+        className: "text-sm"
+      }
+    )
+  ] }), "ParameterField");
+  const ParametersGrid = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(({ params, title, badgeVariant }) => {
+    if (params.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: badgeVariant, className: "text-xs", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          params.length,
+          " parameter",
+          params.length !== 1 ? "s" : ""
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: params.map((param) => /* @__PURE__ */ jsxRuntime.jsx(ParameterField, { param }, param.name)) })
+    ] });
+  }, "ParametersGrid");
+  return /* @__PURE__ */ jsxRuntime.jsx(components.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components.CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.CardTitle, { className: "text-sm text-foreground", children: "Request Parameters" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+        hasFormData && /* @__PURE__ */ jsxRuntime.jsx(
+          components.Button,
+          {
+            variant: "default",
+            size: "sm",
+            onClick: handleGenerateJson,
+            className: "text-xs",
+            children: "Copy JSON"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handleClearForm,
+            className: "text-xs",
+            children: "Clear"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(components.CardContent, { className: "space-y-4", children: [
+      requiredParams.length + optionalParams.length > 10 ? /* @__PURE__ */ jsxRuntime.jsxs(components.Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(components.TabsList, { className: "grid w-full grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(components.TabsTrigger, { value: "required", className: "text-xs", children: [
+            "Required (",
+            requiredParams.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(components.TabsTrigger, { value: "optional", className: "text-xs", children: [
+            "Optional (",
+            optionalParams.length,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(components.TabsContent, { value: "required", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ParametersGrid,
+          {
+            params: requiredParams,
+            title: "Required",
+            badgeVariant: "destructive"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(components.TabsContent, { value: "optional", className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ParametersGrid,
+          {
+            params: optionalParams,
+            title: "Optional",
+            badgeVariant: "secondary"
+          }
+        ) })
+      ] }) : (
+        /* Use Accordion for smaller parameter sets */
+        /* @__PURE__ */ jsxRuntime.jsxs(components.Accordion, { type: "multiple", defaultValue: requiredParams.length > 0 ? ["required"] : ["optional"], children: [
+          requiredParams.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(components.AccordionItem, { value: "required", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components.AccordionTrigger, { className: "text-sm text-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: "destructive", className: "text-xs", children: "Required" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                requiredParams.length,
+                " parameter",
+                requiredParams.length !== 1 ? "s" : ""
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(components.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-2", children: requiredParams.map((param) => /* @__PURE__ */ jsxRuntime.jsx(ParameterField, { param }, param.name)) }) })
+          ] }),
+          optionalParams.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(components.AccordionItem, { value: "optional", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(components.AccordionTrigger, { className: "text-sm text-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: "secondary", className: "text-xs", children: "Optional" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                optionalParams.length,
+                " parameter",
+                optionalParams.length !== 1 ? "s" : ""
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(components.AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-2", children: optionalParams.map((param) => /* @__PURE__ */ jsxRuntime.jsx(ParameterField, { param }, param.name)) }) })
+          ] })
+        ] })
+      ),
+      hasFormData && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 mt-6 pt-4 border-t", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components.Label, { className: "text-xs text-foreground", children: "Generated JSON" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.Textarea,
+          {
+            value: JSON.stringify(formData, null, 2),
+            readOnly: true,
+            className: "text-xs font-mono",
+            rows: 4
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: 'Click "Copy JSON" to copy this to clipboard, then paste it into the Request Body field above.' })
+      ] })
+    ] })
+  ] }) });
+}, "RequestParametersForm");
+var RequestBuilder = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+  const {
+    state,
+    apiKeys,
+    setRequestBody,
+    setManualApiToken,
+    sendRequest
+  } = chunk7DGDQVQW_cjs.usePlaygroundContext();
+  const isJsonValid = state.requestBody ? chunk7DGDQVQW_cjs.isValidJson(state.requestBody) : true;
+  const generateCurlCommand = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+    if (!state.requestUrl) return "";
+    const apiKey = state.selectedApiKey ? chunk7DGDQVQW_cjs.findApiKeyById(apiKeys, state.selectedApiKey) : null;
+    const headers = chunk7DGDQVQW_cjs.parseRequestHeaders(state.requestHeaders);
+    if (apiKey) {
+      headers["X-API-Key"] = apiKey.id || "";
+    }
+    let curl = `curl -X ${state.requestMethod} "${state.requestUrl}"`;
+    Object.entries(headers).forEach(([key, value]) => {
+      curl += ` \\
+  -H "${key}: ${value}"`;
+    });
+    if (state.requestBody && state.requestMethod !== "GET" && isJsonValid) {
+      curl += ` \\
+  -d '${state.requestBody}'`;
+    }
+    return curl;
+  }, "generateCurlCommand");
+  const curlCommand = generateCurlCommand();
+  const handleSendRequest = React.useCallback(async () => {
+    await sendRequest();
+  }, [sendRequest]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    state.selectedEndpoint && /* @__PURE__ */ jsxRuntime.jsx(EndpointInfo, {}),
+    state.selectedEndpoint && /* @__PURE__ */ jsxRuntime.jsx(RequestParametersForm, {}),
+    state.requestMethod !== "GET" && /* @__PURE__ */ jsxRuntime.jsxs(components.Card, { className: "", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(components.CardTitle, { className: "text-sm text-foreground", children: "Request Body" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(components.CardContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.Textarea,
+          {
+            placeholder: '{\\n  "key": "value"\\n}',
+            value: state.requestBody,
+            onChange: (e) => setRequestBody(e.target.value),
+            className: `font-mono text-sm  ${!isJsonValid ? "border-destructive" : ""}`,
+            rows: 6
+          }
+        ),
+        !isJsonValid && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: "Invalid JSON format" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(components.Card, { className: "", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(components.CardTitle, { className: "flex items-center space-x-2 text-sm text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Key, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Bearer Token" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.Input,
+            {
+              type: "password",
+              placeholder: "Enter Bearer token (optional, uses JWT if empty)",
+              value: state.manualApiToken,
+              onChange: (e) => setManualApiToken(e.target.value),
+              className: "font-mono text-sm"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Leave empty to use JWT token from localStorage" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.Button,
+          {
+            onClick: handleSendRequest,
+            disabled: state.loading || !state.requestUrl || !isJsonValid,
+            className: "bg-primary hover:bg-primary/90 text-primary-foreground flex items-center gap-2",
+            children: state.loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Sending..." })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Send Request" })
+            ] })
+          }
+        )
+      ] }) })
+    ] }),
+    curlCommand && /* @__PURE__ */ jsxRuntime.jsxs(components.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components.CardTitle, { className: "text-sm text-foreground", children: "cURL Command" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.CopyButton,
+          {
+            value: curlCommand,
+            variant: "outline",
+            size: "sm",
+            children: "Copy cURL"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(chunk7DGDQVQW_cjs.PrettyCode_default, { data: curlCommand, language: "bash" }) })
+    ] })
+  ] });
+}, "RequestBuilder");
+var ResponseViewer = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+  const { state } = chunk7DGDQVQW_cjs.usePlaygroundContext();
+  const { response } = state;
+  const responseText = React.useMemo(() => {
+    if (!response?.data) return "";
+    return typeof response.data === "string" ? response.data : JSON.stringify(response.data, null, 2);
+  }, [response?.data]);
+  const handleDownloadResponse = React.useCallback(() => {
+    if (!responseText) return;
+    const blob = new Blob([responseText], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "response.json";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [responseText]);
+  if (!response) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Response" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(components.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No response yet. Send a request to see the response here." }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Response" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components.CopyButton, { value: responseText, variant: "outline", size: "sm", children: "Copy" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(components.Button, { variant: "outline", size: "sm", onClick: handleDownloadResponse, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Download" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(components.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(components.CardTitle, { className: "text-sm text-foreground", children: "Response Information" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(components.CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: "Status Code:" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                components.Badge,
+                {
+                  variant: chunk7DGDQVQW_cjs.getStatusColor(response.status || 0) === "success" ? "default" : chunk7DGDQVQW_cjs.getStatusColor(response.status || 0) === "error" ? "destructive" : "secondary",
+                  className: "text-xs",
+                  children: response.status
+                }
+              )
+            ] }),
+            response.statusText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: "Status Text:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: response.statusText })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: "Response Type:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: typeof response.data === "string" ? "Text" : "JSON" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground", children: "Data Size:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                typeof response.data === "string" ? response.data.length : JSON.stringify(response.data).length,
+                " chars"
+              ] })
+            ] })
+          ] })
+        ] }),
+        response.error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-destructive/10 border border-destructive/20 rounded p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-4 w-4 text-destructive" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: response.error })
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(components.Card, { children: /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { className: "p-0", children: (() => {
+      const is404 = response.status === 404;
+      const isNonJson = typeof response.data === "string";
+      if (is404 || isNonJson) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: is404 ? "Response body hidden for 404 Not Found status" : "Response body hidden for non-JSON responses" }) });
+      }
+      if (response.data) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          chunk7DGDQVQW_cjs.JsonTree_default,
+          {
+            title: "Response Body",
+            data: response.data,
+            config: {
+              // Smart defaults for API responses
+              maxAutoExpandDepth: 2,
+              maxAutoExpandArrayItems: 10,
+              maxAutoExpandObjectKeys: 5,
+              maxStringLength: 200,
+              collectionLimit: 50,
+              showCollectionInfo: true,
+              showExpandControls: true,
+              showActionButtons: false,
+              // We have our own copy/download buttons above
+              preserveKeyOrder: true,
+              className: "border-0 rounded-none"
+            }
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No response body available" }) });
+    })() }) })
+  ] });
+}, "ResponseViewer");
+var PlaygroundLayout = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+  const { state, setSidebarOpen } = chunk7DGDQVQW_cjs.usePlaygroundContext();
+  const { isMobile } = useMobile();
+  const renderStepContent = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+    switch (state.currentStep) {
+      case "endpoints":
+        return /* @__PURE__ */ jsxRuntime.jsx(EndpointsLibrary, {});
+      case "request":
+        return /* @__PURE__ */ jsxRuntime.jsx(RequestBuilder, {});
+      case "response":
+        return /* @__PURE__ */ jsxRuntime.jsx(ResponseViewer, {});
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(EndpointsLibrary, {});
+    }
+  }, "renderStepContent");
+  const getStepTitle = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(() => {
+    switch (state.currentStep) {
+      case "endpoints":
+        return "API Endpoints";
+      case "request":
+        return "Request Builder";
+      case "response":
+        return "Response Viewer";
+      default:
+        return "API Playground";
+    }
+  }, "getStepTitle");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold text-foreground", children: "API Playground" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground hidden sm:block", children: "Test and explore API endpoints" })
+      ] }),
+      isMobile && /* @__PURE__ */ jsxRuntime.jsxs(components.Sheet, { open: state.sidebarOpen, onOpenChange: setSidebarOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components.SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(components.SheetContent, { side: "left", className: "w-80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Navigation" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              components.Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => setSidebarOpen(false),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(PlaygroundStepper, {})
+        ] }) })
+      ] })
+    ] }) }) }),
+    !isMobile && /* @__PURE__ */ jsxRuntime.jsx(PlaygroundStepper, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto px-6 py-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-foreground", children: getStepTitle() }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground mt-1", children: [
+          state.currentStep === "endpoints" && "Browse and select API endpoints",
+          state.currentStep === "request" && "Configure your API request",
+          state.currentStep === "response" && "View API response and details"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: renderStepContent() })
+    ] }),
+    isMobile && state.currentStep === "request" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      components.Button,
+      {
+        size: "lg",
+        className: "rounded-full shadow-lg",
+        onClick: () => {
+        },
+        children: "Send Request"
+      }
+    ) })
+  ] });
+}, "PlaygroundLayout");
+
+exports.PlaygroundLayout = PlaygroundLayout;
+//# sourceMappingURL=PlaygroundLayout-3YVSAEAF.cjs.map
+//# sourceMappingURL=PlaygroundLayout-3YVSAEAF.cjs.map