layerchart 0.42.0 → 0.43.1

package/dist/components/Pie.svelte

@@ -1,7 +1,7 @@
-<script>import { getContext } from 'svelte';
-import { pie as d3pie } from 'd3-shape';
+<script>import { pie as d3pie } from 'd3-shape';
 import { min, max } from 'd3-array';
 import Arc from './Arc.svelte';
+import { chartContext } from './ChartContext.svelte';
 import Group from './Group.svelte';
 import { degreesToRadians } from '../utils/math.js';
 import { motionStore } from '../stores/motionStore.js';
@@ -51,17 +51,18 @@ export let offset = 0;
  * Tooltip context to setup mouse events to show tooltip for related data
  */
 export let tooltip = undefined;
-const { data: contextData, x, y, xRange, rGet, config, width, height } = getContext('LayerCake');
+const { data: contextData, x, y, xRange, rGet, config, width, height } = chartContext();
+// @ts-expect-error
 $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
 let tweened_endAngle = motionStore(0, { spring, tweened });
 $: tweened_endAngle.set(resolved_endAngle);
 $: pie = d3pie()
+    // @ts-expect-error
     .startAngle(startAngle ?? degreesToRadians($config.xRange ? min($xRange) : min(range)))
     .endAngle($tweened_endAngle)
     .padAngle(padAngle)
     .value($x);
