@cronus-ui/ui 0.6.0

package/dist/charts/x-axis.js

@@ -0,0 +1,415 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../lib/cn.js";
+import { useChart, useChartStable } from "./chart-context.js";
+import { shortDateFmt } from "./chart-formatters.js";
+import { DEFAULT_Y_DOMAIN_TWEEN_MS } from "./chart-phase.js";
+import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing.js";
+const X_AXIS_POSITION_TWEEN_MS = DEFAULT_Y_DOMAIN_TWEEN_MS;
+function XAxisLabel({ label, x, crosshairX, hoveredLabel, isHovering, tickerHalfWidth, animatePosition, }) {
+    const fadeBuffer = 20;
+    const fadeRadius = tickerHalfWidth + fadeBuffer;
+    let opacity = 1;
+    if (isHovering && crosshairX !== null) {
+        const distance = Math.abs(x - crosshairX);
+        if (distance < tickerHalfWidth) {
+            opacity = 0;
+        }
+        else if (hoveredLabel && label === hoveredLabel) {
+            opacity = 0;
+        }
+        else if (distance < fadeRadius) {
+            opacity = (distance - tickerHalfWidth) / fadeBuffer;
+        }
+    }
+    return (_jsx("div", { className: "absolute", style: {
+            left: x,
+            bottom: 12,
+            width: 0,
+            display: "flex",
+            justifyContent: "center",
+            transition: animatePosition
+                ? `left ${X_AXIS_POSITION_TWEEN_MS}ms cubic-bezier(${LINE_LOADING_PULSE_EASE.join(", ")})`
+                : undefined,
+        }, children: _jsx("span", { className: cn("whitespace-nowrap text-chart-label text-xs"), style: {
+                opacity,
+                transition: "opacity 0.4s ease-in-out",
+            }, children: label }) }));
+}
+const MAX_GAP_LAYOUTS = 400;
+function binomial(n, k) {
+    if (k < 0 || k > n) {
+        return 0;
+    }
+    let result = 1;
+    for (let i = 0; i < k; i++) {
+        result = (result * (n - i)) / (i + 1);
+    }
+    return result;
+}
+/** All ways to split `span` into `parts` positive integer gaps. */
+function composePositiveSum(sum, parts) {
+    if (parts === 1) {
+        return sum >= 1 ? [[sum]] : [];
+    }
+    const layouts = [];
+    for (let gap = 1; gap <= sum - (parts - 1); gap++) {
+        for (const tail of composePositiveSum(sum - gap, parts - 1)) {
+            layouts.push([gap, ...tail]);
+        }
+    }
+    return layouts;
+}
+function gapsToIndices(gaps) {
+    const indices = [0];
+    let position = 0;
+    for (const gap of gaps) {
+        position += gap;
+        indices.push(position);
+    }
+    return indices;
+}
+function indicesForTickCount(length, tickCount) {
+    const span = length - 1;
+    if (span <= 0) {
+        return [0];
+    }
+    const rawIndices = Array.from({ length: tickCount }, (_, index) => Math.round((index / (tickCount - 1)) * span));
+    const indices = [...new Set(rawIndices)].sort((a, b) => a - b);
+    if (indices[0] !== 0) {
+        indices.unshift(0);
+    }
+    if (indices.at(-1) !== span) {
+        indices.push(span);
+    }
+    return [...new Set(indices)].sort((a, b) => a - b);
+}
+function allIndexLayouts(length, tickCount) {
+    const span = length - 1;
+    if (span <= 0) {
+        return [[0]];
+    }
+    const gapCount = tickCount - 1;
+    if (gapCount <= 0) {
+        return [[0]];
+    }
+    const layoutCount = binomial(span - 1, gapCount - 1);
+    if (layoutCount > MAX_GAP_LAYOUTS) {
+        return [indicesForTickCount(length, tickCount)];
+    }
+    return composePositiveSum(span, gapCount).map(gapsToIndices);
+}
+function dedupeIndicesByLabel(indices, data, dateLabels, xAccessor) {
+    const seenLabels = new Set();
+    const deduped = [];
+    for (const index of indices) {
+        const point = data[index];
+        if (!point) {
+            continue;
+        }
+        const label = dateLabels[index] ?? shortDateFmt.format(xAccessor(point));
+        if (seenLabels.has(label)) {
+            continue;
+        }
+        seenLabels.add(label);
+        deduped.push(index);
+    }
+    return deduped;
+}
+function indexGaps(indices) {
+    const gaps = [];
+    for (let i = 1; i < indices.length; i++) {
+        const current = indices[i];
+        const previous = indices[i - 1];
+        if (current == null || previous == null) {
+            continue;
+        }
+        gaps.push(current - previous);
+    }
+    return gaps;
+}
+function smallestGapEdgePreference(indices) {
+    const gaps = indexGaps(indices);
+    const smallestGap = Math.min(...gaps);
+    const smallestGapIndex = gaps.indexOf(smallestGap);
+    if (smallestGapIndex === gaps.length - 1) {
+        return 0;
+    }
+    if (smallestGapIndex === 0) {
+        return 1;
+    }
+    return 2;
+}
+function scoreTickLayout(indices, resolveXPx, targetCount) {
+    if (indices.length < 2) {
+        return {
+            score: Number.POSITIVE_INFINITY,
+            symmetryPenalty: Number.POSITIVE_INFINITY,
+            countDistance: Number.POSITIVE_INFINITY,
+            edgePreference: Number.POSITIVE_INFINITY,
+        };
+    }
+    const pixelGaps = [];
+    for (let i = 1; i < indices.length; i++) {
+        const current = indices[i];
+        const previous = indices[i - 1];
+        if (current == null || previous == null) {
+            continue;
+        }
+        pixelGaps.push(resolveXPx(current) - resolveXPx(previous));
+    }
+    const minGap = Math.min(...pixelGaps);
+    const maxGap = Math.max(...pixelGaps);
+    const meanGap = pixelGaps.reduce((sum, gap) => sum + gap, 0) / pixelGaps.length;
+    const spreadRatio = meanGap > 0 ? (maxGap - minGap) / meanGap : maxGap - minGap;
+    const countDistance = Math.abs(indices.length - targetCount);
+    const gaps = indexGaps(indices);
+    const smallestGap = Math.min(...gaps);
+    const smallestGapIndex = gaps.indexOf(smallestGap);
+    const interiorPenalty = smallestGapIndex > 0 && smallestGapIndex < gaps.length - 1 ? 0.08 : 0;
+    const symmetryPenalty = gaps.reduce((penalty, gap, index) => {
+        return penalty + Math.abs(gap - (gaps.at(-1 - index) ?? gap));
+    }, 0) / gaps.length;
+    return {
+        score: spreadRatio + 0.1 * countDistance + interiorPenalty + symmetryPenalty * 0.02,
+        symmetryPenalty,
+        countDistance,
+        edgePreference: smallestGapEdgePreference(indices),
+    };
+}
+function isBetterTickLayout(next, best, nextCountDistance, bestCountDistance) {
+    if (next.score < best.score - 1e-6) {
+        return true;
+    }
+    if (Math.abs(next.score - best.score) > 1e-6) {
+        return false;
+    }
+    if (nextCountDistance < bestCountDistance) {
+        return true;
+    }
+    if (nextCountDistance > bestCountDistance) {
+        return false;
+    }
+    if (next.symmetryPenalty < best.symmetryPenalty - 1e-6) {
+        return true;
+    }
+    if (next.symmetryPenalty > best.symmetryPenalty + 1e-6) {
+        return false;
+    }
+    return next.edgePreference < best.edgePreference;
+}
+/**
+ * Picks tick indices with the most even on-screen spacing. Tries
+ * `targetCount ± 1` and evaluates every gap layout when feasible.
+ */
+export function selectEvenlySpacedIndices(length, targetCount, options) {
+    if (length <= 0) {
+        return [];
+    }
+    if (length === 1) {
+        return [0];
+    }
+    if (length <= targetCount) {
+        return Array.from({ length }, (_, index) => index);
+    }
+    const resolveXPx = options?.resolveXPx ?? ((index) => index);
+    const minCount = Math.max(2, targetCount - 1);
+    const maxCount = Math.min(length, targetCount + 1);
+    let bestIndices = indicesForTickCount(length, targetCount);
+    let bestScore = scoreTickLayout(bestIndices, resolveXPx, targetCount);
+    let bestCountDistance = bestScore.countDistance;
+    for (let tickCount = minCount; tickCount <= maxCount; tickCount++) {
+        for (const rawIndices of allIndexLayouts(length, tickCount)) {
+            const indices = options?.data && options.dateLabels && options.xAccessor
+                ? dedupeIndicesByLabel(rawIndices, options.data, options.dateLabels, options.xAccessor)
+                : rawIndices;
+            if (indices.length < 2) {
+                continue;
+            }
+            const layoutScore = scoreTickLayout(indices, resolveXPx, targetCount);
+            const countDistance = Math.abs(indices.length - targetCount);
+            if (isBetterTickLayout(layoutScore, bestScore, countDistance, bestCountDistance)) {
+                bestIndices = indices;
+                bestScore = layoutScore;
+                bestCountDistance = countDistance;
+            }
+        }
+    }
+    return bestIndices;
+}
+function buildDataAlignedTicks({ data, dateLabels, marginLeft, targetTickCount, xAccessor, xScale, }) {
+    const seenLabels = new Set();
+    const ticks = [];
+    const resolveXPx = (index) => {
+        const point = data[index];
+        if (!point) {
+            return index;
+        }
+        return xScale(xAccessor(point)) ?? 0;
+    };
+    for (const index of selectEvenlySpacedIndices(data.length, targetTickCount, {
+        data,
+        dateLabels,
+        resolveXPx,
+        xAccessor,
+    })) {
+        const point = data[index];
+        if (!point) {
+            continue;
+        }
+        const date = xAccessor(point);
+        const label = dateLabels[index] ?? shortDateFmt.format(date);
+        if (seenLabels.has(label)) {
+            continue;
+        }
+        seenLabels.add(label);
+        ticks.push({
+            date,
+            label,
+            x: (xScale(date) ?? 0) + marginLeft,
+        });
+    }
+    return ticks;
+}
+function buildDomainTicks({ marginLeft, numTicks, xScale, }) {
+    const domain = xScale.domain();
+    const startDate = domain[0];
+    const endDate = domain[1];
+    if (!(startDate && endDate)) {
+        return [];
+    }
+    const startTime = startDate.getTime();
+    const endTime = endDate.getTime();
+    const timeRange = endTime - startTime;
+    const tickCount = Math.max(2, numTicks);
+    const seenLabels = new Set();
+    const ticks = [];
+    for (let i = 0; i < tickCount; i++) {
+        const t = i / (tickCount - 1);
+        const date = new Date(startTime + t * timeRange);
+        const label = shortDateFmt.format(date);
+        if (seenLabels.has(label)) {
+            continue;
+        }
+        seenLabels.add(label);
+        ticks.push({
+            date,
+            label,
+            x: (xScale(date) ?? 0) + marginLeft,
+        });
+    }
+    return ticks;
+}
+function domainExtendsPastData(data, xAccessor, xScale) {
+    if (data.length === 0) {
+        return false;
+    }
+    const domainEnd = xScale.domain()[1];
+    const lastPoint = data.at(-1);
+    if (!(domainEnd && lastPoint)) {
+        return false;
+    }
+    return domainEnd.getTime() > xAccessor(lastPoint).getTime();
+}
+/** Domain ticks for the projection tail when brush keeps data-aligned labels. */
+function appendProjectionTailTicks(ticks, data, xAccessor, xScale, marginLeft, maxExtraTicks) {
+    if (data.length === 0 || maxExtraTicks <= 0) {
+        return ticks;
+    }
+    const lastPoint = data.at(-1);
+    const domainEnd = xScale.domain()[1];
+    if (!(lastPoint && domainEnd)) {
+        return ticks;
+    }
+    const lastDate = xAccessor(lastPoint);
+    const startTime = lastDate.getTime();
+    const endTime = domainEnd.getTime();
+    if (endTime <= startTime) {
+        return ticks;
+    }
+    const seenLabels = new Set(ticks.map((tick) => tick.label));
+    const extras = [];
+    const extraCount = Math.min(maxExtraTicks, 3);
+    for (let i = 1; i <= extraCount; i++) {
+        const date = new Date(startTime + (i / (extraCount + 1)) * (endTime - startTime));
+        const label = shortDateFmt.format(date);
+        if (seenLabels.has(label)) {
+            continue;
+        }
+        seenLabels.add(label);
+        extras.push({
+            date,
+            label,
+            x: (xScale(date) ?? 0) + marginLeft,
+        });
+    }
+    const endLabel = shortDateFmt.format(domainEnd);
+    if (!seenLabels.has(endLabel)) {
+        extras.push({
+            date: domainEnd,
+            label: endLabel,
+            x: (xScale(domainEnd) ?? 0) + marginLeft,
+        });
+    }
+    if (extras.length === 0) {
+        return ticks;
+    }
+    return [...ticks, ...extras].sort((a, b) => a.x - b.x);
+}
+export function XAxis(props) {
+    const { containerRef } = useChartStable();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    return _jsx(XAxisInner, { ...props, container: container });
+}
+const XAxisInner = memo(function XAxisInner({ numTicks = 5, tickerHalfWidth = 50, tickMode = "data", container, }) {
+    const { xScale, margin, tooltipData, data, xAccessor, dateLabels, xDomain } = useChart();
+    const labelsToShow = useMemo(() => {
+        const projectionExtendsScale = tickMode === "data" && domainExtendsPastData(data, xAccessor, xScale);
+        if (tickMode === "domain") {
+            return buildDomainTicks({
+                marginLeft: margin.left,
+                numTicks,
+                xScale,
+            });
+        }
+        // No brush: evenly spaced ticks across the full domain (data + projection).
+        if (projectionExtendsScale && xDomain == null) {
+            return buildDomainTicks({
+                marginLeft: margin.left,
+                numTicks,
+                xScale,
+            });
+        }
+        const dataTicks = buildDataAlignedTicks({
+            data,
+            dateLabels,
+            marginLeft: margin.left,
+            targetTickCount: numTicks,
+            xAccessor,
+            xScale,
+        });
+        // Brush: keep data-aligned ticks, add labels only in the projection tail.
+        if (projectionExtendsScale && xDomain != null) {
+            return appendProjectionTailTicks(dataTicks, data, xAccessor, xScale, margin.left, Math.max(1, numTicks - dataTicks.length + 1));
+        }
+        return dataTicks;
+    }, [tickMode, xDomain, data, dateLabels, xAccessor, xScale, margin.left, numTicks]);
+    const isHovering = tooltipData !== null;
+    const crosshairX = tooltipData ? tooltipData.x + margin.left : null;
+    const hoveredLabel = isHovering && tooltipData
+        ? (dateLabels[tooltipData.index] ?? shortDateFmt.format(xAccessor(tooltipData.point)))
+        : null;
+    return createPortal(_jsx("div", { className: "pointer-events-none absolute inset-0", children: labelsToShow.map((item) => (_jsx(XAxisLabel, { animatePosition: xDomain == null, crosshairX: crosshairX, hoveredLabel: hoveredLabel, isHovering: isHovering, label: item.label, tickerHalfWidth: tickerHalfWidth, x: item.x }, `${item.date.getTime()}-${item.x}`))) }), container);
+});
+XAxis.displayName = "XAxis";
+export default XAxis;
+//# sourceMappingURL=x-axis.js.map

