@juspay/svelte-ui-components 2.86.0 → 2.88.0

package/dist/_chart/geometry.js

@@ -1,3 +1,5 @@
+import { measureText } from './measure';
+import { thinTicks } from './labels';
 export function computeChartDimensions(width, height, margin = {}) {
     const m = {
         top: margin.top ?? 20,
@@ -13,50 +15,53 @@ export function computeChartDimensions(width, height, margin = {}) {
         innerHeight: Math.max(0, height - m.top - m.bottom)
     };
 }
-// ── Text measurement ────────────────────────────────────────────
-let textMeasurementContext = null;
+// Offset from the axis line to the tick-label text (Axis.svelte TICK_SIZE + 4).
+const TICK_PAD = 10;
+// Vertical space reserved for a rotated/horizontal axis title.
+const TITLE_BAND = 18;
+// Cap on how deep rotated x labels may grow the bottom margin (long labels crop).
+const MAX_ROTATED_DEPTH = 72;
 /**
- * Measures rendered text width via a shared offscreen canvas context.
- * Returns null when measurement is unavailable (SSR, or the environment
- * provides no working 2D canvas — e.g. jsdom) so callers can fall back to
- * a fixed layout instead of acting on a bogus 0.
+ * Measured, Highcharts-style margins: gutters grow to fit formatted tick labels
+ * (instead of clipping) and the bottom axis rotates/thins its labels when the
+ * per-category step is too narrow. Order matters to avoid feedback loops:
+ * left/right derive from label text only, then innerWidth decides x rotation,
+ * then bottom derives from the rotation outcome.
  */
-export function measureTextWidth(text, font) {
-    if (typeof document === 'undefined') {
-        return null;
-    }
-    if (textMeasurementContext === null) {
-        textMeasurementContext = document.createElement('canvas').getContext('2d');
-    }
-    if (textMeasurementContext === null) {
-        return null;
-    }
-    textMeasurementContext.font = font;
-    const width = textMeasurementContext.measureText(text).width;
-    // jsdom's canvas stub reports 0 for any text; treat that as "cannot measure".
-    return width > 0 ? width : null;
-}
-/**
- * Left margin for a horizontal bar chart's category axis, sized to fit the
- * widest category label. Category tick labels render right-aligned 10px left
- * of the axis line (tick mark 6px + 4px gap), so any label wider than
- * `margin.left - 10` bleeds out of the SVG and gets clipped by the page.
- *
- * - Never shrinks below `fallback` (the legacy fixed gutter), so charts whose
- *   labels already fit keep their exact current layout.
- * - Caps at 45% of the chart width so one pathological label cannot crush the
- *   plot area; past the cap the label bleeds as before, but the plot survives.
- * - `widestLabelWidth === null` (SSR / unmeasurable) keeps the legacy gutter.
- */
-export function computeHorizontalCategoryGutter(widestLabelWidth, chartWidth, fallback = 50) {
-    if (widestLabelWidth === null) {
-        return fallback;
-    }
-    const tickLabelInset = 10;
-    const breathingPad = 4;
-    const cap = Math.max(fallback, chartWidth * 0.45);
-    const fitted = widestLabelWidth + tickLabelInset + breathingPad;
-    return Math.round(Math.min(Math.max(fallback, fitted), cap));
+export function computeAutoLayout(input) {
+    const font = input.font ?? { size: 11 };
+    const labelHeight = font.size * 1.2;
+    const widthOf = (labels) => labels.reduce((max, t) => Math.max(max, measureText(t, font).width), 0);
+    const left = Math.max(input.base?.left ?? 0, input.yTickLabels.length > 0
+        ? Math.ceil(widthOf(input.yTickLabels)) +
+            TICK_PAD +
+            6 +
+            (input.hasYAxisLabel ? TITLE_BAND : 0)
+        : 0);
+    const xWidths = input.xTickLabels.map((t) => measureText(t, font).width);
+    const maxXWidth = xWidths.reduce((m, w) => Math.max(m, w), 0);
+    const y2Width = typeof input.y2TickLabels !== 'undefined' && input.y2TickLabels.length > 0
+        ? Math.ceil(widthOf(input.y2TickLabels)) +
+            TICK_PAD +
+            6 +
+            (input.hasY2AxisLabel ? TITLE_BAND : 0)
+        : 0;
+    // Right gutter: the right axis when present, else half the last x label so
+    // edge labels don't clip.
+    const right = Math.max(input.base?.right ?? 0, y2Width, Math.ceil(maxXWidth / 2) + 8);
+    const innerWidth = Math.max(0, input.width - left - right);
+    const step = input.xTickLabels.length > 0 ? innerWidth / input.xTickLabels.length : innerWidth;
+    const { rotate, every } = input.xTickLabels.length > 0
+        ? thinTicks({ labelWidths: xWidths, labelHeight, step })
+        : { rotate: false, every: 1 };
+    const rotatedDepth = rotate
+        ? Math.min(MAX_ROTATED_DEPTH, Math.ceil(maxXWidth * Math.SQRT1_2))
+        : 0;
+    const xLabelDepth = input.xTickLabels.length > 0 ? TICK_PAD + (rotate ? rotatedDepth : Math.ceil(labelHeight)) : 0;
+    const bottom = Math.max(input.base?.bottom ?? 0, xLabelDepth + 6 + (input.hasXAxisLabel ? TITLE_BAND : 0));
+    const top = Math.max(input.base?.top ?? 0, Math.ceil(labelHeight / 2) + 8);
+    const dims = computeChartDimensions(input.width, input.height, { top, right, bottom, left });
+    return { ...dims, xRotate: rotate, xEvery: every, xLabelOffset: xLabelDepth + TITLE_BAND };
 }
 // ── Pie layout ──────────────────────────────────────────────────
 export function computePieLayout(data, startAngle = -Math.PI / 2, padAngle = 0) {

package/dist/_chart/interactions.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared pointer-interaction helpers used by the chart components.
+ */
+export type RelativePointerPosition = {
+    x: number;
+    y: number;
+};
+/**
+ * Pointer position relative to the top-left corner of `el`, or null when the
+ * element is not mounted yet.
+ */
+export declare function pointerPositionIn(el: HTMLElement | null, event: PointerEvent): RelativePointerPosition | null;
+/**
+ * Touch taps never fire pointerleave, so a tap-opened tooltip would otherwise
+ * stay stuck: dismiss when a pointerdown lands outside `containerEl`.
+ *
+ * Attaches a window listener and returns its cleanup, making it directly
+ * usable as an `$effect` body's return value. No-op during SSR.
+ */
+export declare function dismissOnOutsidePointerDown(containerEl: HTMLElement | null, onDismiss: () => void): () => void;

package/dist/_chart/interactions.js

@@ -0,0 +1,34 @@
+/**
+ * Shared pointer-interaction helpers used by the chart components.
+ */
+/**
+ * Pointer position relative to the top-left corner of `el`, or null when the
+ * element is not mounted yet.
+ */
+export function pointerPositionIn(el, event) {
+    if (el === null) {
+        return null;
+    }
+    const rect = el.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+}
+/**
+ * Touch taps never fire pointerleave, so a tap-opened tooltip would otherwise
+ * stay stuck: dismiss when a pointerdown lands outside `containerEl`.
+ *
+ * Attaches a window listener and returns its cleanup, making it directly
+ * usable as an `$effect` body's return value. No-op during SSR.
+ */
+export function dismissOnOutsidePointerDown(containerEl, onDismiss) {
+    if (typeof window === 'undefined') {
+        return () => { };
+    }
+    const dismiss = (event) => {
+        const target = event.target;
+        if (containerEl !== null && !(target instanceof Node && containerEl.contains(target))) {
+            onDismiss();
+        }
+    };
+    window.addEventListener('pointerdown', dismiss);
+    return () => window.removeEventListener('pointerdown', dismiss);
+}

package/dist/_chart/labels.d.ts

@@ -0,0 +1,76 @@
+import { type FontSpec } from './measure';
+export type LabelRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type LabelSize = {
+    width: number;
+    height: number;
+};
+export type LabelPlacement = {
+    x: number;
+    y: number;
+    placement: 'outside' | 'inside' | 'hidden';
+    textAnchor: 'start' | 'middle' | 'end';
+    dominantBaseline: 'auto' | 'middle' | 'hanging';
+};
+/**
+ * Highcharts-style end-of-bar label chain: place just past the bar's value end
+ * (outside) → justify back inside the bar end when the plot area would clip it →
+ * hide (crop) when the bar cannot fit the label either.
+ */
+export declare function resolveEndLabel(opts: {
+    bar: LabelRect;
+    plot: LabelSize;
+    label: LabelSize;
+    orientation: 'vertical' | 'horizontal';
+    negative?: boolean;
+    gap?: number;
+    padding?: number;
+}): LabelPlacement;
+/** Center a label inside a segment (stacked bars, funnel stages); hide when it cannot fit. */
+export declare function resolveInsideLabel(opts: {
+    bar: LabelRect;
+    label: LabelSize;
+    padding?: number;
+}): LabelPlacement;
+/** Line/area point-value labels: above the point, flipped below at the plot top, thinned by density. */
+export declare function resolvePointLabels(opts: {
+    points: Array<{
+        x: number;
+        y: number;
+    }>;
+    labels: LabelSize[];
+    plot: LabelSize;
+    gap?: number;
+}): Array<{
+    x: number;
+    y: number;
+    visible: boolean;
+    dominantBaseline: 'auto' | 'hanging';
+}>;
+/**
+ * Axis tick-label crowding chain: horizontal → rotate -45° → thin to every Nth,
+ * where N is the smallest integer such that rotated labels no longer overlap.
+ */
+export declare function thinTicks(opts: {
+    labelWidths: number[];
+    labelHeight: number;
+    step: number;
+    gap?: number;
+}): {
+    rotate: boolean;
+    every: number;
+};
+/** Measurement-based ellipsis truncation; empty string when fewer than 2 chars fit. */
+export declare function truncateToWidth(text: string, maxWidth: number, font: FontSpec): string;
+/** Convert an anchored SVG text placement into its bounding rect for collision checks. */
+export declare function placedLabelRect(p: Pick<LabelPlacement, 'x' | 'y' | 'textAnchor' | 'dominantBaseline'>, label: LabelSize): LabelRect;
+/**
+ * Highcharts `allowOverlap: false` equivalent: greedy first-come pass that hides
+ * any label whose rect intersects an already-kept label. `null` entries are
+ * pre-hidden labels and always return false.
+ */
+export declare function dropOverlapping(rects: Array<LabelRect | null>, gap?: number): boolean[];

package/dist/_chart/labels.js

@@ -0,0 +1,213 @@
+import { measureText } from './measure';
+/**
+ * Highcharts-style end-of-bar label chain: place just past the bar's value end
+ * (outside) → justify back inside the bar end when the plot area would clip it →
+ * hide (crop) when the bar cannot fit the label either.
+ */
+export function resolveEndLabel(opts) {
+    const { bar, plot, label, orientation } = opts;
+    const gap = opts.gap ?? 4;
+    const padding = opts.padding ?? 4;
+    const negative = opts.negative ?? false;
+    if (orientation === 'vertical') {
+        const x = bar.x + bar.width / 2;
+        const insideFits = bar.height >= label.height + 2 * padding;
+        if (!negative) {
+            if (bar.y - gap - label.height >= 0) {
+                return {
+                    x,
+                    y: bar.y - gap,
+                    placement: 'outside',
+                    textAnchor: 'middle',
+                    dominantBaseline: 'auto'
+                };
+            }
+            if (insideFits) {
+                return {
+                    x,
+                    y: bar.y + padding,
+                    placement: 'inside',
+                    textAnchor: 'middle',
+                    dominantBaseline: 'hanging'
+                };
+            }
+            return { x, y: 0, placement: 'hidden', textAnchor: 'middle', dominantBaseline: 'auto' };
+        }
+        const end = bar.y + bar.height;
+        if (end + gap + label.height <= plot.height) {
+            return {
+                x,
+                y: end + gap,
+                placement: 'outside',
+                textAnchor: 'middle',
+                dominantBaseline: 'hanging'
+            };
+        }
+        if (insideFits) {
+            return {
+                x,
+                y: end - padding,
+                placement: 'inside',
+                textAnchor: 'middle',
+                dominantBaseline: 'auto'
+            };
+        }
+        return { x, y: 0, placement: 'hidden', textAnchor: 'middle', dominantBaseline: 'auto' };
+    }
+    const y = bar.y + bar.height / 2;
+    // A sub-band thinner than the label height cannot host a legible label in
+    // either position (generalises the old `bar.height >= 13` special case).
+    if (bar.height < label.height) {
+        return { x: 0, y, placement: 'hidden', textAnchor: 'start', dominantBaseline: 'middle' };
+    }
+    const insideFits = bar.width >= label.width + 2 * padding;
+    if (!negative) {
+        const end = bar.x + bar.width;
+        if (end + gap + label.width <= plot.width) {
+            return {
+                x: end + gap,
+                y,
+                placement: 'outside',
+                textAnchor: 'start',
+                dominantBaseline: 'middle'
+            };
+        }
+        if (insideFits) {
+            return {
+                x: end - padding,
+                y,
+                placement: 'inside',
+                textAnchor: 'end',
+                dominantBaseline: 'middle'
+            };
+        }
+        return { x: 0, y, placement: 'hidden', textAnchor: 'start', dominantBaseline: 'middle' };
+    }
+    if (bar.x - gap - label.width >= 0) {
+        return {
+            x: bar.x - gap,
+            y,
+            placement: 'outside',
+            textAnchor: 'end',
+            dominantBaseline: 'middle'
+        };
+    }
+    if (insideFits) {
+        return {
+            x: bar.x + padding,
+            y,
+            placement: 'inside',
+            textAnchor: 'start',
+            dominantBaseline: 'middle'
+        };
+    }
+    return { x: 0, y, placement: 'hidden', textAnchor: 'start', dominantBaseline: 'middle' };
+}
+/** Center a label inside a segment (stacked bars, funnel stages); hide when it cannot fit. */
+export function resolveInsideLabel(opts) {
+    const { bar, label } = opts;
+    const padding = opts.padding ?? 4;
+    const fits = bar.width >= label.width + 2 * padding && bar.height >= label.height + 2 * padding;
+    return {
+        x: bar.x + bar.width / 2,
+        y: bar.y + bar.height / 2,
+        placement: fits ? 'inside' : 'hidden',
+        textAnchor: 'middle',
+        dominantBaseline: 'middle'
+    };
+}
+/** Line/area point-value labels: above the point, flipped below at the plot top, thinned by density. */
+export function resolvePointLabels(opts) {
+    const gap = opts.gap ?? 8;
+    const n = opts.points.length;
+    // Thinning cadence from the tightest real gap between consecutive points —
+    // non-uniform x data must thin for its densest run, not the average spread.
+    let step = Number.POSITIVE_INFINITY;
+    for (let i = 1; i < n; i++) {
+        step = Math.min(step, Math.abs(opts.points[i].x - opts.points[i - 1].x));
+    }
+    const maxWidth = opts.labels.reduce((m, l) => Math.max(m, l.width), 0);
+    const every = Math.max(1, Math.ceil((maxWidth + 4) / step));
+    return opts.points.map((point, i) => {
+        const label = opts.labels[i] ?? { width: 0, height: 0 };
+        const flip = point.y - gap - label.height < 0;
+        return {
+            x: point.x,
+            y: flip ? point.y + gap : point.y - gap,
+            visible: i % every === 0,
+            dominantBaseline: flip ? 'hanging' : 'auto'
+        };
+    });
+}
+/**
+ * Axis tick-label crowding chain: horizontal → rotate -45° → thin to every Nth,
+ * where N is the smallest integer such that rotated labels no longer overlap.
+ */
+export function thinTicks(opts) {
+    const gap = opts.gap ?? 8;
+    const maxWidth = opts.labelWidths.reduce((m, w) => Math.max(m, w), 0);
+    if (opts.step <= 0) {
+        return { rotate: false, every: 1 };
+    }
+    if (maxWidth + gap <= opts.step) {
+        return { rotate: false, every: 1 };
+    }
+    // A -45°-rotated label's horizontal footprint is governed by its line height
+    // projected onto the axis: height * √2.
+    const rotatedFootprint = opts.labelHeight * Math.SQRT2 + gap;
+    return { rotate: true, every: Math.max(1, Math.ceil(rotatedFootprint / opts.step)) };
+}
+/** Measurement-based ellipsis truncation; empty string when fewer than 2 chars fit. */
+export function truncateToWidth(text, maxWidth, font) {
+    if (measureText(text, font).width <= maxWidth) {
+        return text;
+    }
+    let lo = 0;
+    let hi = text.length;
+    while (lo < hi) {
+        const mid = Math.ceil((lo + hi) / 2);
+        if (measureText(text.slice(0, mid) + '…', font).width <= maxWidth) {
+            lo = mid;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    return lo >= 2 ? text.slice(0, lo) + '…' : '';
+}
+/** Convert an anchored SVG text placement into its bounding rect for collision checks. */
+export function placedLabelRect(p, label) {
+    const x = p.textAnchor === 'middle'
+        ? p.x - label.width / 2
+        : p.textAnchor === 'end'
+            ? p.x - label.width
+            : p.x;
+    const y = p.dominantBaseline === 'middle'
+        ? p.y - label.height / 2
+        : p.dominantBaseline === 'hanging'
+            ? p.y
+            : p.y - label.height;
+    return { x, y, width: label.width, height: label.height };
+}
+/**
+ * Highcharts `allowOverlap: false` equivalent: greedy first-come pass that hides
+ * any label whose rect intersects an already-kept label. `null` entries are
+ * pre-hidden labels and always return false.
+ */
+export function dropOverlapping(rects, gap = 2) {
+    const kept = [];
+    return rects.map((r) => {
+        if (r === null) {
+            return false;
+        }
+        const collides = kept.some((k) => r.x < k.x + k.width + gap &&
+            k.x < r.x + r.width + gap &&
+            r.y < k.y + k.height + gap &&
+            k.y < r.y + r.height + gap);
+        if (collides) {
+            return false;
+        }
+        kept.push(r);
+        return true;
+    });
+}

package/dist/_chart/measure.d.ts

@@ -0,0 +1,12 @@
+export type FontSpec = {
+    /** Font size in px. */
+    size: number;
+    family?: string;
+    weight?: number | string;
+};
+export declare function measureText(text: string, font: FontSpec): {
+    width: number;
+    height: number;
+};
+/** Reads a px-valued CSS custom property off an element, with an SSR-safe fallback. */
+export declare function readCssVarPx(el: Element | null, name: string, fallback: number): number;

package/dist/_chart/measure.js

@@ -0,0 +1,46 @@
+const DEFAULT_FAMILY = 'system-ui, -apple-system, sans-serif';
+// Average glyph width ≈ 0.6em for UI sans fonts — only used when canvas is
+// unavailable (SSR / unit tests); the client always re-measures after mount.
+const HEURISTIC_WIDTH_PER_CHAR = 0.6;
+const LINE_HEIGHT_FACTOR = 1.2;
+const CACHE_LIMIT = 4000;
+let ctx = null;
+const cache = new Map();
+function context() {
+    if (ctx !== null) {
+        return ctx;
+    }
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    ctx = document.createElement('canvas').getContext('2d');
+    return ctx;
+}
+export function measureText(text, font) {
+    const height = font.size * LINE_HEIGHT_FACTOR;
+    // NUL-delimited so free-form family/text strings (which may contain any
+    // printable character, e.g. "12,000 | 100%") can never collide across fields.
+    const key = [font.weight ?? 400, font.size, font.family ?? '', text].join('\u0000');
+    const cached = cache.get(key);
+    if (typeof cached !== 'undefined') {
+        return { width: cached, height };
+    }
+    const c = context();
+    const width = c === null
+        ? text.length * font.size * HEURISTIC_WIDTH_PER_CHAR
+        : ((c.font = `${font.weight ?? 400} ${font.size}px ${font.family ?? DEFAULT_FAMILY}`),
+            c.measureText(text).width);
+    if (cache.size >= CACHE_LIMIT) {
+        cache.clear();
+    }
+    cache.set(key, width);
+    return { width, height };
+}
+/** Reads a px-valued CSS custom property off an element, with an SSR-safe fallback. */
+export function readCssVarPx(el, name, fallback) {
+    if (typeof window === 'undefined' || el === null) {
+        return fallback;
+    }
+    const parsed = parseFloat(getComputedStyle(el).getPropertyValue(name));
+    return Number.isNaN(parsed) ? fallback : parsed;
+}

package/dist/_chart/scales.d.ts

@@ -1,5 +1,5 @@
 import type { LinearScale, BandScale } from './types';
 export declare function niceLinearDomain(min: number, max: number): [number, number];
-export declare function computeLinearTicks(domain: [number, number], count?: number): number[];
+export declare function computeLinearTicks(domain: [number, number], count?: number, integer?: boolean): number[];
 export declare function createLinearScale(domain: [number, number], range: [number, number]): LinearScale;
 export declare function createBandScale(domain: string[], range: [number, number], padding?: number): BandScale;

package/dist/_chart/scales.js

@@ -9,7 +9,7 @@ export function niceLinearDomain(min, max) {
     const niceMax = Math.ceil(max / step) * step;
     return [niceMin, niceMax];
 }
-export function computeLinearTicks(domain, count = 5) {
+export function computeLinearTicks(domain, count = 5, integer = false) {
     const [min, max] = domain;
     if (min === max) {
         return [min];
@@ -31,6 +31,11 @@ export function computeLinearTicks(domain, count = 5) {
     else {
         step = base * 10;
     }
+    // Category axes (Highcharts semantics): ticks sit on whole category
+    // positions, so a fractional step would repeat labels — floor it to 1.
+    if (integer && step < 1) {
+        step = 1;
+    }
     const ticks = [];
     let tick = Math.ceil(min / step) * step;
     while (tick <= max + step * 0.001) {
@@ -48,7 +53,7 @@ export function createLinearScale(domain, range) {
     return Object.assign(fn, {
         domain,
         range,
-        ticks: (count) => computeLinearTicks(domain, count),
+        ticks: (count, integer) => computeLinearTicks(domain, count, integer),
         invert: (pixel) => d0 + ((pixel - r0) / rSpan) * dSpan
     });
 }

package/dist/_chart/tooltipPosition.d.ts

@@ -0,0 +1,22 @@
+import type { TooltipAnchor } from './types';
+type Size = {
+    width: number;
+    height: number;
+};
+/**
+ * Pure tooltip placement: anchor mode positions relative to a data point with
+ * side-flipping; cursor mode follows the pointer with flip-then-clamp on both
+ * axes. All coordinates are relative to the positioned container.
+ */
+export declare function computeTooltipPosition(opts: {
+    mouseX?: number;
+    mouseY?: number;
+    anchor?: TooltipAnchor | null;
+    tooltip: Size;
+    container: Size;
+    offset?: number;
+}): {
+    left: number;
+    top: number;
+};
+export {};

package/dist/_chart/tooltipPosition.js

@@ -0,0 +1,49 @@
+const clamp = (value, max) => Math.max(0, Number.isFinite(max) ? Math.min(value, max) : value);
+/**
+ * Pure tooltip placement: anchor mode positions relative to a data point with
+ * side-flipping; cursor mode follows the pointer with flip-then-clamp on both
+ * axes. All coordinates are relative to the positioned container.
+ */
+export function computeTooltipPosition(opts) {
+    const offset = opts.offset ?? 12;
+    const { tooltip, container } = opts;
+    const maxLeft = container.width - tooltip.width;
+    const maxTop = container.height - tooltip.height;
+    const a = opts.anchor ?? null;
+    if (a !== null) {
+        let left;
+        let top;
+        if (a.side === 'top' || a.side === 'bottom') {
+            left = a.x - tooltip.width / 2;
+            top = a.side === 'top' ? a.y - tooltip.height - offset : a.y + offset;
+            if (a.side === 'top' && top < 0) {
+                top = a.y + offset;
+            }
+            else if (a.side === 'bottom' && top > maxTop) {
+                top = a.y - tooltip.height - offset;
+            }
+        }
+        else {
+            top = a.y - tooltip.height / 2;
+            left = a.side === 'right' ? a.x + offset : a.x - tooltip.width - offset;
+            if (a.side === 'right' && left > maxLeft) {
+                left = a.x - tooltip.width - offset;
+            }
+            else if (a.side === 'left' && left < 0) {
+                left = a.x + offset;
+            }
+        }
+        return { left: clamp(left, maxLeft), top: clamp(top, maxTop) };
+    }
+    const mouseX = opts.mouseX ?? 0;
+    const mouseY = opts.mouseY ?? 0;
+    let left = mouseX + offset;
+    if (left + tooltip.width > container.width) {
+        left = mouseX - tooltip.width - offset;
+    }
+    let top = mouseY - offset;
+    if (top + tooltip.height > container.height) {
+        top = mouseY - tooltip.height - offset;
+    }
+    return { left: clamp(left, maxLeft), top: clamp(top, maxTop) };
+}