@djangocfg/ui-tools 2.1.196 → 2.1.197

package/dist/{PlaygroundLayout-LICYATAF.cjs → PlaygroundLayout-XYMJBNT4.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkGX62WYEV_cjs = require('./chunk-GX62WYEV.cjs');
+var chunkQP6QAK3F_cjs = require('./chunk-QP6QAK3F.cjs');
 var chunkDFWXRCIC_cjs = require('./chunk-DFWXRCIC.cjs');
 var chunkWGEGR3DF_cjs = require('./chunk-WGEGR3DF.cjs');
 var lucideReact = require('lucide-react');
@@ -22,19 +22,21 @@ var useMobile = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
     isDesktop: !isMobile
   };
 }, "useMobile");
+var HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
 var extractEndpoints = /* @__PURE__ */ chunkWGEGR3DF_cjs.__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",
@@ -42,31 +44,38 @@ var extractEndpoints = /* @__PURE__ */ chunkWGEGR3DF_cjs.__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__ */ chunkWGEGR3DF_cjs.__name((endpoints) => {
   const categories = /* @__PURE__ */ new Set();
@@ -161,53 +170,16 @@ function useOpenApiSchema({
   };
 }
 chunkWGEGR3DF_cjs.__name(useOpenApiSchema, "useOpenApiSchema");
-var VersionSelector = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
-  const { state, config, setSelectedVersion } = chunkGX62WYEV_cjs.usePlaygroundContext();
-  const { endpoints } = useOpenApiSchema({
-    schemas: config.schemas,
-    defaultSchemaId: config.defaultSchemaId
-  });
-  const currentVersion = chunkGX62WYEV_cjs.getVersionById(state.selectedVersion);
-  const versionStats = chunkGX62WYEV_cjs.getVersionStats(endpoints);
-  const handleVersionChange = /* @__PURE__ */ chunkWGEGR3DF_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: chunkGX62WYEV_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 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__ */ chunkWGEGR3DF_cjs.__name(() => {
-  const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } = chunkGX62WYEV_cjs.usePlaygroundContext();
-  const { endpoints, categories, loading, error } = useOpenApiSchema({
+  const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } = chunkQP6QAK3F_cjs.usePlaygroundContext();
+  const { endpoints, categories, loading, error, schemas, currentSchema, setCurrentSchema } = useOpenApiSchema({
     schemas: config.schemas,
     defaultSchemaId: config.defaultSchemaId
   });
@@ -221,7 +193,7 @@ var EndpointsLibrary = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
     }
   }, "getRelativePath");
   const filteredEndpoints = React.useMemo(() => {
-    let filtered = chunkGX62WYEV_cjs.deduplicateEndpoints(endpoints, state.selectedVersion);
+    let filtered = chunkQP6QAK3F_cjs.deduplicateEndpoints(endpoints, state.selectedVersion);
     if (state.selectedCategory && state.selectedCategory !== "All") {
       filtered = filtered.filter((endpoint) => endpoint.category === state.selectedCategory);
     }
@@ -233,122 +205,142 @@ var EndpointsLibrary = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
     }
     return filtered;
   }, [endpoints, state.selectedCategory, state.searchTerm, state.selectedVersion]);
-  const handleEndpointSelect = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((endpoint) => {
-    setSelectedEndpoint(endpoint);
-  }, "handleEndpointSelect");
-  const getMethodBadges = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((methods) => {
-    return methods.split(", ").map((method) => /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: chunkGX62WYEV_cjs.getMethodColor(method) === "success" ? "default" : "secondary", className: "text-xs", children: method }, method));
-  }, "getMethodBadges");
+  const schemaOptions = React.useMemo(
+    () => schemas.map((s) => ({ value: s.id, label: s.name })),
+    [schemas]
+  );
+  const getMethodBadge = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((method) => /* @__PURE__ */ jsxRuntime.jsx(
+    components.Badge,
+    {
+      variant: "outline",
+      className: `text-xs font-mono font-semibold ${METHOD_BADGE_VARIANTS[method.toUpperCase()] || ""}`,
+      children: method
+    },
+    method
+  ), "getMethodBadge");
   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" })
-        ] })
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components.Skeleton, { className: "h-9 w-44" }),
+        /* @__PURE__ */ jsxRuntime.jsx(components.Skeleton, { className: "h-9 flex-1 max-w-xs" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ jsxRuntime.jsx(components.Skeleton, { className: "h-9 w-24" })
       ] }),
