layerchart 2.0.0-next.6 → 2.0.0-next.61

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

@@ -0,0 +1,103 @@
+import { fade } from 'svelte/transition';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Transition, TransitionParams, Without } from '../../utils/types.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import { type TicksConfig } from '../../utils/ticks.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GroupProps } from '../Group/Group.shared.svelte.js';
+/** Props forwarded onto the underlying grid line (`<Line>`, `<Circle>`, or `<Spline>`). */
+export type GridLineProps = Pick<SVGAttributes<SVGElement>, 'class' | 'style'> & {
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    /** Dashed-line pattern. See `Line.dashArray`. */
+    dashArray?: number | number[] | string;
+};
+export type GridPropsWithoutHTML<In extends Transition = Transition> = {
+    /**
+     * Draw a x-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
+     *
+     * @default false
+     */
+    x?: boolean | GridLineProps;
+    /**
+     * Draw a y-axis lines. Pass props (class, style, stroke, strokeWidth,
+     * opacity, dashArray) to forward onto the underlying line.
+     *
+     * @default false
+     */
+    y?: boolean | GridLineProps;
+    /**
+     * Control the number of x-axis ticks
+     */
+    xTicks?: TicksConfig;
+    /**
+     * Control the number of y-axis ticks
+     *
+     * @default !isScaleBand(ctx.yScale) ? 4 : undefined
+     */
+    yTicks?: TicksConfig;
+    /**
+     * Line alignment when band scale is used (x or y axis)
+     *
+     * @default 'center'
+     */
+    bandAlign?: 'center' | 'between';
+    /**
+     * Render `y` lines with circles or linear splines
+     *
+     * @default 'circle'
+     */
+    radialY?: 'circle' | 'linear';
+    /**
+     * Stroke color for grid lines.
+     * Useful for server-side rendering where CSS variables are not available.
+     */
+    stroke?: string;
+    /**
+     * Classes to apply to the rendered elements.
+     *
+     * @default {}
+     */
+    classes?: {
+        root?: string;
+        line?: string;
+    };
+    /**
+     * Transition function for entering elements
+     * @default  defaults to fade if motion is tweened
+     */
+    transitionIn?: In;
+    /**
+     * Parameters for the transitionIn function
+     * @default { easing: cubicIn }
+     */
+    transitionInParams?: TransitionParams<In>;
+    /**
+     * A reference to the underlying outermost `<g>` element.
+     *
+     * @bindable
+     */
+    ref?: SVGGElement;
+    motion?: MotionProp;
+};
+export type GridProps<In extends Transition = Transition> = Omit<GridPropsWithoutHTML<In> & Without<GroupProps, GridPropsWithoutHTML<In>>, 'children'>;
+/**
+ * Reactive state shared by every per-layer Grid variant.
+ */
+export declare class GridState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => GridProps);
+    yTicks: number | any[] | ((scale: import("../../utils/scales.svelte.js").AnyScale) => any[] | undefined) | {
+        interval: import("d3-time").TimeInterval | null;
+    } | undefined;
+    tweenConfig: import("../../utils/motion.svelte.js").ResolvedTween | undefined;
+    defaultTransitionIn: typeof fade | (() => {});
+    defaultTransitionInParams: TransitionParams<Transition>;
+    xTickVals: any[];
+    yTickVals: any[];
+    xBandOffset: number;
+    yBandOffset: number;
+}

package/dist/components/Grid/Grid.shared.svelte.js

