@brainfish-ai/devdoc 0.1.42 → 0.1.44

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

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Warning } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+export function ChangelogEntry({ version, date, children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-version": version,
+        className: "flex gap-6 lg:gap-10 py-8 border-b border-border last:border-b-0",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "w-24 lg:w-32 shrink-0",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "inline-block px-2.5 py-1 text-sm font-medium rounded-md bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 border border-amber-200 dark:border-amber-800",
+                        children: version
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "mt-2 text-sm text-muted-foreground",
+                        children: date
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex-1 min-w-0",
+                children: children
+            })
+        ]
+    });
+}
+export function ChangelogTitle({ children, className }) {
+    return /*#__PURE__*/ _jsx("h2", {
+        className: cn("text-xl font-semibold text-foreground mb-3", className),
+        children: children
+    });
+}
+export function ChangelogDescription({ children }) {
+    return /*#__PURE__*/ _jsx("p", {
+        className: "text-muted-foreground mb-4",
+        children: children
+    });
+}
+export function ChangelogImage({ src, alt = "Screenshot" }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "my-6 rounded-lg border border-border overflow-hidden shadow-sm",
+        children: /*#__PURE__*/ _jsx("img", {
+            src: src,
+            alt: alt,
+            className: "w-full"
+        })
+    });
+}
+export function BreakingChange({ children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "my-6 flex gap-3 p-4 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800",
+        children: [
+            /*#__PURE__*/ _jsx(Warning, {
+                className: "h-5 w-5 text-amber-600 dark:text-amber-500 shrink-0 mt-0.5",
+                weight: "fill"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "text-amber-800 dark:text-amber-200 text-sm",
+                children: children
+            })
+        ]
+    });
+}
+export function MoreUpdates({ children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "mt-6",
+        children: [
+            /*#__PURE__*/ _jsx("h3", {
+                className: "text-lg font-semibold text-foreground mb-3",
+                children: "More Updates"
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                className: "space-y-2 text-muted-foreground",
+                children: children
+            })
+        ]
+    });
+}
+export function UpdateItem({ children, type = 'default' }) {
+    return /*#__PURE__*/ _jsxs("li", {
+        className: "flex items-start gap-2",
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "mt-2 h-1.5 w-1.5 rounded-full bg-foreground shrink-0"
+            }),
+            /*#__PURE__*/ _jsxs("span", {
+                children: [
+                    type === 'behavior' && /*#__PURE__*/ _jsx("strong", {
+                        className: "font-semibold text-foreground",
+                        children: "Behavior Change "
+                    }),
+                    children
+                ]
+            })
+        ]
+    });
+}