package/dist/charts/y-axis-scales.d.ts

@@ -0,0 +1,26 @@
+import { scaleLinear } from "@visx/scale";
+import type { LineConfig } from "./chart-context.js";
+/** Default axis id when `yAxisId` is omitted (Recharts-style `0` / primary left axis). */
+export declare const DEFAULT_Y_AXIS_ID = "left";
+export type YAxisOrientation = "left" | "right";
+export declare function normalizeYAxisId(id?: string | number): string;
+export declare function groupLinesByYAxisId(lines: LineConfig[]): Map<string, LineConfig[]>;
+type YScale = ReturnType<typeof scaleLinear<number>>;
+export declare function getPrimaryYScale(yScales: Record<string, YScale>, fallback: YScale): YScale;
+export declare function buildYScalesForLines({ lines, innerHeight, resolveDomain, }: {
+    lines: LineConfig[];
+    /** Passed by callers; domain is resolved via `resolveDomain`. */
+    data?: Record<string, unknown>[];
+    innerHeight: number;
+    resolveDomain: (dataKeys: string[]) => [number, number];
+}): Record<string, YScale>;
+/** Build y-scales from pre-computed (already nice'd) domain endpoints. */
+export declare function buildYScalesFromDomains({ lines, innerHeight, domainsByAxis, }: {
+    lines: LineConfig[];
+    innerHeight: number;
+    domainsByAxis: Record<string, [number, number]>;
+}): Record<string, YScale>;
+/** Single-axis charts (bar, scatter, candlestick, live line). */
+export declare function wrapSingleYScale(yScale: YScale): Record<string, YScale>;
+export {};
+//# sourceMappingURL=y-axis-scales.d.ts.map

