@djangocfg/ui-tools 2.1.289 → 2.1.291

package/dist/{DocsLayout-TKJQ5W5E.mjs → DocsLayout-JPXFUKAR.mjs}

@@ -1,58 +1,20 @@
-import { deduplicateEndpoints, dereferenceSchema, resolveBaseUrl, usePlaygroundContext, toMarkdown, toCompactJson, toRawJson, formatBytes, MarkdownMessage, endpointToMarkdown, relativePath, isValidJson, resolveAbsolute, findApiKeyById, parseRequestHeaders, PrettyCode_default, UrlBuilder, joinUrl } from './chunk-VZGQC3NG.mjs';
+import { deduplicateEndpoints, dereferenceSchema, resolveBaseUrl, usePlaygroundContext, toMarkdown, toCompactJson, toRawJson, formatBytes, MarkdownMessage, CODE_SAMPLE_TARGETS, buildHarRequest, resolveAbsolute, renderSnippet, PrettyCode_default, relativePath, endpointToMarkdown, isValidJson, findApiKeyById, parseRequestHeaders, UrlBuilder, sampleSchemaJson, joinUrl } from './chunk-EFWOJPA6.mjs';
 import { JsonTree_default } from './chunk-LFWQ36LJ.mjs';
 import './chunk-SSUOENAZ.mjs';
 import { __name } from './chunk-CGILA3WO.mjs';
-import React6, { useRef, useCallback, useEffect, useMemo, useState } from 'react';
+import React12, { createContext, useRef, useCallback, useEffect, useMemo, useState, useContext } from 'react';
 import { groupBy, orderBy, partition, sortBy, keyBy } from 'lodash-es';
-import { Tooltip, TooltipTrigger, TooltipContent, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, Combobox, Input, CopyButton, Switch, Textarea, SidePanel, ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, Skeleton, TooltipProvider } from '@djangocfg/ui-core/components';
+import { Tooltip, TooltipTrigger, TooltipContent, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, Input, Combobox, SafeTooltipProvider, CopyButton, Switch, Textarea, SidePanel, ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, Skeleton, TooltipProvider } from '@djangocfg/ui-core/components';
 import { toast, useMediaQuery } from '@djangocfg/ui-core/hooks';
 import consola from 'consola';
-import { ChevronRight, Sparkles, ChevronDown, Check, Search, Link2, Play, Minus, Plus, RotateCcw, Send, Key, Terminal, Loader2, WifiOff, AlertCircle } from 'lucide-react';
+import { ChevronRight, Sparkles, ChevronDown, Check, Search, X, Link2, FileCode2, ChevronsDownUp, ChevronsUpDown, Play, Minus, Plus, RotateCcw, Send, Key, Terminal, Info, ShieldCheck, Loader2, WifiOff, AlertCircle } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
 
-function exampleFromSchema(schema, depth = 0) {
-  if (!schema || depth > 8) return null;
-  if (schema.example !== void 0) return schema.example;
-  if (schema.default !== void 0) return schema.default;
-  if (Array.isArray(schema.enum) && schema.enum.length > 0) return schema.enum[0];
-  switch (schema.type) {
-    case "object": {
-      const out = {};
-      const props = schema.properties ?? {};
-      for (const [k, v] of Object.entries(props)) {
-        out[k] = exampleFromSchema(v, depth + 1);
-      }
-      return out;
-    }
-    case "array":
-      return [exampleFromSchema(schema.items, depth + 1)];
-    case "integer":
-    case "number":
-      return 0;
-    case "boolean":
-      return false;
-    case "string":
-      if (schema.format === "date-time") return (/* @__PURE__ */ new Date()).toISOString();
-      if (schema.format === "date") return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
-      if (schema.format === "email") return "user@example.com";
-      if (schema.format === "uri" || schema.format === "url") return "https://example.com";
-      if (schema.format === "uuid") return "00000000-0000-0000-0000-000000000000";
-      return "";
-    default:
-      if (schema.properties) {
-        const out = {};
-        for (const [k, v] of Object.entries(schema.properties)) {
-          out[k] = exampleFromSchema(v, depth + 1);
-        }
-        return out;
-      }
-      return null;
-  }
-}
-__name(exampleFromSchema, "exampleFromSchema");
 var HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
-var extractEndpoints = /* @__PURE__ */ __name((schema, baseUrl, schemaId) => {
+var extractEndpoints = /* @__PURE__ */ __name((schema, baseUrl, schemaId, specRoot) => {
   const endpoints = [];
   if (!schema.paths) return [];
   for (const [path, methods] of Object.entries(schema.paths)) {
@@ -76,9 +38,17 @@ var extractEndpoints = /* @__PURE__ */ __name((schema, baseUrl, schemaId) => {
       const responses = [];
       if (op.responses) {
         for (const [code, response] of Object.entries(op.responses)) {
+          const respContent = response.content;
+          const contentKeys = respContent ? Object.keys(respContent) : [];
+          const chosenContentType = respContent?.["application/json"] ? "application/json" : contentKeys[0];
+          const chosen = chosenContentType ? respContent?.[chosenContentType] : void 0;
+          const respSchema = chosen?.schema;
           responses.push({
             code,
-            description: response.description || `Response ${code}`
+            description: response.description || `Response ${code}`,
+            contentType: chosenContentType,
+            schema: respSchema,
+            example: respSchema ? sampleSchemaJson(respSchema, { skipWriteOnly: true }, specRoot) : void 0
           });
         }
       }
@@ -91,7 +61,7 @@ var extractEndpoints = /* @__PURE__ */ __name((schema, baseUrl, schemaId) => {
           type: rawSchema?.type || "object",
           description: op.requestBody.description,
           schema: rawSchema,
-          example: rawSchema ? JSON.stringify(exampleFromSchema(rawSchema), null, 2) : void 0
+          example: rawSchema ? sampleSchemaJson(rawSchema, { skipReadOnly: true }, specRoot) : void 0
         };
       }
       const endpoint = {
@@ -163,8 +133,8 @@ function useOpenApiSchema({
     [currentSchema?.baseUrl, configBaseUrl, currentOpenApiSchema]
   );
   const endpoints = useMemo(
-    () => dereferencedSchema ? extractEndpoints(dereferencedSchema, resolvedBaseUrl, currentSchemaId) : [],
-    [dereferencedSchema, resolvedBaseUrl, currentSchemaId]
+    () => dereferencedSchema ? extractEndpoints(dereferencedSchema, resolvedBaseUrl, currentSchemaId, currentOpenApiSchema ?? void 0) : [],
+    [dereferencedSchema, resolvedBaseUrl, currentSchemaId, currentOpenApiSchema]
   );
   const categories = useMemo(() => getCategories(endpoints), [endpoints]);
   const schemaInfo = useMemo(() => {
@@ -266,7 +236,7 @@ function useOpenApiSchema({
         description: raw.info.description,
         servers: raw.servers
       } : null;
-      const eps = deref ? extractEndpoints(deref, resolved, src.id) : [];
+      const eps = deref ? extractEndpoints(deref, resolved, src.id, raw ?? void 0) : [];
       const state = loadStates.get(src.id) ?? { loading: !raw, error: null };
       return {
         source: src,
@@ -599,7 +569,7 @@ function CollapsibleSection({
   children,
   defaultOpen = false
 }) {
-  const [open, setOpen] = React6.useState(defaultOpen);
+  const [open, setOpen] = React12.useState(defaultOpen);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs(
@@ -620,75 +590,6 @@ function CollapsibleSection({
   ] });
 }
 __name(CollapsibleSection, "CollapsibleSection");
-
-// src/tools/OpenapiViewer/components/DocsLayout/sidebarLabel.ts
-function longestCommonPrefix(paths) {
-  if (paths.length === 0) return "";
-  if (paths.length === 1) return "";
-  const segments = paths.map((p) => p.split("/"));
-  const minLen = Math.min(...segments.map((s) => s.length));
-  const shared = [];
-  for (let i = 0; i < minLen; i++) {
-    const first = segments[0][i];
-    if (segments.every((s) => s[i] === first)) {
-      shared.push(first);
-    } else {
-      break;
-    }
-  }
-  const joined = shared.join("/");
-  return joined;
-}
-__name(longestCommonPrefix, "longestCommonPrefix");
-function sidebarLabel(ep, groupCommonPrefix) {
-  if (ep.summary) return ep.summary;
-  if (groupCommonPrefix && ep.path.startsWith(groupCommonPrefix)) {
-    const tail = ep.path.slice(groupCommonPrefix.length) || "/";
-    return tail;
-  }
-  return relativePath2(ep.path);
-}
-__name(sidebarLabel, "sidebarLabel");
-function relativePath2(full) {
-  try {
-    return new URL(full).pathname;
-  } catch {
-    return full;
-  }
-}
-__name(relativePath2, "relativePath");
-function sidebarTooltip(ep) {
-  return `${ep.method} ${relativePath2(ep.path)}`;
-}
-__name(sidebarTooltip, "sidebarTooltip");
-
-// src/tools/OpenapiViewer/components/DocsLayout/grouping.ts
-var METHOD_ORDER = {
-  GET: 0,
-  POST: 1,
-  PUT: 2,
-  PATCH: 3,
-  DELETE: 4
-};
-var methodRank = /* @__PURE__ */ __name((ep) => METHOD_ORDER[ep.method] ?? 99, "methodRank");
-function groupEndpoints(list) {
-  const byCategory = groupBy(list, "category");
-  const all = Object.entries(byCategory).map(([category, endpoints]) => ({
-    category,
-    endpoints: orderBy(endpoints, ["path", methodRank], ["asc", "asc"]),
-    commonPrefix: longestCommonPrefix(endpoints.map((e) => e.path))
-  }));
-  const [other, named] = partition(all, (g) => g.category === "Other");
-  return [...sortBy(named, (g) => g.category.toLowerCase()), ...other];
-}
-__name(groupEndpoints, "groupEndpoints");
-function buildSchemaSections(sources, endpointsBySchema) {
-  return sources.map((source) => ({
-    source,
-    groups: groupEndpoints(endpointsBySchema[source.id] ?? [])
-  }));
-}
-__name(buildSchemaSections, "buildSchemaSections");
 var FLAVOUR_LABELS = {
   markdown: {
     title: "Markdown for LLM",
@@ -755,40 +656,150 @@ function SchemaCopyMenu({ schema, endpoints, baseUrl, variant = "button" }) {
       "Copy for AI",
       /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 opacity-60" })
     ] }) }),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-72", children: [
-      /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[10px] uppercase tracking-wider text-muted-foreground/70", children: "Copy schema" }),
-      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-      flavours.map((f) => {
-        const label = FLAVOUR_LABELS[f];
-        const size = sizeCache[f];
-        const isDone = justCopied === f;
-        return /* @__PURE__ */ jsxs(
-          DropdownMenuItem,
-          {
-            onClick: (e) => {
-              e.preventDefault();
-              void handleCopy(f);
-            },
-            className: "flex flex-col items-start gap-0.5 py-2 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium flex-1", children: label.title }),
-                isDone ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] text-emerald-500", children: [
-                  /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }),
-                  " Copied"
-                ] }) : size ? /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground/70 tabular-nums", children: size }) : null
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/70 leading-snug", children: label.hint })
-            ]
-          },
-          f
-        );
-      })
-    ] })
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        side: "right",
+        align: "start",
+        sideOffset: 6,
+        collisionPadding: 8,
+        className: "w-60 max-w-[calc(100vw-16px)]",
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[10px] uppercase tracking-wider text-muted-foreground/70", children: "Copy schema" }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          flavours.map((f) => {
+            const label = FLAVOUR_LABELS[f];
+            const size = sizeCache[f];
+            const isDone = justCopied === f;
+            return /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.preventDefault();
+                  void handleCopy(f);
+                },
+                className: "flex flex-col items-start gap-0.5 py-2 cursor-pointer",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium flex-1", children: label.title }),
+                    isDone ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] text-emerald-500", children: [
+                      /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }),
+                      " Copied"
+                    ] }) : size ? /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground/70 tabular-nums", children: size }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/70 leading-snug line-clamp-1", children: label.hint })
+                ]
+              },
+              f
+            );
+          })
+        ]
+      }
+    )
   ] });
 }
 __name(SchemaCopyMenu, "SchemaCopyMenu");
