@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/layers/dms-ui/app/composables/chart/useApexChart.ts

@@ -2,10 +2,21 @@ import { computed } from "vue";
 import { APEX_TYPE_CONFIGS } from "./apexTypeConfigs";
 import { buildAnnotations } from "./apexAnnotations";
 import { buildPlotOptions } from "./apexPlotOptions";
+import { isReducedMotionActive } from "../../build/utils/accessibilityPreferences";
+import {
+  axisLabelStyle,
+  buildDataLabels,
+  buildGrid,
+  buildLegend,
+  buildMarkers,
+  buildTooltip,
+  readApexThemeColors,
+  type ApexThemeColors,
+} from "../../build/composables/chart/apexTheme";
 import {
   resolveChartColor,
   resolveChartColors,
-  readThemeBorder,
+  readThemeBorderAccented,
   readThemeHighlighted,
   readThemeMuted,
 } from "./useChartTheme";
@@ -22,26 +33,26 @@ import type {
 } from "./useApexChart.types";
 
 const DEFAULT_HEIGHT = 320;
-const DASHED_DASH_LENGTH = 4;
+const DASHED_DASH_LENGTH = 5;
 const DIMMED_OPACITY = 0.4;
 const FULL_OPACITY = 1;
 const PRIMARY_STROKE_WIDTH = 2.5;
-const COMPARISON_STROKE_WIDTH = 1.5;
-const AREA_PRIMARY_FROM = 0.32;
-const AREA_PRIMARY_TO = 0.02;
-const AREA_COMPARISON_FROM = 0.08;
-const AREA_COMPARISON_TO = 0;
-const AREA_GRADIENT_STOPS = [0, 90, 100];
+const COMPARISON_STROKE_WIDTH = 1.75;
+const AREA_PRIMARY_FROM = 0.26;
+const AREA_PRIMARY_TO = 0;
+// The comparison line of an area chart takes its stroke opacity from the
+// fill (it is a line series, see asComparisonLines): v2 draws it at 70%.
+const AREA_COMPARISON_OPACITY = 0.7;
+const AREA_GRADIENT_STOPS = [0, 100];
 const RADAR_FILL_DEFAULT = 0.4;
 const RANGE_AREA_FILL_DEFAULT = 0.28;
 const ANIMATION_SPEED_MS = 300;
-const GRID_DASH = 4;
-const GRID_PADDING = { left: 8, right: 8, top: 0, bottom: 0 };
-const AXIS_LABEL_FONT_SIZE = "11px";
 const HEIGHT_NUMBER_REGEX = /[^0-9]/g;
-const TOOLTIP_DATETIME_FORMAT = "dd MMM yyyy";
-const HOVER_MARKER_SIZE = 5;
 const CROSSHAIR_DASH = 3;
+const STACKED_SEGMENT_GAP = 1.5;
+const COMPARISON_LINE_TYPE = "line";
+const LINE_LEAD_TYPES: ChartType[] = ["line", "area"];
+const STACKED_GAP_TYPES: ChartType[] = ["bar", "column"];
 
 function parseHeight(height?: string): number {
   if (!height) return DEFAULT_HEIGHT;
@@ -49,6 +60,25 @@ function parseHeight(height?: string): number {
   return Number.isFinite(numeric) && numeric > 0 ? numeric : DEFAULT_HEIGHT;
 }
 
+/**
+ * Blank band Apex keeps under an axis chart (`chart.parentHeightOffset`, its
+ * own default): the drawn chart stands this much taller than its `height`.
+ * Circular charts get no band.
+ */
+export const AXIS_CHART_BOTTOM_OFFSET = 15;
+
+/**
+ * Height of the box a drawn chart occupies, as a CSS length: what a chart
+ * reserves from the first paint, so its skeleton and the drawn chart line up.
+ */
+export function chartFrameHeight(
+  height: string | undefined,
+  circular: boolean,
+): string {
+  const offset = circular ? 0 : AXIS_CHART_BOTTOM_OFFSET;
+  return `${parseHeight(height) + offset}px`;
+}
+
 interface CircularLabels {
   series: number[];
   labels: string[];
@@ -146,36 +176,31 @@ const FILL_BUILDERS: Partial<
   }),
 };
 
