layerchart 2.0.0-next.6 → 2.0.0-next.61

package/dist/components/tooltip/TooltipContext.svelte

@@ -1,50 +1,21 @@
 <script lang="ts" module>
-  import { Context } from 'runed';
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { Without } from '../../utils/types.js';
+  import { asAny, type Without } from '../../utils/types.js';
+  import type { TooltipState as TooltipStateType } from '../../states/tooltip.svelte.js';
+  import type { Accessor } from '../../utils/common.js';
 
-  const _TooltipContext = new Context<TooltipContextValue>('TooltipContext');
-
-  type TooltipMode =
-    | 'bisect-x'
-    | 'bisect-y'
+  export type TooltipMode =
+    | 'bisect-x' // requires values to be sorted
+    | 'bisect-y' // requires values to be sorted
     | 'band'
-    | 'bisect-band'
+    | 'bisect-band' // requires values to be sorted
     | 'bounds'
     | 'voronoi'
     | 'quadtree'
+    | 'quadtree-x' // ignores y values (constant 0)
+    | 'quadtree-y' // ignores x values (constant 0)
     | 'manual';
 
-  export type TooltipContextValue<T = any> = {
-    x: number;
-    y: number;
-    data: T | null;
-    payload: TooltipPayload[];
-    show(e: PointerEvent, tooltipData?: any, payload?: TooltipPayload): void;
-    hide(e?: PointerEvent): void;
-    mode: TooltipMode;
-    isHoveringTooltipArea: boolean;
-    isHoveringTooltipContent: boolean;
-  };
-
-  //   const defaultContext = {
-  //     x: 0,
-  //     y: 0,
-  //     data: null as any,
-  //     payload: [],
-  //     show: () => {},
-  //     hide: () => {},
-  //     mode: 'manual',
-  //   } as TooltipContextValue;
-
-  export function getTooltipContext<T = any>() {
-    return _TooltipContext.get() as TooltipContextValue<T>;
-  }
-
-  function setTooltipContext<T = any>(tooltip: TooltipContextValue<T>) {
-    return _TooltipContext.set(tooltip) as TooltipContextValue<T>;
-  }
-
   type TooltipContextPropsWithoutHTML<T = any> = {
     /**
      * The tooltip interaction mode
@@ -71,12 +42,35 @@
      */
     locked?: boolean;
 
+    /**
+     * Controls the touch event behavior on the tooltip container.
+     * By default uses `pan-y` to allow verticle scrolling but horizontal scrubbing.
+     * Use `none` to disable all touch events (useful for improved transform/geo charts interactions)
+     * @default 'pan-y'
+     */
+    touchEvents?: 'none' | 'pan-x' | 'pan-y' | 'auto';
+
     /**
      * quadtree search or voronoi clip radius
      * @default Infinity
      */
     radius?: number;
 
+    /**
+     * Override the `x` accessor used for quadtree/voronoi hit detection.
+     * Useful when the chart's `x` accessor returns an array of values and you
+     * want hit detection at a specific endpoint.
+     *
+     * Accepts a string property name (e.g. `'POP_2015'`) or a function.
+     */
+    x?: Accessor;
+
+    /**
+     * Override the `y` accessor used for quadtree/voronoi hit detection.
+     * See `x` above.
+     */
+    y?: Accessor;
+
     /**
      * Enable debug view (show hit targets, etc)
      * @default false
@@ -93,7 +87,7 @@
      * Exposed to allow binding in Chart
      * @default { x: 0, y: 0, data: null, show: showTooltip, hide: hideTooltip, mode }
      */
-    tooltipContext?: TooltipContextValue<T>;
+    state?: TooltipStateType<T>;
 
     /**
      * Delay in ms before hiding tooltip
@@ -108,7 +102,7 @@
      */
     ref?: HTMLElement;
 
-    children?: Snippet<[{ tooltipContext: TooltipContextValue<T> }]>;
+    children?: Snippet<[{ state: TooltipStateType<T> }]>;
   };
 
   export type TooltipContextProps<T = any> = TooltipContextPropsWithoutHTML<T> &
