@djangocfg/ui-tools 2.1.287 → 2.1.290

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

@@ -13,7 +13,21 @@ interface ApiIntroSectionProps {
     resolvedBaseUrl?: string;
 }
 
+interface BaseUrlRow {
+    url: string;
+    description?: string;
+}
+
 export function ApiIntroSection({ info, schema, endpoints, resolvedBaseUrl }: ApiIntroSectionProps) {
+    // Prefer the *resolved* base URL whenever we have one — that's the
+    // URL actual requests target, not the raw ``servers[0].url`` from
+    // the spec (which can be a bare path like ``/api/v3``). Fall back
+    // to the spec's ``servers`` list so specs that document multiple
+    // servers keep showing all of them.
+    const baseUrlRows: BaseUrlRow[] = resolvedBaseUrl
+        ? [{ url: resolvedBaseUrl, description: info.servers?.[0]?.description }]
+        : (info.servers ?? []).map((s) => ({ url: s.url, description: s.description }));
+
     return (
         <section className="pb-10 mb-10 border-b">
             <div className="flex items-start justify-between gap-4 flex-wrap">
@@ -38,20 +52,20 @@ export function ApiIntroSection({ info, schema, endpoints, resolvedBaseUrl }: Ap
                 </div>
             )}
 
-            {info.servers && info.servers.length > 0 && (
+            {baseUrlRows.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">
+                        {baseUrlRows.map((row, i) => (
+                            <div key={`${row.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}
+                                    {row.url}
                                 </code>
-                                {s.description && (
+                                {row.description && (
                                     <span className="text-xs text-muted-foreground">
-                                        {s.description}
+                                        {row.description}
                                     </span>
                                 )}
                             </div>

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

@@ -2,17 +2,29 @@
 
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import type { ApiEndpoint, OpenApiInfo, OpenApiSchema } from '../../types';
+import type { ApiEndpoint, LoadedSchemaEntry, OpenApiInfo, OpenApiSchema } from '../../types';
+import {
+    getScrollParent,
+    getScrollTop,
+    getTargetTop,
+    getViewportHeight,
+    scrollTargetTo,
+    type ScrollTarget,
+} from '../../utils/scrollParent';
 import { deduplicateEndpoints } from '../../utils/versionManager';
 import { ApiIntroSection } from './ApiIntroSection';
 import { EndpointDoc } from './EndpointDoc';
-import { endpointAnchor } from './anchor';
+import { useSectionHashRouter } from './EndpointDoc/hooks/useSectionHash';
+import { SchemaCopyMenu } from './SchemaCopyMenu';
 
 export interface DocsViewHandle {
     scrollToAnchor: (anchor: string) => void;
 }
 
-interface DocsViewProps {
+// ─── Props ───────────────────────────────────────────────────────────────────
+
+interface SelectorProps {
+    grouping?: 'selector';
     info: OpenApiInfo | null;
     rawSchema: OpenApiSchema | null;
     resolvedBaseUrl?: string;
@@ -20,48 +32,174 @@ interface DocsViewProps {
     selectedVersion: string;
     loadedEndpoint: ApiEndpoint | null;
     onTryEndpoint: (ep: ApiEndpoint) => void;
-    onActiveChange: (anchor: string | null) => void;
+    onActiveChange: (anchor: string | null, schemaId: string | null) => void;
+}
+
+interface SectionsProps {
+    grouping: 'sections';
+    /** Per-schema data (info + endpoints). Rendered in order. */
+    schemasData: LoadedSchemaEntry[];
+    selectedVersion: string;
+    loadedEndpoint: ApiEndpoint | null;
+    onTryEndpoint: (ep: ApiEndpoint) => void;
+    onActiveChange: (anchor: string | null, schemaId: string | null) => void;
+}
+
+type DocsViewProps = SelectorProps | SectionsProps;
+
+// ─── View-model types ────────────────────────────────────────────────────────
+
+interface EndpointRow {
+    key: string;
+    endpoint: ApiEndpoint;
+    isLoaded: boolean;
+    schemaId: string | null;
+}
+
+type SectionState =
+    | { kind: 'ready'; rows: EndpointRow[] }
+    | { kind: 'loading' }
+    | { kind: 'error'; message: string }
+    | { kind: 'empty' };
+
+interface SchemaSectionVM {
+    schemaId: string;
+    title: string;
+    version: string | null;
+    description: string | null;
+    state: SectionState;
+    /** Copy-for-AI payload. ``null`` when the section is still loading
+     *  or failed — the dropdown stays disabled. */
+    rawSchema: OpenApiSchema | null;
+    baseUrl: string | undefined;
+    allEndpoints: ApiEndpoint[];
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+/** Pixel offset from the top of the scroll container where the viewer
+ *  should "park" sections. Reads ``--navbar-height`` for back-compat
+ *  with pages that already set it; defaults to ``0`` for embedded /
+ *  no-navbar setups (the common case when hosted in a shell). */
+const readNavbarOffset = () => {
+    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;
+};
+
+const isSameEndpoint = (a: ApiEndpoint | null, b: ApiEndpoint) =>
+    a !== null && a.method === b.method && a.path === b.path;
+
+function buildEndpointRow(
+    ep: ApiEndpoint,
+    loadedEndpoint: ApiEndpoint | null,
+    schemaId: string | null,
+): EndpointRow {
+    const keySchema = schemaId ? `${schemaId}-` : '';
+    return {
+        key: `${keySchema}${ep.method}-${ep.path}`,
+        endpoint: ep,
+        isLoaded: isSameEndpoint(loadedEndpoint, ep),
+        schemaId,
+    };
+}
+
+function buildSchemaSectionVM(
+    entry: LoadedSchemaEntry,
+    selectedVersion: string,
+    loadedEndpoint: ApiEndpoint | null,
+): SchemaSectionVM {
+    const title = entry.info?.title ?? entry.source.name;
+    const version = entry.info?.version ?? null;
+    const description = entry.info?.description ?? null;
+
+    let state: SectionState;
+    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,
+    };
 }
 
+// ─── Component ───────────────────────────────────────────────────────────────
+
 export const DocsView = React.forwardRef<DocsViewHandle, DocsViewProps>(function DocsView(
-    {
-        info,
-        rawSchema,
-        resolvedBaseUrl,
-        endpoints,
-        selectedVersion,
-        loadedEndpoint,
-        onTryEndpoint,
-        onActiveChange,
-    },
+    props,
     ref,
 ) {
     const scrollRef = useRef<HTMLDivElement | null>(null);
+    const scrollTargetRef = useRef<ScrollTarget | null>(null);
+    const { onActiveChange } = props;
 
-    const visibleEndpoints = useMemo(
-        () => deduplicateEndpoints(endpoints, selectedVersion),
-        [endpoints, selectedVersion],
-    );
+    // ``#section=<endpointId>.<sectionId>`` shareable deep-links —
+    // opens the referenced section in the store and scrolls it in.
+    // Idempotent, attaches a single hashchange listener.
+    useSectionHashRouter();
 
-    // 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' });
+    // Resolve the real scroll container once the ref is attached. In
+    // standalone pages that's ``window``; inside an ``overflow-auto``
+    // shell (dev playground, modal) it's the wrapping DIV.
+    const ensureScrollTarget = useCallback((): ScrollTarget | null => {
+        if (scrollTargetRef.current) return scrollTargetRef.current;
+        if (!scrollRef.current) return null;
+        scrollTargetRef.current = getScrollParent(scrollRef.current);
+        return scrollTargetRef.current;
     }, []);
 
+    // Scroll a given section into view. Works against whichever ancestor
+    // actually scrolls — window for standalone, the overflow-auto parent
+    // for embedded layouts — so callers don't need to know the difference.
+    const scrollToAnchor = useCallback(
+        (anchor: string) => {
+            const root = scrollRef.current;
+            if (!root) return;
+            const el = root.querySelector<HTMLElement>(`[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],
+    );
+
     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.
+    // upper quarter of the viewport. Listens on the real scroll container
+    // (see ``ensureScrollTarget``) because ``scroll`` events on a nested
+    // overflow:auto element do NOT bubble up to window.
     useEffect(() => {
         const root = scrollRef.current;
         if (!root) return;
+        const target = ensureScrollTarget();
+        if (!target) return;
 
         let rafId = 0;
         let lastActive: string | null = null;
@@ -70,20 +208,22 @@ export const DocsView = React.forwardRef<DocsViewHandle, DocsViewProps>(function
             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;
+            const navbar = readNavbarOffset();
+            const viewportTop = getTargetTop(target);
+            const threshold = viewportTop + navbar + getViewportHeight(target) * 0.25;
+            let active: HTMLElement | null = 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);
             }
         };
 
@@ -93,15 +233,49 @@ export const DocsView = React.forwardRef<DocsViewHandle, DocsViewProps>(function
         };
 
         compute();
-        root.addEventListener('scroll', onScroll, { passive: true });
+        target.addEventListener('scroll', onScroll, { passive: true });
+        // Resize always bubbles to window — listen there regardless of target.
+        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]);
+    }, [onActiveChange, ensureScrollTarget, props]);
+
+    if (props.grouping === 'sections') {
+        return <SectionsBody scrollRef={scrollRef} {...props} />;
+    }
+
+    return <SelectorBody scrollRef={scrollRef} {...props} />;
+});
+
+// ─── Selector body (single active schema) ────────────────────────────────────
+
+function SelectorBody({
+    scrollRef,
+    info,
+    rawSchema,
+    resolvedBaseUrl,
+    endpoints,
+    selectedVersion,
+    loadedEndpoint,
+    onTryEndpoint,
+}: SelectorProps & { scrollRef: React.RefObject<HTMLDivElement | null> }) {
+    const visibleEndpoints = useMemo(
+        () => deduplicateEndpoints(endpoints, selectedVersion),
+        [endpoints, selectedVersion],
+    );
+
+    const rows = useMemo<EndpointRow[]>(
+        () => visibleEndpoints.map((ep) => buildEndpointRow(ep, loadedEndpoint, ep.schemaId ?? null)),
+        [visibleEndpoints, loadedEndpoint],
+    );
+
+    const isEmpty = rows.length === 0;
 
     return (
-        <div ref={scrollRef} className="flex-1 overflow-y-auto min-h-0">
+        <div ref={scrollRef}>
             <div className="mx-auto w-full max-w-[860px] px-6 md:px-10 lg:px-14 py-12">
                 {info && (
                     <ApiIntroSection
@@ -111,27 +285,131 @@ export const DocsView = React.forwardRef<DocsViewHandle, DocsViewProps>(function
                         resolvedBaseUrl={resolvedBaseUrl}
                     />
                 )}
-                {visibleEndpoints.length === 0 ? (
+                {isEmpty ? (
                     <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)}
-                                />
-                            );
-                        })}
+                        {rows.map((row) => (
+                            <EndpointDoc
+                                key={row.key}
+                                endpoint={row.endpoint}
+                                isLoadedInPlayground={row.isLoaded}
+                                onTryIt={() => onTryEndpoint(row.endpoint)}
+                                schemaId={row.schemaId}
+                            />
+                        ))}
                     </div>
                 )}
             </div>
         </div>
     );
