@agent-factory-platform/ui-kit 0.6.0 → 0.7.1

package/README.md

@@ -14,6 +14,31 @@ Use the exact Agent Factory version across packages in one application.
 
 This package owns reusable, business-free infrastructure and lifecycle contracts. Product prompts, domain tools, policies, credentials, data, and deployment configuration remain in the consuming application.
 
+The package root exports `OhlcChart`, `SignedAreaChart`, `MultiLineChart`,
+`TimeBarChart`, `TimeComboChart`, `DepthChart`, `DivergingBarChart`,
+`DualAxisLineChart`, `DualAxisBarChart`, `GroupedBarChart`, and `WeightedHeatmap`.
+Hosts supply samples, labels, formatting, links, event content, and domain field
+mapping. The package does not fetch data, calculate strategies, or submit orders.
+
+`readChartPalette` and `observeChartPalette` bridge semantic CSS roles to canvas
+engines. Pass the chart's element for scoped themes; dispose the returned observer
+when the chart unmounts. `ChartEngineThemeAdapters` supplies theme configuration
+for Lightweight Charts, TradingView, ECharts, and KLineCharts. OHLC rendering uses
+Lightweight Charts and keeps its attribution visible.
+
+`WorkspaceGrid` owns panel movement, resize, keyboard interaction and optional
+layout persistence. `DataTable` owns sorting, paired column resize, optional
+leading-column pinning and row activation. `CalendarPeriodNavigator` composes
+existing date/tabs controls; hosts own date arithmetic and navigation state.
+
+OHLC timestamps are milliseconds, strictly increasing at second precision;
+invalid OHLC bounds, nonfinite values, negative volume and precision outside
+0–12 are rejected before engine dispatch. Independent line series require unique
+IDs other than reserved `timestamp`/`value` and prototype keys. `TimeBarChart`
+is for nonnegative measurements; use `TimeComboChart` for signed bars.
+The Y-axis gutter is capped at 120 pixels: use a compact formatter for longer
+labels. Table pinning supports the leading identity column only.
+
 ## Documentation
 
 API and package documentation: [https://www.npmjs.com/package/@agent-factory-platform/ui-kit](https://www.npmjs.com/package/@agent-factory-platform/ui-kit)

package/dist/charts/adapter.d.ts

@@ -0,0 +1,165 @@
+export interface ChartPalette {
+    mode?: "light" | "dark";
+    font?: string;
+    canvas: string;
+    surface: string;
+    text: string;
+    mutedText: string;
+    grid: string;
+    axis: string;
+    accent: string;
+    event: string;
+    comparison: string;
+    up: string;
+    down: string;
+}
+export interface ChartEngineAdapter<Snapshot, Update = Snapshot, Capture = Blob> {
+    mount(container: HTMLElement): void | Promise<void>;
+    applyTheme(palette: ChartPalette): void | Promise<void>;
+    applyLocale(locale: string): void | Promise<void>;
+    applyPrecision(precision: {
+        price: number;
+        size: number;
+    }): void | Promise<void>;
+    setSnapshot(snapshot: Snapshot): void | Promise<void>;
+    update(update: Update): void | Promise<void>;
+    resize(width: number, height: number): void | Promise<void>;
+    capture(): Capture | Promise<Capture>;
+    dispose(): void | Promise<void>;
+}
+export declare function readChartPalette(root?: Element): ChartPalette;
+export declare function observeChartPalette(apply: (palette: ChartPalette) => void, root?: HTMLElement): () => void;
+export declare function tradingViewTheme(palette: ChartPalette): {
+    readonly theme: "dark" | "light";
+    readonly overrides: {
+        readonly "paneProperties.background": string;
+        readonly "paneProperties.vertGridProperties.color": string;
+        readonly "paneProperties.horzGridProperties.color": string;
+        readonly "scalesProperties.textColor": string;
+        readonly "scalesProperties.lineColor": string;
+        readonly "mainSeriesProperties.candleStyle.upColor": string;
+        readonly "mainSeriesProperties.candleStyle.downColor": string;
+        readonly "mainSeriesProperties.candleStyle.wickUpColor": string;
+        readonly "mainSeriesProperties.candleStyle.wickDownColor": string;
+    };
+};
+export declare function lightweightChartsTheme(palette: ChartPalette): {
+    readonly layout: {
+        readonly background: {
+            readonly color: string;
+        };
+        readonly textColor: string;
+    };
+    readonly grid: {
+        readonly vertLines: {
+            readonly color: string;
+        };
+        readonly horzLines: {
+            readonly color: string;
+        };
+    };
+    readonly rightPriceScale: {
+        readonly borderColor: string;
+    };
+    readonly timeScale: {
+        readonly borderColor: string;
+    };
+    readonly crosshair: {
+        readonly vertLine: {
+            readonly color: string;
+        };
+        readonly horzLine: {
+            readonly color: string;
+        };
+    };
+};
+export declare function klineChartsTheme(palette: ChartPalette): {
+    readonly grid: {
+        readonly horizontal: {
+            readonly color: string;
+        };
+        readonly vertical: {
+            readonly color: string;
+        };
+    };
+    readonly candle: {
+        readonly bar: {
+            readonly upColor: string;
+            readonly downColor: string;
+            readonly noChangeColor: string;
+            readonly upBorderColor: string;
+            readonly downBorderColor: string;
+            readonly upWickColor: string;
+            readonly downWickColor: string;
+        };
+        readonly tooltip: {
+            readonly text: {
+                readonly color: string;
+            };
+            readonly rect: {
+                readonly color: string;
+            };
+        };
+    };
+    readonly xAxis: {
+        readonly axisLine: {
+            readonly color: string;
+        };
+        readonly tickText: {
+            readonly color: string;
+        };
+    };
+    readonly yAxis: {
+        readonly axisLine: {
+            readonly color: string;
+        };
+        readonly tickText: {
+            readonly color: string;
+        };
+    };
+};
+export declare function echartsTheme(palette: ChartPalette): {
+    readonly backgroundColor: string;
+    readonly textStyle: {
+        readonly color: string;
+        readonly fontFamily: string;
+    };
+    readonly color: readonly [string, string, string, string];
+    readonly categoryAxis: {
+        readonly axisLine: {
+            readonly lineStyle: {
+                readonly color: string;
+            };
+        };
+        readonly axisLabel: {
+            readonly color: string;
+        };
+        readonly splitLine: {
+            readonly lineStyle: {
+                readonly color: string;
+            };
+        };
+    };
+    readonly valueAxis: {
+        readonly axisLine: {
+            readonly lineStyle: {
+                readonly color: string;
+            };
+        };
+        readonly axisLabel: {
+            readonly color: string;
+        };
+        readonly splitLine: {
+            readonly lineStyle: {
+                readonly color: string;
+            };
+        };
+    };
+};
+/** Discoverable adapter registry for docs, integration tests, and downstream engines. */
+export declare const ChartEngineThemeAdapters: {
+    readonly tradingView: typeof tradingViewTheme;
+    readonly lightweightCharts: typeof lightweightChartsTheme;
+    readonly klineCharts: typeof klineChartsTheme;
+    readonly echarts: typeof echartsTheme;
+};

package/dist/charts/chart-tooltip.d.ts

@@ -7,6 +7,6 @@ export declare function ChartTooltip({ active, payload, label, valueFormat, labe
     active?: boolean;
     payload?: ChartTooltipItem[];
     label?: string | number;
-    valueFormat?: (value: string | number) => string;
+    valueFormat?: (value: string | number, name?: string | number) => string;
     labelFormat?: (value: string | number) => string;
 }): import("react").JSX.Element | null;

package/dist/charts/event-markers-primitive.d.ts

@@ -0,0 +1,40 @@
+import type { IPrimitivePaneView, ISeriesPrimitive, PrimitiveHoveredItem, SeriesAttachedParameter, Time, UTCTimestamp } from "lightweight-charts";
+import type { OhlcChartMarker } from "./ohlc";
+export declare const CHART_EVENT_MARKER_RADIUS = 14;
+export interface TradingViewEventMarkerModel {
+    id: string;
+    time: UTCTimestamp;
+    color: string;
+    label: string;
+}
+interface EventMarkerGeometry extends TradingViewEventMarkerModel {
+    x: number;
+    y: number;
+}
+interface EventMarkerPalette {
+    font?: string;
+    interior: string;
+    text: string;
+    event: string;
+}
+export declare function buildTradingViewEventMarkers(markers: readonly OhlcChartMarker[], fallbackColor: string): TradingViewEventMarkerModel[];
+export declare function eventMarkerHitDistance(x: number, y: number, markerX: number, markerY: number): number | null;
+export declare class TradingViewEventMarkersPrimitive implements ISeriesPrimitive<Time> {
+    private chart;
+    private requestUpdate;
+    private readonly sourceMarkers;
+    private markers;
+    private geometry;
+    private readonly view;
+    palette: EventMarkerPalette;
+    constructor(markers: readonly OhlcChartMarker[], palette: EventMarkerPalette);
+    attached(param: SeriesAttachedParameter<Time>): void;
+    detached(): void;
+    paneViews(): readonly IPrimitivePaneView[];
+    updateAllViews(): void;
+    setPalette(palette: EventMarkerPalette): void;
+    visibleMarkers(y: number): EventMarkerGeometry[];
+    setGeometry(geometry: EventMarkerGeometry[]): void;
+    hitTest(x: number, y: number): PrimitiveHoveredItem | null;
+}
+export {};

package/dist/charts/index.d.ts

@@ -1,2 +1,6 @@
 export { AreaTrendChart, BarChart, HistogramChart, PieChart, RadarChart, RadialGaugeChart, Sparkline, type BarPoint, type PieSlice, type RadarPoint, type SparklineTone, type TrendPoint } from "./basic";
 export { CATEGORICAL, CHART, axisProps, gridProps } from "./theme";
+export { DepthChart, DivergingBarChart, DualAxisBarChart, DualAxisLineChart, GroupedBarChart, SignedAreaChart, MultiLineChart, TimeBarChart, WeightedHeatmap, buildDepthSeries, chartYAxisWidth, type DepthLevel, type DepthPoint, type DivergingBarChartProps, type DivergingBarPoint, type DualAxisChartProps, type DualAxisPoint, type GroupedBarChartProps, type SignedAreaChartProps, type TimeLineSeries, type TimeSeriesMarker, type MultiLineChartProps, type TimeValuePoint, type TimeBarChartProps, type WeightedHeatmapItem, type WeightedHeatmapProps } from "./series";
+export { OhlcChart, type OhlcChartMarker, type OhlcChartProps, type CandlePoint } from "./ohlc";
+export { ChartEngineThemeAdapters, echartsTheme, klineChartsTheme, lightweightChartsTheme, observeChartPalette, readChartPalette, tradingViewTheme, type ChartEngineAdapter, type ChartPalette } from "./adapter";
+export { TimeComboChart, type TimeComboChartProps, type TimeComboPoint, type TimeComboSeries } from "./time-combo";

package/dist/charts/ohlc.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+export interface CandlePoint {
+    time: number;
+    label: string;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume: number;
+}
+export interface OhlcChartMarker {
+    id: string;
+    time: number;
+    color?: string;
+    label?: string;
+    ariaLabel: string;
+    popoverTitle?: string;
+    popoverCloseLabel?: string;
+    popover?: ReactNode;
+}
+export interface OhlcChartProps {
+    data: CandlePoint[];
+    markers?: readonly OhlcChartMarker[];
+    onMarkerClick?: (marker: OhlcChartMarker) => void;
+    height?: number | string;
+    valueFormat?: (value: number) => string;
+    locale?: string;
+    pricePrecision?: number;
+    showVolume?: boolean;
+    transparent?: boolean;
+    ariaLabel?: string;
+    className?: string;
+}
+/** The engine requires strictly increasing second timestamps and finite OHLC values. */
+export declare function validateOhlcData(data: readonly CandlePoint[], precision: number): void;
+export declare function OhlcChart({ data, markers, onMarkerClick, height, valueFormat, locale, pricePrecision, showVolume, transparent, ariaLabel, className, }: OhlcChartProps): import("react").JSX.Element;

package/dist/charts/series.d.ts

@@ -0,0 +1,181 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface DepthLevel {
+    price: number;
+    size: number;
+}
+export interface DepthPoint {
+    price: number;
+    bid?: number;
+    ask?: number;
+}
+export declare function buildDepthSeries(bids: DepthLevel[], asks: DepthLevel[], mid?: number): {
+    center: number;
+    bestBid: number;
+    bestAsk: number;
+    data: DepthPoint[];
+    domain: [number, number];
+    bidTotal: number;
+    askTotal: number;
+    spread: number;
+    bidWalls: (DepthPoint & {
+        size: number;
+    })[];
+    askWalls: (DepthPoint & {
+        size: number;
+    })[];
+} | null;
+export declare function DepthChart({ bids, asks, mid, height, valueFormat, sizeFormat, bidLabel, askLabel, spreadLabel, ariaLabel }: {
+    bids: DepthLevel[];
+    asks: DepthLevel[];
+    mid?: number;
+    height?: number | `${number}%`;
+    valueFormat?: (value: number) => string;
+    sizeFormat?: (value: number) => string;
+    bidLabel?: string;
+    askLabel?: string;
+    spreadLabel?: string;
+    ariaLabel?: string;
+}): import("react").JSX.Element;
+export interface DivergingBarPoint {
+    label: string;
+    positive: number;
+    negative: number;
+}
+export interface DivergingBarChartProps {
+    data: DivergingBarPoint[];
+    positiveLabel: string;
+    negativeLabel: string;
+    positiveTone?: "up" | "down" | "blue";
+    negativeTone?: "up" | "down" | "blue";
+    orientation?: "vertical" | "horizontal";
+    numericAxis?: boolean;
+    reference?: {
+        value: string | number;
+        label: string;
+    };
+    height?: number;
+    axisFormat?: (value: string | number) => string;
+    valueFormat?: (value: string | number) => string;
+    ariaLabel?: string;
+}
+/** Mirrored positive and negative distributions around a fixed zero baseline. */
+export declare function DivergingBarChart({ data, positiveLabel, negativeLabel, positiveTone, negativeTone, orientation, numericAxis, reference, height, axisFormat, valueFormat, ariaLabel, }: DivergingBarChartProps): import("react").JSX.Element;
+export interface DualAxisPoint {
+    label: string | number;
+    primary: number;
+    secondary: number;
+}
+export interface GroupedBarChartProps {
+    data: DualAxisPoint[];
+    primaryLabel: string;
+    secondaryLabel: string;
+    valueFormat?: (value: string | number) => string;
+    labelFormat?: (value: string | number) => string;
+    height?: number;
+    ariaLabel?: string;
+}
+export interface DualAxisChartProps {
+    data: DualAxisPoint[];
+    primaryLabel: string;
+    secondaryLabel: string;
+    primaryFormat?: (value: string | number) => string;
+    secondaryFormat?: (value: string | number) => string;
+    labelFormat?: (value: string | number) => string;
+    height?: number;
+    ariaLabel?: string;
+}
+/** Primary area plus secondary line on independent value axes. */
+export declare function DualAxisLineChart({ data, primaryLabel, secondaryLabel, primaryFormat, secondaryFormat, labelFormat, height, ariaLabel }: DualAxisChartProps): import("react").JSX.Element;
+/** Categorical primary and secondary bars on independent value axes. */
+export declare function DualAxisBarChart({ data, primaryLabel, secondaryLabel, primaryFormat, secondaryFormat, labelFormat, height, ariaLabel }: DualAxisChartProps): import("react").JSX.Element;
+/** Same-unit categorical comparison, such as two measurements by category. */
+export declare function GroupedBarChart({ data, primaryLabel, secondaryLabel, valueFormat, labelFormat, height, ariaLabel }: GroupedBarChartProps): import("react").JSX.Element;
+export interface TimeValuePoint {
+    timestamp: number;
+    value: number;
+}
+export interface TimeSeriesMarker {
+    id: string;
+    timestamp: number;
+    value: number;
+    tone: "up" | "down";
+}
+export interface SignedAreaChartProps {
+    data: TimeValuePoint[];
+    height?: number;
+    name?: string;
+    valueFormat?: (value: string | number) => string;
+    timestampFormat?: (value: string | number) => string;
+    tooltipContent?: ReactElement;
+    markers?: TimeSeriesMarker[];
+    tone?: "signed" | "blue" | "up" | "warning";
+    referenceValue?: number;
+    /** Include zero in the value range; otherwise fit the data range. */
+    includeZero?: boolean;
+    showLastDot?: boolean;
+    onActiveValueChange?: (value: number | null) => void;
+    testId?: string;
+    ariaLabel?: string;
+}
+export interface TimeLineSeries {
+    id: string;
+    name: string;
+    data: TimeValuePoint[];
+    color?: string;
+}
+export interface MultiLineChartProps {
+    series: TimeLineSeries[];
+    height?: number;
+    valueFormat?: (value: string | number) => string;
+    timestampFormat?: (value: string | number) => string;
+    tooltipContent?: ReactElement;
+    markers?: TimeSeriesMarker[];
+    includeZero?: boolean;
+    onActiveValueChange?: (value: number | null) => void;
+    testId?: string;
+    ariaLabel?: string;
+}
+/** Estimate the gutter for formatted Y ticks. */
+export declare function chartYAxisWidth(domain: [number, number], valueFormat: (value: string | number) => string): number;
+export declare function SignedAreaChart({ data, height, name, valueFormat, timestampFormat, tooltipContent, markers, tone, referenceValue, includeZero, showLastDot, onActiveValueChange, testId, ariaLabel, }: SignedAreaChartProps): import("react").JSX.Element;
+export declare function alignTimeLineSeries(series: TimeLineSeries[], fillBeforeStart?: boolean): Record<string, number>[];
+/** Multiple independent value series on one shared time/value axis. */
+export declare function MultiLineChart({ series, height, valueFormat, timestampFormat, tooltipContent, markers, includeZero, onActiveValueChange, testId, ariaLabel, }: MultiLineChartProps): import("react").JSX.Element;
+export interface TimeBarChartProps {
+    data: TimeValuePoint[];
+    height?: number;
+    name?: string;
+    valueFormat?: (value: string | number) => string;
+    timestampFormat?: (value: string | number) => string;
+    tooltipContent?: ReactElement;
+    onActiveValueChange?: (value: number | null) => void;
+    testId?: string;
+    ariaLabel?: string;
+}
+/** Time-series bar chart with hatch texture (nonnegative measurements). Y ≥ 0. */
+export declare function TimeBarChart({ data, height, name, valueFormat, timestampFormat, tooltipContent, onActiveValueChange, testId, ariaLabel, }: TimeBarChartProps): import("react").JSX.Element;
+export interface WeightedHeatmapItem {
+    [key: string]: string | number;
+    name: string;
+    value: number;
+    change: number;
+}
+export interface WeightedHeatmapProps {
+    data: WeightedHeatmapItem[];
+    height?: number | `${number}%`;
+    ariaLabel?: string;
+    /** Formats the area-driving value shown inside sufficiently large cells. */
+    valueFormat?: (value: number) => string;
+    /** Formats the signed color-driving value shown inside cells. */
+    changeFormat?: (value: number) => string;
+    /** Absolute signed value that reaches maximum color intensity. */
+    intensityMax?: number;
+    valueLabel?: string;
+    changeLabel?: string;
+    /** Renders an icon at the size selected for the current cell or tooltip. */
+    renderIcon?: (item: WeightedHeatmapItem, size: number) => ReactNode;
+    hrefForItem?: (item: WeightedHeatmapItem) => string | undefined;
+    itemAriaLabel?: (item: WeightedHeatmapItem) => string;
+}
+/** Area encodes magnitude; color direction and intensity encode a signed secondary metric. */
+export declare function WeightedHeatmap({ data, height, ariaLabel, valueFormat, changeFormat, intensityMax, valueLabel, changeLabel, renderIcon, hrefForItem, itemAriaLabel }: WeightedHeatmapProps): import("react").JSX.Element;

package/dist/charts/theme.d.ts

@@ -12,6 +12,7 @@ export declare const CHART: {
     readonly surface: "var(--color-surface-raised)";
     readonly up: "var(--color-up)";
     readonly down: "var(--color-down)";
+    readonly warning: "var(--color-warning)";
     readonly apricot: "var(--color-apricot-wash)";
     readonly sky: "var(--color-sky-wash)";
     readonly white: "var(--color-surface-raised)";

package/dist/charts/time-combo.d.ts

@@ -0,0 +1,22 @@
+export interface TimeComboPoint {
+    timestamp: number;
+    [key: string]: number;
+}
+export interface TimeComboSeries {
+    id: string;
+    name: string;
+    kind: "line" | "bar";
+    color?: string;
+    opacity?: number;
+    dashed?: boolean;
+}
+export interface TimeComboChartProps {
+    data: TimeComboPoint[];
+    series: TimeComboSeries[];
+    height?: number;
+    timestampFormat?: (value: string | number) => string;
+    valueFormat?: (value: string | number) => string;
+    ariaLabel?: string;
+}
+/** Lines and bars share one time/value axis; field meaning belongs to the caller. */
+export declare function TimeComboChart({ data, series, height, timestampFormat, valueFormat, ariaLabel }: TimeComboChartProps): import("react").JSX.Element;