feat(configurator): rework Color Studio panels and add per-color ShadeRamp metrics - #409
Closed
jackgranatowski wants to merge 1 commit into
Closed
Conversation
|
Warning Review limit reached
More reviews will be available in 28 minutes and 52 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 To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. 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 (3)
✨ 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 |
PR Summary by QodoRework Color Studio into panel-based UI with per-color ShadeRamp metrics Description
Diagram
High-Level Assessment
Files changed (3)
|
CI Feedback 🧐A test triggered by this PR failed. Here is an AI-generated analysis of the failure:
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
5 rules 1. ShadeRamp stale on colorKey
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
Comment on lines
+18
to
24
| let { colorKey = null, showIntro = true } = $props(); | ||
|
|
||
| const BRAND_KEYS = BRAND_COLOR_KEYS.filter((k) => k.group === 'brand'); | ||
| const visibleBrandKeys = $derived(colorKey ? BRAND_KEYS.filter((k) => k.key === colorKey) : BRAND_KEYS); | ||
|
|
||
| const SHADE_STEPS = [ | ||
| { suffix: '-superlight', label: 'superlight' }, |
There was a problem hiding this comment.
1. Shaderamp stale on colorkey 🐞 Bug ≡ Correctness
ShadeRamp.svelte now derives ALL_SHADE_TOKENS from the new colorKey prop, but the measuring $effect does not establish a reactive dependency on that derived value because it’s only read inside queueMicrotask. As a result, changing colorKey can leave resolved computed for the previous token set and the UI can stay in the “resolving…” state for the newly selected family until some other dependency changes.
Agent Prompt
### Issue description
`ALL_SHADE_TOKENS` is now `$derived(...)` from `colorKey`, but the `$effect` that measures swatches never reads `ALL_SHADE_TOKENS` synchronously, so changes to `colorKey` won’t retrigger the measuring work.
### Issue Context
The effect schedules work with `queueMicrotask`, and the only read of `ALL_SHADE_TOKENS` happens inside that callback, which does not participate in Svelte’s dependency tracking.
### Fix Focus Areas
- configurator/src/components/ShadeRamp.svelte[18-56]
### Suggested fix
Inside the `$effect`, read `ALL_SHADE_TOKENS` before scheduling the microtask (e.g. `const tokens = ALL_SHADE_TOKENS;`) and iterate `tokens` inside the microtask. This both (a) establishes reactivity on `colorKey`/`visibleBrandKeys` changes and (b) measures a stable snapshot of the token list for that effect run.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
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
1 participant
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.
Motivation
Description
ColorStudio.sveltewithactivePanel = 'main-colors'and per-color selectionactiveColor = 'primary'and implemented the left/top studio nav listing the requested panels.ColorStudio.sveltethat listsPrimary,Secondary,Tertiary,Accent/Action,Base,Neutralwith toggle/chevron, swatch and expandable per-color content that mountsBrandColorRowandShadeRamp.GradientsandShade curvepanels respectively by readingsmartSettingsForand rendering those controls insideColorStudio.svelte.ShadeRamp.svelteto acceptcolorKeyandshowIntroprops, support rendering a single color family, and add aShade / Lightness / Chromatable computed from measured swatch colors.ColorAssignmentsinto theAssignmentspanel and left only theAll variablesdisclosure below studios by suppressingSmartSettingsfor thecolorsandgradientsdomains inDomainPanel.svelte.stageStyle,paletteCurve,gradientBuilder, token helpers) and supporting styles for the new UI pieces.Testing
npm --prefix configurator run check(Svelte diagnostics) which completed successfully with the existing, non-blocking warnings reported.npm --prefix configurator run build(Vite production build) which completed successfully though the build emitted the existing Svelte deprecation/state-capture and chunk-size warnings.403preventing Playwright from downloading browsers, so the visual snapshot step did not complete.Codex Task