@catalystsoftware/ui 1.0.12 → 1.0.14

package/dist/components/catalyst-ui/tools/md-render-genie.tsx

@@ -0,0 +1,1233 @@
+import { Copy } from "lucide-react";
+import { useState } from "react";
+
+export function MDRenderGenie({ content }) {
+    return (
+        <div className="h-[90vh] flex flex-col bg-background border-2 border-border rounded-[10px] shadow-lg overflow-hidden">
+            <div className="flex-1 overflow-y-auto bg-background">
+                <div className="mx-auto p-6">{renderPreview(content || "")}</div>
+            </div>
+        </div>
+    )
+}
+export const renderPreview = (text) => {
+
+    const formatInlineText = (text) => {
+        // Handle escaping first (before other formatting)
+        text = text.replace(/\\([\\`*_{}[\]()#+\-.!|])/g, '$1');
+
+        // Handle strikethrough
+        text = text.replace(/~~(.+?)~~/g, '<span class="line-through text-foreground">$1</span>');
+
+        // Handle bold (**text** or __text__)
+        text = text.replace(/\*\*(.+?)\*\*/g, '<strong class="text-foreground">$1</strong>');
+        text = text.replace(/__(.+?)__/g, '<strong class="text-foreground">$1</strong>');
+
+        // Handle italic (*text* or _text_)
+        text = text.replace(/\*(.+?)\*/g, '<em class="text-foreground">$1</em>');
+        text = text.replace(/_(.+?)_/g, '<em class="text-foreground">$1</em>');
+
+        // Handle highlighting (==text==)
+        text = text.replace(/==(.+?)==/g, '<mark class="bg-yellow-200 px-1">$1</mark>');
+
+        // Handle subscript (H~2~O)
+        text = text.replace(/~(.+?)~/g, '<sub class="text-foreground">$1</sub>');
+
+        // Handle superscript (X^2^)
+        text = text.replace(/\^(.+?)\^/g, '<sup class="text-foreground">$1</sup>');
+
+        // Handle inline code (avoid double processing)
+        text = text.replace(/`([^`]+)`/g, '<code class="bg-muted text-foreground px-2 py-1 rounded text-sm font-mono border">$1</code>');
+
+        // Handle links [text](url)
+        text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, function (match, text, url) {
+            return '<a href="' + url.replace(/\)$/, '') + '" class="text-blue-600 hover:text-blue-800 underline">' + text + '</a>';
+        });
+
+        // Handle autolinks (but not if already in markdown link or img)
+        text = text.replace(/(?<![\("])(https?:\/\/[^\s<>]+)(?![\)"])/g, '<a href="$1" class="text-blue-600 hover:text-blue-800 underline">$1</a>');
+
+        // Handle images ![alt](src)
+        text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="max-w-full h-auto rounded-lg" />');
+
+        // Handle mentions (@username)
+        text = text.replace(/@(\w+)/g, '<span class="text-blue-600 font-medium">@$1</span>');
+
+        // Handle issue references (#123)
+        text = text.replace(/#(\d+)/g, '<span class="text-blue-600">#$1</span>');
+
+        // Handle cross-repo references (owner/repo#123)
+        text = text.replace(/(\w+\/\w+)#(\d+)/g, '<span class="text-blue-600">$1#$2</span>');
+
+        // Handle emoji shortcodes (:smile:)
+        const emojiMap = {
+            ':smile:': '🙂',
+            ':heart:': '❤️',
+            ':thumbsup:': '👍',
+            ':rocket:': '🚀',
+            ':tada:': '🎉',
+            ':fire:': '🔥',
+            ':star:': '⭐',
+            ':check:': '✅',
+            ':x:': '❌',
+            ':warning:': '⚠️'
+        };
+
+        Object.entries(emojiMap).forEach(([shortcode, emoji]) => {
+            text = text.replace(new RegExp(shortcode.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), emoji);
+        });
+
+        // Handle keyboard keys
+        text = text.replace(/<kbd>([^<]+)<\/kbd>/g, '<kbd class="px-2 py-1 text-xs font-mono bg-gray-200 border border-gray-300 rounded shadow-sm">$1</kbd>');
+
+        // Handle line breaks (two spaces + newline or <br>)
+        text = text.replace(/  \n/g, '<br />');
+        text = text.replace(/<br\s*\/?>/gi, '<br />');
+
+        return text;
+    };
+
+    const lines = text.split("\n");
+    let inCodeBlock = false;
+    let codeBlockContent = [];
+    let codeBlockLanguage = "";
+    let inTable = false;
+    let tableHeaders = [];
+    let tableAlignments = [];
+    let inYamlFrontMatter = false;
+    let yamlContent = [];
+    let listStack = [];
+    let inDetails = false;
+    let detailsContent = [];
+    let detailsSummary = "";
+    let inBlockquote = false;
+    let blockquoteContent = [];
+    let blockquoteLevel = 0;
+
+    const getIndentLevel = (line) => {
+        const match = line.match(/^(\s*)/);
+        return match ? Math.floor(match[1].length / 2) : 0;
+    };
+
+    const isListItem = (line) => {
+        return /^\s*[-*+]\s/.test(line) || /^\s*\d+\.\s/.test(line);
+    };
+
+    const isTaskListItem = (line) => {
+        return /^\s*[-*+]\s\[([ xX])\]\s/.test(line);
+    };
+
+    const getBlockquoteLevel = (line) => {
+        const match = line.match(/^(>+)\s/);
+        return match ? match[1].length : 0;
+    };
+
+    const isBlockquote = (line) => {
+        return /^>+\s/.test(line);
+    };
+
+    const renderBlockquote = (content, level = 1, startIndex) => {
+        const alertMatch = content.match(/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/);
+        
+        if (alertMatch) {
+            const type = alertMatch[1];
+            const contentWithoutAlert = content.slice(alertMatch[0].length);
+            
+            const alertStyles = {
+                'NOTE': { bg: 'bg-blue-900/20', border: 'border-blue-500', icon: 'ℹ️', text: 'text-blue-400' },
+                'TIP': { bg: 'bg-green-900/20', border: 'border-green-500', icon: '💡', text: 'text-green-400' },
+                'IMPORTANT': { bg: 'bg-purple-900/20', border: 'border-purple-500', icon: '❗', text: 'text-purple-400' },
+                'WARNING': { bg: 'bg-yellow-900/20', border: 'border-yellow-500', icon: '⚠️', text: 'text-yellow-400' },
+                'CAUTION': { bg: 'bg-red-900/20', border: 'border-red-500', icon: '🚨', text: 'text-red-400' }
+            };
+            
+            const style = alertStyles[type];
+              if (!style) {
+            // Fallback for unknown alert types
+            return (
+                <blockquote key={startIndex} className="border-l-4 border-blue-500 pl-4 py-2 mb-1 bg-blue-900/20 italic">
+                    <span dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+                </blockquote>
+            );
+        }
+            return (
+                <div key={startIndex} className={`${style.bg} ${style.border} border-l-4 pl-4 pr-4 py-3 mb-2 rounded-r`}>
+                    <div className={`flex items-center gap-2 font-semibold mb-1 ${style.text}`}>
+                        <span>{style.icon}</span>
+                        <span>{type}</span>
+                    </div>
+                    <div dangerouslySetInnerHTML={{ __html: formatInlineText(contentWithoutAlert) }} />
+                </div>
+            );
+        }
+
+        const borderClass = level === 1 ? 'border-l-4 border-blue-500' : 
+                           level === 2 ? 'border-l-4 border-purple-500' : 
+                           'border-l-4 border-gray-500';
+        
+        return (
+            <blockquote key={startIndex} className={`${borderClass} pl-4 py-2 mb-1 bg-blue-900/20 italic`}>
+                <span dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+            </blockquote>
+        );
+    };
+
+    const result = [];
+
+    for (let index = 0; index < lines.length; index++) {
+        const line = lines[index];
+
+        // Handle YAML front matter
+        if (line.trim() === '---' && !inCodeBlock && !inBlockquote) {
+            if (!inYamlFrontMatter && index === 0) {
+                inYamlFrontMatter = true;
+                continue;
+            } else if (inYamlFrontMatter) {
+                inYamlFrontMatter = false;
+                yamlContent = [];
+                continue;
+            }
+        }
+
+        if (inYamlFrontMatter) {
+            yamlContent.push(line);
+            continue;
+        }
+
+        // Handle HTML details/summary (collapsible content)
+        if (line.trim().startsWith('<details>')) {
+            inDetails = true;
+            detailsContent = [];
+            detailsSummary = "";
+            continue;
+        }
+
+        if (inDetails) {
+            if (line.trim().startsWith('<summary>')) {
+                const summaryMatch = line.match(/<summary>(.*?)<\/summary>/);
+                if (summaryMatch) {
+                    detailsSummary = summaryMatch[1];
+                } else {
+                    detailsSummary = line.replace(/<summary>/g, '').trim();
+                }
+                continue;
+            }
+
+            if (line.trim().startsWith('</summary>')) {
+                continue;
+            }
+
+            if (line.trim().startsWith('</details>')) {
+                inDetails = false;
+                
+                result.push(
+                    <details key={index} className="mb-4 border border-border rounded-lg">
+                        <summary className="cursor-pointer p-3 bg-muted hover:bg-muted/80 rounded-t-lg font-medium">
+                            {detailsSummary || "Click to expand"}
+                        </summary>
+                        <div className="p-3">
+                            {renderPreview(detailsContent.join('\n'))}
+                        </div>
+                    </details>
+                );
+                continue;
+            }
+
+            detailsContent.push(line);
+            continue;
+        }
+
+        // Handle blockquotes (including nested and multi-line)
+        if (isBlockquote(line)) {
+            const level = getBlockquoteLevel(line);
+            const content = line.replace(/^>+\s/, '');
+            
+            if (!inBlockquote) {
+                inBlockquote = true;
+                blockquoteLevel = level;
+                blockquoteContent = [content];
+            } else if (level === blockquoteLevel) {
+                blockquoteContent.push(content);
+            } else {
+                // Level changed, render previous blockquote
+                result.push(renderBlockquote(blockquoteContent.join(' '), blockquoteLevel, index - blockquoteContent.length));
+                blockquoteContent = [content];
+                blockquoteLevel = level;
+            }
+            continue;
+        } else if (inBlockquote && line.trim() === '') {
+            // Empty line continues blockquote
+            blockquoteContent.push('');
+            continue;
+        } else if (inBlockquote) {
+            // End blockquote
+            result.push(renderBlockquote(blockquoteContent.join(' '), blockquoteLevel, index - blockquoteContent.length));
+            inBlockquote = false;
+            blockquoteContent = [];
+            blockquoteLevel = 0;
+            // Process current line normally (fall through)
+        }
+
+        // Handle Mermaid diagrams
+        if (line.startsWith("```mermaid")) {
+            inCodeBlock = true;
+            codeBlockLanguage = "mermaid";
+            continue;
+        }
+
+        // Handle Math blocks
+        if (line.startsWith("```math")) {
+            inCodeBlock = true;
+            codeBlockLanguage = "math";
+            continue;
+        }
+
+        // Handle diff code blocks
+        if (line.startsWith("```diff")) {
+            inCodeBlock = true;
+            codeBlockLanguage = "diff";
+            continue;
+        }
+
+        // Handle advanced code blocks with line numbers and highlighting
+        if (line.match(/^```(\w+)\s*\{.*\}/)) {
+            const match = line.match(/^```(\w+)\s*\{(.*)\}/);
+            inCodeBlock = true;
+            codeBlockLanguage = match[1];
+            continue;
+        }
+
+        // Handle code blocks
+        if (line.startsWith("```")) {
+            if (inCodeBlock) {
+                inCodeBlock = false;
+                const code = codeBlockContent.join("\n");
+                codeBlockContent = [];
+
+                // Special handling for different code block types
+                if (codeBlockLanguage === "mermaid") {
+                    result.push(
+                        <div key={index} className="bg-[#111827] text-foreground p-4 rounded-lg mb-4 border text-center">
+                            <div className="text-muted-foreground text-sm mb-2">Mermaid Diagram</div>
+                            <div className="text-blue-400 font-mono text-sm">{code}</div>
+                        </div>
+                    );
+                    codeBlockLanguage = "";
+                    continue;
+                }
+
+                if (codeBlockLanguage === "math") {
+                    result.push(
+                        <div key={index} className="bg-[#111827] text-foreground p-4 rounded-lg mb-4 border text-center">
+                            <div className="text-muted-foreground text-sm mb-2">Math Expression</div>
+                            <div className="text-green-400 font-mono text-lg">{code}</div>
+                        </div>
+                    );
+                    codeBlockLanguage = "";
+                    continue;
+                }
+
+                if (codeBlockLanguage === "diff") {
+                    const diffLines = code.split('\n');
+                    result.push(
+                        <pre key={index} className="bg-[#111827] text-foreground p-3 rounded-lg overflow-x-auto mb-2 border">
+                            <div className="flex items-center justify-between mb-2">
+                                <span className="text-xs text-muted-foreground font-mono">diff</span>
+                                <button className="text-xs hover:text-foreground h-4 w-4">
+                                    <Copy className='text-muted-foreground h-4 w-4' />
+                                </button>
+                            </div>
+                            <code className="text-sm font-mono">
+                                {diffLines.map((diffLine, i) => (
+                                    <div key={i} className={
+                                        diffLine.startsWith('+') ? 'text-green-400 bg-green-900/20' :
+                                            diffLine.startsWith('-') ? 'text-red-400 bg-red-900/20' :
+                                                'text-gray-300'
+                                    }>
+                                        {diffLine}
+                                    </div>
+                                ))}
+                            </code>
+                        </pre>
+                    );
+                    codeBlockLanguage = "";
+                    continue;
+                }
+
+                result.push(
+                    <pre key={index} className="bg-[#111827] text-foreground p-3 rounded-lg overflow-x-auto mb-2 border">
+                        <div className="flex items-center justify-between mb-2">
+                            <span className="text-xs text-muted-foreground font-mono">
+                                {codeBlockLanguage || "code"}
+                            </span>
+                            <button className="text-xs hover:text-foreground h-4 w-4">
+                                <Copy className='text-muted-foreground h-4 w-4' />
+                            </button>
+                        </div>
+                        <code className="text-sm font-mono">{code}</code>
+                    </pre>
+                );
+                codeBlockLanguage = "";
+            } else {
+                inCodeBlock = true;
+                codeBlockLanguage = line.slice(3).trim();
+            }
+            continue;
+        }
+
+        if (inCodeBlock) {
+            codeBlockContent.push(line);
+            continue;
+        }
+
+        // Handle indented code blocks (4 spaces or 1 tab)
+        if ((line.startsWith('    ') || line.startsWith('\t')) && !isListItem(line)) {
+            const codeLines = [line.replace(/^    |\t/, '')];
+            let j = index + 1;
+            
+            // Collect consecutive indented lines
+            while (j < lines.length && (lines[j].startsWith('    ') || lines[j].startsWith('\t') || lines[j].trim() === '')) {
+                if (lines[j].trim() === '') {
+                    codeLines.push('');
+                } else {
+                    codeLines.push(lines[j].replace(/^    |\t/, ''));
+                }
+                j++;
+            }
+            
+            result.push(
+                <pre key={index} className="bg-[#111827] text-foreground p-3 rounded-lg overflow-x-auto mb-2 border">
+                    <code className="text-sm font-mono">{codeLines.join('\n')}</code>
+                </pre>
+            );
+            
+            index = j - 1;
+            continue;
+        }
+
+        // Handle Setext headings (underline style)
+        if (index < lines.length - 1) {
+            const nextLine = lines[index + 1];
+            if (nextLine && /^=+$/.test(nextLine.trim()) && line.trim()) {
+                const text = line.trim();
+                const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+                result.push(
+                    <h1 key={index} id={id} className="text-4xl font-bold mb-2 mt-4 border-b pb-2 text-primary">
+                        {text}
+                    </h1>
+                );
+                index++; // Skip the next line (underline)
+                continue;
+            }
+            if (nextLine && /^-+$/.test(nextLine.trim()) && line.trim() && !line.startsWith('-')) {
+                const text = line.trim();
+                const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+                result.push(
+                    <h2 key={index} id={id} className="text-3xl font-semibold mb-0.5 mt-1 text-primary">
+                        {text}
+                    </h2>
+                );
+                index++; // Skip the next line (underline)
+                continue;
+            }
+        }
+
+        // Handle headings with anchor links
+        if (line.startsWith("# ")) {
+            const text = line.slice(2);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h1 key={index} id={id} className="text-4xl font-bold mb-2 mt-4 border-b pb-2 text-primary">
+                    {text}
+                </h1>
+            );
+            continue;
+        }
+        if (line.startsWith("## ")) {
+            const text = line.slice(3);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h2 key={index} id={id} className="text-3xl font-semibold mb-0.5 mt-1 text-primary">
+                    {text}
+                </h2>
+            );
+            continue;
+        }
+        if (line.startsWith("### ")) {
+            const text = line.slice(4);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h3 key={index} id={id} className="text-2xl font-medium mb-0.5 mt-1 text-primary">
+                    {text}
+                </h3>
+            );
+            continue;
+        }
+        if (line.startsWith("#### ")) {
+            const text = line.slice(5);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h4 key={index} id={id} className="text-xl font-medium mb-0.5 mt-1 text-primary">
+                    {text}
+                </h4>
+            );
+            continue;
+        }
+        if (line.startsWith("##### ")) {
+            const text = line.slice(6);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h5 key={index} id={id} className="text-lg font-medium mb-0.5 mt-1 text-primary">
+                    {text}
+                </h5>
+            );
+            continue;
+        }
+
+        // Handle lists with proper nesting
+        if (isListItem(line) || isTaskListItem(line)) {
+            const indentLevel = getIndentLevel(line);
+            const trimmedLine = line.trim();
+
+            // Task lists (checkboxes)
+            if (trimmedLine.startsWith("- [ ] ") || trimmedLine.startsWith("* [ ] ") || trimmedLine.startsWith("+ [ ] ")) {
+                const content = trimmedLine.slice(6);
+                result.push(
+                    <div key={index} className="flex items-start mb-0.5" style={{ marginLeft: `${indentLevel * 1.5}rem` }}>
+                        <input type="checkbox" disabled className="mr-3 mt-1" />
+                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+                    </div>
+                );
+                continue;
+            }
+            if (trimmedLine.startsWith("- [x] ") || trimmedLine.startsWith("- [X] ") ||
+                trimmedLine.startsWith("* [x] ") || trimmedLine.startsWith("* [X] ") ||
+                trimmedLine.startsWith("+ [x] ") || trimmedLine.startsWith("+ [X] ")) {
+                const content = trimmedLine.slice(6);
+                result.push(
+                    <div key={index} className="flex items-start mb-0.5" style={{ marginLeft: `${indentLevel * 1.5}rem` }}>
+                        <input type="checkbox" disabled checked className="mr-3 mt-1" />
+                        <span className="line-through text-foreground" dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+                    </div>
+                );
+                continue;
+            }
+
+            // Regular unordered lists
+            if (/^\s*[-*+]\s/.test(line)) {
+                const content = trimmedLine.replace(/^[-*+]\s/, "");
+                result.push(
+                    <li key={index} className="mb-0.5 list-disc text-foreground text-[.875rem]" style={{ marginLeft: `${indentLevel * 1.5 + 1.5}rem` }}>
+                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+                    </li>
+                );
+                continue;
+            }
+
+            // Numbered lists
+            if (/^\s*\d+\.\s/.test(line)) {
+                const content = trimmedLine.replace(/^\d+\.\s/, "");
+                result.push(
+                    <li key={index} className="mb-0.5 list-decimal text-foreground" style={{ marginLeft: `${indentLevel * 1.5 + 1.5}rem` }}>
+                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+                    </li>
+                );
+                continue;
+            }
+        } else {
+            listStack = [];
+        }
+
+        // Handle horizontal rules
+        if ((line.trim() === "---" || line.trim() === "***" || line.trim() === "___") && !inCodeBlock) {
+            result.push(<hr key={index} className="my-4 border-border" />);
+            continue;
+        }
+
+        if (line.trim() === "") {
+            result.push(<div key={index} className="h-4" />);
+            continue;
+        }
+
+        // Tables with alignment support
+        if (line.includes("|") && line.trim().startsWith("|") && line.trim().endsWith("|")) {
+            if (!inTable) {
+                inTable = true;
+                tableHeaders = line
+                    .split("|")
+                    .map((h) => h.trim())
+                    .filter((h) => h);
+                
+                // Check next line for alignment
+                if (index < lines.length - 1 && lines[index + 1].includes("|")) {
+                    const alignLine = lines[index + 1];
+                    tableAlignments = alignLine
+                        .split("|")
+                        .map((a) => a.trim())
+                        .filter((a) => a)
+                        .map((a) => {
+                            if (a.startsWith(':') && a.endsWith(':')) return 'center';
+                            if (a.endsWith(':')) return 'right';
+                            return 'left';
+                        });
+                }
+                
+                result.push(
+                    <table key={index} className="w-full border-collapse border border-border mb-0.5">
+                        <thead>
+                            <tr className="bg-[#111827]">
+                                {tableHeaders.map((header, i) => (
+                                    <th 
+                                        key={i} 
+                                        className="border border-border px-3 py-2 font-semibold"
+                                        style={{ textAlign: tableAlignments[i] || 'left' }}
+                                    >
+                                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(header) }} />
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                    </table>
+                );
+            } else if (line.includes("---") || line.includes(":--") || line.includes("--:") || line.includes(":-:")) {
+                // Skip separator row
+            } else {
+                const cells = line
+                    .split("|")
+                    .map((c) => c.trim())
+                    .filter((c) => c);
+                result.push(
+                    <tr key={index}>
+                        {cells.map((cell, i) => (
+                            <td 
+                                key={i} 
+                                className="border border-border px-3 py-2"
+                                style={{ textAlign: tableAlignments[i] || 'left' }}
+                            >
+                                <span dangerouslySetInnerHTML={{ __html: formatInlineText(cell.replace(/\\\|/g, '|')) }} />
+                            </td>
+                        ))}
+                    </tr>
+                );
+            }
+            continue;
+        } else {
+            inTable = false;
+            tableAlignments = [];
+        }
+
+        // Definition lists
+        if (line.includes(" : ") && !line.startsWith(" ")) {
+            const [term, definition] = line.split(" : ");
+            result.push(
+                <dl key={index} className="mb-0.5">
+                    <dt className="font-semibold">{term}</dt>
+                    <dd className="ml-4 text-muted-foreground">
+                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(definition) }} />
+                    </dd>
+                </dl>
+            );
+            continue;
+        }
+
+        // Footnote references [^1]
+        if (line.includes("[^")) {
+            const formatted = line.replace(/\[\^(\w+)\]/g, '<sup><a href="#fn-$1" class="text-blue-600">$1</a></sup>');
+            result.push(
+                <p key={index} className="mb-0.5 leading-relaxed text-sm sm:text-base">
+                    <span dangerouslySetInnerHTML={{ __html: formatInlineText(formatted) }} />
+                </p>
+            );
+            continue;
+        }
+
+        // Footnote definitions [^1]: content
+        if (line.match(/^\[\^(\w+)\]:\s/)) {
+            const match = line.match(/^\[\^(\w+)\]:\s(.+)/);
+            if (match) {
+                result.push(
+                    <div key={index} id={`fn-${match[1]}`} className="text-xs text-muted-foreground border-t pt-2 mt-1">
+                        <sup>{match[1]}</sup> <span dangerouslySetInnerHTML={{ __html: formatInlineText(match[2]) }} />
+                    </div>
+                );
+                continue;
+            }
+        }
+
+        // Handle commit references (abc123 - 7 char hash)
+        if (line.match(/\b[a-f0-9]{7}\b/)) {
+            const formatted = line.replace(/\b([a-f0-9]{7})\b/g, '<code class="bg-gray-800 text-yellow-400 px-2 py-1 rounded text-sm font-mono">$1</code>');
+            result.push(
+                <p key={index} className="mb-0.5 leading-relaxed text-sm sm:text-base">
+                    <span dangerouslySetInnerHTML={{ __html: formatInlineText(formatted) }} />
+                </p>
+            );
+            continue;
+        }
+
+        // Handle wiki links [[Page Name]]
+        if (line.includes("[[") && line.includes("]]")) {
+            const formatted = line.replace(/\[\[([^\]]+)\]\]/g, '<a href="/wiki/$1" class="text-purple-600 hover:text-purple-800 underline">$1</a>');
+            result.push(
+                <p key={index} className="mb-0.5 leading-relaxed text-sm sm:text-base">
+                    <span dangerouslySetInnerHTML={{ __html: formatInlineText(formatted) }} />
+                </p>
+            );
+            continue;
+        }
+
+        // Default paragraph
+        result.push(
+            <p key={index} className="mb-0.5 leading-relaxed text-sm sm:text-base">
+                <span dangerouslySetInnerHTML={{ __html: formatInlineText(line) }} />
+            </p>
+        );
+    }
+
+    // Handle unclosed blockquote at end of document
+    if (inBlockquote) {
+        result.push(renderBlockquote(blockquoteContent.join(' '), blockquoteLevel, lines.length - blockquoteContent.length));
+    }
+
+    return result;
+};
+ const renderPreview1 = (text) => {
+
+    const formatInlineText = (text) => {
+        // Handle escaping first (before other formatting)
+        text = text.replace(/\\([\\`*_{}[\]()#+\-.!])/g, '$1');
+
+        // Handle strikethrough
+        text = text.replace(/~~(.+?)~~/g, '<span class="line-through text-foreground">$1</span>');
+
+        // Handle bold (**text** or __text__)
+        text = text.replace(/\*\*(.+?)\*\*/g, '<strong class="text-foreground">$1</strong>');
+        text = text.replace(/__(.+?)__/g, '<strong class="text-foreground">$1</strong>');
+
+        // Handle italic (*text* or _text_)
+        text = text.replace(/\*(.+?)\*/g, '<em class="text-foreground">$1</em>');
+        text = text.replace(/_(.+?)_/g, '<em class="text-foreground">$1</em>');
+
+        // Handle highlighting (==text==)
+        text = text.replace(/==(.+?)==/g, '<mark class="bg-yellow-200 px-1">$1</mark>');
+
+        // Handle subscript (H~2~O)
+        text = text.replace(/~(.+?)~/g, '<sub class="text-foreground">$1</sub>');
+
+        // Handle superscript (X^2^)
+        text = text.replace(/\^(.+?)\^/g, '<sup class="text-foreground">$1</sup>');
+
+        // Handle inline code (avoid double processing)
+        text = text.replace(/`([^`]+)`/g, '<code class="bg-muted text-foreground px-2 py-1 rounded text-sm font-mono border">$1</code>');
+
+        // Handle links [text](url)
+        text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, function (match, text, url) {
+            return '<a href="' + url.replace(/\)$/, '') + '" class="text-blue-600 hover:text-blue-800 underline">' + text + '</a>';
+        });
+
+        // Handle autolinks
+        text = text.replace(/(https?:\/\/[^\s<>]+)/g, '<a href="$1" class="text-blue-600 hover:text-blue-800 underline">$1</a>');
+
+        // Handle images ![alt](src)
+        text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="max-w-full h-auto rounded-lg" />');
+
+        // Handle mentions (@username)
+        text = text.replace(/@(\w+)/g, '<span class="text-blue-600 font-medium">@$1</span>');
+
+        // Handle issue references (#123)
+        text = text.replace(/#(\d+)/g, '<span class="text-blue-600">#$1</span>');
+
+        // Handle cross-repo references (owner/repo#123)
+        text = text.replace(/(\w+\/\w+)#(\d+)/g, '<span class="text-blue-600">$1#$2</span>');
+
+        // Handle emoji shortcodes (:smile:)
+        const emojiMap = {
+            ':smile:': '🙂',
+            ':heart:': '❤️',
+            ':thumbsup:': '👍',
+            ':rocket:': '🚀',
+            ':tada:': '🎉',
+            ':fire:': '🔥',
+            ':star:': '⭐',
+            ':check:': '✅',
+            ':x:': '❌',
+            ':warning:': '⚠️'
+        };
+
+        Object.entries(emojiMap).forEach(([shortcode, emoji]) => {
+            text = text.replace(new RegExp(shortcode.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), emoji);
+        });
+
+        // Handle keyboard keys
+        text = text.replace(/<kbd>([^<]+)<\/kbd>/g, '<kbd class="px-2 py-1 text-xs font-mono bg-gray-200 border border-gray-300 rounded shadow-sm">$1</kbd>');
+
+        return text;
+    };
+
+    const lines = text.split("\n");
+    let inCodeBlock = false;
+    let codeBlockContent = [];
+    let codeBlockLanguage = "";
+    let inTable = false;
+    let tableHeaders = [];
+    let inYamlFrontMatter = false;
+    let yamlContent = [];
+    let listStack = []; // Track nested lists
+      let inDetails = false;
+       let detailsContent = [];
+    let detailsSummary = "";
+
+    const getIndentLevel = (line) => {
+        const match = line.match(/^(\s*)/);
+        return match ? Math.floor(match[1].length / 2) : 0;
+    };
+
+    const isListItem = (line) => {
+        return /^\s*[-*+]\s/.test(line) || /^\s*\d+\.\s/.test(line);
+    };
+
+    const isTaskListItem = (line) => {
+        return /^\s*[-*+]\s\[([ xX])\]\s/.test(line);
+    };
+
+    const closeListsToLevel = (targetLevel) => {
+        const elements = [];
+        while (listStack.length > targetLevel) {
+            const listType = listStack.pop();
+            elements.push(`</ul>`); // Could be </ol> for ordered lists
+        }
+        return elements;
+    };
+
+    const result = [];
+
+    for (let index = 0; index < lines.length; index++) {
+        const line = lines[index];
+
+        // Handle YAML front matter
+        if (line.trim() === '---') {
+            if (!inYamlFrontMatter && index === 0) {
+                inYamlFrontMatter = true;
+                continue;
+            } else if (inYamlFrontMatter) {
+                inYamlFrontMatter = false;
+                yamlContent = [];
+                continue;
+            }
+        }
+
+        if (inYamlFrontMatter) {
+            yamlContent.push(line);
+            continue;
+        }
+
+        // Handle HTML details/summary (collapsible content)
+        if (line.trim().startsWith('<details>')) {
+            inDetails = true;
+            detailsContent = [];
+            detailsSummary = "";
+            continue;
+        }
+
+        if (inDetails) {
+            // Check for summary
+            if (line.trim().startsWith('<summary>')) {
+                const summaryMatch = line.match(/<summary>(.*?)<\/summary>/);
+                if (summaryMatch) {
+                    detailsSummary = summaryMatch[1];
+                } else {
+                    // Summary spans multiple lines
+                    detailsSummary = line.replace(/<summary>/g, '').trim();
+                }
+                continue;
+            }
+
+            if (line.trim().startsWith('</summary>')) {
+                continue;
+            }
+
+            // Check for closing details tag
+            if (line.trim().startsWith('</details>')) {
+                inDetails = false;
+
+                // Render the details element with collected content
+                result.push(
+                    <details key={index} className="mb-4 border border-border rounded-lg">
+                        <summary className="cursor-pointer p-3 bg-muted hover:bg-muted/80 rounded-t-lg font-medium">
+                            {detailsSummary || "Click to expand"}
+                        </summary>
+                        <div className="p-3">
+                            {renderPreview(detailsContent.join('\n'))}
+                        </div>
+                    </details>
+                );
+                continue;
+            }
+
+            // Collect content inside details
+            detailsContent.push(line);
+            continue;
+        }
+
+        // Handle Mermaid diagrams
+        if (line.startsWith("```mermaid")) {
+            inCodeBlock = true;
+            codeBlockLanguage = "mermaid";
+            continue;
+        }
+
+        // Handle Math blocks
+        if (line.startsWith("```math")) {
+            inCodeBlock = true;
+            codeBlockLanguage = "math";
+            continue;
+        }
+
+        // Handle diff code blocks
+        if (line.startsWith("```diff")) {
+            inCodeBlock = true;
+            codeBlockLanguage = "diff";
+            continue;
+        }
+
+        // Handle advanced code blocks with line numbers and highlighting
+        if (line.match(/^```(\w+)\s*\{.*\}/)) {
+            const match = line.match(/^```(\w+)\s*\{(.*)\}/);
+            inCodeBlock = true;
+            codeBlockLanguage = match[1];
+            continue;
+        }
+
+        // Handle code blocks
+        if (line.startsWith("```")) {
+            if (inCodeBlock) {
+                inCodeBlock = false;
+                const code = codeBlockContent.join("\n");
+                codeBlockContent = [];
+
+                // Special handling for different code block types
+                if (codeBlockLanguage === "mermaid") {
+                    result.push(
+                        <div key={index} className="bg-[#111827] text-foreground p-4 rounded-lg mb-4 border text-center">
+                            <div className="text-muted-foreground text-sm mb-2">Mermaid Diagram</div>
+                            <div className="text-blue-400 font-mono text-sm">{code}</div>
+                        </div>
+                    );
+                    continue;
+                }
+
+                if (codeBlockLanguage === "math") {
+                    result.push(
+                        <div key={index} className="bg-[#111827] text-foreground p-4 rounded-lg mb-4 border text-center">
+                            <div className="text-muted-foreground text-sm mb-2">Math Expression</div>
+                            <div className="text-green-400 font-mono text-lg">{code}</div>
+                        </div>
+                    );
+                    continue;
+                }
+
+                if (codeBlockLanguage === "diff") {
+                    const diffLines = code.split('\n');
+                    result.push(
+                        <pre key={index} className="bg-[#111827] text-foreground p-3 rounded-lg overflow-x-auto mb-2 border">
+                            <div className="flex items-center justify-between mb-2">
+                                <span className="text-xs text-muted-foreground font-mono">diff</span>
+                                <button className="text-xs hover:text-foreground h-4 w-4">
+                                    <Copy className='text-muted-foreground h-4 w-4' />
+                                </button>
+                            </div>
+                            <code className="text-sm font-mono">
+                                {diffLines.map((diffLine, i) => (
+                                    <div key={i} className={
+                                        diffLine.startsWith('+') ? 'text-green-400 bg-green-900/20' :
+                                            diffLine.startsWith('-') ? 'text-red-400 bg-red-900/20' :
+                                                'text-gray-300'
+                                    }>
+                                        {diffLine}
+                                    </div>
+                                ))}
+                            </code>
+                        </pre>
+                    );
+                    continue;
+                }
+
+                result.push(
+                    <pre key={index} className="bg-[#111827] text-foreground p-3 rounded-lg overflow-x-auto mb-2 border">
+                        <div className="flex items-center justify-between mb-2">
+                            <span className="text-xs text-muted-foreground font-mono">
+                                {codeBlockLanguage || "code"}
+                            </span>
+                            <button className="text-xs hover:text-foreground h-4 w-4">
+                                <Copy className='text-muted-foreground h-4 w-4' />
+                            </button>
+                        </div>
+                        <code className="text-sm font-mono">{code}</code>
+                    </pre>
+                );
+            } else {
+                inCodeBlock = true;
+                codeBlockLanguage = line.slice(3).trim();
+            }
+            continue;
+        }
+
+        if (inCodeBlock) {
+            codeBlockContent.push(line);
+            continue;
+        }
+
+        // Handle headings with anchor links
+        if (line.startsWith("# ")) {
+            const text = line.slice(2);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h1 key={index} id={id} className="text-4xl font-bold mb-2 mt-4 border-b pb-2 text-primary">
+                    {text}
+                </h1>
+            );
+            continue;
+        }
+        if (line.startsWith("## ")) {
+            const text = line.slice(3);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h2 key={index} id={id} className="text-3xl font-semibold mb-0.5 mt-1 text-primary">
+                    {text}
+                </h2>
+            );
+            continue;
+        }
+        if (line.startsWith("### ")) {
+            const text = line.slice(4);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h3 key={index} id={id} className="text-2xl font-medium mb-0.5 mt-1 text-primary">
+                    {text}
+                </h3>
+            );
+            continue;
+        }
+        if (line.startsWith("#### ")) {
+            const text = line.slice(5);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h4 key={index} id={id} className="text-xl font-medium mb-0.5 mt-1 text-primary">
+                    {text}
+                </h4>
+            );
+            continue;
+        }
+        if (line.startsWith("##### ")) {
+            const text = line.slice(6);
+            const id = text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+            result.push(
+                <h5 key={index} id={id} className="text-lg font-medium mb-0.5 mt-1 text-primary">
+                    {text}
+                </h5>
+            );
+            continue;
+        }
+
+        // Handle lists with proper nesting
+        if (isListItem(line) || isTaskListItem(line)) {
+            const indentLevel = getIndentLevel(line);
+            const trimmedLine = line.trim();
+
+            // Close lists if we've dedented
+            if (listStack.length > indentLevel + 1) {
+                const closeTags = closeListsToLevel(indentLevel + 1);
+                // Note: We can't push raw HTML strings in React, we need proper structure
+            }
+
+            // Open new list if needed
+            if (listStack.length === indentLevel) {
+                listStack.push('ul');
+            }
+
+            // Task lists (checkboxes)
+            if (trimmedLine.startsWith("- [ ] ") || trimmedLine.startsWith("* [ ] ") || trimmedLine.startsWith("+ [ ] ")) {
+                const content = trimmedLine.slice(6);
+                result.push(
+                    <div key={index} className="flex items-start mb-0.5" style={{ marginLeft: `${indentLevel * 1.5}rem` }}>
+                        <input type="checkbox" disabled className="mr-3 mt-1" />
+                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+                    </div>
+                );
+                continue;
+            }
+            if (trimmedLine.startsWith("- [x] ") || trimmedLine.startsWith("- [X] ") ||
+                trimmedLine.startsWith("* [x] ") || trimmedLine.startsWith("* [X] ") ||
+                trimmedLine.startsWith("+ [x] ") || trimmedLine.startsWith("+ [X] ")) {
+                const content = trimmedLine.slice(6);
+                result.push(
+                    <div key={index} className="flex items-start mb-0.5" style={{ marginLeft: `${indentLevel * 1.5}rem` }}>
+                        <input type="checkbox" disabled checked className="mr-3 mt-1" />
+                        <span className="line-through text-foreground" dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+                    </div>
+                );
+                continue;
+            }
+
+            // Regular unordered lists
+            if (/^\s*[-*+]\s/.test(line)) {
+                const content = trimmedLine.replace(/^[-*+]\s/, "");
+                result.push(
+                    <li key={index} className="mb-0.5 list-disc text-foreground text-[.875rem]" style={{ marginLeft: `${indentLevel * 1.5 + 1.5}rem` }}>
+                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+                    </li>
+                );
+                continue;
+            }
+
+            // Numbered lists
+            if (/^\s*\d+\.\s/.test(line)) {
+                const content = trimmedLine.replace(/^\d+\.\s/, "");
+                result.push(
+                    <li key={index} className="mb-0.5 list-decimal text-foreground" style={{ marginLeft: `${indentLevel * 1.5 + 1.5}rem` }}>
+                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(content) }} />
+                    </li>
+                );
+                continue;
+            }
+        } else {
+            // Not a list item, close any open lists
+            listStack = [];
+        }
+
+        // Handle blockquotes
+        if (line.startsWith("> ")) {
+            result.push(
+                <blockquote key={index} className="border-l-4 border-blue-500 pl-4 py-2 mb-1 bg-blue-900/20 italic">
+                    <span dangerouslySetInnerHTML={{ __html: formatInlineText(line.slice(2)) }} />
+                </blockquote>
+            );
+            continue;
+        }
+
+        // Handle horizontal rules
+        if (line.trim() === "---" || line.trim() === "***") {
+            result.push(<hr key={index} className="my-4 border-border" />);
+            continue;
+        }
+
+        if (line.trim() === "") {
+            result.push(<div key={index} className="h-4" />);
+            continue;
+        }
+
+        // Tables
+        if (line.includes("|") && !line.startsWith("|") && line.trim().endsWith("|")) {
+            if (!inTable) {
+                inTable = true;
+                tableHeaders = line
+                    .split("|")
+                    .map((h) => h.trim())
+                    .filter((h) => h);
+                result.push(
+                    <table key={index} className="w-full border-collapse border border-border mb-0.5">
+                        <thead>
+                            <tr className="bg-[#111827]">
+                                {tableHeaders.map((header, i) => (
+                                    <th key={i} className="border border-border px-3 py-2 text-left font-semibold">
+                                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(header) }} />
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                    </table>
+                );
+            } else if (line.includes("---") || line.includes(":--")) {
+                // Skip separator row
+            } else {
+                const cells = line
+                    .split("|")
+                    .map((c) => c.trim())
+                    .filter((c) => c);
+                result.push(
+                    <tr key={index}>
+                        {cells.map((cell, i) => (
+                            <td key={i} className="border border-border px-3 py-2">
+                                <span dangerouslySetInnerHTML={{ __html: formatInlineText(cell) }} />
+                            </td>
+                        ))}
+                    </tr>
+                );
+            }
+            continue;
+        } else {
+            inTable = false;
+        }
+
+        // Definition lists
+        if (line.includes(" : ") && !line.startsWith(" ")) {
+            const [term, definition] = line.split(" : ");
+            result.push(
+                <dl key={index} className="mb-0.5">
+                    <dt className="font-semibold">{term}</dt>
+                    <dd className="ml-4 text-muted-foreground">
+                        <span dangerouslySetInnerHTML={{ __html: formatInlineText(definition) }} />
+                    </dd>
+                </dl>
+            );
+            continue;
+        }
+
+        // Footnote references [^1]
+        if (line.includes("[^")) {
+            const formatted = line.replace(/\[\^(\w+)\]/g, '<sup><a href="#fn-$1" class="text-blue-600">$1</a></sup>');
+            result.push(
+                <p key={index} className="mb-0.5 leading-relaxed text-sm sm:text-base">
+                    <span dangerouslySetInnerHTML={{ __html: formatInlineText(formatted) }} />
+                </p>
+            );
+            continue;
+        }
+
+        // Footnote definitions [^1]: content
+        if (line.match(/^\[\^(\w+)\]:\s/)) {
+            const match = line.match(/^\[\^(\w+)\]:\s(.+)/);
+            if (match) {
+                result.push(
+                    <div key={index} id={`fn-${match[1]}`} className="text-xs text-muted-foreground border-t pt-2 mt-1">
+                        <sup>{match[1]}</sup> <span dangerouslySetInnerHTML={{ __html: formatInlineText(match[2]) }} />
+                    </div>
+                );
+                continue;
+            }
+        }
+
+        // Handle commit references (abc123 - 7 char hash)
+        if (line.match(/\b[a-f0-9]{7}\b/)) {
+            const formatted = line.replace(/\b([a-f0-9]{7})\b/g, '<code class="bg-gray-800 text-yellow-400 px-2 py-1 rounded text-sm font-mono">$1</code>');
+            result.push(
+                <p key={index} className="mb-0.5 leading-relaxed text-sm sm:text-base">
+                    <span dangerouslySetInnerHTML={{ __html: formatInlineText(formatted) }} />
+                </p>
+            );
+            continue;
+        }
+
+        // Handle wiki links [[Page Name]]
+        if (line.includes("[[") && line.includes("]]")) {
+            const formatted = line.replace(/\[\[([^\]]+)\]\]/g, '<a href="/wiki/$1" class="text-purple-600 hover:text-purple-800 underline">$1</a>');
+            result.push(
+                <p key={index} className="mb-0.5 leading-relaxed text-sm sm:text-base">
+                    <span dangerouslySetInnerHTML={{ __html: formatInlineText(formatted) }} />
+                </p>
+            );
+            continue;
+        }
+
+        // Default paragraph
+        result.push(
+            <p key={index} className="mb-0.5 leading-relaxed text-sm sm:text-base">
+                <span dangerouslySetInnerHTML={{ __html: formatInlineText(line) }} />
+            </p>
+        );
+    }
+
+    return result;
+};
+
+