- 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
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
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
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
## 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
- Add new story variants across ~100 files covering previously untested props
- Fix all story titles to use sentence case per UI label guidelines
- Consolidate duplicate card, thumbnail, and value-text stories into parent files
- Add interactive/controlled variants for checkbox, radio, switch, select, etc.
- Add style source, disabled, icon, placeholder, unit options variants to CssValueInput
- Add sub-menu, radio group, destructive, and disabled variants to dropdown/context menus
- Add dialog resize, maximize, actions, and non-draggable variants
- Add popover title, actions, and side placement variants
- Add tooltip side placements and content variant stories
- Fix shouldHideDot axis mapping: x always maps to justify-content
(main-axis), y always maps to align-items (cross-axis). The visual
transposition for column direction is handled by the CSS grid swap
in the render code, not in the dot-hiding logic.
- Export shouldHideDot and cover with 21 unit tests.
- Refactor stories into Flex_ and Grid_ combination grids showing
all alignItems x justifyContent combinations.
- Delete old flex-alignment.stories.tsx (used hooks, could not work).
- Rewrite shouldHideDot as cross-axis × main-axis intersection check
- Use visibility:hidden instead of conditional rendering to preserve layout
- Consolidate stories into FlexRow/FlexColumn combination grids
- Include normal/default values in story combinations
- Use real style panel dimensions (64×62)
- Skip loader/optimization for data: src in getImageAttributes
- Replace external picsum.photos URL with inline SVG data URI in social-preview story
- Remove unnecessary ThumbnailWrapper from thumbnail stories
## 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
- Show "Don't forget to publish" banner when a domain is connected but
not yet published
- Default-check newly added domains so they're included on publish
- Move domain instructions into a tooltip with help icon and docs link
## 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
- Add brush-cleaning icon and regenerate icons package
- Add delete unused assets command to command panel
- Add DeleteUnusedAssetsDialog with scrollable asset list
- Add icon button to assets panel header for quick access
- Export calculateUsagesByAssetId from asset-info
- Add autoFocus to Delete button in all delete-unused dialogs"
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Previously only purchases with a subscriptionId (recurring
subscriptions) were displayed. Lifetime deals were counted as paid (no
"Free" badge) but not shown in the dropdown. Now LTDs appear as
non-clickable labels while subscriptions remain clickable and navigate
to the billing portal.
## 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