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

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { Without } from '../../utils/types.js';
+import type { RectClipPathProps } from '../RectClipPath/RectClipPath.shared.svelte.js';
+export type ChartClipPathPropsWithoutHTML = {
+    /** Include padding area (ex. axis) @default false */
+    full?: boolean;
+    /** Disable clipping (show all) @default false */
+    disabled?: boolean;
+    children?: Snippet;
+};
+export type ChartClipPathProps = ChartClipPathPropsWithoutHTML & Without<Omit<RectClipPathProps, 'width' | 'height'>, ChartClipPathPropsWithoutHTML>;

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

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

package/dist/components/ChartClipPath/ChartClipPath.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { ChartClipPathProps, ChartClipPathPropsWithoutHTML } from './ChartClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import ChartClipPathSvg from './ChartClipPath.svg.svelte';
+  import ChartClipPathCanvas from './ChartClipPath.canvas.svelte';
+  import ChartClipPathHtml from './ChartClipPath.html.svelte';
+  import type { ChartClipPathProps } from './ChartClipPath.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: ChartClipPathProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <ChartClipPathSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <ChartClipPathCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <ChartClipPathHtml {...props} />
+{/if}

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

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

package/dist/components/ChartClipPath/ChartClipPath.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { ChartClipPathProps, ChartClipPathPropsWithoutHTML } from './ChartClipPath.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ChartClipPathBase from './ChartClipPath.base.svelte';
+  import RectClipPath from '../RectClipPath/RectClipPath.svg.svelte';
+
+  import type { ChartClipPathProps } from './ChartClipPath.shared.svelte.js';
+
+  let props: ChartClipPathProps = $props();
+</script>
+
+<ChartClipPathBase {RectClipPath} {...props} />

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

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

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

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

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

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

package/dist/components/Circle/Circle.canvas.svelte

@@ -0,0 +1,128 @@
+<script lang="ts" module>
+  export type {
+    CircleProps,
+    CirclePropsWithoutHTML,
+  } from './Circle.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { merge } from '@layerstack/utils';
+  import { renderCircle, type ComputedStylesOptions } from '../../utils/canvas.js';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import { createKey } from '../../utils/key.svelte.js';
+  import {
+    CircleState,
+    circleMarkInfo,
+    type CircleProps,
+  } from './Circle.shared.svelte.js';
+
+  let { ...rest }: CircleProps = $props();
+
+  const c = new CircleState(() => rest as CircleProps);
+
+  function getStyleOptions(
+    styleOverrides: ComputedStylesOptions | undefined,
+    itemFill?: string | undefined,
+    itemStroke?: string | undefined,
+    itemFillOpacity?: number | undefined,
+    itemStrokeWidth?: number | undefined,
+    itemOpacity?: number | undefined,
+    itemClass?: string | undefined
+  ) {
+    return styleOverrides
+      ? merge(
+          {
+            styles: { strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth },
+          },
+          styleOverrides
+        )
+      : {
+          // Use raw `rest.fill` / `rest.stroke` (not `staticFill`) so canvas
+          // accepts non-string values like `CanvasPattern` / `CanvasGradient`.
+          styles: {
+            fill: itemFill ?? (rest.fill as any),
+            fillOpacity: itemFillOpacity ?? c.staticFillOpacity,
+            stroke: itemStroke ?? (rest.stroke as any),
+            strokeWidth: itemStrokeWidth ?? c.staticStrokeWidth,
+            opacity: itemOpacity ?? c.staticOpacity,
+          },
+          classes: cls('lc-circle', itemClass ?? c.staticClassName),
+          style:
+            [
+              (rest as any).style as string | undefined,
+              c.dashArrayAttr ? `stroke-dasharray: ${c.dashArrayAttr}` : undefined,
+            ]
+              .filter(Boolean)
+              .join('; ') || undefined,
+        };
+  }
+
+  function render(
+    ctx: CanvasRenderingContext2D,
+    styleOverrides: ComputedStylesOptions | undefined
+  ) {
+    if (c.dataMode) {
+      for (const item of c.resolvedItems) {
+        const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale);
+        const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale);
+        const resolvedFillOpacity = resolveStyleProp(rest.fillOpacity, item.d);
+        const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d);
+        const resolvedOpacity = resolveStyleProp(rest.opacity, item.d);
+        const resolvedClass = resolveStyleProp(rest.class, item.d);
+        const styleOpts = getStyleOptions(
+          styleOverrides,
+          resolvedFill,
+          resolvedStroke,
+          resolvedFillOpacity,
+          resolvedStrokeWidth,
+          resolvedOpacity,
+          resolvedClass
+        );
+        renderCircle(ctx, item, styleOpts);
+      }
+    } else {
+      const styleOpts = getStyleOptions(styleOverrides);
+      renderCircle(
+        ctx,
+        { cx: c.motionCx, cy: c.motionCy, r: c.motionR },
+        styleOpts
+      );
+    }
+  }
+
+  // TODO: Use objectId to work around Svelte 4 reactivity issue (even when memoizing gradients)
+  const fillKey = createKey(() => rest.fill);
+  const strokeKey = createKey(() => rest.stroke);
+
+  c.chartCtx.registerComponent({
+    name: 'Circle',
+    kind: 'mark',
+    markInfo: () => circleMarkInfo(rest as CircleProps, c.dataMode),
+    canvasRender: {
+      render,
+      events: {
+        click: (rest as any).onclick,
+        pointerdown: (rest as any).onpointerdown,
+        pointerenter: (rest as any).onpointerenter,
+        pointermove: (rest as any).onpointermove,
+        pointerleave: (rest as any).onpointerleave,
+      },
+      deps: () => [
+        c.dataMode,
+        c.dataMode ? c.resolvedItems : null,
+        c.motionCx,
+        c.motionCy,
+        c.motionR,
+        fillKey.current,
+        rest.fillOpacity,
+        strokeKey.current,
+        rest.strokeWidth,
+        rest.opacity,
+        rest.class,
+        (rest as any).style,
+        c.dashArrayAttr,
+      ],
+    },
+  });
+</script>

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

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

