From d9a42a6bc7965a7a39231e80167b69854952e4a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fatih=20Kadir=20Ak=C4=B1n?= <fatihkadirakin@gmail.com>
Date: Tue, 17 Jun 2025 00:14:45 +0300
Subject: [PATCH] update

---
 _layouts/embed-preview.html    |   9 +-
 _site/embed-preview-script.js  | 252 +++++++++++++++++++++++++++++++++
 _site/embed-preview/index.html |   9 +-
 embed-preview-script.js        | 252 +++++++++++++++++++++++++++++++++
 4 files changed, 520 insertions(+), 2 deletions(-)

diff --git a/_layouts/embed-preview.html b/_layouts/embed-preview.html
index ed906ed..cf8aca3 100644
--- a/_layouts/embed-preview.html
+++ b/_layouts/embed-preview.html
@@ -31,7 +31,7 @@
     <!-- Viewer Mode -->
     <div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-2 sm:p-4">
         <!-- Context Pills -->
-        <div id="context-pills" class="flex overflow-x-auto gap-2 empty:hidden mb-0 sm:mb-2 pb-1 scrollbar-hide"></div>
+        <div id="context-pills" class="flex overflow-x-auto gap-2 empty:hidden mb-0 sm:mb-2 pb-1 scrollbar-hide min-h-[25px]"></div>
         
         <!-- Main Prompt Interface - Full Height -->
         <div class="flex-1 flex flex-col">
@@ -46,6 +46,13 @@
             <!-- Settings Pills -->
             <div id="settings-pills" class="flex gap-1 sm:gap-2 flex-wrap flex-1 min-w-0"></div>
             
+            <!-- Download Button -->
+            <button id="download-button" class="w-8 h-8 sm:w-10 sm:h-10 bg-dynamic-muted text-dynamic-foreground rounded-full flex items-center justify-center hover:bg-dynamic-muted/80 transition-colors focus-ring flex-shrink-0 shadow-lg touch-target mr-2" title="Download as PNG">
+                <svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+                </svg>
+            </button>
+            
             <!-- Send Button (circular with arrow up) -->
             <button id="copy-button" class="w-8 h-8 sm:w-10 sm:h-10 bg-dynamic-primary text-white rounded-full flex items-center justify-center hover:opacity-90 transition-opacity focus-ring flex-shrink-0 shadow-lg touch-target" title="Send prompt">
                 <svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
diff --git a/_site/embed-preview-script.js b/_site/embed-preview-script.js
index 08c6a33..886d560 100644
--- a/_site/embed-preview-script.js
+++ b/_site/embed-preview-script.js
@@ -177,6 +177,11 @@ class EmbedPreview {
         if (copyButton) {
             copyButton.addEventListener('click', () => this.handleCopy());
         }
+        
+        const downloadButton = document.getElementById('download-button');
+        if (downloadButton) {
+            downloadButton.addEventListener('click', () => this.handleDownload());
+        }
     }
     
     render() {
@@ -371,6 +376,253 @@ class EmbedPreview {
         }
     }
     
