layerchart 0.42.0 → 0.43.1

package/dist/components/ForceSimulation.svelte

@@ -1,6 +1,7 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { forceSimulation } from 'd3-force';
-const { data } = getContext('LayerCake');
+import { chartContext } from './ChartContext.svelte';
+const { data } = chartContext();
 const dispatch = createEventDispatcher();
 export let forces;
 export let alpha = 1;
@@ -8,7 +9,7 @@ export let alphaTarget = 0;
 export let alphaDecay = 1 - Math.pow(0.001, 1 / 300);
 export let alphaMin = 0.001;
 export let velocityDecay = 0.4;
-export let alphaResponse = undefined;
+/** Stop simulation */
 export let stopped = false;
 let _static = false;
 /** If true, will only update nodes after simulation has completed */

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

@@ -8,8 +8,7 @@ declare const __propDef: {
         alphaDecay?: number;
         alphaMin?: number;
         velocityDecay?: number;
-        alphaResponse?: ((alpha: number, alphaTarget: number) => number) | undefined;
-        stopped?: boolean;
+        /** Stop simulation */ stopped?: boolean;
         /** If true, will only update nodes after simulation has completed */ static?: boolean;
         /** Clone data since simulation mutates original */ cloneData?: boolean;
     };

package/dist/components/Frame.svelte

@@ -1,16 +1,17 @@
-<script>import { getContext } from 'svelte';
-const { width, height, padding } = getContext('LayerCake');
+<script>import { chartContext } from './ChartContext.svelte';
+const { width, height, padding } = chartContext();
 /** Include padding area */
 export let full = false;
 /** Access underlying `<rect>` element */