@@ -118,42 +112,47 @@
 <script lang="ts" generics="TData = any">
   import type { Snippet } from 'svelte';
   import { bisector, max, min } from 'd3-array';
-  import { quadtree as d3Quadtree, type Quadtree } from 'd3-quadtree';
+  // d3-quadtree (used only for quadtree* tooltip modes) is dynamically
+  // imported inside the $effect below so non-quadtree users don't pay for it.
+  import type { Quadtree } from 'd3-quadtree';
   import { sortFunc, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
-  import { getChartContext } from '../Chart.svelte';
-  import { getGeoContext } from '../GeoContext.svelte';
-  import Svg from './../layout/Svg.svelte';
-  import Arc from '../Arc.svelte';
-  import ChartClipPath from './../ChartClipPath.svelte';
-  import Voronoi from './../Voronoi.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import Svg from './../layers/Svg.svelte';
+  import ChartClipPath from '../ChartClipPath/ChartClipPath.svelte';
+  // Voronoi (used only when mode === 'voronoi') and Arc (used only for radial
+  // bounds/band mode) are dynamically imported inline in the markup via
+  // `{#await import(...)}` so non-voronoi/non-radial tooltip users don't pay
+  // for them. Voronoi alone pulls in d3-geo-voronoi + d3-geo.
 
-  import { isScaleBand, scaleInvert } from '../../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime, scaleInvert } from '../../utils/scales.svelte.js';
   import { cartesianToPolar } from '../../utils/math.js';
   import { quadtreeRects } from '../../utils/quadtree.js';
   import { raise } from '../../utils/chart.js';
-  import {
-    getTooltipMetaContext,
-    getTooltipPayload,
-    type TooltipPayload,
-  } from './tooltipMetaContext.js';
-  import { layerClass } from '../../utils/attributes.js';
+  import { TooltipState } from '../../states/tooltip.svelte.js';
+  import { accessor, findRelatedData } from '../../utils/common.js';
+  import { getSettings } from '../../contexts/settings.js';
 
   const ctx = getChartContext<any>();
-  const geoCtx = getGeoContext();
+  const geo = getGeoContext();
+  const settings = getSettings();
 
   let {
     ref: refProp = $bindable(),
-    debug = false,
+    debug: debugProp,
     findTooltipData = 'closest',
     hideDelay = 0,
     locked = false,
+    touchEvents = 'pan-y',
     mode = 'manual',
     onclick = () => {},
     radius = Infinity,
     raiseTarget = false,
-    tooltipContext: tooltipContextProp = $bindable() as TooltipContextValue<TData>,
+    state: stateProp = $bindable() as TooltipStateType<TData>,
+    x: xProp,
+    y: yProp,
     children,
   }: TooltipContextProps<TData> = $props();
 
@@ -162,52 +161,10 @@
     refProp = ref;
   });
 
-  let x = $state(0);
-  let y = $state(0);
-  let data = $state(null);
-  let payload = $state<TooltipPayload[]>([]);
-
-  /**
-   * If we're hovering the tooltip area on the chart
-   */
-  let isHoveringTooltipArea = $state(false);
-
-  /**
-   * If we're hovering the tooltip content container
-   */
-  let isHoveringTooltipContent = $state(false);
-
-  const metaCtx = getTooltipMetaContext();
-
-  const tooltipContext: TooltipContextValue = {
-    get x() {
-      return x;
-    },
-    get y() {
-      return y;
-    },
-    get data() {
-      return data;
-    },
-    get payload() {
-      return payload;
-    },
-    show: showTooltip,
-    hide: hideTooltip,
-    get mode() {
-      return mode;
-    },
-    get isHoveringTooltipArea() {
-      return isHoveringTooltipArea;
-    },
-    get isHoveringTooltipContent() {
-      return isHoveringTooltipContent;
-    },
-    set isHoveringTooltipContent(value) {
-      isHoveringTooltipContent = value;
-    },
-  };
-  tooltipContextProp = tooltipContext;
+  const tooltipState = new TooltipState<TData>(mode, showTooltip, hideTooltip);
+  stateProp = tooltipState;
+
+  const debug = $derived(debugProp ?? settings.debug);
 
   /*
 		TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
@@ -219,7 +176,6 @@
 		- scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
 		- scaleLinear, scaleLinear: voronoi (or quadtree)
 	*/
