layerchart 2.0.0-next.60 → 2.0.0-next.61

package/dist/components/charts/{PieChart.svelte → PieChart/PieChart.base.svelte}

@@ -1,187 +1,16 @@
 <script lang="ts" module>
-  import type { ComponentProps, Snippet } from 'svelte';
-  import type { ChartProps } from '../Chart.svelte';
-  import type { ChartState } from '../../contexts/chart.js';
-  import type { Accessor } from '../../utils/common.js';
-  import type { SeriesData } from './types.js';
-
-  import Arc from '../Arc.svelte';
-  import ArcLabel, { type ArcLabelConfig } from '../ArcLabel.svelte';
-  import Group from '../Group.svelte';
-  import Pie from '../Pie.svelte';
-
-  export type PieChartExtraSnippetProps<TData> = {
-    key: Accessor<TData>;
-    label: Accessor<TData>;
-    value: Accessor<TData>;
-    visibleData: TData[];
-    getGroupProps: () => ComponentProps<typeof Group>;
+  import type { Component } from 'svelte';
+  import type { PieChartProps } from './PieChart.shared.svelte.js';
+
+  export type PieChartBaseLayerComponents = {
+    Chart: Component<any>;
+    Arc: Component<any>;
+    ArcLabel: Component<any>;
+    Group: Component<any>;
+    Pie: Component<any>;
   };
 
-  // Use explicit data prop for TData inference, with rest from ChartPropsWithoutHTML<any>
-  export type PieChartProps<TData> = {
-    /**
-     * The data for the chart
-     */
-    data?: TData[] | readonly TData[];
-  } & Omit<
-    ChartProps<any>,
-    // Props that don't apply to PieChart
-    'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'
-  > & {
-      /**
-       * Render text labels on each arc.
-       *
-       * Pass `true` to enable with default placement (`centroid`), or an object
-       * to customize via `ArcLabel` props (placement, format, value accessor, etc).
-       */
-      labels?: boolean | (ArcLabelConfig & { value?: Accessor });
-      /**
-       * The series data to be used for the chart.
-       */
-      series?: SeriesData<TData, typeof Arc>[];
-
-      /**
-       * Key accessor
-       *
-       * @default 'key'
-       */
-      key?: Accessor<TData>;
-
-      /**
-       * Label accessor
-       *
-       * @default 'label'
-       */
-      label?: Accessor<TData>;
-
-      /**
-       * Value accessor
-       *
-       * @default 'value'
-       */
-      value?: Accessor<TData>;
-
-      /**
-       * Color accessor
-       *
-       * @default key
-       */
-      c?: Accessor<TData>;
-
-      /**
-       * Maximum possible value, useful when `data` is single item
-       */
-      maxValue?: number;
-
-      /**
-       * Range [min, max] in degrees.
-       *
-       * See also `startAngle`/`endAngle`
-       *
-       * @default [0, 360]
-       */
-      range?: [number, number];
-
-      /**
-       * Inner radius of the arc.
-       *   value >= 1: discrete value
-       *   value >  0: percent of `outerRadius`
-       *   value <  0: offset of `outerRadius`
-       */
-      innerRadius?: number;
-
-      /**
-       * Outer radius of the arc.
-       */
-      outerRadius?: number;
-
-      /**
-       * Corner radius of the arc
-       *
-       * @default 0
-       */
-      cornerRadius?: number;
-
-      /**
-       * Angle between the arcs
-       *
-       * @default 0
-       */
-      padAngle?: number;
-
-      /**
-       * Placement of the PieChart
-       *
-       * @default 'center'
-       */
-      placement?: 'left' | 'center' | 'right';
-
-      /**
-       * Center the chart.
-       *
-       * Override and use `props.group` for more control.
-       *
-       * @default placement === 'center'
-       */
-      center?: boolean;
-
-      /**
-       * Replace the default rendering of the `<Pie>` component internally with your own.
-       *
-       * Use the `props` snippet prop to access the default props.
-       */
-      pie?: Snippet<
-        [
-          { context: ChartState<TData> } & PieChartExtraSnippetProps<TData> & {
-              /**
-               * Default props to apply to the Pie component.
-               */
-              props: ComponentProps<typeof Pie>;
-              /**
-               * The index of the pie series currently being iterated over.
-               */
-              index: number;
-            },
-        ]
-      >;
-
-      /**
-       * Replace the default rendering of the `<Arc>` component internally with your own.
-       *
-       * Use the `props` snippet prop to access the default props.
-       */
-      arc?: Snippet<
-        [
-          { context: ChartState<TData> } & PieChartExtraSnippetProps<TData> & {
-              props: ComponentProps<typeof Arc>;
-              /**
-               * The index of the arc currently being iterated over
-               */
-              index: number;
-
-              /**
-               * The index of the series currently being iterated over.
-               */
-              seriesIndex: number;
-            },
-        ]
-      >;
-
-      /**
-       * A callback function triggered when the arc is clicked.
-       */
-      onArcClick?: (
-        e: MouseEvent,
-        detail: { data: any; series: SeriesData<TData, typeof Arc> }
-      ) => void;
-
-      /**
-       * Enable profiling to measure render time.
-       * @default false
-       */
-      profile?: boolean;
-    };
+  export type PieChartBaseProps<TData> = PieChartProps<TData> & PieChartBaseLayerComponents;
 </script>
 
 <script lang="ts" generics="TData">
@@ -190,12 +19,21 @@
   import type { PieArcDatum } from 'd3-shape';
   import { schemeObservable10 } from 'd3-scale-chromatic';
 
-  import Chart from '../Chart.svelte';
-  import * as Tooltip from '../tooltip/index.js';
+  import * as Tooltip from '../../tooltip/index.js';
 
-  import { accessor, chartDataArray, getObjectOrNull } from '../../utils/common.js';
+  import type { ArcLabelConfig } from '../../ArcLabel/ArcLabel.shared.svelte.js';
+  import type { ArcProps } from '../../Arc/Arc.shared.svelte.js';
+  import type { GroupProps } from '../../Group/Group.shared.svelte.js';
+  import type { PieProps } from '../../Pie/Pie.shared.svelte.js';
+  import type { SeriesData } from '../types.js';
+  import { accessor, chartDataArray, getObjectOrNull, type Accessor } from '../../../utils/common.js';
 
   let {
+    Chart,
+    Arc,
+    ArcLabel,
+    Group,
+    Pie,
     data = [],
     key = 'key',
     label = 'label',
@@ -225,7 +63,7 @@
     labels = false,
     context = $bindable(),
     ...restProps
-  }: PieChartProps<TData> = $props();
+  }: PieChartBaseProps<TData> = $props();
 
   const labelsConfig = $derived.by<(ArcLabelConfig & { value?: Accessor }) | null>(() => {
     if (labels === true) return { placement: 'callout' };
@@ -269,7 +107,7 @@
     return item ? (labelAccessor(item) ?? tick) : tick;
   };
 
-  function getGroupProps(): ComponentProps<typeof Group> {
+  function getGroupProps(): GroupProps {
     if (!context) return {};
     return {
       x:
@@ -283,7 +121,7 @@
     };
   }
 
-  function getPieProps(s: SeriesData<TData, typeof Arc>, i: number): ComponentProps<typeof Pie> {
+  function getPieProps(s: SeriesData<TData, any>, i: number): PieProps {
     return {
       data: s.data,
       range,
@@ -296,11 +134,11 @@
   }
 
   function getArcProps(
-    s: SeriesData<TData, typeof Arc>,
+    s: SeriesData<TData, any>,
     seriesIndex: number,
     arc: PieArcDatum<any>,
     arcIndex: number
-  ): ComponentProps<typeof Arc> {
+  ): ArcProps {
     if (!context) return {};
     const arcDataProps =
       'props' in arc.data && typeof arc.data.props === 'object' ? arc.data.props : {};
@@ -317,7 +155,7 @@
       fill: context.cScale?.(context.c(arc.data)),
       data: arc.data,
       tooltip: true,
-      onclick: (e) => {
+      onclick: (e: MouseEvent) => {
         onArcClick(e, { data: arc.data, series: s });
         // Workaround for `tooltip={{ mode: 'manual' }}
         onTooltipClick(e, { data: arc.data });
@@ -384,7 +222,7 @@
     canvas: { center, ...props.canvas },
   }}
 >
-  {#snippet marks(snippetProps)}
+  {#snippet marks(snippetProps: any)}
     {#if typeof marks === 'function'}
       {@render marks(snippetProps)}
     {:else}
@@ -404,7 +242,7 @@
             })}
           {:else}
             <Pie {...getPieProps(s, seriesIdx)}>
-              {#snippet children({ arcs })}
+              {#snippet children({ arcs }: { arcs: PieArcDatum<any>[] })}
                 {#each arcs as arcData, arcIdx (`${seriesIdx}-${arcIdx}`)}
                   {@const arcProps = getArcProps(s, seriesIdx, arcData, arcIdx)}
                   {#if typeof arc === 'function'}
@@ -428,7 +266,7 @@
                         innerRadius: arcInnerRadius,
                         outerRadius: arcOuterRadius,
                         getArcTextProps,
-                      })}
+                      }: any)}
                         {@const { value: labelValue, ...labelRest } = labelsConfig}
                         <ArcLabel
                           {centroid}
@@ -454,12 +292,12 @@
     {/if}
   {/snippet}
 
-  {#snippet tooltip(snippetProps)}
+  {#snippet tooltip(snippetProps: any)}
     {#if typeof tooltipProp === 'function'}
       {@render tooltipProp(snippetProps)}
     {:else if tooltipContext}
       <Tooltip.Root context={snippetProps.context} {...props.tooltip?.root}>
-        {#snippet children({ data })}
+        {#snippet children({ data }: { data: any })}
           <Tooltip.List {...props.tooltip?.list}>
             <Tooltip.Item
               label={labelAccessor(data) || keyAccessor(data)}

package/dist/components/charts/PieChart/PieChart.base.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Component } from 'svelte';
+import type { PieChartProps } from './PieChart.shared.svelte.js';
+export type PieChartBaseLayerComponents = {
+    Chart: Component<any>;
+    Arc: Component<any>;
+    ArcLabel: Component<any>;
+    Group: Component<any>;
+    Pie: Component<any>;
+};
+export type PieChartBaseProps<TData> = PieChartProps<TData> & PieChartBaseLayerComponents;
+declare function $$render<TData>(): {
+    props: PieChartBaseProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "context";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PieChart: $$IsomorphicComponent;
+type PieChart<TData> = InstanceType<typeof PieChart<TData>>;
+export default PieChart;

package/dist/components/charts/PieChart/PieChart.canvas.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  export type { PieChartProps } from './PieChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import PieChartBase from './PieChart.base.svelte';
+  import Chart from '../../Chart/Chart.canvas.svelte';
+  import Arc from '../../Arc/Arc.canvas.svelte';
+  import ArcLabel from '../../ArcLabel/ArcLabel.canvas.svelte';
+  import Group from '../../Group/Group.canvas.svelte';
+  import Pie from '../../Pie/Pie.canvas.svelte';
+  import type { PieChartProps } from './PieChart.shared.svelte.js';
+
+  let props: PieChartProps<TData> = $props();
+</script>
+
+<PieChartBase {Chart} {Arc} {ArcLabel} {Group} {Pie} {...props} />

package/dist/components/charts/PieChart/PieChart.canvas.svelte.d.ts

@@ -0,0 +1,26 @@
+export type { PieChartProps } from './PieChart.shared.svelte.js';
+import type { PieChartProps } from './PieChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: PieChartProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PieChart: $$IsomorphicComponent;
+type PieChart<TData> = InstanceType<typeof PieChart<TData>>;
+export default PieChart;

package/dist/components/charts/{PieChart.svelte.d.ts → PieChart/PieChart.shared.svelte.d.ts}

@@ -1,18 +1,18 @@
-import type { ComponentProps, Snippet } from 'svelte';
-import type { ChartProps } from '../Chart.svelte';
-import type { ChartState } from '../../contexts/chart.js';
-import type { Accessor } from '../../utils/common.js';
-import type { SeriesData } from './types.js';
-import Arc from '../Arc.svelte';
-import { type ArcLabelConfig } from '../ArcLabel.svelte';
-import Group from '../Group.svelte';
-import Pie from '../Pie.svelte';
+import type { Component, Snippet } from 'svelte';
+import type { ChartProps } from '../../Chart/Chart.shared.svelte.js';
+import type { ChartState } from '../../../contexts/chart.js';
+import type { Accessor } from '../../../utils/common.js';
+import type { ArcProps } from '../../Arc/Arc.shared.svelte.js';
+import type { ArcLabelConfig } from '../../ArcLabel/ArcLabel.shared.svelte.js';
+import type { GroupProps } from '../../Group/Group.shared.svelte.js';
+import type { PieProps } from '../../Pie/Pie.shared.svelte.js';
+import type { SeriesData } from '../types.js';
 export type PieChartExtraSnippetProps<TData> = {
     key: Accessor<TData>;
     label: Accessor<TData>;
     value: Accessor<TData>;
     visibleData: TData[];
-    getGroupProps: () => ComponentProps<typeof Group>;
+    getGroupProps: () => GroupProps;
 };
 export type PieChartProps<TData> = {
     /**
@@ -32,7 +32,7 @@ export type PieChartProps<TData> = {
     /**
      * The series data to be used for the chart.
      */
-    series?: SeriesData<TData, typeof Arc>[];
+    series?: SeriesData<TData, Component<ArcProps>>[];
     /**
      * Key accessor
      *
@@ -118,7 +118,7 @@ export type PieChartProps<TData> = {
             /**
              * Default props to apply to the Pie component.
              */
-            props: ComponentProps<typeof Pie>;
+            props: PieProps;
             /**
              * The index of the pie series currently being iterated over.
              */
@@ -134,7 +134,7 @@ export type PieChartProps<TData> = {
         {
             context: ChartState<TData>;
         } & PieChartExtraSnippetProps<TData> & {
-            props: ComponentProps<typeof Arc>;
+            props: ArcProps;
             /**
              * The index of the arc currently being iterated over
              */
@@ -150,7 +150,7 @@ export type PieChartProps<TData> = {
      */
     onArcClick?: (e: MouseEvent, detail: {
         data: any;
-        series: SeriesData<TData, typeof Arc>;
+        series: SeriesData<TData, Component<ArcProps>>;
     }) => void;
     /**
      * Enable profiling to measure render time.
@@ -158,27 +158,3 @@ export type PieChartProps<TData> = {
      */
     profile?: boolean;
 };
-declare function $$render<TData>(): {
-    props: PieChartProps<TData>;
-    exports: {};
-    bindings: "context";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TData> {
-    props(): ReturnType<typeof $$render<TData>>['props'];
-    events(): ReturnType<typeof $$render<TData>>['events'];
-    slots(): ReturnType<typeof $$render<TData>>['slots'];
-    bindings(): "context";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
-    } & ReturnType<__sveltets_Render<TData>['exports']>;
-    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const PieChart: $$IsomorphicComponent;
-type PieChart<TData> = InstanceType<typeof PieChart<TData>>;
-export default PieChart;

package/dist/components/charts/PieChart/PieChart.shared.svelte.js

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

package/dist/components/charts/PieChart/PieChart.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  export type { PieChartProps } from './PieChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import PieChartBase from './PieChart.base.svelte';
+  import Chart from '../../Chart/Chart.svelte';
+  import Arc from '../../Arc/Arc.svelte';
+  import ArcLabel from '../../ArcLabel/ArcLabel.svelte';
+  import Group from '../../Group/Group.svelte';
+  import Pie from '../../Pie/Pie.svelte';
+  import type { PieChartProps } from './PieChart.shared.svelte.js';
+
+  let { context = $bindable(), ...props }: PieChartProps<TData> = $props();
+</script>
+
+<PieChartBase {Chart} {Arc} {ArcLabel} {Group} {Pie} bind:context {...props} />

package/dist/components/charts/PieChart/PieChart.svelte.d.ts

@@ -0,0 +1,26 @@
+export type { PieChartProps } from './PieChart.shared.svelte.js';
+import type { PieChartProps } from './PieChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: PieChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "context";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PieChart: $$IsomorphicComponent;
+type PieChart<TData> = InstanceType<typeof PieChart<TData>>;
+export default PieChart;

package/dist/components/charts/PieChart/PieChart.svg.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  export type { PieChartProps } from './PieChart.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="TData">
+  import PieChartBase from './PieChart.base.svelte';
+  import Chart from '../../Chart/Chart.svg.svelte';
+  import Arc from '../../Arc/Arc.svg.svelte';
+  import ArcLabel from '../../ArcLabel/ArcLabel.svg.svelte';
+  import Group from '../../Group/Group.svg.svelte';
+  import Pie from '../../Pie/Pie.svg.svelte';
+  import type { PieChartProps } from './PieChart.shared.svelte.js';
+
+  let props: PieChartProps<TData> = $props();
+</script>
+
+<PieChartBase {Chart} {Arc} {ArcLabel} {Group} {Pie} {...props} />

package/dist/components/charts/PieChart/PieChart.svg.svelte.d.ts

@@ -0,0 +1,26 @@
+export type { PieChartProps } from './PieChart.shared.svelte.js';
+import type { PieChartProps } from './PieChart.shared.svelte.js';
+declare function $$render<TData>(): {
+    props: PieChartProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PieChart: $$IsomorphicComponent;
+type PieChart<TData> = InstanceType<typeof PieChart<TData>>;
+export default PieChart;

package/dist/components/charts/PieChart.svelte.test.js

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { render } from 'vitest-browser-svelte';
-import PieChart from './PieChart.svelte';
+import PieChart from './PieChart/PieChart.svelte';
 const data = [
     { browser: 'chrome', visitors: 275, color: 'red' },
     { browser: 'safari', visitors: 200, color: 'blue' },

package/dist/components/charts/{ScatterChart.svelte → ScatterChart/ScatterChart.base.svelte}

@@ -1,37 +1,24 @@
 <script lang="ts" module>
-  import type { ChartProps } from '../Chart.svelte';
-  import type { SeriesData } from './types.js';
+  import type { Component } from 'svelte';
+  import type { ScatterChartProps } from './ScatterChart.shared.svelte.js';
 
-  import Points from '../Points.svelte';
+  export type ScatterChartBaseLayerComponents = {
+    Chart: Component<any>;
+    Points: Component<any>;
+  };
 
-  // Use explicit data prop for TData inference, with rest from ChartPropsWithoutHTML<any>
-  export type ScatterChartProps<TData> = {
-    /**
-     * The data for the chart
-     */
-    data?: TData[] | readonly TData[];
-  } & Omit<ChartProps<any>, 'data'> & {
-      /**
-       * The series data to be used for the chart.
-       */
-      series?: SeriesData<TData, typeof Points>[];
-
-      /**
-       * Enable profiling to measure render time.
-       * @default false
-       */
-      profile?: boolean;
-    };
+  export type ScatterChartBaseProps<TData> = ScatterChartProps<TData> &
+    ScatterChartBaseLayerComponents;
 </script>
 
 <script lang="ts" generics="TData">
   import { onMount } from 'svelte';
 
-  import Chart from '../Chart.svelte';
-
-  import { chartDataArray } from '../../utils/common.js';
+  import { chartDataArray } from '../../../utils/common.js';
 
   let {
+    Chart,
+    Points,
     data = [],
     x: xProp,
     y: yProp,
@@ -51,7 +38,7 @@
     tooltip: tooltipProp,
     context = $bindable(),
     ...restProps
-  }: ScatterChartProps<TData> = $props();
+  }: ScatterChartBaseProps<TData> = $props();
 
   const series = $derived(
     seriesProp === undefined ? [{ key: 'default', data: chartDataArray(data) }] : seriesProp
@@ -98,7 +85,7 @@
   tooltip={tooltipProp}
   {props}
 >
-  {#snippet marks({ context })}
+  {#snippet marks({ context }: { context: any })}
     {#if typeof marks === 'function'}
       {@render marks({ context })}
     {:else}