+}
+
+// ─── Sections body (all schemas concatenated) ────────────────────────────────
+
+function SectionsBody({
+    scrollRef,
+    schemasData,
+    selectedVersion,
+    loadedEndpoint,
+    onTryEndpoint,
+}: SectionsProps & { scrollRef: React.RefObject<HTMLDivElement | null> }) {
+    const sections = useMemo<SchemaSectionVM[]>(
+        () => schemasData.map((e) => buildSchemaSectionVM(e, selectedVersion, loadedEndpoint)),
+        [schemasData, selectedVersion, loadedEndpoint],
+    );
+
+    return (
+        <div ref={scrollRef}>
+            <div className="mx-auto w-full max-w-[860px] px-6 md:px-10 lg:px-14 py-12 space-y-16">
+                {sections.map((section) => (
+                    <SchemaSectionView key={section.schemaId} section={section} onTryEndpoint={onTryEndpoint} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+const SchemaSectionView = React.memo(function SchemaSectionView({
+    section,
+    onTryEndpoint,
+}: {
+    section: SchemaSectionVM;
+    onTryEndpoint: (ep: ApiEndpoint) => void;
+}) {
+    const canCopy = section.rawSchema !== null && section.allEndpoints.length > 0;
+    return (
+        <section data-schema-anchor={section.schemaId} className="scroll-mt-20">
+            <header className="mb-8 pb-4 border-b">
+                <div className="flex items-start justify-between gap-4">
+                    <div className="flex items-baseline gap-3 min-w-0">
+                        <h2 className="text-2xl font-semibold tracking-tight">{section.title}</h2>
+                        {section.version && (
+                            <span className="font-mono text-xs text-muted-foreground/70">
+                                v{section.version}
+                            </span>
+                        )}
+                    </div>
+                    {canCopy && (
+                        <SchemaCopyMenu
+                            schema={section.rawSchema}
+                            endpoints={section.allEndpoints}
+                            baseUrl={section.baseUrl}
+                        />
+                    )}
+                </div>
+                {section.description && (
+                    <p className="mt-2 text-sm text-muted-foreground whitespace-pre-wrap">
+                        {section.description}
+                    </p>
+                )}
+            </header>
+            <SchemaSectionStateView section={section} onTryEndpoint={onTryEndpoint} />
+        </section>
+    );
 });
+
+function SchemaSectionStateView({
+    section,
+    onTryEndpoint,
+}: {
+    section: SchemaSectionVM;
+    onTryEndpoint: (ep: ApiEndpoint) => void;
+}) {
+    switch (section.state.kind) {
+        case 'loading':
+            return (
+                <div className="py-8 text-center text-sm text-muted-foreground">
+                    Loading {section.title}…
+                </div>
+            );
+        case 'error':
+            return (
+                <div className="py-8 text-center text-sm text-destructive">
+                    Failed to load {section.title}: {section.state.message}
+                </div>
+            );
+        case 'empty':
+            return (
+                <div className="py-8 text-center text-sm text-muted-foreground">
+                    No endpoints in this schema.
+                </div>
+            );
+        case 'ready':
+            return (
+                <div className="divide-y divide-border/60">
+                    {section.state.rows.map((row) => (
+                        <EndpointDoc
+                            key={row.key}
+                            endpoint={row.endpoint}
+                            isLoadedInPlayground={row.isLoaded}
+                            onTryIt={() => onTryEndpoint(row.endpoint)}
+                            schemaId={row.schemaId}
+                        />
+                    ))}
+                </div>
+            );
+    }
+}

package/src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/CodeSamples/LanguageTabs.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { CODE_SAMPLE_TARGETS, type CodeSampleTargetId } from '../../../../utils/codeSamples';
+
+interface LanguageTabsProps {
+    activeId: CodeSampleTargetId;
+    onChange: (id: CodeSampleTargetId) => void;
+}
+
+/** Horizontal tab strip for switching between cURL/JS/Python/… The
+ *  strip scrolls horizontally on narrow viewports rather than wrapping
+ *  to a second line so the adjacent code block keeps its vertical
+ *  rhythm. */
+export function LanguageTabs({ activeId, onChange }: LanguageTabsProps) {
+    return (
+        <div className="flex items-center gap-1 overflow-x-auto -mx-1 px-1">
+            {CODE_SAMPLE_TARGETS.map((t) => (
+                <button
+                    key={t.id}
+                    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',
+                    )}
+                >
+                    {t.label}
+                </button>
+            ))}
+        </div>
+    );
+}

package/src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/CodeSamples/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import PrettyCode from '../../../../../PrettyCode';
+import type { ApiEndpoint } from '../../../../types';
+import { useEndpointDocContext } from '../context';
+import { useEndpointDocStore } from '../store';
+import { useActiveCodeTab } from '../store/selectors';
+import { LanguageTabs } from './LanguageTabs';
+import { useCodeSnippet } from './useCodeSnippet';
+
+interface CodeSamplesProps {
+    endpoint: ApiEndpoint;
+    /** Optional body to include in generated snippets. When omitted we
+     *  use ``endpoint.requestBody?.example`` if present, so the snippet
+     *  shows a realistic payload out of the box. */
+    body?: string;
+    /** Parameter values to substitute into the URL. Missing path params
+     *  fall back to ``{name}`` placeholders so the snippet still
+     *  illustrates the shape. */
+    parameters?: Record<string, string>;
+    /** Extra headers to include in snippets (e.g. a picked API key). */
+    headers?: Record<string, string>;
+    /** Base URL override — falls back to ``endpoint.path`` which
+     *  already has the resolved base URL prepended by the extractor. */
+    baseUrl?: string;
+}
+
+/** Code samples block: language tab bar + highlighted snippet. The
+ *  outer Section wrapper (collapsible) lives one level up; this
+ *  component is always "open" from its own perspective. */
+export function CodeSamples({ endpoint, body, parameters, headers, baseUrl }: CodeSamplesProps) {
+    const { endpointId } = useEndpointDocContext();
+    const activeId = useActiveCodeTab(endpointId);
+    const setCodeTab = useEndpointDocStore((s) => s.setCodeTab);
+
+    const { snippet, prism } = useCodeSnippet({
+        endpoint,
+        body,
+        parameters,
+        headers,
+        baseUrl,
+        activeId,
+    });
+
+    return (
+        <div className="space-y-2.5">
+            <LanguageTabs activeId={activeId} onChange={(id) => setCodeTab(endpointId, id)} />
+            <PrettyCode
+                data={snippet}
+                language={prism as never}
+                isCompact
+                maxLines={20}
+            />
+        </div>
+    );
+}

package/src/tools/OpenapiViewer/components/DocsLayout/EndpointDoc/CodeSamples/useCodeSnippet.ts

@@ -0,0 +1,77 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import type { ApiEndpoint } from '../../../../types';
+import {
+    CODE_SAMPLE_TARGETS,
+    renderSnippet,
+    type CodeSampleTargetId,
+} from '../../../../utils/codeSamples';
+import { buildHarRequest } from '../../../../utils/operationToHar';
+import { resolveAbsolute } from '../../../../utils/url';
+
+interface UseCodeSnippetInput {
+    endpoint: ApiEndpoint;
+    body?: string;
+    parameters?: Record<string, string>;
+    headers?: Record<string, string>;
+    baseUrl?: string;
+    activeId: CodeSampleTargetId;
+}
+
+interface UseCodeSnippetResult {
+    /** Fully-rendered snippet string. Always present — falls back to an
+     *  "unavailable" message if the generator returns null, so the
+     *  consumer can always mount ``PrettyCode``. */
+    snippet: string;
+    /** Prism language id matching ``activeId`` — passed to PrettyCode so
+     *  it picks the right highlighter. */
+    prism: string;
+}
+
+/** Encapsulates HAR build + snippet render + memoisation for the Code
+ *  Samples block. Kept as a hook (rather than inline ``useMemo`` blocks
+ *  in the component) so unit tests can exercise the snippet pipeline
+ *  independently of React rendering. */
+export function useCodeSnippet({
+    endpoint,
+    body,
+    parameters,
+    headers,
+    baseUrl,
+    activeId,
+}: UseCodeSnippetInput): UseCodeSnippetResult {
+    const effectiveBody = body ?? endpoint.requestBody?.example;
+
+    // Build the HAR once per input change — every tab rebuilds its
+    // snippet from this shared request shape.
+    //
+    // ``endpoint.path`` already carries the schema's ``servers[0].url``
+    // (joined upstream in ``useOpenApiSchema``). Usually that's a path
+    // like ``/api/v3/pet`` — good enough for same-origin fetch, wrong
+    // for curl/python/go which need a runnable absolute URL. We hand
+    // off to ``resolveAbsolute`` so the snippet is copy-pasteable from
+    // a terminal without the user having to edit the host in manually.
+    //
+    // Priority: explicit ``baseUrl`` prop > resolved origin > bare path.
+    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]);
+}