layerchart 2.0.0-next.47 → 2.0.0-next.49

package/dist/components/Spline.svelte

@@ -5,6 +5,7 @@
 
   import { accessor, type Accessor } from '../utils/common.js';
   import type { MotionProp } from '../utils/motion.svelte.js';
+  import type { ColorProp, StyleProp } from '../utils/dataProp.js';
 
   export type SplinePropsWithoutHTML = {
     /**
@@ -46,12 +47,31 @@
      */
     curve?: CurveFactory | CurveFactoryLineOnly;
 
+    /**
+     * Stroke color or function returning stroke per data point.
+     * When a function, consecutive points with the same value are grouped
+     * into separate path segments, enabling per-segment styling.
+     */
+    stroke?: ColorProp;
+
+    /**
+     * Fill color or function returning fill per data point.
+     * When a function, acts as a grouping channel like `stroke`.
+     */
+    fill?: ColorProp;
+
+    /**
+     * Opacity or function returning opacity per data point.
+     * When a function, acts as a grouping channel like `stroke`.
+     */
+    opacity?: StyleProp<number | undefined>;
+
     /**
      * Whether to animate the path using tweened interpolation.
      * When set, the line will animate from the baseline (y=0) on mount.
      */
     motion?: MotionProp;
-  } & Omit<PathProps, 'x' | 'y' | 'motion'>;
+  } & Omit<PathProps, 'x' | 'y' | 'motion' | 'stroke' | 'fill' | 'opacity'>;
 
   export type SplineProps = SplinePropsWithoutHTML &
     Without<SVGAttributes<SVGPathElement>, SplinePropsWithoutHTML>;
@@ -68,6 +88,7 @@
   import { isScaleBand } from '../utils/scales.svelte.js';
   import { getChartContext } from '../contexts/chart.js';
   import { getGeoContext } from '../contexts/geo.js';
+  import { resolveColorProp, resolveStyleProp } from '../utils/dataProp.js';
   import Path, { type PathProps } from './Path.svelte';
   import {
     createMotion,
@@ -78,12 +99,12 @@
   const ctx = getChartContext();
   const geo = getGeoContext();
 
-  let { data, x, y, seriesKey, defined, curve, stroke, motion, ...restProps }: SplineProps = $props();
+  let { data, x, y, seriesKey, defined, curve, stroke, fill, opacity, motion, ...restProps }: SplineProps = $props();
 
   ctx.registerComponent({
     name: 'Spline',
     kind: 'mark',
-    markInfo: () => ({ data, x, y, seriesKey, color: stroke as string | undefined }),
+    markInfo: () => ({ data, x, y, seriesKey, color: typeof stroke === 'string' ? stroke : undefined }),
   });
 
   function getScaleValue(
@@ -119,7 +140,25 @@
   const xOffset = $derived(isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0);
   const yOffset = $derived(isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0);
 
+  function buildPath(resolvedData: any[]) {
+    const path = ctx.radial
+      ? lineRadial()
+          .angle((d) => getScaleValue(d, ctx.xScale, xAccessor) + 0) // Never apply xOffset (LineChart radar, BarChart radial, ...)?
+          .radius((d) => getScaleValue(d, ctx.yScale, yAccessor) + yOffset)
+      : d3Line()
+          .x((d) => getScaleValue(d, ctx.xScale, xAccessor) + xOffset)
+          .y((d) => getScaleValue(d, ctx.yScale, yAccessor) + yOffset);
+
+    path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
+    if (curve) path.curve(curve);
+
+    return path(resolvedData) ?? '';
+  }
+
   const d = $derived.by(() => {
+    // Skip full-path computation when segments mode handles rendering
+    if (hasAnyStyleFn && !geo.projection) return '';
+
     const resolvedData = data ?? series?.data ?? ctx.data;
 
     // Geo mode: convert data to GeoJSON LineString and render via geoPath
@@ -135,19 +174,61 @@
       return d3GeoPath(geo.projection)(lineString) ?? '';
     }
 
-    const path = ctx.radial
-      ? lineRadial()
-          .angle((d) => getScaleValue(d, ctx.xScale, xAccessor) + 0) // Never apply xOffset (LineChart radar, BarChart radial, ...)?
+    return buildPath(resolvedData);
+  });
 
-          .radius((d) => getScaleValue(d, ctx.yScale, yAccessor) + yOffset)
-      : d3Line()
-          .x((d) => getScaleValue(d, ctx.xScale, xAccessor) + xOffset)
-          .y((d) => getScaleValue(d, ctx.yScale, yAccessor) + yOffset);
+  type SegmentStyle = { stroke?: string; fill?: string; opacity?: number };
 
-    path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
-    if (curve) path.curve(curve);
+  /**
+   * Groups consecutive data points by a composite key derived from function-valued style props.
+   * The key at index `i` determines the style for the segment from point `i` to point `i+1`.
+   * Each group includes an overlap of 1 point at boundaries for curve continuity.
+   */
+  function groupConsecutive(
+    data: any[],
+    keyFn: (d: any, index: number, data: any[]) => { key: string; style: SegmentStyle }
+  ): Array<{ style: SegmentStyle; data: any[] }> {
+    if (data.length < 2) return [];
+
+    const groups: Array<{ style: SegmentStyle; data: any[] }> = [];
+    let current = keyFn(data[0], 0, data);
+    let startIdx = 0;
+
+    for (let i = 1; i < data.length; i++) {
+      const next = keyFn(data[i], i, data);
+      if (next.key !== current.key) {
+        groups.push({ style: current.style, data: data.slice(startIdx, i + 1) });
+        startIdx = i;
+        current = next;
+      }
+    }
+    if (data.length - startIdx >= 2) {
+      groups.push({ style: current.style, data: data.slice(startIdx) });
+    }
 
-    return path(resolvedData) ?? '';
+    return groups;
+  }
+
+  const hasAnyStyleFn = $derived(
+    typeof stroke === 'function' || typeof fill === 'function' || typeof opacity === 'function'
+  );
+
+  const segments = $derived.by(() => {
+    if (!hasAnyStyleFn) return null;
+    const resolvedData = data ?? series?.data ?? ctx.data;
+    if (geo.projection) return null;
+
+    const groups = groupConsecutive(resolvedData, (d, i, arr) => {
+      const s = resolveColorProp(stroke, d, ctx.cScale, i, arr);
+      const f = resolveColorProp(fill, d, ctx.cScale, i, arr);
+      const o = resolveStyleProp(opacity, d, i, arr);
+      return { key: `${s}\0${f}\0${o}`, style: { stroke: s, fill: f, opacity: o } };
+    });
+
+    return groups.map((group) => ({
+      ...group.style,
+      d: buildPath(group.data),
+    }));
   });
 
   const extractedTween = extractTweenConfig(motion);
@@ -191,20 +272,37 @@
   }
 
   const tweenState = createMotion(defaultPathData(), () => d, tweenOptions);
