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

package/dist/canvas.js

@@ -0,0 +1,128 @@
+/**
+ * Canvas-only variants of layer-agnostic components.
+ *
+ * Each export here is a Canvas-specific implementation. Use these when you
+ * know your chart only renders to Canvas and want a smaller bundle.
+ *
+ * The agnostic versions (e.g. `import { Circle } from './index.js'`) still
+ * work and dispatch to these per-layer variants under the hood.
+ */
+// `Layer` is an alias for the layer wrapper of this sub-path. Importing
+// `Layer` from `layerchart/canvas` is equivalent to importing `Canvas`.
+export { default as Canvas, default as Layer } from './components/layers/Canvas.svelte';
+export { default as Chart } from './components/Chart/Chart.canvas.svelte';
+export { default as ChartCore } from './components/Chart/ChartCore.svelte';
+export { default as ChartChildren } from './components/ChartChildren/ChartChildren.canvas.svelte';
+export { default as Circle } from './components/Circle/Circle.canvas.svelte';
+export { default as Text } from './components/Text/Text.canvas.svelte';
+export { default as Rect } from './components/Rect/Rect.canvas.svelte';
+export { default as Line } from './components/Line/Line.canvas.svelte';
+export { default as Path } from './components/Path/Path.canvas.svelte';
+export { default as ClipPath } from './components/ClipPath/ClipPath.canvas.svelte';
+export { default as RadialGradient } from './components/RadialGradient/RadialGradient.canvas.svelte';
+export { default as LinearGradient } from './components/LinearGradient/LinearGradient.canvas.svelte';
+export { default as Group } from './components/Group/Group.canvas.svelte';
+export { default as Pattern } from './components/Pattern/Pattern.canvas.svelte';
+export { default as Ellipse } from './components/Ellipse/Ellipse.canvas.svelte';
+export { default as Polygon } from './components/Polygon/Polygon.canvas.svelte';
+export { default as Image } from './components/Image/Image.canvas.svelte';
+export { default as Axis } from './components/Axis/Axis.canvas.svelte';
+export { default as Rule } from './components/Rule/Rule.canvas.svelte';
+export { default as Grid } from './components/Grid/Grid.canvas.svelte';
+export { default as Highlight } from './components/Highlight/Highlight.canvas.svelte';
+export { default as Arc } from './components/Arc/Arc.canvas.svelte';
+export { default as Spline } from './components/Spline/Spline.canvas.svelte';
+export { default as Area } from './components/Area/Area.canvas.svelte';
+export { default as Pie } from './components/Pie/Pie.canvas.svelte';
+export { default as ArcLabel } from './components/ArcLabel/ArcLabel.canvas.svelte';
+export { default as Bar } from './components/Bar/Bar.canvas.svelte';
+export { default as Bars } from './components/Bars/Bars.canvas.svelte';
+export { default as Points } from './components/Points/Points.canvas.svelte';
+export { default as Labels } from './components/Labels/Labels.canvas.svelte';
+export { default as Frame } from './components/Frame/Frame.canvas.svelte';
+export { default as Cell } from './components/Cell/Cell.canvas.svelte';
+export { default as Threshold } from './components/Threshold/Threshold.canvas.svelte';
+export { default as AnnotationLine } from './components/AnnotationLine/AnnotationLine.canvas.svelte';
+export { default as AnnotationPoint } from './components/AnnotationPoint/AnnotationPoint.canvas.svelte';
+export { default as Trail } from './components/Trail/Trail.canvas.svelte';
+export { default as Vector } from './components/Vector/Vector.canvas.svelte';
+export { default as Link } from './components/Link/Link.canvas.svelte';
+export { default as AnnotationRange } from './components/AnnotationRange/AnnotationRange.canvas.svelte';
+export { default as Hull } from './components/Hull/Hull.canvas.svelte';
+export { default as Density } from './components/Density/Density.canvas.svelte';
+export { default as Calendar } from './components/Calendar/Calendar.canvas.svelte';
+export { default as CircleClipPath } from './components/CircleClipPath/CircleClipPath.canvas.svelte';
+export { default as Voronoi } from './components/Voronoi/Voronoi.canvas.svelte';
+export { default as Contour } from './components/Contour/Contour.canvas.svelte';
+export { default as Month } from './components/Month/Month.canvas.svelte';
+export { default as Raster } from './components/Raster/Raster.canvas.svelte';
+export { default as Violin } from './components/Violin/Violin.canvas.svelte';
+export { default as BoxPlot } from './components/BoxPlot/BoxPlot.canvas.svelte';
+// Geo components
+export { default as GeoPath } from './components/geo/GeoPath/GeoPath.canvas.svelte';
+export { default as GeoSpline } from './components/geo/GeoSpline/GeoSpline.canvas.svelte';
+export { default as GeoPoint } from './components/geo/GeoPoint/GeoPoint.canvas.svelte';
+export { default as GeoCircle } from './components/geo/GeoCircle/GeoCircle.canvas.svelte';
+export { default as GeoClipPath } from './components/geo/GeoClipPath/GeoClipPath.canvas.svelte';
+export { default as GeoEdgeFade } from './components/geo/GeoEdgeFade/GeoEdgeFade.canvas.svelte';
+export { default as GeoTile } from './components/geo/GeoTile/GeoTile.canvas.svelte';
+export { default as TileImage } from './components/geo/TileImage/TileImage.canvas.svelte';
+export { default as Graticule } from './components/geo/Graticule/Graticule.canvas.svelte';
+// Ribbon (graph) — uses Path
+export { default as Ribbon } from './components/graph/Ribbon/Ribbon.canvas.svelte';
+// --- Layer-agnostic re-exports ---
+// These components don't render layer-specific elements (pure logic, layout
+// helpers, context providers, or composite chart wrappers). Re-exported here
+// so the per-layer sub-path has a complete API.
+// Helpers / context providers
+export { default as Blur } from './components/Blur.svelte';
+export * from './components/Blur.svelte';
+export { default as Bounds } from './components/Bounds.svelte';
+export * from './components/Bounds.svelte';
+export { default as BrushContext } from './components/BrushContext.svelte';
+export * from './components/BrushContext.svelte';
+export { default as CircleLegend } from './components/CircleLegend.svelte';
+export * from './components/CircleLegend.svelte';
+export { default as ColorRamp } from './components/ColorRamp.svelte';
+export * from './components/ColorRamp.svelte';
+export { default as Legend } from './components/Legend.svelte';
+export * from './components/Legend.svelte';
+export { default as MotionPath } from './components/MotionPath.svelte';
+export * from './components/MotionPath.svelte';
+export { default as Point } from './components/Point.svelte';
+export * from './components/Point.svelte';
+export { default as TransformContext } from './components/TransformContext.svelte';
+export * from './components/TransformContext.svelte';
+export * as Tooltip from './components/tooltip/index.js';
+export * from './components/tooltip/TooltipContext.svelte';
+// High-level chart wrappers
+export { default as LineChart } from './components/charts/LineChart/LineChart.canvas.svelte';
+export { default as AreaChart } from './components/charts/AreaChart/AreaChart.canvas.svelte';
+export { default as BarChart } from './components/charts/BarChart/BarChart.canvas.svelte';
+export { default as PieChart } from './components/charts/PieChart/PieChart.canvas.svelte';
+export { default as ScatterChart } from './components/charts/ScatterChart/ScatterChart.canvas.svelte';
+export { default as ArcChart } from './components/charts/ArcChart/ArcChart.canvas.svelte';
+// Layout components
+export { default as Tree } from './components/hierarchy/Tree.svelte';
+export * from './components/hierarchy/Tree.svelte';
+export { default as Treemap } from './components/hierarchy/Treemap.svelte';
+export * from './components/hierarchy/Treemap.svelte';
+export { default as Pack } from './components/hierarchy/Pack.svelte';
+export * from './components/hierarchy/Pack.svelte';
+export { default as Partition } from './components/hierarchy/Partition.svelte';
+export * from './components/hierarchy/Partition.svelte';
+export { default as Chord } from './components/graph/Chord.svelte';
+export * from './components/graph/Chord.svelte';
+export { default as Dagre } from './components/graph/Dagre.svelte';
+export * from './components/graph/Dagre.svelte';
+export { default as Sankey } from './components/graph/Sankey.svelte';
+export * from './components/graph/Sankey.svelte';
+export { default as ForceSimulation } from './components/force/ForceSimulation.svelte';
+export * from './components/force/ForceSimulation.svelte';
+// Geo helpers (no per-layer rendering)
+export { default as GeoLegend } from './components/geo/GeoLegend/GeoLegend.svelte';
+export { default as GeoProjection } from './components/geo/GeoProjection/GeoProjection.svelte';
+export { default as GeoRaster } from './components/geo/GeoRaster/GeoRaster.svelte';
+export { default as GeoVisible } from './components/geo/GeoVisible/GeoVisible.svelte';
+export { default as RectClipPath } from './components/RectClipPath/RectClipPath.canvas.svelte';
+export { default as ChartClipPath } from './components/ChartClipPath/ChartClipPath.canvas.svelte';

