@atlashub/smartstack-cli 4.61.0 → 4.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlashub/smartstack-cli",
-  "version": "4.61.0",
+  "version": "4.63.0",
   "description": "SmartStack Claude Code automation toolkit - GitFlow, EF Core migrations, prompts and more",
   "author": {
     "name": "SmartStack",

package/templates/skills/business-analyse-html/html/ba-interactive.html

@@ -1367,15 +1367,6 @@ body {
 }
 .mock-kpi-value { font-size: 1.3rem; font-weight: 700; color: var(--text-bright); }
 .mock-kpi-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
-.mock-chart-placeholder {
-    height: 150px;
-    background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(6,182,212,0.05));
-    border: 1px dashed var(--border);
-    border-radius: 8px;
-    display: flex; align-items: center; justify-content: center;
-    color: var(--text-muted); font-size: 0.85rem;
-}
-
 @media (max-width: 768px) {
     .mock-kpi-grid { grid-template-columns: repeat(2, 1fr); }
 }
@@ -1949,6 +1940,90 @@ body {
     padding: 0.15rem 0.5rem;
     border-radius: 4px;
 }
+
+/* ---- Mock Charts (SVG previews) ---- */
+.mock-chart-container {
+    margin: 0.75rem 0;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.mock-chart-header {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-bright);
+    background: var(--bg-hover);
+    border-bottom: 1px solid var(--border);
+}
+
+.mock-chart-body {
+    padding: 1rem;
+}
+
+.mock-pie-svg {
+    width: 120px;
+    height: 120px;
+    flex-shrink: 0;
+}
+
+.mock-bar-svg,
+.mock-line-svg {
+    width: 100%;
+    height: 140px;
+}
+
+.mock-chart-legend {
+    font-size: 0.8rem;
+    color: var(--text);
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.mock-legend-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    margin-right: 0.4rem;
+    vertical-align: middle;
+}
+
+/* ---- Form Tab Switching ---- */
+.mock-form-tab-bar {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 1.5rem;
+}
+
+.mock-form-tab {
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    color: var(--text-muted);
+    transition: all var(--transition-fast);
+}
+
+.mock-form-tab:hover {
+    color: var(--text);
+}
+
+.mock-form-tab.active {
+    border-bottom-color: var(--primary);
+    color: var(--primary-light);
+}
+
+.mock-form-tab-content {
+    display: none;
+}
+
+.mock-form-tab-content.active {
+    display: block;
+}
 
     </style>
 </head>
@@ -4078,16 +4153,12 @@ function renderModuleMockups(code) {
         return typeof s === 'string' ? { code: s, name: s, resources: [] } : s;
     }) : [];
 
-    // Priority 1: HTML mockups from screens[] specs
+    // Priority 1: HTML mockups from screens[] specs (wireframes NOT shown when screens exist)
     if (screens.length > 0) {
         var html = '';
         if (typeof renderScreenMockups === 'function') {
             html = renderScreenMockups(code);
         }
-        if (wireframes.length > 0) {
-            html += '<h3 style="color:var(--text-bright);font-size:1rem;margin:2rem 0 1rem;">Wireframes</h3>';
-            html += wireframes.map(function(wf, i) { return renderWireframeMockup(code, wf, i); }).join('');
-        }
         return html;
     }
 
@@ -4363,6 +4434,8 @@ function renderE2EFlows() {
    Generates realistic HTML mockups from screens[] specs
    ============================================ */
 
+var _formTabCounter = 0;
+
 function renderScreenMockups(code) {
     var spec = data.moduleSpecs[code] || {};
     var screens = spec.screens || [];
@@ -4522,6 +4595,7 @@ function renderSmartFormMockup(res) {
     }
     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
@@ -4534,37 +4608,51 @@ function renderSmartFormMockup(res) {
     });
     html += '</div></div>';
 
-    // Tabs
+    // Tabs (clickable when more than 1)
     if (tabs.length > 1) {
-        html += '<div style="display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.5rem;">';
+        html += '<div class="mock-form-tab-bar" data-mockup="' + mockupId + '">';
         tabs.forEach(function(tab, i) {
-            html += '<span style="padding:0.5rem 1rem;font-size:0.85rem;cursor:pointer;border-bottom:2px solid ' + (i === 0 ? 'var(--primary)' : 'transparent') + ';color:' + (i === 0 ? 'var(--primary-light)' : 'var(--text-muted)') + ';">' + escapeHtml(tab.label) + '</span>';
+            html += '<span class="mock-form-tab' + (i === 0 ? ' active' : '') + '"';
+            html += ' onclick="switchFormTab(\'' + mockupId + '\', ' + i + ')"';
+            html += '>' + escapeHtml(tab.label) + '</span>';
         });
         html += '</div>';
     }
 
-    // Fields (first tab only)
-    var fields = tabs[0].fields || [];
-    var rows = [];
-    for (var i = 0; i < fields.length; i += 2) {
-        rows.push(fields.slice(i, i + 2));
-    }
+    // 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 + '">';
 
-    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);
+        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>';
-            });
-            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;
@@ -4668,10 +4756,10 @@ function renderSmartDashboardMockup(res) {
     });
     html += '</div>';
 
-    // Chart placeholders
-    var charts = res.charts || [{ label: 'Graphique' }];
+    // Charts (SVG mock previews)
+    var charts = res.charts || [{ label: 'Graphique', type: 'bar' }];
     charts.forEach(function(chart) {
-        html += '<div class="mock-chart-placeholder">' + escapeHtml(chart.label || chart.type || 'Graphique') + '</div>';
+        html += renderMockChart(chart);
     });
 
     return html;
