## 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
## Description
Adds the ability to replace an existing image asset with a new file
directly from the asset details panel, without having to delete and
re-upload manually. Related to [place an image so that it gets replaced
automatically everywhere its being used
#3268](https://github.com/webstudio-is/webstudio/issues/3268)
When clicking the new replace button on an image asset:
1. A file picker opens filtered to image MIME types
2. The new file is uploaded via the existing upload pipeline
3. All references to the old asset (props, styles, page meta: favicon,
social image, marketplace thumbnail) are atomically re-pointed to the
new asset
4. The old asset's filename and description are copied to the new asset
5. The old asset is deleted
A new `ReverseIcon` from the Figma library was added to the icons
package to represent the replace action.
## Steps for reproduction
1. Open the asset manager and select any image asset
2. In the asset details panel, click the new replace icon button next to
the download button
3. Select a new image file from the file picker
4. Expect the asset to be replaced in place - all usages (image props,
background styles, favicon, social image) should now reference the new
file with the original asset's filename 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
- [x] 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
## Description
1. Fix style panel label rendering for repeated `box-shadow` and
`text-shadow` items after hiding one layer.
When a shadow layer is hidden, it is omitted from serialized computed
CSS. The repeated-style helper was reparsing that computed value and
bailing out when the computed item count no longer matched the cascaded
item count, which caused all shadow row labels to lose their details
even though the CSS and edit dialogs remained correct.
This PR:
- preserves repeated-item index mapping when hidden layers compact the
computed value
- returns hidden parsed items for hidden rows so labels still have data
- makes shadow labels prefer the row's parsed shadow value before
falling back to computed data
- adds regression tests for hidden box-shadow and text-shadow layers
https://github.com/user-attachments/assets/bd25e302-fac1-4cea-8a4b-317cc5b448f7
## Steps for reproduction
1. Select an instance in the builder.
2. Add at least 3 `box-shadow` layers in the style panel.
3. Hide the first layer.
4. Observe that, before this fix, the labels collapse to partial values
like `Outer:`.
6. Repeat the same flow with at least 3 `text-shadow` layers.
7. With this PR, hidden and visible shadow rows keep their full labels.
## Code Review
- [ ] hi @kof, I need you to do
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [x] made a self-review
- [x] 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
## Description
Site is too narrow name for things that are pssible with webstudio
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
- Canvas behavior should be exactly as in Webflow now - responsive
canvas.
- No constraints for resizing, you can switch to different breakpoints
when you change the canvas width just like in preview
## Not done in this PR
- [ ] breakpoints dropdown menu redesign
- [ ] on-canvas resizable handles
- [ ] flash-animate breakpoints list when breakpoint is switched through
resize
- [ ] flash-animate left and right borders when breakpoint is switched
- [ ] gravity of resize handle dragging when reaching next breakpoint
- [ ] vertical labels with @media example that matches current
breakpoint
- [ ] migrate min-width 0 breakpoints to base?
- [ ] hide outline while changing size
- [ ] ensure there is never both min and max in one media
## Todo
- [x] draggable positioning calc
- [x] shortcuts for zoom
- [x] sync width and selected breakpoint
- [x] remove scale
- [x] fix mobile-first breakpoints
- [x] tabbable toolbar items
- [x] icon for base
- [x] fix flicker
- [x] After breakpoint delete/add CascadeIndicator doesn't refresh
- [x] fix when there is no base, min-width 0 should have still a full
width
## Steps for reproduction
1. click button
3. expect xyz
## Code Review
- [ ] hi @TrySound, @istarkov , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Shrek