refactor(chart): extract common chart mark interaction logic

This change creates a reusable useChartMarkInteraction hook that consolidates chart hover state management, mark state calculation, and motion handling across all chart components:
- Extracts logic from useChartMarkTooltip and shared utility functions
- Provides unified getMarkState, getMarkMotion, and showMark helpers
- Updates bar, pie, heatmap, scatter, network, and sankey charts to use the new hook
- Reduces code duplication across chart components while standardizing hover/fade behavior

Author: Sayhi-bzb

agent-html/components/chart/README.md

@@ -179,6 +179,9 @@ Use visx primitives by responsibility:
 - `components/ui/chart.tsx` owns mark identity helpers. Discrete charts use
   `getChartMarkKey`, `getChartMarkPresence`, and `getChartMarkOpacity` instead
   of hand-built hover keys or local opacity branches.
+- `useChartMarkInteraction` is the default discrete-mark interaction protocol:
+  it owns mark key generation, mark state, mark motion props, hover writes, and
+  tooltip binding.
 - `BarChart`, `BarHChart`, `PieChart`, `HeatmapChart`, `NetworkChart`, and
   `SankeyChart` consume the shared hover protocol for highlighted and faded
   marks.

agent-html/components/chart/bar-chart.tsx

@@ -17,18 +17,14 @@ import {
   ChartTooltipContent,
   ChartXAxisGrid,
   ChartYAxisGrid,
-  chartMotion,
   createBandScale,
   createCartesianLayout,
   createLinearScale,
   getChartCssVariable,
-  getChartMarkKey,
-  getChartMarkOpacity,
-  getChartMarkPresence,
   getFiniteValues,
   getValue,
   isFiniteNumber,
-  useChartMarkTooltip,
+  useChartMarkInteraction,
 } from "../ui/chart"
 import { RoughRect } from "@/lib/rough-svg"
 
@@ -262,14 +258,14 @@ function BarChartCore<T>({
   const {
     currentTooltipData: tooltip,
     followTooltip,
+    getMarkKey,
+    getMarkMotion,
     hideTooltip,
-    hover,
-    setHover,
-    showTooltip: showMarkTooltip,
+    showMark,
     tooltipLeft,
     tooltipOpen,
     tooltipTop,
-  } = useChartMarkTooltip<TooltipState<T>, "bar">()
+  } = useChartMarkInteraction<TooltipState<T>, "bar">()
   const seriesKey = React.useMemo(() => Object.keys(config)[0] ?? "value", [config])
   const rows = React.useMemo(() => Array.from(data), [data])
 
@@ -362,27 +358,23 @@ function BarChartCore<T>({
                   }
 
                   const rect = model.getBarRect(datum, value)
-                  const key = getChartMarkKey("bar", category)
-                  const presence = getChartMarkPresence({
-                    hover,
-                    key,
-                  })
-                  const opacity = getChartMarkOpacity({ presence })
+                  const key = getMarkKey("bar", category)
+                  const markMotion = getMarkMotion({ key })
                   const showTooltip = (
                     event: React.PointerEvent<SVGRectElement>
                   ) => {
-                    setHover({ key, type: "bar" })
-                    showMarkTooltip(event, {
-                      datum,
+                    showMark({
+                      data: { datum },
+                      event,
+                      key,
+                      type: "bar",
                     })
                   }
 
                   return (
                     <g key={category}>
                       <ChartMotionGroup
-                        animate={{ opacity }}
-                        initial={false}
-                        transition={chartMotion.hover}
+                        {...markMotion}
                       >
                         {renderer === "rough" ? (
                           <RoughRect

agent-html/components/chart/heatmap-chart.tsx

@@ -14,14 +14,10 @@ import {
   ChartTooltip,
   ChartTooltipContent,
   ChartTooltipPanel,
-  chartMotion,
   getChartCssVariable,
-  getChartMarkKey,
-  getChartMarkOpacity,
-  getChartMarkPresence,
   getValue,
   isFiniteNumber,
-  useChartMarkTooltip,
+  useChartMarkInteraction,
 } from "../ui/chart"
 import { RoughCircle } from "@/lib/rough-svg"
 
@@ -133,14 +129,14 @@ export function HeatmapChart<T>({
   const {
     currentTooltipData: tooltip,
     followTooltip,
+    getMarkKey,
+    getMarkMotion,
     hideTooltip,
-    hover,
-    setHover,
-    showTooltip,
+    showMark,
     tooltipLeft,
     tooltipOpen,
     tooltipTop,
-  } = useChartMarkTooltip<TooltipState<T>, "cell">()
+  } = useChartMarkInteraction<TooltipState<T>, "cell">()
   const columns = React.useMemo(
     () =>
       createHeatmapColumns({
@@ -241,26 +237,20 @@ export function HeatmapChart<T>({
                     <>
                       {heatmap.flatMap((column) =>
                         column.map((cell) => {
-                          const key = getChartMarkKey(
+                          const key = getMarkKey(
                             "cell",
                             cell.datum.key,
                             cell.bin.key
                           )
-                          const presence = getChartMarkPresence({
-                            hover,
-                            key,
-                          })
-                          const opacity = getChartMarkOpacity({
+                          const markMotion = getMarkMotion({
                             baseOpacity: cell.opacity,
-                            presence,
+                            key,
                           })
 
                           return (
                             <g key={key}>
                               <ChartMotionGroup
-                                animate={{ opacity }}
-                                initial={false}
-                                transition={chartMotion.hover}
+                                {...markMotion}
                               >
                                 {renderer === "rough" ? (
                                   <RoughCircle
@@ -290,10 +280,14 @@ export function HeatmapChart<T>({
                                 cx={cell.cx}
                                 cy={cell.cy}
                                 onPointerEnter={(event) => {
-                                  setHover({ key, type: "cell" })
-                                  showTooltip(event, {
-                                    bin: cell.bin,
-                                    column: cell.datum,
+                                  showMark({
+                                    data: {
+                                      bin: cell.bin,
+                                      column: cell.datum,
+                                    },
+                                    event,
+                                    key,
+                                    type: "cell",
                                   })
                                 }}
                                 onPointerLeave={hideTooltip}