@fundar/data-chart-telling 0.0.25 → 0.0.26

package/dist/layout/tooltip/utils.js

@@ -24,11 +24,11 @@ export function matchByStrategy(points, hover) {
         (activeSeries == null || p.series == null || p.series === activeSeries));
 }
 /** Whether the strategy implies an x crosshair rule by default. */
-export function impliesRuleX(strategy) {
+export function impliesCrosshairX(strategy) {
     return strategy === 'x' || strategy === 'punctual';
 }
 /** Whether the strategy implies a y crosshair rule by default. */
-export function impliesRuleY(strategy) {
+export function impliesCrosshairY(strategy) {
     return strategy === 'y' || strategy === 'punctual';
 }
 /** Normalize the author-facing prop into a resolved object. */
@@ -44,29 +44,30 @@ export function resolveTooltip(tooltip, defaultStrategy) {
         format: tooltip.format,
         series: tooltip.series,
         content: tooltip.content,
+        anchorX: tooltip.anchorX,
+        anchorY: tooltip.anchorY,
     };
 }
 /**
- * Resolve the strategy that should drive the shared hover store:
- * the tooltip's own `strategy` wins when tooltip text is enabled, else the first
- * hover marker's `strategy`, else the chart kind's default.
+ * Resolve the strategy that should drive the shared hover store: the
+ * tooltip's own `strategy` wins, else the first hover marker's `strategy`,
+ * else the chart kind's default. Generic over the caller's own marker union,
+ * like {@link findHoverMarker}.
  */
 export function resolveHoverStrategy(tooltipStrategy, markers, defaultStrategy) {
-    return tooltipStrategy ?? findHoverMarker(markers)?.strategy ?? defaultStrategy;
+    const marker = findHoverMarker(markers);
+    return tooltipStrategy ?? marker?.strategy ?? defaultStrategy;
 }
-/**
- * Resolve whether the hover should be broadcast across facets:
- * the tooltip's own `sync` wins when tooltip text is enabled, else the first
- * hover marker's `sync`, else false.
- */
+/** Resolve whether the hover should be broadcast across facets. Generic — see {@link resolveHoverStrategy}. */
 export function resolveHoverSync(tooltipSync, markers) {
-    return tooltipSync ?? findHoverMarker(markers)?.sync ?? false;
+    const marker = findHoverMarker(markers);
+    return tooltipSync ?? marker?.sync ?? false;
 }
-/** Whether any marker in the list is a hover marker. */
+/** Whether any marker in the list is a hover marker — axis-based (`'hover'`) or geo (`'geo-hover'`). */
 export function hasHoverMarker(markers) {
-    return (markers ?? []).some((m) => m.type === 'hover');
+    return (markers ?? []).some((m) => m.type === 'hover' || m.type === 'geo-hover');
 }
-/** First hover marker in the list, if any. */
+/** First hover marker in the list, if any — generic over the caller's own marker union. */
 export function findHoverMarker(markers) {
     return (markers ?? []).find((m) => m.type === 'hover');
 }

package/dist/markers/BarMarker.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { BarX, BarY, usePlot } from 'svelteplot';
+  import type { BarMarkerConfig } from '../types/markers/common';
+
+  /**
+   * Renders one `'bar'` marker — `role: 'segment'` is a visible bar
+   * (`<BarX>`/`<BarY>`, per `isHorizontal`); `role: 'hitArea'` is an
+   * invisible hit region for one category, resolved against the live scale
+   * via `usePlot()`.
+   */
+  let { marker }: { marker: BarMarkerConfig } = $props();
+
+  const plot = usePlot();
+  function categoryScaleFor(isHorizontal: boolean) {
+    return isHorizontal ? plot.scales.y : plot.scales.x;
+  }
+  function valueScaleFor(isHorizontal: boolean) {
+    return isHorizontal ? plot.scales.x : plot.scales.y;
+  }
+  function valueExtentFor(isHorizontal: boolean): [number, number] {
+    const range = valueScaleFor(isHorizontal)?.fn?.range?.();
+    if (!range || range.length < 2) return [0, 0];
+    const a = Number(range[0]);
+    const b = Number(range[range.length - 1]);
+    return [Math.min(a, b), Math.max(a, b)];
+  }
+</script>
+
+{#if marker.role === 'segment'}
+  {#if marker.isHorizontal}
+    <BarX
+      data={marker.data}
+      y={marker.y}
+      x1={marker.x1}
+      x2={marker.x2}
+      insetTop={marker.insetTop}
+      insetBottom={marker.insetBottom}
+      fill={marker.style?.fill}
+      fillOpacity={marker.style?.fillOpacity}
+      stroke={marker.style?.stroke}
+      strokeWidth={marker.style?.strokeWidth}
+      strokeOpacity={marker.style?.strokeOpacity}
+      strokeDasharray={marker.style?.strokeDasharray}
+      borderRadius={marker.style?.borderRadius}
+    />
+  {:else}
+    <BarY
+      data={marker.data}
+      x={marker.x}
+      y1={marker.y1}
+      y2={marker.y2}
+      insetLeft={marker.insetLeft}
+      insetRight={marker.insetRight}
+      fill={marker.style?.fill}
+      fillOpacity={marker.style?.fillOpacity}
+      stroke={marker.style?.stroke}
+      strokeWidth={marker.style?.strokeWidth}
+      strokeOpacity={marker.style?.strokeOpacity}
+      strokeDasharray={marker.style?.strokeDasharray}
+      borderRadius={marker.style?.borderRadius}
+    />
+  {/if}
+{:else}
+  {@const categoryScale = categoryScaleFor(marker.isHorizontal)}
+  {#if categoryScale?.type === 'band'}
+    {@const bandwidth = categoryScale.fn.bandwidth()}
+    {@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
+    {@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    {#if marker.isHorizontal}
+      <rect
+        x={valueMin}
+        y={bandStart}
+        width={Math.max(0, valueMax - valueMin)}
+        height={bandwidth}
+        fill="transparent"
+        onpointerenter={marker.onpointerenter}
+        onpointerleave={marker.onpointerleave}
+      />
+    {:else}
+      <rect
+        x={bandStart}
+        y={valueMin}
+        width={bandwidth}
+        height={Math.max(0, valueMax - valueMin)}
+        fill="transparent"
+        onpointerenter={marker.onpointerenter}
+        onpointerleave={marker.onpointerleave}
+      />
+    {/if}
+  {/if}
+{/if}

package/dist/markers/BarMarker.svelte.d.ts

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

package/dist/markers/CellMarker.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Cell } from 'svelteplot';
+  import type { CellMarkerConfig } from '../types/markers/common';
+
+  /** Renders one `'cell'` marker as a `<Cell>` call. */
+  let { marker }: { marker: CellMarkerConfig } = $props();
+</script>
+
+<Cell
+  data={marker.data}
+  x={marker.x}
+  y={marker.y}
+  fill={marker.fill}
+  fillOpacity={marker.style?.fillOpacity ?? 1}
+  stroke={marker.style?.stroke}
+  strokeWidth={marker.style?.strokeWidth ?? 0}
+  strokeOpacity={marker.style?.strokeOpacity}
+  strokeDasharray={marker.style?.strokeDasharray}
+  borderRadius={marker.style?.borderRadius}
+  inset={marker.inset ?? 0.5}
+/>

package/dist/markers/CellMarker.svelte.d.ts

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

package/dist/markers/ContourMarker.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Contour } from 'svelteplot';
+  import type { GeoContourMarkerConfig } from '../types/markers/geo';
+
+  /**
+   * Renders one `'contour'` marker's `<Contour>` mark. `marker.clip` is
+   * handled by the caller (`GeometryLayout` wraps this in `ContourClipMarker`)
+   * — this component only draws the contour itself.
+   */
+  let { marker }: { marker: GeoContourMarkerConfig } = $props();
+</script>
+
+<!-- No `?? 'none'` fallback: an unset `fill` should leave svelteplot's own default (`fill="none"`) in place, not run the literal string `'none'` through the color scale. -->
+<Contour
+  class="contour"
+  data={marker.data}
+  x={marker.x}
+  y={marker.y}
+  value={marker.value}
+  thresholds={marker.thresholds}
+  fill={marker.fill}
+  stroke={marker.stroke ?? 'currentColor'}
+  strokeWidth={marker.style?.strokeWidth}
+  fillOpacity={marker.style?.fillOpacity}
+  strokeOpacity={marker.style?.strokeOpacity}
+  blur={marker.blur}
+  interpolate={marker.interpolate}
+/>

package/dist/markers/ContourMarker.svelte.d.ts

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

package/dist/markers/DeltaMarker.svelte

@@ -5,38 +5,19 @@
   import { Line } from 'svelteplot';
   import DotMarker from './DotMarker.svelte';
   import TextMarker from './TextMarker.svelte';
-  import { resolveXDeltas, resolveYDeltas } from '../plots/utils/delta';
-  import type { MarkerProps } from '../types/markers/props';
+  import { resolveXDeltas, resolveYDeltas } from '../utils/delta';
   import type { Series } from '../types/plots/data/common';
-  import type { DeltaConfig } from '../types/plots/delta';
+  import type { DeltaMarkerConfig } from '../types/markers/line';
 
-  interface Props extends MarkerProps<Series<TData>>, DeltaConfig {
-    xDomain?: (number | string | Date)[];
-    yDomain?: (number | string | Date)[];
-  }
-
-  let {
-    data = [],
-    axis,
-    at,
-    from,
-    to,
-    formatDiff,
-    strokeStyle,
-    fontStyle,
-    dotStyle,
-    xDomain,
-    yDomain,
-  }: Props = $props();
+  let { marker, data = [] }: { marker: DeltaMarkerConfig; data?: Series<TData>[] } = $props();
 
   const resolved = $derived.by(() => {
-    const cfg: DeltaConfig = { axis, at, from, to, formatDiff, strokeStyle, fontStyle, dotStyle };
-    const [d] = axis === 'x' ? resolveXDeltas(data, [cfg]) : resolveYDeltas(data, [cfg]);
+    const [d] = marker.axis === 'x' ? resolveXDeltas(data, [marker]) : resolveYDeltas(data, [marker]);
     return d;
   });
 
   const clampRange = $derived.by((): [number, number] | undefined => {
-    const domain = axis === 'x' ? yDomain : xDomain;
+    const domain = marker.axis === 'x' ? marker.yDomain : marker.xDomain;
     if (!domain || domain.length < 2) return undefined;
     const lo = Number(domain[0]);
     const hi = Number(domain[domain.length - 1]);
@@ -48,11 +29,11 @@
   }
 
   function pt(fixed: number, varying: number) {
-    return axis === 'x' ? { x: fixed, y: varying } : { x: varying, y: fixed };
+    return marker.axis === 'x' ? { x: fixed, y: varying } : { x: varying, y: fixed };
   }
 
   function textVaryCoord(fromVis: number, toVis: number) {
-    const anchor = fontStyle?.lineAnchor ?? 'middle';
+    const anchor = marker.fontStyle?.lineAnchor ?? 'middle';
     return anchor === 'top'
       ? Math.max(fromVis, toVis)
       : anchor === 'bottom'
@@ -82,35 +63,47 @@
     data={coords.lineData}
     x={(p) => p.x}
     y={(p) => p.y}
-    stroke={strokeStyle?.stroke ?? 'currentColor'}
-    strokeWidth={strokeStyle?.strokeWidth ?? 2}
-    strokeOpacity={strokeStyle?.strokeOpacity ?? 0.8}
-    strokeDasharray={strokeStyle?.strokeDasharray ?? '6 6'}
-    strokeLinecap={strokeStyle?.strokeLinecap ?? 'round'}
+    stroke={marker.strokeStyle?.stroke ?? 'currentColor'}
+    strokeWidth={marker.strokeStyle?.strokeWidth ?? 2}
+    strokeOpacity={marker.strokeStyle?.strokeOpacity ?? 0.8}
+    strokeDasharray={marker.strokeStyle?.strokeDasharray ?? '6 6'}
+    strokeLinecap={marker.strokeStyle?.strokeLinecap ?? 'round'}
   />
   <DotMarker
     x={coords?.fromPt?.x ?? 0}
     y={coords?.fromPt?.y ?? 0}
-    style={{ dotRadius: 4, dotFill: strokeStyle?.stroke, dotStroke: strokeStyle?.stroke, dotStrokeWidth: 2, ...dotStyle }}
+    style={{
+      dotRadius: 4,
+      dotFill: marker.strokeStyle?.stroke,
+      dotStroke: marker.strokeStyle?.stroke,
+      dotStrokeWidth: 2,
+      ...marker.dotStyle,
+    }}
   />
   <DotMarker
     x={coords?.toPt?.x ?? 0}
     y={coords?.toPt?.y ?? 0}
-    style={{ dotRadius: 4, dotFill: strokeStyle?.stroke, dotStroke: strokeStyle?.stroke, dotStrokeWidth: 2, ...dotStyle }}
+    style={{
+      dotRadius: 4,
+      dotFill: marker.strokeStyle?.stroke,
+      dotStroke: marker.strokeStyle?.stroke,
+      dotStrokeWidth: 2,
+      ...marker.dotStyle,
+    }}
   />
   <TextMarker
     x={coords?.textPt?.x ?? 0}
     y={coords?.textPt?.y ?? 0}
-    text={(formatDiff ?? ((v: number) => v.toFixed(1)))(coords?.diff ?? 0)}
+    text={(marker.formatDiff ?? ((v: number) => v.toFixed(1)))(coords?.diff ?? 0)}
     style={{
       fontWeight: 'bold',
       fontSize: 14,
       textAnchor: 'middle',
-      fill: strokeStyle?.stroke ?? 'currentColor',
-      ...fontStyle,
-      dx: fontStyle?.dx ?? (axis === 'x' ? 12 : 0),
-      dy: fontStyle?.dy ?? (axis === 'x' ? 0 : -10),
-      lineAnchor: axis === 'x' ? (fontStyle?.lineAnchor ?? 'middle') : 'bottom',
+      fill: marker.strokeStyle?.stroke ?? 'currentColor',
+      ...marker.fontStyle,
+      dx: marker.fontStyle?.dx ?? (marker.axis === 'x' ? 12 : 0),
+      dy: marker.fontStyle?.dy ?? (marker.axis === 'x' ? 0 : -10),
+      lineAnchor: marker.axis === 'x' ? (marker.fontStyle?.lineAnchor ?? 'middle') : 'bottom',
     }}
   />
 {/if}

package/dist/markers/DeltaMarker.svelte.d.ts

@@ -1,10 +1,9 @@
-import type { MarkerProps } from '../types/markers/props';
 import type { Series } from '../types/plots/data/common';
-import type { DeltaConfig } from '../types/plots/delta';
+import type { DeltaMarkerConfig } from '../types/markers/line';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: MarkerProps<Series<TData>> & DeltaConfig & {
-        xDomain?: (number | string | Date)[];
-        yDomain?: (number | string | Date)[];
+    props: {
+        marker: DeltaMarkerConfig;
+        data?: Series<TData>[];
     };
     exports: {};
     bindings: "";

package/dist/markers/DotMarker.svelte

@@ -1,23 +1,52 @@
 <script lang="ts" generics="TData = Record<string, unknown>">
   import { Dot } from 'svelteplot';
+  import { makeColorScale } from '../utils/color';
+  import { getConfiguration } from '../configuration/config.svelte';
   import type { MarkerProps } from '../types/markers/props';
-  import type { AxisValue } from '../types/plots/axis';
+  import type { AxisValue } from '../types/layout/scales';
   import type { DotStyle } from '../types/plots/styling';
+  import type { ColorsStyle } from '../types/layout/styles';
 
   interface Props extends MarkerProps<TData> {
     x?: AxisValue | ((d: TData) => AxisValue);
     y?: AxisValue | ((d: TData) => AxisValue);
-    style?: DotStyle;
+    /** Per-row radius, or a constant — overrides `style.dotRadius` when set. */
+    r?: number | ((d: TData) => number);
+    /** Per-row fill, overriding `style.dotFill` — ignored when `value` is set. */
+    fill?: (d: TData) => string;
+    /** Continuous value driving a per-dot color ramp through `style.colors` — takes priority over `fill`/`style.dotFill` when set. */
+    value?: (d: TData) => number;
+    style?: DotStyle & { colors?: ColorsStyle };
   }
 
-  const { data = [], x, y, style }: Props = $props();
+  const { data = [], x, y, r: rProp, fill: fillProp, value, style }: Props = $props();
+
+  const cfg = $derived(getConfiguration());
 
   const xAccessor = $derived(typeof x === 'function' ? x : () => x ?? 0);
   const yAccessor = $derived(typeof y === 'function' ? y : () => y ?? 0);
-  const displayData = $derived(data.length > 0 ? data : [{} as TData]);
+  /** A literal `x`/`y` draws one dot at a fixed point regardless of `data`; an accessor reads its position per row. */
+  const displayData = $derived(
+    data.length > 0 || typeof x === 'function' || typeof y === 'function' ? data : [{} as TData],
+  );
+
+  /** Color scale built from `value`'s own data extent — `null` when `value` is unset. */
+  const valueColorScale = $derived.by(() => {
+    if (!value) return null;
+    const vals = displayData.map((d) => Number(value(d))).filter((v) => Number.isFinite(v));
+    if (!vals.length) return null;
+    return makeColorScale(
+      Math.min(...vals),
+      Math.max(...vals),
+      style?.colors?.min ?? cfg.continuous.min,
+      style?.colors?.max ?? cfg.continuous.max,
+    );
+  });
 
-  const r = $derived(style?.dotRadius ?? 5);
-  const fill = $derived(style?.dotFill ?? 'currentColor');
+  const r = $derived(rProp ?? style?.dotRadius ?? 5);
+  const fill = $derived(
+    valueColorScale && value ? (d: TData) => valueColorScale(Number(value(d))) : (fillProp ?? style?.dotFill ?? 'currentColor'),
+  );
   const fillOpacity = $derived(style?.dotFillOpacity ?? 1);
   const symbol = $derived(style?.dotSymbol ?? 'circle');
   const stroke = $derived(style?.dotStroke ?? 'currentColor');

package/dist/markers/DotMarker.svelte.d.ts

@@ -1,11 +1,20 @@
 import type { MarkerProps } from '../types/markers/props';
-import type { AxisValue } from '../types/plots/axis';
+import type { AxisValue } from '../types/layout/scales';
 import type { DotStyle } from '../types/plots/styling';
+import type { ColorsStyle } from '../types/layout/styles';
 declare function $$render<TData = Record<string, unknown>>(): {
     props: MarkerProps<TData> & {
         x?: AxisValue | ((d: TData) => AxisValue);
         y?: AxisValue | ((d: TData) => AxisValue);
-        style?: DotStyle;
+        /** Per-row radius, or a constant — overrides `style.dotRadius` when set. */
+        r?: number | ((d: TData) => number);
+        /** Per-row fill, overriding `style.dotFill` — ignored when `value` is set. */
+        fill?: (d: TData) => string;
+        /** Continuous value driving a per-dot color ramp through `style.colors` — takes priority over `fill`/`style.dotFill` when set. */
+        value?: (d: TData) => number;
+        style?: DotStyle & {
+            colors?: ColorsStyle;
+        };
     };
     exports: {};
     bindings: "";

package/dist/markers/GeoFeaturesMarker.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Geo } from 'svelteplot';
+  import type { GeoFeaturesMarkerConfig } from '../types/markers/geo';
+
+  /** Renders one `'geo'` marker — one resolved-style bucket of the base map's own features, as a single `<Geo>` call. */
+  let { marker }: { marker: GeoFeaturesMarkerConfig } = $props();
+</script>
+
+<Geo
+  data={marker.data}
+  fill={marker.fill}
+  fillOpacity={marker.fillOpacity ?? 1}
+  stroke={marker.stroke ?? 'currentColor'}
+  strokeWidth={marker.strokeWidth ?? 0.5}
+  style="vector-effect: non-scaling-stroke"
+  onclick={marker.onclick}
+  onpointerenter={marker.onpointerenter}
+  onpointerleave={marker.onpointerleave}
+/>

package/dist/markers/GeoFeaturesMarker.svelte.d.ts

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

package/dist/markers/GeoHoverMarker.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Geo } from 'svelteplot';
+  import { getConfiguration } from '../configuration/config.svelte';
+  import type { GeoHoverMarkerConfig } from '../types/markers/geo';
+  import type { HoverPoint } from '../types/layout/tooltip';
+
+  /** Renders the hovered feature restyled in place — no dot, no label. `pointer-events: none` so it never steals hover from the base map underneath it. */
+  let { marker, data }: { marker: GeoHoverMarkerConfig; data: HoverPoint<Record<string, unknown>>[] } = $props();
+
+  const cfg = $derived(getConfiguration());
+  const style = $derived({ ...cfg.hover.area, ...marker.style });
+</script>
+
+{#if data.length > 0}
+  <Geo
+    data={data.map((p) => p.row)}
+    fill={style.fill}
+    fillOpacity={style.fillOpacity}
+    stroke={style.stroke}
+    strokeWidth={style.strokeWidth}
+    strokeOpacity={style.strokeOpacity}
+    strokeDasharray={style.strokeDasharray}
+    style="vector-effect: non-scaling-stroke; pointer-events: none;"
+  />
+{/if}

package/dist/markers/GeoHoverMarker.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { GeoHoverMarkerConfig } from '../types/markers/geo';
+import type { HoverPoint } from '../types/layout/tooltip';
+type $$ComponentProps = {
+    marker: GeoHoverMarkerConfig;
+    data: HoverPoint<Record<string, unknown>>[];
+};
+declare const GeoHoverMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type GeoHoverMarker = ReturnType<typeof GeoHoverMarker>;
+export default GeoHoverMarker;

package/dist/markers/GraticuleMarker.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Graticule } from 'svelteplot';
+  import type { GeoGraticuleMarkerConfig } from '../types/markers/geo';
+
+  /** Renders one `'graticule'` marker — longitude/latitude gridlines. */
+  let { marker }: { marker: GeoGraticuleMarkerConfig } = $props();
+</script>
+
+<Graticule
+  step={marker.step}
+  stepX={marker.stepX}
+  stepY={marker.stepY}
+  stroke={marker.style?.stroke ?? 'currentColor'}
+  strokeWidth={marker.style?.strokeWidth ?? 0.5}
+  strokeOpacity={marker.style?.strokeOpacity ?? 0.3}
+  strokeDasharray={marker.style?.strokeDasharray}
+  style="vector-effect: non-scaling-stroke"
+/>

package/dist/markers/GraticuleMarker.svelte.d.ts

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

package/dist/markers/HoverMarker.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { RuleX, RuleY } from 'svelteplot';
   import DotMarker from './DotMarker.svelte';
   import TextMarker from './TextMarker.svelte';
+  import RuleMarker from './RuleMarker.svelte';
   import { getConfiguration } from '../configuration/config.svelte';
   import type { MarkerProps } from '../types/markers/props';
-  import type { AxisValue } from '../types/plots/axis';
-  import type { DotStyle, FontStyle, StrokeStyle } from '../types/plots/styling';
+  import type { HoverMarkerConfig } from '../types/markers/common';
   import type { HoverDisplayPoint } from '../types/layout/tooltip';
 
   /**
@@ -14,31 +13,45 @@
    * correctly in every facet — that is what makes cross-facet sync work without
    * any pixel math. Draws optional x/y crosshair rules plus a dot + value label
    * for each matched point.
+   *
+   * Takes the raw `marker` config plus the couple of things it can't know on
+   * its own — `activePoint` (the specific matched point actually under the
+   * cursor, for the crosshair position; see `controller.svelte.ts`'s own doc
+   * comment) and whether the active hover strategy implies a crosshair on
+   * each axis by default — the same "component owns its own rendering"
+   * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
+   * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
+   * "no crosshair".
    */
   interface Props extends MarkerProps<HoverDisplayPoint> {
-    ruleX?: AxisValue | null;
-    ruleY?: AxisValue | null;
-    showLabels?: boolean;
-    format?: (point: HoverDisplayPoint) => string;
-    ruleStyle?: StrokeStyle;
-    dotStyle?: DotStyle;
-    fontStyle?: FontStyle;
+    /** Narrowed to just the fields this component reads — `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
+    marker: Pick<HoverMarkerConfig, 'ruleX' | 'ruleY' | 'showLabels' | 'format' | 'ruleStyle' | 'dotStyle' | 'fontStyle'>;
+    activePoint?: HoverDisplayPoint | null;
+    impliesCrosshairX?: boolean;
+    impliesCrosshairY?: boolean;
   }
 
   let {
     data = [],
-    ruleX = null,
-    ruleY = null,
-    showLabels = true,
-    format,
-    ruleStyle,
-    dotStyle,
-    fontStyle,
+    marker,
+    activePoint = null,
+    impliesCrosshairX = false,
+    impliesCrosshairY = false,
     seriesColor,
   }: Props = $props();
 
   const cfg = $derived(getConfiguration());
 
+  const showCrosshairX = $derived(marker.ruleX !== false && (impliesCrosshairX || marker.ruleX === true));
+  const showCrosshairY = $derived(marker.ruleY !== false && (impliesCrosshairY || marker.ruleY === true));
+  const ruleX = $derived(showCrosshairX ? (activePoint?.x ?? null) : null);
+  const ruleY = $derived(showCrosshairY ? (activePoint?.y ?? null) : null);
+  const showLabels = $derived(marker.showLabels ?? true);
+  const format = $derived(marker.format);
+  const ruleStyle = $derived(marker.ruleStyle);
+  const dotStyle = $derived(marker.dotStyle);
+  const fontStyle = $derived(marker.fontStyle);
+
   /** Explicit style wins; otherwise fall back to the series color, then the point's own resolved color. */
   const resolveColor = (explicit: string | undefined, point: HoverDisplayPoint) =>
     explicit ?? seriesColor ?? point.color;
@@ -81,25 +94,11 @@
 </script>
 
 {#if ruleX != null}
-  <RuleX
-    data={[{ v: ruleX }]}
-    x={(d) => d.v}
-    stroke={ruleStyle?.stroke ?? cfg.hover.rule.stroke}
-    strokeOpacity={ruleStyle?.strokeOpacity ?? cfg.hover.rule.strokeOpacity}
-    strokeWidth={ruleStyle?.strokeWidth ?? cfg.hover.rule.strokeWidth}
-    strokeDasharray={ruleStyle?.strokeDasharray ?? cfg.hover.rule.strokeDasharray}
-  />
+  <RuleMarker axis="x" value={ruleX} style={{ ...cfg.hover.rule, ...ruleStyle }} />
 {/if}
 
 {#if ruleY != null}
-  <RuleY
-    data={[{ v: ruleY }]}
-    y={(d) => d.v}
-    stroke={ruleStyle?.stroke ?? cfg.hover.rule.stroke}
-    strokeOpacity={ruleStyle?.strokeOpacity ?? cfg.hover.rule.strokeOpacity}
-    strokeWidth={ruleStyle?.strokeWidth ?? cfg.hover.rule.strokeWidth}
-    strokeDasharray={ruleStyle?.strokeDasharray ?? cfg.hover.rule.strokeDasharray}
-  />
+  <RuleMarker axis="y" value={ruleY} style={{ ...cfg.hover.rule, ...ruleStyle }} />
 {/if}
 
 {#if data.length > 0}