-      /* @__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)) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(components.Skeleton, { className: "h-12 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.jsx("div", { className: "space-y-3", children: /* @__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: [
+      "Failed to load schema: ",
+      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, {})
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+      schemas.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+        components.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__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 max-w-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.Input,
+          {
+            placeholder: "Search...",
+            value: state.searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            className: "h-9 pl-8 text-sm"
+          }
+        )
       ] }),
-      /* @__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-auto h-9 gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx(components.SelectValue, {})
         ] }),
-        /* @__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"
-            }
-          )
+        /* @__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.jsx("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground tabular-nums hidden sm:inline", children: [
+        filteredEndpoints.length,
+        " endpoint",
+        filteredEndpoints.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.Button,
+          {
+            variant: viewMode === "table" ? "default" : "ghost",
+            size: "icon",
+            className: "h-8 w-8 rounded-r-none",
+            onClick: () => setViewMode("table"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.Button,
+          {
+            variant: viewMode === "grid" ? "default" : "ghost",
+            size: "icon",
+            className: "h-8 w-8 rounded-l-none",
+            onClick: () => setViewMode("grid"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid3X3, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }),
+      currentSchema && /* @__PURE__ */ jsxRuntime.jsx(
+        components.DownloadButton,
+        {
+          url: currentSchema.url,
+          filename: `${currentSchema.id}-openapi.json`,
+          variant: "outline",
+          size: "sm",
+          className: "h-8",
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Schema" })
+        }
+      )
     ] }),
     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: "w-20 text-foreground", children: "Method" }),
         /* @__PURE__ */ jsxRuntime.jsx(components.TableHead, { className: "text-foreground", children: "Path" }),
-        /* @__PURE__ */ jsxRuntime.jsx(components.TableHead, { className: "text-foreground", children: "Description" })
+        /* @__PURE__ */ jsxRuntime.jsx(components.TableHead, { className: "text-foreground hidden lg:table-cell", 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(
+      /* @__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-12 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),
+          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__ */ 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 })
+            /* @__PURE__ */ jsxRuntime.jsx(components.TableCell, { className: "py-2.5", children: getMethodBadge(endpoint.method) }),
+            /* @__PURE__ */ jsxRuntime.jsx(components.TableCell, { className: "font-mono text-sm text-muted-foreground py-2.5", children: getRelativePath(endpoint.path) }),
+            /* @__PURE__ */ jsxRuntime.jsx(components.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__ */ 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(
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3", children: filteredEndpoints.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full text-center py-12 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),
+        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__ */ 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.jsx(components.CardHeader, { className: "pb-2 pt-3 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs(components.CardTitle, { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs text-muted-foreground truncate", children: getRelativePath(endpoint.path) }),
+            getMethodBadge(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 })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { className: "px-4 pb-3 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: endpoint.description }) })
         ]
       },
       `${endpoint.method}-${endpoint.path}`
@@ -373,12 +365,12 @@ var stepConfig = {
   }
 };
 var PlaygroundStepper = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
-  const { state, setCurrentStep, goToNextStep, goToPreviousStep } = chunkGX62WYEV_cjs.usePlaygroundContext();
+  const { state, setCurrentStep, goToNextStep, goToPreviousStep } = chunkQP6QAK3F_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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", 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;
@@ -436,7 +428,7 @@ var PlaygroundStepper = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
   ] });
 }, "PlaygroundStepper");
 var EndpointInfo = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