package/dist/charts/y-axis-scales.js

@@ -0,0 +1,72 @@
+import { scaleLinear } from "@visx/scale";
+/** Default axis id when `yAxisId` is omitted (Recharts-style `0` / primary left axis). */
+export const DEFAULT_Y_AXIS_ID = "left";
+export function normalizeYAxisId(id) {
+    if (id == null || id === "") {
+        return DEFAULT_Y_AXIS_ID;
+    }
+    return String(id);
+}
+export function groupLinesByYAxisId(lines) {
+    const groups = new Map();
+    for (const line of lines) {
+        const axisId = normalizeYAxisId(line.yAxisId);
+        const bucket = groups.get(axisId) ?? [];
+        bucket.push(line);
+        groups.set(axisId, bucket);
+    }
+    return groups;
+}
+export function getPrimaryYScale(yScales, fallback) {
+    const primary = yScales[DEFAULT_Y_AXIS_ID];
+    if (primary) {
+        return primary;
+    }
+    const first = Object.values(yScales)[0];
+    return first ?? fallback;
+}
+export function buildYScalesForLines({ lines, innerHeight, resolveDomain, }) {
+    const groups = groupLinesByYAxisId(lines);
+    const scales = {};
+    for (const [axisId, axisLines] of groups) {
+        const dataKeys = axisLines.map((line) => line.dataKey);
+        const domain = resolveDomain(dataKeys);
+        scales[axisId] = scaleLinear({
+            range: [innerHeight, 0],
+            domain,
+            nice: true,
+        });
+    }
+    if (!scales[DEFAULT_Y_AXIS_ID]) {
+        scales[DEFAULT_Y_AXIS_ID] = scaleLinear({
+            range: [innerHeight, 0],
+            domain: [0, 100],
+            nice: true,
+        });
+    }
+    return scales;
+}
+/** Build y-scales from pre-computed (already nice'd) domain endpoints. */
+export function buildYScalesFromDomains({ lines, innerHeight, domainsByAxis, }) {
+    const groups = groupLinesByYAxisId(lines);
+    const scales = {};
+    for (const [axisId] of groups) {
+        const domain = domainsByAxis[axisId] ?? domainsByAxis[DEFAULT_Y_AXIS_ID] ?? [0, 100];
+        scales[axisId] = scaleLinear({
+            range: [innerHeight, 0],
+            domain,
+        });
+    }
+    if (!scales[DEFAULT_Y_AXIS_ID]) {
+        scales[DEFAULT_Y_AXIS_ID] = scaleLinear({
+            range: [innerHeight, 0],
+            domain: domainsByAxis[DEFAULT_Y_AXIS_ID] ?? [0, 100],
+        });
+    }
+    return scales;
+}
+/** Single-axis charts (bar, scatter, candlestick, live line). */
+export function wrapSingleYScale(yScale) {
+    return { [DEFAULT_Y_AXIS_ID]: yScale };
+}
+//# sourceMappingURL=y-axis-scales.js.map