-$: arcs = pie(data ?? $contextData);
-// $: console.log({ arcs, $yRange });
+$: arcs = pie(data ?? (Array.isArray($contextData) ? $contextData : []));
 $: radius = Math.min($width / 2, $height / 2);
 $: coords = {
     x: placement === 'left'
@@ -77,7 +78,7 @@ $: coords = {
 
 <Group x={coords.x} y={coords.y}>
   <slot {arcs}>
-    {#each arcs as arc, index}
+    {#each arcs as arc}
       <Arc
         startAngle={arc.startAngle}
         endAngle={arc.endAngle}

package/dist/components/Pie.svelte.d.ts

@@ -3,7 +3,7 @@ import type { spring as springStore, tweened as tweenedStore } from 'svelte/moti
 import type { TooltipContextValue } from './TooltipContext.svelte';
 declare const __propDef: {
     props: {
-        data?: any;
+        data?: any[] | undefined;
         /**
            * Range [min,max] in degrees.  See also startAngle/endAngle
            */ range?: number[];
@@ -40,9 +40,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            arcs: import("d3-shape").PieArcDatum<number | {
-                valueOf(): number;
-            }>[];
+            arcs: import("d3-shape").PieArcDatum<any>[];
         };
     };
 };

package/dist/components/Point.svelte

@@ -1,5 +1,5 @@
-<script>import { getContext } from 'svelte';
-const context = getContext('LayerCake');
+<script>import { chartContext } from './ChartContext.svelte';
+const context = chartContext();
 const { xGet, yGet } = context;
 /** Single data point to translate to x/y */
 export let d;

package/dist/components/Points.svelte

@@ -1,11 +1,12 @@
-<script>import { getContext } from 'svelte';
+<script>import {} from 'svelte';
 import { extent } from 'd3-array';
+import { pointRadial } from 'd3-shape';
 import { notNull } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import Circle from './Circle.svelte';
 import Link from './Link.svelte';
 import { isScaleBand } from '../utils/scales.js';
-import { pointRadial } from 'd3-shape';
-const context = getContext('LayerCake');
+const context = chartContext();
 const { data: contextData, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 /** Override data instead of using context */
 export let data = undefined;

package/dist/components/RadialGradient.svelte

@@ -11,7 +11,8 @@ export let cy = '50%';
 export let fx = cx;
 export let fy = cy;
 export let r = '50%';
-export let fr = '0%';
+// TODO: Svelte / Typescript does not know `<radialRadiant fr="...">`
+// export let fr = '0%';
 /** Indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient */
 export let spreadMethod = 'pad';
 export let transform = undefined;
@@ -27,7 +28,6 @@ export let units = 'objectBoundingBox';
     {fx}
     {fy}
     {r}
-    {fr}
     {spreadMethod}
     gradientTransform={transform}
     gradientUnits={units}

package/dist/components/RadialGradient.svelte.d.ts

@@ -9,7 +9,6 @@ declare const __propDef: {
         fx?: string;
         fy?: string;
         r?: string;
-        fr?: string;
         spreadMethod?: "pad" | "reflect" | "repeat";
         transform?: string | null | undefined;
         units?: "objectBoundingBox" | "userSpaceOnUse";

package/dist/components/Rect.svelte

@@ -24,6 +24,7 @@ $: tick().then(() => {
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <rect
   x={$tweened_x}
   y={$tweened_y}

package/dist/components/Rule.svelte

@@ -1,8 +1,8 @@
-<script>import { getContext } from 'svelte';
+<script>import { extent } from 'd3-array';
 import { cls } from 'svelte-ux';
-import { extent } from 'd3-array';
+import { chartContext } from './ChartContext.svelte';
 import Line from './Line.svelte';
-const { xScale, yScale, xRange, yRange } = getContext('LayerCake');
+const { xScale, yScale, xRange, yRange } = chartContext();
 $: [xRangeMin, xRangeMax] = extent($xRange);
 $: [yRangeMin, yRangeMax] = extent($yRange);
 /**

package/dist/components/Sankey.svelte

@@ -1,8 +1,9 @@
 <script>// https://github.com/d3/d3-sankey
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher } from 'svelte';
 import { sankey as d3Sankey, sankeyLeft, sankeyCenter, sankeyRight, sankeyJustify, } from 'd3-sankey';
+import { chartContext } from './ChartContext.svelte';
 const dispatch = createEventDispatcher();
-const { data, width, height, padding } = getContext('LayerCake');
+const { data, width, height } = chartContext();
 export let nodes = (d) => d.nodes;
 export let nodeId = (d) => d.index;
 /**
@@ -29,11 +30,16 @@ $: sankey = d3Sankey()
                 : nodeAlign)
     .nodeWidth(nodeWidth)
     .nodePadding(nodePadding)
+    // @ts-expect-error
     .nodeSort(nodeSort)
     .links(links)
+    // @ts-expect-error
     .linkSort(linkSort);
+// @ts-expect-error
 $: sankeyData = sankey($data);
+$: _nodes = sankeyData.nodes;
+$: _links = sankeyData.links;
 $: dispatch('update', sankeyData);
 </script>
 
-<slot nodes={sankeyData.nodes} links={sankeyData.links} />
+<slot nodes={_nodes} links={_links} />

package/dist/components/Sankey.svelte.d.ts

@@ -20,8 +20,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            nodes: import("d3-sankey").SankeyNodeMinimal<{}, {}>[];
-            links: import("d3-sankey").SankeyLinkMinimal<{}, {}>[];
+            nodes: SankeyNode<Record<string, any>, any>[];
+            links: any[];
         };
     };
 };

package/dist/components/Spline.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, tick } from 'svelte';
+<script>import { tick } from 'svelte';
 import { writable } from 'svelte/store';
 import { tweened as tweenedStore } from 'svelte/motion';
 import { draw as _drawTransition } from 'svelte/transition';
@@ -7,9 +7,10 @@ import { line as d3Line, lineRadial } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 import { interpolatePath } from 'd3-interpolate-path';
 import { cls } from 'svelte-ux';
-import { motionStore } from '../stores/motionStore.js';
+import { chartContext } from './ChartContext.svelte';
 import Group from './Group.svelte';
-const { data: contextData, xScale, yScale, x: contextX, y: contextY } = getContext('LayerCake');
+import { motionStore } from '../stores/motionStore.js';
+const { data: contextData, xScale, yScale, x: contextX, y: contextY } = chartContext();
 /** Override data instead of using context */
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
@@ -46,6 +47,7 @@ function getScaleValue(data, scale, accessor) {
     }
 }
 let d = '';
+// @ts-expect-error
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
@@ -60,7 +62,7 @@ $: {
         path.curve(curve);
     if (defined)
         path.defined(defined);
-    d = pathData ?? path(data ?? $contextData);
+    d = pathData ?? path(data ?? $contextData) ?? '';
     tweened_d.set(d);
 }
 $: drawTransition = draw ? _drawTransition : () => ({});
@@ -79,8 +81,8 @@ $: endPoint = motionStore(undefined, {
             easing: (typeof draw === 'object' && draw.easing) || cubicInOut,
             interpolate(a, b) {
                 return (t) => {
-                    const totalLength = pathEl.getTotalLength();
-                    const point = pathEl.getPointAtLength(totalLength * t);
+                    const totalLength = pathEl?.getTotalLength() ?? 0;
+                    const point = pathEl?.getPointAtLength(totalLength * t);
                     return point;
                 };
             },
@@ -103,6 +105,7 @@ $: {
 </script>
 
 {#key key}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <path
     d={$tweened_d}
     {...$$restProps}

package/dist/components/Spline.svelte.d.ts

@@ -8,8 +8,8 @@ declare const __propDef: {
         data?: any;
         pathData?: string | undefined | null;
         radial?: boolean;
-        x?: any;
-        y?: any;
+        x?: ((d: any) => any) | undefined;
+        y?: ((d: any) => any) | undefined;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         draw?: boolean | Parameters<typeof _drawTransition>[1];
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;

package/dist/components/Text.svelte

@@ -73,9 +73,8 @@ $: lines = wordsByLines.length;
  */
 function getPixelValue(cssValue) {
     // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
-    // console.log(cssValue);
+    // @ts-expect-error
     const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
-    // console.log({ value, units });
     const number = Number(value);
     switch (units) {
         case 'px':

package/dist/components/Threshold.svelte

@@ -3,10 +3,10 @@
     - https://observablehq.com/@d3/difference-chart
     - https://github.com/airbnb/visx/issues/245
 */
-import { getContext } from 'svelte';
 import { area as d3Area, line as d3Line } from 'd3-shape';
 import { min, max } from 'd3-array';
-const { data: contextData, xGet, yGet, yRange } = getContext('LayerCake');
+import { chartContext } from './ChartContext.svelte';
+const { data: contextData, xGet, yGet, yRange } = chartContext();
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type
 export let x = undefined; // TODO: Update Type

package/dist/components/Threshold.svelte.d.ts

@@ -6,12 +6,12 @@ declare const __propDef: {
         x?: any;
         y0?: any;
         y1?: any;
-        curve?: CurveFactory;
+        curve?: CurveFactory | undefined;
         defined?: Parameters<{
             (): (d: [number, number], index: number, data: [number, number][]) => boolean;
             (defined: boolean): import("d3-shape").Area<[number, number]>;
             (defined: (d: [number, number], index: number, data: [number, number][]) => boolean): import("d3-shape").Area<[number, number]>;
-        }>[0];
+        }>[0] | undefined;
         id?: string;
     };
     events: {

package/dist/components/TileImage.svelte

@@ -32,8 +32,11 @@ function loadImage(url) {
             img.onload = function () {
                 var canvas = document.createElement('canvas');
                 var context = canvas.getContext('2d');
+                // @ts-expect-error
                 canvas.height = this.naturalHeight;
+                // @ts-expect-error
                 canvas.width = this.naturalWidth;
+                // @ts-expect-error
                 context.drawImage(this, 0, 0);
                 var dataUri = canvas.toDataURL('image/jpeg');
                 // console.log('from load', { x, y, z });
@@ -41,7 +44,7 @@ function loadImage(url) {
                 resolve(dataUri);
             };
             img.onerror = (err) => {
-                cache.delete(key);
+                tileCache.delete(key);
                 reject(err);
             };
             img.src = url;

package/dist/components/Tooltip.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from 'svelte';
-import { fade } from 'svelte/transition';
+<script>import { fade } from 'svelte/transition';
 import { cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
 import { motionStore } from '../stores/motionStore.js';
 /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
@@ -18,7 +18,7 @@ export let variant = 'default';
 export let motion = true;
 export let header = undefined;
 export let classes = {};
-const { padding, xGet, yGet, containerWidth, containerHeight } = getContext('LayerCake');
+const { padding, xGet, yGet, containerWidth, containerHeight } = chartContext();
 const tooltip = tooltipContext();
 let tooltipWidth = 0;
 let tooltipHeight = 0;

package/dist/components/TooltipContext.svelte

@@ -21,12 +21,13 @@ import { bisector, max, min } from 'd3-array';
 import { quadtree as d3Quadtree } from 'd3-quadtree';
 import { cls, sortFunc } from 'svelte-ux';
 import { Svg } from './Chart.svelte';
+import { chartContext } from './ChartContext.svelte';
 import ChartClipPath from './ChartClipPath.svelte';
 import Voronoi from './Voronoi.svelte';
 import { localPoint } from '../utils/event.js';
 import { isScaleBand, scaleInvert } from '../utils/scales.js';
 import { quadtreeRects } from '../utils/quadtree.js';
-const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, containerWidth, containerHeight, padding, } = getContext('LayerCake');
+const { flatData, x, xScale, xGet, xRange, y, yScale, yGet, yRange, width, height, containerWidth, containerHeight, padding, } = chartContext();
 /*
       TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
       - scaleTime / scaleLinear: bisect
@@ -54,7 +55,13 @@ export let radius = Infinity;
 /** Enable debug view (show hit targets, etc) */
 export let debug = false;
 export let onClick = () => { };
-const tooltip = writable({ y: 0, x: 0, data: null, show: showTooltip, hide: hideTooltip });
+const tooltip = writable({
+    y: 0,
+    x: 0,
+    data: null,
+    show: showTooltip,
+    hide: hideTooltip,
+});
 setTooltipContext(tooltip);
 let hideTimeoutId;
 $: bisectX = bisector((d) => {
@@ -112,10 +119,15 @@ function showTooltip(e, tooltipData) {
     const point = localPoint(referenceNode, e);
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 0;
-    if (e.offsetX < e.currentTarget.offsetLeft ||
-        e.offsetX > e.currentTarget.offsetLeft + e.currentTarget.offsetWidth ||
-        e.offsetY < e.currentTarget.offsetTop ||
-        e.offsetY > e.currentTarget.offsetTop + e.currentTarget.offsetHeight) {
+    if (
+    // @ts-expect-error
+    e.offsetX < e.currentTarget?.offsetLeft ||
+        // @ts-expect-error
+        e.offsetX > e.currentTarget?.offsetLeft + e.currentTarget?.offsetWidth ||
+        // @ts-expect-error
+        e.offsetY < e.currentTarget?.offsetTop ||
+        // @ts-expect-error
+        e.offsetY > e.currentTarget?.offsetTop + e.currentTarget?.offsetHeight) {
         // Ignore if within padding of chart
         hideTooltip();
         return;
@@ -148,7 +160,9 @@ function showTooltip(e, tooltipData) {
                 const yValueAtPoint = scaleInvert($yScale, localY);
                 if (isScaleBand($xScale)) {
                     // Find point closest to pointer within the x band
-                    const bandData = $flatData.filter((d) => $x(d) === xValueAtPoint).sort(sortFunc($y)); // sort for bisect
+                    const bandData = $flatData
+                        .filter((d) => $x(d) === xValueAtPoint)
+                        .sort(sortFunc($y)); // sort for bisect
                     const index = bisectY(bandData, yValueAtPoint, 1);
                     const previousValue = bandData[index - 1];
                     const currentValue = bandData[index];
@@ -156,7 +170,9 @@ function showTooltip(e, tooltipData) {
                 }
                 else if (isScaleBand($yScale)) {
                     // Find point closest to pointer within the y band
-                    const bandData = $flatData.filter((d) => $y(d) === yValueAtPoint).sort(sortFunc($x)); // sort for bisect
+                    const bandData = $flatData
+                        .filter((d) => $y(d) === yValueAtPoint)
+                        .sort(sortFunc($x)); // sort for bisect
                     const index = bisectX(bandData, xValueAtPoint, 1);
                     const previousValue = bandData[index - 1];
                     const currentValue = bandData[index];
@@ -232,6 +248,7 @@ $: if (mode === 'quadtree') {
 }
 let rects = [];
 $: if (mode === 'bounds' || mode === 'band') {
+    // @ts-expect-error
     rects = $flatData
         .map((d) => {
         const xValue = $xGet(d);
@@ -240,7 +257,9 @@ $: if (mode === 'bounds' || mode === 'band') {
         const y = Array.isArray(yValue) ? yValue[0] : yValue;
         const xOffset = isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0;
         const yOffset = isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0;
+        // @ts-expect-error
         const fullWidth = max($xRange) - min($xRange);
+        // @ts-expect-error
         const fullHeight = max($yRange) - min($yRange);
         if (mode === 'band') {
             // full band width/height regardless of value
@@ -266,7 +285,8 @@ $: if (mode === 'bounds' || mode === 'band') {
                     ? yValue[1] - yValue[0]
                     : isScaleBand($yScale)
                         ? $yScale.step()
-                        : max($yRange) - y,
+                        : // @ts-expect-error
+                            max($yRange) - y,
                 data: d,
             };
         }
@@ -276,6 +296,8 @@ $: if (mode === 'bounds' || mode === 'band') {
 $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].includes(mode);
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   style:width="{$width}px"
   style:height="{$height}px"
@@ -299,19 +321,26 @@ $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].incl
     class="absolute"
     style:width="{$containerWidth}px"
     style:height="{$containerHeight}px"
-    style:top="{-$padding.top}px"
-    style:left="{-$padding.left}px"
+    style:top="-{$padding.top ?? 0}px"
+    style:left="-{$padding.left ?? 0}px"
   >
     <slot tooltip={$tooltip} />
 
     {#if mode === 'voronoi'}
       <Svg>
         <Voronoi
-          on:pointerenter={(e) => showTooltip(e.detail.event, e.detail.data)}
-          on:pointermove={(e) => showTooltip(e.detail.event, e.detail.data)}
+          on:pointerenter={(e) => {
+            // @ts-expect-error
+            showTooltip(e.detail.event, e.detail.data);
+          }}
+          on:pointermove={(e) => {
+            showTooltip(e.detail.event, e.detail.data);
+          }}
           on:pointerleave={hideTooltip}
           on:pointerdown={(e) => {
-            if (e.target.hasPointerCapture(e.pointerId)) {
+            // @ts-expect-error
+            if (e.target?.hasPointerCapture(e.pointerId)) {
+              // @ts-expect-error
               e.target.releasePointerCapture(e.pointerId);
             }
           }}
@@ -335,7 +364,9 @@ $: triggerPointEvents = ['bisect-x', 'bisect-y', 'bisect-band', 'quadtree'].incl
               on:pointermove={(e) => showTooltip(e, rect.data)}
               on:pointerleave={hideTooltip}
               on:pointerdown={(e) => {
-                if (e.target.hasPointerCapture(e.pointerId)) {
+                // @ts-expect-error
+                if (e.target?.hasPointerCapture(e.pointerId)) {
+                  // @ts-expect-error
                   e.target.releasePointerCapture(e.pointerId);
                 }
               }}

package/dist/components/TooltipContext.svelte.d.ts

@@ -35,7 +35,7 @@ declare const __propDef: {
             tooltip: {
                 y: number;
                 x: number;
-                data: null;
+                data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
             };

package/dist/components/TooltipItem.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         label: any;
         value?: any;
-        format?: FormatType;
+        format?: FormatType | undefined;
         valueAlign?: "left" | "right" | "center";
         classes?: {
             label?: string;

package/dist/components/TransformContext.svelte

@@ -28,8 +28,9 @@ function setTransformContext(transform) {
 </script>
 
 <script>import { createEventDispatcher } from 'svelte';
+import { chartContext } from './ChartContext.svelte';
 import { motionStore, motionFinishHandler } from '../stores/motionStore.js';
-const { width, height } = getContext('LayerCake');
+const { width, height } = chartContext();
 export let mode = 'none';
 /** Translate towards point (ex. mouse cursor/center) while zooming in/out */
 export let translateOnScale = false;
@@ -111,8 +112,11 @@ function onPointerMove(e) {
     }
     if ($dragging) {
         e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
-        e.currentTarget.setPointerCapture(e.pointerId);
-        setTranslate(processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY, $scale), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+        // @ts-expect-error
+        e.currentTarget?.setPointerCapture(e.pointerId);
+        setTranslate(processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY, $scale), 
+        // @ts-expect-error
+        spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
 }
 function onPointerUp(e) {
@@ -142,10 +146,14 @@ function onWheel(e) {
     if ($scrollMode === 'scale' || pinchToZoom) {
         // https://github.com/d3/d3-zoom#zoom_wheelDelta
         const scaleBy = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1);
-        scaleTo(Math.pow(2, scaleBy), point, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+        scaleTo(Math.pow(2, scaleBy), point, 
+        // @ts-expect-error
+        spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
     else if ($scrollMode === 'translate') {
-        translate.update((startTranslate) => processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+        translate.update((startTranslate) => processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale), 
+        // @ts-expect-error
+        spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
 }
 /**
@@ -172,9 +180,11 @@ const translating = motionFinishHandler();
 const scaling = motionFinishHandler();
 const moving = derived([dragging, translating, scaling], ([dragging, translating, scaling]) => dragging || translating || scaling);
 export function setTranslate(point, options) {
+    // @ts-expect-error
     translating.handle(translate.set(point, options));
 }
 export function setScale(value, options) {
+    // @ts-expect-error
     scaling.handle(scale.set(value, options));
 }
 function localPoint(e) {
@@ -207,8 +217,9 @@ setTransformContext({
 });
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  on:mousewheel={onWheel}
+  on:wheel={onWheel}
   on:pointerdown={onPointerDown}
   on:pointermove={onPointerMove}
   on:touchmove={(e) => {

package/dist/components/TransformControls.svelte

@@ -32,6 +32,7 @@ const transform = transformContext();
 const scrollMode = transform.scrollMode;
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class={cls(
     'bg-surface-300/50 rounded-full m-1 backdrop-blur z-10 flex',

package/dist/components/Tree.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from 'svelte';
-import { tree as d3Tree } from 'd3-hierarchy';
-const { data, width, height, padding } = getContext('LayerCake');
+<script>import { tree as d3Tree } from 'd3-hierarchy';
+import { chartContext } from './ChartContext.svelte';
+const { data, width, height } = chartContext();
 /**
  * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
  * If unset, layout size is used instead.  When a node size is specified, the root node is always
@@ -24,6 +24,7 @@ $: {
         tree.separation(separation);
     }
 }
+// @ts-expect-error
 $: treeData = tree($data);
 </script>
 

package/dist/components/Tree.svelte.d.ts

@@ -11,7 +11,7 @@ declare const __propDef: {
            */ nodeSize?: [number, number] | undefined;
         /**
            * see: https://github.com/d3/d3-hierarchy#tree_separation
-           */ separation?: (a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number;
+           */ separation?: ((a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number) | undefined;
         orientation?: "vertical" | "horizontal";
     };
     events: {
@@ -19,8 +19,8 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            nodes: any;
-            links: any;
+            nodes: HierarchyPointNode<any>[];
+            links: import("d3-hierarchy").HierarchyPointLink<any>[];
         };
     };
 };