layerchart 2.0.0-next.60 → 2.0.0-next.62

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

@@ -0,0 +1,392 @@
+import { max, min } from 'd3-array';
+import { pointRadial } from 'd3-shape';
+import { notNull } from '@layerstack/utils';
+import { accessor } from '../../utils/common.js';
+import { isScaleBand, isScaleTime } from '../../utils/scales.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+/**
+ * Reactive state shared by every per-layer Highlight variant. Holds the
+ * derived `lines`, `area`, and `points` arrays the template renders, plus
+ * helpers like `axis` and `getPointRadius`.
+ */
+export class HighlightState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    constructor(getProps) {
+        this.#getProps = getProps;
+    }
+    x = $derived(accessor(this.#getProps().x ?? this.ctx.x));
+    y = $derived(accessor(this.#getProps().y ?? this.ctx.y));
+    highlightData = $derived(this.#getProps().data ?? this.ctx.tooltip.data);
+    xValue = $derived(this.x(this.highlightData));
+    xCoord = $derived(Array.isArray(this.xValue)
+        ? this.xValue.map((v) => this.ctx.xScale(v))
+        : this.ctx.xScale(this.xValue));
+    xOffset = $derived(isScaleBand(this.ctx.xScale) && !this.ctx.radial ? this.ctx.xScale.bandwidth() / 2 : 0);
+    xCoordScalar = $derived(Array.isArray(this.xCoord)
+        ? (this.xCoord[0] + this.xCoord[this.xCoord.length - 1]) / 2
+        : this.xCoord);
+    yValue = $derived(this.y(this.highlightData));
+    yCoord = $derived(Array.isArray(this.yValue)
+        ? this.yValue.map((v) => this.ctx.yScale(v))
+        : this.ctx.yScale(this.yValue));
+    yOffset = $derived(isScaleBand(this.ctx.yScale) && !this.ctx.radial ? this.ctx.yScale.bandwidth() / 2 : 0);
+    yCoordScalar = $derived(Array.isArray(this.yCoord)
+        ? (this.yCoord[0] + this.yCoord[this.yCoord.length - 1]) / 2
+        : this.yCoord);
+    axis = $derived.by(() => {
+        const axisProp = this.#getProps().axis;
+        return axisProp == null
+            ? isScaleBand(this.ctx.yScale) || isScaleTime(this.ctx.yScale) || this.ctx.valueAxis === 'x'
+                ? 'y'
+                : 'x'
+            : axisProp;
+    });
+    /** Resolve radius for a data item using the chart's rScale */
+    getPointRadius(d) {
+        const rProp = this.#getProps().r;
+        if (!rProp || !d)
+            return undefined;
+        if (rProp === true) {
+            return this.ctx.config.r ? this.ctx.rGet(d) : undefined;
+        }
+        const value = accessor(rProp)(d);
+        return value != null ? this.ctx.rScale(value) : undefined;
+    }
+    lines = $derived.by(() => {
+        let tmpLines = [];
+        if (!this.highlightData)
+            return tmpLines;
+        const axis = this.axis;
+        if (axis === 'x' || axis === 'both') {
+            if (Array.isArray(this.xCoord)) {
+                tmpLines = [
+                    ...tmpLines,
+                    ...this.xCoord.filter(notNull).map((xItem) => ({
+                        x1: xItem + this.xOffset,
+                        y1: min(this.ctx.yRange),
+                        x2: xItem + this.xOffset,
+                        y2: max(this.ctx.yRange),
+                    })),
+                ];
+            }
+            else if (this.xCoord != null) {
+                tmpLines = [
+                    ...tmpLines,
+                    {
+                        x1: this.xCoord + this.xOffset,
+                        y1: min(this.ctx.yRange),
+                        x2: this.xCoord + this.xOffset,
+                        y2: max(this.ctx.yRange),
+                    },
+                ];
+            }
+        }
+        if (axis === 'y' || axis === 'both') {
+            if (Array.isArray(this.yCoord)) {
+                tmpLines = [
+                    ...tmpLines,
+                    ...this.yCoord.filter(notNull).map((yItem) => ({
+                        x1: min(this.ctx.xRange),
+                        y1: yItem + this.yOffset,
+                        x2: max(this.ctx.xRange),
+                        y2: yItem + this.yOffset,
+                    })),
+                ];
+            }
+            else if (this.yCoord != null) {
+                tmpLines = [
+                    ...tmpLines,
+                    {
+                        x1: min(this.ctx.xRange),
+                        y1: this.yCoord + this.yOffset,
+                        x2: max(this.ctx.xRange),
+                        y2: this.yCoord + this.yOffset,
+                    },
+                ];
+            }
+        }
+        if (this.ctx.radial) {
+            tmpLines = tmpLines.map((l) => {
+                const [x1, y1] = pointRadial(l.x1, l.y1);
+                const [x2, y2] = pointRadial(l.x2, l.y2);
+                return { ...l, x1, y1, x2, y2 };
+            });
+        }
+        return tmpLines;
+    });
+    area = $derived.by(() => {
+        const tmpArea = { x: 0, y: 0, width: 0, height: 0 };
+        if (!this.highlightData)
+            return tmpArea;
+        const axis = this.axis;
+        if (axis === 'x' || axis === 'both') {
+            if (Array.isArray(this.xCoord)) {
+                tmpArea.x = min(this.xCoord);
+                tmpArea.width = (max(this.xCoord) - min(this.xCoord));
+            }
+            else if (isScaleBand(this.ctx.xScale)) {
+                tmpArea.x =
+                    this.xCoord - (this.ctx.xScale.padding() * this.ctx.xScale.step()) / 2;
+                tmpArea.width = this.ctx.xScale.step();
+            }
+            else if (this.ctx.xInterval) {
+                const start = this.ctx.xInterval.floor(this.xValue);
+                const end = this.ctx.xInterval.offset(start);
+                const xStart = this.ctx.xScale(start);
+                const xEnd = this.ctx.xScale(end);
+                tmpArea.x = Math.min(xStart, xEnd);
+                tmpArea.width = Math.abs(xEnd - xStart);
+            }
+            else {
+                const index = this.ctx.flatData.findIndex((d) => Number(this.x(d)) === Number(this.x(this.highlightData)));
+                const isLastPoint = index + 1 === this.ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                    ? max(this.ctx.xDomain)
+                    : this.x(this.ctx.flatData[index + 1]);
+                tmpArea.x = this.xCoord;
+                tmpArea.width = (this.ctx.xScale(nextDataPoint) ?? 0) - (this.xCoord ?? 0);
+            }
+            if (axis === 'x') {
+                tmpArea.y = min(this.ctx.yRange);
+                tmpArea.height = (max(this.ctx.yRange) - min(this.ctx.yRange));
+            }
+        }
+        if (axis === 'y' || axis === 'both') {
+            if (Array.isArray(this.yCoord)) {
+                tmpArea.y = min(this.yCoord);
+                tmpArea.height = (max(this.yCoord) - min(this.yCoord));
+            }
+            else if (isScaleBand(this.ctx.yScale)) {
+                tmpArea.y =
+                    this.yCoord - (this.ctx.yScale.padding() * this.ctx.yScale.step()) / 2;
+                tmpArea.height = this.ctx.yScale.step();
+            }
+            else if (this.ctx.yInterval) {
+                const start = this.ctx.yInterval.floor(this.yValue);
+                const end = this.ctx.yInterval.offset(start);
+                const yStart = this.ctx.yScale(start);
+                const yEnd = this.ctx.yScale(end);
+                tmpArea.y = Math.min(yStart, yEnd);
+                tmpArea.height = Math.abs(yEnd - yStart);
+            }
+            else {
+                const index = this.ctx.flatData.findIndex((d) => Number(this.y(d)) === Number(this.y(this.highlightData)));
+                const isLastPoint = index + 1 === this.ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                    ? max(this.ctx.yDomain)
+                    : this.y(this.ctx.flatData[index + 1]);
+                tmpArea.y = this.yCoord;
+                tmpArea.height = (this.ctx.yScale(nextDataPoint) ?? 0) - (this.yCoord ?? 0);
+            }
+            if (axis === 'y') {
+                tmpArea.width = max(this.ctx.xRange);
+            }
+        }
+        return tmpArea;
+    });
+    points = $derived.by(() => {
+        let tmpPoints = [];
+        if (!this.highlightData)
+            return tmpPoints;
+        const props = this.#getProps();
+        if (props.data === undefined && this.ctx.tooltip.series.length > 0) {
+            tmpPoints = this.ctx.tooltip.series
+                .flatMap((seriesInfo) => {
+                if (!seriesInfo.visible)
+                    return [];
+                let pointX;
+                let pointY;
+                let dataX;
+                let dataY;
+                if (this.ctx.series.isStacked) {
+                    const matchingData = this.ctx.flatData.find((d) => this.x(d) === this.xValue);
+                    const stackValue = matchingData
+                        ? this.ctx.series.getStackValue(seriesInfo.key, matchingData)
+                        : null;
+                    const stackedY1 = stackValue
+                        ? this.ctx.series.stackLayout === 'stackDiverging' && stackValue[1] <= 0
+                            ? stackValue[0]
+                            : stackValue[1]
+                        : 0;
+                    if (this.ctx.valueAxis === 'x') {
+                        pointX = this.ctx.xScale(stackedY1) + this.xOffset;
+                        pointY = this.yCoordScalar + this.yOffset;
+                        dataX = stackedY1;
+                        dataY = this.yValue;
+                    }
+                    else {
+                        pointX = this.xCoordScalar + this.xOffset;
+                        pointY = this.ctx.yScale(stackedY1) + this.yOffset;
+                        dataX = this.xValue;
+                        dataY = stackedY1;
+                    }
+                }
+                else {
+                    const seriesValue = seriesInfo.value;
+                    if (seriesValue == null) {
+                        return [];
+                    }
+                    if (Array.isArray(seriesValue)) {
+                        if (this.ctx.valueAxis === 'x') {
+                            return seriesValue.map((sv) => ({
+                                x: this.ctx.xScale(sv) + this.xOffset,
+                                y: this.yCoordScalar + this.yOffset,
+                                fill: seriesInfo.color ?? '',
+                                data: { x: sv, y: this.yValue },
+                                seriesKey: seriesInfo.key,
+                            }));
+                        }
+                        else {
+                            return seriesValue.map((sv) => ({
+                                x: this.xCoordScalar + this.xOffset,
+                                y: this.ctx.yScale(sv) + this.yOffset,
+                                fill: seriesInfo.color ?? '',
+                                data: { x: this.xValue, y: sv },
+                                seriesKey: seriesInfo.key,
+                            }));
+                        }
+                    }
+                    if (this.ctx.valueAxis === 'x') {
+                        pointX = this.ctx.xScale(seriesValue) + this.xOffset;
+                        pointY = this.yCoordScalar + this.yOffset;
+                        dataX = seriesValue;
+                        dataY = this.yValue;
+                    }
+                    else {
+                        pointX = this.xCoordScalar + this.xOffset;
+                        pointY = this.ctx.yScale(seriesValue) + this.yOffset;
+                        dataX = this.xValue;
+                        dataY = seriesValue;
+                    }
+                }
+                return {
+                    x: pointX,
+                    y: pointY,
+                    fill: seriesInfo.color ?? '',
+                    data: { x: dataX, y: dataY },
+                    seriesKey: seriesInfo.key,
+                };
+            })
+                .filter(notNull);
+        }
+        else if (Array.isArray(this.xCoord)) {
+            if (Array.isArray(this.highlightData)) {
+                const highlightSeriesPoint = this.highlightData;
+                if (Array.isArray(this.ctx.data)) {
+                    const seriesPointsData = this.ctx.data
+                        .map((series) => ({
+                        series,
+                        point: series.find((d) => this.y(d) === this.y(highlightSeriesPoint)),
+                    }))
+                        .filter((d) => d.point);
+                    tmpPoints = seriesPointsData
+                        .map((seriesPoint) => {
+                        const fill = this.ctx.config.c ? this.ctx.cGet(seriesPoint.series) : null;
+                        return {
+                            x: this.ctx.xScale(seriesPoint.point[1]) + this.xOffset,
+                            y: this.yCoordScalar + this.yOffset,
+                            fill,
+                            data: { x: seriesPoint.point[1], y: this.yValue },
+                            seriesKey: undefined,
+                        };
+                    })
+                        .filter(notNull);
+                }
+            }
+            else {
+                tmpPoints = this.xCoord
+                    .map((xItem, i) => {
+                    if (xItem == null)
+                        return null;
+                    // @ts-expect-error - TODO: fix type
+                    const _key = this.ctx.config.x?.[i];
+                    const fill = this.ctx.config.c
+                        ? this.ctx.cGet({ ...this.highlightData, $key: _key })
+                        : null;
+                    return {
+                        x: xItem + this.xOffset,
+                        y: this.yCoordScalar + this.yOffset,
+                        fill,
+                        data: { x: this.xValue, y: this.yValue },
+                        seriesKey: _key,
+                    };
+                })
+                    .filter(notNull);
+            }
+        }
+        else if (Array.isArray(this.yCoord)) {
+            if (Array.isArray(this.highlightData)) {
+                const highlightSeriesPoint = this.highlightData;
+                if (Array.isArray(this.ctx.data)) {
+                    const seriesPointsData = this.ctx.data
+                        .map((series) => ({
+                        series,
+                        point: series.find((d) => this.x(d) === this.x(highlightSeriesPoint)),
+                    }))
+                        .filter((d) => d.point);
+                    tmpPoints = seriesPointsData
+                        .map((seriesPoint) => {
+                        const fill = this.ctx.config.c ? this.ctx.cGet(seriesPoint.series) : null;
+                        return {
+                            x: this.xCoord + this.xOffset,
+                            y: this.ctx.yScale(seriesPoint.point[1]) + this.yOffset,
+                            fill,
+                            data: { x: this.xValue, y: seriesPoint.point[1] },
+                            seriesKey: undefined,
+                        };
+                    })
+                        .filter(notNull);
+                }
+            }
+            else {
+                tmpPoints = this.yCoord
+                    .map((yItem, i) => {
+                    if (yItem == null)
+                        return null;
+                    // @ts-expect-error - TODO: fix type
+                    const _key = this.ctx.config.y[i];
+                    const fill = this.ctx.config.c
+                        ? this.ctx.cGet({ ...this.highlightData, $key: _key })
+                        : null;
+                    return {
+                        x: this.xCoord + this.xOffset,
+                        y: yItem + this.yOffset,
+                        fill,
+                        data: { x: this.xValue, y: this.yValue },
+                        seriesKey: _key,
+                    };
+                })
+                    .filter(notNull);
+            }
+        }
+        else if (this.xCoord != null && this.yCoord != null) {
+            const fill = this.ctx.config.c ? this.ctx.cGet(this.highlightData) : null;
+            tmpPoints = [
+                {
+                    x: this.xCoord + this.xOffset,
+                    y: this.yCoord + this.yOffset,
+                    fill: fill,
+                    data: { x: this.xValue, y: this.yValue },
+                    seriesKey: undefined,
+                },
+            ];
+        }
+        else {
+            tmpPoints = [];
+        }
+        if (this.ctx.radial) {
+            tmpPoints = tmpPoints.map((p) => {
+                const [x, y] = pointRadial(p.x, p.y);
+                return { ...p, x, y };
+            });
+        }
+        if (props.r) {
+            const pointR = this.getPointRadius(this.highlightData);
+            if (pointR != null) {
+                tmpPoints = tmpPoints.map((p) => ({ ...p, r: pointR }));
+            }
+        }
+        return tmpPoints;
+    });
+}

package/dist/components/Highlight/Highlight.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData } from './Highlight.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import HighlightSvg from './Highlight.svg.svelte';
+  import HighlightCanvas from './Highlight.canvas.svelte';
+  import HighlightHtml from './Highlight.html.svelte';
+  import type { HighlightProps } from './Highlight.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: HighlightProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <HighlightSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <HighlightCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <HighlightHtml {...props} />
+{/if}

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

@@ -0,0 +1,4 @@
+export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData } from './Highlight.shared.svelte.js';
+declare const Highlight: import("svelte").Component<import("./Highlight.shared.svelte.js").HighlightPropsWithoutHTML, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/components/Highlight/Highlight.svg.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData } from './Highlight.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import HighlightBase from './Highlight.base.svelte';
+  import Circle from '../Circle/Circle.svg.svelte';
+  import Line from '../Line/Line.svg.svelte';
+  import Rect from '../Rect/Rect.svg.svelte';
+  import Arc from '../Arc/Arc.svg.svelte';
+
+  import type { HighlightProps } from './Highlight.shared.svelte.js';
+
+  let props: HighlightProps = $props();
+</script>
+
+<HighlightBase {Circle} {Line} {Rect} {Arc} {...props} />

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

@@ -0,0 +1,4 @@
+export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData } from './Highlight.shared.svelte.js';
+declare const Highlight: import("svelte").Component<import("./Highlight.shared.svelte.js").HighlightPropsWithoutHTML, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/components/{Hull.svelte → Hull/Hull.base.svelte}

