@optilogic/charts 1.3.10 → 1.4.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import * as React17 from 'react';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line, BarChart as BarChart$1, Bar, AreaChart as AreaChart$1, Area, ScatterChart as ScatterChart$1, ZAxis, Scatter, ComposedChart as ComposedChart$1, ReferenceLine, Cell, PieChart as PieChart$1, Pie, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, Sankey, Treemap, FunnelChart as FunnelChart$1, Funnel, LabelList, Layer, Rectangle } from 'recharts';
-import { cn } from '@optilogic/core';
+import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line, BarChart as BarChart$1, Bar, Cell, AreaChart as AreaChart$1, Area, ScatterChart as ScatterChart$1, ZAxis, Scatter, ComposedChart as ComposedChart$1, ReferenceLine, PieChart as PieChart$1, Pie, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, Sankey, Treemap, FunnelChart as FunnelChart$1, Funnel, LabelList, Layer, Rectangle } from 'recharts';
+import { cn, VisuallyHidden, computeScaleDomain, resolveCellFormat, resolveFormatColor } from '@optilogic/core';
 
 // src/shared/colors.ts
 var CHART_COLORS = [
@@ -211,6 +211,13 @@ function resolveLegendConfig(legend) {
   if (legend === true) return { position: "top", align: "right" };
   return legend;
 }
+function formatCell(value) {
+  if (value == null) return "";
+  if (typeof value === "number") return value.toLocaleString();
+  if (value instanceof Date) return value.toLocaleString();
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
 var ChartContainer = React17.forwardRef(function ChartContainer2({
   children,
   className,
@@ -219,8 +226,18 @@ var ChartContainer = React17.forwardRef(function ChartContainer2({
   empty,
   emptyMessage = "No data available",
   title,
-  description
+  description,
+  ariaLabel,
+  ariaDescription,
+  tableData,
+  tableColumns,
+  onRowActivate,
+  rowActionLabel
 }, ref) {
+  const descriptionId = React17.useId();
+  const accessibleName = ariaLabel ?? title;
+  const accessibleDescription = ariaDescription ?? description;
+  const hasTable = !loading && !empty && !!tableData && tableData.length > 0 && !!tableColumns && tableColumns.length > 0;
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), style: { height }, children: [
     (title || description) && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
       title && /* @__PURE__ */ jsx(
@@ -283,12 +300,51 @@ var ChartContainer = React17.forwardRef(function ChartContainer2({
         },
         children: emptyMessage
       }
-    ) : /* @__PURE__ */ jsx(
-      ResponsiveContainer,
+    ) : /* @__PURE__ */ jsxs(
+      "div",
       {
-        width: "100%",
-        height: title || description ? "calc(100% - 40px)" : "100%",
-        children
+        role: "img",
+        "aria-label": accessibleName,
+        "aria-describedby": accessibleDescription ? descriptionId : void 0,
+        className: "relative",
+        style: {
+          width: "100%",
+          height: title || description ? "calc(100% - 40px)" : "100%"
+        },
+        children: [
+          accessibleDescription && /* @__PURE__ */ jsx(VisuallyHidden, { as: "span", id: descriptionId, children: accessibleDescription }),
+          /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children }),
+          hasTable && /* @__PURE__ */ jsx(VisuallyHidden, { as: "div", children: /* @__PURE__ */ jsxs("table", { children: [
+            accessibleName && /* @__PURE__ */ jsx("caption", { children: accessibleName }),
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableColumns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", children: col.label }, col.key)) }) }),
+            /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, rowIndex) => {
+              const record = row;
+              return /* @__PURE__ */ jsx("tr", { children: tableColumns.map((col) => /* @__PURE__ */ jsx("td", { children: formatCell(record[col.key]) }, col.key)) }, rowIndex);
+            }) })
+          ] }) }),
+          hasTable && onRowActivate && /* @__PURE__ */ jsx(
+            "nav",
+            {
+              "aria-label": `${accessibleName ?? "Chart"} data point links`,
+              className: "sr-only focus-within:not-sr-only focus-within:absolute focus-within:z-20 focus-within:top-1 focus-within:left-1 focus-within:flex focus-within:max-h-[calc(100%-0.5rem)] focus-within:flex-col focus-within:gap-1 focus-within:overflow-auto focus-within:rounded-md focus-within:border focus-within:border-border focus-within:bg-popover focus-within:p-2 focus-within:shadow-md",
+              children: tableData.map((row, rowIndex) => {
+                const record = row;
+                const firstKey = tableColumns[0]?.key;
+                const label = rowActionLabel?.(row, rowIndex) ?? (firstKey ? formatCell(record[firstKey]) : `Row ${rowIndex + 1}`);
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onRowActivate(row, rowIndex),
+                    className: "rounded px-1 py-0.5 text-left text-sm text-foreground underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    children: label
+                  },
+                  rowIndex
+                );
+              })
+            }
+          )
+        ]
       }
     )
   ] });
