@livo-build/charts 0.2.2 → 0.2.4

package/README.md

@@ -9,10 +9,11 @@ A lightweight, **dependency-free** canvas charting library. The core renders to
 shipped under a separate entry so non-React consumers never pull React into their
 bundle.
 
-It ships a **TradingView-style trading chart**: candlesticks **or** a line series, a
-**volume panel**, a **crosshair with price + time axis labels**, an **OHLCV legend**,
-independent **X and Y zoom** (+ pan, plus touch/pinch), and a toolbar for **intervals,
-USD/ETH, price/market-cap, log scale and fullscreen**. The architecture (a framework-agnostic `Chart`
+It ships a **TradingView-style trading chart**: candlesticks, a line, a two-tone
+**baseline** area **or Heikin-Ashi** candles, a **volume panel**, a **volume-by-price
+profile**, a **crosshair with price + time axis labels**, an **OHLCV legend**, independent
+**X and Y zoom** (+ pan, plus touch/pinch), and a toolbar for **intervals, USD/ETH,
+price/market-cap, log scale and fullscreen**. The architecture (a framework-agnostic `Chart`
 controller + a pure `draw()` pass) is built to keep growing — indicators, overlays,
 multiple panes — without touching consumers.
 
@@ -45,6 +46,18 @@ OHLCV legend are built in. The canvas is long-lived, so zoom/pan survive prop up
 (streaming trades won't reset the user's view). The wrapper is styled inline — no CSS
 framework required.
 
+`PriceChart` only aggregates the `swaps` you give it — it doesn't fetch more, so panning
+stops at the oldest trade. For **infinite back-history**, pass `onLoadOlder` (fires when the
+user pans/zooms within ~one viewport of the start) and prepend older trades to `swaps`; the
+right-anchored view keeps the position stable. Scope the toolbar to intervals your data
+covers with `intervals={[["1m", 60], ["5m", 300]]}` (a thin series bucketed at `1h`
+collapses into a couple of candles), and react to interval changes with `onIntervalChange`.
+For a turnkey lazy-loading chart, use a feed (`HyperliquidChart` / `connectFeed`) instead.
+
+The default **visible span** is `initialBars × interval`. To open on, say, the last 7 days at
+1h candles, give it a week of data and `defaultInterval={3600}` + `options={{ initialBars: 168 }}`
+(168 × 1h = 7 days). The user can still zoom/scroll out from there.
+
 Market cap = `price × supply`. Pass `supply` directly, or pass `tokenAddress` (+`decimals`)
 to read `totalSupply()` once via `rpcUrl` (default `https://cloudflare-eth.com`, cached).
 The **Price/MCap toggle only appears when one of those is set** — otherwise it's hidden
@@ -72,6 +85,40 @@ import { HyperliquidChart } from "@livo-build/charts/react";
 history loads lazily as the user scrolls left (infinite back-scroll) — both with no
 API key. Zoom/pan survive every update.
 
+### Live Polymarket & Signal Radar charts
+
+Two more turnkey, key-free live charts wrap the framework-agnostic `Chart`:
+
+```tsx
+import { PolymarketChart, SignalsChart } from "@livo-build/charts/react";
+
+// A prediction-market outcome (probabilities → a % y-axis), from the public CLOB.
+<PolymarketChart tokenId={yesTokenId} bucketSeconds={3600} label="Yes" />
+
+// A token tracked by the Livo signals engine ("Signal Radar") — real indexed history.
+<SignalsChart token="PEPE" bucketSeconds={300} indicators={[{ type: "ema", period: 21 }]} />
+```
+
+Both are `ChartFeed`s under the hood — drive the core directly with `connectFeed`:
+
+```ts
+import { Chart, connectFeed, polymarketFeed, signalsFeed } from "@livo-build/charts";
+
+connectFeed(new Chart(el), polymarketFeed({ tokenId, bucketSeconds: 3600 }), { interval: 3600 });
+connectFeed(new Chart(el2), signalsFeed({ token: "PEPE", bucketSeconds: 300 }), { interval: 300 });
+```
+
+- **`polymarketFeed`** — bucketed OHLC from the public Polymarket CLOB `prices-history`
+  endpoint, polled for a building candle. Prices are probabilities in [0, 1] (no volume).
+  `fetchPolymarketPriceHistory` is exported for custom fetching.
+- **`signalsFeed`** — real OHLC from the Signal Radar **index**: it queries `/graphql`
+  (`allSwaps` for the pool) and buckets the swaps into candles at any interval, paging older
+  swaps in as you scroll — so 1m / 5m candles go days deep (the index has no TTL), and 1h/4h/1d
+  just zoom out in time. The live candle is polled from `/data` (current price). If `/graphql`
+  is unreachable (e.g. cross-origin CORS) or you pass `history: "spark"`, it falls back to the
+  snapshot's `spark`. `fetchSignalsSwaps` / `fetchSignalsMarket` / `sparkCandles` are exported.
+  (Cross-origin use needs `/graphql` CORS-enabled on the engine; same-origin always works.)
+
 ### Indicators
 
 `PriceChart` and `HyperliquidChart` accept `indicators` — overlays drawn on the price
@@ -82,8 +129,8 @@ Colors fall back to a built-in palette by position. The pure
 `sma`/`ema`/`wma`/`vwap`/`bollingerBands`/`computeIndicator` helpers are exported from
 the core (e.g. feed `bollingerBands(values).{upper,mid,lower}` as three overlays).
 
-**Oscillators (RSI / MACD)** render in their own **stacked sub-panes** below the volume
-panel — pass `oscillators`:
+**Oscillators (RSI / MACD / Stochastic / ATR)** render in their own **stacked sub-panes**
+below the volume panel — pass `oscillators`:
 
 ```tsx
 <PriceChart
@@ -92,12 +139,43 @@ panel — pass `oscillators`:
   oscillators={[
     { type: "rsi", period: 14 },               // 0–100 band with 70/30 rails
     { type: "macd", fast: 12, slow: 26, signal: 9 },  // line + signal + histogram
+    { type: "stoch", period: 14, dPeriod: 3, smooth: 3 }, // %K/%D, 80/20 rails
+    { type: "atr", period: 14 },               // auto-scaled volatility (price units)
   ]}
 />
 ```
 
-Each pane defaults to 84px (`height` to override). The pure `rsi(values, period)` and
-`macd(values, fast, slow, signal) → { macd, signal, hist }` helpers are exported too.
+Each pane defaults to 84px (`height` to override). The pure `rsi(values, period)`,
+`macd(values, fast, slow, signal) → { macd, signal, hist }`,
+`stochastic(candles, kPeriod, dPeriod, smooth) → { k, d }` and `atr(candles, period)`
+helpers are exported too.
+
+### Chart types: candle · line · baseline · Heikin-Ashi
+
+`chartType` (low-level `chart.setChartType(...)`, or the toolbar's ▮▯ / ╱ / ⎓ / HA buttons)
+switches the price series:
+
+- **`candle`** — classic OHLC candlesticks.
+- **`line`** — a close line with a soft gradient area fill.
+- **`baseline`** — a two-tone area around a reference price (green above, red below). Set the
+  reference with `baselinePrice` (defaults to the first visible close); the core exposes
+  `chart.setBaseline(price)`.
+- **`heikin`** — Heikin-Ashi candles: smoothed OHLC that filter noise and make trends easier
+  to read. Indicators/oscillators still read the **raw** closes. The pure `heikinAshi(candles)`
+  transform is exported.
+
+### Volume profile (volume-by-price)
+
+A horizontal histogram of volume per price level, drawn over the price pane (peaked at the
+**Point of Control**). Pass `volumeProfile` (or toggle **VP** in the toolbar); the core has
+`chart.setVolumeProfile(...)`:
+
+```tsx
+<PriceChart swaps={trades} volumeProfile={{ buckets: 24, width: 0.16 }} />
+```
+
+It's computed over the **visible** window, so it tracks zoom/pan. The pure
+`volumeProfile(candles, buckets) → { buckets, maxVol, poc }` helper is exported.
 
 ### Fitting the container & axis styling
 
@@ -136,11 +214,12 @@ via `THEME_PRESETS.dark` / `THEME_PRESETS.light`. Pass either (or a partial over
 
 ### Drawing tools (trendlines & horizontal lines)
 
-The toolbar's **↗** (trendline) and **—** (horizontal line) buttons arm a one-shot draw:
-drag for a trendline, click for a horizontal price line. Drawings are anchored in **data
-space**, so they stay pinned to their price/time across pan, zoom and live updates. In the
-default cursor mode, click a line to select it, drag to move it, and **double-click a line
-to delete it**; **⌫** clears all.
+The toolbar arms a one-shot draw: **↗** trendline (drag), **—** horizontal line (click),
+**fib** Fibonacci retracement (drag — levels 0/23.6/38.2/50/61.8/78.6/100% between the two
+prices), and **▭** rectangle (drag). Drawings are anchored in **data space**, so they stay
+pinned to their price/time across pan, zoom and live updates. In the default cursor mode,
+click a drawing to select it, drag to move it, and **double-click it to delete it**; **⌫**
+clears all.
 
 ```tsx
 <PriceChart swaps={trades} onDrawingsChange={(d) => save(d)} drawings={restored} />
@@ -179,7 +258,10 @@ const feed = {
 ```
 
 The chart's right-anchored view means prepending history keeps the visible window
-stable, and the controller only asks for more when you scroll near the start.
+stable. The controller prefetches the next page once the view's left edge comes within
+~one viewport of the oldest loaded candle (see the exported `needsHistory` helper) — so
+**zooming out keeps deepening the window with real data** instead of stalling at the
+oldest bar. It advances one page per data length and stops when the feed runs dry.
 
 ## Vanilla / framework-agnostic
 
@@ -206,8 +288,10 @@ chart.destroy();
 | `new Chart(container, options?)` | Creates a `<canvas>`, wires interaction, observes resize. |
 | `setCandles(candles)` | Replace the series (each candle has `vol`) and redraw. |
 | `setInterval(seconds)` | Bucket interval — drives time-axis label granularity. |
-| `setChartType("candle" \| "line")` | Switch series style. |
+| `setChartType("candle" \| "line" \| "baseline" \| "heikin")` | Switch series style. |
 | `setShowVolume(on)` | Show / hide the volume panel (the price pane reclaims the space). |
+| `setVolumeProfile(config)` | Show/configure (or hide with `false`) the volume-by-price histogram. |
+| `setBaseline(price?)` | Reference price for the `baseline` type (undefined = first visible close). |
 | `setLogScale(on)` | Toggle the logarithmic price axis (auto-falls back to linear if any low ≤ 0). |
 | `setAxis({ fitContent, priceFormat, timeFormat, priceTicks, timeTicks, axisFont })` | Style the axes — only the provided keys change. |
 | `setIndicators(indicators)` | Set the moving-average overlays and redraw. |
@@ -222,7 +306,8 @@ chart.destroy();
 `ChartOptions`: `height`, `theme`, `initialBars` (120), `minBars` (20),
 `maxBarWidth` (18 — caps candle spacing so sparse series stay tight, right-anchored),
 `volumeRatio` (0.18), `rightPad`/`bottomPad`/`topPad`, `onCrosshair`, `indicators`,
-`oscillators`, `drawings`, `showVolume` (true), `logScale` (false), `fitContent` (false),
+`oscillators`, `drawings`, `showVolume` (true), `volumeProfile`, `baselinePrice`,
+`logScale` (false), `fitContent` (false),
 `maxBarWidth` (18) / `maxBodyWidth` (40), `priceFormat`/`timeFormat`, `priceTicks` (5) /
 `timeTicks` (7), `axisFont`, and `onNeedHistory`.
 
@@ -231,13 +316,19 @@ chart.destroy();
 - `buildOHLC(points, interval, transform?)` — bucket priced trades into OHLC+volume
   candles. `transform` = `{ denom, ethUsd, flip, supply }` (`supply` → market cap).
 - `transformPrice(p, transform?)` — apply the transform to one price.
-- `sma` / `ema` / `wma` / `vwap` / `bollingerBands` / `rsi` / `macd` / `computeIndicator`
-  — pure indicator math (aligned to input, null until the window fills).
+- `sma` / `ema` / `wma` / `vwap` / `bollingerBands` / `rsi` / `macd` / `stochastic` / `atr`
+  / `volumeProfile` / `heikinAshi` / `computeIndicator` — pure indicator + transform math
+  (aligned to input, null until the window fills).
 - `connectFeed(chart, feed, opts)` — wire a `ChartFeed` (paged history + live stream)
   to a chart: latest page, lazy older history, live merge. Returns `{ disconnect }`.
 - `hyperliquidFeed({ coin, interval, testnet })` — a ready `ChartFeed` (REST history +
   WebSocket live). `fetchHyperliquidCandles` / `fetchHlCandleWindow` / `mapHlCandles` /
   `HL_INTERVAL_SECONDS` are exported for custom fetching.
+- `polymarketFeed({ tokenId, bucketSeconds })` — a `ChartFeed` for a Polymarket outcome
+  (CLOB price-history + polling). `fetchPolymarketPriceHistory` is exported.
+- `signalsFeed({ token, bucketSeconds })` — a `ChartFeed` for a Signal Radar token: indexed
+  `allSwaps` → OHLC (lazy older pages) + a `/data`-polled live candle, spark fallback.
+  `fetchSignalsSwaps` / `fetchSignalsMarket` / `sparkCandles` are exported.
 - `draw(input)` — the pure render pass (exported for custom hosts/tests); returns the
   crosshair candle.
 - `DEFAULT_THEME` / `LIGHT_THEME` / `THEME_PRESETS`, `formatValue`, `formatAxisValue`
@@ -251,7 +342,13 @@ chart.destroy();
 ## Interaction
 
 - **Scroll** over the plot → zoom time; over the price axis → zoom price.
-- **Drag** the plot → pan; drag the time axis → zoom X; drag the price axis → zoom Y.
+- **Scroll horizontally** (trackpad swipe / shift+wheel) → pan through time; scrolling
+  back into history lazy-loads older candles from the feed.
+- **Drag** the plot → pan; drag the time axis → zoom X; drag the price axis → zoom Y. Panning
+  pins the oldest candle to the left edge (no dragging into empty space on the left); on a feed,
+  or with `PriceChart`'s `onLoadOlder`, reaching that edge streams in older history instead. You
+  *can* scroll past the newest candle into the future — drag it up to halfway across to leave
+  right-edge whitespace (so the current price isn't pinned to the edge).
 - **Hover** → crosshair + price/time axis labels + the OHLCV legend.
 - **Double-click** → reset zoom/pan (or delete a drawing when one is under the cursor).
 - **Touch** → one finger pans (or zooms an axis from its gutter); two-finger pinch

package/dist/core/chart.d.ts

@@ -1,4 +1,17 @@
 import type { AxisOptions, Candle, ChartOptions, ChartTheme, ChartType, DrawMode, Drawing, Indicator, Oscillator } from "./types";
+/**
+ * Whether a feed should be asked for older candles, given the loaded length and the
+ * current view. Returns true when the visible window's left edge is within ~one screen
+ * (`max(floor, visibleCount)`) of the start of loaded data — so zooming out / panning
+ * left keeps deepening the window (prefetching a viewport of buffer) instead of hitting
+ * a wall at the oldest loaded candle and just fattening the bars. Pure + exported so the
+ * prefetch trigger is testable without a DOM.
+ */
+export declare function needsHistory(length: number, count: number, offset: number, floor?: number): boolean;
+/** Largest pan offset that still fills the window — pins the OLDEST candle to the left edge
+ *  so a left-drag can't expose empty space past the start of the data. Pure + exported for
+ *  testing; the controller clamps every pan/zoom to it. */
+export declare function maxPanOffset(length: number, count: number): number;
 /**
  * Framework-agnostic candlestick/line chart with a volume panel. Creates and owns a
  * `<canvas>` inside the given container and wires the interactions:
@@ -30,6 +43,9 @@ export declare class Chart {
     private theme;
     private height;
     private candles;
+    /** Price-series candles (Heikin-Ashi in "heikin" mode), precomputed on data/type change
+     *  so the O(n) transform doesn't run every frame. */
+    private priceCandles;
     private indicators;
     private oscillators;
     private drawings;
@@ -47,6 +63,9 @@ export declare class Chart {
     private type;
     private showVolume;
     private logScale;
+    private emptyText?;
+    private baselinePrice?;
+    private volumeProfile?;
     private fitContent;
     private priceFormat?;
     private timeFormat?;
@@ -74,6 +93,12 @@ export declare class Chart {
     setShowVolume(on: boolean): this;
     /** Toggle the logarithmic price axis (equal pixels = equal % move). */
     setLogScale(on: boolean): this;
+    /** Set the empty-state text (e.g. "Loading…" while a feed's first page is in flight; "" hides it). */
+    setEmptyText(text: string | undefined): this;
+    /** Set the reference price for the `baseline` chart type (undefined = first visible close). */
+    setBaseline(price: number | undefined): this;
+    /** Show/configure (or hide, with `false`) the volume-by-price histogram. */
+    setVolumeProfile(config: ChartOptions["volumeProfile"]): this;
     /** Style the axes: fill-vs-tight candle spacing, custom price/time label formatters,
      *  tick counts, and the label font. Only the provided keys change. */
     setAxis(opts: AxisOptions): this;
@@ -105,6 +130,15 @@ export declare class Chart {
     private get volH();
     private get plotW();
     private measure;
+    /** Largest pan offset that still fills the window — pins the OLDEST candle to the left
+     *  edge instead of letting a left-drag expose empty space past the start of the data.
+     *  (When a feed is attached, reaching this edge trips the older-history load, so the
+     *  data deepens and this max grows; without one, the pan simply stops here.) */
+    private maxOffset;
+    /** Most-negative offset — how far the view may scroll PAST the newest candle into the
+     *  future (empty space on the right), so the user can pull the current price toward the
+     *  centre. Capped at half the visible window. */
+    private minOffset;
     private clampView;
     /** Assemble the {@link RenderInput} from current state — shared by render() and projection(). */
     private buildInput;
@@ -115,11 +149,19 @@ export declare class Chart {
     private scheduleRender;
     /** Recompute indicator value-series once when data or config changes (not per frame). */
     private recomputeOverlays;
-    /** When the view nears the start of loaded data, ask the feed for older candles
-     *  (once per data length, so it stops at the end of history). */
+    /** Recompute the price-series candles (Heikin-Ashi transform) on data/type change, so the
+     *  O(n) pass doesn't run on every redraw or projection lookup. */
+    private recomputePriceCandles;
+    /** When the view nears the start of loaded data, ask the feed for older candles. Fires
+     *  at most once per data length, so it advances page-by-page and stops at the end of
+     *  history. The trigger leads the left edge by ~one viewport (see {@link needsHistory}),
+     *  so zooming out keeps loading deeper data rather than stalling at the oldest candle. */
     private maybeRequestHistory;
     private region;
     private readonly onWheel;
+    /** Pan the time axis by a horizontal pixel delta (wheel/trackpad). Scrolling right
+     *  (`dx > 0`) moves toward newer candles; scrolling left walks back into history. */
+    private panByPixels;
     /** Zoom the time axis by factor `f`, keeping the candle under `cursorX` anchored. */
     private zoomTimeAt;
     /** Topmost drawing under the pointer (within tolerance), or null. */

package/dist/core/chart.js

@@ -1,7 +1,29 @@
 import { DEFAULT_THEME } from "./theme";
+import { heikinAshi } from "./ohlc";
 import { computeProjection, draw, resolveOverlays, slotWidth } from "./renderer";
 let drawingSeq = 0;
 const nextDrawingId = () => `d${++drawingSeq}`;
+/**
+ * Whether a feed should be asked for older candles, given the loaded length and the
+ * current view. Returns true when the visible window's left edge is within ~one screen
+ * (`max(floor, visibleCount)`) of the start of loaded data — so zooming out / panning
+ * left keeps deepening the window (prefetching a viewport of buffer) instead of hitting
+ * a wall at the oldest loaded candle and just fattening the bars. Pure + exported so the
+ * prefetch trigger is testable without a DOM.
+ */
+export function needsHistory(length, count, offset, floor = 8) {
+    if (length <= 0)
+        return false;
+    const visible = Math.min(count, length);
+    const start = Math.max(0, length - offset - visible);
+    return start <= Math.max(floor, visible);
+}
+/** Largest pan offset that still fills the window — pins the OLDEST candle to the left edge
+ *  so a left-drag can't expose empty space past the start of the data. Pure + exported for
+ *  testing; the controller clamps every pan/zoom to it. */
+export function maxPanOffset(length, count) {
+    return Math.max(0, length - Math.min(count, length));
+}
 /** Pixel distance from point P to segment A–B (for drawing hit-testing). */
 function distToSeg(px, py, ax, ay, bx, by) {
     const dx = bx - ax;
@@ -41,6 +63,9 @@ export class Chart {
     constructor(container, opts = {}) {
         this.container = container;
         this.candles = [];
+        /** Price-series candles (Heikin-Ashi in "heikin" mode), precomputed on data/type change
+         *  so the O(n) transform doesn't run every frame. */
+        this.priceCandles = [];
         this.indicators = [];
         this.oscillators = [];
         this.drawings = [];
@@ -70,6 +95,13 @@ export class Chart {
         this.lastActive = null;
         this.onWheel = (e) => {
             e.preventDefault();
+            // Horizontal intent (trackpad swipe / shift+wheel) pans through time — which lazy-loads
+            // older candles as the view nears the start (see maybeRequestHistory). Vertical zooms.
+            if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+                this.panByPixels(e.deltaX);
+                this.scheduleRender();
+                return;
+            }
             const f = e.deltaY > 0 ? 1.15 : 0.87;
             if (e.offsetX > this.plotW) {
                 this.yZoom = Math.min(50, Math.max(0.2, this.yZoom / f));
@@ -94,9 +126,9 @@ export class Chart {
                     this.render();
                     return;
                 }
-                if (this.drawMode === "trendline") {
+                if (this.drawMode === "trendline" || this.drawMode === "fib" || this.drawMode === "rect") {
                     const p = { time: proj.timeOfX(x), price: proj.priceOfY(y) };
-                    this.draftDrawing = { id: nextDrawingId(), type: "trendline", a: p, b: { ...p } };
+                    this.draftDrawing = { id: nextDrawingId(), type: this.drawMode, a: p, b: { ...p } };
                     this.render();
                     return;
                 }
@@ -271,6 +303,9 @@ export class Chart {
         this.onDrawingsChange = opts.onDrawingsChange;
         this.onDrawModeChange = opts.onDrawModeChange;
         this.logScale = opts.logScale ?? false;
+        this.emptyText = opts.emptyText;
+        this.baselinePrice = opts.baselinePrice;
+        this.volumeProfile = opts.volumeProfile;
         this.fitContent = opts.fitContent ?? true;
         this.priceFormat = opts.priceFormat;
         this.timeFormat = opts.timeFormat;
@@ -303,6 +338,7 @@ export class Chart {
     }
     setCandles(candles) {
         this.candles = candles;
+        this.recomputePriceCandles();
         this.recomputeOverlays();
         this.clampView();
         this.render();
@@ -315,6 +351,7 @@ export class Chart {
     }
     setChartType(type) {
         this.type = type;
+        this.recomputePriceCandles();
         this.render();
         return this;
     }
@@ -330,6 +367,24 @@ export class Chart {
         this.render();
         return this;
     }
+    /** Set the empty-state text (e.g. "Loading…" while a feed's first page is in flight; "" hides it). */
+    setEmptyText(text) {
+        this.emptyText = text;
+        this.render();
+        return this;
+    }
+    /** Set the reference price for the `baseline` chart type (undefined = first visible close). */
+    setBaseline(price) {
+        this.baselinePrice = price;
+        this.render();
+        return this;
+    }
+    /** Show/configure (or hide, with `false`) the volume-by-price histogram. */
+    setVolumeProfile(config) {
+        this.volumeProfile = config;
+        this.render();
+        return this;
+    }
     /** Style the axes: fill-vs-tight candle spacing, custom price/time label formatters,
      *  tick counts, and the label font. Only the provided keys change. */
     setAxis(opts) {
@@ -472,10 +527,23 @@ export class Chart {
         this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         this.render();
     }
+    /** Largest pan offset that still fills the window — pins the OLDEST candle to the left
+     *  edge instead of letting a left-drag expose empty space past the start of the data.
+     *  (When a feed is attached, reaching this edge trips the older-history load, so the
+     *  data deepens and this max grows; without one, the pan simply stops here.) */
+    maxOffset(count = this.view.count) {
+        return maxPanOffset(this.candles.length, count);
+    }
+    /** Most-negative offset — how far the view may scroll PAST the newest candle into the
+     *  future (empty space on the right), so the user can pull the current price toward the
+     *  centre. Capped at half the visible window. */
+    minOffset(count = this.view.count) {
+        return -Math.floor(Math.min(count, this.candles.length) / 2);
+    }
     clampView() {
         const n = this.candles.length;
         const count = Math.min(Math.max(this.minBars, this.view.count), Math.max(this.minBars, n || this.minBars));
-        const offset = Math.min(Math.max(0, this.view.offset), Math.max(0, n - this.minBars));
+        const offset = Math.min(Math.max(this.minOffset(count), this.view.offset), this.maxOffset(count));
         this.view = { count, offset };
     }
     /** Assemble the {@link RenderInput} from current state — shared by render() and projection(). */
@@ -485,6 +553,7 @@ export class Chart {
             width: this.width,
             height: this.height,
             candles: this.candles,
+            priceCandles: this.priceCandles,
             view: this.view,
             hover: this.hover,
             interval: this.interval,
@@ -501,6 +570,9 @@ export class Chart {
             drawPreview: this.draftDrawing,
             selectedDrawing: this.selectedDrawing,
             logScale: this.logScale,
+            emptyText: this.emptyText,
+            baselinePrice: this.baselinePrice,
+            volumeProfile: this.volumeProfile,
             fitContent: this.fitContent,
             priceFormat: this.priceFormat,
             timeFormat: this.timeFormat,
@@ -541,14 +613,19 @@ export class Chart {
     recomputeOverlays() {
         this.overlays = resolveOverlays(this.candles, this.indicators);
     }
-    /** When the view nears the start of loaded data, ask the feed for older candles
-     *  (once per data length, so it stops at the end of history). */
+    /** Recompute the price-series candles (Heikin-Ashi transform) on data/type change, so the
+     *  O(n) pass doesn't run on every redraw or projection lookup. */
+    recomputePriceCandles() {
+        this.priceCandles = this.type === "heikin" ? heikinAshi(this.candles) : this.candles;
+    }
+    /** When the view nears the start of loaded data, ask the feed for older candles. Fires
+     *  at most once per data length, so it advances page-by-page and stops at the end of
+     *  history. The trigger leads the left edge by ~one viewport (see {@link needsHistory}),
+     *  so zooming out keeps loading deeper data rather than stalling at the oldest candle. */
     maybeRequestHistory() {
         if (!this.onNeedHistory || !this.candles.length)
             return;
-        const end = this.candles.length - this.view.offset;
-        const start = Math.max(0, end - Math.min(this.view.count, this.candles.length));
-        if (start <= this.historyThreshold && this.historyReqLen !== this.candles.length) {
+        if (needsHistory(this.candles.length, this.view.count, this.view.offset, this.historyThreshold) && this.historyReqLen !== this.candles.length) {
             this.historyReqLen = this.candles.length;
             this.onNeedHistory();
         }
@@ -560,6 +637,16 @@ export class Chart {
             return "x";
         return "plot";
     }
+    /** Pan the time axis by a horizontal pixel delta (wheel/trackpad). Scrolling right
+     *  (`dx > 0`) moves toward newer candles; scrolling left walks back into history. */
+    panByPixels(dx) {
+        const n = this.candles.length;
+        if (!n)
+            return;
+        const cw = slotWidth(this.plotW, Math.min(this.view.count, n), this.maxBarWidth, this.fitContent) || 1;
+        const offset = Math.min(this.maxOffset(), Math.max(this.minOffset(), this.view.offset - Math.round(dx / cw)));
+        this.view = { ...this.view, offset };
+    }
     /** Zoom the time axis by factor `f`, keeping the candle under `cursorX` anchored. */
     zoomTimeAt(cursorX, f) {
         const n = this.candles.length;
@@ -572,7 +659,7 @@ export class Chart {
         const count = Math.round(Math.min(Math.max(this.minBars, this.view.count * f), Math.max(this.minBars, n)));
         const nVisNew = Math.min(count, n);
         const startNew = absUnder - Math.round(frac * (nVisNew - 1));
-        const offset = Math.max(0, Math.min(Math.max(0, n - this.minBars), n - startNew - nVisNew));
+        const offset = Math.max(0, Math.min(this.maxOffset(count), n - startNew - nVisNew));
         this.view = { count, offset };
     }
     /** Topmost drawing under the pointer (within tolerance), or null. */
@@ -584,6 +671,28 @@ export class Chart {
                 if (Math.abs(y - proj.yOfPrice(d.a.price)) <= TOL)
                     return d;
             }
+            else if (d.type === "fib" && d.b) {
+                const ax = proj.xOfTime(d.a.time);
+                const bx = proj.xOfTime(d.b.time);
+                if (x >= Math.min(ax, bx) - TOL) {
+                    const p0 = d.a.price;
+                    const p1 = d.b.price;
+                    for (const r of [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1]) {
+                        if (Math.abs(y - proj.yOfPrice(p0 + (p1 - p0) * r)) <= TOL)
+                            return d;
+                    }
+                }
+                if (distToSeg(x, y, ax, proj.yOfPrice(d.a.price), bx, proj.yOfPrice(d.b.price)) <= TOL)
+                    return d;
+            }
+            else if (d.type === "rect" && d.b) {
+                const ax = proj.xOfTime(d.a.time);
+                const ay = proj.yOfPrice(d.a.price);
+                const bx = proj.xOfTime(d.b.time);
+                const by = proj.yOfPrice(d.b.price);
+                if (x >= Math.min(ax, bx) - TOL && x <= Math.max(ax, bx) + TOL && y >= Math.min(ay, by) - TOL && y <= Math.max(ay, by) + TOL)
+                    return d;
+            }
             else if (d.b) {
                 const dist = distToSeg(x, y, proj.xOfTime(d.a.time), proj.yOfPrice(d.a.price), proj.xOfTime(d.b.time), proj.yOfPrice(d.b.price));
                 if (dist <= TOL)
@@ -618,11 +727,14 @@ export class Chart {
         }
         else if (d.reg === "x") {
             const n = this.candles.length;
-            this.view = { ...this.view, count: Math.min(Math.max(this.minBars, Math.round(d.count * Math.exp((clientX - d.x) / 260))), Math.max(this.minBars, n)) };
+            const count = Math.min(Math.max(this.minBars, Math.round(d.count * Math.exp((clientX - d.x) / 260))), Math.max(this.minBars, n));
+            // a wider window changes the offset bounds — re-clamp so zooming the x-axis never voids
+            // the left nor over-scrolls the right.
+            this.view = { count, offset: Math.min(this.maxOffset(count), Math.max(this.minOffset(count), this.view.offset)) };
         }
         else {
             const cw = slotWidth(this.plotW, Math.min(this.view.count, this.candles.length || 1), this.maxBarWidth, this.fitContent);
-            const offset = Math.max(0, Math.min(this.candles.length - this.minBars, d.offset + Math.round((clientX - d.x) / cw)));
+            const offset = Math.min(this.maxOffset(), Math.max(this.minOffset(), d.offset + Math.round((clientX - d.x) / cw)));
             this.view = { ...this.view, offset };
         }
         return true;

package/dist/core/feed.js

@@ -40,14 +40,24 @@ export function connectFeed(chart, feed, opts) {
             return;
         loadingOlder = true;
         try {
+            const oldest = buf.length ? buf[0].time : Infinity;
             const before = buf.length ? buf[0].time * 1000 : undefined;
             const older = await feed.loadHistory({ interval: opts.interval, before, limit });
-            const seen = new Set(buf.map((c) => c.time));
-            const fresh = older.filter((c) => !seen.has(c.time)).sort((a, b) => a.time - b.time);
-            if (fresh.length === 0)
+            // Merge by time. An incoming candle for an EXISTING bucket replaces it — a feed that
+            // re-buckets accumulated data (e.g. signalsFeed) returns a more-complete boundary
+            // candle than the partial one already shown. Strictly-older candles extend history.
+            // Stop only when nothing older than the current oldest arrives.
+            let addedOlder = false;
+            const byTime = new Map(buf.map((c) => [c.time, c]));
+            for (const c of older) {
+                if (c.time < oldest)
+                    addedOlder = true;
+                byTime.set(c.time, c);
+            }
+            if (!addedOlder)
                 exhausted = true;
             else
-                push([...fresh, ...buf]);
+                push([...byTime.values()].sort((a, b) => a.time - b.time));
         }
         catch (e) {
             opts.onError?.(e);
@@ -58,6 +68,10 @@ export function connectFeed(chart, feed, opts) {
     };
     chart.setInterval(opts.interval);
     chart.setNeedHistory(() => void loadOlder());
+    // Clear any candles from a previous connection (e.g. an interval switch reconnects with a
+    // new feed): otherwise the old bars linger, mislabeled at the new interval, until the first
+    // page arrives. Reset to empty so the host's loading state shows instead of stale data.
+    chart.setCandles([]);
     // initial page + live subscription
     void (async () => {
         try {
@@ -67,12 +81,19 @@ export function connectFeed(chart, feed, opts) {
         catch (e) {
             opts.onError?.(e);
         }
-        if (feed.subscribe) {
-            unsub = feed.subscribe({ interval: opts.interval }, (c) => {
+        // Guard against a disconnect that happened DURING the initial load: don't open a live
+        // stream after teardown (it would leak a WebSocket / poll timer), and if disconnect
+        // races the subscribe call, tear the stream down immediately.
+        if (feed.subscribe && live) {
+            const u = feed.subscribe({ interval: opts.interval }, (c) => {
                 const next = mergeLive(buf, c);
                 if (next !== buf)
                     push(next);
             });
+            if (live)
+                unsub = u;
+            else
+                u();
         }
     })();
     return {