layerchart 2.0.0-next.61 → 2.0.0-next.62

package/dist/components/Path/Path.canvas.svelte

@@ -9,9 +9,12 @@
   import { createKey } from '../../utils/key.svelte.js';
   import { PathState, type PathProps } from './Path.shared.svelte.js';
 
-  let { ...rest }: PathProps = $props();
+  let { pathData, ...rest }: PathProps = $props();
 
-  const c = new PathState(() => rest as PathProps);
+  const c = new PathState(
+    () => pathData,
+    () => rest as PathProps
+  );
 
   function render(
     ctx: CanvasRenderingContext2D,

package/dist/components/Path/Path.shared.svelte.d.ts

@@ -7,10 +7,15 @@ import type { ChartState } from '../../states/chart.svelte.js';
 import type { draw as _drawTransition } from 'svelte/transition';
 export type PathPropsWithoutHTML = {
     /**
-     * Pass `<path d={...} />` explicitly instead of calculating
-     * from data / context
+     * The `d` attribute of the rendered `<path>`.
+     *
+     * Accepts either a value (resolved at call site) or a function that
+     * returns the current value. Passing a function lets the parent avoid
+     * re-rendering its own template on every change to the path data —
+     * useful when a parent like `Link` / `Spline` / `Area` updates the
+     * path on every animation tick across hundreds of instances.
      */
-    pathData?: string | undefined | null;
+    pathData?: string | undefined | null | (() => string | undefined | null);
     /**
      * Whether to animate the drawing of the path over time.
      * Pass either `true` or an object with transition options to
@@ -66,5 +71,13 @@ export declare class PathState {
     chartCtx: ChartState;
     get tweenedPathData(): any;
     drawKey: symbol;
-    constructor(getProps: () => PathProps);
+    /**
+     * @param getPathData  Hot-path getter — reads only `pathData`. Kept separate from
+     *                     `getProps` so the `<path d=...>` updater (and the canvas
+     *                     `tweenedPathData` consumer) does not subscribe to every
+     *                     Path prop on every tick.
+     * @param getProps     Full-props getter — used for one-time / cold-path config
+     *                     (motion, draw).
+     */
+    constructor(getPathData: () => PathProps['pathData'], getProps?: () => PathProps);
 }

package/dist/components/Path/Path.shared.svelte.js

@@ -2,11 +2,20 @@ import { interpolatePath } from 'd3-interpolate-path';
 import { flattenPathData } from '../../utils/path.js';
 import { createMotion, extractTweenConfig, } from '../../utils/motion.svelte.js';
 import { getChartContext } from '../../contexts/chart.js';
+/** Resolve `pathData` whether it was passed as a value or a getter function. */
+function resolvePathData(v) {
+    return typeof v === 'function' ? v() : v;
+}
 /**
  * Reactive state shared by every per-layer Path variant.
  */
 export class PathState {
-    #getProps = () => ({});
+    // Hot-path getter: reads only `pathData` (or invokes the function-getter form).
+    // Kept separate from the full-props getter so that the `<path d=...>` template
+    // updater does not subscribe to every Path prop on every read — critical for
+    // mark-heavy scenes (force-simulation graphs with hundreds of links updating
+    // per tick) where pre-fix each tween read re-evaluated all 15+ props.
+    #getPathData;
     // Contexts
     chartCtx = getChartContext();
     // Path data tween source — the actual `d` attribute / canvas render input
@@ -16,8 +25,16 @@ export class PathState {
     }
     // Re-key trigger for draw transitions
     drawKey = $state(Symbol());
-    constructor(getProps) {
-        this.#getProps = getProps;
+    /**
+     * @param getPathData  Hot-path getter — reads only `pathData`. Kept separate from
+     *                     `getProps` so the `<path d=...>` updater (and the canvas
+     *                     `tweenedPathData` consumer) does not subscribe to every
+     *                     Path prop on every tick.
+     * @param getProps     Full-props getter — used for one-time / cold-path config
+     *                     (motion, draw).
+     */
+    constructor(getPathData, getProps = () => ({})) {
+        this.#getPathData = () => resolvePathData(getPathData());
         const initial = getProps();
         const extractedTween = extractTweenConfig(initial.motion);
         const tweenedOptions = extractedTween
@@ -32,18 +49,19 @@ export class PathState {
                 // Fast initial render when not tweened
                 return '';
             }
-            else if (initial.pathData) {
-                return flattenPathData(initial.pathData, Math.min(this.chartCtx.yScale(0) ?? this.chartCtx.yRange[0], this.chartCtx.yRange[0]));
+            const resolved = resolvePathData(getPathData());
+            if (resolved) {
+                return flattenPathData(resolved, Math.min(this.chartCtx.yScale(0) ?? this.chartCtx.yRange[0], this.chartCtx.yRange[0]));
             }
             return '';
         })();
-        this.#tweenedState = createMotion(defaultPathData, () => getProps().pathData, tweenedOptions);
+        this.#tweenedState = createMotion(defaultPathData, this.#getPathData, tweenedOptions);
         // Re-trigger draw transition when path data changes
         $effect(() => {
             if (!getProps().draw)
                 return;
-            // Touch dependency
-            void getProps().pathData;
+            // Touch dependency (resolves getter form too)
+            void this.#getPathData();
             this.drawKey = Symbol();
         });
     }

package/dist/components/Path/Path.svg.svelte

@@ -16,7 +16,7 @@
   const uid = $props.id();
 
   let {
-    pathRef: pathRefProp = $bindable(),
+    pathRef = $bindable(),
     marker,
     markerStart: markerStartProp,
     markerMid: markerMidProp,
@@ -24,29 +24,35 @@
     startContent,
     endContent,
     draw,
+    motion,
+    // Extracted out of `rest` so the `<path>` element's `{...rest}`
+    // spread doesn't re-evaluate on every frame in mark-heavy scenes
+    // (force-simulation graphs with hundreds of links updating per tick).
+    // - `pathData`: changes every frame
+    // - `class`: parents typically pass `cls(...)` which produces a new
+    //   string reference per parent render
+    // - styling props: explicit on the <path> element below, no need to
+    //   leak them through the spread
+    pathData: _pathData,
+    class: classProp,
+    fill: fillProp,
+    fillOpacity: fillOpacityProp,
+    stroke: strokeProp,
+    strokeOpacity: strokeOpacityProp,
+    strokeWidth: strokeWidthProp,
+    opacity: opacityProp,
     ...rest
   }: PathProps = $props();
 
+  // Pass `pathData` as its own getter so the hot-path tween read only subscribes
+  // to `pathData` (which changes per tick on force sims) and not to every other
+  // Path prop. Pre-fix the per-tick `<path d=...>` updater re-read all 15+ props
+  // through `getProps()` on each force-sim tick × hundreds of paths.
   const c = new PathState(
-    () =>
-      ({
-        marker,
-        markerStart: markerStartProp,
-        markerMid: markerMidProp,
-        markerEnd: markerEndProp,
-        startContent,
-        endContent,
-        draw,
-        ...rest,
-      }) as PathProps
+    () => _pathData,
+    () => ({ draw, motion }) as PathProps
   );
 
-  let pathRef = $state<SVGPathElement>();
-
-  $effect.pre(() => {
-    pathRefProp = pathRef;
-  });
-
   const markerStart = $derived(markerStartProp ?? marker);
   const markerMid = $derived(markerMidProp ?? marker);
   const markerEnd = $derived(markerEndProp ?? marker);
@@ -56,7 +62,6 @@
   const markerEndId = $derived(markerEnd ? createId('marker-end', uid) : '');
 
   const drawTransition = $derived(draw ? _drawTransition : () => ({}));
-
   let startPoint = $state<DOMPoint | undefined>();
 
   const endPointDuration = $derived.by(() => {
@@ -70,60 +75,70 @@
     return 800;
   });
 
-  const endPoint = createControlledMotion<DOMPoint | undefined>(
-    undefined,
-    draw
-      ? {
-          type: 'tween',
-          duration: () => endPointDuration,
-          easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
-          interpolate() {
-            return (t: number) => {
-              const totalLength = pathRef?.getTotalLength() ?? 0;
-              const point = pathRef?.getPointAtLength(totalLength * t);
-              return point;
-            };
-          },
-        }
-      : { type: 'none' }
-  );
-
-  $effect(() => {
-    if (!startContent && !endContent) return;
-    // Track path data changes
-    void c.tweenedPathData;
-    if (!pathRef) return;
-
-    tick().then(() => {
+  // Only allocate the controlled motion container when `draw` is configured;
+  // otherwise the per-Path `MotionNone` × hundreds of paths was a measurable
+  // mount-time cost in mark-heavy scenes.
+  const endPoint = draw
+    ? createControlledMotion<DOMPoint | undefined>(undefined, {
+        type: 'tween',
+        duration: () => endPointDuration,
+        easing: typeof draw === 'object' && draw.easing ? draw.easing : cubicInOut,
+        interpolate() {
+          return (t: number) => {
+            const totalLength = pathRef?.getTotalLength() ?? 0;
+            const point = pathRef?.getPointAtLength(totalLength * t);
+            return point;
+          };
+        },
+      })
+    : null;
+
+  // Only set up path-end tracking when startContent/endContent require it.
+  if (startContent || endContent) {
+    $effect(() => {
+      // Track path data changes
+      void c.tweenedPathData;
       if (!pathRef) return;
-      const totalLength = pathRef.getTotalLength();
-      if (!totalLength) return;
-      startPoint = pathRef.getPointAtLength(0);
-      endPoint.target = pathRef.getPointAtLength(totalLength);
+
+      tick().then(() => {
+        if (!pathRef) return;
+        const totalLength = pathRef.getTotalLength();
+        if (!totalLength) return;
+        startPoint = pathRef.getPointAtLength(0);
+        if (endPoint) {
+          endPoint.target = pathRef.getPointAtLength(totalLength);
+        }
+      });
     });
-  });
+  }
 </script>
 
 {#key c.drawKey}
   <path
     {...rest as any}
     d={c.tweenedPathData}
-    fill={rest.fill}
-    fill-opacity={rest.fillOpacity}
-    stroke={rest.stroke}
-    stroke-opacity={rest.strokeOpacity}
-    stroke-width={rest.strokeWidth}
-    opacity={rest.opacity}
-    class={cls('lc-path', rest.class as string | undefined)}
+    fill={fillProp}
+    fill-opacity={fillOpacityProp}
+    stroke={strokeProp}
+    stroke-opacity={strokeOpacityProp}
+    stroke-width={strokeWidthProp}
+    opacity={opacityProp}
+    class={cls('lc-path', classProp as string | undefined)}
     marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
     marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
     in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     bind:this={pathRef}
   />
-  <MarkerWrapper id={markerStartId} marker={markerStart} />
-  <MarkerWrapper id={markerMidId} marker={markerMid} />
-  <MarkerWrapper id={markerEndId} marker={markerEnd} />
+  {#if markerStart}
+    <MarkerWrapper id={markerStartId} marker={markerStart} />
+  {/if}
+  {#if markerMid}
+    <MarkerWrapper id={markerMidId} marker={markerMid} />
+  {/if}
+  {#if markerEnd}
+    <MarkerWrapper id={markerEndId} marker={markerEnd} />
+  {/if}
 
   {#if startContent && startPoint}
     <Group x={startPoint.x} y={startPoint.y} class="lc-path-g-start">
@@ -137,7 +152,7 @@
     </Group>
   {/if}
 
-  {#if endContent && endPoint.current}
+  {#if endContent && endPoint?.current}
     <Group x={endPoint.current.x} y={endPoint.current.y} class="lc-path-g-end">
       {@render endContent({
         point: endPoint.current,

package/dist/components/RectClipPath/RectClipPath.base.svelte

@@ -11,6 +11,7 @@
 
 <script lang="ts">
   import { createId } from '../../utils/createId.js';
+  import { createMotion, parseMotionProp } from '../../utils/motion.svelte.js';
 
   const uid = $props.id();
 
@@ -19,14 +20,37 @@
     id = createId('clipPath-', uid),
     x = 0,
     y = 0,
+    initialX,
+    initialY,
     width,
     height,
+    initialWidth,
+    initialHeight,
     disabled = false,
     invert = false,
+    motion,
     children: childrenProp,
   }: RectClipPathBaseProps = $props();
 
-  const path = $derived(`M${x},${y} h${width} v${height} h${-width} Z`);
+  // When `motion` is undefined `createMotion` returns a passthrough that just
+  // reads the getter, so we can call it unconditionally and let the fast path
+  // handle the no-motion case.
+  const motionX = createMotion(initialX ?? x, () => x, motion && parseMotionProp(motion, 'x'));
+  const motionY = createMotion(initialY ?? y, () => y, motion && parseMotionProp(motion, 'y'));
+  const motionWidth = createMotion(
+    initialWidth ?? width,
+    () => width,
+    motion && parseMotionProp(motion, 'width')
+  );
+  const motionHeight = createMotion(
+    initialHeight ?? height,
+    () => height,
+    motion && parseMotionProp(motion, 'height')
+  );
+
+  const path = $derived(
+    `M${motionX.current},${motionY.current} h${motionWidth.current} v${motionHeight.current} h${-motionWidth.current} Z`
+  );
 </script>
 
 <ClipPath {id} {disabled} {invert} {path}>

package/dist/components/RectClipPath/RectClipPath.shared.svelte.d.ts

@@ -8,12 +8,20 @@ export type BaseRectClipPathPropsWithoutHTML = {
     id?: string;
     /** The x position of the clipPath. @default 0 */
     x?: number;
+    /** The initial x position (used as the animation start when `motion` is set). @default x */
+    initialX?: number;
     /** The y position of the clipPath. @default 0 */
     y?: number;
+    /** The initial y position (used as the animation start when `motion` is set). @default y */
+    initialY?: number;
     /** The width of the clipPath. @required */
     width: number;
+    /** The initial width (used as the animation start when `motion` is set). @default width */
+    initialWidth?: number;
     /** The height of the clipPath. @required */
     height: number;
+    /** The initial height (used as the animation start when `motion` is set). @default height */
+    initialHeight?: number;
     /** Whether to disable clipping (show all). @default false */
     disabled?: boolean;
     /** Invert the clip — content renders *outside* the rect. @default false */

package/dist/components/Trail/Trail.base.svelte

@@ -122,12 +122,15 @@
     return '';
   }
 
-  const tweenState = createMotion(defaultPathData(), () => trailPath, {
-    type: 'tween',
-    interpolate: interpolatePath,
-  });
-
-  const isTweened = $derived(extractTweenConfig(motion) != null);
+  // Only allocate the tween container when the user opts into a tween via
+  // `motion`; otherwise the template reads `trailPath` directly.
+  const tweenState =
+    extractTweenConfig(motion) != null
+      ? createMotion(defaultPathData(), () => trailPath, {
+          type: 'tween',
+          interpolate: interpolatePath,
+        })
+      : null;
 
   ctx.registerComponent({
     name: 'Trail',
@@ -137,7 +140,7 @@
 </script>
 
 <Path
-  pathData={isTweened ? tweenState.current : trailPath}
+  pathData={tweenState ? tweenState.current : trailPath}
   {fill}
   {fillOpacity}
   {opacity}

package/dist/components/index.d.ts

@@ -18,8 +18,8 @@ export { default as Bar } from './Bar/Bar.svelte';
 export * from './Bar/Bar.svelte';
 export { default as Bars } from './Bars/Bars.svelte';
 export * from './Bars/Bars.svelte';
-export { default as Blur } from './Blur.svelte';
-export * from './Blur.svelte';
+export { default as Blur } from './Blur/Blur.svelte';
+export * from './Blur/Blur.svelte';
 export { default as BoxPlot } from './BoxPlot/BoxPlot.svelte';
 export * from './BoxPlot/BoxPlot.svelte';
 export { default as Bounds } from './Bounds.svelte';

package/dist/components/index.js

@@ -18,8 +18,8 @@ export { default as Bar } from './Bar/Bar.svelte';
 export * from './Bar/Bar.svelte';
 export { default as Bars } from './Bars/Bars.svelte';
 export * from './Bars/Bars.svelte';
-export { default as Blur } from './Blur.svelte';
-export * from './Blur.svelte';
+export { default as Blur } from './Blur/Blur.svelte';
+export * from './Blur/Blur.svelte';
 export { default as BoxPlot } from './BoxPlot/BoxPlot.svelte';
 export * from './BoxPlot/BoxPlot.svelte';
 export { default as Bounds } from './Bounds.svelte';

package/dist/html.d.ts

@@ -72,8 +72,8 @@ export { default as Calendar } from './components/Calendar/Calendar.html.svelte'
 export type { CalendarProps, CalendarPropsWithoutHTML, CalendarCell, } from './components/Calendar/Calendar.shared.svelte.js';
 export { default as Month } from './components/Month/Month.html.svelte';
 export type { MonthProps, MonthPropsWithoutHTML, MonthCell, } from './components/Month/Month.shared.svelte.js';
-export { default as Blur } from './components/Blur.svelte';
-export * from './components/Blur.svelte';
+export { default as Blur } from './components/Blur/Blur.svelte';
+export * from './components/Blur/Blur.svelte';
 export { default as Bounds } from './components/Bounds.svelte';
 export * from './components/Bounds.svelte';
 export { default as BrushContext } from './components/BrushContext.svelte';

package/dist/html.js

@@ -47,8 +47,8 @@ export { default as Month } from './components/Month/Month.html.svelte';
 // helpers, context providers, or composite chart wrappers). Re-exported here
 // so the per-layer sub-path has a complete API.
 // Helpers / context providers
-export { default as Blur } from './components/Blur.svelte';
-export * from './components/Blur.svelte';
+export { default as Blur } from './components/Blur/Blur.svelte';
+export * from './components/Blur/Blur.svelte';
 export { default as Bounds } from './components/Bounds.svelte';
 export * from './components/Bounds.svelte';
 export { default as BrushContext } from './components/BrushContext.svelte';

package/dist/states/chart.svelte.d.ts

@@ -50,7 +50,6 @@ export interface RegisterComponentOptions<T extends Element = Element> {
 }
 export declare class ChartState<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> {
     #private;
-    private _propsGetter;
     props: ChartPropsWithoutHTML<TData, XScale, YScale>;
     geoState: GeoState;
     transformState: TransformState;
@@ -90,7 +89,10 @@ export declare class ChartState<TData = any, XScale extends AnyScale = AnyScale,
     private _xDomainIsDate;
     private _yDomainIsDate;
     meta: Record<string, any>;
-    constructor(propsGetter: () => ChartPropsWithoutHTML<TData, XScale, YScale>);
+    constructor(props: ChartPropsWithoutHTML<TData, XScale, YScale>, overrides?: {
+        brushXDomain?: () => BrushDomainType | undefined;
+        brushYDomain?: () => BrushDomainType | undefined;
+    });
     containerWidth: number;
     containerHeight: number;
     data: import("d3-sankey").SankeyGraph<any, any> | readonly TData[] | import("d3-hierarchy").HierarchyNode<TData>;

package/dist/states/chart.svelte.js

@@ -17,11 +17,22 @@ const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
 const EMPTY_SERIES = [];
 /** Svelte context key for tracking the nearest parent ComponentNode. */
 const _ParentNodeContext = new Context('ComponentTreeParent');
+/** Mark info is "empty" when none of the fields the chart uses for series /
+ * domain inference are populated. Pixel-mode primitives produce empty info
+ * since they have no string/function accessors and no own data. */
+function isEmptyMarkInfo(info) {
+    return !info.x && !info.y && !info.data && !info.color && !info.seriesKey && !info.label;
+}
 export class ChartState {
-    // Props getter function - set in constructor
-    _propsGetter;
-    // Props - accessed via getter function for fine-grained reactivity
-    props = $derived(this._propsGetter());
+    // The `$props()` proxy from the host component. Reads on `this.props.X` go
+    // straight through to the underlying reactive prop — no spread / no derived
+    // wrapper needed.
+    props;
+    // Brush-domain overrides. The host component owns the brush state as local
+    // `$state` and supplies these getters so brush selections take precedence
+    // over `props.xDomain` / `props.yDomain` when reading the effective domain.
+    #brushXDomain;
+    #brushYDomain;
     // State / contexts
     geoState;
     transformState = $state(null);
@@ -132,14 +143,26 @@ export class ChartState {
             };
         });
         if (markInfo && !insideCompositeMark) {
-            $effect(() => {
-                const info = markInfo();
-                // Skip registration for empty mark info (e.g. pixel-mode marks)
-                // to avoid unnecessary array push/splice and version bumps
-                if (!info.x && !info.y && !info.data && !info.color && !info.seriesKey && !info.label)
-                    return;
-                return untrack(() => this.registerMark(info));
-            });
+            // Probe once at construction: if mark info is initially empty
+            // (pixel-mode primitives where cx/cy/r are numbers), skip the
+            // tracking $effect entirely. This is the common case for
+            // mark-heavy scenes (force simulations, scatter plots with
+            // pixel coordinates) and avoids one effect frame per primitive.
+            //
+            // Trade-off: a primitive that starts in pixel mode and later
+            // flips to data mode (e.g. cx changes from number to string at
+            // runtime) won't register a mark. This is uncommon — modes are
+            // typically static — but if needed, use explicit `series` on the
+            // chart instead of relying on implicit mark-derived series.
+            const initial = untrack(markInfo);
+            if (!isEmptyMarkInfo(initial)) {
+                $effect(() => {
+                    const info = markInfo();
+                    if (isEmptyMarkInfo(info))
+                        return;
+                    return untrack(() => this.registerMark(info));
+                });
+            }
         }
         return node;
     }
@@ -159,8 +182,10 @@ export class ChartState {
     _yDomainIsDate = false;
     // Meta data - reactive to props.meta changes
     meta = $derived(this.props.meta ?? {});
-    constructor(propsGetter) {
-        this._propsGetter = propsGetter;
+    constructor(props, overrides) {
+        this.props = props;
+        this.#brushXDomain = overrides?.brushXDomain ?? (() => undefined);
+        this.#brushYDomain = overrides?.brushYDomain ?? (() => undefined);
         // Create GeoState instance — pass a dimensions getter so projection
         // is available during SSR (where $effect doesn't run)
         this.geoState = new GeoState(() => this.props.geo ?? {}, () => ({ width: this.width, height: this.height }));
@@ -272,7 +297,7 @@ export class ChartState {
             }
         });
         // Set up domain motion if motion prop is configured
-        const motionProp = propsGetter().motion;
+        const motionProp = props.motion;
         if (motionProp) {
             const resolved = parseMotionProp(motionProp);
             this._xDomainMotion = createControlledMotion([], resolved);
@@ -373,7 +398,7 @@ export class ChartState {
         if (this.props.bandPadding != null && this.valueAxis === 'y') {
             return scaleBand().padding(this.props.bandPadding);
         }
-        return autoScale(this.props.xDomain, this.flatData, this.x);
+        return autoScale(this.#brushXDomain() ?? this.props.xDomain, this.flatData, this.x);
     });
     _yScaleProp = $derived.by(() => {
         if (this.props.yScale)
@@ -385,7 +410,7 @@ export class ChartState {
         if (this.props.bandPadding != null && this.valueAxis === 'x') {
             return scaleBand().padding(this.props.bandPadding);
         }
-        return autoScale(this.props.yDomain, this.flatData, this.y);
+        return autoScale(this.#brushYDomain() ?? this.props.yDomain, this.flatData, this.y);
     });
     _zScaleProp = $derived.by(() => {
         return this.props.zScale ?? autoScale(this.props.zDomain, this.flatData, this.props.z);
@@ -579,7 +604,9 @@ export class ChartState {
         return undefined;
     }
     resolveDomain(axis) {
-        const domain = axis === 'x' ? this.props.xDomain : this.props.yDomain;
+        const domain = axis === 'x'
+            ? (this.#brushXDomain() ?? this.props.xDomain)
+            : (this.#brushYDomain() ?? this.props.yDomain);
         const interval = axis === 'x' ? this.props.xInterval : this.props.yInterval;
         const explicitBaseline = axis === 'x' ? this.props.xBaseline : this.props.yBaseline;
         // Use explicit baseline if provided (null means "no baseline"), otherwise auto-derive

package/dist/states/chart.svelte.test.js

@@ -9,7 +9,7 @@ function createChartState(props) {
     let cleanup;
     let state;
     cleanup = $effect.root(() => {
-        state = new ChartState(() => props);
+        state = new ChartState(props);
     });
     // Access derived values after reactive graph is set up
     flushSync();

package/dist/states/series.svelte.js

@@ -9,19 +9,6 @@ export class SeriesState {
     #series = $derived(this._getSeries());
     #stackConfig = $derived(this._getStackConfig());
     selectedKeys;
-    /**
-     * Reactively syncs selectedKeys when series `selected` props change.
-     * When any series explicitly sets `selected: false`, the remaining series
-     * (with `selected` undefined or true) are pre-selected.
-     */
-    #_syncSelectedFromProps = $effect.root(() => {
-        $effect(() => {
-            const keys = SeriesState.#selectedKeysFromSeries(this.#series);
-            if (keys) {
-                this.selectedKeys.current = keys;
-            }
-        });
-    });
     /**
      * The current highlight series key for the chart.
      */
@@ -32,6 +19,15 @@ export class SeriesState {
         // Compute initial selectedKeys synchronously from series `selected` props
         const initialKeys = SeriesState.#selectedKeysFromSeries(getSeries());
         this.selectedKeys = new SelectionState({ initial: initialKeys ?? undefined });
+        // Reactively sync selectedKeys when series `selected` props change.
+        // When any series explicitly sets `selected: false`, the remaining series
+        // (with `selected` undefined or true) are pre-selected.
+        $effect(() => {
+            const keys = SeriesState.#selectedKeysFromSeries(this.#series);
+            if (keys) {
+                this.selectedKeys.current = keys;
+            }
+        });
     }
     /**
      * Extract selected keys from series definitions.