colorjs uses internal short names (p3, a98rgb, prophoto) that don't
match the CSS predefined color space identifiers required by the spec:
- p3 → display-p3
- a98rgb → a98-rgb
- prophoto → prophoto-rgb
This caused toValue() to emit invalid CSS like `color(p3 ...)`, which
the css-tree lexer rejects when re-validating the value in the CSS value
input (e.g. after a round-trip through the style panel).
Instead of suppressing the banner with a fragile setTimeout + delayed refetch
(which can't predict Stripe webhook timing), optimistically bump the maxSeats
count on the client when extra seats are purchased. The banner never flashes
because the seat arithmetic already accounts for the purchase. The boost
resets when the dialog is re-opened.
## Description
1. Related to #5501. This lets user escape exit preview mode when
triggered from the builder UI, while preserving canvas-originated escape
behavior so preview mode remains active when the canvas should handle
the key event.
## Steps for reproduction
1. Open the builder and switch to preview mode.
2. Press Escape from the builder UI.
3. Expect preview mode to exit and the sidebar panel to return to auto.
4. Switch to preview mode again.
5. Press Escape while the focused inside the canvas.
6. Expect preview mode to stay active and canvas/native page behavior to
be preserved.
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [x] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
0000)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env` file