+
+  const seriesOpacity = $derived(
+    series?.key == null ||
+    ctx.series.visibleSeries.length <= 1 ||
+    ctx.series.isHighlighted(series.key, true)
+      ? 1
+      : 0.1
+  );
 </script>
 
 <!-- TODO: handle in LineChart/etc? -->
 <!-- class: cls(props.spline?.class, s.props?.class), -->
 
-<Path
-  pathData={tweenOptions ? tweenState.current : d}
-  stroke={stroke ?? series?.color}
-  opacity={series?.key == null ||
-  // Checking `visibleSeries.length <= 1` fixes re-animated tweened areas on hover
-  ctx.series.visibleSeries.length <= 1 ||
-  ctx.series.isHighlighted(series.key, true)
-    ? 1
-    : 0.1}
-  {...series?.props}
-  {...restProps}
-/>
+{#if segments}
+  {#each segments as seg, i (i)}
+    <Path
+      pathData={seg.d}
+      stroke={seg.stroke}
+      fill={seg.fill}
+      {...series?.props}
+      {...restProps}
+      opacity={seg.opacity ?? seriesOpacity}
+    />
+  {/each}
+{:else}
+  <Path
+    pathData={tweenOptions ? tweenState.current : d}
+    stroke={(typeof stroke === 'string' ? stroke : undefined) ?? series?.color}
+    fill={typeof fill === 'string' ? fill : undefined}
+    {...series?.props}
+    {...restProps}
+    opacity={(typeof opacity === 'number' ? opacity : undefined) ?? seriesOpacity}
+  />
+{/if}

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

@@ -3,6 +3,7 @@ import type { SVGAttributes } from 'svelte/elements';
 import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
 import { type Accessor } from '../utils/common.js';
 import type { MotionProp } from '../utils/motion.svelte.js';
+import type { ColorProp, StyleProp } from '../utils/dataProp.js';
 export type SplinePropsWithoutHTML = {
     /**
      * Override data instead of using context
@@ -37,12 +38,28 @@ export type SplinePropsWithoutHTML = {
      * @type {CurveFactory | CurveFactoryLineOnly | undefined}
      */
     curve?: CurveFactory | CurveFactoryLineOnly;
+    /**
+     * Stroke color or function returning stroke per data point.
+     * When a function, consecutive points with the same value are grouped
+     * into separate path segments, enabling per-segment styling.
+     */
+    stroke?: ColorProp;
+    /**
+     * Fill color or function returning fill per data point.
+     * When a function, acts as a grouping channel like `stroke`.
+     */
+    fill?: ColorProp;
+    /**
+     * Opacity or function returning opacity per data point.
+     * When a function, acts as a grouping channel like `stroke`.
+     */
+    opacity?: StyleProp<number | undefined>;
     /**
      * Whether to animate the path using tweened interpolation.
      * When set, the line will animate from the baseline (y=0) on mount.
      */
     motion?: MotionProp;
-} & Omit<PathProps, 'x' | 'y' | 'motion'>;
+} & Omit<PathProps, 'x' | 'y' | 'motion' | 'stroke' | 'fill' | 'opacity'>;
 export type SplineProps = SplinePropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, SplinePropsWithoutHTML>;
 import { type PathProps } from './Path.svelte';
 declare const Spline: import("svelte").Component<SplineProps, {}, "">;

package/dist/components/Text.svelte

@@ -3,6 +3,7 @@
   import type { DataDrivenStyleProps } from '../utils/dataProp.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
+  import type { FormatType, FormatConfig } from '@layerstack/utils';
 
   /**
    * Check if a string looks like a CSS/SVG value (percentage, em, px, etc.)
@@ -163,6 +164,12 @@
      */
     ref?: SVGTextElement;
 
+    /**
+     * Format the displayed value. When set with `motion` and a numeric `value`,
+     * the number will tween smoothly and be formatted for display.
+     */
+    format?: FormatType | FormatConfig;
+
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
 
@@ -224,7 +231,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { cls } from '@layerstack/tailwind';
-  import { merge } from '@layerstack/utils';
+  import { merge, format as formatValue } from '@layerstack/utils';
 
   import { getLayerContext } from '../contexts/layer.js';
   import { getChartContext } from '../contexts/chart.js';
@@ -263,6 +270,7 @@
     stroke,
     fill,
     fillOpacity,
+    format,
     motion,
     svgRef: svgRefProp = $bindable(),
     ref: refProp = $bindable(),
@@ -318,18 +326,20 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveTextPosition(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveTextPosition(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {
@@ -387,11 +397,26 @@
     };
   });
 
-  // Handle null and convert `\n` strings back to newline characters
-  const rawText = $derived(
-    typeof value !== 'function' && value != null ? value.toString().replace(/\\n/g, '\n') : ''
+  // Tween numeric values when motion is configured
+  const motionValue = createMotion(
+    typeof value === 'number' ? value : 0,
+    () => (typeof value === 'number' ? value : 0),
+    typeof value === 'number' && motion ? (typeof motion === 'object' && 'type' in motion ? motion : undefined) : undefined
   );
 
+  // Handle null and convert `\n` strings back to newline characters
+  const rawText = $derived.by(() => {
+    if (typeof value === 'function' || value == null) return '';
+    if (typeof value === 'number' && motion) {
+      const v = motionValue.current;
+      // @ts-expect-error - improve format types
+      return format ? formatValue(v, format) : String(v);
+    }
+    // @ts-expect-error - improve format types
+    const text = format ? formatValue(value, format) : value.toString();
+    return text.replace(/\\n/g, '\n');
+  });
+
   const textValue = $derived.by(() => {
     if (!truncateConfig) return rawText;
     return truncateText(rawText, truncateConfig);
@@ -628,8 +653,8 @@
   }
 
   // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
-  const fillKey = createKey(() => fill);
-  const strokeKey = createKey(() => stroke);
+  const fillKey = layerCtx === 'canvas' ? createKey(() => fill) : undefined;
+  const strokeKey = layerCtx === 'canvas' ? createKey(() => stroke) : undefined;
 
   chartCtx.registerComponent({
     name: 'Text',
@@ -651,8 +676,8 @@
         value,
         motionX.current,
         motionY.current,
-        fillKey.current,
-        strokeKey.current,
+        fillKey!.current,
+        strokeKey!.current,
         strokeWidth,
         opacity,
         className,

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

@@ -2,6 +2,7 @@ import type { Without } from '../utils/types.js';
 import type { DataDrivenStyleProps } from '../utils/dataProp.js';
 import type { SVGAttributes } from 'svelte/elements';
 import { type MotionProp } from '../utils/motion.svelte.js';
+import type { FormatType, FormatConfig } from '@layerstack/utils';
 /**
  * Check if a Text prop value is a data-space prop.
  * Functions are always data props.
@@ -122,6 +123,11 @@ export type TextPropsWithoutHTML = {
      * @bindable
      */
     ref?: SVGTextElement;
+    /**
+     * Format the displayed value. When set with `motion` and a numeric `value`,
+     * the number will tween smoothly and be formatted for display.
+     */
+    format?: FormatType | FormatConfig;
     /** Motion configuration (pixel mode only). */
     motion?: MotionProp;
     /**

package/dist/components/TransformContext.svelte

@@ -110,6 +110,14 @@
     }
   });
 
+  $effect.pre(() => {
+    transformState.processTranslate = processTranslate;
+  });
+
+  $effect.pre(() => {
+    transformState.disablePointer = disablePointer ?? false;
+  });
+
   $effect.pre(() => {
     transformState.constrain = constrain;
   });

package/dist/components/TransformContext.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TransformContext.svelte.test.js

@@ -0,0 +1,166 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { tick } from 'svelte';
+import TransformTestHarness from './tests/TransformTestHarness.svelte';
+import { geoMercator, geoOrthographic } from 'd3-geo';
+describe('TransformContext', () => {
+    describe('reactive prop syncing', () => {
+        it('should sync processTranslate when projection changes from flat to globe', async () => {
+            let chartContext;
+            const chartProps = $state({
+                height: 300,
+                geo: {
+                    projection: geoMercator,
+                    fitGeojson: { type: 'Sphere' },
+                },
+                transform: {
+                    mode: 'projection',
+                },
+            });
+            render(TransformTestHarness, {
+                chartProps,
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // Mercator is a flat projection — processTranslate should be undefined
+            expect(chartContext.transform.processTranslate).toBeUndefined();
+            // Switch to orthographic (globe)
+            chartProps.geo = {
+                projection: geoOrthographic,
+                fitGeojson: { type: 'Sphere' },
+            };
+            await tick();
+            // Orthographic is a globe — processTranslate should now be a function
+            await vi.waitFor(() => {
+                expect(chartContext.transform.processTranslate).toBeTypeOf('function');
+            });
+        });
+        it('should sync processTranslate when projection changes from globe to flat', async () => {
+            let chartContext;
+            const chartProps = $state({
+                height: 300,
+                geo: {
+                    projection: geoOrthographic,
+                    fitGeojson: { type: 'Sphere' },
+                },
+                transform: {
+                    mode: 'projection',
+                },
+            });
+            render(TransformTestHarness, {
+                chartProps,
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            // Orthographic is a globe — processTranslate should be a function
+            expect(chartContext.transform.processTranslate).toBeTypeOf('function');
+            // Switch to Mercator (flat)
+            chartProps.geo = {
+                projection: geoMercator,
+                fitGeojson: { type: 'Sphere' },
+            };
+            await tick();
+            // Mercator is flat — processTranslate should be undefined
+            await vi.waitFor(() => {
+                expect(chartContext.transform.processTranslate).toBeUndefined();
+            });
+        });
+        it('should enable scale for globe projections so scroll zoom works', async () => {
+            let chartContext;
+            render(TransformTestHarness, {
+                chartProps: {
+                    height: 300,
+                    geo: {
+                        projection: geoOrthographic,
+                        fitGeojson: { type: 'Sphere' },
+                    },
+                    transform: {
+                        mode: 'projection',
+                        scrollMode: 'scale',
+                    },
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            const initialScale = chartContext.transform.scale;
+            expect(initialScale).toBeGreaterThan(1); // fitSize should give a scale > 1
+            // Simulate zoom in
+            chartContext.transform.setScale(initialScale * 2, { instant: true });
+            await tick();
+            await vi.waitFor(() => {
+                expect(chartContext.transform.scale).toBeCloseTo(initialScale * 2, 0);
+            });
+            // Verify the projection scale also updated (transformApply.scale = true for globes)
+            expect(chartContext.geo.projection?.scale()).toBeCloseTo(initialScale * 2, 0);
+        });
+        it('should interpret scaleExtent as relative multipliers in projection mode', async () => {
+            let chartContext;
+            render(TransformTestHarness, {
+                chartProps: {
+                    height: 300,
+                    geo: {
+                        projection: geoMercator,
+                        fitGeojson: { type: 'Sphere' },
+                    },
+                    transform: {
+                        mode: 'projection',
+                        scrollMode: 'scale',
+                        scaleExtent: [0.5, 2],
+                    },
+                },
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            const initialScale = chartContext.transform.scale;
+            expect(initialScale).toBeGreaterThan(10); // Mercator fitSize scale is typically large
+            // Try to zoom way beyond 2x — should be clamped to 2x initial
+            chartContext.transform.setScale(initialScale * 5, { instant: true });
+            await tick();
+            await vi.waitFor(() => {
+                // Should be clamped to ~2x the initial scale
+                expect(chartContext.transform.scale).toBeCloseTo(initialScale * 2, 0);
+            });
+            // Try to zoom below 0.5x — should be clamped to 0.5x initial
+            chartContext.transform.setScale(initialScale * 0.1, { instant: true });
+            await tick();
+            await vi.waitFor(() => {
+                expect(chartContext.transform.scale).toBeCloseTo(initialScale * 0.5, 0);
+            });
+        });
+        it('should sync disablePointer reactively', async () => {
+            let chartContext;
+            const chartProps = $state({
+                height: 300,
+                transform: {
+                    mode: 'canvas',
+                    disablePointer: false,
+                },
+            });
+            render(TransformTestHarness, {
+                chartProps,
+                oncontext: (ctx) => {
+                    chartContext = ctx;
+                },
+            });
+            await vi.waitFor(() => expect(chartContext).toBeDefined());
+            expect(chartContext.transform.disablePointer).toBe(false);
+            // Enable disablePointer
+            chartProps.transform = {
+                mode: 'canvas',
+                disablePointer: true,
+            };
+            await tick();
+            await vi.waitFor(() => {
+                expect(chartContext.transform.disablePointer).toBe(true);
+            });
+        });
+    });
+});

package/dist/components/Vector.svelte

@@ -208,18 +208,20 @@
   // --- Data mode motion ---
   const dataMotionMap = createDataMotionMap(motion);
 
-  $effect(() => {
-    if (!dataMode || !dataMotionMap) return;
-    const activeKeys = new Set<any>();
-    for (let i = 0; i < resolvedData.length; i++) {
-      const d = resolvedData[i];
-      const key = keyFn(d, i);
-      activeKeys.add(key);
-      const resolved = resolveVector(d);
-      untrack(() => dataMotionMap.update(key, resolved));
-    }
-    untrack(() => dataMotionMap.cleanup(activeKeys));
-  });
+  if (dataMotionMap) {
+    $effect(() => {
+      if (!dataMode) return;
+      const activeKeys = new Set<any>();
+      for (let i = 0; i < resolvedData.length; i++) {
+        const d = resolvedData[i];
+        const key = keyFn(d, i);
+        activeKeys.add(key);
+        const resolved = resolveVector(d);
+        untrack(() => dataMotionMap.update(key, resolved));
+      }
+      untrack(() => dataMotionMap.cleanup(activeKeys));
+    });
+  }
 
   // Single source of truth: resolved values with animated overlay
   const resolvedItems = $derived.by(() => {

package/dist/components/index.d.ts

@@ -104,6 +104,8 @@ export { default as Link } from './Link.svelte';
 export * from './Link.svelte';
 export { default as MotionPath } from './MotionPath.svelte';
 export * from './MotionPath.svelte';
+export { default as Month } from './Month.svelte';
+export * from './Month.svelte';
 export { default as Pack } from './Pack.svelte';
 export * from './Pack.svelte';
 export { default as Partition } from './Partition.svelte';

package/dist/components/index.js

@@ -104,6 +104,8 @@ export { default as Link } from './Link.svelte';
 export * from './Link.svelte';
 export { default as MotionPath } from './MotionPath.svelte';
 export * from './MotionPath.svelte';
+export { default as Month } from './Month.svelte';
+export * from './Month.svelte';
 export { default as Pack } from './Pack.svelte';
 export * from './Pack.svelte';
 export { default as Partition } from './Partition.svelte';

package/dist/components/tests/TransformTestHarness.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Chart from '../Chart.svelte';
+  import type { ChartState } from '../../states/chart.svelte.js';
+
+  let {
+    chartProps = {},
+    oncontext,
+  }: {
+    chartProps?: Record<string, any>;
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+  } = $props();
+
+  let chartContext = $state<ChartState<any, any, any>>();
+
+  $effect(() => {
+    if (chartContext) {
+      oncontext?.(chartContext);
+    }
+  });
+
+  const mergedChartProps = $derived({
+    height: 300,
+    ...chartProps,
+  });
+</script>
+
+<Chart {...mergedChartProps} bind:context={chartContext} />

package/dist/components/tests/TransformTestHarness.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ChartState } from '../../states/chart.svelte.js';
+type $$ComponentProps = {
+    chartProps?: Record<string, any>;
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+};
+declare const TransformTestHarness: import("svelte").Component<$$ComponentProps, {}, "">;
+type TransformTestHarness = ReturnType<typeof TransformTestHarness>;
+export default TransformTestHarness;