feat(playground): add layout diagnostics and update text_styled snapshot

Add contentW, intrinsicW, shapedW, resolvedTypeface diagnostic fields
to LayoutNode and playground layout JSON for text rendering debugging.
Update text_styled snapshot for LinearMetrics change.

Author: RoboNET

src/FlexRender.Core/Layout/LayoutEngine.cs

@@ -481,6 +481,8 @@ private LayoutNode LayoutTextElement(TextElement text, LayoutContext context)
         var border = BorderParser.Resolve(text, context.ContainerWidth, context.FontSize);
 
         float contentWidth;
+        var diagIntrinsicW = 0f;
+        var diagShapedW = 0f;
         if (!string.IsNullOrEmpty(text.Width.Value))
         {
             contentWidth = context.ResolveWidth(text.Width.Value) ?? context.ContainerWidth;
@@ -490,6 +492,7 @@ private LayoutNode LayoutTextElement(TextElement text, LayoutContext context)
             && intrinsic.MaxWidth > 0)
         {
             contentWidth = intrinsic.MaxWidth;
+            diagIntrinsicW = intrinsic.MaxWidth;
         }
         else
         {
@@ -518,6 +521,7 @@ private LayoutNode LayoutTextElement(TextElement text, LayoutContext context)
                     ? Math.Min(contentWidth, context.ContainerWidth)
                     : float.MaxValue;
                 var shaped = TextShaper.ShapeText(text, fontSize, measureWidth);
+                diagShapedW = shaped.TotalSize.Width;
                 textLines = shaped.Lines;
                 computedLineHeight = shaped.LineHeight;
                 textBaseline = shaped.Baseline;
@@ -534,6 +538,7 @@ private LayoutNode LayoutTextElement(TextElement text, LayoutContext context)
                 ? Math.Min(contentWidth, context.ContainerWidth)
                 : float.MaxValue;
             var shaped = TextShaper.ShapeText(text, fontSize, measureWidth);
+            diagShapedW = shaped.TotalSize.Width;
             contentHeight = shaped.TotalSize.Height;
             textLines = shaped.Lines;
             computedLineHeight = shaped.LineHeight;
@@ -582,6 +587,9 @@ private LayoutNode LayoutTextElement(TextElement text, LayoutContext context)
         node.ComputedLineHeight = computedLineHeight;
         node.Baseline = padding.Top + border.Top.Width + textBaseline;
         node.ComputedFontSize = resolvedFontSize;
+        node.DiagContentWidth = contentWidth;
+        node.DiagIntrinsicWidth = diagIntrinsicW;
+        node.DiagShapedWidth = diagShapedW;
         return node;
     }
 

src/FlexRender.Core/Layout/LayoutNode.cs

@@ -61,6 +61,28 @@ public sealed class LayoutNode
     /// </summary>
     public float ComputedFontSize { get; set; }
 
+    /// <summary>
+    /// Diagnostic: intrinsic width from IntrinsicMeasurer (before scaling).
+    /// Only populated for text elements during layout when diagnostics are enabled.
+    /// </summary>
+    public float DiagIntrinsicWidth { get; set; }
+
+    /// <summary>
+    /// Diagnostic: shaped width from TextShaper at final font size.
+    /// Only populated for text elements during layout when diagnostics are enabled.
+    /// </summary>
+    public float DiagShapedWidth { get; set; }
+
+    /// <summary>
+    /// Diagnostic: final content width used in layout calculation.
+    /// </summary>
+    public float DiagContentWidth { get; set; }
+
+    /// <summary>
+    /// Diagnostic: resolved typeface family name from FontManager.
+    /// </summary>
+    public string? DiagResolvedTypeface { get; set; }
+
     /// <summary>Right edge (X + Width).</summary>
     public float Right => X + Width;
 

src/FlexRender.Playground/PlaygroundApi.cs

@@ -378,6 +378,16 @@ private static JsonObject SerializeLayoutNode(LayoutNode node)
         if (node.Direction != TextDirection.Ltr)
             obj["direction"] = node.Direction.ToString().ToLowerInvariant();
 
+        // Diagnostic fields for text debugging
+        if (node.DiagContentWidth > 0)
+            obj["contentW"] = Math.Round(node.DiagContentWidth, 2);
+        if (node.DiagIntrinsicWidth > 0)
+            obj["intrinsicW"] = Math.Round(node.DiagIntrinsicWidth, 2);
+        if (node.DiagShapedWidth > 0)
+            obj["shapedW"] = Math.Round(node.DiagShapedWidth, 2);
+        if (!string.IsNullOrEmpty(node.DiagResolvedTypeface))
+            obj["resolvedTypeface"] = node.DiagResolvedTypeface;
+
         // Element-specific properties
         SerializeElementProperties(obj, node.Element);
 
@@ -425,6 +435,14 @@ private static void SerializeElementProperties(JsonObject obj, TemplateElement e
                 if (!string.IsNullOrEmpty(t.Color.Value))
                     obj["color"] = t.Color.Value;
 
+                // Resolve typeface name for diagnostics
+                if (_render is SkiaRender skiaRender)
+                {
+                    var typeface = skiaRender.FontManager.GetTypeface(
+                        t.Font.Value, t.FontFamily.Value, t.FontWeight.Value, t.FontStyle.Value);
+                    obj["resolvedTypeface"] = typeface.FamilyName;
+                }
+
                 break;
 
             case ImageElement:

src/FlexRender.Playground/wwwroot/main.js

@@ -569,6 +569,10 @@ function buildLayoutTree(node, depth, parentAbsX, parentAbsY) {
     if (node.justify) props.push(`justify=${escHtml(node.justify)}`);
     if (node.fontSize) props.push(`fontSize=${escHtml(String(node.fontSize))}px`);
     if (node.textLines) props.push(`lines=${escHtml(String(node.textLines))}`);
+    if (node.contentW) props.push(`contentW=${node.contentW}`);
+    if (node.intrinsicW) props.push(`intrinsicW=${node.intrinsicW}`);
+    if (node.shapedW) props.push(`shapedW=${node.shapedW}`);
+    if (node.resolvedTypeface) props.push(`tf=${escHtml(node.resolvedTypeface)}`);
 
     const propsStr = props.length > 0 ? ` <span class="node-props">[${props.join(', ')}]</span>` : '';
     const safeType = escHtml(node.type);