package/dist/components/AnnotationLine/AnnotationLine.base.svelte

@@ -0,0 +1,159 @@
+<script lang="ts" module>
+  import type { Component, ComponentProps } from 'svelte';
+  import type { AnnotationLineProps } from './AnnotationLine.shared.svelte.js';
+
+  export type AnnotationLineBaseLayerComponents = {
+    Line: Component<any>;
+    Text: Component<any>;
+  };
+
+  export type AnnotationLineBaseProps = AnnotationLineProps & AnnotationLineBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { getChartContext } from '../../contexts/chart.js';
+  import { cls } from '@layerstack/tailwind';
+
+  let {
+    Line,
+    Text,
+    x,
+    y,
+    x1: x1Prop,
+    y1: y1Prop,
+    x2: x2Prop,
+    y2: y2Prop,
+    label,
+    labelPlacement = 'top-right',
+    labelXOffset = 0,
+    labelYOffset = 0,
+    props,
+  }: AnnotationLineBaseProps = $props();
+
+  const ctx = getChartContext();
+
+  const isVertical = $derived(x != null || (x1Prop != null && x2Prop != null && x1Prop === x2Prop));
+
+  const line = $derived({
+    x1: x1Prop != null ? ctx.xScale(x1Prop) : x != null ? ctx.xScale(x) : ctx.xRange[0],
+    y1:
+      y1Prop != null ? ctx.yScale(y1Prop) : y != null && x == null ? ctx.yScale(y) : ctx.yRange[0],
+    x2: x2Prop != null ? ctx.xScale(x2Prop) : x != null ? ctx.xScale(x) : ctx.xRange[1],
+    y2: y2Prop != null ? ctx.yScale(y2Prop) : y != null ? ctx.yScale(y) : ctx.yRange[1],
+  });
+
+  const isSloped = $derived(!isVertical && line.x1 !== line.x2 && line.y1 !== line.y2);
+
+  const slopeAngle = $derived.by(() => {
+    let angle = Math.atan2(line.y2 - line.y1, line.x2 - line.x1) * (180 / Math.PI);
+    if (angle > 90) angle -= 180;
+    else if (angle < -90) angle += 180;
+    return angle;
+  });
+
+  const labelProps = $derived.by(() => {
+    const isLeft = labelPlacement.includes('left');
+    const isRight = labelPlacement.includes('right');
+    const isTop = labelPlacement.includes('top');
+    const isBottom = labelPlacement.includes('bottom');
+
+    if (isVertical) {
+      return {
+        x: line.x1 + (isLeft ? -labelXOffset : labelXOffset),
+        y:
+          (isTop ? line.y2 : isBottom ? line.y1 : (line.y1 - line.y2) / 2) +
+          (['top', 'bottom-left', 'bottom-right'].includes(labelPlacement)
+            ? -labelYOffset
+            : labelYOffset),
+        dy: -2,
+        textAnchor: isLeft ? 'end' : isRight ? 'start' : 'middle',
+        verticalAnchor:
+          labelPlacement === 'top'
+            ? 'end'
+            : labelPlacement === 'bottom'
+              ? 'start'
+              : isTop
+                ? 'start'
+                : isBottom
+                  ? 'end'
+                  : 'middle',
+      };
+    }
+
+    const _x = isLeft ? line.x1 : isRight ? line.x2 : (line.x1 + line.x2) / 2;
+    const _y = isLeft ? line.y1 : isRight ? line.y2 : (line.y1 + line.y2) / 2;
+    const textAnchor =
+      labelPlacement === 'left'
+        ? 'end'
+        : labelPlacement === 'right'
+          ? 'start'
+          : isLeft
+            ? 'start'
+            : isRight
+              ? 'end'
+              : 'middle';
+    const verticalAnchor = isTop ? 'end' : isBottom ? 'start' : 'middle';
+
+    if (isSloped) {
+      const aSign = ['left', 'top-right', 'bottom-right'].includes(labelPlacement) ? -1 : 1;
+      const pSign = isTop ? 1 : -1;
+      const alongLine = aSign * labelXOffset;
+      const perpAbove = pSign * labelYOffset + 2;
+      const theta = (slopeAngle * Math.PI) / 180;
+      const cosT = Math.cos(theta);
+      const sinT = Math.sin(theta);
+      return {
+        x: _x,
+        y: _y,
+        rotate: slopeAngle,
+        dx: alongLine * cosT + perpAbove * sinT,
+        dy: alongLine * sinT - perpAbove * cosT,
+        textAnchor,
+        verticalAnchor,
+      };
+    }
+
+    return {
+      x:
+        _x +
+        (['left', 'top-right', 'bottom-right'].includes(labelPlacement)
+          ? -labelXOffset
+          : labelXOffset),
+      y: _y + (isTop ? -labelYOffset : labelYOffset),
+      dy: -2,
+      textAnchor,
+      verticalAnchor,
+    };
+  });
+</script>
+
+<Line
+  x1={line.x1}
+  y1={line.y1}
+  x2={line.x2}
+  y2={line.y2}
+  {...props?.line}
+  class={cls('lc-annotation-line', props?.line?.class)}
+/>
+
+{#if label}
+  <Text
+    value={label}
+    {...labelProps}
+    {...props?.label}
+    class={cls('lc-annotation-line-label', props?.label?.class)}
+  />
+{/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-line)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-annotation-line-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { AnnotationLineProps } from './AnnotationLine.shared.svelte.js';
+export type AnnotationLineBaseLayerComponents = {
+    Line: Component<any>;
+    Text: Component<any>;
+};
+export type AnnotationLineBaseProps = AnnotationLineProps & AnnotationLineBaseLayerComponents;
+declare const AnnotationLine: Component<AnnotationLineBaseProps, {}, "">;
+type AnnotationLine = ReturnType<typeof AnnotationLine>;
+export default AnnotationLine;

package/dist/components/AnnotationLine/AnnotationLine.canvas.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  export type {
+    AnnotationLineProps,
+    AnnotationLinePropsWithoutHTML,
+  } from './AnnotationLine.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import AnnotationLineBase from './AnnotationLine.base.svelte';
+  import Line from '../Line/Line.canvas.svelte';
+  import Text from '../Text/Text.canvas.svelte';
+  import type { AnnotationLineProps } from './AnnotationLine.shared.svelte.js';
+
+  let props: AnnotationLineProps = $props();
+</script>
+
+<AnnotationLineBase {Line} {Text} {...props} />

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

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

package/dist/components/AnnotationLine/AnnotationLine.html.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  export type {
+    AnnotationLineProps,
+    AnnotationLinePropsWithoutHTML,
+  } from './AnnotationLine.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import AnnotationLineBase from './AnnotationLine.base.svelte';
+  import Line from '../Line/Line.html.svelte';
+  import Text from '../Text/Text.html.svelte';
+  import type { AnnotationLineProps } from './AnnotationLine.shared.svelte.js';
+
+  let props: AnnotationLineProps = $props();
+</script>
+
+<AnnotationLineBase {Line} {Text} {...props} />

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

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

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

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { CommonStyleProps, Without } from '../../utils/types.js';
+import type { SingleDomainType } from '../../utils/scales.svelte.js';
+import type Line from '../Line/Line.svelte';
+import type Text from '../Text/Text.svelte';
+import type { Placement } from '../types.js';
+export type AnnotationLinePropsWithoutHTML = {
+    x?: SingleDomainType;
+    y?: SingleDomainType;
+    x1?: SingleDomainType;
+    y1?: SingleDomainType;
+    x2?: SingleDomainType;
+    y2?: SingleDomainType;
+    label?: string;
+    labelPlacement?: Placement;
+    labelXOffset?: number;
+    labelYOffset?: number;
+    props?: {
+        label?: Partial<ComponentProps<typeof Text>>;
+        line?: Partial<ComponentProps<typeof Line>>;
+    };
+} & CommonStyleProps;
+export type AnnotationLineProps = AnnotationLinePropsWithoutHTML & Without<SVGAttributes<Element>, AnnotationLinePropsWithoutHTML>;

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

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

package/dist/components/AnnotationLine/AnnotationLine.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  export type {
+    AnnotationLineProps,
+    AnnotationLinePropsWithoutHTML,
+  } from './AnnotationLine.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import AnnotationLineSvg from './AnnotationLine.svg.svelte';
+  import AnnotationLineCanvas from './AnnotationLine.canvas.svelte';
+  import AnnotationLineHtml from './AnnotationLine.html.svelte';
+  import type { AnnotationLineProps } from './AnnotationLine.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: AnnotationLineProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <AnnotationLineSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <AnnotationLineCanvas {...props} />
+{:else if layerCtx === 'html'}
+  <AnnotationLineHtml {...props} />
+{/if}

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

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

package/dist/components/AnnotationLine/AnnotationLine.svg.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  export type {
+    AnnotationLineProps,
+    AnnotationLinePropsWithoutHTML,
+  } from './AnnotationLine.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import AnnotationLineBase from './AnnotationLine.base.svelte';
+  import Line from '../Line/Line.svg.svelte';
+  import Text from '../Text/Text.svg.svelte';
+  import type { AnnotationLineProps } from './AnnotationLine.shared.svelte.js';
+
+  let props: AnnotationLineProps = $props();
+</script>
+
+<AnnotationLineBase {Line} {Text} {...props} />

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

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

package/dist/components/AnnotationPoint/AnnotationPoint.base.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { AnnotationPointProps } from './AnnotationPoint.shared.svelte.js';
+
+  export type AnnotationPointBaseLayerComponents = {
+    Circle: Component<any>;
+    /**
+     * Used for callout link rendering. Optional because the HTML layer
+     * doesn't have a `Link` variant; HTML annotation points without callouts
+     * still render correctly.
+     */
+    Link?: Component<any>;
+    Text: Component<any>;
+  };
+
+  export type AnnotationPointBaseProps = AnnotationPointProps &
+    AnnotationPointBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { getChartContext } from '../../contexts/chart.js';
+  import { getGeoContext } from '../../contexts/geo.js';
+  import { isScaleBand } from '../../utils/scales.svelte.js';
+  import { cls } from '@layerstack/tailwind';
+
+  let {
+    Circle,
+    Link,
+    Text,
+    x,
+    y,
+    r = 4,
+    label,
+    labelPlacement = 'center',
+    labelXOffset = 0,
+    labelYOffset = 0,
+    link,
+    details,
+    props,
+  }: AnnotationPointBaseProps = $props();
+
+  const ctx = getChartContext();
+  const geo = getGeoContext();
+
+  const point = $derived.by(() => {
+    if (geo.projection && typeof x === 'number' && typeof y === 'number') {
+      const [px, py] = geo.projection([x, y]) ?? [0, 0];
+      return { x: px, y: py };
+    }
+    return {
+      x: x ? ctx.xScale(x) + (isScaleBand(ctx.xScale) ? ctx.xScale.bandwidth() / 2 : 0) : 0,
+      y: y
+        ? ctx.yScale(y) + (isScaleBand(ctx.yScale) ? ctx.yScale.bandwidth() / 2 : 0)
+        : ctx.height,
+    };
+  });
+
+  const labelProps = $derived.by(() => {
+    const dirX = labelPlacement.includes('left') ? -1 : labelPlacement.includes('right') ? 1 : 0;
+    const dirY = labelPlacement.includes('top') ? -1 : labelPlacement.includes('bottom') ? 1 : 0;
+    const mag = Math.hypot(dirX, dirY) || 1;
+    const signX = labelPlacement.includes('left') ? -1 : 1;
+    const signY = labelPlacement.includes('top') ? -1 : 1;
+
+    return {
+      x: point.x + (r * dirX) / mag + labelXOffset * signX,
+      y: point.y + (r * dirY) / mag + labelYOffset * signY,
+      dy: -2,
+      textAnchor: labelPlacement.includes('left')
+        ? 'end'
+        : labelPlacement.includes('right')
+          ? 'start'
+          : 'middle',
+      verticalAnchor: labelPlacement.includes('top')
+        ? 'end'
+        : labelPlacement.includes('bottom')
+          ? 'start'
+          : 'middle',
+    };
+  });
+
+  const linkEndpoints = $derived.by(() => {
+    if (!link) return null;
+
+    const dirX = labelPlacement.includes('left') ? -1 : labelPlacement.includes('right') ? 1 : 0;
+    const dirY = labelPlacement.includes('top') ? -1 : labelPlacement.includes('bottom') ? 1 : 0;
+    if (dirX === 0 && dirY === 0) return null;
+
+    const mag = Math.hypot(dirX, dirY);
+    return {
+      source: { x: point.x + (r * dirX) / mag, y: point.y + (r * dirY) / mag },
+      target: { x: labelProps.x as number, y: labelProps.y as number },
+    };
+  });
+
+  const linkProps = $derived(typeof link === 'object' ? link : {});
+
+  function onPointerMove(e: PointerEvent | MouseEvent | TouchEvent) {
+    if (details) {
+      e.stopPropagation();
+      ctx.tooltip.show(e, { annotation: { label, details } });
+    }
+  }
+
+  function onPointerLeave(e: PointerEvent | MouseEvent | TouchEvent) {
+    if (details) {
+      e.stopPropagation();
+      ctx.tooltip.hide();
+    }
+  }
+</script>
+
+<Circle
+  cx={point.x}
+  cy={point.y}
+  {r}
+  onpointermove={onPointerMove}
+  onmousemove={onPointerMove}
+  ontouchmove={onPointerMove}
+  onpointerleave={onPointerLeave}
+  onmouseleave={onPointerLeave}
+  ontouchend={onPointerLeave}
+  {...props?.circle}
+  class={cls('lc-annotation-point', link && 'lc-annotation-point-ring', props?.circle?.class)}
+/>
+
+{#if linkEndpoints && Link}
+  <Link
+    x1={linkEndpoints.source.x}
+    y1={linkEndpoints.source.y}
+    x2={linkEndpoints.target.x}
+    y2={linkEndpoints.target.y}
+    type="straight"
+    {...linkProps}
+    class={cls(
+      'lc-annotation-point-link',
+      typeof linkProps.class === 'string' ? linkProps.class : undefined
+    )}
+  />
+{/if}
+
+{#if label}
+  <Text
+    value={label}
+    {...labelProps}
+    {...props?.label}
+    class={cls('lc-annotation-point-label', props?.label?.class)}
+  />
+{/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-point-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+
+    :global(:where(.lc-annotation-point-ring)) {
+      --fill-color: none;
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-annotation-point-link)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+      fill: none;
+      pointer-events: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { Component } from 'svelte';
+import type { AnnotationPointProps } from './AnnotationPoint.shared.svelte.js';
+export type AnnotationPointBaseLayerComponents = {
+    Circle: Component<any>;
+    /**
+     * Used for callout link rendering. Optional because the HTML layer
+     * doesn't have a `Link` variant; HTML annotation points without callouts
+     * still render correctly.
+     */
+    Link?: Component<any>;
+    Text: Component<any>;
+};
+export type AnnotationPointBaseProps = AnnotationPointProps & AnnotationPointBaseLayerComponents;
+declare const AnnotationPoint: Component<AnnotationPointBaseProps, {}, "">;
+type AnnotationPoint = ReturnType<typeof AnnotationPoint>;
+export default AnnotationPoint;

package/dist/components/AnnotationPoint/AnnotationPoint.canvas.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" module>
+  export type {
+    AnnotationPointProps,
+    AnnotationPointPropsWithoutHTML,
+  } from './AnnotationPoint.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import AnnotationPointBase from './AnnotationPoint.base.svelte';
+  import Circle from '../Circle/Circle.canvas.svelte';
+  import Link from '../Link/Link.canvas.svelte';
+  import Text from '../Text/Text.canvas.svelte';
+  import type { AnnotationPointProps } from './AnnotationPoint.shared.svelte.js';
+
+  let props: AnnotationPointProps = $props();
+</script>
+
+<AnnotationPointBase {Circle} {Link} {Text} {...props} />

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

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