package/dist/components/Circle/Circle.html.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" module>
+  export type {
+    CircleProps,
+    CirclePropsWithoutHTML,
+  } from './Circle.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { resolveColorProp, resolveStyleProp } from '../../utils/dataProp.js';
+  import {
+    CircleState,
+    circleMarkInfo,
+    type CircleProps,
+  } from './Circle.shared.svelte.js';
+
+  let {
+    children,
+    ...rest
+  }: CircleProps = $props();
+
+  const c = new CircleState(() => rest as CircleProps);
+
+  // HTML-only: derive a border-width that mimics SVG's implicit `stroke-width: 1`
+  // when `stroke` is set but `strokeWidth` is not.
+  const staticBorderWidth = $derived(
+    typeof rest.strokeWidth === 'number'
+      ? `${rest.strokeWidth}px`
+      : typeof rest.stroke === 'string'
+        ? '1px'
+        : undefined
+  );
+
+  c.chartCtx.registerComponent({
+    name: 'Circle',
+    kind: 'mark',
+    markInfo: () => circleMarkInfo(rest as CircleProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item (item.key)}
+    {@const resolvedFill = resolveColorProp(rest.fill, item.d, c.chartCtx.cScale)}
+    {@const resolvedStroke = resolveColorProp(rest.stroke, item.d, c.chartCtx.cScale)}
+    {@const resolvedStrokeWidth = resolveStyleProp(rest.strokeWidth, item.d)}
+    {@const resolvedOpacity = resolveStyleProp(rest.opacity, item.d)}
+    {@const resolvedClass = resolveStyleProp(rest.class, item.d)}
+    {@const resolvedBorderWidth =
+      resolvedStrokeWidth != null
+        ? `${resolvedStrokeWidth}px`
+        : resolvedStroke != null
+          ? '1px'
+          : undefined}
+    <div
+      {...rest as any}
+      style:position="absolute"
+      style:left="{item.cx}px"
+      style:top="{item.cy}px"
+      style:width="{item.r * 2}px"
+      style:height="{item.r * 2}px"
+      style:border-radius="50%"
+      style:background={resolvedFill}
+      style:background-origin="border-box"
+      style:opacity={resolvedOpacity}
+      style:border-width={resolvedBorderWidth}
+      style:border-color={resolvedStroke}
+      style:border-style={c.dashArrayResolved ? 'dashed' : 'solid'}
+      style:transform="translate(-50%, -50%)"
+      class={cls('lc-circle', resolvedClass)}
+    ></div>
+  {/each}
+{:else}
+  <div
+    {...rest as any}
+    style:position="absolute"
+    style:left="{c.motionCx}px"
+    style:top="{c.motionCy}px"
+    style:width="{c.motionR * 2}px"
+    style:height="{c.motionR * 2}px"
+    style:border-radius="50%"
+    style:background={c.staticFill}
+    style:background-origin="border-box"
+    style:opacity={c.staticOpacity}
+    style:border-width={staticBorderWidth}
+    style:border-color={c.staticStroke}
+    style:border-style={c.dashArrayResolved ? 'dashed' : 'solid'}
+    style:transform="translate(-50%, -50%)"
+    class={cls('lc-circle', c.staticClassName)}
+  >
+    {@render children?.()}
+  </div>
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-circle)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-circle)) {
+      /* Match SVG sizing (visual extent equals `r * 2`, border on outer edge) */
+      box-sizing: border-box;
+    }
+    :global(:where(.lc-layout-html .lc-circle):not([background])) {
+      background: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-circle):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

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

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

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

