layerchart 2.0.0-next.6 → 2.0.0-next.61

package/dist/svg.js

@@ -0,0 +1,130 @@
+/**
+ * SVG-only variants of layer-agnostic components.
+ *
+ * Each export here is a SVG-specific implementation that skips the runtime
+ * layer-detection branches in the agnostic version (e.g. `Circle.svelte`).
+ * Use these when you know your chart only renders to SVG and want a smaller
+ * bundle.
+ *
+ * The agnostic versions (e.g. `import { Circle } from './index.js'`) still
+ * work and dispatch to these per-layer variants under the hood.
+ */
+// `Layer` is an alias for the layer wrapper of this sub-path. Importing
+// `Layer` from `layerchart/svg` is equivalent to importing `Svg`.
+export { default as Svg, default as Layer } from './components/layers/Svg.svelte';
+export { default as Chart } from './components/Chart/Chart.svg.svelte';
+export { default as ChartCore } from './components/Chart/ChartCore.svelte';
+export { default as ChartChildren } from './components/ChartChildren/ChartChildren.svg.svelte';
+export { default as Circle } from './components/Circle/Circle.svg.svelte';
+export { default as Text } from './components/Text/Text.svg.svelte';
+export { default as Rect } from './components/Rect/Rect.svg.svelte';
+export { default as Line } from './components/Line/Line.svg.svelte';
+export { default as Path } from './components/Path/Path.svg.svelte';
+export { default as ClipPath } from './components/ClipPath/ClipPath.svg.svelte';
+export { default as RadialGradient } from './components/RadialGradient/RadialGradient.svg.svelte';
+export { default as LinearGradient } from './components/LinearGradient/LinearGradient.svg.svelte';
+export { default as Group } from './components/Group/Group.svg.svelte';
+export { default as Pattern } from './components/Pattern/Pattern.svg.svelte';
+export { default as Ellipse } from './components/Ellipse/Ellipse.svg.svelte';
+export { default as Polygon } from './components/Polygon/Polygon.svg.svelte';
+export { default as Image } from './components/Image/Image.svg.svelte';
+export { default as Axis } from './components/Axis/Axis.svg.svelte';
+export { default as Rule } from './components/Rule/Rule.svg.svelte';
+export { default as Grid } from './components/Grid/Grid.svg.svelte';
+export { default as Highlight } from './components/Highlight/Highlight.svg.svelte';
+export { default as Arc } from './components/Arc/Arc.svg.svelte';
+export { default as Spline } from './components/Spline/Spline.svg.svelte';
+export { default as Area } from './components/Area/Area.svg.svelte';
+export { default as Pie } from './components/Pie/Pie.svg.svelte';
+export { default as ArcLabel } from './components/ArcLabel/ArcLabel.svg.svelte';
+export { default as Bar } from './components/Bar/Bar.svg.svelte';
+export { default as Bars } from './components/Bars/Bars.svg.svelte';
+export { default as Points } from './components/Points/Points.svg.svelte';
+export { default as Labels } from './components/Labels/Labels.svg.svelte';
+export { default as Frame } from './components/Frame/Frame.svg.svelte';
+export { default as Cell } from './components/Cell/Cell.svg.svelte';
+export { default as Threshold } from './components/Threshold/Threshold.svg.svelte';
+export { default as AnnotationLine } from './components/AnnotationLine/AnnotationLine.svg.svelte';
+export { default as AnnotationPoint } from './components/AnnotationPoint/AnnotationPoint.svg.svelte';
+export { default as Trail } from './components/Trail/Trail.svg.svelte';
+export { default as Vector } from './components/Vector/Vector.svg.svelte';
+export { default as Link } from './components/Link/Link.svg.svelte';
+export { default as AnnotationRange } from './components/AnnotationRange/AnnotationRange.svg.svelte';
+export { default as Hull } from './components/Hull/Hull.svg.svelte';
+export { default as Density } from './components/Density/Density.svg.svelte';
+export { default as Calendar } from './components/Calendar/Calendar.svg.svelte';
+export { default as CircleClipPath } from './components/CircleClipPath/CircleClipPath.svg.svelte';
+export { default as Voronoi } from './components/Voronoi/Voronoi.svg.svelte';
+export { default as Contour } from './components/Contour/Contour.svg.svelte';
+export { default as Month } from './components/Month/Month.svg.svelte';
+export { default as Raster } from './components/Raster/Raster.svg.svelte';
+export { default as Violin } from './components/Violin/Violin.svg.svelte';
+export { default as BoxPlot } from './components/BoxPlot/BoxPlot.svg.svelte';
+// Geo components
+export { default as GeoPath } from './components/geo/GeoPath/GeoPath.svg.svelte';
+export { default as GeoSpline } from './components/geo/GeoSpline/GeoSpline.svg.svelte';
+export { default as GeoPoint } from './components/geo/GeoPoint/GeoPoint.svg.svelte';
+export { default as GeoCircle } from './components/geo/GeoCircle/GeoCircle.svg.svelte';
+export { default as GeoClipPath } from './components/geo/GeoClipPath/GeoClipPath.svg.svelte';
+export { default as GeoEdgeFade } from './components/geo/GeoEdgeFade/GeoEdgeFade.svg.svelte';
+export { default as GeoTile } from './components/geo/GeoTile/GeoTile.svg.svelte';
+export { default as TileImage } from './components/geo/TileImage/TileImage.svg.svelte';
+export { default as Graticule } from './components/geo/Graticule/Graticule.svg.svelte';
+// Ribbon (graph) — uses Path
+export { default as Ribbon } from './components/graph/Ribbon/Ribbon.svg.svelte';
+// --- Layer-agnostic re-exports ---
+// These components don't render layer-specific elements (pure logic, layout
+// 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 Bounds } from './components/Bounds.svelte';
+export * from './components/Bounds.svelte';
+export { default as BrushContext } from './components/BrushContext.svelte';
+export * from './components/BrushContext.svelte';
+export { default as CircleLegend } from './components/CircleLegend.svelte';
+export * from './components/CircleLegend.svelte';
+export { default as ColorRamp } from './components/ColorRamp.svelte';
+export * from './components/ColorRamp.svelte';
+export { default as Legend } from './components/Legend.svelte';
+export * from './components/Legend.svelte';
+export { default as MotionPath } from './components/MotionPath.svelte';
+export * from './components/MotionPath.svelte';
+export { default as Point } from './components/Point.svelte';
+export * from './components/Point.svelte';
+export { default as TransformContext } from './components/TransformContext.svelte';
+export * from './components/TransformContext.svelte';
+export * as Tooltip from './components/tooltip/index.js';
+export * from './components/tooltip/TooltipContext.svelte';
+// High-level chart wrappers
+export { default as LineChart } from './components/charts/LineChart/LineChart.svg.svelte';
+export { default as AreaChart } from './components/charts/AreaChart/AreaChart.svg.svelte';
+export { default as BarChart } from './components/charts/BarChart/BarChart.svg.svelte';
+export { default as PieChart } from './components/charts/PieChart/PieChart.svg.svelte';
+export { default as ScatterChart } from './components/charts/ScatterChart/ScatterChart.svg.svelte';
+export { default as ArcChart } from './components/charts/ArcChart/ArcChart.svg.svelte';
+// Layout components
+export { default as Tree } from './components/hierarchy/Tree.svelte';
+export * from './components/hierarchy/Tree.svelte';
+export { default as Treemap } from './components/hierarchy/Treemap.svelte';
+export * from './components/hierarchy/Treemap.svelte';
+export { default as Pack } from './components/hierarchy/Pack.svelte';
+export * from './components/hierarchy/Pack.svelte';
+export { default as Partition } from './components/hierarchy/Partition.svelte';
+export * from './components/hierarchy/Partition.svelte';
+export { default as Chord } from './components/graph/Chord.svelte';
+export * from './components/graph/Chord.svelte';
+export { default as Dagre } from './components/graph/Dagre.svelte';
+export * from './components/graph/Dagre.svelte';
+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';
+// 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';
+export { default as GeoRaster } from './components/geo/GeoRaster/GeoRaster.svelte';
+export { default as GeoVisible } from './components/geo/GeoVisible/GeoVisible.svelte';
+export { default as RectClipPath } from './components/RectClipPath/RectClipPath.svg.svelte';
+export { default as ChartClipPath } from './components/ChartClipPath/ChartClipPath.svg.svelte';

