@rioaxyz/sonrchart 0.1.0 → 0.3.0

package/README.md

@@ -41,6 +41,12 @@ bars come from.
 - **Snapshots.** Capture the chart to a PNG data URL (or trigger a download).
 - **Composable chrome.** `ChartToolbar` bundles intervals + indicators +
   drawing tools + snapshot; add your own buttons via its children slot.
+- **Volume trend readout.** Optional header row classifying the last N bars'
+  volume as Increasing / Decreasing / Mixed (lookback editable live in the
+  settings dialog, tracks the crosshair). Toggle it from the indicators menu
+  ("VOLTREND"), seed it on with `volumeTrend` on `ChartHeader` /
+  `SonrChartShell`, drive it via `setVolumeTrendEnabled` on the chart handle,
+  or subscribe to the raw trend via `subscribeVolumeTrend`.
 - **Fast & dependency-light.** The only runtime dependency is KLineChart;
   React is a peer. The per-frame hot paths are tuned (see
   [PERFORMANCE.md](PERFORMANCE.md)).
@@ -151,6 +157,7 @@ function TradingChart({ source }: { source: DataSource }) {
 | `paneHeights` | `Record<string, number>` | Sub-pane pixel heights, keyed by indicator name. |
 | `sessions` | `boolean \| { premarket?, afterhours? }` | Tint pre/after-hours session backgrounds (ET). |
 | `patterns` | `PatternMarker[]` | Setup markers (`{ time, kind, label }`) drawn on the price pane. |
+| `halted` | `boolean \| HaltBadge` | Trading-halt badge: a pill pinned to the top of the price pane against the y-axis. `true` shows the default blue "Halt"; pass `{ label?, color?, textColor? }` to customize. |
 | `priceLines` | `PriceLine[]` | Static horizontal reference lines (entry / stop / target). |
 | `orderLines` | `OrderLine[]` | Draggable order/position lines; `onMove(price, phase)` fires as the user drags. |
 | `priceScale` | `{ type?, invert?, inside? }` | Scale mode — `"normal" \| "percentage" \| "logarithm"`, plus invert / labels-inside. |
@@ -214,10 +221,13 @@ const ref = useRef<SonrChartHandle>(null);
 
 ### Sonr custom indicators
 
-`sessions` and `patterns` are Sonr's own custom KLineChart indicators
-(registered automatically). Session tinting shades pre-market (04:00–09:30 ET)
-and after-hours (16:00–20:00 ET); pattern markers draw a labeled triangle at
-each setup's bar (green up for longs, red down for shorts).
+`sessions`, `patterns`, and `halted` are Sonr's own custom KLineChart
+indicators (registered automatically). Session tinting shades pre-market
+(04:00–09:30 ET) and after-hours (16:00–20:00 ET); pattern markers draw a
+labeled triangle at each setup's bar (green up for longs, red down for
+shorts); the halt badge pins a rounded pill to the top-right of the price
+pane while a symbol is trading-halted (drawn on the canvas, so it's included
+in snapshots).
 
 ## Develop
 

package/dist/index.cjs

