@brainfish-ai/devdoc 0.1.42 → 0.1.43

package/renderer/components/docs/mdx/landing.js

@@ -0,0 +1,315 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Copy, Check, ArrowRight, GithubLogo, Terminal, ArrowUpRight, RocketLaunch } from '@phosphor-icons/react';
+import { getPhosphorIcon } from '@/lib/utils/icons';
+// Direct icon map for commonly used icons (fallback if dynamic import fails)
+const iconMap = {
+    'arrow-right': ArrowRight,
+    'github-logo': GithubLogo,
+    'terminal': Terminal,
+    'arrow-up-right': ArrowUpRight,
+    'rocket-launch': RocketLaunch
+};
+export function Hero({ children, className, variant = 'default', align = 'center', minHeight = 'md' }) {
+    const variantStyles = {
+        default: 'bg-background text-foreground',
+        gradient: 'bg-gradient-to-b from-background via-background to-muted/30 text-foreground',
+        dark: 'bg-zinc-950 text-white [&_.landing-tagline]:text-zinc-400 [&_.landing-headline]:text-white [&_.landing-description]:text-zinc-300 [&_.landing-button]:border-zinc-600',
+        light: 'bg-white text-zinc-900 [&_.landing-tagline]:text-zinc-500 [&_.landing-headline]:text-zinc-900 [&_.landing-description]:text-zinc-600 [&_.landing-button]:border-zinc-300',
+        pattern: 'bg-background bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-background to-background text-foreground'
+    };
+    const alignStyles = {
+        top: 'items-start pt-12',
+        center: 'items-center',
+        bottom: 'items-end pb-12'
+    };
+    const heightStyles = {
+        sm: 'min-h-[40vh]',
+        md: 'min-h-[60vh]',
+        lg: 'min-h-[80vh]',
+        full: 'min-h-screen'
+    };
+    return /*#__PURE__*/ _jsx("section", {
+        className: cn('landing-hero w-full flex flex-col justify-center', variantStyles[variant], alignStyles[align], heightStyles[minHeight], className),
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "landing-hero-content w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center",
+            children: children
+        })
+    });
+}
+export function Pre({ children, className, size = 'md', align = 'center', color = 'default', leading = 'tight', decorative = false }) {
+    const sizeStyles = {
+        xs: 'text-[0.5rem] sm:text-xs',
+        sm: 'text-xs sm:text-sm',
+        md: 'text-sm sm:text-base md:text-lg',
+        lg: 'text-base sm:text-lg md:text-xl lg:text-2xl',
+        xl: 'text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl'
+    };
+    const alignStyles = {
+        left: 'text-left',
+        center: 'text-center mx-auto',
+        right: 'text-right ml-auto'
+    };
+    const colorStyles = {
+        default: 'text-foreground',
+        muted: 'text-muted-foreground',
+        primary: 'text-primary',
+        white: 'text-white'
+    };
+    const leadingStyles = {
+        none: 'leading-none',
+        tight: 'leading-tight',
+        normal: 'leading-normal',
+        relaxed: 'leading-relaxed'
+    };
+    return /*#__PURE__*/ _jsx("pre", {
+        className: cn('landing-pre font-mono whitespace-pre select-none overflow-x-auto', sizeStyles[size], alignStyles[align], colorStyles[color], leadingStyles[leading], className),
+        "aria-hidden": decorative,
+        children: children
+    });
+}
+export function Tagline({ children, className, variant = 'default', tracking = 'wider' }) {
+    const variantStyles = {
+        default: '',
+        muted: 'opacity-60',
+        accent: 'text-primary'
+    };
+    const trackingStyles = {
+        normal: 'tracking-normal',
+        wide: 'tracking-wide',
+        wider: 'tracking-wider',
+        widest: 'tracking-widest'
+    };
+    // Use div instead of p to avoid hydration errors when MDX wraps content in <p>
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('landing-tagline text-sm sm:text-base font-medium uppercase', variantStyles[variant], trackingStyles[tracking], className),
+        children: children
+    });
+}
+export function Headline({ children, className, size = 'xl', weight = 'normal' }) {
+    const sizeStyles = {
+        md: 'text-xl sm:text-2xl md:text-3xl',
+        lg: 'text-2xl sm:text-3xl md:text-4xl',
+        xl: 'text-3xl sm:text-4xl md:text-5xl',
+        '2xl': 'text-4xl sm:text-5xl md:text-6xl'
+    };
+    const weightStyles = {
+        normal: 'font-normal',
+        medium: 'font-medium',
+        semibold: 'font-semibold',
+        bold: 'font-bold'
+    };
+    return /*#__PURE__*/ _jsx("h1", {
+        className: cn('landing-headline leading-tight', sizeStyles[size], weightStyles[weight], className),
+        children: children
+    });
+}
+export function Description({ children, className, size = 'lg', maxWidth = 'lg' }) {
+    const sizeStyles = {
+        sm: 'text-sm sm:text-base',
+        md: 'text-base sm:text-lg',
+        lg: 'text-lg sm:text-xl'
+    };
+    const maxWidthStyles = {
+        sm: 'max-w-md',
+        md: 'max-w-xl',
+        lg: 'max-w-2xl',
+        full: 'max-w-full'
+    };
+    // Use div instead of p to avoid hydration errors when MDX wraps content in <p>
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('landing-description opacity-80 mx-auto', sizeStyles[size], maxWidthStyles[maxWidth], className),
+        children: children
+    });
+}
+export function CommandBox({ command, prefix = '$', className, variant = 'default' }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async ()=>{
+        try {
+            await navigator.clipboard.writeText(command);
+            setCopied(true);
+            setTimeout(()=>setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+    const variantStyles = {
+        default: 'bg-zinc-950 border border-zinc-800 shadow-lg',
+        minimal: 'bg-zinc-900',
+        bordered: 'bg-zinc-950 border-2 border-zinc-700',
+        light: 'bg-muted border border-border shadow-sm'
+    };
+    const textStyles = {
+        default: 'text-white',
+        minimal: 'text-white',
+        bordered: 'text-white',
+        light: 'text-foreground'
+    };
+    const prefixStyles = {
+        default: 'text-zinc-400',
+        minimal: 'text-zinc-400',
+        bordered: 'text-zinc-400',
+        light: 'text-muted-foreground'
+    };
+    const buttonStyles = {
+        default: 'text-zinc-300 hover:text-white hover:bg-zinc-700',
+        minimal: 'text-zinc-300 hover:text-white hover:bg-zinc-700',
+        bordered: 'text-zinc-300 hover:text-white hover:bg-zinc-700',
+        light: 'text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10'
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('landing-command-box inline-flex items-center gap-3 rounded-lg px-4 py-3', variantStyles[variant], className),
+        children: [
+            /*#__PURE__*/ _jsxs("code", {
+                className: cn('flex items-center gap-2 font-mono text-sm sm:text-base', textStyles[variant]),
+                children: [
+                    prefix && /*#__PURE__*/ _jsx("span", {
+                        className: cn('select-none', prefixStyles[variant]),
+                        children: prefix
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        children: command
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: handleCopy,
+                className: cn('p-1.5 rounded transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', buttonStyles[variant]),
+                title: "Copy command",
+                children: copied ? /*#__PURE__*/ _jsx(Check, {
+                    className: "h-4 w-4 text-emerald-500",
+                    weight: "bold"
+                }) : /*#__PURE__*/ _jsx(Copy, {
+                    className: "h-4 w-4"
+                })
+            })
+        ]
+    });
+}
+export function Section({ children, className, id, variant = 'default', padding = 'lg' }) {
+    const variantStyles = {
+        default: 'bg-background text-foreground',
+        muted: 'bg-muted/30 text-foreground',
+        dark: 'bg-zinc-950 text-white [&_.landing-tagline]:text-zinc-400 [&_.landing-headline]:text-white [&_.landing-description]:text-zinc-300 [&_.landing-feature-title]:text-white [&_.landing-feature-description]:text-zinc-400 [&_.landing-button]:border-zinc-600',
+        light: 'bg-white text-zinc-900 [&_.landing-tagline]:text-zinc-500 [&_.landing-headline]:text-zinc-900 [&_.landing-description]:text-zinc-600 [&_.landing-feature-title]:text-zinc-900 [&_.landing-feature-description]:text-zinc-600 [&_.landing-button]:border-zinc-300',
+        accent: 'bg-primary/5 text-foreground'
+    };
+    const paddingStyles = {
+        none: '',
+        sm: 'py-8 sm:py-12',
+        md: 'py-12 sm:py-16',
+        lg: 'py-16 sm:py-24',
+        xl: 'py-24 sm:py-32'
+    };
+    return /*#__PURE__*/ _jsx("section", {
+        id: id,
+        className: cn('landing-section w-full', variantStyles[variant], paddingStyles[padding], className),
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "landing-section-content max-w-5xl mx-auto px-4 sm:px-6 lg:px-8",
+            children: children
+        })
+    });
+}
+export function Center({ children, className, gap = 'md' }) {
+    const gapStyles = {
+        none: '',
+        sm: 'space-y-2',
+        md: 'space-y-4',
+        lg: 'space-y-8'
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('landing-center flex flex-col items-center text-center', gapStyles[gap], className),
+        children: children
+    });
+}
+export function FeatureGrid({ children, className, cols = 3 }) {
+    const colStyles = {
+        2: 'grid-cols-1 md:grid-cols-2',
+        3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+        4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('landing-feature-grid grid gap-6', colStyles[cols], className),
+        children: children
+    });
+}
+export function FeatureItem({ children, title, icon, className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('landing-feature-item p-6 rounded-xl border border-border/50 bg-card/50', 'hover:border-primary/30 hover:bg-card/80 transition-colors', className),
+        children: [
+            icon && /*#__PURE__*/ _jsx("div", {
+                className: "landing-feature-icon mb-4 text-primary text-2xl",
+                children: icon
+            }),
+            title && /*#__PURE__*/ _jsx("h3", {
+                className: "landing-feature-title text-lg font-semibold mb-2",
+                children: title
+            }),
+            children && /*#__PURE__*/ _jsx("div", {
+                className: "landing-feature-description text-sm opacity-80",
+                children: children
+            })
+        ]
+    });
+}
+export function ButtonLink({ href, children, className, variant = 'primary', size = 'md', icon, iconPosition = 'right' }) {
+    const variantStyles = {
+        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        outline: 'border border-current/30 bg-transparent text-current hover:bg-current/10',
+        ghost: 'bg-transparent text-current hover:bg-current/10'
+    };
+    const sizeStyles = {
+        sm: 'px-3 py-1.5 text-sm',
+        md: 'px-4 py-2 text-base',
+        lg: 'px-6 py-3 text-lg'
+    };
+    const iconSizes = {
+        sm: 'h-4 w-4',
+        md: 'h-5 w-5',
+        lg: 'h-5 w-5'
+    };
+    // Try direct map first, then dynamic lookup
+    const IconComponent = icon ? iconMap[icon] || getPhosphorIcon(icon) : null;
+    return /*#__PURE__*/ _jsxs("a", {
+        href: href,
+        className: cn('landing-button inline-flex items-center justify-center gap-2 rounded-lg font-medium', 'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', variantStyles[variant], sizeStyles[size], className),
+        children: [
+            IconComponent && iconPosition === 'left' && /*#__PURE__*/ _jsx(IconComponent, {
+                className: iconSizes[size],
+                weight: "bold"
+            }),
+            children,
+            IconComponent && iconPosition === 'right' && /*#__PURE__*/ _jsx(IconComponent, {
+                className: iconSizes[size],
+                weight: "bold"
+            })
+        ]
+    });
+}
+export function Spacer({ size = 'md', className }) {
+    const sizeStyles = {
+        xs: 'h-2',
+        sm: 'h-4',
+        md: 'h-8',
+        lg: 'h-12',
+        xl: 'h-16',
+        '2xl': 'h-24'
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('landing-spacer', sizeStyles[size], className)
+    });
+}
+export function Divider({ className, variant = 'solid' }) {
+    const variantStyles = {
+        solid: 'border-t border-border',
+        dashed: 'border-t border-dashed border-border',
+        gradient: 'h-px bg-gradient-to-r from-transparent via-border to-transparent border-none'
+    };
+    return /*#__PURE__*/ _jsx("hr", {
+        className: cn('landing-divider w-full my-8', variantStyles[variant], className)
+    });
+}

