react-native-windows 0.84.0 → 0.85.0-preview.1

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

@@ -38,9 +38,11 @@ constexpr float FOCUS_VISUAL_RADIUS = 3.0f;
 
 // m_outerVisual
 //   |
-//   ----- m_visual <-- Background / clip - Can be a custom visual depending on Component type
+//   ----- m_visual - Can be a custom visual depending on Component type
 //            |
-//            ----- Border Visuals x N (BorderPrimitive attached to m_visual)
+//            ----- m_backgroundVisual <-- Background / clip  (ComponentViewFeatures::Background)
+//            ----- Border Visuals x N (BorderPrimitive attached to m_visual) (ComponentViewFeatures::NativeBorder)
+//            ----- Outline Visuals x N(BorderPrimitive) (ComponentViewFeatures::NativeBorder)
 //            ----- <children> (default: directly in m_visual after border visuals)
 //            ----- m_childrenContainer (created on demand when overflow:hidden, children moved here)
 //   ------Focus Visual Container (created when hosting focus visuals)
@@ -79,18 +81,16 @@ facebook::react::Props::Shared ComponentView::props() noexcept {
 }
 
 void ComponentView::onThemeChanged() noexcept {
-  if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) {
-    if (viewProps()->backgroundColor) {
-      Visual().as<Experimental::ISpriteVisual>().Brush(theme()->Brush(*viewProps()->backgroundColor));
-    } else {
-      Visual().as<Experimental::ISpriteVisual>().Brush(nullptr);
-    }
-  }
+  if (m_backgroundVisual)
+    m_backgroundVisual.Brush(theme()->Brush(*viewProps()->backgroundColor));
 
   if (m_borderPrimitive) {
     m_borderPrimitive->onThemeChanged(
         m_layoutMetrics, BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, *viewProps()));
   }
+  if (m_outlinePrimitive) {
+    m_outlinePrimitive->onThemeChanged(outlineLayoutMetrics(), outlineBorderMetrics());
+  }
   if (m_componentHostingFocusVisual) {
     if (m_componentHostingFocusVisual->m_focusPrimitive->m_focusInnerPrimitive) {
       auto innerFocusMetrics = focusLayoutMetrics(true /*inner*/);
@@ -154,10 +154,18 @@ void ComponentView::updateProps(
 
   if ((m_flags & ComponentViewFeatures::Background) == ComponentViewFeatures::Background) {
     if (oldViewProps.backgroundColor != newViewProps.backgroundColor) {
-      if (newViewProps.backgroundColor) {
-        Visual().as<Experimental::ISpriteVisual>().Brush(theme()->Brush(*newViewProps.backgroundColor));
+      if (facebook::react::isColorMeaningful(newViewProps.backgroundColor)) {
+        if (!m_backgroundVisual) {
+          m_backgroundVisual = m_compContext.CreateSpriteVisual();
+          m_backgroundVisual.RelativeSizeWithOffset({0, 0}, {1.0f, 1.0f});
+          Visual().InsertAt(m_backgroundVisual, 0);
+        }
+        m_backgroundVisual.Brush(theme()->Brush(*newViewProps.backgroundColor));
+        updateClippingPath(m_layoutMetrics, *viewProps());
       } else {
-        Visual().as<Experimental::ISpriteVisual>().Brush(nullptr);
+        if (m_backgroundVisual) {
+          m_backgroundVisual.Brush(nullptr);
+        }
       }
     }
   }
@@ -166,6 +174,16 @@ void ComponentView::updateProps(
     m_borderPrimitive->updateProps(oldViewProps, newViewProps);
   }
 
+  if (m_outlinePrimitive) {
+    if (oldViewProps.outlineOffset != newViewProps.outlineOffset ||
+        oldViewProps.outlineWidth != newViewProps.outlineWidth ||
+        oldViewProps.borderRadii != newViewProps.borderRadii ||
+        oldViewProps.outlineColor != newViewProps.outlineColor ||
+        oldViewProps.outlineStyle != newViewProps.outlineStyle) {
+      m_outlinePrimitive->markNeedsUpdate();
+    }
+  }
+
   if (m_componentHostingFocusVisual) {
     if (!newViewProps.enableFocusRing) {
       m_componentHostingFocusVisual->hostFocusVisual(false, get_strong());
@@ -200,8 +218,9 @@ void ComponentView::updateProps(
 void ComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+  updateClippingPath(layoutMetrics, *viewProps());
+
   if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) {
-    updateClippingPath(layoutMetrics, *viewProps());
     OuterVisual().Size(
         {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
          layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
@@ -218,6 +237,9 @@ void ComponentView::updateLayoutMetrics(
     if (m_borderPrimitive) {
       m_borderPrimitive->markNeedsUpdate();
     }
+    if (m_outlinePrimitive) {
+      m_outlinePrimitive->markNeedsUpdate();
+    }
 
     if (m_componentHostingFocusVisual) {
       m_componentHostingFocusVisual->updateFocusLayoutMetrics();
@@ -301,6 +323,23 @@ void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentView
     if (m_borderPrimitive) {
       m_borderPrimitive->finalize(m_layoutMetrics, borderMetrics);
     }
+
+    auto outlineMetrics = outlineBorderMetrics();
+    if (!m_outlinePrimitive && BorderPrimitive::requiresBorder(outlineMetrics, theme())) {
+      m_outlinePrimitive = std::make_shared<BorderPrimitive>(*this);
+      Visual().InsertAt(
+          m_outlinePrimitive->RootVisual(),
+          (m_backgroundVisual ? 1 : 0) + (m_borderPrimitive ? m_borderPrimitive->numberOfVisuals() : 0));
+    }
+
+    if (m_outlinePrimitive) {
+      auto offset = pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) +
+          std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor);
+      m_outlinePrimitive->RootVisual().Offset({-offset, -offset, 0.0f});
+      m_outlinePrimitive->RootVisual().RelativeSizeWithOffset({offset * 2, offset * 2}, {1.0f, 1.0f});
+
+      m_outlinePrimitive->finalize(outlineLayoutMetrics(), outlineMetrics);
+    }
   }
 
   if (m_componentHostingFocusVisual) {
@@ -581,6 +620,67 @@ facebook::react::LayoutMetrics ComponentView::focusLayoutMetrics(bool inner) con
   return layoutMetrics;
 }
 
+facebook::react::LayoutMetrics ComponentView::outlineLayoutMetrics() const noexcept {
+  auto &props = *viewProps();
+  auto offset = (pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) +
+                 std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor)) /
+      m_layoutMetrics.pointScaleFactor;
+  facebook::react::LayoutMetrics layoutMetrics = m_layoutMetrics;
+  layoutMetrics.frame.origin.x -= offset;
+  layoutMetrics.frame.origin.y -= offset;
+  layoutMetrics.frame.size.height += offset * 2;
+  layoutMetrics.frame.size.width += offset * 2;
+  return layoutMetrics;
+}
+
+facebook::react::BorderMetrics ComponentView::outlineBorderMetrics() const noexcept {
+  auto &props = *viewProps();
+
+  facebook::react::BorderMetrics metrics = BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, props);
+  metrics.borderColors.bottom = metrics.borderColors.left = metrics.borderColors.right = metrics.borderColors.top =
+      props.outlineColor;
+
+  auto offset = pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor) +
+      std::round(viewProps()->outlineOffset * m_layoutMetrics.pointScaleFactor);
+
+  if (metrics.borderRadii.bottomLeft.horizontal)
+    metrics.borderRadii.bottomLeft.horizontal = std::max(0.0f, metrics.borderRadii.bottomLeft.horizontal + offset);
+  if (metrics.borderRadii.bottomLeft.vertical)
+    metrics.borderRadii.bottomLeft.vertical = std::max(0.0f, metrics.borderRadii.bottomLeft.vertical + offset);
+  if (metrics.borderRadii.bottomRight.horizontal)
+    metrics.borderRadii.bottomRight.horizontal = std::max(0.0f, metrics.borderRadii.bottomRight.horizontal + offset);
+  if (metrics.borderRadii.bottomRight.vertical)
+    metrics.borderRadii.bottomRight.vertical = std::max(0.0f, metrics.borderRadii.bottomRight.vertical + offset);
+  if (metrics.borderRadii.topLeft.horizontal)
+    metrics.borderRadii.topLeft.horizontal = std::max(0.0f, metrics.borderRadii.topLeft.horizontal + offset);
+  if (metrics.borderRadii.topLeft.vertical)
+    metrics.borderRadii.topLeft.vertical = std::max(0.0f, metrics.borderRadii.topLeft.vertical + offset);
+  if (metrics.borderRadii.topRight.horizontal)
+    metrics.borderRadii.topRight.horizontal = std::max(0.0f, metrics.borderRadii.topRight.horizontal + offset);
+  if (metrics.borderRadii.topRight.vertical)
+    metrics.borderRadii.topRight.vertical = std::max(0.0f, metrics.borderRadii.topRight.vertical + offset);
+
+  static_assert(
+      facebook::react::BorderStyle::Solid ==
+      static_cast<facebook::react::BorderStyle>(facebook::react::OutlineStyle::Solid));
+  static_assert(
+      facebook::react::BorderStyle::Dotted ==
+      static_cast<facebook::react::BorderStyle>(facebook::react::OutlineStyle::Dotted));
+  static_assert(
+      facebook::react::BorderStyle::Dashed ==
+      static_cast<facebook::react::BorderStyle>(facebook::react::OutlineStyle::Dashed));
+  assert(
+      props.outlineStyle == facebook::react::OutlineStyle::Solid ||
+      props.outlineStyle == facebook::react::OutlineStyle::Dotted ||
+      props.outlineStyle == facebook::react::OutlineStyle::Dashed);
+  metrics.borderStyles.bottom = metrics.borderStyles.left = metrics.borderStyles.right = metrics.borderStyles.top =
+      static_cast<facebook::react::BorderStyle>(props.outlineStyle);
+
+  metrics.borderWidths.bottom = metrics.borderWidths.left = metrics.borderWidths.right = metrics.borderWidths.top =
+      pixelRoundAndScaleBorderWidth(viewProps()->outlineWidth, m_layoutMetrics.pointScaleFactor);
+  return metrics;
+}
+
 facebook::react::BorderMetrics ComponentView::focusBorderMetrics(
     bool inner,
     const facebook::react::LayoutMetrics &layoutMetrics) const noexcept {
@@ -654,7 +754,7 @@ void ComponentView::hostFocusVisual(bool show, winrt::com_ptr<ComponentView> vie
           assert(
               view.get() ==
               this); // When not using lifted comp, focus visuals should always host within their own component
-          OuterVisual().InsertAt(m_focusPrimitive->m_focusVisual, 1);
+          OuterVisual().InsertAt(m_focusPrimitive->m_focusVisual, (m_backgroundVisual ? 2 : 1));
         }
       }
 
@@ -898,9 +998,23 @@ void ComponentView::Toggle() noexcept {
   // no-op
 }
 
+// This offset ensures that the m_borderPrimitive inserts its layers above the background
+int32_t ComponentView::borderInsertAtIndex() const noexcept {
+  return m_backgroundVisual ? 1 : 0;
+}
+
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ComponentView::VisualToApplyBackgroundClipTo()
+    const noexcept {
+  return m_backgroundVisual;
+}
+
 void ComponentView::updateClippingPath(
     facebook::react::LayoutMetrics const &layoutMetrics,
     const facebook::react::ViewProps &viewProps) noexcept {
+  auto clipTarget = VisualToApplyBackgroundClipTo();
+  if (!clipTarget)
+    return;
+
   auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
 
   bool hasRoundedCorners = borderMetrics.borderRadii.topLeft.horizontal != 0 ||
@@ -919,10 +1033,10 @@ void ComponentView::updateClippingPath(
     winrt::com_ptr<ID2D1PathGeometry> pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry(
         m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight});
 
-    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+    clipTarget.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
         pathGeometry.get());
   } else {
-    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
+    clipTarget.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
   }
 }
 
@@ -934,6 +1048,9 @@ void ComponentView::indexOffsetForBorder(uint32_t &index) const noexcept {
   if (m_borderPrimitive) {
     index += m_borderPrimitive->numberOfVisuals();
   }
+  if (m_outlinePrimitive) {
+    index += 1;
+  }
 }
 
 void ComponentView::OnRenderingDeviceLost() noexcept {}
@@ -1084,7 +1201,7 @@ void ViewComponentView::ensureVisual() noexcept {
     } else {
       m_visual = createVisual();
     }
-    OuterVisual().InsertAt(m_visual, 0);
+    OuterVisual().InsertAt(m_visual, m_backgroundVisual ? 1 : 0);
   }
 }
 