-  setTooltipContext(tooltipContext);
 
   let hideTimeoutId: ReturnType<typeof setTimeout>;
 
@@ -270,7 +226,25 @@
     }
   }
 
-  function showTooltip(e: PointerEvent, tooltipData?: any) {
+  function resolveTooltipSeriesKey(series: any, seriesTooltipData: any) {
+    if (
+      mode === 'manual' &&
+      ctx.series.isDefaultSeries &&
+      series.key === 'default' &&
+      series.data == null &&
+      series.value != null &&
+      seriesTooltipData != null
+    ) {
+      const dataKey = ctx.c?.(seriesTooltipData);
+      if (typeof dataKey === 'string' || typeof dataKey === 'number') {
+        return `${dataKey}`;
+      }
+    }
+
+    return series.key;
+  }
+
+  function showTooltip(e: PointerEvent | MouseEvent | TouchEvent, tooltipData?: any) {
     // Cancel hiding tooltip if from previous event loop
     if (hideTimeoutId) {
       clearTimeout(hideTimeoutId);
@@ -284,6 +258,7 @@
     const containerNode = (e.target as Element).closest('.lc-root-container')!;
     const point = localPoint(e, containerNode);
 
+    // If pointer is outside of the chart area (ex. within padding), hide tooltip.  This prevents showing tooltip when interacting with axes, legends, etc.  For voronoi/quadtreemodes, this is handled by quadtree finding no point, but for bisect modes we need to check manually.
     if (
       ref !== undefined &&
       tooltipData == null && // mode !== 'manual' but support annotations
@@ -298,7 +273,6 @@
     }
 
     // If tooltipData not provided already (voronoi, etc), attempt to find it
-    // TODO: When using bisect-x/y/band, values should be sorted.  Typically they are for `x`, but not `y` (and band depends on if x or y scale)
     if (tooltipData == null) {
       switch (mode) {
         case 'bisect-x': {
@@ -311,6 +285,7 @@
             xValueAtPoint = scaleInvert(ctx.xScale, point.x - ctx.padding.left);
           }
 
+          // Requires values to be sorted
           const index = bisectX(ctx.flatData, xValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -322,6 +297,7 @@
           // `y` value at pointer coordinate
           const yValueAtPoint = scaleInvert(ctx.yScale, point.y - ctx.padding.top);
 
+          // Requires values to be sorted
           const index = bisectY(ctx.flatData, yValueAtPoint, 1);
           const previousValue = ctx.flatData[index - 1];
           const currentValue = ctx.flatData[index];
@@ -331,14 +307,15 @@
 
         case 'bisect-band': {
           // `x` and `y` values at pointer coordinate
-          const xValueAtPoint = scaleInvert(ctx.xScale, point.x);
-          const yValueAtPoint = scaleInvert(ctx.yScale, point.y);
+          const xValueAtPoint = scaleInvert(ctx.xScale, point.x - ctx.padding.left);
+          const yValueAtPoint = scaleInvert(ctx.yScale, point.y - ctx.padding.top);
 
           if (isScaleBand(ctx.xScale)) {
             // Find point closest to pointer within the x band
             const bandData = ctx.flatData
               .filter((d) => ctx.x(d) === xValueAtPoint)
               .sort(sortFunc(ctx.y as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectY(bandData, yValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -348,6 +325,7 @@
             const bandData = ctx.flatData
               .filter((d) => ctx.y(d) === yValueAtPoint)
               .sort(sortFunc(ctx.x as () => any)); // sort for bisect
+            // Requires values to be sorted
             const index = bisectX(bandData, xValueAtPoint, 1);
             const previousValue = bandData[index - 1];
             const currentValue = bandData[index];
@@ -358,12 +336,19 @@
           break;
         }
 
+        case 'quadtree-x':
+        case 'quadtree-y':
         case 'quadtree': {
-          tooltipData = quadtree?.find(
-            point.x - ctx.padding.left,
-            point.y - ctx.padding.top,
-            radius
-          );
+          let qx = point.x - ctx.padding.left;
+          let qy = point.y - ctx.padding.top;
+
+          // Apply inverse transform to convert screen coordinates to canvas coordinates
+          if (ctx.transform.mode === 'canvas') {
+            qx = (qx - ctx.transform.translate.x) / ctx.transform.scale;
+            qy = (qy - ctx.transform.translate.y) / ctx.transform.scale;
+          }
+
+          tooltipData = quadtree?.find(qx, qy, radius);
           break;
         }
       }
@@ -374,12 +359,56 @@
         raise(e.target as Element);
       }
 
-      const payloadData = getTooltipPayload({ ctx, tooltipData, metaCtx });
-
-      x = point.x;
-      y = point.y;
-      data = tooltipData;
-      payload = payloadData;
+      // For quadtree/voronoi modes, the tooltip finds a single specific point (by x+y proximity),
+      // so only the owning series should be matched. For bisect and quadtree-x/y modes,
+      // the tooltip finds by a single axis position and all series at that position should show values.
+      const isSinglePointMode = mode === 'quadtree' || mode === 'voronoi';
+      const series = ctx.series.series.map((s) => {
+        // Find related data point for this series (if series has its own data)
+        const seriesTooltipData = s.data
+          ? isSinglePointMode
+            ? tooltipData?.seriesKey != null
+              ? s.key === tooltipData.seriesKey
+                ? tooltipData
+                : undefined
+              : s.data.includes(tooltipData)
+                ? tooltipData
+                : undefined
+            : findRelatedData(s.data, tooltipData, ctx.x)
+          : tooltipData;
+
+        const valueAcc = accessor(
+          s.value ?? (s.data ? (ctx.props.y ?? ctx.props.x ?? asAny(ctx.y) ?? asAny(ctx.x)) : s.key)
+        );
+
+        // Extract value from the data
+        const value = seriesTooltipData ? valueAcc(seriesTooltipData) : undefined;
+
+        const seriesKey = resolveTooltipSeriesKey(s, seriesTooltipData);
+
+        // When user explicitly provides cScale, prefer scale-derived color (e.g. gradient encoding).
+        // Otherwise prefer series-defined color (e.g. BarChart with explicit series colors).
+        const scaleColor = ctx.cScale?.(ctx.c(tooltipData));
+        const color = ctx.props.cScale ? (scaleColor ?? s.color) : (s.color ?? scaleColor);
+
+        return {
+          key: seriesKey,
+          label: s.label ?? (seriesKey !== 'default' ? seriesKey : 'value'),
+          value: value,
+          color,
+          visible:
+            seriesKey === s.key
+              ? ctx.series.isVisible(s.key)
+              : ctx.series.selectedKeys.isEmpty() || ctx.series.selectedKeys.isSelected(seriesKey),
+          config: s,
+        };
+      });
+
+      tooltipState.x = point.x;
+      tooltipState.y = point.y;
+      tooltipState.data = tooltipData;
+      // Reverse series order for stacked charts to match visual stack order (bottom to top)
+      tooltipState.series = ctx.series.isStacked ? [...series].reverse() : series;
     } else {
       // Hide tooltip if unable to locate
       hideTooltip();
@@ -392,64 +421,92 @@
       return;
     }
 
-    isHoveringTooltipArea = false;
+    tooltipState.isHoveringTooltipArea = false;
 
     // Wait an event loop tick in case `showTooltip` is called immediately on another element,
     // to allow tweening (ex. moving between bands/bars)
     // Additional hideDelay can be configured to extend this delay further
     hideTimeoutId = setTimeout(() => {
-      if (!isHoveringTooltipArea && !isHoveringTooltipContent) {
-        data = null;
-        payload = [];
+      if (!tooltipState.isHoveringTooltipArea && !tooltipState.isHoveringTooltipContent) {
+        tooltipState.data = null;
       }
     }, hideDelay);
   }
 
-  const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
-    if (mode === 'quadtree') {
-      return d3Quadtree()
+  const xAccessorOverride = $derived(xProp != null ? accessor(xProp) : undefined);
+  const yAccessorOverride = $derived(yProp != null ? accessor(yProp) : undefined);
+
+  let quadtree = $state<Quadtree<[number, number]> | undefined>();
+
+  $effect(() => {
+    // Touch the dependencies the quadtree is built from so the effect re-runs
+    // on changes (mode, accessors, scales, data, projection).
+    if (!['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)) {
+      quadtree = undefined;
+      return;
+    }
+
+    const m = mode;
+    const xAcc = xAccessorOverride;
+    const yAcc = yAccessorOverride;
+    const xScale = ctx.xScale;
+    const yScale = ctx.yScale;
+    const xGet = ctx.xGet;
+    const yGet = ctx.yGet;
+    const xAccCtx = ctx.x;
+    const yAccCtx = ctx.y;
+    const projection = geo.projection;
+    const flatData = ctx.flatData;
+
+    let cancelled = false;
+    import('d3-quadtree').then(({ quadtree: d3Quadtree }) => {
+      if (cancelled) return;
+      quadtree = d3Quadtree<[number, number]>()
         .x((d) => {
-          if (geoCtx.projection) {
-            const lat = ctx.x(d);
-            const long = ctx.y(d);
-            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+          if (m === 'quadtree-y') return 0;
+          if (xAcc) {
+            const scaled = xScale(xAcc(d));
+            return typeof scaled === 'number' ? scaled : 0;
+          }
+          if (projection) {
+            const lat = xAccCtx(d);
+            const long = yAccCtx(d);
+            const geoValue = projection([lat, long]) ?? [0, 0];
             return geoValue[0];
           }
-
-          const value = ctx.xGet(d);
-
+          const value = xGet(d);
           if (Array.isArray(value)) {
-            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-            // Using first value.  Consider using average, max, etc
-            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
-            // return midpoint;
-            return min(value);
-          } else {
-            return value;
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`).
+            // Default to the max (typically the "target"/"end" endpoint); override
+            // via the `x` prop for explicit control.
+            return max(value);
           }
+          return value;
         })
         .y((d) => {
-          if (geoCtx.projection) {
-            const lat = ctx.x(d);
-            const long = ctx.y(d);
-            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+          if (m === 'quadtree-x') return 0;
+          if (yAcc) {
+            const scaled = yScale(yAcc(d));
+            return typeof scaled === 'number' ? scaled : 0;
+          }
+          if (projection) {
+            const lat = xAccCtx(d);
+            const long = yAccCtx(d);
+            const geoValue = projection([lat, long]) ?? [0, 0];
             return geoValue[1];
           }
-
-          const value = ctx.yGet(d);
-
+          const value = yGet(d);
           if (Array.isArray(value)) {
-            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-            // Using first value.  Consider using average, max, etc
-            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
-            // return midpoint;
-            return min(value);
-          } else {
-            return value;
+            // `y` accessor with multiple properties — default to max endpoint.
+            return max(value);
           }
+          return value;
         })
-        .addAll(ctx.flatData as [number, number][]);
-    }
+        .addAll(flatData as [number, number][]);
+    });
+    return () => {
+      cancelled = true;
+    };
   });
 
   const rects: Array<{ x: number; y: number; width: number; height: number; data: any }> =
@@ -474,14 +531,111 @@
             const fullHeight = max(ctx.yRange) - min(ctx.yRange);
 
             if (mode === 'band') {
-              // full band width/height regardless of value
-              return {
-                x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
-                y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
-                width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
-                height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
-                data: d,
-              };
+              if (isScaleBand(ctx.xScale)) {
+                // full band width/height regardless of value
+                return {
+                  x: x - xOffset,
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: ctx.xScale.step(),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (isScaleBand(ctx.yScale)) {
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: y - yOffset,
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: ctx.yScale.step(),
+                  data: d,
+                };
+              } else if (ctx.xInterval) {
+                // x-axis time scale with interval
+                const xVal = ctx.x(d);
+                const start = ctx.xInterval.floor(xVal);
+                const end = ctx.xInterval.offset(start);
+                const xStart = ctx.xScale(start);
+                const xEnd = ctx.xScale(end);
+
+                return {
+                  x: Math.min(xStart, xEnd),
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: Math.abs(xEnd - xStart),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (ctx.yInterval) {
+                // y-axis time scale with interval
+                const yVal = ctx.y(d);
+                const start = ctx.yInterval.floor(yVal);
+                const end = ctx.yInterval.offset(start);
+                const yStart = ctx.yScale(start);
+                const yEnd = ctx.yScale(end);
+
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: Math.min(yStart, yEnd),
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: Math.abs(yEnd - yStart),
+                  data: d,
+                };
+              } else if (Array.isArray(xValue)) {
+                return {
+                  x: Math.min(xValue[0], xValue[1]) - xOffset,
+                  y: Array.isArray(yValue)
+                    ? Math.min(yValue[0], yValue[1]) - yOffset
+                    : min(ctx.yRange),
+                  width: Math.abs(xValue[1] - xValue[0]),
+                  height: Array.isArray(yValue) ? Math.abs(yValue[1] - yValue[0]) : fullHeight,
+                  data: d,
+                };
+              } else if (Array.isArray(yValue)) {
+                return {
+                  x: min(ctx.xRange),
+                  y: Math.min(yValue[0], yValue[1]) - yOffset,
+                  width: fullWidth,
+                  height: Math.abs(yValue[1] - yValue[0]),
+                  data: d,
+                };
+              } else if (isScaleTime(ctx.xScale)) {
+                // Find width to next data point
+                const index = ctx.flatData.findIndex(
+                  (d2) => Number(ctx.x(d2)) === Number(ctx.x(d))
+                );
+                const isLastPoint = index + 1 === ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                  ? max(ctx.xDomain)
+                  : ctx.x(ctx.flatData[index + 1]);
+
+                return {
+                  x: x - xOffset,
+                  y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
+                  width: (ctx.xScale(nextDataPoint) ?? 0) - (xValue ?? 0),
+                  height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
+                  data: d,
+                };
+              } else if (isScaleTime(ctx.yScale)) {
+                // Find height to next data point
+                const index = ctx.flatData.findIndex(
+                  (d2) => Number(ctx.y(d2)) === Number(ctx.y(d))
+                );
+                const isLastPoint = index + 1 === ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                  ? max(ctx.yDomain)
+                  : ctx.y(ctx.flatData[index + 1]);
+
+                return {
+                  x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
+                  y: y - yOffset,
+                  width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
+                  height: (ctx.yScale(nextDataPoint) ?? 0) - (yValue ?? 0),
+                  data: d,
+                };
+              } else {
+                console.warn(
+                  '[layerchart] TooltipContext band mode requires at least one scale to be band or time.'
+                );
+                return undefined;
+              }
             } else if (mode === 'bounds') {
               return {
                 x: isScaleBand(ctx.xScale) || Array.isArray(xValue) ? x - xOffset : min(ctx.xRange),
@@ -509,41 +663,44 @@
     });
 
   const triggerPointerEvents = $derived(
-    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode)
+    ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree', 'quadtree-x', 'quadtree-y'].includes(mode)
   );
-</script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  style:top="{ctx.padding.top}px"
-  style:left="{ctx.padding.left}px"
-  style:width="{ctx.width}px"
-  style:height="{ctx.height}px"
-  class={cls(
-    layerClass('tooltip-context'),
-    'absolute touch-none',
-    debug && triggerPointerEvents && 'bg-danger/10 outline outline-danger'
-  )}
-  onpointerenter={(e) => {
-    isHoveringTooltipArea = true;
+  function onPointerEnter(e: PointerEvent | MouseEvent | TouchEvent) {
+    tooltipState.isHoveringTooltipArea = true;
     if (triggerPointerEvents) {
       showTooltip(e);
     }
-  }}
-  onpointermove={(e) => {
+  }
+
+  function onPointerMove(e: PointerEvent | MouseEvent | TouchEvent) {
     if (triggerPointerEvents) {
       showTooltip(e);
     }
-  }}
-  onpointerleave={(e) => {
-    isHoveringTooltipArea = false;
+  }
 
+  function onPointerLeave(e: PointerEvent | MouseEvent | TouchEvent) {
+    tooltipState.isHoveringTooltipArea = false;
     hideTooltip();
-  }}
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  style:top="{ctx.padding.top}px"
+  style:left="{ctx.padding.left}px"
+  style:width="{ctx.width}px"
+  style:height="{ctx.height}px"
+  style:--touch-action={touchEvents}
+  class="lc-tooltip-context"
+  class:debug={debug && triggerPointerEvents}
+  onpointerenter={onPointerEnter}
+  onpointermove={onPointerMove}
+  onpointerleave={onPointerLeave}
   onclick={(e) => {
     // Ignore clicks without data (triggered from Legend clicks, for example)
-    if (triggerPointerEvents && tooltipContext.data != null) {
-      onclick(e, { data: tooltipContext.data });
+    if (triggerPointerEvents && tooltipState.data != null) {
+      onclick(e, { data: tooltipState.data });
     }
   }}
   onkeydown={() => {}}
@@ -551,76 +708,76 @@
 >
   <!-- Rendering slot within TooltipContext to allow pointer events to bubble up (ex. Brush) -->
   <div
-    class={cls(layerClass('tooltip-context-container'), 'absolute')}
+    class="lc-tooltip-context-container"
     style:top="-{ctx.padding.top ?? 0}px"
     style:left="-{ctx.padding.left ?? 0}px"
     style:width="{ctx.containerWidth}px"
     style:height="{ctx.containerHeight}px"
   >
-    {@render children?.({ tooltipContext: tooltipContext })}
+    {@render children?.({ state: tooltipState })}
 
     {#if mode === 'voronoi'}
-      <Svg>
-        <Voronoi
-          r={radius}
-          onpointerenter={(e, { data }) => {
-            showTooltip(e, data);
-          }}
-          onpointermove={(e, { data }) => {
-            showTooltip(e, data);
-          }}
-          onpointerleave={() => hideTooltip()}
-          onpointerdown={(e) => {
-            // @ts-expect-error
-            if (e.target?.hasPointerCapture(e.pointerId)) {
+      {#await import('../Voronoi/Voronoi.svelte') then { default: Voronoi }}
+        <Svg>
+          <Voronoi
+            x={xProp}
+            y={yProp}
+            r={radius}
+            onpointerenter={(e, { data }) => {
+              showTooltip(e, data);
+            }}
+            onpointermove={(e, { data }) => {
+              showTooltip(e, data);
+            }}
+            onpointerleave={() => hideTooltip()}
+            onpointerdown={(e) => {
               // @ts-expect-error
-              e.target.releasePointerCapture(e.pointerId);
-            }
-          }}
-          onclick={(e, { data }) => {
-            onclick(e, { data });
-          }}
-          classes={{ path: cls(debug && 'fill-danger/10 stroke-danger') }}
-        />
-      </Svg>
+              if (e.target?.hasPointerCapture(e.pointerId)) {
+                // @ts-expect-error
+                e.target.releasePointerCapture(e.pointerId);
+              }
+            }}
+            onclick={(e, { data }) => {
+              onclick(e, { data });
+            }}
+            classes={{ path: cls('lc-tooltip-voronoi-path', debug && 'debug') }}
+          />
+        </Svg>
+      {/await}
     {:else if mode === 'bounds' || mode === 'band'}
       <Svg center={ctx.radial}>
-        <g class={layerClass('tooltip-rects-g')}>
+        <g class="lc-tooltip-rects-g">
           {#each rects as rect}
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             {#if ctx.radial}
-              <Arc
-                innerRadius={rect.y}
-                outerRadius={rect.y + rect.height}
-                startAngle={rect.x}
-                endAngle={rect.x + rect.width}
-                class={cls(
-                  layerClass('tooltip-rect'),
-                  debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
-                )}
-                onpointerenter={(e) => showTooltip(e, rect?.data)}
-                onpointermove={(e) => showTooltip(e, rect?.data)}
-                onpointerleave={() => hideTooltip()}
-                onpointerdown={(e) => {
-                  const target = e.target as Element;
-                  if (target?.hasPointerCapture(e.pointerId)) {
-                    target.releasePointerCapture(e.pointerId);
-                  }
-                }}
-                onclick={(e) => {
-                  onclick(e, { data: rect?.data });
-                }}
-              />
+              {#await import('../Arc/Arc.svelte') then { default: Arc }}
+                <Arc
+                  innerRadius={rect.y}
+                  outerRadius={rect.y + rect.height}
+                  startAngle={rect.x}
+                  endAngle={rect.x + rect.width}
+                  class={cls('lc-tooltip-rect', debug && 'debug')}
+                  onpointerenter={(e) => showTooltip(e, rect?.data)}
+                  onpointermove={(e) => showTooltip(e, rect?.data)}
+                  onpointerleave={() => hideTooltip()}
+                  onpointerdown={(e) => {
+                    const target = e.target as Element;
+                    if (target?.hasPointerCapture(e.pointerId)) {
+                      target.releasePointerCapture(e.pointerId);
+                    }
+                  }}
+                  onclick={(e) => {
+                    onclick(e, { data: rect?.data });
+                  }}
+                />
+              {/await}
             {:else}
               <rect
                 x={rect?.x}
                 y={rect?.y}
                 width={rect?.width}
                 height={rect?.height}
-                class={cls(
-                  layerClass('tooltip-rect'),
-                  debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
-                )}
+                class={cls('lc-tooltip-rect', debug && 'debug')}
                 onpointerenter={(e) => showTooltip(e, rect?.data)}
                 onpointermove={(e) => showTooltip(e, rect?.data)}
                 onpointerleave={() => hideTooltip()}
@@ -638,10 +795,10 @@
           {/each}
         </g>
       </Svg>
-    {:else if mode === 'quadtree' && debug}
+    {:else if ['quadtree', 'quadtree-x', 'quadtree-y'].includes(mode) && debug}
       <Svg pointerEvents={false}>
         <ChartClipPath>
-          <g class={layerClass('tooltip-quadtree-g')}>
+          <g class="lc-tooltip-quadtree-g">
             {#if quadtree}
               {#each quadtreeRects(quadtree, false) as rect}
                 <rect
@@ -649,10 +806,7 @@
                   y={rect.y}
                   width={rect.width}
                   height={rect.height}
-                  class={cls(
-                    layerClass('tooltip-quadtree-rect'),
-                    debug ? 'fill-danger/10 stroke-danger' : 'fill-transparent'
-                  )}
+                  class={cls('lc-tooltip-quadtree-rect', debug && 'debug')}
                 />
               {/each}
             {/if}
@@ -662,3 +816,46 @@
     {/if}
   </div>
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-context-container) {
+      position: absolute;
+    }
+
+    :where(.lc-tooltip-context) {
+      position: absolute;
+      touch-action: var(--touch-action);
+
+      &.debug {
+        outline: 1px solid var(--color-danger);
+        background-color: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+
+    :global(:where(.lc-tooltip-voronoi-path)) {
+      &.debug {
+        stroke: var(--color-danger);
+        fill: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+
+    :where(.lc-tooltip-rect) {
+      fill: transparent;
+
+      &.debug {
+        stroke: var(--color-danger);
+        fill: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+
+    :where(.lc-tooltip-quadtree-rect) {
+      fill: transparent;
+
+      &.debug {
+        stroke: var(--color-danger);
+        fill: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+  }
+</style>