layerchart 2.0.0-next.2 → 2.0.0-next.21

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

@@ -1,44 +1,91 @@
-import { type Force, type Simulation, type SimulationNodeDatum } from 'd3-force';
+import { type Force, type Simulation, type SimulationLinkDatum, type SimulationNodeDatum } from 'd3-force';
 import type { Snippet } from 'svelte';
-type Forces = Record<string, Force<any, any>>;
+export type Forces<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = Record<string, Force<NodeDatum, LinkDatum>>;
+export type Data<TNode = any, TLink = any> = {
+    nodes: TNode[];
+    links?: TLink[];
+};
 export type LinkPosition = {
     x1: number;
     y1: number;
     x2: number;
     y2: number;
 };
-export type ForceSimulationProps = {
+export type OnStartEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: SimulationFor<NodeDatum, LinkDatum>;
+};
+export type OnTickEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    nodes: NodeDatumFor<NodeDatum>[];
+    links: LinkDatumFor<NodeDatum, LinkDatum>[];
+    simulation: SimulationFor<NodeDatum, LinkDatum>;
+};
+export type OnEndEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: SimulationFor<NodeDatum, LinkDatum>;
+};
+/**
+ * Default initial alpha value of the simulation.
+ */
+export declare const DEFAULT_ALPHA: number;
+/**
+ * Default target alpha value for the simulation.
+ */
+export declare const DEFAULT_ALPHA_TARGET: number;
+/**
+ * Default alpha decay rate per tick.
+ *
+ * Formula: `1 - Math.pow(0.001, 1 / 300)`.
+ */
+export declare const DEFAULT_ALPHA_DECAY: number;
+/**
+ * Default minimum alpha value at which simulation stops.
+ */
+export declare const DEFAULT_ALPHA_MIN: number;
+/**
+ * Default velocity decay factor applied to nodes each tick.
+ */
+export declare const DEFAULT_VELOCITY_DECAY: number;
+type NodeDatumFor<NodeDatum> = NodeDatum & SimulationNodeDatum;
+type LinkDatumFor<NodeDatum, LinkDatum> = LinkDatum & SimulationLinkDatum<NodeDatumFor<NodeDatum>>;
+type SimulationFor<NodeDatum, LinkDatum> = Simulation<NodeDatumFor<NodeDatum>, LinkDatumFor<NodeDatum, LinkDatum>>;
+export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
     /**
      * Force simulation parameters
      */
-    forces: Forces;
+    forces: Forces<NodeDatum, LinkDatum>;
     /**
-     * An array of links to be used for position calculation.
+     * An object with arrays of nodes and links,
+     * to be used for position calculation.
      */
-    links?: any[];
+    data: Data<NodeDatum, LinkDatum>;
     /**
      * Current alpha value of the simulation
-     * @default 1
+     * @default DEFAULT_ALPHA
      */
     alpha?: number;
     /**
      * Target alpha value for the simulation
-     * @default 0
+     * @default DEFAULT_ALPHA_TARGET
      */
     alphaTarget?: number;
     /**
      * Alpha decay rate per tick
-     * @default 1 - Math.pow(0.001, 1 / 300)
+     * @default DEFAULT_ALPHA_DECAY
      */
     alphaDecay?: number;
     /**
      * Minimum alpha value at which simulation stops
-     * @default 0.01
+     * @default DEFAULT_ALPHA_MIN
      */
     alphaMin?: number;
     /**
      * Velocity decay factor applied to nodes each tick
-     * @default 0.4
+     * @default DEFAULT_VELOCITY_DECAY
      */
     velocityDecay?: number;
     /**
@@ -59,26 +106,38 @@ export type ForceSimulationProps = {
     /**
      * Callback function triggered when simulation starts
      */
-    onStart?: () => void;
+    onStart?: (e: OnStartEvent<NodeDatum, LinkDatum | undefined>) => void;
     /**
      * Callback function triggered on each simulation tick
      */
-    onTick?: (e: {
-        alpha: number;
-        alphaTarget: number;
-    }) => void;
+    onTick?: (e: OnTickEvent<NodeDatum, LinkDatum | undefined>) => void;
     /**
      * Callback function triggered when simulation ends
      */
