From b727dd1338ad7334f6b88d4cd0ad484da40f87f5 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 9 Jun 2025 15:33:45 +0300
Subject: [PATCH 01/11] build: release 09-06-2025


From 94bf88a4662917b3480fa7b49680417f5b82d78b Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 9 Jun 2025 16:18:52 +0300
Subject: [PATCH 02/11] fix: prevent typing only inside of textarea and input

---
 apps/builder/app/canvas/interceptor.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/canvas/interceptor.ts b/apps/builder/app/canvas/interceptor.ts
index c0139e08e5b1..908c28403770 100644
--- a/apps/builder/app/canvas/interceptor.ts
+++ b/apps/builder/app/canvas/interceptor.ts
@@ -159,8 +159,13 @@ export const subscribeInterceptedEvents = () => {
     if ($isPreviewMode.get()) {
       return;
     }
-    // prevent typing in inputs only in canvas mode
-    event.preventDefault();
+    if (
+      event.target instanceof HTMLInputElement ||
+      event.target instanceof HTMLTextAreaElement
+    ) {
+      // prevent typing in inputs only in canvas mode
+      event.preventDefault();
+    }
   };
 
   // Note: Event handlers behave unexpectedly when used inside a dialog component.

From 87d810ed672f26a5febf1ab5e1ce970599111c36 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Tue, 10 Jun 2025 14:46:18 +0300
Subject: [PATCH 03/11] fix: show correct component icons in command panel
 (#5261)

Missed command panel case

<img width="487" alt="Screenshot 2025-06-10 at 10 05 39"
src="https://github.com/user-attachments/assets/6a2f738c-dd7d-4701-91aa-c0dcdbe669f1"
/>
---
 .../app/builder/features/command-panel/command-panel.tsx   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/builder/features/command-panel/command-panel.tsx b/apps/builder/app/builder/features/command-panel/command-panel.tsx
index 3e4bd4f899b8..59452653c69f 100644
--- a/apps/builder/app/builder/features/command-panel/command-panel.tsx
+++ b/apps/builder/app/builder/features/command-panel/command-panel.tsx
@@ -102,6 +102,7 @@ type ComponentOption = {
   category: TemplateMeta["category"];
   icon: undefined | string;
   order: undefined | number;
+  firstInstance: { component: string };
 };
 
 const getComponentScore = (meta: ComponentOption) => {
@@ -158,6 +159,7 @@ const $componentOptions = computed(
         category,
         icon: meta.icon,
         order: meta.order,
+        firstInstance: { component: name },
       });
     }
     for (const [name, meta] of templates) {
@@ -188,6 +190,7 @@ const $componentOptions = computed(
         category: meta.category,
         icon: meta.icon ?? componentMeta?.icon,
         order: meta.order,
+        firstInstance: meta.template.instances[0],
       });
     }
     componentOptions.sort(
@@ -205,7 +208,7 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
       heading={<CommandGroupHeading>Components</CommandGroupHeading>}
       actions={["add"]}
     >
-      {options.map(({ component, label, category, icon }) => {
+      {options.map(({ component, label, category, icon, firstInstance }) => {
         return (
           <CommandItem
             key={component}
@@ -225,7 +228,7 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
           >
             <Flex gap={2}>
               <CommandIcon>
-                <InstanceIcon instance={{ component }} icon={icon} />
+                <InstanceIcon instance={firstInstance} icon={icon} />
               </CommandIcon>
               <Text variant="labelsTitleCase">
                 {label}{" "}

From 9ff8cbe43a6a2971352f4d8dc744e3b25682fa67 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Tue, 10 Jun 2025 11:29:58 +0300
Subject: [PATCH 04/11] fix: autocomplete tags on body when page has invalid
 content (#5262)

Removed children from content model check in command panel tags.
---
 .../app/builder/features/command-panel/command-panel.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/builder/app/builder/features/command-panel/command-panel.tsx b/apps/builder/app/builder/features/command-panel/command-panel.tsx
index 59452653c69f..7a8150c7ebdb 100644
--- a/apps/builder/app/builder/features/command-panel/command-panel.tsx
+++ b/apps/builder/app/builder/features/command-panel/command-panel.tsx
@@ -268,7 +268,9 @@ const $tagOptions = computed(
     newInstances.set(childInstance.id, childInstance);
     newInstances.set(instance.id, {
       ...instance,
-      children: [...instance.children, { type: "id", value: childInstance.id }],
+      // avoid preserving original children to not invalidate tag
+      // when some descendants do not satisfy content model
+      children: [{ type: "id", value: childInstance.id }],
     });
     for (const tag of tags) {
       childInstance.tag = tag;

From 6d7c5272c50a6d5e1cf82c29e79aa676e7e7e6d6 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Tue, 10 Jun 2025 18:42:38 +0300
Subject: [PATCH 05/11] fix: accept <source> as <video> child (#5264)

Transparent category was overriden by parent categories without merging
others from current element.
---
 apps/builder/app/shared/content-model.test.tsx | 16 ++++++++++++++++
 apps/builder/app/shared/content-model.ts       |  5 ++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/apps/builder/app/shared/content-model.test.tsx b/apps/builder/app/shared/content-model.test.tsx
index 58fa198a02bf..3bbc20b5136e 100644
--- a/apps/builder/app/shared/content-model.test.tsx
+++ b/apps/builder/app/shared/content-model.test.tsx
@@ -489,6 +489,22 @@ test("edge case: support a > img", () => {
   ).toBeTruthy();
 });
 
+test("support video > source", () => {
+  expect(
+    isTreeSatisfyingContentModel({
+      ...renderData(
+        <ws.element ws:tag="body" ws:id="bodyId">
+          <ws.element ws:tag="video">
+            <ws.element ws:tag="source" />
+          </ws.element>
+        </ws.element>
+      ),
+      metas: defaultMetas,
+      instanceSelector: ["bodyId"],
+    })
+  ).toBeTruthy();
+});
+
 describe("component content model", () => {
   test("restrict children with specific component", () => {
     expect(
diff --git a/apps/builder/app/shared/content-model.ts b/apps/builder/app/shared/content-model.ts
index 97751828708a..aa7260cb93a5 100644
--- a/apps/builder/app/shared/content-model.ts
+++ b/apps/builder/app/shared/content-model.ts
@@ -114,7 +114,10 @@ const getElementChildren = (
   let elementChildren: string[] =
     tag === undefined ? ["transparent"] : elementsByTag[tag].children;
   if (elementChildren.includes("transparent") && allowedCategories) {
-    elementChildren = allowedCategories;
+    // merge categories from parent and current element when transparent occured
+    elementChildren = elementChildren.flatMap((category) =>
+      category === "transparent" ? allowedCategories : category
+    );
   }
   // introduce custom non-interactive category to restrict nesting interactive elements
   // like button > button or a > input

From 9008c41285297869c862c8e8b38ad7bf8592fe41 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Tue, 10 Jun 2025 18:58:23 +0300
Subject: [PATCH 06/11] fix: return back box-sizing: border-box on <hr> (#5265)

Accidentally removed it while refactoring preset styles.
---
 packages/sdk/src/__generated__/normalize.css.ts | 1 +
 packages/sdk/src/normalize.css                  | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/packages/sdk/src/__generated__/normalize.css.ts b/packages/sdk/src/__generated__/normalize.css.ts
index 9a354d1a28c0..4f9880900841 100644
--- a/packages/sdk/src/__generated__/normalize.css.ts
+++ b/packages/sdk/src/__generated__/normalize.css.ts
@@ -141,6 +141,7 @@ export const body: StyleDecl[] = [
 export const hr: StyleDecl[] = [
   { property: "height", value: { type: "unit", unit: "number", value: 0 } },
   { property: "color", value: { type: "keyword", value: "inherit" } },
+  { property: "box-sizing", value: { type: "keyword", value: "border-box" } },
 ];
 
 export const b: StyleDecl[] = [
diff --git a/packages/sdk/src/normalize.css b/packages/sdk/src/normalize.css
index 96185b8198dd..f5258beaa5f6 100644
--- a/packages/sdk/src/normalize.css
+++ b/packages/sdk/src/normalize.css
@@ -99,12 +99,15 @@ body {
 /**
  * 1. Add the correct height in Firefox.
  * 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+ * 3. width: 100% inside flexbox will overflow <hr> out of it
  */
 hr {
   /* 1 */
   height: 0;
   /* 2 */
   color: inherit;
+  /* 3 */
+  box-sizing: border-box;
 }
 
 /**

From ba347fd0ecc29a97487e222dc52f2fa2583a2558 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Tue, 10 Jun 2025 17:47:39 +0100
Subject: [PATCH 07/11] fix: Improve made with webstudio badge tooltip (#5266)

Trying to explain that user can change the styles and position and
everything about that badge.

## 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
---
 apps/builder/app/builder/features/topbar/publish.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
index 5693bc64af70..4348a6fc386b 100644
--- a/apps/builder/app/builder/features/topbar/publish.tsx
+++ b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -273,7 +273,7 @@ const $usedProFeatures = computed(
     const badgeFeature = 'No "Built with Webstudio" badge';
     // Badge should be rendered on free sites on every page.
     features.set(badgeFeature, {
-      info: "Adding the badge to your homepage helps us offer a free version of the service. Please open the Components panel by clicking the “+” icon on the left, and add the “Built with Webstudio” component to your page. Feel free to adjust the badge’s styles to match your design.",
+      info: "Adding the badge to your homepage helps us offer a free version of the service. Please open the Components panel by clicking the “+” icon on the left, and add the “Built with Webstudio” component to your page. Feel free to adjust the badge's style to match your design - after all, it's just a link, and you can place it wherever you like.",
     });
     // We want to check the badge only on the home page
     const homePageInstanceIds = findTreeInstanceIds(
@@ -288,7 +288,8 @@ const $usedProFeatures = computed(
         for (const prop of props ?? []) {
           if (
             prop.name === "href" &&
-            prop.value === "https://webstudio.is/?via=badge"
+            typeof prop.value === "string" &&
+            prop.value.includes("https://webstudio.is")
           ) {
             features.delete(badgeFeature);
           }

From 9712b78a3f4bad1444887987531fd7929519f01e Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Wed, 11 Jun 2025 15:10:50 +0300
Subject: [PATCH 08/11] fix: ignore content model checks for XmlNode component
 (#5268)

We rely on "tag" in legacy components though it is primary way to setup
tag on xml nodes. Here added exception for all xml components.
---
 apps/builder/app/shared/content-model.test.tsx | 16 ++++++++++++++++
 apps/builder/app/shared/content-model.ts       |  4 ++++
 2 files changed, 20 insertions(+)

diff --git a/apps/builder/app/shared/content-model.test.tsx b/apps/builder/app/shared/content-model.test.tsx
index 3bbc20b5136e..8f6ec62bce38 100644
--- a/apps/builder/app/shared/content-model.test.tsx
+++ b/apps/builder/app/shared/content-model.test.tsx
@@ -505,6 +505,22 @@ test("support video > source", () => {
   ).toBeTruthy();
 });
 
+test("support xml node with tags", () => {
+  expect(
+    isTreeSatisfyingContentModel({
+      ...renderData(
+        <ws.element ws:tag="body" ws:id="bodyId">
+          <$.XmlNode tag="url">
+            <$.XmlNode tag="loc"></$.XmlNode>
+          </$.XmlNode>
+        </ws.element>
+      ),
+      metas: defaultMetas,
+      instanceSelector: ["bodyId"],
+    })
+  ).toBeTruthy();
+});
+
 describe("component content model", () => {
   test("restrict children with specific component", () => {
     expect(
diff --git a/apps/builder/app/shared/content-model.ts b/apps/builder/app/shared/content-model.ts
index aa7260cb93a5..2f0b40195ef6 100644
--- a/apps/builder/app/shared/content-model.ts
+++ b/apps/builder/app/shared/content-model.ts
@@ -37,6 +37,10 @@ const getTag = ({
   metas: Metas;
   props: Props;
 }) => {
+  // ignore tag property on xml nodes
+  if (instance.component === "XmlNode") {
+    return;
+  }
   const meta = metas.get(instance.component);
   const metaTag = Object.keys(meta?.presetStyle ?? {}).at(0);
   return instance.tag ?? getTagByInstanceId(props).get(instance.id) ?? metaTag;

From 55fab14d57e60a383e9bcd2ef5d26657990b9793 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 14 Jun 2025 12:59:59 +0100
Subject: [PATCH 09/11] feat: Improve badge checks (#5278)

## Description

Checks:
- show
- display
- visibility
- opacity
- rel attribute

## 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
---
 .../features/style-panel/shared/model.tsx     | 16 ++--
 .../app/builder/features/topbar/publish.tsx   | 74 +++++++++++++++++--
 2 files changed, 78 insertions(+), 12 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/shared/model.tsx b/apps/builder/app/builder/features/style-panel/shared/model.tsx
index 893259bfd7cc..dbe064cd45b7 100644
--- a/apps/builder/app/builder/features/style-panel/shared/model.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/model.tsx
@@ -208,7 +208,7 @@ const getDefinedStyles = ({
   ];
 };
 
-const $model = computed(
+export const $styleObjectModel = computed(
   [
     $styles,
     $styleSourceSelections,
@@ -241,7 +241,7 @@ const $model = computed(
 
 export const $computedStyleDeclarations = computed(
   [
-    $model,
+    $styleObjectModel,
     $selectedInstancePathWithRoot,
     $selectedOrLastStyleSourceSelector,
     $registeredComponentMetas,
@@ -331,7 +331,11 @@ export const $availableColorVariables = computed(
 
 export const createComputedStyleDeclStore = (property: CssProperty) => {
   return computed(
-    [$model, $selectedInstancePathWithRoot, $selectedOrLastStyleSourceSelector],
+    [
+      $styleObjectModel,
+      $selectedInstancePathWithRoot,
+      $selectedOrLastStyleSourceSelector,
+    ],
     (model, instancePath, styleSourceSelector) => {
       return getComputedStyleDecl({
         model,
@@ -345,7 +349,7 @@ export const createComputedStyleDeclStore = (property: CssProperty) => {
 };
 
 export const useStyleObjectModel = () => {
-  return useStore($model);
+  return useStore($styleObjectModel);
 };
 
 export const useComputedStyleDecl = (property: CssProperty) => {
@@ -378,7 +382,7 @@ export const useParentComputedStyleDecl = (property: CssProperty) => {
   const $store = useMemo(
     () =>
       computed(
-        [$model, $closestStylableInstanceSelector],
+        [$styleObjectModel, $closestStylableInstanceSelector],
         (model, instanceSelector) => {
           return getComputedStyleDecl({
             model,
@@ -397,7 +401,7 @@ export const getInstanceStyleDecl = (
   instanceSelector: InstanceSelector
 ) => {
   return getComputedStyleDecl({
-    model: $model.get(),
+    model: $styleObjectModel.get(),
     instanceSelector,
     property,
   });
diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
index 4348a6fc386b..544490db83d4 100644
--- a/apps/builder/app/builder/features/topbar/publish.tsx
+++ b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -8,6 +8,7 @@ import {
   startTransition,
   useRef,
   useId,
+  type ReactNode,
 } from "react";
 import { useStore } from "@nanostores/react";
 import {
@@ -82,6 +83,10 @@ import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard";
 import { $openProjectSettings } from "~/shared/nano-states/project-settings";
 import { RelativeTime } from "~/builder/shared/relative-time";
 import cmsUpgradeBanner from "../settings-panel/cms-upgrade-banner.svg?url";
+import { showAttribute } from "@webstudio-is/react-sdk";
+import { $styleObjectModel } from "../style-panel/shared/model";
+import { toValue, type CssProperty } from "@webstudio-is/css-engine";
+import { getComputedStyleDecl } from "~/shared/style-object-model";
 
 type ChangeProjectDomainProps = {
   project: Project;
@@ -221,11 +226,11 @@ const ChangeProjectDomain = ({
 };
 
 const $usedProFeatures = computed(
-  [$pages, $dataSources, $instances, $propsIndex],
-  (pages, dataSources, instances, propsIndex) => {
+  [$pages, $dataSources, $instances, $propsIndex, $styleObjectModel],
+  (pages, dataSources, instances, propsIndex, styleObjectModel) => {
     const features = new Map<
       string,
-      undefined | { awareness?: Awareness; info?: string }
+      undefined | { awareness?: Awareness; info?: ReactNode }
     >();
     if (pages === undefined) {
       return features;
@@ -273,7 +278,22 @@ const $usedProFeatures = computed(
     const badgeFeature = 'No "Built with Webstudio" badge';
     // Badge should be rendered on free sites on every page.
     features.set(badgeFeature, {
-      info: "Adding the badge to your homepage helps us offer a free version of the service. Please open the Components panel by clicking the “+” icon on the left, and add the “Built with Webstudio” component to your page. Feel free to adjust the badge's style to match your design - after all, it's just a link, and you can place it wherever you like.",
+      info: (
+        <Text>
+          Adding the badge to your "home" page helps us offer a free version of
+          the service. Please open the Components panel by clicking the “+” icon
+          on the left, and add the “Built with Webstudio” component to your
+          page.
+          <br />
+          - Feel free to adjust the badge's style to match your design - after
+          all, it's just a link, and you can place it wherever you like.
+          <br />
+          - Please don’t add that badge to every page, because search engines
+          will view it negatively.
+          <br />- Hiding the link in any way is considered a violation of the
+          terms.
+        </Text>
+      ),
     });
     // We want to check the badge only on the home page
     const homePageInstanceIds = findTreeInstanceIds(
@@ -285,15 +305,57 @@ const $usedProFeatures = computed(
       // Find a potential link that looks like a badge.
       if (instance?.tag === "a") {
         const props = propsIndex.propsByInstanceId.get(instance.id);
+        let hasWsHref = false;
+        let highTrust = true;
+        let show = true;
+
         for (const prop of props ?? []) {
           if (
             prop.name === "href" &&
-            typeof prop.value === "string" &&
+            prop.type === "string" &&
             prop.value.includes("https://webstudio.is")
           ) {
-            features.delete(badgeFeature);
+            hasWsHref = true;
+          }
+          if (prop.name === "rel" && prop.type === "string") {
+            if (
+              prop.value.includes("nofollow") ||
+              prop.value.includes("ugc") ||
+              prop.value.includes("sponsored")
+            ) {
+              highTrust = false;
+            }
+          }
+          if (prop.name === showAttribute) {
+            show = prop.type === "boolean" && prop.value;
           }
         }
+
+        const getValue = (property: CssProperty) => {
+          return toValue(
+            getComputedStyleDecl({
+              model: styleObjectModel,
+              instanceSelector: [instance.id],
+              property,
+            }).usedValue
+          );
+        };
+
+        // Check styles.
+        if (
+          getValue("display") === "none" ||
+          getValue("visibility") === "hidden" ||
+          getValue("opacity") === "0" ||
+          getValue("opacity") === "0%"
+        ) {
+          show = false;
+        }
+
+        // @todo check all parents
+        if (hasWsHref && highTrust && show) {
+          features.delete(badgeFeature);
+          break;
+        }
       }
     }
     return features;

From 7b53470e350c43901356d468985589c2d88d2be7 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Sat, 14 Jun 2025 15:46:17 +0300
Subject: [PATCH 10/11] fix: catch iframe errors

---
 apps/builder/app/shared/sync-client.ts | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/builder/app/shared/sync-client.ts b/apps/builder/app/shared/sync-client.ts
index 8b730b846f3e..6d1e9d0d82a5 100644
--- a/apps/builder/app/shared/sync-client.ts
+++ b/apps/builder/app/shared/sync-client.ts
@@ -67,10 +67,15 @@ export class ImmerhinSyncObject implements SyncObject {
   }
   setState(state: Map<string, unknown>) {
     for (const [namespace, $store] of this.store.containers) {
-      // Immer cannot handle Map instances from another realm.
-      // Use `clone` to recreate the data with the current realm's classes.
-      // This works because the structured clone algorithm skips prototype chains; classes must be defined in both realms.
-      $store.set(structuredClone(state.get(namespace)));
+      // catch errors triggered by CSP configuration when user put iframe onto canvas
+      try {
+        // Immer cannot handle Map instances from another realm.
+        // Use `clone` to recreate the data with the current realm's classes.
+        // This works because the structured clone algorithm skips prototype chains; classes must be defined in both realms.
+        $store.set(structuredClone(state.get(namespace)));
+      } catch {
+        // empty block
+      }
     }
   }
   applyTransaction(transaction: Transaction<Change[]>) {
@@ -112,10 +117,15 @@ export class NanostoresSyncObject implements SyncObject {
   }
   applyTransaction(transaction: Transaction) {
     this.operation = "add";
-    // `instanceof` checks do not work with instances like Map, File, etc., from another realm.
-    // Use `clone` to recreate the data with the current realm's classes.
-    // This works because the structured clone algorithm skips prototype chains; classes must be defined in both realms.
-    this.store.set(structuredClone(transaction.payload));
+    // catch errors triggered by CSP configuration when user put iframe onto canvas
+    try {
+      // `instanceof` checks do not work with instances like Map, File, etc., from another realm.
+      // Use `clone` to recreate the data with the current realm's classes.
+      // This works because the structured clone algorithm skips prototype chains; classes must be defined in both realms.
+      this.store.set(structuredClone(transaction.payload));
+    } catch {
+      // empty block
+    }
     this.operation = "local";
   }
   revertTransaction(_transaction: RevertedTransaction) {

From 7d711477be0076fa6a3fa1692766b5a101670a0d Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Tue, 17 Jun 2025 16:52:03 +0100
Subject: [PATCH 11/11] fix: Improve clarity of the upgrade banner (#5282)

## Description
<img width="348" alt="image"
src="https://github.com/user-attachments/assets/85ff2cb9-9cdf-4283-b932-c03423fcc02e"
/>

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
---
 .../app/builder/features/topbar/publish.tsx   | 194 ++++++++++--------
 1 file changed, 105 insertions(+), 89 deletions(-)

diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
index 544490db83d4..673aa5ffe3ed 100644
--- a/apps/builder/app/builder/features/topbar/publish.tsx
+++ b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -82,11 +82,11 @@ import DomainCheckbox, { domainToPublishName } from "./domain-checkbox";
 import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard";
 import { $openProjectSettings } from "~/shared/nano-states/project-settings";
 import { RelativeTime } from "~/builder/shared/relative-time";
-import cmsUpgradeBanner from "../settings-panel/cms-upgrade-banner.svg?url";
 import { showAttribute } from "@webstudio-is/react-sdk";
-import { $styleObjectModel } from "../style-panel/shared/model";
 import { toValue, type CssProperty } from "@webstudio-is/css-engine";
 import { getComputedStyleDecl } from "~/shared/style-object-model";
+import { $styleObjectModel } from "../style-panel/shared/model";
+import cmsUpgradeBanner from "../settings-panel/cms-upgrade-banner.svg?url";
 
 type ChangeProjectDomainProps = {
   project: Project;
@@ -774,6 +774,108 @@ const buttonLinkClass = css({
   ...textVariants.link,
 }).toString();
 
+const UpgradeBanner = () => {
+  const usedProFeatures = useStore($usedProFeatures);
+  const { canAddDomain, maxDomainsAllowedPerUser } = useCanAddDomain();
+  const { userPublishCount, maxPublishesAllowedPerUser } =
+    useUserPublishCount();
+
+  if (userPublishCount >= maxPublishesAllowedPerUser) {
+    return (
+      <PanelBanner>
+        <Text variant="regularBold">
+          Upgrade to publish more than {maxPublishesAllowedPerUser} times per
+          day:
+        </Text>
+        <Link
+          className={buttonStyle({ color: "gradient" })}
+          color="contrast"
+          underline="none"
+          href="https://webstudio.is/pricing"
+          target="_blank"
+        >
+          Upgrade
+        </Link>
+      </PanelBanner>
+    );
+  }
+
+  if (usedProFeatures.size > 0) {
+    return (
+      <PanelBanner>
+        <img
+          src={cmsUpgradeBanner}
+          alt="Upgrade for CMS"
+          width={rawTheme.spacing[28]}
+          style={{ aspectRatio: "4.1" }}
+        />
+        <Text variant="regularBold">Following Pro features are used:</Text>
+        <Text as="ul" color="destructive" css={{ paddingLeft: "1em" }}>
+          {Array.from(usedProFeatures).map(
+            ([message, { awareness, info } = {}], index) => (
+              <li key={index}>
+                <Flex align="center" gap="1">
+                  {awareness ? (
+                    <button
+                      className={buttonLinkClass}
+                      type="button"
+                      onClick={() => $awareness.set(awareness)}
+                    >
+                      {message}
+                    </button>
+                  ) : (
+                    message
+                  )}
+                  {info && (
+                    <Tooltip variant="wrapped" content={info}>
+                      <SmallIconButton icon={<HelpIcon />} />
+                    </Tooltip>
+                  )}
+                </Flex>
+              </li>
+            )
+          )}
+        </Text>
+        <Text>You can delete these features or upgrade.</Text>
+        <Flex align="center" gap={1}>
+          <UpgradeIcon />
+          <Link
+            color="inherit"
+            target="_blank"
+            href="https://webstudio.is/pricing"
+          >
+            Upgrade to Pro
+          </Link>
+        </Flex>
+      </PanelBanner>
+    );
+  }
+  if (canAddDomain === false) {
+    return (
+      <PanelBanner>
+        <Text variant="regularBold">Free domains limit reached</Text>
+        <Text variant="regular">
+          You have reached the limit of {maxDomainsAllowedPerUser} custom
+          domains on your account.{" "}
+          <Text variant="regularBold" inline>
+            Upgrade to a Pro account
+          </Text>{" "}
+          to add unlimited domains and publish to each domain individually.
+        </Text>
+        <Link
+          className={buttonStyle({ color: "gradient" })}
+          color="contrast"
+          underline="none"
+          href="https://webstudio.is/pricing"
+          target="_blank"
+        >
+          Upgrade
+        </Link>
+      </PanelBanner>
+    );
+  }
+};
+
 const Content = (props: {
   projectId: Project["id"];
   onExportClick: () => void;
@@ -789,99 +891,12 @@ const Content = (props: {
   }
   const projectState = "idle";
 
-  const { canAddDomain, maxDomainsAllowedPerUser } = useCanAddDomain();
   const { userPublishCount, maxPublishesAllowedPerUser } =
     useUserPublishCount();
 
   return (
     <form>
       <ScrollArea>
-        {userPublishCount >= maxPublishesAllowedPerUser ? (
-          <PanelBanner>
-            <Text variant="regularBold">
-              Upgrade to publish more than {maxPublishesAllowedPerUser} times
-              per day:
-            </Text>
-            <Link
-              className={buttonStyle({ color: "gradient" })}
-              color="contrast"
-              underline="none"
-              href="https://webstudio.is/pricing"
-              target="_blank"
-            >
-              Upgrade
-            </Link>
-          </PanelBanner>
-        ) : usedProFeatures.size > 0 && hasProPlan === false ? (
-          <PanelBanner>
-            <img
-              src={cmsUpgradeBanner}
-              alt="Upgrade for CMS"
-              width={rawTheme.spacing[28]}
-              style={{ aspectRatio: "4.1" }}
-            />
-            <Text variant="regularBold">
-              Upgrade to publish with following features:
-            </Text>
-            <Text as="ul">
-              {Array.from(usedProFeatures).map(
-                ([message, { awareness, info } = {}], index) => (
-                  <li key={index}>
-                    <Flex align="center" gap="1">
-                      {awareness ? (
-                        <button
-                          className={buttonLinkClass}
-                          type="button"
-                          onClick={() => $awareness.set(awareness)}
-                        >
-                          {message}
-                        </button>
-                      ) : (
-                        message
-                      )}
-                      {info && (
-                        <Tooltip variant="wrapped" content={info}>
-                          <SmallIconButton icon={<HelpIcon />} />
-                        </Tooltip>
-                      )}
-                    </Flex>
-                  </li>
-                )
-              )}
-            </Text>
-            <Flex align="center" gap={1}>
-              <UpgradeIcon />
-              <Link
-                color="inherit"
-                target="_blank"
-                href="https://webstudio.is/pricing"
-              >
-                Upgrade to Pro
-              </Link>
-            </Flex>
-          </PanelBanner>
-        ) : canAddDomain === false ? (
-          <PanelBanner>
-            <Text variant="regularBold">Free domains limit reached</Text>
-            <Text variant="regular">
-              You have reached the limit of {maxDomainsAllowedPerUser} custom
-              domains on your account.{" "}
-              <Text variant="regularBold" inline>
-                Upgrade to a Pro account
-              </Text>{" "}
-              to add unlimited domains and publish to each domain individually.
-            </Text>
-            <Link
-              className={buttonStyle({ color: "gradient" })}
-              color="contrast"
-              underline="none"
-              href="https://webstudio.is/pricing"
-              target="_blank"
-            >
-              Upgrade
-            </Link>
-          </PanelBanner>
-        ) : null}
         <RadioGroup name="publishDomain">
           <ChangeProjectDomain
             refresh={refreshProject}
@@ -911,6 +926,7 @@ const Content = (props: {
           }}
           onExportClick={props.onExportClick}
         />
+        {hasProPlan === false && <UpgradeBanner />}
         <Publish
           project={project}
           refresh={refreshProject}