1// Distill command demo - shows cluttered UI becoming minimal
2export default {
3 id: 'distill',
4 caption: 'Cluttered interface → Essential elements only',
5
6 before: `
7 <div style="width: 100%; max-width: 280px; padding: 12px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px;">
8 <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #ddd;">
9 <span style="font-size: 12px; color: #666;">Dashboard</span>
10 <div style="display: flex; gap: 4px;">
11 <button style="padding: 2px 6px; font-size: 10px; background: #e0e0e0; border: none; border-radius: 2px;">⚙️</button>
12 <button style="padding: 2px 6px; font-size: 10px; background: #e0e0e0; border: none; border-radius: 2px;">🔔</button>
13 <button style="padding: 2px 6px; font-size: 10px; background: #e0e0e0; border: none; border-radius: 2px;">❓</button>
14 <button style="padding: 2px 6px; font-size: 10px; background: #e0e0e0; border: none; border-radius: 2px;">⋮</button>
15 </div>
16 </div>
17 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
18 <div style="padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; color: #666;">Revenue<br><b>$12,345</b></div>
19 <div style="padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; color: #666;">Users<br><b>1,234</b></div>
20 <div style="padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; color: #666;">Growth<br><b>+12%</b></div>
21 <div style="padding: 8px; background: white; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10px; color: #666;">Bounce<br><b>32%</b></div>
22 </div>
23 <div style="margin-top: 8px; padding: 8px; background: #e3f2fd; border-radius: 4px; font-size: 10px; color: #1976d2;">📊 View detailed analytics →</div>
24 <div style="margin-top: 4px; padding: 8px; background: #fff3e0; border-radius: 4px; font-size: 10px; color: #e65100;">🎯 Set up goals →</div>
25 </div>
26 `,
27
28 after: `
29 <div style="width: 100%; max-width: 260px; padding: 20px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 8px;">
30 <div style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ash); margin-bottom: 16px;">This Month</div>
31 <div style="margin-bottom: 20px;">
32 <div style="font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; color: var(--color-ink); line-height: 1;">$12,345</div>
33 <div style="font-size: 0.8125rem; color: #22c55e; margin-top: 4px;">↑ 12% from last month</div>
34 </div>
35 <div style="display: flex; gap: 24px;">
36 <div>
37 <div style="font-size: 1.25rem; font-weight: 500; color: var(--color-ink);">1,234</div>
38 <div style="font-size: 0.6875rem; color: var(--color-ash);">Active users</div>
39 </div>
40 <div>
41 <div style="font-size: 1.25rem; font-weight: 500; color: var(--color-ink);">68%</div>
42 <div style="font-size: 0.6875rem; color: var(--color-ash);">Retention</div>
43 </div>
44 </div>
45 </div>
46 `
47};