@djangocfg/ui-tools 2.1.284 → 2.1.286

package/dist/PlaygroundLayout-NONWOVQR.mjs

@@ -1,791 +0,0 @@
-import { usePlaygroundContext, deduplicateEndpoints, isValidJson, findApiKeyById, parseRequestHeaders, PrettyCode_default } from './chunk-BKWDHJKF.mjs';
-import { JsonTree_default } from './chunk-LFWQ36LJ.mjs';
-import './chunk-SSUOENAZ.mjs';
-import { __name } from './chunk-CGILA3WO.mjs';
-import React4, { useState, useMemo, useEffect, useCallback } from 'react';
-import { cn } from '@djangocfg/ui-core/lib';
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
-import { ChevronRight, Search, Filter, Send, Loader2, Sparkles, Key, Terminal, WifiOff } from 'lucide-react';
-import { Skeleton, Combobox, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DownloadButton, Button, Textarea, CopyButton } from '@djangocfg/ui-core/components';
-import consola from 'consola';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-var useMobile = /* @__PURE__ */ __name(() => {
-  const isMobile = useIsMobile();
-  return {
-    isMobile,
-    isDesktop: !isMobile
-  };
-}, "useMobile");
-var HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
-var extractEndpoints = /* @__PURE__ */ __name((schema) => {
-  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)) {
-    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",
-          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}`
-          });
-        }
-      }
-      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);
-    }
-  }
-  return endpoints;
-}, "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 METHOD_STYLES = {
-  GET: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25",
-  POST: "bg-blue-500/10    text-blue-600    dark:text-blue-400    border-blue-500/25",
-  PUT: "bg-amber-500/10   text-amber-600   dark:text-amber-400   border-amber-500/25",
-  PATCH: "bg-orange-500/10  text-orange-600  dark:text-orange-400  border-orange-500/25",
-  DELETE: "bg-red-500/10     text-red-600     dark:text-red-400     border-red-500/25"
-};
-var METHOD_FALLBACK = "bg-muted text-muted-foreground border-border";
-function getMethodStyle(method) {
-  return METHOD_STYLES[method.toUpperCase()] ?? METHOD_FALLBACK;
-}
-__name(getMethodStyle, "getMethodStyle");
-function getStatusStyle(status) {
-  if (status >= 500) return "bg-red-500/10 text-red-500 dark:text-red-400 border-red-500/25";
-  if (status >= 400) return "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/25";
-  if (status >= 300) return "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25";
-  return "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25";
-}
-__name(getStatusStyle, "getStatusStyle");
-function relativePath(full) {
-  try {
-    return new URL(full).pathname;
-  } catch {
-    return full;
-  }
-}
-__name(relativePath, "relativePath");
-function MethodBadge({ method }) {
-  return /* @__PURE__ */ jsx("span", { className: cn(
-    "inline-flex shrink-0 items-center rounded border px-1.5 py-px",
-    "font-mono text-[10px] font-bold uppercase tracking-wider leading-none",
-    getMethodStyle(method)
-  ), children: method });
-}
-__name(MethodBadge, "MethodBadge");
-function StatusBadge({ status }) {
-  return /* @__PURE__ */ jsx("span", { className: cn(
-    "inline-flex items-center rounded border px-1.5 py-px",
-    "font-mono text-[11px] font-bold leading-none",
-    getStatusStyle(status)
-  ), children: status });
-}
-__name(StatusBadge, "StatusBadge");
-function SectionLabel({ children }) {
-  return /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 select-none", children });
-}
-__name(SectionLabel, "SectionLabel");
-function Panel({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col min-h-0 overflow-hidden", className), children });
-}
-__name(Panel, "Panel");
-function ScrollArea({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-y-auto min-h-0", className), children });
-}
-__name(ScrollArea, "ScrollArea");
-function PanelHeader({ title }) {
-  return /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b px-4 h-10 flex items-center", children: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/50", children: title }) });
-}
-__name(PanelHeader, "PanelHeader");
-function EmptyState({
-  icon: Icon,
-  text,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex flex-col items-center justify-center h-full gap-3 px-6 text-center",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { className: "h-7 w-7 text-muted-foreground/25" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: text })
-      ]
-    }
-  );
-}
-__name(EmptyState, "EmptyState");
-function CollapsibleSection({
-  label,
-  action,
-  children,
-  defaultOpen = false
-}) {
-  const [open, setOpen] = React4.useState(defaultOpen);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setOpen((v) => !v),
-          className: "flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 hover:text-muted-foreground transition-colors py-1",
-          children: [
-            /* @__PURE__ */ jsx(ChevronRight, { className: cn("h-3 w-3 transition-transform", open && "rotate-90") }),
-            label
-          ]
-        }
-      ),
-      action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
-    ] }),
-    open && /* @__PURE__ */ jsx("div", { children })
-  ] });
-}
-__name(CollapsibleSection, "CollapsibleSection");
-function EndpointRow({
-  method,
-  path,
-  description,
-  isActive,
-  onClick
-}) {
-  const displayPath = relativePath(path);
-  const rowCls = cn(
-    "group w-full text-left flex items-start gap-2.5 px-3 py-2.5 transition-colors hover:bg-muted/40",
-    isActive && "bg-primary/[0.06] hover:bg-primary/[0.09]"
-  );
-  const arrowCls = cn(
-    "h-3.5 w-3.5 shrink-0 mt-px transition-opacity",
-    isActive ? "text-primary opacity-100" : "opacity-0 group-hover:opacity-30"
-  );
-  return /* @__PURE__ */ jsxs("button", { className: rowCls, onClick, children: [
-    /* @__PURE__ */ jsx(MethodBadge, { method }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsx("p", { className: "font-mono text-[11px] text-foreground/75 truncate leading-tight", children: displayPath }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground/60 truncate leading-tight mt-0.5", children: description })
-    ] }),
-    /* @__PURE__ */ jsx(ChevronRight, { className: arrowCls })
-  ] });
-}
-__name(EndpointRow, "EndpointRow");
-function EndpointList() {
-  const { state, config, setSelectedEndpoint, setSelectedCategory, setSearchTerm } = usePlaygroundContext();
-  const { endpoints, categories, loading, error, schemas, currentSchema, setCurrentSchema } = useOpenApiSchema({ schemas: config.schemas, defaultSchemaId: config.defaultSchemaId });
-  const [debouncedSearch, setDebouncedSearch] = useState(state.searchTerm);
-  useEffect(() => {
-    const id = setTimeout(() => setDebouncedSearch(state.searchTerm), 150);
-    return () => clearTimeout(id);
-  }, [state.searchTerm]);
-  const schemaOptions = useMemo(
-    () => schemas.map((s) => ({ value: s.id, label: s.name })),
-    [schemas]
-  );
-  const filtered = useMemo(() => {
-    let list = deduplicateEndpoints(endpoints, state.selectedVersion);
-    if (state.selectedCategory !== "All") {
-      list = list.filter((e) => e.category === state.selectedCategory);
-    }
-    if (debouncedSearch) {
-      const q = debouncedSearch.toLowerCase();
-      list = list.filter(
-        (e) => e.name.toLowerCase().includes(q) || e.description.toLowerCase().includes(q) || e.path.toLowerCase().includes(q)
-      );
-    }
-    return list;
-  }, [endpoints, state.selectedCategory, debouncedSearch, state.selectedVersion]);
-  const isFiltered = state.selectedCategory !== "All";
-  const hasCategories = categories.length > 0;
-  const hasMultipleSchemas = schemas.length > 1;
-  const endpointLabel = `${filtered.length} endpoint${filtered.length !== 1 ? "s" : ""}`;
-  const downloadFilename = currentSchema ? `${currentSchema.id}-openapi.json` : "openapi.json";
-  if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "p-3 space-y-1.5", children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full rounded" }, i)) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-destructive", children: [
-      "Failed to load schema: ",
-      error
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b px-2.5 py-2 space-y-2", children: [
-      hasMultipleSchemas && /* @__PURE__ */ jsx(
-        Combobox,
-        {
-          options: schemaOptions,
-          value: currentSchema?.id ?? "",
-          onValueChange: (id) => id && setCurrentSchema(id),
-          placeholder: "Select API",
-          searchPlaceholder: "Search APIs\u2026",
-          emptyText: "No APIs found",
-          className: "w-full h-8 text-xs"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/50 pointer-events-none" }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              placeholder: "Search endpoints\u2026",
-              value: state.searchTerm,
-              onChange: (e) => setSearchTerm(e.target.value),
-              className: "pl-8 h-8 text-xs"
-            }
-          )
-        ] }),
-        hasCategories && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: cn(
-            "relative shrink-0 flex items-center justify-center h-8 w-8 rounded-md border transition-colors",
-            isFiltered ? "border-primary bg-primary/10 text-primary" : "border-input bg-background text-muted-foreground hover:text-foreground hover:bg-muted/50"
-          ), children: [
-            /* @__PURE__ */ jsx(Filter, { className: "h-3.5 w-3.5" }),
-            isFiltered && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 h-2 w-2 rounded-full bg-primary" })
-          ] }) }),
-          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-[160px] max-h-72 overflow-y-auto", children: ["All", ...categories].map((c) => /* @__PURE__ */ jsx(
-            DropdownMenuItem,
-            {
-              onClick: () => setSelectedCategory(c),
-              className: cn("text-xs", state.selectedCategory === c && "bg-accent font-medium"),
-              children: c
-            },
-            c
-          )) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center justify-between px-3 py-1 border-b bg-muted/20", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/50 tabular-nums", children: endpointLabel }),
-      currentSchema && /* @__PURE__ */ jsx(
-        DownloadButton,
-        {
-          url: currentSchema.url,
-          filename: downloadFilename,
-          variant: "ghost",
-          size: "sm",
-          className: "h-6 px-2 text-[10px] text-muted-foreground/50 hover:text-foreground",
-          children: "JSON"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(ScrollArea, { children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-xs text-muted-foreground", children: "No endpoints found" }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/40", children: filtered.map((ep) => /* @__PURE__ */ jsx(
-      EndpointRow,
-      {
-        method: ep.method,
-        path: ep.path,
-        description: ep.description,
-        isActive: state.selectedEndpoint?.path === ep.path && state.selectedEndpoint?.method === ep.method,
-        onClick: () => setSelectedEndpoint(ep)
-      },
-      `${ep.method}-${ep.path}`
-    )) }) })
-  ] });
-}
-__name(EndpointList, "EndpointList");
-function ParamFields({ label, params }) {
-  const { state, setParameters } = usePlaygroundContext();
-  function handleChange(name, value) {
-    setParameters({ ...state.parameters, [name]: value });
-  }
-  __name(handleChange, "handleChange");
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx(SectionLabel, { children: label }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: params.map((p) => {
-      const value = state.parameters[p.name] ?? "";
-      const placeholder = p.description || p.name;
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] text-foreground/80", children: p.name }),
-          p.required && /* @__PURE__ */ jsx("span", { className: "text-[9px] text-destructive font-bold leading-none", children: "*" }),
-          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground/50", children: p.type })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            value,
-            onChange: (e) => handleChange(p.name, e.target.value),
-            placeholder,
-            className: "h-8 text-xs font-mono"
-          }
-        )
-      ] }, p.name);
-    }) })
-  ] });
-}
-__name(ParamFields, "ParamFields");
-function RequestPanel() {
-  const {
-    state,
-    apiKeys,
-    apiKeysLoading,
-    setRequestBody,
-    setRequestHeaders,
-    setSelectedApiKey,
-    setManualApiToken,
-    sendRequest
-  } = usePlaygroundContext();
-  const apiKeyOptions = useMemo(
-    () => apiKeys.map((k) => ({
-      value: k.id,
-      label: k.name || "Unnamed key",
-      // Surface the first 8 chars of the secret so the user
-      // can tell two similarly-named keys apart at a glance.
-      description: k.secret ? `${k.secret.slice(0, 8)}\u2026` : void 0
-    })),
-    [apiKeys]
-  );
-  const hasApiKeys = apiKeyOptions.length > 0;
-  const ep = state.selectedEndpoint;
-  const isJsonValid = state.requestBody ? isValidJson(state.requestBody) : true;
-  const curlCommand = useMemo(() => {
-    if (!state.requestUrl) return "";
-    const apiKey = state.selectedApiKey ? findApiKeyById(apiKeys, state.selectedApiKey) : null;
-    const hdrs = parseRequestHeaders(state.requestHeaders);
-    if (apiKey) hdrs["X-API-Key"] = apiKey.secret || apiKey.id;
-    let cmd = `curl -X ${state.requestMethod} "${state.requestUrl}"`;
-    Object.entries(hdrs).forEach(([k, v]) => {
-      cmd += ` \\
-  -H "${k}: ${v}"`;
-    });
-    if (state.requestBody && state.requestMethod !== "GET" && isJsonValid) {
-      cmd += ` \\
-  -d '${state.requestBody}'`;
-    }
-    return cmd;
-  }, [state, apiKeys, isJsonValid]);
-  const pathParams = useMemo(
-    () => ep?.parameters?.filter((p) => ep.path.includes(`{${p.name}}`)) ?? [],
-    [ep]
-  );
-  const queryParams = useMemo(
-    () => ep?.parameters?.filter((p) => !ep.path.includes(`{${p.name}}`)) ?? [],
-    [ep]
-  );
-  const isSendDisabled = state.loading || !state.requestUrl || !isJsonValid;
-  const displayUrl = state.requestUrl || ep?.path || "";
-  const hasBody = ep?.method !== "GET";
-  const bodyType = ep?.requestBody?.type ?? "";
-  const hasPathParams = pathParams.length > 0;
-  const hasQueryParams = queryParams.length > 0;
-  const hasCurl = Boolean(curlCommand);
-  const epPath = ep ? relativePath(ep.path) : "";
-  const urlChanged = displayUrl !== epPath;
-  if (!ep) {
-    return /* @__PURE__ */ jsx(EmptyState, { icon: Send, text: "Select an endpoint to build a request" });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b px-4 py-3 bg-muted/20 space-y-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(MethodBadge, { method: ep.method }),
-        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-foreground/70 truncate min-w-0 flex-1", children: epPath }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: sendRequest,
-            disabled: isSendDisabled,
-            size: "sm",
-            className: "shrink-0 gap-1.5 h-7 text-xs px-3",
-            children: state.loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
-              " Sending\u2026"
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Send, { className: "h-3 w-3" }),
-              " Send"
-            ] })
-          }
-        )
-      ] }),
-      urlChanged && /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] text-muted-foreground/50 break-all leading-snug pl-0.5", children: displayUrl })
-    ] }),
-    /* @__PURE__ */ jsxs(ScrollArea, { className: "px-4 py-3 space-y-3", children: [
-      hasPathParams && /* @__PURE__ */ jsx(ParamFields, { label: "Path Parameters", params: pathParams }),
-      hasQueryParams && /* @__PURE__ */ jsx(ParamFields, { label: "Query Parameters", params: queryParams }),
-      hasBody && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
-            /* @__PURE__ */ jsx(SectionLabel, { children: "Body" }),
-            bodyType && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/40 font-mono", children: bodyType })
-          ] }),
-          isJsonValid && state.requestBody && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                try {
-                  setRequestBody(JSON.stringify(JSON.parse(state.requestBody), null, 2));
-                } catch {
-                }
-              },
-              className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground transition-colors",
-              children: [
-                /* @__PURE__ */ jsx(Sparkles, { className: "h-2.5 w-2.5" }),
-                "Format"
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          Textarea,
-          {
-            placeholder: '{\n  "key": "value"\n}',
-            value: state.requestBody,
-            onChange: (e) => setRequestBody(e.target.value),
-            className: cn(
-              "font-mono text-[11px] min-h-[90px] resize-y",
-              !isJsonValid && "border-destructive focus-visible:ring-destructive/30"
-            ),
-            rows: 4
-          }
-        ),
-        !isJsonValid && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-destructive", children: "Invalid JSON" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        CollapsibleSection,
-        {
-          label: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(Key, { className: "h-2.5 w-2.5" }),
-            "Auth & Headers"
-          ] }),
-          children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 pt-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ jsx(SectionLabel, { children: "API Key" }),
-              /* @__PURE__ */ jsx(
-                Combobox,
-                {
-                  options: apiKeyOptions,
-                  value: state.selectedApiKey ?? "",
-                  onValueChange: (v) => setSelectedApiKey(v || null),
-                  placeholder: apiKeysLoading ? "Loading keys\u2026" : hasApiKeys ? "Select an API key" : "No API keys yet",
-                  searchPlaceholder: "Search keys\u2026",
-                  emptyText: "No matching key",
-                  disabled: apiKeysLoading || !hasApiKeys,
-                  className: "h-8"
-                }
-              ),
-              /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
-                "Picks are sent via the",
-                " ",
-                /* @__PURE__ */ jsx("span", { className: "font-mono", children: "X-API-Key" }),
-                " header."
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ jsx(SectionLabel, { children: "Bearer Token" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  type: "password",
-                  placeholder: "Leave empty to use JWT from localStorage",
-                  value: state.manualApiToken,
-                  onChange: (e) => setManualApiToken(e.target.value),
-                  className: "font-mono text-xs h-8"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ jsx(SectionLabel, { children: "Headers" }),
-              /* @__PURE__ */ jsx(
-                Textarea,
-                {
-                  value: state.requestHeaders,
-                  onChange: (e) => setRequestHeaders(e.target.value),
-                  className: "font-mono text-[11px] min-h-[60px] resize-y",
-                  rows: 3
-                }
-              )
-            ] })
-          ] })
-        }
-      ),
-      hasCurl && /* @__PURE__ */ jsx(
-        CollapsibleSection,
-        {
-          label: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(Terminal, { className: "h-2.5 w-2.5" }),
-            "cURL"
-          ] }),
-          action: /* @__PURE__ */ jsx(CopyButton, { value: curlCommand, variant: "ghost", size: "sm", className: "h-5 px-2 text-[10px] text-muted-foreground", children: "Copy" }),
-          children: /* @__PURE__ */ jsx("div", { className: "rounded-md overflow-hidden mt-2", children: /* @__PURE__ */ jsx(PrettyCode_default, { data: curlCommand, language: "bash", isCompact: true }) })
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "h-1" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t px-4 py-3 bg-background/95 backdrop-blur-sm", children: /* @__PURE__ */ jsx(Button, { onClick: sendRequest, disabled: isSendDisabled, size: "sm", className: "w-full gap-2 h-9", children: state.loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
-      " Sending\u2026"
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Send, { className: "h-3.5 w-3.5" }),
-      " Send Request"
-    ] }) }) })
-  ] });
-}
-__name(RequestPanel, "RequestPanel");
-var JSON_TREE_CONFIG = {
-  maxAutoExpandDepth: 2,
-  maxAutoExpandArrayItems: 10,
-  maxAutoExpandObjectKeys: 5,
-  maxStringLength: 200,
-  collectionLimit: 50,
-  showCollectionInfo: true,
-  showExpandControls: true,
-  showActionButtons: false,
-  preserveKeyOrder: true,
-  className: "border-0 rounded-none"
-};
-function ResponsePanel() {
-  const { state } = usePlaygroundContext();
-  const { response, loading, selectedEndpoint } = state;
-  const { treeData, rawText } = useMemo(() => {
-    const d = response?.data;
-    if (d == null) return { treeData: null, rawText: "" };
-    if (typeof d === "string") {
-      try {
-        return { treeData: JSON.parse(d), rawText: d };
-      } catch {
-        return { treeData: null, rawText: d };
-      }
-    }
-    return { treeData: d, rawText: JSON.stringify(d, null, 2) };
-  }, [response?.data]);
-  const sizeKb = rawText ? `${(rawText.length / 1024).toFixed(1)} KB` : "";
-  const duration = response?.duration != null ? `${response.duration}ms` : "";
-  const hasError = Boolean(response?.error);
-  const hasStatus = response?.status != null;
-  const hasCopy = Boolean(rawText);
-  if (loading) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-full gap-2", children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
-      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Sending\u2026" })
-    ] });
-  }
-  if (!selectedEndpoint) return /* @__PURE__ */ jsx(EmptyState, { icon: Terminal, text: "Response will appear here" });
-  if (!response) return /* @__PURE__ */ jsx(EmptyState, { icon: Send, text: 'Press "Send Request" to see the response' });
-  if (hasError && !hasStatus) {
-    return /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        icon: WifiOff,
-        text: response.error,
-        className: "text-destructive [&_svg]:text-destructive"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b px-4 py-2 flex items-center justify-between gap-3 bg-muted/20", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-        hasStatus && /* @__PURE__ */ jsx(StatusBadge, { status: response.status }),
-        response.statusText && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground truncate", children: response.statusText }),
-        sizeKb && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/50 tabular-nums shrink-0", children: sizeKb }),
-        duration && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/50 tabular-nums shrink-0", children: duration })
-      ] }),
-      hasCopy && /* @__PURE__ */ jsx(CopyButton, { value: rawText, variant: "ghost", size: "sm", className: "h-6 px-2 text-[10px] text-muted-foreground shrink-0", children: "Copy" })
-    ] }),
-    hasError && /* @__PURE__ */ jsx("div", { className: "shrink-0 mx-4 mt-3 rounded border border-destructive/20 bg-destructive/5 px-3 py-2", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: response.error }) }),
-    /* @__PURE__ */ jsx(ScrollArea, { children: treeData != null ? /* @__PURE__ */ jsx(JsonTree_default, { title: "Response Body", data: treeData, config: JSON_TREE_CONFIG }) : rawText ? /* @__PURE__ */ jsx("pre", { className: "p-4 text-[11px] font-mono text-foreground/70 whitespace-pre-wrap break-all leading-relaxed", children: rawText }) : /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-xs text-muted-foreground", children: "Empty response body" }) })
-  ] });
-}
-__name(ResponsePanel, "ResponsePanel");
-var MOBILE_TABS = [
-  { id: "endpoints", label: "Endpoints" },
-  { id: "request", label: "Request" },
-  { id: "response", label: "Response" }
-];
-function MobileView() {
-  const { state } = usePlaygroundContext();
-  const [tab, setTab] = React4.useState("endpoints");
-  React4.useEffect(() => {
-    if (state.selectedEndpoint) setTab("request");
-  }, [state.selectedEndpoint?.path, state.selectedEndpoint?.method]);
-  React4.useEffect(() => {
-    if (state.response && !state.loading) setTab("response");
-  }, [state.response, state.loading]);
-  const hasResponse = Boolean(state.response) && !state.loading;
-  return /* @__PURE__ */ jsxs(Panel, { className: "h-full", children: [
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 flex border-b", children: MOBILE_TABS.map((t) => {
-      const isActive = tab === t.id;
-      const showDot = t.id === "response" && hasResponse;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => setTab(t.id),
-          className: cn(
-            "flex-1 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px relative",
-            isActive ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
-          ),
-          children: [
-            t.label,
-            showDot && /* @__PURE__ */ jsx("span", { className: "absolute top-2 right-[calc(50%-16px)] h-1.5 w-1.5 rounded-full bg-primary" })
-          ]
-        },
-        t.id
-      );
-    }) }),
-    /* @__PURE__ */ jsxs(Panel, { className: "flex-1", children: [
-      tab === "endpoints" && /* @__PURE__ */ jsx(EndpointList, {}),
-      tab === "request" && /* @__PURE__ */ jsx(RequestPanel, {}),
-      tab === "response" && /* @__PURE__ */ jsx(ResponsePanel, {})
-    ] })
-  ] });
-}
-__name(MobileView, "MobileView");
-function DesktopView() {
-  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[260px_1fr_1fr] divide-x h-full min-h-0 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs(Panel, { children: [
-      /* @__PURE__ */ jsx(PanelHeader, { title: "Endpoints" }),
-      /* @__PURE__ */ jsx(EndpointList, {})
-    ] }),
-    /* @__PURE__ */ jsxs(Panel, { children: [
-      /* @__PURE__ */ jsx(PanelHeader, { title: "Request" }),
-      /* @__PURE__ */ jsx(RequestPanel, {})
-    ] }),
-    /* @__PURE__ */ jsxs(Panel, { children: [
-      /* @__PURE__ */ jsx(PanelHeader, { title: "Response" }),
-      /* @__PURE__ */ jsx(ResponsePanel, {})
-    ] })
-  ] });
-}
-__name(DesktopView, "DesktopView");
-var PlaygroundLayout = /* @__PURE__ */ __name(() => {
-  const { isMobile } = useMobile();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "flex flex-col overflow-hidden",
-      style: { height: "calc(100dvh - var(--navbar-height, 64px))" },
-      children: isMobile ? /* @__PURE__ */ jsx(MobileView, {}) : /* @__PURE__ */ jsx(DesktopView, {})
-    }
-  );
-}, "PlaygroundLayout");
-
-export { PlaygroundLayout };
-//# sourceMappingURL=PlaygroundLayout-NONWOVQR.mjs.map
-//# sourceMappingURL=PlaygroundLayout-NONWOVQR.mjs.map