package/dist/charts/y-axis-ticks.d.ts

@@ -0,0 +1,12 @@
+/** Default hint passed to `scale.ticks()` (d3 — approximate tick count). */
+export declare const Y_AXIS_DEFAULT_TICK_COUNT = 5;
+/** Minimum valid `numTicks` for `scale.ticks()` — values ≤ 0 yield no ticks. */
+export declare const Y_AXIS_MIN_TICK_COUNT = 1;
+/**
+ * Upper bound for the tick count hint. D3 may return more "nice" ticks above ~10;
+ * keeping the hint in a modest range avoids overcrowded axes.
+ */
+export declare const Y_AXIS_MAX_TICK_COUNT = 10;
+/** Clamps a user `numTicks` value to a valid d3 tick-count hint. */
+export declare function resolveYAxisTickCount(numTicks?: number): number;
+//# sourceMappingURL=y-axis-ticks.d.ts.map

package/dist/charts/y-axis-ticks.js

@@ -0,0 +1,24 @@
+/** Default hint passed to `scale.ticks()` (d3 — approximate tick count). */
+export const Y_AXIS_DEFAULT_TICK_COUNT = 5;
+/** Minimum valid `numTicks` for `scale.ticks()` — values ≤ 0 yield no ticks. */
+export const Y_AXIS_MIN_TICK_COUNT = 1;
+/**
+ * Upper bound for the tick count hint. D3 may return more "nice" ticks above ~10;
+ * keeping the hint in a modest range avoids overcrowded axes.
+ */
+export const Y_AXIS_MAX_TICK_COUNT = 10;
+/** Clamps a user `numTicks` value to a valid d3 tick-count hint. */
+export function resolveYAxisTickCount(numTicks) {
+    if (numTicks == null || !Number.isFinite(numTicks)) {
+        return Y_AXIS_DEFAULT_TICK_COUNT;
+    }
+    const rounded = Math.round(numTicks);
+    if (rounded < Y_AXIS_MIN_TICK_COUNT) {
+        return Y_AXIS_MIN_TICK_COUNT;
+    }
+    if (rounded > Y_AXIS_MAX_TICK_COUNT) {
+        return Y_AXIS_MAX_TICK_COUNT;
+    }
+    return rounded;
+}
+//# sourceMappingURL=y-axis-ticks.js.map

