## Description
This PR refactors content mode property restrictions to use a
declarative, component-based configuration approach. Instead of
maintaining hardcoded lists of editable properties in a central
location, each component now declares which of its properties should be
editable in content mode via the `contentMode: boolean` flag in
PropMeta.
### Content Mode Properties Added:
| Component | Properties |
|-----------|-----------|
| Image | src, width, height, alt |
| Video | src, width, height |
| YouTube | url |
| Vimeo | url |
| Vimeo Preview Image | src |
| Link | href |
| Markdown Embed | code |
## Steps for reproduction
1. Create a project and share it with editor-only access
2. Switch to content edit mode
3. Select a YouTube or Vimeo component on the canvas
4. In the Properties panel, the `url` property should now be visible and
editable
5. Modify the YouTube/Vimeo URL and verify it updates correctly
## 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
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---------
Co-authored-by: shreyanshkotak <sk7739@nyu.edu>
## Description
Related to https://github.com/webstudio-is/webstudio/issues/5715
1. Keep `Shift + ArrowUp/Down` and `Option/Alt + ArrowUp/Down` as
numeric step modifiers only.
2. Prevent those same modifier keys from expanding the edited side set
while the user is incrementing/decrementing a focused value input.
3. Preserve existing side-group behavior for click/open, scrub,
Enter/commit, and reset flows.
## Steps for reproduction
1. Navigate to a spacing or position input popover for a single side,
for example `margin-top` or `top`.
2. Focus a numeric value.
3. Press `Shift+ArrowUp` or `Alt+ArrowUp`.
4. Expect only the active property to increment, with `Shift`/`Alt`
affecting step size.
5. Press Enter while holding `Shift` or `Alt`.
6. Expect grouped property behavior to still apply.
## 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
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env` file
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
1. Related to #5501. This lets user escape exit preview mode when
triggered from the builder UI, while preserving canvas-originated escape
behavior so preview mode remains active when the canvas should handle
the key event.
## Steps for reproduction
1. Open the builder and switch to preview mode.
2. Press Escape from the builder UI.
3. Expect preview mode to exit and the sidebar panel to return to auto.
4. Switch to preview mode again.
5. Press Escape while the focused inside the canvas.
6. Expect preview mode to stay active and canvas/native page behavior to
be 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
- [ ] 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
Treat whitespace-only text nodes between element siblings as part of the
previous element instead of creating a separate text node.
generateFragmentFromHtml now detects when a text node consisting only of
space appears between two elements and appends that space to the
previous instance's last text child (if present), avoiding creation of a
standalone text child. Added a regression test in plugin-html.test.tsx
to verify pasted HTML like `<span>✓</span> <span>text</span>` preserves
the space and results in two span instances (no separate text node),
ensuring text-content control remains correct in the settings panel.
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
Oleg Isonen