🏗️ Vanguard: Button Drop Shadow Parity Integration

.jules/vanguard.md

@@ -28,3 +28,6 @@
 ## 2026-06-11 - TabControl Selection Synchronization Parity
 **Observation:** The bifurcated architecture correctly synced navigation from the TreeView to the TabControl across all paradigms. However, bidirectional synchronization—where navigating via the TabControl updates the TreeView state—was absent in the Blazor deployment targets (Home.razor and Programmatic.razor).
 **Strategic Action:** Implemented identical `SelectionChanged` logic within the TabControl across the Blazor deployments to map active tabs back to the TreeView context. Introduced derived `@bind-IsSelected` boolean bindings on Razor TreeViewItems, driven from `_selectedTabIndex`, to keep navigation state synchronized between the TreeView and TabControl.
+## 2026-06-15 - Vanguard Parity Integration: Button Drop Shadow Support
+**Observation:** The core `Button` component supports a classic DOS-style drop shadow through the `ShadowStyle` and `ShadowBackground` dependency properties. However, this feature lacked declarative support within the Blazor wrapper (`TuiButton`) and was not effectively showcased across the cross-platform demonstration targets.
+**Strategic Action:** We explicitly exposed the `ShadowStyle` and `ShadowBackground` parameters on the `TuiButton` Blazor wrapper. We then utilized these properties across the unified dual-pane architecture to consistently deploy the "Show Dialog" button with a `Solid` shadow style and `ConsoleColor.DarkGray` background across the `demo.xaml`, `Program.cs`, `Home.razor`, and `Programmatic.razor` endpoints, guaranteeing absolute visual configuration parity.

plan.md

@@ -0,0 +1,15 @@
+1.  **Update TuiButton**:
+    - Modify `src/Tedd.TUI.Platform.Blazor/Components/TuiButton.cs` to add `ShadowStyle` and `ShadowBackground` parameters.
+    - Inside `ApplyProperties`, set `_button.ShadowStyle` and `_button.ShadowBackground` based on these parameters. Default `ShadowStyle` to `ButtonShadowStyle.None` and `ShadowBackground` to `ConsoleColor.Black`. wait, `ShadowBackground` is `TuiColor`. Blazor UI seems to use strings or enums. Let's look at `TuiBorder` for how colors are handled, or just use `TuiColor` or `ConsoleColor`. `ShadowBackground` in `Button` is `TuiColor`. Since `ConsoleColor` is used widely in Blazor Demo (e.g. `Foreground="ConsoleColor.Cyan"`), and `TuiColor` implicitly converts from `ConsoleColor`, we can use `ConsoleColor` as property type if we want, or `TuiColor` struct. `TuiLabel` uses `ConsoleColor?`. Let's see `TuiLabel.cs`.
+
+2.  **Update "Show Dialog" button in all 4 places**:
+    - `src/Tedd.TUI.Demo.Blazor/Pages/Home.razor`: Update `<TuiButton Text="Show Dialog" ...>` to include `ShadowStyle="ButtonShadowStyle.Solid"` and `ShadowBackground="ConsoleColor.DarkGray"`.
+    - `src/Tedd.TUI.Demo.Blazor/Pages/Programmatic.razor`: Update `var btnDialog = new Button { ... BoxStyle = BoxStyle.Single, ShadowStyle = ButtonShadowStyle.Solid, ShadowBackground = ConsoleColor.DarkGray };`.
+    - `src/Tedd.TUI.Demo/demo.xaml`: Update `<Button Content="Show Dialog" BoxStyle="Single" ...>` to include `ShadowStyle="Solid"` and `ShadowBackground="DarkGray"`.
+    - `src/Tedd.TUI.Demo/Program.cs`: Update `var btnDialog = new Button { ... BoxStyle = BoxStyle.Single, ShadowStyle = ButtonShadowStyle.Solid, ShadowBackground = ConsoleColor.DarkGray };`.
+
+3.  **Journaling**:
+    - Append an entry to `.jules/vanguard.md` about synchronizing the button's drop shadow functionality and parity implementation.
+
+4.  **Complete pre-commit steps to ensure proper testing, verification, review, and reflection are done.**
+5.  **Submit**.

src/Tedd.TUI.Demo.Blazor/Pages/Home.razor

@@ -105,7 +105,7 @@
                     <TuiStackPanel Orientation="Orientation.Horizontal">
                         <TuiButton Text="Submit" BoxStyle="BoxStyle.Double" OnClick="SubmitForm" />
                         <TuiLabel Text="  " />
-                        <TuiButton Text="Show Dialog" BoxStyle="BoxStyle.Single" OnClick="ShowDialog" />
+                        <TuiButton Text="Show Dialog" BoxStyle="BoxStyle.Single" OnClick="ShowDialog" ShadowStyle="ButtonShadowStyle.Solid" ShadowBackground="ConsoleColor.DarkGray" />
                     </TuiStackPanel>
                 </TuiStackPanel>
             </TuiTabItem>

src/Tedd.TUI.Demo.Blazor/Pages/Programmatic.razor

