react-native-windows 0.74.0-preview.3 → 0.74.0

package/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h

@@ -27,16 +27,18 @@ struct CreateCompositionComponentViewArgs
   CreateCompositionComponentViewArgs(
       const winrt::Microsoft::ReactNative::IReactContext &reactContext,
       facebook::react::Tag tag,
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compositionContext);
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compositionContext);
 
-  winrt::Microsoft::ReactNative::Composition::ICompositionContext CompositionContext() const noexcept;
+  winrt::Microsoft::UI::Composition::Compositor Compositor() const noexcept;
+
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext CompositionContext() const noexcept;
 
   ComponentViewFeatures Features() const noexcept;
   void Features(ComponentViewFeatures value) noexcept;
 
  private:
   ComponentViewFeatures m_features{ComponentViewFeatures::Default};
-  winrt::Microsoft::ReactNative::Composition::ICompositionContext m_compositionContext;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compositionContext;
 };
 
 struct ComponentView
@@ -45,17 +47,17 @@ struct ComponentView
 
   ComponentView(winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs const &args);
   ComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext,
       ComponentViewFeatures flags,
       bool customControl);
 
-  virtual winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept {
+  virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept {
     return nullptr;
   };
   // Visual that should be parented to this ComponentView's parent
-  virtual winrt::Microsoft::ReactNative::Composition::IVisual OuterVisual() const noexcept;
+  virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual OuterVisual() const noexcept;
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
   const facebook::react::SharedViewEventEmitter &GetEventEmitter() const noexcept;
   void HandleCommand(winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept
@@ -94,7 +96,7 @@ struct ComponentView
   void updateTransformProps(
       const facebook::react::ViewProps &oldViewProps,
       const facebook::react::ViewProps &newViewProps,
-      winrt::Microsoft::ReactNative::Composition::IVisual m_visual) noexcept;
+      winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_visual) noexcept;
   void updateAccessibilityProps(
       const facebook::react::ViewProps &oldView,
       const facebook::react::ViewProps &newViewProps) noexcept;
@@ -116,7 +118,8 @@ struct ComponentView
   virtual std::string DefaultAccessibleName() const noexcept;
   virtual std::string DefaultHelpText() const noexcept;
 
-  winrt::Microsoft::ReactNative::Composition::ICompositionContext CompositionContext() const noexcept;
+  winrt::Microsoft::UI::Composition::Compositor Compositor() const noexcept;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext CompositionContext() const noexcept;
 
   // Publicaly overridable APIs
   void FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept override;
@@ -129,7 +132,7 @@ struct ComponentView
       facebook::react::Point &localPt) const noexcept;
 
   winrt::IInspectable m_uiaProvider{nullptr};
-  winrt::Microsoft::ReactNative::Composition::ICompositionContext m_compContext;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext;
   comp::CompositionPropertySet m_centerPropSet{nullptr};
   facebook::react::SharedViewEventEmitter m_eventEmitter;
   facebook::react::LayoutMetrics m_layoutMetrics;
@@ -150,23 +153,24 @@ struct ComponentView
       const facebook::react::ViewProps &viewProps) noexcept;
   bool TryUpdateSpecialBorderLayers(
       winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme,
-      std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount> &spBorderVisuals,
+      std::array<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual, SpecialBorderLayerCount>
+          &spBorderVisuals,
       facebook::react::LayoutMetrics const &layoutMetrics,
       const facebook::react::ViewProps &viewProps) noexcept;
-  std::array<winrt::Microsoft::ReactNative::Composition::ISpriteVisual, SpecialBorderLayerCount>
+  std::array<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual, SpecialBorderLayerCount>
   FindSpecialBorderLayers() const noexcept;
   void UpdateCenterPropertySet() noexcept;
 
   ComponentViewFeatures m_flags;
   void showFocusVisual(bool show) noexcept;
