@djangocfg/ui-tools 2.1.268 → 2.1.270

package/dist/PlaygroundLayout-FRKIMYVN.mjs

@@ -0,0 +1,684 @@
+import { usePlaygroundContext, deduplicateEndpoints, isValidJson, findApiKeyById, parseRequestHeaders, PrettyCode_default } from './chunk-FX3GCEUL.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, Key, Terminal, Loader2 } from 'lucide-react';
+import { Skeleton, Combobox, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DownloadButton, Textarea, CopyButton, Button } 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 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-3 px-6 text-center", 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 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 (state.searchTerm) {
+      const q = state.searchTerm.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, state.searchTerm, 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, setRequestBody, setRequestHeaders, setManualApiToken, sendRequest } = usePlaygroundContext();
+  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.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", children: epPath })
+      ] }),
+      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-baseline gap-2", children: [
+          /* @__PURE__ */ jsx(SectionLabel, { children: "Body" }),
+          bodyType && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/40 font-mono", children: bodyType })
+        ] }),
+        /* @__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: "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 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' });
+  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 })
+      ] }),
+      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-FRKIMYVN.mjs.map
+//# sourceMappingURL=PlaygroundLayout-FRKIMYVN.mjs.map