@djangocfg/ui-tools 2.1.91

package/dist/PlaygroundLayout-4DYBORAS.mjs

@@ -0,0 +1,996 @@
+import { usePlaygroundContext, deduplicateEndpoints, getStatusColor, JsonTree_default, isValidJson, PrettyCode_default, getVersionById, getVersionStats, API_VERSIONS, getMethodColor, findApiKeyById, parseRequestHeaders } from './chunk-M6P2FU7L.mjs';
+import { __name } from './chunk-37ZI6VD4.mjs';
+import { Menu, X, FileText, Send, Code, Check, ChevronLeft, ChevronRight, List, Grid3X3, Filter, Search, Download, XCircle, Key, Loader2, GitBranch, Info, Settings, BarChart3, Database, Users, Shield, ChevronDown, AlertCircle, HelpCircle } from 'lucide-react';
+import { Sheet, SheetTrigger, Button, SheetContent, Skeleton, Card, CardContent, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, CardHeader, CardTitle, CopyButton, Badge, Textarea, Collapsible, CollapsibleTrigger, CollapsibleContent, TooltipProvider, Tabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Tooltip, TooltipTrigger, TooltipContent } from '@djangocfg/ui-core/components';
+import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import consola from 'consola';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var useMobile = /* @__PURE__ */ __name(() => {
+  const isMobile = useIsMobile();
+  return {
+    isMobile,
+    isDesktop: !isMobile
+  };
+}, "useMobile");
+var extractEndpoints = /* @__PURE__ */ __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__ */ __name((endpoints) => {
+  const categories = /* @__PURE__ */ new Set();
+  endpoints.forEach((endpoint) => categories.add(endpoint.category));
+  return Array.from(categories).sort();
+}, "getCategories");
+var fetchSchema = /* @__PURE__ */ __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] = useState(true);
+  const [error, setError] = useState(null);
+  const [currentSchemaId, setCurrentSchemaId] = useState(
+    defaultSchemaId || schemas[0]?.id
+  );
+  const [loadedSchemas, setLoadedSchemas] = useState(
+    /* @__PURE__ */ new Map()
+  );
+  const currentSchema = useMemo(
+    () => schemas.find((s) => s.id === currentSchemaId) || null,
+    [schemas, currentSchemaId]
+  );
+  const currentOpenApiSchema = useMemo(
+    () => currentSchemaId ? loadedSchemas.get(currentSchemaId) : null,
+    [loadedSchemas, currentSchemaId]
+  );
+  const endpoints = useMemo(
+    () => currentOpenApiSchema ? extractEndpoints(currentOpenApiSchema) : [],
+    [currentOpenApiSchema]
+  );
+  const categories = useMemo(() => getCategories(endpoints), [endpoints]);
+  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.success(`Schema loaded: ${currentSchema.name}`);
+      setLoading(false);
+    }).catch((err) => {
+      consola.error(`Error loading schema from ${currentSchema.url}:`, err);
+      setError(err instanceof Error ? err.message : "Failed to load schema");
+      setLoading(false);
+    });
+  }, [currentSchema, loadedSchemas]);
+  const setCurrentSchema = useCallback((schemaId) => {
+    setCurrentSchemaId(schemaId);
+  }, []);
+  const refresh = 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.success(`Schema refreshed: ${currentSchema.name}`);
+      setLoading(false);
+    }).catch((err) => {
+      consola.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
+  };
+}
+__name(useOpenApiSchema, "useOpenApiSchema");
+var VersionSelector = /* @__PURE__ */ __name(() => {
+  const { state, config, setSelectedVersion } = usePlaygroundContext();
+  const { endpoints } = useOpenApiSchema({
+    schemas: config.schemas,
+    defaultSchemaId: config.defaultSchemaId
+  });
+  const currentVersion = getVersionById(state.selectedVersion);
+  const versionStats = getVersionStats(endpoints);
+  const handleVersionChange = /* @__PURE__ */ __name((versionId) => {
+    setSelectedVersion(versionId);
+  }, "handleVersionChange");
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: "API Version:" })
+    ] }),
+    /* @__PURE__ */ jsxs(Select, { value: state.selectedVersion, onValueChange: handleVersionChange, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: "w-48", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: API_VERSIONS.map((version) => /* @__PURE__ */ jsx(SelectItem, { value: version.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: version.name }),
+          version.isDefault && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: "Default" })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground ml-2", children: [
+          versionStats[version.id] || 0,
+          " endpoints"
+        ] })
+      ] }) }, version.id)) })
+    ] }),
+    currentVersion && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Info, { className: "h-3 w-3" }),
+      /* @__PURE__ */ jsx("span", { children: currentVersion.description })
+    ] })
+  ] });
+}, "VersionSelector");
+var categoryIcons = {
+  "Authentication": /* @__PURE__ */ jsx(Shield, { className: "h-4 w-4" }),
+  "Users": /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" }),
+  "Data": /* @__PURE__ */ jsx(Database, { className: "h-4 w-4" }),
+  "Analytics": /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" }),
+  "Files": /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }),
+  "Settings": /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
+  "Other": /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" })
+};
+var EndpointsLibrary = /* @__PURE__ */ __name(() => {
+  const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } = usePlaygroundContext();
+  const { endpoints, categories, loading, error } = useOpenApiSchema({
+    schemas: config.schemas,
+    defaultSchemaId: config.defaultSchemaId
+  });
+  const [viewMode, setViewMode] = React.useState("table");
+  const getRelativePath = /* @__PURE__ */ __name((fullPath) => {
+    try {
+      const url = new URL(fullPath);
+      return url.pathname;
+    } catch {
+      return fullPath;
+    }
+  }, "getRelativePath");
+  const filteredEndpoints = useMemo(() => {
+    let filtered = 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__ */ __name((endpoint) => {
+    setSelectedEndpoint(endpoint);
+  }, "handleEndpointSelect");
+  const getMethodBadges = /* @__PURE__ */ __name((methods) => {
+    return methods.split(", ").map((method) => /* @__PURE__ */ jsx(Badge, { variant: getMethodColor(method) === "success" ? "default" : "secondary", className: "text-xs", children: method }, method));
+  }, "getMethodBadges");
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "API Endpoints" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" }, i)) })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "API Endpoints" }) }),
+      /* @__PURE__ */ jsx(Card, { className: "bg-destructive/10 border-destructive/20", children: /* @__PURE__ */ jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-destructive", children: [
+        "Error loading endpoints: ",
+        error
+      ] }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "API Endpoints" }),
+        /* @__PURE__ */ jsx(VersionSelector, {})
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded-md", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: viewMode === "table" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => setViewMode("table"),
+              className: "rounded-r-none",
+              children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: viewMode === "grid" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => setViewMode("grid"),
+              className: "rounded-l-none",
+              children: /* @__PURE__ */ jsx(Grid3X3, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Select, { value: state.selectedCategory, onValueChange: setSelectedCategory, children: [
+          /* @__PURE__ */ jsxs(SelectTrigger, { className: "w-32", children: [
+            /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4 mr-2" }),
+            /* @__PURE__ */ jsx(SelectValue, {})
+          ] }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "All", children: "All" }),
+            categories.map((category) => /* @__PURE__ */ jsx(SelectItem, { value: category, children: category }, category))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "Search endpoints...",
+              value: state.searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              className: "w-48 pl-8"
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    viewMode === "table" ? /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { className: "text-foreground", children: "Methods" }),
+        /* @__PURE__ */ jsx(TableHead, { className: "text-foreground", children: "Path" }),
+        /* @__PURE__ */ jsx(TableHead, { className: "text-foreground", children: "Description" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: filteredEndpoints.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, className: "text-center py-8 text-muted-foreground", children: "No endpoints found" }) }) : filteredEndpoints.map((endpoint) => /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          className: `cursor-pointer transition-colors hover:bg-muted/50 ${state.selectedEndpoint?.path === endpoint.path ? "bg-primary/10" : ""}`,
+          onClick: () => handleEndpointSelect(endpoint),
+          children: [
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "flex space-x-1", children: getMethodBadges(endpoint.method) }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm text-muted-foreground", children: getRelativePath(endpoint.path) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-sm text-muted-foreground max-w-xs truncate", children: endpoint.description })
+          ]
+        },
+        `${endpoint.method}-${endpoint.path}`
+      )) })
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: filteredEndpoints.length === 0 ? /* @__PURE__ */ jsx("div", { className: "col-span-full text-center py-8 text-muted-foreground", children: "No endpoints found" }) : filteredEndpoints.map((endpoint) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: `cursor-pointer transition-all hover:shadow-md ${state.selectedEndpoint?.path === endpoint.path ? "ring-2 ring-primary" : ""}`,
+        onClick: () => handleEndpointSelect(endpoint),
+        children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              categoryIcons[endpoint.category] || /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: endpoint.name })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex space-x-1", children: getMethodBadges(endpoint.method) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-muted-foreground break-all", children: getRelativePath(endpoint.path) }),
+            /* @__PURE__ */ 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: Code,
+    description: "Select API endpoint"
+  },
+  request: {
+    title: "Request",
+    icon: Send,
+    description: "Configure request"
+  },
+  response: {
+    title: "Response",
+    icon: FileText,
+    description: "View response"
+  }
+};
+var PlaygroundStepper = /* @__PURE__ */ __name(() => {
+  const { state, setCurrentStep, goToNextStep, goToPreviousStep } = usePlaygroundContext();
+  const { currentStep, steps } = state;
+  const currentIndex = steps.indexOf(currentStep);
+  const canGoNext = currentIndex < steps.length - 1;
+  const canGoPrevious = currentIndex > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxs(
+          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__ */ jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: config.title })
+            ]
+          }
+        ),
+        index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: "w-8 h-px bg-border" })
+      ] }, step);
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: goToPreviousStep,
+          disabled: !canGoPrevious,
+          className: "flex items-center space-x-1",
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Previous" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: goToNextStep,
+          disabled: !canGoNext,
+          className: "flex items-center space-x-1",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Next" }),
+            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}, "PlaygroundStepper");
+var EndpointInfo = /* @__PURE__ */ __name(() => {
+  const { state } = usePlaygroundContext();
+  const { selectedEndpoint } = state;
+  const endpointJson = 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__ */ __name((methods) => {
+    return methods.split(", ").map((method) => /* @__PURE__ */ jsx(Badge, { variant: getMethodColor(method) === "success" ? "default" : "secondary", className: "text-xs", children: method }, method));
+  }, "getMethodBadges");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Selected Endpoint" }),
+      /* @__PURE__ */ jsx(CopyButton, { value: endpointJson, variant: "outline", size: "sm", children: "Copy" })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between text-sm text-foreground", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(Code, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedEndpoint.name })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex space-x-1", children: getMethodBadges(selectedEndpoint.method) })
+      ] }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-muted-foreground break-all", children: selectedEndpoint.path }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: selectedEndpoint.description })
+        ] }),
+        selectedEndpoint.parameters && selectedEndpoint.parameters.length > 0 && /* @__PURE__ */ jsxs(Collapsible, { children: [
+          /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center space-x-2 text-sm font-medium text-foreground", children: [
+            /* @__PURE__ */ jsx(Database, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Parameters (",
+              selectedEndpoint.parameters.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+          ] }),
+          /* @__PURE__ */ jsx(CollapsibleContent, { className: "mt-2 space-y-2", children: selectedEndpoint.parameters.map((param, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 text-xs", children: [
+            /* @__PURE__ */ jsx(Badge, { variant: param.required ? "destructive" : "secondary", className: "text-xs", children: param.required ? "Required" : "Optional" }),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-muted-foreground", children: [
+              param.name,
+              ": ",
+              param.type
+            ] }),
+            param.description && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              "- ",
+              param.description
+            ] })
+          ] }, index)) })
+        ] }),
+        selectedEndpoint.requestBody && /* @__PURE__ */ jsxs(Collapsible, { children: [
+          /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center space-x-2 text-sm font-medium text-foreground", children: [
+            /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { children: "Request Body" }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+          ] }),
+          /* @__PURE__ */ jsx(CollapsibleContent, { className: "mt-2", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("p", { children: [
+              "Type: ",
+              selectedEndpoint.requestBody.type
+            ] }),
+            selectedEndpoint.requestBody.description && /* @__PURE__ */ jsx("p", { className: "mt-1", children: selectedEndpoint.requestBody.description })
+          ] }) })
+        ] }),
+        selectedEndpoint.responses && selectedEndpoint.responses.length > 0 && /* @__PURE__ */ jsxs(Collapsible, { children: [
+          /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center space-x-2 text-sm font-medium text-foreground", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Responses (",
+              selectedEndpoint.responses.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+          ] }),
+          /* @__PURE__ */ jsx(CollapsibleContent, { className: "mt-2 space-y-2", children: selectedEndpoint.responses.map((response, index) => {
+            const statusColor = getStatusColor(parseInt(response.code));
+            const badgeVariant = statusColor === "success" ? "default" : statusColor === "error" ? "destructive" : "secondary";
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 text-xs", children: [
+              /* @__PURE__ */ jsx(Badge, { variant: badgeVariant, className: "text-xs", children: response.code }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: response.description })
+            ] }, index);
+          }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}, "EndpointInfo");
+var RequestParametersForm = /* @__PURE__ */ __name(() => {
+  const { state, setParameters } = usePlaygroundContext();
+  const [formData, setFormData] = useState({});
+  const [activeTab, setActiveTab] = useState("required");
+  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__ */ __name((name, value) => {
+    const newFormData = {
+      ...formData,
+      [name]: value
+    };
+    setFormData(newFormData);
+    setParameters(newFormData);
+  }, "handleInputChange");
+  const handleClearForm = /* @__PURE__ */ __name(() => {
+    setFormData({});
+    setParameters({});
+  }, "handleClearForm");
+  const handleGenerateJson = /* @__PURE__ */ __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__ */ __name(({ param }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ jsxs(Label, { htmlFor: param.name, className: "text-xs font-medium text-foreground", children: [
+        param.name,
+        param.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+      ] }),
+      param.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-3 w-3 text-muted-foreground hover:text-foreground cursor-help" }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ jsx("p", { className: "text-xs", children: param.description }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      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__ */ __name(({ params, title, badgeVariant }) => {
+    if (params.length === 0) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx(Badge, { variant: badgeVariant, className: "text-xs", children: title }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          params.length,
+          " parameter",
+          params.length !== 1 ? "s" : ""
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: params.map((param) => /* @__PURE__ */ jsx(ParameterField, { param }, param.name)) })
+    ] });
+  }, "ParametersGrid");
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-sm text-foreground", children: "Request Parameters" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        hasFormData && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "default",
+            size: "sm",
+            onClick: handleGenerateJson,
+            className: "text-xs",
+            children: "Copy JSON"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handleClearForm,
+            className: "text-xs",
+            children: "Clear"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+      requiredParams.length + optionalParams.length > 10 ? /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
+        /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [
+          /* @__PURE__ */ jsxs(TabsTrigger, { value: "required", className: "text-xs", children: [
+            "Required (",
+            requiredParams.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxs(TabsTrigger, { value: "optional", className: "text-xs", children: [
+            "Optional (",
+            optionalParams.length,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "required", className: "space-y-4", children: /* @__PURE__ */ jsx(
+          ParametersGrid,
+          {
+            params: requiredParams,
+            title: "Required",
+            badgeVariant: "destructive"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "optional", className: "space-y-4", children: /* @__PURE__ */ jsx(
+          ParametersGrid,
+          {
+            params: optionalParams,
+            title: "Optional",
+            badgeVariant: "secondary"
+          }
+        ) })
+      ] }) : (
+        /* Use Accordion for smaller parameter sets */
+        /* @__PURE__ */ jsxs(Accordion, { type: "multiple", defaultValue: requiredParams.length > 0 ? ["required"] : ["optional"], children: [
+          requiredParams.length > 0 && /* @__PURE__ */ jsxs(AccordionItem, { value: "required", children: [
+            /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-sm text-foreground", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: "Required" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                requiredParams.length,
+                " parameter",
+                requiredParams.length !== 1 ? "s" : ""
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-2", children: requiredParams.map((param) => /* @__PURE__ */ jsx(ParameterField, { param }, param.name)) }) })
+          ] }),
+          optionalParams.length > 0 && /* @__PURE__ */ jsxs(AccordionItem, { value: "optional", children: [
+            /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-sm text-foreground", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: "Optional" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                optionalParams.length,
+                " parameter",
+                optionalParams.length !== 1 ? "s" : ""
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-2", children: optionalParams.map((param) => /* @__PURE__ */ jsx(ParameterField, { param }, param.name)) }) })
+          ] })
+        ] })
+      ),
+      hasFormData && /* @__PURE__ */ jsxs("div", { className: "space-y-2 mt-6 pt-4 border-t", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-xs text-foreground", children: "Generated JSON" }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: JSON.stringify(formData, null, 2),
+            readOnly: true,
+            className: "text-xs font-mono",
+            rows: 4
+          }
+        ),
+        /* @__PURE__ */ 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__ */ __name(() => {
+  const {
+    state,
+    apiKeys,
+    setRequestBody,
+    setManualApiToken,
+    sendRequest
+  } = usePlaygroundContext();
+  const isJsonValid = state.requestBody ? isValidJson(state.requestBody) : true;
+  const generateCurlCommand = /* @__PURE__ */ __name(() => {
+    if (!state.requestUrl) return "";
+    const apiKey = state.selectedApiKey ? findApiKeyById(apiKeys, state.selectedApiKey) : null;
+    const headers = 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 = useCallback(async () => {
+    await sendRequest();
+  }, [sendRequest]);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    state.selectedEndpoint && /* @__PURE__ */ jsx(EndpointInfo, {}),
+    state.selectedEndpoint && /* @__PURE__ */ jsx(RequestParametersForm, {}),
+    state.requestMethod !== "GET" && /* @__PURE__ */ jsxs(Card, { className: "", children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm text-foreground", children: "Request Body" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { children: [
+        /* @__PURE__ */ jsx(
+          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__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: "Invalid JSON format" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { className: "", children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center space-x-2 text-sm text-foreground", children: [
+        /* @__PURE__ */ jsx(Key, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { children: "Bearer Token" })
+      ] }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx(
+            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__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Leave empty to use JWT token from localStorage" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          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__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Sending..." })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Send Request" })
+            ] })
+          }
+        )
+      ] }) })
+    ] }),
+    curlCommand && /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-sm text-foreground", children: "cURL Command" }),
+        /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            value: curlCommand,
+            variant: "outline",
+            size: "sm",
+            children: "Copy cURL"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(PrettyCode_default, { data: curlCommand, language: "bash" }) })
+    ] })
+  ] });
+}, "RequestBuilder");
+var ResponseViewer = /* @__PURE__ */ __name(() => {
+  const { state } = usePlaygroundContext();
+  const { response } = state;
+  const responseText = useMemo(() => {
+    if (!response?.data) return "";
+    return typeof response.data === "string" ? response.data : JSON.stringify(response.data, null, 2);
+  }, [response?.data]);
+  const handleDownloadResponse = 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__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Response" }) }),
+      /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No response yet. Send a request to see the response here." }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Response" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsx(CopyButton, { value: responseText, variant: "outline", size: "sm", children: "Copy" }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleDownloadResponse, children: [
+          /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Download" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm text-foreground", children: "Response Information" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: "Status Code:" }),
+              /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: getStatusColor(response.status || 0) === "success" ? "default" : getStatusColor(response.status || 0) === "error" ? "destructive" : "secondary",
+                  className: "text-xs",
+                  children: response.status
+                }
+              )
+            ] }),
+            response.statusText && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: "Status Text:" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: response.statusText })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: "Response Type:" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: typeof response.data === "string" ? "Text" : "JSON" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: "Data Size:" }),
+              /* @__PURE__ */ 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__ */ jsx("div", { className: "bg-destructive/10 border border-destructive/20 rounded p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4 text-destructive" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: response.error })
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: (() => {
+      const is404 = response.status === 404;
+      const isNonJson = typeof response.data === "string";
+      if (is404 || isNonJson) {
+        return /* @__PURE__ */ jsx("div", { className: "p-8 text-center", children: /* @__PURE__ */ 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__ */ jsx(
+          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__ */ jsx("div", { className: "p-8 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No response body available" }) });
+    })() }) })
+  ] });
+}, "ResponseViewer");
+var PlaygroundLayout = /* @__PURE__ */ __name(() => {
+  const { state, setSidebarOpen } = usePlaygroundContext();
+  const { isMobile } = useMobile();
+  const renderStepContent = /* @__PURE__ */ __name(() => {
+    switch (state.currentStep) {
+      case "endpoints":
+        return /* @__PURE__ */ jsx(EndpointsLibrary, {});
+      case "request":
+        return /* @__PURE__ */ jsx(RequestBuilder, {});
+      case "response":
+        return /* @__PURE__ */ jsx(ResponseViewer, {});
+      default:
+        return /* @__PURE__ */ jsx(EndpointsLibrary, {});
+    }
+  }, "renderStepContent");
+  const getStepTitle = /* @__PURE__ */ __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__ */ jsxs("div", { className: "min-h-screen", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-foreground", children: "API Playground" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground hidden sm:block", children: "Test and explore API endpoints" })
+      ] }),
+      isMobile && /* @__PURE__ */ jsxs(Sheet, { open: state.sidebarOpen, onOpenChange: setSidebarOpen, children: [
+        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(Menu, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-80", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Navigation" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => setSidebarOpen(false),
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(PlaygroundStepper, {})
+        ] }) })
+      ] })
+    ] }) }) }),
+    !isMobile && /* @__PURE__ */ jsx(PlaygroundStepper, {}),
+    /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-6 py-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground", children: getStepTitle() }),
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "space-y-6", children: renderStepContent() })
+    ] }),
+    isMobile && state.currentStep === "request" && /* @__PURE__ */ jsx("div", { className: "fixed bottom-4 right-4 z-50", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "lg",
+        className: "rounded-full shadow-lg",
+        onClick: () => {
+        },
+        children: "Send Request"
+      }
+    ) })
+  ] });
+}, "PlaygroundLayout");
+
+export { PlaygroundLayout };
+//# sourceMappingURL=PlaygroundLayout-4DYBORAS.mjs.map
+//# sourceMappingURL=PlaygroundLayout-4DYBORAS.mjs.map