@@ -4712,6 +4800,96 @@ function renderSmartFilterMockup(res) {
     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 = {

package/templates/skills/business-analyse-html/html/src/scripts/05-render-specs.js

@@ -721,16 +721,12 @@ function renderModuleMockups(code) {
         return typeof s === 'string' ? { code: s, name: s, resources: [] } : s;
     }) : [];
 
-    // Priority 1: HTML mockups from screens[] specs
+    // Priority 1: HTML mockups from screens[] specs (wireframes NOT shown when screens exist)
     if (screens.length > 0) {
         var html = '';
         if (typeof renderScreenMockups === 'function') {
             html = renderScreenMockups(code);
         }
-        if (wireframes.length > 0) {
-            html += '<h3 style="color:var(--text-bright);font-size:1rem;margin:2rem 0 1rem;">Wireframes</h3>';
-            html += wireframes.map(function(wf, i) { return renderWireframeMockup(code, wf, i); }).join('');
-        }
         return html;
     }
 

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

@@ -3,6 +3,8 @@
    Generates realistic HTML mockups from screens[] specs
    ============================================ */
 
+var _formTabCounter = 0;
+
 function renderScreenMockups(code) {
     var spec = data.moduleSpecs[code] || {};
     var screens = spec.screens || [];
@@ -162,6 +164,7 @@ function renderSmartFormMockup(res) {
     }
     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
@@ -174,37 +177,51 @@ function renderSmartFormMockup(res) {
     });
     html += '</div></div>';
 
-    // Tabs
+    // Tabs (clickable when more than 1)
     if (tabs.length > 1) {
-        html += '<div style="display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.5rem;">';
+        html += '<div class="mock-form-tab-bar" data-mockup="' + mockupId + '">';
         tabs.forEach(function(tab, i) {
-            html += '<span style="padding:0.5rem 1rem;font-size:0.85rem;cursor:pointer;border-bottom:2px solid ' + (i === 0 ? 'var(--primary)' : 'transparent') + ';color:' + (i === 0 ? 'var(--primary-light)' : 'var(--text-muted)') + ';">' + escapeHtml(tab.label) + '</span>';
+            html += '<span class="mock-form-tab' + (i === 0 ? ' active' : '') + '"';
+            html += ' onclick="switchFormTab(\'' + mockupId + '\', ' + i + ')"';
+            html += '>' + escapeHtml(tab.label) + '</span>';
         });
         html += '</div>';
     }
 
-    // Fields (first tab only)
-    var fields = tabs[0].fields || [];
-    var rows = [];
-    for (var i = 0; i < fields.length; i += 2) {
-        rows.push(fields.slice(i, i + 2));
-    }
+    // 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 + '">';
+
+        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);
+        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>';
-            });
-            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;
@@ -308,10 +325,10 @@ function renderSmartDashboardMockup(res) {
     });
     html += '</div>';
 
-    // Chart placeholders
-    var charts = res.charts || [{ label: 'Graphique' }];
+    // Charts (SVG mock previews)
+    var charts = res.charts || [{ label: 'Graphique', type: 'bar' }];
     charts.forEach(function(chart) {
-        html += '<div class="mock-chart-placeholder">' + escapeHtml(chart.label || chart.type || 'Graphique') + '</div>';
+        html += renderMockChart(chart);
     });
 
     return html;
@@ -352,6 +369,96 @@ function renderSmartFilterMockup(res) {
     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 = {

package/templates/skills/business-analyse-html/html/src/styles/06-wireframes.css

@@ -258,15 +258,6 @@
 }
 .mock-kpi-value { font-size: 1.3rem; font-weight: 700; color: var(--text-bright); }
 .mock-kpi-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
-.mock-chart-placeholder {
-    height: 150px;
-    background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(6,182,212,0.05));
-    border: 1px dashed var(--border);
-    border-radius: 8px;
-    display: flex; align-items: center; justify-content: center;
-    color: var(--text-muted); font-size: 0.85rem;
-}
-
 @media (max-width: 768px) {
     .mock-kpi-grid { grid-template-columns: repeat(2, 1fr); }
 }

package/templates/skills/business-analyse-html/html/src/styles/09-mockups-html.css

@@ -134,3 +134,87 @@
     padding: 0.15rem 0.5rem;
     border-radius: 4px;
 }
+
+/* ---- Mock Charts (SVG previews) ---- */
+.mock-chart-container {
+    margin: 0.75rem 0;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.mock-chart-header {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-bright);
+    background: var(--bg-hover);
+    border-bottom: 1px solid var(--border);
+}
+
+.mock-chart-body {
+    padding: 1rem;
+}
+
+.mock-pie-svg {
+    width: 120px;
+    height: 120px;
+    flex-shrink: 0;
+}
+
+.mock-bar-svg,
+.mock-line-svg {
+    width: 100%;
+    height: 140px;
+}
+
+.mock-chart-legend {
+    font-size: 0.8rem;
+    color: var(--text);
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.mock-legend-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    margin-right: 0.4rem;
+    vertical-align: middle;
+}
+
+/* ---- Form Tab Switching ---- */
+.mock-form-tab-bar {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 1.5rem;
+}
+
+.mock-form-tab {
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    color: var(--text-muted);
+    transition: all var(--transition-fast);
+}
+
+.mock-form-tab:hover {
+    color: var(--text);
+}
+
+.mock-form-tab.active {
+    border-bottom-color: var(--primary);
+    color: var(--primary-light);
+}
+
+.mock-form-tab-content {
+    display: none;
+}
+
+.mock-form-tab-content.active {
+    display: block;
+}