mirror of
https://github.com/trycua/lume.git
synced 2026-02-15 10:49:42 -06:00
40e519d90a
* feat(playground): make TrajectoryViewer standalone with improved dark mode ## Changes ### Standalone Styling - Add `src/styles.css` with complete Tailwind configuration - Includes CSS variables for light/dark themes - Base styles for consistent appearance - Export styles.css from package for consumption ### Improved Dark Mode Detection - New `useDarkMode` hook that works standalone AND with parent themes - Checks for `.dark` class on document (parent app themes) - Falls back to system preference (prefers-color-scheme) - Uses MutationObserver to watch for theme changes ### TrajectoryViewer Updates - Import useDarkMode from hooks instead of inline implementation - Works out of the box without external ThemeProvider - Maintains compatibility with cloud app's theme system ### Build Configuration - Updated tsdown.config.ts to copy CSS file to dist - Added styles.css to package exports - Export useDarkMode hook for reuse ## Why The TrajectoryViewer had a visual regression when moved to the playground package because it lost access to the cloud app's ThemeProvider and CSS context. This makes the component truly standalone while maintaining integration with parent app themes. ## Test Plan - [x] Builds successfully with CSS copied to dist - [x] Dark mode works with parent app theme (.dark class) - [x] Dark mode falls back to system preference when standalone - [x] TrajectoryViewer layout and spacing matches original - [x] All Tailwind classes resolve correctly Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com> * style: fix prettier formatting in styles.css Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com> * fix linting issue for pnpm lockfile * fix formatting in json for lint --------- Co-authored-by: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>