@@ -220,7 +220,7 @@
         btnPanel.AddChild(btnSubmit);
 
         // Dialog Box Demo
-        var btnDialog = new Button { Content = "Show Dialog", BoxStyle = BoxStyle.Single };
+        var btnDialog = new Button { Content = "Show Dialog", BoxStyle = BoxStyle.Single, ShadowStyle = ButtonShadowStyle.Solid, ShadowBackground = ConsoleColor.DarkGray };
         btnDialog.Click += (s, e) =>
         {
             var dialog = new DialogBox

src/Tedd.TUI.Demo/Program.cs

@@ -267,7 +267,7 @@ static void RunCodeDemo()
         btnPanel.AddChild(btnSubmit);
 
         // Dialog Box Demo
-        var btnDialog = new Button { Content = "Show Dialog", BoxStyle = BoxStyle.Single };
+        var btnDialog = new Button { Content = "Show Dialog", BoxStyle = BoxStyle.Single, ShadowStyle = ButtonShadowStyle.Solid, ShadowBackground = ConsoleColor.DarkGray };
         btnDialog.Click += (s, e) =>
         {
             var dialog = new DialogBox

src/Tedd.TUI.Demo/demo.xaml

@@ -106,7 +106,7 @@
              <StackPanel Orientation="Horizontal">
                 <Button Content="Submit" BoxStyle="Double" Click="OnSubmit"/>
                 <TextBlock Text="  "/>
-                <Button Content="Show Dialog" BoxStyle="Single" Click="OnShowDialog"/>
+                <Button Content="Show Dialog" BoxStyle="Single" Click="OnShowDialog" ShadowStyle="Solid" ShadowBackground="DarkGray"/>
              </StackPanel>
           </StackPanel>
        </TabItem>

src/Tedd.TUI.Platform.Blazor/Components/TuiButton.cs

@@ -11,6 +11,8 @@ public class TuiButton : TuiComponentBase
 
     [Parameter] public string Text { get; set; } = "";
     [Parameter] public BoxStyle BoxStyle { get; set; } = BoxStyle.Single;
+    [Parameter] public ButtonShadowStyle ShadowStyle { get; set; } = ButtonShadowStyle.None;
+    [Parameter] public ConsoleColor ShadowBackground { get; set; } = ConsoleColor.Black;
     [Parameter] public EventCallback OnClick { get; set; }
 
     protected override void OnInitialized()
@@ -27,5 +29,7 @@ protected override void ApplyProperties()
         base.ApplyProperties();
         _button.Content = Text;
         _button.BoxStyle = BoxStyle;
+        _button.ShadowStyle = ShadowStyle;
+        _button.ShadowBackground = ShadowBackground;
     }
 }

test_plan.md

@@ -0,0 +1,21 @@
+1. **Analyze Implementation Metrics**:
+   - The user requests updating the "Show Dialog" button to showcase the new drop shadow capability of the `Button` control.
+   - We need to modify the "Show Dialog" button across all four UI setups (`Tedd.TUI.Demo.Blazor/Pages/Home.razor`, `Tedd.TUI.Demo.Blazor/Pages/Programmatic.razor`, `Tedd.TUI.Demo/demo.xaml`, and `Tedd.TUI.Demo/Program.cs`) to have a `ShadowStyle` of `Solid` and `ShadowBackground` set to `ConsoleColor.DarkGray`.
+   - The XAML and Blazor versions will need support for these properties in their XAML definitions and Blazor wrappers. Wait, does Blazor wrapper support `ShadowStyle` and `ShadowBackground`? We need to check `Tedd.TUI.Platform.Blazor/Components/TuiButton.razor.cs`.
+
+2. **Verify Blazor Component for Button**:
+   - Let's read `TuiButton.razor.cs` to see if `ShadowStyle` and `ShadowBackground` are mapped. If not, we'll need to map them.
+
+3. **Check XAML Loader**:
+   - XAML loader usually uses Reflection to set properties, so as long as they are simple types or enums/colors, it should work.
+
+4. **Update the Demos**:
+   - `demo.xaml`: `<Button Content="Show Dialog" BoxStyle="Single" Click="OnShowDialog" ShadowStyle="Solid" ShadowBackground="DarkGray" />`
+   - `Program.cs` (`RunCodeDemo`): `new Button { Content = "Show Dialog", BoxStyle = BoxStyle.Single, ShadowStyle = ButtonShadowStyle.Solid, ShadowBackground = ConsoleColor.DarkGray }`
+   - `Home.razor`: `<TuiButton Text="Show Dialog" BoxStyle="BoxStyle.Single" OnClick="ShowDialog" ShadowStyle="ButtonShadowStyle.Solid" ShadowBackground="ConsoleColor.DarkGray" />` (Assuming TuiButton maps it).
+   - `Programmatic.razor`: `new Button { Content = "Show Dialog", BoxStyle = BoxStyle.Single, ShadowStyle = ButtonShadowStyle.Solid, ShadowBackground = ConsoleColor.DarkGray }`
+
+5. **Journaling**:
+   - Update `.jules/vanguard.md`.
+
+Let's check `TuiButton.cs` or `.razor`.