@djangocfg/ui-tools 2.1.194 → 2.1.197

package/dist/{PlaygroundLayout-YH77POI4.mjs → PlaygroundLayout-DWRNA2QM.mjs}

@@ -1,8 +1,8 @@
-import { usePlaygroundContext, deduplicateEndpoints, getStatusColor, isValidJson, PrettyCode_default, getVersionById, getVersionStats, API_VERSIONS, getMethodColor, findApiKeyById, parseRequestHeaders } from './chunk-UX2MCSN5.mjs';
+import { usePlaygroundContext, deduplicateEndpoints, getStatusColor, isValidJson, PrettyCode_default, findApiKeyById, parseRequestHeaders, getMethodColor } from './chunk-FXFTJW2Y.mjs';
 import { JsonTree_default } from './chunk-XXFYTIQK.mjs';
 import { __name } from './chunk-CGILA3WO.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 { Menu, X, FileText, Send, Code, Check, ChevronLeft, ChevronRight, Search, Filter, List, Grid3X3, Download, XCircle, Key, Loader2, Database, ChevronDown, AlertCircle, HelpCircle } from 'lucide-react';
+import { Sheet, SheetTrigger, Button, SheetContent, Skeleton, Card, CardContent, Combobox, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DownloadButton, 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';
@@ -15,19 +15,21 @@ var useMobile = /* @__PURE__ */ __name(() => {
     isDesktop: !isMobile
   };
 }, "useMobile");
+var HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
 var extractEndpoints = /* @__PURE__ */ __name((schema) => {
-  const endpointMap = /* @__PURE__ */ new Map();
+  const endpoints = [];
   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) {
+    for (const method of HTTP_METHODS) {
+      const op = methods[method];
+      if (!op) continue;
+      const methodUpper = method.toUpperCase();
+      const description = op.description || op.summary || `${methodUpper} ${path}`;
+      const category = op.tags?.[0] || "Other";
+      const parameters = [];
+      const allParams = [...methods.parameters || [], ...op.parameters || []];
+      for (const param of allParams) {
         parameters.push({
           name: param.name,
           type: param.schema?.type || "string",
@@ -35,31 +37,38 @@ var extractEndpoints = /* @__PURE__ */ __name((schema) => {
           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 responses = [];
+      if (op.responses) {
+        for (const [code, response] of Object.entries(op.responses)) {
+          responses.push({
+            code,
+            description: response.description || `Response ${code}`
+          });
+        }
       }
+      let requestBody;
+      if (op.requestBody) {
+        const content = op.requestBody.content;
+        const mediaType = content?.["application/json"] || content?.[Object.keys(content || {})[0]];
+        requestBody = {
+          type: mediaType?.schema?.type || "object",
+          description: op.requestBody.description
+        };
+      }
+      const endpoint = {
+        name: path.split("/").pop() || path,
+        method: methodUpper,
+        path: baseUrl + path,
+        description,
+        category,
+        parameters: parameters.length > 0 ? parameters : void 0,
+        requestBody,
+        responses: responses.length > 0 ? responses : void 0
+      };
+      endpoints.push(endpoint);
     }
-    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());
+  return endpoints;
 }, "extractEndpoints");
 var getCategories = /* @__PURE__ */ __name((endpoints) => {
   const categories = /* @__PURE__ */ new Set();
@@ -154,53 +163,16 @@ function useOpenApiSchema({
   };
 }
 __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 METHOD_BADGE_VARIANTS = {
+  GET: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+  POST: "bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/20",
+  PUT: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/20",
+  PATCH: "bg-orange-500/15 text-orange-600 dark:text-orange-400 border-orange-500/20",
+  DELETE: "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20"
 };
 var EndpointsLibrary = /* @__PURE__ */ __name(() => {
   const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } = usePlaygroundContext();
-  const { endpoints, categories, loading, error } = useOpenApiSchema({
+  const { endpoints, categories, loading, error, schemas, currentSchema, setCurrentSchema } = useOpenApiSchema({
     schemas: config.schemas,
     defaultSchemaId: config.defaultSchemaId
   });
@@ -226,122 +198,142 @@ var EndpointsLibrary = /* @__PURE__ */ __name(() => {
     }
     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");
+  const schemaOptions = useMemo(
+    () => schemas.map((s) => ({ value: s.id, label: s.name })),
+    [schemas]
+  );
+  const getMethodBadge = /* @__PURE__ */ __name((method) => /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: "outline",
+      className: `text-xs font-mono font-semibold ${METHOD_BADGE_VARIANTS[method.toUpperCase()] || ""}`,
+      children: method
+    },
+    method
+  ), "getMethodBadge");
   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" })
-        ] })
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-44" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 flex-1 max-w-xs" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" }, i)) })
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-12 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__ */ jsx("div", { className: "space-y-3", children: /* @__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: [
+      "Failed to load schema: ",
+      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, {})
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+      schemas.length > 1 && /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          options: schemaOptions,
+          value: currentSchema?.id || "",
+          onValueChange: (id) => id && setCurrentSchema(id),
+          placeholder: "Select API",
+          searchPlaceholder: "Search APIs...",
+          emptyText: "No APIs found",
+          className: "w-44"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-xs", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Search...",
+            value: state.searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            className: "h-9 pl-8 text-sm"
+          }
+        )
       ] }),
-      /* @__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-auto h-9 gap-1.5", children: [
+          /* @__PURE__ */ jsx(Filter, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx(SelectValue, {})
         ] }),
-        /* @__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"
-            }
-          )
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "All", children: "All" }),
+          categories.map((category) => /* @__PURE__ */ jsx(SelectItem, { value: category, children: category }, category))
         ] })
-      ] }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground tabular-nums hidden sm:inline", children: [
+        filteredEndpoints.length,
+        " endpoint",
+        filteredEndpoints.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded-md", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: viewMode === "table" ? "default" : "ghost",
+            size: "icon",
+            className: "h-8 w-8 rounded-r-none",
+            onClick: () => setViewMode("table"),
+            children: /* @__PURE__ */ jsx(List, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: viewMode === "grid" ? "default" : "ghost",
+            size: "icon",
+            className: "h-8 w-8 rounded-l-none",
+            onClick: () => setViewMode("grid"),
+            children: /* @__PURE__ */ jsx(Grid3X3, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }),
+      currentSchema && /* @__PURE__ */ jsx(
+        DownloadButton,
+        {
+          url: currentSchema.url,
+          filename: `${currentSchema.id}-openapi.json`,
+          variant: "outline",
+          size: "sm",
+          className: "h-8",
+          children: /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Schema" })
+        }
+      )
     ] }),
     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: "w-20 text-foreground", children: "Method" }),
         /* @__PURE__ */ jsx(TableHead, { className: "text-foreground", children: "Path" }),
