feat: ✨ support the data_visualization block (line, bar, area, pie charts)

Adds the new Slack data_visualization Block Kit block introduced in the
2026-06-16 Block Kit release.

- Types: DataVisualizationBlock plus DataVizChart (cartesian line/bar/area
  via series + axis_config, and pie via segments) added to the Block union.
- Renderer: a dependency-free inline-SVG chart component covering line,
  grouped bar, stacked-style area, and pie. Handles multi-series, negative
  values (zero baseline), "nice" auto-scaled Y ticks, axis/category labels,
  a color-swatch legend, and Slack's accessible aria-label patterns. Works
  in both light and dark mode.
- Affordances: a "view as table" toggle and a CSV download, mirroring
  Slack's chart action buttons (SSR-safe).
- Docs/playground: readme Supported Blocks row and a charts fixture.
- Tests: renders the Block Kit example fixtures and locks in the h3 title,
  aria-labels, legend, axis labels, negative handling, and pie percentages.

https://claude.ai/code/session_018T7Lik8eFCV8DMtTckZC6a

Author: claude

playground/src/fixtures.ts

@@ -238,4 +238,119 @@ export const FIXTURES: Fixture[] = [
       },
     ],
   },
+  {
+    id: "data-visualization",
+    label: "Data visualization · charts",
+    blocks: [
+      {
+        type: "data_visualization",
+        block_id: "viz-line-multi",
+        title: "Weekly active users by platform",
+        chart: {
+          type: "line",
+          series: [
+            {
+              name: "Desktop",
+              data: [
+                { label: "Mon", value: 800 },
+                { label: "Tue", value: 920 },
+                { label: "Wed", value: 880 },
+                { label: "Thu", value: 1010 },
+                { label: "Fri", value: 1120 },
+              ],
+            },
+            {
+              name: "Mobile",
+              data: [
+                { label: "Mon", value: 400 },
+                { label: "Tue", value: 530 },
+                { label: "Wed", value: 500 },
+                { label: "Thu", value: 590 },
+                { label: "Fri", value: 600 },
+              ],
+            },
+          ],
+          axis_config: {
+            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+            x_label: "Day",
+            y_label: "Users",
+          },
+        },
+      },
+      {
+        type: "data_visualization",
+        block_id: "viz-bar-negative",
+        title: "Net headcount change",
+        chart: {
+          type: "bar",
+          series: [
+            {
+              name: "Delta",
+              data: [
+                { label: "Mon", value: 4 },
+                { label: "Tue", value: -2 },
+                { label: "Wed", value: 6 },
+                { label: "Thu", value: -1 },
+                { label: "Fri", value: 3 },
+              ],
+            },
+          ],
+          axis_config: {
+            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+            x_label: "Day",
+            y_label: "People (delta)",
+          },
+        },
+      },
+      {
+        type: "data_visualization",
+        block_id: "viz-area-multi",
+        title: "Concurrent users by platform",
+        chart: {
+          type: "area",
+          series: [
+            {
+              name: "Desktop",
+              data: [
+                { label: "Mon", value: 2800 },
+                { label: "Tue", value: 3000 },
+                { label: "Wed", value: 3400 },
+                { label: "Thu", value: 3200 },
+                { label: "Fri", value: 3500 },
+              ],
+            },
+            {
+              name: "Mobile",
+              data: [
+                { label: "Mon", value: 1400 },
+                { label: "Tue", value: 1500 },
+                { label: "Wed", value: 1700 },
+                { label: "Thu", value: 1600 },
+                { label: "Fri", value: 1800 },
+              ],
+            },
+          ],
+          axis_config: {
+            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+            x_label: "Day",
+            y_label: "Users",
+          },
+        },
+      },
+      {
+        type: "data_visualization",
+        block_id: "viz-pie-multi",
+        title: "Plan distribution by tier",
+        chart: {
+          type: "pie",
+          segments: [
+            { label: "Free", value: 4200 },
+            { label: "Pro", value: 2300 },
+            { label: "Business+", value: 1100 },
+            { label: "Enterprise", value: 480 },
+          ],
+        },
+      },
+    ],
+  },
 ];

readme.md

@@ -142,6 +142,7 @@ const blocks: Block[] = [
 | Markdown        | ✅ Full | Standard markdown with GFM (tables, task lists, code blocks) |
 | Plan            | ✅ Full | Sequential task display with status indicators               |
 | Task Card       | ✅ Full | Individual task with title, details, output, sources, status |
+| Data Visualization | ✅ Full | Line, bar, area, and pie charts with legend, axes, and "view as table" / CSV export |
 
 ## Supported Elements