layerchart 2.0.0-next.61 → 2.0.0-next.63

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

@@ -0,0 +1,5 @@
+export type { WaffleProps, WafflePropsWithoutHTML } from './Waffle.shared.svelte.js';
+import { type WaffleProps } from './Waffle.shared.svelte.js';
+declare const Waffle: import("svelte").Component<WaffleProps, {}, "">;
+type Waffle = ReturnType<typeof Waffle>;
+export default Waffle;

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';
@@ -49,6 +49,8 @@ export { default as Contour } from './Contour/Contour.svelte';
 export * from './Contour/Contour.svelte';
 export { default as Density } from './Density/Density.svelte';
 export * from './Density/Density.svelte';
+export { default as Dodge } from './Dodge/Dodge.svelte';
+export * from './Dodge/Dodge.svelte';
 export { default as Ellipse } from './Ellipse/Ellipse.svelte';
 export * from './Ellipse/Ellipse.svelte';
 export { default as Frame } from './Frame/Frame.svelte';
@@ -125,5 +127,7 @@ export { default as Violin } from './Violin/Violin.svelte';
 export * from './Violin/Violin.svelte';
 export { default as Voronoi } from './Voronoi/Voronoi.svelte';
 export * from './Voronoi/Voronoi.svelte';
+export { default as Waffle } from './Waffle/Waffle.svelte';
+export * from './Waffle/Waffle.svelte';
 export { default as WebGL } from './layers/WebGL.svelte';
 export * from './layers/WebGL.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';
@@ -49,6 +49,8 @@ export { default as Contour } from './Contour/Contour.svelte';
 export * from './Contour/Contour.svelte';
 export { default as Density } from './Density/Density.svelte';
 export * from './Density/Density.svelte';
+export { default as Dodge } from './Dodge/Dodge.svelte';
+export * from './Dodge/Dodge.svelte';
 export { default as Ellipse } from './Ellipse/Ellipse.svelte';
 export * from './Ellipse/Ellipse.svelte';
 export { default as Frame } from './Frame/Frame.svelte';
@@ -125,5 +127,7 @@ export { default as Violin } from './Violin/Violin.svelte';
 export * from './Violin/Violin.svelte';
 export { default as Voronoi } from './Voronoi/Voronoi.svelte';
 export * from './Voronoi/Voronoi.svelte';
+export { default as Waffle } from './Waffle/Waffle.svelte';
+export * from './Waffle/Waffle.svelte';
 export { default as WebGL } from './layers/WebGL.svelte';
 export * from './layers/WebGL.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';
@@ -114,3 +114,7 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.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';
@@ -91,3 +91,7 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.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
@@ -629,11 +656,15 @@ export class ChartState {
                         extraMarkValues.push(...info.data.flatMap(accessor(markAccessor)));
                     }
                 }
-                const allValues = [...seriesValues, ...extraMarkValues];
-                if (baseline != null) {
-                    return [min([baseline, ...allValues]), max([baseline, ...allValues])];
+                const allValues = [...seriesValues, ...extraMarkValues].filter((v) => v != null);
+                if (allValues.length > 0) {
+                    if (baseline != null) {
+                        return [min([baseline, ...allValues]), max([baseline, ...allValues])];
+                    }
+                    return extent(allValues);
                 }
-                return extent(allValues);
+                // Series are metadata-only (e.g. categorical legend with no per-series
+                // values on the axis) — fall through to other resolution paths.
             }
         }
         // Interval-based domain: extend to the next interval offset

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();
@@ -893,6 +893,59 @@ describe('ChartState implicit series domain update on visibility toggle', () =>
         }
     });
 });