@@ -341,6 +397,14 @@ function useLiveData(config = {}) {
 }
 
 // src/shared/formatters.ts
+function toCellValue(value) {
+  if (value == null) return null;
+  if (typeof value === "number" || typeof value === "string" || typeof value === "boolean") {
+    return value;
+  }
+  if (value instanceof Date) return value;
+  return null;
+}
 var compactThresholds = [
   [1e9, "B"],
   [1e6, "M"],
@@ -407,6 +471,13 @@ var LineChart = React17.forwardRef(
     const legendConfig = resolveLegendConfig(legend);
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableColumns = React17.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [xAxis.dataKey, xAxis.label, series]
+    );
     return /* @__PURE__ */ jsx(
       ChartContainer,
       {
@@ -415,6 +486,9 @@ var LineChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Line chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin, children: [
           gridConfig && /* @__PURE__ */ jsx(
             CartesianGrid,
@@ -509,7 +583,8 @@ var BarChart = React17.forwardRef(
     className,
     height = "100%",
     margin = { top: 8, right: 12, left: 0, bottom: 4 },
-    loading
+    loading,
+    onDataPointClick
   }, ref) => {
     const gridConfig = React17.useMemo(() => {
       if (grid === false) return null;
@@ -520,6 +595,36 @@ var BarChart = React17.forwardRef(
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
     const isHorizontal = layout === "horizontal";
+    const tableColumns = React17.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [xAxis.dataKey, xAxis.label, series]
+    );
+    const seriesScaleDomains = React17.useMemo(() => {
+      const domains = {};
+      for (const s of series) {
+        const cf = s.conditionalFormat;
+        if (cf?.type === "colorScale" && !cf.domain) {
+          domains[s.dataKey] = computeScaleDomain(
+            data.map((d) => toCellValue(d[s.dataKey]))
+          );
+        }
+      }
+      return domains;
+    }, [series, data]);
+    const resolveBarFill = (s, datum, fallback) => {
+      if (!s.conditionalFormat) return fallback;
+      const fmt = resolveCellFormat(
+        s.conditionalFormat,
+        toCellValue(datum[s.dataKey]),
+        datum,
+        seriesScaleDomains[s.dataKey]
+      );
+      const color = fmt?.background ?? fmt?.color;
+      return color ? resolveFormatColor(color) : fallback;
+    };
     return /* @__PURE__ */ jsx(
       ChartContainer,
       {
@@ -528,6 +633,13 @@ var BarChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Bar chart",
+        tableData: data,
+        tableColumns,
+        onRowActivate: onDataPointClick ? (_row, index) => {
+          const datum = data[index];
+          if (datum) onDataPointClick(datum, index);
+        } : void 0,
         children: /* @__PURE__ */ jsxs(
           BarChart$1,
           {
@@ -626,19 +738,36 @@ var BarChart = React17.forwardRef(
                   content: /* @__PURE__ */ jsx(ChartLegendContent, {})
                 }
               ),
-              series.map((s, index) => /* @__PURE__ */ jsx(
-                Bar,
-                {
-                  dataKey: s.dataKey,
-                  name: s.name,
-                  fill: getChartColor(index, s.color),
-                  stackId: s.stackId,
-                  radius: s.radius ?? 0,
-                  isAnimationActive: isAnimated,
-                  animationDuration: isAnimated ? 300 : 0
-                },
-                s.dataKey
-              ))
+              series.map((s, index) => {
+                const baseFill = getChartColor(index, s.color);
+                const interactive = !!onDataPointClick;
+                const perDatum = !!s.conditionalFormat || interactive;
+                return /* @__PURE__ */ jsx(
+                  Bar,
+                  {
+                    dataKey: s.dataKey,
+                    name: s.name,
+                    fill: baseFill,
+                    stackId: s.stackId,
+                    radius: s.radius ?? 0,
+                    isAnimationActive: isAnimated,
+                    animationDuration: isAnimated ? 300 : 0,
+                    onClick: interactive ? (_data, i) => {
+                      const datum = data[i];
+                      if (datum) onDataPointClick?.(datum, i);
+                    } : void 0,
+                    children: perDatum ? data.map((d, i) => /* @__PURE__ */ jsx(
+                      Cell,
+                      {
+                        fill: resolveBarFill(s, d, baseFill),
+                        cursor: interactive ? "pointer" : void 0
+                      },
+                      `${s.dataKey}-${i}`
+                    )) : null
+                  },
+                  s.dataKey
+                );
+              })
             ]
           }
         )
@@ -671,6 +800,13 @@ var AreaChart = React17.forwardRef(
     const legendConfig = resolveLegendConfig(legend);
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableColumns = React17.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [xAxis.dataKey, xAxis.label, series]
+    );
     return /* @__PURE__ */ jsx(
       ChartContainer,
       {
@@ -679,6 +815,9 @@ var AreaChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Area chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin, children: [
           /* @__PURE__ */ jsx("defs", { children: series.map((s, index) => {
             const color = getChartColor(index, s.color);
@@ -799,6 +938,22 @@ var ScatterChart = React17.forwardRef(
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
     const hasZ = series.some((s) => s.zDataKey);
+    const zDataKey = series.find((s) => s.zDataKey)?.zDataKey;
+    const tableColumns = React17.useMemo(() => {
+      const cols = [
+        { key: "__series", label: "Series" },
+        { key: xAxis.dataKey, label: xAxis.name ?? xAxis.label ?? xAxis.dataKey },
+        { key: "y", label: yAxis?.name ?? yAxis?.label ?? "y" }
+      ];
+      if (zDataKey) cols.push({ key: zDataKey, label: zDataKey });
+      return cols;
+    }, [xAxis.dataKey, xAxis.name, xAxis.label, yAxis?.name, yAxis?.label, zDataKey]);
+    const tableData = React17.useMemo(
+      () => series.flatMap(
+        (s) => (s.data ?? []).map((point) => ({ __series: s.name, ...point }))
+      ),
+      [series]
+    );
     return /* @__PURE__ */ jsx(
       ChartContainer,
       {
@@ -807,6 +962,9 @@ var ScatterChart = React17.forwardRef(
         height,
         loading,
         empty: !series.some((s) => s.data?.length),
+        ariaLabel: "Scatter chart",
+        tableData,
+        tableColumns,
         children: /* @__PURE__ */ jsxs(ScatterChart$1, { margin, children: [
           gridConfig && /* @__PURE__ */ jsx(
             CartesianGrid,
@@ -908,6 +1066,13 @@ var ComposedChart = React17.forwardRef(
     const legendConfig = resolveLegendConfig(legend);
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableColumns = React17.useMemo(
+      () => [
+        { key: xAxis.dataKey, label: xAxis.label ?? xAxis.dataKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [xAxis.dataKey, xAxis.label, series]
+    );
     return /* @__PURE__ */ jsx(
       ChartContainer,
       {
@@ -916,6 +1081,9 @@ var ComposedChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Composed chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxs(ComposedChart$1, { data, margin, children: [
           gridConfig && /* @__PURE__ */ jsx(
             CartesianGrid,
@@ -1094,6 +1262,13 @@ var WaterfallChart = React17.forwardRef(
     const posColor = positiveColor ?? getSemanticColor("positive");
     const negColor = negativeColor ?? getSemanticColor("negative");
     const totColor = totalColor ?? "hsl(var(--chart-3))";
+    const tableColumns = React17.useMemo(
+      () => [
+        { key: "name", label: xAxis?.label ?? "Name" },
+        { key: "value", label: yAxis?.label ?? "Value" }
+      ],
+      [xAxis?.label, yAxis?.label]
+    );
     return /* @__PURE__ */ jsx(
       ChartContainer,
       {
@@ -1102,6 +1277,9 @@ var WaterfallChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Waterfall chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxs(BarChart$1, { data: rows, margin, children: [
           /* @__PURE__ */ jsx(
             CartesianGrid,
@@ -1230,6 +1408,12 @@ var PieChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Pie chart",
+        tableData: data,
+        tableColumns: [
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxs(PieChart$1, { margin, children: [
           /* @__PURE__ */ jsx(
             Pie,
@@ -1302,6 +1486,12 @@ var DonutChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: centerLabel ?? "Donut chart",
+        tableData: data,
+        tableColumns: [
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxs(PieChart$1, { margin, children: [
           /* @__PURE__ */ jsx(
             Pie,
@@ -1394,6 +1584,13 @@ var RadarChart = React17.forwardRef(
     const legendConfig = resolveLegendConfig(legend);
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableColumns = React17.useMemo(
+      () => [
+        { key: categoryKey, label: categoryKey },
+        ...series.map((s) => ({ key: s.dataKey, label: s.name }))
+      ],
+      [categoryKey, series]
+    );
     return /* @__PURE__ */ jsx(
       ChartContainer,
       {
@@ -1402,6 +1599,9 @@ var RadarChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Radar chart",
+        tableData: data,
+        tableColumns,
         children: /* @__PURE__ */ jsxs(RadarChart$1, { data, margin, cx: "50%", cy: "50%", children: [
           /* @__PURE__ */ jsx(PolarGrid, { stroke: "hsl(var(--divider))" }),
           /* @__PURE__ */ jsx(
@@ -1487,6 +1687,12 @@ var RadialBarChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Radial bar chart",
+        tableData: data,
+        tableColumns: [
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxs(
           RadialBarChart$1,
           {
@@ -1604,6 +1810,14 @@ var SankeyChart = React17.forwardRef(
     loading
   }, ref) => {
     const tooltipProps = resolveTooltipProps(tooltip);
+    const tableData = React17.useMemo(
+      () => (data?.links ?? []).map((link) => ({
+        source: data.nodes[link.source]?.name ?? String(link.source),
+        target: data.nodes[link.target]?.name ?? String(link.target),
+        value: link.value
+      })),
+      [data]
+    );
     return /* @__PURE__ */ jsx(
       ChartContainer,
       {
@@ -1612,6 +1826,13 @@ var SankeyChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.nodes?.length,
+        ariaLabel: "Sankey diagram",
+        tableData,
+        tableColumns: [
+          { key: "source", label: "Source" },
+          { key: "target", label: "Target" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsx(
           Sankey,
           {
@@ -1629,6 +1850,20 @@ var SankeyChart = React17.forwardRef(
   }
 );
 SankeyChart.displayName = "SankeyChart";
+function flattenTreemap(nodes) {
+  const rows = [];
+  const walk = (items) => {
+    for (const item of items) {
+      if (item.children && item.children.length > 0) {
+        walk(item.children);
+      } else {
+        rows.push({ name: item.name, value: item.value ?? null });
+      }
+    }
+  };
+  walk(nodes);
+  return rows;
+}
 function TreemapContent({
   x,
   y,
@@ -1642,6 +1877,7 @@ function TreemapContent({
   const fill = color ?? getChartColor(index);
   const showLabel = width > 40 && height > 20;
   return /* @__PURE__ */ jsxs("g", { children: [
+    name && /* @__PURE__ */ jsx("title", { children: name }),
     /* @__PURE__ */ jsx(
       "rect",
       {
@@ -1682,11 +1918,11 @@ var TreemapChart = React17.forwardRef(
     live = false,
     className,
     height = "100%",
-    margin,
     loading
   }, ref) => {
     const tooltipProps = resolveTooltipProps(tooltip);
     const isAnimated = live ? false : animate;
+    const tableData = React17.useMemo(() => flattenTreemap(data), [data]);
     return /* @__PURE__ */ jsx(
       ChartContainer,
       {
@@ -1695,6 +1931,12 @@ var TreemapChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Treemap chart",
+        tableData,
+        tableColumns: [
+          { key: "name", label: "Name" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsx(
           Treemap,
           {
@@ -1734,6 +1976,12 @@ var FunnelChart = React17.forwardRef(
         height,
         loading,
         empty: !data?.length,
+        ariaLabel: "Funnel chart",
+        tableData: data,
+        tableColumns: [
+          { key: "name", label: "Stage" },
+          { key: "value", label: "Value" }
+        ],
         children: /* @__PURE__ */ jsxs(FunnelChart$1, { margin, children: [
           /* @__PURE__ */ jsxs(
             Funnel,
@@ -1974,9 +2222,13 @@ var GanttChart = React17.forwardRef(
                   const color = task.color ?? getChartColor(i);
                   const isHovered = hoveredId === task.id;
                   const progress = task.progress ?? 0;
+                  const taskLabel = `${task.name}, ${task.start.toLocaleDateString()} to ${task.end.toLocaleDateString()}${task.progress != null ? `, ${Math.round((task.progress ?? 0) * 100)}% complete` : ""}`;
                   return /* @__PURE__ */ jsxs(
                     "g",
                     {
+                      tabIndex: 0,
+                      role: onTaskClick ? "button" : "img",
+                      "aria-label": taskLabel,
                       onMouseEnter: (e) => {
                         setHoveredId(task.id);
                         const rect = containerRef.current?.getBoundingClientRect();
@@ -1990,7 +2242,22 @@ var GanttChart = React17.forwardRef(
                         setHoveredId(null);
                         setTooltipInfo(null);
                       },
+                      onFocus: () => {
+                        setHoveredId(task.id);
+                        setTooltipInfo({ task, x: barX, y: barY });
+                      },
+                      onBlur: () => {
+                        setHoveredId(null);
+                        setTooltipInfo(null);
+                      },
+                      onKeyDown: (e) => {
+                        if (onTaskClick && (e.key === "Enter" || e.key === " ")) {
+                          e.preventDefault();
+                          onTaskClick(task);
+                        }
+                      },
                       onClick: () => onTaskClick?.(task),
+                      className: "focus:outline-none focus-visible:[outline:2px_solid_hsl(var(--ring))]",
                       style: { cursor: onTaskClick ? "pointer" : "default" },
                       children: [
                         i % 2 === 0 && /* @__PURE__ */ jsx(
@@ -2199,6 +2466,7 @@ var HeatmapChart = React17.forwardRef(
   }, ref) {
     const containerRef = React17.useRef(null);
     const [hoveredCell, setHoveredCell] = React17.useState(null);
+    const [focusedKey, setFocusedKey] = React17.useState(null);
     const [tooltipPos, setTooltipPos] = React17.useState({ x: 0, y: 0 });
     const { valueMap, minVal, maxVal } = React17.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
@@ -2281,9 +2549,15 @@ var HeatmapChart = React17.forwardRef(
                 const cx = labelColWidth + xi * cellSize;
                 const cy = 28 + yi * cellSize;
                 const cellData = { x: xLabel, y: yLabel, value: val ?? 0 };
+                const isInteractive = !!onCellClick;
+                const valueText = val != null ? valueFormatter ? valueFormatter(val) : val.toLocaleString() : "no value";
+                const cellLabel = `${yLabel}, ${xLabel}: ${valueText}`;
                 return /* @__PURE__ */ jsxs(
                   "g",
                   {
+                    role: isInteractive ? "button" : "img",
+                    tabIndex: 0,
+                    "aria-label": cellLabel,
                     onMouseEnter: (e) => {
                       setHoveredCell(cellData);
                       const rect = containerRef.current?.getBoundingClientRect();
@@ -2293,8 +2567,26 @@ var HeatmapChart = React17.forwardRef(
                       });
                     },
                     onMouseLeave: () => setHoveredCell(null),
+                    onFocus: () => {
+                      setHoveredCell(cellData);
+                      setFocusedKey(key);
+                      setTooltipPos({
+                        x: cx + cellSize / 2,
+                        y: cy
+                      });
+                    },
+                    onBlur: () => {
+                      setHoveredCell(null);
+                      setFocusedKey(null);
+                    },
                     onClick: () => onCellClick?.(cellData),
-                    style: { cursor: onCellClick ? "pointer" : "default" },
+                    onKeyDown: (e) => {
+                      if (isInteractive && (e.key === "Enter" || e.key === " ")) {
+                        e.preventDefault();
+                        onCellClick?.(cellData);
+                      }
+                    },
+                    style: { cursor: onCellClick ? "pointer" : "default", outline: "none" },
                     children: [
                       /* @__PURE__ */ jsx(
                         "rect",
@@ -2306,8 +2598,8 @@ var HeatmapChart = React17.forwardRef(
                           rx: 3,
                           fill: val != null ? interpolateColor(t, colorScale) : "hsl(var(--muted))",
                           fillOpacity: val != null ? 0.85 : 0.3,
-                          stroke: hoveredCell?.x === xLabel && hoveredCell?.y === yLabel ? "hsl(var(--foreground))" : "none",
-                          strokeWidth: 1.5
+                          stroke: focusedKey === key ? "hsl(var(--ring))" : hoveredCell?.x === xLabel && hoveredCell?.y === yLabel ? "hsl(var(--foreground))" : "none",
+                          strokeWidth: focusedKey === key ? 2.5 : 1.5
                         }
                       ),
                       showValues && val != null && cellSize >= 32 && /* @__PURE__ */ jsx(
@@ -2937,6 +3229,18 @@ var labelStyle = {
   marginBottom: 3,
   display: "block"
 };
+var FOCUS_STYLE_ID = "opti-chart-builder-focus";
+var focusStyles = `
+.opti-chart-builder-control:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 1px;
+  border-radius: 4px;
+}
+`;
+function FocusStyles() {
+  return /* @__PURE__ */ jsx("style", { id: FOCUS_STYLE_ID, children: focusStyles });
+}
+var FOCUS_CLASS = "opti-chart-builder-control";
 var ChartBuilder = React17.memo(function ChartBuilder2({
   columns,
   data,
@@ -2979,6 +3283,7 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
       className: cn("flex gap-4", className),
       style: { minHeight: 400 },
       children: [
+        /* @__PURE__ */ jsx(FocusStyles, {}),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -2993,10 +3298,12 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
             children: [
               /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "hsl(var(--foreground))" }, children: "Chart Builder" }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Chart Type" }),
+                /* @__PURE__ */ jsx("label", { htmlFor: "cb-chart-type", style: labelStyle, children: "Chart Type" }),
                 /* @__PURE__ */ jsx(
                   "select",
                   {
+                    id: "cb-chart-type",
+                    className: FOCUS_CLASS,
                     style: selectStyle,
                     value: config.type,
                     onChange: (e) => setConfig((prev) => ({ ...prev, type: e.target.value })),
@@ -3005,10 +3312,12 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Category Axis" }),
+                /* @__PURE__ */ jsx("label", { htmlFor: "cb-category-axis", style: labelStyle, children: "Category Axis" }),
                 /* @__PURE__ */ jsx(
                   "select",
                   {
+                    id: "cb-category-axis",
+                    className: FOCUS_CLASS,
                     style: selectStyle,
                     value: config.categoryKey,
                     onChange: (e) => setConfig((prev) => ({ ...prev, categoryKey: e.target.value })),
@@ -3016,8 +3325,8 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Series" }),
+              /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Series", children: [
+                /* @__PURE__ */ jsx("div", { style: labelStyle, children: "Series" }),
                 config.series.map((s, i) => /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -3027,6 +3336,8 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
                       /* @__PURE__ */ jsx(
                         "select",
                         {
+                          className: FOCUS_CLASS,
+                          "aria-label": `Series ${i + 1} data column`,
                           style: { ...selectStyle, flex: 1 },
                           value: s.dataKey,
                           onChange: (e) => updateSeries(i, "dataKey", e.target.value),
@@ -3036,6 +3347,9 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
                       /* @__PURE__ */ jsx(
                         "button",
                         {
+                          type: "button",
+                          "aria-label": `Remove series ${i + 1}`,
+                          className: FOCUS_CLASS,
                           onClick: () => removeSeries(i),
                           style: {
                             padding: "2px 6px",
@@ -3057,6 +3371,8 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
                 /* @__PURE__ */ jsx(
                   "button",
                   {
+                    type: "button",
+                    className: FOCUS_CLASS,
                     onClick: addSeries,
                     style: {
                       width: "100%",
@@ -3074,10 +3390,12 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Legend" }),
+                /* @__PURE__ */ jsx("label", { htmlFor: "cb-legend", style: labelStyle, children: "Legend" }),
                 /* @__PURE__ */ jsx(
                   "select",
                   {
+                    id: "cb-legend",
+                    className: FOCUS_CLASS,
                     style: selectStyle,
                     value: config.legend,
                     onChange: (e) => setConfig((prev) => ({ ...prev, legend: e.target.value })),
@@ -3091,6 +3409,8 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
                   {
                     type: "checkbox",
                     id: "grid-toggle",
+                    "aria-label": "Show Grid",
+                    className: FOCUS_CLASS,
                     checked: config.grid,
                     onChange: (e) => setConfig((prev) => ({ ...prev, grid: e.target.checked }))
                   }
@@ -3103,6 +3423,8 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
                   {
                     type: "checkbox",
                     id: "animate-toggle",
+                    "aria-label": "Animate",
+                    className: FOCUS_CLASS,
                     checked: config.animate,
                     onChange: (e) => setConfig((prev) => ({ ...prev, animate: e.target.checked }))
                   }
@@ -3112,6 +3434,8 @@ var ChartBuilder = React17.memo(function ChartBuilder2({
               onSave && /* @__PURE__ */ jsx(
                 "button",
                 {
+                  type: "button",
+                  className: FOCUS_CLASS,
                   onClick: () => onSave(config),
                   style: {
                     marginTop: 8,