Commit Graph
818 Commits
Author SHA1 Message Date
Oleg Isonen d93a6f9b90 fix: Clarify custom code runs on published site (#5772)
Closes https://github.com/webstudio-is/webstudio/issues/4001
2026-05-26 11:18:25 +02:00
Oleg Isonen 2551dcf934 fix: Reduce notification polling while hidden (#5764) 2026-05-19 13:29:25 +02:00
Oleg Isonen 43b5586a9b fix: Fix retrying interrupted asset uploads (#5762) 2026-05-16 23:24:53 +02:00
Oleg Isonen d259a6d970 fix: Prevent caching builder user data (#5761)
**Summary**

Migrates Builder bootstrap data loading from the legacy
`/rest/data/:projectId` endpoint to `build.loadData` tRPC, while keeping
the old REST route as a no-store compatibility shim.

Hardens authenticated Builder/dashboard responses by explicitly sending:

- `Cache-Control: private, no-store, max-age=0`
- `Pragma: no-cache`
- `Expires: 0`
- `Vary: Cookie`

**Details**

- Added `build.loadData` tRPC query for full Builder state.
- Switched Builder client bootstrap loading to tRPC.
- Added shared cache-control helpers for private no-store responses.
- Made tRPC responses private/no-store by default unless anonymous and
explicitly public-cacheable.
- Added no-store headers to
Builder/dashboard/auth/resource/asset-related responses.
- Updated redirect handling to preserve headers while enforcing
no-store.
- Prevented stale dashboard account data from flashing by applying
user-scoped loader data before paint and clearing stores on teardown.
- Added tests for cache headers, tRPC response metadata, and no-store
redirects.

**Validation**

- `pnpm --filter @webstudio-is/builder test --
app/services/cache-control.server.test.ts
app/services/trpc-response-meta.server.test.ts
app/services/no-store-redirect.test.ts app/routes/rest.assets.test.ts
app/shared/sync/project-queue.test.ts app/dashboard/dashboard.test.ts`
- `pnpm exec oxlint ...` on touched files
- `git diff --check`

`pnpm --filter @webstudio-is/builder typecheck` still fails on existing
unrelated Tailwind/css-engine errors.
2026-05-16 20:22:03 +02:00
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.
2026-05-14 18:55:30 +02:00
Oleg Isonen fa8fe5edbe fix: Fix Tailwind HTML paste rendering (#5758) 2026-05-14 12:17:04 +02:00
Oleg Isonen ac14670d9e fix: Fix builder system pathname for folder pages (#5757) 2026-05-12 15:39:59 +02:00
Oleg Isonen a559239356 fix: Toast copy text (#5746) 2026-05-02 12:19:16 +02:00
Oleg Isonen 6b09e91324 build: Release 29 04 26.staging (#5742) 2026-04-29 19:31:17 +02:00
Oleg Isonen 34091b370d fix: Fix browser notification polling behavior (#5740) 2026-04-29 01:42:43 +02:00
Oleg Isonen a8856c2647 fix: Skip notifications polling for anonymous users (#5739) 2026-04-29 00:55:33 +02:00
Oleg Isonen 9ea5f70a73 chore: Pages.staging (#5736)
## 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
2026-04-28 19:43:21 +02:00
Oleg Isonen a2cfcbb7be feat: WIP Multiplayer (#5733) 2026-04-28 03:38:12 +02:00
Oleg Isonen b006947a85 feat: WIP realtime collaboration to builder (#5726)
https://github.com/webstudio-is/webstudio/issues/46
2026-04-27 23:19:21 +02:00
Shrek 9570c4e091 feat: escape to exit preview mode (#5730)
## 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
2026-04-27 15:02:28 +02:00
Oleg Isonen f0bc73bdac feat: Onboard video in dashboard (#5725) 2026-04-25 20:25:34 +02:00
Oleg Isonen c0d2ebf8e0 feat: Remove starter templates, add welcome screen with guide and social links (#5722) 2026-04-25 19:42:57 +02:00
Oleg Isonen fc70898513 fix: Preserve whitespace between sibling elements (#5718)
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.
2026-04-25 19:42:42 +02:00
Oleg Isonen b4941aaaf1 fix: Tailwind border color arbitrary var (#5717) 2026-04-23 17:18:29 +02:00
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
2026-04-23 13:22:33 +02:00
Oleg Isonen 5ff6bb7790 fix: preserve leading space in inline element following text without trailing space (#5712) 2026-04-22 12:07:39 +02:00
Oleg Isonen 395385f5ea fix: tailwind parser preflight must not overwrite inline styles on paste (#5711) 2026-04-21 12:36:22 +02:00
ShrekandOleg Isonen fb260a3a92 feat: Token lock (#5678)
## 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>
2026-04-18 13:18:37 +02:00
Oleg Isonen f551d614e4 chore: simplify seat update call (#5703) 2026-04-16 03:54:38 +02:00
Oleg Isonen 5c6af9942b fix: use DialogActions consistently in all dialogs with footer buttons (#5701) 2026-04-15 23:25:06 +02:00
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>
```
2026-04-14 18:34:40 +02:00
Oleg Isonen 4748fa5f1e fix: restore short --variable label in CSS value input (#5694)
## 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
2026-04-13 20:07:14 +02:00
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.
2026-04-12 17:14:01 +02:00
Oleg Isonen ce3c82b582 chore: Decouple plans from the builder as much as possible (#5687) 2026-04-12 14:53:23 +02:00
Oleg Isonen e7860b68a7 fix: feature config parsing for LTD plans (#5681) 2026-04-11 00:37:52 +02:00
Oleg Isonen 7120443088 feat: replace accept checkmark icon with Accept button in notifications (#5685) 2026-04-11 00:30:42 +02:00
Oleg Isonen 90f92c58d3 feat: workspace seat billing at invite time, persist pending invites (#5680)
- 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
2026-04-09 02:07:53 +02:00
Oleg Isonen b8a194c011 feat: Workspaces (#5641) 2026-04-08 21:58:20 +02:00
Oleg Isonen f28e99d85a chore: Payments (#5671) 2026-04-01 21:00:00 +02:00
Shrek fa54dbaafc feat: use background color to highlight the selected navigator tree (#5667)
# 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
2026-03-31 16:02:45 +02:00
Oleg Isonen a7329a6452 feat: Migrate billing portal from n8n to payment worker (#5653) 2026-03-31 13:55:31 +02:00
Oleg Isonen 4f36bfd899 fix: Ignore messages from unknown sources e.g. browser extension (#5666)
… third-party scripts)
2026-03-27 21:24:06 +01:00
Oleg Isonen 9e72cc23c0 feat: New color formats and color picker (#5661)
https://github.com/webstudio-is/webstudio/issues/3574
2026-03-27 01:53:57 +01:00
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
2026-03-24 14:48:18 +01:00
Oleg Isonen df90970c0d chore: Remove release author, its in pr (#5656) 2026-03-23 18:42:01 +01:00
Oleg Isonen 6c17a0ec19 chore: Oxlint (#5650) 2026-03-20 21:09:47 +01:00
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
2026-03-20 19:56:36 +01:00
Oleg Isonen 91d2136921 refactor(stories): consolidate exports, add StorySection/StoryGrid everywhere, remove argTypes/args 2026-03-15 19:21:33 +00:00
Oleg Isonen 2216adf4f0 fix: expand story coverage and apply sentence case to all story titles
- 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
2026-03-15 15:34:17 +00:00
Oleg Isonen f62a34bbff fix: resolve naming conflicts in story exports and fix TS errors\n\nAlias component imports to avoid conflicts with story export names\n(e.g., import { Card as CardComponent }). Fix unused imports/variables\nin about.stories.tsx and css-value-input.stories.tsx. Fix CssProperty\ntype, help-center icon, and typeof self-references. 2026-03-15 12:46:51 +00:00
Oleg Isonen 64e5c17129 fix: stories render open by default, remove Demo nesting, use data URLs for images
- Make interaction-requiring stories render content immediately:
  - import-redirects-dialog: render dialog open directly
  - context-menu: use DropdownMenu with defaultOpen
  - enhanced-tooltip: add defaultOpen prop
  - tooltip: add open prop, pre-populate error state
  - command-panel: call openCommandPanel() on mount
  - toast: remove interactive InAction story

- Rename single 'Demo' exports to match component names,
  eliminating redundant navigation nesting in Storybook
  (e.g. 'Search Preview / Demo' → 'Search Preview')

- Replace external image URLs with inline data:image/svg+xml:
  - avatar: pravatar.cc → inline SVG
  - marketplace/card: placehold.co → inline SVG
  - search-preview: favicon.ico → inline SVG
  - animate-children-scroll: unsplash → inline gradient SVG
  - toast: Blob/createObjectURL → inline data URL
2026-03-15 12:29:53 +00:00
Oleg Isonen 8292755fb6 fix: remove redundant title prefixes and use design system wrappers in stories\n\n- Remove redundant Builder/ prefix from 9 builder story titles (titlePrefix already adds it)\n- Remove redundant Design System/ prefix from 6 design-system story titles\n- Replace raw <div style={}> with Box/Flex and theme tokens in dashboard card/thumbnail stories 2026-03-14 16:14:14 +00:00
Oleg Isonen a06bedb8fc feat: add visual regression stories for style panel, dashboard, and design system components 2026-03-14 14:59:00 +00:00
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
2026-03-08 10:52:21 +01:00
Oleg Isonen 9f497a3513 feat: Redirects improvements (#5619)
Show a warning banner when a redirect path matches the current page
path, indicating the redirect will override access to the page.

Changes:
- Add PanelBanner component with warning variant to page settings
- Implement findMatchingRedirect utility to detect redirect conflicts
- Show contextual warning with link to Redirects settings section
- Add comprehensive tests for redirect conflict detection

Code quality:
- Replace 'return undefined' with 'return' per style guide
- Use 'return null' for React components returning nothing
2026-02-19 11:26:07 +01:00