package/dist/utils/arcText.svelte.d.ts

@@ -6,7 +6,7 @@
  */
 import type { Getter, GetterValues } from './types.js';
 import type { ComponentProps } from 'svelte';
-import type { Text } from '../components/index.js';
+import type Text from '../components/Text/Text.svelte';
 export type ArcTextProps = GetterValues<{
     innerRadius: number;
     outerRadius: number;
@@ -39,9 +39,15 @@ export type ArcTextOptions = {
     startOffset?: string;
     /**
      * An amount of padding to add to the outer radius of the path to add space
-     * between the text and the arc.
+     * between the text and the arc. Applies to `'outer'` and `'middle'` positions.
      */
     outerPadding?: number;
+    /**
+     * An amount of padding to subtract from the inner radius of the path to add
+     * space between the text and the arc. Applies to `'inner'` and `'middle'`
+     * positions. Positive values move the text inward (toward the chart center).
+     */
+    innerPadding?: number;
     /**
      * Optional offset specifically for 'outer-radial' position from the outer arc edge.
      * If not provided, 'outerPadding' will be used.

package/dist/utils/arcText.svelte.js

@@ -172,14 +172,18 @@ export function createArcTextProps(props, opts = {}, position) {
         return undefined;
     });
     const sharedProps = $derived.by(() => {
-        if (reverseText) {
+        // Center text along the arc path by default (50% startOffset, middle anchor).
+        // When the caller provides an explicit `startOffset`, honor it with a `start`
+        // anchor so the text begins at that position instead of centering around it.
+        if (opts.startOffset != null) {
             return {
-                startOffset: opts.startOffset ?? '100%',
-                textAnchor: 'end',
+                startOffset: opts.startOffset,
+                textAnchor: 'start',
             };
         }
         return {
-            startOffset: opts.startOffset ?? undefined,
+            startOffset: '50%',
+            textAnchor: 'middle',
         };
     });
     const radialPositionProps = $derived.by(() => {
@@ -216,7 +220,7 @@ export function createArcTextProps(props, opts = {}, position) {
             x: x,
             y: y,
             textAnchor,
-            'dominant-baseline': 'middle',
+            dominantBaseline: 'middle',
         };
     });
     const current = $derived.by(() => {
@@ -224,21 +228,21 @@ export function createArcTextProps(props, opts = {}, position) {
             return {
                 path: innerPath.current,
                 ...sharedProps,
-                'dominant-baseline': innerDominantBaseline,
+                dominantBaseline: innerDominantBaseline,
             };
         }
         else if (position === 'outer') {
             return {
                 path: outerPath.current,
                 ...sharedProps,
-                'dominant-baseline': outerDominantBaseline,
+                dominantBaseline: outerDominantBaseline,
             };
         }
         else if (position === 'middle') {
             return {
                 path: middlePath.current,
                 ...sharedProps,
-                'dominant-baseline': 'middle',
+                dominantBaseline: 'middle',
             };
         }
         else if (position === 'centroid') {

package/dist/utils/array.d.ts

@@ -1,5 +1,6 @@
 import type { Numeric } from 'd3-array';
 import { extent as d3extent } from 'd3-array';
+import { type Accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -11,3 +12,13 @@ export declare function extent<T extends Numeric>(iterable: Parameters<typeof d3
  * of making a set
  */
 export declare function arraysEqual(arr1: unknown[], arr2: unknown[]): boolean;
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export declare function applyLanes<T extends Record<string, any>>(data: T[], options?: {
+    start: Accessor<T>;
+    end: Accessor<T>;
+}): (T & {
+    lane: number;
+})[];

package/dist/utils/array.js

@@ -1,4 +1,5 @@
 import { extent as d3extent } from 'd3-array';
+import { accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -18,3 +19,25 @@ export function arraysEqual(arr1, arr2) {
         return arr2.includes(k);
     });
 }
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export function applyLanes(data, options = {
+    start: 'start',
+    end: 'end',
+}) {
+    const result = [];
+    let stack = [];
+    const startAccessor = accessor(options.start);
+    const endAccessor = accessor(options.end);
+    for (const d of data) {
+        let lane = stack.findIndex((s) => endAccessor(s) <= startAccessor(d) && startAccessor(s) < startAccessor(d));
+        if (lane === -1) {
+            lane = stack.length;
+        }
+        result.push({ ...d, lane });
+        stack[lane] = d;
+    }
+    return result;
+}

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

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

package/dist/utils/array.test.js

@@ -0,0 +1,200 @@
+import { describe, it, expect } from 'vitest';
+import { applyLanes } from './array.js';
+describe('applyLanes', () => {
+    it('should assign same lane to non-overlapping events', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+            { id: 2, start: new Date('2023-01-03'), end: new Date('2023-01-05') },
+            { id: 3, start: new Date('2023-01-06'), end: new Date('2023-01-08') },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+            { id: 2, start: new Date('2023-01-03'), end: new Date('2023-01-05'), lane: 0 },
+            { id: 3, start: new Date('2023-01-06'), end: new Date('2023-01-08'), lane: 0 },
+        ]);
+    });
+    it('should assign different lanes to overlapping events', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-03') },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04') },
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-05') },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-03'), lane: 0 },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04'), lane: 1 },
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-05'), lane: 2 },
+        ]);
+    });
+    it('should reuse lanes when events no longer overlap', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+            { id: 2, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03') },
+            { id: 3, start: new Date('2023-01-04'), end: new Date('2023-01-06') }, // starts after id: 1 ends
+            { id: 4, start: new Date('2023-01-05'), end: new Date('2023-01-07') }, // starts after id: 2 ends
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+            { id: 2, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03'), lane: 1 },
+            { id: 3, start: new Date('2023-01-04'), end: new Date('2023-01-06'), lane: 0 }, // reuses lane 0
+            { id: 4, start: new Date('2023-01-05'), end: new Date('2023-01-07'), lane: 1 }, // reuses lane 1
+        ]);
+    });
+    it('should handle events that start exactly when another ends', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04') }, // starts exactly when id: 1 ends
+            { id: 3, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03') }, // overlaps with both
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-04'), lane: 0 }, // can reuse lane 0
+            { id: 3, start: new Date('2023-01-01T12:00:00'), end: new Date('2023-01-03'), lane: 1 }, // overlaps, needs new lane
+        ]);
+    });
+    it('should work with string keys for start and end', () => {
+        const data = [
+            { name: 'Task 1', startTime: new Date('2023-01-01'), endTime: new Date('2023-01-03') },
+            { name: 'Task 2', startTime: new Date('2023-01-02'), endTime: new Date('2023-01-04') },
+        ];
+        const result = applyLanes(data, { start: 'startTime', end: 'endTime' });
+        expect(result).toEqual([
+            {
+                name: 'Task 1',
+                startTime: new Date('2023-01-01'),
+                endTime: new Date('2023-01-03'),
+                lane: 0,
+            },
+            {
+                name: 'Task 2',
+                startTime: new Date('2023-01-02'),
+                endTime: new Date('2023-01-04'),
+                lane: 1,
+            },
+        ]);
+    });
+    it('should work with nested string keys for start and end', () => {
+        const data = [
+            { name: 'Task 1', duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') } },
+            { name: 'Task 2', duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') } },
+        ];
+        const result = applyLanes(data, { start: 'duration.start', end: 'duration.end' });
+        expect(result).toEqual([
+            {
+                name: 'Task 1',
+                duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+                lane: 0,
+            },
+            {
+                name: 'Task 2',
+                duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') },
+                lane: 0,
+            },
+        ]);
+    });
+    it('should work with function accessors for start and end', () => {
+        const data = [
+            { name: 'Task 1', duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') } },
+            { name: 'Task 2', duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') } },
+        ];
+        const result = applyLanes(data, { start: (d) => d.duration.start, end: (d) => d.duration.end });
+        expect(result).toEqual([
+            {
+                name: 'Task 1',
+                duration: { start: new Date('2023-01-01'), end: new Date('2023-01-02') },
+                lane: 0,
+            },
+            {
+                name: 'Task 2',
+                duration: { start: new Date('2023-01-03'), end: new Date('2023-01-04') },
+                lane: 0,
+            },
+        ]);
+    });
+    it('should handle empty array', () => {
+        const data = [];
+        const result = applyLanes(data);
+        expect(result).toEqual([]);
+    });
+    it('should handle single event', () => {
+        const data = [{ id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02') }];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-02'), lane: 0 },
+        ]);
+    });
+    it('should handle complex overlapping scenario', () => {
+        const data = [
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-05') }, // long event
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-03') }, // short event inside
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-04') }, // overlaps with both
+            { id: 4, start: new Date('2023-01-03'), end: new Date('2023-01-04T12:00:00') }, // overlaps with 1 and 3
+            { id: 5, start: new Date('2023-01-06'), end: new Date('2023-01-08') }, // separate event
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: new Date('2023-01-01'), end: new Date('2023-01-05'), lane: 0 },
+            { id: 2, start: new Date('2023-01-02'), end: new Date('2023-01-03'), lane: 1 },
+            { id: 3, start: new Date('2023-01-02T12:00:00'), end: new Date('2023-01-04'), lane: 2 },
+            { id: 4, start: new Date('2023-01-03'), end: new Date('2023-01-04T12:00:00'), lane: 1 }, // can reuse lane 1 since id: 2 ended
+            { id: 5, start: new Date('2023-01-06'), end: new Date('2023-01-08'), lane: 0 }, // can reuse lane 0 since id: 1 ended
+        ]);
+    });
+    it('should preserve all original properties', () => {
+        const data = [
+            {
+                id: 1,
+                start: new Date('2023-01-01'),
+                end: new Date('2023-01-02'),
+                name: 'First',
+                priority: 'high',
+                metadata: { foo: 'bar' },
+            },
+            {
+                id: 2,
+                start: new Date('2023-01-01T12:00:00'),
+                end: new Date('2023-01-03'),
+                name: 'Second',
+                priority: 'low',
+                metadata: { baz: 'qux' },
+            },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            {
+                id: 1,
+                start: new Date('2023-01-01'),
+                end: new Date('2023-01-02'),
+                name: 'First',
+                priority: 'high',
+                metadata: { foo: 'bar' },
+                lane: 0,
+            },
+            {
+                id: 2,
+                start: new Date('2023-01-01T12:00:00'),
+                end: new Date('2023-01-03'),
+                name: 'Second',
+                priority: 'low',
+                metadata: { baz: 'qux' },
+                lane: 1,
+            },
+        ]);
+    });
+    it('should work with numeric values', () => {
+        const data = [
+            { id: 1, start: 0, end: 3 },
+            { id: 2, start: 1, end: 4 },
+            { id: 3, start: 5, end: 7 },
+        ];
+        const result = applyLanes(data);
+        expect(result).toEqual([
+            { id: 1, start: 0, end: 3, lane: 0 },
+            { id: 2, start: 1, end: 4, lane: 1 },
+            { id: 3, start: 5, end: 7, lane: 0 }, // can reuse lane 0 since id: 1 ended
+        ]);
+    });
+});

