Commit Graph
93 Commits
Author SHA1 Message Date
Oleg Isonen 878d6f1de1 feat: Add asset folders to asset manager and improve asset manager UX (#5892)
Closes https://github.com/webstudio-is/webstudio/issues/5877
Closes https://github.com/webstudio-is/webstudio/issues/4775


- Organize assets into nested folders.
- Navigate folders with breadcrumbs and Back controls.
- Select and manage multiple assets and folders at once.
- Drag, copy, cut, paste, duplicate, move, and delete items.
- Use context menus and familiar keyboard shortcuts for common actions.
- Search and sort assets and folders, with folders grouped first.
- Upload files directly into the active folder.
- Manage folder placement from asset and folder settings.
- Automate asset and folder management through MCP.
2026-07-17 23:39:14 +02:00
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 dd99e49fbe fix: Preserve selection after instance deletion (#5879) 2026-07-15 10:35:51 +02:00
Oleg IsonenandClaude Fable 5 071a4d9a85 feat: MCP update 3 (#5864)
## Summary

This update adds new MCP and CLI capabilities for project auditing,
structured data, project-specific agent instructions, focused project
search, safer bulk editing, image descriptions, font discovery, visual
verification, and external registry inspection.

## New Capabilities

### Audit projects

- Run a single `audit` command across accessibility, SEO, security,
assets, styles, and performance.
- Limit an audit to selected scopes, pages, or severity levels.
- Receive stable findings with locations and suggested fixes.
- Run rendered audits across desktop, mobile, and Builder breakpoint
widths.
- Detect horizontal overflow, broken images, oversized images, eager
below-fold images, render-blocking resources, and legacy font formats.
- Identify unused assets, tokens, CSS variables, local styles, and
breakpoints.
- Identify duplicate token declarations.
- Detect accessibility issues involving names, labels, headings,
landmarks, IDs, keyboard focus, ARIA, iframes, and autoplaying media.
- Detect SEO issues involving titles, descriptions, language, social
images, and structured data.
- Detect unsafe new-tab links and write resources exposed during page
rendering.

### Search an entire project

- Search project text, labels, props, resources, assets, and styles
through `search-project`.
- Find relevant records without downloading and reparsing the full
project snapshot.
- Scope searches to the relevant project-data areas.

### Add validated JSON-LD

- Add structured data with a dedicated JSON-LD component.
- Place JSON-LD inside the page Head Slot.
- Edit JSON in a purpose-built code editor.
- Prevent structurally invalid JSON-LD from being saved.
- Validate Schema.org types, properties, and values.
- Find invalid, missing, unknown, deprecated, or incompatible structured
data through the SEO audit.
- Let agents discover the correct JSON-LD workflow without using page
custom metadata or a generic HTML embed.

### Configure project-specific agent instructions

- Add AI-agent instructions from the new **Agents** section in Project
Settings.
- Synchronize those instructions into a managed root `AGENTS.md`.
- Update or remove the managed file automatically during project sync.
- Protect existing user-owned `AGENTS.md` files from being overwritten.
- Share the instructions with authenticated CLI and MCP agents.
- Keep agent instructions out of publicly readable production bundles.

### Generate and manage image descriptions

- Audit image assets for missing descriptions.
- Let a vision-capable agent inspect each image in its rendered context.
- Save generated descriptions to multiple image assets in one operation.
- Mark images as intentionally decorative.
- Reuse the saved asset description wherever the image is used.
- Re-run the audit to verify that missing-description findings are
resolved.

### Perform bounded bulk replacements

- Replace matching literal text across selected pages with
`replace-text`.
- Replace matching fixed prop text with `replace-prop-text`.
- Replace matching resource names or URLs with `replace-resource-text`.
- Restrict replacements by page, instance, prop, resource, field, match
mode, and maximum change count.
- Leave dynamic expressions unchanged.

### Inspect element ancestry

- Return an element’s direct parent in instance listings.
- Request the complete ancestor chain when inspecting an element.
- Understand tree placement without rebuilding the instance hierarchy
from raw project data.

### Discover available fonts

- List uploaded font families through `list-fonts`.
- Discover available system font stacks.
- Inspect font family, style, weight, format, and associated asset
information before applying typography.

### Inspect external component registries

- Inspect a local or remote shadcn-style registry item.
- Read its description, files, dependencies, targets, and documentation.
- Receive an explicit Webstudio compatibility report.
- Inspect registry metadata without installing or executing external
code.

### Capture generated project routes directly

- Run `webstudio screenshot --path /route` against the configured
project.
- Generate a temporary production-style preview automatically.
- Capture the requested route.
- Stop the temporary preview after capture.
- Avoid manually building and starting a preview for a single
screenshot.

### Assert visual changes

- Add expected text to screenshot comparisons.
- Set maximum pixel mismatch limits.
- Set minimum or maximum changed-region counts.
- Assert whether overall brightness or a color channel moved in the
expected direction.
- Use these assertions as pass/fail evidence for visual changes.

### Require compatible CLI versions

- Send the project-bundle contract version with CLI synchronization
requests.
- Stop incompatible CLI versions before they receive incomplete project
data.
- Tell users exactly how to update the CLI or run the latest version
once.
- Prevent older clients from silently dropping project settings.

## Upgrade Note

This branch introduces a new synchronized project-bundle contract. Older
CLI versions must update before synchronizing against the new API.

```sh
npm install -g webstudio@latest
```

Or run the latest version once:

```sh
npx webstudio@latest <command>
```

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-07-12 11:27:58 +02:00
Oleg Isonen d291e4b671 feat: Builder api runtime contracts guardrails for MCP (#5857)
This PR expands Webstudio MCP and CLI into a more complete agent
authoring interface. Agents can discover project capabilities, edit real
Webstudio content, use data/resources, verify visual output, and report
useful issues when workflows fail.

## MCP User Capabilities

- Create, update, duplicate, reorder, and delete pages.
- Create pages from templates and manage reusable page templates.
- Inspect project pages, instances, props, styles, assets, variables,
resources, and metadata.
- Insert Webstudio components and authored JSX fragments into pages.
- Edit text, props, styles, breakpoints, design tokens, and CSS
variables.
- Update page metadata, SEO fields, redirects, marketplace metadata, and
project settings.
- Create and use static data variables.
- Create and use dynamic resources fetched over HTTP.
- Use REST, GraphQL, and built-in system resources in authored pages.
- Bind data variables and resources to visible page content.
- Create resource-backed pages such as sitemap XML, structured SEO data,
and API-driven content sections.
- Preview current project state without requiring a publish step.
- Capture screenshots for visual verification.
- Verify responsive designs across desktop, tablet, and mobile
breakpoints.
- Use screenshot diff and OCR-style checks to inspect rendered output.
- Reset and refresh local MCP project state when needed.
- Discover available CLI/MCP commands from generated manuals.
- Use clearer examples for resources, data variables, JSX authoring,
previewing, and visual checks.
- Read marketplace product metadata without requiring a full project
snapshot.
- Get safer guidance when using low-level patch tools.
- Get a ready-to-copy Discord report template when MCP/CLI behavior is
confusing or broken.
2026-07-10 02:13:22 +02:00
Oleg Isonen 1ddf6b02c9 feat: API and CLI for everything (#5838)
Closes #5287
2026-07-01 01:20:50 +02:00
Oleg Isonen 2a77c2a8b5 feat: Multiselect (#5834)
Closes https://github.com/webstudio-is/webstudio/issues/5310
2026-06-24 21:20:33 +02:00
Oleg Isonen e7b7faeca5 fix: performance optimizations (#5827) 2026-06-19 12:23:44 +02:00
Oleg Isonen ac29cf7d1d feat: Keyboard shorthands for instance positioning and slot bug fixes (#5821)
Closes https://github.com/webstudio-is/webstudio/issues/4586
Closes https://github.com/webstudio-is/webstudio/issues/4619

## Summary

Fixes shared Slot editing so linked Slot occurrences stay consistent
across structural edits and labels.

## Changes

- Fixed moving a direct Slot child out of a Slot so the child is removed
from all linked Slot occurrences.
- Fixed unwrapping a direct Slot child so the child is removed from all
linked Slot occurrences.
- Added linked Slot label sync when renaming from Navigator or Settings
panel.
- Added/updated tests for canonical Slots, legacy Slots, nested Slot
children, keyboard moves, unwrap, reparent, and label sync.
- Simplified stale Slot detach logic that was incorrectly cloning only
the selected Slot occurrence.

## Testing

- `pnpm --filter @webstudio-is/builder test --
app/shared/instance-utils/...`
- `pnpm --filter @webstudio-is/builder test --
app/builder/shared/commands.test.ts`
- `pnpm --filter @webstudio-is/builder typecheck`
- `pnpm lint`
- `git diff --check`
2026-06-16 02:25:28 +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 392c9089be fix: content mode permissions (#5795)
**Summary**

Fixes content-mode edit permissions so editor-only users can perform
allowed content workflows without backend “build permission” failures.

**Changes**

- Added shared content-mode permission validation used by backend
authorization.
- Aligned content-mode capabilities around editable props, editable
instances, content roots, pages, assets, and template insertion.
- Allowed content-safe instance/text/page/template/style changes while
keeping design/data/resource changes build-only.
- Updated template insertion to preserve content-safe local styles and
reuse tokens by id.
- Added accessible `SyncStatusDot` for e2e-visible sync state without
replacing the existing sync status UI.
- Added builder e2e setup with Postgres/PostgREST and a first
content-mode browser test:
  - edit existing text as an editor-only user
  - wait for saved state via the sync status dot
  - reload and verify persistence

**Verification**

- `pnpm --filter=@webstudio-is/builder test -- sync-status.test.tsx`
- `pnpm --filter=@webstudio-is/builder typecheck`
- `git diff --check`
- `pnpm e2e:builder`
2026-06-09 01:48:23 +02:00
Oleg Isonen cc26648519 fix: Fix page template editor permissions (#5793)
Adds permission protection around page templates so content editors can
create pages from templates without being able to open, edit, or patch
template pages directly.
2026-06-04 22:34:56 +02:00
Oleg Isonen 16fa5ab0e3 feat: Basic authentication (#5779)
Closes https://github.com/webstudio-is/webstudio/issues/3991


Adds HTTP Basic Authentication support for published pages and
project-level `.wsauth` rules.

This introduces a new `@webstudio-is/wsauth` package that owns the
generic authentication format logic: parsing, validation, serialization,
route matching, resource generation, and request authentication. The
current supported method is `basic`, with the package structured so
additional auth methods can be added later.

Builder changes include:
- Page Settings now has an `Authentication` section for per-page Basic
Auth credentials.
- Project Settings now has an `Authentication` section for editing
`.wsauth` route rules.
- Page Settings was split into section-specific files with focused
tests.
- Auth UI shows Pro badges/info tooltips but remains editable.
- Publishing to custom domains is blocked on plans without `allowAuth`
when either page auth or project auth is configured.
- ProBadge now renders as a real pricing link and uses improved text
alignment.

Build/publish changes include:
- CLI prebuild generates and merges `.wsauth` entries.
- Published app templates enforce auth for HTML/XML routes.
- Generated auth resources are shared between build output and runtime.
2026-05-27 18:42:08 +02:00
Oleg Isonen 9ea5f70a73 chore: Pages.staging (#5736)
## 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-04-28 19:43:21 +02:00
Oleg Isonen a2cfcbb7be feat: WIP Multiplayer (#5733) 2026-04-28 03:38:12 +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 b8a194c011 feat: Workspaces (#5641) 2026-04-08 21:58:20 +02:00
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 905103c739 feat: When asset is deleted or uploaded - refresh asset resource (#5568)
## Description

When user is using asset resource and binding it on canvas, for example
video file bound to video tag to the src attribute and then deletes the
asset, it is expected that canvas reflects the deleted asset as well as
the variable.

## 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-16 21:05:16 +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
Bogdan Chadkin f558311897 feat: load data before saving resource variable (#5392)
Ref https://github.com/webstudio-is/webstudio/issues/3691

- new resource loader with queue to avoid bloating network with huge
responses
- data can be loaded for new variable before saving, easier to preview
result



https://github.com/user-attachments/assets/5c26c5a2-fd33-401b-a4d2-a321c34ca083
2025-09-06 17:09:53 +03:00
Bogdan Chadkin 646c5b38e7 fix: normalize html attributes only when not defined by component (#5215)
Proper fix for https://github.com/webstudio-is/webstudio/pull/5211

Now props meta are available in component generator and can be used to
figure if prop is defined by component or comes from html attributes.
Added same logic in canvas and component generator.

Also got rid from no longer necessary registeredComponentPropsMetas
store since all props are described by component meta.
2025-05-17 10:11:56 +03:00
Bogdan Chadkin 95e6550098 perf: improve instance selection performance (#5151)
We had a few issues

- instance selector was resynced even though computed from awareness
- when click in navigator both click and focus events do selection

So fixed by reducing 6 or more reselections when click on instances in
navigator.
2025-04-21 15:03:20 +02:00
Bogdan Chadkin b14676bfd6 refactor: simplify css value input sizes (#4997)
- removed non-unit values from browser styles
- merged browser styles and unit sizes into single store; both objects
used in cize conversion
- use typed cssom to parse units instead of custom parser (sorry
firefox)
2025-03-14 20:59:57 +07:00
Bogdan Chadkin b798809870 refactor: decouple system store from variables (#4888)
We are moving away from binding system to variables and instead gonna
have one global variable.

Here moved system values into separate store coupled to pages instead of
variables.

Also fixed suggestions in address bar, probably broke while design
system refactorings.

Testing
- submit form with one named input
- check system value is rendered
- check system value can be inspected
2025-02-18 23:28:29 +07:00
Bogdan Chadkin 5408a11f19 perf: compute tags statically (#4687)
Got rid of computing tags from dom in canvas. Now tags are computed from
possible preset styles and tag prop if available.
2024-12-31 17:22:28 +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
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
Ivan Starkov 5de42b2d02 fix: Ensure outline stays within canvas bounds (#4570)
## Description

Playground


https://p-183a0702-0620-49ac-84b6-066dbce1d300-dot-fix-outline.development.webstudio.is/


<img width="1229" alt="image"
src="https://github.com/user-attachments/assets/5c6a8c73-70e6-48af-8cbd-6c12144d55ee"
/>

todo:
- [x] - fix if horizontal scroll 
<img width="629" alt="image"
src="https://github.com/user-attachments/assets/d904d7ac-f74a-4116-993f-00b8b14c39dd"
/>

- [x] - fix if vertical

## 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-12 13:09:51 +03:00
Ivan Starkov 9cf443a3c5 feat: Support new link selection in the text editor (#4509)
## Description

Same as #4505 but supports just created links too

ref #3994

## 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-04 17:41:45 +03:00
Bogdan Chadkin e06de5322b refactor: add server as storage to sync engine (#4475)
Another layer in sync engine is composable storage.

Now you can specify a chain of storages. Each can listen transactions to
update some state. Though subscription for state is invoked one by one
until non-undefined is provided.

See tests to understand API.

Here I also migrated our server data loading and synchronization to this
storage api.
2024-12-03 21:43:39 +07:00
Ivan Starkov 71e0be8363 feat: Transform Plus button to Minus in case of Alt button is pressed (#4490)
## Description

ref #3994

<img width="260" alt="image"
src="https://github.com/user-attachments/assets/88652fef-7229-42cb-bf64-33ec07249426">

<img width="260" alt="image"
src="https://github.com/user-attachments/assets/e8199a7d-ebbc-4971-8641-d83424643ac8">

<img width="245" alt="image"
src="https://github.com/user-attachments/assets/804b8ef5-4f71-42b3-b9d1-5cf034706a02">


## 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-01 18:29:13 +03:00
Ivan Starkov a66a674ad5 chore: Rename editable block component (#4489)
## Description

ref #3994

## 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-01 06:02:09 +03:00
Ivan StarkovandOleg Isonen 2acb4ac596 feat: Add Editable Block Component (#4437)
## Description

ref #3994 

Outline for content mode Editable Childs


https://p-64ece825-f290-4de0-8dac-223c8e88c258-dot-editable-block.development.webstudio.is/?mode=content

Like in notion if eny keyboard event is occured inside outlined block,
we hide it
Also + hovers are only on canvas

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

---------

Co-authored-by: Oleg Isonen <oleg008@gmail.com>
2024-11-24 10:04:09 +07:00
Bogdan Chadkin 524f83203e refactor: support nanostores as sync objects (#4454)
Here added support for syncing nanostores atoms
as sync objects. Had to add some tracking of update source though it
seems like a more solid solution than previous variant.

Need to test performance caz stores updates are now synchronous and not
debounced anymore.
2024-11-21 18:17:28 +07:00
Bogdan Chadkin 35ebd60b46 refactor: add sync object pool (#4453)
Sync client is getting some shape. Here I abstracted all immerhin
related api into SyncObject and added SyncObjectPool to combine multiple
objects. Objects are identified by unique name.
2024-11-21 10:41:51 +07:00
Bogdan Chadkin bf574fbc47 refactor: add new way to synchronize immerhin stores (#4451)
Here added SyncClient class which will be base for our new sync engine.
For now it can synchronize one immerhin store.

Event emitter is shared with canvas directly to avoid indirection of
iframe postMessage api.

This also partially fixes the issue with messages pollution and conflict
with react devtools.
2024-11-20 21:15:00 +07:00
Ivan Starkov 36ba02d30f feat: Add builderMode, add mode "edit" (#4376)
## Description
Part 1 Of #3994 

This PR introduces a feature flag, `contentEditableMode`, that hides the
`EditorButton` in the top bar. This button is now intended for **testing
purposes only** and will **never be used in production**.

<img width="154" alt="image"
src="https://github.com/user-attachments/assets/f4a37334-71b9-43d8-b4a8-afd518fc6833">

## Most Notable Things In The Content Edit Mode

1. **Notion-like Editing**: Elements are editable with a single click.
2. **Restricted Element Editing**: Binded elements, such as expressions,
are non-editable.
3. **Selective Property Editing**: Only properties for `img` and `link`
elements are editable.

Additional changes:
- **Copy/Paste and Drag/Drop**: Disabled to maintain a controlled
testing environment.

Refer to the issue `Part 1` for further details on upcoming changes and
planned enhancements.


## Steps for reproduction

Play play 

## 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-11-14 11:06:29 +04:00
Bogdan Chadkin 6b1ea5eb4a refactor: move selected page into awareness state (#4371)
Ref https://github.com/webstudio-is/webstudio/issues/4364

We need to implement universal linking of current user view. For this I
added "awareness" state which reflects terminology from collaboration
libraries.

First migrated selected page id and fixed usages.
2024-11-06 02:29:52 +04: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
Ivan Starkov 02269af49d fix: Inserting Slots within Slots from the Marketplace causes infinite loop and crash (#4113)
## Description

closes #4111

- [x] - Fixes client side
- [x] - Fixes server side


https://github.com/user-attachments/assets/8bb6ffdc-2e78-45eb-b98b-e697daee822a

## Steps for reproduction

Now seems like impossible to save broken project. Tested locally on
broken project.


## 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-13 12:32:07 +03:00
Ivan Starkov 8f48a7bb79 fix: Disable auto-freezing for Safari structuredClone compatibility in sync-stores (#4106)
## Description

structuredClone fails sometimes on frozen objects

## 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-11 17:15:57 +03:00
Ivan Starkov a4d3f33bad fix: Dialog within collection issues (#3597)
## Description


https://discord.com/channels/955905230107738152/1251593079161491637/1251593079161491637

## Steps for reproduction


https://dialog-col.staging.webstudio.is/builder/be551fca-b3bc-4750-961a-c0bdc0557506?authToken=3d9f5902-0ecc-4645-ba12-9f7af2f81e09&mode=edit

https://dialog-saas-a7f4v.wstd.work/

## 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-06-21 20:54:04 +03:00
Ivan Starkov 863bb2a1bc feat: Adds the ability to place images on the canvas immediately during upload (#3546)
## Description

- Adds the ability to place images on the canvas immediately during
upload, using the file blob or a provided URL.
- Enables images to use width and height from asset metadata.
- Detects duplicate assets and displays a warning message.

<img width="323" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/fe810dd8-3e3d-4cab-8669-b0d739044f49">


These changes allow images to appear on the canvas upon pasting, even if
the asset is not fully uploaded yet.


## Steps for reproduction

Start uploading few files on a slow connection, select them before
upload, see image on canvas is changed

## 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-06-14 11:01:07 +03:00
Ivan Starkov 0e1d1cf963 feat: Image Manager drag/drop suport (#3505)
## Description

This is 1st PR In a series of PR's

Next: Image URL Links upload support.

Image Manager now support files drag/drop
(Images, Fonts etc)

## Steps for reproduction

Drag files on image manager see it works.

## 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-06-07 15:59:02 +03:00
Ivan Starkov 7d89ccfb09 fix: Fix focus bugs with text editing on canvas (#3454)
## Description

closes #3021

Currently if we are in a text edit mode we sometimes can't focus on any
input inside builder.
This fixes this.


## 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
2024-05-30 19:41:46 +03:00
Ivan Starkov 3c189aff97 fix: HTML Embed Code editor inside Dialog Content looses focus (#3020)
## Description

closes #2998

Also fixes name edits etc.
The same issue with radix as we had in the past, focus lock on any
mutation inside dialog aquires focus.
And we have no good way to prevent programmatic focus inside iframe.



## 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
2024-03-20 22:42:44 +03:00
Ivan Starkov d1469f9e1d feat: Add ability to disable clone and copy for view links (#2983)
## Description


### HAS MIGRATION, CAN'T BE TESTED ONLINE


Pro users can add additional permissions to auth tokens
<img width="358" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/df294ac3-e98c-465d-8115-f74ff075ff2d">

In case of cloning is disabled user will see

<img width="448" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/c77e5598-ba0a-4a40-82fc-3aab7c1d107f">

In case of copying

<img width="506" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/a92ec66f-0b7a-4666-aa20-911de51c9d28">





## 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
2024-03-11 08:52:37 +03:00
f66a6bee31 experimental: Marketplace settings (#2949)
## Description

- split project settings
- add marketplace settings

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

---------

Co-authored-by: Bogdan Chadkin <trysound@yandex.ru>
Co-authored-by: istarkov <istarkov@gmail.com>
2024-03-04 13:06:49 +01:00