## Description
Merge after #2415
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Previous PR: #2414
Now, by default, we set the width attribute when adding an image. This
change could cause mobile screens to load oversized images—specifically,
width * 2. To mitigate this, we're adopting the viewport width
descriptor for srcSets. This approach ensures optimized image loading on
smaller screens and maintains previous behavior on screens wider than
the image's actual size.
## Steps for reproduction
Add images of various sizes, see srcSet
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Instead of `aspect-ratio` css property set `width` and `heigh` html
attributes for the image and set css property `height` to `fit-content`
to preserve ratio.
This removes all known issues we had with images.
- No layout shift on published site load
- No layout shift on published site and 404
- No small image size jumps during canvas resize
Next PR.
Apply full image optimisation even if width property is set (with some
adjustments).
## Steps for reproduction
Add image, see `width`, `height` html attributes has changed.
See css property `height` has changed to `fit-content`
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Fixes this.
Now on all screens initially rendered canvas width is same.
## Steps for reproduction
Reload project, see canvas not jumping.
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
New version of immerhin moved global queue into store instance so we can
stop filtering and just call store.popAll().
Also replaced default store with webstudio own serverSyncStore instance.
Now auto import works much better.
## Description
fix no-underline
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
closes#2405
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
This PR integrates a rate-limiting mechanism into the app using Vercel's
edge-layer middleware in combination with the Hono framework. This
middleware is written in JS with full JSDoc TypeScript typings.
### Architecture & Strategy
Vercel Middleware: Serves as the front-line defense, running at the edge
for optimal performance.
Hono Framework: For granular control, we utilize Hono middlewares for
applying or skipping rate limits.
Additionally, non-expensive routes benefit from an ephemeral cache to
further optimize performance
### Current Limitations
Due to a dependency on CommonJS, we cannot use TypeScript fully.
Consequently, session configurations are not yet shared across multiple
files. All utility functions are present in a single file for the time
being.
### Logic Breakdown
- Assets: Rate limiting skipped.
- Service Calls: Rate limiting skipped.
- /rest/ai/* Endpoint: Rate limit of 20 requests per 5 minutes,
identified by userId or IP.
- Unauthorized Users: Rate limit of 5 requests per 5 seconds, based
solely on IP.
- Authorized Users: Rate limit of 20 requests per 5 seconds, based on
userId.
### Next Steps
Plan to migrate to ESM for enabling TypeScript support for better
maintainability.
Use multiple regional KV
### Debug endpoint.
[Rate limit debug
endpoint](https://webstudio-builder-kscynssns-webstudio-is.vercel.app/rate-limit-debug)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Implement AI copywriter functionality behind feature flag. The final UI is not included in this branch.
The feature consists of:
- a `copywriter` chain to generate the copy with AI
- a /rest/ai/copy endpoint to handle generation requests. The response
is streamed as plain text
- the temporary test UI which is a tab in the right sidebar.
For every selected instance it allows to generate copy for it and its
subtree. A `collectTextInstances` utility creates an array of text nodes
objects with the following shape:
```ts
{
instanceId: string;
index: number;
type: "Heading" | "Paragraph" | "Text";
text: string; // current text or empty
}
```
The AI responds with an array of these where the text property contains
the generated text. The frontend parses incrementally and updates a
Webstudio instance by `instanceId`.
The `index` is used to replace the proper text node in the
`instance.children` array. When all the children are text nodes these
are merged into a single text node, otherwise the AI would generate
`children.length` copy. We identify this case by setting the `index` to
`-1`.
## Description
Run link sequentially, this fixes cli link test
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Here migrated instances shortcuts like delete, duplicate and edit label
to commands.
Added two more options disableHotkeyOnContentEditable and
disableHotkeyOnFormTags to not break builtin shortcuts.
When we put placeholders into data ai may confuse them with actual
content. So here put placeholders into component and render when no
content present.
Though this bring one side effect in UX. When user start to edit text it
gets empty content without cursor. This will be fixed later.
For now just unblock ai changes.
Adds utils to work with JSX and transform it to Webstudio Embed Template
as well as converting Tailwind styles to Webstudio Embed Template style
declarations and a fake `<HeroIcon>` component to `HtmlEmbed` with
inline SVG taken from heroicons (we will need this for ai).
Here fixed two-way synchronization of commands between builder and
canvas. Added flag to not share hotkey with other apps.
Added first two commands specific to canvas: editInstanceText and
escapeSelection. Builder is able to reuse commands by specifying inn
"externalCommands" which basically extends the union of commands.
Added new commands emitter utility to manage hotkeys across plugins and
separate a lot of logic from canvas.
Here migrated only togglePreview as an example.
Later we can build commands panel and hotkeys overrides on top of this
utility.
## Description
1. I was wrong about borders conversion when wrote shorthand, fixed.
2. Add border-style: solid whenever needed if borderWidth is defined
(tailwind has border-style: solid predefined)
3. Add box-shadows transform
## Steps for reproduction
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.example`
and the `builder/env-check.js` if mandatory
Internal data structures like instances, props, data sources, assets and
pages no longer necessary in generated sites. Nanostores not longer used
to store them.
Now we have less dependencies and smaller runtime.
## Description
1. Add support of simple tuple types to the parseCssValue
2. Add background properties conversion
## 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.example`
and the `builder/env-check.js` if mandatory
## Description
transform tailwind classes to webstudio format
Next PRs.
Postprocessing backgrounds and shadows support. As of now backgrounds
will be drawn but will not be visible at style panel
## 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.example`
and the `builder/env-check.js` if mandatory
## Description
- apply tailwind transform, expand and substitute to get compatible css
with webstudio
- media and pseudo classes temporarily removed from variable
substitution (need specificity calculations for both, we don't support
media in templates)
## 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.example`
and the `builder/env-check.js` if mandatory
## Description
Gonna merge this before next step.
Helper functions to parse tailwind.
1. `expandTailwindShorthand` - Expands shorthand CSS properties into
their long-form equivalents. _'mx' is expanded to 'mr' (margin-right)
and 'ml' (margin-left)._
2. `substituteVariables` - Resolves CSS variables by replacing their
references with actual values. _Transforms `.class { --property: 1px;
margin: var(--property); }` into `.class { margin: 1px; }`._
## 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.example`
and the `builder/env-check.js` if mandatory
## Description
Removes feature flag for radix elements in the editor.
## Code Review
- [ ] hi @TrySound , I need you to do
- detailed review (read every line)
## Description
Adds the `netlify` deployment commands sequence. Tested one by one,
seems to be the best flow i can come by. Would like to validate on
someone else too.
## Code Review
- [x] 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
## Description
fixes#2372
Updates the export dialog with the new deployment target changes.
## Code Review
- [x] hi @kof, I need you to do
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [x] made a self-review
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Small changes that adds checks for templates and hints for templates in
the `--help` command.
## Steps for reproduction
```sh
webstudio-cli --help
```
## Code Review
- [ ] hi @TrySound , I need you to do
- detailed review (read every line)
Nanostore react wrappers in many cases introduce additional renders
because of subscription even when only store.set is used. Searching for
references become complicated because we have both direct store access
and react wrapper.
Here migrated to use direct store access for preview mode store and
renamed it to $previewMode according to new convention.
These functions are unnecessary boilerplate. Having single useMount in
builder root give us better understanding of set logic and allow to
easily find other store references.
This PR introduces the baseline `@webstudio-is/ai` package which
includes:
1. A LLM Abstraction (types) for messages format to make requests to a
model
2. An implementation of the above that uses the OpenAI chat completion
endpoint
3. A common interface for chains. Chains are regular async functions
that can execute an arbitrary number of steps, including calling a LLM
via a model client.
The idea is that a builder API route can use any of these chains to
perform a task that requires AI. For example generate text copy, images,
a theme etc.
Here generated a list of pages paths. It is used in link component to
switch to remix link internally when the link is app route.
Providing whole pages list can bloat runtime when there are many pages
or when there are many seo data so having single page per route should
be enough.
The list is always empty in builder because links are managed with
global interceptor. Ideally frameworks should uses navigation api and
distinct routes from other paths so we would not need to generate
anything.
Moved links resolve into props normalizing which is called for whole
project before rendering converting page prop into string.
Remix links now check only if provided path matches any page. Ideally it
should be handled with navigation api to remove all complexity from
links components.
This will let us stop rendering props and assets data in generated
pages.
Also fixed links with hashes.
## Description
This PR adds support for templates.
- Extracted out the defaults like `.vercelignore` and `image-loader`.
As, if the users re using some other service providers they come as
default and won't help.
- Add prompt for selecting a template at the start of the init process.
- Added template for `netlify-functions` and `netlify-edge-functions`.
## Code Review
- [ ] hi @istarkov , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
- [ ] hi @TrySound , 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
Before links and images required logic to traverse raw props data and
assets to resolve href and src. This can potentially affect rendering
performance and requires additional data to be stored in runtime.
Here pregenerated props with "asset" type as a first step. Images still
have to be aware of asset base url to trim it from resolved src but no
longer access to assets store. Links now interpret it as string url.
See fixtures for examples.
Closes https://github.com/webstudio-is/webstudio/issues/1990
## Description
We were scaling instance labels along with instaces
## Steps for reproduction
1. select instance
2. resize canvas to scale it up and down
3. labels get smaller, but should stay same size while instance scales
4. outline position should stay correct
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Usually React handlers are processed bedore any document event
listeners. In out case for a reason I don't know we had that our
handlers were executed before React but not inside Dialog.
capture flag solves the issue.
closes#2290
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
This PR addresses an issue where inconsistencies between the database
and session were causing crashes on every page of the application.
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ivan Starkov