+describe('ChartState metadata-only series', () => {
+    it('should not produce [undefined, undefined] domain when items lack series-key properties', () => {
+        const data = [
+            { date: '2024-01', category: 'svelte' },
+            { date: '2024-02', category: 'sveltekit' },
+            { date: '2024-03', category: 'ecosystem' },
+        ];
+        const { state, cleanup } = createChartState({
+            data,
+            x: 'date',
+            valueAxis: 'y',
+            series: [
+                { key: 'svelte', color: 'red' },
+                { key: 'sveltekit', color: 'orange' },
+                { key: 'ecosystem', color: 'blue' },
+            ],
+        });
+        try {
+            expect(state._yDomain).toBeUndefined();
+        }
+        finally {
+            cleanup();
+        }
+    });
+    it('should remain stable across visibility toggles instead of throwing', () => {
+        const data = [
+            { date: '2024-01', category: 'svelte' },
+            { date: '2024-02', category: 'sveltekit' },
+        ];
+        const { state, cleanup } = createChartState({
+            data,
+            x: 'date',
+            valueAxis: 'y',
+            series: [
+                { key: 'svelte', color: 'red' },
+                { key: 'sveltekit', color: 'orange' },
+            ],
+            motion: { type: 'spring' },
+        });
+        try {
+            expect(state._yDomain).toBeUndefined();
+            expect(() => {
+                state.seriesState.selectedKeys.toggle('svelte');
+                flushSync();
+            }).not.toThrow();
+            expect(state._yDomain).toBeUndefined();
+            expect(state.seriesState.visibleSeries).toHaveLength(1);
+        }
+        finally {
+            cleanup();
+        }
+    });
+});
 describe('ChartState degenerate domain', () => {
     it('should expand degenerate y domain [0, 0] to [0, 1]', () => {
         const data = [

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.

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

@@ -11,7 +11,11 @@ const series = [
     { key: 'oranges', color: 'orange' },
 ];
 function createSeriesState(seriesData = series, stackConfig = null) {
-    return new SeriesState(() => seriesData, () => stackConfig);
+    let state;
+    $effect.root(() => {
+        state = new SeriesState(() => seriesData, () => stackConfig);
+    });
+    return state;
 }
 describe('SeriesState', () => {
     describe('constructor and basic properties', () => {

package/dist/svg.d.ts

@@ -126,8 +126,8 @@ export { default as Graticule } from './components/geo/Graticule/Graticule.svg.s
 export type { GraticuleProps, GraticulePropsWithoutHTML, } from './components/geo/Graticule/Graticule.shared.svelte.js';
 export { default as Ribbon } from './components/graph/Ribbon/Ribbon.svg.svelte';
 export type { RibbonProps, RibbonPropsWithoutHTML, } from './components/graph/Ribbon/Ribbon.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';
@@ -168,6 +168,10 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.svelte';
 export { default as GeoLegend } from './components/geo/GeoLegend/GeoLegend.svelte';
 export { default as GeoProjection } from './components/geo/GeoProjection/GeoProjection.svelte';
 export { default as GeoRaster } from './components/geo/GeoRaster/GeoRaster.svelte';

package/dist/svg.js

@@ -77,8 +77,8 @@ export { default as Ribbon } from './components/graph/Ribbon/Ribbon.svg.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';
@@ -121,6 +121,10 @@ export { default as Sankey } from './components/graph/Sankey.svelte';
 export * from './components/graph/Sankey.svelte';
 export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
 export * from './components/force/ForceSimulation.svelte';
+export { default as Dodge } from './components/Dodge/Dodge.svelte';
+export * from './components/Dodge/Dodge.svelte';
+export { default as Waffle } from './components/Waffle/Waffle.svelte';
+export * from './components/Waffle/Waffle.svelte';
 // Geo helpers (no per-layer rendering)
 export { default as GeoLegend } from './components/geo/GeoLegend/GeoLegend.svelte';
 export { default as GeoProjection } from './components/geo/GeoProjection/GeoProjection.svelte';

package/dist/utils/canvas.js

@@ -13,6 +13,16 @@ function isTransparentFill(fill) {
     // Match rgba(..., 0) - alpha channel is 0 (fully transparent)
     return /rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*0\s*\)/.test(fill);
 }
+/**
+ * Returns true if a style value cannot be assigned directly to a canvas
+ * context and must first be resolved through the hidden `<svg>` helper —
+ * specifically `var(...)` references and the `currentColor` keyword.
+ */
+function needsCSSResolution(value) {
+    if (typeof value !== 'string')
+        return false;
+    return value.includes('var(') || value.toLowerCase() === 'currentcolor';
+}
 const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
 /**
  * Parse an inline CSS style string into a StyleOptions object.
@@ -122,9 +132,8 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
     let resolvedStyles;
     if (typeof document === 'undefined' ||
-        (styleOptions.classes == null &&
-            !Object.values(mergedStyles).some((v) => typeof v === 'string' && v.includes('var(')))) {
-        // Skip resolving styles if running on server (no DOM), or no classes are provided and no styles are using CSS variables
+        (styleOptions.classes == null && !Object.values(mergedStyles).some(needsCSSResolution))) {
+        // Skip resolving styles if running on server (no DOM), or no classes are provided and no styles need CSS resolution (`var(...)` / `currentColor`)
         resolvedStyles = mergedStyles;
         // On server, provide sensible defaults for styles that would normally come from CSS
         if (typeof document === 'undefined') {
@@ -136,12 +145,12 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
     else {
         // Remove constant non-css variable properties (ex. `strokeWidth: 0.5`, `fill: #123456`) as not needed and improves memoization cache hit
         const { constantStyles, variableStyles } = Object.entries(mergedStyles).reduce((acc, [key, value]) => {
-            if (typeof value === 'number' || (typeof value === 'string' && !value.includes('var('))) {
-                acc.constantStyles[key] = value;
-            }
-            else if (typeof value === 'string' && value.includes('var(')) {
+            if (needsCSSResolution(value)) {
                 acc.variableStyles[key] = value;
             }
+            else if (typeof value === 'number' || typeof value === 'string') {
+                acc.constantStyles[key] = value;
+            }
             return acc;
         }, { constantStyles: {}, variableStyles: {} });
         const computedStyles = getComputedStyles(ctx.canvas, {
@@ -200,7 +209,7 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
                     styleOptions.styles?.fill instanceof CanvasGradient) ||
                     (typeof CanvasPattern !== 'undefined' &&
                         styleOptions.styles?.fill instanceof CanvasPattern) ||
-                    !styleOptions.styles?.fill?.includes('var'))
+                    !needsCSSResolution(styleOptions.styles?.fill))
                 ? styleOptions.styles.fill
                 : resolvedStyles?.fill;
             if (fill && !isTransparentFill(fill)) {
@@ -217,7 +226,7 @@ function render(ctx, render, styleOptions = {}, { applyText, } = {}) {
             const stroke = styleOptions.styles?.stroke &&
                 ((typeof CanvasGradient !== 'undefined' &&
                     styleOptions.styles?.stroke instanceof CanvasGradient) ||
-                    !styleOptions.styles?.stroke?.includes('var'))
+                    !needsCSSResolution(styleOptions.styles?.stroke))
                 ? styleOptions.styles?.stroke
                 : resolvedStyles?.stroke;
             if (stroke && !['none'].includes(stroke)) {
@@ -371,10 +380,18 @@ export function _createPattern(ctx, width, height, shapes, background) {
     const patternCtx = patternCanvas.getContext('2d');
     // Add pattern canvas to DOM to allow computed styles to be read (`getComputedStyles()`)
     ctx.canvas.after(patternCanvas);
-    // TODO: Fix blurry pattern
-    // const newScale = scaleCanvas(patternCtx, width, height);
-    patternCanvas.width = width;
-    patternCanvas.height = height;
+    // Render the pattern at the device pixel ratio so the bitmap tile is
+    // sharp on high-DPI screens. Chrome samples patterns in the canvas's
+    // user (post-transform) coordinate space, so 1 source pixel = 1 user px
+    // by default — without DPR-scaling the bitmap, a 12 logical-px tile is
+    // sampled from 12 source pixels, leaving each device pixel of fill to
+    // be interpolated from a 1/dpr-th of a source pixel (blurry). Drawing
+    // at DPR resolution and scaling the pattern back down to user space at
+    // fill time keeps tiles sharp.
+    const dpr = (typeof window !== 'undefined' ? window.devicePixelRatio : 1) || 1;
+    patternCanvas.width = Math.max(1, Math.round(width * dpr));
+    patternCanvas.height = Math.max(1, Math.round(height * dpr));
+    patternCtx.scale(dpr, dpr);
     if (background) {
         patternCtx.fillStyle = background;
         patternCtx.fillRect(0, 0, width, height);
@@ -389,9 +406,23 @@ export function _createPattern(ctx, width, height, shapes, background) {
                 styles: { stroke: shape.stroke, strokeWidth: shape.strokeWidth, opacity: shape.opacity },
             });
         }
+        else if (shape.type === 'rect') {
+            const rx = typeof shape.rx === 'string' ? toRectCornerPx(shape.rx, shape.width) : shape.rx;
+            const ry = typeof shape.ry === 'string' ? toRectCornerPx(shape.ry, shape.height) : (shape.ry ?? rx);
+            renderRect(patternCtx, { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rx, ry }, { styles: { fill: shape.fill, opacity: shape.opacity } });
+        }
         patternCtx.restore();
     }
     const pattern = ctx.createPattern(patternCanvas, 'repeat');
+    // Scale-only matrix; no translate so the pattern anchors to the path's
+    // local origin at fill time (matches SVG `patternUnits="userSpaceOnUse"`).
+    // Use the *actual* bitmap pixel dimensions for the scale so rounding
+    // `width * dpr` to an integer doesn't accumulate drift across tiles.
+    if (pattern) {
+        const sx = width / patternCanvas.width;
+        const sy = height / patternCanvas.height;
+        pattern.setTransform(new DOMMatrix([sx, 0, 0, sy, 0, 0]));
+    }
     // Cleanup
     ctx.canvas.parentElement?.removeChild(patternCanvas);
     return pattern;
@@ -400,3 +431,13 @@ export function _createPattern(ctx, width, height, shapes, background) {
 export const createPattern = memoize(_createPattern, {
     cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
 });
+function toRectCornerPx(value, max) {
+    if (value.endsWith('%')) {
+        const pct = parseFloat(value);
+        if (!Number.isFinite(pct))
+            return 0;
+        return (max / 2) * (pct / 100);
+    }
+    const n = parseFloat(value);
+    return Number.isFinite(n) ? n : 0;
+}

package/dist/utils/canvas.svelte.test.js

@@ -403,6 +403,33 @@ describe('renderPathData', () => {
         expect(strokeSpy).toHaveBeenCalled();
         expect(ctx.strokeStyle).toBe('#008000');
     });
+    it('resolves currentColor stroke through the SVG helper', () => {
+        const parent = canvas.parentElement;
+        const previousColor = parent.style.color;
+        parent.style.color = 'rgb(255, 165, 0)';
+        renderPathData(ctx, 'M0,0 L100,0', {
+            styles: {
+                fill: 'none',
+                stroke: 'currentColor',
+                strokeOpacity: '1',
+                opacity: '1',
+                strokeWidth: '2',
+            },
+        });
+        // Canvas normalizes rgb(255, 165, 0) → '#ffa500'
+        expect(ctx.strokeStyle).toBe('#ffa500');
+        parent.style.color = previousColor;
+    });
+    it('resolves currentColor fill through the SVG helper', () => {
+        const parent = canvas.parentElement;
+        const previousColor = parent.style.color;
+        parent.style.color = 'rgb(128, 0, 128)';
+        renderPathData(ctx, 'M0,0 L100,0 L100,100 Z', {
+            styles: { fill: 'currentColor', fillOpacity: '1', opacity: '1', stroke: 'none' },
+        });
+        expect(ctx.fillStyle).toBe('#800080');
+        parent.style.color = previousColor;
+    });
 });
 // ---------------------------------------------------------------------------
 // renderText
@@ -704,6 +731,23 @@ describe('_getComputedStyles', () => {
         // 'red' resolves to 'rgb(255, 0, 0)' in the browser
         expect(result.fill).toMatch(/rgb\(255,\s*0,\s*0\)/);
     });
+    it('resolves currentColor for fill via inherited color', () => {
+        // Set color on the canvas's parent so the helper SVG (sibling of canvas) inherits it
+        const parent = canvas.parentElement;
+        const previousColor = parent.style.color;
+        parent.style.color = 'rgb(0, 128, 0)';
+        const result = _getComputedStyles(canvas, { styles: { fill: 'currentColor' } });
+        expect(result.fill).toMatch(/rgb\(0,\s*128,\s*0\)/);
+        parent.style.color = previousColor;
+    });
+    it('resolves currentColor for stroke via inherited color', () => {
+        const parent = canvas.parentElement;
+        const previousColor = parent.style.color;
+        parent.style.color = 'rgb(0, 0, 255)';
+        const result = _getComputedStyles(canvas, { styles: { stroke: 'currentColor' } });
+        expect(result.stroke).toMatch(/rgb\(0,\s*0,\s*255\)/);
+        parent.style.color = previousColor;
+    });
     it('returns empty object when DOM throws (graceful error handling)', () => {
         // Simulate error by breaking canvas.after
         const originalAfter = canvas.after.bind(canvas);

package/dist/utils/download.d.ts

@@ -17,9 +17,11 @@ export type ChartImageOptions = {
      */
     quality?: number;
     /**
-     * Device pixel ratio to use when rasterising SVG layers.
-     * Higher values produce crisper images on retina displays.
-     * Defaults to `window.devicePixelRatio` (usually 1 or 2).
+     * Device pixel ratio to use when rasterising the image. Defaults to `1`
+     * so the output matches the chart's CSS dimensions (looks the same as
+     * what's on the page when viewed 1:1). Set to `window.devicePixelRatio`
+     * (or higher) to produce crisper images on retina displays at the cost
+     * of larger files.
      */
     pixelRatio?: number;
 };