@fundar/data-chart-telling 0.0.64 → 1.0.0

package/dist/markers/hull/HullMarker.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Hull } from 'svelteplot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { HullMarkerConfig } from '../../types/markers/common';
+
+	/** Renders one `'hull'` marker as `<Hull>` - the convex hull around a cluster of points. */
+	let { marker }: { marker: HullMarkerConfig } = $props();
+
+	const cfg = $derived(getConfiguration());
+	const data = $derived(marker.data ?? []);
+	const channelFill = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
+</script>
+
+<Hull
+	{data}
+	x={marker.x}
+	y={marker.y}
+	z={marker.grouping}
+	fill={marker.styles?.fill ?? channelFill ?? 'none'}
+	fillOpacity={marker.styles?.fillOpacity}
+	stroke={marker.styles?.stroke ?? channelFill}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+/>

package/dist/markers/hull/HullMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HullMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: HullMarkerConfig;
+};
+declare const HullMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type HullMarker = ReturnType<typeof HullMarker>;
+export default HullMarker;

package/dist/markers/image/ImageMarker.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Image } from 'svelteplot';
+	import type { ImageMarkerConfig } from '../../types/markers/common';
+
+	/** Renders one `'image'` marker as `<Image>` - an image centered on each row's `x`/`y`. */
+	let { marker }: { marker: ImageMarkerConfig } = $props();
+
+	const data = $derived(marker.data ?? []);
+</script>
+
+<Image
+	{data}
+	x={marker.x}
+	y={marker.y}
+	src={marker.src}
+	r={marker.r}
+	width={marker.width}
+	height={marker.height}
+	title={marker.title}
+	preserveAspectRatio={marker.preserveAspectRatio}
+	opacity={marker.opacity}
+/>

package/dist/markers/image/ImageMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ImageMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: ImageMarkerConfig;
+};
+declare const ImageMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageMarker = ReturnType<typeof ImageMarker>;
+export default ImageMarker;

package/dist/markers/inset/InsetMarker.svelte

@@ -1,163 +1,197 @@
 <script lang="ts" generics="TProps extends Record<string, unknown>">
-  import { geoPath } from 'd3-geo';
-  import { buildInsetProjection } from './insetProjection';
-  import { insetBox } from './insetLayout';
-  import { filterGeometryParts } from '../../plots/utils/geoAccessors';
-  import TooltipLayout from '../../layout/tooltip/TooltipLayout.svelte';
-  import type { GeoInsetMarkerConfig } from '../../types/markers/geo';
-  import type { GeoFeature } from '../../types/plots/data/geo';
-  import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+	import { geoPath } from 'd3-geo';
+	import { buildInsetProjection } from './insetProjection';
+	import { insetBox } from './insetLayout';
+	import { filterGeometryParts } from '../../plots/utils/geoAccessors';
+	import Tooltip from '../../layout/tooltip/Tooltip.svelte';
+	import type { GeoInsetMarkerConfig } from '../../types/markers/geo';
+	import type { GeoFeature } from '../../types/plots/data/geo';
+	import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
 
