@protomarkdown/parser 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,820 @@
+class MarkdownParser {
+    constructor(options = {}) {
+        this.options = {
+            strict: false,
+            preserveWhitespace: false,
+            ...options,
+        };
+    }
+    parse(markdown) {
+        const lines = markdown.split("\n");
+        const nodes = [];
+        const errors = [];
+        let i = 0;
+        while (i < lines.length) {
+            const line = this.options.preserveWhitespace ? lines[i] : lines[i].trim();
+            if (!line) {
+                i++;
+                continue;
+            }
+            // Check for table (line with pipes)
+            if (line.includes("|") && line.trim().startsWith("|")) {
+                const headers = line
+                    .split("|")
+                    .map((h) => h.trim())
+                    .filter((h) => h.length > 0);
+                i++;
+                // Skip separator line (|---|---|)
+                if (i < lines.length) {
+                    const separatorLine = this.options.preserveWhitespace
+                        ? lines[i]
+                        : lines[i].trim();
+                    if (separatorLine.includes("-") && separatorLine.includes("|")) {
+                        i++;
+                    }
+                }
+                // Parse table rows
+                const rows = [];
+                while (i < lines.length) {
+                    const rowLine = this.options.preserveWhitespace
+                        ? lines[i]
+                        : lines[i].trim();
+                    if (!rowLine || !rowLine.includes("|")) {
+                        break;
+                    }
+                    const cells = rowLine
+                        .split("|")
+                        .map((c) => c.trim())
+                        .filter((c) => c.length > 0);
+                    rows.push(cells);
+                    i++;
+                }
+                nodes.push({
+                    type: "table",
+                    headers,
+                    rows,
+                });
+                continue;
+            }
+            // Check for card start
+            const cardMatch = line.match(/^\[--\s*(.*)$/);
+            if (cardMatch) {
+                const result = this.parseCard(lines, i, cardMatch[1] || undefined);
+                nodes.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            // Check for grid start ([grid cols-2 gap-4)
+            const gridMatch = line.match(/^\[grid\s+(.*)$/);
+            if (gridMatch) {
+                const result = this.parseContainer(lines, i, 'grid', gridMatch[1]);
+                nodes.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            // Check for plain div start ([ or [ class-name)
+            const divMatch = line.match(/^\[\s*(.*)$/);
+            if (divMatch && !line.includes("]")) {
+                const result = this.parseContainer(lines, i, 'div', divMatch[1] || '');
+                nodes.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            const node = this.parseLine(line);
+            if (node) {
+                nodes.push(node);
+            }
+            else if (this.options.strict) {
+                errors.push(`Line ${i + 1}: Unable to parse "${line}"`);
+            }
+            i++;
+        }
+        return { nodes, errors: errors.length > 0 ? errors : undefined };
+    }
+    parseCard(lines, startIndex, title) {
+        const cardChildren = [];
+        let i = startIndex + 1;
+        let depth = 1;
+        // Parse card content until we find the matching closing --]
+        while (i < lines.length && depth > 0) {
+            const cardLine = this.options.preserveWhitespace ? lines[i] : lines[i].trim();
+            // Check for card closing
+            if (cardLine === "--]") {
+                depth--;
+                if (depth === 0) {
+                    break;
+                }
+            }
+            // Check for nested card opening (must be before div check)
+            if (cardLine.match(/^\[--\s*(.*)$/)) {
+                const nestedTitle = cardLine.match(/^\[--\s*(.*)$/)?.[1] || undefined;
+                const result = this.parseCard(lines, i, nestedTitle);
+                cardChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            // Check for nested grid opening
+            if (cardLine.match(/^\[grid\s+(.*)$/)) {
+                const nestedConfig = cardLine.match(/^\[grid\s+(.*)$/)?.[1] || '';
+                const result = this.parseContainer(lines, i, 'grid', nestedConfig);
+                cardChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            // Check for nested div opening
+            if (cardLine.match(/^\[\s*(.*)$/) && !cardLine.includes("]")) {
+                const nestedConfig = cardLine.match(/^\[\s*(.*)$/)?.[1] || '';
+                const result = this.parseContainer(lines, i, 'div', nestedConfig);
+                cardChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            if (cardLine) {
+                const childNode = this.parseLine(cardLine);
+                if (childNode) {
+                    cardChildren.push(childNode);
+                }
+            }
+            i++;
+        }
+        return {
+            node: {
+                type: "card",
+                titleChildren: title ? this.parseInlineEmphasis(title) : undefined,
+                children: cardChildren,
+            },
+            nextIndex: i + 1,
+        };
+    }
+    parseContainer(lines, startIndex, type, config) {
+        const containerChildren = [];
+        let i = startIndex + 1;
+        let depth = 1;
+        // Parse container content until we find the matching closing ]
+        while (i < lines.length && depth > 0) {
+            const containerLine = this.options.preserveWhitespace ? lines[i] : lines[i].trim();
+            // Check for container closing
+            if (containerLine === "]") {
+                depth--;
+                if (depth === 0) {
+                    break;
+                }
+            }
+            // Check for nested card opening (must be before div check)
+            if (containerLine.match(/^\[--\s*(.*)$/)) {
+                const nestedTitle = containerLine.match(/^\[--\s*(.*)$/)?.[1] || undefined;
+                const result = this.parseCard(lines, i, nestedTitle);
+                containerChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            // Check for nested grid opening
+            if (containerLine.match(/^\[grid\s+(.*)$/)) {
+                const nestedConfig = containerLine.match(/^\[grid\s+(.*)$/)?.[1] || '';
+                const result = this.parseContainer(lines, i, 'grid', nestedConfig);
+                containerChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            // Check for nested div opening
+            if (containerLine.match(/^\[\s*(.*)$/) && !containerLine.includes("]")) {
+                const nestedConfig = containerLine.match(/^\[\s*(.*)$/)?.[1] || '';
+                const result = this.parseContainer(lines, i, 'div', nestedConfig);
+                containerChildren.push(result.node);
+                i = result.nextIndex;
+                continue;
+            }
+            if (containerLine) {
+                const childNode = this.parseLine(containerLine);
+                if (childNode) {
+                    containerChildren.push(childNode);
+                }
+            }
+            i++;
+        }
+        const node = {
+            type,
+            children: containerChildren,
+        };
+        if (type === 'grid') {
+            node.gridConfig = config;
+        }
+        else if (type === 'div' && config) {
+            node.className = config;
+        }
+        return {
+            node,
+            nextIndex: i + 1,
+        };
+    }
+    parseLine(line) {
+        // Parse headers (# H1, ## H2, etc.)
+        const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        if (headerMatch) {
+            return {
+                type: "header",
+                level: headerMatch[1].length,
+                children: this.parseInlineEmphasis(headerMatch[2]),
+            };
+        }
+        // Parse multiple form fields on one line (inputs, textareas, dropdowns, checkboxes)
+        // This must be checked BEFORE single field patterns
+        const fieldPattern = /(.+?)\s+(___|\|___\||__\*|__>(?:\s*\[[^\]]+\])?|__\[\])/g;
+        const fieldMatches = [...line.matchAll(fieldPattern)];
+        if (fieldMatches.length > 1) {
+            return {
+                type: "container",
+                children: fieldMatches.map((match) => {
+                    const label = match[1].trim();
+                    const marker = match[2];
+                    if (marker === '__*') {
+                        return {
+                            type: "input",
+                            label,
+                            inputType: "password",
+                        };
+                    }
+                    else if (marker === '|___|') {
+                        return {
+                            type: "textarea",
+                            label,
+                        };
+                    }
+                    else if (marker === '__[]') {
+                        return {
+                            type: "checkbox",
+                            label,
+                        };
+                    }
+                    else if (marker.startsWith('__>')) {
+                        // Handle dropdown with or without options
+                        const optionsMatch = marker.match(/\[([^\]]+)\]/);
+                        if (optionsMatch) {
+                            const options = optionsMatch[1]
+                                .split(",")
+                                .map((opt) => opt.trim())
+                                .filter((opt) => opt.length > 0);
+                            return {
+                                type: "dropdown",
+                                label,
+                                options,
+                            };
+                        }
+                        else {
+                            return {
+                                type: "dropdown",
+                                label,
+                            };
+                        }
+                    }
+                    else { // ___
+                        return {
+                            type: "input",
+                            label,
+                            inputType: "text",
+                        };
+                    }
+                }),
+            };
+        }
+        // Parse password inputs (Label __*)
+        const passwordMatch = line.match(/^(.+?)\s+__\*$/);
+        if (passwordMatch) {
+            return {
+                type: "input",
+                label: passwordMatch[1],
+                inputType: "password",
+            };
+        }
+        // Parse textarea (Label |___|)
+        const textareaMatch = line.match(/^(.+?)\s+\|___\|$/);
+        if (textareaMatch) {
+            return {
+                type: "textarea",
+                label: textareaMatch[1],
+            };
+        }
+        // Parse text inputs (Label ___)
+        const inputMatch = line.match(/^(.+?)\s+___$/);
+        if (inputMatch) {
+            return {
+                type: "input",
+                label: inputMatch[1],
+                inputType: "text",
+            };
+        }
+        // Parse checkbox (Label __[])
+        const checkboxMatch = line.match(/^(.+?)\s+__\[\]$/);
+        if (checkboxMatch) {
+            return {
+                type: "checkbox",
+                label: checkboxMatch[1],
+            };
+        }
+        // Parse radio group (Label __() [option1, option2, option3])
+        const radioGroupMatch = line.match(/^(.+?)\s+__\(\)\s+\[(.+?)\]$/);
+        if (radioGroupMatch) {
+            const options = radioGroupMatch[2]
+                .split(",")
+                .map((opt) => opt.trim())
+                .filter((opt) => opt.length > 0);
+            return {
+                type: "radiogroup",
+                label: radioGroupMatch[1],
+                options,
+            };
+        }
+        // Parse dropdowns with options (Label __> [option1, option2, option3])
+        const dropdownWithOptionsMatch = line.match(/^(.+?)\s+__>\s+\[(.+?)\]$/);
+        if (dropdownWithOptionsMatch) {
+            const options = dropdownWithOptionsMatch[2]
+                .split(",")
+                .map((opt) => opt.trim())
+                .filter((opt) => opt.length > 0);
+            return {
+                type: "dropdown",
+                label: dropdownWithOptionsMatch[1],
+                options,
+            };
+        }
+        // Parse dropdowns without options (Label __>)
+        const dropdownMatch = line.match(/^(.+?)\s+__>$/);
+        if (dropdownMatch) {
+            return {
+                type: "dropdown",
+                label: dropdownMatch[1],
+            };
+        }
+        // Parse image (![alt text](url))
+        const imageMatch = line.match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
+        if (imageMatch) {
+            return {
+                type: "image",
+                alt: imageMatch[1],
+                src: imageMatch[2],
+            };
+        }
+        // Parse multiple buttons on one line ([btn1][(btn2)])
+        const multiButtonMatch = line.match(/^(\[\(?[^\[\]|]+\)?\]\s*)+$/);
+        if (multiButtonMatch) {
+            const buttons = line.match(/\[(\(?)[^\[\]|]+?(\)?)\]/g);
+            if (buttons && buttons.length > 1) {
+                return {
+                    type: "container",
+                    children: buttons.map((btn) => {
+                        const innerMatch = btn.match(/\[(\(?)(.+?)(\)?)\]/);
+                        if (innerMatch) {
+                            const isDefault = innerMatch[1] === "(" && innerMatch[3] === ")";
+                            const content = innerMatch[2];
+                            return {
+                                type: "button",
+                                content,
+                                variant: isDefault ? "default" : "outline",
+                            };
+                        }
+                        return {
+                            type: "button",
+                            content: btn.slice(1, -1),
+                            variant: "outline",
+                        };
+                    }),
+                };
+            }
+        }
+        // Parse default button [(button text)] or [(button text) | classes]
+        const defaultButtonMatch = line.match(/^\[\((.+?)\)(?:\s*\|\s*(.+))?\]$/);
+        if (defaultButtonMatch) {
+            const content = defaultButtonMatch[1];
+            const className = defaultButtonMatch[2]?.trim();
+            return {
+                type: "button",
+                content,
+                variant: "default",
+                ...(className && { className }),
+            };
+        }
+        // Parse outline button [button text] or [button text | classes]
+        const buttonMatch = line.match(/^\[([^|]+?)(?:\s*\|\s*(.+))?\]$/);
+        if (buttonMatch) {
+            const content = buttonMatch[1].trim();
+            const className = buttonMatch[2]?.trim();
+            return {
+                type: "button",
+                content,
+                variant: "outline",
+                ...(className && { className }),
+            };
+        }
+        // Plain text
+        return {
+            type: "text",
+            children: this.parseInlineEmphasis(line),
+        };
+    }
+    parseInlineEmphasis(text) {
+        const nodes = [];
+        let remaining = text;
+        let position = 0;
+        while (position < remaining.length) {
+            // Try to match bold-italic (_*text*_)
+            const boldItalicMatch = remaining
+                .slice(position)
+                .match(/^_\*(.+?)\*_/);
+            if (boldItalicMatch) {
+                const content = boldItalicMatch[1];
+                nodes.push({
+                    type: "bold",
+                    children: [{ type: "italic", content }],
+                });
+                position += boldItalicMatch[0].length;
+                continue;
+            }
+            // Try to match bold (*text*)
+            const boldMatch = remaining.slice(position).match(/^\*(.+?)\*/);
+            if (boldMatch) {
+                nodes.push({
+                    type: "bold",
+                    content: boldMatch[1],
+                });
+                position += boldMatch[0].length;
+                continue;
+            }
+            // Try to match italic (_text_)
+            const italicMatch = remaining.slice(position).match(/^_(.+?)_/);
+            if (italicMatch) {
+                nodes.push({
+                    type: "italic",
+                    content: italicMatch[1],
+                });
+                position += italicMatch[0].length;
+                continue;
+            }
+            // No emphasis found, consume until next emphasis marker or end of string
+            const nextAsterisk = remaining.slice(position).indexOf("*");
+            const nextUnderscore = remaining.slice(position).indexOf("_");
+            // Find the nearest marker
+            let nextMarker = -1;
+            if (nextAsterisk !== -1 && nextUnderscore !== -1) {
+                nextMarker = Math.min(nextAsterisk, nextUnderscore);
+            }
+            else if (nextAsterisk !== -1) {
+                nextMarker = nextAsterisk;
+            }
+            else if (nextUnderscore !== -1) {
+                nextMarker = nextUnderscore;
+            }
+            const textEnd = nextMarker === -1
+                ? remaining.length
+                : position + nextMarker;
+            if (textEnd > position) {
+                nodes.push({
+                    type: "text",
+                    content: remaining.slice(position, textEnd),
+                });
+                position = textEnd;
+            }
+            else {
+                // Edge case: marker that doesn't form emphasis
+                nodes.push({
+                    type: "text",
+                    content: remaining.slice(position, position + 1),
+                });
+                position++;
+            }
+        }
+        return nodes;
+    }
+}
+
+/**
+ * Generates React component code from a Proto Markdown AST using Shadcn UI components
+ */
+class ShadcnCodeGenerator {
+    constructor() {
+        this.indentLevel = 0;
+        this.indentSize = 2;
+        this.requiredImports = new Set();
+    }
+    /**
+     * Generate complete React component code from markdown AST
+     */
+    generate(nodes) {
+        this.indentLevel = 0;
+        this.requiredImports.clear();
+        // Generate component body
+        const componentBody = this.generateNodes(nodes);
+        // Add base indentation (6 spaces = 3 levels for proper JSX nesting)
+        const indentedBody = componentBody
+            .split('\n')
+            .map(line => line ? `      ${line}` : line)
+            .join('\n');
+        // Collect imports
+        const imports = this.generateImports();
+        return `${imports}
+
+export function GeneratedComponent() {
+  return (
+    <div className="space-y-2">
+${indentedBody}
+    </div>
+  );
+}
+`;
+    }
+    /**
+     * Generate imports based on used components
+     */
+    generateImports() {
+        const imports = [];
+        if (this.requiredImports.has("Button")) {
+            imports.push('import { Button } from "@/components/ui/button";');
+        }
+        if (this.requiredImports.has("Input")) {
+            imports.push('import { Input } from "@/components/ui/input";');
+        }
+        if (this.requiredImports.has("Textarea")) {
+            imports.push('import { Textarea } from "@/components/ui/textarea";');
+        }
+        if (this.requiredImports.has("Card")) {
+            imports.push('import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";');
+        }
+        if (this.requiredImports.has("Checkbox")) {
+            imports.push('import { Checkbox } from "@/components/ui/checkbox";');
+        }
+        if (this.requiredImports.has("RadioGroup")) {
+            imports.push('import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";');
+        }
+        if (this.requiredImports.has("Select")) {
+            imports.push('import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";');
+        }
+        if (this.requiredImports.has("Table")) {
+            imports.push('import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";');
+        }
+        if (this.requiredImports.has("Label")) {
+            imports.push('import { Label } from "@/components/ui/label";');
+        }
+        return imports.join("\n");
+    }
+    /**
+     * Generate code for multiple nodes
+     */
+    generateNodes(nodes) {
+        return nodes.map((node, index) => this.generateNode(node, index)).join("\n");
+    }
+    /**
+     * Generate code for a single node
+     */
+    generateNode(node, index) {
+        switch (node.type) {
+            case "header":
+                return this.generateHeader(node, index);
+            case "input":
+                return this.generateInput(node, index);
+            case "textarea":
+                return this.generateTextarea(node, index);
+            case "dropdown":
+                return this.generateDropdown(node, index);
+            case "checkbox":
+                return this.generateCheckbox(node, index);
+            case "radiogroup":
+                return this.generateRadioGroup(node, index);
+            case "button":
+                return this.generateButton(node, index);
+            case "container":
+                return this.generateContainer(node, index);
+            case "card":
+                return this.generateCard(node, index);
+            case "table":
+                return this.generateTable(node, index);
+            case "grid":
+                return this.generateGrid(node, index);
+            case "div":
+                return this.generateDiv(node, index);
+            case "text":
+                return this.generateText(node, index);
+            case "bold":
+                return this.generateBold(node, index);
+            case "italic":
+                return this.generateItalic(node, index);
+            case "image":
+                return this.generateImage(node, index);
+            default:
+                return "";
+        }
+    }
+    indent() {
+        return " ".repeat(this.indentLevel * this.indentSize);
+    }
+    escapeJSX(text) {
+        return text
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/{/g, "&#123;")
+            .replace(/}/g, "&#125;");
+    }
+    generateHeader(node, index) {
+        const Tag = `h${node.level}`;
+        const className = `text-${node.level === 1 ? "4xl" : node.level === 2 ? "3xl" : node.level === 3 ? "2xl" : node.level === 4 ? "xl" : node.level === 5 ? "lg" : "base"} font-bold`;
+        let content;
+        if (node.children && node.children.length > 0) {
+            // Inline children (emphasis)
+            content = node.children.map((child, i) => this.generateInlineNode(child, i)).join("");
+        }
+        else {
+            content = this.escapeJSX(node.content || "");
+        }
+        return `${this.indent()}<${Tag} key={${index}} className="${className}">${content}</${Tag}>`;
+    }
+    generateInlineNode(node, index) {
+        switch (node.type) {
+            case "bold":
+                const boldContent = node.children?.map((child, i) => this.generateInlineNode(child, i)).join("") || this.escapeJSX(node.content || "");
+                return `<strong key={${index}}>${boldContent}</strong>`;
+            case "italic":
+                const italicContent = node.children?.map((child, i) => this.generateInlineNode(child, i)).join("") || this.escapeJSX(node.content || "");
+                return `<em key={${index}}>${italicContent}</em>`;
+            case "text":
+                if (node.children && node.children.length > 0) {
+                    return node.children.map((child, i) => this.generateInlineNode(child, i)).join("");
+                }
+                return this.escapeJSX(node.content || "");
+            default:
+                return this.escapeJSX(node.content || "");
+        }
+    }
+    generateInput(node, index) {
+        this.requiredImports.add("Input");
+        this.requiredImports.add("Label");
+        const id = node.id || `input-${index}`;
+        const type = node.inputType || "text";
+        return `${this.indent()}<div key={${index}} className="space-y-2">
+${this.indent()}  <Label htmlFor="${id}">${this.escapeJSX(node.label || "")}</Label>
+${this.indent()}  <Input id="${id}" type="${type}" />
+${this.indent()}</div>`;
+    }
+    generateTextarea(node, index) {
+        this.requiredImports.add("Textarea");
+        this.requiredImports.add("Label");
+        const id = node.id || `textarea-${index}`;
+        return `${this.indent()}<div key={${index}} className="space-y-2">
+${this.indent()}  <Label htmlFor="${id}">${this.escapeJSX(node.label || "")}</Label>
+${this.indent()}  <Textarea id="${id}" />
+${this.indent()}</div>`;
+    }
+    generateDropdown(node, index) {
+        this.requiredImports.add("Select");
+        this.requiredImports.add("Label");
+        const id = node.id || `select-${index}`;
+        const options = node.options || [];
+        return `${this.indent()}<div key={${index}} className="space-y-2">
+${this.indent()}  <Label htmlFor="${id}">${this.escapeJSX(node.label || "")}</Label>
+${this.indent()}  <Select>
+${this.indent()}    <SelectTrigger id="${id}">
+${this.indent()}      <SelectValue placeholder="Select an option" />
+${this.indent()}    </SelectTrigger>
+${this.indent()}    <SelectContent>
+${options.map((opt, i) => `${this.indent()}      <SelectItem key={${i}} value="${opt.toLowerCase().replace(/\s+/g, "-")}">${this.escapeJSX(opt)}</SelectItem>`).join("\n")}
+${this.indent()}    </SelectContent>
+${this.indent()}  </Select>
+${this.indent()}</div>`;
+    }
+    generateCheckbox(node, index) {
+        this.requiredImports.add("Checkbox");
+        this.requiredImports.add("Label");
+        const id = node.id || `checkbox-${index}`;
+        return `${this.indent()}<div key={${index}} className="flex items-center space-x-2">
+${this.indent()}  <Checkbox id="${id}" />
+${this.indent()}  <Label htmlFor="${id}" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+${this.indent()}    ${this.escapeJSX(node.label || "")}
+${this.indent()}  </Label>
+${this.indent()}</div>`;
+    }
+    generateRadioGroup(node, index) {
+        this.requiredImports.add("RadioGroup");
+        this.requiredImports.add("Label");
+        const options = node.options || [];
+        return `${this.indent()}<div key={${index}} className="space-y-2">
+${this.indent()}  <Label>${this.escapeJSX(node.label || "")}</Label>
+${this.indent()}  <RadioGroup>
+${options.map((opt, i) => {
+            const optId = `radio-${index}-${i}`;
+            const value = opt.toLowerCase().replace(/\s+/g, "-");
+            return `${this.indent()}    <div className="flex items-center space-x-2">
+${this.indent()}      <RadioGroupItem id="${optId}" value="${value}" />
+${this.indent()}      <Label htmlFor="${optId}">${this.escapeJSX(opt)}</Label>
+${this.indent()}    </div>`;
+        }).join("\n")}
+${this.indent()}  </RadioGroup>
+${this.indent()}</div>`;
+    }
+    generateButton(node, index) {
+        this.requiredImports.add("Button");
+        const variant = node.variant || "default";
+        const className = node.className ? ` className="${node.className}"` : "";
+        return `${this.indent()}<Button key={${index}} variant="${variant}"${className}>${this.escapeJSX(node.content || "")}</Button>`;
+    }
+    generateContainer(node, index) {
+        this.indentLevel++;
+        const children = node.children ? this.generateNodes(node.children) : "";
+        this.indentLevel--;
+        return `${this.indent()}<div key={${index}} className="flex gap-2">
+${children}
+${this.indent()}</div>`;
+    }
+    generateCard(node, index) {
+        this.requiredImports.add("Card");
+        let titleContent = "";
+        if (node.titleChildren && node.titleChildren.length > 0) {
+            titleContent = node.titleChildren.map((child, i) => this.generateInlineNode(child, i)).join("");
+        }
+        else if (node.title) {
+            titleContent = this.escapeJSX(node.title);
+        }
+        // Increment by 2 to account for Card wrapper + CardContent nesting
+        this.indentLevel += 2;
+        const children = node.children ? this.generateNodes(node.children) : "";
+        this.indentLevel -= 2;
+        const cardContent = titleContent
+            ? `${this.indent()}<Card key={${index}}>
+${this.indent()}  <CardHeader>
+${this.indent()}    <CardTitle>${titleContent}</CardTitle>
+${this.indent()}  </CardHeader>
+${this.indent()}  <CardContent className="space-y-2">
+${children}
+${this.indent()}  </CardContent>
+${this.indent()}</Card>`
+            : `${this.indent()}<Card key={${index}}>
+${this.indent()}  <CardContent className="pt-6 space-y-2">
+${children}
+${this.indent()}  </CardContent>
+${this.indent()}</Card>`;
+        return cardContent;
+    }
+    generateTable(node, index) {
+        this.requiredImports.add("Table");
+        const headers = node.headers || [];
+        const rows = node.rows || [];
+        return `${this.indent()}<Table key={${index}}>
+${this.indent()}  <TableHeader>
+${this.indent()}    <TableRow>
+${headers.map((header, i) => `${this.indent()}      <TableHead key={${i}}>${this.escapeJSX(header)}</TableHead>`).join("\n")}
+${this.indent()}    </TableRow>
+${this.indent()}  </TableHeader>
+${this.indent()}  <TableBody>
+${rows.map((row, i) => `${this.indent()}    <TableRow key={${i}}>
+${row.map((cell, j) => `${this.indent()}      <TableCell key={${j}}>${this.escapeJSX(cell)}</TableCell>`).join("\n")}
+${this.indent()}    </TableRow>`).join("\n")}
+${this.indent()}  </TableBody>
+${this.indent()}</Table>`;
+    }
+    generateGrid(node, index) {
+        const gridClasses = `grid ${node.gridConfig || ""}`;
+        this.indentLevel++;
+        const children = node.children ? this.generateNodes(node.children) : "";
+        this.indentLevel--;
+        return `${this.indent()}<div key={${index}} className="${gridClasses}">
+${children}
+${this.indent()}</div>`;
+    }
+    generateDiv(node, index) {
+        const className = node.className || "";
+        this.indentLevel++;
+        const children = node.children ? this.generateNodes(node.children) : "";
+        this.indentLevel--;
+        return `${this.indent()}<div key={${index}} className="${className}">
+${children}
+${this.indent()}</div>`;
+    }
+    generateText(node, index) {
+        if (node.children && node.children.length > 0) {
+            // Text with inline emphasis
+            const inlineContent = node.children.map((child, i) => this.generateInlineNode(child, i)).join("");
+            return `${this.indent()}<p key={${index}}>${inlineContent}</p>`;
+        }
+        return `${this.indent()}<p key={${index}}>${this.escapeJSX(node.content || "")}</p>`;
+    }
+    generateBold(node, index) {
+        if (node.children && node.children.length > 0) {
+            const content = node.children.map((child, i) => this.generateInlineNode(child, i)).join("");
+            return `${this.indent()}<strong key={${index}}>${content}</strong>`;
+        }
+        return `${this.indent()}<strong key={${index}}>${this.escapeJSX(node.content || "")}</strong>`;
+    }
+    generateItalic(node, index) {
+        if (node.children && node.children.length > 0) {
+            const content = node.children.map((child, i) => this.generateInlineNode(child, i)).join("");
+            return `${this.indent()}<em key={${index}}>${content}</em>`;
+        }
+        return `${this.indent()}<em key={${index}}>${this.escapeJSX(node.content || "")}</em>`;
+    }
+    generateImage(node, index) {
+        const src = node.src || "";
+        const alt = node.alt || "";
+        return `${this.indent()}<img key={${index}} src="${src}" alt="${this.escapeJSX(alt)}" className="max-w-full h-auto" />`;
+    }
+}
+
+export { MarkdownParser, ShadcnCodeGenerator };
+//# sourceMappingURL=index.esm.js.map