Merge pull request #147 from jongalloway/copilot/fix-tablist-invisibility-prism

Fix tablist variants invisible under Prism (monochrome palette)

Author: jongalloway

src/DiagramForge/Layout/DefaultLayoutEngine.TabList.cs

@@ -110,15 +110,24 @@ private static void LayoutTabListCards(
             theme.NodePadding * 2.5 + maxItemCount * descLineHeight + theme.NodePadding);
         double rowGap = Math.Max(theme.NodePadding * 1.6, 16);
 
-        string[] palette = theme.NodePalette is { Count: > 0 }
-            ? [.. theme.NodePalette]
-            : [theme.NodeFillColor];
+        IReadOnlyList<string> effectivePalette;
+        bool useFallbackPalette;
+        if (theme.NodePalette is { Count: > 0 })
+        {
+            effectivePalette = ThemePaletteResolver.ResolveEffectivePalette(theme);
+            useFallbackPalette = !ReferenceEquals(effectivePalette, theme.NodePalette);
+        }
+        else
+        {
+            effectivePalette = [theme.NodeFillColor];
+            useFallbackPalette = false;
+        }
 
         for (int i = 0; i < titleNodes.Count; i++)
         {
             var titleNode = titleNodes[i];
             double rowY = pad + titleOffset + i * (cardHeight + rowGap);
-            string catFill = palette[i % palette.Length];
+            string catFill = effectivePalette[i % effectivePalette.Count];
 
             // Accent block: vibrant saturated color
             string accentFill = ColorUtils.Vibrant(catFill, 2.5);
@@ -137,7 +146,8 @@ private static void LayoutTabListCards(
             titleNode.Label.FontSize = titleFontSize;
             titleNode.Label.FontWeight = "bold";
             titleNode.Label.Color = accentTextColor;
-            titleNode.Metadata["render:noGradient"] = true;
+            if (!useFallbackPalette)
+                titleNode.Metadata["render:noGradient"] = true;
             titleNode.Metadata["tablist:band"] = true;
             titleNode.Metadata["tablist:layout"] = "cards";
             titleNode.Metadata["tablist:accentWidth"] = accentWidth;
@@ -214,15 +224,17 @@ private static void LayoutTabListStacked(
             theme.NodePadding * 2 + titleFontSize * 1.3 + maxItemCount * descLineHeight + theme.NodePadding);
         double rowGap = 6; // Narrow gap for stacked infographic feel
 
-        string[] palette = theme.NodePalette is { Count: > 0 }
-            ? [.. theme.NodePalette]
-            : [theme.NodeFillColor];
+        IReadOnlyList<string> effectivePalette;
+        if (theme.NodePalette is { Count: > 0 })
+            effectivePalette = ThemePaletteResolver.ResolveEffectivePalette(theme);
+        else
+            effectivePalette = [theme.NodeFillColor];
 
         for (int i = 0; i < titleNodes.Count; i++)
         {
             var titleNode = titleNodes[i];
             double rowY = pad + titleOffset + i * (bandHeight + rowGap);
-            string catFill = palette[i % palette.Length];
+            string catFill = effectivePalette[i % effectivePalette.Count];
 
             // Number tab: vivid saturated color
             string tabFill = ColorUtils.Vibrant(catFill, 2.5);
@@ -245,6 +257,8 @@ private static void LayoutTabListStacked(
             titleNode.Label.FontSize = numberFontSize;
             titleNode.Label.FontWeight = "bold";
             titleNode.Label.Color = tabTextColor;
+            // Stacked renderer uses tablist:tabStroke/contentStroke directly; node-level
+            // gradient stroke is not consumed, so always suppress gradient generation.
             titleNode.Metadata["render:noGradient"] = true;
             titleNode.Metadata["tablist:band"] = true;
             titleNode.Metadata["tablist:layout"] = "stacked";
@@ -324,9 +338,11 @@ private static void LayoutTabListFlat(
         double totalWidth = accentLineWidth + accentLineGap + barWidth;
         double categoryGap = theme.NodePadding * 1.2;
 
-        string[] palette = theme.NodePalette is { Count: > 0 }
-            ? [.. theme.NodePalette]
-            : [theme.NodeFillColor];
+        IReadOnlyList<string> effectivePalette;
+        if (theme.NodePalette is { Count: > 0 })
+            effectivePalette = ThemePaletteResolver.ResolveEffectivePalette(theme);
+        else
+            effectivePalette = [theme.NodeFillColor];
 
         double curY = pad + titleOffset;
 
@@ -337,7 +353,7 @@ private static void LayoutTabListFlat(
             var items = itemsByCategory.TryGetValue(catIdx, out var list) ? list : [];
             int itemCount = items.Count;
 
-            string catFill = palette[i % palette.Length];
+            string catFill = effectivePalette[i % effectivePalette.Count];
             string titleBarFill = ColorUtils.Vibrant(catFill, 2.0);
             string titleBarTextColor = ColorUtils.ChooseTextColor(titleBarFill);
 
@@ -354,12 +370,14 @@ private static void LayoutTabListFlat(
             titleNode.Label.FontSize = titleFontSize;
             titleNode.Label.FontWeight = "bold";
             titleNode.Label.Color = titleBarTextColor;
+            // Flat renderer uses tablist:accentColor and StrokeColor="none" directly;
+            // node-level gradient stroke is not consumed, so always suppress gradient generation.
             titleNode.Metadata["render:noGradient"] = true;
             titleNode.Metadata["tablist:band"] = true;
             titleNode.Metadata["tablist:layout"] = "flat";
             titleNode.Metadata["tablist:accentLineWidth"] = accentLineWidth;
             titleNode.Metadata["tablist:accentLineGap"] = accentLineGap;
-            titleNode.Metadata["tablist:accentColor"] = ColorUtils.Vibrant(palette[0], 2.5);
+            titleNode.Metadata["tablist:accentColor"] = ColorUtils.Vibrant(effectivePalette[0], 2.5);
             titleNode.Metadata["tablist:barWidth"] = barWidth;
             titleNode.Metadata["tablist:titleBarHeight"] = titleBarHeight;
             titleNode.Metadata["tablist:descFontSize"] = descFontSize;

tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-cards-prism.expected.svg

@@ -0,0 +1,26 @@
+---
+theme: prism
+---
+diagram: tablist
+title: Cloud Architecture Layers
+categories:
+  - title: Presentation
+    items:
+      - Web frontend (React)
+      - Mobile clients (iOS, Android)
+      - CDN-cached static assets
+  - title: API Gateway
+    items:
+      - Rate limiting & auth
+      - Request routing
+      - Response caching
+  - title: Services
+    items:
+      - User service
+      - Order service
+      - Notification service
+  - title: Data
+    items:
+      - Relational DB (Postgres)
+      - Cache layer (Redis)
+      - Object storage (S3)

tests/DiagramForge.E2ETests/Fixtures/conceptual-tablist-cards-prism.input

@@ -0,0 +1,22 @@
+---
+theme: prism
+---
+diagram: tablist
+layout: flat
+title: Project Phases
+categories:
+  - title: Discovery
+    items:
+      - Stakeholder interviews
+      - Requirements gathering
+      - Competitive analysis
+  - title: Design
+    items:
+      - Wireframes & prototypes
+      - Design system setup
+      - Accessibility review
+  - title: Development
+    items:
+      - Sprint planning
+      - Feature implementation
+      - Code review process