@atlashub/smartstack-cli 4.80.0 → 5.0.0

package/templates/skills/business-analyse-html/html/src/scripts/06-render-mockups.js

@@ -1,564 +0,0 @@
-/* ============================================
-   HTML MOCKUP RENDERER
-   Generates realistic HTML mockups from screens[] specs
-   ============================================ */
-
-var _formTabCounter = 0;
-
-function renderScreenMockups(code) {
-    var spec = data.moduleSpecs[code] || {};
-    var screens = spec.screens || [];
-
-    if (screens.length === 0) return '';
-
-    return screens.map(function(screen, si) {
-        var resources = screen.resources || [];
-        var content = resources.length > 0
-            ? resources.map(function(res, ri) {
-                return renderResourceMockup(code, screen.sectionCode, res, ri);
-            }).join('')
-            : '<div class="card" style="padding:1.5rem;color:var(--text-muted);text-align:center;"><p>Maquette en attente de spécification pour cette section.</p></div>';
-        return '<div class="screen-section" id="screen-' + code + '-' + screen.sectionCode + '" style="margin-bottom:2rem;">' +
-            '<h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:1rem;">' +
-            '<span style="color:var(--accent);">&#9656;</span> ' + escapeHtml(screen.sectionLabel || screen.sectionCode) +
-            '</h3>' +
-            content +
-        '</div>';
-    }).join('');
-}
-
-function renderResourceMockup(code, sectionCode, res, index) {
-    var mockupId = 'mockup-' + code + '-' + sectionCode + '-' + index;
-    var html = '<div class="mockup-frame" style="margin-bottom:1.5rem;">';
-
-    // Browser chrome
-    html += '<div class="mockup-toolbar">';
-    html += '<div class="mockup-dot mockup-dot-red"></div>';
-    html += '<div class="mockup-dot mockup-dot-yellow"></div>';
-    html += '<div class="mockup-dot mockup-dot-green"></div>';
-    html += '<span class="mockup-title">' + escapeHtml(res.label || res.code) + ' (' + res.type + ')</span>';
-    if (res.permission) {
-        html += '<span style="margin-left:auto;font-size:0.65rem;color:var(--text-muted);background:var(--bg-dark);padding:0.15rem 0.5rem;border-radius:4px;">' + escapeHtml(res.permission) + '</span>';
-    }
-    html += '</div>';
-
-    // Mockup content
-    html += '<div class="mockup-content" id="' + mockupId + '">';
-    switch (res.type) {
-        case 'SmartTable':
-            html += renderSmartTableMockup(res);
-            break;
-        case 'SmartForm':
-            html += renderSmartFormMockup(res);
-            break;
-        case 'SmartCard':
-            html += renderSmartCardMockup(res);
-            break;
-        case 'SmartKanban':
-            html += renderSmartKanbanMockup(res);
-            break;
-        case 'SmartDashboard':
-            html += renderSmartDashboardMockup(res);
-            break;
-        case 'SmartFilter':
-            html += renderSmartFilterMockup(res);
-            break;
-        default:
-            html += '<div style="padding:2rem;text-align:center;color:var(--text-muted);">Composant ' + res.type + ' - maquette non disponible</div>';
-    }
-    html += '</div>';
-
-    // Notes
-    if (res.notes) {
-        html += '<div style="padding:0.5rem 1rem;font-size:0.8rem;color:var(--text-muted);border-top:1px solid var(--border);background:var(--bg-input);">';
-        html += '<strong>Notes:</strong> ' + escapeHtml(res.notes);
-        html += '</div>';
-    }
-
-    // Comment area
-    html += '<div class="wireframe-comment">';
-    html += '<label style="font-size:0.8rem;color:var(--text-muted);display:block;margin-bottom:0.3rem;">Commentaire :</label>';
-    html += '<textarea class="form-textarea" placeholder="Commentaire sur cette maquette..."';
-    html += ' onblur="updateWireframeComment(\'' + code + '\', \'' + (res.code || sectionCode + '-' + index) + '\', this.value)"';
-    html += ' style="min-height:50px;font-size:0.85rem;resize:vertical;">';
-    html += getWireframeComment(code, res.code || sectionCode + '-' + index);
-    html += '</textarea>';
-    html += '</div>';
-
-    html += '</div>';
-    return html;
-}
-
-/* ---------- SmartTable ---------- */
-function renderSmartTableMockup(res) {
-    var columns = res.columns || [];
-    if (columns.length === 0) return '<div style="padding:2rem;text-align:center;color:var(--text-muted);">Table sans colonnes définies</div>';
-
-    var html = '';
-
-    // Header with actions
-    html += '<div class="mock-header">';
-    html += '<span class="mock-title">' + escapeHtml(res.label || 'Liste') + '</span>';
-    html += '<div style="display:flex;gap:0.4rem;">';
-    (res.actions || []).forEach(function(action) {
-        var isPrimary = action === 'create' || action === 'export';
-        html += '<span class="mock-btn' + (isPrimary ? '' : '" style="background:var(--bg-hover);color:var(--text)') + '">' + formatActionLabel(action) + '</span>';
-    });
-    html += '</div></div>';
-
-    // Filters
-    if (res.filters && res.filters.length > 0) {
-        html += '<div style="display:flex;gap:0.5rem;margin-bottom:1rem;">';
-        res.filters.forEach(function(f) {
-            html += '<span class="mock-input" style="width:auto;min-width:120px;font-size:0.8rem;color:var(--text-muted);">' + f + ' &#9662;</span>';
-        });
-        html += '<span class="mock-input" style="width:auto;min-width:200px;font-size:0.8rem;color:var(--text-muted);">Rechercher...</span>';
-        html += '</div>';
-    }
-
-    // Table
-    html += '<table class="mock-table">';
-    html += '<thead><tr>';
-    columns.forEach(function(col) {
-        html += '<th>' + escapeHtml(col.label || col.field);
-        if (col.sortable) html += ' <span style="font-size:0.6rem;color:var(--text-muted);">&#9650;&#9660;</span>';
-        html += '</th>';
-    });
-    html += '<th style="width:80px;">Actions</th>';
-    html += '</tr></thead>';
-
-    // Sample rows
-    html += '<tbody>';
-    var sampleData = generateSampleRows(columns, 4);
-    sampleData.forEach(function(row) {
-        html += '<tr>';
-        columns.forEach(function(col) {
-            var val = row[col.field] || '';
-            if (col.type === 'badge') {
-                html += '<td><span class="mock-status mock-status-active">' + val + '</span></td>';
-            } else if (col.type === 'lookup') {
-                html += '<td style="color:var(--accent);">' + val + '</td>';
-            } else {
-                html += '<td>' + val + '</td>';
-            }
-        });
-        html += '<td style="text-align:center;"><span style="cursor:pointer;color:var(--text-muted);">&#9998; &#128465;</span></td>';
-        html += '</tr>';
-    });
-    html += '</tbody></table>';
-
-    // Pagination
-    html += '<div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem 0;font-size:0.8rem;color:var(--text-muted);">';
-    html += '<span>1-4 sur 24 résultats</span>';
-    html += '<div style="display:flex;gap:0.3rem;">';
-    html += '<span class="mock-btn" style="background:var(--primary);font-size:0.75rem;padding:0.2rem 0.5rem;">1</span>';
-    html += '<span class="mock-btn" style="background:var(--bg-hover);font-size:0.75rem;padding:0.2rem 0.5rem;">2</span>';
-    html += '<span class="mock-btn" style="background:var(--bg-hover);font-size:0.75rem;padding:0.2rem 0.5rem;">3</span>';
-    html += '</div></div>';
-
-    return html;
-}
-
-/* ---------- SmartForm ---------- */
-function renderSmartFormMockup(res) {
-    var tabs = res.tabs || [];
-    if (tabs.length === 0 && res.fields) {
-        tabs = [{ label: 'Informations', fields: res.fields }];
-    }
-    if (tabs.length === 0) return '<div style="padding:2rem;text-align:center;color:var(--text-muted);">Formulaire sans champs définis</div>';
-
-    var mockupId = 'form-tabs-' + (++_formTabCounter);
-    var html = '';
-
-    // Header
-    html += '<div class="mock-header">';
-    html += '<span class="mock-title">' + escapeHtml(res.label || 'Formulaire') + '</span>';
-    html += '<div style="display:flex;gap:0.4rem;">';
-    (res.actions || ['save', 'cancel']).forEach(function(action) {
-        var isPrimary = action === 'save';
-        html += '<span class="mock-btn' + (isPrimary ? '' : '" style="background:var(--bg-hover);color:var(--text)') + '">' + formatActionLabel(action) + '</span>';
-    });
-    html += '</div></div>';
-
-    // Tabs (clickable when more than 1)
-    if (tabs.length > 1) {
-        html += '<div class="mock-form-tab-bar" data-mockup="' + mockupId + '">';
-        tabs.forEach(function(tab, i) {
-            html += '<span class="mock-form-tab' + (i === 0 ? ' active' : '') + '"';
-            html += ' onclick="switchFormTab(\'' + mockupId + '\', ' + i + ')"';
-            html += '>' + escapeHtml(tab.label) + '</span>';
-        });
-        html += '</div>';
-    }
-
-    // Tab contents (all rendered, only first visible)
-    tabs.forEach(function(tab, ti) {
-        var isOnly = tabs.length <= 1;
-        html += '<div class="mock-form-tab-content' + (ti === 0 || isOnly ? ' active' : '') + '"';
-        html += ' data-mockup="' + mockupId + '" data-tab="' + ti + '">';
-
-        // Tab-level subtable: the entire tab is a subtable (type: "subtable", entity, columns)
-        if (tab.type === 'subtable') {
-            html += renderSubtableMockup(tab);
-        } else {
-            var fields = tab.fields || [];
-            var rows = [];
-            for (var i = 0; i < fields.length; i += 2) {
-                rows.push(fields.slice(i, i + 2));
-            }
-
-            rows.forEach(function(row) {
-                if (row.length === 1 && row[0].type === 'subtable') {
-                    html += renderSubtableMockup(row[0]);
-                } else {
-                    html += '<div class="mock-form-row">';
-                    row.forEach(function(field) {
-                        html += '<div class="mock-form-group">';
-                        html += '<label class="mock-label">' + escapeHtml(field.label || field.field);
-                        if (field.required) html += ' <span style="color:var(--error);">*</span>';
-                        html += '</label>';
-                        html += renderFormFieldMockup(field);
-                        html += '</div>';
-                    });
-                    html += '</div>';
-                }
-            });
-
-            if (fields.length === 0) {
-                html += '<div style="padding:2rem;text-align:center;color:var(--text-muted);font-style:italic;">Contenu de l\'onglet &laquo; ' + escapeHtml(tab.label) + ' &raquo;</div>';
-            }
-        }
-
-        html += '</div>';
-    });
-
-    return html;
-}
-
-function renderFormFieldMockup(field) {
-    var val = generateSampleValue(field);
-    switch (field.type) {
-        case 'select':
-            return '<span class="mock-input" style="display:block;">' + val + ' &#9662;</span>';
-        case 'lookup':
-            return '<span class="mock-input" style="display:block;color:var(--accent);">' + val + ' &#128269;</span>';
-        case 'date':
-            return '<span class="mock-input" style="display:block;">' + val + ' &#128197;</span>';
-        case 'textarea':
-            return '<span class="mock-input" style="display:block;min-height:60px;">' + val + '</span>';
-        case 'checkbox':
-            return '<div style="display:flex;align-items:center;gap:0.5rem;"><input type="checkbox" checked disabled style="width:16px;height:16px;"><span style="font-size:0.85rem;color:var(--text);">' + val + '</span></div>';
-        default:
-            return '<span class="mock-input" style="display:block;' + (field.readonly ? 'opacity:0.6;' : '') + '">' + val + '</span>';
-    }
-}
-
-function renderSubtableMockup(field) {
-    var cols = field.columns || [];
-    var entity = field.entity || 'Element';
-    var html = '<div style="margin:1rem 0;border:1px solid var(--border);border-radius:8px;overflow:hidden;">';
-    html += '<div style="display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0.75rem;background:var(--bg-hover);">';
-    html += '<span style="font-weight:500;color:var(--text-bright);font-size:0.85rem;">' + escapeHtml(entity) + '</span>';
-    html += '<span class="mock-btn" style="font-size:0.75rem;padding:0.2rem 0.5rem;">+ Ajouter</span>';
-    html += '</div>';
-    html += '<table class="mock-table"><thead><tr>';
-    cols.forEach(function(c) { html += '<th>' + escapeHtml(c) + '</th>'; });
-    html += '</tr></thead><tbody>';
-    html += '<tr>' + cols.map(function() { return '<td style="color:var(--text-muted);font-style:italic;">...</td>'; }).join('') + '</tr>';
-    html += '</tbody></table></div>';
-    return html;
-}
-
-/* ---------- SmartCard ---------- */
-function renderSmartCardMockup(res) {
-    var fields = res.fields || res.columns || [];
-    var html = '<div class="mock-header"><span class="mock-title">' + escapeHtml(res.label || 'Cartes') + '</span></div>';
-    html += '<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;">';
-
-    for (var i = 0; i < 4; i++) {
-        html += '<div style="background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:1rem;">';
-        // Title/Subtitle pattern (SmartCard with title + subtitle + fields + actions)
-        if (res.title) {
-            html += '<div style="font-weight:600;color:var(--text-bright);margin-bottom:0.25rem;">' + escapeHtml(res.title) + ' #' + (i + 1) + '</div>';
-        }
-        if (res.subtitle) {
-            html += '<div style="font-size:0.8rem;color:var(--accent);margin-bottom:0.5rem;">' + escapeHtml(res.subtitle) + '</div>';
-        }
-        // Fields
-        fields.forEach(function(col, ci) {
-            var label = col.label || col.field || (typeof col === 'string' ? col : '');
-            var iconMap = { calendar: '&#128197; ', 'dollar-sign': '&#128176; ', 'alert-circle': '&#9888; ', mail: '&#9993; ', building: '&#127970; ', user: '&#128100; ' };
-            var icon = col.icon ? (iconMap[col.icon] || '&#9679; ') : '';
-            if (!res.title && ci === 0) {
-                html += '<div style="font-weight:600;color:var(--text-bright);margin-bottom:0.5rem;">' + escapeHtml(label) + ' #' + (i + 1) + '</div>';
-            } else {
-                html += '<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.25rem;">' + icon + escapeHtml(label) + ': <span style="color:var(--text);">valeur</span></div>';
-            }
-        });
-        // Actions
-        if (res.actions && res.actions.length > 0) {
-            html += '<div style="margin-top:0.75rem;display:flex;gap:0.4rem;">';
-            res.actions.forEach(function(a) {
-                var actionLabel = typeof a === 'string' ? a.replace(/-/g, ' ') : (a.label || a.action || '');
-                html += '<span class="mock-btn" style="font-size:0.75rem;">' + escapeHtml(actionLabel) + '</span>';
-            });
-            html += '</div>';
-        }
-        html += '</div>';
-    }
-    html += '</div>';
-    return html;
-}
-
-/* ---------- SmartKanban ---------- */
-function renderSmartKanbanMockup(res) {
-    var options = (res.options && res.options.length > 0) ? res.options : (res.columns && res.columns.length > 0) ? res.columns : ['À faire', 'En cours', 'Terminé'];
-    var html = '<div class="mock-header"><span class="mock-title">' + escapeHtml(res.label || 'Kanban') + '</span></div>';
-    html += '<div style="display:flex;gap:1rem;overflow-x:auto;padding-bottom:0.5rem;">';
-
-    options.forEach(function(col, ci) {
-        var colLabel = typeof col === 'string' ? col : (col.label || col.field || 'Colonne');
-        html += '<div style="min-width:200px;flex:1;background:var(--bg-hover);border-radius:8px;padding:0.75rem;">';
-        html += '<div style="font-weight:600;font-size:0.85rem;color:var(--text-bright);margin-bottom:0.75rem;display:flex;justify-content:space-between;">';
-        html += escapeHtml(colLabel) + ' <span style="font-size:0.7rem;background:var(--bg-card);padding:0.1rem 0.4rem;border-radius:4px;color:var(--text-muted);">' + (3 - ci) + '</span>';
-        html += '</div>';
-        for (var j = 0; j < Math.max(1, 3 - ci); j++) {
-            html += '<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:0.5rem;margin-bottom:0.5rem;font-size:0.8rem;">';
-            html += '<div style="color:var(--text-bright);font-weight:500;">Élément ' + (j + 1) + '</div>';
-            html += '<div style="color:var(--text-muted);font-size:0.7rem;margin-top:0.25rem;">Description...</div>';
-            html += '</div>';
-        }
-        html += '</div>';
-    });
-    html += '</div>';
-    return html;
-}
-
-/* ---------- SmartDashboard ---------- */
-function renderSmartDashboardMockup(res) {
-    var html = '<div class="mock-header"><span class="mock-title">' + escapeHtml(res.label || 'Tableau de bord') + '</span></div>';
-
-    // KPI cards
-    html += '<div class="mock-kpi-grid">';
-    var kpis = res.kpis || [
-        { label: 'Total', value: '1,234' },
-        { label: 'Actifs', value: '987' },
-        { label: 'En attente', value: '156' },
-        { label: 'Taux', value: '80%' }
-    ];
-    kpis.forEach(function(kpi) {
-        var displayValue = kpiDisplayValue(kpi);
-        html += '<div class="mock-kpi"><div class="mock-kpi-value">' + escapeHtml(displayValue) + '</div><div class="mock-kpi-label">' + escapeHtml(kpi.label || '') + '</div></div>';
-    });
-    html += '</div>';
-
-    // Charts (SVG mock previews)
-    var charts = res.charts || [{ label: 'Graphique', type: 'bar' }];
-    charts.forEach(function(chart) {
-        html += renderMockChart(chart);
-    });
-
-    return html;
-}
-
-function kpiDisplayValue(kpi) {
-    var v = kpi.value || '0';
-    // If value is already a simple display value (number, percentage), use it
-    if (/^\d[\d,.\s]*%?$/.test(v)) return v;
-    // Detect formula patterns and generate realistic sample values
-    if (v.indexOf('(') !== -1) {
-        var label = (kpi.label || '').toLowerCase();
-        var color = (kpi.color || '').toLowerCase();
-        // Percentage indicators
-        if (v.indexOf('ratio') !== -1 || v.indexOf('%') !== -1 || label.indexOf('taux') !== -1 || label.indexOf('rate') !== -1)
-            return '87.5%';
-        // Average
-        if (v.indexOf('avg') !== -1 || label.indexOf('moyen') !== -1 || label.indexOf('average') !== -1)
-            return '12.4';
-        // Sum (monetary or hours)
-        if (v.indexOf('sum') !== -1)
-            return label.indexOf('jour') !== -1 || label.indexOf('day') !== -1 ? '156' : '45,678';
-        // Count (default)
-        return '1,234';
-    }
-    return v;
-}
-
-/* ---------- SmartFilter ---------- */
-function renderSmartFilterMockup(res) {
-    var filters = res.filters || [];
-    if (filters.length === 0) {
-        // Fallback: legacy options[] format (tag pills)
-        var options = res.options || [];
-        if (options.length === 0) return '<div style="padding:1rem;text-align:center;color:var(--text-muted);">Aucun filtre défini</div>';
-        var html = '<div style="display:flex;gap:0.4rem;flex-wrap:wrap;padding:0.5rem 0;">';
-        html += '<span style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.8rem;background:var(--primary);color:#fff;cursor:pointer;">Tous</span>';
-        options.forEach(function(opt) {
-            html += '<span style="padding:0.3rem 0.7rem;border-radius:16px;font-size:0.8rem;background:var(--bg-hover);color:var(--text);border:1px solid var(--border);cursor:pointer;">' + escapeHtml(typeof opt === 'string' ? opt : opt.label || '') + '</span>';
-        });
-        html += '</div>';
-        return html;
-    }
-
-    // Rich filter bar: render each filter based on its type
-    var html = '<div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:flex-end;padding:0.5rem 0;">';
-    filters.forEach(function(f) {
-        var label = typeof f === 'string' ? f : (f.label || f.field || '');
-        var type = typeof f === 'string' ? 'text' : (f.type || 'text');
-        html += '<div style="display:flex;flex-direction:column;gap:0.2rem;">';
-        html += '<span style="font-size:0.7rem;color:var(--text-muted);">' + escapeHtml(label) + '</span>';
-        switch (type) {
-            case 'select':
-                var opts = f.options || ['Option 1', 'Option 2'];
-                html += '<span class="mock-input" style="width:auto;min-width:130px;font-size:0.8rem;color:var(--text-muted);">' + escapeHtml(opts[0]) + ' &#9662;</span>';
-                break;
-            case 'lookup':
-                html += '<span class="mock-input" style="width:auto;min-width:130px;font-size:0.8rem;color:var(--accent);">' + escapeHtml(f.entity || label) + ' &#128269;</span>';
-                break;
-            case 'daterange':
-                html += '<span class="mock-input" style="width:auto;min-width:180px;font-size:0.8rem;color:var(--text-muted);">01/01/2025 — 31/12/2025 &#128197;</span>';
-                break;
-            default:
-                html += '<span class="mock-input" style="width:auto;min-width:160px;font-size:0.8rem;color:var(--text-muted);">Rechercher... &#128269;</span>';
-        }
-        html += '</div>';
-    });
-    html += '</div>';
-    return html;
-}
-
-/* ---------- Mock Charts ---------- */
-function renderMockChart(chart) {
-    var type = (chart.type || '').toLowerCase();
-    var label = chart.label || chart.type || 'Graphique';
-    var html = '<div class="mock-chart-container">';
-    html += '<div class="mock-chart-header">' + escapeHtml(label) + '</div>';
-    html += '<div class="mock-chart-body">';
-    if (type === 'pie' || type === 'donut') {
-        html += renderMockPieChart();
-    } else if (type === 'line' || type === 'area') {
-        html += renderMockLineChart();
-    } else {
-        html += renderMockBarChart();
-    }
-    html += '</div></div>';
-    return html;
-}
-
-function renderMockPieChart() {
-    var html = '<div style="display:flex;align-items:center;gap:1.5rem;">';
-    html += '<svg viewBox="0 0 42 42" class="mock-pie-svg">';
-    html += '<circle cx="21" cy="21" r="15.9" fill="transparent" stroke="var(--primary)" stroke-width="8" stroke-dasharray="35 65" stroke-dashoffset="25"/>';
-    html += '<circle cx="21" cy="21" r="15.9" fill="transparent" stroke="var(--success)" stroke-width="8" stroke-dasharray="25 75" stroke-dashoffset="-10"/>';
-    html += '<circle cx="21" cy="21" r="15.9" fill="transparent" stroke="var(--warning)" stroke-width="8" stroke-dasharray="22 78" stroke-dashoffset="-35"/>';
-    html += '<circle cx="21" cy="21" r="15.9" fill="transparent" stroke="var(--error)" stroke-width="8" stroke-dasharray="18 82" stroke-dashoffset="-57"/>';
-    html += '</svg>';
-    html += '<div class="mock-chart-legend">';
-    html += '<div><span class="mock-legend-dot" style="background:var(--primary);"></span> Cat\u00e9gorie A (35%)</div>';
-    html += '<div><span class="mock-legend-dot" style="background:var(--success);"></span> Cat\u00e9gorie B (25%)</div>';
-    html += '<div><span class="mock-legend-dot" style="background:var(--warning);"></span> Cat\u00e9gorie C (22%)</div>';
-    html += '<div><span class="mock-legend-dot" style="background:var(--error);"></span> Cat\u00e9gorie D (18%)</div>';
-    html += '</div></div>';
-    return html;
-}
-
-function renderMockBarChart() {
-    var bars = [85, 60, 45, 70, 55, 90];
-    var labels = ['Jan', 'F\u00e9v', 'Mar', 'Avr', 'Mai', 'Jun'];
-    var html = '<svg viewBox="0 0 300 140" class="mock-bar-svg">';
-    html += '<line x1="30" y1="10" x2="30" y2="120" stroke="var(--border)" stroke-width="1"/>';
-    html += '<line x1="30" y1="120" x2="290" y2="120" stroke="var(--border)" stroke-width="1"/>';
-    html += '<line x1="30" y1="40" x2="290" y2="40" stroke="var(--border)" stroke-width="0.5" stroke-dasharray="4"/>';
-    html += '<line x1="30" y1="80" x2="290" y2="80" stroke="var(--border)" stroke-width="0.5" stroke-dasharray="4"/>';
-    var bw = 30, gap = 13;
-    bars.forEach(function(h, i) {
-        var x = 35 + i * (bw + gap);
-        var y = 120 - h * 1.1;
-        html += '<rect x="' + x + '" y="' + y + '" width="' + bw + '" height="' + (h * 1.1) + '" fill="var(--primary)" rx="3" opacity="' + (0.6 + i * 0.08) + '"/>';
-        html += '<text x="' + (x + bw / 2) + '" y="134" text-anchor="middle" fill="var(--text-muted)" font-size="9">' + labels[i] + '</text>';
-    });
-    html += '</svg>';
-    return html;
-}
-
-function renderMockLineChart() {
-    var points = '40,90 90,65 140,75 190,40 240,50 280,25';
-    var labels = ['Jan', 'F\u00e9v', 'Mar', 'Avr', 'Mai', 'Jun'];
-    var xs = [40, 90, 140, 190, 240, 280];
-    var html = '<svg viewBox="0 0 300 140" class="mock-line-svg">';
-    html += '<line x1="30" y1="10" x2="30" y2="120" stroke="var(--border)" stroke-width="1"/>';
-    html += '<line x1="30" y1="120" x2="290" y2="120" stroke="var(--border)" stroke-width="1"/>';
-    html += '<line x1="30" y1="40" x2="290" y2="40" stroke="var(--border)" stroke-width="0.5" stroke-dasharray="4"/>';
-    html += '<line x1="30" y1="80" x2="290" y2="80" stroke="var(--border)" stroke-width="0.5" stroke-dasharray="4"/>';
-    html += '<polygon fill="var(--primary)" opacity="0.1" points="' + points + ' 280,120 40,120"/>';
-    html += '<polyline fill="none" stroke="var(--primary)" stroke-width="2.5" points="' + points + '" stroke-linecap="round" stroke-linejoin="round"/>';
-    points.split(' ').forEach(function(p) {
-        var xy = p.split(',');
-        html += '<circle cx="' + xy[0] + '" cy="' + xy[1] + '" r="3" fill="var(--primary)" stroke="var(--bg-card)" stroke-width="1.5"/>';
-    });
-    xs.forEach(function(x, i) {
-        html += '<text x="' + x + '" y="134" text-anchor="middle" fill="var(--text-muted)" font-size="9">' + labels[i] + '</text>';
-    });
-    html += '</svg>';
-    return html;
-}
-
-/* ---------- Form Tab Switching ---------- */
-function switchFormTab(mockupId, tabIndex) {
-    document.querySelectorAll('.mock-form-tab-bar[data-mockup="' + mockupId + '"] .mock-form-tab').forEach(function(t) {
-        t.classList.remove('active');
-    });
-    var allTabs = document.querySelectorAll('.mock-form-tab-bar[data-mockup="' + mockupId + '"] .mock-form-tab');
-    if (allTabs[tabIndex]) allTabs[tabIndex].classList.add('active');
-    document.querySelectorAll('.mock-form-tab-content[data-mockup="' + mockupId + '"]').forEach(function(el) {
-        el.classList.remove('active');
-    });
-    var target = document.querySelector('.mock-form-tab-content[data-mockup="' + mockupId + '"][data-tab="' + tabIndex + '"]');
-    if (target) target.classList.add('active');
-}
-
-/* ---------- Helpers ---------- */
-function formatActionLabel(action) {
-    var labels = {
-        create: 'Nouveau', edit: 'Modifier', delete: 'Supprimer',
-        export: 'Exporter', save: 'Enregistrer', cancel: 'Annuler',
-        validate: 'Valider', archive: 'Archiver', print: 'Imprimer'
-    };
-    return labels[action] || action;
-}
-
-function generateSampleRows(columns, count) {
-    var rows = [];
-    for (var i = 0; i < count; i++) {
-        var row = {};
-        columns.forEach(function(col) {
-            row[col.field] = generateSampleValue(col, i);
-        });
-        rows.push(row);
-    }
-    return rows;
-}
-
-function generateSampleValue(field, index) {
-    var idx = (index || 0) + 1;
-    var t = field.type || 'text';
-    var f = field.field || '';
-
-    if (field.options && field.options.length > 0) {
-        return field.options[idx % field.options.length];
-    }
-
-    if (t === 'date') return '0' + idx + '/03/2026';
-    if (t === 'badge' || t === 'select') return 'Actif';
-    if (t === 'lookup') return f.replace(/Id$/, '') + ' #' + idx;
-    if (t === 'number') return String(idx * 100);
-    if (t === 'checkbox') return idx % 2 === 0 ? 'Oui' : 'Non';
-
-    if (f.toLowerCase().includes('code')) return 'CODE-' + String(idx).padStart(3, '0');
-    if (f.toLowerCase().includes('name') || f.toLowerCase().includes('nom')) return 'Nom ' + idx;
-    if (f.toLowerCase().includes('email')) return 'user' + idx + '@example.com';
-    if (f.toLowerCase().includes('date')) return '0' + idx + '/03/2026';
-    if (f.toLowerCase().includes('status') || f.toLowerCase().includes('statut')) return 'Actif';
-
-    return f + ' ' + idx;
-}