+    async handleDownload() {
+        try {
+            // Get computed styles
+            const computedStyles = getComputedStyle(document.documentElement);
+            const bgColor = `rgb(${computedStyles.getPropertyValue('--background').trim()})`;
+            const fgColor = `rgb(${computedStyles.getPropertyValue('--foreground').trim()})`;
+            const mutedColor = `rgb(${computedStyles.getPropertyValue('--muted').trim()})`;
+            const mutedFgColor = `rgb(${computedStyles.getPropertyValue('--muted-foreground').trim()})`;
+            const primaryColor = `rgb(${computedStyles.getPropertyValue('--primary').trim()})`;
+            const borderColor = `rgb(${computedStyles.getPropertyValue('--border').trim()})`;
+            
+            // Create SVG representation
+            const { svg, scale } = this.createSVG({
+                bgColor,
+                fgColor,
+                mutedColor,
+                mutedFgColor,
+                primaryColor,
+                borderColor
+            });
+            
+            // Convert SVG to PNG and download (scale will make it retina-compatible)
+            await this.downloadSVGasPNG(svg, 'prompt-preview.png', scale);
+            this.showNotification('Downloaded as PNG!');
+        } catch (error) {
+            console.error('Download failed:', error);
+            this.showNotification('Download failed');
+        }
+    }
+    
+    createSVG(colors) {
+        const scale = 2; // 2x for retina displays
+        const width = 800 * scale;
+        const padding = 16 * scale; // Match sm:p-4 (1rem = 16px)
+        const mobileGap = 4 * scale; // Match gap-1 on mobile
+        const desktopGap = 8 * scale; // Match sm:gap-2
+        
+        // Start calculating height dynamically
+        let yOffset = padding;
+        let svgContent = '';
+        
+        // Context pills area with min-height of 25px
+        const contextPills = document.getElementById('context-pills');
+        const contextPillsHeight = 25 * scale; // min-h-[25px]
+        const contextPillsMargin = 8 * scale; // mb-0 sm:mb-2 (using desktop margin)
+        
+        if (contextPills && contextPills.children.length > 0) {
+            let xOffset = padding;
+            const pillHeight = 20 * scale; // Smaller pills in context area
+            const pillPadding = 8 * scale;
+            const fontSize = 10.4 * scale;
+            
+            for (const pill of contextPills.children) {
+                const pillText = pill.textContent.trim();
+                const pillWidth = Math.max(60 * scale, pillText.length * 7 * scale + pillPadding * 2);
+                
+                // Pill background with proper opacity
+                const pillY = yOffset + (contextPillsHeight - pillHeight) / 2;
+                svgContent += `<rect x="${xOffset}" y="${pillY}" width="${pillWidth}" height="${pillHeight}" rx="${10 * scale}" fill="${colors.primaryColor}" fill-opacity="0.1" stroke="${colors.primaryColor}" stroke-opacity="0.3" stroke-width="${scale}"/>`;
+                
+                // Pill text - fix vertical alignment using dominant-baseline
+                const textY = pillY + pillHeight / 2;
+                svgContent += `<text x="${xOffset + pillWidth/2}" y="${textY}" text-anchor="middle" dominant-baseline="middle" fill="${colors.fgColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${fontSize}" font-weight="500">${this.escapeXML(pillText)}</text>`;
+                
+                xOffset += pillWidth + desktopGap;
+            }
+        }
+        
+        yOffset += contextPillsHeight + contextPillsMargin;
+        
+        // Main prompt container - calculate needed height
+        const promptText = this.config.prompt || '← Enter your prompt on designer...';
+        const isPlaceholder = !this.config.prompt;
+        const containerPadding = 24 * scale; // p-3 sm:p-6 (using desktop padding)
+        const lineHeight = 22 * scale; // leading-relaxed
+        const fontSize = 16 * scale; // text-sm sm:text-base (using desktop size)
+        
+        // Calculate wrapped text lines
+        const maxTextWidth = width - padding * 2 - containerPadding * 2;
+        const lines = this.wrapText(promptText, maxTextWidth / scale, 16); // Use unscaled values for text wrapping
+        const textHeight = Math.max(100 * scale, lines.length * lineHeight + containerPadding * 2);
+        
+        // Prompt container background
+        svgContent += `<rect x="${padding}" y="${yOffset}" width="${width - padding * 2}" height="${textHeight}" rx="${12 * scale}" fill="${colors.mutedColor}" stroke="${colors.borderColor}" stroke-width="${scale}"/>`;
+        
+        // Prompt text
+        const textColor = isPlaceholder ? colors.mutedFgColor : colors.fgColor;
+        const fontStyle = isPlaceholder ? 'italic' : 'normal';
+        let textY = yOffset + containerPadding + fontSize;
+        
+        for (const line of lines) {
+            svgContent += `<text x="${padding + containerPadding}" y="${textY}" fill="${textColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${fontSize}" font-style="${fontStyle}">${this.escapeXML(line)}</text>`;
+            textY += lineHeight;
+        }
+        
+        yOffset += textHeight + desktopGap; // mt-0 sm:mt-2
+        
+        // Bottom bar with settings pills and buttons
+        const bottomBarHeight = 40 * scale; // h-10 for buttons
+        const settingsY = yOffset + (bottomBarHeight - 28 * scale) / 2; // Center pills vertically
+        let settingsX = padding;
+        
+        // Mode pill (with background)
+        if (this.config.mode) {
+            const modeText = this.capitalizeFirst(this.config.mode);
+            const modePadding = 12 * scale; // px-3
+            const modeHeight = 32 * scale; // py-2
+            const modeWidth = modeText.length * 8 * scale + modePadding * 2;
+            const modeFontSize = 12 * scale;
+            
+            svgContent += `<rect x="${settingsX}" y="${settingsY}" width="${modeWidth}" height="${modeHeight}" rx="${16 * scale}" fill="${colors.primaryColor}" fill-opacity="0.1" stroke="${colors.primaryColor}" stroke-opacity="0.2" stroke-width="${scale}"/>`;
+            svgContent += `<text x="${settingsX + modeWidth/2}" y="${settingsY + modeHeight/2}" text-anchor="middle" dominant-baseline="middle" fill="${colors.fgColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${modeFontSize}" font-weight="500">${modeText}</text>`;
+            
+            settingsX += modeWidth + desktopGap;
+        }
+        
+        // Model pill (text only)
+        if (this.config.model) {
+            const modelText = this.config.model;
+            const modelFontSize = 12 * scale;
+            svgContent += `<text x="${settingsX + 4 * scale}" y="${yOffset + bottomBarHeight/2}" dominant-baseline="middle" fill="${colors.primaryColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${modelFontSize}">${modelText}</text>`;
+            settingsX += modelText.length * 7 * scale + 12 * scale;
+        }
+        
+        // Thinking pill
+        if (this.config.thinking) {
+            const thinkingFontSize = 12 * scale;
+            svgContent += `<text x="${settingsX}" y="${yOffset + bottomBarHeight/2}" dominant-baseline="middle" fill="${colors.primaryColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${thinkingFontSize}">🧠 Thinking</text>`;
+            settingsX += 70 * scale;
+        }
+        
+        // MAX pill
+        if (this.config.max) {
+            const maxFontSize = 12 * scale;
+            svgContent += `<text x="${settingsX}" y="${yOffset + bottomBarHeight/2}" dominant-baseline="middle" fill="${colors.primaryColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${maxFontSize}">⚡ MAX</text>`;
+        }
+        
+        // Watermark on the right
+        const watermarkText = "prompts.chat/embed";
+        const watermarkFontSize = 14 * scale;
+        const watermarkX = width - padding - watermarkText.length * 7 * scale;
+        const watermarkY = yOffset + bottomBarHeight / 2;
+        
+        // Add watermark text with subtle styling
+        svgContent += `<text x="${watermarkX}" y="${watermarkY}" dominant-baseline="middle" fill="${colors.mutedFgColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${watermarkFontSize}" font-weight="400" opacity="0.7">${watermarkText}</text>`;
+        
+        // Calculate final height
+        const totalHeight = yOffset + bottomBarHeight + padding;
+        
+        // Create SVG with calculated height  
+        let svg = `<svg width="${width}" height="${totalHeight}" viewBox="0 0 ${width} ${totalHeight}" xmlns="http://www.w3.org/2000/svg">`;
+        
+        // Background
+        svg += `<rect width="${width}" height="${totalHeight}" fill="${colors.bgColor}"/>`;
+        
+        // Add all content
+        svg += svgContent;
+        
+        svg += '</svg>';
+        
+        return { svg, scale };
+    }
+    
+    wrapText(text, maxWidth, fontSize) {
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = '';
+        // More accurate character width calculation based on font size
+        const avgCharWidth = fontSize * 0.55; // Adjusted for typical character width
+        
+        for (const word of words) {
+            const testLine = currentLine ? currentLine + ' ' + word : word;
+            const testWidth = testLine.length * avgCharWidth;
+            
+            if (testWidth > maxWidth && currentLine) {
+                lines.push(currentLine);
+                currentLine = word;
+            } else {
+                currentLine = testLine;
+            }
+        }
+        
+        if (currentLine) {
+            lines.push(currentLine);
+        }
+        
+        return lines;
+    }
+    
+    escapeXML(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&apos;');
+    }
+    
+    async downloadSVGasPNG(svgString, filename, scale = 1) {
+        // Create a blob from the SVG string
+        const blob = new Blob([svgString], { type: 'image/svg+xml' });
+        const url = URL.createObjectURL(blob);
+        
+        // Create an image element
+        const img = new Image();
+        
+        return new Promise((resolve, reject) => {
+            img.onload = () => {
+                // Create canvas with the actual pixel dimensions
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                
+                const ctx = canvas.getContext('2d');
+                
+                // Enable high quality rendering for retina
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                
+                // Draw the image at full resolution
+                ctx.drawImage(img, 0, 0);
+                
+                // Convert to PNG and download
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        const a = document.createElement('a');
+                        a.href = URL.createObjectURL(blob);
+                        a.download = filename;
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                        URL.revokeObjectURL(a.href);
+                    }
+                    URL.revokeObjectURL(url);
+                    resolve();
+                }, 'image/png', 1.0); // Maximum quality
+            };
+            
+            img.onerror = () => {
+                URL.revokeObjectURL(url);
+                reject(new Error('Failed to load SVG'));
+            };
+            
+            img.src = url;
+        });
+    }
+    
     showNotification(message) {
         const notification = document.getElementById('notification');
         if (!notification) return;
diff --git a/_site/embed-preview/index.html b/_site/embed-preview/index.html
index 77e3b31..71194fb 100644
--- a/_site/embed-preview/index.html
+++ b/_site/embed-preview/index.html
@@ -31,7 +31,7 @@
     <!-- Viewer Mode -->
     <div id="viewer-mode" class="viewer-mode h-screen flex flex-col p-2 sm:p-4">
         <!-- Context Pills -->
-        <div id="context-pills" class="flex overflow-x-auto gap-2 empty:hidden mb-0 sm:mb-2 pb-1 scrollbar-hide"></div>
+        <div id="context-pills" class="flex overflow-x-auto gap-2 empty:hidden mb-0 sm:mb-2 pb-1 scrollbar-hide min-h-[25px]"></div>
         
         <!-- Main Prompt Interface - Full Height -->
         <div class="flex-1 flex flex-col">
@@ -46,6 +46,13 @@
             <!-- Settings Pills -->
             <div id="settings-pills" class="flex gap-1 sm:gap-2 flex-wrap flex-1 min-w-0"></div>
             
+            <!-- Download Button -->
+            <button id="download-button" class="w-8 h-8 sm:w-10 sm:h-10 bg-dynamic-muted text-dynamic-foreground rounded-full flex items-center justify-center hover:bg-dynamic-muted/80 transition-colors focus-ring flex-shrink-0 shadow-lg touch-target mr-2" title="Download as PNG">
+                <svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+                </svg>
+            </button>
+            
             <!-- Send Button (circular with arrow up) -->
             <button id="copy-button" class="w-8 h-8 sm:w-10 sm:h-10 bg-dynamic-primary text-white rounded-full flex items-center justify-center hover:opacity-90 transition-opacity focus-ring flex-shrink-0 shadow-lg touch-target" title="Send prompt">
                 <svg width="16" height="16" class="sm:w-5 sm:h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
diff --git a/embed-preview-script.js b/embed-preview-script.js
index 08c6a33..886d560 100644
--- a/embed-preview-script.js
+++ b/embed-preview-script.js
@@ -177,6 +177,11 @@ class EmbedPreview {
         if (copyButton) {
             copyButton.addEventListener('click', () => this.handleCopy());
         }
+        
+        const downloadButton = document.getElementById('download-button');
+        if (downloadButton) {
+            downloadButton.addEventListener('click', () => this.handleDownload());
+        }
     }
     
     render() {
@@ -371,6 +376,253 @@ class EmbedPreview {
         }
     }
     
+    async handleDownload() {
+        try {
+            // Get computed styles
+            const computedStyles = getComputedStyle(document.documentElement);
+            const bgColor = `rgb(${computedStyles.getPropertyValue('--background').trim()})`;
+            const fgColor = `rgb(${computedStyles.getPropertyValue('--foreground').trim()})`;
+            const mutedColor = `rgb(${computedStyles.getPropertyValue('--muted').trim()})`;
+            const mutedFgColor = `rgb(${computedStyles.getPropertyValue('--muted-foreground').trim()})`;
+            const primaryColor = `rgb(${computedStyles.getPropertyValue('--primary').trim()})`;
+            const borderColor = `rgb(${computedStyles.getPropertyValue('--border').trim()})`;
+            
+            // Create SVG representation
+            const { svg, scale } = this.createSVG({
+                bgColor,
+                fgColor,
+                mutedColor,
+                mutedFgColor,
+                primaryColor,
+                borderColor
+            });
+            
+            // Convert SVG to PNG and download (scale will make it retina-compatible)
+            await this.downloadSVGasPNG(svg, 'prompt-preview.png', scale);
+            this.showNotification('Downloaded as PNG!');
+        } catch (error) {
+            console.error('Download failed:', error);
+            this.showNotification('Download failed');
+        }
+    }
+    
+    createSVG(colors) {
+        const scale = 2; // 2x for retina displays
+        const width = 800 * scale;
+        const padding = 16 * scale; // Match sm:p-4 (1rem = 16px)
+        const mobileGap = 4 * scale; // Match gap-1 on mobile
+        const desktopGap = 8 * scale; // Match sm:gap-2
+        
+        // Start calculating height dynamically
+        let yOffset = padding;
+        let svgContent = '';
+        
+        // Context pills area with min-height of 25px
+        const contextPills = document.getElementById('context-pills');
+        const contextPillsHeight = 25 * scale; // min-h-[25px]
+        const contextPillsMargin = 8 * scale; // mb-0 sm:mb-2 (using desktop margin)
+        
+        if (contextPills && contextPills.children.length > 0) {
+            let xOffset = padding;
+            const pillHeight = 20 * scale; // Smaller pills in context area
+            const pillPadding = 8 * scale;
+            const fontSize = 10.4 * scale;
+            
+            for (const pill of contextPills.children) {
+                const pillText = pill.textContent.trim();
+                const pillWidth = Math.max(60 * scale, pillText.length * 7 * scale + pillPadding * 2);
+                
+                // Pill background with proper opacity
+                const pillY = yOffset + (contextPillsHeight - pillHeight) / 2;
+                svgContent += `<rect x="${xOffset}" y="${pillY}" width="${pillWidth}" height="${pillHeight}" rx="${10 * scale}" fill="${colors.primaryColor}" fill-opacity="0.1" stroke="${colors.primaryColor}" stroke-opacity="0.3" stroke-width="${scale}"/>`;
+                
+                // Pill text - fix vertical alignment using dominant-baseline
+                const textY = pillY + pillHeight / 2;
+                svgContent += `<text x="${xOffset + pillWidth/2}" y="${textY}" text-anchor="middle" dominant-baseline="middle" fill="${colors.fgColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${fontSize}" font-weight="500">${this.escapeXML(pillText)}</text>`;
+                
+                xOffset += pillWidth + desktopGap;
+            }
+        }
+        
+        yOffset += contextPillsHeight + contextPillsMargin;
+        
+        // Main prompt container - calculate needed height
+        const promptText = this.config.prompt || '← Enter your prompt on designer...';
+        const isPlaceholder = !this.config.prompt;
+        const containerPadding = 24 * scale; // p-3 sm:p-6 (using desktop padding)
+        const lineHeight = 22 * scale; // leading-relaxed
+        const fontSize = 16 * scale; // text-sm sm:text-base (using desktop size)
+        
+        // Calculate wrapped text lines
+        const maxTextWidth = width - padding * 2 - containerPadding * 2;
+        const lines = this.wrapText(promptText, maxTextWidth / scale, 16); // Use unscaled values for text wrapping
+        const textHeight = Math.max(100 * scale, lines.length * lineHeight + containerPadding * 2);
+        
+        // Prompt container background
+        svgContent += `<rect x="${padding}" y="${yOffset}" width="${width - padding * 2}" height="${textHeight}" rx="${12 * scale}" fill="${colors.mutedColor}" stroke="${colors.borderColor}" stroke-width="${scale}"/>`;
+        
+        // Prompt text
+        const textColor = isPlaceholder ? colors.mutedFgColor : colors.fgColor;
+        const fontStyle = isPlaceholder ? 'italic' : 'normal';
+        let textY = yOffset + containerPadding + fontSize;
+        
+        for (const line of lines) {
+            svgContent += `<text x="${padding + containerPadding}" y="${textY}" fill="${textColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${fontSize}" font-style="${fontStyle}">${this.escapeXML(line)}</text>`;
+            textY += lineHeight;
+        }
+        
+        yOffset += textHeight + desktopGap; // mt-0 sm:mt-2
+        
+        // Bottom bar with settings pills and buttons
+        const bottomBarHeight = 40 * scale; // h-10 for buttons
+        const settingsY = yOffset + (bottomBarHeight - 28 * scale) / 2; // Center pills vertically
+        let settingsX = padding;
+        
+        // Mode pill (with background)
+        if (this.config.mode) {
+            const modeText = this.capitalizeFirst(this.config.mode);
+            const modePadding = 12 * scale; // px-3
+            const modeHeight = 32 * scale; // py-2
+            const modeWidth = modeText.length * 8 * scale + modePadding * 2;
+            const modeFontSize = 12 * scale;
+            
+            svgContent += `<rect x="${settingsX}" y="${settingsY}" width="${modeWidth}" height="${modeHeight}" rx="${16 * scale}" fill="${colors.primaryColor}" fill-opacity="0.1" stroke="${colors.primaryColor}" stroke-opacity="0.2" stroke-width="${scale}"/>`;
+            svgContent += `<text x="${settingsX + modeWidth/2}" y="${settingsY + modeHeight/2}" text-anchor="middle" dominant-baseline="middle" fill="${colors.fgColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${modeFontSize}" font-weight="500">${modeText}</text>`;
+            
+            settingsX += modeWidth + desktopGap;
+        }
+        
+        // Model pill (text only)
+        if (this.config.model) {
+            const modelText = this.config.model;
+            const modelFontSize = 12 * scale;
+            svgContent += `<text x="${settingsX + 4 * scale}" y="${yOffset + bottomBarHeight/2}" dominant-baseline="middle" fill="${colors.primaryColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${modelFontSize}">${modelText}</text>`;
+            settingsX += modelText.length * 7 * scale + 12 * scale;
+        }
+        
+        // Thinking pill
+        if (this.config.thinking) {
+            const thinkingFontSize = 12 * scale;
+            svgContent += `<text x="${settingsX}" y="${yOffset + bottomBarHeight/2}" dominant-baseline="middle" fill="${colors.primaryColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${thinkingFontSize}">🧠 Thinking</text>`;
+            settingsX += 70 * scale;
+        }
+        
+        // MAX pill
+        if (this.config.max) {
+            const maxFontSize = 12 * scale;
+            svgContent += `<text x="${settingsX}" y="${yOffset + bottomBarHeight/2}" dominant-baseline="middle" fill="${colors.primaryColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${maxFontSize}">⚡ MAX</text>`;
+        }
+        
+        // Watermark on the right
+        const watermarkText = "prompts.chat/embed";
+        const watermarkFontSize = 14 * scale;
+        const watermarkX = width - padding - watermarkText.length * 7 * scale;
+        const watermarkY = yOffset + bottomBarHeight / 2;
+        
+        // Add watermark text with subtle styling
+        svgContent += `<text x="${watermarkX}" y="${watermarkY}" dominant-baseline="middle" fill="${colors.mutedFgColor}" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif" font-size="${watermarkFontSize}" font-weight="400" opacity="0.7">${watermarkText}</text>`;
+        
+        // Calculate final height
+        const totalHeight = yOffset + bottomBarHeight + padding;
+        
+        // Create SVG with calculated height  
+        let svg = `<svg width="${width}" height="${totalHeight}" viewBox="0 0 ${width} ${totalHeight}" xmlns="http://www.w3.org/2000/svg">`;
+        
+        // Background
+        svg += `<rect width="${width}" height="${totalHeight}" fill="${colors.bgColor}"/>`;
+        
+        // Add all content
+        svg += svgContent;
+        
+        svg += '</svg>';
+        
+        return { svg, scale };
+    }
+    
+    wrapText(text, maxWidth, fontSize) {
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = '';
+        // More accurate character width calculation based on font size
+        const avgCharWidth = fontSize * 0.55; // Adjusted for typical character width
+        
+        for (const word of words) {
+            const testLine = currentLine ? currentLine + ' ' + word : word;
+            const testWidth = testLine.length * avgCharWidth;
+            
+            if (testWidth > maxWidth && currentLine) {
+                lines.push(currentLine);
+                currentLine = word;
+            } else {
+                currentLine = testLine;
+            }
+        }
+        
+        if (currentLine) {
+            lines.push(currentLine);
+        }
+        
+        return lines;
+    }
+    
+    escapeXML(text) {
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&apos;');
+    }
+    
+    async downloadSVGasPNG(svgString, filename, scale = 1) {
+        // Create a blob from the SVG string
+        const blob = new Blob([svgString], { type: 'image/svg+xml' });
+        const url = URL.createObjectURL(blob);
+        
+        // Create an image element
+        const img = new Image();
+        
+        return new Promise((resolve, reject) => {
+            img.onload = () => {
+                // Create canvas with the actual pixel dimensions
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                
+                const ctx = canvas.getContext('2d');
+                
+                // Enable high quality rendering for retina
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                
+                // Draw the image at full resolution
+                ctx.drawImage(img, 0, 0);
+                
+                // Convert to PNG and download
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        const a = document.createElement('a');
+                        a.href = URL.createObjectURL(blob);
+                        a.download = filename;
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                        URL.revokeObjectURL(a.href);
+                    }
+                    URL.revokeObjectURL(url);
+                    resolve();
+                }, 'image/png', 1.0); // Maximum quality
+            };
+            
+            img.onerror = () => {
+                URL.revokeObjectURL(url);
+                reject(new Error('Failed to load SVG'));
+            };
+            
+            img.src = url;
+        });
+    }
+    
     showNotification(message) {
         const notification = document.getElementById('notification');
         if (!notification) return;