package/dist/charts/y-axis.d.ts

@@ -0,0 +1,22 @@
+import type { YAxisOrientation } from "./y-axis-scales.js";
+export interface YAxisProps {
+    /** Scale group id (Recharts `yAxisId`). Default: `"left"`. */
+    yAxisId?: string | number;
+    /** Which side of the chart to render labels. Default: `"left"`. */
+    orientation?: YAxisOrientation;
+    /**
+     * Approximate tick count hint for `scale.ticks()` (d3). Actual label count may differ.
+     * Clamped to {@link Y_AXIS_MIN_TICK_COUNT}–{@link Y_AXIS_MAX_TICK_COUNT}. Default: 5.
+     */
+    numTicks?: number;
+    /** Format large numbers (e.g. 1000 as "1k"). Default: true */
+    formatLargeNumbers?: boolean;
+    /** Custom formatter for tick labels (e.g. USD). Overrides formatLargeNumbers when set. */
+    formatValue?: (value: number) => string;
+}
+export declare function YAxis(props: YAxisProps): import("react").JSX.Element | null;
+export declare namespace YAxis {
+    var displayName: string;
+}
+export default YAxis;
+//# sourceMappingURL=y-axis.d.ts.map

package/dist/charts/y-axis.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { useChartStable, useYScale } from "./chart-context.js";
+import { DEFAULT_Y_DOMAIN_TWEEN_MS } from "./chart-phase.js";
+import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing.js";
+import { resolveReferenceDataRange } from "./reference-area-geometry.js";
+import { normalizeYAxisId } from "./y-axis-scales.js";
+import { resolveYAxisTickCount, Y_AXIS_DEFAULT_TICK_COUNT } from "./y-axis-ticks.js";
+const Y_AXIS_POSITION_TWEEN_MS = DEFAULT_Y_DOMAIN_TWEEN_MS;
+function formatLabel(value, formatLargeNumbers, formatValue) {
+    if (formatValue) {
+        return formatValue(value);
+    }
+    if (formatLargeNumbers && value >= 1000) {
+        return `${(value / 1000).toFixed(0)}k`;
+    }
+    return String(value);
+}
+function resolveTickLabelColor(tickY, axisId, yScale, referenceAreas) {
+    for (const area of referenceAreas) {
+        if (!area.axisLabelColor) {
+            continue;
+        }
+        if (normalizeYAxisId(area.yAxisId) !== axisId) {
+            continue;
+        }
+        const [low, high] = resolveReferenceDataRange(area.y1, area.y2, yScale.domain());
+        const topPixel = yScale(high) ?? 0;
+        const bottomPixel = yScale(low) ?? 0;
+        const bandTop = Math.min(topPixel, bottomPixel);
+        const bandBottom = Math.max(topPixel, bottomPixel);
+        if (tickY >= bandTop && tickY <= bandBottom) {
+            return area.axisLabelColor;
+        }
+    }
+    return undefined;
+}
+export function YAxis(props) {
+    const { containerRef } = useChartStable();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const container = containerRef.current;
+    if (!(mounted && container)) {
+        return null;
+    }
+    return _jsx(YAxisInner, { ...props, container: container });
+}
+const YAxisInner = memo(function YAxisInner({ yAxisId, orientation = "left", numTicks = Y_AXIS_DEFAULT_TICK_COUNT, formatLargeNumbers = true, formatValue, container, }) {
+    const { margin, referenceAreas } = useChartStable();
+    const yScale = useYScale(yAxisId);
+    const isLeft = orientation === "left";
+    const axisId = normalizeYAxisId(yAxisId);
+    const ticks = useMemo(() => {
+        const tickValues = yScale.ticks(resolveYAxisTickCount(numTicks));
+        return tickValues.map((value) => {
+            const y = (yScale(value) ?? 0) + margin.top;
+            return {
+                value,
+                y,
+                label: formatLabel(value, formatLargeNumbers, formatValue),
+                labelColor: resolveTickLabelColor(y - margin.top, axisId, yScale, referenceAreas),
+            };
+        });
+    }, [yScale, margin.top, numTicks, formatLargeNumbers, formatValue, axisId, referenceAreas]);
+    return createPortal(_jsx("div", { className: "pointer-events-none absolute inset-0", children: _jsx("div", { className: "absolute top-0 bottom-0", style: isLeft ? { left: 0, width: margin.left } : { right: 0, width: margin.right }, children: ticks.map((tick) => (_jsx("div", { className: "absolute flex items-center", style: {
+                    top: tick.y,
+                    transform: "translateY(-50%)",
+                    transition: `top ${Y_AXIS_POSITION_TWEEN_MS}ms cubic-bezier(${LINE_LOADING_PULSE_EASE.join(", ")})`,
+                    ...(isLeft
+                        ? { right: 0, justifyContent: "flex-end", paddingRight: 8 }
+                        : { left: 0, justifyContent: "flex-start", paddingLeft: 8 }),
+                }, children: _jsx("span", { className: "text-chart-label text-xs", style: tick.labelColor ? { color: tick.labelColor } : undefined, children: tick.label }) }, tick.value))) }) }), container);
+});
+YAxis.displayName = "YAxis";
+export default YAxis;
+//# sourceMappingURL=y-axis.js.map