package/renderer/components/docs/mdx/mermaid.js

@@ -0,0 +1,212 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@/lib/utils';
+import { ArrowsOut, X } from '@phosphor-icons/react';
+// Helper to detect dark mode
+function useIsDarkMode() {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(()=>{
+        const checkDarkMode = ()=>{
+            setIsDark(document.documentElement.classList.contains('dark'));
+        };
+        checkDarkMode();
+        // Watch for theme changes
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: [
+                'class'
+            ]
+        });
+        return ()=>observer.disconnect();
+    }, []);
+    return isDark;
+}
+export function Mermaid({ children, className }) {
+    const contentRef = useRef(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [error, setError] = useState(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const [modalSvg, setModalSvg] = useState('');
+    const [modalLoading, setModalLoading] = useState(false);
+    const isDarkMode = useIsDarkMode();
+    const code = typeof children === 'string' ? children.trim() : '';
+    // Track if component is mounted (for portal)
+    useEffect(()=>{
+        setMounted(true);
+    }, []);
+    // Render inline diagram
+    useEffect(()=>{
+        if (!code || !contentRef.current) return;
+        const renderDiagram = async ()=>{
+            try {
+                const mermaid = (await import('mermaid')).default;
+                mermaid.initialize({
+                    startOnLoad: false,
+                    theme: isDarkMode ? 'dark' : 'default',
+                    securityLevel: 'loose',
+                    fontFamily: 'inherit'
+                });
+                const id = `mermaid-inline-${Math.random().toString(36).substr(2, 9)}`;
+                const { svg } = await mermaid.render(id, code);
+                if (contentRef.current) {
+                    contentRef.current.innerHTML = svg;
+                    setIsLoaded(true);
+                    setError(null);
+                }
+            } catch (err) {
+                console.error('Mermaid rendering error:', err);
+                setError(err instanceof Error ? err.message : 'Failed to render diagram');
+                setIsLoaded(true);
+            }
+        };
+        renderDiagram();
+    }, [
+        code,
+        isDarkMode
+    ]);
+    // Render modal diagram when modal opens
+    useEffect(()=>{
+        if (!isModalOpen || !code) return;
+        setModalLoading(true);
+        setModalSvg('');
+        const renderModalDiagram = async ()=>{
+            try {
+                const mermaid = (await import('mermaid')).default;
+                mermaid.initialize({
+                    startOnLoad: false,
+                    theme: isDarkMode ? 'dark' : 'default',
+                    securityLevel: 'loose',
+                    fontFamily: 'inherit'
+                });
+                const id = `mermaid-modal-${Math.random().toString(36).substr(2, 9)}`;
+                const { svg } = await mermaid.render(id, code);
+                setModalSvg(svg);
+                setModalLoading(false);
+            } catch (err) {
+                console.error('Mermaid modal rendering error:', err);
+                setModalSvg(`<div class="p-4 text-red-500">Failed to render diagram</div>`);
+                setModalLoading(false);
+            }
+        };
+        renderModalDiagram();
+    }, [
+        isModalOpen,
+        code,
+        isDarkMode
+    ]);
+    // Close modal on escape key
+    useEffect(()=>{
+        const handleEscape = (e)=>{
+            if (e.key === 'Escape' && isModalOpen) {
+                setIsModalOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return ()=>document.removeEventListener('keydown', handleEscape);
+    }, [
+        isModalOpen
+    ]);
+    // Prevent body scroll when modal is open
+    useEffect(()=>{
+        if (isModalOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return ()=>{
+            document.body.style.overflow = '';
+        };
+    }, [
+        isModalOpen
+    ]);
+    const openModal = useCallback(()=>{
+        setIsModalOpen(true);
+    }, []);
+    const closeModal = useCallback(()=>{
+        setIsModalOpen(false);
+    }, []);
+    if (error) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: cn('my-4 p-4 rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950', className),
+            children: [
+                /*#__PURE__*/ _jsx("p", {
+                    className: "text-sm text-red-600 dark:text-red-400 font-medium",
+                    children: "Failed to render Mermaid diagram"
+                }),
+                /*#__PURE__*/ _jsx("pre", {
+                    className: "mt-2 text-xs text-red-500 dark:text-red-400 overflow-auto",
+                    children: error
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn('my-4 relative rounded-lg border border-border bg-muted/30 overflow-hidden group', className),
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "overflow-hidden min-h-[200px] relative",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                ref: contentRef,
+                                className: cn('flex items-center justify-center p-4', !isLoaded && 'opacity-0')
+                            }),
+                            !isLoaded && /*#__PURE__*/ _jsx("div", {
+                                className: "absolute inset-0 flex items-center justify-center",
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: "text-sm text-muted-foreground",
+                                    children: "Loading diagram..."
+                                })
+                            })
+                        ]
+                    }),
+                    isLoaded && /*#__PURE__*/ _jsx("button", {
+                        onClick: openModal,
+                        className: "absolute bottom-3 right-3 p-2 bg-background/90 backdrop-blur-sm rounded-lg border border-border shadow-sm hover:bg-muted transition-colors opacity-0 group-hover:opacity-100",
+                        title: "View fullscreen",
+                        children: /*#__PURE__*/ _jsx(ArrowsOut, {
+                            className: "h-4 w-4",
+                            weight: "bold"
+                        })
+                    })
+                ]
+            }),
+            mounted && isModalOpen && /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
+                className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm",
+                onClick: closeModal,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "relative bg-background rounded-lg border border-border shadow-2xl w-[95vw] h-[95vh] overflow-auto flex items-center justify-center",
+                    onClick: (e)=>e.stopPropagation(),
+                    children: [
+                        /*#__PURE__*/ _jsx("button", {
+                            onClick: closeModal,
+                            className: "absolute top-4 right-4 p-2 bg-muted/80 hover:bg-muted rounded-lg transition-colors z-10",
+                            title: "Close (Esc)",
+                            children: /*#__PURE__*/ _jsx(X, {
+                                className: "h-5 w-5",
+                                weight: "bold"
+                            })
+                        }),
+                        modalLoading ? /*#__PURE__*/ _jsx("div", {
+                            className: "text-sm text-muted-foreground",
+                            children: "Loading diagram..."
+                        }) : modalSvg ? /*#__PURE__*/ _jsx("div", {
+                            className: "p-8 flex items-center justify-center [&_svg]:w-auto [&_svg]:h-auto [&_svg]:min-w-[60vw] [&_svg]:min-h-[60vh] [&_svg]:max-w-[90vw] [&_svg]:max-h-[90vh]",
+                            dangerouslySetInnerHTML: {
+                                __html: modalSvg
+                            }
+                        }) : /*#__PURE__*/ _jsx("div", {
+                            className: "text-sm text-muted-foreground",
+                            children: "No diagram content (modalSvg is empty)"
+                        })
+                    ]
+                })
+            }), document.body)
+        ]
+    });
+}

