## Description
fixes#2967
This will save the content when the content box is blur. This will wrap
up all the things that we need to handle under the #2967 issue.
## Steps for reproduction
- Add a layer to any of the `shadow` or `filter` properties.
- Now, edit the values using the content box and click somewhere else on
the panel.
- This should save the values once the box looses focus.
## 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
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
Main reason is github sends tags in alphabetical order so changelog
generated from very old accidental tag like `diff` from mistyped `gt
diff` command.
I dropped all such tags. Though semver is another thing which can
guarantee correct tag lookup. Let's try this for next release.
Ref https://github.com/webstudio-is/webstudio/issues/2647
- flex -> flex-grow, flex-shrink, flex-basis
- flex-flow -> flex-direction, flex-wrap
Also slightly flatten shorthand extractors
to make it more straightforward.
## Description
Show full label for the `CSSValueListItem` and display `show/hide` icons
only when users hover over the layer. Or when the users focuses the item
with keys.
## Steps for reproduction
1. Create a new layer under any of the properties which has layers
2. add some values so that the labels are big enough to test it.
3. Hover over the layer with mouse or focus it using keyboard.
4. The label should display the full name in normal and truncate the
label and show the `show/hide` icons.

## 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
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
Closes https://github.com/webstudio-is/webstudio/issues/3529
## Description
Values that can have custom identifiers (user defined string) were
tested to accept a unit value and they did, because anything is valid.
Now they are not tested with units any more
## Steps for reproduction
1. add animation-name in advanced panel
2. use any name it should stay as-is
3. previously we would add a "px"
## 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
- [ ] 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` file
Ref https://github.com/webstudio-is/webstudio/issues/2647
Added support for 3 shorthand properties
- font
- text-decoration
- text-emphasis
white-space and text-wrap left untouched caz expanded versions have
worse support and even mdn is not clear on shorthand syntax.
We will be able to migrate with client migrations in the future.
fixes#3511
## Description
This is an experiment to see if setting `collisionPadding` can reduce
the background panel jumps when switching tabs. `Popover` content always
opens close to trigger, but there is no defined way to know when it
repositions when the content is dynamically changed.
So, when the panel is opened close to the bottom of the screen, the
panel moves away from arrows under the cursor.
## Steps for reproduction
- Add a background
- Now, open the background panel and switch between the tabs.
## 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:
5de6)
Looks like acorn skip thes rest of the input after successfully parsing
expression. This resulted in weird syntax errors our linter allow user
to enter.
The fix is simple, force acorn to consider whole input as expression by
wrapping with parentheses. Though it also requires tuning diagnostics
position.
## Description
1. add rendering states e.g. :hover
2. keep the original rules order
3. remove overwritten properties
4. code embed component
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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` file
Closes https://github.com/webstudio-is/webstudio/issues/3517
## Description
Completion would often start with \`\`\`json instead of the actual json
that we want to parse, so I added a command to not start with \`\`\`json
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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` file
## Description
Following code in Project Setting Custom Code
```
<script data-cf-beacon='{"token": "123"}'>
```
failed on build
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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` file
## Description
When project loads very quickly, loading animation will end where it
started at 0%. To make sure it always finishes at 100%, we need to let
it do so.
Before
https://share.descript.com/view/TnNtRBlnxGq
After
https://share.descript.com/view/0WqOiBbVy8B
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
- restrict node to >= 20.12 with "engines" field
- write .npmrc by code instead of copying from template because publish
always cuts it from cli package
- use `npx webstudio@latest` to always install fresh cli if necessary
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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` file
Our vite setup in builder is getting slower
because of huge amount of modules.
Here I merged more than 400 icon modules into 2 modules string and
components.
This should improved vite experience and slightly reduce bundling time.
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here added new utlity to expand css shorthand properties into longhands.
Parsing is not trivial. csstree could help a lot with builtin lexer but
it does not expose matched nodes on properties. Here we can leverage
lexer to match big pieces and refined them into set of properties.
Supported following properties
- border
- border-radius
- border-image
- outline
- margin/padding
- inset
- gap
- place-content
- place-items
- place-self
Will do the rest in separate PRed them to `.env` file
## Description
https://github.com/webstudio-is/webstudio/assets/5077042/ea38835c-ec5c-4333-a982-f5bb9580d9e0
URLs can be dropped on Image Manager
+ small fixes.
- Files without extensions broke FileName control
- svg files were not shown on local builder after upload
## Steps for reproduction
Open Image Manager, drag urls
## 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
- [ ] 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` file
## Description
<img width="247" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/52824/e14c743a-508d-4fb3-ad16-78906ca04678">
When page doesn't provide thumb we will now render this new one instead
of image placeholder
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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
When parsing webflow presets:
- skip selectors with combinators
- support states
## Steps for reproduction
1. click button
2. expect xyz
## 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` file
Here upgraded storybook with reresolved transitive dependencies. Removed
babel/types override, will eventually let us deduplicate a lot of
dependencies.
## Description
This is 1st PR In a series of PR's
Next: Image URL Links upload support.
Image Manager now support files drag/drop
(Images, Fonts etc)
## Steps for reproduction
Drag files on image manager see it works.
## 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
- [ ] 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` file
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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` file
Finally figured out how to leverage node conditions to run webstudio cli
in fixtures without rebuilding it on every change.
Import conditions is another thing which allows
to constrain not exposed modules but internal ones.
Now to run cli locally it should be have this env
which is basically same we do with vite.
Works for both import and export conditions.
```
NODE_OPTIONS='--conditions=webstudio --import=tsx' webstudio
```
## Description
closes#3504
Reflow caused by Style element rerender sometimes cause focus lose.
It can be or chrome issue or Mutattion observer used in radix focus
scope.
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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` file
## Description
fixes
- when choosing an image after having a url, url is normally being
reset, so you don't have both, now I managed to have both
- Code area label should be Code
Regarding the
- jump when switching between image and gradient.
This is a little tricky, to restrict from jumping. Thought about this
while implementing itself. But there is too much negative spacing for
gradients tab. We need to set `min-height`. Which is showing too much
empty spacing for background gradients in my opinion. Let me know, if
it's still fine and we can go ahead.

- shouldn't all properties land in the Code area? not just the url()?
This, i am not sure if its possible. Because, in every code-editing
areas. We are showing only the property value and not the key. In this
case, of we want to show multiple properties. Then we need to show
multiple key-value pairs. Like, `background-image: url, background-cli:
border-box` etc. With some additional parsing of these values.
## Steps for reproduction
1. Set a remote url for a background image, now use a uploaded image for
the same. The input-box need to be refreshed.
## 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
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
## Description
fixes#3451
Allow `show/hide` for individual layers in `filters` and
`backdrop-filters`.
## Steps for reproduction
1. Add some layers for filters and backdrop-filters
2. Play with `show/hide` icon on each layer.
## 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:
5de6)
## Description
Turns out userSelect auto doens't necessary mean it will fall back to.
the default for the node, we need to be explicit.
## Steps for reproduction
1. click button
2. expect xyz
## 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` file
## Description
- webflow css preset
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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` file
## Description
Corresponding SAAS PR
https://github.com/webstudio-is/webstudio-saas/pull/298
(Must be renamed to "release.staging" on release to allow testing)
closes#3378
## Steps for reproduction
See fixtures now have working scripts.
Publish see saas supports script and language
https://rewrites.staging.webstudio.is/builder/f30da574-8022-433e-9a15-050792747b6f
.
## 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
- [ ] 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` file
Here added workflow to automatically create release when tag is pushed
to the repo.
All unconfigured types will go into "Other changes" section
Example of changelogs
https://github.com/TrySound/test-auto-release/releases
Upgraded both tsx and esbuild to the latest version and removed override
for esbuild. As a result we have 5 duplicates of esbuild but they will
go away with time.
## Description
Combo classes, Custom attributes, Grid, Columns, Image
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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` file