react-native-windows 0.80.0 → 0.81.0-preview.1

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

@@ -0,0 +1,169 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#include "pch.h"
+#include "DebuggerUIIsland.h"
+
+#include <AutoDraw.h>
+#include <react/renderer/attributedstring/AttributedStringBox.h>
+#include <react/renderer/textlayoutmanager/WindowsTextLayoutManager.h>
+#include <winrt/Microsoft.UI.Composition.h>
+#include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Microsoft.UI.Input.h>
+#include "CompositionContextHelper.h"
+#include "TextDrawing.h"
+
+namespace winrt::Microsoft::ReactNative::implementation {
+
+constexpr float debuggerUIFontSize = 10.0f;
+constexpr float debuggerTextMargin = 4.0f;
+
+DebuggerUIIsland::DebuggerUIIsland(
+    const winrt::Microsoft::UI::Composition::Compositor &compositor,
+    winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+    winrt::Microsoft::ReactNative::Composition::Theme theme) noexcept
+    : m_compositor(compositor), m_compContext(compContext), m_theme(theme) {
+  m_backgroundVisual = m_compositor.CreateSpriteVisual();
+  m_backgroundVisual.RelativeSizeAdjustment({1.0f, 1.0f});
+
+  auto backgroundBrush = m_compositor.CreateColorBrush({100, 0, 0, 0});
+  m_backgroundVisual.Brush(backgroundBrush);
+
+  m_TextVisual = m_compositor.CreateSpriteVisual();
+  m_TextVisual.IsPixelSnappingEnabled(true);
+
+  m_backgroundVisual.Children().InsertAtTop(m_TextVisual);
+}
+
+DebuggerUIIsland::~DebuggerUIIsland() noexcept {
+  m_island.StateChanged(m_islandStateChangedToken);
+}
+
+void DebuggerUIIsland::Redraw() noexcept {
+  if (!m_island)
+    return;
+
+  if (m_island.ActualSize().x == 0 || m_island.ActualSize().y == 0)
+    return;
+
+  auto scaleFactor = m_island.Environment().DisplayScale();
+
+  auto attributedString = facebook::react::AttributedString{};
+  auto fragment = facebook::react::AttributedString::Fragment{};
+  fragment.string = m_message;
+  fragment.textAttributes.fontSize = debuggerUIFontSize;
+  attributedString.appendFragment(std::move(fragment));
+
+  // Resume Icon
+  auto iconFragment = facebook::react::AttributedString::Fragment{};
+  iconFragment.string = " \uF08F";
+  iconFragment.textAttributes.fontFamily = "Segoe Fluent Icons";
+  iconFragment.textAttributes.fontSize = debuggerUIFontSize;
+  attributedString.appendFragment(std::move(iconFragment));
+
+  auto attributedStringBox = facebook::react::AttributedStringBox{attributedString};
+
+  facebook::react::LayoutConstraints constraints;
+  constraints.maximumSize.width = std::max(0.0f, m_island.ActualSize().x - debuggerTextMargin * 2 * scaleFactor);
+  constraints.maximumSize.height = std::max(0.0f, m_island.ActualSize().y - debuggerTextMargin * 2 * scaleFactor);
+
+  auto textAttributes = facebook::react::TextAttributes{};
+  textAttributes.foregroundColor = facebook::react::blackColor();
+
+  winrt::com_ptr<::IDWriteTextLayout> textLayout;
+  facebook::react::WindowsTextLayoutManager::GetTextLayout(attributedStringBox, {}, constraints, textLayout);
+
+  DWRITE_TEXT_METRICS tm;
+  textLayout->GetMetrics(&tm);
+
+  winrt::Windows::Foundation::Size surfaceSize = {
+      std::ceilf(std::min(constraints.maximumSize.width, tm.width + debuggerTextMargin * 2 * scaleFactor)),
+      std::ceilf(std::min(constraints.maximumSize.height, tm.height + debuggerTextMargin * 2 * scaleFactor))};
+  auto drawingSurface = m_compContext.CreateDrawingSurfaceBrush(
+      surfaceSize,
+      winrt::Windows::Graphics::DirectX::DirectXPixelFormat::B8G8R8A8UIntNormalized,
+      winrt::Windows::Graphics::DirectX::DirectXAlphaMode::Premultiplied);
+
+  POINT offset;
+  {
+    ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(drawingSurface, scaleFactor, &offset);
+    if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
+      d2dDeviceContext->Clear(D2D1::ColorF{1.0f, 1.0f, 0.76f, 1.0f});
+
+      auto theme = winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(m_theme);
+
+      Composition::RenderText(
+          *d2dDeviceContext,
+          *textLayout,
+          attributedStringBox.getValue(),
+          textAttributes,
+          {static_cast<float>(offset.x + std::floorf(debuggerTextMargin * scaleFactor)),
+           static_cast<float>(offset.y + std::floorf(debuggerTextMargin * scaleFactor))},
+          scaleFactor,
+          *theme);
+    }
+
+    drawingSurface.HorizontalAlignmentRatio(0.0f);
+    drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::Experimental::CompositionStretch::None);
+
+    m_TextVisual.Brush(winrt::Microsoft::ReactNative::Composition::Experimental::implementation::
+                           MicrosoftCompositionContextHelper::InnerBrush(drawingSurface));
+    m_TextVisual.Size({surfaceSize.Width, surfaceSize.Height});
+
+    m_debuggerHitRect = {
+        m_island.ActualSize().x / 2 - tm.width / 2 + debuggerTextMargin * scaleFactor,
+        debuggerTextMargin * scaleFactor,
+        surfaceSize.Width,
+        surfaceSize.Height};
+
+    m_TextVisual.Offset({m_debuggerHitRect.X, m_debuggerHitRect.Y, 0.0f});
+  }
+}
+
+void DebuggerUIIsland::Message(std::string &&value) noexcept {
+  m_message = value;
+  Redraw();
+}
+
+winrt::Microsoft::UI::Content::ContentIsland DebuggerUIIsland::Island() noexcept {
+  if (!m_island) {
+    m_island = winrt::Microsoft::UI::Content::ContentIsland::Create(m_backgroundVisual);
+
+    m_islandStateChangedToken =
+        m_island.StateChanged([weakThis = weak_from_this()](
+                                  winrt::Microsoft::UI::Content::ContentIsland const &island,
+                                  winrt::Microsoft::UI::Content::ContentIslandStateChangedEventArgs const &args) {
+          if (auto pThis = weakThis.lock()) {
+            if (args.DidRasterizationScaleChange() || args.DidActualSizeChange()) {
+              pThis->Redraw();
+            }
+          }
+        });
+
+    auto pointerSource = winrt::Microsoft::UI::Input::InputPointerSource::GetForIsland(m_island);
+
+    m_islandPointerUpToken =
+        pointerSource.PointerReleased([weakThis = weak_from_this()](
+                                          winrt::Microsoft::UI::Input::InputPointerSource const &,
+                                          winrt::Microsoft::UI::Input::PointerEventArgs const &args) {
+          if (auto pThis = weakThis.lock()) {
+            auto position = args.CurrentPoint().Position();
+            if (position.X >= pThis->m_debuggerHitRect.X && position.Y >= pThis->m_debuggerHitRect.Y &&
+                position.X <= pThis->m_debuggerHitRect.X + pThis->m_debuggerHitRect.Width &&
+                position.Y <= pThis->m_debuggerHitRect.Y + pThis->m_debuggerHitRect.Height) {
+              pThis->m_resumedEvent(nullptr, nullptr);
+            }
+          }
+        });
+  }
+  return m_island;
+}
+
+winrt::event_token DebuggerUIIsland::Resumed(
+    winrt::Windows::Foundation::EventHandler<winrt::Windows::Foundation::IInspectable> const &handler) noexcept {
+  return m_resumedEvent.add(handler);
+}
+void DebuggerUIIsland::Resumed(winrt::event_token const &token) noexcept {
+  m_resumedEvent.remove(token);
+}
+
+} // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -0,0 +1,42 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#pragma once
+
+#include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
+#include <winrt/Microsoft.ReactNative.Composition.h>
+
+namespace winrt::Microsoft::ReactNative::implementation {
+
+struct DebuggerUIIsland : std::enable_shared_from_this<DebuggerUIIsland> {
+  DebuggerUIIsland(
+      const winrt::Microsoft::UI::Composition::Compositor &compositor,
+      winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
+      winrt::Microsoft::ReactNative::Composition::Theme theme) noexcept;
+  ~DebuggerUIIsland() noexcept;
+  winrt::Microsoft::UI::Content::ContentIsland Island() noexcept;
+
+  void Message(std::string &&value) noexcept;
+
+  winrt::event_token Resumed(
+      winrt::Windows::Foundation::EventHandler<winrt::Windows::Foundation::IInspectable> const &handler) noexcept;
+  void Resumed(winrt::event_token const &token) noexcept;
+
+ private:
+  void Redraw() noexcept;
+
+  winrt::event_token m_islandStateChangedToken;
+  winrt::event_token m_islandPointerUpToken;
+
+  winrt::Microsoft::UI::Composition::SpriteVisual m_backgroundVisual{nullptr};
+  winrt::Microsoft::UI::Composition::SpriteVisual m_TextVisual{nullptr};
+  winrt::Windows::Foundation::Rect m_debuggerHitRect{0, 0, 0, 0};
+  winrt::Microsoft::ReactNative::Composition::Theme m_theme{nullptr};
+  std::string m_message;
+
+  winrt::event<winrt::Windows::Foundation::EventHandler<winrt::Windows::Foundation::IInspectable>> m_resumedEvent;
+  winrt::Microsoft::UI::Composition::Compositor m_compositor{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext{nullptr};
+  winrt::Microsoft::UI::Content::ContentIsland m_island{nullptr};
+};
+
+} // namespace winrt::Microsoft::ReactNative::implementation

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

@@ -103,9 +103,9 @@ void DebuggingOverlayComponentView::HandleCommand(
       auto rootVisual = root->OuterVisual();
 
       while (m_activeOverlays != 0) {
+        --m_activeOverlays;
         auto visual = rootVisual.GetAt(root->overlayIndex() + m_activeOverlays);
         rootVisual.Remove(visual);
-        --m_activeOverlays;
       }
     }
     return;

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

@@ -284,6 +284,7 @@ void ReactNativeIsland::UpdateRootVisualSize() noexcept {
     m_rootVisual.Size({m_size.Width * m_scaleFactor, m_size.Height * m_scaleFactor});
 
   UpdateLoadingVisualSize();
+  UpdateDebuggerVisualSize();
 }
 
 void ReactNativeIsland::UpdateLoadingVisualSize() noexcept {
@@ -300,6 +301,13 @@ void ReactNativeIsland::UpdateLoadingVisualSize() noexcept {
   }
 }
 
+void ReactNativeIsland::UpdateDebuggerVisualSize() noexcept {
+  if (!m_debuggerChildSiteLink)
+    return;
+
+  m_debuggerChildSiteLink.ActualSize(m_size);
+}
+
 float ReactNativeIsland::ScaleFactor() noexcept {
   return m_scaleFactor;
 }
@@ -484,6 +492,20 @@ void ReactNativeIsland::InitRootView(
   m_CompositionEventHandler = std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(m_context, *this);
   m_CompositionEventHandler->Initialize();
 
+  ::Microsoft::ReactNative::DebuggerNotifications::SubscribeShowDebuggerPausedOverlay(
+      m_context.Notifications().Handle(),
+      m_context.UIDispatcher().Handle(),
+      [weakThis = get_weak()](std::string message, std::function<void()> onResume) {
+        if (auto strongThis = weakThis.get()) {
+          strongThis->ShowDebuggerUI(message, onResume);
+        }
+      },
+      [weakThis = get_weak()]() {
+        if (auto strongThis = weakThis.get()) {
+          strongThis->HideDebuggerUI();
+        }
+      });
+
   UpdateRootViewInternal();
 
   m_isInitialized = true;
@@ -746,7 +768,10 @@ void ReactNativeIsland::ShowInstanceLoading() noexcept {
   NotifySizeChanged();
   UpdateLoadingVisualSize();
 
-  InternalRootVisual().InsertAt(m_loadingVisual, m_hasRenderedVisual ? 1 : 0);
+  // ShowDebuggerUI(); // TEMP
+
+  InternalRootVisual().InsertAt(
+      m_loadingVisual, m_hasRenderedVisual ? (m_debuggerVisual ? 2 : 1) : (m_debuggerVisual ? 1 : 0));
 }
 
 void ReactNativeIsland::InitTextScaleMultiplier() noexcept {
@@ -767,6 +792,48 @@ void ReactNativeIsland::InitTextScaleMultiplier() noexcept {
       });
 }
 
+void ReactNativeIsland::ShowDebuggerUI(std::string message, const std::function<void()> &onResume) noexcept {
+  if (!m_debuggerVisual) {
+    auto compContext =
+        winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
+            m_context.Properties().Handle());
+    m_debuggerVisual = compContext.CreateSpriteVisual();
+
+    m_debuggerChildSiteLink = winrt::Microsoft::UI::Content::ChildSiteLink::Create(
+        Island(),
+        winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
+            m_debuggerVisual)
+            .as<winrt::Microsoft::UI::Composition::ContainerVisual>());
+
+    m_debuggerUIIsland = std::make_shared<DebuggerUIIsland>(m_compositor, compContext, Theme());
+    m_debuggerUIIsland->Message(std::string(message));
+    m_debuggerVisual.RelativeSizeWithOffset({0.0f, 0.0f}, {1.0f, 1.0f});
+
+    m_debuggerUIIsland->Resumed(
+        [wkThis = get_weak(), onResume](
+            const winrt::Windows::Foundation::IInspectable &, const winrt::Windows::Foundation::IInspectable &) {
+          if (auto pThis = wkThis.get()) {
+            // pThis->HideDebuggerUI();
+            onResume();
+          }
+        });
+
+    InternalRootVisual().InsertAt(m_debuggerVisual, m_hasRenderedVisual ? 1 : 0);
+    m_debuggerUIIsland->Island().IsHitTestVisibleWhenTransparent(false);
+    m_debuggerChildSiteLink.Connect(m_debuggerUIIsland->Island());
+  }
+
+  m_debuggerVisual.IsVisible(true);
+
+  UpdateRootVisualSize();
+}
+
+void ReactNativeIsland::HideDebuggerUI() noexcept {
+  if (m_debuggerVisual) {
+    m_debuggerVisual.IsVisible(false);
+  }
+}
+
 winrt::Windows::Foundation::Size ReactNativeIsland::Measure(
     const winrt::Microsoft::ReactNative::LayoutConstraints &layoutConstraints,
     const winrt::Windows::Foundation::Point &viewportOffset) const {

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

@@ -7,11 +7,14 @@
 #include <FocusNavigationResult.g.h>
 
 #include <ReactContext.h>
+#include <ReactHost/DebuggerNotifications.h>
 #include <react/renderer/core/LayoutConstraints.h>
 #include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
 #include <winrt/Microsoft.ReactNative.h>
+#include <winrt/Microsoft.UI.Content.h>
 #include <winrt/Windows.UI.ViewManagement.h>
 #include "CompositionEventHandler.h"
+#include "DebuggerUIIsland.h"
 #include "PortalComponentView.h"
 #include "ReactHost/React.h"
 
@@ -181,6 +184,9 @@ struct ReactNativeIsland
   std::shared_ptr<::Microsoft::ReactNative::CompositionEventHandler> m_CompositionEventHandler;
   winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_rootVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_loadingVisual{nullptr};
+  winrt::Microsoft::UI::Content::ChildSiteLink m_debuggerChildSiteLink{nullptr};
+  std::shared_ptr<DebuggerUIIsland> m_debuggerUIIsland;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual m_debuggerVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::IActivityVisual m_loadingActivityVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::ICustomResourceLoader m_resources{nullptr};
   winrt::Microsoft::ReactNative::Composition::Theme m_theme{nullptr};
@@ -196,8 +202,11 @@ struct ReactNativeIsland
   void ShowInstanceLoaded() noexcept;
   void ShowInstanceError() noexcept;
   void ShowInstanceLoading() noexcept;
+  void ShowDebuggerUI(std::string message, const std::function<void()> &onResume) noexcept;
+  void HideDebuggerUI() noexcept;
   void UpdateRootVisualSize() noexcept;
   void UpdateLoadingVisualSize() noexcept;
+  void UpdateDebuggerVisualSize() noexcept;
   Composition::Experimental::IDrawingSurfaceBrush CreateLoadingVisualBrush() noexcept;
   void ApplyConstraints(
       const winrt::Microsoft::ReactNative::LayoutConstraints &layoutConstraintsIn,

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

@@ -7,7 +7,6 @@
 #include "TextDrawing.h"
 
 #include <AutoDraw.h>
-#include <Fabric/platform/react/renderer/graphics/PlatformColorUtils.h>
 #include <Utils/ValueUtils.h>
 #include <unicode.h>
 #include <windows.ui.composition.interop.h>
@@ -36,27 +35,11 @@ void RenderText(
   // to cache and reuse a brush across all text elements instead, taking care to recreate
   // it in the event of device removed.
   winrt::com_ptr<ID2D1SolidColorBrush> brush;
-
-  // Check if we should use theme-aware default color instead of hardcoded black
-  bool useDefaultColor = false;
   if (textAttributes.foregroundColor) {
-    auto &color = *textAttributes.foregroundColor;
-    // If it's black (or very dark) without explicit PlatformColor, use theme-aware color
-    if (color.m_platformColor.empty() && color.m_color.R <= 10 && color.m_color.G <= 10 && color.m_color.B <= 10) {
-      useDefaultColor = true;
-    }
-  } else {
-    useDefaultColor = true;
-  }
-
-  if (useDefaultColor) {
-    // Use theme-aware TextFillColorPrimary which adapts to light/dark mode
-    auto d2dColor = theme.D2DPlatformColor("TextFillColorPrimary");
-    winrt::check_hresult(deviceContext.CreateSolidColorBrush(d2dColor, brush.put()));
-  } else {
-    // User set explicit color or PlatformColor - use it
     auto color = theme.D2DColor(*textAttributes.foregroundColor);
     winrt::check_hresult(deviceContext.CreateSolidColorBrush(color, brush.put()));
+  } else {
+    winrt::check_hresult(deviceContext.CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Black, 1.0f), brush.put()));
   }
 
   if (textAttributes.textDecorationLineType) {
@@ -89,27 +72,12 @@ void RenderText(
             (fragment.textAttributes.foregroundColor != textAttributes.foregroundColor) ||
         !isnan(fragment.textAttributes.opacity)) {
       winrt::com_ptr<ID2D1SolidColorBrush> fragmentBrush;
-
-      // Check if we should use theme-aware default color for this fragment
-      bool useFragmentDefaultColor = false;
       if (fragment.textAttributes.foregroundColor) {
-        auto &color = *fragment.textAttributes.foregroundColor;
-        // If it's black (or very dark) without explicit PlatformColor, use theme-aware color
-        if (color.m_platformColor.empty() && color.m_color.R <= 10 && color.m_color.G <= 10 && color.m_color.B <= 10) {
-          useFragmentDefaultColor = true;
-        }
-      } else {
-        useFragmentDefaultColor = true;
-      }
-
-      if (useFragmentDefaultColor) {
-        // Use theme-aware TextFillColorPrimary which adapts to light/dark mode
-        auto d2dColor = theme.D2DPlatformColor("TextFillColorPrimary");
-        winrt::check_hresult(deviceContext.CreateSolidColorBrush(d2dColor, fragmentBrush.put()));
-      } else {
-        // User set explicit color or PlatformColor - use it
         auto color = theme.D2DColor(*fragment.textAttributes.foregroundColor);
         winrt::check_hresult(deviceContext.CreateSolidColorBrush(color, fragmentBrush.put()));
+      } else {
+        winrt::check_hresult(
+            deviceContext.CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Black, 1.0f), fragmentBrush.put()));
       }
 
       if (fragment.textAttributes.textDecorationLineType) {

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h

@@ -48,7 +48,7 @@ virtual State::Shared createInitialState(
       if (getThemeData(
               fabricUIManager, surfaceId, defaultTextInputPaddingArray)) {
         jfloat* defaultTextInputPadding =
-            env->GetFloatArrayElements(defaultTextInputPaddingArray, 0);
+            env->GetFloatArrayElements(defaultTextInputPaddingArray, nullptr);
         theme.start = defaultTextInputPadding[0];
         theme.end = defaultTextInputPadding[1];
         theme.top = defaultTextInputPadding[2];
@@ -59,8 +59,8 @@ virtual State::Shared createInitialState(
       }
 
     return std::make_shared<AndroidTextInputShadowNode::ConcreteState>(
-        std::make_shared<const AndroidTextInputState>(AndroidTextInputState(
-            0, {}, {}, {}, theme.start, theme.end, theme.top, theme.bottom)),
+        std::make_shared<const AndroidTextInputState>(
+            AndroidTextInputState({}, {}, {}, 0)),
         family);
   }
   */

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

@@ -19,6 +19,7 @@
 #include <winrt/Microsoft.UI.Input.h>
 #include <winrt/Windows.System.h>
 #include <winrt/Windows.UI.h>
+#include "../Composition.Input.h"
 #include "../CompositionHelpers.h"
 #include "../RootComponentView.h"
 #include "JSValueReader.h"
@@ -216,15 +217,14 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Get mouse capture
   void TxSetCapture(BOOL fCapture) override {
-    // assert(false);
-    // TODO capture?
-    /*
+    auto mousePointer = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::Pointer>(
+        winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse, 1 /* 1 is Mouse PointerId*/);
+
     if (fCapture) {
-      ::SetCapture(m_hwndHost);
+      m_outer->CapturePointer(mousePointer);
     } else {
-      ::ReleaseCapture();
+      m_outer->ReleasePointerCapture(mousePointer);
     }
-    */
   }
 
   //@cmember Set the focus to the text window

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

@@ -125,8 +125,8 @@ void WindowsTextInputShadowNode::updateStateIfNeeded(const LayoutContext &layout
   // so no changes are applied There's no way to prevent a state update from
   // flowing to Java, so we just ensure it's a noop in those cases.
 
-  setStateData(facebook::react::TextInputState{
-      AttributedStringBox(newAttributedString), reactTreeAttributedString, {}, newEventCount});
+  setStateData(
+      WindowsTextInputState{AttributedStringBox(newAttributedString), reactTreeAttributedString, {}, newEventCount});
 }
 
 AttributedString WindowsTextInputShadowNode::getAttributedString(const LayoutContext &layoutContext) const {
@@ -181,24 +181,28 @@ AttributedString WindowsTextInputShadowNode::getMostRecentAttributedString(const
   return (!treeAttributedStringChanged ? state.attributedStringBox.getValue() : reactTreeAttributedString);
 }
 
-// For measurement purposes, we want to make sure that there's at least a
-// single character in the string so that the measured height is greater
-// than zero. Otherwise, empty TextInputs with no placeholder don't
-// display at all.
-// TODO T67606511: We will redefine the measurement of empty strings as part
-// of T67606511
 AttributedString WindowsTextInputShadowNode::getPlaceholderAttributedString(const LayoutContext &layoutContext) const {
-  const auto &props = BaseShadowNode::getConcreteProps();
+  const auto &props = getConcreteProps();
 
   AttributedString attributedString;
-  auto placeholderString = !props.placeholder.empty() ? props.placeholder : BaseTextShadowNode::getEmptyPlaceholder();
-  auto textAttributes = TextAttributes::defaultTextAttributes();
-  textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
-  textAttributes.apply(props.textAttributes);
-  attributedString.appendFragment(
-      {.string = std::move(placeholderString),
-       .textAttributes = textAttributes,
-       .parentShadowView = ShadowView(*this)});
+  //[windows
+  if (!props.placeholder.empty()) {
+    auto textAttributes = TextAttributes::defaultTextAttributes();
+    textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+    textAttributes.apply(props.textAttributes);
+
+    /*
+     * These props are applied to `View`, therefore they must not be a part of
+     * base text attributes.
+     */
+    textAttributes.backgroundColor = clearColor();
+    textAttributes.opacity = 1;
+
+    attributedString.appendFragment(
+        {.string = props.placeholder, .textAttributes = textAttributes, .parentShadowView = ShadowView(*this)});
+  }
+  // windows]
+
   return attributedString;
 }
 

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.h

@@ -4,14 +4,14 @@
 #pragma once
 
 #include <react/renderer/textlayoutmanager/WindowsTextLayoutManager.h>
+#include "WindowsTextInputEventEmitter.h"
+#include "WindowsTextInputProps.h"
+#include "WindowsTextInputState.h"
 
 #include <react/components/rnwcore/EventEmitters.h>
 #include <unordered_map>
-#include "WindowsTextInputEventEmitter.h"
-#include "WindowsTextInputProps.h"
 
 #include <react/renderer/attributedstring/AttributedString.h>
-#include <react/renderer/components/textinput/TextInputState.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
 #include <react/utils/ContextContainer.h>
 
@@ -26,7 +26,7 @@ class WindowsTextInputShadowNode final : public ConcreteViewShadowNode<
                                              WindowsTextInputComponentName,
                                              WindowsTextInputProps,
                                              WindowsTextInputEventEmitter,
-                                             TextInputState> {
+                                             WindowsTextInputState> {
  public:
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 

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

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "WindowsTextInputState.h"
+
+#include <react/renderer/components/text/platform/android/react/renderer/components/text/ParagraphState.h> // [windows]
+
+namespace facebook::react {
+
+folly::dynamic WindowsTextInputState::getDynamic() const {
+  LOG(FATAL) << "TextInputState state should only be read using MapBuffer";
+  return folly::dynamic::object(); // windows
+}
+
+} // namespace facebook::react

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

@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/attributedstring/AttributedStringBox.h>
+#include <react/renderer/attributedstring/ParagraphAttributes.h>
+#include <react/renderer/textlayoutmanager/TextLayoutManager.h>
+
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h> // [windows]
+
+namespace facebook::react {
+
+/*
+ * State for <TextInput> component.
+ */
+class WindowsTextInputState final {
+ public:
+  WindowsTextInputState() = default;
+
+  WindowsTextInputState(
+      AttributedStringBox attributedStringBox,
+      AttributedString reactTreeAttributedString,
+      ParagraphAttributes paragraphAttributes,
+      int64_t mostRecentEventCount)
+      : attributedStringBox(std::move(attributedStringBox)),
+        reactTreeAttributedString(std::move(reactTreeAttributedString)),
+        paragraphAttributes(std::move(paragraphAttributes)),
+        mostRecentEventCount(mostRecentEventCount) {}
+
+  WindowsTextInputState(const WindowsTextInputState &previousState, const folly::dynamic &data)
+      : attributedStringBox(previousState.attributedStringBox),
+        reactTreeAttributedString(previousState.reactTreeAttributedString),
+        paragraphAttributes(previousState.paragraphAttributes),
+        mostRecentEventCount(data.getDefault("mostRecentEventCount", previousState.mostRecentEventCount).getInt()),
+        cachedAttributedStringId(data.getDefault("opaqueCacheId", previousState.cachedAttributedStringId).getInt()) {}
+
+  folly::dynamic getDynamic() const;
+  MapBuffer getMapBuffer() const;
+
+  /*
+   * All content of <TextInput> component.
+   */
+  AttributedStringBox attributedStringBox;
+
+  /*
+   * All content of <TextInput> component represented as an `AttributedString`.
+   * This stores the previous computed *from the React tree*. This usually
+   * doesn't change as the TextInput contents are being updated. If it does
+   * change, we need to wipe out current contents of the TextInput and replace
+   * with the new value from the tree.
+   */
+  AttributedString reactTreeAttributedString{};
+
+  /*
+   * Represents all visual attributes of a paragraph of text represented as
+   * a ParagraphAttributes.
+   */
+  ParagraphAttributes paragraphAttributes;
+
+  int64_t mostRecentEventCount{0};
+
+  /**
+   * Stores an opaque cache ID used on the Java side to refer to a specific
+   * AttributedString for measurement purposes only.
+   */
+  int64_t cachedAttributedStringId{0};
+};
+
+} // namespace facebook::react