-var METHOD_FILTERS = ["ALL", "GET", "POST", "PUT", "PATCH", "DELETE"];
+function BrandHeader({ info, endpoints, rawSchema, resolvedBaseUrl }) {
+  const apiTitle = info?.title ?? "API Reference";
+  const copyReady = rawSchema !== null && rawSchema !== void 0 && endpoints.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b px-3 py-2.5 flex items-start gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "text-[13px] font-semibold text-foreground leading-tight truncate",
+          title: apiTitle,
+          children: apiTitle
+        }
+      ),
+      info?.version && /* @__PURE__ */ jsxs("div", { className: "font-mono text-[10px] text-muted-foreground/60 leading-tight mt-0.5", children: [
+        "v",
+        info.version
+      ] })
+    ] }),
+    copyReady && /* @__PURE__ */ jsx(
+      SchemaCopyMenu,
+      {
+        schema: rawSchema ?? null,
+        endpoints,
+        baseUrl: resolvedBaseUrl,
+        variant: "icon"
+      }
+    )
+  ] });
+}
+__name(BrandHeader, "BrandHeader");
+
+// src/tools/OpenapiViewer/components/DocsLayout/sidebarLabel.ts
+function longestCommonPrefix(paths) {
+  if (paths.length === 0) return "";
+  if (paths.length === 1) return "";
+  const segments = paths.map((p) => p.split("/"));
+  const minLen = Math.min(...segments.map((s) => s.length));
+  const shared = [];
+  for (let i = 0; i < minLen; i++) {
+    const first = segments[0][i];
+    if (segments.every((s) => s[i] === first)) {
+      shared.push(first);
+    } else {
+      break;
+    }
+  }
+  const joined = shared.join("/");
+  return joined;
+}
+__name(longestCommonPrefix, "longestCommonPrefix");
+function sidebarLabel(ep, groupCommonPrefix) {
+  if (ep.summary) return ep.summary;
+  if (groupCommonPrefix && ep.path.startsWith(groupCommonPrefix)) {
+    const tail = ep.path.slice(groupCommonPrefix.length) || "/";
+    return tail;
+  }
+  return relativePath2(ep.path);
+}
+__name(sidebarLabel, "sidebarLabel");
+function relativePath2(full) {
+  try {
+    return new URL(full).pathname;
+  } catch {
+    return full;
+  }
+}
+__name(relativePath2, "relativePath");
+function sidebarTooltip(ep) {
+  return `${ep.method} ${relativePath2(ep.path)}`;
+}
+__name(sidebarTooltip, "sidebarTooltip");
+
+// src/tools/OpenapiViewer/components/DocsLayout/grouping.ts
+var METHOD_ORDER = {
+  GET: 0,
+  POST: 1,
+  PUT: 2,
+  PATCH: 3,
+  DELETE: 4
+};
+var methodRank = /* @__PURE__ */ __name((ep) => METHOD_ORDER[ep.method] ?? 99, "methodRank");
+function groupEndpoints(list) {
+  const byCategory = groupBy(list, "category");
+  const all = Object.entries(byCategory).map(([category, endpoints]) => ({
+    category,
+    endpoints: orderBy(endpoints, ["path", methodRank], ["asc", "asc"]),
+    commonPrefix: longestCommonPrefix(endpoints.map((e) => e.path))
+  }));
+  const [other, named] = partition(all, (g) => g.category === "Other");
+  return [...sortBy(named, (g) => g.category.toLowerCase()), ...other];
+}
+__name(groupEndpoints, "groupEndpoints");
+function buildSchemaSections(sources, endpointsBySchema) {
+  return sources.map((source) => ({
+    source,
+    groups: groupEndpoints(endpointsBySchema[source.id] ?? [])
+  }));
+}
+__name(buildSchemaSections, "buildSchemaSections");
+
+// src/tools/OpenapiViewer/components/DocsLayout/Sidebar/buildVM.ts
 function filterEndpoints(list, query, method) {
   let out = list;
   if (method !== "ALL") {
@@ -824,14 +835,19 @@ function buildCategory(group, activeEndpointId, schemaId, keyPrefix) {
   };
 }
 __name(buildCategory, "buildCategory");
-var emptyTextFor = /* @__PURE__ */ __name((query, method, defaultText) => {
+function emptyTextFor(query, method, defaultText) {
   if (query && method !== "ALL") return `No ${method} endpoints match "${query}"`;
   if (query) return `No endpoints match "${query}"`;
   if (method !== "ALL") return `No ${method} endpoints`;
   return defaultText;
-}, "emptyTextFor");
+}
+__name(emptyTextFor, "emptyTextFor");
 function buildFlatVM(endpoints, selectedVersion, query, method, activeEndpointId) {
-  const filtered = filterEndpoints(deduplicateEndpoints(endpoints, selectedVersion), query, method);
+  const filtered = filterEndpoints(
+    deduplicateEndpoints(endpoints, selectedVersion),
+    query,
+    method
+  );
   const groups = groupEndpoints(filtered);
   return {
     kind: "flat",
@@ -844,13 +860,19 @@ function buildSectionsVM(schemas, endpointsBySchema, selectedVersion, query, met
   const filteredMap = {};
   for (const src of schemas) {
     const raw = endpointsBySchema[src.id] ?? [];
-    filteredMap[src.id] = filterEndpoints(deduplicateEndpoints(raw, selectedVersion), query, method);
+    filteredMap[src.id] = filterEndpoints(
+      deduplicateEndpoints(raw, selectedVersion),
+      query,
+      method
+    );
   }
   const rawSections = buildSchemaSections(schemas, filteredMap);
   const sections = rawSections.filter((s) => s.groups.length > 0).map((s) => ({
     sourceId: s.source.id,
     sourceName: s.source.name,
-    categories: s.groups.map((g) => buildCategory(g, activeEndpointId, s.source.id, `${s.source.id}-`))
+    categories: s.groups.map(
+      (g) => buildCategory(g, activeEndpointId, s.source.id, `${s.source.id}-`)
+    )
   }));
   return {
     kind: "sections",
@@ -859,159 +881,11 @@ function buildSectionsVM(schemas, endpointsBySchema, selectedVersion, query, met
   };
 }
 __name(buildSectionsVM, "buildSectionsVM");
-function DocsSidebar({
-  info,
-  endpoints,
-  schemas,
-  currentSchemaId,
-  onSchemaChange,
-  activeEndpointId,
-  selectedVersion,
-  onNavigate,
-  grouping = "selector",
-  endpointsBySchema,
-  rawSchema,
-  resolvedBaseUrl
-}) {
-  const [search, setSearch] = useState("");
-  const [debounced, setDebounced] = useState("");
-  const [methodFilter, setMethodFilter] = useState("ALL");
-  useEffect(() => {
-    const id = setTimeout(() => setDebounced(search), 120);
-    return () => clearTimeout(id);
-  }, [search]);
-  const body = useMemo(() => {
-    if (grouping === "sections") {
-      return buildSectionsVM(
-        schemas,
-        endpointsBySchema ?? {},
-        selectedVersion,
-        debounced,
-        methodFilter,
-        activeEndpointId
-      );
-    }
-    return buildFlatVM(endpoints, selectedVersion, debounced, methodFilter, activeEndpointId);
-  }, [
-    grouping,
-    schemas,
-    endpointsBySchema,
-    endpoints,
-    selectedVersion,
-    debounced,
-    methodFilter,
-    activeEndpointId
-  ]);
-  const schemaOptions = useMemo(
-    () => schemas.map((s) => ({ value: s.id, label: s.name })),
-    [schemas]
-  );
-  const hasMultipleSchemas = schemas.length > 1;
-  const apiTitle = info?.title ?? "API Reference";
-  const showCombobox = grouping === "selector" && hasMultipleSchemas;
-  const copyReady = rawSchema !== null && rawSchema !== void 0 && endpoints.length > 0;
-  return /* @__PURE__ */ jsxs("aside", { className: "flex flex-col h-full min-h-0 border-r bg-muted/10", children: [
-    /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b px-3 h-12 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-foreground truncate", children: apiTitle }),
-        info?.version && /* @__PURE__ */ jsxs("span", { className: "font-mono text-[10px] text-muted-foreground/70 shrink-0", children: [
-          "v",
-          info.version
-        ] })
-      ] }),
-      copyReady && /* @__PURE__ */ jsx(
-        SchemaCopyMenu,
-        {
-          schema: rawSchema ?? null,
-          endpoints,
-          baseUrl: resolvedBaseUrl,
-          variant: "icon"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b px-3 py-3 space-y-2", children: [
-      showCombobox && /* @__PURE__ */ jsx(
-        Combobox,
-        {
-          options: schemaOptions,
-          value: currentSchemaId ?? "",
-          onValueChange: (id) => id && onSchemaChange(id),
-          placeholder: "Select API",
-          searchPlaceholder: "Search APIs\u2026",
-          emptyText: "No APIs found",
-          className: "w-full h-8 text-xs"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "relative", 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: search,
-            onChange: (e) => setSearch(e.target.value),
-            className: "pl-8 h-8 text-xs"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(MethodChips, { value: methodFilter, onChange: setMethodFilter })
-    ] }),
-    /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(SidebarBody, { body, onNavigate }) })
-  ] });
-}
-__name(DocsSidebar, "DocsSidebar");
-function MethodChips({
-  value,
-  onChange
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 flex-wrap", children: METHOD_FILTERS.map((m) => {
-    const active = value === m;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange(m),
-        "aria-pressed": active,
-        className: cn(
-          "px-2 py-0.5 rounded font-mono text-[10px] font-semibold tracking-wide transition-colors border",
-          active ? "bg-primary/15 border-primary/40 text-foreground" : "bg-transparent border-border/40 text-muted-foreground hover:text-foreground hover:border-border"
-        ),
-        children: m
-      },
-      m
-    );
-  }) });
-}
-__name(MethodChips, "MethodChips");
-function SidebarBody({ body, onNavigate }) {
-  if (body.kind === "flat") {
-    if (body.categories.length === 0) {
-      return /* @__PURE__ */ jsx("div", { className: "py-10 px-4 text-center text-xs text-muted-foreground", children: body.emptyText });
-    }
-    return /* @__PURE__ */ jsx("nav", { className: "py-2", children: body.categories.map((cat) => /* @__PURE__ */ jsx(CategoryBlock, { category: cat, onNavigate }, cat.key)) });
-  }
-  if (body.sections.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "py-10 px-4 text-center text-xs text-muted-foreground", children: body.emptyText });
-  }
-  return /* @__PURE__ */ jsx("nav", { className: "py-2", children: body.sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "mb-5 last:mb-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-4 py-2 sticky top-0 z-[1] bg-muted/30 backdrop-blur-[2px] border-b border-border/30", children: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold uppercase tracking-[0.12em] text-foreground/80", children: section.sourceName }) }),
-    section.categories.map((cat) => /* @__PURE__ */ jsx(CategoryBlock, { category: cat, onNavigate }, cat.key))
-  ] }, section.sourceId)) });
-}
-__name(SidebarBody, "SidebarBody");
-var CategoryBlock = React6.memo(/* @__PURE__ */ __name(function CategoryBlock2({
-  category,
-  onNavigate
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "mb-4 last:mb-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/50 select-none", children: category.category }),
-    /* @__PURE__ */ jsx("div", { children: category.rows.map((row) => /* @__PURE__ */ jsx(EndpointRow, { row, onNavigate }, row.key)) })
-  ] });
-}, "CategoryBlock"));
-var EndpointRow = React6.memo(/* @__PURE__ */ __name(function EndpointRow2({
-  row,
-  onNavigate
+var EndpointRow = React12.memo(/* @__PURE__ */ __name(function EndpointRow2({
+  row,
+  onNavigate
 }) {
+  const displayLabel = row.label.replace(/\.$/, "");
   return /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 350, children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
@@ -1019,21 +893,21 @@ var EndpointRow = React6.memo(/* @__PURE__ */ __name(function EndpointRow2({
         onClick: () => onNavigate(row.anchor, row.schemaId),
         "aria-current": row.isActive ? "location" : void 0,
         className: cn(
-          "relative group w-full text-left flex items-start gap-2 pl-4 pr-3 py-1.5 transition-colors",
+          "relative w-full text-left grid grid-cols-[52px_minmax(0,1fr)] items-baseline gap-2 pl-3 pr-3 py-1 transition-colors",
           row.isActive ? "bg-primary/10 text-foreground" : "hover:bg-muted/40 text-foreground/75 hover:text-foreground"
         ),
         children: [
           row.isActive && /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded-r bg-primary" }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 mt-[1px]", children: /* @__PURE__ */ jsx(MethodBadge, { method: row.method }) }),
+          /* @__PURE__ */ jsx("span", { className: "justify-self-start", children: /* @__PURE__ */ jsx(MethodBadge, { method: row.method }) }),
           /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
-                "line-clamp-2 leading-snug flex-1 min-w-0",
+                "line-clamp-2 leading-snug min-w-0",
                 row.useMono ? "font-mono text-[11px] break-all" : "text-[12px]",
                 row.isActive && "text-foreground font-medium"
               ),
-              children: row.label
+              children: displayLabel
             }
           )
         ]
@@ -1042,6 +916,202 @@ var EndpointRow = React6.memo(/* @__PURE__ */ __name(function EndpointRow2({
     /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", className: "font-mono text-[11px]", children: row.tooltip })
   ] });
 }, "EndpointRow"));
+var CategoryBlock = React12.memo(/* @__PURE__ */ __name(function CategoryBlock2({
+  category,
+  onNavigate
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-2.5 last:mb-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-3 pb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/50 select-none", children: category.category }),
+    /* @__PURE__ */ jsx("div", { children: category.rows.map((row) => /* @__PURE__ */ jsx(EndpointRow, { row, onNavigate }, row.key)) })
+  ] });
+}, "CategoryBlock"));
+function SchemaSection({ section, onNavigate }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 last:mb-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 sticky top-0 z-[1] bg-background/95 backdrop-blur-[2px] border-b border-border/40", children: /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold uppercase tracking-[0.12em] text-foreground/80", children: section.sourceName }) }),
+    section.categories.map((cat) => /* @__PURE__ */ jsx(CategoryBlock, { category: cat, onNavigate }, cat.key))
+  ] });
+}
+__name(SchemaSection, "SchemaSection");
+function SidebarBody({ body, onNavigate }) {
+  if (body.kind === "flat") {
+    if (body.categories.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: "py-10 px-4 text-center text-xs text-muted-foreground", children: body.emptyText });
+    }
+    return /* @__PURE__ */ jsx("nav", { className: "py-1.5", children: body.categories.map((cat) => /* @__PURE__ */ jsx(CategoryBlock, { category: cat, onNavigate }, cat.key)) });
+  }
+  if (body.sections.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "py-10 px-4 text-center text-xs text-muted-foreground", children: body.emptyText });
+  }
+  return /* @__PURE__ */ jsx("nav", { className: "py-1.5", children: body.sections.map((section) => /* @__PURE__ */ jsx(SchemaSection, { section, onNavigate }, section.sourceId)) });
+}
+__name(SidebarBody, "SidebarBody");
+
+// src/tools/OpenapiViewer/components/DocsLayout/Sidebar/types.ts
+var METHOD_FILTERS = ["ALL", "GET", "POST", "PUT", "PATCH", "DELETE"];
+function MethodChips({ value, onChange }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 overflow-x-auto -mx-1 px-1 pb-px", children: METHOD_FILTERS.map((m) => {
+    const active = value === m;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(m),
+        "aria-pressed": active,
+        className: cn(
+          "shrink-0 px-2 h-6 rounded font-mono text-[10px] font-semibold tracking-wide uppercase transition-colors",
+          active ? "bg-foreground text-background" : "text-muted-foreground/70 hover:text-foreground hover:bg-muted"
+        ),
+        children: m
+      },
+      m
+    );
+  }) });
+}
+__name(MethodChips, "MethodChips");
+function SearchInput({ value, onChange, placeholder }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", 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: placeholder ?? "Search endpoints\u2026",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: "pl-8 pr-7 h-8 text-xs"
+      }
+    ),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(""),
+        "aria-label": "Clear search",
+        className: cn(
+          "absolute right-1.5 top-1/2 -translate-y-1/2 h-5 w-5 rounded",
+          "inline-flex items-center justify-center",
+          "text-muted-foreground/50 hover:text-foreground hover:bg-muted transition-colors"
+        ),
+        children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+}
+__name(SearchInput, "SearchInput");
+function Toolbar({
+  schemas,
+  currentSchemaId,
+  onSchemaChange,
+  showSchemaSelector,
+  search,
+  onSearchChange,
+  methodFilter,
+  onMethodFilterChange
+}) {
+  const schemaOptions = React12.useMemo(
+    () => schemas.map((s) => ({ value: s.id, label: s.name })),
+    [schemas]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b px-3 py-2.5 space-y-2", children: [
+    showSchemaSelector && /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        options: schemaOptions,
+        value: currentSchemaId ?? "",
+        onValueChange: (id) => id && onSchemaChange(id),
+        placeholder: "Select API",
+        searchPlaceholder: "Search APIs\u2026",
+        emptyText: "No APIs found",
+        className: "w-full h-8 text-xs"
+      }
+    ),
+    /* @__PURE__ */ jsx(SearchInput, { value: search, onChange: onSearchChange }),
+    /* @__PURE__ */ jsx(MethodChips, { value: methodFilter, onChange: onMethodFilterChange })
+  ] });
+}
+__name(Toolbar, "Toolbar");
+function useDebouncedValue(value, delayMs = 120) {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(id);
+  }, [value, delayMs]);
+  return debounced;
+}
+__name(useDebouncedValue, "useDebouncedValue");
+function DocsSidebar({
+  info,
+  endpoints,
+  schemas,
+  currentSchemaId,
+  onSchemaChange,
+  activeEndpointId,
+  selectedVersion,
+  onNavigate,
+  grouping = "selector",
+  endpointsBySchema,
+  rawSchema,
+  resolvedBaseUrl
+}) {
+  const [search, setSearch] = useState("");
+  const [methodFilter, setMethodFilter] = useState("ALL");
+  const debouncedSearch = useDebouncedValue(search);
+  const body = useMemo(() => {
+    if (grouping === "sections") {
+      return buildSectionsVM(
+        schemas,
+        endpointsBySchema ?? {},
+        selectedVersion,
+        debouncedSearch,
+        methodFilter,
+        activeEndpointId
+      );
+    }
+    return buildFlatVM(
+      endpoints,
+      selectedVersion,
+      debouncedSearch,
+      methodFilter,
+      activeEndpointId
+    );
+  }, [
+    grouping,
+    schemas,
+    endpointsBySchema,
+    endpoints,
+    selectedVersion,
+    debouncedSearch,
+    methodFilter,
+    activeEndpointId
+  ]);
+  const hasMultipleSchemas = schemas.length > 1;
+  const showSchemaSelector = grouping === "selector" && hasMultipleSchemas;
+  return /* @__PURE__ */ jsxs("aside", { className: "flex flex-col h-full min-h-0 border-r bg-muted/10", children: [
+    /* @__PURE__ */ jsx(
+      BrandHeader,
+      {
+        info,
+        endpoints,
+        rawSchema,
+        resolvedBaseUrl
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        schemas,
+        currentSchemaId,
+        onSchemaChange,
+        showSchemaSelector,
+        search,
+        onSearchChange: setSearch,
+        methodFilter,
+        onMethodFilterChange: setMethodFilter
+      }
+    ),
+    /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx(SidebarBody, { body, onNavigate }) })
+  ] });
+}
+__name(DocsSidebar, "DocsSidebar");
 
 // src/tools/OpenapiViewer/utils/scrollParent.ts
 function getScrollParent(el) {
@@ -1079,6 +1149,7 @@ function scrollTargetTo(target, top) {
 }
 __name(scrollTargetTo, "scrollTargetTo");
 function ApiIntroSection({ info, schema, endpoints, resolvedBaseUrl }) {
+  const baseUrlRows = resolvedBaseUrl ? [{ url: resolvedBaseUrl, description: info.servers?.[0]?.description }] : (info.servers ?? []).map((s) => ({ url: s.url, description: s.description }));
   return /* @__PURE__ */ jsxs("section", { className: "pb-10 mb-10 border-b", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap min-w-0", children: [
@@ -1098,105 +1169,775 @@ function ApiIntroSection({ info, schema, endpoints, resolvedBaseUrl }) {
       )
     ] }),
     info.description && /* @__PURE__ */ jsx("div", { className: "mt-4 text-muted-foreground", children: /* @__PURE__ */ jsx(MarkdownMessage, { content: info.description }) }),
-    info.servers && info.servers.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-2", children: [
+    baseUrlRows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-2", children: [
       /* @__PURE__ */ jsx("h4", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60", children: "Base URL" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: info.servers.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
-        /* @__PURE__ */ jsx("code", { className: "font-mono text-xs px-2 py-1 rounded bg-muted border", children: s.url }),
-        s.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: s.description })
-      ] }, `${s.url}-${i}`)) })
+      /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: baseUrlRows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-xs px-2 py-1 rounded bg-muted border", children: row.url }),
+        row.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: row.description })
+      ] }, `${row.url}-${i}`)) })
     ] })
   ] });
 }
 __name(ApiIntroSection, "ApiIntroSection");