+/**
+ * Only the main series gets the fading area; the comparison is a line series
+ * whose solid "fill" sets its stroke opacity.
+ */
 function buildAreaFill(
   props: UseApexChartInput,
   comparison: ComparisonContext,
 ): Record<string, unknown> {
-  const primaryFrom = props.fillOpacity ?? AREA_PRIMARY_FROM;
-  if (!comparison.enabled) {
-    return {
-      type: "gradient",
-      gradient: {
-        shadeIntensity: 1,
-        type: "vertical",
-        opacityFrom: primaryFrom,
-        opacityTo: AREA_PRIMARY_TO,
-        stops: AREA_GRADIENT_STOPS,
-      },
-    };
-  }
+  const gradient = {
+    shadeIntensity: 1,
+    type: "vertical",
+    opacityFrom: props.fillOpacity ?? AREA_PRIMARY_FROM,
+    opacityTo: AREA_PRIMARY_TO,
+    stops: AREA_GRADIENT_STOPS,
+  };
+  if (!comparison.enabled) return { type: "gradient", gradient };
+  const isComparison = (index: number) => index >= comparison.startIndex;
   return {
-    type: "gradient",
-    gradient: {
-      shadeIntensity: 1,
-      type: "vertical",
-      opacityFrom: Array.from({ length: comparison.totalSeries }, (_, index) =>
-        index >= comparison.startIndex ? AREA_COMPARISON_FROM : primaryFrom,
-      ),
-      opacityTo: Array.from({ length: comparison.totalSeries }, (_, index) =>
-        index >= comparison.startIndex ? AREA_COMPARISON_TO : AREA_PRIMARY_TO,
-      ),
-      stops: AREA_GRADIENT_STOPS,
-    },
+    type: Array.from({ length: comparison.totalSeries }, (_, index) =>
+      isComparison(index) ? "solid" : "gradient",
+    ),
+    opacity: Array.from({ length: comparison.totalSeries }, (_, index) =>
+      isComparison(index) ? AREA_COMPARISON_OPACITY : FULL_OPACITY,
+    ),
+    gradient,
   };
 }
 