-  const { state } = chunkGX62WYEV_cjs.usePlaygroundContext();
+  const { state } = chunkQP6QAK3F_cjs.usePlaygroundContext();
   const { selectedEndpoint } = state;
   const endpointJson = React.useMemo(() => {
     if (!selectedEndpoint) return "";
@@ -454,7 +446,7 @@ var EndpointInfo = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
     return null;
   }
   const getMethodBadges = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((methods) => {
-    return methods.split(", ").map((method) => /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: chunkGX62WYEV_cjs.getMethodColor(method) === "success" ? "default" : "secondary", className: "text-xs", children: method }, method));
+    return methods.split(", ").map((method) => /* @__PURE__ */ jsxRuntime.jsx(components.Badge, { variant: chunkQP6QAK3F_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: [
@@ -522,7 +514,7 @@ var EndpointInfo = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
             /* @__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 = chunkGX62WYEV_cjs.getStatusColor(parseInt(response.code));
+            const statusColor = chunkQP6QAK3F_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 }),
@@ -535,7 +527,7 @@ var EndpointInfo = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
   ] });
 }, "EndpointInfo");
 var RequestParametersForm = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
-  const { state, setParameters } = chunkGX62WYEV_cjs.usePlaygroundContext();
+  const { state, setParameters } = chunkQP6QAK3F_cjs.usePlaygroundContext();
   const [formData, setFormData] = React.useState({});
   const [activeTab, setActiveTab] = React.useState("required");
   React.useEffect(() => {
@@ -716,12 +708,12 @@ var RequestBuilder = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
     setRequestBody,
     setManualApiToken,
     sendRequest
-  } = chunkGX62WYEV_cjs.usePlaygroundContext();
-  const isJsonValid = state.requestBody ? chunkGX62WYEV_cjs.isValidJson(state.requestBody) : true;
+  } = chunkQP6QAK3F_cjs.usePlaygroundContext();
+  const isJsonValid = state.requestBody ? chunkQP6QAK3F_cjs.isValidJson(state.requestBody) : true;
   const generateCurlCommand = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
     if (!state.requestUrl) return "";
-    const apiKey = state.selectedApiKey ? chunkGX62WYEV_cjs.findApiKeyById(apiKeys, state.selectedApiKey) : null;
-    const headers = chunkGX62WYEV_cjs.parseRequestHeaders(state.requestHeaders);
+    const apiKey = state.selectedApiKey ? chunkQP6QAK3F_cjs.findApiKeyById(apiKeys, state.selectedApiKey) : null;
+    const headers = chunkQP6QAK3F_cjs.parseRequestHeaders(state.requestHeaders);
     if (apiKey) {
       headers["X-API-Key"] = apiKey.id || "";
     }
@@ -808,12 +800,12 @@ var RequestBuilder = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkGX62WYEV_cjs.PrettyCode_default, { data: curlCommand, language: "bash" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(components.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkQP6QAK3F_cjs.PrettyCode_default, { data: curlCommand, language: "bash" }) })
     ] })
   ] });
 }, "RequestBuilder");
 var ResponseViewer = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
-  const { state } = chunkGX62WYEV_cjs.usePlaygroundContext();
+  const { state } = chunkQP6QAK3F_cjs.usePlaygroundContext();
   const { response } = state;
   const responseText = React.useMemo(() => {
     if (!response?.data) return "";
@@ -858,7 +850,7 @@ var ResponseViewer = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
               /* @__PURE__ */ jsxRuntime.jsx(
                 components.Badge,
                 {
-                  variant: chunkGX62WYEV_cjs.getStatusColor(response.status || 0) === "success" ? "default" : chunkGX62WYEV_cjs.getStatusColor(response.status || 0) === "error" ? "destructive" : "secondary",
+                  variant: chunkQP6QAK3F_cjs.getStatusColor(response.status || 0) === "success" ? "default" : chunkQP6QAK3F_cjs.getStatusColor(response.status || 0) === "error" ? "destructive" : "secondary",
                   className: "text-xs",
                   children: response.status
                 }
@@ -923,7 +915,7 @@ var ResponseViewer = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
   ] });
 }, "ResponseViewer");
 var PlaygroundLayout = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
-  const { state, setSidebarOpen } = chunkGX62WYEV_cjs.usePlaygroundContext();
+  const { state, setSidebarOpen } = chunkQP6QAK3F_cjs.usePlaygroundContext();
   const { isMobile } = useMobile();
   const renderStepContent = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
     switch (state.currentStep) {
@@ -937,26 +929,10 @@ var PlaygroundLayout = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
         return /* @__PURE__ */ jsxRuntime.jsx(EndpointsLibrary, {});
     }
   }, "renderStepContent");
-  const getStepTitle = /* @__PURE__ */ chunkWGEGR3DF_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" }) }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-6 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__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: "ghost", 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" }),
@@ -972,27 +948,17 @@ var PlaygroundLayout = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
           ] }),
           /* @__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() })
-    ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground capitalize", children: state.currentStep }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8" }),
+      " "
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(PlaygroundStepper, {}) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-6 py-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"
       }
     ) })
@@ -1000,5 +966,5 @@ var PlaygroundLayout = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
 }, "PlaygroundLayout");
 
 exports.PlaygroundLayout = PlaygroundLayout;
-//# sourceMappingURL=PlaygroundLayout-LICYATAF.cjs.map
-//# sourceMappingURL=PlaygroundLayout-LICYATAF.cjs.map
+//# sourceMappingURL=PlaygroundLayout-XYMJBNT4.cjs.map
+//# sourceMappingURL=PlaygroundLayout-XYMJBNT4.cjs.map