-export let rectEl;
+export let rectEl = undefined;
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <rect
-  x={full ? -$padding.left : 0}
-  y={full ? -$padding.top : 0}
-  width={$width + (full ? $padding.left + $padding.right : 0)}
-  height={$height + (full ? $padding.top + $padding.bottom : 0)}
+  x={full && $padding?.left ? -$padding.left : 0}
+  y={full && $padding?.top ? -$padding.top : 0}
+  width={$width + (full ? ($padding?.left ?? 0) + ($padding?.right ?? 0) : 0)}
+  height={$height + (full ? ($padding?.top ?? 0) + ($padding?.bottom ?? 0) : 0)}
   on:click
   on:pointerdown
   on:dblclick

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

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         full?: boolean;
-        rectEl: SVGRectElement;
+        rectEl?: SVGRectElement | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import GeoPath from './GeoPath.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,7 +10,7 @@ declare const __propDef: {
         pointermove: PointerEvent;
         pointerleave: PointerEvent;
         click: CustomEvent<{
-            geoPath: GeoPath;
+            geoPath: ReturnType<typeof import("..").geoCurvePath>;
             event: MouseEvent;
         }>;
     } & {

package/dist/components/GeoContext.svelte

@@ -1,6 +1,7 @@
 <script context="module">import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import {} from 'd3-geo';
+import { chartContext } from './ChartContext.svelte';
 import { transformContext } from './TransformContext.svelte';
 export const geoContextKey = Symbol();
 export function geoContext() {
@@ -11,7 +12,7 @@ function setGeoContext(geo) {
 }
 </script>
 
-<script>const { width, height } = getContext('LayerCake');
+<script>const { width, height } = chartContext();
 /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */
 export let projection = undefined;
 export let fitGeojson = undefined;

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

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import { type Writable } from 'svelte/store';
-import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
+import { type GeoPermissibleObjects, type GeoProjection } from 'd3-geo';
 export declare const geoContextKey: unique symbol;
-export type GeoContext = Writable<GeoProjection | GeoIdentityTransform>;
+export type GeoContext = Writable<GeoProjection>;
 export declare function geoContext(): GeoContext;
 declare const __propDef: {
     props: {
-        /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */ projection?: (() => GeoProjection | GeoIdentityTransform) | undefined;
+        /** @type {Function} projection - A d3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`. */ projection?: (() => GeoProjection) | undefined;
         fitGeojson?: GeoPermissibleObjects | undefined;
         /** By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here. */ fixedAspectRatio?: number | undefined;
         clipAngle?: number | undefined;
@@ -25,14 +25,14 @@ declare const __propDef: {
         /** Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are mutually selected  */ applyTransform?: ("scale" | "translate" | "rotate")[];
         reflectX?: boolean | undefined;
         reflectY?: boolean | undefined;
-        /** Exposed to allow binding in Chart */ geo?: Writable<GeoProjection | GeoIdentityTransform>;
+        /** Exposed to allow binding in Chart */ geo?: Writable<GeoProjection>;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
-            projection: GeoProjection | GeoIdentityTransform;
+            projection: GeoProjection;
         };
     };
 };

package/dist/components/GeoEdgeFade.svelte

@@ -1,14 +1,11 @@
-<script>import { getContext } from 'svelte';
-import { scaleLinear } from 'd3-scale';
+<script>import { scaleLinear } from 'd3-scale';
 import { geoDistance } from 'd3-geo';
 import { geoContext } from './GeoContext.svelte';
 export let link;
-const { width, height } = getContext('LayerCake');
 const geo = geoContext();
 const fade = scaleLinear().domain([-0.1, 0]).range([0, 0.1]);
 const clamper = scaleLinear().domain([0, 1]).range([0, 1]).clamp(true);
-// $: center = $geo.invert([$width / 2, $height / 2]);
-$: center = $geo.invert($geo.translate());
+$: center = $geo.invert?.($geo.translate()) ?? [0, 0];
 $: source = link.source;
 $: target = link.target;
 $: startDistance = 1.57 - geoDistance(source, center);

package/dist/components/GeoPath.svelte

@@ -1,6 +1,7 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
 import { geoTransform as d3geoTransform, } from 'd3-geo';
 import { cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import { geoContext } from './GeoContext.svelte';
 import { curveLinearClosed } from 'd3-shape';
 import { geoCurvePath } from '../utils/geo.js';
@@ -27,7 +28,7 @@ export let curve = curveLinearClosed;
 let className = undefined;
 export { className as class };
 const dispatch = createEventDispatcher();
-const { containerWidth, containerHeight, padding } = getContext('LayerCake');
+const { containerWidth, containerHeight, padding } = chartContext();
 const canvas = getContext('canvas');
 const geo = geoContext();
 /**
@@ -58,25 +59,28 @@ $: if (renderContext === 'canvas' && $ctx) {
         $ctx.beginPath();
         // Set the context here since setting it in `$: geoPath` is a circular reference
         geoPath = geoCurvePath(_projection, curve, $ctx);
-        geoPath(geojson);
+        if (geojson) {
+            geoPath(geojson);
+        }
         $ctx.fillStyle =
             fill ??
                 (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
                 'transparent';
         $ctx.fill();
-        $ctx.lineWidth = strokeWidth;
+        $ctx.lineWidth = Number(strokeWidth ?? 0);
         $ctx.strokeStyle =
-            stroke ?? computedStyles.stroke === 'none' ? 'transparent' : computedStyles.stroke;
+            stroke ?? computedStyles.stroke === 'none' ? 'transparent' : computedStyles.stroke ?? '';
         $ctx.stroke();
     }
 }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 {#if renderContext === 'svg'}
   <slot {geoPath}>
     <path
       {...$$restProps}
-      d={geoPath(geojson)}
+      d={geojson ? geoPath(geojson) : ''}
       {fill}
       {stroke}
       stroke-width={strokeWidth}

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

@@ -2,11 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import { type GeoIdentityTransform, type GeoPermissibleObjects, type GeoProjection, type GeoTransformPrototype } from 'd3-geo';
 import type { TooltipContextValue } from './TooltipContext.svelte';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+import { geoCurvePath } from '../utils/geo.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        geojson?: GeoPermissibleObjects;
-        render?: ((ctx: CanvasRenderingContext2D, { geoPath: GeoPath }: any) => any) | undefined;
+        geojson?: GeoPermissibleObjects | null | undefined;
+        render?: ((ctx: CanvasRenderingContext2D, options: {
+            geoPath: ReturnType<typeof geoCurvePath>;
+        }) => any) | undefined;
         fill?: string | undefined;
         stroke?: string | undefined;
         strokeWidth?: number | string | undefined;
@@ -21,7 +24,7 @@ declare const __propDef: {
         pointerleave: PointerEvent;
         pointerdown: PointerEvent;
         click: CustomEvent<{
-            geoPath: GeoPath;
+            geoPath: ReturnType<typeof geoCurvePath>;
             event: MouseEvent;
         }>;
     } & {
@@ -29,7 +32,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            geoPath: (object: GeoPermissibleObjects) => string | undefined;
+            geoPath: import("d3-geo").GeoPath<unknown, GeoPermissibleObjects>;
         };
     };
 };

package/dist/components/GeoPoint.svelte

@@ -8,7 +8,6 @@ export let lat;
 export let long;
 /** Render to canvas */
 export let render = () => { };
-const { width, height } = getContext('LayerCake');
 const canvas = getContext('canvas');
 const geo = geoContext();
 $: [x, y] = $geo([long, lat]) ?? [0, 0];

package/dist/components/GeoSpline.svelte

@@ -1,5 +1,4 @@
-<script>import { getContext } from 'svelte';
-import { curveNatural } from 'd3-shape';
+<script>import { curveNatural } from 'd3-shape';
 import { geoOrthographic, geoInterpolate } from 'd3-geo';
 import { geoContext } from './GeoContext.svelte';
 import Spline from './Spline.svelte';
@@ -16,7 +15,6 @@ export let loft = 1.0;
  * @type {CurveFactory | CurveFactoryLineOnly | undefined}
  */
 export let curve = curveNatural;
-const { width, height } = getContext('LayerCake');
 const geo = geoContext();
 $: loftedProjection = geoOrthographic()
     .translate($geo.translate())
@@ -27,11 +25,4 @@ $: target = $geo(link.target);
 $: middle = loftedProjection(geoInterpolate(link.source, link.target)(0.5));
 </script>
 
-<Spline
-  data={[source, middle, target]}
-  x={(d) => d[0]}
-  y={(d) => d[1]}
-  defined={(d) => $geo.invert(d)}
-  {curve}
-  {...$$restProps}
-/>
+<Spline data={[source, middle, target]} x={(d) => d[0]} y={(d) => d[1]} {curve} {...$$restProps} />

package/dist/components/GeoTile.svelte

@@ -1,5 +1,7 @@
 <script>import { getContext } from 'svelte';
+// @ts-expect-error
 import { tile as d3Tile } from 'd3-tile';
+import { chartContext } from './ChartContext.svelte';
 import { geoContext } from './GeoContext.svelte';
 import Group from './Group.svelte';
 import TileImage from './TileImage.svelte';
@@ -8,7 +10,7 @@ export let zoomDelta = 0;
 export let tileSize = 256;
 export let disableCache = false;
 export let debug = false;
-const { containerWidth, containerHeight, padding } = getContext('LayerCake');
+const { containerWidth, containerHeight, padding } = chartContext();
 const canvas = getContext('canvas');
 const geo = geoContext();
 $: center = $geo([0, 0]) ?? [0, 0];

package/dist/components/Group.svelte

@@ -1,6 +1,7 @@
-<script>import { getContext, tick } from 'svelte';
+<script>import { tick } from 'svelte';
+import { chartContext } from './ChartContext.svelte';
 import { motionStore } from '../stores/motionStore.js';
-const { width, height } = getContext('LayerCake');
+const { width, height } = chartContext();
 /**
  * Translate x
  */
@@ -33,6 +34,7 @@ $: if (center || x != null || y != null) {
 }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <g
   {transform}
   {...$$restProps}

package/dist/components/Highlight.svelte

@@ -1,13 +1,14 @@
-<script>import { getContext } from 'svelte';
+<script>import {} from 'svelte';
 import { max, min } from 'd3-array';
 import { cls, notNull } from 'svelte-ux';
-import { isScaleBand } from '../utils/scales.js';
+import { chartContext } from './ChartContext.svelte';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
 import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
-const { flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = getContext('LayerCake');
+import { isScaleBand } from '../utils/scales.js';
+const { flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = chartContext();
 const tooltip = tooltipContext();
 /** Highlight specific data (annotate), espect uses tooltip data */
 export let data = undefined;
@@ -173,6 +174,7 @@ $: if (highlightData) {
         {..._area}
         {...typeof area === 'object' ? area : null}
         class={cls(
+          // @ts-expect-error
           !area.fill && 'fill-surface-content/5',
           typeof area === 'object' ? area.class : null
         )}
@@ -185,14 +187,18 @@ $: if (highlightData) {
     <slot name="bar" {bar}>
       <Bar
         spring={motion}
-        x={typeof bar === 'object' ? bar.x : null}
-        y={typeof bar === 'object' ? bar.y : null}
-        inset={typeof bar === 'object' ? bar.inset : null}
-        stroke={typeof bar === 'object' ? bar.stroke : null}
-        strokeWidth={typeof bar === 'object' ? bar.strokeWidth : null}
-        radius={typeof bar === 'object' ? bar.radius : null}
+        x={typeof bar === 'object' ? bar.x : undefined}
+        y={typeof bar === 'object' ? bar.y : undefined}
+        inset={typeof bar === 'object' ? bar.inset : undefined}
+        stroke={typeof bar === 'object' ? bar.stroke : undefined}
+        strokeWidth={typeof bar === 'object' ? bar.strokeWidth : undefined}
+        radius={typeof bar === 'object' ? bar.radius : undefined}
         bar={highlightData}
-        class={cls(!bar.fill && 'fill-primary', typeof bar === 'object' ? bar.class : null)}
+        class={cls(
+          // @ts-expect-error
+          !bar.fill && 'fill-primary',
+          typeof bar === 'object' ? bar.class : null
+        )}
         on:click
       />
     </slot>

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import { type ComponentProps } from 'svelte';
 import Circle from './Circle.svelte';
 import Line from './Line.svelte';
+import Bar from './Bar.svelte';
 import Rect from './Rect.svelte';
 declare const __propDef: {
     props: {
@@ -10,7 +11,7 @@ declare const __propDef: {
         /** Show points and pass props to Circles */ points?: boolean | Partial<ComponentProps<Circle>>;
         /** Show lines and pass props to Lines */ lines?: boolean | Partial<ComponentProps<Line>>;
         /** Show area and pass props to Rect */ area?: boolean | Partial<ComponentProps<Rect>>;
-        /** Show bar and pass props to Rect */ bar?: boolean | Partial<ComponentProps<Rect>>;
+        /** Show bar and pass props to Rect */ bar?: boolean | Partial<ComponentProps<Bar>>;
         /** Set to false to disable spring transitions */ motion?: boolean;
     };
     events: {
@@ -30,20 +31,20 @@ declare const __propDef: {
         bar: {
             bar: boolean | Partial<{
                 [x: string]: any;
-                x?: number;
-                initialX?: number;
-                y?: number;
-                initialY?: number;
-                width: number;
-                initialWidth?: number;
-                height: number;
-                initialHeight?: number;
-                spring?: boolean | import("../stores/motionStore").SpringOptions | {
-                    [prop: string]: import("../stores/motionStore").SpringOptions;
-                };
-                tweened?: boolean | import("../stores/motionStore").TweenedOptions | {
-                    [prop: string]: import("../stores/motionStore").TweenedOptions;
-                };
+                bar: Object;
+                x?: import("../utils/common").Accessor;
+                y?: import("../utils/common").Accessor;
+                fill?: string | undefined;
+                stroke?: string;
+                strokeWidth?: number;
+                radius?: number;
+                rounded?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+                inset?: number;
+                groupBy?: string | undefined;
+                groupPaddingInner?: number;
+                groupPaddingOuter?: number;
+                spring?: ComponentProps<Rect>["spring"];
+                tweened?: ComponentProps<Rect>["tweened"];
             }>;
         };
         lines: {

package/dist/components/HitCanvas.svelte

@@ -1,10 +1,12 @@
-<script>import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
+<script>import { createEventDispatcher, onMount, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { scaleCanvas } from 'layercake';
 import { cls } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import Canvas from './layout/Canvas.svelte';
 import { transformContext } from './TransformContext.svelte';
-const { width, height } = getContext('LayerCake');
+const { width, height } = chartContext();
+// @ts-expect-error: this will immediately be defined on mount via `bind:context`
 export let context = undefined;
 /** Show canvas for debugging */
 export let debug = false;
@@ -29,6 +31,7 @@ function* rgbColorGenerator(step = 500) {
         nextColor += step;
         yield `rgb(${rgb.join(',')})`;
     }
+    return 'rgb(0,0,0)';
 }
 $: colorGenerator = rgbColorGenerator();
 // Reset color generator whenever updated (width/height) so always reusing same colors (and not exhausting)

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

@@ -19,7 +19,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            nextColor: () => string | void;
+            nextColor: () => string;
             setColorData: (color: string, data: any) => void;
         };
     };

package/dist/components/Hull.svelte

@@ -1,13 +1,15 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { cls } from 'svelte-ux';
 import { min } from 'd3-array';
 import { Delaunay } from 'd3-delaunay';
+// @ts-expect-error
 import { geoVoronoi } from 'd3-geo-voronoi';
+import { curveLinearClosed } from 'd3-shape';
+import { chartContext } from './ChartContext.svelte';
 import GeoPath from './GeoPath.svelte';
 import { geoContext } from './GeoContext.svelte';
 import Spline from './Spline.svelte';
-import { curveLinearClosed } from 'd3-shape';
-const { flatData, x: xContext, y: yContext } = getContext('LayerCake');
+const { flatData, x: xContext, y: yContext } = chartContext();
 const geo = geoContext();
 /** Override data instead of using context */
 export let data = undefined;
@@ -20,6 +22,7 @@ $: points = (data ?? $flatData).map((d) => {
     const x = Array.isArray(xValue) ? min(xValue) : xValue;
     const y = Array.isArray(yValue) ? min(yValue) : yValue;
     const point = [x, y];
+    // @ts-expect-error
     point.data = d;
     return point;
 });

package/dist/components/Labels.svelte

@@ -3,24 +3,25 @@
  *   - [ ] Support step curves (center like scaleBand())
  *   - [ ] Support multiple values (threshold, stacks, etc)
  */
-import { getContext } from 'svelte';
+import {} from 'svelte';
 import { format as formatValue, cls } from 'svelte-ux';
 import { greatestAbs } from 'svelte-ux/utils/array';
+const { flatData, yScale, x, y, custom } = chartContext();
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales.js';
 import { createDimensionGetter } from '../utils/rect.js';
-const { flatData, yScale, x, y, custom } = getContext('LayerCake');
+import { chartContext } from './ChartContext.svelte';
 // TODO: Support 'auto' to switch `inside` to `outside` if not enough room
 export let placement = 'outside';
 export let offset = 4;
-export let significantDigits = 3;
 export let format = undefined;
 // export let overlap = false;
+// @ts-expect-error
 $: yBaseline = $custom?.yBaseline ?? 0;
 export let groupBy = undefined;
 export let groupPaddingInner = 0.2;
 export let groupPaddingOuter = 0;
-$: getDimensions = createDimensionGetter(getContext('LayerCake'), {
+$: getDimensions = createDimensionGetter(chartContext(), {
     // x,
     // y,
     groupBy,

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

@@ -5,7 +5,6 @@ declare const __propDef: {
         [x: string]: any;
         placement?: "inside" | "outside";
         offset?: number;
-        significantDigits?: number;
         format?: FormatType | undefined;
         groupBy?: string | undefined;
         groupPaddingInner?: number;

package/dist/components/Legend.svelte

@@ -1,11 +1,11 @@
-<script>import { getContext } from 'svelte';
-import { scaleBand, scaleLinear } from 'd3-scale';
+<script>import { scaleBand, scaleLinear } from 'd3-scale';
 import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
 import { quantile, range } from 'd3-array';
 import { format } from 'svelte-ux';
+import { chartContext } from './ChartContext.svelte';
 import ColorRamp from './ColorRamp.svelte';
 import { cls } from 'svelte-ux';
-const { rScale } = getContext('LayerCake') ?? {};
+const { rScale } = chartContext() ?? {};
 export let scale = undefined;
 export let title = '';
 export let width = 320;
@@ -123,7 +123,7 @@ else {
   )}
 >
   <div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
-  <slot values={tickValues} {scale}>
+  <slot values={tickValues ?? []} {scale}>
     <svg
       {width}
       height={height + tickLength + tickFontSize}

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         width?: number;
         height?: number;
         ticks?: number;
-        tickFormat?: FormatType;
+        tickFormat?: FormatType | undefined;
         tickValues?: any[] | undefined;
         tickFontSize?: number;
         tickLength?: number;
@@ -25,7 +25,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            values: any[] | undefined;
+            values: any[];
             scale: any;
         };
     };

package/dist/components/Line.svelte

@@ -23,6 +23,7 @@ $: tick().then(() => {
 });
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <line
   x1={$tweened_x1}
   y1={$tweened_y1}

package/dist/components/Link.svelte

@@ -15,17 +15,19 @@ export let x = (d) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x)
 export let y = (d) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
 export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
 export let tweened = undefined;
+// @ts-expect-error
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     orientation; // subscribe to orientation changes to update link
     const link = d3Link(curve).source(source).target(target).x(x).y(y);
-    const d = link(data);
+    const d = link(data) ?? '';
     tweened_d.set(d);
 }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <path
   class="path-link"
   d={$tweened_d}

package/dist/components/Pack.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from 'svelte';
-import { pack as d3Pack } from 'd3-hierarchy';
-const { data, width, height } = getContext('LayerCake');
+<script>import { pack as d3Pack } from 'd3-hierarchy';
+import { chartContext } from './ChartContext.svelte';
+const { data, width, height } = chartContext();
 export let size = undefined;
 /**
  * see: https://github.com/d3/d3-hierarchy#pack_padding
@@ -13,6 +13,7 @@ $: {
         pack.padding(padding);
     }
 }
+// @ts-expect-error
 $: packData = pack($data);
 </script>
 

package/dist/components/Partition.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from 'svelte';
-import { partition as d3Partition } from 'd3-hierarchy';
-const { data, width, height } = getContext('LayerCake');
+<script>import { partition as d3Partition, } from 'd3-hierarchy';
+import { chartContext } from './ChartContext.svelte';
+const { data, width, height } = chartContext();
 export let orientation = 'horizontal';
 export let size = undefined;
 /**

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { type HierarchyRectangularNode } from 'd3-hierarchy';
 declare const __propDef: {
     props: {
         orientation?: "vertical" | "horizontal";
@@ -15,7 +16,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            nodes: import("d3-hierarchy").HierarchyRectangularNode<unknown>[];
+            nodes: HierarchyRectangularNode<any>[];
         };
     };
 };