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

package/dist/components/Chart/Chart.shared.svelte.d.ts

@@ -0,0 +1,179 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TimeInterval } from 'd3-time';
+import type { HierarchyNode } from 'd3-hierarchy';
+import type { SankeyGraph } from 'd3-sankey';
+import type { Accessor } from '../../utils/common.js';
+import type { MotionProp } from '../../utils/motion.svelte.js';
+import type { AnyScale, DomainType } from '../../utils/scales.svelte.js';
+import type { BaseRange, Nice, PaddingArray, Without, XRangeWithScale, YRangeWithScale } from '../../utils/types.js';
+import type { GeoStateProps } from '../../states/geo.svelte.js';
+import type { StackLayout } from '../../states/series.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type TooltipContext from '../tooltip/TooltipContext.svelte';
+import type TransformContext from '../TransformContext.svelte';
+import type BrushContext from '../BrushContext.svelte';
+import type { ChartChildrenProps } from '../ChartChildren/ChartChildren.shared.svelte.js';
+import type { SeriesData } from '../charts/types.js';
+export type ChartResizeDetail = {
+    width: number;
+    height: number;
+    containerWidth: number;
+    containerHeight: number;
+};
+export type PreservedChartConfig<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = Pick<ChartPropsWithoutHTML<T, XScale, YScale>, 'x' | 'y' | 'z' | 'r' | 'c' | 'x1' | 'y1' | 'xRange' | 'yRange' | 'cDomain' | 'zDomain' | 'xDomain' | 'yDomain' | 'rDomain' | 'x1Domain' | 'y1Domain' | 'zRange' | 'rRange' | 'cRange' | 'x1Range' | 'y1Range'>;
+export type LayerChartInternalMeta = {
+    /**
+     * The current chart type.
+     * The default is `'default'` which is any chart being composed
+     * that isn't a "simplified chart".
+     */
+    type: 'default' | 'simplified-area' | 'simplified-bar' | 'simplified-line' | 'simplified-pie' | 'simplified-scatter';
+};
+export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = {
+    /**
+     * Whether this chart should be rendered server side
+     *
+     * @default false
+     */
+    ssr?: boolean;
+    /**
+     * Whether to allow pointer events via CSS.
+     * Set this to `false` to set `pointer-events: none;` on all components, disabling
+     * all mouse interactions.
+     *
+     * @default true
+     */
+    pointerEvents?: boolean;
+    /**
+     * Determine the positioning of the wrapper div.
+     * Set this to `'absolute'` when you want to stack layers.
+     *
+     * @default 'relative'
+     */
+    position?: string;
+    /**
+     * If `true`, set all scale ranges to `[0, 100]`.
+     * Ranges reversed via `xReverse`, `yReverse`, or `rReverse` props will
+     * continue to be reversed as usual.
+     * @default false
+     */
+    percentRange?: boolean;
+    /**
+     * A bindable reference to the root container element.
+     */
+    ref?: HTMLElement;
+    /**
+     * If `data` is not a flat array of objects and you want to use any of the scales, set a flat
+     * version of the data via the `flatData` prop.
+     */
+    data?: T[] | readonly T[] | HierarchyNode<T> | SankeyGraph<any, any>;
+    /** A flat version of data. */
+    flatData?: T[] | readonly T[] | HierarchyNode<T> | SankeyGraph<any, any>;
+    x?: Accessor<T>;
+    y?: Accessor<T>;
+    z?: Accessor<T>;
+    r?: Accessor<T>;
+    x1?: Accessor<T>;
+    y1?: Accessor<T>;
+    c?: Accessor<T>;
+    xDomain?: DomainType;
+    yDomain?: DomainType;
+    zDomain?: DomainType;
+    rDomain?: DomainType;
+    x1Domain?: DomainType;
+    y1Domain?: DomainType;
+    cDomain?: DomainType;
+    xNice?: Nice;
+    yNice?: Nice;
+    zNice?: Nice;
+    rNice?: Nice;
+    xPadding?: PaddingArray;
+    yPadding?: PaddingArray;
+    zPadding?: PaddingArray;
+    rPadding?: PaddingArray;
+    xScale?: XScale;
+    yScale?: YScale;
+    zScale?: AnyScale;
+    rScale?: AnyScale;
+    x1Scale?: AnyScale;
+    y1Scale?: AnyScale;
+    cScale?: AnyScale;
+    xRange?: BaseRange;
+    yRange?: BaseRange;
+    zRange?: BaseRange;
+    rRange?: BaseRange;
+    x1Range?: XRangeWithScale<XScale>;
+    y1Range?: YRangeWithScale<YScale>;
+    cRange?: string[] | readonly string[];
+    xReverse?: boolean;
+    yReverse?: boolean;
+    zReverse?: boolean;
+    rReverse?: boolean;
+    xDomainSort?: boolean;
+    yDomainSort?: boolean;
+    zDomainSort?: boolean;
+    rDomainSort?: boolean;
+    padding?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    } | number;
+    extents?: {
+        x?: [min: number, max: number];
+        y?: [min: number, max: number];
+        r?: [min: number, max: number];
+        z?: [min: number, max: number];
+    };
+    meta?: Record<string, any>;
+    debug?: boolean;
+    verbose?: boolean;
+    xBaseline?: number | null;
+    yBaseline?: number | null;
+    xInterval?: TimeInterval | null;
+    yInterval?: TimeInterval | null;
+    valueAxis?: 'x' | 'y';
+    radial?: boolean;
+    children?: Snippet<[{
+        context: ChartState<T, XScale, YScale>;
+    }]>;
+    context?: ChartState<T, XScale, YScale>;
+    geo?: Partial<GeoStateProps>;
+    tooltipContext?: Partial<ComponentProps<typeof TooltipContext>> | boolean;
+    transform?: Partial<ComponentProps<typeof TransformContext>> & {
+        apply?: {
+            rotation?: boolean;
+            scale?: boolean;
+            translate?: boolean;
+        };
+        domainExtent?: {
+            x?: {
+                min?: number | Date | 'data';
+                max?: number | Date | 'data';
+                minRange?: number;
+            };
+            y?: {
+                min?: number | Date | 'data';
+                max?: number | Date | 'data';
+                minRange?: number;
+            };
+        };
+    };
+    brush?: (Partial<ComponentProps<typeof BrushContext>> & {
+        zoomOnBrush?: boolean;
+    }) | boolean;
+    series?: SeriesData<T, any>[];
+    seriesLayout?: StackLayout | 'group';
+    bandPadding?: number;
+    groupPadding?: number;
+    onResize?: (e: ChartResizeDetail) => void;
+    clip?: boolean;
+    motion?: MotionProp;
+    ondragstart?: ComponentProps<typeof TransformContext>['ondragstart'];
+    ondragend?: ComponentProps<typeof TransformContext>['ondragend'];
+    onTransform?: ComponentProps<typeof TransformContext>['onTransform'];
+    width?: number;
+    height?: number;
+} & ChartChildrenProps<T, XScale, YScale>;
+export type ChartProps<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = ChartPropsWithoutHTML<T, XScale, YScale> & Without<HTMLAttributes<HTMLDivElement>, ChartPropsWithoutHTML<T, XScale, YScale>>;