+var EndpointDocContext = createContext(null);
+function EndpointDocProvider({ endpointId, method, children }) {
+  const value = useMemo(() => ({ endpointId, method }), [endpointId, method]);
+  return /* @__PURE__ */ jsx(EndpointDocContext.Provider, { value, children });
+}
+__name(EndpointDocProvider, "EndpointDocProvider");
+function useEndpointDocContext() {
+  const ctx = useContext(EndpointDocContext);
+  if (!ctx) {
+    throw new Error(
+      "[OpenapiViewer] useEndpointDocContext must be used inside <EndpointDocProvider>."
+    );
+  }
+  return ctx;
+}
+__name(useEndpointDocContext, "useEndpointDocContext");
+var sectionKey = /* @__PURE__ */ __name((endpointId, sectionId) => `${endpointId}:${sectionId}`, "sectionKey");
+var initialState = {
+  openSections: {},
+  activeCodeTab: {}
+};
+var useEndpointDocStore = create()(
+  persist(
+    (set) => ({
+      ...initialState,
+      toggleSection: /* @__PURE__ */ __name((endpointId, sectionId) => set((state) => {
+        const key = sectionKey(endpointId, sectionId);
+        const current = state.openSections[key];
+        return {
+          openSections: {
+            ...state.openSections,
+            // If there's no explicit override yet, the user's
+            // first click means "flip from the default". We
+            // assume the default was ``true`` for the most
+            // common case (bodies/responses) and ``false``
+            // otherwise; the Section component tracks this
+            // via its ``defaultOpen`` prop and never calls
+            // toggle on sections whose defaults match the
+            // next state.
+            [key]: current === void 0 ? false : !current
+          }
+        };
+      }), "toggleSection"),
+      setSectionOpen: /* @__PURE__ */ __name((endpointId, sectionId, open) => set((state) => ({
+        openSections: {
+          ...state.openSections,
+          [sectionKey(endpointId, sectionId)]: open
+        }
+      })), "setSectionOpen"),
+      setCodeTab: /* @__PURE__ */ __name((endpointId, tab) => set((state) => ({
+        activeCodeTab: {
+          ...state.activeCodeTab,
+          [endpointId]: tab
+        }
+      })), "setCodeTab"),
+      expandAll: /* @__PURE__ */ __name((endpointId, sectionIds) => set((state) => {
+        const next = { ...state.openSections };
+        for (const sid of sectionIds) {
+          next[sectionKey(endpointId, sid)] = true;
+        }
+        return { openSections: next };
+      }), "expandAll"),
+      collapseAll: /* @__PURE__ */ __name((endpointId, sectionIds) => set((state) => {
+        const next = { ...state.openSections };
+        for (const sid of sectionIds) {
+          next[sectionKey(endpointId, sid)] = false;
+        }
+        return { openSections: next };
+      }), "collapseAll")
+    }),
+    {
+      name: "openapi-viewer:endpoint-doc",
+      storage: createJSONStorage(() => {
+        if (typeof window === "undefined") {
+          return {
+            getItem: /* @__PURE__ */ __name(() => null, "getItem"),
+            setItem: /* @__PURE__ */ __name(() => {
+            }, "setItem"),
+            removeItem: /* @__PURE__ */ __name(() => {
+            }, "removeItem")
+          };
+        }
+        return window.sessionStorage;
+      }),
+      // Only persist user overrides, not the functions. Zustand
+      // serialises everything by default and logs a warning on
+      // non-serialisable values; partialize keeps the payload lean.
+      partialize: /* @__PURE__ */ __name((state) => ({
+        openSections: state.openSections,
+        activeCodeTab: state.activeCodeTab
+      }), "partialize")
+    }
+  )
+);
+
+// src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/store/selectors.ts
+function useIsSectionOpen(endpointId, sectionId, defaultOpen) {
+  return useEndpointDocStore((s) => {
+    const explicit = s.openSections[sectionKey(endpointId, sectionId)];
+    return explicit === void 0 ? defaultOpen : explicit;
+  });
+}
+__name(useIsSectionOpen, "useIsSectionOpen");
+function useActiveCodeTab(endpointId, fallback = "curl") {
+  return useEndpointDocStore((s) => s.activeCodeTab[endpointId] ?? fallback);
+}
+__name(useActiveCodeTab, "useActiveCodeTab");
+function LanguageTabs({ activeId, onChange }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 overflow-x-auto -mx-1 px-1", children: CODE_SAMPLE_TARGETS.map((t) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(t.id),
+      className: cn(
+        "shrink-0 h-7 px-2.5 rounded text-xs font-medium transition-colors",
+        activeId === t.id ? "bg-muted text-foreground" : "text-muted-foreground/70 hover:text-foreground hover:bg-muted/50"
+      ),
+      children: t.label
+    },
+    t.id
+  )) });
+}
+__name(LanguageTabs, "LanguageTabs");
+function useCodeSnippet({
+  endpoint,
+  body,
+  parameters,
+  headers,
+  baseUrl,
+  activeId
+}) {
+  const effectiveBody = body ?? endpoint.requestBody?.example;
+  const har = useMemo(() => {
+    const h = buildHarRequest({
+      endpoint,
+      body: effectiveBody,
+      parameters,
+      headers,
+      baseUrl
+    });
+    return baseUrl ? h : { ...h, url: resolveAbsolute(h.url) };
+  }, [endpoint, effectiveBody, parameters, headers, baseUrl]);
+  return useMemo(() => {
+    const target = CODE_SAMPLE_TARGETS.find((t) => t.id === activeId);
+    const code = renderSnippet(har, activeId);
+    return {
+      snippet: code ?? `// Snippet for ${target.label} is unavailable for this request.`,
+      prism: target.prism
+    };
+  }, [har, activeId]);
+}
+__name(useCodeSnippet, "useCodeSnippet");
+function CodeSamples({ endpoint, body, parameters, headers, baseUrl }) {
+  const { endpointId } = useEndpointDocContext();
+  const activeId = useActiveCodeTab(endpointId);
+  const setCodeTab = useEndpointDocStore((s) => s.setCodeTab);
+  const { snippet, prism } = useCodeSnippet({
+    endpoint,
+    body,
+    parameters,
+    headers,
+    baseUrl,
+    activeId
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
+    /* @__PURE__ */ jsx(LanguageTabs, { activeId, onChange: (id) => setCodeTab(endpointId, id) }),
+    /* @__PURE__ */ jsx(
+      PrettyCode_default,
+      {
+        data: snippet,
+        language: prism,
+        isCompact: true,
+        maxLines: 20
+      }
+    )
+  ] });
+}
+__name(CodeSamples, "CodeSamples");
+function IconButton({ label, onClick, children, active }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-label": label,
+        className: cn(
+          "shrink-0 h-6 w-6 inline-flex items-center justify-center rounded",
+          "text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors",
+          active && "text-emerald-500 hover:text-emerald-500"
+        ),
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", className: "text-[11px]", children: label })
+  ] });
+}
+__name(IconButton, "IconButton");
+function MetaActions({ anchor, endpointMarkdown, presentSections }) {
+  const { endpointId } = useEndpointDocContext();
+  const expandAll = useEndpointDocStore((s) => s.expandAll);
+  const collapseAll = useEndpointDocStore((s) => s.collapseAll);
+  const openSections = useEndpointDocStore((s) => s.openSections);
+  const [justCopied, setJustCopied] = useState(null);
+  const flash = useCallback((which) => {
+    setJustCopied(which);
+    setTimeout(() => setJustCopied(null), 1200);
+  }, []);
+  const mostlyOpen = useMemo(() => {
+    if (presentSections.length === 0) return false;
+    let openCount = 0;
+    for (const sid of presentSections) {
+      if (openSections[sectionKey(endpointId, sid)]) openCount += 1;
+    }
+    return openCount > presentSections.length / 2;
+  }, [openSections, presentSections, endpointId]);
+  const copyLink = useCallback(() => {
+    if (typeof window === "undefined") return;
+    const url = `${window.location.origin}${window.location.pathname}#${anchor}`;
+    void navigator.clipboard?.writeText(url).then(() => flash("link"));
+  }, [anchor, flash]);
+  const copyMarkdown = useCallback(() => {
+    if (typeof window === "undefined") return;
+    void navigator.clipboard?.writeText(endpointMarkdown).then(() => flash("md"));
+  }, [endpointMarkdown, flash]);
+  const toggleAll = useCallback(() => {
+    if (mostlyOpen) collapseAll(endpointId, presentSections);
+    else expandAll(endpointId, presentSections);
+  }, [mostlyOpen, collapseAll, expandAll, endpointId, presentSections]);
+  return /* @__PURE__ */ jsx(SafeTooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: justCopied === "link" ? "Copied!" : "Copy link to endpoint",
+        onClick: copyLink,
+        active: justCopied === "link",
+        children: justCopied === "link" ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Link2, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: justCopied === "md" ? "Copied!" : "Copy as Markdown (for AI)",
+        onClick: copyMarkdown,
+        active: justCopied === "md",
+        children: justCopied === "md" ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(FileCode2, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    presentSections.length >= 2 && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: mostlyOpen ? "Collapse all sections" : "Expand all sections",
+        onClick: toggleAll,
+        children: mostlyOpen ? /* @__PURE__ */ jsx(ChevronsDownUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5" })
+      }
+    )
+  ] }) });
+}
+__name(MetaActions, "MetaActions");
+function PathDisplay({ path }) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      className: "block font-mono text-lg md:text-xl font-semibold text-foreground leading-tight",
+      style: { overflowWrap: "anywhere", wordBreak: "break-word" },
+      children: relativePath(path)
+    }
+  );
+}
+__name(PathDisplay, "PathDisplay");
+function EndpointHeader({
+  endpoint,
+  anchor,
+  isLoadedInPlayground,
+  onTryIt,
+  presentSections
+}) {
+  const endpointMd = useMemo(() => endpointToMarkdown(endpoint), [endpoint]);
+  return /* @__PURE__ */ jsxs("header", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsx(MethodBadge, { method: endpoint.method }),
+        /* @__PURE__ */ jsx(
+          MetaActions,
+          {
+            anchor,
+            endpointMarkdown: endpointMd,
+            presentSections
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          variant: isLoadedInPlayground ? "secondary" : "default",
+          onClick: onTryIt,
+          className: "ml-auto h-7 text-xs gap-1.5 px-2.5",
+          children: [
+            /* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }),
+            isLoadedInPlayground ? "Loaded" : "Try it"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(PathDisplay, { path: endpoint.path }) }),
+    endpoint.description && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: /* @__PURE__ */ jsx(MarkdownMessage, { content: endpoint.description }) })
+  ] });
+}
+__name(EndpointHeader, "EndpointHeader");
+function ParamRow({ param }) {
+  return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 bg-background space-y-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-xs font-medium text-foreground", children: param.name }),
+      param.required && /* @__PURE__ */ jsx(
+        "span",
+        {
+          title: "Required",
+          className: "text-[9px] text-destructive font-bold leading-none",
+          children: "*"
+        }
+      ),
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-[11px] text-muted-foreground/70", children: param.type })
+    ] }),
+    param.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed break-words", children: param.description })
+  ] });
+}
+__name(ParamRow, "ParamRow");
+function ParamGroup({ label, params }) {
+  if (params.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-muted-foreground/60 px-1", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "divide-y border rounded-md overflow-hidden", children: params.map((p) => /* @__PURE__ */ jsx(ParamRow, { param: p }, `${label}-${p.name}`)) })
+  ] });
+}
+__name(ParamGroup, "ParamGroup");
+function Parameters({ pathParams, queryParams }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(ParamGroup, { label: "Path", params: pathParams }),
+    /* @__PURE__ */ jsx(ParamGroup, { label: "Query", params: queryParams })
+  ] });
+}
+__name(Parameters, "Parameters");
 