package/renderer/components/docs/mdx/code-block.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, isValidElement, createContext, useContext } from 'react';
+import { cn } from '@/lib/utils';
+import { Copy, Check } from '@phosphor-icons/react';
+/**
+ * Pre and Code components for code block styling
+ */ // Context to detect if we're inside a CodeGroup
+export const CodeGroupContext = /*#__PURE__*/ createContext(false);
+// Extract text content from nested React elements
+function extractTextContent(node) {
+    if (typeof node === 'string') return node;
+    if (typeof node === 'number') return String(node);
+    if (Array.isArray(node)) return node.map(extractTextContent).join('');
+    if (/*#__PURE__*/ isValidElement(node)) {
+        const props = node.props;
+        if (props.children) {
+            return extractTextContent(props.children);
+        }
+    }
+    return '';
+}
+// Get display name for language
+function getDisplayName(language) {
+    const displayNames = {
+        javascript: 'JavaScript',
+        typescript: 'TypeScript',
+        python: 'Python',
+        java: 'Java',
+        go: 'Go',
+        rust: 'Rust',
+        ruby: 'Ruby',
+        php: 'PHP',
+        csharp: 'C#',
+        cpp: 'C++',
+        c: 'C',
+        swift: 'Swift',
+        kotlin: 'Kotlin',
+        bash: 'Bash',
+        shell: 'Shell',
+        json: 'JSON',
+        yaml: 'YAML',
+        html: 'HTML',
+        css: 'CSS',
+        sql: 'SQL',
+        markdown: 'Markdown',
+        text: 'Text',
+        plaintext: 'Text'
+    };
+    return displayNames[language.toLowerCase()] || language.charAt(0).toUpperCase() + language.slice(1);
+}
+export function Pre({ children, className, 'data-language': dataLanguage, ...props }) {
+    const isInCodeGroup = useContext(CodeGroupContext);
+    const [copied, setCopied] = useState(false);
+    // If inside CodeGroup, render plain pre (CodeGroup handles styling)
+    if (isInCodeGroup) {
+        return /*#__PURE__*/ _jsx("pre", {
+            className: cn('overflow-x-auto', className),
+            ...props,
+            children: children
+        });
+    }
+    // Extract language from children's className or data attribute
+    let language = dataLanguage || 'text';
+    let content = '';
+    if (/*#__PURE__*/ isValidElement(children)) {
+        const childProps = children.props;
+        const childClassName = childProps.className || '';
+        const match = childClassName.match(/language-(\w+)/);
+        if (match) {
+            language = match[1];
+        }
+        content = extractTextContent(childProps.children);
+    }
+    const handleCopy = async ()=>{
+        try {
+            await navigator.clipboard.writeText(content.trim());
+            setCopied(true);
+            setTimeout(()=>setCopied(false), 2000);
+        } catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+    const displayName = getDisplayName(language);
+    // Standalone code block - styled like CodeGroup
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "docs-code-block my-4 rounded-xl border border-zinc-800 overflow-hidden bg-[#1a1a1a]",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "docs-code-header flex items-center justify-between bg-[#262626] px-2",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex overflow-x-auto",
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "docs-code-tab px-4 py-2.5 text-sm font-medium whitespace-nowrap text-white relative",
+                            children: [
+                                displayName,
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-500 rounded-full"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "docs-code-actions flex items-center gap-1 pr-2",
+                        children: /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: handleCopy,
+                            className: cn('p-1.5 rounded text-zinc-500 hover:text-zinc-300', 'hover:bg-zinc-700/50 transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'),
+                            title: "Copy code",
+                            children: copied ? /*#__PURE__*/ _jsx(Check, {
+                                className: "h-4 w-4 text-emerald-500",
+                                weight: "bold"
+                            }) : /*#__PURE__*/ _jsx(Copy, {
+                                className: "h-4 w-4"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "docs-code-content overflow-x-auto",
+                children: /*#__PURE__*/ _jsx("pre", {
+                    className: cn('p-4 m-0 bg-transparent text-sm', className),
+                    ...props,
+                    children: children
+                })
+            })
+        ]
+    });
+}
+export function Code({ children, className, ...props }) {
+    const isCodeBlock = className?.includes('language-');
+    if (isCodeBlock) {
+        return /*#__PURE__*/ _jsx("code", {
+            className: cn(className, 'bg-transparent'),
+            ...props,
+            children: children
+        });
+    }
+    // Inline code
+    return /*#__PURE__*/ _jsx("code", {
+        className: cn('docs-inline-code px-1.5 py-0.5 rounded text-sm font-mono', 'bg-zinc-800 text-zinc-200', className),
+        ...props,
+        children: children
+    });
+}

package/renderer/components/docs/mdx/code-group.js