-  /**
-   * A small, independently-projected map panel anchored to a corner/edge of
-   * the plot — see `GeoInsetMarkerConfig`'s doc comment. Renders raw `<path>`s via
-   * its own `d3-geo` `geoPath`, deliberately not svelteplot's `<Geo>` mark:
-   * that mark is bound to the plot's *shared* projection scale, but an inset
-   * needs its own, independently fit to just what it's showing.
-   */
-  let {
-    marker,
-    features,
-    width,
-    height,
-    left = 0,
-    top = 0,
-    defaultFill,
-    tooltipAnchorX,
-    tooltipAnchorY,
-  }: {
-    marker: GeoInsetMarkerConfig<TProps>;
-    /**
-     * The plot's own already-tagged features (`__id` set), with full,
-     * unreduced geometry regardless of the plot's own `excludeParts` — used
-     * when `marker.data` is omitted, so an inset can show a part the main
-     * map excludes without needing a separate dataset.
-     */
-    features: (GeoFeature<TProps> & { __id: string })[];
-    /**
-     * The plot's own *content* width/height — i.e. already net of margins,
-     * matching the frame the map itself is actually drawn into (svelteplot
-     * bakes margins into the projection's scale/translate rather than
-     * wrapping marks in a translating `<g>`, so this needs to match, not the
-     * plot's raw outer width/height) — `location`'s edge and `margin`'s gap
-     * are both measured against this box, not the full canvas.
-     */
-    width: number;
-    height: number;
-    /** Top-left corner of that content box, in the plot's own absolute coordinate space (i.e. its margins). */
-    left?: number;
-    top?: number;
-    defaultFill: string;
-    /** The plot's own top-level `tooltip.anchorX`/`anchorY` — the fallback this inset's own tooltip inherits when its own is unset, before the system default. */
-    tooltipAnchorX?: TooltipAnchorX;
-    tooltipAnchorY?: TooltipAnchorY;
-  } = $props();
+	/**
+	 * A small, independently-projected map panel anchored to a corner/edge of
+	 * the plot - see `GeoInsetMarkerConfig`'s doc comment. Renders raw `<path>`s via
+	 * its own `d3-geo` `geoPath`, deliberately not svelteplot's `<Geo>` mark:
+	 * that mark is bound to the plot's *shared* projection scale, but an inset
+	 * needs its own, independently fit to just what it's showing.
+	 */
+	let {
+		marker,
+		features,
+		width,
+		height,
+		left = 0,
+		top = 0,
+		defaultFill,
+		tooltipAnchorX,
+		tooltipAnchorY
+	}: {
+		marker: GeoInsetMarkerConfig<TProps>;
+		/**
+		 * The plot's own already-tagged features (`__id` set), with full,
+		 * unreduced geometry regardless of the plot's own `excludeParts` - used
+		 * when `marker.data` is omitted, so an inset can show a part the main
+		 * map excludes without needing a separate dataset.
+		 */
+		features: (GeoFeature<TProps> & { __id: string })[];
+		/**
+		 * The plot's own *content* width/height - i.e. already net of margins,
+		 * matching the frame the map itself is actually drawn into (svelteplot
+		 * bakes margins into the projection's scale/translate rather than
+		 * wrapping marks in a translating `<g>`, so this needs to match, not the
+		 * plot's raw outer width/height) - `location`'s edge and `margin`'s gap
+		 * are both measured against this box, not the full canvas.
+		 */
+		width: number;
+		height: number;
+		/** Top-left corner of that content box, in the plot's own absolute coordinate space (i.e. its margins). */
+		left?: number;
+		top?: number;
+		defaultFill: string;
+		/** The plot's own top-level `tooltip.anchorX`/`anchorY` - the fallback this inset's own tooltip inherits when its own is unset, before the system default. */
+		tooltipAnchorX?: TooltipAnchorX;
+		tooltipAnchorY?: TooltipAnchorY;
+	} = $props();
 
-  const insetFeatures = $derived.by((): GeoFeature<Record<string, unknown>>[] => {
-    if (marker.data) {
-      return (
-        Array.isArray(marker.data) ? marker.data : marker.data.features
-      ) as GeoFeature<Record<string, unknown>>[];
-    }
-    if (marker.features?.length) {
-      const wanted = new Set(marker.features);
-      const matched = features.filter((f) => wanted.has(f.__id));
-      if (!marker.featurePartsFilter) return matched;
-      const partsFilter = marker.featurePartsFilter;
-      return matched.flatMap((f) => {
-        const geometry = filterGeometryParts(f.geometry, (part) => partsFilter(part, f));
-        return geometry ? [{ ...f, geometry }] : [];
-      });
-    }
-    return [];
-  });
+	const insetFeatures = $derived.by((): GeoFeature<Record<string, unknown>>[] => {
+		if (marker.data) {
+			return (Array.isArray(marker.data) ? marker.data : marker.data.features) as GeoFeature<
+				Record<string, unknown>
+			>[];
+		}
+		if (marker.features?.length) {
+			const wanted = new Set(marker.features);
+			const matched = features.filter((f) => wanted.has(f.__id));
+			if (!marker.featurePartsFilter) return matched;
+			const partsFilter = marker.featurePartsFilter;
+			return matched.flatMap((f) => {
+				const geometry = filterGeometryParts(f.geometry, (part) => partsFilter(part, f));
+				return geometry ? [{ ...f, geometry }] : [];
+			});
+		}
+		return [];
+	});
 
-  const box = $derived(
-    insetBox(marker.location, marker.width ?? 0.26, marker.height ?? 0.22, marker.margin ?? 8, width, height),
-  );
+	const box = $derived(
+		insetBox(
+			marker.location,
+			marker.width ?? 0.26,
+			marker.height ?? 0.22,
+			marker.margin ?? 8,
+			width,
+			height
+		)
+	);
 
