@gearbox-protocol/ui-kit 4.0.0-next.8 → 4.0.0-next.80

package/dist/types/components/formatted-number/formatted-number.d.ts

@@ -1,4 +1,4 @@
-import { ParseSmallNumberResult } from '../../utils';
+import { ParseSmallNumberResult } from '../../utils/internal/parse-small-number';
 import type * as React from "react";
 export interface FormattedNumberStringProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
@@ -18,4 +18,4 @@ export interface FormattedNumberStringProps extends React.HTMLAttributes<HTMLSpa
  * FormattedNumberString — displays a number with optional compact decimal (zeros as repeat count) and tooltip with full value.
  * Matches interface FormattedNumber structure and styles.
  */
-export declare function FormattedNumberString({ value, decimalPartLength, hideZerosIfMore, className, ...props }: FormattedNumberStringProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormattedNumberString({ value, decimalPartLength, hideZerosIfMore, className, ...props }: FormattedNumberStringProps): React.JSX.Element;

package/dist/types/{utils → components/graph}/colors.d.ts

@@ -5,12 +5,6 @@
  * @returns The resolved color value
  */
 export declare function resolveCSSColor(color: string, fallback?: string): string;
-/**
- * Gets the current value of a CSS variable from the document root
- * @param variableName - The CSS variable name (with or without --)
- * @returns The resolved color value or fallback
- */
-export declare function getCSSVariable(variableName: string, fallback?: string): string;
 /**
  * Converts hex color to rgba
  * @param hex - Hex color string (e.g., "#02c39a" or "#02C39A")

package/dist/types/components/graph/default-config.d.ts

@@ -1,7 +1,29 @@
 import { AreaSeriesPartialOptions, ChartOptions, DeepPartial } from 'lightweight-charts';
 import { VertLineOptions } from './plugins/vertical-line';
 export declare const DEFAULT_AREA_SERIES: AreaSeriesPartialOptions;
-export declare const DEFAULT_VERTICAL_LINE: Partial<VertLineOptions>;
+/** Matches UI `text-sm` so axis tick labels read with the rest of the chrome. */
+export declare const AXIS_FONT_SIZE = 14;
+/**
+ * Price-scale tick density. Higher → more space between labels (fewer ticks).
+ * Lightweight-charts defaults to 2.5, which packs ~12 labels onto a 460px pane.
+ */
+export declare const AXIS_TICK_MARK_DENSITY = 5;
+/**
+ * Pixel inset so a tick sitting on the pane edge is drawn fully inside the
+ * canvas (half the font plus a couple of pixels of breathing room).
+ */
+export declare const AXIS_EDGE_LABEL_PADDING_PX: number;
+/**
+ * Extra air above the top tick so the label does not sit flush with the
+ * chart frame. Larger than the bottom inset because the top edge has no
+ * time-axis chrome to separate it from the container.
+ */
+export declare const AXIS_TOP_LABEL_PADDING_PX: number;
+/**
+ * Horizontal inset so a centred date label (`dd MMM`, ~50px) sits fully
+ * inside the time-scale canvas with a few pixels of air on each side.
+ */
+export declare const AXIS_TIME_EDGE_PADDING_PX = 40;
 /**
  * Gets the default chart options with resolved CSS colors
  * Call this at runtime to ensure CSS variables are properly resolved
@@ -17,4 +39,3 @@ export declare function getDefaultSeries(): AreaSeriesPartialOptions;
  * Call this at runtime to ensure CSS variables are properly resolved
  */
 export declare function getDefaultVerticalLine(): Partial<VertLineOptions>;
-export declare const DEFAULT_OPTIONS: DeepPartial<ChartOptions>;

package/dist/types/{utils → components/graph}/format-number.d.ts

@@ -2,24 +2,6 @@
  * Utility functions for formatting numbers with various options
  * Used by graph formatters and liquidation components
  */
-/**
- * Determines the appropriate number of decimal places based on the scaled value.
- * If the value is small (< 10), we need more precision to distinguish between values.
- */
-export declare function getAdaptiveDecimals(scaledValue: number): number;
-export interface FormatNumberOptions {
-    /** Use short format with K/M/B suffixes */
-    format?: "full" | "short";
-    /** Minimum fraction digits */
-    minimumFractionDigits?: number;
-    /** Maximum fraction digits */
-    maximumFractionDigits?: number;
-    /** Threshold for exponential notation */
-    maxExponentialThreshold?: number;
-    /** Automatically determine decimals based on magnitude */
-    adaptiveDecimals?: boolean;
-}
-export declare function formatNumberWithSuffix(amount: number, options?: FormatNumberOptions): string;
 /**
  * Convert a number to significant digits string
  * For small values (< 1), uses true significant digits
@@ -34,18 +16,10 @@ export declare function formatNumberWithSuffix(amount: number, options?: FormatN
  * ```
  */
 export declare function toSignificantDigits(value: number, decimals: number): string;
-/**
- * Check if a value is effectively zero (within epsilon)
- */
-export declare function isEffectivelyZero(value: number): boolean;
 /**
  * Check if a value is below display threshold
  */
 export declare function isBelowDisplayThreshold(value: number): boolean;
-/**
- * Format very small values with threshold indicator
- */
-export declare function formatSmallValue(value: number, suffix?: string): string | null;
 /**
  * Constants for number formatting
  */

package/dist/types/components/graph/formatters.d.ts

@@ -1,15 +1,10 @@
+import { YMeasureUnits } from './graph-vocabulary';
 import { Time, TickMarkType } from 'lightweight-charts';
+export type { YMeasureUnits };
 export interface Point {
     time: Time | number;
     value: number;
 }
-interface Flavoring<FlavorT> {
-    _type?: FlavorT;
-}
-type Flavor<T, FlavorT> = T & Flavoring<FlavorT>;
-export type YMeasureUnits = "$" | "%" | "none" | Flavor<string, "token">;
-type YFormatter = (v: number, symbol: YMeasureUnits | undefined, format?: "full" | "short") => string;
-export declare const getYFormatter: (unit: YMeasureUnits) => YFormatter;
 /**
  * Format a number with full precision, only removing trailing zeros
  * Used for displaying exact current values on graphs
@@ -27,6 +22,11 @@ export interface AdaptiveYAxisFormatterOptions {
  * stay bare so charts without a real unit don't render a placeholder.
  */
 export declare function withYAxisUnit(label: string, unit: YMeasureUnits): string;
+/**
+ * Ratio units (`base / quote`) stay off axis ticks, the crosshair pill, and
+ * tooltip values — the pair belongs in the series title, not after the number.
+ */
+export declare function isRatioUnit(unit: YMeasureUnits): boolean;
 /**
  * Creates an adaptive Y-axis formatter that determines precision dynamically
  * based on visible range to ensure unique labels on the axis.
@@ -37,7 +37,6 @@ export declare function createAdaptiveYAxisFormatter(initialValues: number[], un
     formatter: (price: number) => string;
     tickmarksFormatter: (prices: number[]) => string[];
     updateVisibleRange: (visibleValues: number[]) => void;
-    updateLastValues: (lastValues: number[]) => void;
 };
 export type XMeasureUnits = "time" | "%";
 type XFormatter = (time: Time, symbol: XMeasureUnits | undefined) => string;
@@ -50,4 +49,3 @@ export interface XFormatters {
 export declare const getXFormatters: (unit: XMeasureUnits, points?: Point[]) => XFormatters;
 /** @deprecated Use getXFormatters instead */
 export declare const getXFormatter: (unit: XMeasureUnits, points?: Point[]) => XFormatter;
-export {};

package/dist/types/components/graph/graph-tooltip.d.ts

@@ -1,5 +1,5 @@
 import { Point, XMeasureUnits, YMeasureUnits } from './formatters';
-import { SeriesConfig } from './graph';
+import { SeriesConfig } from './series-config';
 import type * as React from "react";
 export interface GraphTooltipProps {
     /** Points by series label */

package/dist/types/components/graph/graph-view.d.ts

@@ -4,7 +4,7 @@ import * as React from "react";
 declare const graphViewVariants: (props?: ({
     variant?: "default" | "outlined" | "ghost" | "elevated" | "plain" | null | undefined;
     size?: "full" | "default" | "sm" | "lg" | "xl" | null | undefined;
-    padding?: "none" | "default" | "sm" | "lg" | null | undefined;
+    padding?: "default" | "none" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * GraphView component props
@@ -29,7 +29,7 @@ export interface GraphViewProps extends React.HTMLAttributes<HTMLDivElement>, Va
     /**
      * Optional empty state message
      */
-    emptyMessage?: string;
+    emptyMessage?: React.ReactNode;
     /**
      * Optional error message
      */
@@ -189,36 +189,4 @@ declare const GraphView: React.ForwardRefExoticComponent<GraphViewProps & React.
  * ```
  */
 export declare function GraphViewWithData({ series, data, lineColor, color, topColor, bottomColor, graphId, onUnselectSeries, loading, title, description, toolbar, emptyMessage, error, containerClassName, variant, size, padding, yMeasureUnit, showCurrentValue, ...restProps }: GraphViewWithDataProps): React.ReactElement;
-/**
- * Custom hook to manage graph sizing with an aside element
- *
- * This hook helps calculate the available width for a graph when there's
- * an aside element (like a legend or info panel) next to it.
- *
- * @param gap - The gap in pixels between the graph and aside element
- * @returns Object containing graphWidth, parentRef, and asideRef
- *
- * @example
- * ```tsx
- * function MyChart() {
- *   const { graphWidth, parentRef, asideRef } = useGraphAside(16);
- *
- *   return (
- *     <div ref={parentRef} className="flex gap-4">
- *       <div style={{ width: graphWidth }}>
- *         <GraphViewWithData {...props} />
- *       </div>
- *       <aside ref={asideRef}>
- *         Legend content
- *       </aside>
- *     </div>
- *   );
- * }
- * ```
- */
-export declare function useGraphAside(gap?: number): {
-    graphWidth: number | null;
-    parentRef: React.RefObject<HTMLDivElement | null>;
-    asideRef: React.RefObject<HTMLDivElement | null>;
-};
-export { GraphView, graphViewVariants };
+export { GraphView };

package/dist/types/components/graph/graph-vocabulary.d.ts

@@ -0,0 +1,44 @@
+import { LineStyle as LineStyleEnum, LineWidth } from 'lightweight-charts';
+interface Flavoring<FlavorT> {
+    _type?: FlavorT;
+}
+type Flavor<T, FlavorT> = T & Flavoring<FlavorT>;
+export type YMeasureUnits = "$" | "%" | "none" | Flavor<string, "token">;
+export interface PriceLineConfig {
+    /** Y value (price) where the horizontal line is drawn. */
+    price: number;
+    /**
+     * `id` (preferred) or display `label` of the series to attach the line to.
+     * When omitted, the line is attached to the first series that has data.
+     */
+    seriesLabel?: string;
+    /** Line color. Defaults to the destructive theme color. */
+    color?: string;
+    /** Text shown next to the line on the price axis. */
+    title?: string;
+    /** Line thickness (1–4). Default 1. */
+    lineWidth?: LineWidth;
+    /** Line dash style. Default dashed. */
+    lineStyle?: LineStyleEnum;
+    /** Whether to render the value label on the price axis. Default true. */
+    axisLabelVisible?: boolean;
+}
+export interface PriceZoneConfig {
+    /** Upper price bound. Omit to extend the band to the top of the pane. */
+    priceTop?: number;
+    /** Lower price bound. Omit to extend the band to the bottom of the pane. */
+    priceBottom?: number;
+    /** Fill color — use a translucent value. Defaults to a translucent destructive tint. */
+    color?: string;
+    /**
+     * `id` (preferred) or display `label` of the series whose price scale the
+     * band is drawn against. When omitted, the first series with data is used.
+     */
+    seriesLabel?: string;
+}
+export declare const DEFAULT_SERIES_COLORS: {
+    line: string;
+    top: string;
+    bottom: string;
+}[];
+export {};

package/dist/types/components/graph/graph.d.ts

@@ -1,28 +1,33 @@
-import { ChartOptions, DeepPartial, LineStyle, LineWidth, Time, LineStyle as LineStyleEnum } from 'lightweight-charts';
+import { ChartOptions, DeepPartial } from 'lightweight-charts';
 import { Point, YMeasureUnits } from './formatters';
 import { GraphTooltipProps } from './graph-tooltip';
+import { PriceLineConfig, PriceZoneConfig } from './graph-vocabulary';
+import { SeriesConfig, SeriesPriceScaleId } from './series-config';
+export type { SeriesChartType, SeriesConfig, SeriesPriceScaleId, } from './series-config';
 import * as React from "react";
-export type SeriesPriceScaleId = "left" | "right";
-export type SeriesChartType = "area" | "line";
-export interface SeriesConfig {
-    data: Array<Point>;
-    label: string;
-    /** Line color (area stroke). Alias: prefer `lineColor` for clarity; if both set, `lineColor` wins. */
-    color?: string;
-    /** Line color — same as `color`; use for explicit line-only color. */
-    lineColor?: string;
-    /** Upper gradient of the area fill */
-    topColor?: string;
-    /** Lower gradient of the area fill */
-    bottomColor?: string;
-    yMeasureUnit?: YMeasureUnits;
-    /** Price scale when `dualYAxis` is enabled on Graph. */
-    priceScaleId?: SeriesPriceScaleId;
-    /** Render as line (no fill) instead of area. */
-    seriesType?: SeriesChartType;
-    /** Line dash style (line series only). */
-    lineStyle?: LineStyle;
+/** Chart-instance key: stable `id` when set, otherwise the display `label`. */
+export declare function seriesIdentity(series: Pick<SeriesConfig, "id" | "label">): string;
+export interface VisibleLogicalRangeInput {
+    readonly lastIndex: number;
+    readonly width: number;
+    readonly padLeft: boolean;
+    readonly padRight: boolean;
+    readonly paddingPx?: number;
 }
+/**
+ * Logical range that shows every bar, plus optional plot-area air so a
+ * centred `dd MMM` date label is not clipped by the frame.
+ *
+ * Computed from the point count rather than `getVisibleLogicalRange()`:
+ * `setVisibleRange` in lightweight-charts is applied on the next animation
+ * frame, so reading the scale back immediately returns the previous (or
+ * default `barSpacing: 6`) window and a follow-up `setVisibleLogicalRange`
+ * would replace the full-period request with a truncated one.
+ */
+export declare function visibleLogicalRangeFor({ lastIndex, width, padLeft, padRight, paddingPx, }: VisibleLogicalRangeInput): {
+    from: number;
+    to: number;
+} | null;
 export type VerticalLineOptions = Partial<{
     color: string;
     labelText: string;
@@ -41,50 +46,6 @@ export type VerticalLineOptions = Partial<{
      */
     tooltipText: string;
 }>;
-/**
- * Horizontal reference line drawn at a fixed Y (price) value, e.g. a
- * liquidation price level. Rendered as a native lightweight-charts price line
- * attached to a series, so it tracks the series' price scale and does not
- * affect autoscale or tooltips.
- */
-export interface PriceLineConfig {
-    /** Y value (price) where the horizontal line is drawn. */
-    price: number;
-    /**
-     * Label of the series to attach the line to. When omitted, the line is
-     * attached to the first series that has data (its price scale is used).
-     */
-    seriesLabel?: string;
-    /** Line color. Defaults to the destructive theme color. */
-    color?: string;
-    /** Text shown next to the line on the price axis. */
-    title?: string;
-    /** Line thickness (1–4). Default 1. */
-    lineWidth?: LineWidth;
-    /** Line dash style. Default dashed. */
-    lineStyle?: LineStyleEnum;
-    /** Whether to render the value label on the price axis. Default true. */
-    axisLabelVisible?: boolean;
-}
-/**
- * Shaded horizontal band drawn between two Y (price) values across the full
- * width of the chart — e.g. a liquidation "danger zone" below a health-factor
- * threshold. Rendered behind the series as a lightweight-charts primitive, so
- * it tracks the series' price scale and does not affect tooltips.
- */
-export interface PriceZoneConfig {
-    /** Upper price bound. Omit to extend the band to the top of the pane. */
-    priceTop?: number;
-    /** Lower price bound. Omit to extend the band to the bottom of the pane. */
-    priceBottom?: number;
-    /** Fill color — use a translucent value. Defaults to a translucent destructive tint. */
-    color?: string;
-    /**
-     * Label of the series whose price scale the band is drawn against. When
-     * omitted, the first series with data is used.
-     */
-    seriesLabel?: string;
-}
 /**
  * Returns formatted label and value strings for a vertical line tooltip.
  * Used by Graph and by tests.
@@ -117,18 +78,6 @@ export declare function getStepForwardValue(data: ReadonlyArray<Point>, crosshai
  * Greens/teals are spread out so that when only a subset of series is visible,
  * similar colors are not repeated.
  */
-export declare const DEFAULT_SERIES_COLORS: {
-    line: string;
-    top: string;
-    bottom: string;
-}[];
-export type SeriesColorPalette = (typeof DEFAULT_SERIES_COLORS)[number];
-/**
- * Returns a color palette for a series by index. Uses predefined palette for
- * the first N series; generates distinct colors for additional series so they
- * never repeat.
- */
-export declare function getSeriesColorPalette(index: number): SeriesColorPalette;
 export interface GraphProps {
     /** Series configuration - can be single or multiple series */
     series: Array<SeriesConfig>;
@@ -141,7 +90,8 @@ export interface GraphProps {
     xMeasureUnit?: GraphTooltipProps["xMeasureUnit"];
     optionsOverrides?: DeepPartial<ChartOptions>;
     verticalLineOptions?: Array<{
-        xCoordinate: Time;
+        /** Same scale as `GraphPoint.timestamp`; branded for the chart internally. */
+        xCoordinate: number;
         options?: VerticalLineOptions;
     }>;
     /**
@@ -174,10 +124,6 @@ export interface GraphProps {
     dualYAxis?: boolean;
     /** Preferred default price scale when both left and right are visible. */
     defaultVisiblePriceScaleId?: SeriesPriceScaleId;
-    /** Optional label for the left Y axis (dualYAxis mode). */
-    leftPriceScaleTitle?: string;
-    /** Optional label for the right Y axis (dualYAxis mode). */
-    rightPriceScaleTitle?: string;
     /**
      * When true (default), shows the current value and date in the top-left corner
      * in single-series mode. Set to false to hide.
@@ -198,10 +144,10 @@ export interface GraphProps {
      */
     yScaleMinMultiple?: number;
     /**
-     * Minimum visible time (unix seconds).  When set, the X axis never zooms
-     * in further than this value — even if the current series data starts later.
-     * Useful for keeping the full selected time range (e.g. 1Y) when switching
-     * between series with different data coverage.
+     * Minimum visible time (unix seconds). When set, leading whitespace is
+     * injected so a later-starting series still occupies the selected window.
+     * It does not change the logical range applied below: `timeToIndex` with
+     * `findNearest` already snaps a time before the first point to index 0.
      */
     visibleTimeFrom?: number;
     /**
@@ -224,9 +170,22 @@ export interface GraphProps {
  * with support for area series, custom tooltips, and vertical line annotations
  * Supports single or multiple series with different colors and legends
  */
-export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, priceLineOptions, zoneOptions, currentValueDecimals, useSharedPriceScale, dualYAxis, defaultVisiblePriceScaleId, leftPriceScaleTitle, rightPriceScaleTitle: _rightPriceScaleTitle, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, disableZoom, hideDefaultTooltip, }: GraphProps): React.ReactElement;
+export declare function Graph({ series, className, showLegend, onUnselectSeries, xMeasureUnit, yMeasureUnit, optionsOverrides, verticalLineOptions, priceLineOptions, zoneOptions, currentValueDecimals, useSharedPriceScale, dualYAxis, defaultVisiblePriceScaleId, showCurrentValue, graphTitle, yScaleMin, yScaleMinMultiple, visibleTimeFrom, disableZoom, hideDefaultTooltip, }: GraphProps): React.ReactElement;
+/**
+ * A legend entry that is not a data series — a vertical marker line, say.
+ * Such a line is drawn by its own layer and never reaches `series`, so
+ * without this the chart shows a coloured line nothing on screen names.
+ */
+export interface GraphLegendMarker {
+    id: string;
+    label: string;
+    /** Same value handed to the line itself, so legend and line agree. */
+    color: string;
+}
 export interface GraphLegendProps {
     series: Array<SeriesConfig>;
+    /** Non-series entries, rendered after the series in the same row. */
+    markers?: ReadonlyArray<GraphLegendMarker>;
     onUnselect?: (label: string) => void;
     /**
      * When true, the legend is laid out inline (no absolute positioning) so it
@@ -235,4 +194,4 @@ export interface GraphLegendProps {
      */
     inline?: boolean;
 }
-export declare function GraphLegend({ series, onUnselect, inline, }: GraphLegendProps): React.ReactElement;
+export declare function GraphLegend({ series, markers, onUnselect, inline, }: GraphLegendProps): React.ReactElement;

package/dist/types/components/graph/index.d.ts

@@ -1,7 +1,2 @@
-export * from './default-config';
-export { getXFormatter, getXFormatters, getYFormatter, type Point as GraphPoint, type XFormatters, type XMeasureUnits, type YMeasureUnits, } from './formatters';
-export { DEFAULT_SERIES_COLORS, Graph, GraphLegend, type GraphLegendProps, type GraphProps, getSeriesColorPalette, getVerticalLineLabelStyle, getVerticalLineTooltipContent, type PriceLineConfig, type PriceZoneConfig, type SeriesColorPalette, type SeriesConfig, type VerticalLineOptions, } from './graph';
-export * from './graph-current-value';
-export * from './graph-tooltip';
-export * from './graph-view';
-export { VertLine } from './plugins/vertical-line';
+export type { GraphViewWithDataProps } from './graph-view';
+export * from './graph-vocabulary';

package/dist/types/components/graph/series-config.d.ts

@@ -0,0 +1,44 @@
+import { LineStyle } from 'lightweight-charts';
+import { Point, YMeasureUnits } from './formatters';
+/** Which axis a series is drawn against. */
+export type SeriesPriceScaleId = "left" | "right";
+/** Area with a fill, or a bare line. */
+export type SeriesChartType = "area" | "line";
+export interface SeriesConfig {
+    data: Array<Point>;
+    /**
+     * Stable chart-instance key. Prefer this over `label` so renaming the legend
+     * (e.g. interpolating leverage into the title) updates the existing series
+     * instead of destroying it — which shuffles `seriesRefs` and breaks tooltips.
+     */
+    id?: string;
+    label: string;
+    /** Line color (area stroke). Alias: prefer `lineColor` for clarity; if both set, `lineColor` wins. */
+    color?: string;
+    /** Line color — same as `color`; use for explicit line-only color. */
+    lineColor?: string;
+    /** Upper gradient of the area fill */
+    topColor?: string;
+    /** Lower gradient of the area fill */
+    bottomColor?: string;
+    yMeasureUnit?: YMeasureUnits;
+    /** Price scale when `dualYAxis` is enabled on Graph. */
+    priceScaleId?: SeriesPriceScaleId;
+    /** Render as line (no fill) instead of area. */
+    seriesType?: SeriesChartType;
+    /** Line dash style (line series only). */
+    lineStyle?: LineStyle;
+}
+/**
+ * The left/right split the chart draws in `dualYAxis` mode: an explicit
+ * `priceScaleId` wins, otherwise the first series takes the left scale and the
+ * rest the right one.
+ *
+ * Only series carrying points advance that count, because a series with none is
+ * never added to the chart — counting it would push every series after it onto
+ * the wrong axis.
+ */
+export declare function resolvePriceScaleSides(series: ReadonlyArray<SeriesConfig>): Array<{
+    series: SeriesConfig;
+    side: SeriesPriceScaleId;
+}>;

package/dist/types/components/graph/series-palette.d.ts

@@ -0,0 +1,13 @@
+import { DEFAULT_SERIES_COLORS } from './graph-vocabulary';
+/**
+ * Colours for the nth series. Its own module: the chart assigns them and the
+ * tooltip reads them back, and taking the function from the chart would close
+ * a cycle between the two.
+ */
+export type SeriesColorPalette = (typeof DEFAULT_SERIES_COLORS)[number];
+/**
+ * Returns a color palette for a series by index. Uses predefined palette for
+ * the first N series; generates distinct colors for additional series so they
+ * never repeat.
+ */
+export declare function getSeriesColorPalette(index: number): SeriesColorPalette;

package/dist/types/components/graph/y-axis-scale.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Nice Y-axis range: a tick step from the same 1 / 2 / 2.5 / 5 × 10^n family
+ * that lightweight-charts uses, with min/max snapped onto that grid so the
+ * first and last labels sit on the pane edges.
+ */
+export interface PickTickSpanArgs {
+    min: number;
+    max: number;
+    scaleHeightPx: number;
+    fontSizePx: number;
+    tickMarkDensity: number;
+    minMove: number;
+}
+export interface NiceAxisRangeArgs {
+    min: number;
+    max: number;
+    /** Hard floor (e.g. `yScaleMin`, or 0 when the series never goes negative). */
+    floor?: number;
+    scaleHeightPx: number;
+    fontSizePx: number;
+    tickMarkDensity: number;
+    minMove?: number;
+    /** Pixel inset lightweight-charts will add via AutoscaleInfo.margins.below. */
+    edgePaddingPx?: number;
+    /** Pixel inset for AutoscaleInfo.margins.above. Defaults to `edgePaddingPx`. */
+    edgePaddingTopPx?: number;
+}
+export interface NiceAxisRange {
+    min: number;
+    max: number;
+    step: number;
+}
+/**
+ * Smallest price increment the scale should resolve. One thousandth of the
+ * data span, snapped down to a power of ten — coarse enough to stay stable,
+ * fine enough not to cap the tick step the way a hardcoded `0.01` does on
+ * narrow ratio charts.
+ */
+export declare function pickMinMove(range: number): number;
+/**
+ * Tick step lightweight-charts would pick for this visible range.
+ */
+export declare function pickTickSpan({ min, max, scaleHeightPx, fontSizePx, tickMarkDensity, minMove, }: PickTickSpanArgs): number;
+/**
+ * Expand `[min, max]` onto the tick grid so both edges are labelled, matching
+ * the step the library will use once pixel edge-padding is applied.
+ */
+export declare function niceAxisRange({ min: rawMin, max: rawMax, floor, scaleHeightPx, fontSizePx, tickMarkDensity, minMove: minMoveArg, edgePaddingPx, edgePaddingTopPx, }: NiceAxisRangeArgs): NiceAxisRange;

package/dist/types/components/head-cell/head-cell.d.ts

@@ -70,39 +70,3 @@ export interface HeadCellProps {
  * ```
  */
 export declare function HeadCell({ title, tip, arrowPosition, sortDirection, sortField, sortTip, onSort, className, }: HeadCellProps): React.ReactElement;
-export interface SimpleHeadCellProps {
-    /**
-     * Title to display in the header cell
-     */
-    title: React.ReactNode;
-    /**
-     * Help tip to display next to title
-     */
-    tip?: React.ReactNode;
-    /**
-     * Additional className
-     */
-    className?: string;
-}
-/**
- * SimpleHeadCell — simple table header cell without sorting.
- *
- * @usage
- * Use SimpleHeadCell in table headers when you don't need sorting:
- * - Non-sortable columns
- * - Static headers
- * - Headers with only help tips
- *
- * @example
- * ```tsx
- * // Basic header
- * <SimpleHeadCell title="Status" />
- *
- * // With help tip
- * <SimpleHeadCell
- *   title="Health Factor"
- *   tip="Ratio of collateral value to borrowed value"
- * />
- * ```
- */
-export declare function SimpleHeadCell({ title, tip, className, }: SimpleHeadCellProps): React.ReactElement;

package/dist/types/components/head-cell/index.d.ts

@@ -1 +1 @@
-export { type ArrowPosition, HeadCell, type HeadCellProps, SimpleHeadCell, type SimpleHeadCellProps, type SortDirection, } from './head-cell';
+export * from './head-cell';

package/dist/types/components/health-factor/health-factor.d.ts

@@ -1,13 +1,6 @@
+import { HFZones } from './zones';
 import type * as React from "react";
-export type HFZones = "good" | "medium" | "bad" | "critical" | "liquidation";
-export declare const GOOD_HF = 15000;
-export declare const BAD_HF = 11000;
-/**
- * Determines the health factor zone based on the value
- * @param hf - Health factor value in basis points (e.g., 15000 for 1.5)
- * @returns The health factor zone or undefined
- */
-export declare const getHFZones: (hf: number | bigint | undefined) => HFZones | undefined;
+export type { HFZones };
 export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Health factor value in basis points (e.g. 15000 = 1.5, 10000 = 1.0). */
     value: number | bigint;
@@ -23,6 +16,15 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
      * @default "color"
      */
     zoneType?: "color" | "bars" | "dot";
+    /**
+     * Marks the figure as projected rather than measured, with a leading `≈`.
+     *
+     * Drawn here, inside the zone-colored span, because the symbol belongs to the
+     * number: a caller placing it beside this component leaves it uncolored while
+     * the value it qualifies is red. Suppressed on a zero debt, where there is no
+     * factor to approximate — only "N/A".
+     */
+    approximate?: boolean;
 }
 /**
  * HealthFactor — primitive under {@link HealthFactorBlock} (zones / bars / dot).
@@ -41,4 +43,4 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
  * <HealthFactor value={15000} debt={0n} />  // "N/A"
  * ```
  */
-export declare function HealthFactor({ value, debt, decimals, zone, zoneType, className, ...props }: HealthFactorProps): import("react/jsx-runtime").JSX.Element;
+export declare function HealthFactor({ value, debt, decimals, zone, zoneType, approximate, className, ...props }: HealthFactorProps): React.JSX.Element;

package/dist/types/components/health-factor/zones.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The health-factor zones a value can fall into. Its own module: HealthFactor
+ * renders them and StatusBars colours by them, and naming the type from either
+ * component would close a cycle between the two.
+ */
+export type HFZones = "good" | "medium" | "bad" | "critical" | "liquidation";