1446 Commits
Author SHA1 Message Date
Bogdan Chadkin 5ee0860cd9 fix: show "delete variable" in variable tooltip (#4322)
Ref https://github.com/webstudio-is/webstudio/issues/3399

![Screenshot 2024-10-20 at 10 41
55](https://github.com/user-attachments/assets/d194cc13-efec-40fa-8021-13d2473188a1)
2024-10-21 14:18:58 +03:00
Bogdan Chadkin 257d760222 feat: support paste styles in advanced section (#4323)
Ref https://github.com/webstudio-is/webstudio/issues/3399
https://github.com/webstudio-is/webstudio/issues/3540

Here added two more features to advanced panel

1. When search for property, user can enter css declarations like
`width: 100px; height: 200px;` and press enter instead of searching for
property and editing property after creation.

2. When search for property, user can paste css declarations from some
theme editor or figma, this is useful interop with other tools

Note: this does not support breakpoints, states or tokens. Declarations
are inserted only within currently selected style source and state.


https://github.com/user-attachments/assets/1f37f5d1-11b9-4f05-ae4d-a7c647ae14b6
2024-10-21 12:07:24 +03:00
Bogdan Chadkin 4168a2dd80 fix: prevent creating css variable with invalid name (#4319)
Closes https://github.com/webstudio-is/webstudio/issues/4292

Here instead of validation error I just remove "create" option. It is
consitent with just random invalid name not starting with `--`.



https://github.com/user-attachments/assets/214b71b9-1b88-49de-8eb0-4e815c67486f
2024-10-20 13:12:21 +03:00
Bogdan Chadkin 325eff1469 feat: support css variables in transitions (#4317)
Ref https://github.com/webstudio-is/webstudio/issues/3399

- stop filtering when open combobox suggestions
- prevent showing selected description when highlight css variable
- support css variables in duration
- support css variables in delay

Also replaced select with css value input for easing. Had to get rid
from out easings presets though now we can use easings from css
variables which I think a better trade.

Presets will make sense with dedicated UI for easings like
https://www.easing.dev.

![Screenshot 2024-10-19 at 21 55
02](https://github.com/user-attachments/assets/4cdbb799-d01c-4c3f-93dc-c54e9723635e)
2024-10-20 10:30:28 +03:00
Ivan Starkov 8545ca7a94 fix: Infininite loop in backgrounds (#4299)
## Description

Just inifinite loop fix

## 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
2024-10-19 16:30:02 +03:00
Ivan Starkov 513d78681b fix: After modifying style, it takes two clicks to select the next instance (#4314)
## Description
Style Source looses focus after adding Token


closes #4309
closes #4306

## 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
2024-10-19 15:14:35 +03:00
Ivan Starkov 309b6a8b27 fix: Hovering over autocomplete ignores actual input value (#4312)
## Description

closes #4301
closes #4308

## 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
2024-10-19 15:00:46 +03:00
Bogdan Chadkin 6939a99759 fix: allow inserting into textual collection items (#4305)
Fixes https://github.com/webstudio-is/webstudio/issues/4294
2024-10-19 12:24:28 +03:00
Bogdan Chadkin 7d111f4428 fix: prevent failing navigator when instances are inconsistent (#4303)
Users somehow make instances tree inconsistent. For example deleting
instances does not delete id from parent children.

I still have not idea how to reproduce this but we need to stop failing
users with broken state. Here just logged into console instead of
throwing error.
2024-10-18 14:16:18 +03:00
Jaya Krishna Namburu b07b904bcd fix: show custom option in easing dropdow only when used (#4290) 2024-10-16 17:41:36 +05:30
Ivan Starkov 2337551767 fix: Fix multiline expression (#4297)
## 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
2024-10-16 14:25:54 +03:00
Ivan Starkov 17b3159c49 fix: Input arrow up and down pulls up autocomplete now instead of incrementing (#4291)
## Description

closes #4287

- [x] Up/Down now uses `onChange` instead of `onChangeComplete` (this
should be faster)
- [x] Up/Down in the Space control now works with modifiers (it seems
this never worked before)
- [x] Up/Down no longer opens the combobox if the input is
numeric-like​⬤

## 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
2024-10-16 13:43:40 +03:00
Oleg Isonen 89bca4d7d0 feat: Publish settings section in project settings (#4295)
Closes https://github.com/webstudio-is/webstudio/issues/4272

## Description

- I moved the only publish setting we have to a separate section, so we
can add more in the future.
- Added a settings button in publish dialog

<img width="625" alt="image"
src="https://github.com/user-attachments/assets/8c72028c-69e6-4fb6-849f-bdb9ee0594cc">
<img width="327" alt="image"
src="https://github.com/user-attachments/assets/70c892de-65ef-4962-a790-fb8c6e6b49e7">


## 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
2024-10-16 10:33:32 +02:00
Bogdan Chadkin 3e056f9130 experimental: support css variables in shadows (#4283)
Ref https://github.com/webstudio-is/webstudio/issues/3399

![Screenshot 2024-10-14 at 20 13
34](https://github.com/user-attachments/assets/6518141b-b0f4-40e8-89db-7fcf68093ff6)
2024-10-14 21:36:15 +03:00
Oleg Isonen 994813dd99 feat: Switch to 1px outline for all inputs and buttons, as well as use background color in lists (#4276)
## Description

Most controls are affected 2px > 1px
Navigator and project settings lists now use background color instead of
outline

## 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
2024-10-14 17:44:00 +02:00
Bogdan Chadkin fc14133f28 experimental: autocomplete variables in backgrounds code (#4281)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Using dedicated inputs to autocomplete variables makes UI more complex.
Though we already have "Code" fields which can be used for the same
purpose.

Here added css fragment editor to background gradient.

![Screenshot 2024-10-14 at 15 56
54](https://github.com/user-attachments/assets/2c41f3e7-9f79-46c3-92be-870f69ac515d)
2024-10-14 17:34:51 +03:00
Bogdan Chadkin 0e7125511b experimental: add more hints about css variables (#4282)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Added a few hints

![Screenshot 2024-10-14 at 16 12
07](https://github.com/user-attachments/assets/4a7cf0f8-9cd1-408a-9c16-6cb6c8d77970)
![Screenshot 2024-10-14 at 16 08
04](https://github.com/user-attachments/assets/7d4be8b3-596a-4d07-9761-0677f1acd40b)
![Screenshot 2024-10-14 at 16 07
56](https://github.com/user-attachments/assets/73facdda-724c-4ef8-935e-69cbd0775d6c)
2024-10-14 17:16:02 +03:00
Ivan Starkov 11f5450b9a fix: CSS unitless properties parsing (#4278)
## Description

ref #3399

## 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
2024-10-14 13:51:24 +03:00
Ivan Starkov 80778e3405 fix: Style panel style value combobox doesn't close on ESC (#4277)
## Description

closes #4269

## 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
2024-10-14 11:09:03 +03:00
Bogdan Chadkin af931ac3c0 experimental: improve repeated styles with css variables (#4275)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Here added a few improvements to repeated style to handle variables
properly. For now all changes affects only backgrounds section.

- single layer can use css variable with multiple gradients
- with multiple layers each can have css variable with single gradient
- when single variable inside multiple layers has multiple gradients all
thumbnails become transparent, it should be and indicator of invalid
gradients
- fixed toggling hidden considering variables
- fixed deleting layers considering variables
- now when single layer has variable with multiple gradients only first
gradient can be deleted or toggled
2024-10-13 22:19:47 +03:00
Bogdan Chadkin 4b9f2c3d1b experimental: show computes values in tooltip when alt is pressed (#4228)
Ref https://github.com/webstudio-is/webstudio/issues/3399

One of the worst thing with our internal theme is I don't know what
actual values used for example in theme.spacing[5] without going into
theme file.

Here added info about computed value in property tooltip. It computes
initial, inherit, unset, currentColor and css variables.


![Screenshot 2024-10-06 at 13 25
32](https://github.com/user-attachments/assets/741b65d1-bcb6-487a-a7fe-e576ad1a6fc2)
2024-10-13 16:58:32 +03:00
Bogdan Chadkin ebced4532a experimental: improve css variables parsing (#4273)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Here added support for parsing var() when paste styles and fixed cyclic
dependency when use the same var() a few times like `background-image:
var(--gradient), var(--gradient)`.
2024-10-13 15:28:38 +03:00
Bogdan Chadkin 1d9f2ad238 experimental: support css variables in transforms (#4270)
Ref https://github.com/webstudio-is/webstudio/issues/3399

![Screenshot 2024-10-11 at 23 34
48](https://github.com/user-attachments/assets/aade8738-3b52-4c22-aad0-1411d45bf1ef)


One thing I noticed, our implementation does not compose scale and
rotate well.
According to spec rotate should be computed before scale but in our
implementation rotate goes after scale.

https://www.w3.org/TR/css-transforms-2/#ctm
2024-10-12 00:03:39 +03:00
Ivan Starkov 4ee045fce9 fix: Fix expression editor decoration (#4261)
## Description

2 bugs

### Click on test broke decoration


![image](https://github.com/user-attachments/assets/43a98ea1-08bd-4044-92ff-0a3735dfd6dc)

![image](https://github.com/user-attachments/assets/49d577d1-fa8f-40a1-9798-1fd41b5eaf40)


### Symbols after decoration broke decoration


![image](https://github.com/user-attachments/assets/27f96aa4-f512-44fb-99c8-604817b4dbf8)

![image](https://github.com/user-attachments/assets/93eff6b4-1e40-430e-a406-99b0bdcecd90)


### Would be good to improve

Error messages:

<img width="534" alt="image"
src="https://github.com/user-attachments/assets/a42509e6-8e41-40d3-b1ae-ad739487c68e">


## 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
2024-10-11 11:22:56 +03:00
Ivan Starkov ada2b47042 fix: Can't save Dynamic Page Setting when Title is undefined (#4260)
## Description

closes #3965

## 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
2024-10-11 11:15:42 +03:00
Bogdan Chadkin 62467a3ad3 fix: render background styles after builder reload (#4259)
Ref https://github.com/webstudio-is/webstudio/issues/4244

When started rendering all preview var() fallbacks as unparsed. Styles
renderer was not able anymore to rerender those.

So here at least temporary just added computed with transform value to
always rerender when assets are changed.
2024-10-10 00:37:10 +03:00
Bogdan Chadkin 666b7e3efb refactor: support css vars in repeated values (#4255)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Here added support for computing css variables inside layers and tuples
to support cases like

```css
transition-timing-function: var(--ease), var(--ease-in);
```
2024-10-09 16:19:55 +03:00
Bogdan Chadkin b921c1d558 refactor: rename variables to data variables (#4254)
This should clarify the distinction between data variables and css
variables for newcomers.


![image](https://github.com/user-attachments/assets/25ca8d8e-2b45-4199-bd53-0441209a2928)
2024-10-08 22:40:54 +03:00
Bogdan Chadkin c69f6874b2 refactor: add advanced transform options (#4243)
Here moved advanced transform options behind popover instead of adding
with + button. It is slightly less annoying.

Also migrated transforms section to new style engine with proper css
variables support. Will enable autocomplete in another PR.

![Screenshot 2024-10-08 at 01 23
32](https://github.com/user-attachments/assets/b720c788-d541-497b-86d1-fb04a020b21f)
2024-10-08 18:02:09 +03:00
Bogdan Chadkin a15bbc9eb4 feat: show all expression errors with linter (#4251)
Here show expression linter errors with code mirror lint and made lint
tooltip same as our error tooltip.

Also upgraded code mirror and acorn

![Screenshot 2024-10-08 at 14 36
49](https://github.com/user-attachments/assets/38c84fb0-7c1a-4dcc-a6ca-d8fea1db9f05)


![image](https://github.com/user-attachments/assets/65399e56-7139-4146-82a4-f0207552bc33)
2024-10-08 16:24:36 +03:00
Ivan Starkov a78c977658 fix: Some symbols in the page’s ‘Dynamic path’ input cause the builder to crash. (#4246)
## 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
2024-10-08 11:50:18 +03:00
Ivan Starkov 9ad1c1a332 fix: Publish crashes on pages with dynamic paths ending in ‘?’ (#4248)
## Description

ref #4247

<img width="1068" alt="image"
src="https://github.com/user-attachments/assets/f7ce191a-7146-4bf2-9d96-12d360fbd3ec">


## Steps for reproduction

see tests

## 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
2024-10-08 11:49:52 +03:00
Ivan Starkov 369e101eb8 fix: Expression Editor cursor position jumps to wrong place (#4242)
## Description

closes #3940

Removed logic with undefined replacement on paste as it doesn't look
stable.
Seems like `undefined` variables must be decorated or replaced on blur.

Anyway now it has linter

<img width="534" alt="image"
src="https://github.com/user-attachments/assets/43518bbc-798d-4332-a89f-238ecd6986c4">

<img width="509" alt="image"
src="https://github.com/user-attachments/assets/279b7895-9371-49bd-b5c8-5ce5c391acce">



## Steps for reproduction

In any expression editor enter
1. `'aaa' + system` see system is decorated (blue) cursor is after the
system
<img width="193" alt="image"
src="https://github.com/user-attachments/assets/f180f401-b5b0-41c5-a548-6ee432d278ca">


2. `'aaa' system` see system is not decorated 
<img width="249" alt="image"
src="https://github.com/user-attachments/assets/4056a601-9374-487f-a934-f2e1c06bbb96">

then add `+` after 'aaa' see system now decorated, cursor is after `+`



## 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
2024-10-08 10:16:27 +03:00
Bogdan Chadkin 6d847dedbb fix: some scrub bugs (#4240)
Fixes https://github.com/webstudio-is/webstudio/issues/4196
https://github.com/webstudio-is/webstudio/issues/4237

- fixed z-index scrubbing by rounding integrer number
- fixed background size by fallback to non layers value
2024-10-08 00:48:50 +03:00
Bogdan Chadkin 5f8d228810 experimental: support gradient variables (#4239)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Here used computed values with resolved variables to get the list of
gradients and preview in backgrounds list.

Though the new gradient field sets whole background-image property when
variables are used.

![Screenshot 2024-10-07 at 14 20
20](https://github.com/user-attachments/assets/fb2905f4-cd21-49ee-9870-6d5b8a8d1584)
2024-10-07 17:59:46 +03:00
Ivan Starkov dfb1d45802 chore: Advanced properties performance (chrome only) (#4238)
## 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
2024-10-07 17:14:01 +03:00
Bogdan Chadkin 98ab3e1eb1 refactor: migrate inset control to new style engine (#4231)
Finally got rid from the last legacy property tooltip

![Screenshot 2024-10-06 at 17 49
14](https://github.com/user-attachments/assets/0d2dbff9-b22b-46bd-8e9a-169f83fe9aa6)
2024-10-07 00:07:29 +03:00
Bogdan Chadkin 9b81aa6050 fix: render images on canvas (#4234)
Fixes https://github.com/webstudio-is/webstudio/issues/4232

Broke it when serialized as unparsed without assets transform.
2024-10-06 23:07:12 +03:00
Bogdan Chadkin 02c073c10b fix: duplicate local style sources (#4235)
Fixes https://github.com/webstudio-is/webstudio/issues/4233

When added support for merging root styles when import from marketplace
forgot to check only :root styles should be merged and others
duplicated.
2024-10-06 22:55:10 +03:00
Bogdan Chadkin 54a97c10c2 experimental: support css variables in space section (#4226)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Here migrated space section to new style engine and added support for
autocompleting css variables. Rendering css variables was already in
place.

![Screenshot 2024-10-06 at 12 28
48](https://github.com/user-attachments/assets/b0c4d644-787d-4ca0-bb43-e8cbd8545a85)
2024-10-06 17:22:07 +03:00
Bogdan Chadkin 26d7e041c3 experimental: preview css variables on highlight in combobox (#4224)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Here relaxed converting to css variables for fast preview in canvas. Now
variables can be used as fallbacks for preview variables.

![Screenshot 2024-10-05 at 23 59
53](https://github.com/user-attachments/assets/e6ef71b5-c71e-4e75-9696-eb9faf616a8b)
2024-10-06 12:46:00 +03:00
Bogdan Chadkin 4fd3b0174a experimental: support css variables for borders (#4225)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Added autocomplete for css variables in border width, color and radius.
Sadly no support for blob and drawn radius because they require
shorthand.

![Screenshot 2024-10-06 at 01 26
28](https://github.com/user-attachments/assets/c0557175-f65f-4827-b6a5-360bdf12c976)
2024-10-06 12:40:46 +03:00
Bogdan Chadkin 07eaefa1fb fix: find proper drop target in collections (#4198)
Fixes https://github.com/webstudio-is/webstudio/issues/4192
https://github.com/webstudio-is/webstudio/issues/4202

Figured the way we address instances and render tree should be the same
to compute proper drop targets. As a result collection got extra level
of depth.

![Screenshot 2024-10-02 at 13 19
00](https://github.com/user-attachments/assets/9ff5b1ac-7515-41fc-a9f1-f9c77115ecb9)
2024-10-05 22:40:20 +03:00
Bogdan Chadkin 4a8a4a9a73 refactor: autocomplete variables lazily (#4220)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Here improved combobox component to accept
options factory instead of ready to use array.
This function is invoked only when combobox is open.

As a result each of 500 css variables will no longer subscribe to
available variables which should reduce scripting time and lagging.

Here's local test

![Screenshot 2024-10-05 at 02 03
02](https://github.com/user-attachments/assets/968b3123-9d02-4898-9f82-76a198b35577)

![Screenshot 2024-10-05 at 02 05
16](https://github.com/user-attachments/assets/610dbf7a-e142-4255-9c68-0085a2b40835)


Preview test

![Screenshot 2024-10-05 at 02 23
58](https://github.com/user-attachments/assets/fd8e4c91-3841-4a7e-b960-2763fe40a50a)
![Screenshot 2024-10-05 at 02 22
44](https://github.com/user-attachments/assets/3d7aa1c4-ce3a-4ab8-a36d-197888723c58)
2024-10-05 11:22:06 +03:00
Bogdan Chadkin 63460bd2cb experimental: support css variables in dedicated sections (#4212)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Added support for entering and autocomplete of css variables to
dedicated style sections like size and typography.

- color control
- text control

Also improved autocomplete to search with both var(--name) and --name.

![Screenshot 2024-10-04 at 01 51
12](https://github.com/user-attachments/assets/aca0f63d-8063-4676-877b-cc90e492ce9a)
2024-10-05 01:41:35 +03:00
Ivan Starkov f1aa37cdfb fix: Skip unsafe attribute names on generation (#4216)
## Description

We can also do not skip but 
do `<Dom {...{"1unsafe": value}} />` 
BTW that looks useless.

closes #3573
closes
https://github.com/webstudio-is/webstudio-community/discussions/190#discussioncomment-10832279

## 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
2024-10-04 17:55:09 +03:00
Bogdan Chadkin 0ceaac9ba8 refactor: improve advanced section performance (#4215)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Here did a few things to improve performance of advanced panel with
hundreds if css variables.

- remove unused dom elements
- replaced field-sizing polyfill with css property which is supported in
chrome since March

Here's perf stats from local test, both scripting and rendering cut 1s
each

![Screenshot 2024-10-04 at 13 31
13](https://github.com/user-attachments/assets/122969f4-1ed8-4cc5-a7e9-8070c6d9bf2d)
![Screenshot 2024-10-04 at 14 20
55](https://github.com/user-attachments/assets/ceff3221-4b63-4467-a7de-cd845e2b351a)

Here's the result in branch preview
![Screenshot 2024-10-04 at 14 30
19](https://github.com/user-attachments/assets/97939e31-9eba-465e-888c-ed89aa0d1205)
![Screenshot 2024-10-04 at 14 31
22](https://github.com/user-attachments/assets/dc3d116e-fef7-4e31-b054-17107e160590)
2024-10-04 17:17:41 +03:00
Oleg Isonen 3d98a692d4 chore: faster font weight detection (#4211)
## Description

Using willReadFrequently option makes it 3-5 times faster

## 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
2024-10-04 00:40:41 +02:00
Bogdan Chadkin 5a88b404c2 experimental: hide inherited root styles (#4210)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Root styles are bloating all instances
so as a temporary solution we do not show any styles inherited from them
in advanced panel.
2024-10-03 23:53:33 +03:00
Bogdan Chadkin 58df4bc3a9 experimental: show color picker in advanced panel (#4206)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Now users can tinker colors in css variables

![Screenshot 2024-10-03 at 14 47
26](https://github.com/user-attachments/assets/fc48334a-fc72-41ee-922b-1ae31039fe7a)
2024-10-03 19:47:39 +03:00