@djangocfg/ui-tools 2.1.284 → 2.1.286

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.284",
+  "version": "2.1.286",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -90,8 +90,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.284",
-    "@djangocfg/ui-core": "^2.1.284",
+    "@djangocfg/i18n": "^2.1.286",
+    "@djangocfg/ui-core": "^2.1.286",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "react": "^19.1.0",
@@ -133,10 +133,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.284",
+    "@djangocfg/i18n": "^2.1.286",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.284",
-    "@djangocfg/ui-core": "^2.1.284",
+    "@djangocfg/typescript-config": "^2.1.286",
+    "@djangocfg/ui-core": "^2.1.286",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",

package/src/tools/OpenapiViewer/.claude/.sidecar/activity.jsonl

@@ -0,0 +1,4 @@
+{"ts":"2026-04-22T13:11:47.381936Z","action":"map","tokens":2297,"model":"deepseek/deepseek-v3.2-20251201","details":{"directories":7,"entry_points":7}}
+{"ts":"2026-04-22T13:12:54.534624Z","action":"map","tokens":0,"model":"cache","details":{"directories":7,"entry_points":5}}
+{"ts":"2026-04-22T13:14:16.326555Z","action":"map","tokens":0,"model":"cache","details":{"directories":7,"entry_points":5}}
+{"ts":"2026-04-22T13:15:40.112071Z","action":"map","tokens":0,"model":"cache","details":{"directories":7,"entry_points":5}}

package/src/tools/OpenapiViewer/.claude/.sidecar/map_cache.json

@@ -0,0 +1,30 @@
+{
+  ".": {
+    "hash": "1f34f83a5cbb5246",
+    "annotation": "Primary component exports and entry points for the OpenAPI viewer library."
+  },
+  "components": {
+    "hash": "dcdc3e0b3362edb8",
+    "annotation": "Re-export barrel file for the library's public component APIs."
+  },
+  "components/DocsLayout": {
+    "hash": "c22ac1e1ddff2ec6",
+    "annotation": "Main documentation layout component and its sub-components, handling sidebar, API display, and interactive playground sheet."
+  },
+  "components/shared": {
+    "hash": "9dc41c51197bb209",
+    "annotation": "Shared UI panels (request/response editors) used by the DocsLayout and mobile interactions."
+  },
+  "context": {
+    "hash": "1d8732f878128b05",
+    "annotation": "React context for managing the playground state, such as endpoint drafts and API calls."
+  },
+  "hooks": {
+    "hash": "b1e8093c6694ba36",
+    "annotation": "Custom React hooks for managing state like API schemas, endpoint drafts, and responsive behavior."
+  },
+  "utils": {
+    "hash": "e88f8c7b59cf3776",
+    "annotation": "Utility functions for API key management, URL building, schema exporting, and data formatting."
+  }
+}

package/src/tools/OpenapiViewer/.claude/.sidecar/usage.json

@@ -0,0 +1,5 @@
+{
+  "date": "2026-04-22",
+  "tokens": 2297,
+  "calls": 4
+}

package/src/tools/OpenapiViewer/.claude/project-map.md

@@ -0,0 +1,23 @@
+# Project Map
+> react-component-library — An interactive OpenAPI 3.x viewer component with a Stripe/Scalar-style documentation layout and integrated playground.
+> Generated: 2026-04-22T13:15:40.111463+00:00
+
+## Structure
+
+- `components/` — Re-export barrel file for the library's public component APIs. **[entry: index.ts]**
+  - `components/DocsLayout/` — Main documentation layout component and its sub-components, handling sidebar, API display, and interactive playground sheet. **[entry: index.tsx]**
+  - `components/shared/` — Shared UI panels (request/response editors) used by the DocsLayout and mobile interactions.
+- `context/` — React context for managing the playground state, such as endpoint drafts and API calls.
+- `hooks/` — Custom React hooks for managing state like API schemas, endpoint drafts, and responsive behavior. **[entry: index.ts]**
+- `utils/` — Utility functions for API key management, URL building, schema exporting, and data formatting. **[entry: index.ts]**
+
+## Entry Points
+
+- `./index.tsx`
+- `components/index.ts`
+- `components/DocsLayout/index.tsx`
+- `hooks/index.ts`
+- `utils/index.ts`
+
+---
+Model: cache | Tokens: 0

