react-native-windows 0.73.10 → 0.74.0-preview.1

package/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp

@@ -1,8 +1,8 @@
 
 #include "pch.h"
 #include "CompositionContextHelper.h"
-#if __has_include("Composition.WindowsCompositionContextHelper.g.cpp")
-#include "Composition.WindowsCompositionContextHelper.g.cpp"
+#if __has_include("Composition.SystemCompositionContextHelper.g.cpp")
+#include "Composition.SystemCompositionContextHelper.g.cpp"
 #endif
 #ifdef USE_WINUI3
 #if __has_include("Composition.MicrosoftCompositionContextHelper.g.cpp")
@@ -37,16 +37,26 @@ struct CompositionTypeTraits<WindowsTypeTag> {
   using CompositionAnimation = winrt::Windows::UI::Composition::CompositionAnimation;
   using CompositionBackfaceVisibility = winrt::Windows::UI::Composition::CompositionBackfaceVisibility;
   using CompositionBrush = winrt::Windows::UI::Composition::CompositionBrush;
+  using CompositionColorBrush = winrt::Windows::UI::Composition::CompositionColorBrush;
+  using CompositionContainerShape = winrt::Windows::UI::Composition::CompositionContainerShape;
   using CompositionDrawingSurface = winrt::Windows::UI::Composition::CompositionDrawingSurface;
+  using CompositionEasingFunction = winrt::Windows::UI::Composition::CompositionEasingFunction;
   using CompositionEllipseGeometry = winrt::Windows::UI::Composition::CompositionEllipseGeometry;
+  using CompositionGeometry = winrt::Windows::UI::Composition::CompositionGeometry;
+  using CompositionRoundedRectangleGeometry = winrt::Windows::UI::Composition::CompositionRoundedRectangleGeometry;
   using CompositionNineGridBrush = winrt::Windows::UI::Composition::CompositionNineGridBrush;
+  using CompositionObject = winrt::Windows::UI::Composition::CompositionObject;
   using CompositionPath = winrt::Windows::UI::Composition::CompositionPath;
+  using CompositionPropertySet = winrt::Windows::UI::Composition::CompositionPropertySet;
   using CompositionSpriteShape = winrt::Windows::UI::Composition::CompositionSpriteShape;
   using CompositionStretch = winrt::Windows::UI::Composition::CompositionStretch;
+  using CompositionStrokeCap = winrt::Windows::UI::Composition::CompositionStrokeCap;
   using CompositionSurfaceBrush = winrt::Windows::UI::Composition::CompositionSurfaceBrush;
   using Compositor = winrt::Windows::UI::Composition::Compositor;
   using ContainerVisual = winrt::Windows::UI::Composition::ContainerVisual;
+  using CubicBezierEasingFunction = winrt::Windows::UI::Composition::CubicBezierEasingFunction;
   using DropShadow = winrt::Windows::UI::Composition::DropShadow;
+  using ExpressionAnimation = winrt::Windows::UI::Composition::ExpressionAnimation;
   using ICompositionSurface = winrt::Windows::UI::Composition::ICompositionSurface;
   using IInteractionTrackerOwner = winrt::Windows::UI::Composition::Interactions::IInteractionTrackerOwner;
   using InteractionSourceMode = winrt::Windows::UI::Composition::Interactions::InteractionSourceMode;
@@ -66,6 +76,7 @@ struct CompositionTypeTraits<WindowsTypeTag> {
   using ScalarKeyFrameAnimation = winrt::Windows::UI::Composition::ScalarKeyFrameAnimation;
   using ShapeVisual = winrt::Windows::UI::Composition::ShapeVisual;
   using SpriteVisual = winrt::Windows::UI::Composition::SpriteVisual;
+  using StepEasingFunction = winrt::Windows::UI::Composition::StepEasingFunction;
   using Visual = winrt::Windows::UI::Composition::Visual;
   using VisualInteractionSource = winrt::Windows::UI::Composition::Interactions::VisualInteractionSource;
   using VisualInteractionSourceRedirectionMode =
@@ -80,7 +91,7 @@ struct CompositionTypeTraits<WindowsTypeTag> {
   using IInnerCompositionVisual = IWindowsCompositionVisual;
   using IInnerCompositionBrush = IWindowsCompositionBrush;
   using IInnerCompositionDrawingSurface = IWindowsCompositionDrawingSurfaceInner;
-  using CompositionContextHelper = winrt::Microsoft::ReactNative::Composition::WindowsCompositionContextHelper;
+  using CompositionContextHelper = winrt::Microsoft::ReactNative::Composition::SystemCompositionContextHelper;
 };
 using WindowsTypeRedirects = CompositionTypeTraits<WindowsTypeTag>;
 
@@ -94,16 +105,26 @@ struct CompositionTypeTraits<MicrosoftTypeTag> {
   using CompositionAnimation = winrt::Microsoft::UI::Composition::CompositionAnimation;
   using CompositionBackfaceVisibility = winrt::Microsoft::UI::Composition::CompositionBackfaceVisibility;
   using CompositionBrush = winrt::Microsoft::UI::Composition::CompositionBrush;
+  using CompositionColorBrush = winrt::Microsoft::UI::Composition::CompositionColorBrush;
+  using CompositionContainerShape = winrt::Microsoft::UI::Composition::CompositionContainerShape;
   using CompositionDrawingSurface = winrt::Microsoft::UI::Composition::CompositionDrawingSurface;
+  using CompositionEasingFunction = winrt::Microsoft::UI::Composition::CompositionEasingFunction;
   using CompositionEllipseGeometry = winrt::Microsoft::UI::Composition::CompositionEllipseGeometry;
+  using CompositionGeometry = winrt::Microsoft::UI::Composition::CompositionGeometry;
+  using CompositionRoundedRectangleGeometry = winrt::Microsoft::UI::Composition::CompositionRoundedRectangleGeometry;
   using CompositionNineGridBrush = winrt::Microsoft::UI::Composition::CompositionNineGridBrush;
+  using CompositionObject = winrt::Microsoft::UI::Composition::CompositionObject;
   using CompositionPath = winrt::Microsoft::UI::Composition::CompositionPath;
+  using CompositionPropertySet = winrt::Microsoft::UI::Composition::CompositionPropertySet;
   using CompositionSpriteShape = winrt::Microsoft::UI::Composition::CompositionSpriteShape;
   using CompositionStretch = winrt::Microsoft::UI::Composition::CompositionStretch;
+  using CompositionStrokeCap = winrt::Microsoft::UI::Composition::CompositionStrokeCap;
   using CompositionSurfaceBrush = winrt::Microsoft::UI::Composition::CompositionSurfaceBrush;
   using Compositor = winrt::Microsoft::UI::Composition::Compositor;
   using ContainerVisual = winrt::Microsoft::UI::Composition::ContainerVisual;
+  using CubicBezierEasingFunction = winrt::Microsoft::UI::Composition::CubicBezierEasingFunction;
   using DropShadow = winrt::Microsoft::UI::Composition::DropShadow;
+  using ExpressionAnimation = winrt::Microsoft::UI::Composition::ExpressionAnimation;
   using ICompositionSurface = winrt::Microsoft::UI::Composition::ICompositionSurface;
   using IInteractionTrackerOwner = winrt::Microsoft::UI::Composition::Interactions::IInteractionTrackerOwner;
   using InteractionSourceMode = winrt::Microsoft::UI::Composition::Interactions::InteractionSourceMode;
@@ -123,6 +144,7 @@ struct CompositionTypeTraits<MicrosoftTypeTag> {
   using ScalarKeyFrameAnimation = winrt::Microsoft::UI::Composition::ScalarKeyFrameAnimation;
   using ShapeVisual = winrt::Microsoft::UI::Composition::ShapeVisual;
   using SpriteVisual = winrt::Microsoft::UI::Composition::SpriteVisual;
+  using StepEasingFunction = winrt::Microsoft::UI::Composition::StepEasingFunction;
   using Visual = winrt::Microsoft::UI::Composition::Visual;
   using VisualInteractionSource = winrt::Microsoft::UI::Composition::Interactions::VisualInteractionSource;
   using VisualInteractionSourceRedirectionMode =
@@ -233,6 +255,11 @@ struct CompDrawingSurfaceBrush : public winrt::implements<
   }
 
   HRESULT BeginDraw(ID2D1DeviceContext **deviceContextOut, POINT *offset) noexcept {
+#ifdef DEBUG
+    // Drawing to a zero sized surface is a waste of time
+    auto size = m_drawingSurfaceInterop.as<typename TTypeRedirects::CompositionDrawingSurface>().Size();
+    assert(size.Width != 0 && size.Height != 0);
+#endif
     return m_drawingSurfaceInterop->BeginDraw(nullptr, __uuidof(ID2D1DeviceContext), (void **)deviceContextOut, offset);
   }
 
@@ -288,22 +315,103 @@ using MicrosoftCompDrawingSurfaceBrush = CompDrawingSurfaceBrush<MicrosoftTypeRe
 #endif
 
 template <typename TTypeRedirects>
-struct CompVisual : public winrt::implements<
-                        CompVisual<TTypeRedirects>,
-                        winrt::Microsoft::ReactNative::Composition::IVisual,
-                        typename TTypeRedirects::IInnerCompositionVisual,
-                        IVisualInterop> {
-  CompVisual(typename TTypeRedirects::Visual const &visual) : m_visual(visual) {}
+void SetAnimationClass(
+    winrt::Microsoft::ReactNative::Composition::AnimationClass value,
+    typename const TTypeRedirects::Visual &visual) {
+  constexpr int64_t ScrollBarExpandBeginTime = 400; // ms
+  constexpr int64_t ScrollBarExpandDuration = 167; // ms
+  constexpr int64_t SwitchDuration = 167; // ms
+
+  switch (value) {
+    case winrt::Microsoft::ReactNative::Composition::AnimationClass::None: {
+      visual.ImplicitAnimations(nullptr);
+      break;
+    }
 
-  typename TTypeRedirects::Visual InnerVisual() const noexcept override {
+    case winrt::Microsoft::ReactNative::Composition::AnimationClass::SwitchThumb: {
+      auto compositor = visual.Compositor();
+      auto offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
+      offsetAnimation.InsertExpressionKeyFrame(
+          0.0f, L"vector3(this.CurrentValue.X, this.FinalValue.Y, this.FinalValue.Z)");
+      offsetAnimation.InsertExpressionKeyFrame(1.0f, L"this.FinalValue");
+      offsetAnimation.Target(L"Offset");
+      offsetAnimation.Duration(std::chrono::milliseconds(SwitchDuration));
+
+      auto implicitAnimations = compositor.CreateImplicitAnimationCollection();
+      implicitAnimations.Insert(L"Offset", offsetAnimation);
+
+      visual.ImplicitAnimations(implicitAnimations);
+      break;
+    }
+
+    case winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBar: {
+      auto compositor = visual.Compositor();
+
+      auto opacityAnimation = compositor.CreateScalarKeyFrameAnimation();
+      opacityAnimation.InsertExpressionKeyFrame(0.0f, L"this.StartingValue");
+      opacityAnimation.InsertExpressionKeyFrame(1.0f, L"this.FinalValue");
+      opacityAnimation.Target(L"Opacity");
+      opacityAnimation.DelayTime(std::chrono::milliseconds(ScrollBarExpandBeginTime));
+      opacityAnimation.Duration(std::chrono::milliseconds(ScrollBarExpandDuration));
+
+      auto implicitAnimations = compositor.CreateImplicitAnimationCollection();
+      implicitAnimations.Insert(L"Opacity", opacityAnimation);
+      visual.ImplicitAnimations(implicitAnimations);
+      break;
+    }
+
+    case winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBarThumbVertical:
+    case winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBarThumbHorizontal: {
+      auto compositor = visual.Compositor();
+      auto offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
+      // We cannot just use a DelayTime, since we want changes to the offset in the scrolling dirction to happen
+      // immediately, and only delay the offset changes used when hiding/showing the scrollbar
+      float delayStartFrameOffset =
+          static_cast<float>(ScrollBarExpandBeginTime) / (ScrollBarExpandBeginTime + ScrollBarExpandDuration);
+      if (value == winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBarThumbVertical) {
+        offsetAnimation.InsertExpressionKeyFrame(
+            0.0f, L"vector3(this.CurrentValue.X, this.FinalValue.Y, this.FinalValue.Z)");
+        offsetAnimation.InsertExpressionKeyFrame(
+            delayStartFrameOffset, L"vector3(this.CurrentValue.X, this.FinalValue.Y, this.FinalValue.Z)");
+      } else {
+        offsetAnimation.InsertExpressionKeyFrame(
+            0.0f, L"vector3(this.FinalValue.X, this.CurrentValue.Y, this.FinalValue.Z)");
+        offsetAnimation.InsertExpressionKeyFrame(
+            delayStartFrameOffset, L"vector3(this.FinalValue.X, this.CurrentValue.Y, this.FinalValue.Z)");
+      }
+      offsetAnimation.InsertExpressionKeyFrame(1.0f, L"this.FinalValue");
+      offsetAnimation.Target(L"Offset");
+      offsetAnimation.Duration(std::chrono::milliseconds(ScrollBarExpandBeginTime + ScrollBarExpandDuration));
+
+      auto scaleAnimation = compositor.CreateVector3KeyFrameAnimation();
+      scaleAnimation.InsertExpressionKeyFrame(0.0f, L"this.StartingValue");
+      scaleAnimation.InsertExpressionKeyFrame(1.0f, L"this.FinalValue");
+      scaleAnimation.Target(L"Scale");
+      scaleAnimation.DelayTime(std::chrono::milliseconds(ScrollBarExpandBeginTime));
+      scaleAnimation.Duration(std::chrono::milliseconds(ScrollBarExpandDuration));
+
+      auto implicitAnimations = compositor.CreateImplicitAnimationCollection();
+      implicitAnimations.Insert(L"Offset", offsetAnimation);
+      implicitAnimations.Insert(L"Scale", scaleAnimation);
+
+      visual.ImplicitAnimations(implicitAnimations);
+    }
+  }
+}
+
+template <typename TTypeRedirects, typename TVisual = typename TTypeRedirects::Visual>
+struct CompVisualImpl {
+  CompVisualImpl(typename TVisual const &visual) : m_visual(visual) {}
+
+  typename TTypeRedirects::Visual InnerVisual() const noexcept {
     return m_visual;
   }
 
   void InsertAt(const winrt::Microsoft::ReactNative::Composition::IVisual &visual, uint32_t index) noexcept {
-    auto containerChildren = m_visual.as<typename TTypeRedirects::ContainerVisual>().Children();
+    auto containerChildren = InnerVisual().as<typename TTypeRedirects::ContainerVisual>().Children();
     auto compVisual = TTypeRedirects::CompositionContextHelper::InnerVisual(visual);
-    if (index == 0 || containerChildren.Count() == 0) {
-      containerChildren.InsertAtTop(compVisual);
+    if (index == 0) {
+      containerChildren.InsertAtBottom(compVisual);
       return;
     }
     auto insertAfter = containerChildren.First();
@@ -314,7 +422,7 @@ struct CompVisual : public winrt::implements<
 
   void Remove(const winrt::Microsoft::ReactNative::Composition::IVisual &visual) noexcept {
     auto compVisual = TTypeRedirects::CompositionContextHelper::InnerVisual(visual);
-    auto containerChildren = m_visual.as<typename TTypeRedirects::ContainerVisual>().Children();
+    auto containerChildren = InnerVisual().as<typename TTypeRedirects::ContainerVisual>().Children();
     containerChildren.Remove(compVisual);
   }
 
@@ -380,16 +488,49 @@ struct CompVisual : public winrt::implements<
     m_visual.RelativeSizeAdjustment(relativeSizeAdjustment);
   }
 
-  winrt::Microsoft::ReactNative::Composition::BackfaceVisibility BackfaceVisibility() {
+  winrt::Microsoft::ReactNative::Composition::BackfaceVisibility BackfaceVisibility() const noexcept {
     return static_cast<winrt::Microsoft::ReactNative::Composition::BackfaceVisibility>(m_visual.BackfaceVisibility());
   }
 
-  void BackfaceVisibility(winrt::Microsoft::ReactNative::Composition::BackfaceVisibility value) {
+  void BackfaceVisibility(winrt::Microsoft::ReactNative::Composition::BackfaceVisibility value) noexcept {
     m_visual.BackfaceVisibility(static_cast<typename TTypeRedirects::CompositionBackfaceVisibility>(value));
   }
 
- private:
-  typename TTypeRedirects::Visual m_visual;
+  winrt::hstring Comment() const noexcept {
+    return m_visual.Comment();
+  }
+
+  void Comment(winrt::hstring value) noexcept {
+    m_visual.Comment(value);
+  }
+
+  void AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass value) noexcept {
+    SetAnimationClass<TTypeRedirects>(value, m_visual);
+  }
+
+ protected:
+  TVisual m_visual;
+};
+
+template <typename TTypeRedirects>
+struct CompVisual : public winrt::implements<
+                        CompVisual<TTypeRedirects>,
+                        winrt::Microsoft::ReactNative::Composition::IVisual,
+                        typename TTypeRedirects::IInnerCompositionVisual,
+                        IVisualInterop>,
+                    CompVisualImpl<TTypeRedirects> {
+  using Super = CompVisualImpl<TTypeRedirects>;
+  CompVisual(typename TTypeRedirects::Visual const &visual) : CompVisualImpl<TTypeRedirects>(visual) {}
+
+  // IInnerCompositionVisual
+  typename TTypeRedirects::Visual InnerVisual() const noexcept override {
+    return Super::m_visual;
+  }
+
+  // IVisualInterop
+  void SetClippingPath(ID2D1Geometry *clippingPath) noexcept override {
+    Super::SetClippingPath(clippingPath);
+  }
 };
 using WindowsCompVisual = CompVisual<WindowsTypeRedirects>;
 #ifdef USE_WINUI3
@@ -402,116 +543,114 @@ struct CompSpriteVisual : winrt::implements<
                               winrt::Microsoft::ReactNative::Composition::ISpriteVisual,
                               winrt::Microsoft::ReactNative::Composition::IVisual,
                               typename TTypeRedirects::IInnerCompositionVisual,
-                              IVisualInterop> {
-  CompSpriteVisual(typename TTypeRedirects::SpriteVisual const &visual) : m_visual(visual) {}
+                              IVisualInterop>,
+                          CompVisualImpl<TTypeRedirects, typename TTypeRedirects::SpriteVisual> {
+  using Super = CompVisualImpl<TTypeRedirects, typename TTypeRedirects::SpriteVisual>;
+  CompSpriteVisual(typename TTypeRedirects::SpriteVisual const &visual) : Super(visual) {}
 
+  // IInnerCompositionVisual
   typename TTypeRedirects::Visual InnerVisual() const noexcept override {
-    return m_visual;
-  }
-
-  void InsertAt(const winrt::Microsoft::ReactNative::Composition::IVisual &visual, uint32_t index) noexcept {
-    auto containerChildren = m_visual.Children();
-    auto compVisual = TTypeRedirects::CompositionContextHelper::InnerVisual(visual);
-    if (index == 0) {
-      containerChildren.InsertAtBottom(compVisual);
-      return;
-    }
-    auto insertAfter = containerChildren.First();
-    for (uint32_t i = 1; i < index; i++)
-      insertAfter.MoveNext();
-    containerChildren.InsertAbove(compVisual, insertAfter.Current());
-  }
-
-  void Remove(const winrt::Microsoft::ReactNative::Composition::IVisual &visual) noexcept {
-    auto compVisual = TTypeRedirects::CompositionContextHelper::InnerVisual(visual);
-    auto containerChildren = m_visual.Children();
-    containerChildren.Remove(compVisual);
+    return Super::m_visual;
   }
 
-  winrt::Microsoft::ReactNative::Composition::IVisual GetAt(uint32_t index) noexcept {
-    auto containerChildren = m_visual.as<typename TTypeRedirects::ContainerVisual>().Children();
-    auto it = containerChildren.First();
-    for (uint32_t i = 0; i < index; i++)
-      it.MoveNext();
-    return TTypeRedirects::CompositionContextHelper::CreateVisual(it.Current());
+  // IVisualInterop
+  void SetClippingPath(ID2D1Geometry *clippingPath) noexcept override {
+    Super::SetClippingPath(clippingPath);
   }
 
   void Brush(const winrt::Microsoft::ReactNative::Composition::IBrush &brush) noexcept {
-    m_visual.Brush(TTypeRedirects::CompositionContextHelper::InnerBrush(brush));
-  }
-
-  void Opacity(float opacity) noexcept {
-    m_visual.Opacity(opacity);
-  }
-
-  void Scale(winrt::Windows::Foundation::Numerics::float3 const &scale) noexcept {
-    m_visual.Scale(scale);
+    Super::m_visual.Brush(TTypeRedirects::CompositionContextHelper::InnerBrush(brush));
   }
 
-  void TransformMatrix(winrt::Windows::Foundation::Numerics::float4x4 const &transform) noexcept {
-    m_visual.TransformMatrix(transform);
+  void Shadow(const winrt::Microsoft::ReactNative::Composition::IDropShadow &shadow) noexcept {
+    Super::m_visual.Shadow(TTypeRedirects::CompositionContextHelper::InnerDropShadow(shadow));
   }
+};
+using WindowsCompSpriteVisual = CompSpriteVisual<WindowsTypeRedirects>;
+#ifdef USE_WINUI3
+using MicrosoftCompSpriteVisual = CompSpriteVisual<MicrosoftTypeRedirects>;
+#endif
 
-  void RotationAngle(float rotation) noexcept {
-    m_visual.RotationAngle(rotation);
+template <typename TTypeRedirects>
+struct CompRoundedRectangleVisual : winrt::implements<
+                                        CompRoundedRectangleVisual<TTypeRedirects>,
+                                        winrt::Microsoft::ReactNative::Composition::IRoundedRectangleVisual,
+                                        winrt::Microsoft::ReactNative::Composition::IVisual,
+                                        typename TTypeRedirects::IInnerCompositionVisual,
+                                        IVisualInterop>,
+                                    CompVisualImpl<TTypeRedirects> {
+  using Super = CompVisualImpl<TTypeRedirects>;
+  CompRoundedRectangleVisual(typename TTypeRedirects::ShapeVisual const &visual) : Super(visual) {
+    auto compositor = visual.Compositor();
+    m_geometry = compositor.CreateRoundedRectangleGeometry();
+    m_spriteShape = compositor.CreateSpriteShape();
+    m_spriteShape.Geometry(m_geometry);
+    visual.Shapes().Append(m_spriteShape);
+  }
+
+  // IInnerCompositionVisual
+  typename TTypeRedirects::Visual InnerVisual() const noexcept override {
+    return Super::m_visual;
   }
 
-  void IsVisible(bool isVisible) noexcept {
-    m_visual.IsVisible(isVisible);
+  // IVisualInterop
+  void SetClippingPath(ID2D1Geometry *clippingPath) noexcept override {
+    Super::SetClippingPath(clippingPath);
   }
 
   void Size(winrt::Windows::Foundation::Numerics::float2 const &size) noexcept {
-    m_visual.Size(size);
+    m_size = size;
+    Super::m_visual.Size(size);
+    updateGeometry();
   }
 
-  void Offset(winrt::Windows::Foundation::Numerics::float3 const &offset) noexcept {
-    m_visual.Offset(offset);
-  }
-
-  void Offset(
-      winrt::Windows::Foundation::Numerics::float3 offset,
-      winrt::Windows::Foundation::Numerics::float3 relativeAdjustment) noexcept {
-    m_visual.Offset(offset);
-    m_visual.RelativeOffsetAdjustment(relativeAdjustment);
+  void updateGeometry() {
+    m_geometry.Size({m_size.x - (m_strokeThickness * 2), m_size.y - (m_strokeThickness * 2)});
+    m_geometry.CornerRadius({m_cornerRadius.x - m_strokeThickness, m_cornerRadius.y - m_strokeThickness});
+    m_geometry.Offset({m_strokeThickness, m_strokeThickness});
   }
 
   void RelativeSizeWithOffset(
       winrt::Windows::Foundation::Numerics::float2 size,
       winrt::Windows::Foundation::Numerics::float2 relativeSizeAdjustment) noexcept {
-    m_visual.Size(size);
-    m_visual.RelativeSizeAdjustment(relativeSizeAdjustment);
+    assert(false); // Does not correctly handle relativeSizeAdjustment - since geometry does not support
+                   // RelativeSizeAdjustment
+    m_size = size;
+    Super::m_visual.Size(size);
+    updateGeometry();
+
+    Super::m_visual.RelativeSizeAdjustment(relativeSizeAdjustment);
   }
 
-  winrt::Microsoft::ReactNative::Composition::BackfaceVisibility BackfaceVisibility() {
-    return static_cast<winrt::Microsoft::ReactNative::Composition::BackfaceVisibility>(m_visual.BackfaceVisibility());
+  void Brush(const winrt::Microsoft::ReactNative::Composition::IBrush &brush) noexcept {
+    m_spriteShape.FillBrush(TTypeRedirects::CompositionContextHelper::InnerBrush(brush));
   }
 
-  void BackfaceVisibility(winrt::Microsoft::ReactNative::Composition::BackfaceVisibility value) {
-    m_visual.BackfaceVisibility(static_cast<typename TTypeRedirects::CompositionBackfaceVisibility>(value));
+  void CornerRadius(winrt::Windows::Foundation::Numerics::float2 value) noexcept {
+    m_cornerRadius = value;
+    updateGeometry();
   }
 
-  void SetClippingPath(ID2D1Geometry *clippingPath) noexcept {
-    if (!clippingPath) {
-      m_visual.Clip(nullptr);
-      return;
-    }
-    auto geometry = winrt::make<GeometrySource>(clippingPath);
-    auto path = TTypeRedirects::CompositionPath(geometry);
-    auto pathgeo = m_visual.Compositor().CreatePathGeometry(path);
-    auto clip = m_visual.Compositor().CreateGeometricClip(pathgeo);
-    m_visual.Clip(clip);
+  void StrokeBrush(const winrt::Microsoft::ReactNative::Composition::IBrush &brush) noexcept {
+    m_spriteShape.StrokeBrush(TTypeRedirects::CompositionContextHelper::InnerBrush(brush));
   }
 
-  void Shadow(const winrt::Microsoft::ReactNative::Composition::IDropShadow &shadow) noexcept {
-    m_visual.Shadow(TTypeRedirects::CompositionContextHelper::InnerDropShadow(shadow));
+  void StrokeThickness(float value) noexcept {
+    m_strokeThickness = value;
+    m_spriteShape.StrokeThickness(value);
+    updateGeometry();
   }
 
  private:
-  typename TTypeRedirects::SpriteVisual m_visual;
+  float m_strokeThickness{0.0f};
+  winrt::Windows::Foundation::Numerics::float2 m_cornerRadius{0};
+  winrt::Windows::Foundation::Numerics::float2 m_size{0};
+  typename TTypeRedirects::CompositionSpriteShape m_spriteShape{nullptr};
+  typename TTypeRedirects::CompositionRoundedRectangleGeometry m_geometry{nullptr};
 };
-using WindowsCompSpriteVisual = CompSpriteVisual<WindowsTypeRedirects>;
+using WindowsCompRoundedRectangleVisual = CompRoundedRectangleVisual<WindowsTypeRedirects>;
 #ifdef USE_WINUI3
-using MicrosoftCompSpriteVisual = CompSpriteVisual<MicrosoftTypeRedirects>;
+using MicrosoftCompRoundedRectangleVisual = CompRoundedRectangleVisual<MicrosoftTypeRedirects>;
 #endif
 
 struct CompScrollPositionChangedArgs : winrt::implements<
@@ -519,7 +658,7 @@ struct CompScrollPositionChangedArgs : winrt::implements<
                                            winrt::Microsoft::ReactNative::Composition::IScrollPositionChangedArgs> {
   CompScrollPositionChangedArgs(winrt::Windows::Foundation::Numerics::float2 position) : m_position(position) {}
 
-  winrt::Windows::Foundation::Numerics::float2 Position() {
+  winrt::Windows::Foundation::Numerics::float2 Position() const noexcept {
     return m_position;
   }
 
@@ -613,8 +752,8 @@ struct CompScrollerVisual : winrt::implements<
   void InsertAt(const winrt::Microsoft::ReactNative::Composition::IVisual &visual, uint32_t index) noexcept {
     auto containerChildren = m_contentVisual.Children();
     auto compVisual = TTypeRedirects::CompositionContextHelper::InnerVisual(visual);
-    if (index == 0 || containerChildren.Count() == 0) {
-      containerChildren.InsertAtTop(compVisual);
+    if (index == 0) {
+      containerChildren.InsertAtBottom(compVisual);
       return;
     }
     auto insertAfter = containerChildren.First();
@@ -693,6 +832,14 @@ struct CompScrollerVisual : winrt::implements<
     m_visual.BackfaceVisibility(static_cast<typename TTypeRedirects::CompositionBackfaceVisibility>(value));
   }
 
+  winrt::hstring Comment() const noexcept {
+    return m_visual.Comment();
+  }
+
+  void Comment(winrt::hstring value) noexcept {
+    m_visual.Comment(value);
+  }
+
   void SetClippingPath(ID2D1Geometry *clippingPath) noexcept {
     if (!clippingPath) {
       m_visual.Clip(nullptr);
@@ -711,7 +858,7 @@ struct CompScrollerVisual : winrt::implements<
 
   winrt::event_token ScrollPositionChanged(
       winrt::Windows::Foundation::EventHandler<
-          winrt::Microsoft::ReactNative::Composition::IScrollPositionChangedArgs> const &handler) {
+          winrt::Microsoft::ReactNative::Composition::IScrollPositionChangedArgs> const &handler) noexcept {
     return m_scrollPositionChangedEvent.add(handler);
   }
 
@@ -725,7 +872,7 @@ struct CompScrollerVisual : winrt::implements<
     UpdateMaxPosition();
   }
 
-  winrt::Windows::Foundation::Numerics::float3 ScrollPosition() noexcept {
+  winrt::Windows::Foundation::Numerics::float3 ScrollPosition() const noexcept {
     return m_interactionTracker.Position();
   }
 
@@ -734,7 +881,7 @@ struct CompScrollerVisual : winrt::implements<
   static constexpr int64_t s_offsetsChangeMinMs{50};
   static constexpr int64_t s_offsetsChangeMaxMs{1000};
 
-  typename TTypeRedirects::CompositionAnimation GetPositionAnimation(float x, float y) {
+  typename TTypeRedirects::CompositionAnimation GetPositionAnimation(float x, float y) noexcept {
     const int64_t distance =
         static_cast<int64_t>(std::sqrt(std::pow(x - m_currentPosition.x, 2.0f) + pow(y - m_currentPosition.y, 2.0f)));
     auto compositor = m_visual.Compositor();
@@ -780,12 +927,16 @@ struct CompScrollerVisual : winrt::implements<
     }
   }
 
+  void AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass value) noexcept {
+    SetAnimationClass<TTypeRedirects>(value, m_visual);
+  }
+
  private:
-  void FireScrollPositionChanged(winrt::Windows::Foundation::Numerics::float2 position) {
+  void FireScrollPositionChanged(winrt::Windows::Foundation::Numerics::float2 position) noexcept {
     m_scrollPositionChangedEvent(*this, winrt::make<CompScrollPositionChangedArgs>(position));
   }
 
-  void UpdateMaxPosition() {
+  void UpdateMaxPosition() noexcept {
     m_interactionTracker.MaxPosition(
         {std::max<float>(m_contentSize.x - m_visualSize.x, 0),
          std::max<float>(m_contentSize.y - m_visualSize.y, 0),
@@ -818,74 +969,361 @@ struct CompActivityVisual : winrt::implements<
                                 winrt::Microsoft::ReactNative::Composition::IVisual,
                                 typename TTypeRedirects::IInnerCompositionVisual,
                                 IVisualInterop> {
-  CompActivityVisual(typename TTypeRedirects::SpriteVisual const &visual) : m_visual(visual) {
-    auto compositor = m_visual.Compositor();
-    m_contentVisual = compositor.CreateSpriteVisual();
-
-    // Create loading circles
-    for (int i = 0; i < 4; i++) {
-      auto loadingCircle = createLoadingCircle(compositor, i * 200);
-      m_visual.Children().InsertAtTop(loadingCircle);
-    }
-  }
-
-  void Color(winrt::Windows::UI::Color color) noexcept {
-    // Change the color of each SpriteVisual
-    for (auto &spriteVisual : m_spriteVisuals) {
-      auto colorBrush = m_visual.Compositor().CreateColorBrush(color);
-      // Set the new color brush on the SpriteVisual
-      spriteVisual.FillBrush(colorBrush);
+  /************************************************************************************
+   * Begin of copy from ProgressRingIndeterminate.cpp which is autogen'd from lottie
+   * Changes were made to the namespaces, but otherwise code should be untouched
+   ************************************************************************************/
+
+  static constexpr int64_t c_durationTicks{20000000L};
+  typename TTypeRedirects::Compositor const _c{nullptr};
+  typename TTypeRedirects::ExpressionAnimation const _reusableExpressionAnimation{nullptr};
+  typename TTypeRedirects::CompositionPropertySet const _themeProperties{nullptr};
+  typename TTypeRedirects::CompositionColorBrush _themeColor_Foreground_0{nullptr};
+  typename TTypeRedirects::CompositionColorBrush _themeColor_Foreground_1{nullptr};
+  typename TTypeRedirects::ContainerVisual _root{nullptr};
+  typename TTypeRedirects::CubicBezierEasingFunction _cubicBezierEasingFunction_0{nullptr};
+  typename TTypeRedirects::ExpressionAnimation _rootProgress{nullptr};
+  typename TTypeRedirects::StepEasingFunction _holdThenStepEasingFunction{nullptr};
+
+  static void StartProgressBoundAnimation(
+      typename TTypeRedirects::CompositionObject target,
+      winrt::hstring animatedPropertyName,
+      typename TTypeRedirects::CompositionAnimation animation,
+      typename TTypeRedirects::ExpressionAnimation controllerProgressExpression) {
+    target.StartAnimation(animatedPropertyName, animation);
+    const auto controller = target.TryGetAnimationController(animatedPropertyName);
+    controller.Pause();
+    controller.StartAnimation(L"Progress", controllerProgressExpression);
+  }
+
+  void BindProperty(
+      typename TTypeRedirects::CompositionObject target,
+      winrt::hstring animatedPropertyName,
+      winrt::hstring expression,
+      winrt::hstring referenceParameterName,
+      typename TTypeRedirects::CompositionObject referencedObject) {
+    _reusableExpressionAnimation.ClearAllParameters();
+    _reusableExpressionAnimation.Expression(expression);
+    _reusableExpressionAnimation.SetReferenceParameter(referenceParameterName, referencedObject);
+    target.StartAnimation(animatedPropertyName, _reusableExpressionAnimation);
+  }
+
+  void BindProperty2(
+      typename TTypeRedirects::CompositionObject target,
+      winrt::hstring animatedPropertyName,
+      winrt::hstring expression,
+      winrt::hstring referenceParameterName0,
+      typename TTypeRedirects::CompositionObject referencedObject0,
+      winrt::hstring referenceParameterName1,
+      typename TTypeRedirects::CompositionObject referencedObject1) {
+    _reusableExpressionAnimation.ClearAllParameters();
+    _reusableExpressionAnimation.Expression(expression);
+    _reusableExpressionAnimation.SetReferenceParameter(referenceParameterName0, referencedObject0);
+    _reusableExpressionAnimation.SetReferenceParameter(referenceParameterName1, referencedObject1);
+    target.StartAnimation(animatedPropertyName, _reusableExpressionAnimation);
+  }
+
+  typename TTypeRedirects::ScalarKeyFrameAnimation CreateScalarKeyFrameAnimation(
+      float initialProgress,
+      float initialValue,
+      typename TTypeRedirects::CompositionEasingFunction initialEasingFunction) {
+    const auto result = _c.CreateScalarKeyFrameAnimation();
+    result.Duration(winrt::Windows::Foundation::TimeSpan{c_durationTicks});
+    result.InsertKeyFrame(initialProgress, initialValue, initialEasingFunction);
+    return result;
+  }
+
+  typename TTypeRedirects::CompositionSpriteShape CreateSpriteShape(
+      typename TTypeRedirects::CompositionGeometry geometry,
+      winrt::Windows::Foundation::Numerics::float3x2 transformMatrix) {
+    const auto result = _c.CreateSpriteShape(geometry);
+    result.TransformMatrix(transformMatrix);
+    return result;
+  }
+
+  // - Layer aggregator
+  // Scale:5,5, Offset:<40, 40>
+  // Color bound to theme property value: Background
+  typename TTypeRedirects::CompositionColorBrush ThemeColor_Background() {
+    const auto result = _c.CreateColorBrush();
+    BindProperty(
+        result,
+        L"Color",
+        L"ColorRGB(_theme.Background.W*1,_theme.Background.X,_theme.Background.Y,_theme.Background.Z)",
+        L"_theme",
+        _themeProperties);
+    return result;
+  }
+
+  // - - Layer aggregator
+  // -  Scale:5,5, Offset:<40, 40>
+  // ShapeGroup: Ellipse B
+  // Color bound to theme property value: Foreground
+  typename TTypeRedirects::CompositionColorBrush ThemeColor_Foreground_0() {
+    const auto result = _themeColor_Foreground_0 = _c.CreateColorBrush();
+    const auto propertySet = result.Properties();
+    propertySet.InsertScalar(L"Opacity0", 0.0F);
+    BindProperty2(
+        result,
+        L"Color",
+        L"ColorRGB(_theme.Foreground.W*my.Opacity0,_theme.Foreground.X,_theme.Foreground.Y,_theme.Foreground.Z)",
+        L"_theme",
+        _themeProperties,
+        L"my",
+        propertySet);
+    StartProgressBoundAnimation(propertySet, L"Opacity0", Opacity0ScalarAnimation_0_to_1(), _rootProgress);
+    return result;
+  }
+
+  // - - Layer aggregator
+  // -  Scale:5,5, Offset:<40, 40>
+  // ShapeGroup: Ellipse B
+  // Color bound to theme property value: Foreground
+  typename TTypeRedirects::CompositionColorBrush ThemeColor_Foreground_1() {
+    const auto result = _themeColor_Foreground_1 = _c.CreateColorBrush();
+    const auto propertySet = result.Properties();
+    propertySet.InsertScalar(L"Opacity0", 1.0F);
+    BindProperty2(
+        result,
+        L"Color",
+        L"ColorRGB(_theme.Foreground.W*my.Opacity0,_theme.Foreground.X,_theme.Foreground.Y,_theme.Foreground.Z)",
+        L"_theme",
+        _themeProperties,
+        L"my",
+        propertySet);
+    StartProgressBoundAnimation(propertySet, L"Opacity0", Opacity0ScalarAnimation_1_to_0(), _rootProgress);
+    return result;
+  }
+
+  // Layer aggregator
+  // Transforms for Radial
+  typename TTypeRedirects::CompositionContainerShape ContainerShape() {
+    const auto result = _c.CreateContainerShape();
+    // Offset:<40, 40>, Scale:<5, 5>
+    result.TransformMatrix({5.0F, 0.0F, 0.0F, 5.0F, 40.0F, 40.0F});
+    const auto shapes = result.Shapes();
+    // ShapeGroup: Ellipse B
+    shapes.Append(SpriteShape_1());
+    // ShapeGroup: Ellipse B
+    shapes.Append(SpriteShape_2());
+    StartProgressBoundAnimation(
+        result, L"RotationAngleInDegrees", RotationAngleInDegreesScalarAnimation_0_to_900(), _rootProgress);
+    return result;
+  }
+
+  // - Layer aggregator
+  // Scale:5,5, Offset:<40, 40>
+  // Ellipse Path.EllipseGeometry
+  typename TTypeRedirects::CompositionEllipseGeometry Ellipse_7_0() {
+    const auto result = _c.CreateEllipseGeometry();
+    result.Radius({7.0F, 7.0F});
+    return result;
+  }
+
+  // - - Layer aggregator
+  // -  Scale:5,5, Offset:<40, 40>
+  // ShapeGroup: Ellipse B
+  // Ellipse Path.EllipseGeometry
+  typename TTypeRedirects::CompositionEllipseGeometry Ellipse_7_1() {
+    const auto result = _c.CreateEllipseGeometry();
+    result.TrimEnd(0.5F);
+    result.Radius({7.0F, 7.0F});
+    StartProgressBoundAnimation(result, L"TrimStart", TrimStartScalarAnimation_0_to_0p5(), RootProgress());
+    return result;
+  }
+
+  // - - Layer aggregator
+  // -  Scale:5,5, Offset:<40, 40>
+  // ShapeGroup: Ellipse B
+  // Ellipse Path.EllipseGeometry
+  typename TTypeRedirects::CompositionEllipseGeometry Ellipse_7_2() {
+    const auto result = _c.CreateEllipseGeometry();
+    result.Radius({7.0F, 7.0F});
+    StartProgressBoundAnimation(result, L"TrimEnd", TrimEndScalarAnimation_0_to_0p5(), _rootProgress);
+    return result;
+  }
+
+  // Layer aggregator
+  // Ellipse Path
+  typename TTypeRedirects::CompositionSpriteShape SpriteShape_0() {
+    // Offset:<40, 40>, Scale:<5, 5>
+    const auto result = CreateSpriteShape(Ellipse_7_0(), {5.0F, 0.0F, 0.0F, 5.0F, 40.0F, 40.0F});
+    result.StrokeBrush(ThemeColor_Background());
+    result.StrokeDashCap(TTypeRedirects::CompositionStrokeCap::Round);
+    result.StrokeThickness(1.5F);
+    return result;
+  }
+
+  // - Layer aggregator
+  // Scale:5,5, Offset:<40, 40>
+  // Ellipse Path
+  typename TTypeRedirects::CompositionSpriteShape SpriteShape_1() {
+    const auto result = _c.CreateSpriteShape(Ellipse_7_1());
+    result.StrokeBrush(ThemeColor_Foreground_0());
+    result.StrokeDashCap(TTypeRedirects::CompositionStrokeCap::Round);
+    result.StrokeStartCap(TTypeRedirects::CompositionStrokeCap::Round);
+    result.StrokeEndCap(TTypeRedirects::CompositionStrokeCap::Round);
+    result.StrokeThickness(1.5F);
+    return result;
+  }
+
+  // - Layer aggregator
+  // Scale:5,5, Offset:<40, 40>
+  // Ellipse Path
+  typename TTypeRedirects::CompositionSpriteShape SpriteShape_2() {
+    const auto result = _c.CreateSpriteShape(Ellipse_7_2());
+    result.StrokeBrush(ThemeColor_Foreground_1());
+    result.StrokeDashCap(TTypeRedirects::CompositionStrokeCap::Round);
+    result.StrokeStartCap(TTypeRedirects::CompositionStrokeCap::Round);
+    result.StrokeEndCap(TTypeRedirects::CompositionStrokeCap::Round);
+    result.StrokeThickness(1.5F);
+    return result;
+  }
+
+  // The root of the composition.
+  typename TTypeRedirects::ContainerVisual Root() {
+    const auto result = _root = _c.CreateContainerVisual();
+    const auto propertySet = result.Properties();
+    propertySet.InsertScalar(L"Progress", 0.0F);
+    // Layer aggregator
+    result.Children().InsertAtTop(ShapeVisual_0());
+    return result;
+  }
+
+  typename TTypeRedirects::CubicBezierEasingFunction CubicBezierEasingFunction_0() {
+    return _cubicBezierEasingFunction_0 =
+               _c.CreateCubicBezierEasingFunction({0.166999996F, 0.166999996F}, {0.833000004F, 0.833000004F});
+  }
+
+  typename TTypeRedirects::ExpressionAnimation RootProgress() {
+    const auto result = _rootProgress = _c.CreateExpressionAnimation(L"_.Progress");
+    result.SetReferenceParameter(L"_", _root);
+    return result;
+  }
+
+  // Opacity0
+  typename TTypeRedirects::ScalarKeyFrameAnimation Opacity0ScalarAnimation_0_to_1() {
+    const auto result = CreateScalarKeyFrameAnimation(0.0F, 0.0F, _holdThenStepEasingFunction);
+    result.InsertKeyFrame(0.5F, 1.0F, _holdThenStepEasingFunction);
+    return result;
+  }
+
+  // Opacity0
+  typename TTypeRedirects::ScalarKeyFrameAnimation Opacity0ScalarAnimation_1_to_0() {
+    const auto result = CreateScalarKeyFrameAnimation(0.0F, 1.0F, _holdThenStepEasingFunction);
+    result.InsertKeyFrame(0.5F, 0.0F, _holdThenStepEasingFunction);
+    return result;
+  }
+
+  // - Layer aggregator
+  // Scale:5,5, Offset:<40, 40>
+  // Rotation
+  typename TTypeRedirects::ScalarKeyFrameAnimation RotationAngleInDegreesScalarAnimation_0_to_900() {
+    const auto result = CreateScalarKeyFrameAnimation(0.0F, 0.0F, _holdThenStepEasingFunction);
+    result.InsertKeyFrame(0.5F, 450.0F, _cubicBezierEasingFunction_0);
+    result.InsertKeyFrame(1.0F, 900.0F, _cubicBezierEasingFunction_0);
+    return result;
+  }
+
+  // - - - Layer aggregator
+  // - -  Scale:5,5, Offset:<40, 40>
+  // - ShapeGroup: Ellipse B
+  // Ellipse Path.EllipseGeometry
+  // TrimEnd
+  typename TTypeRedirects::ScalarKeyFrameAnimation TrimEndScalarAnimation_0_to_0p5() {
+    const auto result = CreateScalarKeyFrameAnimation(0.0F, 9.99999975E-05F, _holdThenStepEasingFunction);
+    result.InsertKeyFrame(0.5F, 0.5F, _cubicBezierEasingFunction_0);
+    return result;
+  }
+
+  // - - - Layer aggregator
+  // - -  Scale:5,5, Offset:<40, 40>
+  // - ShapeGroup: Ellipse B
+  // Ellipse Path.EllipseGeometry
+  // TrimStart
+  typename TTypeRedirects::ScalarKeyFrameAnimation TrimStartScalarAnimation_0_to_0p5() {
+    const auto result = CreateScalarKeyFrameAnimation(0.0F, 0.0F, StepThenHoldEasingFunction());
+    result.InsertKeyFrame(0.5F, 0.0F, HoldThenStepEasingFunction());
+    result.InsertKeyFrame(1.0F, 0.5F, CubicBezierEasingFunction_0());
+    return result;
+  }
+
+  // Layer aggregator
+  typename TTypeRedirects::ShapeVisual ShapeVisual_0() {
+    const auto result = _c.CreateShapeVisual();
+    result.Size({80.0F, 80.0F});
+    const auto shapes = result.Shapes();
+    // Scale:5,5, Offset:<40, 40>
+    shapes.Append(SpriteShape_0());
+    // Scale:5,5, Offset:<40, 40>
+    shapes.Append(ContainerShape());
+    return result;
+  }
+
+  typename TTypeRedirects::StepEasingFunction HoldThenStepEasingFunction() {
+    const auto result = _holdThenStepEasingFunction = _c.CreateStepEasingFunction();
+    result.IsFinalStepSingleFrame(true);
+    return result;
+  }
+
+  // - - - - Layer aggregator
+  // - - -  Scale:5,5, Offset:<40, 40>
+  // - - ShapeGroup: Ellipse B
+  // - Ellipse Path.EllipseGeometry
+  // TrimStart
+  typename TTypeRedirects::StepEasingFunction StepThenHoldEasingFunction() {
+    const auto result = _c.CreateStepEasingFunction();
+    result.IsInitialStepSingleFrame(true);
+    return result;
+  }
+
+  /************************************************************************************
+   * End of copy from ProgressRingIndeterminate.cpp which is autogen'd from lottie
+   ************************************************************************************/
+
+  winrt::Windows::Foundation::Numerics::float4 ColorAsVector4(winrt::Windows::UI::Color color) {
+    return {
+        static_cast<float>(color.R),
+        static_cast<float>(color.G),
+        static_cast<float>(color.B),
+        static_cast<float>(color.A)};
+  }
+
+  CompActivityVisual(typename TTypeRedirects::SpriteVisual const &visual)
+      : m_visual(visual),
+        _c(visual.Compositor()),
+        _reusableExpressionAnimation(_c.CreateExpressionAnimation()),
+        _themeProperties(_c.CreatePropertySet()) {
+    // Default colors
+    _themeProperties.InsertVector4(L"Background", ColorAsVector4({0, 0, 0, 0}));
+    _themeProperties.InsertVector4(L"Foreground", ColorAsVector4({0, 0, 0, 0}));
+
+    visual.Children().InsertAtTop(Root());
+
+    auto easing = _c.CreateLinearEasingFunction();
+    const auto progressAnimation = _c.CreateScalarKeyFrameAnimation();
+    progressAnimation.Duration(winrt::Windows::Foundation::TimeSpan{c_durationTicks});
+    progressAnimation.InsertKeyFrame(0.0f, 0.0f);
+    progressAnimation.InsertKeyFrame(1.0f, 1.0f, easing);
+    progressAnimation.IterationBehavior(TTypeRedirects::AnimationIterationBehavior::Forever);
+
+    _root.Properties().StartAnimation(L"Progress", progressAnimation);
+    _root.StartAnimation(L"Progress", progressAnimation);
+  }
+
+  void Brush(winrt::Microsoft::ReactNative::Composition::IBrush brush) noexcept {
+    auto innerBrush = TTypeRedirects::CompositionContextHelper::InnerBrush(brush);
+    if (brush) {
+      _themeProperties.InsertVector4(
+          L"Foreground", ColorAsVector4(innerBrush.as<TTypeRedirects::CompositionColorBrush>().Color()));
+    } else {
+      _themeProperties.InsertVector4(L"Foreground", ColorAsVector4({0, 0, 0, 0}));
     }
   }
 
-  typename TTypeRedirects::ShapeVisual createLoadingCircle(typename TTypeRedirects::Compositor compositor, int delay) {
-    // Create circle
-    auto ellipse = compositor.CreateEllipseGeometry();
-    ellipse.Radius({m_ringWidth, m_ringWidth});
-    auto spriteShape = compositor.CreateSpriteShape();
-    spriteShape.Geometry(ellipse);
-    spriteShape.Offset(winrt::Windows::Foundation::Numerics::float2(m_centerX, m_centerY + m_radiusSmall));
-    auto spriteVisualBrush = compositor.CreateColorBrush(winrt::Windows::UI::Colors::LightGray());
-    spriteShape.FillBrush(spriteVisualBrush);
-    auto circleShape = compositor.CreateShapeVisual();
-    circleShape.Shapes().Append(spriteShape);
-    circleShape.Size({100.0f, 100.0f});
-    circleShape.Opacity(0.0f);
-    m_spriteVisuals.push_back(spriteShape);
-
-    // Create an OpacityAnimation
-    auto opacityAnimation = compositor.CreateScalarKeyFrameAnimation();
-    opacityAnimation.Duration(std::chrono::seconds(2));
-    opacityAnimation.IterationBehavior(TTypeRedirects::AnimationIterationBehavior::Forever);
-    opacityAnimation.DelayTime(std::chrono::milliseconds(650 + delay));
-
-    opacityAnimation.InsertKeyFrame(0.0f, 0.0f); // Initial opacity (fully transparent)
-    opacityAnimation.InsertKeyFrame(0.5f, 1.0f); // Intermediate opacity (fully opaque)
-    opacityAnimation.InsertKeyFrame(1.0f, 0.0f); // Intermediate opacity (fully opaque)
-    opacityAnimation.InsertKeyFrame(0.0f, 0.0f); // Final opacity (fully transparent)
-
-    // create an animation for the Offset property of the ShapeVisual
-    auto animation = compositor.CreateVector2KeyFrameAnimation();
-    animation.Duration(std::chrono::seconds(2));
-    animation.Direction(TTypeRedirects::AnimationDirection::Normal);
-    animation.IterationBehavior(TTypeRedirects::AnimationIterationBehavior::Forever);
-    animation.DelayTime(std::chrono::milliseconds(delay));
-    animation.DelayBehavior(TTypeRedirects::AnimationDelayBehavior::SetInitialValueAfterDelay);
-
-    // create path animation
-    float progress = 2.0f * static_cast<float>(M_PI); // specifies the end of the keyframe progress
-    for (float angle = 0.0f; angle < progress; angle += 0.1f) {
-      float x = m_centerX + m_radiusSmall * cos(angle);
-      float y = m_centerY + m_radiusSmall * sin(angle);
-      animation.InsertKeyFrame(
-          angle / (2.0f * static_cast<float>(M_PI)), winrt::Windows::Foundation::Numerics::float2(x, y));
-    }
-
-    // run animations
-    circleShape.StartAnimation(L"Opacity", opacityAnimation);
-    spriteShape.StartAnimation(L"Offset", animation);
-
-    return circleShape;
+  void Size(float radius) noexcept {
+    auto scale = radius / 40.0f;
+    _root.Scale({scale, scale, 1.0f});
   }
 
   typename TTypeRedirects::Visual InnerVisual() const noexcept {
@@ -895,8 +1333,8 @@ struct CompActivityVisual : winrt::implements<
   void InsertAt(const winrt::Microsoft::ReactNative::Composition::IVisual &visual, uint32_t index) noexcept {
     auto containerChildren = m_contentVisual.Children();
     auto compVisual = typename TTypeRedirects::CompositionContextHelper::InnerVisual(visual);
-    if (index == 0 || containerChildren.Count() == 0) {
-      containerChildren.InsertAtTop(compVisual);
+    if (index == 0) {
+      containerChildren.InsertAtBottom(compVisual);
       return;
     }
     auto insertAfter = containerChildren.First();
@@ -940,7 +1378,6 @@ struct CompActivityVisual : winrt::implements<
   }
 
   void Size(winrt::Windows::Foundation::Numerics::float2 const &size) noexcept {
-    m_visualSize = size;
     m_visual.Size(size);
   }
 
@@ -962,14 +1399,22 @@ struct CompActivityVisual : winrt::implements<
     m_visual.RelativeSizeAdjustment(relativeSizeAdjustment);
   }
 
-  winrt::Microsoft::ReactNative::Composition::BackfaceVisibility BackfaceVisibility() {
+  winrt::Microsoft::ReactNative::Composition::BackfaceVisibility BackfaceVisibility() const noexcept {
     return static_cast<winrt::Microsoft::ReactNative::Composition::BackfaceVisibility>(m_visual.BackfaceVisibility());
   }
 
-  void BackfaceVisibility(winrt::Microsoft::ReactNative::Composition::BackfaceVisibility value) {
+  void BackfaceVisibility(winrt::Microsoft::ReactNative::Composition::BackfaceVisibility value) noexcept {
     m_visual.BackfaceVisibility(static_cast<typename TTypeRedirects::CompositionBackfaceVisibility>(value));
   }
 
+  winrt::hstring Comment() const noexcept {
+    return m_visual.Comment();
+  }
+
+  void Comment(winrt::hstring value) noexcept {
+    m_visual.Comment(value);
+  }
+
   void SetClippingPath(ID2D1Geometry *clippingPath) noexcept {
     if (!clippingPath) {
       m_visual.Clip(nullptr);
@@ -982,18 +1427,13 @@ struct CompActivityVisual : winrt::implements<
     m_visual.Clip(clip);
   }
 
+  void AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass value) noexcept {
+    SetAnimationClass<TTypeRedirects>(value, m_visual);
+  }
+
  private:
-  winrt::Windows::Foundation::Numerics::float2 m_visualSize{0};
   typename TTypeRedirects::SpriteVisual m_visual{nullptr};
   typename TTypeRedirects::SpriteVisual m_contentVisual{nullptr};
-  std::vector<typename TTypeRedirects::CompositionSpriteShape> m_spriteVisuals;
-
-  // constants
-  float m_radiusSmall = 8.0f;
-  float m_radiusLarge = 16.0f;
-  float m_ringWidth = 2.0f;
-  float m_centerX = m_radiusSmall + m_ringWidth;
-  float m_centerY = m_radiusSmall + m_ringWidth;
 };
 using WindowsCompActivityVisual = CompActivityVisual<WindowsTypeRedirects>;
 #ifdef USE_WINUI3
@@ -1010,7 +1450,7 @@ struct CompCaretVisual
     m_visual = CreateVisual();
 
     // TODO should make the caret use an invert brush by default
-    m_compVisual.Brush(m_compositor.CreateColorBrush(winrt::Windows::UI::Colors::Black()));
+    m_compVisual.Brush(m_compositor.CreateColorBrush({255, 0, 0, 0} /* Black */));
     m_compVisual.Opacity(1.0f);
 
     // Blinking animation
@@ -1034,8 +1474,8 @@ struct CompCaretVisual
     return m_visual;
   }
 
-  void Color(winrt::Windows::UI::Color color) noexcept {
-    m_compVisual.Brush(m_compositor.CreateColorBrush(color));
+  void Brush(winrt::Microsoft::ReactNative::Composition::IBrush brush) noexcept {
+    m_compVisual.Brush(TTypeRedirects::CompositionContextHelper::InnerBrush(brush));
   }
 
   void Size(winrt::Windows::Foundation::Numerics::float2 size) noexcept {
@@ -1062,8 +1502,12 @@ struct CompCaretVisual
     }
   }
 
+  void AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass value) noexcept {
+    SetAnimationClass(value, m_compVisual);
+  }
+
  private:
-  bool m_isVisible{false};
+  bool m_isVisible{true};
   typename TTypeRedirects::SpriteVisual m_compVisual;
   winrt::Microsoft::ReactNative::Composition::IVisual m_visual;
   typename TTypeRedirects::ScalarKeyFrameAnimation m_opacityAnimation;
@@ -1084,87 +1528,6 @@ winrt::Microsoft::ReactNative::Composition::IVisual CompCaretVisual<MicrosoftTyp
 using MicrosoftCompCaretVisual = CompCaretVisual<MicrosoftTypeRedirects>;
 #endif
 
-// Switch Thumb animations
-template <typename TTypeRedirects>
-struct CompSwitchThumbVisual : winrt::implements<
-                                   CompSwitchThumbVisual<TTypeRedirects>,
-                                   winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual> {
-  CompSwitchThumbVisual(typename TTypeRedirects::Compositor const &compositor)
-      : m_compositor(compositor), m_compVisual(compositor.CreateSpriteVisual()) {
-    m_visual = CreateVisual();
-
-    // Create Thumb
-    m_geometry = m_compositor.CreateEllipseGeometry();
-    m_spiritShape = m_compositor.CreateSpriteShape();
-    m_spiritShape.Geometry(m_geometry);
-    auto circleShape = m_compositor.CreateShapeVisual();
-    circleShape.Shapes().Append(m_spiritShape);
-    circleShape.Size({150.0f, 150.0f});
-
-    m_compVisual.Children().InsertAtTop(circleShape);
-  }
-
-  winrt::Microsoft::ReactNative::Composition::IVisual CreateVisual() const noexcept;
-
-  winrt::Microsoft::ReactNative::Composition::IVisual InnerVisual() const noexcept {
-    return m_visual;
-  }
-
-  void Color(winrt::Windows::UI::Color color) noexcept {
-    m_spiritShape.FillBrush(m_compositor.CreateColorBrush(color));
-  }
-
-  void Size(winrt::Windows::Foundation::Numerics::float2 size) noexcept {
-    m_geometry.Radius(size);
-    m_spiritShape.Offset(size);
-    m_compVisual.Size(size);
-  }
-
-  void Position(winrt::Windows::Foundation::Numerics::float2 position) noexcept {
-    if (!isDrawn) {
-      // we don't want to animate if this is the first time the switch is drawn on screen
-      isDrawn = true;
-      m_compVisual.Offset({position.x, position.y, 0.0f});
-    } else {
-      auto animation = m_compositor.CreateVector3KeyFrameAnimation();
-      animation.Duration(std::chrono::milliseconds(250));
-      animation.Direction(TTypeRedirects::AnimationDirection::Normal);
-      animation.InsertKeyFrame(1.0f, {position.x, position.y, 0.0f});
-
-      m_compVisual.StartAnimation(L"Offset", animation);
-    }
-  }
-
-  bool IsVisible() const noexcept {
-    return m_isVisible;
-  }
-
-  void IsVisible(bool value) noexcept {}
-
- private:
-  bool m_isVisible{true};
-  bool isDrawn{false};
-  typename TTypeRedirects::SpriteVisual m_compVisual;
-  winrt::Microsoft::ReactNative::Composition::IVisual m_visual;
-  typename TTypeRedirects::Compositor m_compositor{nullptr};
-  typename TTypeRedirects::CompositionSpriteShape m_spiritShape{nullptr};
-  typename TTypeRedirects::CompositionEllipseGeometry m_geometry{nullptr};
-};
-
-winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual<WindowsTypeRedirects>::CreateVisual()
-    const noexcept {
-  return winrt::make<Composition::WindowsCompSpriteVisual>(m_compVisual);
-}
-using WindowsCompSwitchThumbVisual = CompSwitchThumbVisual<WindowsTypeRedirects>;
-
-#ifdef USE_WINUI3
-winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual<MicrosoftTypeRedirects>::CreateVisual()
-    const noexcept {
-  return winrt::make<Composition::MicrosoftCompSpriteVisual>(m_compVisual);
-}
-using MicrosoftCompSwitchThumbVisual = CompSwitchThumbVisual<MicrosoftTypeRedirects>;
-#endif
-
 template <typename TTypeRedirects>
 struct CompFocusVisual
     : winrt::implements<CompFocusVisual<TTypeRedirects>, winrt::Microsoft::ReactNative::Composition::IFocusVisual> {
@@ -1175,7 +1538,7 @@ struct CompFocusVisual
     m_compVisual.Opacity(1.0f);
     m_compVisual.RelativeSizeAdjustment({1, 1});
 
-    m_brush.Source(compositor.CreateColorBrush(winrt::Windows::UI::Colors::Black()));
+    m_brush.Source(compositor.CreateColorBrush({255, 0, 0, 0} /* Black */));
     m_brush.IsCenterHollow(true);
   }
 
@@ -1210,6 +1573,10 @@ struct CompFocusVisual
     m_brush.SetInsets(inset, inset, inset, inset);
   }
 
+  void AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass value) noexcept {
+    SetAnimationClass(value, m_compVisual);
+  }
+
  private:
   float m_scaleFactor{0};
   typename TTypeRedirects::CompositionNineGridBrush m_brush;
@@ -1308,6 +1675,8 @@ struct CompContext : winrt::implements<
 
   winrt::Microsoft::ReactNative::Composition::ISpriteVisual CreateSpriteVisual() noexcept;
 
+  winrt::Microsoft::ReactNative::Composition::IRoundedRectangleVisual CreateRoundedRectangleVisual() noexcept;
+
   winrt::Microsoft::ReactNative::Composition::IScrollVisual CreateScrollerVisual() noexcept;
 
   winrt::Microsoft::ReactNative::Composition::IActivityVisual CreateActivityVisual() noexcept;
@@ -1323,8 +1692,6 @@ struct CompContext : winrt::implements<
 
   winrt::Microsoft::ReactNative::Composition::ICaretVisual CreateCaretVisual() noexcept;
 
-  winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual CreateSwitchThumbVisual() noexcept;
-
   winrt::Microsoft::ReactNative::Composition::IFocusVisual CreateFocusVisual() noexcept;
 
   typename TTypeRedirects::CompositionGraphicsDevice CompositionGraphicsDevice() noexcept;
@@ -1352,6 +1719,11 @@ CompContext<WindowsTypeRedirects>::CreateScrollerVisual() noexcept {
   return winrt::make<Composition::WindowsCompScrollerVisual>(m_compositor.CreateSpriteVisual());
 }
 
+winrt::Microsoft::ReactNative::Composition::IRoundedRectangleVisual
+CompContext<WindowsTypeRedirects>::CreateRoundedRectangleVisual() noexcept {
+  return winrt::make<Composition::WindowsCompRoundedRectangleVisual>(m_compositor.CreateShapeVisual());
+}
+
 winrt::Microsoft::ReactNative::Composition::IActivityVisual
 CompContext<WindowsTypeRedirects>::CreateActivityVisual() noexcept {
   return winrt::make<Composition::WindowsCompActivityVisual>(m_compositor.CreateSpriteVisual());
@@ -1380,11 +1752,6 @@ CompContext<WindowsTypeRedirects>::CreateCaretVisual() noexcept {
   return winrt::make<Composition::WindowsCompCaretVisual>(m_compositor);
 }
 
-winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual
-CompContext<WindowsTypeRedirects>::CreateSwitchThumbVisual() noexcept {
-  return winrt::make<Composition::WindowsCompSwitchThumbVisual>(m_compositor);
-}
-
 winrt::Microsoft::ReactNative::Composition::IFocusVisual
 CompContext<WindowsTypeRedirects>::CreateFocusVisual() noexcept {
   return winrt::make<Composition::WindowsCompFocusVisual>(m_compositor);
@@ -1422,6 +1789,11 @@ CompContext<MicrosoftTypeRedirects>::CreateScrollerVisual() noexcept {
   return winrt::make<Composition::MicrosoftCompScrollerVisual>(m_compositor.CreateSpriteVisual());
 }
 
+winrt::Microsoft::ReactNative::Composition::IRoundedRectangleVisual
+CompContext<MicrosoftTypeRedirects>::CreateRoundedRectangleVisual() noexcept {
+  return winrt::make<Composition::MicrosoftCompRoundedRectangleVisual>(m_compositor.CreateShapeVisual());
+}
+
 winrt::Microsoft::ReactNative::Composition::IActivityVisual
 CompContext<MicrosoftTypeRedirects>::CreateActivityVisual() noexcept {
   return winrt::make<Composition::MicrosoftCompActivityVisual>(m_compositor.CreateSpriteVisual());
@@ -1455,11 +1827,6 @@ CompContext<MicrosoftTypeRedirects>::CreateCaretVisual() noexcept {
   return winrt::make<Composition::MicrosoftCompCaretVisual>(m_compositor);
 }
 
-winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual
-CompContext<MicrosoftTypeRedirects>::CreateSwitchThumbVisual() noexcept {
-  return winrt::make<Composition::MicrosoftCompSwitchThumbVisual>(m_compositor);
-}
-
 winrt::Microsoft::ReactNative::Composition::IFocusVisual
 CompContext<MicrosoftTypeRedirects>::CreateFocusVisual() noexcept {
   return winrt::make<Composition::MicrosoftCompFocusVisual>(m_compositor);
@@ -1482,44 +1849,44 @@ using MicrosoftCompContext = CompContext<MicrosoftTypeRedirects>;
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-ICompositionContext WindowsCompositionContextHelper::CreateContext(
+ICompositionContext SystemCompositionContextHelper::CreateContext(
     winrt::Windows::UI::Composition::Compositor const &compositor) noexcept {
   return winrt::make<::Microsoft::ReactNative::Composition::WindowsCompContext>(compositor);
 }
 
-IVisual WindowsCompositionContextHelper::CreateVisual(winrt::Windows::UI::Composition::Visual const &visual) noexcept {
+IVisual SystemCompositionContextHelper::CreateVisual(winrt::Windows::UI::Composition::Visual const &visual) noexcept {
   if (auto spriteVisual = visual.try_as<winrt::Windows::UI::Composition::SpriteVisual>())
     return winrt::make<::Microsoft::ReactNative::Composition::WindowsCompSpriteVisual>(spriteVisual);
   return winrt::make<::Microsoft::ReactNative::Composition::WindowsCompVisual>(visual);
 }
 
-winrt::Windows::UI::Composition::Compositor WindowsCompositionContextHelper::InnerCompositor(
+winrt::Windows::UI::Composition::Compositor SystemCompositionContextHelper::InnerCompositor(
     ICompositionContext context) noexcept {
   winrt::com_ptr<::Microsoft::ReactNative::Composition::IWindowsCompositionCompositor> s;
   context.try_as(s);
   return s ? s->InnerCompositor() : nullptr;
 }
 
-winrt::Windows::UI::Composition::Visual WindowsCompositionContextHelper::InnerVisual(IVisual visual) noexcept {
+winrt::Windows::UI::Composition::Visual SystemCompositionContextHelper::InnerVisual(IVisual visual) noexcept {
   winrt::com_ptr<::Microsoft::ReactNative::Composition::IWindowsCompositionVisual> s;
   visual.try_as(s);
   return s ? s->InnerVisual() : nullptr;
 }
 
-winrt::Windows::UI::Composition::DropShadow WindowsCompositionContextHelper::InnerDropShadow(
+winrt::Windows::UI::Composition::DropShadow SystemCompositionContextHelper::InnerDropShadow(
     IDropShadow shadow) noexcept {
   winrt::com_ptr<::Microsoft::ReactNative::Composition::IWindowsCompositionDropShadow> s;
   shadow.try_as(s);
   return s ? s->InnerShadow() : nullptr;
 }
 
-winrt::Windows::UI::Composition::CompositionBrush WindowsCompositionContextHelper::InnerBrush(IBrush brush) noexcept {
+winrt::Windows::UI::Composition::CompositionBrush SystemCompositionContextHelper::InnerBrush(IBrush brush) noexcept {
   winrt::com_ptr<::Microsoft::ReactNative::Composition::IWindowsCompositionBrush> s;
   brush.try_as(s);
   return s ? s->InnerBrush() : nullptr;
 }
 
-winrt::Windows::UI::Composition::ICompositionSurface WindowsCompositionContextHelper::InnerSurface(
+winrt::Windows::UI::Composition::ICompositionSurface SystemCompositionContextHelper::InnerSurface(
     IDrawingSurfaceBrush surface) noexcept {
   winrt::com_ptr<::Microsoft::ReactNative::Composition::IWindowsCompositionDrawingSurfaceInner> s;
   surface.try_as(s);