@@ -28,6 +28,7 @@ __export(index_exports, {
   ConfirmDialog: () => ConfirmDialog,
   DEFAULT_CANDLE_STYLES: () => DEFAULT_CANDLE_STYLES,
   DEFAULT_DRAWING_TOOLS: () => DEFAULT_DRAWING_TOOLS,
+  DEFAULT_HALT_BADGE: () => DEFAULT_HALT_BADGE,
   DEFAULT_INDICATOR_OPTIONS: () => DEFAULT_INDICATOR_OPTIONS,
   DEFAULT_LABELS: () => DEFAULT_LABELS,
   DEFAULT_RANGES: () => DEFAULT_RANGES,
@@ -35,6 +36,7 @@ __export(index_exports, {
   DEFAULT_SESSION_COLORS: () => DEFAULT_SESSION_COLORS,
   DEFAULT_TIMEZONE: () => DEFAULT_TIMEZONE,
   DEFAULT_TIMEZONES: () => DEFAULT_TIMEZONES,
+  DEFAULT_VOLUME_TREND_BARS: () => DEFAULT_VOLUME_TREND_BARS,
   DataWindow: () => DataWindow,
   DrawingTemplateStore: () => DrawingTemplateStore,
   DrawingToolbar: () => DrawingToolbar,
@@ -42,6 +44,7 @@ __export(index_exports, {
   EXTENDED_OVERLAYS: () => EXTENDED_OVERLAYS,
   FIB_EXTENSION_LEVELS: () => FIB_EXTENSION_LEVELS,
   GoToDateDialog: () => GoToDateDialog,
+  HALT_INDICATOR: () => HALT_INDICATOR,
   IndicatorMenu: () => IndicatorMenu,
   MarketStatus: () => MarketStatus,
   NavControlBar: () => NavControlBar,
@@ -70,6 +73,7 @@ __export(index_exports, {
   ToolbarButton: () => ToolbarButton,
   UNIT_MS: () => UNIT_MS,
   USER_DRAWING_GROUP: () => USER_DRAWING_GROUP,
+  VOLUME_TREND_OPTION: () => VOLUME_TREND_OPTION,
   VWAP_INDICATOR: () => VWAP_INDICATOR,
   WATERMARK_INDICATOR: () => WATERMARK_INDICATOR,
   arrowHeadPoints: () => arrowHeadPoints,
@@ -87,6 +91,7 @@ __export(index_exports, {
   isEditableTarget: () => isEditableTarget,
   marketStatus: () => marketStatus,
   mergeLabels: () => mergeLabels,
+  normalizeHalt: () => normalizeHalt,
   parseLocalDateTime: () => parseLocalDateTime,
   parseResolution: () => parseResolution,
   priceRangeLabel: () => priceRangeLabel,
@@ -105,7 +110,8 @@ __export(index_exports, {
   themeStyles: () => themeStyles,
   timezoneLabel: () => timezoneLabel,
   toHeikinAshi: () => toHeikinAshi,
-  tradeBoxFigures: () => tradeBoxFigures
+  tradeBoxFigures: () => tradeBoxFigures,
+  volumeTrend: () => volumeTrend
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -13776,14 +13782,26 @@ var SESSION_INDICATOR = "SONR_SESSION";
 var PATTERN_INDICATOR = "SONR_PATTERNS";
 var WATERMARK_INDICATOR = "SONR_WATERMARK";
 var SERIES_INDICATOR = "SONR_SERIES";
+var HALT_INDICATOR = "SONR_HALT";
 var VWAP_INDICATOR = "VWAP";
 var Z_ORDER = {
   watermark: -3,
   session: -2,
   series: -1,
   compare: 0,
-  pattern: 10
+  pattern: 10,
+  halt: 11
 };
+var DEFAULT_HALT_BADGE = { label: "Halt", color: "#2196f3", textColor: "#ffffff" };
+function normalizeHalt(prop) {
+  if (!prop) return null;
+  if (prop === true) return DEFAULT_HALT_BADGE;
+  return {
+    label: prop.label ?? DEFAULT_HALT_BADGE.label,
+    color: prop.color ?? DEFAULT_HALT_BADGE.color,
+    textColor: prop.textColor ?? DEFAULT_HALT_BADGE.textColor
+  };
+}
 var VWAP_COLOR = "#a970ff";
 function computeVWAP(dataList) {
   let day = Number.NaN;
@@ -14035,6 +14053,41 @@ function registerSonrIndicators() {
       return false;
     }
   });
+  registerIndicator({
+    name: HALT_INDICATOR,
+    shortName: "",
+    series: "price",
+    figures: [],
+    calc: (dataList) => dataList.map(() => ({})),
+    draw: ({ ctx, bounding, indicator }) => {
+      const cfg = indicator.extendData;
+      if (!cfg || !cfg.label) return false;
+      const padX = 8;
+      const h = 20;
+      const inset = 8;
+      ctx.save();
+      ctx.font = '600 11px ui-sans-serif, -apple-system, "Segoe UI", sans-serif';
+      const w = Math.ceil(ctx.measureText(cfg.label).width) + padX * 2;
+      const x = bounding.width - w - inset;
+      const y = (bounding.top ?? 0) + inset;
+      const r = h / 2;
+      ctx.beginPath();
+      ctx.moveTo(x + r, y);
+      ctx.arcTo(x + w, y, x + w, y + h, r);
+      ctx.arcTo(x + w, y + h, x, y + h, r);
+      ctx.arcTo(x, y + h, x, y, r);
+      ctx.arcTo(x, y, x + w, y, r);
+      ctx.closePath();
+      ctx.fillStyle = cfg.color;
+      ctx.fill();
+      ctx.fillStyle = cfg.textColor;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(cfg.label, x + w / 2, y + h / 2 + 0.5);
+      ctx.restore();
+      return false;
+    }
+  });
   registerIndicator({
     name: PATTERN_INDICATOR,
     shortName: "",
@@ -15387,6 +15440,25 @@ function formatWithUnit(text2, quote) {
   return out;
 }
 
+// src/volumeTrend.ts
+var DEFAULT_VOLUME_TREND_BARS = 3;
+function volumeTrend(list, endIndex, bars = DEFAULT_VOLUME_TREND_BARS) {
+  const n = Math.max(1, Math.floor(bars));
+  if (endIndex < n || endIndex >= list.length) return null;
+  let up = 0;
+  let down = 0;
+  for (let i = endIndex - n + 1; i <= endIndex; i++) {
+    const v = list[i]?.volume;
+    const pv = list[i - 1]?.volume;
+    if (typeof v !== "number" || typeof pv !== "number") return null;
+    if (v > pv) up++;
+    else if (v < pv) down++;
+  }
+  if (up === n) return "increasing";
+  if (down === n) return "decreasing";
+  return "mixed";
+}
+
 // src/SonrChart.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 registerSonrIndicators();
@@ -15396,7 +15468,7 @@ registerShapeOverlays();
 registerExtendedDrawings();
 registerTradeReview();
 registerTextOverlay();
-var INTERNAL_INDICATORS = /* @__PURE__ */ new Set([SESSION_INDICATOR, PATTERN_INDICATOR, COMPARE_INDICATOR, WATERMARK_INDICATOR, SERIES_INDICATOR]);
+var INTERNAL_INDICATORS = /* @__PURE__ */ new Set([SESSION_INDICATOR, PATTERN_INDICATOR, COMPARE_INDICATOR, WATERMARK_INDICATOR, SERIES_INDICATOR, HALT_INDICATOR]);
 var isUserIndicator = (name) => !INTERNAL_INDICATORS.has(name);
 function magnetMode(m) {
   if (m === true || m === "weak") return "weak_magnet";
@@ -15496,6 +15568,7 @@ var SonrChart = (0, import_react2.forwardRef)(function SonrChart2({
   sessions: sessionsProp,
   watermark: watermarkProp,
   patterns,
+  halted,
   priceLines,
   orderLines,
   priceScale: priceScaleProp,
@@ -15613,14 +15686,24 @@ var SonrChart = (0, import_react2.forwardRef)(function SonrChart2({
   const legendRef = (0, import_react2.useRef)(legend);
   legendRef.current = legend;
   const headerSubs = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const trendSubs = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const trendBarsRef = (0, import_react2.useRef)(DEFAULT_VOLUME_TREND_BARS);
+  const trendBarsSubs = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const trendOnRef = (0, import_react2.useRef)(false);
+  const trendOnSubs = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
   const crosshairActiveRef = (0, import_react2.useRef)(false);
+  const headerIdxRef = (0, import_react2.useRef)(-1);
+  const emitHeaderAt = (list, idx) => {
+    headerIdxRef.current = idx;
+    const current = idx >= 0 ? list[idx] ?? null : null;
+    const prev = idx > 0 ? list[idx - 1] : null;
+    headerSubs.current.forEach((cb) => cb(current, prev));
+    trendSubs.current.forEach((s) => s.cb(volumeTrend(list, idx, s.bars ?? trendBarsRef.current)));
+  };
   const emitLatestHeader = () => {
     if (crosshairActiveRef.current) return;
     const list = chartRef.current?.getDataList() ?? [];
-    const n = list.length;
-    const current = n ? list[n - 1] : null;
-    const prev = n > 1 ? list[n - 2] : null;
-    headerSubs.current.forEach((cb) => cb(current, prev));
+    emitHeaderAt(list, list.length - 1);
   };
   const haRef = (0, import_react2.useRef)(new HaTransformer());
   const [textEdit, setTextEdit] = (0, import_react2.useState)(null);
@@ -15888,6 +15971,40 @@ var SonrChart = (0, import_react2.forwardRef)(function SonrChart2({
         const n = list.length;
         cb(n ? list[n - 1] : null, n > 1 ? list[n - 2] : null);
         return () => headerSubs.current.delete(cb);
+      },
+      // Volume trend (#79) ---------------------------------------------------
+      subscribeVolumeTrend: (cb, bars) => {
+        const sub = { bars: bars === void 0 ? void 0 : Math.max(1, Math.floor(bars)), cb };
+        trendSubs.current.add(sub);
+        const list = chartRef.current?.getDataList() ?? [];
+        cb(volumeTrend(list, list.length - 1, sub.bars ?? trendBarsRef.current));
+        return () => trendSubs.current.delete(sub);
+      },
+      getVolumeTrendBars: () => trendBarsRef.current,
+      setVolumeTrendBars: (bars) => {
+        const n = Math.max(1, Math.floor(bars));
+        if (!Number.isFinite(n) || n === trendBarsRef.current) return;
+        trendBarsRef.current = n;
+        const list = chartRef.current?.getDataList() ?? [];
+        const idx = crosshairActiveRef.current ? headerIdxRef.current : list.length - 1;
+        trendSubs.current.forEach((s) => {
+          if (s.bars === void 0) s.cb(volumeTrend(list, idx, n));
+        });
+        trendBarsSubs.current.forEach((cb) => cb(n));
+      },
+      subscribeVolumeTrendBars: (cb) => {
+        trendBarsSubs.current.add(cb);
+        return () => trendBarsSubs.current.delete(cb);
+      },
+      getVolumeTrendEnabled: () => trendOnRef.current,
+      setVolumeTrendEnabled: (on) => {
+        if (on === trendOnRef.current) return;
+        trendOnRef.current = on;
+        trendOnSubs.current.forEach((cb) => cb(on));
+      },
+      subscribeVolumeTrendEnabled: (cb) => {
+        trendOnSubs.current.add(cb);
+        return () => trendOnSubs.current.delete(cb);
       }
     },
     // paneHeights/priceScale captured by closure; recreated per render is fine.
@@ -15951,16 +16068,29 @@ var SonrChart = (0, import_react2.forwardRef)(function SonrChart2({
     chart.setStyles(mergeStyles(themeStyleObj, styles2));
     chart.subscribeAction("onCrosshairChange", (d) => {
       const cross = d;
-      const k = cross?.kLineData;
-      if (k && typeof cross?.dataIndex === "number") {
+      const list = chart.getDataList();
+      let k = cross?.kLineData ?? null;
+      let idx = typeof cross?.dataIndex === "number" ? cross.dataIndex : -1;
+      if (!k && typeof cross?.x === "number" && list.length > 0) {
+        const [p] = chart.convertFromPixel([{ x: cross.x }], { paneId: CANDLE_PANE });
+        if (typeof p?.dataIndex === "number") {
+          idx = Math.max(0, Math.min(p.dataIndex, list.length - 1));
+          k = list[idx] ?? null;
+        }
+      }
+      if (k && idx >= 0) {
         crosshairActiveRef.current = true;
-        const list = chart.getDataList();
-        headerSubs.current.forEach((cb) => cb(k, cross.dataIndex > 0 ? list[cross.dataIndex - 1] : null));
+        emitHeaderAt(list, idx);
       } else {
         crosshairActiveRef.current = false;
         emitLatestHeader();
       }
     });
+    const onPointerLeave = () => {
+      crosshairActiveRef.current = false;
+      emitLatestHeader();
+    };
+    el.addEventListener("mouseleave", onPointerLeave);
     applyCandleStyle(chart, candleStyleRef.current, themeStyleObj, baseTheme);
     applyPriceLabels(chart, priceLabelsRef.current);
     applyFormatter(chart);
@@ -16070,6 +16200,7 @@ var SonrChart = (0, import_react2.forwardRef)(function SonrChart2({
     return () => {
       disposed = true;
       unsub();
+      el.removeEventListener("mouseleave", onPointerLeave);
       dispose(idRef.current);
       chartRef.current = null;
       overlayIds.current = [];
@@ -16141,6 +16272,19 @@ var SonrChart = (0, import_react2.forwardRef)(function SonrChart2({
       chart.removeIndicator({ name: PATTERN_INDICATOR });
     }
   }, [patterns, chartEpoch]);
+  (0, import_react2.useEffect)(() => {
+    const chart = chartRef.current;
+    if (!chart) return;
+    const present = chart.getIndicators({ name: HALT_INDICATOR }).length > 0;
+    const badge = normalizeHalt(halted);
+    if (badge && !present) {
+      chart.createIndicator({ name: HALT_INDICATOR, paneId: CANDLE_PANE, zLevel: Z_ORDER.halt, extendData: badge }, true);
+    } else if (badge && present) {
+      chart.overrideIndicator({ name: HALT_INDICATOR, extendData: badge });
+    } else if (!badge && present) {
+      chart.removeIndicator({ name: HALT_INDICATOR });
+    }
+  }, [halted, chartEpoch]);
   (0, import_react2.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart) return;
@@ -16394,7 +16538,7 @@ var CSS = `
 :where(.sonr-mkt-handle){position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #22a06b;transform:translate(-50%,-50%);}
 :where(.sonr-mkt-ticks){grid-column:2;display:flex;justify-content:space-between;font-size:10px;color:#888;}
 :where(.sonr-mkt-tz){margin-top:12px;font-size:11px;color:#888;text-align:center;}
-:where(.sonr-hd){display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-size:12px;color:#000;white-space:nowrap;}
+:where(.sonr-hd){display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:inherit;font-size:12px;color:#000;white-space:nowrap;}
 :where(.sonr-hd-sym){font-weight:700;color:#000;}
 :where(.sonr-hd-ohlc){display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;}
 :where(.sonr-hd-cell){display:inline-flex;align-items:baseline;gap:3px;}
@@ -16402,6 +16546,8 @@ var CSS = `
 :where(.sonr-hd-v){color:#555;}
 :where(.sonr-hd-up){color:#22a06b;}
 :where(.sonr-hd-down){color:#d23c3c;}
+:where(.sonr-hd-trend){flex-basis:100%;display:inline-flex;align-items:baseline;gap:4px;margin-top:2px;}
+:where(.sonr-hd-mixed){color:#c98a1b;}
 :where(.sonr-brand){position:absolute;z-index:3;pointer-events:none;font-family:inherit;font-weight:700;font-size:13px;letter-spacing:0.02em;color:#000;user-select:none;line-height:1;}
 :where(.sonr-brand-img){display:block;}
 :where(.sonr-brand-link){pointer-events:auto;color:inherit;text-decoration:none;}
@@ -16577,6 +16723,10 @@ var DEFAULT_LABELS = {
   zoomIn: "Zoom in",
   fitContent: "Fit all data",
   goToRealtime: "Go to realtime",
+  volumeTrend: "Vol trend",
+  volumeTrendIncreasing: "Increasing",
+  volumeTrendDecreasing: "Decreasing",
+  volumeTrendMixed: "Mixed",
   marketPre: "Pre-market",
   marketOpen: "Open",
   marketAfter: "After-hours",
@@ -16607,6 +16757,7 @@ function mergeLabels(over) {
 
 // src/IndicatorMenu.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var VOLUME_TREND_OPTION = "VOLTREND";
 var DEFAULT_INDICATOR_OPTIONS = [
   // Price-pane overlays.
   { name: "MA", label: "Moving Average", pane: "main" },
@@ -16619,6 +16770,7 @@ var DEFAULT_INDICATOR_OPTIONS = [
   { name: "VWAP", label: "Volume Weighted Avg Price", pane: "main" },
   // Sub-pane oscillators & volume studies.
   { name: "VOL", label: "Volume", pane: "new" },
+  { name: VOLUME_TREND_OPTION, label: "Volume Trend (header row)" },
   { name: "MACD", label: "MACD", pane: "new" },
   { name: "RSI", label: "Relative Strength Index", pane: "new" },
   { name: "KDJ", label: "KDJ Stochastic", pane: "new" },
@@ -16649,12 +16801,27 @@ function IndicatorMenu({
   const [active, setActive] = (0, import_react4.useState)([]);
   const { open, toggle: toggleOpen, pos, triggerRef, panelRef } = useDropdown();
   (0, import_react4.useEffect)(() => {
-    const t = setTimeout(() => setActive(chartRef.current?.listIndicators() ?? []), 0);
-    return () => clearTimeout(t);
+    let unsubOn;
+    const t = setTimeout(() => {
+      const h = chartRef.current;
+      const base = h?.listIndicators() ?? [];
+      setActive(h?.getVolumeTrendEnabled?.() ? [...base, VOLUME_TREND_OPTION] : base);
+      unsubOn = h?.subscribeVolumeTrendEnabled?.(
+        (on) => setActive((a) => on ? a.includes(VOLUME_TREND_OPTION) ? a : [...a, VOLUME_TREND_OPTION] : a.filter((n) => n !== VOLUME_TREND_OPTION))
+      );
+    }, 0);
+    return () => {
+      clearTimeout(t);
+      unsubOn?.();
+    };
   }, [chartRef]);
   const toggle = (opt) => {
     const handle = chartRef.current;
     if (!handle) return;
+    if (opt.name === VOLUME_TREND_OPTION) {
+      handle.setVolumeTrendEnabled?.(!active.includes(opt.name));
+      return;
+    }
     if (active.includes(opt.name)) {
       handle.removeIndicator(opt.name);
       setActive((a) => a.filter((n) => n !== opt.name));
@@ -18095,6 +18262,7 @@ function SettingsModal({
   const [indicators2, setIndicators] = (0, import_react14.useState)([]);
   const [indColors, setIndColors] = (0, import_react14.useState)({});
   const [indParams, setIndParams] = (0, import_react14.useState)({});
+  const [trendBars, setTrendBars] = (0, import_react14.useState)(DEFAULT_VOLUME_TREND_BARS);
   const [watermark, setWatermark] = (0, import_react14.useState)({ symbol: true, interval: true, color: "#e6ebe9", opacity: 0.06 });
   const [brushStyles, setBrushStyles] = (0, import_react14.useState)({
     brush: { color: "#e6ebe9", size: 2 },
@@ -18129,6 +18297,8 @@ function SettingsModal({
       }
     }
     setIndParams(params);
+    setTrendBars(chartRef.current?.getVolumeTrendBars?.() ?? DEFAULT_VOLUME_TREND_BARS);
+    const unsubTrendBars = chartRef.current?.subscribeVolumeTrendBars?.(setTrendBars);
     const readWm = () => {
       const w = chartRef.current?.getWatermark?.();
       if (w) setWatermark(w);
@@ -18171,6 +18341,7 @@ function SettingsModal({
     document.addEventListener("keydown", onKey);
     return () => {
       document.removeEventListener("keydown", onKey);
+      unsubTrendBars?.();
       unsubWm?.();
       unsubBrush?.();
       unsubText?.();
@@ -18279,6 +18450,25 @@ function SettingsModal({
             ) })
           ] }),
           section === "indicators" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "sonr-set-subhead", children: L.volumeTrend }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Row, { label: "Bars (lookback)", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "input",
+              {
+                type: "number",
+                className: "sonr-set-num",
+                min: "1",
+                max: "100",
+                value: trendBars,
+                onChange: (e) => {
+                  const v = e.target.valueAsNumber;
+                  if (Number.isNaN(v)) return;
+                  const n = Math.max(1, Math.min(100, Math.floor(v)));
+                  setTrendBars(n);
+                  chartRef.current?.setVolumeTrendBars?.(n);
+                }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "sonr-set-subhead", children: "Active indicators" }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "sonr-set-note", children: "An indicator must be active on the chart to change its settings \u2014 add it from the Indicators menu first." }),
             indicators2.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "sonr-set-empty", children: "No indicators active." }),
             indicators2.map((name) => {
@@ -18908,18 +19098,28 @@ var fmtVolume = (v) => {
   if (n >= 1e3) return `${(n / 1e3).toFixed(2)}K`;
   return `${n}`;
 };
-function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, labels, className }) {
+function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, volumeTrend: volumeTrend2, labels, className }) {
   (0, import_react17.useEffect)(ensureDefaultStyles, []);
   const L = (0, import_react17.useMemo)(() => mergeLabels(labels), [labels]);
   const [bar, setBar] = (0, import_react17.useState)({ current: null, prev: null });
+  const [trend, setTrend] = (0, import_react17.useState)(null);
+  const [trendOn, setTrendOn] = (0, import_react17.useState)(false);
+  const seedOn = volumeTrend2 === true || typeof volumeTrend2 === "number" && volumeTrend2 > 0;
   (0, import_react17.useEffect)(() => {
     let cancelled = false;
     let unsub;
+    let unsubOn;
     const attach = () => {
       if (cancelled) return;
       const h = chartRef.current;
       if (h?.subscribeHeaderBar) {
         unsub = h.subscribeHeaderBar((current, prev) => setBar({ current, prev }));
+        if (seedOn) {
+          if (typeof volumeTrend2 === "number") h.setVolumeTrendBars?.(volumeTrend2);
+          h.setVolumeTrendEnabled?.(true);
+        }
+        setTrendOn(h.getVolumeTrendEnabled?.() ?? seedOn);
+        unsubOn = h.subscribeVolumeTrendEnabled?.(setTrendOn);
       } else {
         setTimeout(attach, 50);
       }
@@ -18928,8 +19128,17 @@ function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, l
     return () => {
       cancelled = true;
       unsub?.();
+      unsubOn?.();
     };
-  }, [chartRef]);
+  }, [chartRef, volumeTrend2, seedOn]);
+  (0, import_react17.useEffect)(() => {
+    if (!trendOn) {
+      setTrend(null);
+      return;
+    }
+    const unsubTrend = chartRef.current?.subscribeVolumeTrend?.((t) => setTrend(t));
+    return () => unsubTrend?.();
+  }, [chartRef, trendOn]);
   const k = bar.current;
   const up = (k?.close ?? 0) >= (k?.open ?? 0);
   const dirClass = up ? "sonr-hd-up" : "sonr-hd-down";
@@ -18970,6 +19179,10 @@ function ChartHeader({ chartRef, symbol, interval, source, pricePrecision = 2, l
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sonr-hd-k", children: "V" }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sonr-hd-v", children: fmtVolume(k.volume) })
       ] })
+    ] }),
+    trendOn && trend && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "sonr-hd-trend", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sonr-hd-k", children: L.volumeTrend }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: trend === "increasing" ? "sonr-hd-up" : trend === "decreasing" ? "sonr-hd-down" : "sonr-hd-mixed", children: trend === "increasing" ? L.volumeTrendIncreasing : trend === "decreasing" ? L.volumeTrendDecreasing : L.volumeTrendMixed })
     ] })
   ] });
 }
@@ -19432,6 +19645,7 @@ var SonrChartShell = (0, import_react24.forwardRef)(function SonrChartShell2({
   ranges,
   source,
   exchange = source,
+  volumeTrend: volumeTrend2 = true,
   onIntervalChange,
   onSymbolChange,
   brand,
@@ -19505,7 +19719,7 @@ var SonrChartShell = (0, import_react24.forwardRef)(function SonrChartShell2({
             style: { position: "absolute", inset: 0 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "sonr-tile-header", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartHeader, { chartRef, symbol, interval, source }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "sonr-tile-header", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChartHeader, { chartRef, symbol, interval, source, volumeTrend: volumeTrend2, labels }) }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "sonr-tile-nav", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(NavControlBar, { chartRef, labels }) }),
         brand != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BrandMark, { position: brandCorner, opacity: brandOpacity, children: brand })
       ] }),
@@ -19568,6 +19782,7 @@ function setCSSCustomProperty(name, value, el) {
   ConfirmDialog,
   DEFAULT_CANDLE_STYLES,
   DEFAULT_DRAWING_TOOLS,
+  DEFAULT_HALT_BADGE,
   DEFAULT_INDICATOR_OPTIONS,
   DEFAULT_LABELS,
   DEFAULT_RANGES,
@@ -19575,6 +19790,7 @@ function setCSSCustomProperty(name, value, el) {
   DEFAULT_SESSION_COLORS,
   DEFAULT_TIMEZONE,
   DEFAULT_TIMEZONES,
+  DEFAULT_VOLUME_TREND_BARS,
   DataWindow,
   DrawingTemplateStore,
   DrawingToolbar,
@@ -19582,6 +19798,7 @@ function setCSSCustomProperty(name, value, el) {
   EXTENDED_OVERLAYS,
   FIB_EXTENSION_LEVELS,
   GoToDateDialog,
+  HALT_INDICATOR,
   IndicatorMenu,
   MarketStatus,
   NavControlBar,
@@ -19610,6 +19827,7 @@ function setCSSCustomProperty(name, value, el) {
   ToolbarButton,
   UNIT_MS,
   USER_DRAWING_GROUP,
+  VOLUME_TREND_OPTION,
   VWAP_INDICATOR,
   WATERMARK_INDICATOR,
   arrowHeadPoints,
@@ -19627,6 +19845,7 @@ function setCSSCustomProperty(name, value, el) {
   isEditableTarget,
   marketStatus,
   mergeLabels,
+  normalizeHalt,
   parseLocalDateTime,
   parseResolution,
   priceRangeLabel,
@@ -19645,7 +19864,8 @@ function setCSSCustomProperty(name, value, el) {
   themeStyles,
   timezoneLabel,
   toHeikinAshi,
-  tradeBoxFigures
+  tradeBoxFigures,
+  volumeTrend
 });
 /*! Bundled license information: