## 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
This PR fixes a UI bug by preserving and displaying the complete CSS
variable (without truncating the second parameter) in both the input
field and the dropdown suggestion list under Display.
Closes#5378
## Steps for reproduction
**Before this fix (current behavior):**
1. Open an existing project or create a new one.
2. Select an element and navigate to **Style → Advanced → + → Add new
CSS Property** and choose `display`.
3. Set `display` to: `var(--anchor-display, none)`.
5. The displayed value is truncated and the `none` appears to be missing
under the Advanced section, even though it’s saved internally.
**After this fix (expected behavior):**
1. Follow the same steps as above.
2. The advanced property and the Display dropdown both consistently show
`var(--anchor-display, none)` without truncation.
## Code Review
- [x] 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: 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
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>
## 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
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
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>
## Description
This pull request introduces a new feature that adds a confirmation
dialog when deleting a page, helping prevent accidental deletions.
Related issue:
[#5418](https://github.com/webstudio-is/webstudio/issues/5418)
## Changes
1. Updated `page-settings.tsx` to include a new
`DeleteConfirmationDialog` component.
2. The dialog prompts users to confirm or cancel before a page is
deleted.
3. Enhances user safety and improves UX by preventing unintended
deletions.
(See the image below for a preview of the dialog.)
## How to Test
1. Open any project.
2. Add a new page.
3. Attempt to delete the page, the confirmation dialog should appear
instead of immediately deleting.
4. Clicking Delete should remove the page; clicking Cancel should close
the dialog without deleting.
<img width="1283" height="855" alt="image"
src="https://github.com/user-attachments/assets/d63afe08-75f4-4a53-9e17-50aed4f1330a"
/>
---------
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
## Problem
The current-date system resource works in the Webstudio builder but
fails in published sites with "dateTime attribute is not set" errors.
## Root Cause
The CLI templates' `customFetch` functions handle the `sitemap.xml`
local resource but don't handle the `current-date` resource, causing
fetch requests to fail when sites are published.
## Solution
Added `current-date` handler to all CLI template `customFetch`
functions, following the same pattern as the existing `sitemap.xml`
handler.
## Changes
- Add current-date handler to Remix HTML/XML templates
- Add current-date handler to React Router HTML/XML templates
- Add customFetch with current-date handler to SSG template
- Normalize dates to midnight UTC to prevent hydration mismatches
## Testing
The fix ensures that when the Time component uses `system.currentDate`,
it will work correctly in published sites, not just in the builder.
Closes https://github.com/webstudio-is/webstudio/issues/3510
## Summary
This PR adds a **Current Date** system resource, extends the `system`
object with a `pathname` property, and enhances the **Time component**
with custom date formatting capabilities to provide more flexibility and
prevent hydration errors.
### Key Features
1. **Current Date System Resource** - Provides normalized date/time
information that prevents React hydration errors
2. **System Pathname** - Adds `pathname` property directly to the
`system` object for easy access in expressions
3. **Time Component Custom Formatting** - Adds a `format` prop with
template tokens for flexible date/time display
## Motivation
These changes solve important use cases:
- **Current Date**: Prevents React hydration errors when displaying
dynamic dates (e.g., copyright years in footers). Previously, using `new
Date()` in expressions would cause server/client mismatch.
- **System Pathname**: Provides easy access to the current page path in
expressions without needing to parse the URL manually.
- **Custom Time Formatting**: Allows users to format dates with simple
templates (e.g., `YYYY-MM-DD`) without being limited to
`Intl.DateTimeFormat` options, and provides a simple way to exclude
specific date or time components to avoid hydration issues.
## Changes
### Current Date Resource
- Created
[`apps/builder/app/shared/$resources/current-date.server.ts`](apps/builder/app/shared/$resources/current-date.server.ts)
- Provides date fields: `year`, `month`, `day`, `iso`, `timestamp`
- All values normalized to midnight UTC (00:00:00.000Z) to prevent
hydration errors
- Registered in
[`rest.resources-loader.ts`](apps/builder/app/routes/rest.resources-loader.ts)
- Added to SystemResourceForm dropdown in UI
### System Pathname
- Added `pathname` property to
[`System`](packages/sdk/src/schema/pages.ts) type
- Updated [`system.ts`](apps/builder/app/shared/system.ts) to compute
and include pathname
- Normalized empty pathname to `'/'` for consistency
- Available in expressions as `system.pathname`
### Time Component Enhancements
- Added [`formatDate()`](packages/sdk-components-react/src/time.tsx:353)
function supporting template tokens:
- `YYYY`, `YY` - year (4-digit, 2-digit)
- `MM`, `M` - month (zero-padded, no padding)
- `DD`, `D` - day (zero-padded, no padding)
- `HH`, `H` - hours (zero-padded, no padding)
- `mm`, `m` - minutes (zero-padded, no padding)
- `ss`, `s` - seconds (zero-padded, no padding)
- Added `format` prop to
[`Time`](packages/sdk-components-react/src/time.tsx:386) component that
overrides `dateStyle`/`timeStyle` when provided
- Updated component logic to check for `format` prop first before
falling back to `Intl.DateTimeFormat`
- Added comprehensive tests for date formatting in
[`time.test.ts`](packages/sdk-components-react/src/time.test.ts)
- Updated component metadata in
[`time.ws.ts`](packages/sdk-components-react/src/time.ws.ts) to include
`format` in initialProps
- Example: `format="YYYY-MM-DD HH:mm:ss"` displays as "2025-11-03
18:47:25"
### Template & Fixture Updates
- Updated all CLI templates (defaults, react-router, SSG) to include
`pathname` in system objects
- Updated all fixture files (47 files total) to include `pathname` in
system objects
- All 694 tests passing
- All typecheck passing
## Usage
### Current Date Resource
Users can now add the Current Date resource from the Data Variables
panel:
1. Click + next to Data Variables
2. Select "System Resource"
3. Choose "Current Date" from the dropdown
4. Access in expressions:
- `date.year` - for copyright year
- `date.month` - current month (1-12)
- `date.day` - current day (1-31)
- `date.iso` - ISO 8601 string
- `date.timestamp` - Unix timestamp
### System Pathname
Access the current page path directly:
- `system.pathname` - current page path (e.g., `/about`, `/blog/post-1`)
### Time Component Custom Format
Use the `format` prop for custom date/time display:
```jsx
<Time datetime="2025-11-03T18:47:25Z" format="YYYY-MM-DD" />
// Displays: 2025-11-03
<Time datetime="2025-11-03T18:47:25Z" format="YYYY-MM-DD HH:mm:ss" />
// Displays: 2025-11-03 18:47:25
<Time datetime="2025-11-03T18:47:25Z" format="M/D/YYYY" />
// Displays: 11/3/2025
```
Technical Notes
- Current Date values are normalized to midnight UTC to ensure
consistency throughout the day and prevent hydration mismatches
- The pathname property is computed from the request URL and normalized
to '/' when empty
- Custom format templates in the Time component are processed before
falling back to Intl.DateTimeFormat
- All changes are backward compatible
Fixes https://github.com/webstudio-is/webstudio/issues/5435
## 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
Radio group route doesn't have checked/unchecked states via data-state
attribute, only the button and indicator do.
## 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
Originally we chose due to perf considerations to use opacity by default
as a safe default, but most of the time these days we don't find All to
be dangerous.
## 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
Added autocomplete support for safe string and array methods in the
expression editor, as suggested by @TrySound in PR #5403.
## Changes
- Exported `allowedStringMethods` and `allowedArrayMethods` from
`packages/sdk/src/expression.ts`
- Enhanced the expression editor's autocomplete to suggest safe methods
when typing after a variable (e.g., system)
- Methods are displayed with parentheses for clarity (e.g.,
`toLowerCase()`, `replace()`, `split()`)
- Autocomplete shows helpful labels: "string method" or "array method"
## How to Test
1. Open any project in the builder
2. Click the expression editor icon next to a text property
3. Type a variable name followed by a dot (e.g., `system.`)
4. You should see autocomplete suggestions for safe string methods like
`toLowerCase()`, `replace()`, `split()`, etc.
5. Type a few letters to filter (e.g., `title.to` shows only methods
starting with "to")
6. Select a method and it will be inserted with parentheses
## Related
- Builds on PR #5403 which enabled these safe methods in the expression
engine
<img width="343" height="204" alt="Bildschirmfoto 2025-10-09 um 22 33
03"
src="https://github.com/user-attachments/assets/206a36e8-1d68-4e2a-a045-1f9e95067a28"
/>
## Description
allowing toLowerCase(), replace(), and split() to be used in the
expression editor.
Real life use-case explained in the discord message.
https://discord.com/channels/955905230107738152/1418928616648998992/1419623805541814393
## Steps for reproduction
1. use any of the mentioned functions in the expression editor
2. they're currently not allowed even though they'd be safe to use
3. those functions (and presumably others as well) can be used in hosted
webstudio by deploying my changes on a locally hosted webstudio editor,
using the functions, and copying the pages containing the functions to
the hosted version.
-> validation check bypass
## Code Review
- [x] hi @kof, I need you to do
- conceptual review (does webstudio WANT to allow these functions?)
- 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
- [ ] 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
Sometimes users are able to save broken resource
for example without header value. We need to prevent failing all
requests and instead fail only broken one.
User is trying to duplicate huge page and gets "413 Content Too Large".
Here I'm trying to reduce patch request size by removing revise patches
which are not used on server.
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Ref https://github.com/webstudio-is/webstudio/issues/4077
How it works
- Cache-Control opts in caching (Cache-Control: max-age=3600)
- cached response is matched by url, method and body
- cache is invalidated with Cache-Control change
- responses stored with the cache are not replicated across regions
- responses are not shared between projects
Link for testing
https://test-cache-hcevl.wstd.work/?message=hello
Oleg Isonen