@@ -204,6 +229,7 @@ function buildStroke(
   config: (typeof APEX_TYPE_CONFIGS)[ChartType],
   comparisonDashArray: number[] | undefined,
   comparison: ComparisonContext,
+  surface: string,
 ): Record<string, unknown> {
   const stroke: Record<string, unknown> = { ...config.defaultStroke };
   if (input.smooth === false && stroke.curve) stroke.curve = "straight";
@@ -211,9 +237,29 @@ function buildStroke(
   stroke.width = buildStrokeWidths(input, comparison, stroke.width as number);
   stroke.lineCap = "round";
   if (comparisonDashArray) stroke.dashArray = comparisonDashArray;
+  applySegmentGap(stroke, input, config, surface);
   return stroke;
 }
 
+/**
+ * Donut slices and stacked segments are separated by a card-coloured stroke,
+ * which reads as a gap in both themes (Apex defaults it to white).
+ */
+function applySegmentGap(
+  stroke: Record<string, unknown>,
+  input: UseApexChartInput,
+  config: (typeof APEX_TYPE_CONFIGS)[ChartType],
+  surface: string,
+): void {
+  const isStackedBar =
+    !!input.stacked && STACKED_GAP_TYPES.includes(input.type);
+  if (!config.isCircular && !isStackedBar) return;
+  stroke.colors = [surface];
+  if (isStackedBar && input.strokeWidth === undefined) {
+    stroke.width = STACKED_SEGMENT_GAP;
+  }
+}
+
 function applySeriesStroke(
   options: Record<string, unknown>,
   series: ChartSeries[],
@@ -272,16 +318,14 @@ function buildAutoYRange(input: UseApexChartInput): Record<string, unknown> {
 
 function buildYAxis(
   input: UseApexChartInput,
-  muted: string,
+  theme: ApexThemeColors,
 ): Record<string, unknown> {
   const labelColor = HIGH_CONTRAST_YAXIS_TYPES.includes(input.type)
     ? readThemeHighlighted()
-    : muted;
+    : theme.dimmed;
   const yaxis: Record<string, unknown> = {
     ...buildAutoYRange(input),
-    labels: {
-      style: { colors: labelColor, fontSize: AXIS_LABEL_FONT_SIZE },
-    },
+    labels: { style: axisLabelStyle(labelColor, theme) },
   };
   if (input.yRange) {
     yaxis.min = input.yRange.min;
@@ -295,20 +339,22 @@ function buildYAxis(
 
 function buildXAxis(
   input: UseApexChartInput,
-  muted: string,
+  theme: ApexThemeColors,
 ): Record<string, unknown> {
   const settings = input.xAxis;
   const xaxis: Record<string, unknown> = {
     type: input.xaxisType ?? "category",
     axisBorder: { show: false },
     axisTicks: { show: false },
+    tooltip: { enabled: false },
     labels: {
-      style: { colors: muted, fontSize: AXIS_LABEL_FONT_SIZE },
+      style: axisLabelStyle(theme.dimmed, theme),
       datetimeUTC: false,
-      ...(settings?.rotate !== undefined ? { rotate: settings.rotate } : {}),
-      ...(settings?.hideOverlappingLabels !== undefined
-        ? { hideOverlappingLabels: settings.hideOverlappingLabels }
-        : {}),
+      // Labels that no longer fit (a phone, a narrow card) are thinned out
+      // instead of being rotated into an unreadable pile; an explicit
+      // setting still wins.
+      rotate: settings?.rotate ?? 0,
+      hideOverlappingLabels: settings?.hideOverlappingLabels ?? true,
       ...(input.xaxisType === "datetime" &&
       settings?.datetimeFormat !== undefined
         ? { format: settings.datetimeFormat }
@@ -316,7 +362,7 @@ function buildXAxis(
       ...(input.xAxisFormatter ? { formatter: input.xAxisFormatter } : {}),
     },
     crosshairs: {
-      stroke: { color: muted, dashArray: CROSSHAIR_DASH },
+      stroke: { color: readThemeBorderAccented(), dashArray: CROSSHAIR_DASH },
     },
   };
   if (settings?.tickAmount !== undefined)
@@ -385,10 +431,17 @@ function buildChartConfig(
   const chartConfig: Record<string, unknown> = {
     type: resolveApexType(input),
     height: heightPx,
+    parentHeightOffset: AXIS_CHART_BOTTOM_OFFSET,
     toolbar: { show: false },
     zoom: { enabled: false },
     stacked: input.stacked ?? false,
-    animations: { enabled: true, speed: ANIMATION_SPEED_MS },
+    // Reduced motion (Appearance setting or system) draws the chart at once.
+    // A change of the setting toggles an <html> class, which bumps the theme
+    // revision and so rebuilds these options.
+    animations: {
+      enabled: !isReducedMotionActive(),
+      speed: ANIMATION_SPEED_MS,
+    },
     fontFamily: "inherit",
     background: "transparent",
     foreColor: muted,
@@ -400,54 +453,6 @@ function buildChartConfig(
   return chartConfig;
 }
 
-function buildLegend(
-  input: UseApexChartInput,
-  isCircular: boolean,
-  muted: string,
-): Record<string, unknown> {
-  return {
-    show: input.showLegend ?? true,
-    position: isCircular ? "bottom" : "top",
-    horizontalAlign: "right",
-    labels: { colors: muted },
-  };
-}
-
-function buildGrid(
-  input: UseApexChartInput,
-  isCircular: boolean,
-  border: string,
-): Record<string, unknown> {
-  return {
-    show: !isCircular && (input.showGrid ?? true),
-    borderColor: border,
-    strokeDashArray: GRID_DASH,
-    padding: GRID_PADDING,
-    xaxis: { lines: { show: false } },
-    yaxis: { lines: { show: true } },
-  };
-}
-
-function buildTooltip(
-  input: UseApexChartInput,
-  config: (typeof APEX_TYPE_CONFIGS)[ChartType],
-): Record<string, unknown> {
-  const tooltip: Record<string, unknown> = {
-    enabled: input.showTooltip ?? true,
-    theme: "dark",
-    shared: config.sharedTooltip,
-    intersect: !config.sharedTooltip,
-    marker: { show: true },
-  };
-  if (input.xaxisType === "datetime") {
-    tooltip.x = { format: TOOLTIP_DATETIME_FORMAT };
-  }
-  if (input.yAxisFormatter) {
-    tooltip.y = { formatter: input.yAxisFormatter };
-  }
-  return tooltip;
-}
-
 function buildBaseOptions(
   input: UseApexChartInput,
   config: (typeof APEX_TYPE_CONFIGS)[ChartType],
@@ -455,21 +460,27 @@ function buildBaseOptions(
   comparisonDashArray: number[] | undefined,
   comparison: ComparisonContext,
 ): Record<string, unknown> {
-  const muted = readThemeMuted();
-  const border = readThemeBorder();
+  const theme = readApexThemeColors(readThemeMuted());
   return {
-    chart: buildChartConfig(input, muted),
+    chart: buildChartConfig(input, theme.muted),
     colors: seriesColors,
-    dataLabels: {
-      enabled: config.supportsDataLabels || input.showLabels === true,
-    },
-    stroke: buildStroke(input, config, comparisonDashArray, comparison),
-    legend: buildLegend(input, config.isCircular, muted),
+    dataLabels: buildDataLabels(
+      config.supportsDataLabels || input.showLabels === true,
+      theme,
+    ),
+    stroke: buildStroke(
+      input,
+      config,
+      comparisonDashArray,
+      comparison,
+      theme.surface,
+    ),
+    legend: buildLegend(input, config.isCircular, theme),
     tooltip: buildTooltip(input, config),
-    grid: buildGrid(input, config.isCircular, border),
-    xaxis: buildXAxis(input, muted),
-    yaxis: buildYAxis(input, muted),
-    markers: { size: 0, strokeWidth: 0, hover: { size: HOVER_MARKER_SIZE } },
+    grid: buildGrid(input, config.isCircular, theme),
+    xaxis: buildXAxis(input, theme),
+    yaxis: buildYAxis(input, theme),
+    markers: buildMarkers(input, input.series, seriesColors, theme),
   };
 }
 
@@ -605,11 +616,33 @@ function projectSeries(
     input.type === "mixed"
       ? applyMixedSeriesDefs(input.series, input.seriesDefs)
       : input.series;
-  return series.map((entry) =>
+  return asComparisonLines(series, input).map((entry) =>
     entry.color ? { ...entry, color: resolveChartColor(entry.color) } : entry,
   );
 }
 
+/**
+ * On an area chart the comparison is drawn as a bare line (v2): Apex takes a
+ * fill's opacity from an rgba colour over any fill setting, so an unfilled
+ * series is the only reliable way to keep the comparison from being painted.
+ */
+function asComparisonLines(
+  series: ChartSeries[],
+  input: UseApexChartInput,
+): ChartSeries[] {
+  const comparison = buildComparisonContext(
+    series.length,
+    input.comparisonSeriesCount,
+    false,
+  );
+  if (input.type !== "area" || !comparison.enabled) return series;
+  return series.map((entry, index) =>
+    index >= comparison.startIndex
+      ? { ...entry, type: entry.type ?? COMPARISON_LINE_TYPE }
+      : entry,
+  );
+}
+
 function resolveSeriesColorPalette(
   value: UseApexChartInput,
   cfg: (typeof APEX_TYPE_CONFIGS)[ChartType],
@@ -621,6 +654,17 @@ function resolveSeriesColorPalette(
   return resolveSeriesColors(series, baseColors);
 }
 
+/**
+ * Lines lead with the sparkline tone, deeper than the bright fill used by
+ * bars, so a thin stroke keeps its contrast on white.
+ */
+function withLineLead(value: UseApexChartInput, palette: string[]): string[] {
+  if (value.colors !== undefined || !LINE_LEAD_TYPES.includes(value.type)) {
+    return palette;
+  }
+  return [resolveChartColor("--dms-sparkline"), ...palette.slice(1)];
+}
+
 interface ChartOptionsContext {
   baseColors: string[];
   seriesColors: string[];
@@ -633,7 +677,7 @@ function buildChartOptionsContext(
   cfg: (typeof APEX_TYPE_CONFIGS)[ChartType],
   finalSeries: ChartSeries[],
 ): ChartOptionsContext {
-  const baseColors = resolveChartColors(value.colors);
+  const baseColors = withLineLead(value, resolveChartColors(value.colors));
   const seriesColors = resolveSeriesColorPalette(
     value,
     cfg,

package/frontend-vue/layers/dms-ui/app/composables/chart/useChartFetch.ts

@@ -17,6 +17,11 @@ export interface UseChartFetchOptions<T> {
 
 export interface UseChartFetchReturn<T> {
   data: Ref<T | null>;
+  /**
+   * A response for the current inputs is still to come: from the first paint
+   * until the first answer, and again from the moment the inputs change
+   * (period, watched state, realtime event) until the new answer lands.
+   */
   isLoading: Ref<boolean>;
   error: Ref<unknown>;
   refresh: () => Promise<void>;
@@ -24,9 +29,12 @@ export interface UseChartFetchReturn<T> {
 
 const DEBOUNCE_FRAME_MS = 180;
 const DEFAULT_HTTP_METHOD = "GET";
-// Matches usePeriodScope's own grace period before it warns about a missing
-// scope: past it, a card whose scope never registered stops claiming to load.
-const PENDING_SCOPE_GRACE_MS = 250;
+// How long a card waits for its period scope to register before it stops
+// claiming to load. The selector registers the scope from its own lazily
+// loaded chunk, which on a slow network lands seconds after the card mounts:
+// a short grace would drop the card to its empty state ("No data") while the
+// scope is merely late. Only a scope no selector ever registers reaches it.
+export const PENDING_SCOPE_TIMEOUT_MS = 10_000;
 
 function buildFinalUrl(
   url: string | undefined,
@@ -65,18 +73,28 @@ async function runFetch<T>(
   const url = buildFinalUrl(options.fetchUrl, scopeState, options.periodScope);
   if (!url) return;
   if (runner.activeAbort) runner.activeAbort.abort();
-  runner.activeAbort = new AbortController();
+  const controller = new AbortController();
+  runner.activeAbort = controller;
   isLoading.value = true;
   error.value = null;
   try {
-    data.value = await authFetch<T>(url, {
+    const response = await authFetch<T>(url, {
       method: options.fetchUrlMethod || DEFAULT_HTTP_METHOD,
-      signal: runner.activeAbort.signal,
+      signal: controller.signal,
     });
+    if (runner.activeAbort !== controller) return;
+    data.value = response;
   } catch (err) {
+    if (runner.activeAbort !== controller) return;
     if ((err as { name?: string })?.name !== "AbortError") error.value = err;
   } finally {
-    isLoading.value = false;
+    // A request a newer one superseded leaves the loading flag to that one:
+    // clearing it here would show the empty state while the newer answer is
+    // still on its way.
+    if (runner.activeAbort === controller) {
+      runner.activeAbort = null;
+      isLoading.value = false;
+    }
   }
 }
 
@@ -136,6 +154,7 @@ export function useChartFetch<T>(
 
   const refresh = async () => {
     if (runner.pendingTimer) clearTimeout(runner.pendingTimer);
+    runner.pendingTimer = null;
     await performFetch();
   };
 
@@ -143,45 +162,65 @@ export function useChartFetch<T>(
     `${scopeState.value?.key ?? ""}|${JSON.stringify(options.watchSource?.() ?? null)}`;
 
   const fetchScheduledInputs = () => {
+    runner.pendingTimer = null;
     runner.lastInputs = currentInputs();
     void performFetch();
   };
 
+  // A debounced refresh the inputs took back (a period changed and changed
+  // back) leaves nothing to wait for unless a request is still running.
+  const settleCancelledRefresh = (hadPending: boolean) => {
+    if (hadPending && !runner.activeAbort) isLoading.value = false;
+  };
+
   // A period scope registers during the PeriodSelector's setup, which lands
   // before or after a card's own mount depending on which chunk resolves
   // first. Either way both the watcher and onMounted end up looking at the
   // same freshly registered scope and each ask for a refresh; keying on the
   // inputs the last fetch was started for collapses that into one request.
-  const scheduleRefresh = () => {
+  const scheduleRefreshWith = (announcePending: boolean) => {
+    const hadPending = runner.pendingTimer !== null;
     if (runner.pendingTimer) clearTimeout(runner.pendingTimer);
-    if (options.periodScope && !scopeState.value) return;
+    runner.pendingTimer = null;
+    if (options.periodScope && !scopeState.value) {
+      settleCancelledRefresh(hadPending);
+      return;
+    }
     const inputs = currentInputs();
-    if (inputs === runner.lastInputs) return;
+    if (inputs === runner.lastInputs) {
+      settleCancelledRefresh(hadPending);
+      return;
+    }
     if (!runner.hasFetchedOnce) {
       runner.hasFetchedOnce = true;
       fetchScheduledInputs();
       return;
     }
+    // The values on screen belong to the previous inputs from now on: say so
+    // through the debounce as well, not only once the request leaves.
+    if (announcePending) isLoading.value = true;
     runner.pendingTimer = setTimeout(fetchScheduledInputs, DEBOUNCE_FRAME_MS);
   };
+  const scheduleRefresh = () => scheduleRefreshWith(true);
 
   // A realtime event means the data behind unchanged inputs moved, so it has
-  // to bypass the deduplication above.
+  // to bypass the deduplication above. The inputs did not change, so the
+  // values on screen stay current until the new answer replaces them.
   const refreshFromRealtime = () => {
     runner.lastInputs = null;
-    scheduleRefresh();
+    scheduleRefreshWith(false);
   };
 
   const fetchOnMount = () => {
     scheduleRefresh();
     if (runner.hasFetchedOnce) return;
-    // The scope has not registered yet, and may never. Give it the grace
-    // period usePeriodScope itself allows before it warns, then drop the
-    // loading state so a misconfigured scope shows its empty value rather
-    // than a skeleton that never resolves.
+    // The scope has not registered yet, and may never. Keep the skeleton
+    // while its selector may still be loading, then drop the loading state
+    // so a misconfigured scope shows its empty value rather than a skeleton
+    // that never resolves.
     setTimeout(() => {
       if (!runner.hasFetchedOnce) isLoading.value = false;
-    }, PENDING_SCOPE_GRACE_MS);
+    }, PENDING_SCOPE_TIMEOUT_MS);
   };
 
   if (options.fetchUrl) {

package/frontend-vue/layers/dms-ui/app/composables/chart/useChartTheme.ts

@@ -1,7 +1,10 @@
 const DEFAULT_COLOR_NAME = "primary";
 const SAFE_HEX_FALLBACK = "#7c3aed";
 const MUTED_FALLBACK = "#6b7280";
-const CHART_GRID_COLOR = "rgba(148, 163, 184, 0.25)";
+const GRID_FALLBACK = "rgba(148, 163, 184, 0.25)";
+const SURFACE_FALLBACK = "#ffffff";
+const MONO_FONT_FALLBACK = "ui-monospace, monospace";
+const MONO_FONT_VARIABLE = "--font-mono";
 const HEX_PREFIXES = ["#", "rgb", "hsl"];
 const SHADE_TOKEN =
   /^(primary|secondary|success|info|warning|error|neutral|accent)-(50|[1-9]00|950)$/;
@@ -9,12 +12,11 @@ const CSS_VARIABLE = /^--[\w-]+$/;
 const CSS_VARIABLE_FUNCTION = /^var\((--[\w-]+)\)$/;
 const COLOR_CHANNEL_MAX = 255;
 const DEFAULT_PALETTE = [
-  "primary",
-  "success",
-  "info",
-  "warning",
-  "error",
-  "secondary",
+  "--dms-chart-1",
+  "--dms-chart-2",
+  "--dms-chart-3",
+  "--dms-chart-4",
+  "--dms-chart-5",
 ];
 
 const COLOR_NAME_TO_VAR: Record<string, string> = {
@@ -52,12 +54,24 @@ function toApexColor(color: string, fallback: string): string {
   context.fillRect(0, 0, 1, 1);
   const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
   if (!alpha) return fallback;
+  // Apex reads the alpha of an rgba() series colour as its fill opacity,
+  // overriding fill.opacity and gradient stops, so opaque colours stay rgb().
+  if (alpha === COLOR_CHANNEL_MAX) return `rgb(${red}, ${green}, ${blue})`;
   return `rgba(${red}, ${green}, ${blue}, ${alpha / COLOR_CHANNEL_MAX})`;
 }
 
+/**
+ * The root class (light / dark) is part of the cache key: a page without a
+ * mounted chart has no theme observer to clear the cache when it flips, so a
+ * chart mounted afterwards would otherwise read the other theme's colours.
+ */
+function themeCacheScope(): string {
+  return document.documentElement?.className ?? "";
+}
+
 function probeCssColor(varName: string, fallback: string): string {
   if (typeof document === "undefined" || !document.body) return fallback;
-  const cacheKey = `${varName}:${fallback}`;
+  const cacheKey = `${themeCacheScope()}:${varName}:${fallback}`;
   const cached = colorProbeCache.get(cacheKey);
   if (cached) return cached;
   const probe = document.createElement("div");
@@ -114,6 +128,41 @@ export function readThemeHighlighted(): string {
   return readCssVariable("--ui-text-highlighted", "#ffffff");
 }
 
+/** Horizontal grid lines (v2 --chart-grid). */
 export function readThemeBorder(): string {
-  return CHART_GRID_COLOR;
+  return readCssVariable("--dms-chart-grid", GRID_FALLBACK);
+}
+
+/** Axis labels and quiet chart text. */
+export function readThemeDimmed(): string {
+  return readCssVariable("--ui-text-dimmed", MUTED_FALLBACK);
+}
+
+/** Crosshair and other hairlines one notch above the grid. */
+export function readThemeBorderAccented(): string {
+  return readCssVariable("--ui-border-accented", GRID_FALLBACK);
+}
+
+/** Card surface, used to ring markers and separate stacked segments. */
+export function readThemeSurface(): string {
+  return readCssVariable("--ui-bg", SURFACE_FALLBACK);
+}
+
+/** Band behind radial tracks and empty donut rings. */
+export function readThemeTrack(): string {
+  return readCssVariable("--dms-bg-muted", GRID_FALLBACK);
+}
+
+/**
+ * The mono font stack for SVG text: Apex writes it into a presentation
+ * attribute, which cannot resolve `var()`.
+ */
+export function readThemeMonoFont(): string {
+  if (typeof document === "undefined" || !document.documentElement) {
+    return MONO_FONT_FALLBACK;
+  }
+  const value = getComputedStyle(document.documentElement)
+    .getPropertyValue?.(MONO_FONT_VARIABLE)
+    ?.trim();
+  return value || MONO_FONT_FALLBACK;
 }

package/frontend-vue/layers/dms-ui/app/composables/confirm/index.ts

@@ -1,2 +1,3 @@
+export * from "./types";
 export * from "./useConfirm";
 export * from "./usePresenceEditWarning";