@@ -0,0 +1,287 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, Children, isValidElement } from 'react';
+import { cn } from '@/lib/utils';
+import { Copy, Check } from '@phosphor-icons/react';
+// Extract text content from nested React elements
+function extractTextContent(node) {
+    if (typeof node === 'string') return node;
+    if (typeof node === 'number') return String(node);
+    if (Array.isArray(node)) return node.map(extractTextContent).join('');
+    if (/*#__PURE__*/ isValidElement(node)) {
+        const props = node.props;
+        if (props.children) {
+            return extractTextContent(props.children);
+        }
+    }
+    return '';
+}
+// Extract title from code comment on first line (e.g., "// npm" or "# yarn")
+function extractTitleFromComment(code) {
+    const firstLine = code.trim().split('\n')[0];
+    // Match various comment styles
+    const patterns = [
+        /^\/\/\s*(.+)$/,
+        /^#\s*(.+)$/,
+        /^\/\*\s*(.+?)\s*\*\/$/,
+        /^<!--\s*(.+?)\s*-->$/,
+        /^--\s*(.+)$/
+    ];
+    for (const pattern of patterns){
+        const match = firstLine.match(pattern);
+        if (match && match[1] && match[1].length < 30) {
+            return match[1].trim();
+        }
+    }
+    return null;
+}
+// Check if element type matches a tag name (handles both string and component types)
+function isElementType(element, tagName) {
+    const type = element.type;
+    if (typeof type === 'string') {
+        return type === tagName;
+    }
+    // Check displayName or name for components
+    if (typeof type === 'function') {
+        const funcType = type;
+        return funcType.displayName === tagName || funcType.name === tagName;
+    }
+    return false;
+}
+// Recursively find all pre elements
+function findPreElements(children, results = []) {
+    Children.forEach(children, (child)=>{
+        if (!child) return;
+        if (/*#__PURE__*/ isValidElement(child)) {
+            const props = child.props;
+            // Check if it's a pre element (either native or component)
+            if (isElementType(child, 'pre')) {
+                const codeChild = props.children;
+                let language = 'text';
+                let content = '';
+                if (/*#__PURE__*/ isValidElement(codeChild)) {
+                    const codeProps = codeChild.props;
+                    const className = codeProps.className || '';
+                    const match = className.match(/language-(\w+)/);
+                    language = match ? match[1] : 'text';
+                    content = extractTextContent(codeProps.children);
+                } else if (typeof codeChild === 'string') {
+                    content = codeChild;
+                } else {
+                    // Try to get content from nested structure
+                    content = extractTextContent(codeChild);
+                }
+                // Also check pre element's className for language
+                const preClassName = props.className || '';
+                const preMatch = preClassName.match(/language-(\w+)/);
+                if (preMatch) {
+                    language = preMatch[1];
+                }
+                // Check data-language attribute
+                if (props['data-language']) {
+                    language = props['data-language'];
+                }
+                // Extract title from various possible locations
+                // Priority: data-title > title prop > comment in code > language name
+                const commentTitle = extractTitleFromComment(content);
+                const title = props['data-title'] || props.title || commentTitle || getDisplayName(language);
+                results.push({
+                    title,
+                    language,
+                    content,
+                    element: child
+                });
+            } else if (isElementType(child, 'figure') && props['data-rehype-pretty-code-figure'] !== undefined) {
+                // Find pre inside figure
+                findPreElements(props.children, results);
+            } else if (props.children) {
+                findPreElements(props.children, results);
+            }
+        }
+    });
+    return results;
+}
+// Get display name for language
+function getDisplayName(language) {
+    const displayNames = {
+        javascript: 'JavaScript',
+        typescript: 'TypeScript',
+        python: 'Python',
+        java: 'Java',
+        go: 'Go',
+        rust: 'Rust',
+        ruby: 'Ruby',
+        php: 'PHP',
+        csharp: 'C#',
+        cpp: 'C++',
+        c: 'C',
+        swift: 'Swift',
+        kotlin: 'Kotlin',
+        bash: 'Bash',
+        shell: 'Shell',
+        json: 'JSON',
+        yaml: 'YAML',
+        html: 'HTML',
+        css: 'CSS',
+        sql: 'SQL',
+        markdown: 'Markdown',
+        text: 'Text',
+        plaintext: 'Text'
+    };
+    return displayNames[language.toLowerCase()] || language.charAt(0).toUpperCase() + language.slice(1);
+}
+export function CodeGroup({ children, className, variant = 'default' }) {
+    const blocks = findPreElements(children);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [copied, setCopied] = useState(false);
+    // If no code blocks found, just render children as-is
+    if (blocks.length === 0) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: className,
+            children: children
+        });
+    }
+    const activeBlock = blocks[activeIndex];
+    const handleCopy = async ()=>{
+        if (activeBlock?.content) {
+            try {
+                await navigator.clipboard.writeText(activeBlock.content.trim());
+                setCopied(true);
+                setTimeout(()=>setCopied(false), 2000);
+            } catch (err) {
+                console.error('Failed to copy:', err);
+            }
+        }
+    };
+    // Tabs variant - dark theme with border tabs
+    if (variant === 'tabs') {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: cn('docs-code-group docs-code-group-tabs my-4 rounded-xl border border-zinc-800 overflow-hidden bg-[#1a1a1a]', className),
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "docs-code-group-header flex items-center justify-between border-b border-zinc-800 bg-[#262626]",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex overflow-x-auto",
+                            children: blocks.map((block, index)=>/*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: ()=>setActiveIndex(index),
+                                    className: cn('docs-code-group-tab px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors border-b-2 -mb-px', 'hover:text-white', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', activeIndex === index ? 'text-white border-emerald-500' : 'text-zinc-400 border-transparent hover:border-zinc-600'),
+                                    children: block.title
+                                }, index))
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: handleCopy,
+                            className: cn('mr-3 p-1.5 rounded text-zinc-500 hover:text-zinc-300', 'hover:bg-zinc-700/50 transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'),
+                            title: "Copy code",
+                            children: copied ? /*#__PURE__*/ _jsx(Check, {
+                                className: "h-4 w-4 text-emerald-500",
+                                weight: "bold"
+                            }) : /*#__PURE__*/ _jsx(Copy, {
+                                className: "h-4 w-4"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: cn('docs-code-group-content', '[&>pre]:my-0 [&>pre]:rounded-none [&>pre]:border-0 [&>pre]:bg-[#1a1a1a]', '[&_pre]:my-0 [&_pre]:rounded-none [&_pre]:border-0 [&_pre]:bg-[#1a1a1a]', '[&_code]:bg-transparent [&_pre]:p-4', '[&_pre]:text-sm [&_code]:text-sm'),
+                    children: activeBlock?.element
+                })
+            ]
+        });
+    }
+    // Pills variant - pill-shaped buttons with dark theme
+    if (variant === 'pills') {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: cn('docs-code-group docs-code-group-pills my-4 rounded-xl border border-zinc-800 overflow-hidden bg-[#1a1a1a]', className),
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "docs-code-group-header flex items-center justify-between p-2 bg-[#262626] border-b border-zinc-800",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex gap-1 overflow-x-auto",
+                            children: blocks.map((block, index)=>/*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: ()=>setActiveIndex(index),
+                                    className: cn('docs-code-group-tab px-3 py-1.5 text-xs font-medium whitespace-nowrap rounded-full transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', activeIndex === index ? 'bg-emerald-500 text-white' : 'text-zinc-400 hover:text-white hover:bg-zinc-700'),
+                                    children: block.title
+                                }, index))
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: handleCopy,
+                            className: cn('p-1.5 rounded text-zinc-500 hover:text-zinc-300', 'hover:bg-zinc-700/50 transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'),
+                            title: "Copy code",
+                            children: copied ? /*#__PURE__*/ _jsx(Check, {
+                                className: "h-4 w-4 text-emerald-500",
+                                weight: "bold"
+                            }) : /*#__PURE__*/ _jsx(Copy, {
+                                className: "h-4 w-4"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: cn('docs-code-group-content', '[&>pre]:my-0 [&>pre]:rounded-none [&>pre]:border-0 [&>pre]:bg-[#1a1a1a]', '[&_pre]:my-0 [&_pre]:rounded-none [&_pre]:border-0 [&_pre]:bg-[#1a1a1a]', '[&_code]:bg-transparent [&_pre]:p-4', '[&_pre]:text-sm [&_code]:text-sm'),
+                    children: activeBlock?.element
+                })
+            ]
+        });
+    }
+    // Default variant - dark theme with underline indicator
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('docs-code-group docs-code-group-default my-4 rounded-xl border border-zinc-800 overflow-hidden bg-[#1a1a1a]', className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "docs-code-group-header flex items-center justify-between bg-[#262626] px-2",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex overflow-x-auto",
+                        children: blocks.map((block, index)=>/*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                onClick: ()=>setActiveIndex(index),
+                                className: cn('docs-code-group-tab px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors relative', 'hover:text-white', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', activeIndex === index ? 'text-white' : 'text-zinc-400'),
+                                children: [
+                                    block.title,
+                                    activeIndex === index && /*#__PURE__*/ _jsx("span", {
+                                        className: "absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-500 rounded-full"
+                                    })
+                                ]
+                            }, index))
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "docs-code-group-actions flex items-center gap-1 pr-2",
+                        children: /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: handleCopy,
+                            className: cn('p-1.5 rounded text-zinc-500 hover:text-zinc-300', 'hover:bg-zinc-700/50 transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'),
+                            title: "Copy code",
+                            children: copied ? /*#__PURE__*/ _jsx(Check, {
+                                className: "h-4 w-4 text-emerald-500",
+                                weight: "bold"
+                            }) : /*#__PURE__*/ _jsx(Copy, {
+                                className: "h-4 w-4"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: cn('docs-code-group-content', '[&>pre]:my-0 [&>pre]:rounded-none [&>pre]:border-0 [&>pre]:bg-[#1a1a1a]', '[&_pre]:my-0 [&_pre]:rounded-none [&_pre]:border-0 [&_pre]:bg-[#1a1a1a]', '[&_code]:bg-transparent [&_pre]:p-4', '[&_pre]:text-sm [&_code]:text-sm'),
+                children: activeBlock?.element
+            })
+        ]
+    });
+}
+export function CodeBlockItem({ children, title, language, className }) {
+    return /*#__PURE__*/ _jsx("pre", {
+        className: cn('p-4 overflow-x-auto', className),
+        "data-title": title,
+        "data-language": language,
+        children: /*#__PURE__*/ _jsx("code", {
+            className: language ? `language-${language}` : '',
+            children: children
+        })
+    });
+}

