@djangocfg/ui-tools 2.1.289 → 2.1.291

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

@@ -36,9 +36,17 @@ export function TryItSheet({ open, onOpenChange }: TryItSheetProps) {
                 <ResponsiveSheetHeader className="px-4 py-3 border-b shrink-0">
                     <ResponsiveSheetTitle className="text-sm">Playground</ResponsiveSheetTitle>
                 </ResponsiveSheetHeader>
+                {/* Send button sits inside the Request section so it
+                    reads as an action on the form, not an ambiguous
+                    page-level footer when Response is also visible. */}
                 <div className="flex-1 min-h-0 flex flex-col divide-y">
-                    <div className={showResponse ? 'flex-1 min-h-0 flex flex-col' : 'flex-1 min-h-0 flex flex-col'}>
+                    <div className="flex-1 min-h-0 flex flex-col">
                         <RequestPanel />
+                        {state.selectedEndpoint && (
+                            <div className="shrink-0 border-t px-4 py-3 bg-background">
+                                <SendButton />
+                            </div>
+                        )}
                     </div>
                     {showResponse && (
                         <div className="flex-1 min-h-0 flex flex-col">
@@ -46,11 +54,6 @@ export function TryItSheet({ open, onOpenChange }: TryItSheetProps) {
                         </div>
                     )}
                 </div>
-                {state.selectedEndpoint && (
-                    <div className="shrink-0 border-t px-4 py-3 bg-background/95 backdrop-blur-sm">
-                        <SendButton />
-                    </div>
-                )}
             </ResponsiveSheetContent>
         </ResponsiveSheet>
     );

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/PrettyView.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import JsonTree from '../../../../JsonTree';
+import PrettyCode from '../../../../PrettyCode';
+import type { DetectedContent } from './types';
+
+// JsonTree config — same shape as the interactive docs example view
+// but with ``showActionButtons: false`` because the copy button in the
+// StatusBar already covers that flow.
+const JSON_TREE_CONFIG = {
+    maxAutoExpandDepth: 2,
+    maxAutoExpandArrayItems: 10,
+    maxAutoExpandObjectKeys: 5,
+    maxStringLength: 200,
+    collectionLimit: 50,
+    showCollectionInfo: true,
+    showExpandControls: true,
+    showActionButtons: false,
+    preserveKeyOrder: true,
+    className: 'border-0 rounded-none',
+} as const;
+
+interface PrettyViewProps {
+    /** Parsed JSON tree when the body was JSON. */
+    treeData: unknown;
+    /** Pre-stringified body — used by the code-highlight branch for
+     *  non-JSON payloads. */
+    rawText: string;
+    detected: DetectedContent;
+}
+
+/** "Pretty" view — rich-rendering branch. JSON renders as ``JsonTree``;
+ *  anything else goes through ``PrettyCode`` in ``plain`` variant so it
+ *  flows naturally inside the panel's ``ScrollArea`` — no internal
+ *  scroll, no floating toolbar fighting the surrounding layout. */
+export function PrettyView({ treeData, rawText, detected }: PrettyViewProps) {
+    if (detected.kind === 'json' && treeData != null) {
+        return <JsonTree title="Response Body" data={treeData} config={JSON_TREE_CONFIG} />;
+    }
+    if (!rawText) {
+        return (
+            <div className="py-10 text-center text-xs text-muted-foreground">
+                Empty response body
+            </div>
+        );
+    }
+    return (
+        <PrettyCode
+            data={rawText}
+            language={detected.prism}
+            variant="plain"
+            isCompact
+        />
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/PreviewView.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { Info, ShieldCheck } from 'lucide-react';
+import { useMemo } from 'react';
+
+interface PreviewViewProps {
+    html: string;
+}
+
+/** Heuristic: does ``html`` look like a JS-only single-page app shell?
+ *
+ *  SPAs (Vite, CRA, Next-app dev index) ship a near-empty ``<body>``
+ *  with a mount div + a ``<script type="module">`` that hydrates the
+ *  page at runtime. Previewing those in a ``sandbox=""`` iframe is
+ *  pointless because scripts can't run — the reader sees a blank
+ *  page and assumes preview is broken.
+ *
+ *  We detect this by extracting body content, stripping scripts, and
+ *  checking what's left. If it's basically just a mount div, we show
+ *  an explanatory empty-state instead of an empty iframe. */
+function looksLikeSpaShell(html: string): boolean {
+    const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    const bodyContent = (bodyMatch?.[1] ?? html)
+        // Strip all script tags with their contents — runtime-only code
+        // doesn't count as visible markup for this check.
+        .replace(/<script[\s\S]*?<\/script>/gi, '')
+        // Strip comments.
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .trim();
+
+    if (bodyContent.length === 0) return true;
+
+    // A single empty container (``<div id="root"></div>`` and friends)
+    // is the classic SPA mount point. Anything else — including static
+    // server-rendered pages with real content — won't match.
+    const singleEmptyContainer = /^<(div|main|section)[^>]*>\s*<\/\1>$/i;
+    if (singleEmptyContainer.test(bodyContent)) return true;
+
+    return false;
+}
+
+/** Render an HTML response inside a sandboxed iframe so the reader can
+ *  see what the server's error page or template actually looks like.
+ *
+ *  Security model — ``sandbox`` is intentionally **empty**:
+ *    - no ``allow-scripts`` → JavaScript in the response cannot run
+ *    - no ``allow-same-origin`` → the page can't read parent cookies
+ *    - no ``allow-forms`` / ``allow-popups`` → can't phish the user
+ *
+ *  We feed the HTML via ``srcDoc`` (not ``src``) so we never issue a
+ *  network request to render it — the string is already local. */
+export function PreviewView({ html }: PreviewViewProps) {
+    const isSpaShell = useMemo(() => looksLikeSpaShell(html), [html]);
+
+    if (!html) {
+        return (
+            <div className="py-10 text-center text-xs text-muted-foreground">
+                Empty response body
+            </div>
+        );
+    }
+
+    if (isSpaShell) {
+        return (
+            <div className="flex flex-col items-center justify-center py-16 px-6 text-center gap-3 min-h-[400px]">
+                <div className="inline-flex items-center justify-center h-10 w-10 rounded-full bg-muted">
+                    <Info className="h-5 w-5 text-muted-foreground" />
+                </div>
+                <div className="max-w-sm space-y-1.5">
+                    <p className="text-sm font-medium text-foreground">
+                        Looks like a single-page app shell
+                    </p>
+                    <p className="text-xs text-muted-foreground leading-relaxed">
+                        This page renders its content with JavaScript at runtime.
+                        Scripts are disabled in the sandbox, so Preview would show
+                        a blank page. Switch to <strong>Pretty</strong> or{' '}
+                        <strong>Raw</strong> to inspect the HTML source.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full min-h-[400px]">
+            <div className="shrink-0 flex items-center gap-1.5 px-3 py-1.5 bg-muted/30 border-b text-[10px] text-muted-foreground/70">
+                <ShieldCheck className="h-3 w-3" />
+                Sandboxed preview — scripts, forms and popups are disabled
+            </div>
+            {/*
+              * Checker-pattern background so "black on black" responses
+              * still show a clear iframe bounding box, and so readers
+              * can tell the iframe has loaded even if the page itself
+              * is empty / fully transparent.
+              */}
+            <div
+                className="flex-1 min-h-[360px] p-2"
+                style={{
+                    backgroundColor: '#fff',
+                    backgroundImage:
+                        'linear-gradient(45deg, #f3f4f6 25%, transparent 25%), linear-gradient(-45deg, #f3f4f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3f4f6 75%), linear-gradient(-45deg, transparent 75%, #f3f4f6 75%)',
+                    backgroundSize: '16px 16px',
+                    backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
+                }}
+            >
+                <iframe
+                    title="Response preview"
+                    srcDoc={html}
+                    sandbox=""
+                    className="w-full h-full min-h-[360px] bg-white border-0 rounded shadow-sm"
+                />
+            </div>
+        </div>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/RawView.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+interface RawViewProps {
+    rawText: string;
+}
+
+/** Verbatim response body. No parsing, no highlighting — readers
+ *  occasionally need to inspect trailing whitespace, escape
+ *  sequences, or a payload that accidentally claims one content type
+ *  and ships another, and the Pretty view hides some of that. */
+export function RawView({ rawText }: RawViewProps) {
+    if (!rawText) {
+        return (
+            <div className="py-10 text-center text-xs text-muted-foreground">
+                Empty response body
+            </div>
+        );
+    }
+    return (
+        <pre className="p-4 text-[11px] font-mono text-foreground/70 whitespace-pre-wrap break-all leading-relaxed">
+            {rawText}
+        </pre>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/StatusBar.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { CopyButton } from '@djangocfg/ui-core/components';
+
+import type { ApiResponse } from '../../../types';
+import { StatusBadge } from '../ui';
+
+interface StatusBarProps {
+    response: ApiResponse;
+    rawText: string;
+    /** Content-Type label shown inline next to size/duration. ``null``
+     *  when the server didn't send one — we hide the slot instead of
+     *  showing an empty dash. */
+    contentType: string | null;
+}
+
+/** Top strip of the response panel: status badge, statusText, size,
+ *  duration, content-type, copy button. Compact — one line, tabular
+ *  numerals so 1.4 KB and 107ms don't shift as values update. */
+export function StatusBar({ response, rawText, contentType }: StatusBarProps) {
+    const sizeKb = rawText ? `${(rawText.length / 1024).toFixed(1)} KB` : '';
+    const duration = response.duration != null ? `${response.duration}ms` : '';
+    const hasStatus = response.status != null;
+    const hasCopy = Boolean(rawText);
+
+    return (
+        <div className="shrink-0 border-b px-4 py-2 flex items-center justify-between gap-3 bg-muted/20">
+            <div className="flex items-center gap-2 min-w-0">
+                {hasStatus && <StatusBadge status={response.status!} />}
+                {response.statusText && (
+                    <span className="text-xs text-muted-foreground truncate">
+                        {response.statusText}
+                    </span>
+                )}
+                {sizeKb && (
+                    <span className="text-[10px] text-muted-foreground/50 tabular-nums shrink-0">
+                        {sizeKb}
+                    </span>
+                )}
+                {duration && (
+                    <span className="text-[10px] text-muted-foreground/50 tabular-nums shrink-0">
+                        {duration}
+                    </span>
+                )}
+                {contentType && (
+                    <span className="text-[10px] text-muted-foreground/50 font-mono truncate">
+                        {contentType}
+                    </span>
+                )}
+            </div>
+            {hasCopy && (
+                <CopyButton
+                    value={rawText}
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 px-2 text-[10px] text-muted-foreground shrink-0"
+                >
+                    Copy
+                </CopyButton>
+            )}
+        </div>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/ViewTabs.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { ViewMode } from './types';
+
+interface ViewTabsProps {
+    active: ViewMode;
+    onChange: (mode: ViewMode) => void;
+    /** When false the Preview tab is hidden — only HTML responses get
+     *  a useful preview, everything else renders the same as Pretty. */
+    showPreview: boolean;
+}
+
+const LABELS: Record<ViewMode, string> = {
+    pretty: 'Pretty',
+    raw: 'Raw',
+    preview: 'Preview',
+};
+
+/** Tab strip for switching between Pretty / Raw / Preview. Matches the
+ *  visual weight of the ``LanguageTabs`` in CodeSamples so the page
+ *  reads as one coherent toolbar system. */
+export function ViewTabs({ active, onChange, showPreview }: ViewTabsProps) {
+    const tabs: ViewMode[] = showPreview ? ['pretty', 'raw', 'preview'] : ['pretty', 'raw'];
+    return (
+        <div className="shrink-0 border-b px-3 py-1.5 flex items-center gap-1">
+            {tabs.map((t) => (
+                <button
+                    key={t}
+                    type="button"
+                    onClick={() => onChange(t)}
+                    className={cn(
+                        'h-6 px-2.5 rounded text-[11px] font-medium transition-colors',
+                        active === t
+                            ? 'bg-muted text-foreground'
+                            : 'text-muted-foreground/70 hover:text-foreground hover:bg-muted/50',
+                    )}
+                >
+                    {LABELS[t]}
+                </button>
+            ))}
+        </div>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/detectContent.ts

@@ -0,0 +1,97 @@
+import type { ContentKind, DetectedContent } from './types';
+
+/** Strip Content-Type parameters (``; charset=utf-8`` etc.) and lower-case. */
+function normaliseContentType(raw: string | null): string | null {
+    if (!raw) return null;
+    const semi = raw.indexOf(';');
+    return (semi === -1 ? raw : raw.slice(0, semi)).trim().toLowerCase();
+}
+
+/** Pull Content-Type out of the headers bag. We accept both plain
+ *  objects (``{ "content-type": "..." }``) and ``Headers``-like shapes
+ *  with a ``.get`` method. The context type is ``any`` so we can't be
+ *  stricter without plumbing a proper type through the response code
+ *  path. */
+function readContentType(headers: unknown): string | null {
+    if (!headers) return null;
+    // Headers instance — use ``.get`` (case-insensitive).
+    if (typeof (headers as Headers).get === 'function') {
+        return (headers as Headers).get('content-type');
+    }
+    // Plain object — look up with case-insensitive key match so both
+    // ``Content-Type`` and ``content-type`` work.
+    if (typeof headers === 'object') {
+        for (const [k, v] of Object.entries(headers as Record<string, unknown>)) {
+            if (k.toLowerCase() === 'content-type') {
+                return typeof v === 'string' ? v : null;
+            }
+        }
+    }
+    return null;
+}
+
+/** Map a normalised MIME type to our short ``ContentKind``. Unknown
+ *  types fall back to ``text`` so PrettyCode still shows something
+ *  sensible (plain text is a valid Prism language). */
+function kindFromContentType(mime: string | null): ContentKind {
+    if (!mime) return 'text';
+    if (mime === 'application/json' || mime.endsWith('+json')) return 'json';
+    if (mime === 'text/html' || mime === 'application/xhtml+xml') return 'html';
+    if (
+        mime === 'application/xml' ||
+        mime === 'text/xml' ||
+        mime.endsWith('+xml')
+    ) return 'xml';
+    if (mime === 'text/css') return 'css';
+    if (
+        mime === 'application/javascript' ||
+        mime === 'text/javascript' ||
+        mime === 'application/x-javascript'
+    ) return 'javascript';
+    return 'text';
+}
+
+/** Heuristic fallback when ``Content-Type`` is missing or opaque.
+ *  Returns ``null`` when nothing firm can be inferred; the caller
+ *  then defaults to ``text``. */
+function kindFromBody(body: string): ContentKind | null {
+    const trimmed = body.trimStart();
+    if (!trimmed) return null;
+    if (trimmed.startsWith('<!DOCTYPE') || /^<html[\s>]/i.test(trimmed)) return 'html';
+    if (trimmed.startsWith('<?xml')) return 'xml';
+    if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+        // Cheap validity check — full parse happens in ResponsePanel.
+        try { JSON.parse(trimmed); return 'json'; } catch { /* fall through */ }
+    }
+    return null;
+}
+
+const PRISM_BY_KIND: Record<ContentKind, DetectedContent['prism']> = {
+    json: 'json',
+    // ``markup`` is Prism's HTML/XML grammar — there isn't a separate
+    // ``html`` language. XML piggy-backs on the same tokeniser.
+    html: 'markup',
+    xml: 'markup',
+    css: 'css',
+    javascript: 'javascript',
+    text: 'markup',
+};
+
+/** Detect content kind from headers, falling back to body sniffing
+ *  when the header is missing. Pure function — safe to call inside
+ *  ``useMemo`` deps on the raw body and headers. */
+export function detectContent(headers: unknown, rawBody: string): DetectedContent {
+    const contentType = normaliseContentType(readContentType(headers));
+    const headerKind = kindFromContentType(contentType);
+
+    // If headers say it's text/plain but the body looks like HTML or
+    // JSON, trust the body — a lot of framework 500 pages claim
+    // text/html but some setups default to text/plain for errors.
+    const kind = headerKind === 'text' ? (kindFromBody(rawBody) ?? 'text') : headerKind;
+
+    return {
+        kind,
+        prism: PRISM_BY_KIND[kind],
+        contentType,
+    };
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/index.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { Loader2, Send, Terminal, WifiOff } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import { usePlaygroundContext } from '../../../context/PlaygroundContext';
+import { EmptyState, ScrollArea } from '../ui';
+import { PreviewView } from './PreviewView';
+import { PrettyView } from './PrettyView';
+import { RawView } from './RawView';
+import { StatusBar } from './StatusBar';
+import type { ViewMode } from './types';
+import { useResponseView } from './useResponseView';
+import { ViewTabs } from './ViewTabs';
+
+/** Response panel used by both the sticky ``SlideInPlayground`` and the
+ *  modal ``TryItSheet``. Responsibilities:
+ *    - Empty / loading / network-error gates
+ *    - Three view modes (Pretty / Raw / Preview) with a tab bar
+ *    - Auto-pick the best default view per response type (JSON → Pretty,
+ *      HTML → Preview, everything else → Pretty as the widest-purpose)
+ *
+ *  View mode is local component state rather than context state — it
+ *  should reset when the selected endpoint changes and not leak between
+ *  endpoints. */
+export function ResponsePanel() {
+    const { state } = usePlaygroundContext();
+    const { response, loading, selectedEndpoint } = state;
+
+    const { treeData, rawText, detected } = useResponseView(response?.data, response?.headers);
+    const showPreview = detected.kind === 'html';
+
+    // Default view heuristic: show HTML pages preview-first so the
+    // reader sees the actual rendered server page immediately.
+    // Everything else lands on Pretty.
+    const [mode, setMode] = useState<ViewMode>(showPreview ? 'preview' : 'pretty');
+
+    // Reset the mode when the endpoint or response changes so a
+    // previously-selected tab from a different shape doesn't stick
+    // around (e.g. stuck on Preview when switching from HTML→JSON).
+    useEffect(() => {
+        setMode(showPreview ? 'preview' : 'pretty');
+    }, [selectedEndpoint, response, showPreview]);
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-full gap-2">
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                <span className="text-xs text-muted-foreground">Sending…</span>
+            </div>
+        );
+    }
+
+    if (!selectedEndpoint) return <EmptyState icon={Terminal} text="Response will appear here" />;
+    if (!response)         return <EmptyState icon={Send} text='Press "Send Request" to see the response' />;
+
+    const hasError = Boolean(response.error);
+    const hasStatus = response.status != null;
+
+    // Pure network error (no HTTP response at all — CORS, offline, timeout)
+    if (hasError && !hasStatus) {
+        return (
+            <EmptyState
+                icon={WifiOff}
+                text={response.error!}
+                className="text-destructive [&_svg]:text-destructive"
+            />
+        );
+    }
+
+    return (
+        <>
+            <StatusBar response={response} rawText={rawText} contentType={detected.contentType} />
+
+            {/* HTTP-level error body (4xx/5xx — has status but also error flag) */}
+            {hasError && (
+                <div className="shrink-0 mx-4 mt-3 rounded border border-destructive/20 bg-destructive/5 px-3 py-2">
+                    <p className="text-xs text-destructive">{response.error}</p>
+                </div>
+            )}
+
+            <ViewTabs active={mode} onChange={setMode} showPreview={showPreview} />
+
+            <ScrollArea>
+                {mode === 'pretty' && (
+                    <PrettyView treeData={treeData} rawText={rawText} detected={detected} />
+                )}
+                {mode === 'raw' && <RawView rawText={rawText} />}
+                {mode === 'preview' && <PreviewView html={rawText} />}
+            </ScrollArea>
+        </>
+    );
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/types.ts

@@ -0,0 +1,26 @@
+import type { Language } from '../../../../PrettyCode';
+
+/** Panels the user can switch between in the response view.
+ *
+ *   - ``pretty``:  structured rendering — JsonTree for JSON, syntax-
+ *                  highlighted code for HTML/XML/CSS/text.
+ *   - ``raw``:     plain ``<pre>`` dump of whatever the server returned.
+ *   - ``preview``: sandboxed iframe for HTML responses (when you want
+ *                  to *see* an error page the server produced rather
+ *                  than read its source). Tab is hidden for non-HTML. */
+export type ViewMode = 'pretty' | 'raw' | 'preview';
+
+/** Content categories derived from the server's ``Content-Type`` header.
+ *  We project the rich MIME type space onto a short enum so the renderer
+ *  and tab-list only have to switch on a handful of values. */
+export type ContentKind = 'json' | 'html' | 'xml' | 'css' | 'javascript' | 'text';
+
+export interface DetectedContent {
+    kind: ContentKind;
+    /** Prism ``Language`` id matching ``kind`` — fed into PrettyCode. */
+    prism: Language;
+    /** Full Content-Type header value, stripped of parameters (e.g.
+     *  ``application/json`` without ``; charset=utf-8``). ``null`` when
+     *  the server didn't send one. */
+    contentType: string | null;
+}

package/src/tools/OpenapiViewer/components/shared/ResponsePanel/useResponseView.ts

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+
+import { detectContent } from './detectContent';
+import type { DetectedContent } from './types';
+
+interface UseResponseViewResult {
+    /** Parsed JSON value when the body is JSON, otherwise ``null``.
+     *  JsonTree needs a live object to render properly, so we parse
+     *  once up-front and cache. */
+    treeData: unknown;
+    /** Stringified body, always present when the server returned
+     *  anything. Used by Raw and Pretty-for-text tabs. */
+    rawText: string;
+    /** Content-type + prism language inference. */
+    detected: DetectedContent;
+}
+
+/** Shape the raw response payload into the pieces each view tab
+ *  needs. Exposed as a hook so the component stays thin and the
+ *  normalisation is easy to test in isolation. */
+export function useResponseView(
+    data: unknown,
+    headers: unknown,
+): UseResponseViewResult {
+    return useMemo(() => {
+        if (data == null) {
+            return {
+                treeData: null,
+                rawText: '',
+                detected: detectContent(headers, ''),
+            };
+        }
+
+        // String body — might be JSON-in-a-string or a plain text dump.
+        if (typeof data === 'string') {
+            try {
+                return {
+                    treeData: JSON.parse(data),
+                    rawText: data,
+                    detected: detectContent(headers, data),
+                };
+            } catch {
+                return {
+                    treeData: null,
+                    rawText: data,
+                    detected: detectContent(headers, data),
+                };
+            }
+        }
+
+        // Object body — axios already parsed it. Stringify for Raw/
+        // Preview tabs and treat it as JSON regardless of headers.
+        const stringified = (() => {
+            try { return JSON.stringify(data, null, 2); } catch { return String(data); }
+        })();
+        return {
+            treeData: data,
+            rawText: stringified,
+            detected: detectContent(headers, stringified),
+        };
+    }, [data, headers]);
+}