@@ -1,55 +1,13 @@
 <script lang="ts" module>
-  import type { Without, CommonStyleProps } from '../utils/types.js';
-  import type { SVGAttributes } from 'svelte/elements';
-  import type { ComponentProps } from 'svelte';
+  import type { Component } from 'svelte';
+  import type { HullProps } from './Hull.shared.svelte.js';
 
-  export type HullPropsWithoutHTML = {
-    /**
-     * Override data instead of using context
-     */
-    data?: any;
+  export type HullBaseLayerComponents = {
+    Group: Component<any>;
+    Spline: Component<any>;
+  };
 
-    /**
-     * The curve factory to use for the hull
-     * @default curveLinearClosed
-     */
-    curve?: ComponentProps<typeof Spline>['curve'];
-
-    /**
-     * Classes to apply to the elements.
-     */
-    classes?: {
-      root?: string;
-      path?: string;
-    };
-
-    onpointermove?: (
-      e: PointerEvent,
-      details: {
-        points: [number, number][];
-        polygon: Delaunay.Polygon;
-      }
-    ) => void;
-
-    onclick?: (
-      e: MouseEvent,
-      details: {
-        points: [number, number][];
-        polygon: Delaunay.Polygon;
-      }
-    ) => void;
-
-    onpointerleave?: (e: PointerEvent) => void;
-
-    /**
-     * A bindable reference to the wrapping `<g>` element.
-     *
-     * @bindable
-     */
-    ref?: SVGGElement;
-  } & CommonStyleProps;
-
-  export type HullProps = HullPropsWithoutHTML & Without<GroupProps, HullPropsWithoutHTML>;
+  export type HullBaseProps = HullProps & HullBaseLayerComponents;
 </script>
 
 <script lang="ts">
