Commit Graph
5954 Commits
Author SHA1 Message Date
victor immanuel 2d7ea53fb0 fix: asset details filename overflow issue. (#5054)
## Description

I didn't find any open issue for this. the asset details card filename
was a bit messed up and it was hiding the size detail.


![image](https://github.com/user-attachments/assets/b5a0a550-f959-4feb-b6de-b3523610325e)

this PR fix, trims the filename and aligns the size in the next line as
follows.

![Screenshot from 2025-03-25
14-37-26](https://github.com/user-attachments/assets/a27155b6-9add-45db-b651-2424bcca5b32)

## 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

- [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)
- [ ] 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
2025-03-27 01:55:05 +07:00
Ivan Starkov edceea2760 experimental: Link animation range names (#5056)
## Description

<img width="523" alt="image"
src="https://github.com/user-attachments/assets/81a860c5-fcd3-4f0c-af60-9073216a8da6"
/>


## 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:
0000)
- [ ] 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
2025-03-26 20:59:54 +05:00
Oleg Isonen 1d9ae2ad29 feat: make spacing input autogrow (#5052)
## Description

When user opens a long value in spacing we now show an input that can
big much bigger, max size 240px for the input. On the other hand it will
be small if value is small AND it will autogrow

<img width="410" alt="image"
src="https://github.com/user-attachments/assets/2ccbdc52-9eea-4f5b-bb44-b4e8d4f7b23f"
/>


## 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:
0000)
- [ ] 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
2025-03-26 15:15:46 +01:00
Oleg Isonen 0597c4f5fc fix: reset spacing values with alt-click (#5053)
## Description

When alt-clicking on the label in spacing, reset the value

## 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:
0000)
- [ ] 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
2025-03-26 15:15:24 +01:00
Ivan Starkov 19fd9871dc experimental: Animate Text Split (#5048)
## Description

New Split By option

Animated Text 2nd example


https://p-1ada14ed-beb3-4910-8af1-dacaa550310b-dot-anim-txt.staging.webstudio.is/?authToken=1e621fc4-dfb0-4189-a9b0-4fe2e189ec93&mode=preview


https://animations.wstd.work/text-animations


<img width="258" alt="image"
src="https://github.com/user-attachments/assets/b007ec9a-11fd-4a20-969b-a8451f599eeb"
/>

See 2nd animated per word


![Screen Recording 2025-03-26 at 10 30
31](https://github.com/user-attachments/assets/f6f5e364-d290-4bfb-98c0-9046c85281c7)



## 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:
0000)
- [ ] 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
2025-03-26 16:27:07 +03:00
Oleg Isonen 9d298ccf46 fix: Allow creating variables when input starts with dashes in advanced style section (#5051)
## Description

We broke this as we introduced a more flexible search to combobox when
you add properties

## Steps for reproduction

1. advanced panel
2. type --x
3. see you can create that variable right away without adding value

## 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:
0000)
- [ ] 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
2025-03-26 12:46:53 +01:00
Ivan Starkov b787e3d8ee experimental: Fix chrome 134 regression bug (#5046)
## Description

https://issues.chromium.org/issues/403708813


## Steps for reproduction

Type in Debug Console 
`ScrollTimeline`
for Chrome  134.0.6998.164  >= version  >= 134.0.6998.0 
This would be non native code


## 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:
0000)
- [ ] 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
2025-03-26 16:27:10 +05:00
Bogdan Chadkin ccba8d9581 feat: substitute variables in calc and box-shadow (#5049)
Ref https://github.com/webstudio-is/webstudio/issues/4939

Here improved style engine logic to substitute variables in unparsed
values which is essential in cases like box-shadow or calc with
variables.

<img width="334" alt="Screenshot 2025-03-26 at 02 03 03"
src="https://github.com/user-attachments/assets/7b002061-1e83-48d9-abad-70547d1cdfc0"
/>
<img width="554" alt="Screenshot 2025-03-26 at 01 59 40"
src="https://github.com/user-attachments/assets/85597b72-cc74-4be9-9c32-ddc1b6510131"
/>
2025-03-26 18:11:55 +07:00
Oleg Isonen b68fcf0462 feat: Implement cmd+enter shortcut to focus style source input (#5045)
## Description

After adding an instance user wants to focus the style source input via
shortcut to add tokens.

## 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:
0000)
- [ ] 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
2025-03-25 19:09:40 +01:00
Oleg Isonen 2f59404ff8 fix: Fix add style input focus when pressing + button (#5047)
## Steps for reproduction

1. go to advanced
2. click + button - focus should happen
3. click again - it will quickly disappear and appear focused again -
this is expected
4. hit enter or tab on recently added value - input will appear focused

## 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:
0000)
- [ ] 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
2025-03-25 19:09:12 +01:00
Bogdan Chadkin 11bb528ed6 feat: support css variables in shadow properties (#5032)
Closes https://github.com/webstudio-is/webstudio/issues/4939

Added css variables support with autocomplete in text-shadow and
box-shadow properties.

Extended our ast with new "shadow" value to properly represent variables
in shadow properties. Though parser still cannot extract variables from
value with variables and falls back to "unparsed" value.

<img width="542" alt="Screenshot 2025-03-23 at 00 45 03"
src="https://github.com/user-attachments/assets/2493d925-3199-4257-b9e8-dc69daa27324"
/>
2025-03-25 23:10:03 +07:00
Ivan Starkov f4318edec4 experimental: Move animation debug to switch (#5044)
## Description

### Run On Canvas

<img width="294" alt="image"
src="https://github.com/user-attachments/assets/e1e8ec57-9b20-499a-adcf-38bcc7f4e9d1"
/>

### Debug

<img width="267" alt="image"
src="https://github.com/user-attachments/assets/1c82867b-d980-4178-8a7a-aa2c88c521cc"
/>


## 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:
0000)
- [ ] 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
2025-03-25 17:00:47 +05:00
Ivan Starkov cbe06f1bfe experimental: Move animation name Input title (#5043)
## Description

<img width="540" alt="image"
src="https://github.com/user-attachments/assets/1d5a0561-dcbf-4e06-aac1-1c1f71204b3d"
/>



## 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:
0000)
- [ ] 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
2025-03-25 14:31:43 +05:00
Ivan Starkov 9397f7af0c experimental: Add banner to Animate components (#5041)
## 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:
0000)
- [ ] 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
2025-03-25 13:59:17 +05:00
victor immanuelandBogdan Chadkin 766e83b5fd fix: style panel indication issue when we use calc() (#5042)
## Description
fixes issue #4872 
removed the checks for unparsed style values that was returning an empty
array

## Steps for reproduction

1. use calc as a value in any of the inputs.
2. then close the section accordian to see the blue dot.

## 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)
- [ ] 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

---------

Co-authored-by: Bogdan Chadkin <opensource@trysound.io>
2025-03-25 15:00:48 +07:00
Bogdan Chadkin 5bfd37f413 refactor: drop embed template usages (#5040)
Dropped meta.template and copy paste plugin with embed template. The
only left usage is AI generation.
2025-03-25 10:58:20 +07:00
Bogdan Chadkin ad114eb37f feat: allow using pro features in builder for free users (#5039)
We decided to not block testing of pro features in builder and block
only publishing projects with these features.
<img width="562" alt="Screenshot 2025-03-24 at 13 38 21"
src="https://github.com/user-attachments/assets/ba796d3f-9e7d-43ca-8939-01423b83c340"
/>
<img width="492" alt="image"
src="https://github.com/user-attachments/assets/8d8ccaa1-1126-470a-bc2a-6e75940c7e6e"
/>
<img width="973" alt="Screenshot 2025-03-24 at 13 04 07"
src="https://github.com/user-attachments/assets/21a8a40c-937a-4845-9481-302a8272d8db"
/>
<img width="573" alt="Screenshot 2025-03-24 at 12 56 07"
src="https://github.com/user-attachments/assets/e22e57c4-e134-4835-8dd4-24ba54faa30d"
/>
2025-03-25 10:44:19 +07:00
Bogdan Chadkin 5b3144d656 refactor: bump zod (#5035)
All three have minor feature updates

- zod
- zod-validation-error
- zod-to-json-schema
2025-03-25 00:17:05 +07:00
Bogdan Chadkin e730aa3c6b feat: navigate to pro features on publish dialog (#5036)
Users don't know where to find pro features accidentally created while
being on pro tier or added with marketplace.

Here wrapped items in used pro featured with links (buttons actually)
which navigate to instances.



https://github.com/user-attachments/assets/7dd879fa-4e1b-4f66-9dd3-18308cd62f58
2025-03-24 02:19:54 +07:00
Oleg Isonen 714c36fbc0 experimental: Always show css value input instead of an add button (#5029)
## Description

![image](https://github.com/user-attachments/assets/1bc62b07-45b6-4f19-82f3-ad04c09ae775)

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:
0000)
- [ ] 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
2025-03-23 16:48:59 +05:00
Bogdan Chadkin f099837dff feat: support resource in webhook form (#5006)
Ref https://github.com/webstudio-is/webstudio/issues/4093

Succeeds https://github.com/webstudio-is/webstudio/pull/4333

Added resource button in webhook form action prop

<img width="520" alt="image"
src="https://github.com/user-attachments/assets/8074e07f-8d15-4331-88fc-3c51bf0ebb1e"
/>
2025-03-23 11:15:58 +07:00
Oleg Isonen fb4b9ed875 fix: fix wording in the toast (#5034)
## 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:
0000)
- [ ] 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
2025-03-22 21:46:22 +01:00
Bogdan Chadkin 5637e71287 refactor: migrate css-data to hyphenated properties (#5031)
All parsers/generators accept and produce hyphenated css property. Camel
case is only used for StyleProperty type.
2025-03-22 22:38:59 +07:00
Bogdan Chadkin 5c3a6e5fcd refactor: restrict publish count per account (#5030) 2025-03-22 19:29:22 +07:00
Bogdan Chadkin dbd4650bc5 refactor: drop old flags (#5028)
We are long released all these features and no longer need flags for
them.
2025-03-22 01:10:30 +07:00
Oleg Isonen 1e597a9f7e experimental: Use collapsible section in animations (#5026)
## 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:
0000)
- [ ] 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
2025-03-21 18:54:27 +01:00
Oleg Isonen 9486d266a2 fix: fix the tip for ellipsis (#5027)
## Description

<img width="272" alt="image"
src="https://github.com/user-attachments/assets/2cd2c2fb-b934-4fba-bf17-1553f5dbb316"
/>

This was misleading because we acually only need "text-wrap-mode" and
"white space" in the UI is not actually white-space property

## 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:
0000)
- [ ] 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
2025-03-21 18:47:17 +01:00
Ivan Starkov 10a4c70902 experimental: Show animation is running is Nav Tree (#5023)
## Description

Show eye icon (in primary color) if Node is Animating because of
Selection or if it's Pinned.

<img width="757" alt="image"
src="https://github.com/user-attachments/assets/41597955-6974-49c4-96a9-708480e4d644"
/>

## 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:
0000)
- [ ] 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
2025-03-21 21:24:51 +05:00
Bogdan Chadkin 9eb8a03082 refactor: forbid publishing pro features (#5024)
Now user will see error when try to publish project with pro features.


![image](https://github.com/user-attachments/assets/db11b998-62d2-41cc-a2d5-36db9a933110)
2025-03-21 18:24:07 +07:00
Oleg Isonen 7ff72c335d feat: Make complex values in spacing UI look good (#5020)
<img width="247" alt="image"
src="https://github.com/user-attachments/assets/ed89dd8c-c45e-4bf6-9e28-b6fb8c812bbd"
/>


## Description

1. Cuts off the long values and avoids badly looking UI
2. Adds scroll on pointer over effect to see the value quickly

## Steps for reproduction

1. click button
3. 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:
0000)
- [ ] 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
2025-03-21 10:56:42 +01:00
Bogdan Chadkin 910a7a26e2 refactor: show build id for debug purposes (#5022)
When publish website locally or in test environment we cannot see failed
build id. Here added one behind tooltip.

<img width="469" alt="Screenshot 2025-03-21 at 00 08 17"
src="https://github.com/user-attachments/assets/4041f04d-bc92-4d5a-8250-68d7d2ba8f54"
/>
2025-03-21 00:33:56 +07:00
Bogdan Chadkin 47d0517223 fix: reparent within another slot instance (#5021)
Ivan found a bug. Reparent slot child into another instance of the same
slot got this child removed.

Now refactored whole thing (almost). The main difference is same parent
move will not do delete/paste but will just update child position. This
fixes bug above and makes other logic slightly simpler.

Rewritten reparentInstance with reparentInstanceMutable to simplify
testing and make it composable (if ever need). Added more tests.
2025-03-20 21:21:09 +07:00
Oleg Isonen 014ef95e3e fix: Vimeo and youtube inline option fix (#5017)
Closes https://github.com/webstudio-is/webstudio/issues/5016

## Description

Since we are lazily initializing the player and using autoplay, players
won't request full screen, so we need to request the fullscreen
ourselves.

1. inline is now false by default 
2. only for mobile/touch, custom logic checks if the device has touch or
has resolution lower than 1024px



## Steps for reproduction

1. add vimeo component
2. put a video url, e.g. https://vimeo.com/1062544169
3. publish
4. play on a touch device or just a resolution smaller than 1024
5. see it goes full screen
6. repeaat the same with youtube
 

## 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:
0000)
- [ ] 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
2025-03-19 16:05:12 +01:00
Ivan Starkov 35d0d7c8ac experimental: Breakpoint support for the Animation component (#5012)
## Description

https://animations.wstd.work/
Breakpoints Example

See on narrow screen animation is disabled.

<img width="699" alt="image"
src="https://github.com/user-attachments/assets/f464fdf3-f57a-4cf7-91a1-beb355f8a5bd"
/>



## 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:
0000)
- [ ] 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
2025-03-18 23:30:17 +05:00
Bogdan Chadkin 8d05217cf3 refactor: rename callbacks in css input container (#5014)
Css input container is simplified version of css value input. setValue
and deleteProperty callbacks do not follow callback style and have
inconsistent implementation. deleteProperty requires property to be
specified.

Here renamed setValue to onUpdate, deleteProperty to onDelete and
removed property parameter.

```
onUpdate: (style: StyleValue, options?: StyleUpdateOptions) => void;
onDelete: (options?: StyleUpdateOptions) => void;
```
2025-03-18 18:18:25 +07:00
Bogdan Chadkin e3eaf5b4b1 refactor: replace keywords with change-case (#5011)
We don't need custom utilities for keywords with super small and well
supported change-case.

Got rid of it of keywords utilities and its tests ;)

Also fixed shadows and backdrop-filter sections I broke while migrating
to hyphenated properties.

Touched animations a little.
2025-03-18 14:12:27 +07:00
Ivan Starkov 9e77277a89 experimental: Enable/disable animations per breakpoints (Builder UI only) (#5010)
## Description

# !! Builder UI only !!

Enable/disable animations per breakpoints.

<img width="256" alt="image"
src="https://github.com/user-attachments/assets/89792625-e2b3-4c58-8b85-0a44b18b9e53"
/>

### Next PR:
Component support


## Steps for reproduction

Disable animation at some breakpoint. See in builder UI it's disabled
for all corresponding breakpoints too.


## 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:
0000)
- [ ] 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
2025-03-18 10:48:46 +05:00
Ivan Starkov ac8ca945d5 fix: Shrinking animation panel when new keyframes are added (#5009)
## 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:
0000)
- [ ] 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
2025-03-17 16:00:17 +05:00
Ivan Starkov 00b815aeb2 experimental: Live animation setting update (#5005)
## 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.example`
and the `builder/env-check.js` if mandatory
2025-03-17 14:23:57 +05:00
Bogdan Chadkin 32120c33dc refactor: hyphenate builder (#5007)
Switched all left overs to hyphenated css properties including animation
section.

StyleProperty is only stored in data.
2025-03-16 10:06:22 +07:00
Oleg Isonen abb3572ebe feat: Sicky search input for advanced styles section (#4998)
## 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:
0000)
- [ ] 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
2025-03-16 00:12:25 +01:00
Bogdan Chadkin b4cc9ffbfb refactor: hyphenate css-value-input (#5003)
Migrated all css-value-input internals and usages to hyphenated
properties. Touched animation section a little.
2025-03-15 17:30:35 +07:00
Bogdan Chadkin bee9615869 feat: remove "delete" button from props asset (#5004)
In image and link components we allow to delete added asset. Though with
tooltip and "reset/delete" we no longer need additional controls.

<img width="287" alt="Screenshot 2025-03-15 at 13 36 02"
src="https://github.com/user-attachments/assets/d9923253-2ef6-4628-be2f-699278a63ddc"
/>
<img width="246" alt="Screenshot 2025-03-15 at 13 37 28"
src="https://github.com/user-attachments/assets/b2808dcb-69d9-4a17-ba0a-3dbae76f2cd6"
/>
2025-03-15 17:30:27 +07:00
Oleg Isonen 2bb6e9d5c2 fix: restore focus after closing dropdown via Esc in CSS Value input (#5002)
## Description

## Steps for reproduction

1. focus any style value
2. type to open dropdown
3. hit ESC
4. see the input is still focused
5. hit ESC again
6. see the change is resetted

## 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:
0000)
- [ ] 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
2025-03-15 10:07:22 +05:00
Bogdan Chadkin d7bb1141ba feat: use resettable blue label for properties (#5000)
Closes https://github.com/webstudio-is/webstudio/issues/4787

- properties now have blue labels when value is specified
- clicking on label shows tooltip
- alt+click does reset/delete
- responsive layout in text control now wraps when label is >30%

<img width="317" alt="Screenshot 2025-03-14 at 20 25 50"
src="https://github.com/user-attachments/assets/acfa1487-59b8-4742-9374-17f5501f5cbf"
/>
<img width="362" alt="Screenshot 2025-03-14 at 20 25 40"
src="https://github.com/user-attachments/assets/12d07775-f926-4b40-9fd9-571723eb43b0"
/>
2025-03-14 23:33:00 +07:00
Bogdan Chadkin b14676bfd6 refactor: simplify css value input sizes (#4997)
- removed non-unit values from browser styles
- merged browser styles and unit sizes into single store; both objects
used in cize conversion
- use typed cssom to parse units instead of custom parser (sorry
firefox)
2025-03-14 20:59:57 +07:00
Oleg Isonen 973d7d609a fix: allow searching css with dash e.g. flex-direction (#4996)
In advanced panel in both search in put and add property autocomplete
right now if you type dash it won't find anything with dash

## 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:
0000)
- [ ] 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
2025-03-13 19:31:02 +01:00
Bogdan Chadkin af653fa002 refactor: hyphenate keyword values (#4987)
Regenerated keyword values data with hyphenated properties. Since the
new object is strictly typed we can use it directly without
styleConfigByName utility which I removed.
2025-03-13 22:44:57 +07:00
Bogdan Chadkin a273abadb4 fix: navigate to home page when undo page creation (#4995)
Fixes https://github.com/webstudio-is/webstudio/issues/4993
2025-03-13 22:32:59 +07:00
Bogdan Chadkin d6f37ef359 fix: load resources when switch pages (#4994)
Fixes https://github.com/webstudio-is/webstudio/issues/4992
2025-03-13 22:15:19 +07:00