Deprecated Webhook Forms reuse the existing Form execution pipeline
without teaching the modern backend about WebhookForm.
## User-facing behavior and how to test it
- Existing saved Webhook Forms keep their markup, action settings, and
success/error feedback. Submit a published Webhook Form and check both
outcomes.
- URL and Resource actions preserve configured methods, headers,
dependencies, body overrides, and the last submitted value for repeated
field names. Test a configured action and inspect the received request.
- Default owner notifications use the Email Worker, including submitted
files. Submit a Webhook Form without a custom action and inspect the
owner email and attachment.
- Configured Email actions validate recipients and retain threading
metadata. Test valid recipients and a rejected recipient limit.
## Implementation
- One deprecated Webhook Form adapter calls existing bot validation,
Email preparation, recipient validation, resource loading, and response
handling.
- Both generated route templates call that adapter. Both paths reuse an
internal resource-graph traversal helper; modern submission behavior is
unchanged.
- Root actions use the protected, uncached request override.
Dependencies reuse existing generated Assets and Resource caching
behavior.
- Keep reachable-resource filtering because Email preparation runs
before loading: unrelated Email settings must not break the selected
action.
- Remove dead `getDefaultActionResource` wiring from generated
templates.
## Verification
- Focused SDK tests: 116 passed (11 deprecated Webhook Form adapter and
105 modern submission, Email, and handler tests), including unrelated
resources, missing dependencies, cycles, Email preflight/threading, and
single-attempt Email failures.
- Resource generator tests: 26 passed.
- Full CLI prebuild suite: 139 passed after tracked fixture
regeneration; focused deprecated Webhook Form adapter tests: 9 passed.
- Repository fixture pipeline (`pnpm -r fixtures:build`) passed. All
tracked generated `getDefaultActionResource` references were removed,
and no Builder `N8N_FORM_EMAIL_HOOK` reference remains.
- Final MCP-generated local Preview E2E rerun: 3/3 passed.
- Focused saved Webhook Form custom-action E2E rerun: 2/2 passed (setup
and test), including a single POST through the protected test receiver
after Builder reload.
- SDK, CLI, and Builder typechecks, focused lint and formatting, and
`git diff --check` passed.
- Deprecated component picker regression test passed (2/2); verified it
fails when WebhookForm deprecation is disabled, then passes with
deprecation restored.
- Independent Astra review found no blocker, including the 62 generated
fixture changes. No production deployment or live secret change was
performed.
- Required staging CI checks passed on previous head `15635fc` (Main
workflow, visual regression, submodules, and lint). An unrelated
existing MCP success-redirect E2E assertion failed once in shard 5,
passed in a focused local rerun (2/2 including setup), then shard 5
passed on GitHub rerun without code changes.
- Terminology pass (`4a69ab573`): renamed the dedicated SDK adapter and
migration helper, updated both route templates and generated fixtures,
corrected the active identity migration marker comments, and
synchronized docs and test names. Focused tests passed: SDK 35, CLI
prebuild 12 plus 2 after final title change, MCP 7, migrations 8, React
browser 7, CLI docs 9. Seven affected package typechecks, fixture
builds, formatting, and `git diff --check` passed. That historical head
was superseded; latest-head CI results are recorded below.
- ResourceForm identity migration (`29a21edbb`): focused migration (23),
DB patch (25), project-build DB/session (93), Builder
API/import/auth/patch (60), React SDK (162), runtime/MCP (239), registry
(11), CLI evaluation (90), CLI session/sync (55), and protocol (15)
tests passed; full CLI prebuild (139) passed. Affected typechecks, lint,
formatting, and `git diff --check` passed. Independent Astra review
found no blocker. No deployment was performed.
- Prepublish Webhook Form warning (`25855e8f00`): audit checks every
non-draft published page and links nested/shared instances to the
correct page; modern ResourceForm, native forms, draft-only forms, and
orphans are excluded. Focused audit tests (13), Builder navigation tests
(6), project-build and Builder typechecks, lint, formatting, and `git
diff --check` passed. Independent Astra review found no blocker;
publishing remains nonblocking. No deployment was performed.
- ResourceForm test and CI expectation repair (`e1a527fbcc`): focused
React SDK (24), Builder preview/registry (38), project-build pages (1),
and CLI fixture API (8) tests passed; Remix and React Router targeted
browser suites, affected package typechecks, full formatting (3375
files), lint, and `git diff --check` passed. Astra review found no
blocker. Persisted identity and runtime exports were unchanged.
- Project bundle fixture repair (`70889ef27d`): eight bundles now carry
the current contract version; the two unmarked historical Form instances
in `webstudio-features` normalize to WebhookForm. Protocol fixture tests
(17), protocol typecheck, CLI fixture build, formatting, lint, and diff
check passed. Independent Astra review found no blocker.
- Story/MCP E2E CI repair (`483614e6c5`): SDK CLI story tests (7),
ResourceForm fragment tests (34), and focused local managed-form E2E (4
including setup) passed. SDK CLI and Builder typechecks, lint,
formatting, and diff check passed. Astra review found no blocker. The
initial local Preview build used an ignored stale React Router `lib`
artifact; rebuilding it restored the passing E2E run.
- Latest PR head `483614e6c5`: Main workflow [run
39317777032](https://github.com/webstudio-is/webstudio/actions/runs/39317777032)
passed, including all package matrices and six Builder E2E shards.
Visual regression [run
39317796922](https://github.com/webstudio-is/webstudio/actions/runs/39317796922),
submodules, and PR lint checks passed. The overlapping unapproved visual
run was cancelled by the approved rerun.
- Shared bot-value generator (`ecc4cad1e9`): SDK helper tests (3), React
Router WebhookForm/ResourceForm browser tests (5), SDK/Router/Remix
typechecks and builds, SDK browser-boundary check, formatting, and diff
check passed. Brave bypasses media queries, working media queries
produce a fresh timestamp per submission, and failed queries produce
`jsdom`; each managed/legacy submission has one bot field. Independent
Astra review found no blocker. Latest-head Main workflow [run
39325677117](https://github.com/webstudio-is/webstudio/actions/runs/39325677117)
passed, including all six Builder E2E shards; approved visual regression
[run
39325702835](https://github.com/webstudio-is/webstudio/actions/runs/39325702835),
submodules, and PR lint passed. The superseded visual run was cancelled
by the approved rerun.\n\n- Historical Form clipboard guard
(`e864283d1c`): instance/page transfer parsers reject ambiguous legacy
`Form` before asset import; direct fragment/page/folder mutations
preflight before changes. Canonical ResourceForm, WebhookForm, and
NativeForm remain accepted. Project-build tests (89), Builder paste
browser tests (69), both typechecks, focused lint/formatting, and diff
check passed. Independent Astra review found no blocker. Latest-head
Main workflow [run
39329184890](https://github.com/webstudio-is/webstudio/actions/runs/39329184890)
passed, including all six Builder E2E shards; approved visual regression
[run
39329562692](https://github.com/webstudio-is/webstudio/actions/runs/39329562692),
submodules, and PR lint passed. The earlier unapproved visual run
reported two expected story differences.\n\n## Compatibility notes
- Root HTTP actions reject private and same-origin destinations.
Dependencies retain their existing fetch/cache behavior.
- Routes retain the 25 MiB request limit. Shared execution applies bot
validation, a 10-second Resource timeout, and one retry for eligible
HTTP failures; an ambiguous failure can duplicate an HTTP action. Email
actions are not retried.
- Default email uses the Email Worker's sender, plain text, recipient
limits, and attachment limits instead of the legacy n8n HTML/basic-auth
path.
- Self-hosted sites need normal Email sender configuration. Direct
Builder draft Preview handling is outside this published-route change.
- Coordinate this CLI release with [SaaS PR
#669](https://github.com/webstudio-is/webstudio-saas/pull/669), which
removes the n8n helper and `N8N_FORM_EMAIL_HOOK` from new published-site
builds. Publish with a CLI artifact containing this adapter. Existing
deployed workers retain their bundled code and injected hook until
republished, so keep the actual n8n endpoint available while those sites
remain active.
## Implementation checklist
- [x] Align saved Webhook Form custom-action E2E with the protected
receiver and verify one submission.
- [x] Regenerate tracked published-site fixtures with the updated CLI
and confirm no `getDefaultActionResource` or `N8N_FORM_EMAIL_HOOK`
references remain in Builder source/config/fixtures.
- [x] Review authoritative `docs/` impact of removing the obsolete
Builder hook wiring; related deprecation and integration docs were
updated.
- [x] Route deprecated Webhook Form submissions through the shared
execution pipeline with one adapter.
- [x] Preserve configured actions, dependencies, repeated fields, body
overrides, and saved feedback.
- [x] Prepare and validate Email actions using existing shared logic.
- [x] Remove duplicated orchestration and dead generated context wiring.
- [x] Verify generated routes and MCP-generated Preview submissions.
- [x] Mark the Webhook Form component and its dedicated dependencies
visibly deprecated, while leaving shared Form infrastructure active.
- [x] Group Webhook Form-only SDK code for straightforward removal while
preserving public APIs and generated output.
- [x] Use deprecated terminology consistently for Webhook Form-only PR
code, and clarify the active identity migration marker.
- [x] Confirm required staging CI checks.
- [x] Use ResourceForm as the one active modern component identity
across Builder, SDK, runtime, templates, generated code, and docs.
- [x] Migrate historical Form, NativeForm, ResourceForm, and WebhookForm
identities in one idempotent pass using the historical pages marker.
- [x] Remove the marker from ordinary project and snapshot APIs while
preserving historical input readers.
- [x] Persist pages and instances together when a historical marked
project is saved, including a pages-only edit.
- [x] Verify migration, export/reimport, old CLI and server snapshots,
page-only save, generation, and affected typechecks.
- [x] Complete an independent architecture review before commit or push.
- [x] Warn at prepublish for deprecated Webhook Forms on published
pages, with a link to each affected element.
- [x] Verify modern ResourceForm is excluded and nested/shared Webhook
Forms navigate to the correct page.
- [x] Complete independent review, focused tests, and affected
typechecks before push.
- [x] Remove local `ResourceForm as Form` aliases from React SDK tests
and fixtures; use the canonical component name throughout.
- [x] Fix stale identity expectations found in CI and verify affected
tests/typechecks.
- [x] Complete independent review before push.
- [x] Refresh tracked project bundle fixtures to the current bundle
contract and canonical WebhookForm identity; verify protocol and
affected CLI flows.
- [x] Align SDK CLI story assertions and MCP E2E fragment fixtures with
the persisted ResourceForm component name; rerun affected checks.
- [x] Share one browser bot-value generator across ResourceForm
submission and deprecated Webhook Form wrappers, preserving field
ownership and behavior.
- [x] Verify bot timestamps, Brave/media failure handling, repeated
submissions, affected typechecks, and independent review before push.
- [x] Reject ambiguous historical `Form` clipboard fragments before any
insertion or transfer mutation, with clear recopy guidance; preserve
canonical ResourceForm action remapping.\n- [x] Verify
instance/page/template/folder paste regressions, independent review, and
latest-head CI.\n\n
- [x] Explain Email attachment size limits in the Email action UI and
give a useful error when the aggregate encoded attachments exceed the
local guard.
- [x] Check Preview and published behavior, boundary tests, and
authoritative Form docs; verify the focused change and get independent
review.
Ref #4093
- [x] Preserve safe email codes/messages through MCP, including local
attachment and upload limit errors.
- [x] Correct Form documentation for each enforced limit and verify
Preview/published/MCP paths.
- [x] Verify Builder SDK and MCP focused tests, typechecks, and
independent review before push.
- Email limits and failure copy (`6d215f3ec3`): the shared SDK checks 32
attachments and 7 MiB aggregate Base64 data before dispatch; the 25 MiB
multipart response and Email action guidance use approved copy. Managed
Email error codes pass through Form and MCP results with resource IDs,
while MCP still omits resource bodies. Form docs distinguish the Worker
7 MiB JSON cap from Cloudflare's 5 MiB complete message and
verified-destination exception, and correct the no-retry behavior.
Focused SDK tests 89, Builder API tests 44, UI browser tests 42,
SDK/Builder/CLI/docs typechecks, lint, formatting, and generated MCP
docs check passed. Astra found no blocker. No real email or production
deployment occurred.
- Latest Email limits head `6d215f3ec3`: Main workflow [run
39393037290](https://github.com/webstudio-is/webstudio/actions/runs/39393037290)
passed on rerun, including all six Builder E2E shards; approved visual
regression [run
39393456618](https://github.com/webstudio-is/webstudio/actions/runs/39393456618),
submodules, and PR lint passed. The initial unapproved visual run showed
the same two previously accepted story differences.
- [x] Address review: normalize previous-Builder `Form` instance patches
before persistence, preserve historical WebhookForm identity, and cover
marked/unmarked cases. Documentation impact reviewed: this restores
intended save behavior, so no user guide change is needed.
- Review finding follow-up (`ce05dd733a`): three Form identity patch
regressions passed red/green; full project build-patch tests 28/28,
project typecheck, lint, formatting, and diff check passed. Independent
Astra review found no blocker. Incoming PATCH `Form` is treated as the
immediately previous Builder's modern form alias; already stored
unmarked historical `Form` continues to migrate to WebhookForm. The old
patch protocol has no client-release identifier, so pre-October-14 live
clients adding new ambiguous IDs cannot be identified separately.
- Latest review-fix head `ce05dd733a`: Main workflow [run
39397337356](https://github.com/webstudio-is/webstudio/actions/runs/39397337356)
passed, including six E2E shards after a targeted shard-4 rerun for an
unrelated MDX slash-menu timeout. Approved visual regression [run
39397395206](https://github.com/webstudio-is/webstudio/actions/runs/39397395206),
submodules, and PR lint passed. The unapproved synchronize visual run
was cancelled by the approved rerun.
## Summary
Rebuilds Webstudio’s color system, migrates the entire Builder to it,
and introduces a complete dark theme.
A small set of theme colors and contrast controls now drives the
interface through relative CSS colors:
```text
Theme colors and contrast
↓
Light/dark derivation bounds
↓
Derived color families
↓
Reusable semantic colors
↓
Component composition
↓
Builder interface
```
CSS is the runtime source of truth. Light and dark modes share the same
theme inputs, so changing a theme color automatically updates its
surfaces, content, borders, states, and component presentation. The
refactor turns dark mode into a first-class Builder theme rather than a
separately maintained palette.
This is an atomic migration. Legacy color names and compatibility
aliases will not remain after all consumers have moved.
## Scope
- The color source, derivation model, semantic vocabulary, validation,
typing, and Storybook overview.
- Every design-system component.
- Builder, dashboard, authentication, shared UI, Query Builder, stories,
and tests that consume the legacy color scale.
- Removal of the legacy Stitches color scale after its final consumer is
migrated.
- A complete dark theme across application UI while keeping authored
canvas content independent.
- Complete light and dark visual verification.
- Unified browser-test infrastructure: Vitest Browser Mode for Design
System browser contracts and standard Playwright Test for all Builder
E2E workflows.
Literal colors remain only where color is the actual content or belongs
to a deliberately separate system, such as user-authored values,
external previews, brand artwork, data visualization, functional canvas
overlays, and source assets. Every remaining exception must have an
explicit owner.
## Architecture decisions
- Theme authors control six color families and three bounded contrast
controls.
- Relative CSS colors derive the rest of the system.
- Dark mode changes derivation bounds instead of maintaining a second
independent palette.
- Components consume a small reusable semantic vocabulary.
- Component states and exceptional presentation are composed inside
components.
- Builder-specific categorical meaning uses focused composite recipes,
not intent semantics or a larger global vocabulary.
- TypeScript validates public semantic CSS-variable names but does not
generate runtime colors.
- No token-manager dependency, compatibility aliases, or
component-specific public color tokens.
- A new semantic or theme variable is added only when existing semantics
and local composition cannot represent a reusable cross-feature
decision.
## Todo
### Color-system foundation
- [x] Establish direct CSS as the runtime source of truth.
- [x] Define bounded theme colors and contrast controls.
- [x] Derive light and dark modes from the same theme inputs.
- [x] Reduce the semantic inventory to reusable decisions and explicit
accessibility pairs.
- [x] Generate only TypeScript names for public semantic CSS variables.
- [x] Validate layers, references, cycles, consumption, naming,
generated types, and browser-computed contrast.
- [x] Add the Storybook color-system overview and theme controls.
- [x] Document the architecture and its relationship to the public Craft
specification.
### Design-system migration
- [x] Replace every active legacy color consumer in design-system
components and Storybook chrome.
- [x] Compose component states locally without component-specific public
tokens.
- [x] Preserve intentional preview and sample-content colors.
- [x] Add complete positive, negative, warning, informative, and accent
accessibility pairings.
- [x] Validate light and dark scheme-bound references independently.
- [x] Verify the design-system package with typecheck, lint, formatting,
Storybook, and 222 tests.
### Inventory and contract
- [x] Inventory all 319 legacy references across 107 Builder, Query
Builder, story, test, and design-system files.
- [x] Classify every reference as a direct semantic replacement, local
composite recipe, documented literal exception, or removable code.
- [x] Record the intentional authored-content, external-preview,
functional-preview, data-visualization, brand, and source-asset
exceptions.
- [x] Treat the public semantic vocabulary as closed by default and
justify any proposed addition by cross-feature reuse and accessibility
need.
- [x] Keep Builder code limited to typed public variables accepted by
`cssVar()`.
### Theme infrastructure
- [x] Add `system` (default), `light`, and `dark` application
preferences.
- [x] Persist the preference in existing client settings and resolve
`system` through `matchMedia`.
- [x] Apply the resolved scheme before paint and respond to
operating-system changes.
- [x] Expose the persisted theme control under **View → Color scheme**.
- [x] Keep authored canvas documents independent from the application
theme.
- [x] Ensure portals, overlays, embedded surfaces, and third-party
controls receive the correct interface scheme.
### Generic interface migration
- [x] Migrate shared dialogs, project settings, notifications, controls,
and Query Builder.
- [x] Migrate dashboard, authentication, publishing, and shared
application UI.
- [x] Migrate the Builder loading state, topbar, sidebars, navigator,
workspace, footer, settings, pages, alerts, and menus.
- [x] Replace fixed interface literals alongside their owning surfaces.
- [x] Remove the old scrollbar variable and hardcoded loading color.
### Style panel and style-source recipes
- [x] Migrate ordinary style-panel inputs, labels, layouts, spacing,
alignment, menus, property states, and value editors.
- [x] Model style-source provenance, kind, interaction, and error as
separate axes.
- [x] Compose categorical style-source colors from neutral and
accent-relative colors.
- [x] Use negative semantics only for actual errors, not overwritten
provenance.
- [x] Reuse one feature-owned recipe across style-source controls,
badges, menus, and values without adding global tokens.
### Canvas and editors
- [x] Migrate canvas selection, reusable outlines, grid guides, resize
handles, labels, badges, and overlays.
- [x] Keep collaborator colors as data visualization while guaranteeing
readable labels.
- [x] Prevent Builder theme values from leaking into authored content.
- [x] Migrate editor surfaces, selections, autocomplete, lint states,
and tooltips.
- [x] Derive syntax visualization from neutral and accent-relative
colors; reserve intent colors for diagnostics.
### Explicit color domains
- [x] Isolate external search and social previews from the application
scheme.
- [x] Preserve user-authored CSS values, functional color previews, and
checkerboards.
- [x] Review brand surfaces independently in both schemes.
- [x] Document every retained literal in the exception ledger.
### Stories, tests, and legacy removal
- [x] Migrate all affected Builder stories and tests.
- [x] Replace the design-system test that intentionally references the
legacy scale.
- [x] Add theme-preference and scheme-resolution behavior tests.
- [x] Remove the legacy `design-tokens.color` registry.
- [x] Remove the Stitches `colors` scale and `rawTheme.colors`.
- [x] Remove color-name conversion code that exists only for the legacy
scale.
- [x] Add a focused repository check that rejects legacy references.
- [x] Confirm no compatibility mappings or deprecated aliases remain.
### Browser-test infrastructure
- [x] Run pure Design System tests in Node and browser-dependent tests
in Vitest Browser Mode with Playwright Chromium.
- [x] Migrate all 79 Builder E2E workflows from the custom harness to
standard Playwright Test.
- [x] Replace filename-based shard discovery with standard Playwright
sharding.
- [x] Preserve clean-backend shard retries and upload Playwright failure
artifacts in CI.
- [x] Remove the custom runner, registry, and timeout infrastructure.
### Verification and documentation
- [x] Compare light-mode visual regressions directly with `main`; review
every difference rather than accepting snapshots wholesale.
- [x] Add representative dark coverage for dashboard, Builder shell,
style panel, dialogs, editors, canvas tools, and status states.
- [x] Test default and extreme custom-theme presets.
- [x] Verify semantic and categorical-recipe contrast.
- [x] Test first paint, persistence, system changes, portals, and canvas
isolation.
- [x] Run affected tests, typechecks, lint, formatting, and Storybook
checks.
- [x] Review fixture impact; no fixture inputs or generated outputs are
affected.
- [x] Review authoritative `docs/` content and update it where needed.
- [x] Review the final diff and make this checklist reflect delivered
scope.
## Current verification
- Design-system typecheck and generated-type freshness: passed.
- Design-system tests: 222 passed, including the full theme-parameter
contrast sweep and browser component coverage.
- Builder typecheck and production build: passed.
- Theme preference and scheme-resolution tests: 10 passed.
- Scoped Oxlint, formatting, and diff checks: passed.
- Design-system Storybook build and representative light/dark visual
review: passed.
- Builder E2E: 80/80 Playwright entries passed (setup plus 79
workflows).
Ref #3818Closes#6267
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.
## 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>
## prettier -> oxfmt (0.58.0)
- .oxfmtrc.json generated with `oxfmt --migrate=prettier`: trailingComma
es5, printWidth 80 (oxfmt defaults to 100), sortPackageJson disabled,
.prettierignore patterns folded in (file deleted).
- ignorePatterns additionally exclude yml/yaml/toml/jsonc and
packages/cli/templates/** so oxfmt covers exactly the file set prettier
used to format (ts,tsx,js,json,css,md) and never touches user-facing
scaffolding artifacts.
- root `format` script, nano-staged pre-commit hook and the CI check
(`pnpm oxfmt --check`, replacing `prettier --cache --check` and its
actions/cache step — oxfmt checks the whole repo in ~0.7s) now run
oxfmt.
- every generator script that ran `prettier --write` on __generated__
output now runs `oxfmt` (css-data, icons, html-data, postgrest, sdk,
sdk-components-*, apps/builder tailwind preflight).
- the four scripts that used prettier's JS `format()` API write raw
source instead and their package.json scripts pipe the generated file
through the oxfmt CLI: project-build generate-docs +
generate-runtime-operation-contracts, cli generate-docs, apps/builder
generate-server-only-api-metadata. oxfmt rejects paths containing "..",
so cross-package generated files are formatted via a subshell cd into
the owning package.
- one-time reformat: oxfmt's canonical output differs from prettier on 8
repo source files (binary-operator continuation indent, import() call
wrapping, sub-pixel spacing of empty for-clauses); oxfmt honors existing
`// prettier-ignore` comments so intentional layouts are kept.
- prettier remains ONLY as a cli devDependency for the
prettier/standalone HTML normalizer inside html-to-jsx.test.ts, and
inside fixtures/ + packages/cli/templates/ (ships to scaffolded user
projects; out of scope here).
- editor config switched from esbenp.prettier-vscode to oxc.oxc-vscode
(devcontainer extension list, .vscode editor.defaultFormatter).
## oxlint 1.56 -> 1.73
- oxlint 1.73 rules-of-hooks special-cases hooks NAMED useEffectEvent:
their results may only be called from effects. Our
app/shared/hook-utils/effect-event.ts is a stable-callback helper
(useEvent pattern), intentionally called from event handlers and passed
as props. The rule is disabled via .oxlintrc.json overrides for the five
files doing this (product code untouched); note those files lose
hook-order linting entirely until the rule becomes configurable.
## TypeScript 5.8.2 -> 7.0.2 (native compiler)
- `tsc` is now the Go-based native binary; all `tsgo` script usages
(workspace packages and fixtures) renamed back to `tsc` and
@typescript/native-preview removed (the package is being phased out).
- fixes for TS7 changed defaults and stricter checks:
- `types` now defaults to [] -> base tsconfig sets "types": ["node"]
(restores the implicit-@types/node behavior of TS5).
- `rootDir` now defaults to ./ -> every tsconfig.dts.json sets
"rootDir": "./src" (TS5011 otherwise).
- import assertions removed -> cli/src/cli.ts uses `with { type: "json"
}` (TS2880).
- stricter isolatedDeclarations inference -> explicit annotations in
css-data bin/property-filter.ts (TS9010) and image image-dev.stories.tsx
(TS9013).
- declaration serialization limit -> project-build builder-runtime.ts
runtimeOperationContracts gets an explicit type (TS7056); the annotation
preserves the narrow RuntimeOperationId union.
- TS7 ships no stable programmatic API:
- react-sdk (component-generator tests drive the compiler API) aliases
its typescript devDependency to @typescript/typescript6@^6.0.2; its bin
is `tsc6`, so the package's typecheck still runs native TS7 tsc from the
workspace root.
- generate-arg-types keeps typescript 5.8.2 for react-docgen-typescript.
- fixtures/ and packages/cli/templates/ keep typescript 5.8.2
(user-facing); fixture scripts still work because plain `tsc` resolves
to their local dependency.
## vite -> rolldown-vite 7.3.1 (oxc bundler)
- global pnpm override `"vite": "npm:rolldown-vite@^7.3.1"`: the builder
app (remix v2 vite plugin works unmodified), every package vite build
and the storybook build now bundle on rolldown/oxc.
- vitest is scoped BACK to vanilla vite via `vitest>vite`,
`vite-node>vite` and `@vitest/mocker>vite` overrides because vitest
3.1's runner does not understand rolldown's SSR transform
(__vite_ssr_exportName__ ReferenceError in every suite).
- those overrides pin vite EXACTLY to 6.3.4: letting ^6.3.4 float to
6.4.3 breaks cli prebuild tests (dynamic import of a generated
app/routes/$.tsx fails to resolve under 6.4.3's loader).
## unrelated cleanup requested during review
- apps/builder commands.ts imports duplicate-tokens-group statically
instead of via dynamic import. The circular dependency the dynamic
import guarded against only exists through the command-panel barrel
(command-panel.tsx > groups/index.ts > commands-group.tsx >
commands.ts); importing the group module directly is cycle-free
(verified with madge), matching the neighboring wrap-group and
convert-group imports.
## verification
- pnpm lint, oxfmt --check: clean.
- pnpm -r typecheck (TS7 native) and pnpm dts: clean.
- pnpm -r test: all suites pass (builder 2093 tests, cli 630, react-sdk
45, project-build 11, ...).
- builder app build, full workspace build, cli build and storybook build
all succeed on rolldown-vite.
## 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
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
## Description
This feature is related to
[#5103](https://github.com/webstudio-is/webstudio/issues/5103). This
adds lock/unlock support for token style sources and prevents editing
locked tokens from the style panel, including keyboard-focus paths,
while keeping token management actions available.
Lock option in token:
<img width="292" height="294" alt="image"
src="https://github.com/user-attachments/assets/29b4119c-16f1-4afc-91df-42815e7d8a5f"
/>
Lock icon for token with properties viewable but not editable:
<img width="269" height="570" alt="image"
src="https://github.com/user-attachments/assets/f2d545f0-690d-4d95-b0d6-203b82ab063f"
/>
Unlock option for locked token:
<img width="302" height="376" alt="image"
src="https://github.com/user-attachments/assets/6b49f0f2-f80b-4eaa-83a3-cfbf91da1db8"
/>
## Steps for reproduction
1. Select an element that uses a token in the Style Sources control.
2. Open the token menu and click `Lock token`.
3. Try editing styles in the style panel with mouse and keyboard.
4. Expect the locked token to stay unchanged: edit controls are
unavailable/inert, focus does not enter locked sections, and token
actions like rename, duplicate, detach, delete, and unlock still 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
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] 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
- [x] added tests
- [ ] if any new env variables are added, added them to `.env` file
---------
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:
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
## Description
Adds the ability to replace an existing image asset with a new file
directly from the asset details panel, without having to delete and
re-upload manually. Related to [place an image so that it gets replaced
automatically everywhere its being used
#3268](https://github.com/webstudio-is/webstudio/issues/3268)
When clicking the new replace button on an image asset:
1. A file picker opens filtered to image MIME types
2. The new file is uploaded via the existing upload pipeline
3. All references to the old asset (props, styles, page meta: favicon,
social image, marketplace thumbnail) are atomically re-pointed to the
new asset
4. The old asset's filename and description are copied to the new asset
5. The old asset is deleted
A new `ReverseIcon` from the Figma library was added to the icons
package to represent the replace action.
## Steps for reproduction
1. Open the asset manager and select any image asset
2. In the asset details panel, click the new replace icon button next to
the download button
3. Select a new image file from the file picker
4. Expect the asset to be replaced in place - all usages (image props,
background styles, favicon, social image) should now reference the new
file with the original asset's filename preserved
## 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
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
0000)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env` file
- Add brush-cleaning icon and regenerate icons package
- Add delete unused assets command to command panel
- Add DeleteUnusedAssetsDialog with scrollable asset list
- Add icon button to assets panel header for quick access
- Export calculateUsagesByAssetId from asset-info
- Add autoFocus to Delete button in all delete-unused dialogs"
## 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
## 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
- Changed safe mode detection from .has() to strict === 'true' check
- Made safemode a required boolean parameter in builderPath/builderUrl
- Added 'Open in safe mode' option to dashboard project menu
- Added safe mode indicator button with shield icon in topbar
- Safe mode now prevents all script execution in HTML embeds
- Added isSafeMode to React SDK context
- Added test coverage for safe mode in HTML embed component
## 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
## Description
- [x] new file types support
- [x] categories filter
- [x] sorting filter
- [x] asset resource for access from custom code
## Steps for reproduction
1. click button
3. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
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: zehjotkah <111518041+zehjotkah@users.noreply.github.com>
## Description
- user plan not correctly considered
- loading icon stuck
- added loadin indicator
## 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
## 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
## Description
The `GradientControl` helps in displaying the colour stops that are
available in the linear-gradient that users added.
There are two knows issues at the moment.
- The only limitation is. We can't swap the colours when a colour stop
crosses an existing colour stop. In some
tools, the colours are swapped resulting in the swiping of the gradient
too.
This is because of a limitation/bug on the radix side, they pre-sort the
slider stops. So, we can never know which crosses an existing stop and
changed it's value. https://github.com/radix-ui/primitives/issues/2247
## Steps for reproduction
- Passing a linear-gradient should show all the `color-stops` in the
gradient.
- The `color-hints` are displayed at the bottom of the gradient bar.
These can't be moved along, more info about it is in the code component.
Because, this basically changes the whole gradient just by moving.
- The `color-hints` are showed at the bottom of the gradient. Just to
notify users about the existence of the hints.
- Users should be able to move the color-stops along the slider track.
- The color-stops can be moved using the arrow keys from the keyboard.
<img width="299" alt="Screenshot 2024-09-25 at 10 32 47 AM"
src="https://github.com/user-attachments/assets/d65e6af5-bba9-490d-96ff-0e58b8fb93bc">
<img width="289" alt="Screenshot 2024-09-25 at 10 32 43 AM"
src="https://github.com/user-attachments/assets/a3ac83e1-d379-49dc-a5d8-42936960f761">
<img width="560" alt="Screenshot 2024-09-25 at 10 32 38 AM"
src="https://github.com/user-attachments/assets/fef11d9e-2d0c-4d71-8587-227f22551edb">
## 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
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
closes ( #4203 )
- added a new crop svg to icons package and generated the cropIcon
component.
- replaced the eye icon with the crop icon and also changed hidden to
clip in the overflow toggle group.
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
Co-authored-by: Bogdan Chadkin <opensource@trysound.io>
## 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
Ref https://github.com/webstudio-is/webstudio/issues/3632
Added `ws:element` component to represent any html and svg elements
within webstudio.
It is rendered as `<div>` by default which can be customized with "tag"
system property (instance.tag in data).
Here added only CLI generator support with converting html attribute
names to react compatible. Will add builder support separately.
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
## Description
<img width="280" alt="image"
src="https://github.com/user-attachments/assets/b3c29952-8c10-4e8f-88f0-8cea45df87ba"
/>
## 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
## Description
Show eye icon (in primary color) if Node is Animating because of
Selection or if it's Pinned.
<img width="757" alt="image"
src="https://github.com/user-attachments/assets/41597955-6974-49c4-96a9-708480e4d644"
/>
## 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
## Description
<img width="255" alt="image"
src="https://github.com/user-attachments/assets/85782344-e992-4f13-a26c-53970136b2ff"
/>
<img width="242" alt="image"
src="https://github.com/user-attachments/assets/d2446c2d-011f-4363-ae35-0a79c66bbbad"
/>
- additionally replaced blockquote icon
- changed the order of the components in general
## 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
Closes#4430
## Todo
- [ ] Better empty state in projects
- [ ] Opening some of those things like video tutorials or support hub
in an iframe directly in the dashboard
- [ ] Search
- [ ] published domain
## 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
[Discussion](https://discord.com/channels/955905230107738152/1323031888281075793)
## Description
As a designer, I want to know at a glance if the style source has no
defined values. Cases where this is useful:
1. Is anything defined on Local? E..g you sometimes forget to switch the
token and define things on local by accident
2. Is a token not having any value after it was created because value
went on some other token? again, possibly because token wasn't selected
Empty token should be a red flag, should basically never happen, but
empty local source would be most of the time
## 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
## Description
- fix 1px space between panels
## 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
## Description
Click on help icon at the bottom opens popover which now has a button to
open support hub directly in the builder, without leaving it.
## Todo
- [ ] rebuild the help popover into a dialog with boxes that explain
each item
## 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
## Description
- [x] left sidebar tab icons
## 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
## Description
ref #3994
<img width="284" alt="image"
src="https://github.com/user-attachments/assets/6fba8744-6a37-44b8-82ab-16268c7c37fc">
## 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
## 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
## Description
To symbolize global settings we are changing the icon
## 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
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Oleg Isonen