@@ -60,19 +18,19 @@
   import { curveLinearClosed } from 'd3-shape';
   import { cls } from '@layerstack/tailwind';
 
-  import GeoPath from './geo/GeoPath.svelte';
-  import Group, { type GroupProps } from './Group.svelte';
-  import Spline from './Spline.svelte';
-  import { getChartContext } from '../contexts/chart.js';
-  import { getGeoContext } from '../contexts/geo.js';
+  // GeoPath agnostic; only loaded when used inside a geo chart.
+  import GeoPath from '../geo/GeoPath/GeoPath.svelte';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
 
   const ctx = getChartContext();
   const geo = getGeoContext();
 
-  // Mark as composite so child Spline doesn't register
   ctx.registerComponent({ name: 'Hull', kind: 'composite-mark' });
 
   let {
+    Group,
+    Spline,
     data,
     curve = curveLinearClosed,
     classes = {},
@@ -88,7 +46,7 @@
     class: className,
     ref: refProp = $bindable(),
     ...restProps
-  }: HullProps = $props();
+  }: HullBaseProps = $props();
 
   let ref = $state<SVGGElement>();
 
@@ -125,8 +83,8 @@
       {strokeWidth}
       {opacity}
       class={['lc-hull-path', classes.path]}
-      onclick={(e) => onclick?.(e, { points, polygon })}
-      onpointermove={(e) => onpointermove?.(e, { points, polygon })}
+      onclick={(e: MouseEvent) => onclick?.(e, { points, polygon })}
+      onpointermove={(e: PointerEvent) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
     />
   {:else}
@@ -134,8 +92,8 @@
     {@const polygon = delaunay.hullPolygon()}
     <Spline
       data={polygon}
-      x={(d) => d[0]}
-      y={(d) => d[1]}
+      x={(d: any) => d[0]}
+      y={(d: any) => d[1]}
       {curve}
       {fill}
       {fillOpacity}
@@ -144,8 +102,8 @@
       {strokeWidth}
       {opacity}
       class={['lc-hull-class', classes.path]}
-      onclick={(e) => onclick?.(e, { points, polygon })}
-      onpointermove={(e) => onpointermove?.(e, { points, polygon })}
+      onclick={(e: MouseEvent) => onclick?.(e, { points, polygon })}
+      onpointermove={(e: PointerEvent) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
     />
   {/if}

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

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { HullProps } from './Hull.shared.svelte.js';
+export type HullBaseLayerComponents = {
+    Group: Component<any>;
+    Spline: Component<any>;
+};
+export type HullBaseProps = HullProps & HullBaseLayerComponents;
+declare const Hull: Component<HullBaseProps, {}, "ref">;
+type Hull = ReturnType<typeof Hull>;
+export default Hull;

package/dist/components/Hull/Hull.canvas.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { HullProps, HullPropsWithoutHTML } from './Hull.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import HullBase from './Hull.base.svelte';
+  import Group from '../Group/Group.canvas.svelte';
+  import Spline from '../Spline/Spline.canvas.svelte';
+  import type { HullProps } from './Hull.shared.svelte.js';
+
+  let props: HullProps = $props();
+</script>
+
+<HullBase {Group} {Spline} {...props} />

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

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

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

@@ -1,18 +1,12 @@
-import type { Without, CommonStyleProps } from '../utils/types.js';
+import type { Without, CommonStyleProps } from '../../utils/types.js';
 import type { ComponentProps } from 'svelte';
+import type { Delaunay } from 'd3-delaunay';
+import type Spline from '../Spline/Spline.svelte';
+import type { GroupProps } from '../Group/Group.shared.svelte.js';
 export type HullPropsWithoutHTML = {
-    /**
-     * Override data instead of using context
-     */
     data?: any;
-    /**
-     * The curve factory to use for the hull
-     * @default curveLinearClosed
-     */
+    /** @default curveLinearClosed */
     curve?: ComponentProps<typeof Spline>['curve'];
-    /**
-     * Classes to apply to the elements.
-     */
     classes?: {
         root?: string;
         path?: string;
@@ -26,17 +20,7 @@ export type HullPropsWithoutHTML = {
         polygon: Delaunay.Polygon;
     }) => void;
     onpointerleave?: (e: PointerEvent) => void;
-    /**
-     * A bindable reference to the wrapping `<g>` element.
-     *
-     * @bindable
-     */
+    /** @bindable */
     ref?: SVGGElement;
 } & CommonStyleProps;
 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>;
-export default Hull;

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

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

package/dist/components/Hull/Hull.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { HullProps, HullPropsWithoutHTML } from './Hull.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import HullSvg from './Hull.svg.svelte';
+  import HullCanvas from './Hull.canvas.svelte';
+  import type { HullProps } from './Hull.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: HullProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <HullSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <HullCanvas {...props} />
+{/if}