experimental: Breakpoint support for the Animation component (#5012)

## Description

https://animations.wstd.work/
Breakpoints Example

See on narrow screen animation is disabled.

<img width="699" alt="image"
src="https://github.com/user-attachments/assets/f464fdf3-f57a-4cf7-91a1-beb355f8a5bd"
/>



## 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

Author: istarkov

apps/builder/app/canvas/canvas.tsx

@@ -51,6 +51,7 @@ import {
   $isContentMode,
   subscribeModifierKeys,
   assetBaseUrl,
+  $breakpoints,
 } from "~/shared/nano-states";
 import { useDragAndDrop } from "./shared/use-drag-drop";
 import {
@@ -75,6 +76,7 @@ import { $selectedPage } from "~/shared/awareness";
 import { createInstanceElement } from "./elements";
 import { Body } from "./shared/body";
 import { subscribeScrollbarSize } from "./scrollbar-width";
+import { compareMedia } from "@webstudio-is/css-engine";
 
 registerContainers();
 
@@ -99,6 +101,7 @@ const FallbackComponent = ({ error, resetErrorBoundary }: FallbackProps) => {
 const useElementsTree = (components: Components, instances: Instances) => {
   const page = useStore($selectedPage);
   const isPreviewMode = useStore($isPreviewMode);
+  const breakpointsMap = useStore($breakpoints);
   const rootInstanceId = page?.rootInstanceId ?? "";
 
   if (typeof window === "undefined") {
@@ -111,6 +114,11 @@ const useElementsTree = (components: Components, instances: Instances) => {
     });
   }
 
+  const breakpoints = useMemo(
+    () => [...breakpointsMap.values()].sort(compareMedia),
+    [breakpointsMap]
+  );
+
   return useMemo(() => {
     return (
       <ReactSdkContext.Provider
@@ -119,6 +127,7 @@ const useElementsTree = (components: Components, instances: Instances) => {
           assetBaseUrl,
           imageLoader: wsImageLoader,
           resources: {},
+          breakpoints,
         }}
       >
         {createInstanceElement({
@@ -132,7 +141,7 @@ const useElementsTree = (components: Components, instances: Instances) => {
         })}
       </ReactSdkContext.Provider>
     );
-  }, [instances, rootInstanceId, components, isPreviewMode]);
+  }, [instances, rootInstanceId, components, isPreviewMode, breakpoints]);
 };
 
 const DesignMode = () => {

fixtures/react-router-docker/app/__generated__/[another-page]._index.tsx

@@ -27,6 +27,7 @@ import {
   favIconAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
+  breakpoints,
 } from "../__generated__/[another-page]._index";
 import {
   getResources,
@@ -272,6 +273,7 @@ const Outlet = () => {
         imageLoader,
         assetBaseUrl,
         resources,
+        breakpoints,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/react-router-docker/app/__generated__/_index.tsx

@@ -27,6 +27,7 @@ import {
   favIconAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
+  breakpoints,
 } from "../__generated__/_index";
 import {
   getResources,
@@ -272,6 +273,7 @@ const Outlet = () => {
         imageLoader,
         assetBaseUrl,
         resources,
+        breakpoints,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/react-router-docker/app/routes/[another-page]._index.tsx

@@ -27,6 +27,7 @@ import {
   favIconAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
+  breakpoints,
 } from "../__generated__/[another-page]._index";
 import {
   getResources,
@@ -272,6 +273,7 @@ const Outlet = () => {
         imageLoader,
         assetBaseUrl,
         resources,
+        breakpoints,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}

fixtures/react-router-docker/app/routes/_index.tsx

@@ -27,6 +27,7 @@ import {
   favIconAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
+  breakpoints,
 } from "../__generated__/_index";
 import {
   getResources,
@@ -272,6 +273,7 @@ const Outlet = () => {
         imageLoader,
         assetBaseUrl,
         resources,
+        breakpoints,
       }}
     >
       {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}