@@ -1382,7 +1499,7 @@ void ViewComponentView::updateChildrenClippingPath(
       }
 
       // Insert m_childrenContainer after border visuals in m_visual
-      Visual().InsertAt(m_childrenContainer, borderCount);
+      Visual().InsertAt(m_childrenContainer, (m_backgroundVisual ? 1 : 0) + borderCount);
 
       // Use relative sizing so container automatically tracks parent's size
       m_childrenContainer.RelativeSizeWithOffset({0, 0}, {1, 1});

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

@@ -111,6 +111,9 @@ struct ComponentView : public ComponentViewT<
   bool getAcccessiblityIsReadOnly() noexcept override;
   ToggleState getToggleState() noexcept override;
   void Toggle() noexcept override;
+
+  int32_t borderInsertAtIndex() const noexcept;
+
   virtual winrt::Microsoft::ReactNative::implementation::ClipState getClipState() noexcept;
 
   virtual std::pair<facebook::react::Cursor, HCURSOR> cursor() const noexcept;
@@ -130,6 +133,8 @@ struct ComponentView : public ComponentViewT<
   void ThemeChanged(winrt::event_token const &token) noexcept;
 
  protected:
+  virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual VisualToApplyBackgroundClipTo()
+      const noexcept;
   bool anyHitTestHelper(
       facebook::react::Tag &targetTag,
       facebook::react::Point &ptContent,
@@ -141,6 +146,7 @@ struct ComponentView : public ComponentViewT<
   winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext;
   comp::CompositionPropertySet m_centerPropSet{nullptr};
   facebook::react::SharedViewEventEmitter m_eventEmitter;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_backgroundVisual{nullptr};
 
  private:
   void updateFocusLayoutMetrics() noexcept;
@@ -157,6 +163,9 @@ struct ComponentView : public ComponentViewT<
   facebook::react::BorderMetrics focusBorderMetrics(bool inner, const facebook::react::LayoutMetrics &layoutMetrics)
       const noexcept;
 
+  facebook::react::LayoutMetrics outlineLayoutMetrics() const noexcept;
+  facebook::react::BorderMetrics outlineBorderMetrics() const noexcept;
+
   virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual visualToHostFocus() noexcept;
   virtual winrt::com_ptr<ComponentView> focusVisualRoot(const facebook::react::Rect &focusRect) noexcept;
 
@@ -168,6 +177,7 @@ struct ComponentView : public ComponentViewT<
   winrt::com_ptr<ComponentView>
       m_componentHostingFocusVisual; // The component that we are showing our focus visuals within
   std::shared_ptr<BorderPrimitive> m_borderPrimitive;
+  std::shared_ptr<BorderPrimitive> m_outlinePrimitive;
   std::unique_ptr<FocusPrimitive> m_focusPrimitive{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_outerVisual{nullptr};
   winrt::event<winrt::Windows::Foundation::EventHandler<winrt::IInspectable>> m_themeChangedEvent;

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

@@ -189,14 +189,14 @@ void ImageComponentView::setStateAndResubscribeImageResponseObserver(
     facebook::react::ImageShadowNode::ConcreteState::Shared const &state) noexcept {
   if (m_state) {
     auto &observerCoordinator = m_state->getData().getImageRequest().getObserverCoordinator();
-    observerCoordinator.removeObserver(*m_imageResponseObserver);
+    observerCoordinator.removeObserver(m_imageResponseObserver);
   }
 
   m_state = state;
 
   if (m_state) {
     auto &observerCoordinator = m_state->getData().getImageRequest().getObserverCoordinator();
-    observerCoordinator.addObserver(*m_imageResponseObserver);
+    observerCoordinator.addObserver(m_imageResponseObserver);
   }
 }
 
@@ -237,6 +237,11 @@ void ImageComponentView::onThemeChanged() noexcept {
   Super::onThemeChanged();
 }
 
+winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ImageComponentView::VisualToApplyBackgroundClipTo()
+    const noexcept {
+  return Visual();
+}
+
 void ImageComponentView::ensureDrawingSurface() noexcept {
   assert(m_reactContext.UIDispatcher().HasThreadAccess());
 

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

@@ -52,6 +52,8 @@ struct ImageComponentView : ImageComponentViewT<ImageComponentView, ViewComponen
 
   virtual std::string DefaultControlType() const noexcept;
   static facebook::react::SharedViewProps defaultProps() noexcept;
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual VisualToApplyBackgroundClipTo()
+      const noexcept override;
 
   ImageComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,

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

@@ -7,6 +7,7 @@
 
 #include "../../../codegen/react/components/rnwcore/ModalHostView.g.h"
 #include <ComponentView.Experimental.interop.h>
+#include <dwmapi.h>
 #include <winrt/Microsoft.UI.Content.h>
 #include <winrt/Microsoft.UI.Input.h>
 #include <winrt/Microsoft.UI.Windowing.h>
@@ -112,6 +113,12 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
       m_rnWindow.AppWindow().Title(titleValue);
     }
 
+    if (m_rnWindow &&
+        (newViewProps.hideTitleBar != oldViewProps.hideTitleBar ||
+         newViewProps.hideBorder != oldViewProps.hideBorder)) {
+      UpdateTitleBarAndBorder();
+    }
+
     ::Microsoft::ReactNativeSpecs::BaseModalHostView<ModalHostView>::UpdateProps(view, newProps, oldProps);
   }
 
@@ -258,6 +265,61 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
     }
   }
 
