svelteplot 0.11.0 → 0.11.1

package/dist/marks/BarX.svelte.d.ts

@@ -14,7 +14,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/BarY.svelte.d.ts

@@ -13,7 +13,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/BollingerX.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/BollingerY.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/BoxY.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Brush.svelte.d.ts

@@ -19,7 +19,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: import("../types/index.js").ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Cell.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/CellX.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/index.js").RawValue>>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/index.js").RawValue>>;

package/dist/marks/CellY.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/index.js").RawValue>>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/index.js").RawValue>>;

package/dist/marks/CustomMark.svelte.d.ts

@@ -13,7 +13,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/DifferenceY.svelte.d.ts

@@ -13,7 +13,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Dot.svelte.d.ts

@@ -13,7 +13,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/DotX.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: ChannelAccessor<unknown>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, unknown>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, unknown>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", unknown>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, unknown>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, unknown>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, unknown>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, unknown>;

package/dist/marks/DotY.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: import("../types/channel.js").ChannelAccessor<unknown>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, unknown>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, unknown>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", unknown>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, unknown>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, unknown>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, unknown>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, unknown>;

package/dist/marks/Frame.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: import("../types/channel.js").ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Geo.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/GridX.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum = RawValue>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/GridY.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum = RawValue>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/HTMLTooltip.svelte

@@ -27,6 +27,8 @@
     import { quadtree } from 'd3-quadtree';
     import { projectX, projectY } from '../helpers/scales.js';
     import { groupFacetsAndZ } from '../helpers/group.js';
+    import { detectFacet, facetKey } from '../helpers/facets.js';
+    import { SvelteMap } from 'svelte/reactivity';
 
     const plot = usePlot();
 
@@ -40,21 +42,19 @@
     let facetOffsetY = $state(0);
 
     function onPointerMove(evt: MouseEvent) {
-        const plotRect = plot.body.getBoundingClientRect();
-        let facetEl: Element | null = evt.target as Element;
-        while (facetEl && !facetEl.classList.contains('facet')) {
-            facetEl = facetEl.parentElement as Element | null;
-        }
-        const facetIndex = +((facetEl as HTMLElement)?.dataset?.facet ?? 0);
-        const facetRect = ((facetEl?.firstChild as Element) ?? plot.body).getBoundingClientRect();
+        const { fxValue, fyValue, offsetX, offsetY } = detectFacet(evt, plot);
+        const bodyRect = plot.body.getBoundingClientRect();
+
+        facetOffsetX = offsetX;
+        facetOffsetY = offsetY;
 
-        facetOffsetX = facetRect.left - plotRect.left - plot.options.marginLeft;
-        facetOffsetY = facetRect.top - plotRect.top - plot.options.marginTop;
+        const relativeX = evt.clientX - bodyRect.left - offsetX;
+        const relativeY = evt.clientY - bodyRect.top - offsetY;
 
-        const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
-        const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
+        const key = facetKey(fxValue, fyValue);
+        const facetTrees = treeMap.get(key) ?? [];
+        const pt = facetTrees.length > 0 ? facetTrees[0].find(relativeX, relativeY, 25) : null;
 
-        const pt = trees[facetIndex].find(relativeX, relativeY, 25);
         if (pt) {
             tooltipX = resolveChannel('x', pt, { x, y, r });
             tooltipY = resolveChannel('y', pt, { x, y, r });
@@ -73,25 +73,28 @@
         plot.body?.addEventListener('pointermove', onPointerMove);
 
         return () => {
-            plot.body?.removeEventListener('mouseleave', onPointerLeave);
+            plot.body?.removeEventListener('pointerleave', onPointerLeave);
             plot.body?.removeEventListener('pointermove', onPointerMove);
         };
     });
 
-    const groups = $derived.by(() => {
-        const groups: Datum[][] = [];
-        groupFacetsAndZ(data, { fx, fy }, (d) => groups.push(d));
-        return groups;
-    });
-
-    const trees = $derived(
-        groups.map((items) =>
-            quadtree<Datum>()
+    const treeMap = $derived.by(() => {
+        const map = new SvelteMap<string, ReturnType<typeof quadtree<Datum>>[]>();
+        groupFacetsAndZ(data, { fx, fy }, (items) => {
+            if (!items.length) return;
+            const fxVal = fx ? resolveChannel('fx', items[0], { fx }) : true;
+            const fyVal = fy ? resolveChannel('fy', items[0], { fy }) : true;
+            const key = facetKey(fxVal, fyVal);
+            const tree = quadtree<Datum>()
                 .x((d) => projectX('x', plot.scales, resolveChannel('x', d, { x, y, r })))
                 .y((d) => projectY('y', plot.scales, resolveChannel('y', d, { x, y, r })))
-                .addAll(items)
-        )
-    );
+                .addAll(items);
+            const existing = map.get(key) ?? [];
+            existing.push(tree);
+            map.set(key, existing);
+        });
+        return map;
+    });
 </script>
 
 <div

package/dist/marks/Image.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Line.svelte.d.ts

@@ -14,7 +14,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/LineX.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/index.js").RawValue>>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/index.js").RawValue>>;

package/dist/marks/LineY.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/index.js").RawValue>>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/index.js").RawValue>>;

package/dist/marks/Link.svelte.d.ts

@@ -13,7 +13,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Pointer.svelte

@@ -40,6 +40,8 @@
     import { groupFacetsAndZ } from '../helpers/group.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