-  const path = $derived.by(() => {
-    if (insetFeatures.length === 0 || box.width <= 0 || box.height <= 0) return null;
-    const projection = buildInsetProjection(marker.projection);
-    const collection: GeoJSON.FeatureCollection = { type: 'FeatureCollection', features: insetFeatures };
-    projection.fitExtent(
-      [
-        [0, 0],
-        [box.width, box.height],
-      ],
-      collection,
-    );
-    return geoPath(projection);
-  });
+	const path = $derived.by(() => {
+		if (insetFeatures.length === 0 || box.width <= 0 || box.height <= 0) return null;
+		const projection = buildInsetProjection(marker.projection);
+		const collection: GeoJSON.FeatureCollection = {
+			type: 'FeatureCollection',
+			features: insetFeatures
+		};
+		projection.fitExtent(
+			[
+				[0, 0],
+				[box.width, box.height]
+			],
+			collection
+		);
+		return geoPath(projection);
+	});
 
-  let hovered = $state<{ feature: GeoFeature<Record<string, unknown>>; x: number; y: number } | null>(null);
+	let hovered = $state<{
+		feature: GeoFeature<Record<string, unknown>>;
+		x: number;
+		y: number;
+	} | null>(null);
 
-  /**
-   * Purely a coordinate reference (`pointer-events: none` — never itself a
-   * hover target) sized exactly to the inset's own box, so `onInsetPointer*`
-   * below can convert a screen-space pointer event into the same box-local
-   * `x`/`y` space `TooltipLayout`'s `bounds` expects, the same way
-   * `BasePlotLayout`'s own cursor tracking does for the main map.
-   */
-  let boxRectEl = $state<SVGRectElement>();
+	/**
+	 * Purely a coordinate reference (`pointer-events: none` - never itself a
+	 * hover target) sized exactly to the inset's own box, so `onInsetPointer*`
+	 * below can convert a screen-space pointer event into the same box-local
+	 * `x`/`y` space `Tooltip`'s `bounds` expects, the same way
+	 * `BasePlotLayout`'s own cursor tracking does for the main map.
+	 */
+	let boxRectEl = $state<SVGRectElement>();
 
-  /**
-   * Which exact feature `<path>` the browser's own SVG hit-testing resolved
-   * the event to — mirrors the main map's own `<Geo onpointerenter>` (see
-   * `Plot.svelte`) rather than approximating it by nearest centroid
-   * distance, which used to make hover pick the wrong (if geometrically
-   * nearer-by-centroid) neighboring feature, exactly the bug that fix
-   * addressed for the main map.
-   */
-  function onInsetFeaturePointer(e: PointerEvent, f: GeoFeature<Record<string, unknown>>) {
-    const rect = boxRectEl?.getBoundingClientRect();
-    const x = e.clientX - (rect?.left ?? 0);
-    const y = e.clientY - (rect?.top ?? 0);
-    hovered = { feature: f, x, y };
-  }
+	/**
+	 * Which exact feature `<path>` the browser's own SVG hit-testing resolved
+	 * the event to - mirrors the main map's own `<Geo onpointerenter>` (see
+	 * `Plot.svelte`) rather than approximating it by nearest centroid
+	 * distance, which used to make hover pick the wrong (if geometrically
+	 * nearer-by-centroid) neighboring feature, exactly the bug that fix
+	 * addressed for the main map.
+	 */
+	function onInsetFeaturePointer(e: PointerEvent, f: GeoFeature<Record<string, unknown>>) {
+		const rect = boxRectEl?.getBoundingClientRect();
+		const x = e.clientX - (rect?.left ?? 0);
+		const y = e.clientY - (rect?.top ?? 0);
+		hovered = { feature: f, x, y };
+	}
 
