Expand Preview Hub with gradients, spacing, borders, shadows, motion, effects sections - #397
Closed
jackgranatowski wants to merge 5 commits into
Closed
Expand Preview Hub with gradients, spacing, borders, shadows, motion, effects sections#397jackgranatowski wants to merge 5 commits into
jackgranatowski wants to merge 5 commits into
Conversation
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📝 WalkthroughWalkthroughAdds persisted fold state, new typography/border/layout editor components, a brand color shade strip, and new preview sections. DomainPanel now routes selected domains to those editors and removes the previous inline live preview. ChangesConfigurator domain editor expansion
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
CI Feedback 🧐A test triggered by this PR failed. Here is an AI-generated analysis of the failure:
|
PR Summary by QodoExpand Preview Hub with new token sections and specialized editors Description
Diagram
High-Level Assessment
Files changed (9)
|
…oldable generators Phase 1 — Foldable ScaleGenerator: - Add `collapsible` prop to ScaleGenerator; when true, starts collapsed and renders a chevron toggle button in the header. - DomainPanel passes `collapsible` to every ScaleGenerator instance. Phase 2 — Preview Hub with domain auto-sync: - Preview pane SECTIONS expanded from 7 → 13 tabs, one per framework domain: Overview · Colors · Gradients · Palette · Type · Spacing · Layout · Borders · Shadows · Motion · Effects · Macros · Tokens - $effect in Preview.svelte syncs activeSection to ui.domain on every domain-tab switch; users can still manually override the preview tab. Phase 3 — New preview sections with live token feedback: - Gradients: brand + directional fades + gradient-on-content hero card. - Spacing: full 2xs–3xl ruler, gap demos, section-pad demo. - Borders: radius ramp on real cards, border-color variants, focus-ring trio. - Shadows: elevation ramp, shadow on real cards, text/drop/glow/inner examples. - Motion: animation demos, duration sweep bars, easing sweep bars. - Effects: blur scale, opacity scale, scrim/overlay demo, frosted-glass panel. DX: inline DomainPreview cards removed — previews live exclusively in the right Preview Hub, which auto-syncs. Left panel is now purely editing controls. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Epa7UcqpdP8E7mcG9nHLWH
…rt section defaults - Add HeadingEditor.svelte: ACSS-style tabbed editor (All/H1-H6/Body/Mono) with live specimen preview and per-level token rows; replaces flat basicGroups for the Typography domain in DomainPanel - Add foldState.js: lightweight localStorage persistence for open/closed state keyed by section ID; survives page reloads without touching the Svelte store - Wire foldState into SmartSettings: sections default to closed and remember their state per domain (key: `domainId:sectionId`) - Wire foldState into ScaleGenerator: collapsed state persists across page loads (key: `generator:type/display/space`) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Epa7UcqpdP8E7mcG9nHLWH
… width bars - BrandColorRow: add 7-step inline shade strip below each brand color row, resolved live against the active preview theme using the probe host - RadiusEditor.svelte: ACSS-style tabbed radius editor (All + 2xs→full tabs) with a proportional shape specimen per level and a mini-map row for quick navigation; wired into the Borders domain in DomainPanel - ContainerBars.svelte: proportional bar chart for all --sf-container-* tokens showing relative widths with live px estimates; wired into the Layout domain in DomainPanel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Epa7UcqpdP8E7mcG9nHLWH
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Epa7UcqpdP8E7mcG9nHLWH
jackgranatowski
force-pushed
the
claude/friendly-goodall-9o6laj
branch
from
June 24, 2026 10:16
c27db03 to
f952d5a
Compare
Code Review by Qodo
Context used✅ Compliance rules (platform):
5 rules 1.
|
![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
🧹 Nitpick comments (3)
configurator/src/components/ScaleGenerator.svelte (1)
188-195: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRedundant
collapsibleguard inside the{#ifcollapsible}block.The toggle button only renders when
collapsibleis true, so the inlineif (collapsible)on Line 191 is always true. Harmless, but you can simplify.♻️ Simplify
- onclick={() => { open = !open; if (collapsible) setFold(foldKey, open); }} + onclick={() => { open = !open; setFold(foldKey, open); }}🤖 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/ScaleGenerator.svelte` around lines 188 - 195, The toggle handler in ScaleGenerator.svelte has a redundant collapsible check inside the existing {`#if` collapsible} block. Simplify the button’s onclick logic by removing the inner if and keeping the open toggle plus setFold(foldKey, open) call tied to the button that only renders when collapsible is true, using the gen__toggle control as the location to update.configurator/src/components/BrandColorRow.svelte (2)
82-92: 🚀 Performance & Scalability | 🔵 Trivial | ⚖️ Poor tradeoffPer-row probe measurement may cause layout thrashing.
Each
BrandColorRowinstance runs this effect and, in the microtask, callsmeasureBackground7 times — each invocation appends a probe element and readsgetComputedStyle().backgroundColor, forcing a style/layout flush. With core + extended + status rows rendered together, this is dozens of synchronous reflows on everyoverrides/previewThemechange. The probe host'scontain:strictbounds it somewhat andsetProbeContextis signature-cached, but the repeatedgetComputedStylereads are the hot path.Consider batching the measurement across rows (single shared effect that measures all visible color keys once) or debouncing/coalescing per change, rather than one effect-per-row.
🤖 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/BrandColorRow.svelte` around lines 82 - 92, The per-row measurement logic in BrandColorRow’s $effect is triggering too many synchronous style flushes by calling measureBackground repeatedly for every row and every shade. Refactor this so color probing is batched or coalesced across rows—ideally via a shared measurement path keyed by colorKey and ui.previewTheme rather than one queueMicrotask per component instance—while still updating setProbeContext and shadeColors from the shared result.
94-98: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
perceived()is unused dead code.This helper (and its
parseRgbimport) is defined but never referenced in the component. Either remove it, or wire it up if it was meant to drive something (e.g. picking a readable text/label color over each shade swatch, or ordering the ramp).Want me to remove it, or implement the intended usage (e.g. an accessible label overlay per swatch)?
🤖 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/BrandColorRow.svelte` around lines 94 - 98, The perceived() helper in BrandColorRow.svelte is currently unused dead code, along with its parseRgb import. Either remove perceived() and the unused import if it is not needed, or wire perceived() into the component’s rendering logic (for example in the swatch markup or ramp ordering) so it actually influences behavior, and ensure any related readable-label/text-color logic uses it consistently.
🤖 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/ContainerBars.svelte`:
- Line 52: The width calculation in ContainerBars.svelte treats unknown
container sizes as full width, which makes unmeasurable values look like the
largest bar. Update the pct logic in the ContainerBars rendering block so that
when row.px is null/undefined it uses a neutral fallback (for example, zero or a
distinct placeholder width) instead of 100, and keep the existing maxPx-based
scaling for measurable rows.
In `@configurator/src/components/HeadingEditor.svelte`:
- Around line 57-61: The modified indicator logic in tabHasOverride is
incomplete for the all tab, because it only checks GLOBAL_HEADING_TOKENS and
ignores overrides in BODY_TOKENS, MONO_TOKENS, and PER_LEVEL_TOKENS. Update the
all branch in HeadingEditor.svelte so it aggregates hasOverride across every
token group used by the other tabs, ensuring any Body, Mono, or heading-level
edit also marks “All” as modified. Use the existing tabHasOverride and
hasOverride helpers to keep the behavior consistent.
In `@configurator/src/components/RadiusEditor.svelte`:
- Around line 33-36: The tabHasOverride helper in RadiusEditor.svelte is only
checking GLOBAL_TOKENS for the all tab, so the “All” badge misses overrides that
exist on individual levels. Update tabHasOverride so the all branch also
considers the LEVELS entries (using hasOverride on each level.token) while
preserving the existing per-level lookup for specific tab ids.
In `@configurator/src/lib/foldState.js`:
- Around line 16-21: The fold state hydration in foldState.js can assign a
primitive value to _state when JSON.parse returns null, true, a number, or
another non-object, which later breaks getFold and setFold when they use the in
operator. Update the localStorage load path so that after parsing, _state is
only accepted if it is a plain object/map-like value; otherwise fall back to the
default state shape. Keep the fix localized to the fold state initialization and
preserve the existing getFold/setFold behavior by ensuring _state is always safe
for key checks.
---
Nitpick comments:
In `@configurator/src/components/BrandColorRow.svelte`:
- Around line 82-92: The per-row measurement logic in BrandColorRow’s $effect is
triggering too many synchronous style flushes by calling measureBackground
repeatedly for every row and every shade. Refactor this so color probing is
batched or coalesced across rows—ideally via a shared measurement path keyed by
colorKey and ui.previewTheme rather than one queueMicrotask per component
instance—while still updating setProbeContext and shadeColors from the shared
result.
- Around line 94-98: The perceived() helper in BrandColorRow.svelte is currently
unused dead code, along with its parseRgb import. Either remove perceived() and
the unused import if it is not needed, or wire perceived() into the component’s
rendering logic (for example in the swatch markup or ramp ordering) so it
actually influences behavior, and ensure any related readable-label/text-color
logic uses it consistently.
In `@configurator/src/components/ScaleGenerator.svelte`:
- Around line 188-195: The toggle handler in ScaleGenerator.svelte has a
redundant collapsible check inside the existing {`#if` collapsible} block.
Simplify the button’s onclick logic by removing the inner if and keeping the
open toggle plus setFold(foldKey, open) call tied to the button that only
renders when collapsible is true, using the gen__toggle control as the location
to update.
🪄 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: c939b53e-769c-4995-bc1e-8155f63eeb5b
📒 Files selected for processing (9)
configurator/src/components/BrandColorRow.svelteconfigurator/src/components/ContainerBars.svelteconfigurator/src/components/DomainPanel.svelteconfigurator/src/components/HeadingEditor.svelteconfigurator/src/components/Preview.svelteconfigurator/src/components/RadiusEditor.svelteconfigurator/src/components/ScaleGenerator.svelteconfigurator/src/components/SmartSettings.svelteconfigurator/src/lib/foldState.js
- foldState: guard localStorage parse result against non-object types - ScaleGenerator: remove redundant collapsible guard in toggle handler - HeadingEditor: include all token groups in 'all' tab override detection - RadiusEditor: include per-level tokens in 'all' tab override detection - ContainerBars: use 0 fallback pct for unmeasurable widths (not 100) - ContainerBars: remove unused imports from earlier Qodo cleanup - Preview: remove hardcoded duplicate full-radius item - BrandColorRow: remove unused perceived() helper and parseRgb import Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Epa7UcqpdP8E7mcG9nHLWH
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
There was a problem hiding this comment.
🧹 Nitpick comments (1)
configurator/src/components/BrandColorRow.svelte (1)
81-91: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winEvery row re-measures all 7 shades on any override change.
This effect depends on the entire
overridesmap, so editing any single token re-runs the effect for everyBrandColorRow. Each run does 7measureBackgroundcalls, and each call appends a probe and readsgetComputedStyle().backgroundColor, forcing a style/layout recalc. With several brand-color rows this is dozens of synchronous reflows per keystroke and can cause input jank.Consider debouncing the remeasure (e.g. coalesce across rapid edits) or scoping re-measurement to changes that can actually affect this row's variables.
🤖 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/BrandColorRow.svelte` around lines 81 - 91, The BrandColorRow $effect is re-running shade measurement for every override change, causing repeated synchronous reflows across all rows. Update the effect in BrandColorRow.svelte so it no longer reacts to the entire overrides map on every keystroke; instead, coalesce rapid updates with a debounce/microtask gate or narrow the dependency so only changes that affect this row’s colorKey actually trigger remeasurement. Keep the existing probe setup in setProbeContext and the shadeColors recomputation, but ensure measureBackground is not invoked redundantly for unrelated token edits.
🤖 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.
Nitpick comments:
In `@configurator/src/components/BrandColorRow.svelte`:
- Around line 81-91: The BrandColorRow $effect is re-running shade measurement
for every override change, causing repeated synchronous reflows across all rows.
Update the effect in BrandColorRow.svelte so it no longer reacts to the entire
overrides map on every keystroke; instead, coalesce rapid updates with a
debounce/microtask gate or narrow the dependency so only changes that affect
this row’s colorKey actually trigger remeasurement. Keep the existing probe
setup in setProbeContext and the shadeColors recomputation, but ensure
measureBackground is not invoked redundantly for unrelated token edits.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 38b5033b-fb2f-47d4-81fc-cdb5c2b18c5d
📒 Files selected for processing (9)
configurator/src/components/BrandColorRow.svelteconfigurator/src/components/ContainerBars.svelteconfigurator/src/components/DomainPanel.svelteconfigurator/src/components/HeadingEditor.svelteconfigurator/src/components/Preview.svelteconfigurator/src/components/RadiusEditor.svelteconfigurator/src/components/ScaleGenerator.svelteconfigurator/src/components/SmartSettings.svelteconfigurator/src/lib/foldState.js
🚧 Files skipped from review as they are similar to previous changes (8)
- configurator/src/components/SmartSettings.svelte
- configurator/src/components/HeadingEditor.svelte
- configurator/src/components/RadiusEditor.svelte
- configurator/src/lib/foldState.js
- configurator/src/components/Preview.svelte
- configurator/src/components/ScaleGenerator.svelte
- configurator/src/components/ContainerBars.svelte
- configurator/src/components/DomainPanel.svelte
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.
Summary
Significantly expands the Preview Hub (right panel) with six new design token showcase sections, plus three new specialized editor components for typography, border radius, and container widths. The preview now covers the full breadth of the design system, and the left panel's domain editors are streamlined to focus on controls rather than redundant previews.
Key Changes
Preview Hub Expansion
New Editor Components
Domain Panel Refactor
DomainPreviewcomponent andDOMAIN_PREVIEWSmappingDOMAIN_TO_SECTIONmapping in Preview.svelte, which auto-routes users to the relevant section when switching domainsNavigation & State
DOMAIN_TO_SECTIONmapping to auto-navigate Preview Hub when domain changes$effectto sync active section with current domaingetFold/setFoldfrom newfoldState.jsfor persistent collapse state on ScaleGeneratorBrandColorRow Enhancement
measureBackgroundandparseRgbutilitiesMinor Updates
collapsibleprop with fold-state persistenceImplementation Notes
setProbeContextto measure computed colors in the current themeui.previewMotionsetting (reduced motion support)tokenByName, override trackinghttps://claude.ai/code/session_01Epa7UcqpdP8E7mcG9nHLWH
Summary by CodeRabbit