@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/charts/core/scales/band.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Index-based categorical scale. `band` gives every category a slot with a
+ * bar-sized `bandwidth`; `point` spreads categories edge to edge (bandwidth 0),
+ * which suits lines and areas.
+ */
+export interface BandScale {
+    readonly type: "band" | "point";
+    readonly count: number;
+    readonly range: readonly [number, number];
+    readonly step: number;
+    readonly bandwidth: number;
+    /** Leading edge of category `index`. */
+    start(index: number): number;
+    /** Center of category `index`. */
+    center(index: number): number;
+    /** Category under `pixel`, clamped to the valid range; -1 when empty. */
+    indexAt(pixel: number): number;
+}
+export interface BandScaleOptions {
+    count: number;
+    range: readonly [number, number];
+    /** Gap between bands, as a fraction of the step (0-1). */
+    paddingInner?: number;
+    /** Space before the first and after the last band, as a fraction of the step. */
+    paddingOuter?: number;
+}
+export declare function bandScale({ count, range, paddingInner, paddingOuter, }: BandScaleOptions): BandScale;
+export interface PointScaleOptions {
+    count: number;
+    range: readonly [number, number];
+    /** Space before the first and after the last point, as a fraction of the step. */
+    padding?: number;
+}
+export declare function pointScale({ count, range, padding }: PointScaleOptions): BandScale;

package/dist/charts/core/scales/band.js

@@ -0,0 +1,58 @@
+function bandScale({
+  count,
+  range,
+  paddingInner = 0.2,
+  paddingOuter = 0.1
+}) {
+  const [r0, r1] = range;
+  const slots = Math.max(1, count - paddingInner + paddingOuter * 2);
+  const step = (r1 - r0) / slots;
+  const bandwidth = step * (1 - paddingInner);
+  const offset = r0 + step * paddingOuter;
+  return {
+    type: "band",
+    count,
+    range,
+    step,
+    bandwidth,
+    start: (index) => offset + index * step,
+    center: (index) => offset + index * step + bandwidth / 2,
+    indexAt: (pixel) => {
+      if (count === 0) return -1;
+      const raw = Math.floor((pixel - offset + (step - bandwidth) / 2) / step);
+      return Math.min(count - 1, Math.max(0, raw));
+    }
+  };
+}
+function pointScale({ count, range, padding = 0 }) {
+  const [r0, r1] = range;
+  if (count <= 1) {
+    const mid = (r0 + r1) / 2;
+    return {
+      type: "point",
+      count,
+      range,
+      step: r1 - r0,
+      bandwidth: 0,
+      start: () => mid,
+      center: () => mid,
+      indexAt: () => count === 0 ? -1 : 0
+    };
+  }
+  const step = (r1 - r0) / (count - 1 + padding * 2);
+  const offset = r0 + step * padding;
+  return {
+    type: "point",
+    count,
+    range,
+    step,
+    bandwidth: 0,
+    start: (index) => offset + index * step,
+    center: (index) => offset + index * step,
+    indexAt: (pixel) => Math.min(count - 1, Math.max(0, Math.round((pixel - offset) / step)))
+  };
+}
+export {
+  bandScale,
+  pointScale
+};

package/dist/charts/core/scales/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./band.js";
+export * from "./linear.js";
+export * from "./log.js";
+export * from "./time.js";

package/dist/charts/core/scales/index.js

@@ -0,0 +1,4 @@
+export * from "./band.js";
+export * from "./linear.js";
+export * from "./log.js";
+export * from "./time.js";

package/dist/charts/core/scales/linear.d.ts

