@fundar/data-chart-telling 1.0.0 → 1.2.0

package/dist/layout/coordinates/camera.svelte.js

@@ -17,6 +17,11 @@ function tweenState(args) {
     let from;
     let to;
     let raf;
+    function stop() {
+        if (raf != null)
+            cancelAnimationFrame(raf);
+        raf = undefined;
+    }
     function setCurrent(value) {
         current = value;
         lastValue = value;
@@ -37,16 +42,16 @@ function tweenState(args) {
             from = atStart ? target : (lastValue ?? target);
             to = target;
         }
-        if (raf != null) {
-            cancelAnimationFrame(raf);
-            raf = undefined;
-        }
         if (progress != null) {
+            stop();
             setCurrent(args.lerp(from, to, Interpolation.buildEasing(transition?.easing)(clamp01(progress)), direction));
             return;
         }
+        // A rerun with the same target (the caller rebuilds `transition` on every
+        // render) leaves a tween in flight alone.
         if (!changed)
             return;
+        stop();
         const duration = Math.max(0, transition?.duration ?? 750);
         const easing = Interpolation.buildEasing(transition?.easing);
         const startFrom = from;
@@ -58,11 +63,9 @@ function tweenState(args) {
             raf = t < 1 ? requestAnimationFrame(tick) : undefined;
         }
         raf = requestAnimationFrame(tick);
-        return () => {
-            if (raf != null)
-                cancelAnimationFrame(raf);
-        };
     });
