3239 Commits
Author SHA1 Message Date
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
Ivan Starkov 5526222072 build: Fix migrations (#4241) 2024-10-08 00:47:51 +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 77e31218eb build: upgrade devtools (#4230)
- storybook
- eslint
- esbuild
- tsx
- vite
2024-10-06 17:08:14 +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
Oleg Isonen 5031292cca fix: fix color thumb vertical alignment (#4207)
## Description

Noticed this 1px misalignment because display inline-block is affected
by line-height.

<img width="55" alt="image"
src="https://github.com/user-attachments/assets/729e1a37-be3b-44dd-a672-855e6d87f4ad">

<img width="50" alt="image"
src="https://github.com/user-attachments/assets/f9930925-800c-4930-8a75-12383d8babe3">


## 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-03 16:40:44 +02:00
Oleg Isonen 9fd5ce0552 experimental: Abort controller (#4195)
## Description

I tried how the code will look like with abort controller, if you don't
like it - we can close this without merging


## 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-03 13:55:43 +02:00
Bogdan Chadkin 22e8f2b239 experimental: parse length and color in css variables (#4204)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Here improved parsing to automatically infer unit and color style values
in css custom properties.

This will let us in the future leverage strictly typed custom properties
for interpolation in animations.

Now the benefit is proper ui and filtering out unit in color pickers and
color in length inputs. Not implemented though yet.

![Screenshot 2024-10-03 at 13 31
20](https://github.com/user-attachments/assets/b32db3d3-8589-4cd4-b375-fb2036a308a0)
2024-10-03 14:44:50 +03:00
Bogdan Chadkin 1a4f663577 experimental: allow pasting styles into style source (#4200)
Ref https://github.com/webstudio-is/webstudio/issues/3399

He added support for paste style declarations into style source or
state. It will let us create collections of custom properties like open
props with a few clicks.

The downside is browser prompt with permission confirmation because we
use "unsafe" navigator.clipboard.readText() instead of paste event.



https://github.com/user-attachments/assets/8e0153b6-5b98-4f07-bb2c-aac6bc51c6d3
2024-10-02 18:26:32 +03:00
Bogdan Chadkin bbf37d3e61 refactor: simplify var value fallbacks (#4201)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Initially css variable fallback was defined in schema as array though
it's actually a single value by spec and may contain commas. We don't
have css variables in data yet so should be safe to change schema before
too late.
2024-10-02 18:05:05 +03:00
Oleg Isonen f4bd1d1a2a fix: avoid props autofocus (#4199)
Closes https://github.com/webstudio-is/webstudio/issues/3996

## Description

Auto focusing the first property value in settings when switching to
settings seemed like a good idea until the point if you leave settings
open and switch instances, you don't want that focus to be taken away
from navigator or anything else.

Seems like better to not have it autofocus at all in this case.

## 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-02 15:13:33 +02:00
Bogdan Chadkin ce475d4677 experimental: support copying root styles from marketplace (#4193)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Now we have a way to deliver custom properties to user projects.
2024-10-02 15:06:14 +03:00
Bogdan Chadkin 275ec4a91a fix: switch to available inspector panel (#4194)
Fixes https://github.com/webstudio-is/webstudio/issues/4190

Broke the logic of auto switching to first available panel.
2024-10-02 14:03:26 +03:00
Oleg Isonen 052fe9e55c feat: auto-detect font weight based on selected font family (#4134)
## Description

I rewrote the font weight display logiс in the following way:

1. We now detect for each font  which weights are supported
2. Unsupported weights are lighter gray in the list, but user can still
choose them, we just hint that the weight may not be supported, because
with font stacks, you can have different fonts supporting different
weights, we are testing the one user can see right now

## Steps for reproduction

1. try switching between different stacks and see that when hovering the
font width that is light gray, its not affecting canvas, meaning our
detection was correct and that weight is not supported
3. same thing for any custom font

## 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-01 22:55:10 +02:00
Bogdan Chadkin d74b3e6b65 refactor: remove deprecated tree (#4180)
We refactored both pages and navigator with new tree.
2024-10-01 18:49:07 +03:00
Bogdan Chadkin c05ccdd851 experimental: generate root styles for published sites (#4177)
Ref https://github.com/webstudio-is/webstudio/issues/3399

- render layout hack (display: grid; min-height: 100%) as root preset
styles
- generate root user styles on published sites
- moved typography preset from body to the root
- bumped a couple of deps

<img width="240" alt="Screenshot 2024-09-28 at 23 25 08"
src="https://github.com/user-attachments/assets/eaf7476e-f488-4f1f-89db-6d464c05b35f">
2024-10-01 13:54:10 +03:00
Ivan Starkov 482839e83a chore: Remove prisma from the Builder app (#4182)
## 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-01 13:51:50 +03:00
Oleg Isonen 2c60a3eea4 fix: Fix font family bugs (#4184)
## Description

2 bugs are getting fixed here:

1. when opening fonts manager, we immediately set a value on blur, but
when font manager is open this should not be needed
2. when on blur and onhighlight (dropdown) value is set, its not being
parsed as css, so the entire stack: "Arial, Verdana, serif" becomes a
value in a stack {type: 'fontFamily', value: ['Arial, Verdana,serif']}
instead of {type: 'fontFamily', value: ['Arial', 'Verdana', 'serif']}

## 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:
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-01 10:08:59 +02:00
Ivan Starkov d6e2177a40 fix: Collapsed recalculate loop during load (#4178)
## 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-09-29 13:57:29 +03:00
Bogdan Chadkin 84250f4cd8 experimental: add :root support (#4175)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Now we have a way to change rem and define global css variables

- show root node in navigator behind flag
- show style panel when root is selected
- inherit styles from root
- show advanced styles defined on root in descendents
- show browser styles for root (`html { display: block }`)
- show initial values instead of `inherit` in root typography
- render root styles on canvas
- property label shows root as the source

Note: generated sites are not supported yet
<img width="825" alt="Screenshot 2024-09-27 at 19 24 41"
src="https://github.com/user-attachments/assets/4c17f86a-74d8-4518-8145-854dbdbee11a">

<img width="1304" alt="Screenshot 2024-09-27 at 19 09 51"
src="https://github.com/user-attachments/assets/6003fd49-5ecb-46cd-9df7-85c571f82e32">
2024-09-28 13:01:43 +02:00
Ivan Starkov 34cd2104d2 fix: canvas autoscroll issue when selecting instances (#4174)
## Description

closes #4169

## Steps for reproduction

Shoud be tested well as having various scroll/resize/mutation obserevers
we have, everything can cause infinite cycle

## 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-09-27 21:14:01 +03:00
Bogdan Chadkin 671fdd50b2 refactor: reimplement navigator tree with new component (#4165)
Ref https://github.com/webstudio-is/webstudio/issues/3399

What to test

- hover
- select
- hiding (with show button) item should be transparent
- slot should be purple
- hide slot fragment
- render collections
- enter should trigger edit instance text
- support editing instance label with cmd+e
- should prevent dragging rich text child
- should prevent dragging non detachable instances (accordion header)
- should support reparenting after the last child
2024-09-27 19:33:00 +02:00
Ivan Starkov d7af39652a fix: DNS copy buttons don't trigger/show tooltips like "Copied" (#4160)
## Description

closes #4152

## 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-09-25 20:36:50 +03:00
Oleg Isonen ae287ab66a fix: Fix scrolling for some users on Windows 10 + Chrome 129 (#4163)
Closes https://github.com/webstudio-is/webstudio/issues/4128

## Description

should fix both: style panel and canvas scrolling

## 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-09-25 19:15:05 +02:00
Oleg Isonen a0bce7284c fix: fix font family control when value is inherit (#4161)
## Description

Turns out value in controls can also be {type: 'inherit'}, not just type
fontFamily

## 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-09-25 16:37:01 +02:00
Ivan Starkov 6ba6fc5ce8 feat: Preview by publishing to subdomain only aka staging (#4143)
## Description

closes #2644

- [x] - Merge this https://github.com/webstudio-is/webstudio/pull/4156
into this PR

- If the user has no custom domains:
  - [x] Checkbox for Pro users is not shown.
  - [x] Checkbox for Free users is shown but disabled (Tooltip enabled).

- If the user has custom domains:
  - No Pro:
    - [x] Checkboxes are shown disabled with Tooltips.
  - Pro:
    - Users can select any checkbox (no Tooltips).

- Current indexing logic:
- If a user has custom domain(s), upon publishing, the `*.wstd.io`
domain will receive the meta tag:
    ```html
    <meta name="robots" content="noindex, nofollow">
    ```

- [x] - Fix example.com in tests (NEXT PR #4156) 
- [ ] - saas cleanup should be changed (we need to preserve latest build
by domain now) (NEXT PR)
- [x] - Disable Publish Button if no checkboxes are selected

- "With the Pro, you’ll gain the ability to publish to each domain
independently!"
<img width="477" alt="image"
src="https://github.com/user-attachments/assets/105577e5-318f-4146-a3eb-38c2117f6f79">

## Steps for reproduction

### Non Pro

- Login as a new non Pro User `pass:vaska@pupkin.ru`
- Create a new Project, Click Publish. Expect Disabled Checkbox with
Tolltip is visible. Publish is Enabled.
<img width="445" alt="image"
src="https://github.com/user-attachments/assets/e48654af-1969-4f96-b048-a3fa72303b8f">
- Publish, check it published.
- Add custom domain, Publish, check both are published.

### Pro

- Login as a Pro User `pass`
- Open new Project. Expect No checkbox. One wstd domain.
<img width="351" alt="image"
src="https://github.com/user-attachments/assets/c62f9ae5-669a-46ad-a2f2-32ba333068f9">
- Publish. Expect it published.
- Add domain. See checkboxes visible after domain activated.
- Publish. Expect both published.
- Uncheck checkboxes, see publish button disabled. See it has 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

- [ ] 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-09-25 10:24:23 +03:00
Bogdan Chadkin 8bd3897dae refactor: make new tree sortable (#4145)
Added dnd support for the new tree with pragmatic-drag-and-drop. Can be
tested in stories.
New drop indicator reuse pragmatic utility and much simpler to maintain
than previously used horizontal shift.



https://github.com/user-attachments/assets/f3cdd80f-0c2d-4f4a-a140-aee66ad8b29f
2024-09-23 21:20:37 +02:00
Bogdan Chadkin d48149fd60 fix: handle invalid or unknown properties (#4151)
Fixes the issue with non existent "before" and "after"
https://discord.com/channels/955905230107738152/1286696101076009031/1286696101076009031
2024-09-23 17:15:31 +02:00
Oleg Isonen adf473b403 chore: chanigng the amount of free custom domains to 1 (#4148)
## Description

Reason is that users are creating several accounts and with 5 per
account, they can easily get way too many custom domains for free.

## 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-09-23 14:26:13 +02:00