@djangocfg/ui-tools 2.1.287 → 2.1.289

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

@@ -2,13 +2,14 @@ import { deduplicateEndpoints, dereferenceSchema, resolveBaseUrl, usePlaygroundC
 import { JsonTree_default } from './chunk-LFWQ36LJ.mjs';
 import './chunk-SSUOENAZ.mjs';
 import { __name } from './chunk-CGILA3WO.mjs';
-import React6, { useRef, useMemo, useCallback, useEffect, useState } from 'react';
-import { Combobox, Input, Tooltip, TooltipTrigger, TooltipContent, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, CopyButton, Switch, Textarea, SidePanel, ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, Skeleton, TooltipProvider } from '@djangocfg/ui-core/components';
-import { useMediaQuery } from '@djangocfg/ui-core/hooks';
+import React6, { useRef, useCallback, useEffect, useMemo, useState } 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 { toast, useMediaQuery } from '@djangocfg/ui-core/hooks';
 import consola from 'consola';
-import { ChevronRight, Search, Sparkles, ChevronDown, Check, Link2, Play, Minus, Plus, RotateCcw, Send, Key, Terminal, Loader2, WifiOff, AlertCircle } from 'lucide-react';
+import { ChevronRight, Sparkles, ChevronDown, Check, Search, Link2, Play, Minus, Plus, RotateCcw, Send, Key, Terminal, Loader2, WifiOff, AlertCircle } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function exampleFromSchema(schema, depth = 0) {
   if (!schema || depth > 8) return null;
@@ -51,7 +52,7 @@ function exampleFromSchema(schema, depth = 0) {
 }
 __name(exampleFromSchema, "exampleFromSchema");
 var HTTP_METHODS = ["get", "post", "put", "patch", "delete"];
-var extractEndpoints = /* @__PURE__ */ __name((schema, baseUrl) => {
+var extractEndpoints = /* @__PURE__ */ __name((schema, baseUrl, schemaId) => {
   const endpoints = [];
   if (!schema.paths) return [];
   for (const [path, methods] of Object.entries(schema.paths)) {
@@ -102,7 +103,8 @@ var extractEndpoints = /* @__PURE__ */ __name((schema, baseUrl) => {
         category,
         parameters: parameters.length > 0 ? parameters : void 0,
         requestBody,
-        responses: responses.length > 0 ? responses : void 0
+        responses: responses.length > 0 ? responses : void 0,
+        schemaId
       };
       endpoints.push(endpoint);
     }
@@ -128,7 +130,8 @@ var fetchSchema = /* @__PURE__ */ __name(async (url) => {
 function useOpenApiSchema({
   schemas,
   defaultSchemaId,
-  baseUrl: configBaseUrl
+  baseUrl: configBaseUrl,
+  preloadAll = false
 }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -138,6 +141,7 @@ function useOpenApiSchema({
   const [loadedSchemas, setLoadedSchemas] = useState(
     /* @__PURE__ */ new Map()
   );
+  const [loadStates, setLoadStates] = useState(/* @__PURE__ */ new Map());
   const currentSchema = useMemo(
     () => schemas.find((s) => s.id === currentSchemaId) || null,
     [schemas, currentSchemaId]
@@ -159,8 +163,8 @@ function useOpenApiSchema({
     [currentSchema?.baseUrl, configBaseUrl, currentOpenApiSchema]
   );
   const endpoints = useMemo(
-    () => dereferencedSchema ? extractEndpoints(dereferencedSchema, resolvedBaseUrl) : [],
-    [dereferencedSchema, resolvedBaseUrl]
+    () => dereferencedSchema ? extractEndpoints(dereferencedSchema, resolvedBaseUrl, currentSchemaId) : [],
+    [dereferencedSchema, resolvedBaseUrl, currentSchemaId]
   );
   const categories = useMemo(() => getCategories(endpoints), [endpoints]);
   const schemaInfo = useMemo(() => {
@@ -174,6 +178,7 @@ function useOpenApiSchema({
     };
   }, [currentOpenApiSchema]);
   useEffect(() => {
+    if (preloadAll) return;
     if (!currentSchema) return;
     if (loadedSchemas.has(currentSchema.id)) {
       setLoading(false);
@@ -190,7 +195,90 @@ function useOpenApiSchema({
       setError(err instanceof Error ? err.message : "Failed to load schema");
       setLoading(false);
     });
-  }, [currentSchema, loadedSchemas]);
+  }, [currentSchema, loadedSchemas, preloadAll]);
+  useEffect(() => {
+    if (!preloadAll) return;
+    if (schemas.length === 0) {
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    const pending = schemas.filter((s) => !loadedSchemas.has(s.id));
+    if (pending.length === 0) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setLoadStates((prev) => {
+      const next = new Map(prev);
+      for (const s of pending) next.set(s.id, { loading: true, error: null });
+      return next;
+    });
+    Promise.allSettled(
+      pending.map(
+        (s) => fetchSchema(s.url).then((schema) => ({ id: s.id, name: s.name, schema }))
+      )
+    ).then((results) => {
+      if (cancelled) return;
+      setLoadedSchemas((prev) => {
+        const next = new Map(prev);
+        for (const r of results) {
+          if (r.status === "fulfilled") {
+            next.set(r.value.id, r.value.schema);
+            consola.success(`Schema loaded: ${r.value.name}`);
+          }
+        }
+        return next;
+      });
+      setLoadStates((prev) => {
+        const next = new Map(prev);
+        results.forEach((r, i) => {
+          const src = pending[i];
+          if (r.status === "fulfilled") {
+            next.set(src.id, { loading: false, error: null });
+          } else {
+            const msg = r.reason instanceof Error ? r.reason.message : "Failed to load schema";
+            consola.error(`Error loading schema from ${src.url}:`, r.reason);
+            next.set(src.id, { loading: false, error: msg });
+          }
+        });
+        return next;
+      });
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [preloadAll, schemas, loadedSchemas]);
+  const schemasData = useMemo(() => {
+    if (!preloadAll) return [];
+    return schemas.map((src) => {
+      const raw = loadedSchemas.get(src.id) ?? null;
+      const deref = raw ? dereferenceSchema(raw) : null;
+      const resolved = resolveBaseUrl({
+        schemaSource: src.baseUrl,
+        config: configBaseUrl,
+        fromServers: raw?.servers?.[0]?.url
+      });
+      const info = raw?.info ? {
+        title: raw.info.title,
+        version: raw.info.version,
+        description: raw.info.description,
+        servers: raw.servers
+      } : null;
+      const eps = deref ? extractEndpoints(deref, resolved, src.id) : [];
+      const state = loadStates.get(src.id) ?? { loading: !raw, error: null };
+      return {
+        source: src,
+        info,
+        rawSchema: raw,
+        endpoints: eps,
+        resolvedBaseUrl: resolved || void 0,
+        loading: state.loading,
+        error: state.error
+      };
+    });
+  }, [preloadAll, schemas, loadedSchemas, loadStates, configBaseUrl]);
   const setCurrentSchema = useCallback((schemaId) => {
     setCurrentSchemaId(schemaId);
   }, []);
@@ -227,10 +315,75 @@ function useOpenApiSchema({
     // convention from the resolver into undefined at the API boundary.
     resolvedBaseUrl: resolvedBaseUrl || void 0,
     setCurrentSchema,
-    refresh
+    refresh,
+    schemasData
   };
 }
 __name(useOpenApiSchema, "useOpenApiSchema");
+function parseDocsHash(hash) {
+  const raw = hash.startsWith("#") ? hash.slice(1) : hash;
+  if (!raw) return { schemaId: null, anchor: null };
+  const [schemaId = null, ...rest] = raw.split("/");
+  const anchor = rest.length > 0 ? rest.join("/") : null;
+  return {
+    schemaId: schemaId || null,
+    anchor: anchor || null
+  };
+}
+__name(parseDocsHash, "parseDocsHash");
+function buildDocsHash(schemaId, anchor) {
+  if (!schemaId && !anchor) return "";
+  if (schemaId && anchor) return `#${schemaId}/${anchor}`;
+  if (schemaId) return `#${schemaId}`;
+  return anchor ? `#${anchor}` : "";
+}
+__name(buildDocsHash, "buildDocsHash");
+function useDocsUrlSync({
+  enabled,
+  currentSchemaId,
+  activeAnchor,
+  onHashTarget
+}) {
+  const primedRef = useRef(false);
+  const onHashTargetRef = useRef(onHashTarget);
+  useEffect(() => {
+    onHashTargetRef.current = onHashTarget;
+  }, [onHashTarget]);
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    const apply = /* @__PURE__ */ __name(() => {
+      onHashTargetRef.current(parseDocsHash(window.location.hash));
+    }, "apply");
+    apply();
+    primedRef.current = true;
+    window.addEventListener("hashchange", apply);
+    window.addEventListener("popstate", apply);
+    return () => {
+      window.removeEventListener("hashchange", apply);
+      window.removeEventListener("popstate", apply);
+    };
+  }, [enabled]);
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    if (!primedRef.current) return;
+    const next = buildDocsHash(currentSchemaId, activeAnchor);
+    const current = window.location.hash;
+    if (next === current) return;
+    const url = next ? `${window.location.pathname}${window.location.search}${next}` : `${window.location.pathname}${window.location.search}`;
+    window.history.replaceState(window.history.state, "", url);
+  }, [enabled, currentSchemaId, activeAnchor]);
+  const pushTarget = useCallback(
+    (schemaId, anchor) => {
+      if (!enabled || typeof window === "undefined") return;
+      const next = buildDocsHash(schemaId, anchor);
+      const url = next ? `${window.location.pathname}${window.location.search}${next}` : `${window.location.pathname}${window.location.search}`;
+      window.history.pushState(window.history.state, "", url);
+    },
+    [enabled]
+  );
+  return { pushTarget };
+}
+__name(useDocsUrlSync, "useDocsUrlSync");
 var EMPTY_DRAFT = { parameters: {}, requestBody: "" };
 function storageKey(schemaId, ep) {
   if (!schemaId || !ep) return null;
@@ -361,6 +514,18 @@ function EndpointDraftSync({ schemaId }) {
   return null;
 }
 __name(EndpointDraftSync, "EndpointDraftSync");
+
+// src/tools/OpenapiViewer/components/DocsLayout/anchor.ts
+function endpointAnchor(ep, schemaId) {
+  const slug = ep.path.replace(/^https?:\/\/[^/]+/, "").replace(/[{}]/g, "").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
+  const schemaSlug = schemaId ? `${slugifySchemaId(schemaId)}-` : "";
+  return `ep-${schemaSlug}${ep.method.toLowerCase()}-${slug}`;
+}
+__name(endpointAnchor, "endpointAnchor");
+function slugifySchemaId(id) {
+  return id.replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+}
+__name(slugifySchemaId, "slugifySchemaId");
 var METHOD_STYLES = {
   GET: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25",
   POST: "bg-blue-500/10    text-blue-600    dark:text-blue-400    border-blue-500/25",
@@ -456,13 +621,6 @@ function CollapsibleSection({
 }
 __name(CollapsibleSection, "CollapsibleSection");
 
-// src/tools/OpenapiViewer/components/DocsLayout/anchor.ts
-function endpointAnchor(ep) {
-  const slug = ep.path.replace(/^https?:\/\/[^/]+/, "").replace(/[{}]/g, "").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
-  return `ep-${ep.method.toLowerCase()}-${slug}`;
-}
-__name(endpointAnchor, "endpointAnchor");
-
 // src/tools/OpenapiViewer/components/DocsLayout/sidebarLabel.ts
 function longestCommonPrefix(paths) {
   if (paths.length === 0) return "";
@@ -503,6 +661,8 @@ 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,
@@ -510,138 +670,25 @@ var METHOD_ORDER = {
   PATCH: 3,
   DELETE: 4
 };
+var methodRank = /* @__PURE__ */ __name((ep) => METHOD_ORDER[ep.method] ?? 99, "methodRank");
 function groupEndpoints(list) {
-  const map = /* @__PURE__ */ new Map();
-  for (const ep of list) {
-    const arr = map.get(ep.category) ?? [];
-    arr.push(ep);
-    map.set(ep.category, arr);
-  }
-  const groups = Array.from(map.entries()).map(([category, endpoints]) => ({
+  const byCategory = groupBy(list, "category");
+  const all = Object.entries(byCategory).map(([category, endpoints]) => ({
     category,
-    endpoints: [...endpoints].sort((a, b) => {
-      const byPath = a.path.localeCompare(b.path);
-      if (byPath !== 0) return byPath;
-      return (METHOD_ORDER[a.method] ?? 99) - (METHOD_ORDER[b.method] ?? 99);
-    }),
+    endpoints: orderBy(endpoints, ["path", methodRank], ["asc", "asc"]),
     commonPrefix: longestCommonPrefix(endpoints.map((e) => e.path))
   }));
-  groups.sort((a, b) => {
-    if (a.category === "Other") return 1;
-    if (b.category === "Other") return -1;
-    return a.category.localeCompare(b.category);
-  });
-  return groups;
+  const [other, named] = partition(all, (g) => g.category === "Other");
+  return [...sortBy(named, (g) => g.category.toLowerCase()), ...other];
 }
 __name(groupEndpoints, "groupEndpoints");
-function DocsSidebar({
-  info,
-  endpoints,
-  schemas,
-  currentSchemaId,
-  onSchemaChange,
-  activeEndpointId,
-  selectedVersion,
-  onNavigate
-}) {
-  const [search, setSearch] = useState("");
-  const [debounced, setDebounced] = useState("");
-  useEffect(() => {
-    const id = setTimeout(() => setDebounced(search), 120);
-    return () => clearTimeout(id);
-  }, [search]);
-  const filteredGroups = useMemo(() => {
-    let list = deduplicateEndpoints(endpoints, selectedVersion);
-    if (debounced) {
-      const q = debounced.toLowerCase();
-      list = list.filter(
-        (e) => e.summary.toLowerCase().includes(q) || e.name.toLowerCase().includes(q) || e.description.toLowerCase().includes(q) || e.path.toLowerCase().includes(q)
-      );
-    }
-    return groupEndpoints(list);
-  }, [endpoints, debounced, selectedVersion]);
-  const schemaOptions = useMemo(
-    () => schemas.map((s) => ({ value: s.id, label: s.name })),
-    [schemas]
-  );
-  const hasMultipleSchemas = schemas.length > 1;
-  const apiTitle = info?.title ?? "API Reference";
-  return /* @__PURE__ */ jsxs("aside", { className: "flex flex-col min-h-0 border-r bg-muted/10", children: [
-    /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b px-4 h-12 flex items-center gap-2", 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
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "shrink-0 border-b px-3 py-3 space-y-2", children: [
-      hasMultipleSchemas && /* @__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(ScrollArea, { children: filteredGroups.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-10 px-4 text-center text-xs text-muted-foreground", children: debounced ? `No endpoints match "${debounced}"` : "No endpoints in this schema" }) : /* @__PURE__ */ jsx("nav", { className: "py-2", children: filteredGroups.map((group) => /* @__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: group.category }),
-      /* @__PURE__ */ jsx("div", { children: group.endpoints.map((ep) => {
-        const anchor = endpointAnchor(ep);
-        const isActive = activeEndpointId === anchor;
-        const label = sidebarLabel(ep, group.commonPrefix);
-        const tooltip = sidebarTooltip(ep);
-        const useMono = !ep.summary;
-        return /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 350, children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => onNavigate(anchor),
-              "aria-current": isActive ? "location" : void 0,
-              className: cn(
-                "relative group w-full text-left flex items-center gap-2 pl-4 pr-3 py-1.5 transition-colors",
-                isActive ? "bg-primary/10 text-foreground" : "hover:bg-muted/40 text-foreground/75 hover:text-foreground"
-              ),
-              children: [
-                isActive && /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-1 bottom-1 w-0.5 rounded-r bg-primary" }),
-                /* @__PURE__ */ jsx(MethodBadge, { method: ep.method }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "truncate leading-tight flex-1 min-w-0",
-                      useMono ? "font-mono text-[11px]" : "text-[12px]",
-                      isActive && "text-foreground font-medium"
-                    ),
-                    children: label
-                  }
-                )
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", className: "font-mono text-[11px]", children: tooltip })
-        ] }, `${ep.method}-${ep.path}`);
-      }) })
-    ] }, group.category)) }) })
-  ] });
+function buildSchemaSections(sources, endpointsBySchema) {
+  return sources.map((source) => ({
+    source,
+    groups: groupEndpoints(endpointsBySchema[source.id] ?? [])
+  }));
 }
-__name(DocsSidebar, "DocsSidebar");
+__name(buildSchemaSections, "buildSchemaSections");
 var FLAVOUR_LABELS = {
   markdown: {
     title: "Markdown for LLM",
@@ -656,7 +703,7 @@ var FLAVOUR_LABELS = {
     hint: "Full OpenAPI document with $refs."
   }
 };
-function SchemaCopyMenu({ schema, endpoints, baseUrl }) {
+function SchemaCopyMenu({ schema, endpoints, baseUrl, variant = "button" }) {
   const [sizeCache, setSizeCache] = useState({});
   const [justCopied, setJustCopied] = useState(null);
   const [open, setOpen] = useState(false);
@@ -674,20 +721,36 @@ function SchemaCopyMenu({ schema, endpoints, baseUrl }) {
     async (flavour) => {
       if (!isReady) return;
       const text = build(flavour);
+      const label = FLAVOUR_LABELS[flavour].title;
       try {
         await navigator.clipboard.writeText(text);
-        setSizeCache((prev) => ({ ...prev, [flavour]: formatBytes(text) }));
+        const size = formatBytes(text);
+        setSizeCache((prev) => ({ ...prev, [flavour]: size }));
         setJustCopied(flavour);
         setTimeout(() => setJustCopied(null), 1500);
         setOpen(false);
-      } catch {
+        toast.success(`Copied ${label}`, { description: size });
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Clipboard permission denied";
+        toast.error("Copy failed", { description: message });
       }
     },
     [build, isReady]
   );
   const flavours = useMemo(() => ["markdown", "compact", "raw"], []);
   return /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1.5 text-xs", disabled: !isReady, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: variant === "icon" ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-7 w-7 shrink-0",
+        disabled: !isReady,
+        title: "Copy schema for AI",
+        "aria-label": "Copy schema for AI",
+        children: /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5" })
+      }
+    ) : /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1.5 text-xs", disabled: !isReady, children: [
       /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3" }),
       "Copy for AI",
       /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 opacity-60" })
@@ -725,6 +788,296 @@ function SchemaCopyMenu({ schema, endpoints, baseUrl }) {
   ] });
 }
 __name(SchemaCopyMenu, "SchemaCopyMenu");
+var METHOD_FILTERS = ["ALL", "GET", "POST", "PUT", "PATCH", "DELETE"];
+function filterEndpoints(list, query, method) {
+  let out = list;
+  if (method !== "ALL") {
+    out = out.filter((e) => e.method === method);
+  }
+  if (query) {
+    const q = query.toLowerCase();
+    out = out.filter(
+      (e) => e.summary.toLowerCase().includes(q) || e.name.toLowerCase().includes(q) || e.description.toLowerCase().includes(q) || e.path.toLowerCase().includes(q)
+    );
+  }
+  return out;
+}
+__name(filterEndpoints, "filterEndpoints");
+function buildCategory(group, activeEndpointId, schemaId, keyPrefix) {
+  const rows = group.endpoints.map((ep) => {
+    const anchor = endpointAnchor(ep, schemaId ?? ep.schemaId ?? null);
+    return {
+      key: `${ep.method}-${ep.path}`,
+      anchor,
+      schemaId: schemaId ?? ep.schemaId ?? null,
+      label: sidebarLabel(ep, group.commonPrefix),
+      tooltip: sidebarTooltip(ep),
+      method: ep.method,
+      useMono: !ep.summary,
+      isActive: activeEndpointId === anchor
+    };
+  });
+  return {
+    key: `${keyPrefix}${group.category}`,
+    category: group.category,
+    rows
+  };
+}
+__name(buildCategory, "buildCategory");
+var emptyTextFor = /* @__PURE__ */ __name((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");
+function buildFlatVM(endpoints, selectedVersion, query, method, activeEndpointId) {
+  const filtered = filterEndpoints(deduplicateEndpoints(endpoints, selectedVersion), query, method);
+  const groups = groupEndpoints(filtered);
+  return {
+    kind: "flat",
+    categories: groups.map((g) => buildCategory(g, activeEndpointId, null, "")),
+    emptyText: emptyTextFor(query, method, "No endpoints in this schema")
+  };
+}
+__name(buildFlatVM, "buildFlatVM");
+function buildSectionsVM(schemas, endpointsBySchema, selectedVersion, query, method, activeEndpointId) {
+  const filteredMap = {};
+  for (const src of schemas) {
+    const raw = endpointsBySchema[src.id] ?? [];
+    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}-`))
+  }));
+  return {
+    kind: "sections",
+    sections,
+    emptyText: emptyTextFor(query, method, "No endpoints in any schema")
+  };
+}
+__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
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 350, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        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",
+          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: cn(
+                "line-clamp-2 leading-snug flex-1 min-w-0",
+                row.useMono ? "font-mono text-[11px] break-all" : "text-[12px]",
+                row.isActive && "text-foreground font-medium"
+              ),
+              children: row.label
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", className: "font-mono text-[11px]", children: row.tooltip })
+  ] });
+}, "EndpointRow"));
+
+// src/tools/OpenapiViewer/utils/scrollParent.ts
+function getScrollParent(el) {
+  if (typeof window === "undefined") return null;
+  if (!el) return window;
+  let cur = el.parentElement;
+  while (cur && cur !== document.body && cur !== document.documentElement) {
+    const style = getComputedStyle(cur);
+    const overflowY = style.overflowY;
+    const canScroll = (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") && cur.scrollHeight > cur.clientHeight;
+    if (canScroll) return cur;
+    cur = cur.parentElement;
+  }
+  return window;
+}
+__name(getScrollParent, "getScrollParent");
+function getScrollTop(target) {
+  return target === window ? window.scrollY : target.scrollTop;
+}
+__name(getScrollTop, "getScrollTop");
+function getViewportHeight(target) {
+  return target === window ? window.innerHeight : target.clientHeight;
+}
+__name(getViewportHeight, "getViewportHeight");
+function getTargetTop(target) {
+  return target === window ? 0 : target.getBoundingClientRect().top;
+}
+__name(getTargetTop, "getTargetTop");
+function scrollTargetTo(target, top) {
+  if (target === window) {
+    window.scrollTo({ top, behavior: "smooth" });
+    return;
+  }
+  target.scrollTop = top;
+}
+__name(scrollTargetTo, "scrollTargetTo");
 function ApiIntroSection({ info, schema, endpoints, resolvedBaseUrl }) {
   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: [
@@ -828,8 +1181,9 @@ function schemaToFields(schema, prefix = "", depth = 0) {
   return rows;
 }
 __name(schemaToFields, "schemaToFields");
-function EndpointDoc({ endpoint, isLoadedInPlayground, onTryIt }) {
-  const anchor = endpointAnchor(endpoint);
+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 [copied, setCopied] = useState(false);
@@ -847,6 +1201,7 @@ function EndpointDoc({ endpoint, isLoadedInPlayground, onTryIt }) {
     {
       id: anchor,
       "data-endpoint-anchor": anchor,
+      "data-schema-id": scopedSchemaId ?? "",
       className: "scroll-mt-24 py-10 first:pt-0",
       children: [
         /* @__PURE__ */ jsxs("header", { className: "space-y-4", children: [
@@ -1007,52 +1362,103 @@ function StatusTag({ code }) {
   ), children: code });
 }
 __name(StatusTag, "StatusTag");
-var DocsView = React6.forwardRef(/* @__PURE__ */ __name(function DocsView2({
-  info,
-  rawSchema,
-  resolvedBaseUrl,
-  endpoints,
-  selectedVersion,
-  loadedEndpoint,
-  onTryEndpoint,
-  onActiveChange
-}, ref) {
+var readNavbarOffset = /* @__PURE__ */ __name(() => {
+  if (typeof document === "undefined") return 0;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue("--navbar-height");
+  const parsed = parseInt(raw || "", 10);
+  return Number.isFinite(parsed) ? parsed : 0;
+}, "readNavbarOffset");
+var isSameEndpoint = /* @__PURE__ */ __name((a, b) => a !== null && a.method === b.method && a.path === b.path, "isSameEndpoint");
+function buildEndpointRow(ep, loadedEndpoint, schemaId) {
+  const keySchema = schemaId ? `${schemaId}-` : "";
+  return {
+    key: `${keySchema}${ep.method}-${ep.path}`,
+    endpoint: ep,
+    isLoaded: isSameEndpoint(loadedEndpoint, ep),
+    schemaId
+  };
+}
+__name(buildEndpointRow, "buildEndpointRow");
+function buildSchemaSectionVM(entry, selectedVersion, loadedEndpoint) {
+  const title = entry.info?.title ?? entry.source.name;
+  const version = entry.info?.version ?? null;
+  const description = entry.info?.description ?? null;
+  let state;
+  if (entry.loading) {
+    state = { kind: "loading" };
+  } else if (entry.error) {
+    state = { kind: "error", message: entry.error };
+  } else {
+    const visible = deduplicateEndpoints(entry.endpoints, selectedVersion);
+    state = visible.length === 0 ? { kind: "empty" } : {
+      kind: "ready",
+      rows: visible.map((ep) => buildEndpointRow(ep, loadedEndpoint, entry.source.id))
+    };
+  }
+  return {
+    schemaId: entry.source.id,
+    title,
+    version,
+    description,
+    state,
+    rawSchema: entry.rawSchema,
+    baseUrl: entry.resolvedBaseUrl,
+    allEndpoints: entry.endpoints
+  };
+}
+__name(buildSchemaSectionVM, "buildSchemaSectionVM");
+var DocsView = React6.forwardRef(/* @__PURE__ */ __name(function DocsView2(props, ref) {
   const scrollRef = useRef(null);
-  const visibleEndpoints = useMemo(
-    () => deduplicateEndpoints(endpoints, selectedVersion),
-    [endpoints, selectedVersion]
-  );
-  const scrollToAnchor = useCallback((anchor) => {
-    const root = scrollRef.current;
-    if (!root) return;
-    const el = root.querySelector(`[data-endpoint-anchor="${anchor}"]`);
-    if (!el) return;
-    el.scrollIntoView({ behavior: "smooth", block: "start" });
+  const scrollTargetRef = useRef(null);
+  const { onActiveChange } = props;
+  const ensureScrollTarget = useCallback(() => {
+    if (scrollTargetRef.current) return scrollTargetRef.current;
+    if (!scrollRef.current) return null;
+    scrollTargetRef.current = getScrollParent(scrollRef.current);
+    return scrollTargetRef.current;
   }, []);
+  const scrollToAnchor = useCallback(
+    (anchor) => {
+      const root = scrollRef.current;
+      if (!root) return;
+      const el = root.querySelector(`[data-endpoint-anchor="${anchor}"]`);
+      if (!el) return;
+      const target = ensureScrollTarget();
+      if (!target) return;
+      const navbar = readNavbarOffset();
+      const top = el.getBoundingClientRect().top - getTargetTop(target) + getScrollTop(target) - navbar - 8;
+      scrollTargetTo(target, top);
+    },
+    [ensureScrollTarget]
+  );
   React6.useImperativeHandle(ref, () => ({ scrollToAnchor }), [scrollToAnchor]);
   useEffect(() => {
     const root = scrollRef.current;
     if (!root) return;
+    const target = ensureScrollTarget();
+    if (!target) return;
     let rafId = 0;
     let lastActive = null;
     const compute = /* @__PURE__ */ __name(() => {
       rafId = 0;
       const sections = root.querySelectorAll("[data-endpoint-anchor]");
       if (sections.length === 0) return;
-      const rootTop = root.getBoundingClientRect().top;
-      const threshold = rootTop + root.clientHeight * 0.25;
+      const navbar = readNavbarOffset();
+      const viewportTop = getTargetTop(target);
+      const threshold = viewportTop + navbar + getViewportHeight(target) * 0.25;
       let active = null;
       for (const s of Array.from(sections)) {
         const top = s.getBoundingClientRect().top;
         if (top <= threshold) {
-          active = s.dataset.endpointAnchor ?? null;
+          active = s;
         } else {
           break;
         }
       }
-      if (active !== lastActive) {
-        lastActive = active;
-        onActiveChange(active);
+      const anchor = active?.dataset.endpointAnchor ?? null;
+      if (anchor !== lastActive) {
+        lastActive = anchor;
+        onActiveChange(anchor, active?.dataset.schemaId || null);
       }
     }, "compute");
     const onScroll = /* @__PURE__ */ __name(() => {
@@ -1060,13 +1466,39 @@ var DocsView = React6.forwardRef(/* @__PURE__ */ __name(function DocsView2({
       rafId = requestAnimationFrame(compute);
     }, "onScroll");
     compute();
-    root.addEventListener("scroll", onScroll, { passive: true });
+    target.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll, { passive: true });
     return () => {
-      root.removeEventListener("scroll", onScroll);
+      target.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
       if (rafId) cancelAnimationFrame(rafId);
     };
-  }, [visibleEndpoints, onActiveChange]);
-  return /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto min-h-0", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-[860px] px-6 md:px-10 lg:px-14 py-12", children: [
+  }, [onActiveChange, ensureScrollTarget, props]);
+  if (props.grouping === "sections") {
+    return /* @__PURE__ */ jsx(SectionsBody, { scrollRef, ...props });
+  }
+  return /* @__PURE__ */ jsx(SelectorBody, { scrollRef, ...props });
+}, "DocsView"));
+function SelectorBody({
+  scrollRef,
+  info,
+  rawSchema,
+  resolvedBaseUrl,
+  endpoints,
+  selectedVersion,
+  loadedEndpoint,
+  onTryEndpoint
+}) {
+  const visibleEndpoints = useMemo(
+    () => deduplicateEndpoints(endpoints, selectedVersion),
+    [endpoints, selectedVersion]
+  );
+  const rows = useMemo(
+    () => visibleEndpoints.map((ep) => buildEndpointRow(ep, loadedEndpoint, ep.schemaId ?? null)),
+    [visibleEndpoints, loadedEndpoint]
+  );
+  const isEmpty = rows.length === 0;
+  return /* @__PURE__ */ jsx("div", { ref: scrollRef, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-[860px] px-6 md:px-10 lg:px-14 py-12", children: [
     info && /* @__PURE__ */ jsx(
       ApiIntroSection,
       {
@@ -1076,20 +1508,96 @@ var DocsView = React6.forwardRef(/* @__PURE__ */ __name(function DocsView2({
         resolvedBaseUrl
       }
     ),
-    visibleEndpoints.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: "No endpoints to display." }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/60", children: visibleEndpoints.map((ep) => {
-      const isLoaded = loadedEndpoint?.method === ep.method && loadedEndpoint?.path === ep.path;
-      return /* @__PURE__ */ jsx(
+    isEmpty ? /* @__PURE__ */ jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: "No endpoints to display." }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/60", children: rows.map((row) => /* @__PURE__ */ jsx(
+      EndpointDoc,
+      {
+        endpoint: row.endpoint,
+        isLoadedInPlayground: row.isLoaded,
+        onTryIt: () => onTryEndpoint(row.endpoint),
+        schemaId: row.schemaId
+      },
+      row.key
+    )) })
+  ] }) });
+}
+__name(SelectorBody, "SelectorBody");
+function SectionsBody({
+  scrollRef,
+  schemasData,
+  selectedVersion,
+  loadedEndpoint,
+  onTryEndpoint
+}) {
+  const sections = useMemo(
+    () => schemasData.map((e) => buildSchemaSectionVM(e, selectedVersion, loadedEndpoint)),
+    [schemasData, selectedVersion, loadedEndpoint]
+  );
+  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({
+  section,
+  onTryEndpoint
+}) {
+  const canCopy = section.rawSchema !== null && section.allEndpoints.length > 0;
+  return /* @__PURE__ */ jsxs("section", { "data-schema-anchor": section.schemaId, className: "scroll-mt-20", children: [
+    /* @__PURE__ */ jsxs("header", { className: "mb-8 pb-4 border-b", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: section.title }),
+          section.version && /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs text-muted-foreground/70", children: [
+            "v",
+            section.version
+          ] })
+        ] }),
+        canCopy && /* @__PURE__ */ jsx(
+          SchemaCopyMenu,
+          {
+            schema: section.rawSchema,
+            endpoints: section.allEndpoints,
+            baseUrl: section.baseUrl
+          }
+        )
+      ] }),
+      section.description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground whitespace-pre-wrap", children: section.description })
+    ] }),
+    /* @__PURE__ */ jsx(SchemaSectionStateView, { section, onTryEndpoint })
+  ] });
+}, "SchemaSectionView"));
+function SchemaSectionStateView({
+  section,
+  onTryEndpoint
+}) {
+  switch (section.state.kind) {
+    case "loading":
+      return /* @__PURE__ */ jsxs("div", { className: "py-8 text-center text-sm text-muted-foreground", children: [
+        "Loading ",
+        section.title,
+        "\u2026"
+      ] });
+    case "error":
+      return /* @__PURE__ */ jsxs("div", { className: "py-8 text-center text-sm text-destructive", children: [
+        "Failed to load ",
+        section.title,
+        ": ",
+        section.state.message
+      ] });
+    case "empty":
+      return /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: "No endpoints in this schema." });
+    case "ready":
+      return /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/60", children: section.state.rows.map((row) => /* @__PURE__ */ jsx(
         EndpointDoc,
         {
-          endpoint: ep,
-          isLoadedInPlayground: isLoaded,
-          onTryIt: () => onTryEndpoint(ep)
+          endpoint: row.endpoint,
+          isLoadedInPlayground: row.isLoaded,
+          onTryIt: () => onTryEndpoint(row.endpoint),
+          schemaId: row.schemaId
         },
-        `${ep.method}-${ep.path}`
-      );
-    }) })
-  ] }) });
-}, "DocsView"));
+        row.key
+      )) });
+  }
+}
+__name(SchemaSectionStateView, "SchemaSectionStateView");
 var MAX_DEPTH2 = 6;
 function defaultForSchema(schema) {
   if (!schema) return null;
@@ -1882,6 +2390,9 @@ var DocsLayout = /* @__PURE__ */ __name(() => {
   const { state, config, setSelectedEndpoint } = usePlaygroundContext();
   const isDesktop = useMediaQuery("(min-width: 1024px)");
   const isMobile = !isDesktop;
+  const grouping = config.schemaGrouping ?? "selector";
+  const preloadAll = grouping === "sections";
+  const urlSyncEnabled = typeof config.urlSync === "boolean" ? config.urlSync : Boolean(config.urlSync?.enabled);
   const {
     endpoints,
     schemaInfo,
@@ -1891,16 +2402,26 @@ var DocsLayout = /* @__PURE__ */ __name(() => {
     error,
     schemas,
     currentSchema,
-    setCurrentSchema
+    setCurrentSchema,
+    schemasData
   } = useOpenApiSchema({
     schemas: config.schemas,
     defaultSchemaId: config.defaultSchemaId,
-    baseUrl: config.baseUrl
+    baseUrl: config.baseUrl,
+    preloadAll
   });
   const [activeAnchor, setActiveAnchor] = useState(null);
+  const [activeSchemaId, setActiveSchemaId] = useState(null);
   const [sheetOpen, setSheetOpen] = useState(false);
   const docsRef = useRef(null);
   const slideOpen = !isMobile && state.selectedEndpoint !== null;
+  const endpointsBySchema = useMemo(() => {
+    if (grouping !== "sections") return {};
+    const byId = keyBy(schemasData, (e) => e.source.id);
+    const out = {};
+    for (const src of schemas) out[src.id] = byId[src.id]?.endpoints ?? [];
+    return out;
+  }, [grouping, schemasData, schemas]);
   const handleTry = useCallback(
     (ep) => {
       setSelectedEndpoint(ep);
@@ -1911,29 +2432,71 @@ var DocsLayout = /* @__PURE__ */ __name(() => {
   const handleCloseSlide = useCallback(() => {
     setSelectedEndpoint(null);
   }, [setSelectedEndpoint]);
-  const handleNavigate = useCallback((anchor) => {
-    docsRef.current?.scrollToAnchor(anchor);
+  const handleNavigate = useCallback(
+    (anchor, schemaId) => {
+      if (schemaId && schemaId !== currentSchema?.id && grouping === "selector") {
+        setCurrentSchema(schemaId);
+        requestAnimationFrame(() => {
+          docsRef.current?.scrollToAnchor(anchor);
+        });
+        return;
+      }
+      docsRef.current?.scrollToAnchor(anchor);
+    },
+    [currentSchema?.id, grouping, setCurrentSchema]
+  );
+  const handleActiveChange = useCallback((anchor, schemaId) => {
+    setActiveAnchor(anchor);
+    setActiveSchemaId(schemaId);
   }, []);
-  if (loading) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "grid grid-cols-[260px_1fr] min-h-0 overflow-hidden",
-        style: { height: "calc(100dvh - var(--navbar-height, 64px))" },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "border-r p-3 space-y-1.5", children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full rounded" }, i)) }),
-          /* @__PURE__ */ jsxs("div", { className: "p-8 space-y-4", children: [
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-1/2" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
-            /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
-            /* @__PURE__ */ jsx("div", { className: "mt-8 space-y-6", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-              /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-1/3" }),
-              /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" })
-            ] }, i)) })
-          ] })
-        ]
+  const effectiveSchemaId = grouping === "sections" ? activeSchemaId : currentSchema?.id ?? null;
+  const handleHashTarget = useCallback(
+    (target) => {
+      if (!target.schemaId && !target.anchor) return;
+      const matched = target.schemaId ? schemas.find((s) => s.id === target.schemaId || slugifySchemaId(s.id) === target.schemaId) : null;
+      const needsSchemaSwitch = matched && grouping === "selector" && matched.id !== currentSchema?.id;
+      if (needsSchemaSwitch) {
+        setCurrentSchema(matched.id);
       }
-    );
+      if (target.anchor) {
+        const anchor = target.anchor;
+        if (needsSchemaSwitch) {
+          requestAnimationFrame(() => {
+            docsRef.current?.scrollToAnchor(anchor);
+          });
+        } else {
+          docsRef.current?.scrollToAnchor(anchor);
+        }
+      }
+    },
+    [schemas, grouping, currentSchema?.id, setCurrentSchema]
+  );
+  useDocsUrlSync({
+    enabled: urlSyncEnabled,
+    currentSchemaId: effectiveSchemaId,
+    activeAnchor,
+    onHashTarget: handleHashTarget
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[260px_1fr] items-start", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "sticky top-[var(--navbar-height,64px)] border-r p-3 space-y-1.5 overflow-y-auto",
+          style: { height: "calc(100dvh - var(--navbar-height, 64px))" },
+          children: Array.from({ length: 12 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full rounded" }, i))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "p-8 space-y-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-1/2" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-8 space-y-6", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-1/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" })
+        ] }, i)) })
+      ] })
+    ] });
   }
   if (error) {
     return /* @__PURE__ */ jsx(
@@ -1949,40 +2512,44 @@ var DocsLayout = /* @__PURE__ */ __name(() => {
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx(EndpointDraftSync, { schemaId: currentSchema?.id ?? null }),
+      grouping === "sections" ? /* @__PURE__ */ jsx(
+        DocsView,
+        {
+          ref: docsRef,
+          grouping: "sections",
+          schemasData,
+          selectedVersion: state.selectedVersion,
+          loadedEndpoint: state.selectedEndpoint,
+          onTryEndpoint: handleTry,
+          onActiveChange: handleActiveChange
+        }
+      ) : /* @__PURE__ */ jsx(
+        DocsView,
+        {
+          ref: docsRef,
+          info: schemaInfo,
+          rawSchema,
+          resolvedBaseUrl,
+          endpoints,
+          selectedVersion: state.selectedVersion,
+          loadedEndpoint: state.selectedEndpoint,
+          onTryEndpoint: handleTry,
+          onActiveChange: handleActiveChange
+        }
+      ),
+      /* @__PURE__ */ jsx(TryItSheet, { open: sheetOpen, onOpenChange: setSheetOpen })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 350, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[260px_minmax(0,1fr)] items-start", children: [
+    /* @__PURE__ */ jsx(EndpointDraftSync, { schemaId: currentSchema?.id ?? null }),
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: "flex flex-col overflow-hidden",
+        className: "sticky top-[var(--navbar-height,64px)]",
         style: { height: "calc(100dvh - var(--navbar-height, 64px))" },
-        children: [
-          /* @__PURE__ */ jsx(EndpointDraftSync, { schemaId: currentSchema?.id ?? null }),
-          /* @__PURE__ */ jsx(
-            DocsView,
-            {
-              ref: docsRef,
-              info: schemaInfo,
-              rawSchema,
-              resolvedBaseUrl,
-              endpoints,
-              selectedVersion: state.selectedVersion,
-              loadedEndpoint: state.selectedEndpoint,
-              onTryEndpoint: handleTry,
-              onActiveChange: setActiveAnchor
-            }
-          ),
-          /* @__PURE__ */ jsx(TryItSheet, { open: sheetOpen, onOpenChange: setSheetOpen })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 350, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "grid grid-cols-[260px_minmax(0,1fr)] min-h-0 overflow-hidden",
-      style: { height: "calc(100dvh - var(--navbar-height, 64px))" },
-      children: [
-        /* @__PURE__ */ jsx(EndpointDraftSync, { schemaId: currentSchema?.id ?? null }),
-        /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(
           DocsSidebar,
           {
             info: schemaInfo,
@@ -1992,29 +2559,44 @@ var DocsLayout = /* @__PURE__ */ __name(() => {
             onSchemaChange: setCurrentSchema,
             activeEndpointId: activeAnchor,
             selectedVersion: state.selectedVersion,
-            onNavigate: handleNavigate
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          DocsView,
-          {
-            ref: docsRef,
-            info: schemaInfo,
+            onNavigate: handleNavigate,
+            grouping,
+            endpointsBySchema,
             rawSchema,
-            resolvedBaseUrl,
-            endpoints,
-            selectedVersion: state.selectedVersion,
-            loadedEndpoint: state.selectedEndpoint,
-            onTryEndpoint: handleTry,
-            onActiveChange: setActiveAnchor
+            resolvedBaseUrl
           }
-        ),
-        /* @__PURE__ */ jsx(SlideInPlayground, { open: slideOpen, onClose: handleCloseSlide })
-      ]
-    }
-  ) });
+        )
+      }
+    ),
+    grouping === "sections" ? /* @__PURE__ */ jsx(
+      DocsView,
+      {
+        ref: docsRef,
+        grouping: "sections",
+        schemasData,
+        selectedVersion: state.selectedVersion,
+        loadedEndpoint: state.selectedEndpoint,
+        onTryEndpoint: handleTry,
+        onActiveChange: handleActiveChange
+      }
+    ) : /* @__PURE__ */ jsx(
+      DocsView,
+      {
+        ref: docsRef,
+        info: schemaInfo,
+        rawSchema,
+        resolvedBaseUrl,
+        endpoints,
+        selectedVersion: state.selectedVersion,
+        loadedEndpoint: state.selectedEndpoint,
+        onTryEndpoint: handleTry,
+        onActiveChange: handleActiveChange
+      }
+    ),
+    /* @__PURE__ */ jsx(SlideInPlayground, { open: slideOpen, onClose: handleCloseSlide })
+  ] }) });
 }, "DocsLayout");
 
 export { DocsLayout };
-//# sourceMappingURL=DocsLayout-ERETJLLV.mjs.map
-//# sourceMappingURL=DocsLayout-ERETJLLV.mjs.map
+//# sourceMappingURL=DocsLayout-TKJQ5W5E.mjs.map
+//# sourceMappingURL=DocsLayout-TKJQ5W5E.mjs.map