Commit Graph
19 Commits
Author SHA1 Message Date
Oleg Isonen dde30ffb54 feat: Improve MCP authoring, compact output, and agent onboarding (#5883)
## Summary

This improves how agents discover, author, inspect, and verify Webstudio
projects while reducing unnecessary MCP context usage.

## What changed

- Adds an **Agents** section to Project Settings with ready-to-run setup
commands and client configuration for Claude Code, Codex, Cursor, and VS
Code.
- Makes large list and schema responses compact and paginated by
default, with **verbose** available when complete records or diagnostics
are needed.
- Applies consistent compact output to assets, instances, styles, design
tokens, CLI schemas, and project-session metadata.
- Returns actionable expression warnings for props, resources, and
Collection bindings, including unknown variables and risky render-time
mutation resources.
- Improves Collection expression guidance so agents can bind array items
with the correct scoped variables.
- Reports rendered audit outcomes explicitly as complete, partial,
confirmation-required, or failed.
- Expands runtime output schemas so MCP clients can validate responses
reliably.
- Strengthens the packaged CLI smoke workflow with a realistic
seven-page stdio MCP scenario.

## Architecture

- Consolidates `project-build` from 65 file-oriented entrypoints to 11
architecture-owned surfaces.
- Separates the core model, contracts, runtime authoring, transfer,
state, project sessions, MCP, visual tooling, persistence codecs, and
authenticated server services.
- Isolates Node-only JSX evaluation from browser-safe transfer utilities
and authenticated server modules.
- Keeps persistence codecs independent from authenticated database
services, preventing unrelated module initialization.
- Defines shared instance-path types once and reuses them across runtime
modules.
- Preserves Immer initialization through explicit package side-effect
metadata.
- Adds package tests that prevent a return to source-file entrypoints or
generic exposure of Node-only surfaces.

## Validation

- Full repository checks, tests, typechecks, generated-file checks, and
fixtures
- All 163 Builder test files and 2,141 tests
- All 71 project-build test files and 1,794 tests
- Lint and package-boundary validation
- Full packed CLI release smoke test, including install, preview, agent
setup, seven-page stdio MCP workflow, rendered audit, and structured
commands
2026-07-15 18:11:28 +02:00
Oleg Isonen 1ddf6b02c9 feat: API and CLI for everything (#5838)
Closes #5287
2026-07-01 01:20:50 +02:00
Oleg Isonen d49582bcf5 feat: Copy-paste pages, folders and page templates (#5798)
Closes https://github.com/webstudio-is/webstudio/issues/5797
## Summary

- Add page, page template, and folder copy/paste support, including
cross-project paste.
- Reuse a shared page item actions menu for page headers and context
menus with Copy, Duplicate, Delete, and shortcut hints.
- Add Paste to the pages context menu.
- Preserve template semantics when copying/pasting templates.
- Support folder copy with nested folders/pages.
- Add Backspace/Delete page deletion shortcuts and focus destructive
dialog actions for Enter confirmation.
- Rename `init-copy-paste.ts` to `copy-paste.ts`.

## Testing

- `pnpm --filter @webstudio-is/builder typecheck`
- `pnpm --filter @webstudio-is/builder test
app/shared/copy-paste/copy-paste.test.ts
app/shared/copy-paste/plugin-page.test.ts app/shared/page-utils.test.tsx
app/builder/features/pages/page-utils.test.ts`
- `git diff --check`
- E2E copy/delete flows were added in
`apps/builder/e2e/tests/pages-actions.e2e.ts`
2026-06-09 15:10:52 +02:00
Oleg Isonen 43b5586a9b fix: Fix retrying interrupted asset uploads (#5762) 2026-05-16 23:24:53 +02:00
Oleg Isonen fa8fe5edbe fix: Fix Tailwind HTML paste rendering (#5758) 2026-05-14 12:17:04 +02:00
Oleg Isonen b006947a85 feat: WIP realtime collaboration to builder (#5726)
https://github.com/webstudio-is/webstudio/issues/46
2026-04-27 23:19:21 +02:00
Oleg Isonen b4941aaaf1 fix: Tailwind border color arbitrary var (#5717) 2026-04-23 17:18:29 +02:00
Oleg Isonen f052200d07 fix: preserve CSS variable and gradient references on paste (#5716)
Preserve var() references in pasted gradient shorthand
(css-data/parse-css.ts)
When expanding shorthand properties (e.g. background), unresolved var()
tokens were lost. Now they're recovered by probing each longhand with a
placeholder, mapping which longhands the var belongs to, and restoring
it.

Fix border-(--x) Tailwind v4 syntax not recognized (tailwind.ts)
borde
2026-04-23 13:22:33 +02:00
Oleg Isonen 395385f5ea fix: tailwind parser preflight must not overwrite inline styles on paste (#5711) 2026-04-21 12:36:22 +02:00
Oleg Isonen 198ae5d65a fix: Cross rule CSS var resolution (#5698)
## Description

Pasting this will now resolve correctly

```html
<style>
.my-parent {
    --clr-red: #f00;
    min-height: 75vh;
}

.my-child {
    background: var(--clr-red);
    min-height: 50%;
}
</style>

<div class="my-parent">
    <div class="my-child"></div>
</div>
```
2026-04-14 18:34:40 +02:00
Oleg Isonen 8de2fd47f6 fix: CSS shorthand properties not saved when value contains var() (#5688)
Shorthand properties like background: var(--color) were silently dropped
when pasting into the CSS editor because the shorthand expander can't
handle unresolved var() references.

Fix: CSS vars from the current element's computed styles are now
resolved before expanding shorthands. Inline and nested fallbacks
(var(--a, var(--b))) are supported. If a var still can't be resolved, a
toast error is shown instead of silently dropping the property.
2026-04-12 17:14:01 +02:00
Oleg Isonen 1784d635c0 feat: Paste HTML with CSS with full selectors and regular syntax support (#5648)
## 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-20 19:56:36 +01:00
Oleg Isonen 3e715e9b7c fix: Add tests for breakpoint creation in tailwind conversion (#5582)
## 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-01-25 11:36:01 +01:00
Bogdan Chadkin 395ebc44f2 fix: convert space-* on breakpoints when paste tailwind (#5308)
Ref https://github.com/webstudio-is/webstudio/issues/2651

Didn't consider spaces on breakpoints when converted space-* to gap for
example `md:space-x-6` -> `md:gap-x-6`
2025-06-30 13:33:18 +03:00
Bogdan Chadkin 232847ced1 fix: add unset values to adapt tailwind breakpoints (#5303)
Ref https://github.com/webstudio-is/webstudio/issues/2651

When convert tailwind breakpoints to webstudio breakpoints our algorithm
can find holes and will stop conversion. Though this will create
mobile-first breakpoints which users do not expect.

Here I added workaround to specify "unset" value on property when
tailwind breakpoints has holes. Here's examples

**sm:opacity-20** - here the hole is in the beginning, opacity: 0.2 can
be defined on base breakpoint but we need to fill with something
`max-width: 479`

**max-sm:opacity-10 md:opacity-20** - here the holr is in the middle, we
have `max-width: 479` and base breakpoint but no `max-width: 767`
2025-06-28 17:55:24 +03:00
Bogdan Chadkin 310ab3aa1d fix: support max-* breakpoints in tailwind (#5299)
Ref https://github.com/webstudio-is/webstudio/issues/2651

Tailwind has max-sm, max-lg etc endpoints which need to adapt to ours as
well
2025-06-27 16:32:41 +03:00
Bogdan Chadkin 701793d8b8 experimental: use --tw- prefix for tailwind css variables (#5294)
Ref https://github.com/webstudio-is/webstudio/issues/2651
2025-06-26 16:31:00 +03:00
Bogdan Chadkin 274c8d84c2 experimental: adapt tailwind to webstudio breakpoints (#5244)
Ref https://github.com/webstudio-is/webstudio/issues/2651

There is an edge case which will prevent from converting breakpoints.
When there is no base breakpoint there is no value to fill with inverted
space. Though it should be very rare usecase. Need to test how often it
will create new breakpoints.
2025-06-09 15:32:52 +03:00
Bogdan Chadkin de61cffde6 experimental: paste tailwind (#5217)
Ref https://github.com/webstudio-is/webstudio/issues/2651

Added "Paste Html With Tailwind Classes" command.

For now only tailwind 3 is supported.
Also fixed a few issues with css parser.


<img width="547" alt="Screenshot 2025-05-18 at 00 38 01"
src="https://github.com/user-attachments/assets/470b63e0-9b17-4769-8a65-679b90d73a89"
/>
2025-05-23 13:19:04 +03:00