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

package/dist/components/AnnotationRange/AnnotationRange.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  export type {
+    AnnotationRangeProps,
+    AnnotationRangePropsWithoutHTML,
+  } from './AnnotationRange.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import AnnotationRangeSvg from './AnnotationRange.svg.svelte';
+  import AnnotationRangeCanvas from './AnnotationRange.canvas.svelte';
+  import AnnotationRangeHtml from './AnnotationRange.html.svelte';
+  import type { AnnotationRangeProps } from './AnnotationRange.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: AnnotationRangeProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <AnnotationRangeSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <AnnotationRangeCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <AnnotationRangeHtml {...props} />
+{/if}

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

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

package/dist/components/AnnotationRange/AnnotationRange.svg.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+  export type {
+    AnnotationRangeProps,
+    AnnotationRangePropsWithoutHTML,
+  } from './AnnotationRange.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import AnnotationRangeBase from './AnnotationRange.base.svelte';
+  import LinearGradient from '../LinearGradient/LinearGradient.svg.svelte';
+  import Pattern from '../Pattern/Pattern.svg.svelte';
+  import Rect from '../Rect/Rect.svg.svelte';
+  import Text from '../Text/Text.svg.svelte';
+  import type { AnnotationRangeProps } from './AnnotationRange.shared.svelte.js';
+
+  let props: AnnotationRangeProps = $props();
+</script>
+
+<AnnotationRangeBase {LinearGradient} {Pattern} {Rect} {Text} {...props} />

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

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