package/src/tools/OpenapiViewer/OpenapiViewer.story.tsx

@@ -6,7 +6,8 @@ import type { PlaygroundConfig } from './types';
 export default defineStory({
   title: 'Tools/OpenapiViewer',
   component: Playground,
-  description: 'Interactive OpenAPI schema viewer & playground. Browse endpoints, build requests, test responses.',
+  description:
+    'Interactive OpenAPI schema viewer. Sidebar + docs longread with a slide-in two-column playground (Request + Response) when an endpoint is selected.',
 });
 
 // ============================================================================
@@ -43,7 +44,7 @@ const MANY_SCHEMAS = [
 // ============================================================================
 
 /**
- * Interactive playground with controls for schema selection and default schema.
+ * Interactive — default schema is adjustable.
  */
 export const Interactive = () => {
   const [defaultSchema] = useSelect('defaultSchema', {
@@ -65,6 +66,31 @@ export const Interactive = () => {
   );
 };
 
+/**
+ * With baseUrl override — forces a specific request host, ignoring
+ * `schema.servers[0].url`. Useful when docs are hosted on a different
+ * origin than the API, or when the schema has no servers entry.
+ */
+export const WithBaseUrl = () => {
+  const [baseUrl] = useValue('baseUrl', {
+    defaultValue: 'https://petstore3.swagger.io/api/v3',
+    label: 'Base URL',
+    description: 'Overrides schema.servers[0].url for every request',
+  });
+
+  const config: PlaygroundConfig = {
+    schemas: [PETSTORE_SCHEMA],
+    defaultSchemaId: 'petstore',
+    baseUrl,
+  };
+
+  return (
+    <div className="min-h-[600px]">
+      <Playground config={config} />
+    </div>
+  );
+};
+
 /**
  * Single schema — no Combobox switcher shown (schemas.length === 1).
  */

package/src/tools/OpenapiViewer/README.md

@@ -1,6 +1,6 @@
 # OpenapiViewer
 
-An interactive OpenAPI 3.x playground — browse endpoints, build requests, and inspect responses. Designed as a minimal, three-column developer tool (similar in spirit to Swagger UI / Scalar, but embedded in the app shell).
+Interactive OpenAPI 3.x viewer in a Stripe/Scalar-style layout: sidebar with grouped endpoints on the left, scrolling documentation longread in the middle, and a slide-in two-column playground that opens on demand from the right.
 
 ## Usage
 
@@ -17,7 +17,7 @@ import { Playground } from '@djangocfg/ui-tools/openapi';
 />
 ```
 
-For lazy-loading (recommended in production):
+Lazy variant for production (~400KB code-split):
 
 ```tsx
 import { LazyOpenapiViewer } from '@djangocfg/ui-tools/openapi/lazy';
@@ -27,35 +27,65 @@ import { LazyOpenapiViewer } from '@djangocfg/ui-tools/openapi/lazy';
 
 ## Layout
 
-### Desktop (≥ 768 px) — three columns
+Base state — two columns, docs on the full remaining width:
 
 ```
-┌──────────────────┬─────────────────────┬─────────────────────┐
-│   ENDPOINTS      │   REQUEST           │   RESPONSE          │
-│                  │                     │                     │
-│  🔍 Search  [⊞] │  POST /api/v3/user  │  200 OK   0.4 KB   │
-│                  │  ─────────────────  │  ─────────────────  │
-│  POST /pet       │  Path Parameters    │  { "id": 1, ... }  │
-│  GET  /pet/…     │  Query Parameters   │                     │
-│  PUT  /pet/…     │  Body               │                     │
-│  …               │  ▶ Auth & Headers   │                     │
-│                  │  ▶ cURL             │                     │
-│                  │  ─────────────────  │                     │
-│                  │  [Send Request]     │                     │
-└──────────────────┴─────────────────────┴─────────────────────┘
+┌───────────────┬──────────────────────────────────────────────────┐
+│ SIDEBAR       │ DOCS (longread, scrolls)                         │
+│ 260 px        │ 1fr                                              │
+│               │                                                  │
+│ 🔍 Search     │ # Petstore API                                   │
+│ Pets          │ Intro from info.description                      │
+│  Add a pet    │                                                  │
+│  Find by ID   │ ## POST /pet                                     │
+│  …            │ Description, parameters (form table), body       │
+│ Users         │ fields, responses.                               │
+│  …            │                                                  │
+└───────────────┴──────────────────────────────────────────────────┘
 ```
 
-### Mobile (< 768 px) — three tabs
+When **Try it** is clicked, a slide-in playground opens from the right. It starts narrow (Request only) and widens to two columns once a response arrives:
 
-Tab bar at the top: **Endpoints → Request → Response**.  
-Tabs switch automatically when an endpoint is selected and after a successful request.
+```
+┌───────────────┬──────────────────┬─ PLAYGROUND (slide-in) ───────┐
+│ SIDEBAR       │ DOCS             │ Request          │ Response   │
+│               │                  │ Form body        │ 200 OK     │
+│               │                  │ Auth & Headers   │ JsonTree   │
+│               │                  │ cURL             │            │
+│               │                  │      [ Send Request ]         │
+└───────────────┴──────────────────┴───────────────────────────────┘
+```
+
+- Sidebar click → smooth-scroll to that section (no playground).
+- Scrollspy highlights the active section in the sidebar as you read.
+- Per-endpoint **Try it** loads the endpoint and slides the playground in.
+- Widths are `clamp()`-driven: narrow ≈ `clamp(380px, 30vw, 480px)`, wide ≈ `clamp(720px, 60vw, 1280px)`.
+- Close with `×` or `Esc`. On viewports below 1024px the panel becomes a `ResponsiveSheet` (mobile-friendly bottom drawer).
+
+## Request body — form-first
+
+When the OpenAPI schema describes the body, the playground renders a **form** built from `schema.properties`: primitives get typed inputs, enums become dropdowns, arrays have add/remove, nested objects indent. A `Form / JSON` toggle in the Body section lets you drop into raw JSON for corner cases. Body state is always stored as JSON under the hood, so toggling views is lossless.
+
+The docs page mirrors this by rendering a **fields table** of the same schema (name, type, required, description) — no more opaque `object Created user object`.
+
+## Copy for AI
+
+Each endpoint has a Copy button that serialises just that endpoint as compact markdown — good for pasting into an LLM prompt without blowing the context window. The API intro section has a Copy-schema dropdown with three flavours (raw JSON, compact dereferenced JSON, markdown summary) and shows byte size after the first copy so you can pick one that fits.
+
+Auth values (API keys, Bearer tokens) are never included in any export.
+
+## Drafts & auth persistence
+
+- **Per-endpoint drafts** (parameters + body) are saved to `localStorage` under `openapi-playground:draft:{schemaId}:{method}:{path}`. Switching endpoints and coming back restores your inputs; reloading the page keeps them too.
+- **Auth session** (selected API key, manual Bearer token) lives in `sessionStorage` under `openapi-playground:auth:*`. Survives a reload within the same tab, dies when the tab closes — safer default for secrets than `localStorage`.
+- A small **Reset** button in the Request panel clears the current endpoint's draft (parameters + body) without touching auth.
 
 ## File Structure
 
 ```
 OpenapiViewer/
-├── index.tsx                    # Main export: <Playground config={…} />
-├── lazy.tsx                     # Lazy-loaded variant: <LazyOpenapiViewer />
+├── index.tsx                    # <Playground config={…} />
+├── lazy.tsx                     # <LazyOpenapiViewer />
 ├── types.ts                     # All TypeScript types
 ├── constants.ts                 # HTTP method/status colour maps
 ├── README.md                    # ← you are here
@@ -64,58 +94,81 @@ OpenapiViewer/
 │   └── PlaygroundContext.tsx    # Global state (endpoint, request, response, auth)
 │
 ├── hooks/
-│   ├── useOpenApiSchema.ts      # Fetches & parses OpenAPI schema; caches per URL
-│   └── useMobile.ts             # Thin wrapper around useIsMobile from ui-core
+│   ├── useOpenApiSchema.ts      # Fetches & parses schema; dereferences $refs
+│   ├── useEndpointDraft.ts      # localStorage draft per endpoint
+│   └── useMobile.ts
 │
 ├── utils/
-│   ├── formatters.ts            # getMethodColor, getStatusColor, isValidJson, …
-│   ├── versionManager.ts        # Endpoint version detection & deduplication
-│   ├── apiKeyManager.ts         # X-API-Key header helpers
+│   ├── url.ts                   # UrlBuilder + path/query/baseUrl helpers
+│   ├── schemaExport.ts          # Dereferenced/compact/markdown export for LLMs
+│   ├── formatters.ts            # HTTP status / method helpers, JSON validation
+│   ├── versionManager.ts
+│   ├── apiKeyManager.ts
 │   └── index.ts
 │
 └── components/
-    ├── index.ts                 # Re-exports PlaygroundLayout
-    └── PlaygroundLayout/        # Three-panel layout (all panels live here)
-        ├── index.tsx            # Root: DesktopView / MobileView router
-        ├── EndpointList.tsx     # Left panel: search, filter, schema switcher, list
-        ├── RequestPanel.tsx     # Middle panel: params, body, auth, cURL, send
-        ├── ResponsePanel.tsx    # Right panel: status, JsonTree / raw fallback
-        └── ui.tsx               # Shared atoms: MethodBadge, StatusBadge, Panel, …
+    ├── index.ts                 # Re-exports DocsLayout
+    ├── DocsLayout/              # Default (only) layout
+    │   ├── index.tsx            # Root: sidebar + docs + slide-in playground
+    │   ├── Sidebar.tsx          # Grouped endpoint list, scrollspy highlight
+    │   ├── DocsView.tsx         # Longread scroll container + scrollspy
+    │   ├── EndpointDoc.tsx      # One endpoint as a prose section + fields table
+    │   ├── ApiIntroSection.tsx  # Top intro + Copy-for-AI dropdown
+    │   ├── SchemaCopyMenu.tsx   # Per-schema copy flavours
+    │   ├── SlideInPlayground.tsx# Right slide-in overlay
+    │   ├── TryItSheet.tsx       # Mobile/tablet fallback via ResponsiveSheet
+    │   ├── anchor.ts            # Stable section anchors for deep-linking
+    │   ├── grouping.ts          # Shared group+sort used by sidebar and docs
+    │   ├── schemaFields.ts      # JSON Schema → flat field rows
+    │   └── sidebarLabel.ts      # Common-prefix strip + tooltip helpers
+    │
+    └── shared/                  # Panels reused by SlideInPlayground + TryItSheet
+        ├── RequestPanel.tsx
+        ├── ResponsePanel.tsx
+        ├── SendButton.tsx
+        ├── BodyFormEditor.tsx   # Recursive JSON-Schema form renderer
+        ├── EndpointDraftSync.tsx# Headless draft ↔ context sync
+        ├── EndpointResetButton.tsx
+        └── ui.tsx               # MethodBadge, StatusBadge, Panel, atoms
 ```
 
-## Key Design Decisions
-
-| Topic | Decision |
-|---|---|
-| **No stepper** | All three panels visible simultaneously on desktop; tabs on mobile |
-| **Collapsed sections** | Auth & Headers and cURL start collapsed to reduce visual noise |
-| **JSON normalisation** | `ResponsePanel` always tries `JSON.parse` before rendering; falls back to `<pre>` for non-JSON bodies |
-| **Hover-only toolbar** | `PrettyCode` language badge + copy button appear only on hover |
-| **Data before JSX** | All derived values (`isFiltered`, `hasCurl`, `epPath`, …) computed before `return` — no logic in JSX |
-| **Static configs** | `JSON_TREE_CONFIG`, `MOBILE_TABS`, style maps are module-level constants |
-| **Lazy loading** | `PlaygroundLayout` is lazy-loaded via `Suspense` to keep the initial bundle small |
-
 ## Config Reference
 
 ```ts
 interface PlaygroundConfig {
-  /** Array of OpenAPI 3.x schema URLs */
+  /** OpenAPI 3.x schemas (fetched on mount). */
   schemas: SchemaSource[];
-  /** Schema to select on first render */
+  /** Which schema to load first. Defaults to `schemas[0].id`. */
   defaultSchemaId?: string;
+  /** Global request base URL. Wins over `schema.servers[0].url`. */
+  baseUrl?: string;
+  /** Optional API keys for the X-API-Key picker. */
+  apiKeys?: ApiKey[];
+  apiKeysLoading?: boolean;
 }
 
 interface SchemaSource {
-  id: string;   // unique key
-  name: string; // display name in the switcher combobox
-  url: string;  // full URL to fetch the JSON schema from
+  id: string;
+  name: string;
+  url: string;
+  /** Per-schema base URL override (wins over PlaygroundConfig.baseUrl). */
+  baseUrl?: string;
 }
 ```
 
+### baseUrl resolution
+
+Priority (highest wins):
+
+1. `SchemaSource.baseUrl`
+2. `PlaygroundConfig.baseUrl`
+3. `schema.servers[0].url` (from the OpenAPI document)
+4. `''` — endpoint paths are treated as relative
+
 ## Auth
 
 Bearer token priority (highest wins):
 
 1. Manual token entered in the **Auth & Headers** section
 2. JWT from `localStorage` key `auth_token`
-3. X-API-Key header (when an API key is selected — currently disabled pending CFG context)
+3. X-API-Key header (when an API key is selected and `config.apiKeys` is provided)

package/src/tools/OpenapiViewer/components/DocsLayout/ApiIntroSection.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+
+import { MarkdownMessage } from '../../../../components/markdown';
+import type { ApiEndpoint, OpenApiInfo, OpenApiSchema } from '../../types';
+import { SchemaCopyMenu } from './SchemaCopyMenu';
+
+interface ApiIntroSectionProps {
+    info: OpenApiInfo;
+    schema: OpenApiSchema | null;
+    endpoints: ApiEndpoint[];
+    resolvedBaseUrl?: string;
+}
+
+export function ApiIntroSection({ info, schema, endpoints, resolvedBaseUrl }: ApiIntroSectionProps) {
+    return (
+        <section className="pb-10 mb-10 border-b">
+            <div className="flex items-start justify-between gap-4 flex-wrap">
+                <div className="flex items-center gap-3 flex-wrap min-w-0">
+                    <h1 className="text-3xl font-semibold tracking-tight text-foreground leading-tight">
+                        {info.title}
+                    </h1>
+                    <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 font-mono text-[11px] text-muted-foreground">
+                        v{info.version}
+                    </span>
+                </div>
+                <SchemaCopyMenu
+                    schema={schema}
+                    endpoints={endpoints}
+                    baseUrl={resolvedBaseUrl}
+                />
+            </div>
+
+            {info.description && (
+                <div className="mt-4 text-muted-foreground">
+                    <MarkdownMessage content={info.description} />
+                </div>
+            )}
+
+            {info.servers && info.servers.length > 0 && (
+                <div className="mt-6 space-y-2">
+                    <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+                        Base URL
+                    </h4>
+                    <div className="space-y-1.5">
+                        {info.servers.map((s, i) => (
+                            <div key={`${s.url}-${i}`} className="flex items-baseline gap-2 flex-wrap">
+                                <code className="font-mono text-xs px-2 py-1 rounded bg-muted border">
+                                    {s.url}
+                                </code>
+                                {s.description && (
+                                    <span className="text-xs text-muted-foreground">
+                                        {s.description}
+                                    </span>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </section>
+    );
+}

package/src/tools/OpenapiViewer/components/DocsLayout/DocsView.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import type { ApiEndpoint, OpenApiInfo, OpenApiSchema } from '../../types';
+import { deduplicateEndpoints } from '../../utils/versionManager';
+import { ApiIntroSection } from './ApiIntroSection';
+import { EndpointDoc } from './EndpointDoc';
+import { endpointAnchor } from './anchor';
+
+export interface DocsViewHandle {
+    scrollToAnchor: (anchor: string) => void;
+}
+
+interface DocsViewProps {
+    info: OpenApiInfo | null;
+    rawSchema: OpenApiSchema | null;
+    resolvedBaseUrl?: string;
+    endpoints: ApiEndpoint[];
+    selectedVersion: string;
+    loadedEndpoint: ApiEndpoint | null;
+    onTryEndpoint: (ep: ApiEndpoint) => void;
+    onActiveChange: (anchor: string | null) => void;
+}
+
+export const DocsView = React.forwardRef<DocsViewHandle, DocsViewProps>(function DocsView(
+    {
+        info,
+        rawSchema,
+        resolvedBaseUrl,
+        endpoints,
+        selectedVersion,
+        loadedEndpoint,
+        onTryEndpoint,
+        onActiveChange,
+    },
+    ref,
+) {
+    const scrollRef = useRef<HTMLDivElement | null>(null);
+
+    const visibleEndpoints = useMemo(
+        () => deduplicateEndpoints(endpoints, selectedVersion),
+        [endpoints, selectedVersion],
+    );
+
+    // Scroll a given section into view. Imperative handle so the
+    // sidebar (not a descendant) can trigger this without props drilling.
+    const scrollToAnchor = useCallback((anchor: string) => {
+        const root = scrollRef.current;
+        if (!root) return;
+        const el = root.querySelector<HTMLElement>(`[data-endpoint-anchor="${anchor}"]`);
+        if (!el) return;
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({ scrollToAnchor }), [scrollToAnchor]);
+
+    // Scrollspy: pick the topmost endpoint section whose top is near the
+    // upper third of the viewport. Runs on every scroll event (rAF-throttled)
+    // — an IntersectionObserver has flaky behaviour for "which one is active"
+    // when several sections overlap the root margin band at once.
+    useEffect(() => {
+        const root = scrollRef.current;
+        if (!root) return;
+
+        let rafId = 0;
+        let lastActive: string | null = null;
+
+        const compute = () => {
+            rafId = 0;
+            const sections = root.querySelectorAll<HTMLElement>('[data-endpoint-anchor]');
+            if (sections.length === 0) return;
+            const rootTop = root.getBoundingClientRect().top;
+            const threshold = rootTop + root.clientHeight * 0.25;
+            let active: string | null = null;
+            for (const s of Array.from(sections)) {
+                const top = s.getBoundingClientRect().top;
+                if (top <= threshold) {
+                    active = s.dataset.endpointAnchor ?? null;
+                } else {
+                    break;
+                }
+            }
+            if (active !== lastActive) {
+                lastActive = active;
+                onActiveChange(active);
+            }
+        };
+
+        const onScroll = () => {
+            if (rafId) return;
+            rafId = requestAnimationFrame(compute);
+        };
+
+        compute();
+        root.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            root.removeEventListener('scroll', onScroll);
+            if (rafId) cancelAnimationFrame(rafId);
+        };
+    }, [visibleEndpoints, onActiveChange]);
+
+    return (
+        <div ref={scrollRef} className="flex-1 overflow-y-auto min-h-0">
+            <div className="mx-auto w-full max-w-[860px] px-6 md:px-10 lg:px-14 py-12">
+                {info && (
+                    <ApiIntroSection
+                        info={info}
+                        schema={rawSchema}
+                        endpoints={visibleEndpoints}
+                        resolvedBaseUrl={resolvedBaseUrl}
+                    />
+                )}
+                {visibleEndpoints.length === 0 ? (
+                    <div className="py-16 text-center text-sm text-muted-foreground">
+                        No endpoints to display.
+                    </div>
+                ) : (
+                    <div className="divide-y divide-border/60">
+                        {visibleEndpoints.map((ep) => {
+                            const isLoaded =
+                                loadedEndpoint?.method === ep.method && loadedEndpoint?.path === ep.path;
+                            return (
+                                <EndpointDoc
+                                    key={`${ep.method}-${ep.path}`}
+                                    endpoint={ep}
+                                    isLoadedInPlayground={isLoaded}
+                                    onTryIt={() => onTryEndpoint(ep)}
+                                />
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});