layerchart 2.0.0-next.2 → 2.0.0-next.4

package/dist/components/AnnotationLine.svelte

@@ -17,8 +17,11 @@
     /** Placement of the label */
     labelPlacement?: Placement;
 
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+
+    /** Y offset of the label */
+    labelYOffset?: number;
 
     /** Classes for inner elements */
     props?: {
@@ -44,7 +47,8 @@
     y,
     label,
     labelPlacement = 'top-right',
-    labelOffset = 0,
+    labelXOffset = 0,
+    labelYOffset = 0,
     props,
   }: AnnotationLineProps = $props();
 
@@ -62,25 +66,17 @@
   const labelProps = $derived<ComponentProps<typeof Text>>(
     isVertical
       ? {
-          x:
-            line.x1 +
-            (['top', 'bottom'].includes(labelPlacement)
-              ? 0 // Offset applies to `y`
-              : labelPlacement.includes('left')
-                ? -labelOffset
-                : labelOffset),
+          x: line.x1 + (labelPlacement.includes('left') ? -labelXOffset : labelXOffset),
           y:
             (labelPlacement.includes('top')
               ? line.y2
               : labelPlacement.includes('bottom')
                 ? line.y1
                 : (line.y1 - line.y2) / 2) +
-            (labelPlacement === 'top'
-              ? -labelOffset
-              : labelPlacement === 'bottom'
-                ? labelOffset
-                : 0),
-          dy: -2, // adjust for smaler font size
+            (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement)
+              ? -labelYOffset
+              : labelYOffset),
+          dy: -2, // adjust for smaller font size
           textAnchor: labelPlacement.includes('left')
             ? 'end'
             : labelPlacement.includes('right')
@@ -104,19 +100,11 @@
               : labelPlacement.includes('right')
                 ? line.x2
                 : (line.x2 - line.x1) / 2) +
-            (labelPlacement === 'left'
-              ? -labelOffset
-              : labelPlacement === 'right'
-                ? labelOffset
-                : 0),
-          y:
-            line.y1 +
-            (['left', 'right'].includes(labelPlacement)
-              ? 0 // Offset applies to `x`
-              : labelPlacement.includes('top')
-                ? -labelOffset
-                : labelOffset),
-          dy: -2, // adjust for smaler font size
+            (['left', 'top-right', 'bottom-right'].includes(labelPlacement)
+              ? -labelXOffset
+              : labelXOffset),
+          y: line.y1 + (labelPlacement.includes('top') ? -labelYOffset : labelYOffset),
+          dy: -2, // adjust for smaller font size
           textAnchor:
             labelPlacement === 'left'
               ? 'end' // place beside line

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