package/renderer/components/docs/mdx/param-field.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '@/lib/utils';
+export function ParamField({ path, name, type, required = false, deprecated = false, default: defaultValue, placeholder, children, className }) {
+    const paramName = name || path?.split('.').pop() || 'param';
+    const paramPath = path || name;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('py-4 border-b border-border last:border-0', deprecated && 'opacity-60', className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-baseline gap-2 mb-1",
+                children: [
+                    /*#__PURE__*/ _jsx("code", {
+                        className: "text-sm font-semibold text-foreground",
+                        children: paramName
+                    }),
+                    type && /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono",
+                        children: type
+                    }),
+                    required && /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs px-1.5 py-0.5 rounded bg-red-500/10 text-red-600 dark:text-red-400 font-medium",
+                        children: "required"
+                    }),
+                    deprecated && /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400 font-medium",
+                        children: "deprecated"
+                    })
+                ]
+            }),
+            paramPath && paramPath !== paramName && /*#__PURE__*/ _jsx("div", {
+                className: "text-xs text-muted-foreground mb-2 font-mono",
+                children: paramPath
+            }),
+            defaultValue && /*#__PURE__*/ _jsxs("div", {
+                className: "text-xs text-muted-foreground mb-2",
+                children: [
+                    "Default: ",
+                    /*#__PURE__*/ _jsx("code", {
+                        className: "bg-muted px-1 py-0.5 rounded",
+                        children: defaultValue
+                    })
+                ]
+            }),
+            placeholder && /*#__PURE__*/ _jsxs("div", {
+                className: "text-xs text-muted-foreground mb-2",
+                children: [
+                    "Example: ",
+                    /*#__PURE__*/ _jsx("code", {
+                        className: "bg-muted px-1 py-0.5 rounded",
+                        children: placeholder
+                    })
+                ]
+            }),
+            children && /*#__PURE__*/ _jsx("div", {
+                className: "text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0",
+                children: children
+            })
+        ]
+    });
+}
+export function ResponseField({ name, type, required = false, children, className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('py-4 border-b border-border last:border-0', className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-baseline gap-2 mb-1",
+                children: [
+                    /*#__PURE__*/ _jsx("code", {
+                        className: "text-sm font-semibold text-foreground",
+                        children: name
+                    }),
+                    type && /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono",
+                        children: type
+                    }),
+                    required && /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs px-1.5 py-0.5 rounded bg-green-500/10 text-green-600 dark:text-green-400 font-medium",
+                        children: "always present"
+                    })
+                ]
+            }),
+            children && /*#__PURE__*/ _jsx("div", {
+                className: "text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0",
+                children: children
+            })
+        ]
+    });
+}
+export function Expandable({ title = 'Show child attributes', defaultOpen = false, children, className }) {
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('mt-2 ml-4 border-l-2 border-border', className),
+        children: [
+            /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                onClick: ()=>setIsOpen(!isOpen),
+                className: "text-xs text-primary hover:text-primary/80 transition-colors pl-3 py-1",
+                children: [
+                    isOpen ? 'Hide' : 'Show',
+                    " ",
+                    title.replace('Show ', '').replace('Hide ', '')
+                ]
+            }),
+            isOpen && /*#__PURE__*/ _jsx("div", {
+                className: "pl-4 pt-2",
+                children: children
+            })
+        ]
+    });
+}