layerchart 2.0.0-next.60 → 2.0.0-next.62

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

@@ -1,6 +1,6 @@
 import type { ComponentRender } from '../contexts/canvas.js';
 import type { AnyScale, DomainType } from '../utils/scales.svelte.js';
-import type { ChartPropsWithoutHTML } from '../components/Chart.svelte';
+import type { ChartPropsWithoutHTML } from '../components/Chart/Chart.svelte';
 import type { Extents } from '../utils/types.js';
 import { type Accessor } from '../utils/common.js';
 import { GeoState } from './geo.svelte.js';
@@ -50,7 +50,6 @@ export interface RegisterComponentOptions<T extends Element = Element> {
 }
 export declare class ChartState<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> {
     #private;
-    private _propsGetter;
     props: ChartPropsWithoutHTML<TData, XScale, YScale>;
     geoState: GeoState;
     transformState: TransformState;
@@ -90,7 +89,10 @@ export declare class ChartState<TData = any, XScale extends AnyScale = AnyScale,
     private _xDomainIsDate;
     private _yDomainIsDate;
     meta: Record<string, any>;
-    constructor(propsGetter: () => ChartPropsWithoutHTML<TData, XScale, YScale>);
+    constructor(props: ChartPropsWithoutHTML<TData, XScale, YScale>, overrides?: {
+        brushXDomain?: () => BrushDomainType | undefined;
+        brushYDomain?: () => BrushDomainType | undefined;
+    });
     containerWidth: number;
     containerHeight: number;
     data: import("d3-sankey").SankeyGraph<any, any> | readonly TData[] | import("d3-hierarchy").HierarchyNode<TData>;

package/dist/states/chart.svelte.js

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

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

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

package/dist/states/series.svelte.js

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

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

@@ -0,0 +1,178 @@
+/**
+ * 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.
+ */
+export { default as Svg, default as Layer } from './components/layers/Svg.svelte';
+export type { SVGProps } 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 type { ChartProps, ChartPropsWithoutHTML, ChartResizeDetail, PreservedChartConfig, LayerChartInternalMeta, } from './components/Chart/Chart.shared.svelte.js';
+export { default as ChartChildren } from './components/ChartChildren/ChartChildren.svg.svelte';
+export type { ChartChildrenProps } from './components/ChartChildren/ChartChildren.shared.svelte.js';
+export { default as Circle } from './components/Circle/Circle.svg.svelte';
+export type { CircleProps, CirclePropsWithoutHTML } from './components/Circle/Circle.shared.svelte.js';
+export { default as Text } from './components/Text/Text.svg.svelte';
+export type { TextProps, TextPropsWithoutHTML, TextSegment, } from './components/Text/Text.shared.svelte.js';
+export { default as Rect } from './components/Rect/Rect.svg.svelte';
+export type { RectProps, RectPropsWithoutHTML, } from './components/Rect/Rect.shared.svelte.js';
+export { default as Line } from './components/Line/Line.svg.svelte';
+export type { LineProps, LinePropsWithoutHTML, } from './components/Line/Line.shared.svelte.js';
+export { default as Path } from './components/Path/Path.svg.svelte';
+export type { PathProps, PathPropsWithoutHTML, } from './components/Path/Path.shared.svelte.js';
+export { default as ClipPath } from './components/ClipPath/ClipPath.svg.svelte';
+export type { ClipPathProps, ClipPathPropsWithoutHTML, } from './components/ClipPath/ClipPath.shared.svelte.js';
+export { default as RadialGradient } from './components/RadialGradient/RadialGradient.svg.svelte';
+export type { RadialGradientProps, RadialGradientPropsWithoutHTML, } from './components/RadialGradient/RadialGradient.shared.svelte.js';
+export { default as LinearGradient } from './components/LinearGradient/LinearGradient.svg.svelte';
+export type { LinearGradientProps, LinearGradientPropsWithoutHTML, } from './components/LinearGradient/LinearGradient.shared.svelte.js';
+export { default as Group } from './components/Group/Group.svg.svelte';
+export type { GroupProps, GroupPropsWithoutHTML, } from './components/Group/Group.shared.svelte.js';
+export { default as Pattern } from './components/Pattern/Pattern.svg.svelte';
+export type { PatternProps, PatternPropsWithoutHTML, PatternShape, CircleShape, LineShape, } from './components/Pattern/Pattern.shared.svelte.js';
+export { default as Ellipse } from './components/Ellipse/Ellipse.svg.svelte';
+export type { EllipseProps, EllipsePropsWithoutHTML, } from './components/Ellipse/Ellipse.shared.svelte.js';
+export { default as Polygon } from './components/Polygon/Polygon.svg.svelte';
+export type { PolygonProps, PolygonPropsWithoutHTML, } from './components/Polygon/Polygon.shared.svelte.js';
+export { default as Image } from './components/Image/Image.svg.svelte';
+export type { ImageProps, ImagePropsWithoutHTML, } from './components/Image/Image.shared.svelte.js';
+export { default as Axis } from './components/Axis/Axis.svg.svelte';
+export type { AxisProps, AxisPropsWithoutHTML, } from './components/Axis/Axis.shared.svelte.js';
+export { default as Rule } from './components/Rule/Rule.svg.svelte';
+export type { RuleProps, RulePropsWithoutHTML, } from './components/Rule/Rule.shared.svelte.js';
+export { default as Grid } from './components/Grid/Grid.svg.svelte';
+export type { GridProps, GridPropsWithoutHTML, } from './components/Grid/Grid.shared.svelte.js';
+export { default as Highlight } from './components/Highlight/Highlight.svg.svelte';
+export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData, } from './components/Highlight/Highlight.shared.svelte.js';
+export { default as Arc } from './components/Arc/Arc.svg.svelte';
+export type { ArcProps, ArcPropsWithoutHTML } from './components/Arc/Arc.shared.svelte.js';
+export { default as Spline } from './components/Spline/Spline.svg.svelte';
+export type { SplineProps, SplinePropsWithoutHTML, } from './components/Spline/Spline.shared.svelte.js';
+export { default as Area } from './components/Area/Area.svg.svelte';
+export type { AreaProps, AreaPropsWithoutHTML, } from './components/Area/Area.shared.svelte.js';
+export { default as Pie } from './components/Pie/Pie.svg.svelte';
+export type { PieProps, PiePropsWithoutHTML } from './components/Pie/Pie.shared.svelte.js';
+export { default as ArcLabel } from './components/ArcLabel/ArcLabel.svg.svelte';
+export type { ArcLabelProps, ArcLabelConfig, ArcLabelPlacement, } from './components/ArcLabel/ArcLabel.shared.svelte.js';
+export { default as Bar } from './components/Bar/Bar.svg.svelte';
+export type { BarProps, BarPropsWithoutHTML } from './components/Bar/Bar.shared.svelte.js';
+export { default as Bars } from './components/Bars/Bars.svg.svelte';
+export type { BarsProps, BarsPropsWithoutHTML, } from './components/Bars/Bars.shared.svelte.js';
+export { default as Points } from './components/Points/Points.svg.svelte';
+export type { PointsProps, PointsPropsWithoutHTML, Point as PointDatum, } from './components/Points/Points.shared.svelte.js';
+export { default as Labels } from './components/Labels/Labels.svg.svelte';
+export type { LabelsProps, LabelsPropsWithoutHTML, } from './components/Labels/Labels.shared.svelte.js';
+export { default as Frame } from './components/Frame/Frame.svg.svelte';
+export type { FrameProps, FramePropsWithoutHTML, } from './components/Frame/Frame.shared.svelte.js';
+export { default as Cell } from './components/Cell/Cell.svg.svelte';
+export type { CellProps } from './components/Cell/Cell.shared.svelte.js';
+export { default as Threshold } from './components/Threshold/Threshold.svg.svelte';
+export type { ThresholdProps, ThresholdSnippetProps, } from './components/Threshold/Threshold.shared.svelte.js';
+export { default as AnnotationLine } from './components/AnnotationLine/AnnotationLine.svg.svelte';
+export type { AnnotationLineProps, AnnotationLinePropsWithoutHTML, } from './components/AnnotationLine/AnnotationLine.shared.svelte.js';
+export { default as AnnotationPoint } from './components/AnnotationPoint/AnnotationPoint.svg.svelte';
+export type { AnnotationPointProps, AnnotationPointPropsWithoutHTML, } from './components/AnnotationPoint/AnnotationPoint.shared.svelte.js';
+export { default as Trail } from './components/Trail/Trail.svg.svelte';
+export type { TrailProps, TrailPropsWithoutHTML, } from './components/Trail/Trail.shared.svelte.js';
+export { default as Vector } from './components/Vector/Vector.svg.svelte';
+export type { VectorProps, VectorPropsWithoutHTML, VectorShape, } from './components/Vector/Vector.shared.svelte.js';
+export { default as Link } from './components/Link/Link.svg.svelte';
+export type { LinkProps, LinkPropsWithoutHTML } from './components/Link/Link.shared.svelte.js';
+export { default as AnnotationRange } from './components/AnnotationRange/AnnotationRange.svg.svelte';
+export type { AnnotationRangeProps, AnnotationRangePropsWithoutHTML, } from './components/AnnotationRange/AnnotationRange.shared.svelte.js';
+export { default as Hull } from './components/Hull/Hull.svg.svelte';
+export type { HullProps, HullPropsWithoutHTML } from './components/Hull/Hull.shared.svelte.js';
+export { default as Density } from './components/Density/Density.svg.svelte';
+export type { DensityProps, DensityPropsWithoutHTML, } from './components/Density/Density.shared.svelte.js';
+export { default as Calendar } from './components/Calendar/Calendar.svg.svelte';
+export type { CalendarProps, CalendarPropsWithoutHTML, CalendarCell, } from './components/Calendar/Calendar.shared.svelte.js';
+export { default as CircleClipPath } from './components/CircleClipPath/CircleClipPath.svg.svelte';
+export type { CircleClipPathPropsWithoutHTML } from './components/CircleClipPath/CircleClipPath.shared.svelte.js';
+export { default as Voronoi } from './components/Voronoi/Voronoi.svg.svelte';
+export type { VoronoiProps, VoronoiPropsWithoutHTML, } from './components/Voronoi/Voronoi.shared.svelte.js';
+export { default as Contour } from './components/Contour/Contour.svg.svelte';
+export type { ContourProps, ContourPropsWithoutHTML, } from './components/Contour/Contour.shared.svelte.js';
+export { default as Month } from './components/Month/Month.svg.svelte';
+export type { MonthProps, MonthPropsWithoutHTML, MonthCell, } from './components/Month/Month.shared.svelte.js';
+export { default as Raster } from './components/Raster/Raster.svg.svelte';
+export type { RasterProps, RasterPropsWithoutHTML, } from './components/Raster/Raster.shared.svelte.js';
+export { default as Violin } from './components/Violin/Violin.svg.svelte';
+export type { ViolinProps, ViolinPropsWithoutHTML, } from './components/Violin/Violin.shared.svelte.js';
+export { default as BoxPlot } from './components/BoxPlot/BoxPlot.svg.svelte';
+export type { BoxPlotProps, BoxPlotPropsWithoutHTML, } from './components/BoxPlot/BoxPlot.shared.svelte.js';
+export { default as GeoPath } from './components/geo/GeoPath/GeoPath.svg.svelte';
+export type { GeoPathProps, GeoPathPropsWithoutHTML, } from './components/geo/GeoPath/GeoPath.shared.svelte.js';
+export { default as GeoSpline } from './components/geo/GeoSpline/GeoSpline.svg.svelte';
+export type { GeoSplineProps, GeoSplinePropsWithoutHTML, } from './components/geo/GeoSpline/GeoSpline.shared.svelte.js';
+export { default as GeoPoint } from './components/geo/GeoPoint/GeoPoint.svg.svelte';
+export type { GeoPointProps, GeoPointPropsWithoutHTML, } from './components/geo/GeoPoint/GeoPoint.shared.svelte.js';
+export { default as GeoCircle } from './components/geo/GeoCircle/GeoCircle.svg.svelte';
+export type { GeoCircleProps, GeoCirclePropsWithoutHTML, } from './components/geo/GeoCircle/GeoCircle.shared.svelte.js';
+export { default as GeoClipPath } from './components/geo/GeoClipPath/GeoClipPath.svg.svelte';
+export type { GeoClipPathProps, GeoClipPathPropsWithoutHTML, } from './components/geo/GeoClipPath/GeoClipPath.shared.svelte.js';
+export { default as GeoEdgeFade } from './components/geo/GeoEdgeFade/GeoEdgeFade.svg.svelte';
+export type { GeoEdgeFadeProps, GeoEdgeFadePropsWithoutHTML, } from './components/geo/GeoEdgeFade/GeoEdgeFade.shared.svelte.js';
+export { default as GeoTile } from './components/geo/GeoTile/GeoTile.svg.svelte';
+export type { GeoTilePropsWithoutHTML } from './components/geo/GeoTile/GeoTile.shared.svelte.js';
+export { default as TileImage } from './components/geo/TileImage/TileImage.svg.svelte';
+export type { TileImageProps, TileImagePropsWithoutHTML, } from './components/geo/TileImage/TileImage.shared.svelte.js';
+export { default as Graticule } from './components/geo/Graticule/Graticule.svg.svelte';
+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/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';
+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';
+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';
+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';
+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 type { RectClipPathProps, RectClipPathPropsWithoutHTML, } from './components/RectClipPath/RectClipPath.shared.svelte.js';
+export { default as ChartClipPath } from './components/ChartClipPath/ChartClipPath.svg.svelte';
+export type { ChartClipPathProps, ChartClipPathPropsWithoutHTML, } from './components/ChartClipPath/ChartClipPath.shared.svelte.js';

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/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';
+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/Text.svelte';
+import type Text from '../components/Text/Text.svelte';
 export type ArcTextProps = GetterValues<{
     innerRadius: number;
     outerRadius: number;

package/dist/utils/canvas.d.ts

@@ -1,5 +1,5 @@
 import type { ClassValue } from 'svelte/elements';
-import type { PatternShape } from '../components/Pattern.svelte';
+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'> & {

package/dist/utils/common.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
-import type Chart from '../components/Chart.svelte';
-import type { ChartProps } from '../components/Chart.svelte';
+import type Chart from '../components/Chart/Chart.svelte';
+import type { ChartProps } from '../components/Chart/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 */

package/dist/utils/ticks.d.ts

@@ -1,7 +1,7 @@
 import { type TimeInterval } from 'd3-time';
 import { Duration, type FormatType, type FormatConfig } from '@layerstack/utils';
 import { type AnyScale } from './scales.svelte.js';
-import type { AxisProps } from '../components/Axis.svelte';
+import type { AxisProps } from '../components/Axis/Axis.svelte';
 export declare function getDurationFormat(duration: Duration, options?: {
     multiline?: boolean;
     placement?: AxisProps['placement'];

package/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.60",
+  "version": "2.0.0-next.62",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",
@@ -118,6 +118,21 @@
       "svelte": "./dist/graph.js",
       "default": "./dist/graph.js"
     },
+    "./svg": {
+      "types": "./dist/svg.d.ts",
+      "svelte": "./dist/svg.js",
+      "default": "./dist/svg.js"
+    },
+    "./canvas": {
+      "types": "./dist/canvas.d.ts",
+      "svelte": "./dist/canvas.js",
+      "default": "./dist/canvas.js"
+    },
+    "./html": {
+      "types": "./dist/html.d.ts",
+      "svelte": "./dist/html.js",
+      "default": "./dist/html.js"
+    },
     "./utils/*": {
       "types": "./dist/utils/*.d.ts",
       "svelte": "./dist/utils/*.js",

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

@@ -1,38 +0,0 @@
-import type { ComponentProps } from 'svelte';
-import type { SVGAttributes } from 'svelte/elements';
-import type { CommonStyleProps, Without } from '../utils/types.js';
-import type { SingleDomainType } from '../utils/scales.svelte.js';
-export type AnnotationLinePropsWithoutHTML = {
-    /** x value of the line (draws vertically across the full y range) */
-    x?: SingleDomainType;
-    /** y value of the line (draws horizontally across the full x range) */
-    y?: SingleDomainType;
-    /** x value of the line's start point. Takes precedence over `x`. Defaults to the start of the x range. */
-    x1?: SingleDomainType;
-    /** y value of the line's start point. Takes precedence over `y`. Defaults to the start of the y range. */
-    y1?: SingleDomainType;
-    /** x value of the line's end point. Takes precedence over `x`. Defaults to the end of the x range. */
-    x2?: SingleDomainType;
-    /** y value of the line's end point. Takes precedence over `y`. Defaults to the end of the y range. */
-    y2?: SingleDomainType;
-    /** Label to display for line*/
-    label?: string;
-    /** Placement of the label */
-    labelPlacement?: Placement;
-    /** X offset of the label */
-    labelXOffset?: number;
-    /** Y offset of the label */
-    labelYOffset?: number;
-    /** Classes for inner elements */
-    props?: {
-        label?: Partial<ComponentProps<typeof Text>>;
-        line?: Partial<ComponentProps<typeof Line>>;
-    };
-} & CommonStyleProps;
-export type AnnotationLineProps = AnnotationLinePropsWithoutHTML & Without<SVGAttributes<Element>, AnnotationLinePropsWithoutHTML>;
-import Line from './Line.svelte';
-import Text from './Text.svelte';
-import type { Placement } from './types.js';
-declare const AnnotationLine: import("svelte").Component<AnnotationLineProps, {}, "">;
-type AnnotationLine = ReturnType<typeof AnnotationLine>;
-export default AnnotationLine;