Various fixes

This also reverts commit a0833eb.

Author: xoofx

doc/controls/barchart.md

@@ -1,6 +1,7 @@
 # BarChart
 
-`BarChart` renders a horizontal bar chart with a label column, a bar column and an optional value column.
+`BarChart` renders a horizontal bar chart with a label column and a bar column. When enabled, the value text is
+rendered near the end of the filled portion of each bar (instead of being flush-right at the end of the chart).
 
 > Screenshots: TODO
 
@@ -24,9 +25,9 @@ var chart = new BarChart()
 
 Items are stored in `BarChart.Items` as `BarChartItem` objects:
 
-- `BarChartItem.Label`: a visual displayed in the left column (you can use `TextBlock`, `Markup`, an `HStack` with an icon, etc.).
+- `BarChartItem.Label`: a visual displayed in the left column (you can use `"Text"`, `Markup`, an `HStack` with an icon, etc.).
 - `BarChartItem.Value`: numeric value used to compute bar fill.
-- `BarChartItem.ValueLabel`: optional explicit value label visual for the right column.
+- `BarChartItem.ValueLabel`: optional explicit value label visual. When set, it is positioned near the end of the bar.
 - `BarChartItem.BarColor`: optional bar color override.
 
 ## Range
@@ -45,3 +46,4 @@ The chart is styled via `BarChartStyle`:
 - `BarStyle`: progress bar style used for each bar row.
 - `DefaultBarColors`: optional palette used when items do not provide `BarColor`.
 
+`BarChartStyle.ValueTextStyle` can be used to customize the default value text (when `BarChartItem.ValueLabel` is not set).

doc/controls/breakdown.md doc/controls/breakdownchart.mddoc/controls/breakdown.md renamed to doc/controls/breakdownchart.md

@@ -1,14 +1,14 @@
-# Breakdown
+# BreakdownChart
 