-    onEnd?: () => void;
+    onEnd?: (e: OnEndEvent<NodeDatum, LinkDatum | undefined>) => void;
     children?: Snippet<[
         {
-            nodes: any[];
-            simulation: Simulation<SimulationNodeDatum, undefined>;
+            nodes: NodeDatumFor<NodeDatum>[];
+            links: LinkDatumFor<NodeDatum, LinkDatum>[];
             linkPositions: LinkPosition[];
+            simulation: SimulationFor<NodeDatum, LinkDatum>;
         }
     ]>;
 };
-declare const ForceSimulation: import("svelte").Component<ForceSimulationProps, {}, "alpha">;
-type ForceSimulation = ReturnType<typeof ForceSimulation>;
+declare class __sveltets_Render<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> {
+    props(): ForceSimulationProps<NodeDatum, LinkDatum>;
+    events(): {};
+    slots(): {};
+    bindings(): "alpha";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['events']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['bindings']>;
+    } & ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
+    <NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(internal: unknown, props: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']> & {}): ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ForceSimulation: $$IsomorphicComponent;
+type ForceSimulation<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = InstanceType<typeof ForceSimulation<NodeDatum, LinkDatum>>;
 export default ForceSimulation;

package/dist/components/GeoEdgeFade.svelte

@@ -15,7 +15,7 @@
   };
 
   export type GeoEdgeFadeProps = GeoEdgeFadePropsWithoutHTML &