package/renderer/components/docs/mdx/file-embeds.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+import { DownloadSimple, FileAudio, FilePdf } from '@phosphor-icons/react';
+export function PDF({ src, title, height = 500, className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('my-4', className),
+        children: [
+            title && /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2 mb-2",
+                children: [
+                    /*#__PURE__*/ _jsx(FilePdf, {
+                        className: "h-5 w-5 text-red-500",
+                        weight: "fill"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-sm font-medium",
+                        children: title
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "rounded-lg border border-border overflow-hidden bg-muted",
+                style: {
+                    height
+                },
+                children: /*#__PURE__*/ _jsx("iframe", {
+                    src: `${src}#view=FitH`,
+                    className: "w-full h-full",
+                    title: title || 'PDF Document'
+                })
+            })
+        ]
+    });
+}
+export function Audio({ src, title, autoplay = false, loop = false, className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('my-4', className),
+        children: [
+            title && /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2 mb-2",
+                children: [
+                    /*#__PURE__*/ _jsx(FileAudio, {
+                        className: "h-5 w-5 text-primary",
+                        weight: "fill"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-sm font-medium",
+                        children: title
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "rounded-lg border border-border bg-muted p-4",
+                children: /*#__PURE__*/ _jsx("audio", {
+                    src: src,
+                    controls: true,
+                    autoPlay: autoplay,
+                    loop: loop,
+                    className: "w-full",
+                    children: "Your browser does not support the audio element."
+                })
+            })
+        ]
+    });
+}
+export function Download({ src, label, filename, className }) {
+    const displayLabel = label || 'Download File';
+    const downloadName = filename || src.split('/').pop() || 'download';
+    return /*#__PURE__*/ _jsxs("a", {
+        href: src,
+        download: downloadName,
+        className: cn('inline-flex items-center gap-2 px-4 py-2 rounded-lg', 'bg-primary text-primary-foreground hover:bg-primary/90', 'text-sm font-medium transition-colors', 'no-underline', className),
+        children: [
+            /*#__PURE__*/ _jsx(DownloadSimple, {
+                className: "h-4 w-4",
+                weight: "bold"
+            }),
+            displayLabel
+        ]
+    });
+}

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

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '@/lib/utils';
+export function Frame({ children, caption, className }) {
+    return /*#__PURE__*/ _jsxs("figure", {
+        className: cn('my-6', className),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "overflow-hidden rounded-lg border border-border bg-muted/30",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "[&>img]:m-0 [&>img]:w-full [&>img]:h-auto",
+                    children: children
+                })
+            }),
+            caption && /*#__PURE__*/ _jsx("figcaption", {
+                className: "mt-2 text-center text-sm text-muted-foreground",
+                children: caption
+            })
+        ]
+    });
+}
+export function Columns({ children, cols = 2, className }) {
+    const gridCols = {
+        1: 'grid-cols-1',
+        2: 'grid-cols-1 md:grid-cols-2',
+        3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+        4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('grid gap-4 my-4', gridCols[cols], className),
+        children: children
+    });
+}
+export function Snippet({ file, className }) {
+    // In production, this would dynamically load the snippet content
+    // For now, we show a placeholder
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('my-4 p-4 rounded-lg border border-dashed border-border bg-muted/30', className),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "text-sm text-muted-foreground",
+            children: [
+                "Snippet: ",
+                /*#__PURE__*/ _jsx("code", {
+                    className: "text-xs bg-muted px-1 py-0.5 rounded",
+                    children: file
+                })
+            ]
+        })
+    });
+}
+export function Latex({ children, className }) {
+    // In production, this would render LaTeX using KaTeX
+    // For now, we show the raw expression in a styled container
+    return /*#__PURE__*/ _jsx("span", {
+        className: cn('inline-block px-2 py-1 font-mono text-sm bg-muted rounded', className),
+        children: children
+    });
+}