feat: theme UI inspector and preview panel

[royendo]

Checklist:

• Covered by tests
• Ran it and it works as intended
• Reviewed the diff before requesting a review
• Checked for unhandled edge cases
• Linked the issues it closes
• Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
• Intend to cherry-pick into the release branch
• I'm proud of this work!

[royendo]

[royendo]

Code Review

Professionalism & Code Quality: ⭐⭐⭐⭐ (Good)

Strengths:

• Beautiful preview components with KPI, leaderboard, bar chart, and heatmaps
• Clean color palette handling for sequential, diverging, and qualitative colors
• Good use of ThemeProvider for CSS variable injection

Issues to Address:

1. Duplicate code - ColorSchemePreviewPanel.svelte and ThemePreviewInspector.svelte share ~80% identical code for color extraction. Consider extracting to a shared utility.

2. Magic numbers in PreviewComponents.svelte:

   const width = 10000;
   const height = 100;

   These should be named constants with comments explaining their purpose.

3. Hardcoded fallback colors in ColorSchemePreviewPanel.svelte:52-55:

   $: backgroundColor = currentModeYaml["background"] || 
       (previewMode === "light" ? "#f9fafb" : "#111827");

   Consider using CSS variables as fallbacks for consistency.

E2E Testing: ⚠️ Missing

No E2E tests for theme editing.

Recommendations:

• Add E2E test for theme preview panel toggle
• Test light/dark mode switching in preview
• Test color picker functionality

General Comments:

• Excellent visualization work with the preview components
• The Theme class integration with parseDocument from yaml is well done
• Consider lazy-loading the preview panel for performance