+    // Only leaving the page stops a tween the effect above started.
+    $effect(() => stop);
     return {
         get current() {
             return current;

package/dist/layout/coordinates/projections/argentina.js

@@ -1,7 +1,7 @@
 import { geoAzimuthalEquidistant } from 'd3-geo';
 import { pointsToFitFeature } from './fit';
 // Representative extremity points - not real border geometry (which stays
-// out of `src/lib`, see stories/plots/geo/data.ts), just enough for
+// out of `src/lib`, see stories/plots/map/geo/data.ts), just enough for
 // `fitSize` to frame Argentina's full territorial claim sensibly. These are
 // plain real-world coordinates, not derived from any particular dataset, so
 // they work the same way regardless of which Argentina GeoJSON actually

package/dist/layout/coordinates/projections/fit.d.ts

@@ -2,7 +2,7 @@
  * Wraps a handful of representative `[lon, lat]` points as a `MultiPoint`
  * Feature, just so `projection.fitExtent`/`fitSize` has something to
  * measure. Custom projections built on these live in `src/lib` (see
- * `stories/plots/geo/data.ts` for why real border geometry doesn't), so a
+ * `stories/plots/map/geo/data.ts` for why real border geometry doesn't), so a
  * few hand-picked extremity points stand in for a region's true extent.
  */
 export declare function pointsToFitFeature(points: [number, number][]): GeoJSON.Feature;

package/dist/layout/coordinates/projections/fit.js

@@ -2,7 +2,7 @@
  * Wraps a handful of representative `[lon, lat]` points as a `MultiPoint`
  * Feature, just so `projection.fitExtent`/`fitSize` has something to
  * measure. Custom projections built on these live in `src/lib` (see
- * `stories/plots/geo/data.ts` for why real border geometry doesn't), so a
+ * `stories/plots/map/geo/data.ts` for why real border geometry doesn't), so a
  * few hand-picked extremity points stand in for a region's true extent.
  */
 export function pointsToFitFeature(points) {

package/dist/layout/coordinates/zoom.svelte.d.ts

@@ -6,15 +6,14 @@ export type GeoZoomTransform = {
 };
 /**
  * Wires drag-pan + scroll-zoom onto a DOM node via d3-zoom, exposing the
- * resulting transform as reactive Svelte state, applied by the caller as an
- * SVG `<g transform="translate(x,y) scale(k)">` wrapper.
+ * resulting transform as reactive Svelte state, which the caller applies to
+ * the plot's projection (see `ProjectionZoom`).
  *
  * `panEnabled`/`zoomEnabled` gate drag-translate and wheel/pinch-scale
  * independently, as separate `.filter()`s on the same underlying instance.
  *
- * Limitations: hover/tooltip hit-testing doesn't compensate for an active
- * transform. Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled`
- * (d3-zoom can't distinguish a pinch from a one-finger drag until underway).
+ * Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled` (d3-zoom
+ * can't distinguish a pinch from a one-finger drag until underway).
  */
 export declare function createGeoZoom(args: {
     panEnabled: () => boolean;

package/dist/layout/coordinates/zoom.svelte.js

@@ -2,15 +2,14 @@ import { select } from 'd3-selection';
 import { zoom as d3zoom, zoomIdentity } from 'd3-zoom';
 /**
  * Wires drag-pan + scroll-zoom onto a DOM node via d3-zoom, exposing the
- * resulting transform as reactive Svelte state, applied by the caller as an
- * SVG `<g transform="translate(x,y) scale(k)">` wrapper.
+ * resulting transform as reactive Svelte state, which the caller applies to
+ * the plot's projection (see `ProjectionZoom`).
  *
  * `panEnabled`/`zoomEnabled` gate drag-translate and wheel/pinch-scale
  * independently, as separate `.filter()`s on the same underlying instance.
  *
- * Limitations: hover/tooltip hit-testing doesn't compensate for an active
- * transform. Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled`
- * (d3-zoom can't distinguish a pinch from a one-finger drag until underway).
+ * Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled` (d3-zoom
+ * can't distinguish a pinch from a one-finger drag until underway).
  */
 export function createGeoZoom(args) {
     let transform = $state({ x: 0, y: 0, k: 1 });

package/dist/layout/facet/FacetLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
 	import { isMobile } from '../../stores/device';
-	import { resolveAccessor } from '../../plots/utils/accessors';
+	import { resolveAccessor } from '../../utils/accessors';
 	import FacetIndicator from './FacetIndicator.svelte';
 	import Grid from '../grid/Grid.svelte';
 	import GridCell from '../grid/GridCell.svelte';

package/dist/layout/facet/config.js

@@ -1,4 +1,4 @@
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 /** Whether a facet config wraps one facet per `by` value, rather than laying out a `rows`/`cols` grid. */
 export function isFacetWrap(facet) {
     return facet.by !== undefined;

package/dist/layout/figure/Figure.svelte

@@ -90,6 +90,8 @@
 	// svelte-ignore state_referenced_locally
 	const ownLegend = (legend !== undefined && legend !== false) || !outer;
 	const legendState = ownLegend ? LegendState.provide() : outer!;
+	// svelte-ignore state_referenced_locally
+	if (outer && legend === false) LegendState.silence();
 
 	/** What the figure adds to its automatic legend, when `legend` is `{ items, sections }`. */
 	const extension = $derived(

package/dist/layout/geometry/GeometryLayout.svelte

@@ -23,6 +23,7 @@
 	import RasterMarker from '../../markers/raster/RasterMarker.svelte';
 	import TickMarker from '../../markers/tick/TickMarker.svelte';
 	import TrailMarker from '../../markers/trail/TrailMarker.svelte';
+	import ViolinMarker from '../../markers/violin/ViolinMarker.svelte';
 	import WaffleMarker from '../../markers/waffle/WaffleMarker.svelte';
 	import DotMarker from '../../markers/dot/DotMarker.svelte';
 	import TextMarker from '../../markers/text/TextMarker.svelte';
@@ -39,6 +40,7 @@
 	import ContourClipMarker from '../../markers/contour/ContourClipMarker.svelte';
 	import InsetMarker from '../../markers/inset/InsetMarker.svelte';
 	import FrameClip from './FrameClip.svelte';
+	import MarkerOffset from './MarkerOffset.svelte';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { usePlot } from '../plot/usePlot';
 	import { PlotMargins } from '../margins/PlotMargins.svelte';
@@ -48,7 +50,6 @@
 	import type { PlotHover } from '../hover/PlotHover.svelte';
 	import type { ScopedMarkerGroup } from '../../types/layout/geometry';
 	import type { GeoFeature } from '../../types/plots/data/geo';
-	import type { ChannelScalesConfig } from '../../types/layout/scales';
 	import { MarkerGrouping } from '../../phases/statistics/MarkerGrouping';
 	import { FrameClipping } from './FrameClipping';
 
@@ -75,7 +76,6 @@
 		markers = [],
 		seriesData = [],
 		scopedGroups = [],
-		channelScales = undefined,
 		ctrl,
 		numericMargins,
 		data = [],
@@ -91,8 +91,6 @@
 		seriesData?: Series<TSeries>[];
 		/** One entry per series that can own a `series`-scoped marker. Same `TSeries` as `seriesData`. */
 		scopedGroups?: ScopedMarkerGroup<TSeries>[];
-		/** This plot kind's own `color`/`grouping` channel config - the fallback a marker's own `scales` inherits when it sets none of its own. */
-		channelScales?: ChannelScalesConfig;
 		/** `BasePlotLayout`'s own hover controller. */
 		ctrl: PlotHover<TData>;
 		/** The plot's own resolved margins - places the content box an `inset` marker needs. */
@@ -122,7 +120,8 @@
 		const scope = scopedSeriesOf(marker);
 		if (scope) return `${scope}-${marker.type}-${i}`;
 		if (marker.type === 'rule') {
-			const v = typeof marker.value === 'function' ? i : marker.value;
+			// A rule over rows (`data`) has no value of its own to tell it from another one.
+			const v = typeof marker.value === 'function' || marker.data ? i : marker.value;
 			return `rule-${marker.axis}-${v}`;
 		}
 		if (marker.type === 'bar') return `bar-${marker.role}-${i}`;
@@ -130,7 +129,7 @@
 	}
 </script>
 
-{#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
+{#snippet drawMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
 	{#if marker.type === 'bar'}
 		<BarMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'line'}
@@ -173,12 +172,12 @@
 		<TickMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'trail'}
 		<TrailMarker marker={{ ...marker, data: marker.data ?? rows }} />
+	{:else if marker.type === 'violin'}
+		<ViolinMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'waffle'}
 		<WaffleMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'dot'}
-		<DotMarker
-			marker={{ ...marker, data: marker.data ?? rows, scales: marker.scales ?? channelScales }}
-		/>
+		<DotMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'text'}
 		<TextMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'rule'}
@@ -236,6 +235,12 @@
 	{/if}
 {/snippet}
 
+{#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
+	<MarkerOffset {marker}>
+		{@render drawMarker(marker, rows)}
+	</MarkerOffset>
+{/snippet}
+
 {#snippet renderScoped(marker: MarkerConfig, group: ScopedMarkerGroup<TSeries>)}
 	{#if marker.type === 'hover'}
 		{@const seriesPoints = ctrl.points.filter((p) => p.series === group.name)}

package/dist/layout/geometry/GeometryLayout.svelte.d.ts

@@ -4,7 +4,6 @@ import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip'
 import type { PlotHover } from '../hover/PlotHover.svelte';
 import type { ScopedMarkerGroup } from '../../types/layout/geometry';
 import type { GeoFeature } from '../../types/plots/data/geo';
-import type { ChannelScalesConfig } from '../../types/layout/scales';
 declare function $$render<TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData>(): {
     props: {
         /** The plot's own outer width/height - sizes the content box an `inset` marker needs. */
@@ -15,8 +14,6 @@ declare function $$render<TData extends Record<string, unknown>, TSeries extends
         seriesData?: Series<TSeries>[];
         /** One entry per series that can own a `series`-scoped marker. Same `TSeries` as `seriesData`. */
         scopedGroups?: ScopedMarkerGroup<TSeries>[];
-        /** This plot kind's own `color`/`grouping` channel config - the fallback a marker's own `scales` inherits when it sets none of its own. */
-        channelScales?: ChannelScalesConfig;
         /** `BasePlotLayout`'s own hover controller. */
         ctrl: PlotHover<TData>;
         /** The plot's own resolved margins - places the content box an `inset` marker needs. */

package/dist/layout/geometry/MarkerOffset.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { RowOffset } from '../../markers/utils/RowOffset';
+	import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+
+	/**
+	 * Moves what it draws by the marker's `dx` and `dy` (the numbers; a function of
+	 * the row is each marker's own), as a translate of the whole marker - so any
+	 * marker kind can be offset, on a map too, where svelteplot ignores a mark's
+	 * own `dx`/`dy`. A `text` marker places its own labels, since its lanes and
+	 * flips depend on the offset.
+	 */
+	let {
+		marker,
+		children
+	}: {
+		marker: { type: string; dx?: RowOffsetConfig; dy?: RowOffsetConfig };
+		children: Snippet;
+	} = $props();
+
+	const offset = $derived(marker.type === 'text' ? { dx: 0, dy: 0 } : RowOffset.whole(marker));
+</script>
+
+{#if offset.dx !== 0 || offset.dy !== 0}
+	<g transform="translate({offset.dx},{offset.dy})">{@render children()}</g>
+{:else}
+	{@render children()}
+{/if}

package/dist/layout/geometry/MarkerOffset.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+type $$ComponentProps = {
+    marker: {
+        type: string;
+        dx?: RowOffsetConfig;
+        dy?: RowOffsetConfig;
+    };
+    children: Snippet;
+};
+declare const MarkerOffset: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkerOffset = ReturnType<typeof MarkerOffset>;
+export default MarkerOffset;

package/dist/layout/grid/GridCell.svelte

@@ -96,14 +96,12 @@
 		</div>
 	{/if}
 	{#if ready && layout && layout.box.width > 0 && layout.box.height > 0}
-		{#key JSON.stringify(layout.box.margins ?? null)}
-			{@render children({
-				width: layout.box.width,
-				height: layout.box.height,
-				margins: layout.box.margins,
-				edges: layout.edges
-			})}
-		{/key}
+		{@render children({
+			width: layout.box.width,
+			height: layout.box.height,
+			margins: layout.box.margins,
+			edges: layout.edges
+		})}
 	{/if}
 </div>
 

package/dist/layout/hover/HoverSettings.d.ts

@@ -1,11 +1,10 @@
 import type { TooltipProp } from '../../types/layout/tooltip';
-import type { HoverStrategy } from '../../types/layout/hover';
-import type { TooltipConfig } from '../../types/plots/props';
+import type { HoverPoint, HoverStrategy } from '../../types/layout/hover';
+import { PlotAxes } from '../../phases/data/PlotAxes';
+import type { HoverConfig, PointMatchingStrategy, TooltipConfig } from '../../types/plots/props';
 /**
- * How the author set up a plot's hover, from its `tooltip` and its hover
- * marker (`'hover'`, or `'geo-hover'` on a map): whether it is on, the
- * strategy that matches points (the tooltip's, else the marker's, else the
- * plot kind's `defaultStrategy`) and whether it syncs across plots.
+ * A plot's hover as its `tooltip` and hover marker set it up: whether it is on,
+ * how it matches points and whether it syncs across plots.
  */
 export declare class HoverSettings<TRow extends Record<string, unknown>> {
     /** The tooltip, or `undefined` when off. */
@@ -17,4 +16,19 @@ export declare class HoverSettings<TRow extends Record<string, unknown>> {
     constructor(tooltip: TooltipProp<TRow> | TooltipConfig<TRow> | undefined, markers: {
         type: string;
     }[] | undefined, defaultStrategy: HoverStrategy);
+    /** The strategy a plot's axes ask for: along the unmeasured axis, or `'punctual'` when both hold categories. */
+    static strategyOf(axes: PlotAxes | undefined): HoverStrategy;
+    /** A plot's `hover` config; its tooltip reads as `format` unless it sets its own. */
+    static buildConfig<TRow extends Record<string, unknown>>(args: {
+        tooltip: TooltipConfig<TRow> | undefined;
+        format: (row: TRow) => string;
+        sort?: (a: TRow, b: TRow) => number;
+        markers: {
+            type: string;
+        }[];
+        points: HoverPoint<TRow>[];
+        label: (row: TRow) => string;
+        defaultStrategy: HoverStrategy;
+        pointMatching?: PointMatchingStrategy;
+    }): HoverConfig<TRow>;
 }

package/dist/layout/hover/HoverSettings.js

@@ -1,8 +1,7 @@
+import { PlotAxes } from '../../phases/data/PlotAxes';
 /**
- * How the author set up a plot's hover, from its `tooltip` and its hover
- * marker (`'hover'`, or `'geo-hover'` on a map): whether it is on, the
- * strategy that matches points (the tooltip's, else the marker's, else the
- * plot kind's `defaultStrategy`) and whether it syncs across plots.
+ * A plot's hover as its `tooltip` and hover marker set it up: whether it is on,
+ * how it matches points and whether it syncs across plots.
  */
 export class HoverSettings {
     /** The tooltip, or `undefined` when off. */
@@ -24,4 +23,30 @@ export class HoverSettings {
         this.strategy = this.tooltip?.strategy ?? marker?.strategy ?? defaultStrategy;
         this.sync = this.tooltip?.sync ?? marker?.sync ?? false;
     }
+    /** The strategy a plot's axes ask for: along the unmeasured axis, or `'punctual'` when both hold categories. */
+    static strategyOf(axes) {
+        if (!axes)
+            return 'x';
+        if (axes.isDiscrete('x') && axes.isDiscrete('y'))
+            return 'punctual';
+        return PlotAxes.other(PlotAxes.valueOf({ axes }));
+    }
+    /** A plot's `hover` config; its tooltip reads as `format` unless it sets its own. */
+    static buildConfig(args) {
+        const { tooltip, format, sort, markers, points, label, defaultStrategy, pointMatching } = args;
+        const settings = new HoverSettings(tooltip, markers, defaultStrategy);
+        return {
+            active: settings.active,
+            points,
+            label,
+            strategy: settings.strategy,
+            sync: settings.sync,
+            tooltip: tooltip && {
+                ...tooltip,
+                format: tooltip.format ?? format,
+                ...(sort ? { sort } : {})
+            },
+            ...(pointMatching ? { pointMatching } : {})
+        };
+    }
 }

package/dist/layout/legend/ContinuousSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import type { ContinuousLegendSection } from '../../types/layout/legend';
-	import { makeColorScale, resolveColorScale } from '../../utils/color';
+	import { ColorRamp } from '../../utils/color';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { AxisNumberFormat } from './AxisNumberFormat';
 	import { LegendState } from './LegendState.svelte';
@@ -10,6 +10,7 @@
 
 	const cfg = $derived(getConfiguration());
 	const gradientId = `dct-grad-${Math.random().toString(36).slice(2)}`;
+	const checkerId = `dct-checker-${Math.random().toString(36).slice(2)}`;
 	const barWidth = $derived(section.width ?? 170);
 
 	const fmt = $derived(section.format ?? AxisNumberFormat.of([section.min, section.max], cfg));
@@ -31,6 +32,7 @@
 	const svgHeight = $derived(cfg.legend.continuous.height);
 	const barHeight = $derived(cfg.legend.continuous.barHeight);
 	const barRadius = $derived(cfg.legend.continuous.barRadius);
+	const opacityLook = $derived(cfg.legend.continuous.opacity);
 
 	// Fill/opacity for the excluded-margin rects.
 	const excludedStyle = $derived.by((): { fill: string; opacity: number } => {
@@ -79,16 +81,18 @@
 	);
 	const colorScale = $derived(
 		section.scheme !== undefined
-			? resolveColorScale({ scheme: section.scheme, pivot: section.pivot }, colorDomain, [
+			? ColorRamp.resolve({ scheme: section.scheme, pivot: section.pivot }, colorDomain, [
 					cfg.continuous.min,
 					cfg.continuous.max
 				])
-			: makeColorScale(
-					colorDomain[0],
-					colorDomain[1],
-					section.colorMin ?? cfg.continuous.min,
-					section.colorMax ?? cfg.continuous.max
-				)
+			: cfg.continuous.scheme && section.colorMin === undefined && section.colorMax === undefined
+				? ColorRamp.continuous(cfg, undefined, colorDomain)
+				: ColorRamp.between(
+						colorDomain[0],
+						colorDomain[1],
+						section.colorMin ?? cfg.continuous.min,
+						section.colorMax ?? cfg.continuous.max
+					)
 	);
 
 	const stops = $derived(
@@ -98,7 +102,7 @@
 			return section.opacity
 				? {
 						offset: t * 100,
-						color: section.colorMin ?? 'currentColor',
+						color: section.colorMin ?? opacityLook.color,
 						opacity: section.opacity[0] + t * (section.opacity[1] - section.opacity[0])
 					}
 				: { offset: t * 100, color: colorScale(v), opacity: 1 };
@@ -203,7 +207,38 @@
 					<stop offset="{s.offset}%" stop-color={s.color} stop-opacity={s.opacity} />
 				{/each}
 			</linearGradient>
+			{#if section.opacity}
+				<pattern
+					id={checkerId}
+					width={opacityLook.checker.size * 2}
+					height={opacityLook.checker.size * 2}
+					patternUnits="userSpaceOnUse"
+				>
+					<rect width="100%" height="100%" fill={opacityLook.checker.light} />
+					<rect
+						width={opacityLook.checker.size}
+						height={opacityLook.checker.size}
+						fill={opacityLook.checker.dark}
+					/>
+					<rect
+						x={opacityLook.checker.size}
+						y={opacityLook.checker.size}
+						width={opacityLook.checker.size}
+						height={opacityLook.checker.size}
+						fill={opacityLook.checker.dark}
+					/>
+				</pattern>
+			{/if}
 		</defs>
+		{#if section.opacity}
+			<rect
+				x={handleBleed}
+				width={trackWidth}
+				height={barHeight}
+				rx={barRadius}
+				fill="url(#{checkerId})"
+			/>
+		{/if}
 		<rect
 			x={handleBleed}
 			width={trackWidth}

package/dist/layout/legend/DiscreteBadgeItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { contrastTextColor } from '../../utils/color';
+	import { CssColor } from '../../utils/color';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { LegendText } from './LegendText';
 	import DiscreteSymbolIcon from './DiscreteSymbolIcon.svelte';
@@ -24,7 +24,7 @@
 		omitMode?: boolean;
 	} = $props();
 	const cfg = $derived(getConfiguration());
-	const textColor = $derived(contrastTextColor(color));
+	const textColor = $derived(CssColor.contrastText(color));
 </script>
 
 <span class="dct-discrete__badge" style:background={color} style:color={textColor}>

package/dist/layout/legend/DiscreteSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { SvelteSet } from 'svelte/reactivity';
 	import { getConfiguration } from '../../configuration/config.svelte';
-	import { paletteColor } from '../../utils/color';
+	import { Palette } from '../../utils/color';
 	import { LegendState } from './LegendState.svelte';
 	import { DisabledStyle } from './DisabledStyle';
 	import DiscreteBadgeItem from './DiscreteBadgeItem.svelte';
@@ -167,7 +167,7 @@
 		disabledStyle?.fill ??
 		disabledStyle?.stroke?.stroke ??
 		item.color ??
-		paletteColor(i, cfg.palette)}
+		Palette.at(i, cfg.palette)}
 	{@const itemOpacity = disabledStyle
 		? (disabledStyle.opacity ?? cfg.legend.disabledOpacity)
 		: (item.opacity ?? 1)}

package/dist/layout/legend/DiscreteSymbolIcon.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { LegendItem } from '../../types/layout/legend';
 	import type { LineStyle } from '../../types/plots/constants';
-	import { SymbolPath } from '../../utils/symbol';
+	import { SymbolPath } from '../../utils/SymbolPath';
 
 	/**
 	 * The series' symbol/line-style icon, shared by both discrete item looks