1// Optimize command demo - shows performance improvements
2export default {
3 id: 'optimize',
4 caption: 'Heavy, slow UI → Lightweight, performant',
5
6 before: `
7 <div style="width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 8px;">
8 <div style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
9 <div style="font-size: 11px; color: #999; margin-bottom: 4px;">BUNDLE SIZE</div>
10 <div style="height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
11 <div style="width: 95%; height: 100%; background: linear-gradient(90deg, #ff6b6b, #ee5a5a);"></div>
12 </div>
13 <div style="font-size: 12px; color: #ff6b6b; margin-top: 4px; font-weight: 600;">847 KB</div>
14 </div>
15 <div style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
16 <div style="font-size: 11px; color: #999; margin-bottom: 4px;">RENDER TIME</div>
17 <div style="height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
18 <div style="width: 80%; height: 100%; background: linear-gradient(90deg, #ffa726, #ff9800);"></div>
19 </div>
20 <div style="font-size: 12px; color: #ff9800; margin-top: 4px; font-weight: 600;">2.4s</div>
21 </div>
22 <div style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
23 <div style="font-size: 11px; color: #999; margin-bottom: 4px;">LAYOUT SHIFTS</div>
24 <div style="height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden;">
25 <div style="width: 60%; height: 100%; background: linear-gradient(90deg, #ffa726, #ff9800);"></div>
26 </div>
27 <div style="font-size: 12px; color: #ff9800; margin-top: 4px; font-weight: 600;">CLS: 0.18</div>
28 </div>
29 </div>
30 `,
31
32 after: `
33 <div style="width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 8px;">
34 <div style="padding: 12px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
35 <div style="font-size: 11px; color: var(--color-ash); margin-bottom: 4px;">BUNDLE SIZE</div>
36 <div style="height: 8px; background: var(--color-mist); border-radius: 4px; overflow: hidden;">
37 <div style="width: 25%; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a);"></div>
38 </div>
39 <div style="font-size: 12px; color: #22c55e; margin-top: 4px; font-weight: 600;">124 KB <span style="color: var(--color-ash); font-weight: 400;">(-85%)</span></div>
40 </div>
41 <div style="padding: 12px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
42 <div style="font-size: 11px; color: var(--color-ash); margin-bottom: 4px;">RENDER TIME</div>
43 <div style="height: 8px; background: var(--color-mist); border-radius: 4px; overflow: hidden;">
44 <div style="width: 15%; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a);"></div>
45 </div>
46 <div style="font-size: 12px; color: #22c55e; margin-top: 4px; font-weight: 600;">0.3s <span style="color: var(--color-ash); font-weight: 400;">(-88%)</span></div>
47 </div>
48 <div style="padding: 12px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px;">
49 <div style="font-size: 11px; color: var(--color-ash); margin-bottom: 4px;">LAYOUT SHIFTS</div>
50 <div style="height: 8px; background: var(--color-mist); border-radius: 4px; overflow: hidden;">
51 <div style="width: 5%; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a);"></div>
52 </div>
53 <div style="font-size: 12px; color: #22c55e; margin-top: 4px; font-weight: 600;">CLS: 0.02 <span style="color: var(--color-ash); font-weight: 400;">(excellent)</span></div>
54 </div>
55 </div>
56 `
57};