-// src/tools/OpenapiViewer/components/DocsLayout/schemaFields.ts
-var MAX_DEPTH = 2;
+// src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/SchemaFields/buildTree.ts
+var MAX_DEPTH = 5;
+function mergeAllOf(branches) {
+  const properties = {};
+  const required = [];
+  for (const b of branches) {
+    if (b.properties) Object.assign(properties, b.properties);
+    if (Array.isArray(b.required)) required.push(...b.required);
+  }
+  return { type: "object", properties, required };
+}
+__name(mergeAllOf, "mergeAllOf");
 function describeType(node) {
-  if (!node.type && node.properties) return "object";
-  const base = node.type || "any";
-  if (base === "array") {
-    const itemType = node.items ? describeType(node.items) : "any";
-    return `array<${itemType}>`;
+  if (node.type === "array") {
+    const itemLabel = node.items ? describeType(node.items).label : "any";
+    return { label: `array<${itemLabel}>`, kind: "array" };
+  }
+  if (node.type === "object" || node.properties) {
+    return { label: "object", kind: "object" };
   }
+  const base = node.type || "any";
   if (Array.isArray(node.enum) && node.enum.length > 0) {
-    return `${base} enum`;
+    return { label: `${base} enum`, kind: "primitive" };
+  }
+  if (node.format) {
+    return { label: `${base} (${node.format})`, kind: "primitive" };
   }
-  if (node.format) return `${base} (${node.format})`;
-  return base;
+  return { label: base, kind: "primitive" };
 }
 __name(describeType, "describeType");
-function schemaToFields(schema, prefix = "", depth = 0) {
-  if (!schema || depth > MAX_DEPTH) return [];
-  if (schema.type === "array") {
-    if (!schema.items) {
-      return [{ name: prefix || "[]", type: "array", required: false }];
+function resolveCombinators(node) {
+  if (Array.isArray(node.allOf) && node.allOf.length > 0) {
+    return { ...mergeAllOf(node.allOf), description: node.description };
+  }
+  if (Array.isArray(node.oneOf) && node.oneOf.length > 0) {
+    return { ...node.oneOf[0], description: node.description ?? node.oneOf[0].description };
+  }
+  if (Array.isArray(node.anyOf) && node.anyOf.length > 0) {
+    return { ...node.anyOf[0], description: node.description ?? node.anyOf[0].description };
+  }
+  return node;
+}
+__name(resolveCombinators, "resolveCombinators");
+function buildNode(name, schema, isRequired, depth) {
+  const resolved = resolveCombinators(schema);
+  const { label, kind } = describeType(resolved);
+  const node = {
+    name,
+    type: label,
+    kind,
+    required: isRequired,
+    description: resolved.description
+  };
+  if (Array.isArray(resolved.enum) && resolved.enum.length > 0) {
+    node.enumValues = resolved.enum.map((v) => String(v));
+  }
+  if (depth >= MAX_DEPTH) return node;
+  if (kind === "object" && resolved.properties) {
+    const required = new Set(resolved.required ?? []);
+    node.children = Object.entries(resolved.properties).map(
+      ([key, child]) => buildNode(key, child, required.has(key), depth + 1)
+    );
+  } else if (kind === "array" && resolved.items) {
+    node.children = [buildNode("[]", resolved.items, false, depth + 1)];
+  }
+  return node;
+}
+__name(buildNode, "buildNode");
+function buildSchemaTree(schema) {
+  if (!schema) return [];
+  const root = buildNode("", schema, false, 0);
+  if (root.children && root.children.length > 0) return root.children;
+  if (root.kind === "primitive" || !root.children && root.name === "") {
+    return [{ ...root, name: root.name || "(body)" }];
+  }
+  return [];
+}
+__name(buildSchemaTree, "buildSchemaTree");
+function FieldRow({ field, depth, showTreeLine = true }) {
+  const isExpandable = (field.kind === "object" || field.kind === "array") && Array.isArray(field.children) && field.children.length > 0;
+  const [open, setOpen] = useState(depth < 2);
+  const padLeft = showTreeLine ? depth * 14 : 0;
+  return /* @__PURE__ */ jsxs("div", { className: "bg-background", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-[16px_minmax(0,1fr)] items-baseline gap-2 px-3 py-2",
+          isExpandable && "cursor-pointer hover:bg-muted/30"
+        ),
+        style: { paddingLeft: 12 + padLeft },
+        onClick: () => isExpandable && setOpen((v) => !v),
+        role: isExpandable ? "button" : void 0,
+        "aria-expanded": isExpandable ? open : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: cn(
+                "h-3.5 w-3.5 text-muted-foreground/50 shrink-0 transition-transform",
+                !isExpandable && "opacity-0",
+                open && "rotate-90"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
+              /* @__PURE__ */ jsx("code", { className: "font-mono text-xs font-medium text-foreground", children: field.name }),
+              field.required && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  title: "Required",
+                  className: "text-[9px] text-destructive font-bold leading-none",
+                  children: "*"
+                }
+              ),
+              /* @__PURE__ */ jsx("code", { className: "font-mono text-[11px] text-muted-foreground/70", children: field.type })
+            ] }),
+            field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed break-words", children: field.description }),
+            field.enumValues && field.enumValues.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 pt-0.5", children: field.enumValues.map((v) => /* @__PURE__ */ jsx(
+              "code",
+              {
+                className: "inline-flex items-center rounded border border-border/60 bg-muted/40 px-1.5 py-px font-mono text-[10px] text-muted-foreground",
+                children: v
+              },
+              v
+            )) })
+          ] })
+        ]
+      }
+    ),
+    isExpandable && open && /* @__PURE__ */ jsx("div", { children: field.children.map((child, i) => /* @__PURE__ */ jsx(
+      FieldRow,
+      {
+        field: child,
+        depth: depth + 1
+      },
+      `${child.name}-${i}`
+    )) })
+  ] });
+}
+__name(FieldRow, "FieldRow");
+function SchemaFields({ schema }) {
+  const tree = useMemo(() => buildSchemaTree(schema), [schema]);
+  if (tree.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "divide-y border rounded-md overflow-hidden", children: tree.map((node, i) => /* @__PURE__ */ jsx(FieldRow, { field: node, depth: 0 }, `${node.name}-${i}`)) });
+}
+__name(SchemaFields, "SchemaFields");
+function RequestBody({ body }) {
+  const typeLabel = body.schema ? body.type === "array" ? `array<${body.schema.items?.type ?? "object"}>` : body.type : body.type;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-[11px] text-muted-foreground/80", children: typeLabel }),
+      body.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: body.description })
+    ] }),
+    body.schema && /* @__PURE__ */ jsx(SchemaFields, { schema: body.schema })
+  ] });
+}
+__name(RequestBody, "RequestBody");
+var EXAMPLE_JSON_TREE_CONFIG = {
+  maxAutoExpandDepth: 2,
+  maxAutoExpandArrayItems: 5,
+  maxAutoExpandObjectKeys: 8,
+  maxStringLength: 160,
+  collectionLimit: 25,
+  showCollectionInfo: true,
+  showExpandControls: false,
+  showActionButtons: false,
+  preserveKeyOrder: true,
+  className: "border-0 rounded-none"
+};
+function ResponseBody({ example, contentType }) {
+  const parsed = useMemo(() => {
+    try {
+      return JSON.parse(example);
+    } catch {
+      return null;
     }
-    const inner = schemaToFields(schema.items, prefix ? `${prefix}[]` : "[]", depth);
-    if (inner.length === 0) {
-      return [
+  }, [example]);
+  return /* @__PURE__ */ jsxs("div", { className: "border-t bg-muted/20", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border/50", children: [
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: contentType ?? "application/json" }),
+      /* @__PURE__ */ jsx(
+        CopyButton,
         {
-          name: prefix || "[]",
-          type: describeType(schema),
-          required: false,
-          description: schema.description
+          value: example,
+          variant: "ghost",
+          size: "sm",
+          className: "h-6 px-2 text-[10px] text-muted-foreground",
+          children: "Copy"
         }
-      ];
-    }
-    return inner;
-  }
-  if (schema.type !== "object" && !schema.properties) {
-    return [
+      )
+    ] }),
+    parsed != null ? /* @__PURE__ */ jsx(
+      JsonTree_default,
       {
-        name: prefix || "(body)",
-        type: describeType(schema),
-        required: false,
-        description: schema.description
+        title: "",
+        data: parsed,
+        mode: "compact",
+        config: EXAMPLE_JSON_TREE_CONFIG
       }
-    ];
+    ) : /* @__PURE__ */ jsx("pre", { className: "p-3 text-[11px] font-mono text-foreground/70 whitespace-pre-wrap break-all leading-relaxed", children: example })
+  ] });
+}
+__name(ResponseBody, "ResponseBody");
+function StatusTag({ code }) {
+  const numeric = Number.parseInt(code, 10);
+  const cls = !Number.isFinite(numeric) ? "bg-muted text-muted-foreground border-border" : numeric >= 500 ? "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/25" : numeric >= 400 ? "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/25" : numeric >= 300 ? "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25" : "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25";
+  return /* @__PURE__ */ jsx("span", { className: cn(
+    "inline-flex items-center justify-center rounded border px-2 py-0.5 font-mono text-[11px] font-bold leading-none shrink-0 tabular-nums",
+    cls
+  ), children: code });
+}
+__name(StatusTag, "StatusTag");
+function ResponseRow({ response }) {
+  const hasExample = Boolean(response.example);
+  const numeric = Number.parseInt(response.code, 10);
+  const isSuccess = Number.isFinite(numeric) && numeric >= 200 && numeric < 300;
+  const [open, setOpen] = useState(hasExample && isSuccess);
+  if (!hasExample) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-3 py-2 bg-background", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-12 shrink-0 flex justify-start", children: /* @__PURE__ */ jsx(StatusTag, { code: response.code }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground leading-relaxed break-words min-w-0", children: response.description })
+    ] });
   }
