3679 Commits
Author SHA1 Message Date
Ivan Starkov f6d859c245 experimental: Add animation ranges (#5133)
## 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-04-17 23:17:04 +02:00
Bogdan Chadkin bd77a252c2 refactor: detect empty tags and components (#5132)
Here replaced "embed" and "control" components with content model. Many
components now detect no content based on html content model like with
img or input tags. In other cases component meta can explicitly specify
empty array to not accept anything.

```
meta = {
  contentModel: {
    category: 'instance',
    children: []
  }
}
```
2025-04-17 23:23:20 +07:00
Bogdan Chadkin 5287e960a8 fix: remove scrub icon from gap input (#5130)
We no longer support scrub on input icons like in gap.
2025-04-17 10:27:40 +07:00
Oleg Isonen d17fe3951e experimental: fix typo (#5131)
## 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-04-16 23:58:49 +02:00
Bogdan Chadkin 23e4318990 experimental: add keyframe transforms (#5128)
Here added UI for transform and opacity properties to keyframe
configuration.

<img width="330" alt="Screenshot 2025-04-16 at 19 42 29"
src="https://github.com/user-attachments/assets/9a122d26-c203-4a9b-8e13-44d2eb8b7a23"
/>
2025-04-16 22:37:49 +07:00
Bogdan Chadkin 0daf6bfbc1 experimental: split keyframe styles into popover (#5126)
We want to add a few predefined fields in every keyframe. Here we split
each keyframe into separate popover to avoid overloading the ui.

<img width="404" alt="Screenshot 2025-04-16 at 01 53 41"
src="https://github.com/user-attachments/assets/21dd7f14-9f51-4624-b190-f57055a6c55c"
/>
2025-04-16 18:38:49 +07:00
victor immanuelandOleg Isonen 1c254ed9f9 fix: modify ui to prevent social image name overflow in page settings. (#5088)
## Description
fixes: #4953 

aligned the name and other contents properly preventing long image names
from overflowing out of view.

![Screenshot from 2025-04-04
09-25-03](https://github.com/user-attachments/assets/68cf34b4-74f7-4468-b132-e5fb1c6f2358)

![Screenshot from 2025-04-04
09-24-57](https://github.com/user-attachments/assets/885807e1-dae8-49e0-b1f0-144ad96a29f5)


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

- [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: Oleg Isonen <oleg008@gmail.com>
2025-04-15 19:24:44 +02:00
Bogdan Chadkin 925ea10391 feat: avoid generating unused preset styles (#5121)
Now we have first-class support for html tags and able to figure out
which tags are rendered so unused preset styles can be removed from
websites.

For example

```
<Box ws:tag="div">
  <Box ws:tag="span">
  </Box>
</Box>
```

will render only div.w-box and span.w-box though there are more presets
for for other tags like main, section etc.

Before all tags were generated
2025-04-15 22:26:58 +07:00
Bogdan Chadkin 61511385f9 fix: show token name when convert local styles to token (#5123)
Ref
https://discord.com/channels/955905230107738152/1360809139810599063/1360809139810599063

There were two problems here

1. empty token name collapsed and was not editable; fixed it with nbsp
2. the label set with dom didn't have proper timing; fixed it by
rendering label by react
2025-04-15 14:29:37 +07:00
Bogdan Chadkin f167b3e6d7 experimental: move advanced animation config to popover (#5124)
<img width="407" alt="Screenshot 2025-04-14 at 17 03 02"
src="https://github.com/user-attachments/assets/5142dc93-5bc1-44a5-868c-a088cac8745d"
/>
2025-04-14 20:18:57 +07:00
Bogdan Chadkin 9e392f4b9c feat: autocomplete remote css variables (#5119)
When user search to add css variable in advanced style section we show
now added css variables as well. Can be handy to update value defined
remotely.

<img width="565" alt="Screenshot 2025-04-12 at 00 25 20"
src="https://github.com/user-attachments/assets/fc69f417-6b04-4ca0-b876-2a1eab6d67a2"
/>
2025-04-12 09:53:16 +07:00
Bogdan Chadkin 8fbda555e5 fix: autocomplete properties with invalid values (#5118)
The logic assumed invalid values should become custom properties. Here
replaced that heuristic with property name check.

<img width="294" alt="Screenshot 2025-04-11 at 19 11 54"
src="https://github.com/user-attachments/assets/d2f08fbf-93ab-47c6-a075-3f4d311cc718"
/>
2025-04-12 00:00:12 +07:00
Bogdan Chadkin 3b8c58b435 refactor: use content model to detect rich text (#5109)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Here I finally got rid from "rich-text-child" necessity. With html
elements in the tree it will no longer work so we need a new way to work
with rich text.

Added a few new utilities to content model which detect rich text by
text inside or any textual tags. Span and links can still be detected as
containers rather than children when not surrounded by text and other
textual elements.
2025-04-10 14:16:34 +07:00
Bogdan Chadkin b1e373975d build: upgrade react-router and remix (#5106)
- security fixes
https://github.com/remix-run/remix/blob/main/CHANGELOG.md#v2164
- cloudflare support fixes
https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v750
2025-04-08 21:35:50 +07:00
Bogdan Chadkin 4b52aaa3dc refactor: add component content model (#5101)
Extended content model to support categories defined in component meta.
Most components has transparent children categories to pass through
constraints from parent, this way we allow descendants with non
category.

Here migrated only core and base components.
Will extend more for animations in another PR.
2025-04-08 13:09:54 +07:00
Ivan Starkov 9cc131adaf experimental: Fix inset reset (onAbort is called on blur) (#5105)
## 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-04-08 09:43:34 +05:00
Ivan Starkov 09f19b5aeb experimental: Animations. Entry animations support (#5102)
## 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-04-08 01:39:47 +05:00
Ivan Starkov e5369ef930 experimental: Youtube animations (#5072)
## Description

### Not finished, should be merged as has small issues fixed

https://video-viking.wstd.work/
https://video-viking.wstd.work/entry

## 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-04-06 14:47:16 +03:00
Bogdan Chadkin c5ce5f6313 refactor: move index property to sdk (#5097)
Slowly moving stuff out of react-sdk
2025-04-05 22:50:06 +07:00
Ivan Starkov a80c062d08 fix: Update Build updatedAt on patch (#5098)
## Description

tested 


```
select "createdAt", "updatedAt" from "Build" where "projectId" = '2d1d1e10-c20b-4061-a02a-ee570179c60c';
```

Result
```
2025-03-10 18:06:45.848+00 | 2025-04-05 10:55:58.263+00
```

## 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-04-05 16:03:00 +05:00
Bogdan Chadkin 42a49563d6 feat: show toast when builder is offline (#5096)
We need to make lack of connection more visible and will show toast
along with offline status.

<img width="1236" alt="Screenshot 2025-04-05 at 14 21 30"
src="https://github.com/user-attachments/assets/cc8e7033-9702-4f62-8c9f-e9797fda1f65"
/>
2025-04-05 17:59:31 +07:00
Oleg Isonen c26dbdc80c feat: add ctrl+enter shortcut for windows (#5095)
## Description

We added cmd+enter but we forgot to add ctrl+enter for windows

## 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-04-05 11:53:56 +02:00
Bogdan Chadkin 31212266c7 refactor: paste new tag with webflow and markdown (#5092)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Here migrated webflow and markdown paste plugins to instance.tag to
avoid adding more legacy "tag" prop.

Also fixed content model for instance.tag and rewrote its tests with
ws:element.
2025-04-05 13:52:25 +07:00
Bogdan Chadkin 8d129e0c6f feat: limit html embed (#5094)
Closes https://github.com/webstudio-is/webstudio/issues/5093

<img width="330" alt="Screenshot 2025-04-05 at 02 48 15"
src="https://github.com/user-attachments/assets/8b74a727-80b9-461c-9bf2-cae09e8fbc45"
/>
2025-04-05 10:51:32 +07:00
Bogdan Chadkin 1506d96241 fix: show advanced properties in global root from other breakpoints (#5089)
The logic hid advanced properties from any remote source even other
breakpoints. Here added a check to hide only when inherited from global
root.
2025-04-04 20:35:41 +07:00
Bogdan Chadkin bb80555bc4 fix: allow placing labelable elements inside of labels (#5085)
Fixes the issue reported in discord
(https://discord.com/channels/955905230107738152/1356788803624501370/1357299346558816306)

Found the spec actually allows to place button and input inside a label.
So now we can generalize this logic.

Also content model validation no longer prevents inserting invalid
structure and only warns user is something went wrong. This will let us
to never block the user with false positives and maybe even figure out
the issue on their own.

<img width="993" alt="Screenshot 2025-04-04 at 01 28 53"
src="https://github.com/user-attachments/assets/46eb041f-2431-4140-b34e-8bc9ad757c47"
/>
2025-04-04 14:32:23 +07:00
Bogdan Chadkin 1dc7af7621 refactor: add tag property control (#5080)
https://github.com/webstudio-is/webstudio/issues/3632

Here added dedicated tag property control which will automatically
migrate Box, Text and Heading components to instance.tag internally and
will be used for ws:element component.

Later will extend tag control with tag descriptions and auto inferring
matching tags.

<img width="428" alt="Screenshot 2025-04-02 at 15 56 46"
src="https://github.com/user-attachments/assets/fa8d24ba-b9e8-4221-b47a-a9e923475bb6"
/>
2025-04-03 11:07:43 +07:00
Michael 38678a442e fix: render delete icon only in design mode for folder settings and duplicate icon for page settings #5038 (#5083)
fixes: #5038 

## Description
delete button shows on folder settings in content mode and duplicate
button shows for page setting. this fix removes these buttons in content
mode.

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. switch to content mode on your project
2. got to page/folder settings
3. expect that duplicate icon/delete icon should not be visible
4. 
## 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)
- [] 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-04-03 09:54:28 +07:00
victor immanuel 3944cbb9cd fix: show proper validation error message when user inputs old path in redirect section (#5082)
## Description

fixes: #5050 

fixes the validation error message when user enters old path in
redirects section.


![image](https://github.com/user-attachments/assets/e4f2793d-5179-467d-9655-95247b9e8439)


## Steps for reproduction

1. go to project settings.
2. redirects tab
3. enter a url like https://website.org in old path input field.
4. the validation error will we shown in the tooltip.

## 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)
- [ ] 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-04-03 09:40:55 +07:00
Bogdan Chadkin 4b65a09375 fix: show proper shadow labels (#5081)
Ref
https://discord.com/channels/955905230107738152/1356952800621494363/1356952800621494363

Forgot about labels while migrating to shadow value

<img width="250" alt="Screenshot 2025-04-02 at 20 24 35"
src="https://github.com/user-attachments/assets/9e2995e9-5f43-4408-b573-52d6b11e4b94"
/>
2025-04-03 02:32:25 +07:00
Bogdan Chadkin a9ec11b90e fix: add more insert edge cases (#5078)
We introduced html content model which restricts how html elements can
be nested into each other. Here fixed two edge cases

- allow to put div into buttons, headings or any other phrasing content
- allow put images into interactive elements like a > img
2025-04-02 18:19:23 +07:00
Oleg Isonen 71cafd2178 experimental: Animation descriptions (#5075)
## 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-04-02 00:36:31 +02:00
Bogdan Chadkin d5bc0f9760 feat: enforce html content model (#5074)
Ref https://github.com/webstudio-is/webstudio/issues/3632

This is a big step into native html elements support. I scraped content
model from html spec and now enforcing all html tags structure so we no
longer need to write custom restrictions.

Now paragraph cannot be nested into heading. Box cannot be nested into
span Text though still can in div Text. Any interactive elements cannot
be nested automatically. List item should have a list as direct parent
(collection and slot are exception because they don't have elements
inside).

Most rules are defined in this table
https://html.spec.whatwg.org/multipage/indices.html#elements-3
2025-04-01 22:07:56 +07:00
Bogdan Chadkin a7eff393bb refactor: manually namespace meta (#5073)
Here got rid from auto namespacing meta.constraints and
meta.indexWithinAncestor to unlock using components from other sdk
packages.

Now package prefixes should be explicitly specified in meta though with
the help of proxy.

Though exports are still need to prefix automatically when install
package.
2025-03-31 18:06:38 +07:00
Bogdan Chadkin 0a6e282a82 fix: prevent dragging folder inside of itself (#5070)
User reported the case which probably bugged us a few times but we could
not figure out why.

Here added guard to prevent reparanting page folder inside of itself or
child folders.
2025-03-29 00:44:30 +07:00
Bogdan Chadkin 7a73f40889 refactor: upgrade react-router and remix (#5067)
Ref
https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v740
2025-03-28 18:16:31 +07:00
Oleg Isonen 07fbc3b155 refactor: Use consistent naming of the meta key (#5069)
## Description

We are using "meta" in commands, but "cmd" in Kbd, now this is
consistently called "meta" everywhere.

## 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-28 12:07:42 +01:00
Bogdan Chadkin 945bf04331 experimental: add field label for animation section (#5068)
Added generic field label to give animation labels similar experience to
property labels.
<img width="268" alt="Screenshot 2025-03-28 at 15 30 34"
src="https://github.com/user-attachments/assets/a9d15f03-8e8b-4f9a-8d77-e4b7847de87e"
/>
2025-03-28 17:17:01 +07:00
Oleg Isonen 64dde50c70 experimental: Animations section, new component names, new icons (#5062)
## Description

<img width="280" alt="image"
src="https://github.com/user-attachments/assets/b3c29952-8c10-4e8f-88f0-8cea45df87ba"
/>


## 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-27 18:54:55 +01:00
Ivan Starkov 678dde8c23 experimental: Animation axis Icons change (#5060)
## Description

<img width="255" alt="image"
src="https://github.com/user-attachments/assets/dffc4f96-f669-4f65-883c-1acafecea4c2"
/>


## 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-27 09:55:49 +03:00
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
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
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