-  winrt::Microsoft::ReactNative::Composition::IFocusVisual m_focusVisual{nullptr};
-  winrt::Microsoft::ReactNative::Composition::IVisual m_outerVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IFocusVisual m_focusVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_outerVisual{nullptr};
 };
 
 struct ViewComponentView : public ViewComponentViewT<ViewComponentView, ComponentView> {
   ViewComponentView(winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs const &args);
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
@@ -200,23 +204,25 @@ struct ViewComponentView : public ViewComponentViewT<ViewComponentView, Componen
       bool ignorePointerEvents = false) const noexcept override;
   const winrt::Microsoft::ReactNative::IComponentProps userProps(
       facebook::react::Props::Shared const &props) noexcept override;
-  winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
   void ensureVisual() noexcept;
 
   ViewComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext,
       ComponentViewFeatures flags,
       bool customComponent);
 
-  // Publicaly overridable APIs
-  virtual winrt::Microsoft::ReactNative::Composition::IVisual CreateVisual() noexcept;
+  virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual createVisual() noexcept;
+
+  // Publicly overridable APIs
+  virtual winrt::Microsoft::UI::Composition::Visual CreateVisual() noexcept;
   virtual void UpdateLayoutMetrics(const LayoutMetrics &metrics, const LayoutMetrics &oldMetrics) noexcept;
 
  private:
   facebook::react::SharedViewProps m_props;
-  winrt::Microsoft::ReactNative::Composition::IVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_visual{nullptr};
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -11,7 +11,7 @@
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 DebuggingOverlayComponentView::DebuggingOverlayComponentView(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : base_type(
@@ -38,7 +38,7 @@ void DebuggingOverlayComponentView::UnmountChildComponentView(
 }
 
 winrt::Microsoft::ReactNative::ComponentView DebuggingOverlayComponentView::Create(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   return winrt::make<DebuggingOverlayComponentView>(compContext, tag, reactContext);

package/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.h

@@ -13,7 +13,7 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation {
 struct DebuggingOverlayComponentView
     : DebuggingOverlayComponentViewT<DebuggingOverlayComponentView, ViewComponentView> {
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
@@ -25,7 +25,7 @@ struct DebuggingOverlayComponentView
       uint32_t index) noexcept override;
 
   DebuggingOverlayComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 

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

@@ -49,7 +49,7 @@ void ImageComponentView::WindowsImageResponseObserver::didReceiveFailure() const
 }
 
 ImageComponentView::ImageComponentView(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : Super(
@@ -225,7 +225,8 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
     const auto frame{m_layoutMetrics.getContentFrame().size};
 
     if (imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat) {
-      drawingSurfaceSize = {frame.width, frame.height};
+      drawingSurfaceSize = {
+          frame.width * m_layoutMetrics.pointScaleFactor, frame.height * m_layoutMetrics.pointScaleFactor};
     } else if (imageProps->blurRadius > 0) {
       // https://learn.microsoft.com/en-us/windows/win32/direct2d/gaussian-blur#output-bitmap
       // The following equation that can be used to compute the output bitmap:
@@ -244,13 +245,14 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
 
     switch (imageProps->resizeMode) {
       case facebook::react::ImageResizeMode::Stretch:
-        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::Fill);
+        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::Fill);
         break;
       case facebook::react::ImageResizeMode::Cover:
-        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::UniformToFill);
+        m_drawingSurface.Stretch(
+            winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::UniformToFill);
         break;
       case facebook::react::ImageResizeMode::Contain:
-        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::Uniform);
+        m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::Uniform);
         break;
       case facebook::react::ImageResizeMode::Repeat:
         // TODO - set AlignmentRatio back to 0.5f when switching between resizeModes once we no longer recreate the
@@ -262,8 +264,8 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
       case facebook::react::ImageResizeMode::Center: {
         m_drawingSurface.Stretch(
             (height < frame.height && width < frame.width)
-                ? winrt::Microsoft::ReactNative::Composition::CompositionStretch::None
-                : winrt::Microsoft::ReactNative::Composition::CompositionStretch::Uniform);
+                ? winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None
+                : winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::Uniform);
         break;
       }
       default:
@@ -290,7 +292,7 @@ void ImageComponentView::DrawImage() noexcept {
 
   assert(m_reactContext.UIDispatcher().HasThreadAccess());
 
-  ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(m_drawingSurface, &offset);
+  ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(m_drawingSurface, 1.0f, &offset);
   if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
     winrt::com_ptr<ID2D1Bitmap1> bitmap;
     winrt::check_hresult(d2dDeviceContext->CreateBitmapFromWicBitmap(m_wicbmp.get(), nullptr, bitmap.put()));
@@ -361,20 +363,12 @@ void ImageComponentView::DrawImage() noexcept {
       winrt::check_hresult(m_wicbmp->GetSize(&width, &height));
 
       D2D1_RECT_F rect = D2D1::RectF(
-          static_cast<float>(offset.x / m_layoutMetrics.pointScaleFactor),
-          static_cast<float>(offset.y / m_layoutMetrics.pointScaleFactor),
-          static_cast<float>((offset.x + width) / m_layoutMetrics.pointScaleFactor),
-          static_cast<float>((offset.y + height) / m_layoutMetrics.pointScaleFactor));
-
-      const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
-      float oldDpiX, oldDpiY;
-      d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
-      d2dDeviceContext->SetDpi(dpi, dpi);
+          static_cast<float>(offset.x),
+          static_cast<float>(offset.y),
+          static_cast<float>(offset.x + width),
+          static_cast<float>(offset.y + height));
 
       d2dDeviceContext->DrawBitmap(bitmap.get(), rect);
-
-      // Restore old dpi setting
-      d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
     }
   }
 }