package/dist/charts/y-domain-utils.d.ts

@@ -0,0 +1,27 @@
+import type { LineConfig } from "./chart-context.js";
+import { type ChartPhase } from "./chart-phase.js";
+export type YDomain = [number, number];
+/** Apply visx `nice()` to raw domain endpoints for stable grid ticks. */
+export declare function niceYDomain(domain: YDomain): YDomain;
+/**
+ * Skip Y tween when both endpoints move less than the threshold relative to span.
+ * When in doubt callers should tween — beauty wins over micro-optimization.
+ */
+export declare function shouldTweenYDomain(from: YDomain, to: YDomain): boolean;
+/** Phases where the chart shows loading chrome (shimmer, pulse, label). */
+export declare function isLoadingChromePhase(phase: ChartPhase): boolean;
+/** Phases where grid lines use loading stroke styling (muted / dashed chrome). */
+export declare function isLoadingGridChromePhase(phase: ChartPhase): boolean;
+/** Phases where Y-domain tween runs after the series has exited. */
+export declare function isYDomainTweenPhase(phase: ChartPhase): boolean;
+/** Phases where {@link ReferenceArea} bands are shown (fade in/out on transitions). */
+export declare function isReferenceAreaVisiblePhase(phase: ChartPhase): boolean;
+export declare function resolveAnimatedYDestinationDomains(chartPhase: ChartPhase, skeletonByAxis: Record<string, YDomain>, targetByAxis: Record<string, YDomain>): Record<string, YDomain>;
+export declare function computeYDomainsByAxis({ lines, resolveDomain, }: {
+    lines: LineConfig[];
+    resolveDomain: (dataKeys: string[]) => YDomain;
+}): Record<string, YDomain>;
+/** Merge domain maps, normalizing axis ids to strings. */
+export declare function mergeYDomainRecords(...records: Record<string, YDomain>[]): Record<string, YDomain>;
+export declare function domainsEqual(left: Record<string, YDomain>, right: Record<string, YDomain>): boolean;
+//# sourceMappingURL=y-domain-utils.d.ts.map