Configurator UI improvements: foldable generators, fullscreen preview, a11y fixes, theme import/export - #337
Merged
jackgranatowski merged 2 commits intoJun 17, 2026
Conversation
|
Warning Review limit reached
More reviews will be available in 36 minutes and 31 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (7)
📝 WalkthroughWalkthroughAdds fullscreen mode to the Preview panel, converts ScaleGenerator into a collapsible panel, and introduces theme import/export to ThemeGallery backed by a new ChangesConfigurator UI Improvements
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@configurator/src/components/Preview.svelte`:
- Around line 20-30: The fullscreen state tracking and toggle function need two
fixes. First, in the fullscreen change event handler, modify the condition to
specifically check if previewEl is the fullscreen element rather than checking
if any document element is fullscreen, so the state accurately reflects only
this component's element. Second, in the toggleFullscreen function, the calls to
requestFullscreen() and exitFullscreen() return Promises that can reject due to
permission denied or document inactive states, so add error handling (via
.catch() or await with try-catch) to both calls to prevent unhandled promise
rejections and keep the button state in sync.
In `@configurator/src/components/ScaleGenerator.svelte`:
- Around line 172-177: The button element with class "gen__toggle" is missing an
explicit type attribute, which can cause accidental form submission if rendered
inside a form context. Add type="button" to the button element to explicitly
specify that it is a toggle button and not a form submit button.
In `@configurator/src/components/ThemeGallery.svelte`:
- Around line 90-105: The FileReader object in the theme import logic is missing
error handling. Add an onerror handler to the FileReader instance (after setting
the onload handler but before calling readAsText) that sets the importError
variable with an appropriate error message when file read operations fail due to
permissions, corruption, or other I/O issues. This ensures users receive
feedback if the file cannot be read successfully.
- Around line 92-97: The validation for the imported theme data in the
JSON.parse block checks whether data.overrides exists but does not validate that
it is specifically an object type. Add an additional type check to ensure
data.overrides is an object (and not a string, array, or other truthy value)
before proceeding with the import. Update the condition to include typeof
data.overrides !== 'object' or a similar guard that rejects non-object values,
so that malformed files with overrides containing strings or arrays are properly
rejected with the import error.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 130c98d7-487f-4fcb-a262-6caf277a8166
📒 Files selected for processing (5)
configurator/src/components/Preview.svelteconfigurator/src/components/ScaleGenerator.svelteconfigurator/src/components/ThemeGallery.svelteconfigurator/src/components/WcagPanel.svelteconfigurator/src/lib/store.svelte.js
…heme import/export Scale generators: - Wrap in a collapsible toggle (starts closed); shows ramp kind in header - Add type="button" to prevent accidental form submission Live preview: - Fullscreen button using the Fullscreen API (scoped to previewEl, async with try/catch so denials don't leave the button in a broken state) Accessibility panel: - Fix danger chip text invisible when --sf-color-text--on-danger doesn't resolve: add var(token, #fff) fallback - Stack FG/BG dropdowns vertically to remove wasted space above them Theme gallery: - Export any preset or saved theme as a JSON file (includes frameworkVersion) - Import theme from JSON file; saved to user slots without touching overrides - Surface version mismatch on import when frameworkVersion differs - Show skipped token count in Apply feedback (e.g. "Applied 6 · 2 skipped ✓") - Extend feedback timeout to 4s when tokens are skipped - FileReader onerror handler for I/O failures - Strict overrides validation (rejects strings, arrays, null) Store: - Add saveImportedTheme() to persist an externally-provided theme object without clobbering the active overrides https://claude.ai/code/session_014a3HFjjrHwA3Q3FoU6YvvK
jackgranatowski
force-pushed
the
claude/configurator-ui-improvements-moetex
branch
from
June 16, 2026 20:25
f53d045 to
ad43125
Compare
…trols ScaleGenerator now starts collapsed (isOpen = false), so e2e tests that directly access .ctl / .scales__actions elements need to click .gen__toggle first. Add the toggle click to every affected test in generator.spec.js and undo-redo.spec.js. https://claude.ai/code/session_014a3HFjjrHwA3Q3FoU6YvvK
This was referenced Jun 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ScaleGenerator: wrap content in a collapsible toggle (starts closed) so
multiple scale generators don't eat vertical space; shows ramp kind label
in the collapsed header
Preview: add a fullscreen button (⤢/⤡) using the Fullscreen API so the
live preview isn't constrained to the split-pane max-width
WcagPanel: fix danger chip text being invisible by adding a #fff CSS
fallback when the on-color token doesn't resolve; change FG/BG pair
checker from a row to a column layout to remove wasted space above the
dropdowns
ThemeGallery: add Export button to every preset and saved theme (downloads
a JSON file); add Import theme button in the header (file picker for JSON);
wire up a new saveImportedTheme() store function so imported themes land in
the saved-themes list without clobbering current overrides
https://claude.ai/code/session_014a3HFjjrHwA3Q3FoU6YvvK
Summary by CodeRabbit
New Features
Improvements