Update app.py

app.py

@@ -115,7 +115,6 @@ def build_full_html(markdown_text, styles, for_image=False):
         
         /* Headers */
         {wrapper_id} h1, {wrapper_id} h2, {wrapper_id} h3 {{ border-bottom: 1px solid #eee; padding-bottom: 5px; margin-top: 1.5em; }}
-
         /* --- CODE BOX STYLING (FIXED) --- */
         
         /* Apply box styling to ALL pre tags (plain or highlighted) */
@@ -129,7 +128,6 @@ def build_full_html(markdown_text, styles, for_image=False):
             margin: 1em 0;
             line-height: 1.45;
         }}
-
         /* Ensure code inside pre doesn't double-pad */
         {wrapper_id} pre code {{
             background-color: transparent;
@@ -138,7 +136,6 @@ def build_full_html(markdown_text, styles, for_image=False):
             font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
             font-size: 0.9em;
         }}
-
         /* Specific override for Pygments container if it exists */
         {wrapper_id} .codehilite {{
             background-color: {bg_color};
@@ -150,7 +147,6 @@ def build_full_html(markdown_text, styles, for_image=False):
             margin: 0; 
             border: none; /* Let container handle border if needed */
         }}
-
         /* Syntax Highlighting Colors */
         {pygments_css}
         
@@ -285,13 +281,11 @@ def index():
             <h1>Markdown Tool</h1>
             <button onclick="document.body.classList.toggle('dark-mode')" class="btn-secondary">🌓 Dark Mode</button>
         </div>
-
         <fieldset>
             <legend>1. Input</legend>
             <textarea id="md-input" rows="8"></textarea>
             <div class="action-bar"><button onclick="analyze()" class="btn-primary" id="load-btn">Analyze Content</button></div>
         </fieldset>
-
         <div id="comp-section" style="display:none;">
             <div id="detected-format" class="format-banner"></div>
             <fieldset>
@@ -299,7 +293,6 @@ def index():
                 <div class="comp-grid" id="comp-list"></div>
             </fieldset>
         </div>
-
         <fieldset>
             <legend>3. Styles</legend>
             <div class="style-grid">
@@ -319,9 +312,7 @@ def index():
             </div>
             <textarea id="c_css" rows="2" style="margin-top:15px;" placeholder="Custom CSS..."></textarea>
         </fieldset>
-
         <button onclick="process('preview')" class="btn-primary" id="gen-btn" style="width:100%; height:50px; font-size:18px;">GENERATE PREVIEW</button>
-
         <div id="preview-area" style="display:none;">
             <div class="preview-section">
                 <div class="preview-box">
@@ -338,79 +329,62 @@ def index():
                 </div>
             </div>
         </div>
-
         <script>
             async function analyze() {
                 const btn = document.getElementById('load-btn');
-                const input = document.getElementById('md-input');
-                if(!input.value.trim()) return alert("Please enter markdown text first.");
+                const text = document.getElementById('md-input').value;
+                if(!text) return alert("Please enter text.");
                 
                 btn.innerText = "Analyzing...";
                 const fd = new FormData(); 
-                fd.append('markdown_text', input.value);
+                fd.append('markdown_text', text);
                 
                 try {
                     const res = await fetch('/parse', {method:'POST', body:fd});
-                    if (!res.ok) throw new Error("Server error during analysis");
                     const data = await res.json();
-                    
-                    const banner = document.getElementById('detected-format');
+                    if(data.error) { alert(data.error); return; }
+                    document.getElementById('detected-format').innerText = "Detected: " + data.format;
                     const list = document.getElementById('comp-list'); 
-                    
-                    banner.innerText = "Detected: " + (data.format || "Unknown");
                     list.innerHTML = '';
-                    
                     data.components.forEach(c => {
-                        // Use encodeURIComponent to handle special characters safely
-                        const safeContent = btoa(encodeURIComponent(c.content));
+                        const safe = btoa(unescape(encodeURIComponent(c.content)));
                         list.innerHTML += `
                             <div class="comp-card">
                                 <label style="cursor:pointer; display:block;">
-                                    <input type="checkbox" checked class="c-check" 
-                                           data-name="${c.filename}" 
-                                           data-content="${safeContent}"> 
+                                    <input type="checkbox" checked class="c-check" data-name="${c.filename}" data-content="${safe}"> 
                                     <b>${c.filename}</b>
                                 </label>
                                 <textarea readonly>${c.content.substring(0,80)}...</textarea>
                             </div>`;
                     });
                     document.getElementById('comp-section').style.display = 'block';
-                } catch(e) {
-                    console.error(e);
-                    alert("Analysis failed: " + e.message);
-                } finally {
-                    btn.innerText = "Analyze Content";
-                }
+                } catch(e) { alert(e); } 
+                finally { btn.innerText = "Analyze Content"; }
             }
-
             async function process(action, type = null) {
                 const btn = document.getElementById('gen-btn');
                 let md = "";
                 const checks = document.querySelectorAll('.c-check');
+                let hasSelection = false;
                 
-                if (checks.length > 0) {
-                    checks.forEach(c => {
-                        if(c.checked) {
-                            const content = decodeURIComponent(atob(c.dataset.content));
-                            const name = c.dataset.name;
-                            
-                            // Add header
-                            if(!name.includes("Intro") && !name.includes("Structure")) {
-                                md += "### File: " + name + "\n";
-                            }
-                            
-                            // WRAP IN CODE BOX: Detect if it's a file or code block
-                            if(name.includes(".") || name === "Agent Command" || name === "File Structure") {
-                                md += "```\n" + content + "\n```\n\n";
-                            } else {
-                                md += content + "\n\n";
-                            }
+                checks.forEach(c => {
+                    if(c.checked) {
+                        hasSelection = true;
+                        const content = decodeURIComponent(escape(atob(c.dataset.content)));
+                        
+                        if(!c.dataset.name.includes("Intro") && !c.dataset.name.includes("Structure")) {
+                            md += "### File: " + c.dataset.name + "\n";
                         }
-                    });
-                } else {
-                    md = document.getElementById('md-input').value;
-                }
-
+                        
+                        if(c.dataset.name.includes(".") || c.dataset.name === "Agent Command") {
+                            md += "```\n" + content + "\n```\n\n";
+                        } else {
+                            md += content + "\n\n";
+                        }
+                    }
+                });
+                
+                if(!hasSelection) md = document.getElementById('md-input').value;
                 const payload = {
                     markdown_text: md,
                     download: action === 'download',
@@ -426,7 +400,6 @@ def index():
                         page_padding: 40, code_padding: 15
                     }
                 };
-
                 if(action === 'preview') btn.innerText = "Processing...";
                 
                 try {
@@ -446,7 +419,6 @@ def index():
                     } else {
                         const data = await res.json();
                         if(data.error) throw new Error(data.error);
-
                         document.getElementById('preview-area').style.display = 'block';
                         document.getElementById('html-prev').innerHTML = data.preview_html;
                         const pngContainer = document.getElementById('png-prev');