@@ -0,0 +1,27 @@
+export interface ContinuousScale {
+    readonly type: "linear" | "log" | "time";
+    readonly domain: readonly [number, number];
+    readonly range: readonly [number, number];
+    map(value: number): number;
+    invert(pixel: number): number;
+    ticks(count?: number): number[];
+}
+/** Rounds away binary noise such as 0.30000000000000004. */
+export declare function clean(value: number): number;
+/** Step between ticks: 1, 2 or 5 times a power of ten, close to `span / count`. */
+export declare function tickStep(min: number, max: number, count: number): number;
+/** Widens `[min, max]` so both ends land on a tick. A flat domain gets some room. */
+export declare function niceDomain(min: number, max: number, count?: number): [number, number];
+/** Evenly spaced round values inside `[min, max]`. */
+export declare function linearTicks(min: number, max: number, count?: number): number[];
+export interface LinearScaleOptions {
+    domain: readonly [number, number];
+    range: readonly [number, number];
+    /** Extend the domain to round tick values (default true). */
+    nice?: boolean;
+    /** Approximate number of ticks used by `nice` and `ticks()`. */
+    tickCount?: number;
+}
+export declare function linearScale({ domain, range, nice, tickCount, }: LinearScaleOptions): ContinuousScale;
+/** Min and max of the finite numbers in `values`, or null when there are none. */
+export declare function extent(values: Iterable<number | null | undefined>): [number, number] | null;

package/dist/charts/core/scales/linear.js

@@ -0,0 +1,73 @@
+function clean(value) {
+  return Number(value.toPrecision(12));
+}
+function tickStep(min, max, count) {
+  const raw = Math.abs(max - min) / Math.max(1, count);
+  if (raw === 0 || !Number.isFinite(raw)) return 1;
+  const power = 10 ** Math.floor(Math.log10(raw));
+  const error = raw / power;
+  const factor = error >= 7.5 ? 10 : error >= 3.5 ? 5 : error >= 1.5 ? 2 : 1;
+  return factor * power;
+}
+function niceDomain(min, max, count = 5) {
+  let lo = Math.min(min, max);
+  let hi = Math.max(min, max);
+  if (lo === hi) {
+    if (lo === 0) hi = 1;
+    else if (lo > 0) [lo, hi] = [0, hi * 2];
+    else [lo, hi] = [lo * 2, 0];
+  }
+  for (let pass = 0; pass < 2; pass += 1) {
+    const step = tickStep(lo, hi, count);
+    lo = clean(Math.floor(lo / step) * step);
+    hi = clean(Math.ceil(hi / step) * step);
+  }
+  return [lo, hi];
+}
+function linearTicks(min, max, count = 5) {
+  const lo = Math.min(min, max);
+  const hi = Math.max(min, max);
+  if (lo === hi) return [lo];
+  const step = tickStep(lo, hi, count);
+  const first = Math.ceil(lo / step - 1e-9);
+  const last = Math.floor(hi / step + 1e-9);
+  const out = [];
+  for (let i = first; i <= last; i += 1) out.push(clean(i * step));
+  return out;
+}
+function linearScale({
+  domain,
+  range,
+  nice = true,
+  tickCount = 5
+}) {
+  const [d0, d1] = nice ? niceDomain(domain[0], domain[1], tickCount) : domain;
+  const [r0, r1] = range;
+  const span = d1 - d0 || 1;
+  return {
+    type: "linear",
+    domain: [d0, d1],
+    range,
+    map: (value) => r0 + (value - d0) / span * (r1 - r0),
+    invert: (pixel) => d0 + (pixel - r0) / (r1 - r0 || 1) * span,
+    ticks: (count = tickCount) => linearTicks(d0, d1, count)
+  };
+}
+function extent(values) {
+  let lo = Number.POSITIVE_INFINITY;
+  let hi = Number.NEGATIVE_INFINITY;
+  for (const value of values) {
+    if (value == null || !Number.isFinite(value)) continue;
+    if (value < lo) lo = value;
+    if (value > hi) hi = value;
+  }
+  return lo === Number.POSITIVE_INFINITY ? null : [lo, hi];
+}
+export {
+  clean,
+  extent,
+  linearScale,
+  linearTicks,
+  niceDomain,
+  tickStep
+};

package/dist/charts/core/scales/log.d.ts

@@ -0,0 +1,8 @@
+import { type ContinuousScale } from "./linear.js";
+export interface LogScaleOptions {
+    /** Non-positive values are clamped to the smallest positive number. */
+    domain: readonly [number, number];
+    range: readonly [number, number];
+}
+/** Base-10 logarithmic scale, extended to whole decades. */
+export declare function logScale({ domain, range }: LogScaleOptions): ContinuousScale;

package/dist/charts/core/scales/log.js

@@ -0,0 +1,30 @@
+import { clean } from "./linear.js";
+function logScale({ domain, range }) {
+  const lo = Math.max(Math.min(domain[0], domain[1]), Number.MIN_VALUE);
+  const hi = Math.max(domain[0], domain[1], lo);
+  const e0 = Math.floor(Math.log10(lo));
+  const e1 = Math.max(Math.ceil(Math.log10(hi)), e0 + 1);
+  const [r0, r1] = range;
+  const span = e1 - e0;
+  return {
+    type: "log",
+    domain: [10 ** e0, 10 ** e1],
+    range,
+    map: (value) => r0 + (Math.log10(Math.max(value, 10 ** e0)) - e0) / span * (r1 - r0),
+    invert: (pixel) => 10 ** (e0 + (pixel - r0) / (r1 - r0 || 1) * span),
+    ticks: () => {
+      const out = [];
+      const multiples = span <= 2 ? [1, 2, 5] : [1];
+      for (let e = e0; e <= e1; e += 1) {
+        for (const m of multiples) {
+          const value = clean(m * 10 ** e);
+          if (value <= 10 ** e1) out.push(value);
+        }
+      }
+      return out;
+    }
+  };
+}
+export {
+  logScale
+};

package/dist/charts/core/scales/time.d.ts

@@ -0,0 +1,26 @@
+import type { ContinuousScale } from "./linear.js";
+export type TimeUnit = "day" | "week" | "month" | "year";
+export interface TimeTick {
+    value: number;
+    unit: TimeUnit;
+    label: string;
+}
+/** Short Spanish month without the period Intl appends ("oct", not "oct."). */
+export declare function shortMonth(date: Date): string;
+/** Short Spanish weekday without the trailing period ("lun"). */
+export declare function shortWeekday(date: Date): string;
+/** "lun 6 oct 2026": the full label used by tooltips and the data table. */
+export declare function formatDate(value: Date | number): string;
+/**
+ * Calendar-aligned ticks (local midnight, Mondays, first of the month, January)
+ * with es-PE labels. Picks the finest interval that keeps at most `count` ticks.
+ */
+export declare function timeTicks(start: number, end: number, count?: number): TimeTick[];
+export interface TimeScaleOptions {
+    domain: readonly [Date | number, Date | number];
+    range: readonly [number, number];
+}
+export interface TimeScale extends ContinuousScale {
+    timeTicks(count?: number): TimeTick[];
+}
+export declare function timeScale({ domain, range }: TimeScaleOptions): TimeScale;

package/dist/charts/core/scales/time.js

@@ -0,0 +1,98 @@
+const DAY = 864e5;
+const INTERVALS = [
+  { unit: "day", every: 1, approx: DAY },
+  { unit: "day", every: 2, approx: 2 * DAY },
+  { unit: "week", every: 1, approx: 7 * DAY },
+  { unit: "week", every: 2, approx: 14 * DAY },
+  { unit: "month", every: 1, approx: 30.44 * DAY },
+  { unit: "month", every: 3, approx: 91.3 * DAY },
+  { unit: "month", every: 6, approx: 182.6 * DAY },
+  { unit: "year", every: 1, approx: 365.25 * DAY }
+];
+const LOCALE = "es-PE";
+const monthFormat = new Intl.DateTimeFormat(LOCALE, { month: "short" });
+const weekdayFormat = new Intl.DateTimeFormat(LOCALE, { weekday: "short" });
+function shortMonth(date) {
+  return monthFormat.format(date).replace(".", "").toLowerCase();
+}
+function shortWeekday(date) {
+  return weekdayFormat.format(date).replace(".", "").toLowerCase();
+}
+function formatDate(value) {
+  const date = new Date(value);
+  return `${shortWeekday(date)} ${date.getDate()} ${shortMonth(date)} ${date.getFullYear()}`;
+}
+function firstTick(t0, interval) {
+  const d = new Date(t0);
+  d.setHours(0, 0, 0, 0);
+  if (d.getTime() < t0) d.setDate(d.getDate() + 1);
+  if (interval.unit === "week") {
+    d.setDate(d.getDate() + (8 - d.getDay()) % 7);
+  } else if (interval.unit !== "day") {
+    if (d.getDate() !== 1) {
+      d.setDate(1);
+      d.setMonth(d.getMonth() + 1);
+    }
+    const every = interval.unit === "year" ? 12 : interval.every;
+    while (d.getMonth() % every !== 0) d.setMonth(d.getMonth() + 1);
+  }
+  return d;
+}
+function advance(d, interval) {
+  if (interval.unit === "day") d.setDate(d.getDate() + interval.every);
+  else if (interval.unit === "week") d.setDate(d.getDate() + 7 * interval.every);
+  else if (interval.unit === "month") d.setMonth(d.getMonth() + interval.every);
+  else d.setFullYear(d.getFullYear() + interval.every);
+}
+function tickLabel(date, unit, first, spanDays) {
+  if (unit === "year") return String(date.getFullYear());
+  if (unit === "month") {
+    return first || date.getMonth() === 0 ? `${shortMonth(date)} ${date.getFullYear()}` : shortMonth(date);
+  }
+  if (unit === "day" && spanDays <= 14) return `${shortWeekday(date)} ${date.getDate()}`;
+  return `${date.getDate()} ${shortMonth(date)}`;
+}
+function timeTicks(start, end, count = 6) {
+  const t0 = Math.min(start, end);
+  const t1 = Math.max(start, end);
+  const span = t1 - t0;
+  const limit = Math.max(1, count);
+  const interval = INTERVALS.find((candidate) => span / candidate.approx <= limit) ?? {
+    unit: "year",
+    every: Math.ceil(span / (365.25 * DAY) / limit),
+    approx: 0
+  };
+  const spanDays = span / DAY;
+  const out = [];
+  const cursor = firstTick(t0, interval);
+  while (cursor.getTime() <= t1 && out.length < 500) {
+    out.push({
+      value: cursor.getTime(),
+      unit: interval.unit,
+      label: tickLabel(cursor, interval.unit, out.length === 0, spanDays)
+    });
+    advance(cursor, interval);
+  }
+  return out;
+}
+function timeScale({ domain, range }) {
+  const d0 = +domain[0];
+  const d1 = +domain[1] === d0 ? d0 + DAY : +domain[1];
+  const [r0, r1] = range;
+  return {
+    type: "time",
+    domain: [d0, d1],
+    range,
+    map: (value) => r0 + (value - d0) / (d1 - d0) * (r1 - r0),
+    invert: (pixel) => d0 + (pixel - r0) / (r1 - r0 || 1) * (d1 - d0),
+    ticks: (count = 6) => timeTicks(d0, d1, count).map((tick) => tick.value),
+    timeTicks: (count = 6) => timeTicks(d0, d1, count)
+  };
+}
+export {
+  formatDate,
+  shortMonth,
+  shortWeekday,
+  timeScale,
+  timeTicks
+};

package/dist/charts/core/shape-morph.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Shape morphing between a rectangle and an annular sector. Both are sampled
+ * as closed polygons with the same number of points, edge for edge, so any
+ * blend between them is a plain point-wise interpolation. Pure functions.
+ */
+export interface RingPoint {
+    x: number;
+    y: number;
+}
+/** Samples per edge: four edges, so a ring holds `4 * EDGE_SAMPLES` points. */
+export declare const EDGE_SAMPLES = 20;
+/**
+ * Rectangle as a clockwise polygon starting at the top-left corner:
+ * top edge, right edge, bottom edge, left edge.
+ */
+export declare function rectRing(x0: number, y0: number, x1: number, y1: number, samples?: number): RingPoint[];
+/**
+ * Annular sector as a polygon with the same edge order as `rectRing`: the
+ * outer arc plays the top edge, the end radius the right edge, the inner arc
+ * the bottom edge and the start radius the left edge. Angles in radians, 0 at
+ * twelve o'clock, clockwise.
+ */
+export declare function sectorRing(cx: number, cy: number, r0: number, r1: number, a0: number, a1: number, samples?: number): RingPoint[];
+/** RingPoint-wise blend of two rings of equal length: `t` 0 gives `from`, 1 gives `to`. */
+export declare function blendRings(from: readonly RingPoint[], to: readonly RingPoint[], t: number): RingPoint[];
+/** Closed SVG path through the points. Empty for fewer than three points. */
+export declare function ringPath(points: readonly RingPoint[]): string;
+/** Mean of the polygon's points; for these convex-ish shapes it sits inside the shape. */
+export declare function ringCenter(points: readonly RingPoint[]): RingPoint;

package/dist/charts/core/shape-morph.js

@@ -0,0 +1,60 @@
+const EDGE_SAMPLES = 20;
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function rectRing(x0, y0, x1, y1, samples = EDGE_SAMPLES) {
+  const out = [];
+  for (let i = 0; i < samples; i++) out.push({ x: lerp(x0, x1, i / samples), y: y0 });
+  for (let i = 0; i < samples; i++) out.push({ x: x1, y: lerp(y0, y1, i / samples) });
+  for (let i = 0; i < samples; i++) out.push({ x: lerp(x1, x0, i / samples), y: y1 });
+  for (let i = 0; i < samples; i++) out.push({ x: x0, y: lerp(y1, y0, i / samples) });
+  return out;
+}
+function sectorRing(cx, cy, r0, r1, a0, a1, samples = EDGE_SAMPLES) {
+  const at = (r, a) => ({
+    x: cx + r * Math.sin(a),
+    y: cy - r * Math.cos(a)
+  });
+  const out = [];
+  for (let i = 0; i < samples; i++) out.push(at(r1, lerp(a0, a1, i / samples)));
+  for (let i = 0; i < samples; i++) out.push(at(lerp(r1, r0, i / samples), a1));
+  for (let i = 0; i < samples; i++) out.push(at(r0, lerp(a1, a0, i / samples)));
+  for (let i = 0; i < samples; i++) out.push(at(lerp(r0, r1, i / samples), a0));
+  return out;
+}
+function blendRings(from, to, t) {
+  const count = Math.min(from.length, to.length);
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    const a = from[i];
+    const b = to[i];
+    out.push({ x: lerp(a.x, b.x, t), y: lerp(a.y, b.y, t) });
+  }
+  return out;
+}
+function ringPath(points) {
+  if (points.length < 3) return "";
+  let d = "";
+  points.forEach((point, index) => {
+    d += `${index === 0 ? "M" : "L"}${point.x.toFixed(1)},${point.y.toFixed(1)}`;
+  });
+  return `${d}Z`;
+}
+function ringCenter(points) {
+  if (points.length === 0) return { x: 0, y: 0 };
+  let x = 0;
+  let y = 0;
+  for (const point of points) {
+    x += point.x;
+    y += point.y;
+  }
+  return { x: x / points.length, y: y / points.length };
+}
+export {
+  EDGE_SAMPLES,
+  blendRings,
+  rectRing,
+  ringCenter,
+  ringPath,
+  sectorRing
+};

package/dist/charts/core/stack.d.ts

@@ -0,0 +1,14 @@
+export type StackMode = "none" | "normal" | "percent";
+/** One stacked layer: for every index, where the segment starts and ends. */
+export interface StackLayer {
+    y0: number[];
+    y1: number[];
+    /** Original value (null keeps gaps visible in tooltips). */
+    values: Array<number | null>;
+}
+/**
+ * Stacks series on top of each other per index. Positive values grow up from
+ * zero, negative values grow down, so diverging data stays readable. In
+ * `percent` mode every index is normalised to a 0-1 share of its absolute total.
+ */
+export declare function stackLayers(series: ReadonlyArray<ReadonlyArray<number | null>>, mode: Exclude<StackMode, "none">): StackLayer[];

package/dist/charts/core/stack.js

@@ -0,0 +1,27 @@
+function stackLayers(series, mode) {
+  const length = Math.max(0, ...series.map((data) => data.length));
+  const totals = Array.from(
+    { length },
+    (_, i) => series.reduce((sum, data) => sum + Math.abs(data[i] ?? 0), 0)
+  );
+  const up = new Array(length).fill(0);
+  const down = new Array(length).fill(0);
+  return series.map((data) => {
+    const y0 = [];
+    const y1 = [];
+    for (let i = 0; i < length; i += 1) {
+      const raw = data[i] ?? 0;
+      const total = totals[i];
+      const value = mode === "percent" ? total ? raw / total : 0 : raw;
+      const base = value >= 0 ? up[i] : down[i];
+      y0.push(base);
+      y1.push(base + value);
+      if (value >= 0) up[i] = base + value;
+      else down[i] = base + value;
+    }
+    return { y0, y1, values: Array.from({ length }, (_, i) => data[i] ?? null) };
+  });
+}
+export {
+  stackLayers
+};

package/dist/charts/core/time-range.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Calendar windows over a sorted series of dates: the range selector of the
+ * stock chart ("1S", "1M", ..., "Todo") resolves to inclusive index windows.
+ */
+export type TimeRangeUnit = "day" | "week" | "month" | "year" | "all";
+export interface TimeRangePreset {
+    id: string;
+    /** Button text, e.g. "1M". */
+    label: string;
+    /** Accessible name, e.g. "Último mes". */
+    description?: string;
+    unit: TimeRangeUnit;
+    /** How many units back from the last date (ignored for "all"). */
+    count?: number;
+}
+/** `date` moved back by `count` units, in local calendar time (months clamp to the last day). */
+export declare function shiftDate(date: Date, unit: Exclude<TimeRangeUnit, "all">, count: number): Date;
+/**
+ * Inclusive index window `[from, last]` for a preset over ascending `dates`:
+ * the first date on or after the last date minus the preset. Always spans at
+ * least two points when the data has them.
+ */
+export declare function rangeWindow(dates: ReadonlyArray<Date | number>, preset: Pick<TimeRangePreset, "unit" | "count">): [number, number];

package/dist/charts/core/time-range.js

@@ -0,0 +1,27 @@
+function shiftDate(date, unit, count) {
+  const next = new Date(date);
+  if (unit === "day") next.setDate(next.getDate() - count);
+  else if (unit === "week") next.setDate(next.getDate() - count * 7);
+  else {
+    const months = unit === "year" ? count * 12 : count;
+    const day = next.getDate();
+    next.setDate(1);
+    next.setMonth(next.getMonth() - months);
+    const last = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate();
+    next.setDate(Math.min(day, last));
+  }
+  return next;
+}
+function rangeWindow(dates, preset) {
+  const last = dates.length - 1;
+  if (last <= 0) return [0, Math.max(0, last)];
+  if (preset.unit === "all") return [0, last];
+  const cutoff = +shiftDate(new Date(dates[last]), preset.unit, preset.count ?? 1);
+  let from = last;
+  while (from > 0 && +dates[from - 1] >= cutoff) from -= 1;
+  return [Math.min(from, last - 1), last];
+}
+export {
+  rangeWindow,
+  shiftDate
+};

package/dist/charts/core/tooltip.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import type { LegendShape } from "./legend.js";
+export interface TooltipRow {
+    id: string;
+    name: string;
+    value: string;
+    color: string;
+    shape?: LegendShape;
+    /** Secondary text after the value, e.g. a share "(32%)". */
+    note?: string;
+    /** Rendered bold and separated, e.g. a total. */
+    emphasis?: boolean;
+}
+export interface ChartTooltipProps {
+    /** Anchor in pixels, relative to the positioned chart container. */
+    x: number;
+    y: number;
+    /** Width of the container; the tooltip prefers the left of the anchor past 60% and never leaves it. */
+    containerWidth: number;
+    title?: ReactNode;
+    rows: readonly TooltipRow[];
+    /** Wrapped sentence under the title, for notes that are not series values. */
+    body?: string;
+    /** Forces the side of the anchor the card opens on (when it fits); by default it follows the anchor. */
+    side?: "left" | "right";
+    className?: string;
+}
+/**
+ * Floating card that lists every series at the hovered position. Purely
+ * visual (`aria-hidden`): screen readers get the same numbers from the live
+ * region and the hidden data table. Moves with a GPU transform, so following
+ * the pointer never triggers layout. Its own width is measured so the card
+ * always stays inside the container: it takes the side of the anchor with
+ * room, and is clamped to the edges when neither side fits (narrow charts).
+ */
+export declare function ChartTooltip({ x, y, containerWidth, title, rows, body, side, className, }: ChartTooltipProps): import("react").JSX.Element;
+/** Left edge of a tooltip `width` wide next to anchor `x`, kept inside `containerWidth`. */
+export declare function tooltipLeft(x: number, width: number, containerWidth: number, side?: "left" | "right"): number;