@@ -11,8 +11,10 @@ export type AnnotationLinePropsWithoutHTML = {
     label?: string;
     /** Placement of the label */
     labelPlacement?: Placement;
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+    /** Y offset of the label */
+    labelYOffset?: number;
     /** Classes for inner elements */
     props?: {
         label?: Partial<ComponentProps<typeof Text>>;

package/dist/components/AnnotationPoint.svelte

@@ -20,8 +20,11 @@
     /** Placement of the label */
     labelPlacement?: Placement;
 
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+
+    /** Y offset of the label */
+    labelYOffset?: number;
 
     /** Details (description, etc) useful to display in tooltip */
     details?: any;
@@ -51,7 +54,8 @@
     r = 4,
     label,
     labelPlacement = 'center',
-    labelOffset = 0,
+    labelXOffset = 0,
+    labelYOffset = 0,
     details,
     props,
   }: AnnotationPointProps = $props();
@@ -66,18 +70,12 @@
   const labelProps = $derived<ComponentProps<typeof Text>>({
     x:
       point.x +
-      (labelPlacement.includes('left')
-        ? -(r + labelOffset)
-        : labelPlacement.includes('right')
-          ? r + labelOffset
-          : 0),
+      ((['top', 'center', 'bottom'].includes(labelPlacement) ? 0 : r) + labelXOffset) *
+        (labelPlacement.includes('left') ? -1 : 1),
     y:
       point.y +
-      (labelPlacement.includes('top')
-        ? -(r + labelOffset)
-        : labelPlacement.includes('bottom')
-          ? r + labelOffset
-          : 0),
+      ((['left', 'center', 'right'].includes(labelPlacement) ? 0 : r) + labelYOffset) *
+        (labelPlacement.includes('top') ? -1 : 1),
     dy: -2, // adjust for smaler font size
     textAnchor: labelPlacement.includes('left')
       ? 'end'

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

@@ -13,8 +13,10 @@ export type AnnotationPointPropsWithoutHTML = {
     label?: string;
     /** Placement of the label */
     labelPlacement?: Placement;
-    /** Offset of the label */
-    labelOffset?: number;
+    /** X offset of the label */
+    labelXOffset?: number;
+    /** Y offset of the label */
+    labelYOffset?: number;
     /** Details (description, etc) useful to display in tooltip */
     details?: any;
     /** Classes for inner elements */

package/dist/components/Axis.svelte

@@ -104,13 +104,11 @@
   };
 
   export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> &
-    Without<SVGAttributes<SVGGElement>, AxisPropsWithoutHTML<In>>;
+    Without<GroupProps, AxisPropsWithoutHTML<In>>;
 </script>
 
 <script lang="ts" generics="T extends Transition = Transition">
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { fade } from 'svelte/transition';
-  import { cubicIn } from 'svelte/easing';
   import type { SVGAttributes } from 'svelte/elements';
 
   import { extent } from 'd3-array';
@@ -119,6 +117,7 @@
   import { format as formatValue, type FormatType } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
+  import Group, { type GroupProps } from './Group.svelte';
   import Line from './Line.svelte';
   import Rule from './Rule.svelte';
   import Text from './Text.svelte';
@@ -126,7 +125,7 @@
 
   import { getChartContext } from './Chart.svelte';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
-  import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
+  import { type MotionProp } from '../utils/motion.svelte.js';
   import { resolveTickVals, type TicksConfig } from '../utils/ticks.js';
 
   let {
@@ -142,8 +141,8 @@
     format,
     tickLabelProps,
     motion,
-    transitionIn: transitionInProp,
-    transitionInParams: transitionInParamsProp,
+    transitionIn,
+    transitionInParams,
     scale: scaleProp,
     classes = {},
     class: className,
@@ -151,13 +150,6 @@
     ...restProps
   }: AxisProps<T> = $props();
 
-  const transitionIn = $derived(
-    transitionInProp ? transitionInProp : extractTweenConfig(motion)?.options ? fade : () => {}
-  ) as T;
-  const transitionInParams = $derived(
-    transitionInParamsProp ? transitionInParamsProp : { easing: cubicIn }
-  );
-
   const ctx = getChartContext();
 
   const orientation = $derived(
@@ -342,7 +334,7 @@
   }) satisfies ComponentProps<typeof Text>;
 </script>
 
-<g
+<Group
   {...restProps}
   data-placement={placement}
   class={cls(layerClass('axis'), `placement-${placement}`, classes.root, className)}
@@ -364,7 +356,7 @@
     <Text {...resolvedLabelProps} />
   {/if}
 
-  {#each tickVals as tick, index (tick)}
+  {#each tickVals as tick, index (tick.toString())}
     {@const tickCoords = getCoords(tick)}
     {@const [radialTickCoordsX, radialTickCoordsY] = pointRadial(tickCoords.x, tickCoords.y)}
     {@const [radialTickMarkCoordsX, radialTickMarkCoordsY] = pointRadial(
@@ -386,7 +378,7 @@
       ),
     }}
 
-    <g in:transitionIn={transitionInParams} class={layerClass('axis-tick-group')}>
+    <Group {transitionIn} {transitionInParams} class={layerClass('axis-tick-group')}>
       {#if grid !== false}
         {@const ruleProps = extractLayerProps(grid, 'axis-grid')}
         <Rule
@@ -404,7 +396,6 @@
           'stroke-surface-content/50',
           classes.tick
         )}
-        <!-- Tick marks -->
         {#if orientation === 'horizontal'}
           <Line
             x1={tickCoords.x}
@@ -434,13 +425,12 @@
           />
         {/if}
       {/if}
-      <!-- TODO: Add tick marks for radial (angle)? -->
 
       {#if tickLabel}
         {@render tickLabel({ props: resolvedTickLabelProps, index })}
       {:else}
         <Text {...resolvedTickLabelProps} />
       {/if}
-    </g>
+    </Group>
   {/each}
-</g>
+</Group>

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

@@ -89,10 +89,11 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
     };
     motion?: MotionProp;
 };
-export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> & Without<SVGAttributes<SVGGElement>, AxisPropsWithoutHTML<In>>;
+export type AxisProps<In extends Transition = Transition> = AxisPropsWithoutHTML<In> & Without<GroupProps, AxisPropsWithoutHTML<In>>;
 import { type ComponentProps, type Snippet } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
 import { type FormatType } from '@layerstack/utils';
+import { type GroupProps } from './Group.svelte';
 import Rule from './Rule.svelte';
 import Text from './Text.svelte';
 import { type MotionProp } from '../utils/motion.svelte.js';

package/dist/components/Bar.svelte

@@ -2,7 +2,10 @@
   import { createDimensionGetter, type Insets } from '../utils/rect.svelte.js';
 
   export type BarPropsWithoutHTML = {
-    bar: Object;
+    /**
+     * data to render the bar from
+     */
+    data: Object;
 
     /**
      * Override `x` from context. Useful for multiple Bar instances
@@ -89,7 +92,7 @@
   const ctx = getChartContext();
 
   let {
-    bar,
+    data,
     x = ctx.x,
     y = ctx.y,
     x1,
@@ -122,11 +125,11 @@
     }))
   );
 
-  const dimensions = $derived(getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 });
+  const dimensions = $derived(getDimensions(data) ?? { x: 0, y: 0, width: 0, height: 0 });
 
   const isVertical = $derived(isScaleBand(ctx.xScale));
   const valueAccessor = $derived(accessor(isVertical ? y : x));
-  const value = $derived(valueAccessor(bar));
+  const value = $derived(valueAccessor(data));
   const resolvedValue = $derived(Array.isArray(value) ? greatestAbs(value) : value);
 
   // Resolved `rounded="edge"` based on orientation and value

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

@@ -1,6 +1,9 @@
 import { type Insets } from '../utils/rect.svelte.js';
 export type BarPropsWithoutHTML = {
-    bar: Object;
+    /**
+     * data to render the bar from
+     */
+    data: Object;
     /**
      * Override `x` from context. Useful for multiple Bar instances
      *

package/dist/components/Bars.svelte

@@ -21,16 +21,19 @@
     children?: Snippet;
     // TODO: investigate
     [key: string]: any;
-  } & Omit<BarPropsWithoutHTML, 'bar' | 'children'>;
+  } & Omit<BarPropsWithoutHTML, 'data' | 'children'>;
 
-  export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'bar'>;
+  export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'data'>;
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   import Bar, { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
+  import Group from './Group.svelte';
+
   import { chartDataArray } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
-  import type { Snippet } from 'svelte';
   import { extractLayerProps, layerClass } from '../utils/attributes.js';
 
   let {
@@ -49,20 +52,20 @@
   const data = $derived(chartDataArray(dataProp ?? ctx.data));
 </script>
 
-<g class={layerClass('bars')}>
+<Group class={layerClass('bars')}>
   {#if children}
     {@render children()}
   {:else}
     {#each data as d, i (key(d, i))}
       <Bar
+        data={d}
         {radius}
         {strokeWidth}
         {stroke}
-        bar={d}
         fill={fill ?? (ctx.config.c ? ctx.cGet(d) : null)}
         onclick={(e) => onBarClick(e, { data: d })}
         {...extractLayerProps(restProps, 'bars-bar')}
       />
     {/each}
   {/if}
-</g>
+</Group>

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

@@ -18,10 +18,10 @@ export type BarsPropsWithoutHTML = {
     }) => void;
     children?: Snippet;
     [key: string]: any;
-} & Omit<BarPropsWithoutHTML, 'bar' | 'children'>;
-export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'bar'>;
-import { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
+} & Omit<BarPropsWithoutHTML, 'data' | 'children'>;
+export type BarsProps = BarsPropsWithoutHTML & Omit<BarProps, 'data'>;
 import type { Snippet } from 'svelte';
+import { type BarProps, type BarPropsWithoutHTML } from './Bar.svelte';
 declare const Bars: import("svelte").Component<BarsProps, {}, "">;
 type Bars = ReturnType<typeof Bars>;
 export default Bars;

package/dist/components/Blur.svelte

@@ -21,22 +21,28 @@
 </script>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getRenderContext } from './Chart.svelte';
   import { createId } from '../utils/createId.js';
   import { layerClass } from '../utils/attributes.js';
-  import type { Snippet } from 'svelte';
+
   const uid = $props.id();
 
   let { id = createId('blur-', uid), stdDeviation = 5, children }: BlurProps = $props();
+
+  const renderContext = getRenderContext();
 </script>
 
-<defs>
-  <filter {id} class={layerClass('blur-filter')}>
-    <feGaussianBlur in="SourceGraphic" {stdDeviation} />
-  </filter>
-</defs>
+{#if renderContext === 'svg'}
+  <defs>
+    <filter {id} class={layerClass('blur-filter')}>
+      <feGaussianBlur in="SourceGraphic" {stdDeviation} />
+    </filter>
+  </defs>
 
-{#if children}
-  <g filter="url(#{id})" class={layerClass('blur-g')}>
-    {@render children({ id, url: `url(#${id})` })}
-  </g>
+  {#if children}
+    <g filter="url(#{id})" class={layerClass('blur-g')}>
+      {@render children({ id, url: `url(#${id})` })}
+    </g>
+  {/if}
 {/if}

package/dist/components/ClipPath.svelte

@@ -4,6 +4,7 @@
   import { layerClass } from '../utils/attributes.js';
   import type { Snippet } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
+  import { getRenderContext } from './Chart.svelte';
 
   export type ClipPathPropsWithoutHTML = {
     /**
@@ -55,20 +56,24 @@
   }: ClipPathPropsWithoutHTML = $props();
 
   const url = $derived(`url(#${id})`);
+
+  const renderContext = getRenderContext();
 </script>
 
-<defs>
-  <clipPath {id} {...restProps}>
-    {@render clip?.({ id })}
+{#if renderContext === 'svg'}
+  <defs>
+    <clipPath {id} {...restProps}>
+      {@render clip?.({ id })}
 
-    {#if useId}
-      <use href="#{useId}" />
-    {/if}
-  </clipPath>
-</defs>
+      {#if useId}
+        <use href="#{useId}" />
+      {/if}
+    </clipPath>
+  </defs>
+{/if}
 
 {#if children}
-  {#if disabled}
+  {#if disabled || renderContext !== 'svg'}
     {@render children({ id, url, useId })}
   {:else}
     <g style:clip-path={url} class={layerClass('clip-path-g')}>

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/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 = 1,
     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;
+
         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

@@ -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();
@@ -172,7 +173,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 +197,4 @@
       {/each}
     {/snippet}
   </Points>
-</g>
+</Group>

package/dist/components/Rule.svelte

@@ -52,6 +52,7 @@
   import { cls } from '@layerstack/tailwind';
 
   import Circle from './Circle.svelte';
+  import Group from './Group.svelte';
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
   import { getChartContext } from './Chart.svelte';
   import { layerClass } from '../utils/attributes.js';
@@ -87,7 +88,7 @@
   }
 </script>
 
-<g class={layerClass('rule-g')}>
+<Group class={layerClass('rule-g')}>
   {#if showRule(x, 'x')}
     {@const xCoord =
       x === true || x === 'left'
@@ -153,4 +154,4 @@
       />
     {/if}
   {/if}
-</g>
+</Group>

package/dist/components/Voronoi.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
   import type { Without } from '../utils/types.js';
-  import type { SVGAttributes } from 'svelte/elements';
 
   export type VoronoiPropsWithoutHTML = {
     /**
@@ -8,6 +7,9 @@
      */
     data?: any;
 
+    /** Radius to clip voronoi cells.  `0` or `undefined` to disables clipping */
+    r?: number;
+
     /**
      * Classes to apply to the root and path elements
      *
@@ -50,26 +52,30 @@
   };
 
   export type VoronoiProps = VoronoiPropsWithoutHTML &
-    Without<Omit<SVGAttributes<SVGGElement>, 'children'>, VoronoiPropsWithoutHTML>;
+    Without<Omit<GroupProps, 'children'>, VoronoiPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
-  import type { GeoPermissibleObjects } from 'd3-geo';
+  import { type GeoPermissibleObjects } from 'd3-geo';
   // @ts-expect-error
   import { geoVoronoi } from 'd3-geo-voronoi';
   import { pointRadial } from 'd3-shape';
   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';
+  import CircleClipPath from './CircleClipPath.svelte';
+
   import { layerClass } from '../utils/attributes.js';
 
   let {
     data,
+    r,
     classes = {},
     onclick,
     onpointerenter,
@@ -108,54 +114,67 @@
   // Width and/or height can sometimes be negative (when loading data remotely and updately)
   const boundWidth = $derived(Math.max(ctx.width, 0));
   const boundHeight = $derived(Math.max(ctx.height, 0));
+
+  const disableClip = $derived(r === 0 || r == null || r === Infinity);
 </script>
 
-<g {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
+<Group {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
   {#if geo.projection}
     {@const polygons = geoVoronoi().polygons(points)}
     {#each polygons.features as feature}
-      <GeoPath
-        geojson={feature}
-        class={cls(
-          layerClass('voronoi-geo-path'),
-          'fill-transparent stroke-transparent',
-          classes.path
-        )}
-        onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
-        onpointerenter={(e) => onpointerenter?.(e, { data: feature.properties.site.data, feature })}
-        onpointermove={(e) => onpointermove?.(e, { data: feature.properties.site.data, feature })}
-        onpointerdown={(e) => onpointerdown?.(e, { data: feature.properties.site.data, feature })}
-        {onpointerleave}
-        ontouchmove={(e) => {
-          // Prevent touch to not interfere with pointer
-          e.preventDefault();
-        }}
-      />
-    {/each}
-  {:else}
-    {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
-    {#each points as point, i}
-      {@const pathData = voronoi.renderCell(i)}
-      <!-- Wait to render Spline until pathData is available to fix path artifacts from injected tweened points in Spline  -->
-      {#if pathData}
-        <Spline
-          {pathData}
+      {@const point = r ? geo.projection?.(feature.properties.sitecoordinates) : null}
+      <CircleClipPath
+        cx={point?.[0]}
+        cy={point?.[1]}
+        r={r ?? 0}
+        disabled={point == null || disableClip}
+      >
+        <GeoPath
+          geojson={feature}
           class={cls(
-            layerClass('voronoi-path'),
+            layerClass('voronoi-geo-path'),
             'fill-transparent stroke-transparent',
             classes.path
           )}
-          onclick={(e) => onclick?.(e, { data: point.data, point })}
-          onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
-          onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
+          onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
+          onpointerenter={(e) =>
+            onpointerenter?.(e, { data: feature.properties.site.data, feature })}
+          onpointermove={(e) => onpointermove?.(e, { data: feature.properties.site.data, feature })}
+          onpointerdown={(e) => onpointerdown?.(e, { data: feature.properties.site.data, feature })}
           {onpointerleave}
-          onpointerdown={(e) => onpointerdown?.(e, { data: point.data, point })}
           ontouchmove={(e) => {
             // Prevent touch to not interfere with pointer
             e.preventDefault();
           }}
         />
+      </CircleClipPath>
+    {/each}
+  {:else}
+    {@const voronoi = Delaunay.from(points).voronoi([0, 0, boundWidth, boundHeight])}
+    {#each points as point, i}
+      {@const pathData = voronoi.renderCell(i)}
+      <!-- Wait to render Spline until pathData is available to fix path artifacts from injected tweened points in Spline  -->
+      {#if pathData}
+        <CircleClipPath cx={point[0]} cy={point[1]} r={r ?? 0} disabled={disableClip}>
+          <Spline
+            {pathData}
+            class={cls(
+              layerClass('voronoi-path'),
+              'fill-transparent stroke-transparent',
+              classes.path
+            )}
+            onclick={(e) => onclick?.(e, { data: point.data, point })}
+            onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
+            onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
+            {onpointerleave}
+            onpointerdown={(e) => onpointerdown?.(e, { data: point.data, point })}
+            ontouchmove={(e) => {
+              // Prevent touch to not interfere with pointer
+              e.preventDefault();
+            }}
+          />
+        </CircleClipPath>
       {/if}
     {/each}
   {/if}
-</g>
+</Group>

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

@@ -1,10 +1,11 @@
 import type { Without } from '../utils/types.js';
-import type { SVGAttributes } from 'svelte/elements';
 export type VoronoiPropsWithoutHTML = {
     /**
      * Override data instead of using context
      */
     data?: any;
+    /** Radius to clip voronoi cells.  `0` or `undefined` to disables clipping */
+    r?: number;
     /**
      * Classes to apply to the root and path elements
      *
@@ -35,8 +36,9 @@ export type VoronoiPropsWithoutHTML = {
         feature?: GeoPermissibleObjects;
     }) => void;
 };
-export type VoronoiProps = VoronoiPropsWithoutHTML & Without<Omit<SVGAttributes<SVGGElement>, 'children'>, VoronoiPropsWithoutHTML>;
-import type { GeoPermissibleObjects } from 'd3-geo';
+export type VoronoiProps = VoronoiPropsWithoutHTML & Without<Omit<GroupProps, 'children'>, VoronoiPropsWithoutHTML>;
+import { type GeoPermissibleObjects } from 'd3-geo';
+import { type GroupProps } from './Group.svelte';
 declare const Voronoi: import("svelte").Component<VoronoiProps, {}, "">;
 type Voronoi = ReturnType<typeof Voronoi>;
 export default Voronoi;

package/dist/components/charts/LineChart.svelte

@@ -377,7 +377,6 @@
       {@render childrenProp(snippetProps)}
     {:else}
       {@render belowContext?.(snippetProps)}
-      <!-- TODO: Always use `Svg` until `Pattern` supports `Canvas` (issue #307) -->
 
       <Layer
         type={renderContext}

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

@@ -4,7 +4,7 @@ import type { SeriesData } from './types.js';
 import type Legend from '../Legend.svelte';
 export declare class HighlightKey<TData, SeriesComponent extends Component> {
     current: string | null;
-    set(seriesKey: typeof this.current): void;
+    set: (seriesKey: typeof this.current) => void;
 }
 export declare class SeriesState<TData, TComponent extends Component> {
     #private;

package/dist/components/charts/utils.svelte.js

@@ -2,9 +2,9 @@ import { SelectionState } from '@layerstack/svelte-state';
 import { scaleOrdinal } from 'd3-scale';
 export class HighlightKey {
     current = $state(null);
-    set(seriesKey) {
+    set = (seriesKey) => {
         this.current = seriesKey;
-    }
+    };
 }
 export class SeriesState {
     #series = $state.raw([]);

package/dist/components/tooltip/TooltipContext.svelte

@@ -72,7 +72,7 @@
     locked?: boolean;
 
     /**
-     * quadtree search radius
+     * quadtree search or voronoi clip radius
      * @default Infinity
      */
     radius?: number;
@@ -116,11 +116,14 @@
 </script>
 
 <script lang="ts" generics="TData = any">
+  import type { Snippet } from 'svelte';
   import { bisector, max, min } from 'd3-array';
   import { quadtree as d3Quadtree, type Quadtree } from 'd3-quadtree';
   import { sortFunc, localPoint } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
+  import { getChartContext } from '../Chart.svelte';
+  import { getGeoContext } from '../GeoContext.svelte';
   import Svg from './../layout/Svg.svelte';
   import Arc from '../Arc.svelte';
   import ChartClipPath from './../ChartClipPath.svelte';
@@ -130,8 +133,6 @@
   import { cartesianToPolar } from '../../utils/math.js';
   import { quadtreeRects } from '../../utils/quadtree.js';
   import { raise } from '../../utils/chart.js';
-  import { getChartContext } from '../Chart.svelte';
-  import type { Snippet } from 'svelte';
   import {
     getTooltipMetaContext,
     getTooltipPayload,
@@ -140,6 +141,7 @@
   import { layerClass } from '../../utils/attributes.js';
 
   const ctx = getChartContext<any>();
+  const geoCtx = getGeoContext();
 
   let {
     ref: refProp = $bindable(),
@@ -357,7 +359,11 @@
         }
 
         case 'quadtree': {
-          tooltipData = quadtree?.find(point.x, point.y, radius);
+          tooltipData = quadtree?.find(
+            point.x - ctx.padding.left,
+            point.y - ctx.padding.top,
+            radius
+          );
           break;
         }
       }
@@ -402,11 +408,14 @@
   const quadtree: Quadtree<[number, number]> | undefined = $derived.by(() => {
     if (mode === 'quadtree') {
       return d3Quadtree()
-        .extent([
-          [0, 0],
-          [ctx.width, ctx.height],
-        ])
         .x((d) => {
+          if (geoCtx.projection) {
+            const lat = ctx.x(d);
+            const long = ctx.y(d);
+            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            return geoValue[0];
+          }
+
           const value = ctx.xGet(d);
 
           if (Array.isArray(value)) {
@@ -420,6 +429,13 @@
           }
         })
         .y((d) => {
+          if (geoCtx.projection) {
+            const lat = ctx.x(d);
+            const long = ctx.y(d);
+            const geoValue = geoCtx.projection([lat, long]) ?? [0, 0];
+            return geoValue[1];
+          }
+
           const value = ctx.yGet(d);
 
           if (Array.isArray(value)) {
@@ -546,6 +562,7 @@
     {#if mode === 'voronoi'}
       <Svg>
         <Voronoi
+          r={radius}
           onpointerenter={(e, { data }) => {
             showTooltip(e, data);
           }}

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -36,7 +36,7 @@ type TooltipContextPropsWithoutHTML<T = any> = {
      */
     locked?: boolean;
     /**
-     * quadtree search radius
+     * quadtree search or voronoi clip radius
      * @default Infinity
      */
     radius?: number;

package/package.json

@@ -4,9 +4,10 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.4",
   "devDependencies": {
     "@changesets/cli": "^2.29.2",
+    "@iconify-json/lucide": "^1.2.42",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.5",
     "@sveltejs/adapter-cloudflare": "^4.9.0",
@@ -62,6 +63,7 @@
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
     "unist-util-visit": "^5.0.0",
+    "unplugin-icons": "^22.1.0",
     "us-atlas": "^3.0.1",
     "vite": "^6.3.4",
     "vitest": "^3.1.2"