-  const required = new Set(schema.required ?? []);
-  const rows = [];
-  const props = schema.properties ?? {};
-  for (const [key, node] of Object.entries(props)) {
-    const fullName = prefix ? `${prefix}.${key}` : key;
-    const isRequired = required.has(key);
-    const isNestedExpandable = node.type === "object" && node.properties || node.type === "array" && node.items;
-    if (isNestedExpandable && depth < MAX_DEPTH) {
-      rows.push({
-        name: fullName,
-        type: describeType(node),
-        required: isRequired,
-        description: node.description
-      });
-      rows.push(...schemaToFields(node, fullName, depth + 1));
-    } else {
-      rows.push({
-        name: fullName,
-        type: describeType(node),
-        required: isRequired,
-        description: node.description
+  return /* @__PURE__ */ jsxs("div", { className: "bg-background", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        className: "w-full flex items-center gap-3 px-3 py-2 text-left hover:bg-muted/40 cursor-pointer transition-colors",
+        "aria-expanded": open,
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: cn(
+                "h-3.5 w-3.5 text-muted-foreground/60 transition-transform shrink-0",
+                open && "rotate-90"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "w-12 shrink-0 flex justify-start", children: /* @__PURE__ */ jsx(StatusTag, { code: response.code }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground leading-relaxed break-words min-w-0 flex-1", children: response.description })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      ResponseBody,
+      {
+        example: response.example,
+        contentType: response.contentType
+      }
+    )
+  ] });
+}
+__name(ResponseRow, "ResponseRow");
+function Responses({ responses }) {
+  return /* @__PURE__ */ jsx("div", { className: "divide-y border rounded-md overflow-hidden", children: responses.map((r) => /* @__PURE__ */ jsx(ResponseRow, { response: r }, r.code)) });
+}
+__name(Responses, "Responses");
+
+// src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/Section/defaults.ts
+var DEFAULTS_BY_METHOD = {
+  GET: { parameters: true, responses: true },
+  DELETE: { parameters: true, responses: true },
+  POST: { requestBody: true, responses: true },
+  PUT: { requestBody: true, responses: true },
+  PATCH: { requestBody: true, responses: true }
+};
+function defaultSectionOpen(method, sectionId) {
+  return DEFAULTS_BY_METHOD[method.toUpperCase()]?.[sectionId] ?? false;
+}
+__name(defaultSectionOpen, "defaultSectionOpen");
+
+// src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/types.ts
+var ALL_SECTION_IDS = [
+  "parameters",
+  "requestBody",
+  "responses",
+  "codeSamples"
+];
+
+// src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/hooks/useSectionHash.ts
+function parseSectionHash(hash) {
+  const raw = hash.startsWith("#") ? hash.slice(1) : hash;
+  if (!raw.startsWith("section=")) return null;
+  const value = raw.slice("section=".length);
+  const dot = value.lastIndexOf(".");
+  if (dot <= 0 || dot === value.length - 1) return null;
+  const endpointId = value.slice(0, dot);
+  const sectionIdCandidate = value.slice(dot + 1);
+  if (!ALL_SECTION_IDS.includes(sectionIdCandidate)) return null;
+  return { endpointId, sectionId: sectionIdCandidate };
+}
+__name(parseSectionHash, "parseSectionHash");
+function buildSectionHash(endpointId, sectionId) {
+  return `section=${endpointId}.${sectionId}`;
+}
+__name(buildSectionHash, "buildSectionHash");
+function useSectionHashRouter() {
+  const setSectionOpen = useEndpointDocStore((s) => s.setSectionOpen);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    function apply() {
+      const parsed = parseSectionHash(window.location.hash);
+      if (!parsed) return;
+      setSectionOpen(parsed.endpointId, parsed.sectionId, true);
+      requestAnimationFrame(() => {
+        const el = document.getElementById(parsed.endpointId);
+        el?.scrollIntoView({ behavior: "smooth", block: "start" });
       });
     }
-  }
-  return rows;
+    __name(apply, "apply");
+    apply();
+    window.addEventListener("hashchange", apply);
+    return () => window.removeEventListener("hashchange", apply);
+  }, [setSectionOpen]);
 }