-    Without<SVGAttributes<SVGGElement>, GeoEdgeFadePropsWithoutHTML>;
+    Without<GroupProps, GeoEdgeFadePropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -23,6 +23,7 @@
   import { geoDistance } from 'd3-geo';
 
   import { getGeoContext } from './GeoContext.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import { extractLayerProps } from '../utils/attributes.js';
 
   let {
@@ -55,6 +56,6 @@
   const opacity = $derived(opacityProp ?? clamper(fade(distance)));
 </script>
 
-<g {opacity} bind:this={ref} {...extractLayerProps(restProps, 'geo-edge-fade')}>
+<Group {opacity} bind:ref {...extractLayerProps(restProps, 'geo-edge-fade')}>
   {@render children?.()}
-</g>
+</Group>

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

@@ -1,6 +1,5 @@
 import type { Snippet } from 'svelte';
 import type { Without } from '../utils/types.js';
-import type { SVGAttributes } from 'svelte/elements';
 export type GeoEdgeFadePropsWithoutHTML = {
     link: {
         source: [number, number];
@@ -13,7 +12,8 @@ export type GeoEdgeFadePropsWithoutHTML = {
     ref?: SVGGElement;
     children?: Snippet;
 };
-export type GeoEdgeFadeProps = GeoEdgeFadePropsWithoutHTML & Without<SVGAttributes<SVGGElement>, GeoEdgeFadePropsWithoutHTML>;
+export type GeoEdgeFadeProps = GeoEdgeFadePropsWithoutHTML & Without<GroupProps, GeoEdgeFadePropsWithoutHTML>;
+import { type GroupProps } from './Group.svelte';
 declare const GeoEdgeFade: import("svelte").Component<GeoEdgeFadeProps, {}, "ref">;
 type GeoEdgeFade = ReturnType<typeof GeoEdgeFade>;
 export default GeoEdgeFade;

package/dist/components/GeoPath.svelte

@@ -5,6 +5,7 @@
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
   import {
+    geoPath as d3GeoPath,
     geoTransform as d3geoTransform,
     type GeoIdentityTransform,
     type GeoPermissibleObjects,
@@ -105,6 +106,10 @@
   const geoPath = $derived.by(() => {
     geojson;
     if (!projection) return;
+    // Only use geoCurvePath for custom curves (performance impact)
+    if (curve === curveLinearClosed) {
+      return d3GeoPath(projection);
+    }
     return geoCurvePath(projection, curve);
   });
 
@@ -157,16 +162,18 @@
       name: 'GeoPath',
       render,
       events: {
-        click: _onClick,
-        pointerenter: _onPointerEnter,
-        pointermove: _onPointerMove,
-        pointerleave: _onPointerLeave,
+        // Only register events if they are defined (so they are not registered with hit canvas unnecessarily)
+        click: onclick ? _onClick : undefined,
+        pointerenter: restProps.onpointerenter || tooltipContext ? _onPointerEnter : undefined,
+        pointermove: restProps.onpointermove || tooltipContext ? _onPointerMove : undefined,
+        pointerleave: restProps.onpointerleave || tooltipContext ? _onPointerLeave : undefined,
         pointerdown: restProps.onpointerdown,
         touchmove: restProps.ontouchmove,
       },
       deps: () => [
-        geojson,
         projection,
+        geojson,
+        curve,
         fillKey.current,
         strokeKey.current,
         strokeWidth,

package/dist/components/GeoPoint.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-  import Circle, { type CircleProps, type CirclePropsWithoutHTML } from './Circle.svelte';
+  import Circle, { type CircleProps } from './Circle.svelte';
   import type { Without } from '../utils/types.js';
 
   export type GeoPointPropsWithoutHTML = {

package/dist/components/GeoSpline.svelte

@@ -42,13 +42,13 @@
     link,
     loft = 1.0,
     curve = curveNatural,
-    splineRef: splineRefProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     ...restProps
   }: GeoSplineProps = $props();
 
-  let splineRef = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
   $effect.pre(() => {
-    splineRefProp = splineRef;
+    pathRefProp = pathRef;
   });
 
   const geoCtx = getGeoContext();
@@ -76,7 +76,7 @@
 </script>
 
 <Spline
-  bind:splineRef
+  bind:pathRef
   data={[source, middle, target]}
   x={(d) => d[0]}
   y={(d) => d[1]}

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

@@ -27,6 +27,6 @@ export type GeoSplinePropsWithoutHTML = {
     curve?: CurveFactory | CurveFactoryLineOnly;
 };
 export type GeoSplineProps = GeoSplinePropsWithoutHTML & Without<SplineProps, GeoSplinePropsWithoutHTML>;
-declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "splineRef">;
+declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "pathRef">;
 type GeoSpline = ReturnType<typeof GeoSpline>;
 export default GeoSpline;

package/dist/components/Graticule.svelte

@@ -16,6 +16,7 @@
 <script lang="ts">
   import { geoGraticule } from 'd3-geo';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import Group from './Group.svelte';
 
   let { lines, outline, step = [10, 10], ...restProps }: GraticuleProps = $props();
 
@@ -26,7 +27,7 @@
   });
 </script>
 
-<g class={layerClass('graticule-g')}>
+<Group class={layerClass('graticule-g')}>
   <!-- TODO: Any reason to still render the single `MultiLineString` path if using `lines` and/or `outline` -->
   {#if !lines && !outline}
     <GeoPath geojson={graticule()} {...extractLayerProps(restProps, 'graticule-geo-path')} />
@@ -44,4 +45,4 @@
       {...extractLayerProps(outline, 'graticule-geo-outline')}
     />
   {/if}
-</g>
+</Group>

package/dist/components/Grid.svelte

@@ -77,7 +77,7 @@
   };
 
   export type GridProps<In extends Transition = Transition> = Omit<
-    GridPropsWithoutHTML<In> & Without<SVGAttributes<SVGGElement>, GridPropsWithoutHTML<In>>,
+    GridPropsWithoutHTML<In> & Without<GroupProps, GridPropsWithoutHTML<In>>,
     'children'
   >;
 </script>
@@ -93,6 +93,7 @@
   import { isScaleBand } from '../utils/scales.svelte.js';
 
   import Circle from './Circle.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
   import Spline from './Spline.svelte';
@@ -150,11 +151,11 @@
   );
 </script>
 
-<g bind:this={ref} class={cls(layerClass('grid'), classes.root, className)} {...restProps}>
+<Group bind:ref class={cls(layerClass('grid'), classes.root, className)} {...restProps}>
   {#if x}
     {@const splineProps = extractLayerProps(x, 'grid-x-line')}
 
-    <g in:transitionIn={transitionInParams} class={layerClass('grid-x')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('grid-x')}>
       {#each xTickVals as x (x)}
         {#if ctx.radial}
           {@const [x1, y1] = pointRadial(ctx.xScale(x), ctx.yRange[0])}
@@ -204,12 +205,12 @@
           )}
         />
       {/if}
-    </g>
+    </Group>
   {/if}
 
   {#if y}
     {@const splineProps = extractLayerProps(y, 'grid-y-line')}
-    <g in:transitionIn={transitionInParams} class={layerClass('grid-y')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('grid-y')}>
       {#each yTickVals as y (y)}
         {#if ctx.radial}
           {#if radialY === 'circle'}
@@ -285,6 +286,6 @@
           />
         {/if}
       {/if}
-    </g>
+    </Group>
   {/if}
-</g>
+</Group>

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

@@ -63,7 +63,8 @@ export type GridPropsWithoutHTML<In extends Transition = Transition> = {
     ref?: SVGGElement;
     motion?: MotionProp;
 };
-export type GridProps<In extends Transition = Transition> = Omit<GridPropsWithoutHTML<In> & Without<SVGAttributes<SVGGElement>, GridPropsWithoutHTML<In>>, 'children'>;
+export type GridProps<In extends Transition = Transition> = Omit<GridPropsWithoutHTML<In> & Without<GroupProps, GridPropsWithoutHTML<In>>, 'children'>;
+import { type GroupProps } from './Group.svelte';
 import { type TicksConfig } from '../utils/ticks.js';
 declare const Grid: import("svelte").Component<GridProps<Transition>, {}, "ref">;
 type Grid = ReturnType<typeof Grid>;

package/dist/components/Group.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes, TouchEventHandler } from 'svelte/elements';
-  import type { Without } from '../utils/types.js';
-  import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
+  import type { Transition, TransitionParams, Without } from '../utils/types.js';
+  import { createMotion, extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
 
-  export type GroupPropsWithoutHTML = {
+  export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Translate x
      */
@@ -44,6 +44,11 @@
      */
     preventTouchMove?: boolean;
 
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
+
     children?: Snippet;
 
     /**
@@ -56,13 +61,28 @@
     ref?: Element;
 
     motion?: MotionProp;
+
+    /**
+     * Transition function for entering elements
+     * @default defaults to fade if the motion prop is set to tweened
+     */
+    transitionIn?: In;
+
+    /**
+     * Parameters for the transitionIn function
+     * @default { easing: cubicIn }
+     */
+    transitionInParams?: TransitionParams<In>;
   };
 
   export type GroupProps = GroupPropsWithoutHTML &
     Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
 </script>
 
-<script lang="ts">
+<script lang="ts" generics="T extends Transition = Transition">
+  import { fade } from 'svelte/transition';
+  import { cubicIn } from 'svelte/easing';
+
   import { cls } from '@layerstack/tailwind';
 
   import { getRenderContext } from './Chart.svelte';
@@ -80,7 +100,10 @@
     initialY: initialYProp,
     center = false,
     preventTouchMove = false,
+    opacity = undefined,
     motion,
+    transitionIn: transitionInProp,
+    transitionInParams: transitionInParamsProp,
     class: className,
     children,
     ref: refProp = $bindable(),
@@ -101,6 +124,13 @@
   const motionX = createMotion(initialX, () => trueX, motion);
   const motionY = createMotion(initialY, () => trueY, motion);
 
+  const transitionIn = $derived(
+    transitionInProp ? transitionInProp : extractTweenConfig(motion)?.options ? fade : () => {}
+  ) as T;
+  const transitionInParams = $derived(
+    transitionInParamsProp ? transitionInParamsProp : { easing: cubicIn }
+  );
+
   const transform = $derived.by(() => {
     if (center || x != null || y != null) {
       return `translate(${motionX.current}px, ${motionY.current}px)`;
@@ -113,7 +143,13 @@
     registerCanvasComponent({
       name: 'Group',
       render: (ctx) => {
+        const currentGlobalAlpha = ctx.globalAlpha;
+        ctx.globalAlpha = opacity ?? 1;
+
         ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
+
+        // Restore in case it was modified by `opacity`
+        ctx.globalAlpha = currentGlobalAlpha;
       },
       retainState: true,
       events: {
@@ -124,7 +160,7 @@
         pointerleave: restProps.onpointerleave,
         pointerdown: restProps.onpointerdown,
       },
-      deps: () => [motionX.current, motionY.current],
+      deps: () => [motionX.current, motionY.current, opacity],
     });
   }
 
@@ -143,6 +179,8 @@
   <g
     style:transform
     class={cls(layerClass('group-g'), className)}
+    in:transitionIn={transitionInParams}
+    {opacity}
     {...restProps}
     ontouchmove={handleTouchMove}
     bind:this={ref}
@@ -153,6 +191,8 @@
   <div
     bind:this={ref}
     style:transform
+    style:opacity
+    in:transitionIn={transitionInParams}
     {...restProps}
     class={cls(layerClass('group-div'), 'absolute', className)}
     ontouchmove={handleTouchMove}

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

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Without } from '../utils/types.js';
+import type { Transition, TransitionParams, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
-export type GroupPropsWithoutHTML = {
+export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
     /**
      * Translate x
      */
@@ -36,6 +36,10 @@ export type GroupPropsWithoutHTML = {
      * @default false
      */
     preventTouchMove?: boolean;
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
     children?: Snippet;
     /**
      * A reference to the rendered DOM element, which could be
@@ -46,8 +50,32 @@ export type GroupPropsWithoutHTML = {
      */
     ref?: Element;
     motion?: MotionProp;
+    /**
+     * Transition function for entering elements
+     * @default defaults to fade if the motion prop is set to tweened
+     */
+    transitionIn?: In;
+    /**
+     * Parameters for the transitionIn function
+     * @default { easing: cubicIn }
+     */
+    transitionInParams?: TransitionParams<In>;
 };
 export type GroupProps = GroupPropsWithoutHTML & Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
-declare const Group: import("svelte").Component<GroupProps, {}, "ref">;
-type Group = ReturnType<typeof Group>;
+declare class __sveltets_Render<T extends Transition = Transition> {
+    props(): GroupProps;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Transition = Transition>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Transition = Transition>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Group: $$IsomorphicComponent;
+type Group<T extends Transition = Transition> = InstanceType<typeof Group<T>>;
 export default Group;

package/dist/components/Highlight.svelte

@@ -471,7 +471,7 @@
     {:else}
       <Bar
         motion={motion === 'spring' ? 'spring' : undefined}
-        bar={highlightData}
+        data={highlightData}
         {...barProps}
         class={cls(!barProps.fill && 'fill-primary', barProps.class)}
         onclick={onBarClick && ((e) => onBarClick(e, { data: highlightData }))}

package/dist/components/Hull.svelte

@@ -49,8 +49,7 @@
     ref?: SVGGElement;
   };
 
-  export type HullProps = HullPropsWithoutHTML &
-    Without<SVGAttributes<SVGElement>, HullPropsWithoutHTML>;
+  export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
@@ -62,6 +61,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import GeoPath from './GeoPath.svelte';
+  import Group, { type GroupProps } from './Group.svelte';
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { getGeoContext } from './GeoContext.svelte';
@@ -104,7 +104,7 @@
   );
 </script>
 
-<g {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:this={ref}>
+<Group {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:ref>
   {#if geoCtx.projection}
     {@const polygon = geoVoronoi().hull(points)}
     <GeoPath
@@ -129,4 +129,4 @@
       {onpointerleave}
     />
   {/if}
-</g>
+</Group>

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

@@ -1,5 +1,4 @@
 import type { Without } from '../utils/types.js';
-import type { SVGAttributes } from 'svelte/elements';
 import type { ComponentProps } from 'svelte';
 export type HullPropsWithoutHTML = {
     /**
@@ -34,8 +33,9 @@ export type HullPropsWithoutHTML = {
      */
     ref?: SVGGElement;
 };
-export type HullProps = HullPropsWithoutHTML & Without<SVGAttributes<SVGElement>, HullPropsWithoutHTML>;
+export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
 import { Delaunay } from 'd3-delaunay';
+import { type GroupProps } from './Group.svelte';
 import Spline from './Spline.svelte';
 declare const Hull: import("svelte").Component<HullProps, {}, "ref">;
 type Hull = ReturnType<typeof Hull>;

package/dist/components/Labels.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import Text, { type TextProps } from './Text.svelte';
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { format as formatValue, type FormatType, type FormatConfig } from '@layerstack/utils';
   import type { Without } from '../utils/types.js';
   import Points, { type Point } from './Points.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
@@ -51,7 +51,7 @@
     /**
      * The format of the label
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Define unique value for {#each} `(key)` expressions to improve transitions.
@@ -73,6 +73,7 @@
 
   import { isScaleBand } from '../utils/scales.svelte.js';
   import { getChartContext } from './Chart.svelte';
+  import Group from './Group.svelte';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
 
   const ctx = getChartContext();
@@ -108,6 +109,7 @@
 
     const formattedValue = formatValue(
       displayValue,
+      // @ts-expect-error - improve types
       format ??
         (value
           ? undefined
@@ -172,7 +174,7 @@
   }
 </script>
 
-<g class={layerClass('labels-g')}>
+<Group class={layerClass('labels-g')}>
   <Points {data} {x} {y}>
     {#snippet children({ points })}
       {#each points as point, i (key(point.data, i))}
@@ -196,4 +198,4 @@
       {/each}
     {/snippet}
   </Points>
-</g>
+</Group>