135 Commits
Author SHA1 Message Date
Oleg Isonen 04188dbbf4 feat: CSS Grid UI (#5614)
## 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
2026-03-08 10:52:21 +01:00
Oleg Isonen d339dc55cf feat: Add token conflict detection and resolution for marketplace templates (#5609)
- Add Token class and token() helper in template package for JSX token
support
- Refactor insertFragmentWithConflictResolution to
detectFragmentTokenConflicts
- Refactor insertPageWithConflictResolution to detectPageTokenConflicts
- Move dialog display to callers for better testability
- Add conflictResolution parameter to page-utils
- Add comprehensive tests for token functionality and conflict detection
- Fix bug: remove .values() call on arrays in breakpoint handling
2026-02-05 22:34:17 +01:00
Oleg Isonen 11ba996f13 feat: New token conflict resolution logic (#5524)
Fixes https://github.com/webstudio-is/webstudio/issues/5491

## Description

- When pasting an instance with tokens, we can compare the name and the
contents. If they are identical, we can choose the existing one and
avoid having any conflicts.
- When pasting a token and the name is already used, add a numeric
suffix to it.
- find duplicate tokens command that will go based on content even if
name is different


## 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-12-18 17:31:31 +01:00
Oleg Isonen ff2e086632 feat: Convert instance to an instance of a different component (#5522)
Closes https://github.com/webstudio-is/webstudio/issues/5523

## Description

- convert command now shows a list of available components
- along the way cleaned up commands.ts and made namespaced subscribe api
to subscribe for specific actions

## 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-12-16 22:17:18 +01:00
Oleg Isonen dcdac0eaa7 feat: Project settings dialog accessible from dashboard (#5514)
## 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-12-15 17:23:16 +01:00
Oleg Isonen d91aa5821e feat: Context menus for navigator, canvas and tokens (#5511)
## Description

- [x] context menu for navigator
- [x] context menu for canvas instances
- [x] right click to open token menu
- [x] pages and folders context menu
- [x] duplicate pages

## 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-12-14 22:49:53 +01:00
Oleg Isonen 876b02aaec feat: Wrap an instance into any component that can do it (#5508)
Closes https://github.com/webstudio-is/webstudio/issues/5507

## 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-12-13 00:16:47 +01:00
Oleg Isonen f712740b94 fix: Fix delete unused css vars and unused detection (#5505)
## Description

- deleting all unused command only worked if the properties were on the
selected instance
- variables used inside of calc calls and similar were not found

## 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-12-12 13:27:22 +01:00
Oleg Isonen 46c964d292 fix: fix css vars search (#5494)
## Description

In case of css variables defined on the root, the instance id is :root
and its not found in the instances. Simplified overall getInstanceLabel
usage.

## 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-12-10 00:16:37 +01:00
Bogdan Chadkin 8d14d1b5e3 refactor: generate modern color syntax (#5456)
Ref
https://github.com/webstudio-is/webstudio/issues/3574#issuecomment-3529164146

Here added ColorValue to styles schema.
toValue now generates modern syntax like rgb(0 0 0 / 0.5) for both color
and rgb values.
2025-11-23 23:26:37 +03:00
Bogdan Chadkin de444a3501 fix: copy paste search params in resources (#5412)
Reproduced when tried to insert the new baserow template
2025-09-27 16:47:49 +03:00
Bogdan Chadkin 04949cbc88 feat: wrap text with span element when droppping instances into it (#5237)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Here changed insertion logic to wrap rich text with span element instead
of Text component when drop into it. This is the last place which
creates legacy components.

Refactored tests with jsx to make them more readable.
2025-05-28 12:11:10 +03:00
Bogdan Chadkin e35de86421 experimental: add icons to html elements (#5219)
Ref https://github.com/webstudio-is/webstudio/issues/3632

<img width="281" alt="Screenshot 2025-05-18 at 18 37 16"
src="https://github.com/user-attachments/assets/0b95b674-c9fa-4f5d-b79d-b1ce6023dba8"
/>
2025-05-18 20:46:45 +03:00
Bogdan Chadkin 28e61f49bd experimental: add matching tag when insert element component (#5204)
Ref https://github.com/webstudio-is/webstudio/issues/3632

Now element does not provide default tag and instead builder will try to
find tag matching its parent.

This way we can insert element, give it "ul" tag
and then insert another element into it which will match only "li"


https://github.com/user-attachments/assets/3ea87624-9524-4f2e-91b2-d658d16d7a1b
2025-05-13 12:46:40 +04:00
Bogdan Chadkin 59b6471c4f experimental: support paste html (#5185)
Ref https://github.com/webstudio-is/webstudio/issues/4404

Slightly reworked paste story. Now minimal API to insert html looks like
this

```js
const fragment = generateFragmentFromHtml(html);
insertWebstudioFragmentAt(fragment);
```

- attributes are casted to string, number and boolean types
- text is wrapped with spans when outside of rich text
- unsupported tags are ignored in result



https://github.com/user-attachments/assets/c8072d86-72bd-4446-a26a-e678b193f93e
2025-05-06 13:31:13 +04:00
Bogdan Chadkin 525804389f experimental: add Element component to builder (#5182)
Ref https://github.com/webstudio-is/webstudio/issues/3632

- Added template for Element component in builder
- Render Element component on canvas
- Labels are shown as html tags
- Element has div tag by default

<img width="276" alt="Screenshot 2025-05-04 at 03 17 53"
src="https://github.com/user-attachments/assets/2f55b5d0-b6a0-4152-968b-842f4fcd18ea"
/>
2025-05-05 11:15:14 +04: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 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 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 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 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 9397f7af0c experimental: Add banner to Animate components (#5041)
## Description

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

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
2025-03-25 13:59:17 +05:00
Bogdan Chadkin 5bfd37f413 refactor: drop embed template usages (#5040)
Dropped meta.template and copy paste plugin with embed template. The
only left usage is AI generation.
2025-03-25 10:58:20 +07:00
Bogdan Chadkin 47d0517223 fix: reparent within another slot instance (#5021)
Ivan found a bug. Reparent slot child into another instance of the same
slot got this child removed.

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

Rewritten reparentInstance with reparentInstanceMutable to simplify
testing and make it composable (if ever need). Added more tests.
2025-03-20 21:21:09 +07:00
Bogdan Chadkin a273abadb4 fix: navigate to home page when undo page creation (#4995)
Fixes https://github.com/webstudio-is/webstudio/issues/4993
2025-03-13 22:32:59 +07:00
Bogdan Chadkin 4e6a448d96 fix: insert marketplace sections after selected instance (#4918)
Closes https://github.com/webstudio-is/webstudio/issues/4902

Rapid prototyping requires slightly different logic for inserting from
marketplace so sections could be added one after another.
2025-02-27 01:44:21 +07:00
Bogdan Chadkin 23034dad25 feat: add global system variable in builder (#4896)
Closes https://github.com/webstudio-is/webstudio/issues/4166

Now system is global variable and can be accessed in slots.

Legacy one can be deleted

<img width="264" alt="image"
src="https://github.com/user-attachments/assets/1c1d60f5-6be2-4871-9970-3593e3e7c08a"
/>
2025-02-23 01:46:21 +07:00
Bogdan ChadkinandOleg Isonen 34e18b35ae fix: allow broken variables when validate updates (#4892)
Some templates have variables with missing scopeInstanceId on dialogs or
something else from broken embed template. Here allow it in validation
because migration would be more complex.

---------

Co-authored-by: Oleg Isonen <oleg008@gmail.com>
2025-02-18 23:20:02 +07:00
Bogdan Chadkin c3ac4d6ec1 fix: preserve global variables when duplicate page (#4875)
Missed the case. Global variables were recreated and got invalid state.
Now global variables are reused or added without changes.
2025-02-15 02:53:09 +08:00
Bogdan Chadkin 8ed3fbb085 feat: support global data variables (#4870)
Ref https://github.com/webstudio-is/webstudio/issues/4166
https://github.com/webstudio-is/webstudio/issues/3686

Added "Settings" section to global root. Now users can create data
variables which are available for all pages and inside slots.



https://github.com/user-attachments/assets/be2cf862-08ec-427e-aea3-076fa03a4437
2025-02-15 01:23:16 +08:00
Bogdan Chadkin ba3c964095 fix: cleanup parent children when delete instances (#4859)
Was missed while refactoring. Wrong data was mutated.
2025-02-12 16:52:16 +08:00
Bogdan Chadkin aa527ae2e9 refactor: rewrite more copy paste tests with jsx template (#4845)
Ref https://github.com/webstudio-is/webstudio/issues/4093

1. rewrote tests with jsx template
2. fixed copying prop resources with slots
2025-02-08 22:06:22 +07:00
Bogdan Chadkin 453956bf83 refactor: delete prop resources (#4839)
Ref https://github.com/webstudio-is/webstudio/issues/4093

Here a few delete instance improvements

- fixed deleting resources bound to props (action in webhook form)
- rewrote all tests with jsx template
- switched from instance selector to instance path
- added slot test
2025-02-07 10:50:44 +07:00
Bogdan Chadkin 870de384e3 feat: restore variables by name when copy-pasting (#4824)
Ref https://github.com/webstudio-is/webstudio/issues/4768

Unset variables when copy and restore when paste.

Now you can copy instances with references to `system` variable and it
will be connected on another page as well when you paste.
2025-02-04 10:59:06 +07:00
Bogdan Chadkin 080168ea19 feat: show inherited data variables (#4774)
Ref https://github.com/webstudio-is/webstudio/issues/4768

Here made a few changes to align data variables with css variables.

1. inherited variables are also shown in "Data Variables" section in
Settings
2. local and remote variables have blue and orange labels
3. local variables with the same name "mask" inherited variables in the
list
4. inherited variables can only be inspected

<img width="244" alt="image"
src="https://github.com/user-attachments/assets/bf4648e6-b5fc-48cb-a6c3-a6d5e8b234cd"
/>
2025-01-24 11:18:08 +07:00
Bogdan Chadkin 94f219c249 refactor: rewrite core components templates with jsx (#4756)
Here refactored all core components with jsx templates and moved them to
sdk package. Fixed all imports as well.
2025-01-17 18:29:40 +07:00
Bogdan Chadkin 14494a9c77 fix: relax detaching constraint (#4672)
Every time somebody is facing invalid constraint issue whole tree is
blocked from deleting instances except the problematic one with actual
issue.

Here rewrote detachability check to validate only ancestors and avoid
traversing potentially problematic siblings.
2025-01-07 02:28:15 +07:00
Bogdan Chadkin 86defe847f refactor: move component meta to sdk (#4720)
Moved all component meta and embed template to sdk schema. Embed
template generator is left in react-sdk, will probably be removed
eventually.
2025-01-05 23:20:23 +07:00
Bogdan Chadkin bd4c75242d fix: insert multiple instances when paste from markdown (#4680)
Fixes https://github.com/webstudio-is/webstudio/issues/4678

Missed a case markdown can insert multiple new instances.
2024-12-31 11:48:44 +07:00
Bogdan Chadkin a32d6329ed refactor: add templates meta support (#4653)
Here added one more description file for components `*.template.tsx`.

It is decoupled from component meta to fix the issue with some templates
like Sheet being treated as components though we don't have actual
components with this name.

Another reason is have it separately to not include builder specific
code and dependencies into CLI and published websites. Template package
is defined as optional in peer dependencies meta.

In this PR migrated only Button and List as examples. There is still not
support for data sources and styles.

Added support for text placeholders in children
2024-12-25 21:37:15 +07:00
Bogdan Chadkin 1315731c76 refactor: insert new component copy (#4648)
Our copy paste is able to merge breakpoints so we can leverage it when
generate new component template. Here instead of passing base breakpoint
id I invoke insertWebstudioFragmentCopy with generated breakpoint which
is merged into project one.

Also switched plugin-embed, plugin-markdown and ai to use the same
insertWebstudioFragmentCopy utility.
2024-12-24 23:08:55 +07:00
Ivan Starkov ea88935731 feat: RichText edit / command menu (#4621)
## Description

ref #4595

Search is working

<img width="246" alt="image"
src="https://github.com/user-attachments/assets/5dc850e4-6a36-4996-9aaa-f051ac7e977f"
/>

Arrow keys, enter, mouse click is working.



https://p-15889dd9-ed47-46db-9411-fa18c1efb2fe-dot-edit.development.webstudio.is/

- [x] - Enter and click
- [ ] - Repeat > N then close menu (later)
- [x] - In case of select item clear cmd `/blabla`
- [x] - Put cursor inside 1st editable block of the new instance
- [x] - Should work only inside editable content

## 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
2024-12-20 16:21:56 +03:00
Bogdan Chadkin cfeb75c876 refactor: replace detachable: false with constraints (#4548)
Here got rid of detachable flag in favor of more universal constraints
queries.

Despite of detachable constraints allow to drag such nodes but limits
drop target more precisely.

Try any radix component.
2024-12-13 00:55:36 +07:00
Bogdan Chadkin 823843845a fix: navigator dnd bugs (#4546)
- fixed dropping into non-container instances (like image)
- fixed dropping instances from another block
2024-12-10 16:48:32 +07:00
Bogdan Chadkin dad162cc23 fix: stop duplicating required children on reparent (#4537)
Turns our delete does not clear instances when detachable check fails.
Good news: new child constraints were added only to tabs. Bad news: I
think deleting pages kept instances in the build, oops.

Fixed reparent and added checks for delete only where necessary.

How to test

- insert tabs content
- delete second trigger and content
- reposition trigger
- it is duplicated
2024-12-09 01:05:24 +07:00
Bogdan Chadkin fb2c6b57cc refactor: improve constraints errors (#4535)
Now errors are toasted when insert or paste anything. Legacy constraints
are removed from components.
2024-12-08 21:39:15 +07:00
Bogdan Chadkin ce2babe3d0 refactor: add child and descendant matchers (#4520)
Now we have two more matcher for direct children and descendants.
Eventually they will replace "detachable" flag in meta.

Here used new matchers to prevent user from deleting last tab trigger or
last tab content which cannot be readded from components panel.

Added matchers check to "delete" and "cut"
2024-12-06 16:46:44 +07:00
Bogdan Chadkin b2137c1a7c refactor: migrate dnd to new constraints (#4507)
Replaced legacy utilities with matchers

List item no longer possible to place into list item, thanks to new
parent matcher.

Dnd in navigator and on canvas can be tested
2024-12-05 00:24:23 +07:00
Bogdan Chadkin 2d3d62ab75 refactor: add new insert constraints (#4499)
Here added new constraints format which will allow us build more
expressive lookups and matchers for internal logic and components
constraints.

For now added only ancestor, parent and self matchers with $eq, $neq,
$in, $nin operations.

Closes https://github.com/webstudio-is/webstudio/issues/2193 "$in"
operation works like "or".
2024-12-04 15:35:55 +07:00
Bogdan Chadkin bc0f6bb6a3 refactor: generalize insertable lookup (#4398)
Here replaced a bunch boilerplaty code with more general
findClosestInsertable. This also reduced amount of explicit instance
selector calls. Prevented inserting list item into body. Refactored
tests with jsx.
2024-11-10 23:02:15 +04:00