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

package/README.md

@@ -12,6 +12,24 @@ Use the exact Agent Factory version across packages in one application.
 
 ## Scope
 
+The public root exports retain module boundaries: importing shell components
+does not force engines from a separately lazy-loaded chart into the initial
+bundle. Continue importing the public package; private `dist` paths are not API.
+
+`TagList` defaults to pills. Use `variant="dot"` with `toneForItem` returning
+`up | down | accent | warning | muted` for a compact semantic row; the caller
+supplies `labelForItem`, while `limit` and the overflow count remain shared.
+
+`OhlcChart.annotations` accepts neutral `OhlcAnnotation` levels (`price`), bands
+(`from`/`to` prices, optional opacity), and segments (`from`/`to` time-price
+points). Levels/segments accept `lineStyle` and widths 1–4; callers supply colors
+and labels. Times are epoch milliseconds and non-bar times use the engine's
+nearest bar. Annotation prices participate in autoscaling; updating annotations
+preserves the chart instance. `markers[].price` optionally anchors a marker at
+its price instead of the bottom event track, including its keyboard target.
+Both lists are limited to 256 entries; geometry must be finite and marker IDs
+unique. The existing engine owns zoom, resize, theme, drawing and cleanup.
+
 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`,
@@ -42,3 +60,7 @@ 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)
+
+`PieChart` accepts per-slice `color` and `opacity` overrides. Omitted fields keep
+the categorical palette and opacity 1; opacity 0 remains transparent. These are
+presentation fields, so consumers can preserve their own semantic color mapping.

package/dist/charts/adapter.js

@@ -0,0 +1,111 @@
+const c = {
+  canvas: "--color-surface-canvas",
+  surface: "--color-surface-raised",
+  text: "--color-ink",
+  mutedText: "--color-graphite",
+  grid: "--color-chart-grid",
+  axis: "--color-chart-axis",
+  accent: "--color-rust",
+  event: "--color-chart-event",
+  comparison: "--color-data-blue",
+  up: "--color-up",
+  down: "--color-down"
+};
+function s(o = document.documentElement) {
+  const r = getComputedStyle(o);
+  return {
+    ...Object.fromEntries(Object.entries(c).map(([e, i]) => [e, r.getPropertyValue(i).trim()])),
+    mode: r.colorScheme === "dark" ? "dark" : r.colorScheme === "light" ? "light" : void 0,
+    font: r.fontFamily
+  };
+}
+function m(o, r = document.documentElement) {
+  const e = () => o(s(r));
+  e();
+  const i = new MutationObserver(e);
+  for (let n = r; n; n = n.parentElement)
+    i.observe(n, { attributes: !0, attributeFilter: ["class", "style", "data-theme"] });
+  return () => i.disconnect();
+}
+function t(o) {
+  const r = /^#([0-9a-f]{6})$/i.exec(o);
+  if (!r) return !1;
+  const e = [0, 2, 4].map((i) => Number.parseInt(r[1].slice(i, i + 2), 16));
+  return e[0] * 0.2126 + e[1] * 0.7152 + e[2] * 0.0722 < 128;
+}
+function a(o) {
+  return {
+    theme: o.mode ?? (t(o.canvas) ? "dark" : "light"),
+    overrides: {
+      "paneProperties.background": o.canvas,
+      "paneProperties.vertGridProperties.color": o.grid,
+      "paneProperties.horzGridProperties.color": o.grid,
+      "scalesProperties.textColor": o.mutedText,
+      "scalesProperties.lineColor": o.axis,
+      "mainSeriesProperties.candleStyle.upColor": o.up,
+      "mainSeriesProperties.candleStyle.downColor": o.down,
+      "mainSeriesProperties.candleStyle.wickUpColor": o.up,
+      "mainSeriesProperties.candleStyle.wickDownColor": o.down
+    }
+  };
+}
+function l(o) {
+  return {
+    layout: { background: { color: o.canvas }, textColor: o.mutedText },
+    grid: { vertLines: { color: o.grid }, horzLines: { color: o.grid } },
+    rightPriceScale: { borderColor: o.axis },
+    timeScale: { borderColor: o.axis },
+    crosshair: { vertLine: { color: o.axis }, horzLine: { color: o.axis } }
+  };
+}
+function d(o) {
+  return {
+    grid: { horizontal: { color: o.grid }, vertical: { color: o.grid } },
+    candle: {
+      bar: {
+        upColor: o.up,
+        downColor: o.down,
+        noChangeColor: o.mutedText,
+        upBorderColor: o.up,
+        downBorderColor: o.down,
+        upWickColor: o.up,
+        downWickColor: o.down
+      },
+      tooltip: { text: { color: o.text }, rect: { color: o.surface } }
+    },
+    xAxis: { axisLine: { color: o.axis }, tickText: { color: o.mutedText } },
+    yAxis: { axisLine: { color: o.axis }, tickText: { color: o.mutedText } }
+  };
+}
+function u(o) {
+  return {
+    backgroundColor: o.canvas,
+    textStyle: { color: o.text, fontFamily: o.font || "system-ui" },
+    color: [o.accent, o.comparison, o.up, o.down],
+    categoryAxis: {
+      axisLine: { lineStyle: { color: o.axis } },
+      axisLabel: { color: o.mutedText },
+      splitLine: { lineStyle: { color: o.grid } }
+    },
+    valueAxis: {
+      axisLine: { lineStyle: { color: o.axis } },
+      axisLabel: { color: o.mutedText },
+      splitLine: { lineStyle: { color: o.grid } }
+    }
+  };
+}
+const x = {
+  tradingView: a,
+  lightweightCharts: l,
+  klineCharts: d,
+  echarts: u
+};
+export {
+  x as ChartEngineThemeAdapters,
+  u as echartsTheme,
+  d as klineChartsTheme,
+  l as lightweightChartsTheme,
+  m as observeChartPalette,
+  s as readChartPalette,
+  a as tradingViewTheme
+};

package/dist/charts/basic.d.ts

@@ -10,6 +10,8 @@ export interface BarPoint {
 export interface PieSlice {
     name: string;
     value: number;
+    color?: string;
+    opacity?: number;
 }
 export interface RadarPoint {
     label: string;

package/dist/charts/basic.js

@@ -0,0 +1,115 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useId as b } from "react";
+import { ResponsiveContainer as c, AreaChart as v, CartesianGrid as x, XAxis as C, YAxis as k, Tooltip as h, Area as m, BarChart as O, Bar as P, Cell as R, PieChart as S, Legend as B, Pie as N, RadarChart as $, PolarGrid as I, PolarAngleAxis as A, PolarRadiusAxis as G, Radar as y, RadialBarChart as L, RadialBar as T } from "recharts";
+import { ChartTooltip as u } from "./chart-tooltip.js";
+import { CHART as t, gridProps as w, axisProps as p, CATEGORICAL as g } from "./theme.js";
+function H({ data: a, height: i = 240, valueFormat: r = String, showPrevious: n = !0, ariaLabel: s = "Area trend chart" }) {
+  const o = b().replace(/:/g, "");
+  return /* @__PURE__ */ e(c, { width: "100%", height: i, children: /* @__PURE__ */ l(v, { data: a, margin: { top: 8, right: 8, left: 0, bottom: 0 }, accessibilityLayer: !1, tabIndex: -1, role: "img", "aria-label": s, children: [
+    /* @__PURE__ */ l("defs", { children: [
+      /* @__PURE__ */ l("linearGradient", { id: `${o}-current`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t.blue, stopOpacity: 0.26 }),
+        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t.blue, stopOpacity: 0 })
+      ] }),
+      /* @__PURE__ */ l("linearGradient", { id: `${o}-previous`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t.rust, stopOpacity: 0.18 }),
+        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t.rust, stopOpacity: 0 })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(x, { ...w }),
+    /* @__PURE__ */ e(C, { dataKey: "label", ...p }),
+    /* @__PURE__ */ e(k, { ...p, width: 52, tickFormatter: r }),
+    /* @__PURE__ */ e(h, { cursor: { stroke: t.dove }, content: /* @__PURE__ */ e(u, { valueFormat: r }) }),
+    n && /* @__PURE__ */ e(m, { type: "monotone", dataKey: "previous", name: "Previous", stroke: t.rust, strokeWidth: 1.5, fill: `url(#${o}-previous)`, dot: !1 }),
+    /* @__PURE__ */ e(m, { type: "monotone", dataKey: "current", name: "Current", stroke: t.blue, strokeWidth: 2, fill: `url(#${o}-current)`, dot: !1 })
+  ] }) });
+}
+function W({ data: a, height: i = 240, valueFormat: r = String, signColor: n = !1, ariaLabel: s = "Bar chart" }) {
+  return /* @__PURE__ */ e(c, { width: "100%", height: i, children: /* @__PURE__ */ l(O, { data: a, margin: { top: 8, right: 8, left: 0, bottom: 0 }, accessibilityLayer: !1, tabIndex: -1, role: "img", "aria-label": s, children: [
+    /* @__PURE__ */ e(x, { ...w }),
+    /* @__PURE__ */ e(C, { dataKey: "label", ...p }),
+    /* @__PURE__ */ e(k, { ...p, width: 52, tickFormatter: r }),
+    /* @__PURE__ */ e(h, { cursor: { fill: t.dove, fillOpacity: 0.12 }, content: /* @__PURE__ */ e(u, { valueFormat: r }) }),
+    /* @__PURE__ */ e(P, { dataKey: "value", name: "Value", maxBarSize: 36, radius: [4, 4, 0, 0], children: a.map((o) => /* @__PURE__ */ e(R, { fill: n ? o.value >= 0 ? t.up : t.down : t.blue }, o.label)) })
+  ] }) });
+}
+function V(a) {
+  return /* @__PURE__ */ e(W, { ...a, signColor: !0 });
+}
+function E({ data: a, height: i = 220, donut: r = !1, centerLabel: n, valueFormat: s = String, ariaLabel: o = "Pie chart" }) {
+  return /* @__PURE__ */ l("div", { className: "relative", style: { height: i }, children: [
+    /* @__PURE__ */ e(c, { width: "100%", height: "100%", children: /* @__PURE__ */ l(S, { accessibilityLayer: !1, tabIndex: -1, role: "img", "aria-label": o, children: [
+      /* @__PURE__ */ e(h, { content: /* @__PURE__ */ e(u, { valueFormat: s }) }),
+      /* @__PURE__ */ e(B, { iconType: "circle", wrapperStyle: { color: t.graphite, fontFamily: t.font, fontSize: 12 } }),
+      /* @__PURE__ */ e(N, { data: a, dataKey: "value", nameKey: "name", innerRadius: r ? "54%" : 0, outerRadius: "78%", paddingAngle: r ? 2 : 0, cornerRadius: r ? 4 : 0, stroke: t.canvas, strokeWidth: 2, children: a.map((d, f) => /* @__PURE__ */ e(R, { fill: d.color ?? g[f % g.length], fillOpacity: d.opacity ?? 1 }, d.name)) })
+    ] }) }),
+    r && n && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-0 grid place-items-center font-product text-caption font-[600] text-ink", children: n })
+  ] });
+}
+function X({ data: a, height: i = 260, ariaLabel: r = "Radar chart" }) {
+  return /* @__PURE__ */ e(c, { width: "100%", height: i, children: /* @__PURE__ */ l($, { data: a, outerRadius: "72%", accessibilityLayer: !1, tabIndex: -1, role: "img", "aria-label": r, children: [
+    /* @__PURE__ */ e(I, { stroke: t.grid }),
+    /* @__PURE__ */ e(A, { dataKey: "label", tick: { fill: t.graphite, fontFamily: t.font, fontSize: 11 } }),
+    /* @__PURE__ */ e(G, { tick: !1, axisLine: !1 }),
+    /* @__PURE__ */ e(h, { content: /* @__PURE__ */ e(u, {}) }),
+    /* @__PURE__ */ e(y, { name: "Current", dataKey: "current", stroke: t.blue, fill: t.blue, fillOpacity: 0.2 }),
+    /* @__PURE__ */ e(y, { name: "Previous", dataKey: "previous", stroke: t.rust, fill: t.rust, fillOpacity: 0.1 })
+  ] }) });
+}
+function Y({ value: a, maximum: i = 100, label: r, height: n = 220 }) {
+  const s = Math.min(i, Math.max(0, a));
+  return /* @__PURE__ */ l("div", { className: "relative", style: { height: n }, children: [
+    /* @__PURE__ */ e(c, { width: "100%", height: "100%", children: /* @__PURE__ */ l(L, { data: [{ name: r, value: s, fill: t.rust }], startAngle: 210, endAngle: -30, innerRadius: "64%", outerRadius: "92%", barSize: 16, accessibilityLayer: !1, tabIndex: -1, role: "img", "aria-label": r, children: [
+      /* @__PURE__ */ e(A, { type: "number", domain: [0, i], tick: !1 }),
+      /* @__PURE__ */ e(T, { dataKey: "value", background: { fill: t.grid }, cornerRadius: 8 })
+    ] }) }),
+    /* @__PURE__ */ l("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center pt-4", children: [
+      /* @__PURE__ */ e("strong", { className: "font-data text-heading-sm tabular-nums text-ink", children: s }),
+      /* @__PURE__ */ e("span", { className: "text-caption text-graphite", children: r })
+    ] })
+  ] });
+}
+function q({
+  data: a,
+  tone: i = "up",
+  height: r = 40,
+  ariaLabel: n = "Value trend",
+  emptyLabel: s
+}) {
+  const o = b().replace(/:/g, ""), d = i === "blue" ? t.blue : i === "down" ? t.down : t.up;
+  return a.length < 2 ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: "pointer-events-none relative overflow-hidden rounded-md bg-fog/50",
+      style: { height: r },
+      role: "img",
+      "aria-label": s || n,
+      children: /* @__PURE__ */ e("svg", { width: "100%", height: "100%", viewBox: "0 0 120 40", preserveAspectRatio: "none", "aria-hidden": !0, className: "absolute inset-0", children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M4 22 C 30 18, 55 26, 80 20 S 110 16, 116 22",
+          fill: "none",
+          stroke: t.dove,
+          strokeWidth: 1.25,
+          strokeDasharray: "3 3",
+          strokeOpacity: 0.75
+        }
+      ) })
+    }
+  ) : /* @__PURE__ */ e("div", { className: "pointer-events-none", style: { height: r }, children: /* @__PURE__ */ e(c, { width: "100%", height: "100%", children: /* @__PURE__ */ l(v, { data: a.map((f, K) => ({ index: K, value: f })), margin: { top: 2, right: 0, left: 0, bottom: 0 }, accessibilityLayer: !1, tabIndex: -1, role: "img", "aria-label": n, children: [
+    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l("linearGradient", { id: `${o}-spark`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: d, stopOpacity: 0.25 }),
+      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: d, stopOpacity: 0 })
+    ] }) }),
+    /* @__PURE__ */ e(m, { type: "monotone", dataKey: "value", stroke: d, strokeWidth: 2, fill: `url(#${o}-spark)`, dot: !1, activeDot: !1, isAnimationActive: !1 })
+  ] }) }) });
+}
+export {
+  H as AreaTrendChart,
+  W as BarChart,
+  V as HistogramChart,
+  E as PieChart,
+  X as RadarChart,
+  Y as RadialGaugeChart,
+  q as Sparkline
+};

