layerchart 2.0.0-next.6 → 2.0.0-next.60

package/dist/utils/chart.js

@@ -58,6 +58,14 @@ export function createChartScale(axis, { domain, scale, padding, nice, reverse,
             console.error(`[Layer Chart] You set \`${axis}Nice: true\` but the ${axis}Scale does not have a \`.nice\` method. Ignoring...`);
         }
     }
+    // Guard against degenerate domains where min === max (e.g. all-zero data).
+    // A degenerate domain causes the scale to return NaN for all inputs.
+    if (typeof trueScale.domain === 'function' && typeof trueScale.invert === 'function') {
+        const [dMin, dMax] = trueScale.domain();
+        if (typeof dMin === 'number' && typeof dMax === 'number' && dMin === dMax) {
+            trueScale.domain([dMin, dMin + 1]);
+        }
+    }
     return trueScale;
 }
 // These scales have a discrete range so they can't be padded

package/dist/utils/color.js

@@ -1,21 +1,24 @@
 /** Generator to create a new color on each call */
-export function* rgbColorGenerator(step = 500) {
+export function* rgbColorGenerator(step = 200) {
     let nextColor = 0;
-    while (nextColor < 16777216) {
-        const r = nextColor & 0xff;
-        const g = (nextColor & 0xff00) >> 8;
-        const b = (nextColor & 0xff0000) >> 16;
+    while (nextColor < 1 << 21) {
+        const r = nextColor & 0x7f;
+        const g = (nextColor >> 7) & 0x7f;
+        const b = (nextColor >> 14) & 0x7f;
         nextColor += step;
-        yield { r, g, b, a: 255 };
+        yield { r: r * 2, g: g * 2, b: b * 2, a: 255 };
     }
     return { r: 0, g: 0, b: 0, a: 255 };
 }
 export function getColorStr(color) {
+    const r = color.r & 0xfe;
+    const g = color.g & 0xfe;
+    const b = color.b & 0xfe;
     if (color.a !== undefined) {
-        return `rgba(${color.r},${color.g},${color.b},${color.a})`;
+        return `rgba(${r},${g},${b},${color.a})`;
     }
     else {
-        return `rgb(${color.r},${color.g},${color.b})`;
+        return `rgb(${r},${g},${b})`;
     }
 }
 export function getColorIfDefined(data) {

package/dist/utils/common.d.ts

@@ -1,11 +1,18 @@
-import type { Component, ComponentProps } from 'svelte';
+import type { ComponentProps } from 'svelte';
 import type Chart from '../components/Chart.svelte';
-import type { SimplifiedChartProps } from '../components/charts/types.js';
+import type { ChartProps } from '../components/Chart.svelte';
 export type Accessor<TData = any> = number | string | ((d: TData) => any) | undefined | null | Accessor<TData>[];
 export declare function accessor<TData = any>(prop: Accessor<TData>): (d: TData) => any;
 /** Guarantee chart data is an array */
 export declare function chartDataArray<TData = any>(data: ComponentProps<Chart<TData>>['data']): any[];
-export declare function defaultChartPadding<TData, SeriesComponent extends Component, TSnippetProps>(axis?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['axis'], legend?: SimplifiedChartProps<TData, SeriesComponent, TSnippetProps>['legend']): {
+export declare function defaultChartPadding<TData>(options?: {
+    axis?: ChartProps<TData>['axis'];
+    legend?: ChartProps<TData>['legend'];
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+} | undefined): {
     top: number;
     left: number;
     bottom: number;
@@ -16,3 +23,12 @@ export declare function defaultChartPadding<TData, SeriesComponent extends Compo
  * Handles complex objects such as `Date` by invoking `.valueOf()`
  */
 export declare function findRelatedData(data: any[], original: any, accessor: Function): any;
+/**
+ * Return the object if the value is an object, otherwise return null.
+ * Functions (including Snippet types) are treated as non-objects and return null.
+ */
+export declare function getObjectOrNull<T>(value: T): T extends object ? T extends Function ? null : T : T extends null ? null : T extends undefined ? undefined : null;
+/**
+ * Call with args if function, otherwise return the value.
+ */
+export declare function resolveMaybeFn<T>(value: T | ((...args: any[]) => T), ...args: any[]): any;

package/dist/utils/common.js

@@ -1,4 +1,4 @@
-import { get } from 'lodash-es';
+import { get } from '@layerstack/utils';
 export function accessor(prop) {
     if (Array.isArray(prop)) {
         return (d) => prop.map((p) => accessor(p)(d));
@@ -32,25 +32,44 @@ export function chartDataArray(data) {
     }
     return [];
 }
-export function defaultChartPadding(axis = true, legend = false) {
+export function defaultChartPadding(options = {}) {
+    const { axis = true, legend = false, top, left, bottom, right } = options;
     if (axis === false) {
         return undefined;
     }
-    else {
-        return {
-            top: axis === true || axis === 'y' ? 4 : 0,
-            left: axis === true || axis === 'y' ? 20 : 0,
-            bottom: (axis === true || axis === 'x' ? 20 : 0) + (legend === true ? 32 : 0),
-            right: axis === true || axis === 'x' ? 4 : 0,
-        };
-    }
+    return {
+        top: top ?? (axis === true || axis === 'y' ? 4 : 0),
+        left: left ?? (axis === true || axis === 'y' ? 20 : 0),
+        bottom: (bottom ?? (axis === true || axis === 'x' ? 20 : 0)) + (legend ? 32 : 0),
+        right: right ?? (axis === true || axis === 'x' ? 4 : 0),
+    };
 }
 /**
  * Find the first instance within `data` with the same value as `original` using prop accessor.
  * Handles complex objects such as `Date` by invoking `.valueOf()`
  */
 export function findRelatedData(data, original, accessor) {
+    if (data.includes(original)) {
+        return original;
+    }
     return data.find((d) => {
         return accessor(d)?.valueOf() === accessor(original)?.valueOf();
     });
 }
+/**
+ * Return the object if the value is an object, otherwise return null.
+ * Functions (including Snippet types) are treated as non-objects and return null.
+ */
+export function getObjectOrNull(value) {
+    if (typeof value === 'object')
+        return value;
+    if (value === undefined)
+        return undefined;
+    return null;
+}
+/**
+ * Call with args if function, otherwise return the value.
+ */
+export function resolveMaybeFn(value, ...args) {
+    return typeof value === 'function' ? value(...args) : value;
+}

package/dist/utils/common.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { accessor } from './common.js';
+import { accessor, findRelatedData, resolveMaybeFn, getObjectOrNull } from './common.js';
 export const testData = {
     one: 1,
     two: 2,
@@ -36,3 +36,37 @@ describe('accessor', () => {
         expect(actual).toEqual(testData);
     });
 });
+describe('getObjectOrNull', () => {
+    it('returns null for non-object values', () => {
+        expect(getObjectOrNull(5)).toBeNull();
+        expect(getObjectOrNull('string')).toBeNull();
+        expect(getObjectOrNull(null)).toBeNull();
+        expect(getObjectOrNull(undefined)).toBeUndefined();
+    });
+    it('returns null for functions', () => {
+        const fn = () => { };
+        expect(getObjectOrNull(fn)).toBeNull();
+    });
+    it('returns the object if value is an object', () => {
+        const obj = { a: 1 };
+        expect(getObjectOrNull(obj)).toBe(obj);
+    });
+});
+describe('findRelatedData', () => {
+    it('prefers exact object identity before accessor matching', () => {
+        const first = { id: 'first', value: 10 };
+        const second = { id: 'second', value: 10 };
+        const data = [first, second];
+        const actual = findRelatedData(data, second, accessor('value'));
+        expect(actual).toBe(second);
+    });
+});
+describe('resolveMaybeFn', () => {
+    it('returns value if not a function', () => {
+        expect(resolveMaybeFn(5)).toBe(5);
+    });
+    it('calls function with args', () => {
+        const fn = (a, b) => a + b;
+        expect(resolveMaybeFn(fn, 2, 3)).toBe(5);
+    });
+});

package/dist/utils/dataProp.d.ts

@@ -0,0 +1,112 @@
+import type { AnyScale } from './scales.svelte.js';
+/**
+ * A prop that can be a direct pixel value, a data property name (resolved via scale),
+ * or an accessor function (whose result is passed through a scale).
+ *
+ * - `number` → pixel value (direct, no scale applied)
+ * - `string` → data property path, resolved via accessor then passed through scale
+ * - `function(d)` → called with data item, result passed through scale
+ */
+export type DataProp<T = any> = number | string | ((d: T) => any);
+/**
+ * Returns true if the value is a data-space prop (string or function),
+ * meaning it needs scale resolution rather than being a direct pixel value.
+ */
+export declare function isDataProp(value: any): value is string | Function;
+/**
+ * Returns true if ANY of the provided values is a data-space prop.
+ * Used to detect whether a component should enter "data mode".
+ */
+export declare function hasAnyDataProp(...values: any[]): boolean;
+/**
+ * Resolves a DataProp value for a specific data item through a scale.
+ *
+ * - `number`: returned directly (pixel value, no scale)
+ * - `string`: used as property path on data item, result passed through scale
+ * - `function`: called with data item, result passed through scale
+ * - `undefined`/`null`: returns defaultValue
+ *
+ * If no scale is provided and the raw value is numeric, it passes through directly.
+ */
+export declare function resolveDataProp<T>(value: DataProp<T> | undefined | null, d: T, scale: AnyScale | null | undefined, defaultValue?: number): number;
+/**
+ * Extract the raw value from a DataProp without applying any scale.
+ * Numbers pass through, strings do property lookup, functions are called.
+ */
+export declare function extractRawDataValue<T>(value: DataProp<T> | undefined | null, d: T): any;
+/**
+ * Resolve a pair of x/y DataProps through a geo projection.
+ * x = longitude, y = latitude → projection([lon, lat]) → [px, py]
+ */
+export declare function resolveGeoDataPair<T>(xProp: DataProp<T> | undefined | null, yProp: DataProp<T> | undefined | null, d: T, projection: (coords: [number, number]) => [number, number] | null, defaults?: [number, number]): [number, number];
+/**
+ * A color prop that can be a literal CSS color string, a data property name
+ * (resolved through cScale), or an accessor function (result passed through cScale).
+ *
+ * - `string` → in data mode, if it matches a data property, the value is extracted
+ *   and passed through cScale. Otherwise used as a literal CSS color.
+ * - `function(d)` → called per data item, result passed through cScale.
+ */
+export type ColorProp<T = any> = string | ((d: T) => any);
+/**
+ * A style prop that can be a static value or a per-item accessor function.
+ * In data mode, if a function is provided, it is called with the data item.
+ */
+export type StyleProp<V, T = any> = V | ((d: T) => V);
+/**
+ * Style props for primitives that support data-driven styling.
+ * All style props accept either a static value or a per-item accessor function.
+ */
+export type DataDrivenStyleProps<T = any> = {
+    /**
+     * The fill color.
+     * - `string`: in data mode, if it matches a data property name, the value is
+     *   extracted and passed through cScale. Otherwise used as a literal CSS color.
+     * - `function(d)`: accessor called per data item, result passed through cScale.
+     */
+    fill?: ColorProp<T>;
+    /**
+     * The stroke color.
+     * - `string`: in data mode, if it matches a data property name, the value is
+     *   extracted and passed through cScale. Otherwise used as a literal CSS color.
+     * - `function(d)`: accessor called per data item, result passed through cScale.
+     */
+    stroke?: ColorProp<T>;
+    /**
+     * The fill opacity (0 to 1).
+     * - `number`: static value
+     * - `function(d)`: accessor called per data item
+     */
+    fillOpacity?: StyleProp<number | undefined, T>;
+    /**
+     * The stroke opacity (0 to 1).
+     * - `number`: static value
+     * - `function(d)`: accessor called per data item
+     */
+    strokeOpacity?: StyleProp<number | undefined, T>;
+    /**
+     * The stroke width.
+     * - `number`: static value
+     * - `function(d)`: accessor called per data item
+     */
+    strokeWidth?: StyleProp<number | undefined, T>;
+    /**
+     * The opacity (0 to 1).
+     * - `number`: static value
+     * - `function(d)`: accessor called per data item
+     */
+    opacity?: StyleProp<number | undefined, T>;
+    /**
+     * CSS class name(s).
+     * - `string`: static class string
+     * - `function(d)`: accessor called per data item, returns class string
+     */
+    class?: StyleProp<string | undefined, T>;
+};
+export declare function resolveColorProp<T>(value: ColorProp<T> | undefined | null, d: T, cScale: AnyScale | null | undefined, ...args: any[]): string | undefined;
+/**
+ * Resolves a StyleProp for a specific data item.
+ * If the value is a function, calls it with the data item.
+ * Otherwise returns the static value.
+ */
+export declare function resolveStyleProp<V, T>(value: StyleProp<V, T> | undefined, d: T, ...args: any[]): V | undefined;

package/dist/utils/dataProp.js

@@ -0,0 +1,125 @@
+import { get } from '@layerstack/utils';
+/**
+ * Returns true if the value is a data-space prop (string or function),
+ * meaning it needs scale resolution rather than being a direct pixel value.
+ */
+export function isDataProp(value) {
+    return typeof value === 'string' || typeof value === 'function';
+}
+/**
+ * Returns true if ANY of the provided values is a data-space prop.
+ * Used to detect whether a component should enter "data mode".
+ */
+export function hasAnyDataProp(...values) {
+    return values.some((v) => v !== undefined && isDataProp(v));
+}
+/**
+ * Resolves a DataProp value for a specific data item through a scale.
+ *
+ * - `number`: returned directly (pixel value, no scale)
+ * - `string`: used as property path on data item, result passed through scale
+ * - `function`: called with data item, result passed through scale
+ * - `undefined`/`null`: returns defaultValue
+ *
+ * If no scale is provided and the raw value is numeric, it passes through directly.
+ */
+export function resolveDataProp(value, d, scale, defaultValue = 0) {
+    if (value === undefined || value === null)
+        return defaultValue;
+    if (typeof value === 'number')
+        return value;
+    let rawValue;
+    if (typeof value === 'string') {
+        rawValue = get(d, value);
+    }
+    else if (typeof value === 'function') {
+        rawValue = value(d);
+    }
+    else {
+        return defaultValue;
+    }
+    if (scale) {
+        const result = scale(rawValue);
+        return typeof result === 'number' && isFinite(result) ? result : defaultValue;
+    }
+    // No scale: if raw value is a number, use it directly
+    return typeof rawValue === 'number' ? rawValue : defaultValue;
+}
+/**
+ * Extract the raw value from a DataProp without applying any scale.
+ * Numbers pass through, strings do property lookup, functions are called.
+ */
+export function extractRawDataValue(value, d) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string')
+        return get(d, value);
+    if (typeof value === 'function')
+        return value(d);
+    return undefined;
+}
+/**
+ * Resolve a pair of x/y DataProps through a geo projection.
+ * x = longitude, y = latitude → projection([lon, lat]) → [px, py]
+ */
+export function resolveGeoDataPair(xProp, yProp, d, projection, defaults = [0, 0]) {
+    const rawX = extractRawDataValue(xProp, d);
+    const rawY = extractRawDataValue(yProp, d);
+    if (rawX == null || rawY == null)
+        return defaults;
+    const result = projection([rawX, rawY]);
+    return result ?? defaults;
+}
+/**
+ * Resolves a ColorProp for a specific data item, optionally through a color scale.
+ *
+ * - `string`: checks if `get(d, value)` is defined → data property, passed through cScale.
+ *   Otherwise returns the string as a literal CSS color.
+ * - `function`: called with data item, result passed through cScale.
+ * - `undefined`/`null`: returns undefined.
+ */
+/**
+ * Returns true if the string looks like a CSS color value rather than a data property name.
+ * Matches: `#hex`, and functional notation like `rgb(...)`, `hsl(...)`, `var(...)`,
+ * `url(...)`, `color-mix(...)`, etc.
+ */
+function isCSSColor(value) {
+    return value.startsWith('#') || value.includes('(');
+}
+export function resolveColorProp(value, d, cScale, ...args) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === 'function') {
+        const rawValue = value(d, ...args);
+        if (rawValue === undefined || rawValue === null)
+            return undefined;
+        return cScale ? String(cScale(rawValue)) : String(rawValue);
+    }
+    if (typeof value === 'string') {
+        // CSS color literals are never data property lookups
+        if (isCSSColor(value))
+            return value;
+        const dataValue = get(d, value);
+        if (dataValue !== undefined) {
+            // Data property — resolve through cScale
+            return cScale ? String(cScale(dataValue)) : String(dataValue);
+        }
+        // Not a data property — treat as literal CSS color (e.g. named colors like 'red')
+        return value;
+    }
+    return undefined;
+}
+/**
+ * Resolves a StyleProp for a specific data item.
+ * If the value is a function, calls it with the data item.
+ * Otherwise returns the static value.
+ */
+export function resolveStyleProp(value, d, ...args) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === 'function')
+        return value(d, ...args);
+    return value;
+}

package/dist/utils/dataProp.test.d.ts

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

package/dist/utils/dataProp.test.js

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { isDataProp, hasAnyDataProp, resolveDataProp, resolveColorProp } from './dataProp.js';
+describe('isDataProp', () => {
+    it('returns true for strings', () => {
+        expect(isDataProp('date')).toBe(true);
+        expect(isDataProp('nested.path')).toBe(true);
+    });
+    it('returns true for functions', () => {
+        expect(isDataProp((d) => d.value)).toBe(true);
+    });
+    it('returns false for numbers', () => {
+        expect(isDataProp(0)).toBe(false);
+        expect(isDataProp(42)).toBe(false);
+    });
+    it('returns false for undefined and null', () => {
+        expect(isDataProp(undefined)).toBe(false);
+        expect(isDataProp(null)).toBe(false);
+    });
+});
+describe('hasAnyDataProp', () => {
+    it('returns true if any value is a string', () => {
+        expect(hasAnyDataProp(10, 'date', 20)).toBe(true);
+    });
+    it('returns true if any value is a function', () => {
+        expect(hasAnyDataProp(10, (d) => d.x, 20)).toBe(true);
+    });
+    it('returns false if all values are numbers', () => {
+        expect(hasAnyDataProp(10, 20, 30)).toBe(false);
+    });
+    it('returns false if all values are undefined', () => {
+        expect(hasAnyDataProp(undefined, undefined)).toBe(false);
+    });
+    it('ignores undefined values but detects strings', () => {
+        expect(hasAnyDataProp(undefined, 'date')).toBe(true);
+    });
+});
+describe('resolveDataProp', () => {
+    const data = { date: '2024-01-01', value: 42, nested: { x: 10 } };
+    const mockScale = vi.fn((v) => v * 2);
+    beforeEach(() => {
+        mockScale.mockClear();
+    });
+    it('returns number directly without calling scale', () => {
+        expect(resolveDataProp(100, data, mockScale)).toBe(100);
+        expect(mockScale).not.toHaveBeenCalled();
+    });
+    it('resolves string as property path and passes through scale', () => {
+        expect(resolveDataProp('value', data, mockScale)).toBe(84); // 42 * 2
+        expect(mockScale).toHaveBeenCalledWith(42);
+    });
+    it('resolves nested string paths', () => {
+        expect(resolveDataProp('nested.x', data, mockScale)).toBe(20); // 10 * 2
+        expect(mockScale).toHaveBeenCalledWith(10);
+    });
+    it('resolves function accessor and passes through scale', () => {
+        const accessor = (d) => d.value;
+        expect(resolveDataProp(accessor, data, mockScale)).toBe(84); // 42 * 2
+        expect(mockScale).toHaveBeenCalledWith(42);
+    });
+    it('returns defaultValue for undefined', () => {
+        expect(resolveDataProp(undefined, data, mockScale)).toBe(0);
+        expect(resolveDataProp(undefined, data, mockScale, 99)).toBe(99);
+    });
+    it('returns defaultValue for null', () => {
+        expect(resolveDataProp(null, data, mockScale)).toBe(0);
+        expect(resolveDataProp(null, data, mockScale, 99)).toBe(99);
+    });
+    it('returns raw numeric value when no scale provided', () => {
+        expect(resolveDataProp('value', data, null)).toBe(42);
+        expect(resolveDataProp('value', data, undefined)).toBe(42);
+    });
+    it('returns defaultValue when no scale and raw value is not numeric', () => {
+        expect(resolveDataProp('date', data, null)).toBe(0); // '2024-01-01' is not a number
+    });
+    it('returns defaultValue when scale returns non-finite value', () => {
+        const badScale = vi.fn(() => NaN);
+        expect(resolveDataProp('value', data, badScale)).toBe(0);
+    });
+    it('returns defaultValue when scale returns Infinity', () => {
+        const badScale = vi.fn(() => Infinity);
+        expect(resolveDataProp('value', data, badScale)).toBe(0);
+    });
+    it('handles function returning a number without scale', () => {
+        const accessor = (d) => d.value;
+        expect(resolveDataProp(accessor, data, null)).toBe(42);
+    });
+});
+describe('resolveColorProp', () => {
+    const data = { category: 'A', value: 42, color: '#ff0000' };
+    const mockCScale = vi.fn((v) => (v === 'A' ? 'steelblue' : v === 'B' ? 'coral' : 'gray'));
+    beforeEach(() => {
+        mockCScale.mockClear();
+    });
+    it('returns undefined for undefined input', () => {
+        expect(resolveColorProp(undefined, data, mockCScale)).toBeUndefined();
+    });
+    it('returns undefined for null input', () => {
+        expect(resolveColorProp(null, data, mockCScale)).toBeUndefined();
+    });
+    it('resolves string data property through cScale', () => {
+        expect(resolveColorProp('category', data, mockCScale)).toBe('steelblue');
+        expect(mockCScale).toHaveBeenCalledWith('A');
+    });
+    it('returns literal CSS color when string does not match a data property', () => {
+        expect(resolveColorProp('red', data, mockCScale)).toBe('red');
+        expect(mockCScale).not.toHaveBeenCalled();
+    });
+    it('returns hex color literal when not a data property', () => {
+        expect(resolveColorProp('#00ff00', data, mockCScale)).toBe('#00ff00');
+        expect(mockCScale).not.toHaveBeenCalled();
+    });
+    it('resolves function accessor through cScale', () => {
+        expect(resolveColorProp((d) => d.category, data, mockCScale)).toBe('steelblue');
+        expect(mockCScale).toHaveBeenCalledWith('A');
+    });
+    it('returns stringified data value when no cScale', () => {
+        expect(resolveColorProp('category', data, null)).toBe('A');
+    });
+    it('returns data property value directly when it is a color string and no cScale', () => {
+        expect(resolveColorProp('color', data, null)).toBe('#ff0000');
+    });
+    it('returns undefined when function accessor returns undefined', () => {
+        expect(resolveColorProp((d) => d.nonexistent, data, mockCScale)).toBeUndefined();
+    });
+    it('returns stringified function result when no cScale', () => {
+        expect(resolveColorProp((d) => d.value, data, null)).toBe('42');
+    });
+});

package/dist/utils/download.d.ts

@@ -0,0 +1,98 @@
+export type ChartImageOptions = {
+    /**
+     * Background fill color for the exported image.
+     * Defaults to transparent (PNG) or white (JPEG/WebP).
+     */
+    background?: string;
+    /**
+     * Output image format.
+     *
+     * @default 'png'
+     */
+    format?: 'png' | 'jpeg' | 'webp';
+    /**
+     * Quality for lossy formats (`'jpeg'` / `'webp'`), between 0 and 1.
+     *
+     * @default 0.92
+     */
+    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).
+     */
+    pixelRatio?: number;
+};
+/**
+ * Composite all SVG and Canvas layers within a chart container element into
+ * an offscreen canvas and return the result as a `Blob`.
+ *
+ * Layers are drawn in ascending z-index order (DOM order used as tiebreaker).
+ * SVG layer styles (CSS variables, class-based colours, etc.) are inlined
+ * before serialisation so the image renders correctly outside the DOM.
+ */
+export declare function getChartImageBlob(container: HTMLElement, options?: ChartImageOptions): Promise<Blob>;
+export type ChartSvgOptions = {
+    /**
+     * File name without extension.
+     *
+     * @default 'chart'
+     */
+    filename?: string;
+};
+/**
+ * Return a self-contained SVG string for all SVG layers within a chart container.
+ *
+ * - Computed styles (CSS variables, class-based colours, etc.) are inlined so
+ *   the file renders correctly in editors, browsers, and other tools.
+ * - When multiple `<Svg>` layers are present they are composited into a single
+ *   `<svg>` in z-index order by merging their `<defs>` and content `<g>` elements.
+ * - Returns `null` when the container has no SVG layers (e.g. Canvas-only charts).
+ */
+export declare function getChartSvgString(container: HTMLElement): string | null;
+/**
+ * Download the SVG layers of a chart container as a `.svg` file.
+ *
+ * Canvas layers are not included — use `downloadImage` when the chart uses
+ * `<Canvas>` layers or contains a mix of SVG and Canvas.
+ *
+ * Returns `false` without throwing if the container has no SVG layers.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { downloadSvg } from '../index.js';
+ *   let chartRef = $state<HTMLElement>();
+ * </script>
+ *
+ * <Chart bind:ref={chartRef} ...>...</Chart>
+ * <button onclick={() => downloadSvg(chartRef, { filename: 'my-chart' })}>
+ *   Download SVG
+ * </button>
+ * ```
+ */
+export declare function downloadSvg(container: HTMLElement, options?: ChartSvgOptions): boolean;
+/**
+ * Download a chart container as an image file.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { downloadImage } from '../index.js';
+ *   let chartRef = $state<HTMLElement>();
+ * </script>
+ *
+ * <Chart bind:ref={chartRef} ...>...</Chart>
+ * <button onclick={() => downloadImage(chartRef, { filename: 'my-chart' })}>
+ *   Download PNG
+ * </button>
+ * ```
+ */
+export declare function downloadImage(container: HTMLElement, options?: ChartImageOptions & {
+    /**
+     * File name without extension.
+     *
+     * @default 'chart'
+     */
+    filename?: string;
+}): Promise<void>;