mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-10-27 07:13:11 +09:00
docs
429
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Oleg Isonen
|
659e953869 |
fix: Preserve transitions and animation preview behavior (#6602)
Transition variables no longer get copied into unrelated timing fields. Generated Text/Stagger animations use the saved `slidingWindow` prop, while older `charWindow` configurations still work. Easing moves in the expected direction. Windows preview-install reports include the process failure code when available. Closes #6598 Ref #6593 Ref #6599 Ref #6594 The animation runtime lives in [sdk-components-animation #38](https://github.com/webstudio-is/sdk-components-animation/pull/38). The private PR is merged; this PR points to its merged commit. #6593 was tested on its exact saved project in headless Chromium and closed as not reproducible; the confirmed prop leak is fixed here. #6594 was closed after a documented local repro attempt; this PR improves the next report. ## Work - [x] Reproduce the transition bug; add regression coverage in parsing and generated CSS. - [x] Preserve unresolved `transition` shorthands for the browser to resolve. - [x] Keep old `charWindow` values working in Text and Stagger animations, with a red/green regression test in the linked private PR. - [x] Reproduce and fix the saved animation prop mismatch in generated helpers. - [x] Verify text/stagger easing in unit tests and Chromium/Firefox. - [x] Add safe preview-install process details for future Windows reports. - [x] Update Builder property help and both animation docs pages. - [x] Run focused animation tests, typecheck, lint, package build, and animation fixture build after the compatibility fix. - [x] Point the animation submodule to the merged #38 commit. - [x] Verify required CI on the final commit (all workflows passed; one unrelated E2E shard passed on rerun). - [x] Find the production share token and build #6593’s exact project with its reported 0.307.0 packages. - [x] Compare intermediate scroll styles on #6593’s exact project. Visible targets animate in both builds; the leaked attributes disappear with this fix. Known limit: the reported static-target symptom in #6593 and the Windows environment in #6594 were not reproduced. The confirmed animation prop leak and reporting gap are fixed, without claiming the unreproduced symptoms are solved. |
||
|
Oleg Isonen
|
f08b72439c |
fix: Preserve calc flex basis in fragment styles (#6585)
Closes #6584 ## Change A `flex` shorthand with a nested `calc()` and CSS variable could lose its basis during expansion. Keep the complete basis when it appears alone, before the numeric flex factors, or after one or two factors. The parser handles these forms without a function-name list. Also update `mdn-data` from 2.33.0 to 2.37.2, as requested for this PR. Regenerated CSS data adds `scroll-axis-lock` and `window-drag`, marks `zoom` animatable, and refreshes MDN links. The two new property article links currently lead to missing pages, so the generator uses its existing MDN search fallback for them. The flex grammar in MDN data did not change. The flex parser changes add 20 net non-test lines. The dependency update adds 3 net handwritten lines in the generator; the rest is package metadata and generated output. ## Verification - The reported shorthand regression and a `parseCss` comparison against explicit longhands failed before the parser fix and pass afterward. - CSS-data tests: 4,657 passed, 1 skipped. CSS-engine tests: 173 passed. Targeted Builder Chromium tests: 27 passed. - CSS-data, CSS-engine, and Builder typechecks; root lint; formatting; and `git diff --check` passed. - Frozen lockfile install and the full fixture link/sync/build pipeline passed. The only fixture output drift came from unrelated synced sitemap content and was excluded. - Both CSS generators produced stable output on a second run. Both fallback MDN search links returned HTTP 200. - Reviewed Builder `docs/`: no documentation change is needed. Existing guidance covers property status and animation choices. ## Known limitation `calc-size()` is preserved during shorthand expansion, but the separate longhand validator still marks it invalid in non-browser builds. Numeric and basis functions can also be ambiguous until CSS variables resolve; this fallback handles the reproduced basis forms, not every possible calculation. ## Checklist - [x] Reproduce the reported nested `calc()` value and cover shorthand and saved-style parsing. - [x] Preserve the full basis without changing simple flex expansion. - [x] Simplify the fallback parsing, remove the function-name list, and test another valid basis function. - [x] Update `mdn-data` to 2.37.2 and regenerate CSS data and variable fixtures. - [x] Use working MDN search links for the two new properties whose articles return 404. - [x] Review generated CSS, type, and fixture changes. - [x] Run CSS tests, typechecks, lint, formatting, and fixtures. - [x] Review Builder `docs/` for both changes; no documentation update is needed. - [x] Review the diff and commit only related files. - [x] Resolve review feedback for calculated flex bases with optional factors and basis-first order. - [x] Verify required PR CI checks after the final update. |
||
|
Oleg Isonen
|
cdfef44a6a |
fix: Resolve recent content and CSS issues (#6567)
Closes #6554 Closes #6555 Closes #6557 Closes #6559 Closes #6560 Closes #6563 Ref #6558 Ref #6564 ## Change - Preserve `color-mix(... var(...))` in border shorthands, including when width or style is omitted. - Keep bound JSON-LD objects intact, generate valid conditional Content Block JSX, accept truly empty content queries, and reject missing source fields. - Let custom Open Graph values replace defaults and avoid evaluating a Content Block source in the server loader when it has no Resource dependencies. - Add bounded error type and request ID diagnostics to automatic MCP reports. This helps investigate future #6558/#6564 occurrences; it does not claim to fix those unreproduced write failures. The generated API contract is updated. - No persisted-data migration or new user-facing format is needed. ## Verification - New border and missing-source regressions failed before their fixes and pass afterward. Focused package tests, all eight affected package typechecks, lint, generated-API and package-boundary checks pass on the combined branch. - `pnpm fixtures` completed. Its only differences were unrelated remote fixture content (`/acme-test` → `/olegs-test`), excluded from this PR. - Full local Luna/low agent evaluations: 8/9 fixtures passed. `managed-form-runtime-v1` missed its action check, also seen on earlier separate runs. Comparison baselines are incompatible or absent; none were updated. - Required CI is green after the simplification: main workflow (including all Builder E2E shards), visual regression, submodules, and PR lint. ## Checklist - [x] Reproduce the six fixable reports and cover them with regressions. - [x] Investigate #6558/#6564 and add safe diagnostics for future reports. - [x] Address and resolve all review comments on the three original PRs. - [x] Review documentation impact: existing product docs describe the intended behavior; report diagnostics are internal, so no docs update is needed. - [x] Critically review and simplify the combined diff; verify focused tests and package checks. - [x] Simplify recursive content-query evaluation state and verify its regressions. - [x] Required PR CI passes after the simplification. |
||
|
Oleg Isonen
|
2c20db0d01 |
fix: Parse font shorthand with variable families (#6551)
## Summary - Parse `font-size / line-height` structurally so a custom-property font family does not swallow the line-height. - Add parser, shorthand-expansion, and fragment-insertion regression coverage. - Document the semantic conversion sequence for composite media, preserving wrappers while deleting obsolete provider parts. Closes #6547 Closes #6544 ## Verification - `pnpm --filter @webstudio-is/css-data test -- src/shorthands.test.ts src/parse-css.test.ts` — 4,326 passed, 1 skipped - `pnpm --filter @webstudio-is/project-build test -- src/runtime/components.test.ts src/runtime/instances.test.ts` — 181 passed - CSS data, project-build, and CLI typechecks - CLI docs generation - GitHub Actions: all workflows passed (including all six Builder E2E shards) ## Checklist - [x] Regression tests added for the reported behavior. - [x] Docs impact reviewed; MCP manuals and generated docs updated. - [x] Diff and generated documentation verified. |
||
|
Oleg Isonen
|
c389cd3bb2 |
fix: classify errors with structured codes and types (#6539)
Invalid or revoked share links now return an actionable 401 response instead of an unexpected server error. Missing project and workspace records receive distinct responses at their lookup sites. Token, project, and workspace lookups use `.maybeSingle()` and rely on database uniqueness. Missing projects have an explicit `ProjectNotFoundError`; the loader no longer interprets `PGRST116`. The API preserves `UNAUTHORIZED` and `INVALID_AUTH_TOKEN` when authorization fails during context creation, so CLI and MCP clients can offer relinking guidance without inspecting error text. Tokens without API access carry `API_ACCESS_DISABLED`. A repository audit replaces error-message matching with typed errors, stable codes, or structured diagnostics in CLI argument/configuration handling, session conflicts, preview cleanup, import retries, domain unpublishing, asset validation, JSX/expression diagnostics, CSS validation, and publish diagnostics. `AGENTS.md` now explicitly prohibits message-based error classification and recovery. The existing build-permission preflight now advertises structured import-error support. Clients upload assets before importing into older servers that do not advertise it; newer servers keep selective retries using structured missing-file details. The internal template-validation error class remains outside public JSX bindings and input descriptions. Shared Builder `parseError` normalizes tRPC and local validation errors, so UI components only add display context instead of decoding transport payloads. Simplification removes three redundant error classes, catch-and-ignore handlers, an unused formatter, and nested loader error handling. Unpublishing an already unpublished domain succeeds after authorization. CLI configuration failures use the existing shared error handling, and plan parsing catches only JSON parsing failures. Validation: affected suites passed (271 tests across 8 suites in the latest simplification checks), affected package typechecks passed, and lint, package-boundary checks, and `git diff --check` passed. The audit replaced synthetic parser branches and private-method assertions with actual tRPC round trips, PostgREST responses, and public VM behavior. Controlled regressions confirmed that removing serialized validation details and exposing the internal JSX error class both fail the revised tests. Astra reviewed the production changes at medium effort; its compatibility finding and the GitHub JSX-binding comment are fixed, and follow-up review found no remaining substantive issues. |
||
|
Oleg Isonen
|
a4c3b37fc2 |
fix: Unblock reported MCP workflows and improve issue diagnostics (#6438)
## What this fixes
MCP authors can reuse an existing design token in JSX fragments, create
valid border shorthands with CSS variables, and bypass a font that never
settles during responsive screenshots. Common fixed page titles with
spaced separators are also accepted. Issue reports now include the
project ID and safe, bounded IDs from the failed operation, plus clearer
response and browser-startup diagnostics.
## Scope and tradeoffs
- `token("name")` attaches an existing design token; an unknown name
returns a not-found error. Empty token definitions from Builder/UI
remain definitions and follow the normal conflict rules.
- Border shorthands map a single unresolved `var()` to the remaining
width, style, or color field when the other fields are explicit.
- `waitForFonts: false` skips font readiness but still waits for stable
layout frames. The default remains unchanged.
- Fixed titles such as `Pricing - Plans` stay literal. Addition such as
`first + second` remains an expression. Wrap ambiguous subtraction in
parentheses, for example `(first - second)`. Other ambiguous title forms
may still need an exact report.
- Only recognized operation-level IDs are attached to a public GitHub
issue. Authored values, raw arguments, URLs, and credentials are
excluded. IDs from later successful diagnostic reads are not captured.
- This does not fix the underlying response-transform failure; it
improves future reports for that case.
Closes #6424
Closes #6425
Closes #6434
Closes #6439
Ref #6435
Ref #6430
Ref #6417
## Verification
- [x] Reproduced the privacy, page-expression, empty-token, and
content-mode token-reference regressions with failing tests, then
confirmed the fixes pass. A regression test also covers parenthesized
subtraction.
- [x] Full protocol, template, vision, project-build, and CLI test
suites pass; focused Builder issue-report and fragment tests pass. The
protocol, CLI, and project-build suites were rerun after the CI fix.
- [x] Relevant package typechecks, lint, package-boundary check, fixture
pipeline, generated API check, and generated docs check pass. Fixture
output has no diff.
- [x] Reviewed the authoritative MCP documentation and regenerated the
API metadata and MCP docs.
- [x] CSS parser regressions cover border, each side shorthand, and
unresolved variables in width, style, and color positions; css-data
tests, typecheck, and lint pass.
- [x] Fixed the local evaluation runner to pass the task and Webstudio
MCP tools to Luna/low. Each of the six fixtures passed at least once;
focused MCP/evaluator tests, CLI and project-build typechecks, lint, and
formatting pass.
- [x] The complete Luna/low suite passed all six fixtures in two
consecutive sequential runs. Baselines remain incompatible with this
model/effort override and were not updated.
## Follow-up
- If another fixed-title form still fails, use the new project-level
report context and the exact title shape to narrow the parser case.
|
||
|
Oleg Isonen
|
39c290bfa7 |
fix: resolve MCP-reported runtime and component issues (#6362)
## Summary - harden MCP runtime behavior around asset uploads and resources, HTTP responses, component and Content Block application, data reads, and Chromium screenshots - reject shared Slots inside Content Block templates and avoid unsafe unused-asset findings when Content Blocks can hide MDX dependencies - expand named grid-area values according to CSS shorthand fallback rules - add a consent-safe YouTube preconnect control and only warm origins that are actually used - add focused and end-to-end regression coverage for the reported paths ## Verification - project-build: 2,419 tests passed - css-data: 4,623 tests passed, 1 skipped - sdk-components-react: 134 tests passed, 1 skipped - high-impact CLI fixture: 7 tests passed - Builder asset REST service: 22 tests passed Closes #6336 Closes #6339 Closes #6353 Closes #6354 Closes #6355 Closes #6356 Closes #6357 Closes #6358 Closes #6359 |
||
|
Oleg Isonen
|
f6c524572d |
feat: add Builder dark theme and rebuild colors
## 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 #3818
Closes #6267
|
||
|
Oleg Isonen
|
b2d62b2e49 |
fix: Restore scoped descendant selectors (#6195)
## Summary Restore custom state selectors that target descendants of the selected instance, including `:hover .button` and `:hover > .icon`. The CSS engine already generated these selectors correctly. #5886 unintentionally rejected them while hardening MCP style inputs against selectors that can escape instance scope. ## Technical choices - Parse exactly one selector with `css-tree`. - Require the selector to begin with a pseudo-class, pseudo-element, or attribute state anchored to the selected instance. - Allow only descendant and direct-child combinators after that anchor. - Continue rejecting selector lists, unanchored type/class/ID selectors, sibling combinators, unknown pseudo-selectors, and pseudo-elements used as ancestors. - Document CSS variables as the preferred parent-child interaction pattern; use descendant selectors when selector-based targeting is specifically required. ## Todo - [x] Restore scoped descendant and direct-child selectors. - [x] Preserve instance-scope protections. - [x] Cover real authoring inputs and generated CSS. - [x] Demonstrate new tests fail without the restored behavior and scope guards. - [x] Verify the reported workflow through the local CLI/MCP and generated preview. - [x] Review documentation impact and update the authoritative Builder docs. - [x] Verify generated API contracts remain current. ## Verification - `pnpm --filter @webstudio-is/css-data test` — 4,623 passed, 1 skipped - `pnpm --filter @webstudio-is/css-data typecheck` - `pnpm --filter @webstudio-is/project-build exec vitest run src/runtime/styles.test.ts src/runtime/audit.test.ts` — 198 passed - `pnpm --filter @webstudio-is/project-build typecheck` - `pnpm lint` - `pnpm check:generated-api` - Documentation targets and anchors verified - Local MCP disposable-fixture workflow: - Discovered `insert-fragment` and `update-styles` through MCP metadata. - Inserted a card with a descendant `<button class="button">`. - Dry-run and committed `state: ":hover .button"`; `get-styles` returned the persisted state. - MCP preview generated `.chjrfuf:hover .button` while the card used the `chjrfuf` instance class, proving the selector remained instance-anchored. - Preview screenshot completed and returned HTTP 200. - Agent evaluations were not run because the suite has no custom-selector coverage ## Known limitation Sibling combinators remain unsupported because they can select elements outside the selected instance. Selector lists remain unsupported because later list entries can escape the generated instance prefix. Closes #6175 |
||
|
Oleg Isonen
|
ab5717c9cf |
feat: Support CSS properties of every status (#6166)
## Summary - Make every CSS property in the current MDN dataset available in the Advanced style workflow, regardless of standards status. - Mark experimental, nonstandard, and obsolete properties with a yellow warning icon, status-specific tooltip, and MDN link. - Add complete CSS anchor-positioning property and value support. - Update `mdn-data` from 2.28.0 to 2.33.0 and `css-tree` from 3.1.0 to 3.2.1. ## Root cause Webstudio generated its supported property list from MDN data but filtered by status and then manually allowed a few experimental and nonstandard entries. A property could therefore exist in the installed MDN package without being exposed by the Builder. Runtime validation had a separate grammar gap. CSS-tree 3.2.1 now includes the anchor functions and alignment values, but its bundled data predates the current `position-anchor: normal | match-parent` additions. ## Implementation - Remove status-based property filtering and the nonstandard-property allowlist. - Generate one property-to-status map for 486 standard, 40 experimental, 119 nonstandard, and 15 obsolete properties. - Show status-specific browser-compatibility guidance for every non-standard status. Active declarations keep the warning after the value with 3px left spacing. - Infer MDN links from existing property metadata and fall back to MDN search for entries without a direct URL. - Preserve known vendor prefixes from the generated property inventory instead of maintaining a prefix allowlist. - Generate WebKit text fill/stroke longhands directly from MDN instead of preserving them through parser exceptions. - Preserve unsupported initial-value shapes as unparsed CSS rather than excluding their properties. - Use CSS-tree 3.2.1's native anchor-function and alignment grammars. Keep one narrow extension for the current `position-anchor` keywords missing from its bundled MDN data. - Generate recursively flattened shorthand longhands and initial values from MDN. - Expand syntax-defined shorthands generically from CSS-tree's matched property captures, including function-valued components. - Decline generic expansion when CSS-tree and MDN disagree about the longhand set or a longhand repeats. - Update the font grammar reference and CSS math validation for CSS-tree 3.2.1 compatibility. - Regenerate CSS metadata and property-variable fixtures. ## Checklist - [x] Include MDN properties regardless of status. - [x] Generate status metadata for standard, experimental, nonstandard, and obsolete properties. - [x] Show warning icons in Add styles results and active declarations. - [x] Add status-specific consequences and MDN links. - [x] Preserve generated vendor-prefixed properties during CSS import. - [x] Generate WebKit text fill/stroke longhands without parser exceptions. - [x] Support `anchor()`, `anchor-size()`, and `anchor-center`. - [x] Support current `position-anchor` keywords. - [x] Expand syntax-compatible shorthands through generic MDN metadata and CSS-tree captures. - [x] Cover ordered optional, unordered, slash-separated, function-valued, omitted, CSS-wide, variable, invalid, and incompatible-data cases. - [x] Verify new status, warning, prefix, and shorthand tests fail without their implementations and pass when restored. - [x] Update to CSS-tree 3.2.1. - [x] Regenerate CSS metadata and property-variable fixtures. - [x] Review documentation impact; no authoritative Builder documentation lists individual supported CSS properties, so no update is needed. - [x] Review fixture impact; 668 fixtures and 2,030 valid cases were regenerated with zero unsupported. ## Verification - `pnpm --filter @webstudio-is/css-data test` — 4,618 passed, 1 skipped. - Builder CSS editor and property-status tests — 25 passed. - CSS data, CSS engine, Project Build, and Builder typechecks passed. - Lint, formatting, repeated regeneration, and diff checks passed. ## Known limitation This change covers CSS declarations and values. It does not add a dedicated Builder editor for the `@position-try` at-rule. Closes #6162 |
||
|
Oleg Isonen
|
87968f40ff |
fix: Improve MCP authoring and preview reliability (#6105)
## Summary
Fix MCP reliability failures reported in ten issues against CLI 0.288.0
and 0.289.0:
- keep every advertised array input schema client-valid, including
compact and tuple schemas
- report a text asset update as successful when its persisted revision
and bytes confirm that the server committed despite a failed response
- preserve standard package import resolution in generated React Router
previews
- upload variable WOFF2 fonts when callers provide the documented static
font metadata shape
- explain unmatched JSX as a stateless fragment syntax error
- distinguish the `animation` component namespace from value helpers and
reject unsupported CSS at-rules with an actionable validation error
- forward optional session tools such as `download-asset` through
top-level CLI shortcuts
- isolate published generated-preview dependencies from parent
workspaces
- return structured screenshot failures when React Router production
builds fail
Sensitive visual regression checks also run automatically for
organization-authored fork PRs. External fork PRs remain gated by
`safe-to-deploy`.
## Root causes and implementation
The MCP handshake compactor retained an array's type but discarded its
`items` schema. Unconstrained and tuple arrays could also be advertised
without `items`. Schema normalization now adds `items: {}` whenever an
array omits it, while focused discovery retains complete constraints.
Catalog coverage rejects every missing array item, including tuple
schemas, and the handshake remains below its 200 KB budget.
Asset content updates previously treated any failed response as a failed
mutation, even when the server had already swapped the revision.
Recovery now reads the current revision, compares the persisted bytes,
and confirms the revision remains stable across the read. It returns the
updated asset only when all evidence agrees. Otherwise it returns
`ASSET_UPDATE_COMMIT_UNCERTAIN` with guidance not to retry blindly.
Definitive 4xx responses retain their original errors.
The generated React Router Vite config replaced the client and SSR
resolver condition lists without explicitly retaining the standard
`import` condition. Both lists now preserve `import`. The regression
test generates a dynamic route, stages the built React Router SDK as a
published dependency without the local `webstudio` source condition, and
runs the generated build.
Variable fonts are detected with `variationAxes`. Merging the documented
static `style` and `weight` upload metadata into that detected variable
shape made validation fail after the binary was read. Font override
validation and shape-aware merging now live in `@webstudio-is/fonts`.
The SDK delegates to that domain function, which validates the complete
override before applying compatible fields, retains the detected
static-or-variable shape, and keeps the detected format.
Fragment parsing is stateless. Unmatched opening and closing tags now
explain that every opening element must use the same closing tag or be
self-closing, and that refreshing the session cannot repair malformed
JSX.
The `animation` binding is a component namespace, not a callable helper.
Tool schema text, evaluation errors, and the MCP manual now separate
component namespaces from value helpers. The MCP JSX `css` binding
parses the final interpolated CSS with CSS-tree and recursively rejects
selectors and unsupported at-rules such as `@keyframes`, while
preserving supported declarations and case-insensitive `@media` rules.
Keeping this validation at the external binding avoids changing internal
component templates.
CLI shortcut discovery previously omitted optional session tools even
though the runtime registered their handlers. Shortcut discovery now
includes the same optional tool categories as the CLI MCP host, while
real top-level CLI commands keep precedence.
Published generated previews could reuse a stale `node_modules` symlink
into a parent source workspace. Only development manifests containing
the local placeholder version may now reuse the CLI dependency tree.
Published manifests replace symlinks with a local install and disable
npm workspace discovery.
React Router could report a bundler failure while its build command
exited successfully outside CI, allowing screenshot startup to terminate
without a structured result. Managed production builds now set `CI=1`,
so the existing MCP error boundary receives the nonzero build failure
and prints structured JSON.
Visual regression authorization now distinguishes repository members
from external contributors. Organization members' fork PRs run on open,
synchronize, and reopen events; external fork code runs only from a
`safe-to-deploy` label event, and a later commit does not reuse that
approval.
## Implementation checklist
- [x] Preserve valid array item schemas in compact MCP discovery
- [x] Normalize tuple input schemas with an `items` fallback
- [x] Keep the MCP handshake below its 200 KB size budget
- [x] Cover the real `update-props` schema and oversized array
compaction
- [x] Reconcile failed asset-update responses against stable persisted
content
- [x] Reject recovery when a concurrent asset revision is detected
- [x] Preserve `import` resolution in generated React Router client and
SSR builds
- [x] Build a generated dynamic route against a staged published SDK
package
- [x] Regenerate and verify affected React Router fixtures
- [x] Preserve detected variable-font axes with documented upload
metadata
- [x] Add actionable unmatched-tag and unsupported-CSS validation
- [x] Correct animation namespace guidance in tool discovery and errors
- [x] Forward optional session tools through top-level CLI shortcuts
- [x] Replace parent-workspace dependency links for published previews
- [x] Disable npm workspace discovery for isolated preview installs
- [x] Make React Router build failures return nonzero in managed
previews
- [x] Run visual regression automatically for organization-authored PRs
- [x] Verify each regression test fails without its corresponding fix
- [x] Review documentation impact and update the authoritative MCP
manual plus generated outputs
- [x] Confirm no database migration or compatibility migration is
required
- [ ] Run `pnpm evaluations` after explicit approval; not run because
repository policy requires approval before agent evaluations
## Verification
- `packages/cli/src/prebuild.test.ts`: 57 tests passed
- `packages/cli/src/commands/schema.test.ts` and `mcp.test.ts`: 51 tests
passed
- `packages/project-build/src/runtime/components.test.ts` and
`mcp.test.ts`: 194 tests passed
- `packages/asset-uploader`: 196 tests passed
- focused font schema, SDK asset schema, CSS parser, and template CSS
tests passed
- `packages/http-client/src/index.test.ts`: 38 tests passed
- relevant CLI, project-build, asset-uploader, fonts, SDK, CSS data,
template, HTTP client, and React Router SDK typechecks passed
- MCP documentation tests, typecheck, generation, and Markdown source
tests passed
- React Router SDK package build passed
- full fixture link, sync, and generation pipeline passed
- affected Docker and Vercel fixture typechecks and locally bootstrapped
production builds passed
- complete CLI suite: 61 test files and 966 tests passed
- CLI typecheck passed
- preserved nested-workspace dynamic preview installed local `0.289.0`
dependencies and completed its production build
- visual-regression workflow YAML parsing and authorization truth table
passed
- repository lint passed with warnings denied
- formatting and `git diff --check` passed
## Tradeoffs and limitations
Deferred array schemas advertise unconstrained `items` in the compact
handshake to remain client-valid without duplicating detailed
constraints. Agents can retrieve the complete item schema through
focused `meta.get-more-tools` discovery.
Asset reconciliation performs three read requests only after an
uncertain 5xx, malformed response, or transport failure. This keeps the
normal successful path unchanged and avoids claiming success if the
revision changes during recovery.
For variable fonts, detected axes define the metadata shape. Static
`style` and `weight` hints are ignored because they cannot be
represented alongside `variationAxes`; compatible fields such as
`family` still override detection.
Native CSS keyframe authoring remains unsupported in fragment `css`
templates. The tool now rejects it before rendering and directs callers
to editable Webstudio Animation components instead of advertising a
nonexistent callable helper.
Published previews perform one isolated npm install when no valid local
dependency tree is cached. Local source development keeps the fast
workspace symlink path for placeholder-version manifests.
Closes #6104
Closes #6099
Closes #6098
Closes #6106
Closes #6107
Closes #6108
Closes #6114
Closes #6115
Closes #6116
Closes #6117
|
||
|
Oleg Isonen
|
54aa7be145 |
fix: Make MCP authoring reliable across assets, styles, and embeds (#5932)
Closes #5924 Closes #5925 Closes #5926 Closes #5927 Closes #5928 Closes #5929 ## Outcome Makes MCP and CLI authoring predictable across project-wide CSS variables, font uploads, retried asset uploads, destructive asset selection, design-token collisions, and SVG HtmlEmbed edits. ## Delivered ### Project-global CSS variables - [x] `define-css-variable` writes to `ROOT_INSTANCE_ID` / `:root` instead of the home-page Body. - [x] Breakpoint and overwrite behavior is preserved, and compact results identify the root scope. - [x] Existing body-local declarations remain untouched. - [x] Runtime and Builder integration tests cover root selection and generated project behavior. ### Font metadata and upload overrides - [x] Static fonts prefer authoritative `OS/2.usWeightClass`. - [x] Fallback matching normalizes spaces, hyphens, and underscores and checks specific aliases before shorter ones. - [x] Explicit format and partial metadata overrides travel through HTTP, filesystem, and S3 upload paths and are validated after merging with detected metadata. - [x] Regression tests cover ExtraBold, Extra-Bold, Semi Bold Italic, Ultra Light, valid weight classes, invalid weight classes, partial overrides, and invalid overrides. ### Idempotent asset uploads - [x] API uploads compute a project-scoped SHA-256 content hash. - [x] Sequential and concurrent duplicate uploads reuse the existing asset and return `deduplicated: true`. - [x] `force: true` bypasses deduplication for intentional duplicates. - [x] A partial unique index enforces one non-null content hash per uploader project. - [x] Stale reservations are cleaned up and active concurrent uploads are bounded by polling and an actionable retry error. - [x] HTTP, protocol, uploader, and CLI tests cover hash reuse, uniqueness races, force propagation, and result markers. The migration does not backfill historical files. Existing assets begin participating in deduplication when uploaded through the new path; matching content keeps the existing asset's metadata rather than silently rewriting it. ### Consistent asset inputs and permissions output - [x] `delete-asset` exposes exact `assetIds` and explicit `assetIdPrefixes`. - [x] The legacy `assetIdsOrPrefixes` input remains accepted and is marked deprecated. - [x] Exact ids no longer accidentally select longer prefixed ids. - [x] `webstudio permissions` prints a readable role/capability summary by default while `--json` remains unchanged for machine callers. - [x] Help and discovery describe JSON output as optional. - [x] Runtime, CLI, metadata, and generated-contract tests cover canonical and compatibility behavior. ### Deterministic fragment design tokens - [x] Fragment insertion reconciles incoming tokens against project tokens and earlier tokens in the same fragment. - [x] Equal name/style tokens are reused instead of creating suffixed twins. - [x] Same-name/different-style fragments require an explicit `ours`, `theirs`, or `merge` policy at the public runtime boundary. - [x] Builder's established internal paste behavior retains its explicit incoming-value default. - [x] `create-design-token` accepts documented CSS strings through the property-aware CSS parser as well as typed style values. - [x] Tests cover same-fragment reuse/conflicts, persisted tokens, explicit policies, and CSS string parsing. ### Editable SVG HtmlEmbed content - [x] HtmlEmbed validation uses parse5 parser errors and source structure instead of serialization-string equality. - [x] Valid inline SVG is accepted without silently normalizing authored markup. - [x] Fragment insertion now uses the same validator as prop update and text replacement paths. - [x] Malformed markup is rejected before mutation. - [x] Regression tests cover realistic SVG, parser failures, and no-partial-mutation behavior. ## Verification - [x] `pnpm checks`: all workspace tests, typechecks, lint, package boundaries, generated API/docs checks, and fixtures passed on the final committed tree. - [x] `pnpm --filter webstudio test:release-smoke`: packaged install, compact comparison, preview, agent workflow, stdio MCP, and structured commands passed. - [x] Prisma schema validation passed with test connection variables. - [x] Two minimally prompted weak-model subagents independently exercised the changed CLI/MCP discovery and focused workflows. - [x] The subagent-found stale `permissions --help` requirement was fixed, regression-tested, and retested. - [x] Final diff and worktree are clean. |
||
|
Oleg Isonen
|
12ad74584a |
feat: Improve MCP authoring, auditing, and verification (#5886)
## Summary This improves how coding agents discover, author, verify, and audit Webstudio projects through the CLI and MCP. The work focuses on making agents more reliable with less context, while keeping edits semantic and Builder-editable. ## What changes for users - Agents can verify dynamic bindings after authoring and receive actionable diagnostics when expressions, resources, scopes, or component props do not line up. - Agents can create complete resource-backed runtime UI through a semantic operation instead of coordinating fragile low-level edits. - MCP discovery and command output are compact by default, with pagination and focused verbose detail when an agent needs more context. - Asset, style, token, font, page, and component inspection provides stronger usage context so agents can preserve the existing design system. - Rendered audits provide better evidence for responsive behavior, geometry, contrast, generated-build size, and large-project runs. - Cross-project MCP workflows can run from a manifest with explicit mutation approval, isolated failures, resumable progress, and persistent checkpoints. - Project-specific agent onboarding is clearer and does not add telemetry. - Packaged CLI releases gain stronger smoke verification for install, MCP startup, authoring, preview, screenshots, and audits. ## Reliability and architecture - Runtime operation output schemas are generated from the runtime registry and remain client-compatible. - Project-build exports are consolidated around architectural boundaries instead of feature-by-feature convenience entry points. - HTTP, preview, screenshot, and project-session paths are hardened for longer autonomous workflows. - Craft compatibility work is read-only and provenance-aware; it does not silently opt ordinary projects into Craft behavior. - A minimal-context evaluation harness exercises key workflows with a weaker model and stores bounded, privacy-safe evidence. ## Validation - Rebased on the latest `origin/main`. - `pnpm lint` - Repository-wide `oxfmt --check` - CLI typecheck and full test suite: 773 tests passed. - Project-build typecheck and full test suite: 1,866 tests passed. - Protocol typecheck and full test suite: 83 tests passed. - HTTP client tests: 23 passed. - CSS data tests: 3,620 passed, 1 skipped. - Focused Builder tests: 67 passed. - Package-boundary, generated API, and generated documentation checks passed. - Minimal-context agent evaluations passed for authenticated resource-backed UI and design-system-aware responsive authoring. |
||
|
Oleg IsonenandClaude Fable 5
|
de23e2a888 |
chore: migrate toolchain to oxc (oxfmt, oxlint, rolldown-vite) and typeScript 7 (#5868)
## 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>
|
||
|
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. |
||
|
Oleg Isonen
|
82c3d83fd1 |
fix: optimize CLI import for large data amount (#5831)
## Summary - Add CLI project import support from synced `.webstudio/data.json` into another project via a destination share link. - Move project bundle import/export contract into `@webstudio-is/protocol`, including bundle versioning, staged upload constants, schema validation, and fixture coverage. - Upload project bundle data through staged TUS upload before calling the import RPC to avoid request body limits. - Upload referenced assets as binary files through the existing asset upload route before importing asset rows. - Add `--skip-assets` and `--ignore-version-check` import options. - Add retry handling for transient missing imported asset files by re-uploading only the reported missing assets. - Share missing-asset import error formatting/parsing through protocol to avoid duplicated string contracts. - Preserve browser asset upload behavior while adding API upload support. - Normalize schema naming across the branch to lower-case names without `Schema` suffix. |
||
|
Oleg Isonen
|
95dc7f0a75 |
fix: Validate malformed CSS variable values (#5787)
**Summary** Validates CSS custom property values as raw CSS token streams before saving/parsing them. This prevents malformed values like `#sd'` from being normalized into `sd` or serialized into broken canvas CSS that invalidates the whole generated rule. **Changes** - Added tokenizer-based validation for custom property values. - Rejects malformed strings, URLs, comments, unmatched blocks, and trailing backslashes. - Preserves raw custom property declaration values before `css-tree` can repair/normalize them. - Prevents custom property value editing from coercing invalid input through fallback parsing like `kebabCase()` or color recovery. - Added regression tests for advanced panel input and CSS data parsing. **Verification** - `pnpm --filter @webstudio-is/css-data test -- parse-css-value.test.ts parse-css.test.ts` - `pnpm --filter @webstudio-is/builder test -- parse-intermediate-or-invalid-value.test.ts parse-style-input.test.ts` |
||
|
Oleg Isonen
|
5ed7588877 |
feat: Add tooltip when transforms are unavailable (#5778)
Closes https://github.com/webstudio-is/webstudio/issues/5336 Adds a tooltip to the Transforms section `+` button when transforms are unavailable for the selected element. The Transforms section now stays visible but inactive for unsupported elements, and the tooltip explains that transforms do not work with `display: inline` and suggests changing display to `inline-block` or `block`. Also adds shared CSS data helpers for HTML replaced elements so the transform availability check can distinguish regular inline elements from replaced inline elements like `img`. |
||
|
Oleg Isonen
|
976ffd33f4 |
fix: Fix pasted CSS math values (#5759)
## Summary - Preserve browser-valid CSS math values during CSS value parsing when `css-tree` can parse the value but cannot fully validate the property syntax. - Fix pasted HTML/imported inline styles like nested `clamp()` + `calc()` font sizes being marked invalid. - Keep malformed math values and numeric functions in non-numeric properties invalid. - Add regression coverage for CSS value parsing and HTML paste/import behavior. ## Testing - `pnpm --filter @webstudio-is/css-data test src/parse-css-value.test.ts` - `pnpm --filter @webstudio-is/builder test app/shared/html.test.tsx app/shared/tailwind/tailwind.test.tsx` ## Notes This prevents valid pasted CSS math expressions from becoming invalid style values and crashing the builder on import. |
||
|
Oleg Isonen
|
6b09e91324 | build: Release 29 04 26.staging (#5742) | ||
|
Oleg Isonen
|
b4941aaaf1 | fix: Tailwind border color arbitrary var (#5717) | ||
|
Oleg Isonen
|
f052200d07 |
fix: preserve CSS variable and gradient references on paste (#5716)
Preserve var() references in pasted gradient shorthand (css-data/parse-css.ts) When expanding shorthand properties (e.g. background), unresolved var() tokens were lost. Now they're recovered by probing each longhand with a placeholder, mapping which longhands the var belongs to, and restoring it. Fix border-(--x) Tailwind v4 syntax not recognized (tailwind.ts) borde |
||
|
Oleg Isonen
|
89188bede8 |
fix: resolve transitive var() references in shorthand expansion (#5705)
## 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 |
||
|
Oleg Isonen
|
198ae5d65a |
fix: Cross rule CSS var resolution (#5698)
## Description
Pasting this will now resolve correctly
```html
<style>
.my-parent {
--clr-red: #f00;
min-height: 75vh;
}
.my-child {
background: var(--clr-red);
min-height: 50%;
}
</style>
<div class="my-parent">
<div class="my-child"></div>
</div>
```
|
||
|
Oleg Isonen
|
8de2fd47f6 |
fix: CSS shorthand properties not saved when value contains var() (#5688)
Shorthand properties like background: var(--color) were silently dropped when pasting into the CSS editor because the shorthand expander can't handle unresolved var() references. Fix: CSS vars from the current element's computed styles are now resolved before expanding shorthands. Inline and nested fallbacks (var(--a, var(--b))) are supported. If a var still can't be resolved, a toast error is shown instead of silently dropping the property. |
||
|
Oleg Isonen
|
9e72cc23c0 |
feat: New color formats and color picker (#5661)
https://github.com/webstudio-is/webstudio/issues/3574 |
||
|
Oleg Isonen
|
44a5c5f265 |
feat: Parse color functions with CSS variable alpha channel (#5660)
ref https://github.com/webstudio-is/webstudio/issues/3574#issuecomment-4116312483 (e.g. Taillwind's rgb(r g b / var(--tw-opacity))) - css-engine/schema: extend ColorValue.alpha to number | VarValue - css-engine/to-value: serialize VarValue alpha using toValue() - css-data/parse-css-value: add parseColorWithVarAlpha using css-tree AST substitution (no fragile string replacement); inject fallback: 1 when var has no explicit CSS fallback - style-object-model: resolve VarValue alpha in substituteVars so the color picker receives a number when the custom property is defined - color-control: use VarValue.fallback for the picker when alpha is still unresolved, falling back to 1 only as a last resort |
||
|
Oleg Isonen
|
1784d635c0 |
feat: Paste HTML with CSS with full selectors and regular syntax support (#5648)
## Description 1. What is this PR about (link the issue and add a short description) ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 0000) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env` file |
||
|
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 |
||
|
Bogdan Chadkin
|
942b81b8ff |
refactor: upgrade colorjs.io to v0.6 and adopt functional API (#5617)
## Summary Upgrades colorjs.io from v0.5.x to v0.6.x and adopts the new functional API to fix TypeScript compatibility issues and reduce bundle size. ## Breaking Changes in v0.6 This release includes two major changes from colorjs.io that required code updates: 1. `null` instead of `NaN` for "none" values — Coordinates now use `number | null` instead of the custom `Number` instance that previously used `"none"` strings. This eliminates runtime casting and improves TypeScript DX. 2. Plain numbers instead of `Number` objects — Coordinates are now plain number primitives rather than `Number` objects with parsing metadata, improving performance and bundle size. ## Changes Made - Upgraded colorjs.io to v0.6.x - Adopted functional API (`/fn` entry point) for tree-shakeable imports and reduced bundle size - Updated coordinate handling to use `number | null` directly instead of custom `Number` instances with `"none"` values - Removed runtime casting previously required for TypeScript compatibility - Aligned with engramma and hdr-color-input — both already use the functional style, enabling code deduplication ## Migration Notes See [colorjs.io v0.6.0 release notes](https://github.com/color-js/color.js/releases/tag/v0.6.0) for full details on the breaking changes. |
||
|
Oleg Isonenandzehjotkah
|
d87142965c |
feat: Breakpoint simulator (#5608)
## Problem
When defining CSS variables with different values for condition-based
breakpoints (e.g., `prefers-color-scheme:dark` vs
`prefers-color-scheme:light`), designers had no way to preview these
variations without manually changing system preferences.
Example:
```css
:root {
--primary-color: #000;
--background: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #fff;
--background: #000;
}
}
```
Previously, testing dark mode required switching OS settings back and
forth.
## Solution
Implements runtime CSS media rule manipulation to simulate
condition-based breakpoints without changing system settings. When a
designer selects a condition-based breakpoint, the simulator dynamically
modifies CSS media rules:
- Matching rules (e.g., `prefers-color-scheme:dark` when dark is
selected) → replaced with `(min-width: 0px)` (always true)
- Non-matching rules → appended with `(max-width: 0px)` (always false)
- Original media queries are stored and restored when switching away
## Features
**Core Functionality:**
- Simulates media query conditions by replacing them with
always-true/false queries
- Supports all condition-based media features (`prefers-color-scheme`,
`prefers-reduced-motion`, etc.)
- Handles both spaced and non-spaced formats
**Performance:**
- Caches media rules by feature to avoid repeated DOM traversal
- Debounces rapid breakpoint changes (50ms)
- Uses WeakMap for automatic memory management
**Robustness:**
- Validates restoration success with warning logs
- Handles CORS-restricted stylesheets gracefully
- Proper cleanup on abort signal with cache clearing
## Technical Implementation
**Key Functions:**
- `parseCondition()` - Parses condition strings
- `getMediaRulesForFeature()` - Caches and retrieves relevant media
rules
- `applySimulation()` - Debounced application of media rule
modifications
- `restoreAllRules()` - Restores original media queries
- `subscribeBreakpointSimulator()` - Integrates with nano-states and
lifecycle
**Integration:**
- Subscribes to `$selectedBreakpoint` nano-state
- Runs in design mode only
- Cleanup via AbortSignal
## Testing Instructions
**Setup:**
1. Create CSS variables with condition-based values
2. Configure breakpoints with conditions (e.g.,
`prefers-color-scheme:light`, `prefers-color-scheme:dark`)
**Test Cases:**
- Select condition-based breakpoint → verify canvas reflects correct
theme without changing OS settings
- Rapidly switch between breakpoints → verify smooth transitions
- Switch to width-based breakpoint → verify original media queries are
restored
- Check console for errors (should only see warnings for legitimate
issues)
## Impact
Designers can now preview dark/light themes and other condition-based
styles instantly without changing system settings, significantly
improving the workflow for building modern, accessible interfaces.
---------
Co-authored-by: zehjotkah <111518041+zehjotkah@users.noreply.github.com>
|
||
|
Oleg Isonen
|
c5431eb96e |
fix: preserve -webkit-text-stroke prefix in CSS parsing (#5584)
When entering -webkit-text-stroke in the advanced style section, it was incorrectly converted to --text-stroke (CSS variable). This happened because normalizeProperty() strips vendor prefixes from properties not in the prefixedProperties allowlist, and then parse-style-input.ts sees the unknown property 'text-stroke' and converts it to a CSS variable. Changes: - Add -webkit-text-stroke, -webkit-text-stroke-color, and -webkit-text-stroke-width to prefixedProperties list - Add test for -webkit-text-stroke preservation ## 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 |
||
|
Oleg Isonen
|
fdee339de0 | chore: Migrate to tsgo (#5578) | ||
|
Oleg Isonenandzehjotkah
|
1f4c53419d |
feat: Pseudo elements (#5572)
This PR replaces the limited "States" dropdown in the Style Panel with a flexible input field that supports any CSS selector, pseudo-class, or pseudo-element. This allows for advanced styling capabilities such as `:has()`, `:focus-visible`, and complex combinators. ## Key Changes ### Flexible Selector Input - Replaced the fixed "States" category list with a free-form input field. - Supports **any** valid CSS selector (e.g., `:hover`, `::before`, `:has(:checked)`). - Validation logic ensures only valid selectors are accepted (triggered on `Enter` key). ## How to Test 1. Select an element and open the Style Panel. 2. Click on the Local style source or a Token. 3. In the input field (bottom of menu), type a selector like `:hover` or `:first-child` and press Enter. 4. Verify the selector is added and selected. --------- Co-authored-by: zehjotkah <111518041+zehjotkah@users.noreply.github.com> |
||
|
Oleg Isonen
|
e9a3a1ac00 |
feat: Support any media query condition as a breakpoint (#5547)
## Description - [x] add a list of conditions - [x] allow other units for min/max ## 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 |
||
|
Bogdan Chadkin
|
f7d56b8bac | fix: parse tailwind colors with css variables correctly (#5479) | ||
|
Bogdan ChadkinandOleg Isonen
|
21bce61052 |
feat: support modern color spaces in color inputs (#5465)
Ref https://github.com/webstudio-is/webstudio/issues/3574 Here improved css value parser to parse and store any color space. oklch(), hsl(), color() and others can be used in any color input. Color picker converts to rgb on the fly and do not support any other color space at the moment. --------- Co-authored-by: Oleg Isonen <oleg008@gmail.com> |
||
|
Bogdan Chadkin
|
7139a35c68 |
refactor: migrate to colorjs.io (#5463)
colord library we used does not support new color spaces like oklch. colorjs.io is mature library and handles this stuff just well. |
||
|
Bogdan Chadkin
|
8d14d1b5e3 |
refactor: generate modern color syntax (#5456)
Ref https://github.com/webstudio-is/webstudio/issues/3574#issuecomment-3529164146 Here added ColorValue to styles schema. toValue now generates modern syntax like rgb(0 0 0 / 0.5) for both color and rgb values. |
||
|
Bogdan Chadkin
|
02ca084a0c |
refactor: upgrade to csstree v3 (#5455)
The new version is aware of modern colors and other new css features. |
||
|
Oleg Isonen
|
dc508445ce |
feat: Gradients UI (#5449)
## Description Closes https://github.com/webstudio-is/webstudio/issues/3448 ## Todo - [x] linear gradient - [x] without stops linear-gradient(red,green) - [x] delete stops - [x] support variables - [x] tweak design - [x] conic - [x] one-color - [x] radial |
||
|
Jaya Krishna NamburuandOleg Isonen
|
0484d9c26f |
experimental: add gradient controller to update color stops using ui (#4159)
## 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> |
||
|
Bogdan Chadkin
|
aff636940b |
chore: drop legacy AI prompts and logic (#5345)
All of this is very outdated and does not make a lot of sense to have in our code base. |
||
|
Bogdan Chadkin
|
4abb7cf3e2 |
feat: support svg properties in style panel (#5332)
Ref https://github.com/webstudio-is/webstudio/issues/5258 Newer mdn-data contains all stylable svg properties (they finally got through some documentation and implementation process). Tweaked all experimental stuff and ditched obsolete properties. <img width="286" height="538" alt="image" src="https://github.com/user-attachments/assets/1e579be0-0a12-4013-ab04-09d5e008aeed" /> |
||
|
Bogdan Chadkin
|
310ab3aa1d |
fix: support max-* breakpoints in tailwind (#5299)
Ref https://github.com/webstudio-is/webstudio/issues/2651 Tailwind has max-sm, max-lg etc endpoints which need to adapt to ours as well |
||
|
Bogdan Chadkin
|
de61cffde6 |
experimental: paste tailwind (#5217)
Ref https://github.com/webstudio-is/webstudio/issues/2651 Added "Paste Html With Tailwind Classes" command. For now only tailwind 3 is supported. Also fixed a few issues with css parser. <img width="547" alt="Screenshot 2025-05-18 at 00 38 01" src="https://github.com/user-attachments/assets/470b63e0-9b17-4769-8a65-679b90d73a89" /> |
||
|
Oleg Isonen
|
7f50fbe85c |
fix: Rewrite overflow clip and hidden description (#5201)
## Description Rewrite overflow clip and hidden description and move it to css-data ## 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 |
||
|
Bogdan Chadkin
|
452c50a41a |
refactor: upgrade vite for vitest and storybook (#5165)
Tough cookie. There is a problem with resolving react-remove-scroll, figured it by reducing allowed amount of server conditions. |
||
|
Bogdan Chadkin
|
fb40632e99 |
refactor: upgrade uno (#4905)
The new version deprecated "uno" preset in favor of wind3 and wind4 presets to support both tailwind versions. We can switch to wind4 later. |
||
|
Bogdan Chadkin
|
ccba8d9581 |
feat: substitute variables in calc and box-shadow (#5049)
Ref https://github.com/webstudio-is/webstudio/issues/4939 Here improved style engine logic to substitute variables in unparsed values which is essential in cases like box-shadow or calc with variables. <img width="334" alt="Screenshot 2025-03-26 at 02 03 03" src="https://github.com/user-attachments/assets/7b002061-1e83-48d9-abad-70547d1cdfc0" /> <img width="554" alt="Screenshot 2025-03-26 at 01 59 40" src="https://github.com/user-attachments/assets/85597b72-cc74-4be9-9c32-ddc1b6510131" /> |