-__name(schemaToFields, "schemaToFields");
-function EndpointDoc({ endpoint, isLoadedInPlayground, onTryIt, schemaId }) {
-  const scopedSchemaId = schemaId ?? endpoint.schemaId ?? null;
-  const anchor = endpointAnchor(endpoint, scopedSchemaId);
-  const pathParams = endpoint.parameters?.filter((p) => endpoint.path.includes(`{${p.name}}`)) ?? [];
-  const queryParams = endpoint.parameters?.filter((p) => !endpoint.path.includes(`{${p.name}}`)) ?? [];
+__name(useSectionHashRouter, "useSectionHashRouter");
+function SectionHeader({ sectionId, title, badge, open, onToggle }) {
+  const { endpointId } = useEndpointDocContext();
   const [copied, setCopied] = useState(false);
-  const copyAnchor = useCallback(() => {
+  const copyHash = /* @__PURE__ */ __name((e) => {
+    e.stopPropagation();
     if (typeof window === "undefined") return;
-    const url = `${window.location.origin}${window.location.pathname}#${anchor}`;
+    const hash = buildSectionHash(endpointId, sectionId);
+    const url = `${window.location.origin}${window.location.pathname}#${hash}`;
     void navigator.clipboard?.writeText(url).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 1200);
     });
-  }, [anchor]);
-  const endpointMd = useMemo(() => endpointToMarkdown(endpoint), [endpoint]);
+  }, "copyHash");
   return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group/section w-full flex items-center gap-2 py-1.5 -ml-1 px-1 rounded cursor-pointer",
