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

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

@@ -0,0 +1,90 @@
+import type { PathProps } from '../Path/Path.shared.svelte.js';
+import type { TextProps } from '../Text/Text.shared.svelte.js';
+import type { GetArcTextProps, ArcTextOptions } from '../../utils/arcText.svelte.js';
+/**
+ * Placement options for `ArcLabel`.
+ * - `centroid`: at the arc centroid (horizontal text)
+ * - `centroid-rotated`: at the arc centroid, rotated to follow the arc tangent
+ * - `centroid-radial`: at the arc centroid, rotated to read radially (center → outside)
+ * - `inner` / `middle` / `outer`: along the inner / middle / outer arc path
+ * - `callout`: outside the arc connected by a polyline with a bend
+ */
+export type ArcLabelPlacement = 'centroid' | 'centroid-rotated' | 'centroid-radial' | 'inner' | 'middle' | 'outer' | 'callout';
+export type ArcLabelConfig = {
+    /** @default 'centroid' */
+    placement?: ArcLabelPlacement;
+    /** @default 16 */
+    calloutLineLength?: number;
+    /** @default 12 */
+    calloutLabelOffset?: number;
+    /** @default 4 */
+    calloutPadding?: number;
+    /** Props applied to the leader line `<Path>` when using `callout` placement. */
+    line?: Omit<PathProps, 'pathData'>;
+    /** Radial offset for the label, interpreted per-placement. @default 0 */
+    offset?: number;
+} & ArcTextOptions & Omit<TextProps, 'path'>;
+export type ArcLabelProps = {
+    /** Function from `Arc` children snippet for `inner`/`middle`/`outer` placements. */
+    getArcTextProps?: GetArcTextProps;
+    /** Centroid `[x, y]` of the arc (from `Arc` children snippet) */
+    centroid?: [number, number];
+    /** Arc start angle in radians (from `Arc` children snippet) */
+    startAngle?: number;
+    /** Arc end angle in radians (from `Arc` children snippet) */
+    endAngle?: number;
+    /** Arc inner radius (from `Arc` children snippet) */
+    innerRadius?: number;
+    /** Arc outer radius (from `Arc` children snippet) */
+    outerRadius?: number;
+} & ArcLabelConfig;
+export type ArcLabelCalloutGeometry = {
+    pathData: string;
+    labelX: number;
+    labelY: number;
+    textAnchor: 'start' | 'end';
+};
+/**
+ * Reactive state shared by every per-layer ArcLabel variant. Holds derived
+ * geometry (callout path, offset centroid, rotation) and resolved text props.
+ */
+export declare class ArcLabelState {
+    #private;
+    constructor(getProps: () => ArcLabelProps);
+    midAngle: number;
+    offsetCentroid: [number, number] | undefined;
+    effectiveOuterPadding: number;
+    effectiveInnerPadding: number;
+    effectiveCalloutLineLength: number;
+    centroidRotation: number;
+    calloutGeometry: ArcLabelCalloutGeometry | null;
+    arcTextProps: {
+        value?: string | number | ((d: any) => string | number);
+        segments?: import("../Text/Text.shared.svelte.js").TextSegment[];
+        width?: number;
+        x?: string | number | ((d: any) => any);
+        initialX?: string | number;
+        y?: string | number | ((d: any) => any);
+        initialY?: string | number;
+        dx?: string | number;
+        dy?: string | number;
+        lineHeight?: string;
+        capHeight?: string;
+        scaleToFit?: boolean;
+        textAnchor?: "start" | "middle" | "end" | "inherit";
+        verticalAnchor?: "start" | "middle" | "end" | "inherit";
+        dominantBaseline?: "auto" | "text-before-edge" | "text-after-edge" | "middle" | "hanging" | "ideographic" | "mathematical";
+        rotate?: number;
+        svgRef?: SVGElement;
+        svgProps?: Omit<import("svelte/elements").SVGAttributes<SVGElement>, "children">;
+        ref?: SVGTextElement;
+        format?: import("@layerstack/utils").FormatType | import("@layerstack/utils").FormatConfig;
+        motion?: import("../../utils/motion.svelte.js").MotionProp;
+        truncate?: boolean | import("../Text/Text.shared.svelte.js").TruncateTextOptions;
+        pathId?: string;
+        path?: string | null;
+        startOffset?: string | number;
+        data?: any[];
+        key?: (d: any, index: number) => any;
+    } & import("../../index.js").DataDrivenStyleProps & import("../../index.js").Without<import("svelte/elements").SVGAttributes<SVGTextElement>, import("../Text/Text.shared.svelte.js").TextPropsWithoutHTML>;
+}

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

