feat(configurator): fence preview-only controls in Components (follow-up) - #699
Conversation
|
Warning Review limit reached
Next review available in: 59 minutes Limit details: You’ve used the included review currently available. You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?Wait for the limit to reset, then comment An organization admin can change what happens after included review limits in Billing. How do review limits work?CodeRabbit enforces per-developer PR review limits within each organization. For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
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 |
Greptile SummaryThe stacked PR substantially expands configurator navigation, token editing, import reporting, history handling, domain classification, and panel organization; its tip additionally fences Button and Card preview-only controls from exported token controls.
Confidence Score: 4/5The ValueField cancellation defect should be fixed before merging because pressing Escape can still apply the edit. The new ValueField synchronously blurs before its restored draft reaches the DOM, so the blur callback commits the stale edited value instead of cancelling it. Files Needing Attention: configurator/src/components/inputs/ValueField.svelte
|
| Filename | Overview |
|---|---|
| configurator/src/components/panels/ComponentsPanel.svelte | Clearly fences local Button and Card preview state from controls that mutate exported overrides. |
| configurator/src/components/inputs/ValueField.svelte | Adds mode-based token editing, but Escape can commit the draft it is intended to cancel. |
| configurator/src/App.svelte | Integrates import reporting, search deep links, and undo coalescing without another accepted defect. |
| configurator/src/lib/importOverrides.ts | Centralizes CSS and JSON parsing, sanitization, migration, and user-visible import reporting. |
| configurator/src/lib/domains.ts | Replaces overlapping substring classification with a shared namespace-based domain map. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart LR
Search[Command palette] --> Domain[Domain panel]
Domain --> Controls[Curated controls]
Domain --> Tokens[All tokens]
Controls --> PreviewSetup[Preview-only setup]
Controls --> Overrides[Exported overrides]
Tokens --> ValueField[Value / Expression editor]
ValueField --> Overrides
Overrides --> Preview[Live preview]
Overrides --> Export[Save / export]
Reviews (1): Last reviewed commit: "feat(configurator): fence preview-only c..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| onblur={(e) => { editing = false; commit((e.target as HTMLInputElement).value); }} | ||
| onkeydown={(e) => { | ||
| if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur(); | ||
| if (e.key === "Escape") { editing = false; draft = overrideValue ?? token.value ?? ""; (e.currentTarget as HTMLInputElement).blur(); } |
There was a problem hiding this comment.
When a user presses Escape after editing a Value or Expression, the handler resets draft and synchronously calls blur() before the restored state reaches the input. The blur handler therefore commits the stale edited DOM value through onSet, saving the override the user attempted to discard.
b2cd3af to
71756eb
Compare
… exported" The Components panel mixed two kinds of controls that look identical: the variant/style/size/state pickers (local preview state) and the real token sliders (exported overrides). A user couldn't tell which choices actually change their theme. Both button and card preview pickers are now wrapped in a dashed, labelled "Preview setup — not exported" band (eye icon), visually separated from the exported token controls (Base style / card tokens) below. No behaviour change — purely a clarity fence — so the live sample still updates from the pickers while the exported controls stay clearly distinct. check, lint, 285 unit tests and shell e2e pass; screenshot-verified the band on both Button and Card.
71756eb to
ec3868a
Compare
2 participants
Follow-up #3 — Components: separate preview-only from exported controls
The Components panel mixed two kinds of controls that looked identical: the variant / style / size / state pickers (local preview state only) and the real token sliders (exported overrides). A user couldn't tell which choices actually change their theme.
Change
Both the Button and Card preview pickers are now wrapped in a dashed, labelled "Preview setup — not exported" band (eye icon), visually separated from the exported token controls (Base style / card tokens) below. Purely a clarity fence — the live sample still updates from the pickers, and no override behaviour changes.
Verification
npm run check0 errors ·npm run lintcleannpm run test: 285/285 · shell e2e green