-`Breakdown` renders a segmented proportional bar (a “breakdown”) with an optional legend. It is useful for showing how
+`BreakdownChart` renders a segmented proportional bar (a “breakdown”) with an optional legend. It is useful for showing how
 a total value is distributed across categories (disk usage, budgets, KPIs, resource usage, etc.).
 
 > Screenshots: TODO
 
 ## Basic usage
 
 ```csharp
-var breakdown = new Breakdown()
+var breakdown = new BreakdownChart()
     .Title("Disk usage")
     .ShowValues(true)
     .ShowPercentages(true)
@@ -20,18 +20,18 @@ var breakdown = new Breakdown()
 
 ## Segments
 
-Segments are stored in `Breakdown.Segments` as `BreakdownSegment` objects.
+Segments are stored in `BreakdownChart.Segments` as `BreakdownSegment` objects.
 
 - `BreakdownSegment.Value`: numeric value used to compute proportions.
 - `BreakdownSegment.Label`: a visual shown in the legend (use a `TextBlock`, `Markup`, an `HStack` with an icon, etc.).
 - `BreakdownSegment.Color`: optional segment fill color; when not provided, the control cycles through theme tones.
 - `BreakdownSegment.Tooltip`: optional tooltip content shown when hovering the segment in the bar.
 
-For convenience, you can append segments fluently using `BreakdownExtensions.Segment(...)` as shown above.
+For convenience, you can append segments fluently using `BreakdownChartExtensions.Segment(...)` as shown above.
 
 ## Interaction
 
-`Breakdown` raises a routed `SegmentClicked` event when the user clicks a segment:
+`BreakdownChart` raises a routed `SegmentClicked` event when the user clicks a segment:
 
 ```csharp
 breakdown.SegmentClicked((_, e) =>
@@ -42,16 +42,18 @@ breakdown.SegmentClicked((_, e) =>
 
 ## Layout
 
-- `Breakdown.Title`: optional title shown above the bar.
-- `Breakdown.LegendPlacement`: `Above` or `Below` (default: `Below`).
-- `Breakdown.ShowValues` / `Breakdown.ShowPercentages`: controls legend value display.
+- `BreakdownChart.Title`: optional title shown above the bar.
+- `BreakdownChart.LegendPlacement`: `Above` or `Below` (default: `Below`).
+- `BreakdownChart.ShowValues` / `BreakdownChart.ShowPercentages`: controls legend value display.
 
 ## Styling
 
-`Breakdown` is styled via `BreakdownStyle`:
+`BreakdownChart` is styled via `BreakdownStyle`:
 
 - `FillRune`: rune used to fill the bar (default is a space with colored backgrounds).
 - `SegmentGap`: number of empty cells between segments.
+- `LegendLayout`: compact (wrap) or expanded (one item per line).
+- `LegendItemSpacing`: spacing between legend items when using the compact layout.
 - `BarStyle`: optional base style applied to bar cells.
 - `DefaultSegmentColors`: optional palette used when a segment does not provide an explicit `Color`.
 
@@ -63,4 +65,3 @@ breakdown.Style(new BreakdownStyle
     SegmentGap = 0,
 });
 ```
-

doc/controls/index.md

@@ -66,7 +66,7 @@ This section documents the built-in controls provided by XenoAtom.Terminal.UI.
 - `doc/controls/progressbar.md`
 - `doc/controls/progresstaskgroup.md`
 - `doc/controls/spinner.md`
-- `doc/controls/breakdown.md`
+- `doc/controls/breakdownchart.md`
 - `doc/controls/barchart.md`
 - `doc/controls/linechart.md`
 - `doc/controls/sparkline.md`

doc/specs/controls_todo.md

@@ -19,7 +19,7 @@ Following this list, you will find compact specs for high and medium priority co
 | [x] | **High**   | **TextArea (multiline editor)**                       | Input                      | Multi-line editing                   | "Real app" workflows beyond TextBox               |
 | [x] | **High**   | **TreeView**                                          | Navigation                 | Hierarchical navigation              | Big UX upgrade over flat lists                    |
 | [x] | **High**   | **TooltipHost / Tooltip**                             | Overlays                   | Contextual help everywhere           | Modern UX + pairs well with complex UIs           |
-| [x] | **High**   | **Breakdown (segmented bar)**                         | Visualization              | Proportional parts of a whole        | Great dashboards + interactive UX                 |
+| [x] | **High**   | **BreakdownChart (segmented bar)**                    | Visualization              | Proportional parts of a whole        | Great dashboards + interactive UX                 |
 | [x] | **High**   | **Inline prompt API**                                 | Input/API                  | Interactive prompts (inline)         | Great CLI UX without full apps                    |
 | [x] | **High**   | **ColorPicker**                                       | Input                      | Picking colors + palettes            | Essential for theming/tools + great demo value    |
 | [x] | **Medium** | **LoadingIndicator / Spinner**                        | Status                     | Busy state (unknown duration)        | Complements ProgressBar                           |

doc/specs/remaining_controls_specs.md

@@ -173,18 +173,18 @@ Introduce `TooltipStyle`:
 - Add tests verifying:
   - Tooltip appears after delay and closes on leave.
   - Tooltip does not steal focus and does not intercept clicks.
-- Add ControlsDemo usage (e.g. tooltips in Button demo and in the Breakdown control when implemented).
+- Add ControlsDemo usage (e.g. tooltips in Button demo and in the BreakdownChart control when implemented).
 
 ---
 
-## Breakdown Control (Segmented Proportional Bar)
+## BreakdownChart Control (Segmented Proportional Bar)
 
 Goal: show proportional parts of a whole (resource usage, KPI breakdown, category proportions), with interactivity.
 
 ### Public API
 
 ```csharp
-public sealed class Breakdown : Visual
+public sealed class BreakdownChart : Visual
 {
     [Bindable] public BindableList<BreakdownSegment> Segments { get; }
 
@@ -218,10 +218,10 @@ In addition to the generator-provided fluent methods for bindable properties (e.
 the list replacement methods for `Segments(...)`, provide a convenience helper that appends a segment in one call:
 
 ```csharp
-public static partial class BreakdownExtensions
+public static partial class BreakdownChartExtensions
 {
-    public static Breakdown Segment(
-        this Breakdown breakdown,
+    public static BreakdownChart Segment(
+        this BreakdownChart breakdown,
         double value,
         Visual? label = null,
         Color? color = null,
@@ -246,6 +246,8 @@ Introduce `BreakdownStyle` (record):
 
 - `Rune FillRune` (default `' '`)
 - `int SegmentGap` (default 0 or 1)
+- `BreakdownLegendLayout LegendLayout` (default: Compact)
+- `int LegendItemSpacing` (spacing between items in Compact mode)
 - `Style? BarStyle` (base style used for segments)
 - `Style? LegendStyle` / `Style? LegendMutedStyle`
 - `IReadOnlyList<Color?>? DefaultSegmentColors` (optional override; otherwise derived from scheme)

samples/ControlsDemo/Demos/BarChartDemo.cs

@@ -31,7 +31,7 @@ public override Visual Build(DemoContext context)
                 new BarChartItem("Delta", 1) { BarColor = Colors.IndianRed });
 
         return new VStack(
-                DemoUi.Hint("BarChart displays items as horizontal bars. Use Value/Percentage toggles to control the right column."),
+                DemoUi.Hint("BarChart displays items as horizontal bars. Values are displayed near the end of each bar."),
                 new HStack(
                         new CheckBox().Text("Show values").IsChecked(showValues),
                         new CheckBox().Text("Show %").IsChecked(showPercentages))

samples/ControlsDemo/Demos/BreakdownDemo.cs

@@ -4,7 +4,7 @@
 
 namespace XenoAtom.Terminal.UI.ControlsDemo.Demos;
 
-[Demo("Breakdown", "Visualization", Description = "Segmented proportional bar with optional legend and tooltips.")]
+[Demo("BreakdownChart", "Visualization", Description = "Segmented proportional bar with optional legend and tooltips.")]
 public sealed class BreakdownDemo : ControlsDemoBase
 {
     public BreakdownDemo() : base(DemoSource.Get())
@@ -17,7 +17,7 @@ public override Visual Build(DemoContext context)
 
         var clicked = new State<string>("(none)");
 
-        var breakdown = new Breakdown()
+        var breakdown = new BreakdownChart()
             .Title("Disk usage")
             .ShowValues(true)
             .ShowPercentages(true)
@@ -29,11 +29,10 @@ public override Visual Build(DemoContext context)
         breakdown.SegmentClicked((_, e) => clicked.Value = $"Clicked segment {e.Index}: {breakdown.ToStringValue(e.Segment.Value)}");
 
         return new VStack(
-                DemoUi.Hint("Breakdown shows the proportional distribution of values as colored segments."),
+                DemoUi.Hint("BreakdownChart shows the proportional distribution of values as colored segments."),
                 breakdown.Style(new BreakdownStyle { SegmentGap = 1 }),
                 new Rule(),
                 new TextBlock(() => $"Last click: {clicked.Value}"))
             .Spacing(1);
     }
 }
-

src/XenoAtom.Terminal.UI.Tests/BreakdownTests.cs

@@ -4,6 +4,7 @@
 
 using XenoAtom.Terminal.UI.Controls;
 using XenoAtom.Terminal.UI.Hosting;
+using XenoAtom.Terminal.UI.Layout;
 using XenoAtom.Terminal.UI.Styling;
 using System.Text;
 
@@ -12,10 +13,30 @@ namespace XenoAtom.Terminal.UI.Tests;
 [TestClass]
 public sealed class BreakdownTests
 {
+    [TestMethod]
+    public void Breakdown_Legend_Reflow_DoesNot_Reparent_Segment_Label()
+    {
+        // This is a regression test for a crash where the legend was rebuilt by creating new visuals
+        // while reusing the same segment label instances, causing a "visual already has a parent" exception.
+        var breakdown = new BreakdownChart()
+            .ShowValues(true)
+            .ShowPercentages(true)
+            .Style(new BreakdownStyle { LegendLayout = BreakdownLegendLayout.Compact })
+            .Segment(42, "🗃️  Data")
+            .Segment(18, "📦  Packages")
+            .Segment(9, "🧹  Temp")
+            .Segment(3, "🧯  Other");
+
+        // Measure once with an unbounded width (common when hosted inside a ScrollViewer)...
+        breakdown.Measure(new LayoutConstraints(0, LayoutConstants.Infinite, 0, LayoutConstants.Infinite));
+        // ...then with a finite width (during arrange/layout pass).
+        breakdown.Measure(new LayoutConstraints(0, 40, 0, LayoutConstants.Infinite));
+    }
+
     [TestMethod]
     public void Breakdown_Distributes_Segment_Widths_LeftToRight()
     {
-        var breakdown = new Breakdown()
+        var breakdown = new BreakdownChart()
             .ShowValues(false)
             .ShowPercentages(false)
             .Style(new BreakdownStyle { FillRune = new Rune('#'), SegmentGap = 1 })
@@ -39,7 +60,7 @@ public void Breakdown_Raises_SegmentClicked()
     {
         var clickedIndex = -1;
 
-        var breakdown = new Breakdown()
+        var breakdown = new BreakdownChart()
             .ShowValues(false)
             .ShowPercentages(false)
             .Style(new BreakdownStyle { FillRune = new Rune('#'), SegmentGap = 1 })

src/XenoAtom.Terminal.UI.Tests/MarkupTextParserTests.cs

@@ -27,9 +27,7 @@ public void MarkupTextParser_Extracts_PlainText_And_Runs()
 
         Assert.AreEqual(1, runs[1].Start);
         Assert.AreEqual(1, runs[1].Length);
-        Assert.IsTrue(runs[1].Style.TryGetForeground(out var fgDefault));
-        Assert.AreEqual(ColorKind.Default, fgDefault.Kind);
-        Assert.IsTrue(runs[1].Style.TryGetBackground(out var bgDefault));
-        Assert.AreEqual(ColorKind.Default, bgDefault.Kind);
+        Assert.IsFalse(runs[1].Style.TryGetForeground(out _));
+        Assert.IsFalse(runs[1].Style.TryGetBackground(out _));
     }
 }