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
## 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
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>
## What
Adds a 255-character limit validation to the page path in the builder's
page settings.
## Why
Previously, paths exceeding 255 characters would only cause a build
failure. This change surfaces the error directly in the page settings
UI, giving users immediate feedback when typing a path that's too long.
## How
- Added a `.refine()` to the `DefaultPagePage` Zod schema in
`packages/sdk/src/schema/pages.ts`
- Uses `path.length <= 255` (safe because the upstream ASCII regex
guarantees 1 byte = 1 character)
- Error displays via the existing `InputErrorsTooltip` on the Path
field, same as other validations (e.g., umlaut rejection)
## Tests
Added boundary tests in `packages/sdk/src/schema/pages.test.ts`:
- Path of exactly 255 characters → accepted ✅
- Path of 256 characters → rejected with "Path can't exceed 255
characters" ✅
All 41 tests pass.
## 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
- Add open/closed states to AccordionItem and AccordionHeader (had none)
- Add closed state to AccordionTrigger (only had open)
- Fix AccordionContent height animation styles in template
- Fix deduplication bug in style panel: component states no longer
appear twice when the instance already has styles for those selectors
- Add indeterminate state to Checkbox root and CheckboxIndicator
- Add open/closed states to all Collapsible parts
- Add open/closed states to DialogTrigger, DialogOverlay, DialogContent
- Add open/closed states to NavigationMenuTrigger, MenuContent, Viewport
- Add open/closed states to PopoverTrigger and PopoverContent
- Add open/closed states to SelectTrigger and SelectContent
- Add checked/unchecked states to SelectItem
- Add inactive state to TabsTrigger and add states to TabsContent
- Add closed/delayed-open/instant-open states to TooltipTrigger and
Content
- Fix selector format: use '[data-state="value"]' (quoted) everywhere to
match css-tree normalization output
- Update tests to use quoted selector form matching real parser output
## 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
## Problem
Commit cc20991b accidentally changed `itemToString` for `var` type
values to use `toValue(item)`, which produces `var(--variable,
fallback)` instead of the intended short `--variable` label.
This meant the CSS value input (when unfocused, and in the autocomplete
dropdown) showed the full `var(--variable, fallback)` string, which is
too long for small inputs and not how it previously displayed.
## Fix
- Restored `itemToString` to return `--${item.value}` for var types
(short label)
- Updated the `onFocus` handler to explicitly call `toValue(value)` for
var types, so the full `var(--variable, fallback)` is shown when the
user focuses the input to edit it
## 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
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.
## 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
## 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 minSeats/maxSeats to PlanFeatures schema
- listMembers returns DB-backed pending invites (no more client-side
state)
- countAllMembers includes pending invites (billed at invite time, Figma
model)
- Builder-level workspace-router calls payment worker on
addMember/removeMember
- Removed client-side invitedEmails state from manage-members-dialog
- getSeatSuspendedMessage now accepts optional workspace name
- notification-router simplified (accept no longer syncs seats)
## 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
Decimals like `line-height: 1.5` were being rounded to integers because
the rounding logic in parseIntermediateOrInvalidValue applied to all
`unit: "number"` values unconditionally. Now it only rounds when
parseCssValue confirms the decimal is actually invalid for the property
(e.g. z-index, column-count require integers; line-height does not).
# Description
This updates the navigator to use Figma-style subtree highlighting
instead of relying on vertical depth lines, which makes deeply nested
selections easier to follow. The selected node keeps the primary
selected background, its descendant subtree gets a lighter background,
and the navigator hides depth bars to reduce visual noise.
Related to
([#5206](https://github.com/webstudio-is/webstudio/issues/5206))
## Steps for reproduction
1. Open the Builder and create or expand a deeply nested navigator tree.
2. Select a node that has multiple nested descendants.
3. Expect the selected node to have the active background, its
descendant subtree to have a lighter background, and the navigator to no
longer rely on vertical guide lines for orientation.
https://github.com/user-attachments/assets/c7be9884-43e2-46f1-bb58-68bcf0bad48c
## 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
## Description
Prevent accidental form submit in the resource variable modal when
adding or removing headers and search params. The icon buttons in the
resource editor were acting as submit buttons, which caused the
new-variable modal to close unexpectedly instead of updating the
resource fields. Updated the builder test-cases document with a manual
regression flow.
## Steps for reproduction
1. Select an element in a project
2. Open Settings for the element
3. Under data variables, create a new variable
4. Set the name
5. Select `resource` as the type
6. Enter a resource URL
7. Add a header
8. Expect the modal to stay open and a new header row to be added
9. Add a search param
10. Expect the modal to stay open and a new search param row to be added
https://github.com/user-attachments/assets/3dff2e22-284b-4548-8565-937255a732bb
## 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
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
1. Fix style panel label rendering for repeated `box-shadow` and
`text-shadow` items after hiding one layer.
When a shadow layer is hidden, it is omitted from serialized computed
CSS. The repeated-style helper was reparsing that computed value and
bailing out when the computed item count no longer matched the cascaded
item count, which caused all shadow row labels to lose their details
even though the CSS and edit dialogs remained correct.
This PR:
- preserves repeated-item index mapping when hidden layers compact the
computed value
- returns hidden parsed items for hidden rows so labels still have data
- makes shadow labels prefer the row's parsed shadow value before
falling back to computed data
- adds regression tests for hidden box-shadow and text-shadow layers
https://github.com/user-attachments/assets/bd25e302-fac1-4cea-8a4b-317cc5b448f7
## Steps for reproduction
1. Select an instance in the builder.
2. Add at least 3 `box-shadow` layers in the style panel.
3. Hide the first layer.
4. Observe that, before this fix, the labels collapse to partial values
like `Outer:`.
6. Repeat the same flow with at least 3 `text-shadow` layers.
7. With this PR, hidden and visible shadow rows keep their full labels.
## Code Review
- [ ] hi @kof, I need you to do
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [x] made a self-review
- [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
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
- Custom domain checkboxes are disabled+unchecked on free plan
- Staging domain checkbox remains enabled (user can check/uncheck)
- handlePublish reads formData directly; disabled checkboxes are never
submitted so custom domains are naturally excluded
- Removed force-set of hasSelectedDomains on free plan so publish button
correctly reflects actual checkbox state
- Add 'vike prerender' to build script so prerendering runs after vite
build
- Move prerender: true from vite.config.ts to pages/+config.ts where
Vike reads it
- Remove prerender option from vike() plugin call in vite.config.ts
Fixes#5649
Update node-version from 20 to 22 in:
- .devcontainer/Dockerfile
- .github/actions/ci-setup/action.yml
- .github/actions/vercel/action.yaml
- .github/workflows/cli-r2-static.yaml
- .github/workflows/cli-r2.yaml
- .github/workflows/migrate.yaml
## 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