MapleTechLabs · Makisuo · Sep 12, 2026 · Sep 12, 2026 · Sep 12, 2026 · Sep 12, 2026
diff --git a/apps/landing/src/components/live/LiveLogsVolumeChart.tsx b/apps/landing/src/components/live/LiveLogsVolumeChart.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react"
 import { barY, defineChart, stack } from "@tanstack/charts"
 import { scaleLinear, scaleTime } from "d3-scale"
-import { PlotFrame, dashedGridY, usePlotColors } from "@maple/ui/components/plot"
+import { PlotFrame, DASHED_Y_GRID, usePlotColors } from "@maple/ui/components/plot"
 
 import {
 	formatBucketTick,
@@ -90,7 +90,6 @@ export default function LiveLogsVolumeChart() {
 		() =>
 			defineChart({
 				marks: [
-					dashedGridY(),
 					barY(cells, {
 						x: (cell: SeverityCell) => cell.date,
 						y: (cell: SeverityCell) => cell.value,
@@ -120,6 +119,7 @@ export default function LiveLogsVolumeChart() {
 						},
 					},
 					y: {
+						grid: DASHED_Y_GRID,
 						scale: scaleLinear().domain([0, yMax]),
 						nice: true,
 						axis: {

diff --git a/apps/web/src/components/agent-sessions/tools/tool-detail-charts.tsx b/apps/web/src/components/agent-sessions/tools/tool-detail-charts.tsx
@@ -9,7 +9,7 @@ import {
 	UNBOUNDED_FOCUS_DISTANCE,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	linearYDomain,
 	minBarLength,
 	niceLinearDomain,
@@ -175,7 +175,6 @@ function Cell({
 		)
 		return defineChart({
 			marks: [
-				dashedGridY(),
 				barY(cells, {
 					x: (cell: BarCell) => cell.row.date,
 					y: (cell: BarCell) => lift(valueAt(cell.row, cell.key)),
@@ -196,6 +195,7 @@ function Cell({
 			scales: {
 				x: axis.xBand,
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: {
 						line: false,

diff --git a/apps/web/src/components/agent-sessions/tools/tool-series-chart.tsx b/apps/web/src/components/agent-sessions/tools/tool-series-chart.tsx
@@ -9,7 +9,7 @@ import {
 	UNBOUNDED_FOCUS_DISTANCE,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	linearYDomain,
 	minBarLength,
 	niceLinearDomain,
@@ -180,7 +180,6 @@ export function ToolSeriesChart({
 
 		return defineChart({
 			marks: [
-				dashedGridY(),
 				barY(cells, {
 					x: (cell: ToolBarCell) => cell.row.date,
 					y: (cell: ToolBarCell) => lift(valueAt(cell.row, cell.key)),
@@ -201,6 +200,7 @@ export function ToolSeriesChart({
 			scales: {
 				x: axis.xBand,
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: {
 						line: false,

diff --git a/apps/web/src/components/alerts/alert-rule-chart.tsx b/apps/web/src/components/alerts/alert-rule-chart.tsx
@@ -33,7 +33,7 @@ import {
 	bucketTimeScale,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	focusCrosshair,
 	resolvePlotColor,
 	roundCapDasharray,
@@ -484,7 +484,6 @@ export const AlertRuleChart = React.memo(function AlertRuleChart({
 		return defineChart({
 			gradients: [signalGradient],
 			marks: [
-				dashedGridY(),
 				// No-data windows. The Recharts original hatched these with an SVG
 				// `<pattern>`; the chart spec carries gradients but not patterns, so
 				// this is a flat muted wash at the hatch's own weight. It still reads
@@ -581,6 +580,7 @@ export const AlertRuleChart = React.memo(function AlertRuleChart({
 					},
 				},
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: {
 						line: false,

diff --git a/apps/web/src/components/analytics/analytics-traffic-chart.tsx b/apps/web/src/components/analytics/analytics-traffic-chart.tsx
@@ -11,7 +11,7 @@ import {
 	PlotTooltipBody,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	focusCrosshair,
 	focusDot,
 	resolvePlotColor,
@@ -232,7 +232,6 @@ export function AnalyticsTrafficChart({ metric, companion, source, syncId }: Ana
 				verticalGradient(`${gradientPrefix}-${entry.key}`, entry.color, 0.35, 0.02),
 			),
 			marks: [
-				dashedGridY(),
 				// Painting order is by magnitude — see `painted`. Each series is a
 				// filled band plus its own edge line, which is what one Recharts
 				// `<Area stroke fill>` drew.
@@ -284,6 +283,7 @@ export function AnalyticsTrafficChart({ metric, companion, source, syncId }: Ana
 					},
 				},
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear,
 					axis: {
 						line: false,

diff --git a/apps/web/src/components/anomalies/anomaly-timeseries-chart.tsx b/apps/web/src/components/anomalies/anomaly-timeseries-chart.tsx
@@ -10,7 +10,7 @@ import {
 	PlotTooltipBody,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	focusCrosshair,
 	focusDot,
 	resolvePlotColor,
@@ -126,7 +126,6 @@ export function AnomalyTimeseriesChart({
 		return defineChart({
 			gradients: [verticalGradient(gradientId, stroke, 0.3, 0.03)],
 			marks: [
-				dashedGridY(),
 				// The incident window. `decorative` so the shading never takes the
 				// pointer away from the series underneath it.
 				...(window
@@ -189,6 +188,7 @@ export function AnomalyTimeseriesChart({
 					},
 				},
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: { line: false, ticks: { size: 0, padding: 8, format: valueFormatter } },
 				},

diff --git a/apps/web/src/components/errors/issue-occurrence-chart.tsx b/apps/web/src/components/errors/issue-occurrence-chart.tsx
@@ -10,7 +10,7 @@ import {
 	PlotTooltipBody,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	integerTickValues,
 	linearYDomain,
 	minBarLength,
@@ -122,7 +122,6 @@ export function IssueOccurrenceChart({ data, severity = null, className }: Issue
 		() =>
 			defineChart({
 				marks: [
-					dashedGridY(),
 					barY(sorted, {
 						x: (point: TimeseriesPoint) => point.bucket,
 						y: (point: TimeseriesPoint) => liftCount(point.count),
@@ -144,6 +143,7 @@ export function IssueOccurrenceChart({ data, severity = null, className }: Issue
 						},
 					},
 					y: {
+						grid: DASHED_Y_GRID,
 						scale: scaleLinear().domain(yDomain),
 						axis: {
 							line: false,

diff --git a/apps/web/src/components/infra/cloudflare/cloudflare-zone-chart.tsx b/apps/web/src/components/infra/cloudflare/cloudflare-zone-chart.tsx
@@ -9,7 +9,7 @@ import {
 	PlotTooltipBody,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	focusCrosshair,
 	focusDot,
 	linearYDomain,
@@ -177,7 +177,6 @@ export function CloudflareZoneChart({
 
 		return defineChart({
 			marks: [
-				dashedGridY(),
 				...series.map((name) =>
 					lineY(data, {
 						id: name,
@@ -194,6 +193,7 @@ export function CloudflareZoneChart({
 			scales: {
 				x: axis.x,
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: {
 						line: false,

diff --git a/apps/web/src/components/infra/cloudflare/cloudflare-zone-detail-charts.tsx b/apps/web/src/components/infra/cloudflare/cloudflare-zone-detail-charts.tsx
@@ -8,7 +8,7 @@ import {
 	PlotTooltipBody,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	focusCrosshair,
 	focusDot,
 	linearYDomain,
@@ -206,7 +206,6 @@ export function StackedBreakdownChart({
 				verticalGradient(`${gradientPrefix}-${name.replace(/\W+/g, "_")}`, colorOf(name), 0.4, 0.05),
 			),
 			marks: [
-				dashedGridY(),
 				areaY(cells, {
 					x: (cell: BreakdownCell) => cell.date,
 					y: (cell: BreakdownCell) => cell.value,
@@ -223,6 +222,7 @@ export function StackedBreakdownChart({
 			scales: {
 				x: axis.x,
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: {
 						line: false,
@@ -442,7 +442,6 @@ export function CloudflareZoneLatencyChart({
 
 		return defineChart({
 			marks: [
-				dashedGridY(),
 				...activeSeries.map((entry) =>
 					lineY(data, {
 						id: entry.key,
@@ -463,6 +462,7 @@ export function CloudflareZoneLatencyChart({
 			scales: {
 				x: axis.x,
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: {
 						line: false,

diff --git a/apps/web/src/components/infra/planetscale/planetscale-chart.tsx b/apps/web/src/components/infra/planetscale/planetscale-chart.tsx
@@ -9,7 +9,7 @@ import {
 	PlotTooltipBody,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	focusCrosshair,
 	focusDot,
 	linearYDomain,
@@ -192,7 +192,6 @@ export function PlanetScaleChart({
 
 		return defineChart({
 			marks: [
-				dashedGridY(),
 				...chartEventMarkerMarks(placed, { yDomain }),
 				lineY(data, {
 					x: at,
@@ -207,6 +206,7 @@ export function PlanetScaleChart({
 			scales: {
 				x: axis.x,
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: {
 						line: false,

diff --git a/apps/web/src/components/infra/primitives/chart-event-markers.tsx b/apps/web/src/components/infra/primitives/chart-event-markers.tsx
@@ -131,7 +131,7 @@ export interface ChartEventMarkerOptions {
  *
  * ```tsx
  * defineChart({
- *   marks: [dashedGridY(), ...chartEventMarkerMarks(placed, { yDomain }), lineY(…)],
+ *   marks: [...chartEventMarkerMarks(placed, { yDomain }), lineY(…)],
  * })
  * ```
  *

diff --git a/apps/web/src/components/infra/primitives/infra-metric-chart.tsx b/apps/web/src/components/infra/primitives/infra-metric-chart.tsx
@@ -8,7 +8,7 @@ import {
 	PlotTooltipBody,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	focusCrosshair,
 	focusDot,
 	linearYDomain,
@@ -291,7 +291,6 @@ export function InfraMetricChart({
 				? series.map((name) => verticalGradient(gradientFor(name), colorOf(name), 0.45, 0.04))
 				: [],
 			marks: [
-				dashedGridY(),
 				// Labels sit at the domain's right end, whether that is the last row
 				// or a shared domain that outruns this chart's rows.
 				...thresholdRules(thresholds, {
@@ -304,6 +303,7 @@ export function InfraMetricChart({
 			scales: {
 				x: axis.x,
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: { line: false, ticks: { size: 0, padding: 8, format: tickFormatter } },
 				},

diff --git a/apps/web/src/components/logs/logs-volume-chart.tsx b/apps/web/src/components/logs/logs-volume-chart.tsx
@@ -10,7 +10,7 @@ import {
 	PlotTooltipBody,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	linearYDomain,
 	niceLinearDomain,
 	resolvePlotColor,
@@ -137,7 +137,6 @@ function LogsVolumePlot({
 
 		return defineChart({
 			marks: [
-				dashedGridY(),
 				barY(cells, {
 					x: (cell: SeverityCell) => cell.bucket,
 					y: (cell: SeverityCell) => cell.value,
@@ -179,6 +178,7 @@ function LogsVolumePlot({
 					},
 				},
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain(yDomain),
 					axis: {
 						line: false,

diff --git a/apps/web/src/components/settings/spend-chart.tsx b/apps/web/src/components/settings/spend-chart.tsx
@@ -10,7 +10,7 @@ import {
 	PlotTooltipBody,
 	createTooltipFocusStore,
 	cursorTooltip,
-	dashedGridY,
+	DASHED_Y_GRID,
 	focusCrosshair,
 	resolvePlotColor,
 	usePlotChromeColors,
@@ -176,7 +176,6 @@ export function SpendChart({ model, daily }: { model: SpendModel; daily: DailySp
 
 		return defineChart({
 			marks: [
-				dashedGridY(),
 				areaY(cells, {
 					x: (cell: SpendCell) => cell.point.date,
 					y: (cell: SpendCell) => cell.value,
@@ -253,6 +252,7 @@ export function SpendChart({ model, daily }: { model: SpendModel; daily: DailySp
 					},
 				},
 				y: {
+					grid: DASHED_Y_GRID,
 					scale: scaleLinear().domain([0, yMax]),
 					axis: {
 						line: false,