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

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

@@ -88,13 +88,13 @@ facebook::react::SharedEventEmitter EventEmitterForComponent(
   auto viewComponent = descriptor.view.as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>();
   auto emitter = viewComponent->GetEventEmitter();
   if (emitter)
-    return emitter;
+    return std::const_pointer_cast<facebook::react::ViewEventEmitter>(emitter);
 
   for (auto it = view.Parent(); it; it = it.Parent()) {
     auto emitter =
         it.as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()->GetEventEmitter();
     if (emitter)
-      return emitter;
+      return std::const_pointer_cast<facebook::react::ViewEventEmitter>(emitter);
   }
 
   return nullptr;
@@ -224,6 +224,28 @@ void CompositionEventHandler::Initialize() noexcept {
           }
         });
 
+    // Issue #16047: when ScrollView calls VisualInteractionSource::TryRedirectForManipulation
+    // and the OS hands the pointer over to the InteractionTracker, WinAppSDK
+    // does not fire PointerCaptureLost on this source — but it does fire
+    // PointerRoutedAway. Treat it the same way as captureloss: cancel any
+    // active touch RN is tracking for this pointer so Pressables don't get
+    // stuck in their pressed state.
+    m_pointerRoutedAwayToken =
+        pointerSource.PointerRoutedAway([wkThis = weak_from_this()](
+                                            winrt::Microsoft::UI::Input::InputPointerSource const &,
+                                            winrt::Microsoft::UI::Input::PointerEventArgs const &args) {
+          if (auto strongThis = wkThis.lock()) {
+            if (auto strongRootView = strongThis->m_wkRootView.get()) {
+              if (strongThis->SurfaceId() == -1)
+                return;
+
+              auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+                  args.CurrentPoint(), strongRootView.ScaleFactor());
+              strongThis->onPointerRoutedAway(pp, args.KeyModifiers());
+            }
+          }
+        });
+
     m_pointerWheelChangedToken =
         pointerSource.PointerWheelChanged([wkThis = weak_from_this()](
                                               winrt::Microsoft::UI::Input::InputPointerSource const &,
@@ -369,6 +391,7 @@ CompositionEventHandler::~CompositionEventHandler() {
       pointerSource.PointerReleased(m_pointerReleasedToken);
       pointerSource.PointerMoved(m_pointerMovedToken);
       pointerSource.PointerCaptureLost(m_pointerCaptureLostToken);
+      pointerSource.PointerRoutedAway(m_pointerRoutedAwayToken);
       pointerSource.PointerWheelChanged(m_pointerWheelChangedToken);
       pointerSource.PointerExited(m_pointerExitedToken);
       auto keyboardSource = winrt::Microsoft::UI::Input::InputKeyboardSource::GetForIsland(island);
@@ -1116,6 +1139,50 @@ void CompositionEventHandler::onPointerCaptureLost(
 
     m_pointerCapturingComponentTag = -1;
   }
+
+  // Defense-in-depth cleanup for the specific pointer that lost capture, even
+  // when no JS-level CapturePointer was ever issued. The ScrollView
+  // TryRedirectForManipulation path comes in via PointerRoutedAway, not
+  // PointerCaptureLost (see onPointerRoutedAway and issue #16047), so this
+  // path covers the remaining system-driven losses (focus change, another
+  // window stealing input, system back gesture, etc.).
+  CancelActiveTouchForPointerInternal(pointerPoint.PointerId(), pointerPoint, keyModifiers);
+}
+
+void CompositionEventHandler::onPointerRoutedAway(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
+    winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept {
+  if (SurfaceId() == -1)
+    return;
+
+  // Issue #16047: WinAppSDK fires PointerRoutedAway when the OS hands the
+  // pointer to another InputPointerSource — most importantly for us, when
+  // ScrollView calls VisualInteractionSource::TryRedirectForManipulation and
+  // the InteractionTracker takes the gesture for scrolling. We never get
+  // PointerMoved / PointerReleased / PointerCaptureLost for that pointer
+  // afterwards, so without this cleanup m_activeTouches keeps a zombie entry
+  // and the originally-pressed Pressable stays stuck in its pressed state.
+  CancelActiveTouchForPointerInternal(pointerPoint.PointerId(), pointerPoint, keyModifiers);
+}
+
+bool CompositionEventHandler::CancelActiveTouchForPointerInternal(
+    PointerId pointerId,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
+    winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept {
+  auto activeTouch = m_activeTouches.find(pointerId);
+  if (activeTouch == m_activeTouches.end()) {
+    return false;
+  }
+
+  ActiveTouch cancelledTouchCopy = std::move(activeTouch->second);
+  m_activeTouches.erase(activeTouch);
+
+  if (!cancelledTouchCopy.eventEmitter) {
+    return false;
+  }
+
+  DispatchSynthesizedTouchCancelForActiveTouch(cancelledTouchCopy, pointerPoint, keyModifiers);
+  return true;
 }
 
 void CompositionEventHandler::onPointerMoved(
@@ -1366,7 +1433,7 @@ void CompositionEventHandler::onPointerPressed(
 
     UpdateActiveTouch(activeTouch, ptScaled, ptLocal);
 
-    activeTouch.isPrimary = pointerId == 1;
+    activeTouch.isPrimary = pointerPoint.Properties().IsPrimary();
     // Map the Windows pointer ID to a small identifier (0–19) safe for use as a JS array index.
     // Windows touch IDs can be arbitrarily large (e.g. 2233), which causes React Native to warn
     // and corrupts touch state, leaving Pressables stuck after a scroll.
@@ -1614,16 +1681,6 @@ bool CompositionEventHandler::IsPointerWithinInitialTree(const ActiveTouch &acti
     currentView = currentView.Parent();
   }
 
-  // Fallback: if the pointer drifted spatially but the original target
-  // is still structurally within the initial tree, honor the tap.
-  // This provides touch-device tolerance for finger drift.
-  auto targetView = viewRegistry.componentViewDescriptorWithTag(activeTouch.touch.target).view;
-  while (targetView) {
-    if (targetView.Tag() == initialTag)
-      return true;
-    targetView = targetView.Parent();
-  }
-
   return false;
 }
 
@@ -1685,7 +1742,15 @@ void CompositionEventHandler::DispatchTouchEvent(
 
   facebook::react::TouchEvent event;
 
-  size_t index = 0;
+  // First pass: build changedTouches and the set of unique emitters from every active
+  // touch. The per-pointer PointerEvent dispatch (onPointerDown/Move/Up/Cancel/Click) is
+  // fired only for the touch whose state actually changed — non-changed touches contribute
+  // to the W3C TouchEvent's touches/targetTouches sets in the loops below but must not
+  // re-fire pointer events of their own. Previously we dispatched the per-pointer event
+  // for every entry in m_activeTouches, which produced duplicated onPointerMove on
+  // non-moving fingers and replayed onPointerUp/onClick on stale targets after the OS
+  // reclaimed a pointer (e.g. ScrollView manipulation redirect leaving a zombie touch).
+  const ActiveTouch *changedTouch = nullptr;
   for (const auto &pair : m_activeTouches) {
     const auto &activeTouch = pair.second;
 
@@ -1694,14 +1759,17 @@ void CompositionEventHandler::DispatchTouchEvent(
     }
 
     if (pair.first == pointerId) {
+      changedTouch = &activeTouch;
       event.changedTouches.insert(activeTouch.touch);
     }
     uniqueEventEmitters.insert(activeTouch.eventEmitter);
+  }
 
-    facebook::react::PointerEvent pointerEvent = CreatePointerEventFromActiveTouch(activeTouch, eventType);
+  if (changedTouch) {
+    facebook::react::PointerEvent pointerEvent = CreatePointerEventFromActiveTouch(*changedTouch, eventType);
 
     winrt::Microsoft::ReactNative::ComponentView targetView{nullptr};
-    bool shouldLeave = (eventType == TouchEventType::End && activeTouch.shouldLeaveWhenReleased) ||
+    bool shouldLeave = (eventType == TouchEventType::End && changedTouch->shouldLeaveWhenReleased) ||
         eventType == TouchEventType::Cancel;
     if (!shouldLeave) {
       auto *rootViewForHit = RootComponentView();
@@ -1716,29 +1784,29 @@ void CompositionEventHandler::DispatchTouchEvent(
       }
     }
 
-    auto handler = [this, &activeTouch, eventType, &pointerEvent](
+    auto handler = [this, changedTouch, eventType, &pointerEvent](
                        std::vector<winrt::Microsoft::ReactNative::ComponentView> &eventPathViews) {
       switch (eventType) {
         case TouchEventType::Start:
-          activeTouch.eventEmitter->onPointerDown(pointerEvent);
+          changedTouch->eventEmitter->onPointerDown(pointerEvent);
           break;
         case TouchEventType::Move: {
-          activeTouch.eventEmitter->onPointerMove(pointerEvent);
+          changedTouch->eventEmitter->onPointerMove(pointerEvent);
           break;
         }
         case TouchEventType::End:
-          activeTouch.eventEmitter->onPointerUp(pointerEvent);
+          changedTouch->eventEmitter->onPointerUp(pointerEvent);
           if (pointerEvent.isPrimary && pointerEvent.button == 0) {
-            if (IsPointerWithinInitialTree(activeTouch)) {
-              activeTouch.eventEmitter->onClick(pointerEvent);
+            if (IsPointerWithinInitialTree(*changedTouch)) {
+              changedTouch->eventEmitter->onClick(pointerEvent);
             }
-          } /* else if (IsPointerWithinInitialTree(activeTouch)) {
-            activeTouch.eventEmitter->onAuxClick(pointerEvent);
-          } */
+          } else if (IsPointerWithinInitialTree(*changedTouch)) {
+            changedTouch->eventEmitter->onAuxClick(pointerEvent);
+          }
           break;
         case TouchEventType::Cancel:
         case TouchEventType::CaptureLost:
-          activeTouch.eventEmitter->onPointerCancel(pointerEvent);
+          changedTouch->eventEmitter->onPointerCancel(pointerEvent);
           break;
       }
     };

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

@@ -66,6 +66,9 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
   void onPointerCaptureLost(
       const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
       winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept;
+  void onPointerRoutedAway(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
+      winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept;
   void onKeyDown(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept;
   void onKeyUp(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept;
   void onCharacterReceived(
@@ -156,6 +159,13 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
       const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
       winrt::Windows::System::VirtualKeyModifiers keyModifiers);
 
+  // Look up the active touch for pointerId, erase it, and dispatch cancel events.
+  // Returns true iff a touch was found and cancel events were dispatched.
+  bool CancelActiveTouchForPointerInternal(
+      PointerId pointerId,
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
+      winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept;
+
   std::vector<winrt::Microsoft::ReactNative::ComponentView> GetTouchableViewsInPathToRoot(
       const winrt::Microsoft::ReactNative::ComponentView &componentView);
 
@@ -186,6 +196,7 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
   winrt::event_token m_pointerMovedToken;
   winrt::event_token m_pointerWheelChangedToken;
   winrt::event_token m_pointerCaptureLostToken;
+  winrt::event_token m_pointerRoutedAwayToken;
   winrt::event_token m_pointerExitedToken;
   winrt::event_token m_keyDownToken;
   winrt::event_token m_keyUpToken;

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,