+  void UpdateTitleBarAndBorder() noexcept {
+    if (!m_rnWindow) {
+      return;
+    }
+
+    auto overlappedPresenter = winrt::Microsoft::UI::Windowing::OverlappedPresenter::Create();
+
+    // Configure presenter for modal behavior
+    overlappedPresenter.IsModal(true);
+
+    // modal should only have close button
+    overlappedPresenter.IsMinimizable(false);
+    overlappedPresenter.IsMaximizable(false);
+
+    // Apply the presenter to the window
+    m_rnWindow.AppWindow().SetPresenter(overlappedPresenter);
+
+    // We only hide the borders if the titlebar is also hidden.
+    const bool hideBorders = m_localProps->hideTitleBar.value_or(false) && m_localProps->hideBorder.value_or(false);
+
+    auto titleBar = m_rnWindow.AppWindow().TitleBar();
+    titleBar.ResetToDefault();
+    overlappedPresenter.IsResizable(false);
+
+    overlappedPresenter.SetBorderAndTitleBar(!hideBorders, !m_localProps->hideTitleBar.value_or(false));
+
+    auto hwnd = GetWindowFromWindowId(m_rnWindow.AppWindow().Id());
+
+    if (hideBorders) {
+      const DWMNCRENDERINGPOLICY ncPolicy = DWMNCRP_DISABLED;
+      ::DwmSetWindowAttribute(hwnd, DWMWA_NCRENDERING_POLICY, &ncPolicy, sizeof(ncPolicy));
+
+      const DWM_WINDOW_CORNER_PREFERENCE cornerPref = DWMWCP_DEFAULT;
+      ::DwmSetWindowAttribute(hwnd, DWMWA_WINDOW_CORNER_PREFERENCE, &cornerPref, sizeof(cornerPref));
+
+      const COLORREF zeroColor = 0;
+      ::DwmSetWindowAttribute(hwnd, DWMWA_BORDER_COLOR, &zeroColor, sizeof(zeroColor));
+      ::DwmSetWindowAttribute(hwnd, DWMWA_CAPTION_COLOR, &zeroColor, sizeof(zeroColor));
+      ::DwmSetWindowAttribute(hwnd, DWMWA_TEXT_COLOR, &zeroColor, sizeof(zeroColor));
+    } else {
+      const DWMNCRENDERINGPOLICY ncPolicy = DWMNCRP_USEWINDOWSTYLE;
+      ::DwmSetWindowAttribute(hwnd, DWMWA_NCRENDERING_POLICY, &ncPolicy, sizeof(ncPolicy));
+
+      const DWM_WINDOW_CORNER_PREFERENCE cornerPref = DWMWCP_DEFAULT;
+      ::DwmSetWindowAttribute(hwnd, DWMWA_WINDOW_CORNER_PREFERENCE, &cornerPref, sizeof(cornerPref));
+
+      const COLORREF zeroColor = DWMWA_COLOR_DEFAULT;
+      ::DwmSetWindowAttribute(hwnd, DWMWA_BORDER_COLOR, &zeroColor, sizeof(zeroColor));
+      ::DwmSetWindowAttribute(hwnd, DWMWA_CAPTION_COLOR, &zeroColor, sizeof(zeroColor));
+      ::DwmSetWindowAttribute(hwnd, DWMWA_TEXT_COLOR, &zeroColor, sizeof(zeroColor));
+
+      titleBar.IconShowOptions(winrt::Microsoft::UI::Windowing::IconShowOptions::HideIconAndSystemMenu);
+    }
+  }
+
   // creates a new modal window
   void EnsureModalCreated(const winrt::Microsoft::ReactNative::ComponentView &view) {
     if (m_popUp) {
@@ -282,22 +344,8 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
     m_rnWindow = winrt::Microsoft::ReactNative::ReactNativeWindow::CreateFromContentSiteBridgeAndIsland(
         m_popUp, winrt::Microsoft::ReactNative::ReactNativeIsland::CreatePortal(portal));
     m_rnWindow.ResizePolicy(winrt::Microsoft::ReactNative::ContentSizePolicy::None);
-    auto overlappedPresenter = winrt::Microsoft::UI::Windowing::OverlappedPresenter::Create();
-
-    // Configure presenter for modal behavior
-    overlappedPresenter.IsModal(true);
-    overlappedPresenter.SetBorderAndTitleBar(true, true);
-
-    // modal should only have close button
-    overlappedPresenter.IsMinimizable(false);
-    overlappedPresenter.IsMaximizable(false);
-
-    // Apply the presenter to the window
-    m_rnWindow.AppWindow().SetPresenter(overlappedPresenter);
 
-    // Hide the title bar icon
-    m_rnWindow.AppWindow().TitleBar().IconShowOptions(
-        winrt::Microsoft::UI::Windowing::IconShowOptions::HideIconAndSystemMenu);
+    UpdateTitleBarAndBorder();
 
     // Set initial title using the stored local props
     if (m_localProps && m_localProps->title.has_value()) {

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

@@ -340,7 +340,9 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
             break;
         }
       }
-      winrt::check_hresult(m_textLayout->SetTextAlignment(alignment));
+
+      if (alignment != m_textLayout->GetTextAlignment())
+        winrt::check_hresult(m_textLayout->SetTextAlignment(alignment));
     }
 
     requireNewBrush = true;

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -1329,7 +1329,7 @@ void WindowsTextInputComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
   // Set Position & Size Properties
 