package/dist/charts/chart-tooltip.js

@@ -0,0 +1,21 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { CHART as c } from "./theme.js";
+function p({
+  active: s,
+  payload: n,
+  label: t,
+  valueFormat: i = String,
+  labelFormat: l = String
+}) {
+  return !s || !(n != null && n.length) ? null : /* @__PURE__ */ a("div", { role: "tooltip", className: "rounded-panel border border-border bg-surface-raised px-3 py-2 shadow-pop", style: { fontFamily: c.font }, children: [
+    t != null && /* @__PURE__ */ r("div", { className: "mb-1 text-caption text-graphite", children: l(t) }),
+    /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: n.map((e, o) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-body-sm text-ink", children: [
+      /* @__PURE__ */ r("span", { className: "size-2 rounded-indicator", style: { backgroundColor: e.color }, "aria-hidden": !0 }),
+      /* @__PURE__ */ r("span", { className: "text-graphite", children: e.name }),
+      /* @__PURE__ */ r("span", { className: "ml-auto font-data tabular-nums", children: i(e.value ?? "", e.name) })
+    ] }, `${e.name ?? "series"}-${o}`)) })
+  ] });
+}
+export {
+  p as ChartTooltip
+};

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

@@ -6,6 +6,7 @@ export interface TradingViewEventMarkerModel {
     time: UTCTimestamp;
     color: string;
     label: string;
+    price?: number;
 }
 interface EventMarkerGeometry extends TradingViewEventMarkerModel {
     x: number;
@@ -20,18 +21,26 @@ interface EventMarkerPalette {
 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 onGeometry?;
     private chart;
+    private series;
     private requestUpdate;
     private readonly sourceMarkers;
     private markers;
     private geometry;
     private readonly view;
     palette: EventMarkerPalette;
-    constructor(markers: readonly OhlcChartMarker[], palette: EventMarkerPalette);
+    constructor(markers: readonly OhlcChartMarker[], palette: EventMarkerPalette, onGeometry?: ((geometry: readonly EventMarkerGeometry[]) => void) | undefined);
     attached(param: SeriesAttachedParameter<Time>): void;
     detached(): void;
     paneViews(): readonly IPrimitivePaneView[];
     updateAllViews(): void;
+    autoscaleInfo(): {
+        priceRange: {
+            minValue: number;
+            maxValue: number;
+        };
+    } | null;
     setPalette(palette: EventMarkerPalette): void;
     visibleMarkers(y: number): EventMarkerGeometry[];
     setGeometry(geometry: EventMarkerGeometry[]): void;

package/dist/charts/event-markers-primitive.js

@@ -0,0 +1,116 @@
+var u = Object.defineProperty;
+var p = (n, t, e) => t in n ? u(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var l = (n, t, e) => p(n, typeof t != "symbol" ? t + "" : t, e);
+import { ohlcTimeCoordinate as d } from "./ohlc-annotations.js";
+const o = 14, m = 3, y = 5, M = 3;
+function f(n) {
+  return Math.floor(n / 1e3);
+}
+function c(n, t) {
+  return [...n].sort((e, i) => e.time - i.time).map((e) => {
+    var i, r;
+    return {
+      id: e.id,
+      time: f(e.time),
+      color: ((i = e.color) == null ? void 0 : i.trim()) || t,
+      label: ((r = e.label) == null ? void 0 : r.trim().slice(0, M)) || "?",
+      ...e.price === void 0 ? {} : { price: e.price }
+    };
+  });
+}
+function v(n, t, e, i) {
+  const r = Math.hypot(n - e, t - i);
+  return r <= o ? r : null;
+}
+class T {
+  constructor(t) {
+    this.primitive = t;
+  }
+  draw(t) {
+    t.useMediaCoordinateSpace(({ context: e, mediaSize: i }) => {
+      const r = i.height - o - y, a = this.primitive.visibleMarkers(r).filter((s) => s.x >= 0 && s.x <= i.width && s.y >= 0 && s.y <= i.height);
+      this.primitive.setGeometry(a), e.save(), e.textAlign = "center", e.textBaseline = "middle", e.font = `600 9px ${this.primitive.palette.font ?? "system-ui, sans-serif"}`;
+      for (const s of a)
+        e.beginPath(), e.arc(s.x, s.y, o, 0, Math.PI * 2), e.fillStyle = s.color, e.fill(), e.beginPath(), e.arc(s.x, s.y, o - m, 0, Math.PI * 2), e.fillStyle = this.primitive.palette.interior, e.fill(), e.fillStyle = this.primitive.palette.text, e.fillText(s.label, s.x, s.y + 0.5);
+      e.restore();
+    });
+  }
+}
+class E {
+  constructor(t) {
+    l(this, "paneRenderer");
+    this.paneRenderer = new T(t);
+  }
+  zOrder() {
+    return "top";
+  }
+  renderer() {
+    return this.paneRenderer;
+  }
+}
+class _ {
+  constructor(t, e, i) {
+    l(this, "chart", null);
+    l(this, "series", null);
+    l(this, "requestUpdate", null);
+    l(this, "sourceMarkers");
+    l(this, "markers", []);
+    l(this, "geometry", []);
+    l(this, "view", new E(this));
+    l(this, "palette");
+    this.onGeometry = i, this.palette = e, this.sourceMarkers = t, this.markers = c(t, e.event);
+  }
+  attached(t) {
+    this.chart = t.chart, this.series = t.series, this.requestUpdate = t.requestUpdate, t.requestUpdate();
+  }
+  detached() {
+    this.chart = null, this.series = null, this.requestUpdate = null, this.geometry = [];
+  }
+  paneViews() {
+    return [this.view];
+  }
+  updateAllViews() {
+  }
+  autoscaleInfo() {
+    const t = this.markers.flatMap((e) => e.price === void 0 ? [] : [e.price]);
+    return t.length ? { priceRange: { minValue: Math.min(...t), maxValue: Math.max(...t) } } : null;
+  }
+  setPalette(t) {
+    var e;
+    this.palette = t, this.markers = c(this.sourceMarkers, t.event), (e = this.requestUpdate) == null || e.call(this);
+  }
+  visibleMarkers(t) {
+    var i;
+    const e = (i = this.chart) == null ? void 0 : i.timeScale();
+    return e ? this.markers.flatMap((r) => {
+      var h;
+      const a = d(e, Number(r.time) * 1e3), s = r.price === void 0 ? t : ((h = this.series) == null ? void 0 : h.priceToCoordinate(r.price)) ?? null;
+      return a === null || s === null ? [] : [{ ...r, x: a, y: s }];
+    }) : [];
+  }
+  setGeometry(t) {
+    var e;
+    this.geometry = t, (e = this.onGeometry) == null || e.call(this, t);
+  }
+  hitTest(t, e) {
+    for (let i = this.geometry.length - 1; i >= 0; i -= 1) {
+      const r = this.geometry[i], a = v(t, e, r.x, r.y);
+      if (a !== null)
+        return {
+          externalId: r.id,
+          zOrder: "top",
+          itemType: "marker",
+          cursorStyle: "pointer",
+          hitTestPriority: 2,
+          distance: a
+        };
+    }
+    return null;
+  }
+}
+export {
+  o as CHART_EVENT_MARKER_RADIUS,
+  _ as TradingViewEventMarkersPrimitive,
+  c as buildTradingViewEventMarkers,
+  v as eventMarkerHitDistance
+};

package/dist/charts/index.d.ts

@@ -2,5 +2,6 @@ export { AreaTrendChart, BarChart, HistogramChart, PieChart, RadarChart, RadialG
 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 type { OhlcAnnotation, OhlcAnnotationPoint } from "./ohlc-annotations";
 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-annotations.d.ts

@@ -0,0 +1,56 @@
+import { type IPrimitivePaneView, type ISeriesPrimitive, type ITimeScaleApi, type SeriesAttachedParameter, type Time } from "lightweight-charts";
+/** An epoch-millisecond point on the existing OHLC time/price scales. */
+export interface OhlcAnnotationPoint {
+    time: number;
+    price: number;
+}
+interface AnnotationStyle {
+    label?: string;
+    color?: string;
+}
+interface AnnotationStroke {
+    lineWidth?: 1 | 2 | 3 | 4;
+    lineStyle?: "solid" | "dashed" | "dotted";
+}
+/** Host-calculated geometry; domain labels and classifications remain caller-owned. */
+export type OhlcAnnotation = AnnotationStyle & (({
+    kind: "level";
+    price: number;
+} & AnnotationStroke) | {
+    kind: "band";
+    from: number;
+    to: number;
+    opacity?: number;
+} | ({
+    kind: "segment";
+    from: OhlcAnnotationPoint;
+    to: OhlcAnnotationPoint;
+} & AnnotationStroke));
+export declare function validateOhlcAnnotations(annotations: readonly OhlcAnnotation[]): void;
+/** Snap non-bar timestamps using the engine's nearest index, retaining viewport clipping. */
+export declare function ohlcTimeCoordinate(scale: ITimeScaleApi<Time>, time: number): number | null;
+export declare class OhlcAnnotationsPrimitive implements ISeriesPrimitive<Time> {
+    private annotations;
+    private color;
+    private font;
+    private host;
+    private lines;
+    private bounds;
+    private readonly views;
+    constructor(annotations: readonly OhlcAnnotation[], color: string, font: string);
+    attached(host: SeriesAttachedParameter<Time>): void;
+    detached(): void;
+    paneViews(): IPrimitivePaneView[];
+    autoscaleInfo(): {
+        priceRange: {
+            minValue: number;
+            maxValue: number;
+        };
+    } | null;
+    setAnnotations(annotations: readonly OhlcAnnotation[]): void;
+    setPalette(color: string): void;
+    private clearLines;
+    private updateLines;
+    private draw;
+}
+export {};

package/dist/charts/ohlc-annotations.js

@@ -0,0 +1,84 @@
+var m = Object.defineProperty;
+var b = (s, i, e) => i in s ? m(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
+var d = (s, i, e) => b(s, typeof i != "symbol" ? i + "" : i, e);
+import { LineStyle as c } from "lightweight-charts";
+const f = { solid: c.Solid, dashed: c.Dashed, dotted: c.Dotted };
+function y(s) {
+  if (s.length > 256) throw new RangeError("OHLC supports at most 256 annotations");
+  for (const i of s) {
+    const e = i.kind === "level" ? [i.price] : i.kind === "band" ? [i.from, i.to] : i.kind === "segment" ? [i.from.time, i.from.price, i.to.time, i.to.price] : [];
+    if (!e.length || !e.every(Number.isFinite) || i.kind === "band" && i.opacity !== void 0 && (!Number.isFinite(i.opacity) || i.opacity < 0 || i.opacity > 1) || i.kind !== "band" && (i.lineWidth !== void 0 && ![1, 2, 3, 4].includes(i.lineWidth) || i.lineStyle !== void 0 && !Object.hasOwn(f, i.lineStyle)))
+      throw new RangeError("OHLC annotations require finite geometry, valid strokes and opacity from 0 to 1");
+  }
+}
+function u(s, i) {
+  const e = s.timeToIndex(Math.floor(i / 1e3), !0);
+  return e === null ? null : s.logicalToCoordinate(Number(e));
+}
+class w {
+  constructor(i, e, n) {
+    d(this, "host", null);
+    d(this, "lines", []);
+    d(this, "bounds", null);
+    d(this, "views", [
+      { zOrder: () => "bottom", renderer: () => ({ draw: (i) => this.draw(i, "band") }) },
+      { zOrder: () => "top", renderer: () => ({ draw: (i) => this.draw(i, "segment") }) }
+    ]);
+    this.annotations = i, this.color = e, this.font = n, this.setAnnotations(i);
+  }
+  attached(i) {
+    this.host = i, this.updateLines();
+  }
+  detached() {
+    this.clearLines(), this.host = null;
+  }
+  paneViews() {
+    return this.views;
+  }
+  autoscaleInfo() {
+    return this.bounds;
+  }
+  setAnnotations(i) {
+    y(i), this.annotations = i;
+    const e = i.flatMap((n) => n.kind === "level" ? [n.price] : n.kind === "band" ? [n.from, n.to] : [n.from.price, n.to.price]);
+    this.bounds = e.length ? { priceRange: { minValue: Math.min(...e), maxValue: Math.max(...e) } } : null, this.updateLines();
+  }
+  setPalette(i) {
+    this.color = i, this.updateLines();
+  }
+  clearLines() {
+    var i;
+    for (const e of this.lines) (i = this.host) == null || i.series.removePriceLine(e);
+    this.lines = [];
+  }
+  updateLines() {
+    if (this.clearLines(), !!this.host) {
+      for (const i of this.annotations) i.kind === "level" && this.lines.push(this.host.series.createPriceLine({
+        price: i.price,
+        color: i.color ?? this.color,
+        title: i.label ?? "",
+        lineWidth: i.lineWidth ?? 1,
+        lineStyle: f[i.lineStyle ?? "solid"],
+        axisLabelVisible: !0
+      }));
+      this.host.requestUpdate();
+    }
+  }
+  draw(i, e) {
+    const n = this.host;
+    n && i.useMediaCoordinateSpace(({ context: o, mediaSize: p }) => {
+      for (const t of this.annotations) {
+        if (t.kind !== e) continue;
+        const r = n.series.priceToCoordinate(t.kind === "band" ? t.from : t.from.price), l = n.series.priceToCoordinate(t.kind === "band" ? t.to : t.to.price);
+        if (r === null || l === null) continue;
+        const a = t.kind === "band" ? 0 : u(n.chart.timeScale(), t.from.time), h = t.kind === "band" ? p.width : u(n.chart.timeScale(), t.to.time);
+        a === null || h === null || (o.save(), o.fillStyle = o.strokeStyle = t.color ?? this.color, t.kind === "band" ? (o.globalAlpha = t.opacity ?? 0.12, o.fillRect(a, Math.min(r, l), h - a, Math.abs(l - r)), o.globalAlpha = 1) : (o.lineWidth = t.lineWidth ?? 1, o.setLineDash(t.lineStyle === "dashed" ? [6, 4] : t.lineStyle === "dotted" ? [2, 3] : []), o.beginPath(), o.moveTo(a, r), o.lineTo(h, l), o.stroke()), t.label && (o.font = `11px ${this.font}`, o.fillText(t.label, Math.max(4, a + 4), Math.max(12, Math.min(r, l) - 4))), o.restore());
+      }
+    });
+  }
+}
+export {
+  w as OhlcAnnotationsPrimitive,
+  u as ohlcTimeCoordinate,
+  y as validateOhlcAnnotations
+};

package/dist/charts/ohlc.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import { type OhlcAnnotation } from "./ohlc-annotations";
 export interface CandlePoint {
     time: number;
     label: string;
@@ -11,6 +12,8 @@ export interface CandlePoint {
 export interface OhlcChartMarker {
     id: string;
     time: number;
+    /** Optional price anchor; omitted markers retain the bottom event track. */
+    price?: number;
     color?: string;
     label?: string;
     ariaLabel: string;
@@ -20,6 +23,7 @@ export interface OhlcChartMarker {
 }
 export interface OhlcChartProps {
     data: CandlePoint[];
+    annotations?: readonly OhlcAnnotation[];
     markers?: readonly OhlcChartMarker[];
     onMarkerClick?: (marker: OhlcChartMarker) => void;
     height?: number | string;
@@ -33,4 +37,4 @@ export interface OhlcChartProps {
 }
 /** 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;
+export declare function OhlcChart({ data, annotations, markers, onMarkerClick, height, valueFormat, locale, pricePrecision, showVolume, transparent, ariaLabel, className, }: OhlcChartProps): import("react").JSX.Element;