@@ -0,0 +1,124 @@
+import { radiansToDegrees } from '../../utils/math.js';
+/**
+ * Reactive state shared by every per-layer ArcLabel variant. Holds derived
+ * geometry (callout path, offset centroid, rotation) and resolved text props.
+ */
+export class ArcLabelState {
+    #getProps = () => ({});
+    constructor(getProps) {
+        this.#getProps = getProps;
+    }
+    midAngle = $derived.by(() => {
+        const { startAngle, endAngle } = this.#getProps();
+        return startAngle != null && endAngle != null ? (startAngle + endAngle) / 2 : 0;
+    });
+    offsetCentroid = $derived.by(() => {
+        const { centroid, offset = 0, startAngle, endAngle } = this.#getProps();
+        if (!centroid)
+            return centroid;
+        if (!offset || startAngle == null || endAngle == null)
+            return centroid;
+        const angle = this.midAngle - Math.PI / 2;
+        return [centroid[0] + Math.cos(angle) * offset, centroid[1] + Math.sin(angle) * offset];
+    });
+    effectiveOuterPadding = $derived.by(() => {
+        const props = this.#getProps();
+        const base = props.outerPadding ?? 0;
+        if (props.placement === 'outer' || props.placement === 'middle') {
+            return base + (props.offset ?? 0);
+        }
+        return base;
+    });
+    effectiveInnerPadding = $derived.by(() => {
+        const props = this.#getProps();
+        if (props.placement === 'inner' || props.placement === 'middle')
+            return props.offset ?? 0;
+        return 0;
+    });
+    effectiveCalloutLineLength = $derived((this.#getProps().calloutLineLength ?? 16) + (this.#getProps().offset ?? 0));
+    centroidRotation = $derived.by(() => {
+        const { startAngle, endAngle, placement } = this.#getProps();
+        if (startAngle == null || endAngle == null)
+            return 0;
+        let deg = radiansToDegrees(this.midAngle);
+        if (placement === 'centroid-radial') {
+            deg = deg - 90;
+        }
+        else if (placement !== 'centroid-rotated') {
+            return 0;
+        }
+        deg = ((deg + 180) % 360) - 180;
+        if (deg > 90)
+            deg -= 180;
+        else if (deg < -90)
+            deg += 180;
+        return deg;
+    });
+    calloutGeometry = $derived.by(() => {
+        const { placement, startAngle, endAngle, outerRadius, calloutLabelOffset = 12, calloutPadding = 4, } = this.#getProps();
+        if (placement !== 'callout' || startAngle == null || endAngle == null || outerRadius == null) {
+            return null;
+        }
+        const angle = this.midAngle - Math.PI / 2;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const x0 = cos * outerRadius;
+        const y0 = sin * outerRadius;
+        const bendRadius = outerRadius + this.effectiveCalloutLineLength;
+        const x1 = cos * bendRadius;
+        const y1 = sin * bendRadius;
+        const onRightSide = cos >= 0;
+        const x2 = x1 + (onRightSide ? calloutLabelOffset : -calloutLabelOffset);
+        const y2 = y1;
+        return {
+            pathData: `M${x0},${y0}L${x1},${y1}L${x2},${y2}`,
+            labelX: x2 + (onRightSide ? calloutPadding : -calloutPadding),
+            labelY: y2,
+            textAnchor: onRightSide ? 'start' : 'end',
+        };
+    });
+    arcTextProps = $derived.by(() => {
+        const props = this.#getProps();
+        const { placement = 'centroid', startOffset, outerPadding, getArcTextProps } = props;
+        if (placement === 'centroid') {
+            if (this.offsetCentroid) {
+                return {
+                    x: this.offsetCentroid[0],
+                    y: this.offsetCentroid[1],
+                    textAnchor: 'middle',
+                    verticalAnchor: 'middle',
+                };
+            }
+            return getArcTextProps?.('centroid', { startOffset, outerPadding }) ?? {};
+        }
+        if (placement === 'centroid-rotated' || placement === 'centroid-radial') {
+            if (this.offsetCentroid) {
+                return {
+                    x: this.offsetCentroid[0],
+                    y: this.offsetCentroid[1],
+                    textAnchor: 'middle',
+                    verticalAnchor: 'middle',
+                    rotate: this.centroidRotation,
+                };
+            }
+            return getArcTextProps?.('centroid', { startOffset, outerPadding }) ?? {};
+        }
+        if (placement === 'callout') {
+            const g = this.calloutGeometry;
+            if (g) {
+                return {
+                    x: g.labelX,
+                    y: g.labelY,
+                    textAnchor: g.textAnchor,
+                    verticalAnchor: 'middle',
+                };
+            }
+            return {};
+        }
+        return (getArcTextProps?.(placement, {
+            startOffset,
+            outerPadding: this.effectiveOuterPadding,
+            innerPadding: this.effectiveInnerPadding,
+        }) ?? {});
+    });
+}

package/dist/components/ArcLabel/ArcLabel.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  export type {
+    ArcLabelProps,
+    ArcLabelConfig,
+    ArcLabelPlacement,
+  } from './ArcLabel.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import ArcLabelSvg from './ArcLabel.svg.svelte';
+  import ArcLabelCanvas from './ArcLabel.canvas.svelte';
+  import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: ArcLabelProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <ArcLabelSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <ArcLabelCanvas {...props} />
+{/if}

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

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

package/dist/components/ArcLabel/ArcLabel.svg.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+  export type {
+    ArcLabelProps,
+    ArcLabelConfig,
+    ArcLabelPlacement,
+  } from './ArcLabel.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ArcLabelBase from './ArcLabel.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+  import Text from '../Text/Text.svg.svelte';
+
+  import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+
+  let props: ArcLabelProps = $props();
+</script>
+
+<ArcLabelBase {Path} {Text} {...props} />

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

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

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

@@ -2,8 +2,8 @@ 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 Arc from './Arc.svelte';
-import ArcLabel from './ArcLabel.svelte';
+import Arc from './Arc/Arc.svelte';
+import ArcLabel from './ArcLabel/ArcLabel.svelte';
 const defaultArcProps = {
     fill: 'currentColor',
     value: 50,

package/dist/components/Area/Area.base.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { AreaProps } from './Area.shared.svelte.js';
+
+  export type AreaBaseLayerComponents = {
+    Path: Component<any>;
+    Spline: Component<any>;
+  };
+
+  export type AreaBaseProps = AreaProps & AreaBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import { AreaState } from './Area.shared.svelte.js';
+
+  let {
+    Path,
+    Spline,
+    curve,
+    data,
+    defined,
+    fill,
+    stroke = 'none',
+    line = false,
+    pathData,
+    motion,
+    x,
+    y0,
+    y1,
+    seriesKey,
+    ...restProps
+  }: AreaBaseProps = $props();
+
+  const c = new AreaState(
+    () =>
+      ({
+        curve,
+        data,
+        defined,
+        fill,
+        stroke,
+        line,
+        pathData,
+        motion,
+        x,
+        y0,
+        y1,
+        seriesKey,
+      }) as AreaProps
+  );
+</script>
+
+{#if line}
+  <Spline
+    data={data ?? c.seriesData}
+    {x}
+    y={c.lineYAccessor}
+    {seriesKey}
+    {curve}
+    {defined}
+    {motion}
+    {...extractLayerProps(line, 'lc-area-line')}
+  />
+{/if}
+
+<Path
+  pathData={c.tweenedPath}
+  fill={fill ?? c.series?.color}
+  {stroke}
+  opacity={c.pathOpacity}
+  {...extractLayerProps(restProps, 'lc-area-path')}
+/>

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

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { AreaProps } from './Area.shared.svelte.js';
+export type AreaBaseLayerComponents = {
+    Path: Component<any>;
+    Spline: Component<any>;
+};
+export type AreaBaseProps = AreaProps & AreaBaseLayerComponents;
+declare const Area: Component<AreaBaseProps, {}, "">;
+type Area = ReturnType<typeof Area>;
+export default Area;

package/dist/components/Area/Area.canvas.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { AreaProps, AreaPropsWithoutHTML } from './Area.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import AreaBase from './Area.base.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+  import Spline from '../Spline/Spline.canvas.svelte';
+
+  import type { AreaProps } from './Area.shared.svelte.js';
+
+  let props: AreaProps = $props();
+</script>
+
+<AreaBase {Path} {Spline} {...props} />

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

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

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

@@ -0,0 +1,57 @@
+import type { ComponentProps } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import { type Area as D3Area, type CurveFactory } from 'd3-shape';
+import type { Without } from '../../utils/types.js';
+import { type Accessor } from '../../utils/common.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type Spline from '../Spline/Spline.svelte';
+import type { PathProps } from '../Path/Path.shared.svelte.js';
+export type AreaPropsWithoutHTML = {
+    /** Override data instead of using context */
+    data?: any;
+    /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
+    pathData?: string | null;
+    /** Override x accessor */
+    x?: Accessor;
+    /** Override y0 accessor. Defaults to max($yRange) */
+    y0?: Accessor;
+    /** Override y1 accessor. Defaults to y accessor */
+    y1?: Accessor;
+    /** Series key to use for accessor. */
+    seriesKey?: string;
+    /** Whether to tween the interpolated path data using d3-interpolate-path */
+    motion?: MotionProp;
+    curve?: CurveFactory;
+    defined?: Parameters<D3Area<any>['defined']>[0];
+    /** Enable showing line @default false */
+    line?: boolean | Partial<ComponentProps<typeof Spline>>;
+} & Omit<PathProps, 'x' | 'y' | 'y0' | 'y1'>;
+export type AreaProps = AreaPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, AreaPropsWithoutHTML>;
+/**
+ * Reactive state shared by every per-layer Area variant. Holds the
+ * computed `d` (path data), tween state, accessors, and `lineYAccessor`.
+ */
+export declare class AreaState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => AreaProps);
+    series: import("../index.js").SeriesData<any, any> | undefined;
+    seriesData: any[] | undefined;
+    seriesAccessor: string | number | ((d: any) => any) | Accessor<any>[] | undefined;
+    stackAccessors: {
+        y0: (d: any) => number;
+        y1: (d: any) => number;
+        value: (d: any) => [number, number] | null;
+    } | null;
+    xAccessor: (d: any) => any;
+    y0Accessor: (d: any) => any;
+    y1Accessor: (d: any) => any;
+    resolvedData: any;
+    xOffset: number;
+    yOffset: number;
+    d: string | undefined;
+    get tweenedPath(): any;
+    lineYAccessor: ((d: any) => any) | undefined;
+    pathOpacity: number;
+}

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

@@ -0,0 +1,157 @@
+import { area as d3Area, areaRadial, } from 'd3-shape';
+import { min } from 'd3-array';
+import { interpolatePath } from 'd3-interpolate-path';
+import { accessor } from '../../utils/common.js';
+import { isScaleBand } from '../../utils/scales.svelte.js';
+import { flattenPathData } from '../../utils/path.js';
+import { createMotion, extractTweenConfig, } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+/**
+ * Reactive state shared by every per-layer Area variant. Holds the
+ * computed `d` (path data), tween state, accessors, and `lineYAccessor`.
+ */
+export class AreaState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    #tweenState;
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        this.ctx.registerComponent({
+            name: 'Area',
+            kind: 'composite-mark',
+            markInfo: () => {
+                const p = getProps();
+                return {
+                    data: p.data,
+                    x: p.x,
+                    y: p.y1 ?? p.y0,
+                    seriesKey: p.seriesKey,
+                    color: p.fill,
+                };
+            },
+        });
+        const extractedTween = extractTweenConfig(initial.motion);
+        const tweenOptions = extractedTween
+            ? {
+                type: extractedTween.type,
+                options: { interpolate: interpolatePath, ...extractedTween.options },
+            }
+            : undefined;
+        this.#tweenState = createMotion(this.#defaultPathData(tweenOptions), () => this.d, tweenOptions);
+    }
+    series = $derived(this.ctx.series.series.find((s) => s.key === this.#getProps().seriesKey));
+    seriesData = $derived(this.series?.data);
+    seriesAccessor = $derived(this.series?.value ?? (this.series?.data ? undefined : this.series?.key));
+    stackAccessors = $derived.by(() => {
+        const seriesKey = this.#getProps().seriesKey;
+        return seriesKey && this.ctx.series.isStacked
+            ? this.ctx.series.getStackAccessors(seriesKey)
+            : null;
+    });
+    xAccessor = $derived.by(() => {
+        const x = this.#getProps().x;
+        return x ? accessor(x) : this.ctx.x;
+    });
+    y0Accessor = $derived.by(() => {
+        const props = this.#getProps();
+        if (props.y0)
+            return accessor(props.y0);
+        if (this.stackAccessors)
+            return this.stackAccessors.y0;
+        if (Array.isArray(this.seriesAccessor))
+            return accessor(this.seriesAccessor[0]);
+        if (Array.isArray(this.ctx.config.y) && this.ctx.config.y[0] === 0) {
+            return (d) => this.ctx.y(d)[0];
+        }
+        if (this.ctx.props.yBaseline != null)
+            return () => this.ctx.props.yBaseline;
+        return () => min(this.ctx.yScale.domain());
+    });
+    y1Accessor = $derived.by(() => {
+        const props = this.#getProps();
+        if (props.y1)
+            return accessor(props.y1);
+        if (this.stackAccessors)
+            return this.stackAccessors.y1;
+        if (Array.isArray(this.seriesAccessor))
+            return accessor(this.seriesAccessor[1]);
+        if (this.seriesAccessor)
+            return accessor(this.seriesAccessor);
+        if (Array.isArray(this.ctx.config.y) && this.ctx.config.y[1] === 1) {
+            return (d) => this.ctx.y(d)[1];
+        }
+        return this.ctx.y;
+    });
+    resolvedData = $derived(this.#getProps().data ?? this.seriesData ?? this.ctx.data);
+    xOffset = $derived(isScaleBand(this.ctx.xScale) ? this.ctx.xScale.bandwidth() / 2 : 0);
+    yOffset = $derived(isScaleBand(this.ctx.yScale) ? this.ctx.yScale.bandwidth() / 2 : 0);
+    #defaultPathData(tweenOptions) {
+        const props = this.#getProps();
+        if (!tweenOptions)
+            return '';
+        if (props.pathData) {
+            return flattenPathData(props.pathData, Math.min(this.ctx.yScale(0), this.ctx.yRange[0]));
+        }
+        if (this.ctx.config.x) {
+            const path = this.ctx.radial
+                ? areaRadial()
+                    .angle((d) => this.ctx.xScale(this.xAccessor(d)))
+                    .innerRadius(() => Math.min(this.ctx.yScale(0), this.ctx.yRange[0]))
+                    .outerRadius(() => Math.min(this.ctx.yScale(0), this.ctx.yRange[0]))
+                : d3Area()
+                    .x((d) => this.ctx.xScale(this.xAccessor(d)) + this.xOffset)
+                    .y0(() => Math.min(this.ctx.yScale(0), this.ctx.yRange[0]))
+                    .y1(() => Math.min(this.ctx.yScale(0), this.ctx.yRange[0]));
+            path.defined(props.defined ?? ((d) => this.xAccessor(d) != null && this.y1Accessor(d) != null));
+            if (props.curve)
+                path.curve(props.curve);
+            return path(this.resolvedData) ?? '';
+        }
+        return '';
+    }
+    d = $derived.by(() => {
+        const props = this.#getProps();
+        const _path = this.ctx.radial
+            ? areaRadial()
+                .angle((d) => this.ctx.xScale(this.xAccessor(d)))
+                .innerRadius((d) => this.ctx.yScale(this.y0Accessor(d)))
+                .outerRadius((d) => this.ctx.yScale(this.y1Accessor(d)))
+            : d3Area()
+                .x((d) => this.ctx.xScale(this.xAccessor(d)) + this.xOffset)
+                .y0((d) => this.ctx.yScale(this.y0Accessor(d)) + this.yOffset)
+                .y1((d) => this.ctx.yScale(this.y1Accessor(d)) + this.yOffset);
+        _path.defined(props.defined ?? ((d) => this.xAccessor(d) != null && this.y1Accessor(d) != null));
+        if (props.curve)
+            _path.curve(props.curve);
+        return props.pathData ?? _path(this.resolvedData) ?? '';
+    });
+    get tweenedPath() {
+        return this.#tweenState.current;
+    }
+    lineYAccessor = $derived.by(() => {
+        const props = this.#getProps();
+        if (this.stackAccessors && this.ctx.series.stackLayout === 'stackDiverging') {
+            const firstPoint = this.resolvedData?.[0];
+            if (firstPoint) {
+                const val = this.stackAccessors.value(firstPoint);
+                if (val && val[1] <= 0)
+                    return this.y0Accessor;
+            }
+        }
+        return props.y1 ||
+            this.stackAccessors ||
+            Array.isArray(this.seriesAccessor) ||
+            this.seriesAccessor
+            ? this.y1Accessor
+            : undefined;
+    });
+    pathOpacity = $derived.by(() => {
+        if (this.series?.key == null ||
+            this.ctx.series.visibleSeries.length <= 1 ||
+            this.ctx.series.isHighlighted(this.series.key, true)) {
+            return 1;
+        }
+        return 0.1;
+    });
+}

package/dist/components/Area/Area.svelte

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

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

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

package/dist/components/Area/Area.svg.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  export type { AreaProps, AreaPropsWithoutHTML } from './Area.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import AreaBase from './Area.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+  import Spline from '../Spline/Spline.svg.svelte';
+
+  import type { AreaProps } from './Area.shared.svelte.js';
+
+  let props: AreaProps = $props();
+</script>
+
+<AreaBase {Path} {Spline} {...props} />

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

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