@@ -1,6 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { Without } from '../utils/types.js';
-import type { DataProp, DataDrivenStyleProps } from '../utils/dataProp.js';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { DataProp, DataDrivenStyleProps } from '../../utils/dataProp.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GeoState } from '../../states/geo.svelte.js';
 export type CirclePropsWithoutHTML = {
     /**
      * The center x position of the circle.
@@ -76,8 +80,63 @@ export type CirclePropsWithoutHTML = {
     children?: Snippet;
 } & DataDrivenStyleProps;
 export type CircleProps = CirclePropsWithoutHTML & Without<SVGAttributes<Element>, CirclePropsWithoutHTML>;
-import { type MotionProp } from '../utils/motion.svelte.js';
-import type { SVGAttributes } from 'svelte/elements';
-declare const Circle: import("svelte").Component<CircleProps, {}, "ref">;
-type Circle = ReturnType<typeof Circle>;
-export default Circle;
+/**
+ * Resolve the cx/cy/r values for a single data item, going through
+ * either the geo projection or the chart's x/y/r scales.
+ */
+export declare function resolveCircle(d: any, props: {
+    cx?: DataProp;
+    cy?: DataProp;
+    r?: DataProp;
+}, chartCtx: ChartState, geo: GeoState): {
+    cx: number;
+    cy: number;
+    r: number;
+};
+/**
+ * Reactive state shared by every per-layer Circle variant. Instantiate from
+ * each `Circle.svg.svelte` / `Circle.canvas.svelte` / `Circle.html.svelte`
+ * component setup, passing a getter for the props. Exposes the derived
+ * computations + motion sources every layer needs.
+ *
+ * Per-layer specific bits (e.g. SVG's `bind:this` ref, HTML's
+ * `staticBorderWidth`, canvas's `render` function and canvas registration)
+ * stay in their respective `.svelte` files.
+ */
+export declare class CircleState {
+    #private;
+    chartCtx: ChartState<unknown, import("../../index.js").AnyScale, import("../../index.js").AnyScale>;
+    geo: GeoState;
+    dashArrayResolved: number[] | null;
+    dashArrayAttr: string | undefined;
+    dataMode: boolean;
+    resolvedItems: {
+        d: any;
+        key: any;
+        cx: number;
+        cy: number;
+        r: number;
+    }[];
+    staticFill: string | undefined;
+    staticFillOpacity: number | undefined;
+    staticStroke: string | undefined;
+    staticStrokeWidth: number | undefined;
+    staticOpacity: number | undefined;
+    staticClassName: string | undefined;
+    constructor(getProps: () => CircleProps);
+    get motionCx(): any;
+    get motionCy(): any;
+    get motionR(): any;
+}
+/** Build the standard `markInfo` payload used by every Circle variant. */
+export declare function circleMarkInfo(props: CircleProps, dataMode: boolean): {
+    data?: undefined;
+    x?: undefined;
+    y?: undefined;
+    color?: undefined;
+} | {
+    data: any[] | undefined;
+    x: string | undefined;
+    y: string | undefined;
+    color: string | undefined;
+};

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

@@ -0,0 +1,138 @@
+import { untrack } from 'svelte';
+import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair, } from '../../utils/dataProp.js';
+import { chartDataArray } from '../../utils/common.js';
+import { parseDashArray } from '../../utils/path.js';
+import { createMotion, createDataMotionMap } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { getGeoContext } from '../../contexts/geo.js';
+const defaultKey = (_, i) => i;
+/**
+ * Resolve the cx/cy/r values for a single data item, going through
+ * either the geo projection or the chart's x/y/r scales.
+ */
+export function resolveCircle(d, props, chartCtx, geo) {
+    if (geo.projection) {
+        const [projX, projY] = resolveGeoDataPair(props.cx, props.cy, d, geo.projection);
+        return {
+            cx: projX,
+            cy: projY,
+            r: resolveDataProp(props.r, d, chartCtx.rScale, typeof props.r === 'number' ? props.r : 1),
+        };
+    }
+    return {
+        cx: resolveDataProp(props.cx, d, chartCtx.xScale, 0),
+        cy: resolveDataProp(props.cy, d, chartCtx.yScale, 0),
+        r: resolveDataProp(props.r, d, chartCtx.rScale, typeof props.r === 'number' ? props.r : 1),
+    };
+}
+/**
+ * Reactive state shared by every per-layer Circle variant. Instantiate from
+ * each `Circle.svg.svelte` / `Circle.canvas.svelte` / `Circle.html.svelte`
+ * component setup, passing a getter for the props. Exposes the derived
+ * computations + motion sources every layer needs.
+ *
+ * Per-layer specific bits (e.g. SVG's `bind:this` ref, HTML's
+ * `staticBorderWidth`, canvas's `render` function and canvas registration)
+ * stay in their respective `.svelte` files.
+ */
+export class CircleState {
+    // Default initializer so derived class fields below can safely call this
+    // before the constructor body sets the real getter.
+    #getProps = () => ({});
+    // Contexts (must be read inside a Svelte component setup, which is where
+    // CircleState is instantiated).
+    chartCtx = getChartContext();
+    geo = getGeoContext();
+    // Reactive derivations
+    dashArrayResolved = $derived(parseDashArray(this.#getProps().dashArray));
+    dashArrayAttr = $derived(this.dashArrayResolved ? this.dashArrayResolved.join(' ') : undefined);
+    dataMode = $derived(hasAnyDataProp(this.#getProps().cx, this.#getProps().cy, this.#getProps().r));
+    #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
+    // Per-key motion tracking (only created when motion is configured)
+    #dataMotionMap = null;
+    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 = resolveCircle(d, props, this.chartCtx, this.geo);
+            const animated = this.#dataMotionMap?.get(key);
+            return {
+                d,
+                key,
+                cx: animated?.cx ?? resolved.cx,
+                cy: animated?.cy ?? resolved.cy,
+                r: animated?.r ?? resolved.r,
+            };
+        });
+    });
+    // Pixel-mode motion sources. Initial values are captured at construction;
+    // subsequent updates come from the prop getters.
+    #motionCx;
+    #motionCy;
+    #motionR;
+    // Static (non-data-driven) values used by SVG/HTML branches in pixel mode.
+    staticFill = $derived(typeof this.#getProps().fill === 'string' ? this.#getProps().fill : undefined);
+    staticFillOpacity = $derived(typeof this.#getProps().fillOpacity === 'number'
+        ? this.#getProps().fillOpacity
+        : undefined);
+    staticStroke = $derived(typeof this.#getProps().stroke === 'string' ? this.#getProps().stroke : undefined);
+    staticStrokeWidth = $derived(typeof this.#getProps().strokeWidth === 'number'
+        ? this.#getProps().strokeWidth
+        : undefined);
+    staticOpacity = $derived(typeof this.#getProps().opacity === 'number'
+        ? this.#getProps().opacity
+        : undefined);
+    staticClassName = $derived(typeof this.#getProps().class === 'string' ? this.#getProps().class : undefined);
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        const initialCx = initial.initialCx ?? (typeof initial.cx === 'number' ? initial.cx : 0);
+        const initialCy = initial.initialCy ?? (typeof initial.cy === 'number' ? initial.cy : 0);
+        const initialR = initial.initialR ?? (typeof initial.r === 'number' ? initial.r : 1);
+        this.#motionCx = createMotion(initialCx, () => (typeof getProps().cx === 'number' ? getProps().cx : 0), initial.motion);
+        this.#motionCy = createMotion(initialCy, () => (typeof getProps().cy === 'number' ? getProps().cy : 0), initial.motion);
+        this.#motionR = createMotion(initialR, () => (typeof getProps().r === 'number' ? getProps().r : 1), 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 = resolveCircle(d, props, this.chartCtx, this.geo);
+                    untrack(() => motionMap.update(key, resolved));
+                }
+                untrack(() => motionMap.cleanup(activeKeys));
+            });
+        }
+    }
+    get motionCx() {
+        return this.#motionCx.current;
+    }
+    get motionCy() {
+        return this.#motionCy.current;
+    }
+    get motionR() {
+        return this.#motionR.current;
+    }
+}
+/** Build the standard `markInfo` payload used by every Circle variant. */
+export function circleMarkInfo(props, dataMode) {
+    if (!dataMode)
+        return {};
+    return {
+        data: props.data,
+        x: typeof props.cx === 'string' ? props.cx : undefined,
+        y: typeof props.cy === 'string' ? props.cy : undefined,
+        color: typeof props.fill === 'string' ? props.fill : undefined,
+    };
+}

package/dist/components/Circle/Circle.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  // Re-export types from the shared module so existing
+  // `import type { CircleProps } from '../../index.js'` keeps working.
+  export type {
+    CircleProps,
+    CirclePropsWithoutHTML,
+  } from './Circle.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import CircleSvg from './Circle.svg.svelte';
+  import CircleCanvas from './Circle.canvas.svelte';
+  import CircleHtml from './Circle.html.svelte';
+  import type { CircleProps } from './Circle.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: CircleProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <CircleSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <CircleCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <CircleHtml {...props} />
+{/if}

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

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

package/dist/components/Circle/Circle.svelte.test.d.ts

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

package/dist/components/{Circle.svelte.test.js → Circle/Circle.svelte.test.js}

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
-import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import TestHarness, { componentTestId } from '../tests/TestHarness.svelte';
 import Circle from './Circle.svelte';
 describe('Circle', () => {
     describe('pixel mode', () => {