package/dist/components/Chart/Chart.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  export type {
+    ChartProps,
+    ChartPropsWithoutHTML,
+    ChartResizeDetail,
+    PreservedChartConfig,
+    LayerChartInternalMeta,
+  } from './Chart.shared.svelte.js';
+</script>
+
+<script
+  lang="ts"
+  generics="TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale"
+>
+  import ChartBase from './Chart.base.svelte';
+  import ChartChildren from '../ChartChildren/ChartChildren.svelte';
+
+  import type { AnyScale } from '../../utils/scales.svelte.js';
+  import type { ChartProps } from './Chart.shared.svelte.js';
+
+  let {
+    ref = $bindable(),
+    context = $bindable(),
+    ...props
+  }: ChartProps<TData, XScale, YScale> = $props();
+</script>
+
+<ChartBase {ChartChildren} bind:ref bind:context {...props} />

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

@@ -0,0 +1,27 @@
+export type { ChartProps, ChartPropsWithoutHTML, ChartResizeDetail, PreservedChartConfig, LayerChartInternalMeta, } from './Chart.shared.svelte.js';
+import type { AnyScale } from '../../utils/scales.svelte.js';
+import type { ChartProps } from './Chart.shared.svelte.js';
+declare function $$render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): {
+    props: ChartProps<TData, XScale, YScale>;
+    exports: {};
+    bindings: "ref" | "context";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> {
+    props(): ReturnType<typeof $$render<TData, XScale, YScale>>['props'];
+    events(): ReturnType<typeof $$render<TData, XScale, YScale>>['events'];
+    slots(): ReturnType<typeof $$render<TData, XScale, YScale>>['slots'];
+    bindings(): "ref" | "context";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['events']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, XScale, YScale>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(internal: unknown, props: ReturnType<__sveltets_Render<TData, XScale, YScale>['props']> & {}): ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const Chart: $$IsomorphicComponent;
+type Chart<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = InstanceType<typeof Chart<TData, XScale, YScale>>;
+export default Chart;

package/dist/components/Chart/Chart.svg.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  export type {
+    ChartProps,
+    ChartPropsWithoutHTML,
+    ChartResizeDetail,
+    PreservedChartConfig,
+    LayerChartInternalMeta,
+  } from './Chart.shared.svelte.js';
+</script>
+
+<script
+  lang="ts"
+  generics="TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale"
+>
+  import ChartBase from './Chart.base.svelte';
+  import ChartChildren from '../ChartChildren/ChartChildren.svg.svelte';
+
+  import type { AnyScale } from '../../utils/scales.svelte.js';
+  import type { ChartProps } from './Chart.shared.svelte.js';
+
+  let {
+    ref = $bindable(),
+    context = $bindable(),
+    ...props
+  }: ChartProps<TData, XScale, YScale> = $props();
+</script>
+
+<ChartBase {ChartChildren} bind:ref bind:context {...props} />

package/dist/components/Chart/Chart.svg.svelte.d.ts

@@ -0,0 +1,27 @@
+export type { ChartProps, ChartPropsWithoutHTML, ChartResizeDetail, PreservedChartConfig, LayerChartInternalMeta, } from './Chart.shared.svelte.js';
+import type { AnyScale } from '../../utils/scales.svelte.js';
+import type { ChartProps } from './Chart.shared.svelte.js';
+declare function $$render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): {
+    props: ChartProps<TData, XScale, YScale>;
+    exports: {};
+    bindings: "ref" | "context";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> {
+    props(): ReturnType<typeof $$render<TData, XScale, YScale>>['props'];
+    events(): ReturnType<typeof $$render<TData, XScale, YScale>>['events'];
+    slots(): ReturnType<typeof $$render<TData, XScale, YScale>>['slots'];
+    bindings(): "ref" | "context";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['events']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, XScale, YScale>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(internal: unknown, props: ReturnType<__sveltets_Render<TData, XScale, YScale>['props']> & {}): ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const Chart: $$IsomorphicComponent;
+type Chart<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = InstanceType<typeof Chart<TData, XScale, YScale>>;
+export default Chart;

package/dist/components/Chart/ChartCore.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  export type {
+    ChartProps,
+    ChartPropsWithoutHTML,
+    ChartResizeDetail,
+    PreservedChartConfig,
+    LayerChartInternalMeta,
+  } from './Chart.shared.svelte.js';
+</script>
+
+<!--
+  Bare-bones chart wrapper — provides chart context, tooltip, brush, transform,
+  but skips `ChartChildren` (and therefore `Layer` / `Axis` / `Grid` / `Rule` /
+  `Highlight` / `ChartClipPath` / `RectClipPath`).
+
+  Use this for geo charts or other compositions that render their own primitives
+  directly via the `children` snippet, without the standard cartesian chart frame.
+  Saves ~20–30 KB gz over `<Chart>` for non-cartesian use cases.
+-->
+<script
+  lang="ts"
+  generics="TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale"
+>
+  import ChartBase from './Chart.base.svelte';
+
+  import type { AnyScale } from '../../utils/scales.svelte.js';
+  import type { ChartProps } from './Chart.shared.svelte.js';
+
+  let {
+    ref = $bindable(),
+    context = $bindable(),
+    ...props
+  }: ChartProps<TData, XScale, YScale> = $props();
+</script>
+
+<ChartBase bind:ref bind:context {...props} />

package/dist/components/Chart/ChartCore.svelte.d.ts

@@ -0,0 +1,27 @@
+export type { ChartProps, ChartPropsWithoutHTML, ChartResizeDetail, PreservedChartConfig, LayerChartInternalMeta, } from './Chart.shared.svelte.js';
+import type { AnyScale } from '../../utils/scales.svelte.js';
+import type { ChartProps } from './Chart.shared.svelte.js';
+declare function $$render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): {
+    props: ChartProps<TData, XScale, YScale>;
+    exports: {};
+    bindings: "ref" | "context";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> {
+    props(): ReturnType<typeof $$render<TData, XScale, YScale>>['props'];
+    events(): ReturnType<typeof $$render<TData, XScale, YScale>>['events'];
+    slots(): ReturnType<typeof $$render<TData, XScale, YScale>>['slots'];
+    bindings(): "ref" | "context";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['events']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, XScale, YScale>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(internal: unknown, props: ReturnType<__sveltets_Render<TData, XScale, YScale>['props']> & {}): ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const ChartCore: $$IsomorphicComponent;
+type ChartCore<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = InstanceType<typeof ChartCore<TData, XScale, YScale>>;
+export default ChartCore;

package/dist/components/Chart/ChartCore.svelte.test.d.ts

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

package/dist/components/Chart/ChartCore.svelte.test.js

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { tick } from 'svelte';
+import ChartCoreTestHarness from '../tests/ChartCoreTestHarness.svelte';
+const data = [
+    { x: 0, y: 10 },
+    { x: 1, y: 20 },
+    { x: 2, y: 30 },
+];
+describe('ChartCore', () => {
+    it('should render the children snippet content', async () => {
+        const { container } = render(ChartCoreTestHarness, {
+            chartProps: { data, x: 'x', y: 'y', height: 200 },
+        });
+        await tick();
+        // Children snippet renders a <div data-testid="children-content">
+        expect(container.querySelector('[data-testid="children-content"]')).not.toBeNull();
+    });
+    it('should NOT render ChartChildren-injected marks (Axis, Grid, Rule, Highlight)', async () => {
+        const { container } = render(ChartCoreTestHarness, {
+            chartProps: { data, x: 'x', y: 'y', height: 200 },
+        });
+        await tick();
+        // Compare to <Chart>: those classes would be present. ChartCore skips them.
+        expect(container.querySelector('.lc-axis')).toBeNull();
+        expect(container.querySelector('.lc-grid')).toBeNull();
+        expect(container.querySelector('.lc-rule')).toBeNull();
+        expect(container.querySelector('.lc-highlight-area')).toBeNull();
+    });
+    it('should expose the chart context to children', async () => {
+        let chartContext;
+        render(ChartCoreTestHarness, {
+            chartProps: { data, x: 'x', y: 'y', height: 200 },
+            oncontext: (ctx) => {
+                chartContext = ctx;
+            },
+        });
+        await tick();
+        expect(chartContext).toBeDefined();
+        expect(chartContext.width).toBeGreaterThan(0);
+        expect(chartContext.height).toBeGreaterThan(0);
+    });
+    it('should render the root container', async () => {
+        const { container } = render(ChartCoreTestHarness, {
+            chartProps: { data, x: 'x', y: 'y', height: 200 },
+        });
+        await tick();
+        expect(container.querySelector('.lc-root-container')).not.toBeNull();
+    });
+});

package/dist/components/ChartChildren/ChartChildren.base.svelte

@@ -0,0 +1,212 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { AnyScale } from '../../utils/scales.svelte.js';
+  import type { ChartChildrenProps } from './ChartChildren.shared.svelte.js';
+
+  /**
+   * Per-layer primitives a `<ChartChildren.base>` consumer must inject.
+   *
+   * `Layer` is the layer wrapper (Svg / Canvas / Html, or the agnostic
+   * `Layer` dispatcher). `Axis` / `Grid` / `Rule` / `Highlight` /
+   * `ChartClipPath` are the per-layer compound mark variants (or the
+   * agnostic dispatchers).
+   */
+  export type ChartChildrenBaseLayerComponents = {
+    Layer: Component<any>;
+    Axis: Component<any>;
+    Grid: Component<any>;
+    Rule: Component<any>;
+    Highlight: Component<any>;
+    ChartClipPath: Component<any>;
+  };
+
+  export type ChartChildrenBaseProps<
+    TData,
+    XScale extends AnyScale = AnyScale,
+    YScale extends AnyScale = AnyScale,
+  > = ChartChildrenProps<TData, XScale, YScale> & ChartChildrenBaseLayerComponents;
+</script>
+
+<script
+  lang="ts"
+  generics="TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale"
+>
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getSettings } from '../../contexts/settings.js';
+  import { asAny } from '../../utils/types.js';
+  import { getObjectOrNull } from '../../utils/common.js';
+
+  const context = getChartContext<TData, XScale, YScale>();
+  const settings = getSettings();
+
+  let {
+    Layer,
+    Axis,
+    Grid,
+    Rule,
+    Highlight,
+    ChartClipPath,
+    props = {},
+    children: childrenProp,
+    belowContext,
+    grid = true,
+    belowMarks,
+    marks,
+    aboveMarks,
+    axis = true,
+    rule = true,
+    points = false,
+    labels = false,
+    highlight = true,
+    aboveContext,
+    legend,
+    tooltip,
+    tooltipContext,
+    annotations = [],
+  }: ChartChildrenBaseProps<TData, XScale, YScale> = $props();
+
+  let snippetProps = $derived({ context });
+  let layer = $derived(settings.layer);
+</script>
+
+{#if childrenProp}
+  {@render childrenProp(snippetProps)}
+{:else}
+  {@render belowContext?.(snippetProps)}
+
+  <Layer
+    type={layer}
+    center={context.radial}
+    {...asAny(layer === 'canvas' ? props.canvas : props.svg)}
+    debug={settings.debug}
+  >
+    {#if typeof grid === 'function'}
+      {@render grid(snippetProps)}
+    {:else if grid}
+      <Grid
+        x={context.valueAxis === 'x' || context.radial}
+        y={context.valueAxis === 'y' || context.radial}
+        {...getObjectOrNull(grid)}
+        {...props.grid}
+      />
+    {/if}
+
+    <ChartClipPath disabled={!context.props.brush && context.transformState?.mode !== 'domain'}>
+      {#if annotations.length > 0}
+        {#await import('../charts/ChartAnnotations.svelte') then { default: ChartAnnotations }}
+          <ChartAnnotations {annotations} layer="below" />
+        {/await}
+      {/if}
+
+      {@render belowMarks?.(snippetProps)}
+      {@render marks?.(snippetProps)}
+      {@render aboveMarks?.(snippetProps)}
+    </ChartClipPath>
+
+    {#if typeof axis === 'function'}
+      {@render axis(snippetProps)}
+
+      {#if typeof rule === 'function'}
+        {@render rule(snippetProps)}
+      {:else if rule}
+        <Rule
+          x={context.valueAxis === 'x' ? 0 : false}
+          y={context.valueAxis === 'y' ? 0 : false}
+          {...getObjectOrNull(rule)}
+          {...props.rule}
+        />
+      {/if}
+    {:else if axis}
+      {#if axis !== 'x'}
+        <!-- y-axis -->
+        <Axis
+          placement={context.radial ? 'radius' : 'left'}
+          {...getObjectOrNull(axis)}
+          {...props.yAxis}
+        />
+      {/if}
+
+      {#if axis !== 'y'}
+        <!-- x-axis -->
+        <Axis
+          placement={context.radial ? 'angle' : 'bottom'}
+          {...getObjectOrNull(axis)}
+          {...props.xAxis}
+        />
+      {/if}
+
+      {#if typeof rule === 'function'}
+        {@render rule(snippetProps)}
+      {:else if rule}
+        <Rule
+          x={context.valueAxis === 'x' ? 0 : false}
+          y={context.valueAxis === 'y' ? 0 : false}
+          {...getObjectOrNull(rule)}
+          {...props.rule}
+        />
+      {/if}
+    {/if}
+
+    <!-- Use `full` to allow labels on edge to not be cropped (bleed into padding) -->
+    <ChartClipPath
+      disabled={!context.props.brush && context.transformState?.mode !== 'domain'}
+      full
+    >
+      {#if typeof points === 'function'}
+        {@render points(snippetProps)}
+      {:else if points}
+        {#await import('../Points/Points.svelte') then { default: Points }}
+          {#each context.series.visibleSeries as s, i (s.key)}
+            <Points
+              seriesKey={s.key}
+              stroke="var(--color-surface-100, light-dark(white, black))"
+              {...getObjectOrNull(points)}
+              {...props.points}
+            />
+          {/each}
+        {/await}
+      {/if}
+
+      {#if typeof labels === 'function'}
+        {@render labels(snippetProps)}
+      {:else if labels}
+        {#await import('../Labels/Labels.svelte') then { default: Labels }}
+          {@const labelSeriesKey = typeof labels === 'object' ? labels.seriesKey : undefined}
+          {#each context.series.visibleSeries.filter((s) => !labelSeriesKey || s.key === labelSeriesKey) as s, i (s.key)}
+            <Labels seriesKey={s.key} {...getObjectOrNull(labels)} {...props.labels} />
+          {/each}
+        {/await}
+      {/if}
+
+      {#if typeof highlight === 'function'}
+        {@render highlight(snippetProps)}
+      {:else if highlight}
+        <Highlight {...typeof highlight === 'object' ? highlight : {}} {...props.highlight} />
+      {/if}
+
+      {#if annotations.length > 0}
+        {#await import('../charts/ChartAnnotations.svelte') then { default: ChartAnnotations }}
+          <ChartAnnotations {annotations} layer="above" />
+        {/await}
+      {/if}
+    </ChartClipPath>
+  </Layer>
+
+  {@render aboveContext?.(snippetProps)}
+
+  {#if typeof legend === 'function'}
+    {@render legend(snippetProps)}
+  {:else if legend}
+    {#await import('../Legend.svelte') then { default: Legend }}
+      <Legend placement="bottom" {...getObjectOrNull(legend)} {...props.legend} />
+    {/await}
+  {/if}
+
+  {#if typeof tooltip === 'function'}
+    {@render tooltip(snippetProps)}
+  {:else if tooltipContext}
+    {#await import('../charts/DefaultTooltip.svelte') then { default: DefaultTooltip }}
+      <DefaultTooltip tooltipProps={props.tooltip} canHaveTotal />
+    {/await}
+  {/if}
+{/if}

package/dist/components/ChartChildren/ChartChildren.base.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { Component } from 'svelte';
+import type { AnyScale } from '../../utils/scales.svelte.js';
+import type { ChartChildrenProps } from './ChartChildren.shared.svelte.js';
+/**
+ * Per-layer primitives a `<ChartChildren.base>` consumer must inject.
+ *
+ * `Layer` is the layer wrapper (Svg / Canvas / Html, or the agnostic
+ * `Layer` dispatcher). `Axis` / `Grid` / `Rule` / `Highlight` /
+ * `ChartClipPath` are the per-layer compound mark variants (or the
+ * agnostic dispatchers).
+ */
+export type ChartChildrenBaseLayerComponents = {
+    Layer: Component<any>;
+    Axis: Component<any>;
+    Grid: Component<any>;
+    Rule: Component<any>;
+    Highlight: Component<any>;
+    ChartClipPath: Component<any>;
+};
+export type ChartChildrenBaseProps<TData, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = ChartChildrenProps<TData, XScale, YScale> & ChartChildrenBaseLayerComponents;
+declare function $$render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): {
+    props: ChartChildrenBaseProps<TData, XScale, YScale>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> {
+    props(): ReturnType<typeof $$render<TData, XScale, YScale>>['props'];
+    events(): ReturnType<typeof $$render<TData, XScale, YScale>>['events'];
+    slots(): ReturnType<typeof $$render<TData, XScale, YScale>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['events']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, XScale, YScale>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(internal: unknown, props: ReturnType<__sveltets_Render<TData, XScale, YScale>['props']> & {}): ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const ChartChildren: $$IsomorphicComponent;
+type ChartChildren<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = InstanceType<typeof ChartChildren<TData, XScale, YScale>>;
+export default ChartChildren;