+    import { detectFacet, facetKey } from '../helpers/facets.js';
+    import { SvelteMap } from 'svelte/reactivity';
 
     const plot = usePlot();
 
@@ -71,17 +73,14 @@
     let selectedData = $state<any[]>([]);
 
     function onPointerMove(evt: MouseEvent) {
-        let facetEl: Element | null = evt.target as Element;
-        while (facetEl && !facetEl.classList.contains('facet')) {
-            facetEl = facetEl.parentElement as Element | null;
-        }
-        const facetRect = ((facetEl?.firstChild as Element) ?? plot.body).getBoundingClientRect();
+        const { fxValue, fyValue, offsetX, offsetY } = detectFacet(evt, plot);
+        const bodyRect = plot.body.getBoundingClientRect();
 
-        const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
-        const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
+        const relativeX = evt.clientX - bodyRect.left - offsetX;
+        const relativeY = evt.clientY - bodyRect.top - offsetY;
 
-        // console.log({ relativeX, relativeY }, evt);
-        updateSelection(relativeX, relativeY);
+        const key = facetKey(fxValue, fyValue);
+        updateSelection(relativeX, relativeY, key);
     }
 
     function onPointerLeave() {
@@ -89,13 +88,14 @@
         if (onupdate) onupdate(selectedData);
     }
 
-    function updateSelection(ex: number, ey: number) {
-        // find data row with minimum distance to
-        const points = trees.map((tree) =>
+    function updateSelection(ex: number, ey: number, key: string) {
+        const facetTrees = treeMap.get(key) ?? [];
+        // find data row with minimum distance to cursor
+        const points = facetTrees.map((tree) =>
             tree.find(x != null ? ex : 0, y != null ? ey : 0, maxDistance)
         );
         // also include other points that share the same x or y value
-        const otherPoints = trees.flatMap((tree, i) => {
+        const otherPoints = facetTrees.flatMap((tree, i) => {
             return tree
                 .data()
                 .filter((d) => d !== points[i])
@@ -121,21 +121,19 @@
         };
     });
 
-    const groups = $derived.by(() => {
-        const groups: any[][] = [];
-        groupFacetsAndZ(indexData(data as object[]) as any, { x, y, z, fx, fy }, (d) =>
-            groups.push(d)
-        );
-        return groups;
-    });
-
-    const trees = $derived(
-        groups.map((items) =>
-            quadtree<any>()
+    const treeMap = $derived.by(() => {
+        const map = new SvelteMap<string, ReturnType<typeof quadtree<any>>[]>();
+        groupFacetsAndZ(indexData(data as object[]) as any, { x, y, z, fx, fy }, (items) => {
+            if (!items.length) return;
+            // Recover fx/fy values from the first datum in the group
+            const fxVal = fx ? resolveChannel('fx', items[0], { fx }) : true;
+            const fyVal = fy ? resolveChannel('fy', items[0], { fy }) : true;
+            const key = facetKey(fxVal, fyVal);
+            const tree = quadtree<any>()
                 .x(x != null ? (d: any) => d[POINTER_X] : () => 0)
                 .y(y != null ? (d: any) => d[POINTER_Y] : () => 0)
                 .addAll(
-                    items?.map((d: any) => {
+                    items.map((d: any) => {
                         const [px, py] = projectXY(
                             plot.scales,
                             resolveChannel('x', d, { x }),
@@ -148,10 +146,14 @@
                             [POINTER_X]: px,
                             [POINTER_Y]: py
                         };
-                    }) ?? []
-                )
-        )
-    );
+                    })
+                );
+            const existing = map.get(key) ?? [];
+            existing.push(tree);
+            map.set(key, existing);
+        });
+        return map;
+    });
 </script>
 
 {#if children}

package/dist/marks/Rect.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/RectX.svelte.d.ts

@@ -13,7 +13,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data.js").RawValue>>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/data.js").RawValue>>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Record<string | symbol, import("../types/data.js").RawValue>>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Record<string | symbol, import("../types/data.js").RawValue>>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/data.js").RawValue>>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/data.js").RawValue>>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/data.js").RawValue>>;

package/dist/marks/RectY.svelte.d.ts

@@ -13,7 +13,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: import("../types/channel.js").ChannelAccessor<Record<string | symbol, import("../types/data.js").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data.js").RawValue>>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/data.js").RawValue>>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Record<string | symbol, import("../types/data.js").RawValue>>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Record<string | symbol, import("../types/data.js").RawValue>>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/data.js").RawValue>>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/data.js").RawValue>>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/data.js").RawValue>>;

package/dist/marks/RuleX.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum = DataRecord | RawValue>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/RuleY.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum = DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Spike.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         fill: ChannelAccessor<unknown>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, unknown>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, unknown>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", unknown>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, unknown>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, unknown>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, unknown>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, unknown>;

package/dist/marks/Text.svelte.d.ts

@@ -14,7 +14,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<CSS.Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<CSS.Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<CSS.Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<CSS.Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<CSS.Property.FontWeight, Datum>;
@@ -212,7 +212,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<CSS.Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<CSS.Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<CSS.Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<CSS.Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<CSS.Property.FontWeight, Datum>;

package/dist/marks/TickX.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum = DataRecord | RawValue>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/TickY.svelte.d.ts

@@ -12,7 +12,7 @@ declare function $$render<Datum = DataRecord | RawValue>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Trail.svelte.d.ts

@@ -13,7 +13,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;