package/dist/utils/attributes.d.ts

@@ -1,14 +1,4 @@
-/**
- * Creates a string containing a class name that can be used by
- * developers to target a specific layer/element within a LayerChart.
- *
- * This is a function so that the class names remain consistent and the
- * prefix/structure can be changed in the future if needed
- *
- * @param layerName - the name of the layer to be appended to the generated class name
- * @returns a string to be used as a class on an element
- */
-export declare function layerClass(layerName: string): string;
+import type { ClassValue } from 'svelte/elements';
 type ExtractObjectType<T> = T extends object ? (T extends Function ? never : T) : never;
 type WithClass<T> = T & {
     class?: string;
@@ -21,9 +11,9 @@ type DefaultProps = WithClass<{
  * a class name to its class property to identify the layer for CSS targeting.
  *
  * @param props The props to be extracted, can be an object, function or any other type
- * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param className The class name to be applied to the layer for targeting styling (e.g. 'lc-layer')
  * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
  * @returns a typed spreadable object with props for the layer
  */
-export declare function extractLayerProps<T>(props: T, layerName: string, extraClasses?: string): WithClass<ExtractObjectType<T> extends never ? DefaultProps : ExtractObjectType<T>>;
+export declare function extractLayerProps<T>(props: T, className: string, ...extraClasses: ClassValue[]): WithClass<ExtractObjectType<T> extends never ? DefaultProps : ExtractObjectType<T>>;
 export {};

package/dist/utils/attributes.js

@@ -1,17 +1,4 @@
 import { cls } from '@layerstack/tailwind';
-/**
- * Creates a string containing a class name that can be used by
- * developers to target a specific layer/element within a LayerChart.
- *
- * This is a function so that the class names remain consistent and the
- * prefix/structure can be changed in the future if needed
- *
- * @param layerName - the name of the layer to be appended to the generated class name
- * @returns a string to be used as a class on an element
- */
-export function layerClass(layerName) {
-    return `lc-${layerName}`;
-}
 // type guard to narrow props to an object with optional class
 // for extractLayerProps
 function isObjectWithClass(val) {
@@ -22,19 +9,18 @@ function isObjectWithClass(val) {
  * a class name to its class property to identify the layer for CSS targeting.
  *
  * @param props The props to be extracted, can be an object, function or any other type
- * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param className The class name to be applied to the layer for targeting styling (e.g. 'lc-layer')
  * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
  * @returns a typed spreadable object with props for the layer
  */
-export function extractLayerProps(props, layerName, extraClasses) {
-    const className = layerClass(layerName);
+export function extractLayerProps(props, className, ...extraClasses) {
     if (isObjectWithClass(props)) {
         return {
             ...props,
-            class: cls(className, props.class ?? '', extraClasses),
+            class: cls(className, ...extraClasses, props.class),
         };
     }
     return {
-        class: cls(className, extraClasses),
+        class: cls(className, ...extraClasses),
     };
 }

package/dist/utils/canvas.d.ts

@@ -0,0 +1,85 @@
+import type { ClassValue } from 'svelte/elements';
+import type { PatternShape } from '../components/Pattern/Pattern.svelte';
+/** @deprecated - use `isTransparentFill` instead */
+export declare const DEFAULT_FILL = "rgb(0, 0, 0)";
+type StyleOptions = Partial<Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeOpacity' | 'strokeWidth' | 'opacity'> & {
+    fillOpacity?: number | string;
+    strokeOpacity?: number | string;
+    strokeWidth?: number | string;
+    opacity?: number | string;
+}>;
+export type ComputedStylesOptions = {
+    styles?: StyleOptions;
+    classes?: ClassValue | null;
+    /** Inline style string (e.g., 'stroke-dasharray: 6 4') - will be parsed and merged with styles */
+    style?: string | null;
+};
+/**
+ * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: var(--color-primary)` => `stroke: rgb(...)` )
+ */
+export declare function _getComputedStyles(canvas: HTMLCanvasElement, { styles, classes }?: ComputedStylesOptions): CSSStyleDeclaration;
+export declare const getComputedStyles: typeof _getComputedStyles;
+/** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
+export declare function renderPathData(ctx: CanvasRenderingContext2D, pathData: string | null | undefined, styleOptions?: ComputedStylesOptions): void;
+export declare function renderText(ctx: CanvasRenderingContext2D, text: string | number | null | undefined, coords: {
+    x: number;
+    y: number;
+}, styleOptions?: ComputedStylesOptions): void;
+export declare function renderRect(ctx: CanvasRenderingContext2D, coords: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rx?: number;
+    ry?: number;
+    /** Per-corner radii [tl, tr, br, bl]. Takes precedence over `rx`/`ry`. */
+    corners?: [number, number, number, number];
+}, styleOptions?: ComputedStylesOptions): void;
+export declare function renderCircle(ctx: CanvasRenderingContext2D, coords: {
+    cx: number;
+    cy: number;
+    r: number;
+}, styleOptions?: ComputedStylesOptions): void;
+export declare function renderEllipse(ctx: CanvasRenderingContext2D, coords: {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}, styleOptions?: ComputedStylesOptions): void;
+/** Clear canvas accounting for Canvas `context.translate(...)` */
+export declare function clearCanvasContext(ctx: CanvasRenderingContext2D, options: {
+    containerWidth: number;
+    containerHeight: number;
+    padding: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+}): void;
+/**
+    Scales a canvas for high DPI / retina displays.
+  @see: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#examples
+  @see: https://web.dev/articles/canvas-hidipi
+*/
+export declare function scaleCanvas(ctx: CanvasRenderingContext2D, width: number, height: number): {
+    width: number;
+    height: number;
+};
+/** Get pixel color (r,g,b,a) at canvas coordinates */
+export declare function getPixelColor(ctx: CanvasRenderingContext2D, x: number, y: number): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export declare function _createLinearGradient(ctx: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number, stops: {
+    offset: number;
+    color: string;
+}[]): CanvasGradient;
+/** Create linear gradient and memoize result to fix reactivity */
+export declare const createLinearGradient: typeof _createLinearGradient;
+export declare function _createPattern(ctx: CanvasRenderingContext2D, width: number, height: number, shapes: PatternShape[], background?: string): CanvasPattern | null;
+/** Create pattern and memoize result to fix reactivity */
+export declare const createPattern: typeof _createPattern;
+export {};