build: Release 21-04-2025

apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts

@@ -7,19 +7,13 @@ import type { ComputedStyleDecl } from "~/shared/style-object-model";
 import { $computedStyleDeclarations } from "../../shared/model";
 import { sections } from "../sections";
 
-// @todo will be fully deleted https://github.com/webstudio-is/webstudio/issues/4871
-const initialProperties = new Set<CssProperty>([
-  "cursor",
-  "mix-blend-mode",
-  "opacity",
-  "pointer-events",
-  "user-select",
-]);
-
 export const $advancedStyleDeclarations = computed(
   [$computedStyleDeclarations, $settings, $selectedInstance],
   (computedStyleDeclarations, settings, selectedInstance) => {
-    const advancedStyles: Array<ComputedStyleDecl> = [];
+    const advancedStyles = new Map<
+      ComputedStyleDecl["property"],
+      ComputedStyleDecl
+    >();
     // All properties used by the panels except the advanced panel
     const visualProperties = new Set<CssProperty>([]);
     for (const { properties } of sections.values()) {
@@ -37,6 +31,14 @@ export const $advancedStyleDeclarations = computed(
       ) {
         continue;
       }
+      // ignore predefined styles in advanced mode
+      // @todo will be deleted https://github.com/webstudio-is/webstudio/issues/4871
+      if (
+        styleDecl.source.name === "default" &&
+        settings.stylePanelMode === "advanced"
+      ) {
+        continue;
+      }
       const { property, listed } = styleDecl;
       // When property is listed, it was added from advanced panel.
       // If we are in advanced mode, we show them all.
@@ -45,22 +47,10 @@ export const $advancedStyleDeclarations = computed(
         listed ||
         settings.stylePanelMode === "advanced"
       ) {
-        advancedStyles.push(styleDecl);
-      }
-    }
-    // In advanced mode we assume user knows the properties they need, so we don't need to show these.
-    // @todo https://github.com/webstudio-is/webstudio/issues/4871
-    if (settings.stylePanelMode !== "advanced") {
-      for (const property of initialProperties) {
-        const styleDecl = computedStyleDeclarations.find(
-          (styleDecl) => styleDecl.property === property
-        );
-        if (styleDecl) {
-          advancedStyles.push(styleDecl);
-        }
+        advancedStyles.set(styleDecl.property, styleDecl);
       }
     }
 
-    return advancedStyles;
+    return Array.from(advancedStyles.values());
   }
 );

apps/builder/app/builder/features/style-panel/shared/model.tsx

@@ -268,6 +268,15 @@ export const $computedStyleDeclarations = computed(
       styleSourceSelections,
       styles,
     });
+    // In advanced mode we assume user knows the properties they need, so we don't need to show these.
+    // @todo will be fully deleted https://github.com/webstudio-is/webstudio/issues/4871
+    definedStyles.push(
+      { property: "cursor" },
+      { property: "mix-blend-mode" },
+      { property: "opacity" },
+      { property: "pointer-events" },
+      { property: "user-select" }
+    );
     const computedStyles = new Map<string, ComputedStyleDecl>();
     for (const { property, listed } of definedStyles) {
       // deduplicate by property name

packages/sdk-components-animation/src/video-animation.template.tsx

@@ -1,13 +1,10 @@
 import { $, type TemplateMeta } from "@webstudio-is/template";
-import { YoutubeIcon } from "@webstudio-is/icons/svg";
 import { animation } from "./shared/proxy";
 
 export const meta: TemplateMeta = {
   category: "animations",
   description: "Video Animation",
   order: 2,
-  icon: YoutubeIcon,
-
   template: (
     <animation.VideoAnimation>
       <$.Video

packages/sdk-components-animation/src/video-animation.ws.ts

@@ -1,15 +1,18 @@
 import { PlayIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
 import { props } from "./__generated__/video-animation.props";
+import { div } from "@webstudio-is/sdk/normalize.css";
 
 export const meta: WsComponentMeta = {
   icon: PlayIcon,
   label: "Video Animation",
-  order: 3,
   contentModel: {
     category: "none",
     children: ["instance"],
   },
+  presetStyle: {
+    div,
+  },
 };
 
 export const propsMeta: WsComponentPropsMeta = {