@@ -0,0 +1,40 @@
+import { fade } from 'svelte/transition';
+import { cubicIn } from 'svelte/easing';
+import { extractTweenConfig } from '../../utils/motion.svelte.js';
+import { isScaleBand } from '../../utils/scales.svelte.js';
+import { autoTickVals } from '../../utils/ticks.js';
+import { getChartContext } from '../../contexts/chart.js';
+/**
+ * Reactive state shared by every per-layer Grid variant.
+ */
+export class GridState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    constructor(getProps) {
+        this.#getProps = getProps;
+        // Mark as composite so child Splines (radial grid) don't register
+        this.ctx.registerComponent({ name: 'Grid', kind: 'composite-mark' });
+    }
+    yTicks = $derived(this.#getProps().yTicks ?? (!isScaleBand(this.ctx.yScale) ? 4 : undefined));
+    tweenConfig = $derived(extractTweenConfig(this.#getProps().motion));
+    defaultTransitionIn = $derived((this.#getProps().transitionIn ?? this.tweenConfig?.options) ? fade : () => ({}));
+    defaultTransitionInParams = { easing: cubicIn };
+    xTickVals = $derived(autoTickVals(this.ctx.xScale, this.#getProps().xTicks));
+    yTickVals = $derived(autoTickVals(this.ctx.yScale, this.yTicks));
+    xBandOffset = $derived.by(() => {
+        const bandAlign = this.#getProps().bandAlign ?? 'center';
+        if (!isScaleBand(this.ctx.xScale))
+            return 0;
+        return bandAlign === 'between'
+            ? -(this.ctx.xScale.padding() * this.ctx.xScale.step()) / 2
+            : this.ctx.xScale.step() / 2 - (this.ctx.xScale.padding() * this.ctx.xScale.step()) / 2;
+    });
+    yBandOffset = $derived.by(() => {
+        const bandAlign = this.#getProps().bandAlign ?? 'center';
+        if (!isScaleBand(this.ctx.yScale))
+            return 0;
+        return bandAlign === 'between'
+            ? -(this.ctx.yScale.padding() * this.ctx.yScale.step()) / 2
+            : this.ctx.yScale.step() / 2 - (this.ctx.yScale.padding() * this.ctx.yScale.step()) / 2;
+    });
+}

package/dist/components/Grid/Grid.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  export type { GridProps, GridPropsWithoutHTML } from './Grid.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T extends Transition = Transition">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import GridSvg from './Grid.svg.svelte';
+  import GridCanvas from './Grid.canvas.svelte';
+  import GridHtml from './Grid.html.svelte';
+  import type { GridProps } from './Grid.shared.svelte.js';
+  import type { Transition } from '../../utils/types.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: GridProps<T> = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <GridSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <GridCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <GridHtml {...props} />
+{/if}

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

@@ -0,0 +1,27 @@
+export type { GridProps, GridPropsWithoutHTML } from './Grid.shared.svelte.js';
+import type { GridProps } from './Grid.shared.svelte.js';
+import type { Transition } from '../../utils/types.js';
+declare function $$render<T extends Transition = Transition>(): {
+    props: GridProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Transition = Transition> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    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 Grid: $$IsomorphicComponent;
+type Grid<T extends Transition = Transition> = InstanceType<typeof Grid<T>>;
+export default Grid;

package/dist/components/Grid/Grid.svg.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  export type { GridProps, GridPropsWithoutHTML } from './Grid.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T extends Transition = Transition">
+  import GridBase from './Grid.base.svelte';
+  import Group from '../Group/Group.svg.svelte';
+  import Line from '../Line/Line.svg.svelte';
+  import Circle from '../Circle/Circle.svg.svelte';
+  import Rule from '../Rule/Rule.svg.svelte';
+
+  import type { Transition } from '../../utils/types.js';
+  import type { GridProps } from './Grid.shared.svelte.js';
+
+  let props: GridProps<T> = $props();
+</script>
+
+<GridBase {Group} {Line} {Circle} {Rule} {...props} />

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

@@ -0,0 +1,27 @@
+export type { GridProps, GridPropsWithoutHTML } from './Grid.shared.svelte.js';
+import type { Transition } from '../../utils/types.js';
+import type { GridProps } from './Grid.shared.svelte.js';
+declare function $$render<T extends Transition = Transition>(): {
+    props: GridProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Transition = Transition> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    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 Grid: $$IsomorphicComponent;
+type Grid<T extends Transition = Transition> = InstanceType<typeof Grid<T>>;
+export default Grid;

package/dist/components/Group/Group.canvas.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  export type {
+    GroupProps,
+    GroupPropsWithoutHTML,
+  } from './Group.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { GroupState, type GroupProps } from './Group.shared.svelte.js';
+
+  let { children, ...rest }: GroupProps = $props();
+
+  const c = new GroupState(() => ({ children, ...rest }) as GroupProps);
+
+  c.chartCtx.registerComponent({
+    name: 'Group',
+    kind: 'group',
+    canvasRender: {
+      render: (ctx) => {
+        ctx.translate(c.motionX ?? 0, c.motionY ?? 0);
+        if (rest.opacity != null) {
+          ctx.globalAlpha *= rest.opacity;
+        }
+      },
+      events: {
+        click: (rest as any).onclick,
+        dblclick: (rest as any).ondblclick,
+        pointerenter: (rest as any).onpointerenter,
+        pointermove: (rest as any).onpointermove,
+        pointerleave: (rest as any).onpointerleave,
+        pointerdown: (rest as any).onpointerdown,
+      },
+      deps: () => [c.motionX, c.motionY, rest.opacity],
+    },
+  });
+</script>
+
+{@render children?.()}

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

@@ -0,0 +1,5 @@
+export type { GroupProps, GroupPropsWithoutHTML, } from './Group.shared.svelte.js';
+import { type GroupProps } from './Group.shared.svelte.js';
+declare const Group: import("svelte").Component<GroupProps, {}, "">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/components/Group/Group.html.svelte

@@ -0,0 +1,100 @@
+<script lang="ts" module>
+  export type {
+    GroupProps,
+    GroupPropsWithoutHTML,
+  } from './Group.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T extends import('../../utils/types.js').Transition = import('../../utils/types.js').Transition">
+  import type { TouchEventHandler } from 'svelte/elements';
+  import { GroupState, type GroupProps } from './Group.shared.svelte.js';
+
+  let {
+    preventTouchMove = false,
+    transitionIn: transitionInProp,
+    transitionInParams: transitionInParamsProp,
+    class: className,
+    children,
+    ref: refProp = $bindable(),
+    // Internal-only: pulled out so `{...rest}` doesn't pollute DOM attrs.
+    x,
+    y,
+    initialX,
+    initialY,
+    data,
+    key,
+    center,
+    motion,
+    ...rest
+  }: GroupProps<T> = $props();
+
+  const c = new GroupState(
+    () =>
+      ({
+        preventTouchMove,
+        transitionIn: transitionInProp,
+        transitionInParams: transitionInParamsProp,
+        class: className,
+        children,
+        x,
+        y,
+        initialX,
+        initialY,
+        data,
+        key,
+        center,
+        motion,
+        ...rest,
+      }) as GroupProps
+  );
+
+  let ref = $state<Element>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  const transitionIn = $derived(transitionInProp ?? c.defaultTransitionIn) as T;
+  const transitionInParams = $derived(transitionInParamsProp ?? c.defaultTransitionInParams);
+
+  const handleTouchMove: TouchEventHandler<Element> = (e) => {
+    if (preventTouchMove) {
+      e.preventDefault();
+    }
+    (rest as any).ontouchmove?.(e);
+  };
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item (item.key)}
+    <div
+      style:transform="translate({item.x}px, {item.y}px)"
+      style:opacity={rest.opacity}
+      {...rest}
+      class={['lc-group-div', className]}
+      ontouchmove={handleTouchMove}
+    >
+      {@render children?.()}
+    </div>
+  {/each}
+{:else}
+  <div
+    bind:this={ref}
+    style:transform={c.transform}
+    style:opacity={rest.opacity}
+    in:transitionIn={transitionInParams}
+    {...rest}
+    class={['lc-group-div', className]}
+    ontouchmove={handleTouchMove}
+  >
+    {@render children?.()}
+  </div>
+{/if}
+
+<style>
+  @layer base {
+    :where(.lc-group-div) {
+      position: absolute;
+    }
+  }
+</style>

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

@@ -0,0 +1,26 @@
+export type { GroupProps, GroupPropsWithoutHTML, } from './Group.shared.svelte.js';
+import { type GroupProps } from './Group.shared.svelte.js';
+declare function $$render<T extends import('../../utils/types.js').Transition = import('../../utils/types.js').Transition>(): {
+    props: GroupProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends import('../../utils/types.js').Transition = import('../../utils/types.js').Transition> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends import('../../utils/types.js').Transition = import('../../utils/types.js').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 import('../../utils/types.js').Transition = import('../../utils/types.js').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 import('../../utils/types.js').Transition = import('../../utils/types.js').Transition> = InstanceType<typeof Group<T>>;
+export default Group;

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

@@ -0,0 +1,91 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Transition, TransitionParams, Without } from '../../utils/types.js';
+import type { DataProp } from '../../utils/dataProp.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import { fade } from 'svelte/transition';
+import { cubicIn } from 'svelte/easing';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GeoState } from '../../states/geo.svelte.js';
+export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
+    /**
+     * Translate x position of the group.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via xScale
+     * - `function(d)`: accessor called per data item, result passed through xScale
+     */
+    x?: DataProp;
+    /** Initial translate x (pixel mode only). @default x */
+    initialX?: number;
+    /**
+     * Translate y position of the group.
+     * - `number`: pixel value (direct)
+     * - `string`: data property name, resolved via yScale
+     * - `function(d)`: accessor called per data item, result passed through yScale
+     */
+    y?: DataProp;
+    /** Initial translate y (pixel mode only). @default y */
+    initialY?: number;
+    /**
+     * Data array to iterate over in data mode.
+     * Falls back to chart context data when not provided.
+     */
+    data?: any[];
+    /**
+     * Key function for keyed {#each} rendering in data mode.
+     *
+     * @default (d, i) => i
+     */
+    key?: (d: any, index: number) => any;
+    /** Center within chart. @default false */
+    center?: boolean | 'x' | 'y';
+    /**
+     * Prevent `touchmove` default, which can interfere with `pointermove` when
+     * used with `Tooltip`, for example.
+     *
+     * @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
+     * either nothing, a `<g>` element (when using `<Svg>`), or a `<div>` element
+     * (when using `<Html>`).
+     *
+     * @bindable
+     */
+    ref?: Element;
+    motion?: MotionProp;
+    /** Transition function for entering elements @default fade if motion is tweened */
+    transitionIn?: In;
+    /** Parameters for the transitionIn function @default { easing: cubicIn } */
+    transitionInParams?: TransitionParams<In>;
+};
+export type GroupProps<In extends Transition = Transition> = GroupPropsWithoutHTML<In> & Without<HTMLAttributes<Element>, GroupPropsWithoutHTML<In>>;
+/**
+ * Reactive state shared by every per-layer Group variant.
+ */
+export declare class GroupState {
+    #private;
+    chartCtx: ChartState;
+    geo: GeoState;
+    dataMode: boolean;
+    resolvedItems: {
+        d: any;
+        key: any;
+        x: number;
+        y: number;
+    }[];
+    trueX: number;
+    trueY: number;
+    get motionX(): any;
+    get motionY(): any;
+    transform: string | undefined;
+    defaultTransitionIn: typeof fade | (() => {});
+    defaultTransitionInParams: {
+        easing: typeof cubicIn;
+    };
+    constructor(getProps: () => GroupProps);
+}

package/dist/components/Group/Group.shared.svelte.js

@@ -0,0 +1,112 @@
+import { untrack } from 'svelte';
+import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair, } from '../../utils/dataProp.js';
+import { chartDataArray } from '../../utils/common.js';
+import { createMotion, createDataMotionMap, extractTweenConfig, } from '../../utils/motion.svelte.js';
+import { fade } from 'svelte/transition';
+import { cubicIn } from 'svelte/easing';
+import { getChartContext } from '../../contexts/chart.js';
+import { getGeoContext } from '../../contexts/geo.js';
+const defaultKey = (_, i) => i;
+/**
+ * Reactive state shared by every per-layer Group variant.
+ */
+export class GroupState {
+    #getProps = () => ({});
+    chartCtx = getChartContext();
+    geo = getGeoContext();
+    // Data mode detection
+    dataMode = $derived(hasAnyDataProp(this.#getProps().x, this.#getProps().y));
+    #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
+    resolvedItems = $derived.by(() => {
+        if (!this.dataMode)
+            return [];
+        const props = this.#getProps();
+        const keyFn = props.key ?? defaultKey;
+        return this.#resolvedData.map((d, i) => {
+            const key = keyFn(d, i);
+            const resolved = this.#resolveGroup(d);
+            const animated = this.#dataMotionMap?.get(key);
+            return {
+                d,
+                key,
+                x: animated?.x ?? resolved.x,
+                y: animated?.y ?? resolved.y,
+            };
+        });
+    });
+    #resolveGroup(d) {
+        const props = this.#getProps();
+        if (this.geo.projection) {
+            const [projX, projY] = resolveGeoDataPair(props.x, props.y, d, this.geo.projection);
+            return { x: projX, y: projY };
+        }
+        return {
+            x: resolveDataProp(props.x, d, this.chartCtx.xScale, 0),
+            y: resolveDataProp(props.y, d, this.chartCtx.yScale, 0),
+        };
+    }
+    // Pixel-mode position (with center support)
+    trueX = $derived.by(() => {
+        const props = this.#getProps();
+        if (typeof props.x === 'number')
+            return props.x;
+        if (props.x == null && (props.center === 'x' || props.center === true))
+            return this.chartCtx.width / 2;
+        return 0;
+    });
+    trueY = $derived.by(() => {
+        const props = this.#getProps();
+        if (typeof props.y === 'number')
+            return props.y;
+        if (props.y == null && (props.center === 'y' || props.center === true))
+            return this.chartCtx.height / 2;
+        return 0;
+    });
+    #dataMotionMap = null;
+    #motionX;
+    #motionY;
+    get motionX() {
+        return this.#motionX.current;
+    }
+    get motionY() {
+        return this.#motionY.current;
+    }
+    // Transform string for SVG/HTML pixel mode
+    transform = $derived.by(() => {
+        const props = this.#getProps();
+        if (props.center || props.x != null || props.y != null) {
+            return `translate(${this.motionX}px, ${this.motionY}px)`;
+        }
+        return undefined;
+    });
+    // Default transition (fade when motion is tweened)
+    defaultTransitionIn = $derived(extractTweenConfig(this.#getProps().motion)?.options ? fade : () => ({}));
+    defaultTransitionInParams = { easing: cubicIn };
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        const initialX = initial.initialX ?? (typeof initial.x === 'number' ? initial.x : undefined);
+        const initialY = initial.initialY ?? (typeof initial.y === 'number' ? initial.y : undefined);
+        this.#motionX = createMotion(initialX, () => this.trueX, initial.motion);
+        this.#motionY = createMotion(initialY, () => this.trueY, initial.motion);
+        this.#dataMotionMap = createDataMotionMap(initial.motion);
+        if (this.#dataMotionMap) {
+            const motionMap = this.#dataMotionMap;
+            $effect(() => {
+                if (!this.dataMode)
+                    return;
+                const props = getProps();
+                const keyFn = props.key ?? defaultKey;
+                const activeKeys = new Set();
+                for (let i = 0; i < this.#resolvedData.length; i++) {
+                    const d = this.#resolvedData[i];
+                    const key = keyFn(d, i);
+                    activeKeys.add(key);
+                    const resolved = this.#resolveGroup(d);
+                    untrack(() => motionMap.update(key, resolved));
+                }
+                untrack(() => motionMap.cleanup(activeKeys));
+            });
+        }
+    }
+}

package/dist/components/Group/Group.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  export type {
+    GroupProps,
+    GroupPropsWithoutHTML,
+  } from './Group.shared.svelte.js';
+</script>
+
+<script lang="ts" generics="T extends import('../../utils/types.js').Transition = import('../../utils/types.js').Transition">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import GroupSvg from './Group.svg.svelte';
+  import GroupCanvas from './Group.canvas.svelte';
+  import GroupHtml from './Group.html.svelte';
+  import type { GroupProps } from './Group.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let { ref = $bindable(), ...rest }: GroupProps<T> = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <GroupSvg bind:ref {...rest} />
+{:else if layerCtx === 'canvas'}
+  <GroupCanvas {...rest} />
+{:else if layerCtx === 'html'}
+  <GroupHtml bind:ref {...rest} />
+{/if}