-        /* @__PURE__ */ jsx(TableHead, { className: "text-foreground", children: "Description" })
+        /* @__PURE__ */ jsx(TableHead, { className: "text-foreground hidden lg:table-cell", 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(
+      /* @__PURE__ */ jsx(TableBody, { children: filteredEndpoints.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 3, className: "text-center py-12 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),
+          className: `cursor-pointer transition-colors hover:bg-muted/50 ${state.selectedEndpoint?.path === endpoint.path && state.selectedEndpoint?.method === endpoint.method ? "bg-primary/5" : ""}`,
+          onClick: () => setSelectedEndpoint(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 })
+            /* @__PURE__ */ jsx(TableCell, { className: "py-2.5", children: getMethodBadge(endpoint.method) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm text-muted-foreground py-2.5", children: getRelativePath(endpoint.path) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-sm text-muted-foreground max-w-sm truncate py-2.5 hidden lg:table-cell", 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(
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3", children: filteredEndpoints.length === 0 ? /* @__PURE__ */ jsx("div", { className: "col-span-full text-center py-12 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),
+        className: `cursor-pointer transition-all hover:shadow-md ${state.selectedEndpoint?.path === endpoint.path && state.selectedEndpoint?.method === endpoint.method ? "ring-2 ring-primary" : ""}`,
+        onClick: () => setSelectedEndpoint(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__ */ jsx(CardHeader, { className: "pb-2 pt-3 px-4", children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground truncate", children: getRelativePath(endpoint.path) }),
+            getMethodBadge(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 })
-          ] })
+          /* @__PURE__ */ jsx(CardContent, { className: "px-4 pb-3 pt-0", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: endpoint.description }) })
         ]
       },
       `${endpoint.method}-${endpoint.path}`
@@ -371,7 +363,7 @@ var PlaygroundStepper = /* @__PURE__ */ __name(() => {
   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: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-4", children: steps.map((step, index) => {
       const config = stepConfig[step];
       const Icon = config.icon;
@@ -930,26 +922,10 @@ var PlaygroundLayout = /* @__PURE__ */ __name(() => {
         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" }) }) }),
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-6 py-3", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Sheet, { open: state.sidebarOpen, onOpenChange: setSidebarOpen, children: [
+        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", 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" }),
@@ -965,27 +941,17 @@ var PlaygroundLayout = /* @__PURE__ */ __name(() => {
           ] }),
           /* @__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() })
-    ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground capitalize", children: state.currentStep }),
+      /* @__PURE__ */ jsx("div", { className: "w-8" }),
+      " "
+    ] }) : /* @__PURE__ */ jsx(PlaygroundStepper, {}) }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "container mx-auto px-6 py-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"
       }
     ) })
@@ -993,5 +959,5 @@ var PlaygroundLayout = /* @__PURE__ */ __name(() => {
 }, "PlaygroundLayout");
 
 export { PlaygroundLayout };
-//# sourceMappingURL=PlaygroundLayout-YH77POI4.mjs.map
-//# sourceMappingURL=PlaygroundLayout-YH77POI4.mjs.map
+//# sourceMappingURL=PlaygroundLayout-DWRNA2QM.mjs.map
+//# sourceMappingURL=PlaygroundLayout-DWRNA2QM.mjs.map