Introduce Studio framework for domain editors; add token-name toggle and related refactors - #413
Merged
jackgranatowski merged 4 commits intoJun 25, 2026
Conversation
|
Warning Review limit reached
More reviews will be available in 57 minutes and 12 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 (1)
📝 WalkthroughWalkthroughThe configurator adds a persisted ChangesConfigurator UI refresh
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 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 |
PR Summary by QodoUnify domain editors under StudioFrame; add global token-name visibility toggle Description
Diagram
High-Level Assessment
Files changed (25)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
5 rules 1. Overflow clipping returns in cards
|
The PR folded gradients into the colors domain by adding a `colors` entry to DOMAIN_PREVIEWS, so rendering with domain='colors' now produces a .dp element. Switch the "renders nothing" test to use 'misc', which has no preview spec and never will. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
configurator/src/components/editors/EffectsStudio.svelte (1)
6-6: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoffExtract the duplicated
panel()helper into a shared module.This exact
panel(label, description, tokens)builder is repeated verbatim inEffectsStudio,LayoutStudio,MotionStudio,ShadowStudio, andShapeStudio. Hoisting it (e.g. intolib/model.jsor astudioPanels.jshelper) removes five copies and keeps the panel→token mapping contract in one place.🤖 Prompt for 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. In `@configurator/src/components/editors/EffectsStudio.svelte` at line 6, Extract the duplicated panel(label, description, tokens) builder into a shared helper module and update EffectsStudio to import and use it instead of defining its own local version. Centralize the panel-to-token mapping logic in the shared helper so the same contract is reused by LayoutStudio, MotionStudio, ShadowStudio, and ShapeStudio, and ensure the helper still maps token names through tokenByName and filters missing entries.
🤖 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/lib/domainSettings.js`:
- Around line 32-38: The e2e navigation target for the retired Gradients domain
is stale and now points to a Sidebar item that no longer exists. Update the
navigation selectors and expectations in a11y.spec.js, shell.spec.js, and
domain-preview.spec.js by replacing sideItem(page, 'Gradients') / NAV_LABELS
entries with Colors, or route the checks through the Colors panel if you still
need to verify gradient-related UI. Also adjust any viewGradients helper or
related test navigation logic so it targets the gradient tab inside the Colors
domain rather than a top-level Gradients domain.
---
Nitpick comments:
In `@configurator/src/components/editors/EffectsStudio.svelte`:
- Line 6: Extract the duplicated panel(label, description, tokens) builder into
a shared helper module and update EffectsStudio to import and use it instead of
defining its own local version. Centralize the panel-to-token mapping logic in
the shared helper so the same contract is reused by LayoutStudio, MotionStudio,
ShadowStudio, and ShapeStudio, and ensure the helper still maps token names
through tokenByName and filters missing entries.
🪄 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: 611facd6-bd22-4fa8-a263-fe95ff75d23a
📒 Files selected for processing (27)
configurator/src/App.svelteconfigurator/src/components/ControlSection.svelteconfigurator/src/components/DomainPanel.svelteconfigurator/src/components/Header.svelteconfigurator/src/components/Preview.svelteconfigurator/src/components/ShadeRamp.svelteconfigurator/src/components/editors/ColorStudio.svelteconfigurator/src/components/editors/EffectsStudio.svelteconfigurator/src/components/editors/LayoutStudio.svelteconfigurator/src/components/editors/MotionStudio.svelteconfigurator/src/components/editors/ShadowStudio.svelteconfigurator/src/components/editors/ShapeStudio.svelteconfigurator/src/components/editors/SpacingStudio.svelteconfigurator/src/components/editors/StudioControls.svelteconfigurator/src/components/editors/StudioFrame.svelteconfigurator/src/components/editors/StudioWorkflow.svelteconfigurator/src/components/editors/TypographyStudio.svelteconfigurator/src/lib/domainPreviews.jsconfigurator/src/lib/domainSettings.jsconfigurator/src/lib/domains.jsconfigurator/src/lib/store.svelte.jsconfigurator/src/lib/uiState.jsconfigurator/tests-components/domain-preview.test.jsconfigurator/tests-components/studios.test.jsconfigurator/tests/domain-settings.test.jsconfigurator/tests/domains.test.jsconfigurator/tests/smoke.test.js
💤 Files with no reviewable changes (3)
- configurator/src/components/editors/StudioWorkflow.svelte
- configurator/tests/smoke.test.js
- configurator/src/components/Preview.svelte
- DomainPanel: render QuickKnobs and StylePresetRow before Studio component so preset buttons and scaling knobs remain accessible for studio domains (Borders, Shadows, Spacing, etc.) - shell/a11y: remove Gradients from NAV_LABELS (merged into Colors Studio); update Colors panel assertion to check .color-studio instead of .panel__card - a11y: navigate to Colors → Gradients studio tab instead of removed Gradients domain - domain-preview: remove Gradients entry from SECTION_BY_DOMAIN routing table - generator/undo-redo: click Scale tab before accessing .gen in TypographyStudio (the generator is only rendered when the Scale panel is active) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…caleGenerator TypographyStudio renders a single ScaleGenerator with kinds=['type','display'], so there is one .gen element with an internal seg-button switcher rather than two separate .gen elements. Switch to the Display kind via .seg__btn before asserting the disabled ratio selects. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This was referenced Jun 26, 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.
Motivation
Description
StudioFramecomponent and new panel-driven Studio UIs for Color, Typography, Spacing, Layout, Shape, Shadow, Motion and Effects editors, replacing the old workflow bits andStudioWorkflowcomponent; editors now supplypanelsand render controls via the Studio API.StudioControlsto render group tokens; deleteStudioWorkflow.svelteand update editor UIs accordingly.ui.showTokensstate with persistence (store.svelte.js,uiState.js,App.svelte) and a header button to toggle token-name visibility;StudioControlsand Friendly controls respond to the setting.domains.js,domainPreviews.js,domainSettings.js) and token mapping to reflect gradient tokens as part of colors.colorKeyandshowIntroprops, computed shade metrics, and a small metrics table for lightness/chroma.overflow:clip/hiddenin control container styles and updateControlSectionCSS so panels do not clip control content; updateStudioFramelayout to avoid control clipping.showTokenstoggle, and add new smoke / behavior checks around Studio frame overflow and token-name visibility.Testing
tests-components/studios.test.js) and verified each Studio mounts and renders expected panels and controls, the Studio frame overflow behaviour check, and token visibility toggling; all tests passed.tests/domain-settings.test.js) to assert smart setting coverage and kinds, which passed after updating gradients mapping.tests/domains.test.js,tests/smoke.test.js) with updated token mappings (gradients now under colors) and confirmed the smoke edit set and domain classification tests passed.Codex Task
Summary by CodeRabbit