-  if ((layoutMetrics.pointScaleFactor != m_layoutMetrics.pointScaleFactor)) {
+  if (m_textServices && layoutMetrics.pointScaleFactor > 0) {
     LRESULT res;
     winrt::check_hresult(m_textServices->TxSendMessage(
         (WM_USER + 328), // EM_SETDPI

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputState.cpp

@@ -7,7 +7,7 @@
 
 #include "WindowsTextInputState.h"
 
-#include <react/renderer/components/text/platform/android/react/renderer/components/text/ParagraphState.h> // [windows]
+#include <react/renderer/components/text/platform/cxx/react/renderer/components/text/ParagraphState.h> // [windows]
 
 namespace facebook::react {
 

package/Microsoft.ReactNative/Fabric/FabricUIManagerModule.cpp

@@ -24,6 +24,7 @@
 #include <react/renderer/components/text/ParagraphComponentDescriptor.h>
 #include <react/renderer/core/DynamicPropsUtilities.h>
 #include <react/renderer/core/EventBeat.h>
+#include <react/renderer/mounting/ShadowTree.h>
 #include <react/renderer/runtimescheduler/RuntimeScheduler.h>
 #include <react/renderer/scheduler/Scheduler.h>
 #include <react/renderer/scheduler/SchedulerToolbox.h>
@@ -404,6 +405,16 @@ void FabricUIManager::schedulerShouldRenderTransactions(
   }
 }
 
+void FabricUIManager::schedulerShouldMergeReactRevision(facebook::react::SurfaceId surfaceId) {
+  m_context.UIDispatcher().Post([surfaceId, self = shared_from_this()]() {
+    std::lock_guard lock(self->m_schedulerMutex);
+    if (self->m_scheduler) {
+      self->m_scheduler->getUIManager()->getShadowTreeRegistry().visit(
+          surfaceId, [](const facebook::react::ShadowTree &shadowTree) { shadowTree.mergeReactRevision(); });
+    }
+  });
+}
+
 void FabricUIManager::schedulerDidRequestPreliminaryViewAllocation(const facebook::react::ShadowNode &shadowView) {
   // iOS does not do this optimization, but Android does.  It maybe that android's allocations are more expensive due to
   // the Java boundary.

package/Microsoft.ReactNative/Fabric/FabricUIManagerModule.h

@@ -90,6 +90,7 @@ struct FabricUIManager final : public std::enable_shared_from_this<FabricUIManag
       const std::shared_ptr<const facebook::react::MountingCoordinator> &mountingCoordinator) override;
   virtual void schedulerShouldRenderTransactions(
       const std::shared_ptr<const facebook::react::MountingCoordinator> &mountingCoordinator) override;
+  virtual void schedulerShouldMergeReactRevision(facebook::react::SurfaceId surfaceId) override;
   virtual void schedulerDidRequestPreliminaryViewAllocation(const facebook::react::ShadowNode &shadowView) override;
   virtual void schedulerDidDispatchCommand(
       facebook::react::ShadowView const &shadowView,

package/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/HostPlatformColor.h

@@ -99,6 +99,9 @@ inline ColorComponents colorComponentsFromHostPlatformColor(Color color) {
 
 // windows
 inline bool hostPlatformColorIsColorMeaningful(Color color) noexcept {
+  if (color.m_platformColor.size())
+    return true;
+
   auto windowsColor = color.AsWindowsColor();
   return windowsColor.A > 0;
 }

package/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorUtils.cpp

@@ -4,9 +4,6 @@
 #include "PlatformColorUtils.h"
 #include <Utils/ThemeUtils.h>
 #include <Utils/ValueUtils.h>
-#ifndef CORE_ABI
-#include <XamlUtils.h>
-#endif // CORE_ABI
 #include <react/renderer/graphics/Color.h>
 #include <winrt/Windows.UI.ViewManagement.h>
 #include "HostPlatformColor.h"

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp

@@ -196,12 +196,7 @@ void WindowsTextLayoutManager::GetTextLayout(
       ));
 
   // Apply max width constraint and ellipsis trimming to ensure consistency with rendering
-  DWRITE_TEXT_METRICS metrics;
-  winrt::check_hresult(spTextLayout->GetMetrics(&metrics));
-
-  if (metrics.width > size.width) {
-    spTextLayout->SetMaxWidth(size.width);
-  }
+  spTextLayout->SetMaxWidth(size.width);
 
   // Apply DWRITE_TRIMMING for ellipsizeMode
   DWRITE_TRIMMING trimming = {};
@@ -396,7 +391,7 @@ void WindowsTextLayoutManager::GetTextLayoutByAdjustingFontSizeToFit(
   }
 }
 
-// measure entire text (inluding attachments)
+// measure entire text (including attachments)
 TextMeasurement TextLayoutManager::measure(
     const AttributedStringBox &attributedStringBox,
     const ParagraphAttributes &paragraphAttributes,

package/Microsoft.ReactNative/IReactPackageBuilder.idl

@@ -21,5 +21,11 @@ namespace Microsoft.ReactNative
     DOC_STRING("Adds a custom native module. See @ReactModuleProvider. This will register the"
     "module as a TurboModule.")
     void AddTurboModule(String moduleName, ReactModuleProvider moduleProvider);
+
+    DOC_STRING("Adds a custom native module. See @ReactModuleProvider. This will register the"
+    "module as a TurboModule.  This module will be created and have init called as soon as the"
+    "instance is created, event before the module is accessed from JavaScript.")
+    void AddEagerInitTurboModule(String moduleName, ReactModuleProvider moduleProvider);
+
   }
 } // namespace Microsoft.ReactNative