@@ -416,7 +410,7 @@ void ImageComponentView::ensureVisual() noexcept {
   }
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual ImageComponentView::Visual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ImageComponentView::Visual() const noexcept {
   return m_visual;
 }
 
@@ -429,7 +423,7 @@ std::string ImageComponentView::DefaultControlType() const noexcept {
 }
 
 winrt::Microsoft::ReactNative::ComponentView ImageComponentView::Create(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   return winrt::make<ImageComponentView>(compContext, tag, reactContext);

package/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h

@@ -32,7 +32,7 @@ struct ImageComponentView : ImageComponentViewT<ImageComponentView, ComponentVie
   using Super = ImageComponentViewT<ImageComponentView, ComponentView>;
 
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
@@ -56,12 +56,12 @@ struct ImageComponentView : ImageComponentViewT<ImageComponentView, ComponentVie
 
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
       const noexcept override;
-  winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
   bool focusable() const noexcept override;
   virtual std::string DefaultControlType() const noexcept;
 
   ImageComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
@@ -91,8 +91,8 @@ struct ImageComponentView : ImageComponentViewT<ImageComponentView, ComponentVie
 
   std::shared_ptr<const facebook::react::ImageProps> m_props;
 
-  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
-  winrt::Microsoft::ReactNative::Composition::IDrawingSurfaceBrush m_drawingSurface;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IDrawingSurfaceBrush m_drawingSurface;
   winrt::com_ptr<IWICBitmap> m_wicbmp;
   std::shared_ptr<WindowsImageResponseObserver> m_imageResponseObserver;
   facebook::react::ImageShadowNode::ConcreteState::Shared m_state;

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp

@@ -19,7 +19,7 @@
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 WindowsModalHostComponentView::WindowsModalHostComponentView(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : Super(
@@ -34,7 +34,7 @@ WindowsModalHostComponentView::WindowsModalHostComponentView(
 }
 
 winrt::Microsoft::ReactNative::ComponentView WindowsModalHostComponentView::Create(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   return winrt::make<WindowsModalHostComponentView>(compContext, tag, reactContext);
@@ -240,7 +240,7 @@ void WindowsModalHostComponentView::updateLayoutMetrics(
 
     drawingSurface.HorizontalAlignmentRatio(0.f);
     drawingSurface.VerticalAlignmentRatio(0.f);
-    drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::None);
+    drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None);
     m_visual.Brush(drawingSurface);
     m_visual.Size(surfaceSize);
     m_visual.Offset({
@@ -251,14 +251,11 @@ void WindowsModalHostComponentView::updateLayoutMetrics(
 
     POINT offset;
     {
-      ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(drawingSurface, &offset);
+      ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(
+          drawingSurface, m_layoutMetrics.pointScaleFactor, &offset);
       if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
         d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Blue, 0.3f));
         assert(d2dDeviceContext->GetUnitMode() == D2D1_UNIT_MODE_DIPS);
-        const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
-        float oldDpiX, oldDpiY;
-        d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
-        d2dDeviceContext->SetDpi(dpi, dpi);
 
         float offsetX = static_cast<float>(offset.x / m_layoutMetrics.pointScaleFactor);
         float offsetY = static_cast<float>(offset.y / m_layoutMetrics.pointScaleFactor);
@@ -307,11 +304,13 @@ facebook::react::SharedViewProps WindowsModalHostComponentView::viewProps() noex
   return m_props;
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual WindowsModalHostComponentView::Visual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual WindowsModalHostComponentView::Visual()
+    const noexcept {
   return m_visual;
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual WindowsModalHostComponentView::OuterVisual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual WindowsModalHostComponentView::OuterVisual()
+    const noexcept {
   return m_visual;
 }
 

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h

@@ -17,7 +17,7 @@ struct WindowsModalHostComponentView : WindowsModalHostComponentViewT<WindowsMod
   using Super = WindowsModalHostComponentViewT<WindowsModalHostComponentView, ComponentView>;
 
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
@@ -42,12 +42,12 @@ struct WindowsModalHostComponentView : WindowsModalHostComponentViewT<WindowsMod
   bool focusable() const noexcept override;
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
       const noexcept override;
-  winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
-  winrt::Microsoft::ReactNative::Composition::IVisual OuterVisual() const noexcept override;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual OuterVisual() const noexcept override;
   virtual std::string DefaultControlType() const noexcept;
 
   WindowsModalHostComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
@@ -59,7 +59,7 @@ struct WindowsModalHostComponentView : WindowsModalHostComponentViewT<WindowsMod
 
  private:
   std::shared_ptr<facebook::react::ModalHostViewProps const> m_props;
-  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr};
   HWND m_hwnd{nullptr};
   winrt::Microsoft::ReactNative::ReactContext m_context;
 };

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

@@ -19,7 +19,7 @@
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 ParagraphComponentView::ParagraphComponentView(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : Super(
@@ -285,7 +285,7 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
     if (m_drawingSurface) {
       m_drawingSurface.HorizontalAlignmentRatio(horizAlignment);
       m_drawingSurface.VerticalAlignmentRatio(0.f);
-      m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::None);
+      m_drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None);
     }
     m_visual.Brush(m_drawingSurface);
   }
@@ -312,7 +312,8 @@ void ParagraphComponentView::DrawText() noexcept {
 
   POINT offset;
   {
-    ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(m_drawingSurface, &offset);
+    ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(
+        m_drawingSurface, m_layoutMetrics.pointScaleFactor, &offset);
     if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
       d2dDeviceContext->Clear(
           m_props->backgroundColor ? theme()->D2DColor(*m_props->backgroundColor)
@@ -346,12 +347,12 @@ std::string ParagraphComponentView::DefaultAccessibleName() const noexcept {
   return m_attributedStringBox.getValue().getString();
 }
 
-winrt::Microsoft::ReactNative::Composition::IVisual ParagraphComponentView::Visual() const noexcept {
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ParagraphComponentView::Visual() const noexcept {
   return m_visual;
 }
 
 winrt::Microsoft::ReactNative::ComponentView ParagraphComponentView::Create(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   return winrt::make<ParagraphComponentView>(compContext, tag, reactContext);

package/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.h

@@ -21,7 +21,7 @@ struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView,
   using Super = ParagraphComponentViewT<ParagraphComponentView, ComponentView>;
 
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
@@ -48,12 +48,12 @@ struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView,
   void onThemeChanged() noexcept override;
   facebook::react::SharedViewEventEmitter eventEmitterAtPoint(facebook::react::Point pt) noexcept override;
 
-  winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept override;
   virtual std::string DefaultControlType() const noexcept override;
   virtual std::string DefaultAccessibleName() const noexcept override;
 
   ParagraphComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);
 
@@ -64,13 +64,13 @@ struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView,
   void updateTextAlignment(const std::optional<facebook::react::TextAlignment> &fbAlignment) noexcept;
 
   std::shared_ptr<facebook::react::ParagraphProps const> m_props;
-  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_visual{nullptr};
   winrt::com_ptr<::IDWriteTextLayout> m_textLayout;
   facebook::react::AttributedStringBox m_attributedStringBox;
   facebook::react::ParagraphAttributes m_paragraphAttributes;
 
   bool m_requireRedraw{true};
-  winrt::Microsoft::ReactNative::Composition::IDrawingSurfaceBrush m_drawingSurface;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IDrawingSurfaceBrush m_drawingSurface;
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -96,7 +96,7 @@ void ReactCompositionViewComponentBuilder::SetLayoutHandler(
 winrt::Microsoft::ReactNative::ComponentView ReactCompositionViewComponentBuilder::CreateView(
     const IReactContext &reactContext,
     int32_t tag,
-    const ICompositionContext &context) noexcept {
+    const Experimental::ICompositionContext &context) noexcept {
   if (m_createView) {
     auto args = winrt::make<implementation::CreateCompositionComponentViewArgs>(reactContext, tag, context);
     return m_createView(args);

package/Microsoft.ReactNative/Fabric/Composition/ReactCompositionViewComponentBuilder.h

@@ -3,6 +3,7 @@
 // Licensed under the MIT License.
 
 #include <react/renderer/core/ReactPrimitives.h>
+#include "winrt/Microsoft.ReactNative.Composition.Experimental.h"
 #include "winrt/Microsoft.ReactNative.Composition.h"
 #include "winrt/Microsoft.ReactNative.h"
 
@@ -40,8 +41,10 @@ struct ReactCompositionViewComponentBuilder : winrt::implements<
   LayoutHandler LayoutHandler() const noexcept;
   bool IsViewComponent() const noexcept;
 
-  winrt::Microsoft::ReactNative::ComponentView
-  CreateView(const IReactContext &reactContext, facebook::react::Tag tag, const ICompositionContext &context) noexcept;
+  winrt::Microsoft::ReactNative::ComponentView CreateView(
+      const IReactContext &reactContext,
+      facebook::react::Tag tag,
+      const Experimental::ICompositionContext &context) noexcept;
 
  private:
   ViewPropsFactory m_propsFactory;

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

@@ -14,7 +14,7 @@
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 RootComponentView::RootComponentView(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext)
     : base_type(
@@ -34,7 +34,7 @@ RootComponentView::~RootComponentView() {
 }
 
 winrt::Microsoft::ReactNative::ComponentView RootComponentView::Create(
-    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   return winrt::make<RootComponentView>(compContext, tag, reactContext);
@@ -55,8 +55,12 @@ void RootComponentView::SetFocusedComponent(const winrt::Microsoft::ReactNative:
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_focusedComponent)->onFocusLost();
   }
 
-  if (value)
+  if (value) {
+    if (auto rootView = m_wkRootView.get()) {
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::CompositionRootView>(rootView)->TrySetFocus();
+    }
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(value)->onFocusGained();
+  }
 
   m_focusedComponent = value;
 }

package/Microsoft.ReactNative/Fabric/Composition/RootComponentView.h

@@ -21,7 +21,7 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
   using Super = RootComponentViewT<RootComponentView, ViewComponentView>;
 
   [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
@@ -45,7 +45,7 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
   winrt::IInspectable UiaProviderFromPoint(const POINT &ptPixels) noexcept;
 
   RootComponentView(
-      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext);