@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/charts/core/distribution/xy-points.js

@@ -0,0 +1,968 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  memo,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../../utils/cn.js";
+import { estimateTextWidth } from "../axes.js";
+import { ChartFrame } from "../chart-frame.js";
+import { tint } from "../color-scale.js";
+import { ChartDataTable } from "../data-table.js";
+import { formatNumber, resolveFormat } from "../format.js";
+import { useEntryAnimation } from "../motion.js";
+import { TONE_COLORS } from "../palette.js";
+import { formatDate } from "../scales/time.js";
+import { ChartTooltip } from "../tooltip.js";
+import { useCanvasPaint } from "../use-canvas.js";
+import {
+  clampRect,
+  defaultBrush,
+  isClick,
+  rectFromCorners,
+  stepBrush,
+  TOUCH_BRUSH_DELAY,
+  touchIntent
+} from "./brush.js";
+import { PlotExplorer } from "./explorer.js";
+import { resolveDistributionLabels } from "./labels.js";
+import { tooltipFit, truncateLabel, xyLayout } from "./layout.js";
+import { XYAxes } from "./marks.js";
+import { createPointIndex } from "./point-index.js";
+import { linearRegression, mean, seededRandom } from "./stats.js";
+import { useDistributionLegend } from "./use-legend.js";
+function bubbleRadiusScale(width) {
+  return Math.min(1, Math.max(0.55, width / 640));
+}
+function XYPointChart({
+  title,
+  series,
+  xFormat,
+  yFormat,
+  sizeFormat,
+  xAxis,
+  yAxis,
+  trendLine = false,
+  quadrants,
+  radius = 5,
+  sized = false,
+  sizeRange = [4, 30],
+  showLabels = false,
+  sizeLegend = sized,
+  xType = "linear",
+  jitter,
+  seed = 17,
+  renderer = "svg",
+  brush,
+  shading = "flat",
+  height = 340,
+  aspectRatio,
+  legend,
+  grid = true,
+  tooltip = true,
+  loading,
+  animate = true,
+  labels: labelsProp,
+  className
+}) {
+  const labels = resolveDistributionLabels(labelsProp);
+  const legendState = useDistributionLegend(series, legend, "dot");
+  const [plotWidth, setPlotWidth] = useState(null);
+  const time = xType === "time";
+  const fx = time && !xFormat ? formatDate : resolveFormat(xFormat);
+  const fy = resolveFormat(yFormat);
+  const fs = resolveFormat(sizeFormat);
+  const finite = (point) => Number.isFinite(point.x) && Number.isFinite(point.y);
+  const empty = !series.some((item) => item.points.some(finite));
+  const maxSize = Math.max(
+    0,
+    ...legendState.visible.flatMap((item) => item.source.points.map((point) => point.size ?? 0))
+  );
+  const canvas = renderer === "canvas" && shading !== "shaded" && !series.some((item) => item.points.some((point) => point.image));
+  const tableLimit = canvas ? 500 : Number.POSITIVE_INFINITY;
+  const rows = legendState.all.flatMap(
+    (item) => item.source.points.filter(finite).map((point, index) => ({ item, point, index }))
+  ).slice(0, tableLimit);
+  const xName = xAxis?.title ?? "x";
+  const yName = yAxis?.title ?? "y";
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height,
+      aspectRatio,
+      labels,
+      loading,
+      empty,
+      skeleton: "line",
+      className: cn("@container", className),
+      legend: legendState.node,
+      legendPosition: legendState.position,
+      footer: sized && sizeLegend && maxSize > 0 ? /* @__PURE__ */ jsx(
+        SizeKey,
+        {
+          maxSize,
+          maxRadius: sizeRange[1] * bubbleRadiusScale(plotWidth ?? 640),
+          format: fs,
+          label: labels.size
+        }
+      ) : null,
+      table: /* @__PURE__ */ jsx(
+        ChartDataTable,
+        {
+          caption: title,
+          categoryHeader: labels.point,
+          categories: rows.map(
+            ({ item, point, index }) => point.label ?? `${item.name} ${index + 1}`
+          ),
+          columns: [
+            { id: "series", name: labels.series, values: rows.map(({ item }) => item.name) },
+            { id: "x", name: xName, values: rows.map(({ point }) => fx(point.x)) },
+            { id: "y", name: yName, values: rows.map(({ point }) => fy(point.y)) },
+            ...sized ? [
+              {
+                id: "size",
+                name: labels.size,
+                values: rows.map(({ point }) => point.size != null ? fs(point.size) : "")
+              }
+            ] : []
+          ]
+        }
+      ),
+      children: (width, measuredHeight) => /* @__PURE__ */ jsx(
+        XYPointPlot,
+        {
+          width,
+          height: measuredHeight,
+          title,
+          visible: legendState.visible,
+          xFormat,
+          yFormat,
+          sizeFormat,
+          xAxis,
+          yAxis,
+          xTime: time,
+          jitter,
+          seed,
+          canvas,
+          brush,
+          shading,
+          trendLine,
+          quadrants,
+          radius,
+          sized,
+          sizeRange,
+          maxSize,
+          showLabels,
+          grid,
+          tooltip,
+          animate,
+          labels,
+          isDimmed: legendState.isDimmed,
+          onWidth: setPlotWidth
+        }
+      )
+    }
+  );
+}
+function SizeKey({
+  maxSize,
+  maxRadius,
+  format,
+  label
+}) {
+  const steps = [1, 0.5, 0.15].map((share) => ({
+    size: maxSize * share,
+    r: maxRadius * Math.sqrt(share)
+  }));
+  const box = maxRadius * 2 + 2;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 px-2 text-[12px] text-ink-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-end gap-x-3 gap-y-1", children: steps.map((step) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: box, height: box, className: "shrink-0", children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: box / 2,
+          cy: box / 2,
+          r: step.r,
+          strokeWidth: 1.25,
+          style: { fill: "var(--chart-grid)", stroke: "var(--ink-3)" }
+        }
+      ) }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: format(step.size) })
+    ] }, step.r)) })
+  ] });
+}
+const Points = memo(function Points2({
+  points,
+  sized,
+  shadeId,
+  isDimmed
+}) {
+  return /* @__PURE__ */ jsx("g", { children: points.map((point) => {
+    const dimmed = isDimmed(point.series.id);
+    const image = point.point.image;
+    if (image) {
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          "data-point": "",
+          className: "transition-opacity duration-150",
+          style: {
+            opacity: dimmed ? 0.18 : 1,
+            transformBox: "fill-box",
+            transformOrigin: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx("circle", { cx: point.x, cy: point.y, r: point.r, style: { fill: "var(--surface-2)" } }),
+            /* @__PURE__ */ jsx(
+              "image",
+              {
+                href: image,
+                x: point.x - point.r,
+                y: point.y - point.r,
+                width: point.r * 2,
+                height: point.r * 2,
+                preserveAspectRatio: "xMidYMid slice",
+                style: { clipPath: "circle(50%)" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: point.x,
+                cy: point.y,
+                r: point.r,
+                fill: "none",
+                strokeWidth: 2,
+                style: { stroke: point.series.color }
+              }
+            )
+          ]
+        },
+        point.key
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        "data-point": "",
+        cx: point.x,
+        cy: point.y,
+        r: point.r,
+        strokeWidth: sized ? 1.5 : 1.25,
+        className: "transition-opacity duration-150",
+        style: {
+          fill: shadeId ? `url(#${shadeId(point.series.index)})` : point.series.color,
+          fillOpacity: shadeId ? 0.96 : sized ? 0.42 : 0.8,
+          stroke: shadeId ? tint(point.series.color, 70, "black") : sized ? point.series.color : "var(--surface)",
+          opacity: dimmed ? 0.18 : 1,
+          transformBox: "fill-box",
+          transformOrigin: "center"
+        }
+      },
+      point.key
+    );
+  }) });
+});
+function SphereGradient({ id, color }) {
+  return /* @__PURE__ */ jsxs("radialGradient", { id, cx: "0.5", cy: "0.5", r: "0.62", fx: "0.34", fy: "0.3", children: [
+    /* @__PURE__ */ jsx("stop", { offset: "0%", style: { stopColor: tint(color, 30, "white") } }),
+    /* @__PURE__ */ jsx("stop", { offset: "38%", style: { stopColor: color } }),
+    /* @__PURE__ */ jsx("stop", { offset: "100%", style: { stopColor: tint(color, 58, "black") } })
+  ] });
+}
+function CanvasMarks({
+  points,
+  visible,
+  width,
+  height,
+  sized,
+  dimmedKey,
+  isDimmed
+}) {
+  const ref = useRef(null);
+  useCanvasPaint(
+    ref,
+    width,
+    height,
+    ({ ctx, resolve }) => {
+      const fills = resolve(visible.map((item) => item.color));
+      const ring = resolve(["var(--surface)"])[0];
+      visible.forEach((item, seriesIndex) => {
+        const mine = points.filter((point) => point.series.id === item.id);
+        if (mine.length === 0) return;
+        ctx.globalAlpha = (isDimmed(item.id) ? 0.12 : 1) * (sized ? 0.5 : 0.75);
+        ctx.fillStyle = fills[seriesIndex];
+        ctx.beginPath();
+        for (const point of mine) {
+          ctx.moveTo(point.x + point.r, point.y);
+          ctx.arc(point.x, point.y, point.r, 0, Math.PI * 2);
+        }
+        ctx.fill();
+        if (sized || mine[0] && mine[0].r >= 3) {
+          ctx.globalAlpha = isDimmed(item.id) ? 0.12 : 0.9;
+          ctx.lineWidth = 1;
+          ctx.strokeStyle = sized ? fills[seriesIndex] : ring;
+          ctx.stroke();
+        }
+      });
+      ctx.globalAlpha = 1;
+    },
+    [points, visible, sized, dimmedKey]
+  );
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref,
+      "data-canvas": "",
+      className: "pointer-events-none absolute",
+      style: { left: 0, top: 0, width, height }
+    }
+  );
+}
+const CORNERS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+function XYPointPlot({
+  width,
+  height,
+  title,
+  visible,
+  xFormat,
+  yFormat,
+  sizeFormat,
+  xAxis,
+  yAxis,
+  xTime,
+  jitter,
+  seed,
+  canvas,
+  brush,
+  shading,
+  trendLine,
+  quadrants,
+  radius,
+  sized,
+  sizeRange,
+  maxSize,
+  showLabels,
+  grid,
+  tooltip,
+  animate,
+  labels,
+  isDimmed,
+  onWidth
+}) {
+  const svgRef = useRef(null);
+  const wrapRef = useRef(null);
+  useEffect(() => onWidth?.(width), [onWidth, width]);
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const clipId = `${uid}-plot`;
+  const shaded = sized && shading === "shaded";
+  const shadeId = (seriesIndex) => `${uid}-sphere-${seriesIndex}`;
+  const [active, setActive] = useState(null);
+  const geometry = useMemo(() => {
+    const xs = [];
+    const ys = [];
+    for (const item of visible) {
+      for (const point of item.source.points) {
+        if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) continue;
+        xs.push(point.x);
+        ys.push(point.y);
+      }
+    }
+    const extentOf = (values) => values.length ? [Math.min(...values), Math.max(...values)] : null;
+    const qx = quadrants ? quadrants.x ?? mean(xs) : null;
+    const qy = quadrants ? quadrants.y ?? mean(ys) : null;
+    const withQuadrant = (values, q) => q != null && Number.isFinite(q) ? [...values, q] : values;
+    const maxRadius = sized ? sizeRange[1] * bubbleRadiusScale(width) : radius;
+    const layout2 = xyLayout({
+      width,
+      height,
+      xExtent: extentOf(withQuadrant(xs, qx)),
+      yExtent: extentOf(withQuadrant(ys, qy)),
+      xFormat,
+      yFormat,
+      xAxis,
+      yAxis,
+      xTime,
+      inset: sized ? maxRadius * 0.7 : radius + 2
+    });
+    const { xScale, yScale } = layout2;
+    const radiusOf = (point) => sized ? Math.max(
+      sizeRange[0],
+      maxRadius * Math.sqrt(Math.max(0, point.size ?? 0) / (maxSize || 1))
+    ) : radius;
+    const spread = typeof jitter === "number" ? { x: jitter, y: jitter } : jitter ?? {};
+    const jx = Math.max(0, spread.x ?? 0);
+    const jy = Math.max(0, spread.y ?? 0);
+    const placed = [];
+    for (const item of visible) {
+      const random = seededRandom(seed + item.index * 131);
+      item.source.points.forEach((point, index) => {
+        if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) return;
+        const dx = (random() * 2 - 1) * jx;
+        const dy = (random() * 2 - 1) * jy;
+        placed.push({
+          key: `${item.id}-${index}`,
+          series: item,
+          point,
+          x: xScale.map(point.x) + dx,
+          y: yScale.map(point.y) + dy,
+          r: radiusOf(point)
+        });
+      });
+    }
+    const drawOrder2 = sized ? [...placed].sort((a, b) => b.r - a.r) : placed;
+    const readOrder2 = [...placed].sort((a, b) => a.point.x - b.point.x || a.point.y - b.point.y);
+    const trends2 = trendLine ? visible.flatMap((item) => {
+      const finite = item.source.points.filter(
+        (point) => Number.isFinite(point.x) && Number.isFinite(point.y)
+      );
+      const fit = linearRegression(finite);
+      if (!fit) return [];
+      const lo = Math.min(...finite.map((point) => point.x));
+      const hi = Math.max(...finite.map((point) => point.x));
+      return [
+        {
+          series: item,
+          fit,
+          x1: xScale.map(lo),
+          y1: yScale.map(fit.predict(lo)),
+          x2: xScale.map(hi),
+          y2: yScale.map(fit.predict(hi))
+        }
+      ];
+    }) : [];
+    return {
+      layout: layout2,
+      drawOrder: drawOrder2,
+      readOrder: readOrder2,
+      trends: trends2,
+      quadrant: qx != null && qy != null && Number.isFinite(qx) && Number.isFinite(qy) ? { x: xScale.map(qx), y: yScale.map(qy) } : null
+    };
+  }, [
+    width,
+    height,
+    visible,
+    xFormat,
+    yFormat,
+    xAxis,
+    yAxis,
+    xTime,
+    jitter,
+    seed,
+    trendLine,
+    quadrants,
+    radius,
+    sized,
+    sizeRange,
+    maxSize
+  ]);
+  const { layout, drawOrder, readOrder, trends, quadrant } = geometry;
+  const { margin, innerWidth, innerHeight } = layout;
+  const [draft, setDraft] = useState(null);
+  const [spoken, setSpoken] = useState("");
+  const dragFrom = useRef(null);
+  const xDomain = layout.xScale.domain;
+  const yDomain = layout.yScale.domain;
+  const applied = brush?.value ? clampRect(brush.value, xDomain, yDomain) : null;
+  const shownBrush = draft ?? applied;
+  const speak = (rect, done) => {
+    setSpoken(brush?.describe?.(rect, done) ?? "");
+  };
+  const plotPoint = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    return {
+      x: Math.min(innerWidth, Math.max(0, event.clientX - box.left - margin.left)),
+      y: Math.min(innerHeight, Math.max(0, event.clientY - box.top - margin.top))
+    };
+  };
+  const rectAt = (a, b) => clampRect(
+    rectFromCorners(
+      { x: layout.xScale.invert(a.x), y: layout.yScale.invert(a.y) },
+      { x: layout.xScale.invert(b.x), y: layout.yScale.invert(b.y) }
+    ),
+    xDomain,
+    yDomain
+  );
+  const touch = useRef(null);
+  const touchDelay = brush?.touchDelay ?? TOUCH_BRUSH_DELAY;
+  const cancelTouch = () => {
+    if (touch.current) clearTimeout(touch.current.timer);
+    touch.current = null;
+  };
+  useEffect(() => {
+    const node = wrapRef.current;
+    if (!node) return;
+    const hold = (event) => {
+      if (touch.current?.armed && event.cancelable) event.preventDefault();
+    };
+    node.addEventListener("touchmove", hold, { passive: false });
+    return () => {
+      node.removeEventListener("touchmove", hold);
+      if (touch.current) clearTimeout(touch.current.timer);
+    };
+  }, []);
+  const brushHandlers = brush ? {
+    onPointerDown: (event) => {
+      if (event.button !== 0) return;
+      const box = event.currentTarget.getBoundingClientRect();
+      const x = event.clientX - box.left - margin.left;
+      const y = event.clientY - box.top - margin.top;
+      if (x < 0 || y < 0 || x > innerWidth || y > innerHeight) return;
+      if (event.pointerType === "touch" && touchDelay > 0) {
+        cancelTouch();
+        const node = event.currentTarget;
+        const pointerId = event.pointerId;
+        const arm = () => {
+          if (!touch.current) return;
+          touch.current.armed = true;
+          dragFrom.current = { x, y };
+          node.setPointerCapture(pointerId);
+          navigator.vibrate?.(8);
+        };
+        touch.current = {
+          id: pointerId,
+          from: { x, y },
+          since: event.timeStamp,
+          armed: false,
+          timer: setTimeout(arm, touchDelay)
+        };
+        return;
+      }
+      event.currentTarget.setPointerCapture(event.pointerId);
+      dragFrom.current = { x, y };
+    },
+    onPointerMove: (event) => {
+      const pending = touch.current;
+      if (pending && !pending.armed) {
+        const intent = touchIntent(
+          pending.from,
+          plotPoint(event),
+          event.timeStamp - pending.since,
+          touchDelay
+        );
+        if (intent === "scroll") cancelTouch();
+        return;
+      }
+      const from = dragFrom.current;
+      if (!from) return;
+      const to = plotPoint(event);
+      if (!isClick(from, to)) {
+        setActive(null);
+        setDraft(rectAt(from, to));
+      }
+    },
+    onPointerUp: (event) => {
+      const pending = touch.current;
+      if (pending && !pending.armed) {
+        cancelTouch();
+        if (brush.value) brush.onChange(null);
+        return;
+      }
+      cancelTouch();
+      const from = dragFrom.current;
+      if (!from) return;
+      dragFrom.current = null;
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      const to = plotPoint(event);
+      setDraft(null);
+      if (isClick(from, to)) {
+        if (brush.value) brush.onChange(null);
+        return;
+      }
+      const rect = rectAt(from, to);
+      brush.onChange(rect);
+      speak(rect, true);
+    },
+    onPointerCancel: () => {
+      cancelTouch();
+      dragFrom.current = null;
+      setDraft(null);
+    },
+    onContextMenu: (event) => {
+      if (touch.current) event.preventDefault();
+    }
+  } : {};
+  const onBrushKey = (event) => {
+    if (!brush) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setDraft(null);
+      if (brush.value) brush.onChange(null);
+      setSpoken("");
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (!draft) return;
+      brush.onChange(draft);
+      speak(draft, true);
+      setDraft(null);
+      return;
+    }
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+      return;
+    }
+    event.preventDefault();
+    const base = draft ?? applied ?? defaultBrush(xDomain, yDomain);
+    const next = stepBrush(base, event.key, event.shiftKey, xDomain, yDomain);
+    setDraft(next);
+    speak(next, false);
+  };
+  useEntryAnimation(
+    svgRef,
+    (root) => {
+      root.querySelectorAll("[data-point]").forEach((point, index) => {
+        point.animate(
+          [
+            { opacity: 0, transform: "scale(0)" },
+            { opacity: 1, transform: "none" }
+          ],
+          {
+            duration: 480,
+            delay: Math.min(700, index * 12),
+            easing: "cubic-bezier(.34,1.56,.64,1)",
+            fill: "backwards"
+          }
+        );
+      });
+      root.querySelectorAll("[data-trend]").forEach((line) => {
+        line.animate([{ opacity: 0 }, { opacity: 1 }], {
+          duration: 500,
+          delay: 500,
+          easing: "ease-out",
+          fill: "backwards"
+        });
+      });
+    },
+    { disabled: !animate, replayKey: readOrder.length }
+  );
+  useEntryAnimation(
+    wrapRef,
+    (root) => {
+      root.querySelectorAll("[data-canvas]").forEach((layer) => {
+        layer.animate([{ opacity: 0 }, { opacity: 1 }], {
+          duration: 450,
+          easing: "ease-out",
+          fill: "backwards"
+        });
+      });
+    },
+    { disabled: !animate || !canvas, replayKey: readOrder.length }
+  );
+  const fx = xTime && !xFormat ? formatDate : resolveFormat(xFormat);
+  const fy = resolveFormat(yFormat);
+  const fs = resolveFormat(sizeFormat);
+  const pointIndex = useMemo(() => createPointIndex(readOrder, 24), [readOrder]);
+  const dimmedKey = visible.filter((item) => isDimmed(item.id)).map((item) => item.id).join("|");
+  const xName = xAxis?.title ?? "x";
+  const yName = yAxis?.title ?? "y";
+  const current = active != null ? readOrder[active] : void 0;
+  const rows = current ? [
+    {
+      id: "x",
+      name: xName,
+      value: fx(current.point.x),
+      color: current.series.color,
+      shape: "dot"
+    },
+    { id: "y", name: yName, value: fy(current.point.y), color: "transparent" },
+    ...sized && current.point.size != null ? [{ id: "size", name: labels.size, value: fs(current.point.size), color: "transparent" }] : []
+  ] : [];
+  const pointTitle = (point) => point.point.label ? visible.length > 1 ? `${point.point.label} \xB7 ${point.series.name}` : point.point.label : point.series.name;
+  const valueText = current ? `${pointTitle(current)}: ${rows.map((row) => `${row.name} ${row.value}`).join(", ")}` : title;
+  const narrow = width < 480;
+  const half = (size) => size / 2 - 12;
+  const brushBox = shownBrush ? (() => {
+    const xa = layout.xScale.map(shownBrush.x0);
+    const xb = layout.xScale.map(shownBrush.x1);
+    const ya = layout.yScale.map(shownBrush.y0);
+    const yb = layout.yScale.map(shownBrush.y1);
+    return {
+      x: Math.min(xa, xb),
+      y: Math.min(ya, yb),
+      width: Math.abs(xb - xa),
+      height: Math.abs(yb - ya)
+    };
+  })() : null;
+  const over = /* @__PURE__ */ jsxs(Fragment, { children: [
+    brushBox ? /* @__PURE__ */ jsx(
+      "rect",
+      {
+        "data-brush": "",
+        pointerEvents: "none",
+        x: brushBox.x,
+        y: brushBox.y,
+        width: brushBox.width,
+        height: brushBox.height,
+        strokeWidth: 1.5,
+        strokeDasharray: draft ? void 0 : "5 3",
+        style: {
+          fill: "color-mix(in oklab, var(--accent) 12%, transparent)",
+          stroke: "var(--accent)"
+        }
+      }
+    ) : null,
+    trends.map((trend) => /* @__PURE__ */ jsxs("g", { "data-trend": "", children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: trend.x1,
+          y1: trend.y1,
+          x2: trend.x2,
+          y2: trend.y2,
+          strokeWidth: 4,
+          strokeLinecap: "round",
+          style: { stroke: "var(--surface)", opacity: 0.8 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: trend.x1,
+          y1: trend.y1,
+          x2: trend.x2,
+          y2: trend.y2,
+          strokeWidth: 2,
+          strokeDasharray: "6 4",
+          strokeLinecap: "round",
+          style: { stroke: trend.series.color }
+        }
+      ),
+      narrow ? null : /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: Math.min(trend.x2, innerWidth) - 4,
+          y: trend.y2 - 8,
+          textAnchor: "end",
+          className: "font-bold text-[10.5px] tabular-nums",
+          style: { fill: trend.series.color },
+          children: `R\xB2 ${formatNumber(trend.fit.r2, { maximumFractionDigits: 2 })}`
+        }
+      )
+    ] }, trend.series.id)),
+    showLabels ? drawOrder.map((point) => {
+      const text = point.point.label;
+      if (!text) return null;
+      const textWidth = estimateTextWidth(text, 11);
+      const inside = textWidth <= point.r * 1.8 && point.r >= 12;
+      if (!inside && (narrow || point.x + point.r + 4 + textWidth > innerWidth)) return null;
+      return /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: inside ? point.x : point.x + point.r + 4,
+          y: point.y,
+          dy: "0.34em",
+          textAnchor: inside ? "middle" : "start",
+          className: cn(
+            "pointer-events-none font-semibold text-[11px] transition-opacity duration-150",
+            inside ? "fill-ink" : "fill-ink-2"
+          ),
+          style: { opacity: isDimmed(point.series.id) ? 0.2 : 1 },
+          children: text
+        },
+        `label-${point.key}`
+      );
+    }) : null,
+    current ? /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: current.x,
+        cy: current.y,
+        r: current.r + 3.5,
+        strokeWidth: 2,
+        fill: "none",
+        style: { stroke: current.series.color }
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      className: cn(
+        "relative h-full w-full",
+        brush && (brush.touchDelay === 0 ? "touch-none select-none" : "touch-pan-x touch-pan-y select-none [-webkit-touch-callout:none]")
+      ),
+      ...brushHandlers,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref: svgRef,
+            role: "img",
+            "aria-label": title,
+            width,
+            height,
+            className: "block overflow-visible",
+            children: [
+              /* @__PURE__ */ jsxs("defs", { children: [
+                /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: innerWidth, height: innerHeight }) }),
+                shaded ? visible.map((item) => /* @__PURE__ */ jsx(SphereGradient, { id: shadeId(item.index), color: item.color }, item.id)) : null
+              ] }),
+              /* @__PURE__ */ jsxs("g", { transform: `translate(${margin.left},${margin.top})`, children: [
+                quadrant && quadrants?.tones ? CORNERS.map((corner) => {
+                  const tone = quadrants.tones?.[corner];
+                  if (!tone) return null;
+                  const left = corner.endsWith("Left");
+                  const top = corner.startsWith("top");
+                  return /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: left ? 0 : quadrant.x,
+                      y: top ? 0 : quadrant.y,
+                      width: Math.max(0, left ? quadrant.x : innerWidth - quadrant.x),
+                      height: Math.max(0, top ? quadrant.y : innerHeight - quadrant.y),
+                      style: { fill: TONE_COLORS[tone].soft, opacity: 0.55 }
+                    },
+                    corner
+                  );
+                }) : null,
+                /* @__PURE__ */ jsx(XYAxes, { layout, xTitle: xAxis?.title, yTitle: yAxis?.title, grid }),
+                quadrant ? /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: quadrant.x,
+                      x2: quadrant.x,
+                      y1: 0,
+                      y2: innerHeight,
+                      strokeDasharray: "4 4",
+                      style: { stroke: "var(--line-strong)" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: 0,
+                      x2: innerWidth,
+                      y1: quadrant.y,
+                      y2: quadrant.y,
+                      strokeDasharray: "4 4",
+                      style: { stroke: "var(--line-strong)" }
+                    }
+                  ),
+                  CORNERS.map((corner) => {
+                    const text = quadrants?.labels?.[corner];
+                    if (!text) return null;
+                    const left = corner.endsWith("Left");
+                    const top = corner.startsWith("top");
+                    const tone = quadrants?.tones?.[corner];
+                    return /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: left ? 8 : innerWidth - 8,
+                        y: top ? 16 : innerHeight - 8,
+                        textAnchor: left ? "start" : "end",
+                        className: "font-bold text-[11px]",
+                        style: { fill: tone ? TONE_COLORS[tone].ink : "var(--ink-3)" },
+                        children: truncateLabel(text, half(innerWidth))
+                      },
+                      corner
+                    );
+                  })
+                ] }) : null,
+                canvas ? null : /* @__PURE__ */ jsx("g", { clipPath: sized ? void 0 : `url(#${clipId})`, children: /* @__PURE__ */ jsx(
+                  Points,
+                  {
+                    points: drawOrder,
+                    sized,
+                    shadeId: shaded ? shadeId : void 0,
+                    isDimmed
+                  }
+                ) }),
+                canvas ? null : over
+              ] })
+            ]
+          }
+        ),
+        canvas ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute",
+              style: { left: margin.left, top: margin.top, width: innerWidth, height: innerHeight },
+              children: /* @__PURE__ */ jsx(
+                CanvasMarks,
+                {
+                  points: drawOrder,
+                  visible,
+                  width: innerWidth,
+                  height: innerHeight,
+                  sized,
+                  dimmedKey,
+                  isDimmed
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              width,
+              height,
+              className: "pointer-events-none absolute top-0 left-0 overflow-visible",
+              children: /* @__PURE__ */ jsx("g", { transform: `translate(${margin.left},${margin.top})`, children: over })
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          PlotExplorer,
+          {
+            count: readOrder.length,
+            active,
+            onActiveChange: setActive,
+            pick: (x, y) => pointIndex.nearest(x, y, 16),
+            label: labels.explore,
+            valueText,
+            margin,
+            width: innerWidth,
+            height: innerHeight
+          }
+        ),
+        brush ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "slider",
+              "aria-label": brush.label,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": draft ? 100 : 0,
+              "aria-valuetext": spoken || brush.label,
+              "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Shift+ArrowRight Enter Escape",
+              tabIndex: 0,
+              onKeyDown: onBrushKey,
+              onBlur: () => setDraft(null),
+              className: "pointer-events-none absolute rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-4",
+              style: { left: margin.left, top: margin.top, width: innerWidth, height: innerHeight }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: spoken })
+        ] }) : null,
+        tooltip && current ? /* @__PURE__ */ jsx(
+          ChartTooltip,
+          {
+            x: margin.left + current.x + current.r,
+            y: margin.top + current.y,
+            ...tooltipFit(width),
+            title: pointTitle(current),
+            rows
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  XYPointChart,
+  bubbleRadiusScale
+};