package/dist/components/Arc/Arc.base.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { ArcProps } from './Arc.shared.svelte.js';
+
+  export type ArcBaseLayerComponents = {
+    Path: Component<any>;
+  };
+
+  export type ArcBaseProps = ArcProps & ArcBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import type { PointerEventHandler, TouchEventHandler } from 'svelte/elements';
+  import { cls } from '@layerstack/tailwind';
+
+  import { extractLayerProps } from '../../utils/attributes.js';
+  import { ArcState } from './Arc.shared.svelte.js';
+
+  let {
+    Path,
+    ref: refProp = $bindable(),
+    trackRef: trackRefProp = $bindable(),
+    fill,
+    fillOpacity,
+    stroke = 'none',
+    strokeWidth,
+    opacity,
+    data,
+    onpointerenter = () => {},
+    onpointermove = () => {},
+    onpointerleave = () => {},
+    ontouchmove = () => {},
+    tooltip,
+    track = false,
+    children,
+    class: className,
+    ...restProps
+  }: ArcBaseProps = $props();
+
+  const c = new ArcState(() => ({ ...restProps, fill, fillOpacity, stroke, strokeWidth, opacity, data, tooltip, track }) as ArcProps);
+
+  let ref = $state<SVGPathElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  $effect.pre(() => {
+    trackRefProp = c.trackRef;
+  });
+
+  const onPointerEnter: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerenter?.(e);
+    if (tooltip) c.ctx.tooltip.show(e, data);
+  };
+
+  const onPointerMove: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointermove?.(e);
+    if (tooltip) c.ctx.tooltip.show(e, data);
+  };
+
+  const onPointerLeave: PointerEventHandler<SVGPathElement> = (e) => {
+    onpointerleave?.(e);
+    if (tooltip) c.ctx.tooltip.hide();
+  };
+</script>
+
+{#if track}
+  <Path
+    pathData={c.trackArc()}
+    stroke="none"
+    bind:pathRef={() => c.trackRef, (v: SVGPathElement | undefined) => (c.trackRef = v)}
+    {...extractLayerProps(track, 'lc-arc-track')}
+  />
+{/if}
+
+<Path
+  bind:pathRef={ref}
+  pathData={c.arc()}
+  transform="translate({c.xOffset}, {c.yOffset})"
+  {fill}
+  {fillOpacity}
+  {stroke}
+  {strokeWidth}
+  {opacity}
+  {...restProps}
+  class={cls('lc-arc-line', className)}
+  onpointerenter={onPointerEnter}
+  onpointermove={onPointerMove}
+  onpointerleave={onPointerLeave}
+  ontouchmove={((e) => {
+    ontouchmove?.(e);
+    if (tooltip) {
+      e.preventDefault();
+    }
+  }) satisfies TouchEventHandler<SVGPathElement>}
+/>
+
+{@render children?.({
+  centroid: c.trackArcCentroid,
+  boundingBox: c.boundingBox,
+  value: c.motionEndAngleValue,
+  startAngle: c.startAngle,
+  endAngle: c.arcEndAngle,
+  innerRadius: c.innerRadius,
+  outerRadius: c.outerRadius,
+  getTrackTextProps: c.getTrackTextProps,
+  getArcTextProps: c.getArcTextProps,
+})}

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

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { ArcProps } from './Arc.shared.svelte.js';
+export type ArcBaseLayerComponents = {
+    Path: Component<any>;
+};
+export type ArcBaseProps = ArcProps & ArcBaseLayerComponents;
+declare const Arc: Component<ArcBaseProps, {}, "ref" | "trackRef">;
+type Arc = ReturnType<typeof Arc>;
+export default Arc;

package/dist/components/Arc/Arc.canvas.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { ArcProps, ArcPropsWithoutHTML } from './Arc.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ArcBase from './Arc.base.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+
+  import type { ArcProps } from './Arc.shared.svelte.js';
+
+  let props: ArcProps = $props();
+</script>
+
+<ArcBase {Path} {...props} />

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

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

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

@@ -0,0 +1,165 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type Path from '../Path/Path.svelte';
+import type { PathPropsWithoutHTML } from '../Path/Path.shared.svelte.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { CommonStyleProps, Without } from '../../utils/types.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import { type ArcTextOptions, type ArcTextPosition, type GetArcTextProps } from '../../utils/arcText.svelte.js';
+export type ArcPropsWithoutHTML = {
+    value?: number;
+    initialValue?: number;
+    /** Domain [min,max] in degrees @default [0, 100] */
+    domain?: [number, number];
+    /** Range [min,max] in degrees. See also startAngle/endAngle @default [0, 360] */
+    range?: [number, number];
+    /** Start angle in radians */
+    startAngle?: number;
+    /** End angle in radians */
+    endAngle?: number;
+    /**
+     * Define innerRadius. Defaults to yRange min
+     *   • value >= 1: discrete value
+     *   • value < 1: percent of `outerRadius`
+     *   • value < 0: offset of `outerRadius`
+     */
+    innerRadius?: number;
+    /**
+     * Define outerRadius. Defaults to smallest width (xRange) or height (yRange) dimension (/2)
+     */
+    outerRadius?: number;
+    /** @default 0 */
+    cornerRadius?: number;
+    /** @default 0 */
+    padAngle?: number;
+    trackStartAngle?: number;
+    trackEndAngle?: number;
+    trackInnerRadius?: number;
+    trackOuterRadius?: number;
+    /** @default 0 */
+    trackCornerRadius?: number;
+    /** @default 0 */
+    trackPadAngle?: number;
+    /** @default 0 */
+    offset?: number;
+    /** Setup pointer events to show tooltip for related data. **Must set `data` prop as well** */
+    tooltip?: boolean;
+    /** Data to set when showing tooltip */
+    data?: any;
+    /**
+     * Pass true to enable the track with default props, or pass an object
+     * of props to enable the track.
+     */
+    track?: boolean | Partial<ComponentProps<typeof Path>>;
+    /** A reference to the track element @bindable */
+    trackRef?: SVGPathElement;
+    /** A reference to the arc element @bindable */
+    ref?: SVGPathElement;
+    children?: Snippet<[
+        {
+            centroid: [number, number];
+            boundingBox: DOMRect;
+            value: number;
+            startAngle: number;
+            endAngle: number;
+            innerRadius: number;
+            outerRadius: number;
+            getTrackTextProps: GetArcTextProps;
+            getArcTextProps: GetArcTextProps;
+        }
+    ]>;
+    motion?: MotionProp;
+} & CommonStyleProps;
+export type ArcProps = ArcPropsWithoutHTML & Without<SVGAttributes<SVGPathElement>, ArcPropsWithoutHTML & PathPropsWithoutHTML>;
+/**
+ * Reactive state shared by every per-layer Arc variant. Derives the d3-arc
+ * generators (`arc`, `trackArc`), resolved radii/angles, and the centroid
+ * used for snippet props.
+ */
+export declare class ArcState {
+    #private;
+    ctx: ChartState;
+    trackRef: SVGPathElement | undefined;
+    constructor(getProps: () => ArcProps);
+    get motionEndAngleValue(): any;
+    range: [number, number];
+    domain: [number, number];
+    endAngle: number;
+    scale: import("d3-scale").ScaleLinear<number, number, never>;
+    chartRadius: number;
+    outerRadius: number;
+    trackOuterRadius: number;
+    innerRadius: number;
+    trackInnerRadius: number;
+    startAngle: number;
+    trackStartAngle: number;
+    trackEndAngle: number;
+    trackCornerRadius: number;
+    trackPadAngle: number;
+    arcEndAngle: number;
+    arc: import("d3-shape").Arc<any, import("d3-shape").DefaultArcObject>;
+    trackArc: import("d3-shape").Arc<any, import("d3-shape").DefaultArcObject>;
+    angle: number;
+    xOffset: number;
+    yOffset: number;
+    trackArcCentroid: [number, number];
+    boundingBox: DOMRect;
+    getTrackTextProps: (position: ArcTextPosition, opts?: ArcTextOptions) => {
+        value?: string | number | ((d: any) => string | number);
+        segments?: import("../index.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<SVGAttributes<SVGElement>, "children">;
+        ref?: SVGTextElement;
+        format?: import("@layerstack/utils").FormatType | import("@layerstack/utils").FormatConfig;
+        motion?: 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 & Without<SVGAttributes<SVGTextElement>, import("../index.js").TextPropsWithoutHTML>;
+    getArcTextProps: (position: ArcTextPosition, opts?: ArcTextOptions) => {
+        value?: string | number | ((d: any) => string | number);
+        segments?: import("../index.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<SVGAttributes<SVGElement>, "children">;
+        ref?: SVGTextElement;
+        format?: import("@layerstack/utils").FormatType | import("@layerstack/utils").FormatConfig;
+        motion?: 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 & Without<SVGAttributes<SVGTextElement>, import("../index.js").TextPropsWithoutHTML>;
+}

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

@@ -0,0 +1,127 @@
+import { arc as d3arc } from 'd3-shape';
+import { scaleLinear } from 'd3-scale';
+import { max } from 'd3-array';
+import { createMotion } from '../../utils/motion.svelte.js';
+import { degreesToRadians } from '../../utils/math.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { createArcTextProps, } from '../../utils/arcText.svelte.js';
+function getOuterRadius(outerRadius, chartRadius) {
+    if (!outerRadius)
+        return chartRadius;
+    if (outerRadius > 1)
+        return outerRadius;
+    if (outerRadius > 0)
+        return chartRadius * outerRadius;
+    if (outerRadius < 0)
+        return chartRadius + outerRadius;
+    return outerRadius;
+}
+/**
+ * Reactive state shared by every per-layer Arc variant. Derives the d3-arc
+ * generators (`arc`, `trackArc`), resolved radii/angles, and the centroid
+ * used for snippet props.
+ */
+export class ArcState {
+    #getProps = () => ({});
+    ctx = getChartContext();
+    trackRef = $state();
+    #motionEndAngle;
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        this.#motionEndAngle = createMotion(initial.initialValue ?? 0, () => getProps().value ?? 0, initial.motion);
+    }
+    get motionEndAngleValue() {
+        return this.#motionEndAngle.current;
+    }
+    range = $derived(this.#getProps().range ?? [0, 360]);
+    domain = $derived(this.#getProps().domain ?? [0, 100]);
+    endAngle = $derived.by(() => {
+        const props = this.#getProps();
+        return (props.endAngle ??
+            degreesToRadians((this.ctx.config.xRange ? max(this.ctx.config.xRange) : max(this.range))));
+    });
+    scale = $derived(scaleLinear().domain(this.domain).range(this.range));
+    chartRadius = $derived((Math.min(this.ctx.width, this.ctx.height) ?? 0) / 2);
+    outerRadius = $derived(getOuterRadius(this.#getProps().outerRadius, this.chartRadius));
+    trackOuterRadius = $derived.by(() => {
+        const trackOuterRadiusProp = this.#getProps().trackOuterRadius;
+        return trackOuterRadiusProp
+            ? getOuterRadius(trackOuterRadiusProp, this.chartRadius)
+            : this.outerRadius;
+    });
+    #getInnerRadius(innerRadius, outerRadius) {
+        if (innerRadius == null)
+            return Math.min(...this.ctx.yRange);
+        if (innerRadius > 1)
+            return innerRadius;
+        if (innerRadius > 0)
+            return outerRadius * innerRadius;
+        if (innerRadius < 0)
+            return outerRadius + innerRadius;
+        return innerRadius;
+    }
+    innerRadius = $derived(this.#getInnerRadius(this.#getProps().innerRadius, this.outerRadius));
+    trackInnerRadius = $derived.by(() => {
+        const trackInnerRadiusProp = this.#getProps().trackInnerRadius;
+        return trackInnerRadiusProp
+            ? this.#getInnerRadius(trackInnerRadiusProp, this.trackOuterRadius)
+            : this.innerRadius;
+    });
+    startAngle = $derived(this.#getProps().startAngle ?? degreesToRadians(this.range[0]));
+    trackStartAngle = $derived(this.#getProps().trackStartAngle ??
+        this.#getProps().startAngle ??
+        degreesToRadians(this.range[0]));
+    trackEndAngle = $derived(this.#getProps().trackEndAngle ??
+        this.#getProps().endAngle ??
+        degreesToRadians(this.range[1]));
+    trackCornerRadius = $derived(this.#getProps().trackCornerRadius ?? this.#getProps().cornerRadius ?? 0);
+    trackPadAngle = $derived(this.#getProps().trackPadAngle ?? this.#getProps().padAngle ?? 0);
+    arcEndAngle = $derived(this.#getProps().endAngle ?? degreesToRadians(this.scale(this.motionEndAngleValue)));
+    arc = $derived.by(() => {
+        const props = this.#getProps();
+        return d3arc()
+            .innerRadius(this.innerRadius)
+            .outerRadius(this.outerRadius)
+            .startAngle(this.startAngle)
+            .endAngle(this.arcEndAngle)
+            .cornerRadius(props.cornerRadius ?? 0)
+            .padAngle(props.padAngle ?? 0);
+    });
+    trackArc = $derived(d3arc()
+        .innerRadius(this.trackInnerRadius)
+        .outerRadius(this.trackOuterRadius)
+        .startAngle(this.trackStartAngle)
+        .endAngle(this.trackEndAngle)
+        .cornerRadius(this.trackCornerRadius)
+        .padAngle(this.trackPadAngle));
+    angle = $derived(((this.startAngle ?? 0) + (this.endAngle ?? 0)) / 2);
+    xOffset = $derived(Math.sin(this.angle) * (this.#getProps().offset ?? 0));
+    yOffset = $derived(-Math.cos(this.angle) * (this.#getProps().offset ?? 0));
+    trackArcCentroid = $derived.by(() => {
+        // @ts-expect-error - this is fine.
+        const centroid = this.trackArc.centroid();
+        return [centroid[0] + this.xOffset, centroid[1] + this.yOffset];
+    });
+    boundingBox = $derived(this.trackRef ? this.trackRef.getBBox() : {});
+    getTrackTextProps = (position, opts = {}) => {
+        return createArcTextProps({
+            startAngle: () => this.trackStartAngle,
+            endAngle: () => this.trackEndAngle,
+            outerRadius: () => this.trackOuterRadius + (opts.outerPadding ?? 0),
+            innerRadius: () => this.trackInnerRadius - (opts.innerPadding ?? 0),
+            cornerRadius: () => this.trackCornerRadius,
+            centroid: () => this.trackArcCentroid,
+        }, opts, position).current;
+    };
+    getArcTextProps = (position, opts = {}) => {
+        return createArcTextProps({
+            startAngle: () => this.startAngle,
+            endAngle: () => this.arcEndAngle,
+            outerRadius: () => this.outerRadius + (opts.outerPadding ?? 0),
+            innerRadius: () => this.innerRadius - (opts.innerPadding ?? 0),
+            cornerRadius: () => this.#getProps().cornerRadius ?? 0,
+            centroid: () => this.trackArcCentroid,
+        }, opts, position).current;
+    };
+}

package/dist/components/Arc/Arc.svelte

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

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

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

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

@@ -1,9 +1,9 @@
 import { describe, expect, it, vi } 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 Arc from './Arc.svelte';
-import Text from './Text.svelte';
+import Text from '../Text/Text.svelte';
 const defaultProps = {
     fill: 'currentColor',
 };

package/dist/components/Arc/Arc.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { ArcProps, ArcPropsWithoutHTML } from './Arc.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ArcBase from './Arc.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+
+  import type { ArcProps } from './Arc.shared.svelte.js';
+
+  let props: ArcProps = $props();
+</script>
+
+<ArcBase {Path} {...props} />

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

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

package/dist/components/ArcLabel/ArcLabel.base.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+
+  export type ArcLabelBaseLayerComponents = {
+    Path: Component<any>;
+    Text: Component<any>;
+  };
+
+  export type ArcLabelBaseProps = ArcLabelProps & ArcLabelBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { ArcLabelState } from './ArcLabel.shared.svelte.js';
+
+  let {
+    Path,
+    Text,
+    getArcTextProps,
+    centroid,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    placement = 'centroid',
+    startOffset,
+    outerPadding,
+    calloutLineLength = 16,
+    calloutLabelOffset = 12,
+    calloutPadding = 4,
+    line,
+    offset = 0,
+    ...restProps
+  }: ArcLabelBaseProps = $props();
+
+  const c = new ArcLabelState(
+    () =>
+      ({
+        getArcTextProps,
+        centroid,
+        startAngle,
+        endAngle,
+        innerRadius,
+        outerRadius,
+        placement,
+        startOffset,
+        outerPadding,
+        calloutLineLength,
+        calloutLabelOffset,
+        calloutPadding,
+        line,
+        offset,
+      }) as ArcLabelProps
+  );
+</script>
+
+{#if placement === 'callout' && c.calloutGeometry}
+  <Path pathData={c.calloutGeometry.pathData} {...line} />
+{/if}
+
+<Text {...c.arcTextProps} {...restProps} />

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

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+export type ArcLabelBaseLayerComponents = {
+    Path: Component<any>;
+    Text: Component<any>;
+};
+export type ArcLabelBaseProps = ArcLabelProps & ArcLabelBaseLayerComponents;
+declare const ArcLabel: Component<ArcLabelBaseProps, {}, "">;
+type ArcLabel = ReturnType<typeof ArcLabel>;
+export default ArcLabel;

package/dist/components/ArcLabel/ArcLabel.canvas.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.canvas.svelte';
+  import Text from '../Text/Text.canvas.svelte';
+
+  import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+
+  let props: ArcLabelProps = $props();
+</script>
+
+<ArcLabelBase {Path} {Text} {...props} />

package/dist/components/ArcLabel/ArcLabel.canvas.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;