react-native-livechart 4.4.0 → 4.6.0

package/src/components/LiveChartSeries.tsx

@@ -6,12 +6,14 @@
  */
 import { Canvas, Group } from "@shopify/react-native-skia";
 import { useLayoutEffect, useState } from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import {
+import Animated, {
   useAnimatedReaction,
+  useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
+  withTiming,
   type SharedValue,
 } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
@@ -19,6 +21,7 @@ import {
   DEFAULT_ACCENT_COLOR,
   HOLD_TO_SCRUB_MS,
   MAX_MULTI_SERIES,
+  SCRUB_OVERLAY_FADE_MS,
 } from "../constants";
 import {
   lineColorsSignatureFromArray,
@@ -33,12 +36,14 @@ import {
   resolveGridStyle,
   resolveLeftEdgeFade,
   resolveLegend,
+  resolveLoading,
   resolveMarkerCluster,
   resolveMetrics,
   resolveMultiSeriesDot,
   resolveReturnToLiveMs,
   resolveScrub,
   resolveSelectionDot,
+  resolveTransitions,
   resolveXAxis,
   resolveYAxis,
   resolveZoom,
@@ -126,6 +131,8 @@ function useLiveChartSeriesController({
   timeWindow = 30,
   paused = false,
   loading = false,
+  transitions,
+  snapKey,
   smoothing = 0.08,
   exaggerate = false,
   nonNegative = false,
@@ -289,7 +296,18 @@ function useLiveChartSeriesController({
     return false;
   });
 
-  const reveal = useChartReveal(loading, hasData);
+  // Resolve the loading shell: null = not loading, else the styled config.
+  const loadingCfg = resolveLoading(loading);
+  const loadingActive = loadingCfg !== null;
+  // Multi-series is always lines, so only the reveal transition applies (no
+  // candle↔line crossfade); `transitions.mode` is accepted but inert here.
+  const transitionsCfg = resolveTransitions(transitions);
+  const reveal = useChartReveal(
+    loadingActive,
+    hasData,
+    false,
+    transitionsCfg.reveal,
+  );
 
   const effectiveSeries = useMultiSeriesReverseMorphInputs({
     series,
@@ -301,6 +319,7 @@ function useLiveChartSeriesController({
     series: effectiveSeries,
     timeWindow,
     paused,
+    snapKey,
     scrollEnabled: timeScrollEnabled,
     returnToLiveMs,
     smoothing,
@@ -453,6 +472,23 @@ function useLiveChartSeriesController({
 
   const backgroundColor = `rgb(${palette.bgRgb[0]}, ${palette.bgRgb[1]}, ${palette.bgRgb[2]})`;
 
+  // Fade markers + reference lines out while scrubbing when
+  // `scrub.hideOverlaysOnScrub` is set. Eased off the scrub-ACTIVE flag (not the
+  // crosshair edge fade, which would resurface them near the live dot); only a
+  // group opacity animates — the overlay draws stay intact. See `LiveChart`.
+  const fadeOverlaysOnScrub =
+    scrubCfg !== null && scrubCfg.hideOverlaysOnScrub === true;
+  const overlayScrubFade = useDerivedValue(() =>
+    fadeOverlaysOnScrub
+      ? withTiming(crosshair.scrubActive.get() ? 0 : 1, {
+          duration: SCRUB_OVERLAY_FADE_MS,
+        })
+      : 1,
+  );
+  const markerGroupOpacity = useDerivedValue(
+    () => reveal.dotOpacity.get() * overlayScrubFade.get(),
+  );
+
   return {
     // passthrough props the render needs
     series,
@@ -484,6 +520,11 @@ function useLiveChartSeriesController({
     // engine + reveal
     engine,
     reveal,
+    // loading shell styling (null → not loading)
+    loadingLineColor: loadingCfg?.color,
+    loadingStrokeWidth: loadingCfg?.strokeWidth,
+    loadingAmplitude: loadingCfg?.amplitude,
+    loadingSpeed: loadingCfg?.speed,
     effectiveSeries,
     layoutHeight,
     onLayout,
@@ -500,6 +541,8 @@ function useLiveChartSeriesController({
     markersActive,
     markersSV,
     markerClusterCfg,
+    markerGroupOpacity,
+    overlayScrubFade,
     renderMarker,
     // selection dot: resolved config + fallback color (the leading series' color)
     selectionDot: selectionDotCfg,
@@ -545,10 +588,16 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
     markersActive,
     markersSV,
     markerClusterCfg,
+    markerGroupOpacity,
+    overlayScrubFade,
     renderMarker,
     series,
     emptyText,
     metricsCfg,
+    loadingLineColor,
+    loadingStrokeWidth,
+    loadingAmplitude,
+    loadingSpeed,
   } = model;
 
   return (
@@ -570,18 +619,21 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
 
       {/* Index keys: reference lines are a positional array and two may share
           value + label (e.g. duplicate working orders at the same price), which a
-          content-derived key would collapse to one. */}
-      {allRefLines.map((rl, i) => (
-        <ReferenceLineOverlay
-          key={i}
-          engine={engine}
-          padding={effectivePadding}
-          line={rl}
-          palette={palette}
-          formatValue={formatValue}
-          font={skiaFont}
-        />
-      ))}
+          content-derived key would collapse to one. Fade group lets
+          `scrub.hideOverlaysOnScrub` ease the lines out while scrubbing. */}
+      <Group opacity={overlayScrubFade}>
+        {allRefLines.map((rl, i) => (
+          <ReferenceLineOverlay
+            key={i}
+            engine={engine}
+            padding={effectivePadding}
+            line={rl}
+            palette={palette}
+            formatValue={formatValue}
+            font={skiaFont}
+          />
+        ))}
+      </Group>
 
       {dotCfg.valueLine && (
         <Group opacity={reveal.lineOpacity}>
@@ -654,7 +706,7 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
       )}
 
       {markersActive && (
-        <Group opacity={reveal.dotOpacity}>
+        <Group opacity={markerGroupOpacity}>
           <MarkerOverlay
             markers={markersSV}
             engine={engine}
@@ -680,6 +732,10 @@ function SeriesChartStack({ model }: { model: LiveChartSeriesModel }) {
         strokeWidth={strokeWidth}
         badge={false}
         emptyMetrics={metricsCfg.emptyState}
+        lineColor={loadingLineColor}
+        lineStrokeWidth={loadingStrokeWidth}
+        waveAmplitude={loadingAmplitude}
+        waveSpeed={loadingSpeed}
       />
     </Group>
   );
@@ -726,10 +782,11 @@ function SeriesRefBadgeLayer({ model }: { model: LiveChartSeriesModel }) {
     formatValue,
     skiaFont,
     degenShakeTransform,
+    overlayScrubFade,
   } = model;
   if (allRefLines.length === 0) return null;
   return (
-    <Group transform={degenShakeTransform}>
+    <Group transform={degenShakeTransform} opacity={overlayScrubFade}>
       {allRefLines.map((rl, i) => (
         <ReferenceLineOverlay
           key={i}
@@ -778,8 +835,15 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
     markersSV,
     markerClusterCfg,
     renderMarker,
+    overlayScrubFade,
   } = model;
 
+  // Mirror the Skia overlay fade onto the RN custom-marker sibling so
+  // `scrub.hideOverlaysOnScrub` hides it with the Skia markers.
+  const overlayFadeStyle = useAnimatedStyle(() => ({
+    opacity: overlayScrubFade.get(),
+  }));
+
   // Extend the scrub dim past the plot's right edge to fully cover the series
   // dots (with their halo) and pulse rings, all centered on that edge. The
   // gutter reserves room beyond this for the value/Y-axis labels, drawn on top.
@@ -876,16 +940,23 @@ export function LiveChartSeries(props: LiveChartSeriesProps) {
           />
 
           {/* Custom-rendered markers — RN views floated over the canvas
-              (non-Skia), pinned to each marker's live position. */}
+              (non-Skia), pinned to each marker's live position. Box-none fade
+              wrapper so `scrub.hideOverlaysOnScrub` hides them with the Skia
+              markers (full-bleed; children keep their own absolute positions). */}
           {markersActive && renderMarker && (
-            <CustomMarkerOverlay
-              markers={markersSV}
-              renderMarker={renderMarker}
-              engine={engine}
-              padding={effectivePadding}
-              series={series}
-              cluster={markerClusterCfg}
-            />
+            <Animated.View
+              pointerEvents="box-none"
+              style={[StyleSheet.absoluteFill, overlayFadeStyle]}
+            >
+              <CustomMarkerOverlay
+                markers={markersSV}
+                renderMarker={renderMarker}
+                engine={engine}
+                padding={effectivePadding}
+                series={series}
+                cluster={markerClusterCfg}
+              />
+            </Animated.View>
           )}
         </View>
       </GestureDetector>

package/src/components/LoadingOverlay.tsx

@@ -62,6 +62,10 @@ export function LoadingOverlay({
   badgeTail = true,
   badgeMetrics = BADGE_METRICS_DEFAULTS,
   emptyMetrics = EMPTY_STATE_METRICS_DEFAULTS,
+  lineColor,
+  lineStrokeWidth,
+  waveAmplitude = 14,
+  waveSpeed = 1,
 }: {
   engine: ChartEngineLayout;
   padding: ChartPadding;
@@ -73,6 +77,14 @@ export function LoadingOverlay({
   isEmpty: SharedValue<boolean> | { value: boolean };
   emptyText: string;
   strokeWidth: number;
+  /** Loading squiggle + skeleton color. Omit → theme `gridLine`. */
+  lineColor?: string;
+  /** Loading squiggle stroke width. Omit → `strokeWidth`. */
+  lineStrokeWidth?: number;
+  /** Breathing-wave base amplitude (px). */
+  waveAmplitude?: number;
+  /** Breathing-wave speed multiplier. */
+  waveSpeed?: number;
   /** Mirror the badge prop so labels align with GridOverlay's label positions. */
   badge?: boolean;
   /** Whether the badge tail spike is shown; affects the left inset used for skeleton alignment. */
@@ -86,6 +98,11 @@ export function LoadingOverlay({
   const leftInset =
     badgeMetrics.dotGap + badgeTailAndCap(font.getSize(), badgeTail, badgeMetrics);
 
+  // Loading-shell color (squiggle + skeleton placeholders) and squiggle stroke,
+  // both overridable via `loading={{ color, strokeWidth }}`.
+  const loadingColor = lineColor ?? palette.gridLine;
+  const loadingStroke = lineStrokeWidth ?? strokeWidth;
+
   // Squiggly path — built into a reused PathBuilder and detach()-ed each frame.
   const squigglyBuilder = usePathBuilder();
 
@@ -100,6 +117,8 @@ export function LoadingOverlay({
       engine.canvasHeight.get(),
       padding,
       engine.timestamp.get(),
+      waveAmplitude,
+      waveSpeed,
     );
     return buildSplineDetached(b, pts);
   });
@@ -225,8 +244,8 @@ export function LoadingOverlay({
       <Path
         path={squigglyPath}
         style="stroke"
-        strokeWidth={strokeWidth}
-        color={palette.gridLine}
+        strokeWidth={loadingStroke}
+        color={loadingColor}
         strokeCap="round"
         strokeJoin="round"
       />
@@ -255,7 +274,7 @@ export function LoadingOverlay({
         width={RECT_W}
         height={RECT_H}
         r={RECT_R}
-        color={palette.gridLine}
+        color={loadingColor}
       />
       <RoundedRect
         x={lx}
@@ -263,7 +282,7 @@ export function LoadingOverlay({
         width={RECT_W}
         height={RECT_H}
         r={RECT_R}
-        color={palette.gridLine}
+        color={loadingColor}
       />
       <RoundedRect
         x={lx}
@@ -271,7 +290,7 @@ export function LoadingOverlay({
         width={RECT_W}
         height={RECT_H}
         r={RECT_R}
-        color={palette.gridLine}
+        color={loadingColor}
       />
       <RoundedRect
         x={lx}
@@ -279,7 +298,7 @@ export function LoadingOverlay({
         width={RECT_W}
         height={RECT_H}
         r={RECT_R}
-        color={palette.gridLine}
+        color={loadingColor}
       />
 
       {/* Empty state label */}

package/src/constants.ts

@@ -31,6 +31,23 @@ export const HOLD_TO_SCRUB_MS = 500;
  */
 export const RETURN_TO_LIVE_MS = 450;
 
+/**
+ * Duration (ms) of the fade applied to annotation overlays (markers + reference
+ * lines) when `scrub.hideOverlaysOnScrub` is on — how long they take to ease out as a
+ * scrub starts and back in on release. Driven by the scrub-active flag, eased on
+ * the UI thread. Shared by `LiveChart` and `LiveChartSeries`.
+ */
+export const SCRUB_OVERLAY_FADE_MS = 150;
+
+/**
+ * Base wave amplitude (px) of the breathing loading squiggle — it breathes
+ * between `0.4×` and `1.0×` this. Overridable via `loading={{ amplitude }}`.
+ */
+export const LOADING_WAVE_AMPLITUDE = 14;
+
+/** Default breathing-wave speed multiplier (`1` = built-in cadence). */
+export const LOADING_WAVE_SPEED = 1;
+
 // ─── Metric default tokens (single source of truth for LiveChartMetrics) ─────
 // The resolved `metrics` config (see resolveMetrics) is assembled from these
 // objects. Draw/worklet helpers default their metric params to the matching

package/src/core/liveChartEngineTick.ts

@@ -62,6 +62,17 @@ export interface EngineTickInput {
   windowBuffer?: number;
   /** When true, freeze the viewport timestamp and skip displayWindow lerp */
   paused?: boolean;
+  /**
+   * Settle the framing in this one frame instead of easing into it: the time
+   * window ({@link EngineTickMutable.displayWindow}), Y-range
+   * ({@link EngineTickMutable.displayMin}/{@link EngineTickMutable.displayMax}),
+   * and value ({@link EngineTickMutable.displayValue}/{@link EngineTickMutable.edgeValue})
+   * jump straight to their targets — `smoothing` is bypassed for this tick only.
+   * Set for the single frame after a `snapKey` change so a timeframe / dataset
+   * switch lands instantly while live ticks keep their normal smoothing. Leaves
+   * the timestamp / pan-scroll state untouched. See {@link LiveChartProps.snapKey}.
+   */
+  snap?: boolean;
   /**
    * Absolute right-edge time (unix seconds) to freeze the window at, or
    * `null`/`undefined` to follow the live edge. Set by the pan-scroll gesture
@@ -147,6 +158,10 @@ export function tickLiveChartEngineFrame(
   if (input.canvasWidth === 0 || input.canvasHeight === 0) return;
 
   const speed = input.smoothing;
+  // One-shot settle (snapKey change): collapse this frame's easing so the
+  // window / range / value land on target instantly, then normal smoothing
+  // resumes next frame. See `EngineTickInput.snap`.
+  const snap = input.snap === true;
   let target = input.targetValue;
   if (input.mode === "candle" && input.liveCandle) {
     target = input.liveCandle.close;
@@ -160,17 +175,16 @@ export function tickLiveChartEngineFrame(
     (1 - gapRatio) *
       (input.adaptiveSpeedBoost ?? MOTION_METRICS_DEFAULTS.adaptiveSpeedBoost);
 
-  state.displayValue = lerp(
-    state.displayValue,
-    target,
-    adaptiveSpeed,
-    input.dt,
-  );
+  state.displayValue = snap
+    ? target
+    : lerp(state.displayValue, target, adaptiveSpeed, input.dt);
 
   // Pinch-zoom: ease toward the zoom override when set, else the configured
   // window. Mirrors the viewEnd freeze above (width vs. right edge).
   const targetWindow = input.viewWindow ?? input.timeWindow;
-  state.displayWindow = lerp(state.displayWindow, targetWindow, speed, input.dt);
+  state.displayWindow = snap
+    ? targetWindow
+    : lerp(state.displayWindow, targetWindow, speed, input.dt);
 
   const winStart = state.timestamp - state.displayWindow;
 
@@ -292,13 +306,13 @@ export function tickLiveChartEngineFrame(
     const maxV = input.maxValue;
     if (maxV !== undefined && tMax > maxV) tMax = maxV;
 
-    if (tMin < state.displayMin) {
+    if (snap || tMin < state.displayMin) {
       state.displayMin = tMin;
     } else {
       state.displayMin = lerp(state.displayMin, tMin, speed, input.dt);
     }
 
-    if (tMax > state.displayMax) {
+    if (snap || tMax > state.displayMax) {
       state.displayMax = tMax;
     } else {
       state.displayMax = lerp(state.displayMax, tMax, speed, input.dt);
@@ -338,6 +352,8 @@ export function tickLiveChartEngineFrame(
       }
       if (elo > 0) edgeTarget = pts[elo - 1].value;
     }
-    state.edgeValue = lerp(state.edgeValue, edgeTarget, speed, input.dt);
+    state.edgeValue = snap
+      ? edgeTarget
+      : lerp(state.edgeValue, edgeTarget, speed, input.dt);
   }
 }

package/src/core/liveChartSeriesEngineTick.ts

@@ -50,6 +50,17 @@ export interface MultiEngineTickInput {
   /** Right-edge buffer as a fraction of the time window. */
   windowBuffer?: number;
   paused?: boolean;
+  /**
+   * Settle the framing in this one frame instead of easing into it: the time
+   * window, Y-range ({@link MultiEngineTickMutable.displayMin}/{@link MultiEngineTickMutable.displayMax}),
+   * and per-series tips ({@link MultiEngineTickMutable.displayValues}) jump
+   * straight to their targets — `smoothing` is bypassed for this tick only. Set
+   * for the single frame after a `snapKey` change so a timeframe / dataset switch
+   * lands instantly while live ticks keep their normal smoothing. Series-toggle
+   * opacities and the timestamp / pan-scroll state are left untouched. See
+   * {@link LiveChartSeriesProps.snapKey}.
+   */
+  snap?: boolean;
   /**
    * Absolute right-edge time (unix seconds) to freeze the window at, or
    * `null`/`undefined` to follow the live edge. Drives pan-scroll; takes
@@ -122,6 +133,9 @@ export function tickLiveChartSeriesEngineFrame(
   if (input.canvasWidth === 0 || input.canvasHeight === 0) return;
 
   const speed = input.smoothing;
+  // One-shot settle (snapKey change): collapse this frame's easing so the
+  // window / range / tips land on target instantly. See `MultiEngineTickInput.snap`.
+  const snap = input.snap === true;
   const series = input.series;
   const n = series.length;
 
@@ -138,7 +152,9 @@ export function tickLiveChartSeriesEngineFrame(
   // Pinch-zoom: ease toward the zoom override when set, else the configured
   // window (mirrors the single-series tick).
   const targetWindow = input.viewWindow ?? input.timeWindow;
-  state.displayWindow = lerp(state.displayWindow, targetWindow, speed, input.dt);
+  state.displayWindow = snap
+    ? targetWindow
+    : lerp(state.displayWindow, targetWindow, speed, input.dt);
 
   const winStart = state.timestamp - state.displayWindow;
   const range = state.displayMax - state.displayMin;
@@ -170,7 +186,9 @@ export function tickLiveChartSeriesEngineFrame(
       (1 - gapRatio) *
         (input.adaptiveSpeedBoost ??
           MOTION_METRICS_DEFAULTS.adaptiveSpeedBoost);
-    state.displayValues[i] = lerp(cur, target, adaptiveSpeed, input.dt);
+    state.displayValues[i] = snap
+      ? target
+      : lerp(cur, target, adaptiveSpeed, input.dt);
 
     const targetOp = series[i].visible !== false ? 1 : 0;
     state.opacities[i] = lerp(state.opacities[i], targetOp, speed, input.dt);
@@ -261,13 +279,13 @@ export function tickLiveChartSeriesEngineFrame(
     const maxV = input.maxValue;
     if (maxV !== undefined && tMax > maxV) tMax = maxV;
 
-    if (tMin < state.displayMin) {
+    if (snap || tMin < state.displayMin) {
       state.displayMin = tMin;
     } else {
       state.displayMin = lerp(state.displayMin, tMin, speed, input.dt);
     }
 
-    if (tMax > state.displayMax) {
+    if (snap || tMax > state.displayMax) {
       state.displayMax = tMax;
     } else {
       state.displayMax = lerp(state.displayMax, tMax, speed, input.dt);

package/src/core/resolveConfig.ts

@@ -14,6 +14,7 @@ import type {
   LineStyleConfig,
   LiveChartMetrics,
   LiveChartMetricsOverride,
+  LoadingConfig,
   MarkerClusterConfig,
   DotConfig,
   DotRingConfig,
@@ -29,6 +30,7 @@ import type {
   ThresholdConfig,
   ThresholdLineConfig,
   TradeEvent,
+  TransitionConfig,
   ValueLineConfig,
   VolumeConfig,
   XAxisConfig,
@@ -45,6 +47,8 @@ import {
   EMPTY_STATE_METRICS_DEFAULTS,
   FADE_EDGE_WIDTH,
   GRID_METRICS_DEFAULTS,
+  LOADING_WAVE_AMPLITUDE,
+  LOADING_WAVE_SPEED,
   MOTION_METRICS_DEFAULTS,
   RETURN_TO_LIVE_MS,
 } from "../constants";
@@ -165,6 +169,8 @@ export interface ResolvedScrubConfig {
   tooltipShowTime: boolean;
   /** Press-and-hold delay (ms) before scrubbing activates. 0 = immediate. */
   panGestureDelay: number;
+  /** Fade markers + reference lines out while scrubbing. */
+  hideOverlaysOnScrub: boolean;
 }
 
 export interface ResolvedScrubActionConfig {
@@ -477,6 +483,32 @@ export function resolveReturnToLiveMs(
   return d > 0 ? d : 0;
 }
 
+/**
+ * Resolved transition durations. `undefined` for a field means "use the
+ * component's built-in default" (so we don't duplicate the default constants
+ * here); a number is an explicit duration in ms (clamped to ≥ 0).
+ */
+export interface ResolvedTransitionConfig {
+  reveal: number | undefined;
+  mode: number | undefined;
+}
+
+const clampMs = (v: number | undefined): number | undefined =>
+  v == null ? undefined : v > 0 ? v : 0;
+
+/**
+ * Resolves the `transitions` prop. `false` → all transitions instant (`0`);
+ * `true` / omitted → defaults (both `undefined` = use the built-in durations);
+ * an object → per-transition overrides (an omitted field keeps its default).
+ */
+export function resolveTransitions(
+  prop: boolean | TransitionConfig | undefined,
+): ResolvedTransitionConfig {
+  if (prop === false) return { reveal: 0, mode: 0 };
+  if (prop == null || prop === true) return { reveal: undefined, mode: undefined };
+  return { reveal: clampMs(prop.reveal), mode: clampMs(prop.mode) };
+}
+
 const AXIS_LABEL_DEFAULTS: ResolvedAxisLabelConfig = {
   format: undefined,
   color: undefined,
@@ -571,6 +603,7 @@ const SCRUB_DEFAULTS: ResolvedScrubConfig = {
   tooltipShowValue: true,
   tooltipShowTime: true,
   panGestureDelay: 0,
+  hideOverlaysOnScrub: false,
 };
 
 /**
@@ -590,6 +623,36 @@ export function resolveScrub(
   return resolved;
 }
 
+export interface ResolvedLoadingConfig {
+  /** undefined → palette.gridLine */
+  color: string | undefined;
+  /** undefined → the chart's line strokeWidth */
+  strokeWidth: number | undefined;
+  /** Base breathing-wave amplitude (px). */
+  amplitude: number;
+  /** Breathing-wave speed multiplier. */
+  speed: number;
+}
+
+const LOADING_DEFAULTS: ResolvedLoadingConfig = {
+  color: undefined,
+  strokeWidth: undefined,
+  amplitude: LOADING_WAVE_AMPLITUDE,
+  speed: LOADING_WAVE_SPEED,
+};
+
+/**
+ * Resolves the `loading` prop to a fully-typed config or null (not loading).
+ * `true` → defaults (loading on, built-in look), object → merged with defaults
+ * (loading on, restyled), `false` / omitted → null. So a non-null result is the
+ * "is loading" flag and carries the resolved styling.
+ */
+export function resolveLoading(
+  prop: boolean | LoadingConfig | undefined,
+): ResolvedLoadingConfig | null {
+  return resolveToggle(prop, LOADING_DEFAULTS, false);
+}
+
 const SCRUB_ACTION_DEFAULTS: ResolvedScrubActionConfig = {
   icon: "+",
   background: undefined,