+        "hover:bg-muted/30 transition-colors"
+      ),
+      onClick: onToggle,
+      role: "button",
+      "aria-expanded": open,
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggle();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: cn(
+              "h-3.5 w-3.5 text-muted-foreground/50 transition-transform shrink-0",
+              !open && "-rotate-90"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("h4", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/80", children: title }),
+        typeof badge === "number" && badge > 0 && /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground/50 tabular-nums", children: badge }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: copyHash,
+            title: "Copy link to this section",
+            className: cn(
+              "ml-auto shrink-0 p-1 rounded text-muted-foreground/40 hover:text-foreground hover:bg-muted transition-all",
+              "opacity-0 group-hover/section:opacity-100 focus-visible:opacity-100",
+              copied && "opacity-100 text-emerald-500"
+            ),
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+__name(SectionHeader, "SectionHeader");
+function Section({ id, title, badge, children }) {
+  const { endpointId, method } = useEndpointDocContext();
+  const defaultOpen = defaultSectionOpen(method, id);
+  const open = useIsSectionOpen(endpointId, id, defaultOpen);
+  const toggleSection = useEndpointDocStore((s) => s.toggleSection);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
+    /* @__PURE__ */ jsx(
+      SectionHeader,
+      {
+        sectionId: id,
+        title,
+        badge,
+        open,
+        onToggle: () => toggleSection(endpointId, id)
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+__name(Section, "Section");
+function EndpointDoc({ endpoint, isLoadedInPlayground, onTryIt, schemaId }) {
+  const scopedSchemaId = schemaId ?? endpoint.schemaId ?? null;
+  const anchor = endpointAnchor(endpoint, scopedSchemaId);
+  const pathParams = endpoint.parameters?.filter((p) => endpoint.path.includes(`{${p.name}}`)) ?? [];
+  const queryParams = endpoint.parameters?.filter((p) => !endpoint.path.includes(`{${p.name}}`)) ?? [];
+  const hasParameters = pathParams.length > 0 || queryParams.length > 0;
+  const hasResponses = (endpoint.responses?.length ?? 0) > 0;
+  const presentSections = [];
+  if (hasParameters) presentSections.push("parameters");
+  if (endpoint.requestBody) presentSections.push("requestBody");
+  presentSections.push("codeSamples");
+  if (hasResponses) presentSections.push("responses");
+  return /* @__PURE__ */ jsx(EndpointDocProvider, { endpointId: anchor, method: endpoint.method, children: /* @__PURE__ */ jsxs(
     "section",
     {
       id: anchor,
@@ -1204,164 +1945,43 @@ function EndpointDoc({ endpoint, isLoadedInPlayground, onTryIt, schemaId }) {
       "data-schema-id": scopedSchemaId ?? "",
       className: "scroll-mt-24 py-10 first:pt-0",
       children: [
-        /* @__PURE__ */ jsxs("header", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 flex-wrap", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2.5 min-w-0 flex-1 group/header", children: [
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 translate-y-[2px]", children: /* @__PURE__ */ jsx(MethodBadge, { method: endpoint.method }) }),
-              /* @__PURE__ */ jsx(
-                "code",
-                {
-                  className: "font-mono text-sm md:text-[15px] font-medium text-foreground leading-snug min-w-0",
-                  style: { overflowWrap: "anywhere", wordBreak: "break-word" },
-                  children: relativePath(endpoint.path)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: copyAnchor,
-                  title: "Copy link to this section",
-                  className: cn(
-                    "shrink-0 p-1 rounded text-muted-foreground/40 hover:text-foreground hover:bg-muted transition-all",
-                    "opacity-0 group-hover/header:opacity-100",
-                    copied && "opacity-100 text-emerald-500"
-                  ),
-                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Link2, { className: "h-3.5 w-3.5" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                CopyButton,
-                {
-                  value: endpointMd,
-                  title: "Copy endpoint as markdown (for AI)",
-                  variant: "ghost",
-                  size: "icon",
-                  iconClassName: "h-3.5 w-3.5",
-                  className: cn(
-                    "shrink-0 h-6 w-6 text-muted-foreground/40 hover:text-foreground",
-                    "opacity-0 group-hover/header:opacity-100 focus-visible:opacity-100"
-                  )
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                size: "sm",
-                variant: isLoadedInPlayground ? "secondary" : "default",
-                onClick: onTryIt,
-                className: "shrink-0 h-8 text-xs gap-1.5 lg:flex hidden",
-                children: [
-                  /* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }),
-                  isLoadedInPlayground ? "Loaded" : "Try it"
-                ]
-              }
-            )
-          ] }),
-          endpoint.description && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx(MarkdownMessage, { content: endpoint.description }) }),
-          /* @__PURE__ */ jsxs(
-            Button,
+        /* @__PURE__ */ jsx(
+          EndpointHeader,
+          {
+            endpoint,
+            anchor,
+            isLoadedInPlayground,
+            onTryIt,
+            presentSections
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-8 space-y-5", children: [
+          hasParameters && /* @__PURE__ */ jsx(
+            Section,
             {
-              size: "sm",
-              variant: isLoadedInPlayground ? "secondary" : "default",
-              onClick: onTryIt,
-              className: "lg:hidden h-8 text-xs gap-1.5",
-              children: [
-                /* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }),
-                isLoadedInPlayground ? "Loaded in playground" : "Try it"
-              ]
+              id: "parameters",
+              title: "Parameters",
+              badge: pathParams.length + queryParams.length,
+              children: /* @__PURE__ */ jsx(Parameters, { pathParams, queryParams })
             }
-          )
-        ] }),
-        (pathParams.length > 0 || queryParams.length > 0 || endpoint.requestBody || endpoint.responses?.length) && /* @__PURE__ */ jsxs("div", { className: "mt-8 space-y-8", children: [
-          pathParams.length > 0 && /* @__PURE__ */ jsx(ParamTable, { title: "Path parameters", params: pathParams }),
-          queryParams.length > 0 && /* @__PURE__ */ jsx(ParamTable, { title: "Query parameters", params: queryParams }),
-          endpoint.requestBody && /* @__PURE__ */ jsx(RequestBodySection, { body: endpoint.requestBody }),
-          endpoint.responses && endpoint.responses.length > 0 && /* @__PURE__ */ jsx(Subsection, { title: "Responses", children: /* @__PURE__ */ jsx("div", { className: "divide-y border rounded-md overflow-hidden", children: endpoint.responses.map((r) => /* @__PURE__ */ jsxs(
-            "div",
+          ),
+          endpoint.requestBody && /* @__PURE__ */ jsx(Section, { id: "requestBody", title: "Request body", children: /* @__PURE__ */ jsx(RequestBody, { body: endpoint.requestBody }) }),
+          /* @__PURE__ */ jsx(Section, { id: "codeSamples", title: "Code samples", children: /* @__PURE__ */ jsx(CodeSamples, { endpoint }) }),
+          hasResponses && /* @__PURE__ */ jsx(
+            Section,
             {
-              className: "grid grid-cols-[72px_minmax(0,1fr)] items-center gap-3 px-3 py-2.5 bg-background",
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx(StatusTag, { code: r.code }) }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground leading-relaxed break-words", children: r.description })
-              ]
-            },
-            r.code
-          )) }) })
+              id: "responses",
+              title: "Responses",
+              badge: endpoint.responses.length,
+              children: /* @__PURE__ */ jsx(Responses, { responses: endpoint.responses })
+            }
+          )
         ] })
       ]
     }
-  );
+  ) });
 }
 __name(EndpointDoc, "EndpointDoc");
-function RequestBodySection({ body }) {
-  const fields = useMemo(() => schemaToFields(body.schema), [body.schema]);
-  const typeLabel = body.schema ? body.type === "array" ? `array<${body.schema.items?.type ?? "object"}>` : body.type : body.type;
-  return /* @__PURE__ */ jsx(Subsection, { title: "Request body", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
-      /* @__PURE__ */ jsx("code", { className: "font-mono text-[11px] text-muted-foreground/80", children: typeLabel }),
-      body.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: body.description })
-    ] }),
-    fields.length > 0 && /* @__PURE__ */ jsx(FieldsTable, { fields })
-  ] }) });
-}
-__name(RequestBodySection, "RequestBodySection");
-function FieldsTable({ fields }) {
-  return /* @__PURE__ */ jsx("div", { className: "divide-y border rounded-md overflow-hidden", children: fields.map((f) => /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 bg-background space-y-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
-      /* @__PURE__ */ jsx("code", { className: "font-mono text-xs font-medium text-foreground", children: f.name }),
-      f.required && /* @__PURE__ */ jsx(
-        "span",
-        {
-          title: "Required",
-          className: "text-[9px] text-destructive font-bold leading-none",
-          children: "*"
-        }
-      ),
-      /* @__PURE__ */ jsx("code", { className: "font-mono text-[11px] text-muted-foreground/70", children: f.type })
-    ] }),
-    f.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed break-words", children: f.description })
-  ] }, f.name)) });
-}
-__name(FieldsTable, "FieldsTable");
-function Subsection({ title, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
-    /* @__PURE__ */ jsx("h4", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/70", children: title }),
-    children
-  ] });
-}
-__name(Subsection, "Subsection");
-function ParamTable({
-  title,
-  params
-}) {
-  return /* @__PURE__ */ jsx(Subsection, { title, children: /* @__PURE__ */ jsx("div", { className: "divide-y border rounded-md overflow-hidden", children: params.map((p) => /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 bg-background space-y-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
-      /* @__PURE__ */ jsx("code", { className: "font-mono text-xs font-medium text-foreground", children: p.name }),
-      p.required && /* @__PURE__ */ jsx(
-        "span",
-        {
-          title: "Required",
-          className: "text-[9px] text-destructive font-bold leading-none",
-          children: "*"
-        }
-      ),
-      /* @__PURE__ */ jsx("code", { className: "font-mono text-[11px] text-muted-foreground/70", children: p.type })
-    ] }),
-    p.description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed break-words", children: p.description }) : null
-  ] }, p.name)) }) });
-}
-__name(ParamTable, "ParamTable");
-function StatusTag({ code }) {
-  const numeric = Number.parseInt(code, 10);
-  const cls = !Number.isFinite(numeric) ? "bg-muted text-muted-foreground border-border" : numeric >= 500 ? "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/25" : numeric >= 400 ? "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/25" : numeric >= 300 ? "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25" : "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25";
-  return /* @__PURE__ */ jsx("span", { className: cn(
-    "inline-flex items-center justify-center rounded border px-2 py-0.5 font-mono text-[11px] font-bold leading-none shrink-0 tabular-nums",
-    cls
-  ), children: code });
-}
-__name(StatusTag, "StatusTag");
 var readNavbarOffset = /* @__PURE__ */ __name(() => {
   if (typeof document === "undefined") return 0;
   const raw = getComputedStyle(document.documentElement).getPropertyValue("--navbar-height");
@@ -1407,10 +2027,11 @@ function buildSchemaSectionVM(entry, selectedVersion, loadedEndpoint) {
   };
 }
 __name(buildSchemaSectionVM, "buildSchemaSectionVM");
-var DocsView = React6.forwardRef(/* @__PURE__ */ __name(function DocsView2(props, ref) {
+var DocsView = React12.forwardRef(/* @__PURE__ */ __name(function DocsView2(props, ref) {
   const scrollRef = useRef(null);
   const scrollTargetRef = useRef(null);
   const { onActiveChange } = props;
+  useSectionHashRouter();
   const ensureScrollTarget = useCallback(() => {
     if (scrollTargetRef.current) return scrollTargetRef.current;
     if (!scrollRef.current) return null;
@@ -1431,7 +2052,7 @@ var DocsView = React6.forwardRef(/* @__PURE__ */ __name(function DocsView2(props
     },
     [ensureScrollTarget]
   );
-  React6.useImperativeHandle(ref, () => ({ scrollToAnchor }), [scrollToAnchor]);
+  React12.useImperativeHandle(ref, () => ({ scrollToAnchor }), [scrollToAnchor]);
   useEffect(() => {
     const root = scrollRef.current;
     if (!root) return;
@@ -1535,7 +2156,7 @@ function SectionsBody({
   return /* @__PURE__ */ jsx("div", { ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[860px] px-6 md:px-10 lg:px-14 py-12 space-y-16", children: sections.map((section) => /* @__PURE__ */ jsx(SchemaSectionView, { section, onTryEndpoint }, section.schemaId)) }) });
 }
 __name(SectionsBody, "SectionsBody");
-var SchemaSectionView = React6.memo(/* @__PURE__ */ __name(function SchemaSectionView2({
+var SchemaSectionView = React12.memo(/* @__PURE__ */ __name(function SchemaSectionView2({
   section,
   onTryEndpoint
 }) {
@@ -1790,8 +2411,8 @@ function RawJsonField({
   value,
   onChange
 }) {
-  const [text, setText] = React6.useState(() => JSON.stringify(value ?? null, null, 2));
-  React6.useEffect(() => {
+  const [text, setText] = React12.useState(() => JSON.stringify(value ?? null, null, 2));
+  React12.useEffect(() => {
     setText(JSON.stringify(value ?? null, null, 2));
   }, [value]);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
@@ -2140,8 +2761,8 @@ function RequestPanel() {
 __name(RequestPanel, "RequestPanel");
 function BodySection({ schema, bodyType, bodyDescription, value, onChange, isJsonValid }) {
   const hasSchema = !!schema;
-  const [mode, setMode] = React6.useState(hasSchema ? "form" : "json");
-  const parsed = React6.useMemo(() => {
+  const [mode, setMode] = React12.useState(hasSchema ? "form" : "json");
+  const parsed = React12.useMemo(() => {
     if (!value) return null;
     try {
       return JSON.parse(value);
@@ -2229,6 +2850,65 @@ function ModeButton({
   );
 }
 __name(ModeButton, "ModeButton");
+function looksLikeSpaShell(html) {
+  const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+  const bodyContent = (bodyMatch?.[1] ?? html).replace(/<script[\s\S]*?<\/script>/gi, "").replace(/<!--[\s\S]*?-->/g, "").trim();
+  if (bodyContent.length === 0) return true;
+  const singleEmptyContainer = /^<(div|main|section)[^>]*>\s*<\/\1>$/i;
+  if (singleEmptyContainer.test(bodyContent)) return true;
+  return false;
+}
+__name(looksLikeSpaShell, "looksLikeSpaShell");
+function PreviewView({ html }) {
+  const isSpaShell = useMemo(() => looksLikeSpaShell(html), [html]);
+  if (!html) {
+    return /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-xs text-muted-foreground", children: "Empty response body" });
+  }
+  if (isSpaShell) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center gap-3 min-h-[400px]", children: [
+      /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center h-10 w-10 rounded-full bg-muted", children: /* @__PURE__ */ jsx(Info, { className: "h-5 w-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "max-w-sm space-y-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Looks like a single-page app shell" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground leading-relaxed", children: [
+          "This page renders its content with JavaScript at runtime. Scripts are disabled in the sandbox, so Preview would show a blank page. Switch to ",
+          /* @__PURE__ */ jsx("strong", { children: "Pretty" }),
+          " or",
+          " ",
+          /* @__PURE__ */ jsx("strong", { children: "Raw" }),
+          " to inspect the HTML source."
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full min-h-[400px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center gap-1.5 px-3 py-1.5 bg-muted/30 border-b text-[10px] text-muted-foreground/70", children: [
+      /* @__PURE__ */ jsx(ShieldCheck, { className: "h-3 w-3" }),
+      "Sandboxed preview \u2014 scripts, forms and popups are disabled"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex-1 min-h-[360px] p-2",
+        style: {
+          backgroundColor: "#fff",
+          backgroundImage: "linear-gradient(45deg, #f3f4f6 25%, transparent 25%), linear-gradient(-45deg, #f3f4f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3f4f6 75%), linear-gradient(-45deg, transparent 75%, #f3f4f6 75%)",
+          backgroundSize: "16px 16px",
+          backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0px"
+        },
+        children: /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            title: "Response preview",
+            srcDoc: html,
+            sandbox: "",
+            className: "w-full h-full min-h-[360px] bg-white border-0 rounded shadow-sm"
+          }
+        )
+      }
+    )
+  ] });
+}
+__name(PreviewView, "PreviewView");
 var JSON_TREE_CONFIG = {
   maxAutoExpandDepth: 2,
   maxAutoExpandArrayItems: 10,
@@ -2241,26 +2921,198 @@ var JSON_TREE_CONFIG = {
   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") {
+function PrettyView({ treeData, rawText, detected }) {
+  if (detected.kind === "json" && treeData != null) {
+    return /* @__PURE__ */ jsx(JsonTree_default, { title: "Response Body", data: treeData, config: JSON_TREE_CONFIG });
+  }
+  if (!rawText) {
+    return /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-xs text-muted-foreground", children: "Empty response body" });
+  }
+  return /* @__PURE__ */ jsx(
+    PrettyCode_default,
+    {
+      data: rawText,
+      language: detected.prism,
+      variant: "plain",
+      isCompact: true
+    }
+  );
+}
+__name(PrettyView, "PrettyView");
+function RawView({ rawText }) {
+  if (!rawText) {
+    return /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-xs text-muted-foreground", children: "Empty response body" });
+  }
+  return /* @__PURE__ */ jsx("pre", { className: "p-4 text-[11px] font-mono text-foreground/70 whitespace-pre-wrap break-all leading-relaxed", children: rawText });
+}
+__name(RawView, "RawView");
+function StatusBar({ response, rawText, contentType }) {
+  const sizeKb = rawText ? `${(rawText.length / 1024).toFixed(1)} KB` : "";
+  const duration = response.duration != null ? `${response.duration}ms` : "";
+  const hasStatus = response.status != null;
+  const hasCopy = Boolean(rawText);
+  return /* @__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 }),
+      contentType && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/50 font-mono truncate", children: contentType })
+    ] }),
+    hasCopy && /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        value: rawText,
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 px-2 text-[10px] text-muted-foreground shrink-0",
+        children: "Copy"
+      }
+    )
+  ] });
+}
+__name(StatusBar, "StatusBar");
+
+// src/tools/OpenapiViewer/components/shared/ResponsePanel/detectContent.ts
+function normaliseContentType(raw) {
+  if (!raw) return null;
+  const semi = raw.indexOf(";");
+  return (semi === -1 ? raw : raw.slice(0, semi)).trim().toLowerCase();
+}
+__name(normaliseContentType, "normaliseContentType");
+function readContentType(headers) {
+  if (!headers) return null;
+  if (typeof headers.get === "function") {
+    return headers.get("content-type");
+  }
+  if (typeof headers === "object") {
+    for (const [k, v] of Object.entries(headers)) {
+      if (k.toLowerCase() === "content-type") {
+        return typeof v === "string" ? v : null;
+      }
+    }
+  }
+  return null;
+}
+__name(readContentType, "readContentType");
+function kindFromContentType(mime) {
+  if (!mime) return "text";
+  if (mime === "application/json" || mime.endsWith("+json")) return "json";
+  if (mime === "text/html" || mime === "application/xhtml+xml") return "html";
+  if (mime === "application/xml" || mime === "text/xml" || mime.endsWith("+xml")) return "xml";
+  if (mime === "text/css") return "css";
+  if (mime === "application/javascript" || mime === "text/javascript" || mime === "application/x-javascript") return "javascript";
+  return "text";
+}
+__name(kindFromContentType, "kindFromContentType");
+function kindFromBody(body) {
+  const trimmed = body.trimStart();
+  if (!trimmed) return null;
+  if (trimmed.startsWith("<!DOCTYPE") || /^<html[\s>]/i.test(trimmed)) return "html";
+  if (trimmed.startsWith("<?xml")) return "xml";
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    try {
+      JSON.parse(trimmed);
+      return "json";
+    } catch {
+    }
+  }
+  return null;
+}
+__name(kindFromBody, "kindFromBody");
+var PRISM_BY_KIND = {
+  json: "json",
+  // ``markup`` is Prism's HTML/XML grammar — there isn't a separate
+  // ``html`` language. XML piggy-backs on the same tokeniser.
+  html: "markup",
+  xml: "markup",
+  css: "css",
+  javascript: "javascript",
+  text: "markup"
+};
+function detectContent(headers, rawBody) {
+  const contentType = normaliseContentType(readContentType(headers));
+  const headerKind = kindFromContentType(contentType);
+  const kind = headerKind === "text" ? kindFromBody(rawBody) ?? "text" : headerKind;
+  return {
+    kind,
+    prism: PRISM_BY_KIND[kind],
+    contentType
+  };
+}
+__name(detectContent, "detectContent");
+
+// src/tools/OpenapiViewer/components/shared/ResponsePanel/useResponseView.ts
+function useResponseView(data, headers) {
+  return useMemo(() => {
+    if (data == null) {
+      return {
+        treeData: null,
+        rawText: "",
+        detected: detectContent(headers, "")
+      };
+    }
+    if (typeof data === "string") {
       try {
-        return { treeData: JSON.parse(d), rawText: d };
+        return {
+          treeData: JSON.parse(data),
+          rawText: data,
+          detected: detectContent(headers, data)
+        };
       } catch {
-        return { treeData: null, rawText: d };
+        return {
+          treeData: null,
+          rawText: data,
+          detected: detectContent(headers, data)
+        };
       }
     }
-    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);
+    const stringified = (() => {
+      try {
+        return JSON.stringify(data, null, 2);
+      } catch {
+        return String(data);
+      }
+    })();
+    return {
+      treeData: data,
+      rawText: stringified,
+      detected: detectContent(headers, stringified)
+    };
+  }, [data, headers]);
+}
+__name(useResponseView, "useResponseView");
+var LABELS = {
+  pretty: "Pretty",
+  raw: "Raw",
+  preview: "Preview"
+};
+function ViewTabs({ active, onChange, showPreview }) {
+  const tabs = showPreview ? ["pretty", "raw", "preview"] : ["pretty", "raw"];
+  return /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b px-3 py-1.5 flex items-center gap-1", children: tabs.map((t) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onChange(t),
+      className: cn(
+        "h-6 px-2.5 rounded text-[11px] font-medium transition-colors",
+        active === t ? "bg-muted text-foreground" : "text-muted-foreground/70 hover:text-foreground hover:bg-muted/50"
+      ),
+      children: LABELS[t]
+    },
+    t
+  )) });
+}
+__name(ViewTabs, "ViewTabs");
+function ResponsePanel() {
+  const { state } = usePlaygroundContext();
+  const { response, loading, selectedEndpoint } = state;
+  const { treeData, rawText, detected } = useResponseView(response?.data, response?.headers);
+  const showPreview = detected.kind === "html";
+  const [mode, setMode] = useState(showPreview ? "preview" : "pretty");
+  useEffect(() => {
+    setMode(showPreview ? "preview" : "pretty");
+  }, [selectedEndpoint, response, showPreview]);
   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" }),
@@ -2269,6 +3121,8 @@ function ResponsePanel() {
   }
   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' });
+  const hasError = Boolean(response.error);
+  const hasStatus = response.status != null;
   if (hasError && !hasStatus) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -2280,17 +3134,14 @@ function ResponsePanel() {
     );
   }
   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" })
-    ] }),
+    /* @__PURE__ */ jsx(StatusBar, { response, rawText, contentType: detected.contentType }),
     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" }) })
+    /* @__PURE__ */ jsx(ViewTabs, { active: mode, onChange: setMode, showPreview }),
+    /* @__PURE__ */ jsxs(ScrollArea, { children: [
+      mode === "pretty" && /* @__PURE__ */ jsx(PrettyView, { treeData, rawText, detected }),
+      mode === "raw" && /* @__PURE__ */ jsx(RawView, { rawText }),
+      mode === "preview" && /* @__PURE__ */ jsx(PreviewView, { html: rawText })
+    ] })
   ] });
 }
 __name(ResponsePanel, "ResponsePanel");
@@ -2364,12 +3215,14 @@ function SlideInPlayground({ open, onClose }) {
           showResponse ? "grid-cols-[minmax(0,1fr)_minmax(0,1fr)]" : "grid-cols-1"
         ),
         children: [
-          /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(RequestPanel, {}) }),
+          /* @__PURE__ */ jsxs(Panel, { children: [
+            /* @__PURE__ */ jsx(RequestPanel, {}),
+            ep && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t px-4 py-3 bg-background", children: /* @__PURE__ */ jsx(SendButton, {}) })
+          ] }),
           showResponse && /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(ResponsePanel, {}) })
         ]
       }
-    ),
-    ep && /* @__PURE__ */ jsx(SidePanel.Footer, { className: "px-4 py-3", children: /* @__PURE__ */ jsx(SendButton, {}) })
+    )
   ] }) });
 }
 __name(SlideInPlayground, "SlideInPlayground");
@@ -2379,10 +3232,12 @@ function TryItSheet({ open, onOpenChange }) {
   return /* @__PURE__ */ jsx(ResponsiveSheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(ResponsiveSheetContent, { className: "sm:max-w-xl flex flex-col h-full p-0", children: [
     /* @__PURE__ */ jsx(ResponsiveSheetHeader, { className: "px-4 py-3 border-b shrink-0", children: /* @__PURE__ */ jsx(ResponsiveSheetTitle, { className: "text-sm", children: "Playground" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 flex flex-col divide-y", children: [
-      /* @__PURE__ */ jsx("div", { className: showResponse ? "flex-1 min-h-0 flex flex-col" : "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ jsx(RequestPanel, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [
+        /* @__PURE__ */ jsx(RequestPanel, {}),
+        state.selectedEndpoint && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t px-4 py-3 bg-background", children: /* @__PURE__ */ jsx(SendButton, {}) })
+      ] }),
       showResponse && /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ jsx(ResponsePanel, {}) })
-    ] }),
-    state.selectedEndpoint && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t px-4 py-3 bg-background/95 backdrop-blur-sm", children: /* @__PURE__ */ jsx(SendButton, {}) })
+    ] })
   ] }) });
 }
 __name(TryItSheet, "TryItSheet");
@@ -2598,5 +3453,5 @@ var DocsLayout = /* @__PURE__ */ __name(() => {
 }, "DocsLayout");
 
 export { DocsLayout };
-//# sourceMappingURL=DocsLayout-TKJQ5W5E.mjs.map
-//# sourceMappingURL=DocsLayout-TKJQ5W5E.mjs.map
+//# sourceMappingURL=DocsLayout-JPXFUKAR.mjs.map
+//# sourceMappingURL=DocsLayout-JPXFUKAR.mjs.map