-  function onInsetFeatureLeave() {
-    hovered = null;
-  }
+	function onInsetFeatureLeave() {
+		hovered = null;
+	}
 </script>
 
 {#if path}
-  <g class="dct-geo-inset" transform="translate({box.left + left}, {box.top + top})">
-    {#each insetFeatures as f, i (i)}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <path
-        d={path(f as GeoJSON.Feature) ?? undefined}
-        fill={marker.style?.fill ?? defaultFill}
-        fill-opacity={marker.style?.fillOpacity}
-        stroke={marker.style?.stroke ?? 'currentColor'}
-        stroke-width={marker.style?.strokeWidth ?? 0.5}
-        style="vector-effect: non-scaling-stroke"
-        onpointerenter={marker.tooltip ? (e: PointerEvent) => onInsetFeaturePointer(e, f) : undefined}
-        onpointermove={marker.tooltip ? (e: PointerEvent) => onInsetFeaturePointer(e, f) : undefined}
-        onpointerleave={marker.tooltip ? onInsetFeatureLeave : undefined}
-      />
-    {/each}
-    {#if marker.tooltip}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <rect x={0} y={0} width={box.width} height={box.height} fill="transparent" pointer-events="none" bind:this={boxRectEl} />
-    {/if}
-    {#if marker.tooltip}
-      {@const tooltip = marker.tooltip}
-      <foreignObject x={0} y={0} width={box.width} height={box.height} style="overflow: visible; pointer-events: none;">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="position: relative; width: 100%; height: 100%;">
-          <TooltipLayout
-            visible={hovered != null}
-            x={hovered?.x ?? 0}
-            y={hovered?.y ?? 0}
-            bounds={{ width: box.width, height: box.height }}
-            rows={hovered ? [hovered.feature] : []}
-            format={tooltip.format}
-            content={tooltip.content}
-            anchorX={tooltip.anchorX ?? tooltipAnchorX}
-            anchorY={tooltip.anchorY ?? tooltipAnchorY}
-          />
-        </div>
-      </foreignObject>
-    {/if}
-  </g>
+	<g class="dct-geo-inset" transform="translate({box.left + left}, {box.top + top})">
+		{#each insetFeatures as f, i (i)}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<path
+				d={path(f as GeoJSON.Feature) ?? undefined}
+				fill={marker.styles?.fill ?? defaultFill}
+				fill-opacity={marker.styles?.fillOpacity}
+				stroke={marker.styles?.stroke ?? 'currentColor'}
+				stroke-width={marker.styles?.strokeWidth ?? 0.5}
+				style="vector-effect: non-scaling-stroke"
+				onpointerenter={marker.tooltip
+					? (e: PointerEvent) => onInsetFeaturePointer(e, f)
+					: undefined}
+				onpointermove={marker.tooltip
+					? (e: PointerEvent) => onInsetFeaturePointer(e, f)
+					: undefined}
+				onpointerleave={marker.tooltip ? onInsetFeatureLeave : undefined}
+			/>
+		{/each}
+		{#if marker.tooltip}
+			<rect
+				x={0}
+				y={0}
+				width={box.width}
+				height={box.height}
+				fill="transparent"
+				pointer-events="none"
+				bind:this={boxRectEl}
+			/>
+		{/if}
+		{#if marker.tooltip}
+			{@const tooltip = marker.tooltip}
+			<foreignObject
+				x={0}
+				y={0}
+				width={box.width}
+				height={box.height}
+				style="overflow: visible; pointer-events: none;"
+			>
+				<div
+					xmlns="http://www.w3.org/1999/xhtml"
+					style="position: relative; width: 100%; height: 100%;"
+				>
+					<Tooltip
+						visible={hovered != null}
+						x={hovered?.x ?? 0}
+						y={hovered?.y ?? 0}
+						bounds={{ width: box.width, height: box.height }}
+						rows={hovered ? [hovered.feature] : []}
+						format={tooltip.format}
+						content={tooltip.content}
+						anchorX={tooltip.anchorX ?? tooltipAnchorX}
+						anchorY={tooltip.anchorY ?? tooltipAnchorY}
+					/>
+				</div>
+			</foreignObject>
+		{/if}
+	</g>
 {/if}

package/dist/markers/inset/InsetMarker.svelte.d.ts

@@ -6,7 +6,7 @@ declare function $$render<TProps extends Record<string, unknown>>(): {
         marker: GeoInsetMarkerConfig<TProps>;
         /**
          * The plot's own already-tagged features (`__id` set), with full,
-         * unreduced geometry regardless of the plot's own `excludeParts` — used
+         * unreduced geometry regardless of the plot's own `excludeParts` - used
          * when `marker.data` is omitted, so an inset can show a part the main
          * map excludes without needing a separate dataset.
          */
@@ -14,11 +14,11 @@ declare function $$render<TProps extends Record<string, unknown>>(): {
             __id: string;
         })[];
         /**
-         * The plot's own *content* width/height — i.e. already net of margins,
+         * The plot's own *content* width/height - i.e. already net of margins,
          * matching the frame the map itself is actually drawn into (svelteplot
          * bakes margins into the projection's scale/translate rather than
          * wrapping marks in a translating `<g>`, so this needs to match, not the
-         * plot's raw outer width/height) — `location`'s edge and `margin`'s gap
+         * plot's raw outer width/height) - `location`'s edge and `margin`'s gap
          * are both measured against this box, not the full canvas.
          */
         width: number;
@@ -27,7 +27,7 @@ declare function $$render<TProps extends Record<string, unknown>>(): {
         left?: number;
         top?: number;
         defaultFill: string;
-        /** The plot's own top-level `tooltip.anchorX`/`anchorY` — the fallback this inset's own tooltip inherits when its own is unset, before the system default. */
+        /** The plot's own top-level `tooltip.anchorX`/`anchorY` - the fallback this inset's own tooltip inherits when its own is unset, before the system default. */
         tooltipAnchorX?: TooltipAnchorX;
         tooltipAnchorY?: TooltipAnchorY;
     };

package/dist/markers/inset/insetLayout.d.ts

@@ -2,7 +2,7 @@ import type { GeoInsetLocation } from '../../types/markers/geo';
 type Horizontal = 'left' | 'middle' | 'right';
 type Vertical = 'top' | 'middle' | 'bottom';
 /**
- * Parses a `side-anchor` position string (either word order accepted — see
+ * Parses a `side-anchor` position string (either word order accepted - see
  * `GeoInsetLocation`) into independent horizontal/vertical placement
  * keywords.
  */

package/dist/markers/inset/insetLayout.js

@@ -1,5 +1,5 @@
 /**
- * Parses a `side-anchor` position string (either word order accepted — see
+ * Parses a `side-anchor` position string (either word order accepted - see
  * `GeoInsetLocation`) into independent horizontal/vertical placement
  * keywords.
  */
@@ -34,6 +34,10 @@ export function insetBox(location, widthFraction, heightFraction, margin, frameW
     const width = frameWidth * widthFraction;
     const height = frameHeight * heightFraction;
     const left = h === 'left' ? margin : h === 'right' ? frameWidth - margin - width : (frameWidth - width) / 2;
-    const top = v === 'top' ? margin : v === 'bottom' ? frameHeight - margin - height : (frameHeight - height) / 2;
+    const top = v === 'top'
+        ? margin
+        : v === 'bottom'
+            ? frameHeight - margin - height
+            : (frameHeight - height) / 2;
     return { left, top, width, height };
 }

package/dist/markers/inset/insetProjection.d.ts

@@ -2,7 +2,7 @@ import { type GeoProjection } from 'd3-geo';
 import type { GeoInsetProjectionConfig } from '../../types/markers/geo';
 /**
  * Builds a fresh, configured (but not yet fit) d3-geo projection instance
- * for an `inset` marker — the caller still needs to `.fitExtent()` it to
+ * for an `inset` marker - the caller still needs to `.fitExtent()` it to
  * whatever the inset ends up showing.
  */
 export declare function buildInsetProjection(config?: GeoInsetProjectionConfig): GeoProjection;

package/dist/markers/inset/insetProjection.js

@@ -1,4 +1,4 @@
-import { geoAlbersUsa, geoAlbers, geoAzimuthalEqualArea, geoAzimuthalEquidistant, geoConicConformal, geoConicEqualArea, geoConicEquidistant, geoEqualEarth, geoEquirectangular, geoGnomonic, geoMercator, geoOrthographic, geoStereographic, geoTransverseMercator, } from 'd3-geo';
+import { geoAlbersUsa, geoAlbers, geoAzimuthalEqualArea, geoAzimuthalEquidistant, geoConicConformal, geoConicEqualArea, geoConicEquidistant, geoEqualEarth, geoEquirectangular, geoGnomonic, geoMercator, geoOrthographic, geoStereographic, geoTransverseMercator } from 'd3-geo';
 const NAMED_PROJECTIONS = {
     'albers-usa': geoAlbersUsa,
     albers: geoAlbers,
@@ -13,11 +13,11 @@ const NAMED_PROJECTIONS = {
     mercator: geoMercator,
     orthographic: geoOrthographic,
     stereographic: geoStereographic,
-    'transverse-mercator': geoTransverseMercator,
+    'transverse-mercator': geoTransverseMercator
 };
 /**
  * Builds a fresh, configured (but not yet fit) d3-geo projection instance
- * for an `inset` marker — the caller still needs to `.fitExtent()` it to
+ * for an `inset` marker - the caller still needs to `.fitExtent()` it to
  * whatever the inset ends up showing.
  */
 export function buildInsetProjection(config = 'mercator') {

package/dist/markers/line/LineMarker.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Line } from 'svelteplot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { LineMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'line'` marker as a `<Line>` call - just the stroke. Endpoint
+	 * dots are a separate `'dot'` marker. A `color` channel strokes each row by
+	 * its color, so each `grouping`'s line takes its group's color.
+	 */
+	let { marker }: { marker: LineMarkerConfig } = $props();
+
+	const cfg = $derived(getConfiguration());
+	const data = $derived(marker.data ?? []);
+	const channelStroke = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
+</script>
+
+<Line
+	{data}
+	x={marker.x}
+	y={marker.y}
+	z={marker.grouping}
+	stroke={channelStroke ?? marker.styles?.stroke}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+	strokeLinejoin={marker.styles?.strokeLinejoin}
+	strokeLinecap={marker.styles?.strokeLinecap}
+/>

package/dist/markers/{LineMarker.svelte.d.ts → line/LineMarker.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { LineMarkerConfig } from '../types/markers/common';
+import type { LineMarkerConfig } from '../../types/markers/common';
 type $$ComponentProps = {
     marker: LineMarkerConfig;
 };

package/dist/markers/link/LinkMarker.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Geo } from 'svelteplot';
+	import { resolveAccessor } from '../../plots/utils/accessors';
+	import { greatCircleInterpolate } from '../../plots/utils/geoAccessors';
+	import type { GeoLinkMarkerConfig } from '../../types/markers/geo';
+
+	/** Renders one `'link'` marker - geodesic-aware lines between point pairs, as a synthetic `LineString` fed through `<Geo>`. */
+	let { marker }: { marker: GeoLinkMarkerConfig } = $props();
+
+	const getX1 = $derived(resolveAccessor(marker.x1));
+	const getY1 = $derived(resolveAccessor(marker.y1));
+	const getX2 = $derived(resolveAccessor(marker.x2));
+	const getY2 = $derived(resolveAccessor(marker.y2));
+
+	const linkFeatures = $derived(
+		marker.data.map((d) => ({
+			type: 'Feature' as const,
+			properties: {},
+			geometry: {
+				type: 'LineString' as const,
+				coordinates:
+					marker.curve === 'linear'
+						? [
+								[Number(getX1(d)), Number(getY1(d))],
+								[Number(getX2(d)), Number(getY2(d))]
+							]
+						: greatCircleInterpolate(
+								Number(getX1(d)),
+								Number(getY1(d)),
+								Number(getX2(d)),
+								Number(getY2(d))
+							)
+			}
+		}))
+	);
+</script>
+
+<!-- No `fill` prop: svelteplot treats any string as scale-worthy unless it's a real CSS color, so a literal `'none'` would run through the color scale instead of staying unfilled. Omitting it leaves svelteplot's own unfilled default in place. -->
+<Geo
+	class="link"
+	data={linkFeatures}
+	stroke={marker.styles?.stroke ?? 'currentColor'}
+	strokeWidth={marker.styles?.strokeWidth ?? 1}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+	style="vector-effect: non-scaling-stroke"
+/>

package/dist/markers/{LinkMarker.svelte.d.ts → link/LinkMarker.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { GeoLinkMarkerConfig } from '../types/markers/geo';
+import type { GeoLinkMarkerConfig } from '../../types/markers/geo';
 type $$ComponentProps = {
     marker: GeoLinkMarkerConfig;
 };

package/dist/markers/raster/RasterMarker.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Raster } from 'svelteplot';
+	import type { RasterMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'raster'` marker as `<Raster>`. An empty `data` means
+	 * svelteplot's function-sampling mode (`fill` as `(x, y) => value`, no rows),
+	 * so it is forwarded as `null` rather than an empty array.
+	 */
+	let { marker }: { marker: RasterMarkerConfig } = $props();
+
+	const data = $derived(marker.data?.length ? marker.data : null);
+</script>
+
+<Raster
+	{data}
+	x={marker.x}
+	y={marker.y}
+	fill={marker.fill}
+	fillOpacity={marker.fillOpacity}
+	x1={marker.x1}
+	x2={marker.x2}
+	y1={marker.y1}
+	y2={marker.y2}
+	width={marker.width}
+	height={marker.height}
+	pixelSize={marker.pixelSize}
+	blur={marker.blur}
+	interpolate={marker.interpolate}
+	imageRendering={marker.imageRendering}
+/>

package/dist/markers/raster/RasterMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { RasterMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: RasterMarkerConfig;
+};
+declare const RasterMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type RasterMarker = ReturnType<typeof RasterMarker>;
+export default RasterMarker;