@fundar/data-chart-telling 0.0.25 → 0.0.27

package/dist/layout/{plot/AxisLayout.svelte → scales/ScalesLayout.svelte}

@@ -1,16 +1,13 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { AxisX, AxisY } from 'svelteplot';
+  import { AxisX, AxisY, GridX, GridY } from 'svelteplot';
   import { getConfiguration } from '../../configuration/config.svelte';
-  import type { AxisValue } from '../../types/plots/axis';
-  import type { AxisBasedScalesConfig } from '../../types/plots/props';
+  import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
 
   /**
-   * Axis ticks/titles for the plot kinds that have an x/y axis pair
-   * (line/bar/heatmap/pyramid) — reads the scale/tick config off `scales`,
-   * against the plot's own resolved margins. Not used by `GeoPlot`, whose
-   * position comes from a `d3-geo` projection instead (see `GeoLayout`).
-   * `AxisX`/`AxisY` themselves inherit their actual scale from svelteplot's
-   * `<Plot>` context — this only supplies their cosmetic/tick-count props.
+   * Axis ticks/titles and grid lines for plot kinds with an x/y axis pair
+   * (line/bar/heatmap/pyramid). Not used by `GeoPlot` (a map has no x/y axis
+   * pair). The scale itself is resolved by `buildScale` and applied via
+   * `BasePlotLayout`'s `<Plot x y>` — this only renders the cosmetics.
    */
   let {
     data,
@@ -35,13 +32,7 @@
   const xValues = $derived(data.map(getX));
   const yValues = $derived(data.map(getY));
 
-  /**
-   * Caps the requested tick count to the axis's own number of distinct
-   * values, but never above what the pixel width would naturally request —
-   * so a narrow domain (e.g. 5 whole years) never gets subdivided into
-   * fractional ticks (2020, 2020.5, 2021, …) just to fill the space. Skipped
-   * whenever the caller already controls tick density directly.
-   */
+  /** Caps tick count to the axis's distinct value count, never above what fits the pixel span. Skipped once the caller sets tick density directly. */
   function autoTickCount(scale: AxisBasedScalesConfig<TData>['x'], values: AxisValue[], span: number, spacing: number, min: number): number | undefined {
     if (scale?.ticks != null || scale?.tickSpacing != null || scale?.interval != null) return undefined;
     const uniqueCount = new Set(values.map(String)).size;
@@ -93,3 +84,19 @@
     opacity="0.8"
   >{verticalYLabel.text}</text>
 {/if}
+{#if scales?.x?.grid}
+  <GridX
+    stroke={typeof scales.x.grid === 'object' ? scales.x.grid.stroke : undefined}
+    strokeWidth={typeof scales.x.grid === 'object' ? scales.x.grid.strokeWidth : undefined}
+    strokeOpacity={typeof scales.x.grid === 'object' ? scales.x.grid.strokeOpacity : undefined}
+    strokeDasharray={typeof scales.x.grid === 'object' ? scales.x.grid.strokeDasharray : undefined}
+  />
+{/if}
+{#if scales?.y?.grid}
+  <GridY
+    stroke={typeof scales.y.grid === 'object' ? scales.y.grid.stroke : undefined}
+    strokeWidth={typeof scales.y.grid === 'object' ? scales.y.grid.strokeWidth : undefined}
+    strokeOpacity={typeof scales.y.grid === 'object' ? scales.y.grid.strokeOpacity : undefined}
+    strokeDasharray={typeof scales.y.grid === 'object' ? scales.y.grid.strokeDasharray : undefined}
+  />
+{/if}

package/dist/layout/{plot/AxisLayout.svelte.d.ts → scales/ScalesLayout.svelte.d.ts}

@@ -1,5 +1,4 @@
-import type { AxisValue } from '../../types/plots/axis';
-import type { AxisBasedScalesConfig } from '../../types/plots/props';
+import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
         data: TData[];
@@ -34,6 +33,6 @@ interface $$IsomorphicComponent {
     <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const AxisLayout: $$IsomorphicComponent;
-type AxisLayout<TData extends Record<string, unknown>> = InstanceType<typeof AxisLayout<TData>>;
-export default AxisLayout;
+declare const ScalesLayout: $$IsomorphicComponent;
+type ScalesLayout<TData extends Record<string, unknown>> = InstanceType<typeof ScalesLayout<TData>>;
+export default ScalesLayout;

package/dist/layout/scales/buildScale.d.ts

@@ -0,0 +1,8 @@
+import type { AxisValue, AxisScale } from '../../types/layout/scales';
+/**
+ * Resolves an author-facing {@link AxisScale} into what svelteplot's
+ * `<Plot x>`/`<Plot y>` accepts — strips `grid`/`seriesLayout`/
+ * `seriesPadding`/a vertical `label`, since `ScalesLayout` renders those
+ * itself.
+ */
+export declare function buildScale<TData>(scale: AxisScale<TData> | undefined, rows: TData[], getAxisValue: (d: TData) => AxisValue): AxisScale<TData> | undefined;

package/dist/layout/scales/buildScale.js

@@ -0,0 +1,43 @@
+import { SvelteSet } from 'svelte/reactivity';
+/** One representative row per unique axis value (first occurrence in `rows`). */
+function uniqueRows(rows, getAxisValue) {
+    const seen = new SvelteSet();
+    const out = [];
+    for (const row of rows) {
+        const v = getAxisValue(row);
+        if (seen.has(v))
+            continue;
+        seen.add(v);
+        out.push(row);
+    }
+    return out;
+}
+/** svelteplot's `sort` option only does a fixed ascending sort; a custom `scale.sort` comparator is resolved into an explicit `domain` instead, which svelteplot honors as-is. */
+function sortedScale(scale, rows, getAxisValue) {
+    const sort = scale?.sort;
+    if (!sort || scale?.domain)
+        return scale;
+    const reps = uniqueRows(rows, getAxisValue);
+    if (reps.length === 0 || !reps.every((r) => typeof getAxisValue(r) === 'string'))
+        return scale;
+    const domain = [...reps].sort(sort).map(getAxisValue);
+    return { ...scale, domain };
+}
+/**
+ * Resolves an author-facing {@link AxisScale} into what svelteplot's
+ * `<Plot x>`/`<Plot y>` accepts — strips `grid`/`seriesLayout`/
+ * `seriesPadding`/a vertical `label`, since `ScalesLayout` renders those
+ * itself.
+ */
+export function buildScale(scale, rows, getAxisValue) {
+    const sorted = sortedScale(scale, rows, getAxisValue);
+    if (!sorted)
+        return sorted;
+    const out = { ...sorted };
+    delete out.grid;
+    delete out.seriesLayout;
+    delete out.seriesPadding;
+    if (scale?.labelOrientation === 'vertical')
+        delete out.label;
+    return out;
+}

package/dist/layout/styles/StylesLayout.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { Frame } from 'svelteplot';
+  import TileLayer from './TileLayer.svelte';
+  import { geometryLonLatBounds } from '../../plots/utils/geoAccessors';
+  import type { StylesLayoutConfig } from '../../types/layout/styles';
+
+  /**
+   * Non-data cosmetic embellishments driven by a plot kind's own `styles`
+   * prop. Composed by `BasePlotLayout` for every plot kind, nested inside
+   * `CoordinatesLayout` so embellishments pan/zoom together with whatever
+   * they're placed alongside: the raster basemap `tileLayer` (`GeoPlot`
+   * only — other kinds' `styles` simply don't declare it) and the `frame`
+   * border, available on every plot kind.
+   */
+  let {
+    styles,
+    width,
+    height,
+    numericMargins,
+  }: {
+    styles?: StylesLayoutConfig;
+    width: number;
+    height: number;
+    numericMargins: { top: number; right: number; bottom: number; left: number };
+  } = $props();
+
+  const frame = $derived(styles?.frame);
+  const frameStyle = $derived(typeof frame === 'object' ? frame : undefined);
+
+  /** Auto-fits `TileLayer` to the tile-layer feature set `GeoPlot` tacks onto `styles.tileLayer.features` — see `StylesLayoutConfig`'s own doc comment. */
+  const dataLonLatBounds = $derived.by((): [number, number, number, number] | null => {
+    const features = styles?.tileLayer?.features;
+    if (!features?.length) return null;
+    let minLon = Infinity;
+    let maxLon = -Infinity;
+    let minLat = Infinity;
+    let maxLat = -Infinity;
+    for (const f of features) {
+      const b = geometryLonLatBounds(f.geometry);
+      if (!b) continue;
+      if (b[0] < minLon) minLon = b[0];
+      if (b[2] > maxLon) maxLon = b[2];
+      if (b[1] < minLat) minLat = b[1];
+      if (b[3] > maxLat) maxLat = b[3];
+    }
+    return minLon === Infinity ? null : [minLon, minLat, maxLon, maxLat];
+  });
+</script>
+
+{#if styles?.tileLayer}
+  <TileLayer
+    config={styles.tileLayer}
+    left={numericMargins.left}
+    top={numericMargins.top}
+    width={Math.max(0, width - numericMargins.left - numericMargins.right)}
+    height={Math.max(0, height - numericMargins.top - numericMargins.bottom)}
+    {dataLonLatBounds}
+  />
+{/if}
+{#if frame}
+  <Frame
+    fill={frameStyle?.fill}
+    fillOpacity={frameStyle?.fillOpacity}
+    stroke={frameStyle?.stroke}
+    strokeWidth={frameStyle?.strokeWidth}
+    strokeOpacity={frameStyle?.strokeOpacity}
+    strokeDasharray={frameStyle?.strokeDasharray}
+    borderRadius={frameStyle?.borderRadius}
+    inset={frameStyle?.inset}
+    insetTop={frameStyle?.insetTop}
+    insetRight={frameStyle?.insetRight}
+    insetBottom={frameStyle?.insetBottom}
+    insetLeft={frameStyle?.insetLeft}
+  />
+{/if}

package/dist/layout/styles/StylesLayout.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { StylesLayoutConfig } from '../../types/layout/styles';
+type $$ComponentProps = {
+    styles?: StylesLayoutConfig;
+    width: number;
+    height: number;
+    numericMargins: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+};
+declare const StylesLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type StylesLayout = ReturnType<typeof StylesLayout>;
+export default StylesLayout;

package/dist/{plots/geo → layout/styles}/TileLayer.svelte

@@ -7,8 +7,8 @@
     tileUrl,
     toProjectionLike,
     type StreamingProjection,
-  } from '../utils/tiles';
-  import type { GeoTileLayerConfig } from '../../types/plots/styles/geo';
+  } from '../../plots/utils/tiles';
+  import type { GeoTileLayerConfig } from '../../types/layout/styles';
 
   /**
    * Renders an XYZ raster tile basemap under the vector geometry. Mounted as

package/dist/{plots/geo → layout/styles}/TileLayer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { GeoTileLayerConfig } from '../../types/plots/styles/geo';
+import type { GeoTileLayerConfig } from '../../types/layout/styles';
 type $$ComponentProps = {
     config: GeoTileLayerConfig;
     left: number;

package/dist/layout/timeline/Timeline.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Plot, RuleX, RuleY, Text } from 'svelteplot';
-  import type { Orientation, TimeValue } from '../../types/charts/common';
+  import type { Orientation, TimeValue } from '../../types/layout/timeline';
 
   /**
    * Purely visual time axis: a baseline rule plus the ordered step labels with

package/dist/layout/timeline/Timeline.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Orientation, TimeValue } from '../../types/charts/common';
+import type { Orientation, TimeValue } from '../../types/layout/timeline';
 type $$ComponentProps = {
     currentValue: TimeValue;
     values: TimeValue[];

package/dist/layout/timeline/TimelineLayout.svelte

@@ -7,7 +7,7 @@
     TimeValue,
     TimelineChildSnippet,
     TimelineInterpolation,
-  } from '../../types/charts/common';
+  } from '../../types/layout/timeline';
   import type { Accessor } from '../../types/plots/data/common';
 
   /**

package/dist/layout/timeline/TimelineLayout.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Orientation, TimeValue, TimelineChildSnippet, TimelineInterpolation } from '../../types/charts/common';
+import type { Orientation, TimeValue, TimelineChildSnippet, TimelineInterpolation } from '../../types/layout/timeline';
 import type { Accessor } from '../../types/plots/data/common';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {

package/dist/layout/tooltip/Tooltip.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { resolveTooltipPlacement } from './resolveTooltipPlacement';
+  import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
 
   /**
    * Presentational tooltip positioned at `(x, y)` within a `position: relative`
@@ -7,10 +9,11 @@
    * {@link ChartContainer} stamps from the config, so it themes for free. Plots
    * that implement hovering can render this with their own content snippet.
    *
-   * Placement is boundary-aware: it prefers sitting centered above the point,
-   * but flips below when it would overflow the top and shifts horizontally
-   * when it would overflow the left/right, so it always stays clear of the
-   * `bounds` box (typically the plot's own width/height).
+   * Placement is boundary-aware: it prefers sitting `anchorX`/`anchorY` of the
+   * point (default: to the right and below — clear of the cursor so the
+   * tooltip never covers what's being hovered), falling back toward the
+   * opposite side (via the centered position) when the preferred side would
+   * overflow the `bounds` box — see `resolveTooltipPlacement`.
    */
   let {
     x,
@@ -20,6 +23,8 @@
     color,
     bounds,
     plain = false,
+    anchorX = 'right',
+    anchorY = 'bottom',
     children,
   }: {
     x: number;
@@ -36,28 +41,19 @@
      * so a custom card can match its own corners via `--dct-tooltip-radius`.
      */
     plain?: boolean;
+    /** Preferred horizontal anchor relative to the cursor. Defaults to `'right'`. */
+    anchorX?: TooltipAnchorX;
+    /** Preferred vertical anchor relative to the cursor. Defaults to `'bottom'`. */
+    anchorY?: TooltipAnchorY;
     children: Snippet;
   } = $props();
 
-  const GAP = 10;
-  const EDGE_MARGIN = 6;
-
   let boxWidth = $state(0);
   let boxHeight = $state(0);
 
-  const placement = $derived.by(() => {
-    const boundsWidth = bounds?.width ?? Infinity;
-    const boundsHeight = bounds?.height ?? Infinity;
-
-    let top = y - GAP - boxHeight;
-    if (top < EDGE_MARGIN) top = y + GAP;
-    top = Math.min(Math.max(top, EDGE_MARGIN), Math.max(EDGE_MARGIN, boundsHeight - boxHeight - EDGE_MARGIN));
-
-    let left = x - boxWidth / 2;
-    left = Math.min(Math.max(left, EDGE_MARGIN), Math.max(EDGE_MARGIN, boundsWidth - boxWidth - EDGE_MARGIN));
-
-    return { left, top };
-  });
+  const placement = $derived(
+    resolveTooltipPlacement({ x, y, boxWidth, boxHeight, bounds, anchorX, anchorY }),
+  );
 </script>
 
 {#if visible}

package/dist/layout/tooltip/Tooltip.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
 type $$ComponentProps = {
     x: number;
     y: number;
@@ -17,6 +18,10 @@ type $$ComponentProps = {
      * so a custom card can match its own corners via `--dct-tooltip-radius`.
      */
     plain?: boolean;
+    /** Preferred horizontal anchor relative to the cursor. Defaults to `'right'`. */
+    anchorX?: TooltipAnchorX;
+    /** Preferred vertical anchor relative to the cursor. Defaults to `'bottom'`. */
+    anchorY?: TooltipAnchorY;
     children: Snippet;
 };
 declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/layout/tooltip/TooltipLayout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
   import type { Snippet } from 'svelte';
   import Tooltip from './Tooltip.svelte';
+  import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
 
   /**
    * The "resolve + render" step every hoverable plot repeats verbatim:
@@ -20,6 +21,8 @@
     rows,
     format,
     content,
+    anchorX,
+    anchorY,
   }: {
     visible: boolean;
     x: number;
@@ -31,11 +34,14 @@
     format: (row: TRow) => string;
     /** Custom tooltip body; replaces the joined `format` text when given. */
     content?: Snippet<[{ rows: TRow[] }]>;
+    /** Preferred anchor — forwarded to `Tooltip` as-is; `undefined` falls through to its own system default. */
+    anchorX?: TooltipAnchorX;
+    anchorY?: TooltipAnchorY;
   } = $props();
 </script>
 
 {#if visible}
-  <Tooltip {x} {y} {bounds} plain={!!content}>
+  <Tooltip {x} {y} {bounds} plain={!!content} {anchorX} {anchorY}>
     {#if content}
       {@render content({ rows })}
     {:else}

package/dist/layout/tooltip/TooltipLayout.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {
         visible: boolean;
@@ -16,6 +17,9 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         content?: Snippet<[{
             rows: TRow[];
         }]>;
+        /** Preferred anchor — forwarded to `Tooltip` as-is; `undefined` falls through to its own system default. */
+        anchorX?: TooltipAnchorX;
+        anchorY?: TooltipAnchorY;
     };
     exports: {};
     bindings: "";

package/dist/layout/tooltip/controller.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HoverStore, HoverPoint } from '../../types/layout/tooltip';
-import type { AxisValue } from '../../types/plots/axis';
+import type { AxisValue } from '../../types/layout/scales';
 /**
  * The plot-agnostic hover state machine shared by every plot. Given reactive
  * accessors for the current hover store, this facet's id, and the local points,
@@ -38,10 +38,9 @@ export declare function createHoverController<T extends Record<string, unknown>>
         row: T;
     }[];
     readonly matchedRows: HoverPoint<T>[];
-    readonly ruleX: AxisValue | null;
-    readonly ruleY: AxisValue | null;
-    readonly impliesRuleX: boolean;
-    readonly impliesRuleY: boolean;
+    readonly activePoint: HoverPoint<T> | null;
+    readonly impliesCrosshairX: boolean;
+    readonly impliesCrosshairY: boolean;
     readonly showTooltip: boolean;
     readonly tooltipPosition: {
         x: number;

package/dist/layout/tooltip/controller.svelte.js

@@ -1,4 +1,4 @@
-import { eq, matchByStrategy, impliesRuleX, impliesRuleY, filterBySeries, } from './utils';
+import { eq, matchByStrategy, impliesCrosshairX, impliesCrosshairY, filterBySeries, } from './utils';
 /**
  * The plot-agnostic hover state machine shared by every plot. Given reactive
  * accessors for the current hover store, this facet's id, and the local points,
@@ -35,13 +35,42 @@ export function createHoverController(args) {
     // resolve a semantic value off the source row directly — e.g. a bar
     // plot's category, regardless of which visual axis it's drawn on.
     const highlight = $derived(matched.map(({ x, y, label, series, color, dx, dy, row }) => ({ x, y, label, series, color, dx, dy, row })));
-    // Raw hover position — available whenever there are matched points.
-    // BasePlotLayout gates actual display with impliesRuleX/Y + the marker's ruleX/Y props.
-    const ruleX = $derived(matched.length > 0 ? args.hover().activeX : null);
-    const ruleY = $derived(matched.length > 0 ? args.hover().activeY : null);
+    /**
+     * The specific matched point that was actually hovered — found by the
+     * shared store's `activeSeries` (set from whichever row was hit), falling
+     * back to the first match when there's no series concept (punctual
+     * matches) or nothing tags a series. Consumers read `.x`/`.y` off this
+     * for the crosshair rule position — every point in `matched` already
+     * shares the "implied" axis's value by construction of `matchByStrategy`,
+     * and picking the actively-hovered one is what makes forcing a rule on
+     * the *other* axis (e.g. `ruleY: true` under an `'x'`-strategy chart)
+     * point at the row under the cursor rather than an arbitrary matched
+     * sibling. `BasePlotLayout` gates actual display with
+     * `impliesCrosshairX`/`Y` + the marker's own `ruleX`/`ruleY` props.
+     *
+     * `activeSeries` alone can't disambiguate two matched rows that share the
+     * same (or absent) series tag — e.g. an ungrouped bar/line chart where two
+     * categories tie on the matched axis value. `onPointer` sets `activeX`/
+     * `activeY` straight from the hit row, so when more than one series-tied
+     * candidate remains, narrowing to the one whose own x/y equals the hit
+     * row's picks the actual row under the cursor instead of an arbitrary tie.
+     */
+    const activePoint = $derived.by(() => {
+        if (matched.length === 0)
+            return null;
+        const h = args.hover();
+        const bySeries = matched.filter((p) => p.series === h.activeSeries);
+        const candidates = bySeries.length > 0 ? bySeries : matched;
+        if (candidates.length === 1)
+            return candidates[0];
+        const { activeX, activeY } = h;
+        if (activeX == null || activeY == null)
+            return candidates[0];
+        return candidates.find((p) => eq(p.x, activeX) && eq(p.y, activeY)) ?? candidates[0];
+    });
     // Whether the current strategy implies a crosshair rule on each axis by default.
-    const _impliesRuleX = $derived(impliesRuleX(args.hover().strategy));
-    const _impliesRuleY = $derived(impliesRuleY(args.hover().strategy));
+    const _impliesCrosshairX = $derived(impliesCrosshairX(args.hover().strategy));
+    const _impliesCrosshairY = $derived(impliesCrosshairY(args.hover().strategy));
     const showTooltip = $derived.by(() => {
         if (matchedRows.length === 0)
             return false;
@@ -102,17 +131,14 @@ export function createHoverController(args) {
         get matchedRows() {
             return matchedRows;
         },
-        get ruleX() {
-            return ruleX;
-        },
-        get ruleY() {
-            return ruleY;
+        get activePoint() {
+            return activePoint;
         },
-        get impliesRuleX() {
-            return _impliesRuleX;
+        get impliesCrosshairX() {
+            return _impliesCrosshairX;
         },
-        get impliesRuleY() {
-            return _impliesRuleY;
+        get impliesCrosshairY() {
+            return _impliesCrosshairY;
         },
         get showTooltip() {
             return showTooltip;

package/dist/layout/tooltip/resolveTooltipPlacement.d.ts

@@ -0,0 +1,24 @@
+import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+/**
+ * Resolves a floating tooltip's top-left pixel position relative to a cursor
+ * point, honoring a preferred anchor per axis and falling back toward the
+ * opposite side (via the centered position) when the preferred side would
+ * push it past `bounds`. Used by `Tooltip.svelte` for both the default box
+ * and any custom `content` snippet — both go through the same placement.
+ */
+export declare function resolveTooltipPlacement(args: {
+    x: number;
+    y: number;
+    boxWidth: number;
+    boxHeight: number;
+    /** Box the tooltip must stay within — usually the hosting plot's width/height. */
+    bounds?: {
+        width: number;
+        height: number;
+    };
+    anchorX: TooltipAnchorX;
+    anchorY: TooltipAnchorY;
+}): {
+    left: number;
+    top: number;
+};

package/dist/layout/tooltip/resolveTooltipPlacement.js

@@ -0,0 +1,49 @@
+const GAP = 10;
+const EDGE_MARGIN = 6;
+/** Anchors tried in order for a given preference — the opposite side is always the last resort. */
+function candidateOrder(anchor) {
+    if (anchor === 'before')
+        return ['before', 'middle', 'after'];
+    if (anchor === 'after')
+        return ['after', 'middle', 'before'];
+    return ['middle'];
+}
+function axisStart(anchor, pos, size) {
+    if (anchor === 'before')
+        return pos - GAP - size;
+    if (anchor === 'after')
+        return pos + GAP;
+    return pos - size / 2;
+}
+function fits(start, size, boundsSize) {
+    return start >= EDGE_MARGIN && start + size <= boundsSize - EDGE_MARGIN;
+}
+/** Resolves one axis: tries the preferred anchor, then its fallbacks in order, then clamps as a last resort. */
+function resolveAxis(pos, size, boundsSize, anchor) {
+    const order = candidateOrder(anchor);
+    for (const candidate of order) {
+        const start = axisStart(candidate, pos, size);
+        if (fits(start, size, boundsSize))
+            return start;
+    }
+    const fallbackStart = axisStart(order[order.length - 1], pos, size);
+    const maxStart = Math.max(EDGE_MARGIN, boundsSize - size - EDGE_MARGIN);
+    return Math.min(Math.max(fallbackStart, EDGE_MARGIN), maxStart);
+}
+/**
+ * Resolves a floating tooltip's top-left pixel position relative to a cursor
+ * point, honoring a preferred anchor per axis and falling back toward the
+ * opposite side (via the centered position) when the preferred side would
+ * push it past `bounds`. Used by `Tooltip.svelte` for both the default box
+ * and any custom `content` snippet — both go through the same placement.
+ */
+export function resolveTooltipPlacement(args) {
+    const boundsWidth = args.bounds?.width ?? Infinity;
+    const boundsHeight = args.bounds?.height ?? Infinity;
+    const xAnchor = args.anchorX === 'right' ? 'after' : args.anchorX === 'left' ? 'before' : 'middle';
+    const yAnchor = args.anchorY === 'bottom' ? 'after' : args.anchorY === 'top' ? 'before' : 'middle';
+    return {
+        left: resolveAxis(args.x, args.boxWidth, boundsWidth, xAnchor),
+        top: resolveAxis(args.y, args.boxHeight, boundsHeight, yAnchor),
+    };
+}