trendkit 0.1.0

package/dist/chunk-AEC4653J.js

@@ -0,0 +1,1220 @@
+import { LineSeries, HistogramSeries } from 'lightweight-charts';
+
+// src/core/interaction.ts
+var InteractionController = class {
+  constructor(options) {
+    this.options = options;
+    this.state = { name: "idle" };
+    this.activeTool = null;
+    this.savedScroll = true;
+    this.savedScale = true;
+    this.onPointerDown = (event) => {
+      if (event.button !== 0) return;
+      const at = this.local(event);
+      if (this.activeTool !== null) {
+        this.beginPlacing(this.activeTool, at);
+        event.preventDefault();
+        return;
+      }
+      const hit = this.options.hits.hitTestDetailed(at);
+      if (hit.kind === "none") {
+        this.options.store.select(null);
+        return;
+      }
+      const drawing = this.options.store.get(hit.id);
+      if (drawing === void 0) return;
+      this.options.store.select(hit.id);
+      this.suppressChartGestures();
+      this.state = {
+        name: "dragging",
+        id: hit.id,
+        handle: hit.kind === "handle" ? hit.index : null,
+        from: this.toPoint(at, false),
+        grabbed: drawing.points.map((p) => ({ ...p }))
+      };
+      event.preventDefault();
+    };
+    this.onPointerMove = (event) => {
+      const at = this.local(event);
+      if (this.state.name === "idle") {
+        if (this.activeTool === null) {
+          const hit = this.options.hits.hitTestDetailed(at);
+          this.element.style.cursor = hit.kind === "handle" ? "grab" : hit.kind === "body" ? "move" : "";
+        }
+        return;
+      }
+      if (this.state.name === "placing") {
+        const point = this.toPoint(at, event.shiftKey);
+        const drawing2 = this.options.store.get(this.state.id);
+        if (drawing2 === void 0) return;
+        const points2 = [...drawing2.points];
+        const moving = Math.min(this.state.placed, this.options.pointCount(this.state.tool) - 1);
+        points2[moving] = point;
+        this.options.store.update(this.state.id, { points: points2 }, { undoable: false });
+        return;
+      }
+      const now = this.toPoint(at, event.shiftKey);
+      const drawing = this.options.store.get(this.state.id);
+      if (drawing === void 0) return;
+      if (this.state.handle !== null) {
+        const points2 = [...drawing.points];
+        points2[this.state.handle] = now;
+        this.options.store.update(this.state.id, { points: points2 }, { undoable: false });
+      } else {
+        const dPrice = now.price - this.state.from.price;
+        const dLogical = now.logical - this.state.from.logical;
+        const points2 = this.state.grabbed.map((p) => this.shift(p, dLogical, dPrice));
+        this.options.store.update(this.state.id, { points: points2 }, { undoable: false });
+      }
+    };
+    this.onPointerUp = () => {
+      if (this.state.name === "placing") {
+        const needed = this.options.pointCount(this.state.tool);
+        const placed = this.state.placed + 1;
+        if (placed >= needed) {
+          if (this.options.isTransient(this.state.tool)) {
+            this.setActiveTool(null);
+            this.options.store.remove(this.state.id, { undoable: false });
+          } else {
+            this.options.store.update(this.state.id, { draft: false }, { undoable: false });
+            this.finishPlacing(this.state.id);
+          }
+        } else {
+          this.state = { ...this.state, placed };
+          return;
+        }
+      } else if (this.state.name === "dragging") {
+        this.state = { name: "idle" };
+        this.restoreChartGestures();
+        return;
+      }
+      this.state = { name: "idle" };
+      this.restoreChartGestures();
+    };
+    // -- keyboard -------------------------------------------------------------
+    this.onKeyDown = (event) => {
+      const target = event.target;
+      if (target !== null && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName))) {
+        return;
+      }
+      const mod = event.metaKey || event.ctrlKey;
+      if (event.key === "Escape") {
+        if (this.state.name === "placing") {
+          this.options.store.remove(this.state.id);
+          this.state = { name: "idle" };
+          this.restoreChartGestures();
+        }
+        this.setActiveTool(null);
+        this.options.store.select(null);
+        return;
+      }
+      if (mod && event.key.toLowerCase() === "z") {
+        event.preventDefault();
+        if (event.shiftKey) this.options.store.redo();
+        else this.options.store.undo();
+        return;
+      }
+      if (event.key === "Backspace" || event.key === "Delete") {
+        const selected = this.options.store.selectedId();
+        if (selected !== null) {
+          event.preventDefault();
+          this.options.store.remove(selected);
+        }
+      }
+    };
+    this.element = options.chart.chartElement();
+    this.element.addEventListener("pointerdown", this.onPointerDown);
+    this.element.addEventListener("pointermove", this.onPointerMove);
+    window.addEventListener("pointerup", this.onPointerUp);
+    window.addEventListener("keydown", this.onKeyDown);
+  }
+  destroy() {
+    this.element.removeEventListener("pointerdown", this.onPointerDown);
+    this.element.removeEventListener("pointermove", this.onPointerMove);
+    window.removeEventListener("pointerup", this.onPointerUp);
+    window.removeEventListener("keydown", this.onKeyDown);
+    this.restoreChartGestures();
+  }
+  /** Arm a tool. The next drag on the chart draws one, then disarms. */
+  setActiveTool(tool) {
+    this.activeTool = tool;
+    this.element.style.cursor = tool === null ? "" : "crosshair";
+  }
+  getActiveTool() {
+    return this.activeTool;
+  }
+  // -- pointer --------------------------------------------------------------
+  local(event) {
+    const rect = this.element.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  }
+  beginPlacing(tool, at) {
+    const id = globalThis.crypto?.randomUUID?.() ?? `d${String(Date.now())}${String(Math.random())}`;
+    const point = this.toPoint(at, false);
+    const needed = this.options.pointCount(tool);
+    this.suppressChartGestures();
+    this.options.store.add({
+      id,
+      tool,
+      points: Array.from({ length: needed }, () => ({ ...point })),
+      draft: true
+    });
+    this.state = { name: "placing", id, tool, placed: 1 };
+  }
+  finishPlacing(id) {
+    this.setActiveTool(null);
+    this.options.store.select(id);
+  }
+  // -- coordinates ----------------------------------------------------------
+  /**
+   * Pixels to a data-space anchor.
+   *
+   * `magnet` snaps the price to the nearest of the bar's open/high/low/close
+   * when the pointer is close to one. Traders anchor to actual highs and lows
+   * constantly -- a trendline off by two paise looks wrong and misprices
+   * every projection off it -- and hitting an exact value by hand at this
+   * zoom is impossible. Holding shift turns it off for freehand placement.
+   */
+  toPoint(at, disableMagnet) {
+    const timeScale = this.options.chart.timeScale();
+    const logical = timeScale.coordinateToLogical(at.x) ?? 0;
+    const time = timeScale.coordinateToTime(at.x);
+    const rawPrice = this.options.series.coordinateToPrice(at.y);
+    const price = rawPrice === null ? 0 : Number(rawPrice);
+    const magnetPx = this.options.magnetPx ?? 0;
+    if (disableMagnet || magnetPx <= 0) return { time, logical, price };
+    const snapped = this.snapToBar(logical, at.y, magnetPx);
+    return { time, logical, price: snapped ?? price };
+  }
+  /** Nearest OHLC of the bar under the cursor, if it is within `within` px. */
+  snapToBar(logical, y, within) {
+    const bar = this.options.series.dataByIndex(Math.round(logical));
+    if (bar === null || bar === void 0) return null;
+    const candle = bar;
+    const candidates = [candle.open, candle.high, candle.low, candle.close].filter(
+      (v) => typeof v === "number"
+    );
+    if (candidates.length === 0) return null;
+    let best = null;
+    let bestDistance = within;
+    for (const value of candidates) {
+      const coordinate = this.options.series.priceToCoordinate(value);
+      if (coordinate === null) continue;
+      const distance = Math.abs(coordinate - y);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        best = value;
+      }
+    }
+    return best;
+  }
+  /** Move an anchor by a delta expressed in bars and price. */
+  shift(point, dLogical, dPrice) {
+    const logical = point.logical + dLogical;
+    const time = this.options.chart.timeScale().coordinateToTime(
+      this.options.chart.timeScale().logicalToCoordinate(logical) ?? 0
+    );
+    return { time, logical, price: point.price + dPrice };
+  }
+  // -- chart gesture suppression -------------------------------------------
+  suppressChartGestures() {
+    const current = this.options.chart.options();
+    this.savedScroll = current.handleScroll;
+    this.savedScale = current.handleScale;
+    this.options.chart.applyOptions({ handleScroll: false, handleScale: false });
+  }
+  restoreChartGestures() {
+    this.options.chart.applyOptions({
+      handleScroll: this.savedScroll,
+      handleScale: this.savedScale
+    });
+  }
+};
+
+// src/core/serialise.ts
+var SNAPSHOT_VERSION = 1;
+function toSnapshot(drawings) {
+  return {
+    version: SNAPSHOT_VERSION,
+    drawings: drawings.filter((d) => d.draft !== true).map((d) => ({ ...d, points: d.points.map((p) => ({ ...p })) }))
+  };
+}
+function fromSnapshot(snapshot) {
+  if (snapshot.version !== SNAPSHOT_VERSION) {
+    throw new Error(
+      `trendkit: snapshot version ${String(snapshot.version)} is not supported by this build (expected ${String(SNAPSHOT_VERSION)})`
+    );
+  }
+  return snapshot.drawings.map((d) => ({
+    ...d,
+    points: d.points.map((p) => ({ ...p })),
+    // A stored drawing is never a draft, whatever the blob claims.
+    draft: false
+  }));
+}
+
+// src/core/store.ts
+var DrawingStore = class {
+  constructor() {
+    this.items = [];
+    this.selected = null;
+    this.listeners = /* @__PURE__ */ new Set();
+    /** Undo history. Snapshots, not diffs -- drawings are small and few. */
+    this.past = [];
+    this.future = [];
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    for (const listener of this.listeners) listener();
+  }
+  /** Snapshot for undo. Called before any mutation that should be undoable. */
+  checkpoint() {
+    this.past.push(structuredClone(this.items));
+    this.future.length = 0;
+    if (this.past.length > 100) this.past.shift();
+  }
+  all() {
+    return this.items;
+  }
+  selectedId() {
+    return this.selected;
+  }
+  get(id) {
+    return this.items.find((d) => d.id === id);
+  }
+  add(drawing, options = {}) {
+    if (options.undoable !== false) this.checkpoint();
+    this.items.push(drawing);
+    this.notify();
+  }
+  update(id, patch, options = {}) {
+    const index = this.items.findIndex((d) => d.id === id);
+    if (index === -1) return;
+    const current = this.items[index];
+    if (current === void 0) return;
+    if (options.undoable === true) this.checkpoint();
+    this.items[index] = { ...current, ...patch };
+    this.notify();
+  }
+  remove(id, options = {}) {
+    const index = this.items.findIndex((d) => d.id === id);
+    if (index === -1) return;
+    if (options.undoable !== false) this.checkpoint();
+    this.items.splice(index, 1);
+    if (this.selected === id) this.selected = null;
+    this.notify();
+  }
+  select(id) {
+    if (this.selected === id) return;
+    this.selected = id;
+    this.notify();
+  }
+  replaceAll(drawings) {
+    this.checkpoint();
+    this.items = drawings;
+    this.selected = null;
+    this.notify();
+  }
+  undo() {
+    const previous = this.past.pop();
+    if (previous === void 0) return;
+    this.future.push(structuredClone(this.items));
+    this.items = previous;
+    this.selected = null;
+    this.notify();
+  }
+  redo() {
+    const next = this.future.pop();
+    if (next === void 0) return;
+    this.past.push(structuredClone(this.items));
+    this.items = next;
+    this.selected = null;
+    this.notify();
+  }
+  canUndo() {
+    return this.past.length > 0;
+  }
+  canRedo() {
+    return this.future.length > 0;
+  }
+};
+
+// src/render/primitive.ts
+var HIT_TOLERANCE = 6;
+var HANDLE_RADIUS = 7;
+var TrendkitPrimitive = class {
+  constructor(chart, series, source) {
+    this.chart = chart;
+    this.series = series;
+    this.source = source;
+    /** Cached axis views, and the signature they were built from. */
+    this.axisViews = [];
+    this.axisSignature = "";
+    /**
+     * Resolve a data-space anchor to pixels.
+     *
+     * Time first, logical as the fallback. `timeToCoordinate` returns null for
+     * anything past the last bar -- which is exactly where a user drags a
+     * trendline to project it forward -- and `logicalToCoordinate` keeps
+     * counting into that empty space.
+     */
+    this.toScreen = (point) => {
+      const timeScale = this.chart.timeScale();
+      const x = (point.time !== null ? timeScale.timeToCoordinate(point.time) : null) ?? timeScale.logicalToCoordinate(point.logical);
+      const y = this.series.priceToCoordinate(point.price);
+      if (x === null || y === null) return null;
+      return { x, y };
+    };
+    this.toY = (price) => this.series.priceToCoordinate(price);
+    const renderer = {
+      draw: (target) => {
+        target.useBitmapCoordinateSpace((scope) => {
+          const context = this.context(
+            scope.context,
+            scope.horizontalPixelRatio,
+            scope.mediaSize.width,
+            scope.mediaSize.height
+          );
+          const selected = this.source.selectedId();
+          for (const drawing of this.source.drawings()) {
+            const tool = this.source.tool(drawing.tool);
+            tool?.draw(drawing, drawing.id === selected, context);
+          }
+        });
+      }
+    };
+    this.view = {
+      // Above the series. A trendline drawn behind the candles it references
+      // is worse than useless -- the candles are exactly what it marks.
+      zOrder: () => "top",
+      renderer: () => renderer
+    };
+  }
+  // -- ISeriesPrimitive -----------------------------------------------------
+  attached(param) {
+    this.requestUpdate = param.requestUpdate;
+  }
+  detached() {
+    this.requestUpdate = void 0;
+  }
+  /**
+   * Called by the library before it re-reads the views.
+   *
+   * A no-op only because everything here is computed lazily inside the
+   * renderer and `priceAxisViews`. It still has to EXIST: without it the
+   * library has no signal that this primitive's views may have changed, and
+   * keeps the empty axis-view array it collected at attach time -- so axis
+   * labels never appear no matter how many drawings are added.
+   */
+  updateAllViews() {
+  }
+  paneViews() {
+    return [this.view];
+  }
+  /**
+   * Price-scale labels for every drawing that wants one.
+   *
+   * Rebuilt only when the set of labelled prices actually changes. The
+   * library caches on array IDENTITY, so returning a fresh array each call
+   * invalidates that cache on every frame of every pan -- the interface
+   * documentation asks for this explicitly.
+   */
+  priceAxisViews() {
+    const wanted = [];
+    for (const drawing of this.source.drawings()) {
+      const tool = this.source.tool(drawing.tool);
+      for (const price of tool?.axisPrices?.(drawing) ?? []) {
+        wanted.push({
+          price,
+          colour: drawing.style?.colour ?? this.source.theme().accent
+        });
+      }
+    }
+    const signature = wanted.map((w) => `${String(w.price)}:${w.colour}`).join("|");
+    if (signature === this.axisSignature) return this.axisViews;
+    this.axisSignature = signature;
+    this.axisViews = wanted.map(({ price, colour }) => ({
+      coordinate: () => this.series.priceToCoordinate(price) ?? -100,
+      text: () => this.formatPrice(price),
+      textColor: () => "#ffffff",
+      backColor: () => colour
+    }));
+    return this.axisViews;
+  }
+  /**
+   * What the pointer is over, in the form Lightweight Charts wants.
+   *
+   * `externalId` encodes the target so the interaction controller can decode
+   * it without hit-testing a second time: `handle:<id>:<index>` or
+   * `body:<id>`. The library gives us one string, so it carries the lot.
+   */
+  hitTest(x, y) {
+    const hit = this.hitTestDetailed({ x, y });
+    if (hit.kind === "none") return null;
+    return {
+      externalId: hit.kind === "handle" ? `handle:${hit.id}:${hit.index}` : `body:${hit.id}`,
+      zOrder: "top",
+      cursorStyle: hit.kind === "handle" ? "grab" : "move"
+    };
+  }
+  // -- Used by the interaction controller -----------------------------------
+  /** Ask the chart to repaint. Called whenever the store changes. */
+  update() {
+    this.requestUpdate?.();
+  }
+  /**
+   * Full hit test, in priority order.
+   *
+   * Handles before bodies, and the selected drawing before the rest. Both
+   * matter: a handle sits on top of its own body, so testing bodies first
+   * would make endpoints ungrabbable; and once something is selected the user
+   * is working on it, so it should win ties against whatever it overlaps.
+   */
+  hitTestDetailed(at) {
+    const context = this.contextForHitTest();
+    if (context === null) return { kind: "none" };
+    const drawings = this.source.drawings();
+    const selectedId = this.source.selectedId();
+    const ordered = [...drawings].sort((a, b) => {
+      if (a.id === selectedId) return 1;
+      if (b.id === selectedId) return -1;
+      return 0;
+    });
+    for (let i = ordered.length - 1; i >= 0; i--) {
+      const drawing = ordered[i];
+      if (drawing === void 0) continue;
+      for (let index = 0; index < drawing.points.length; index++) {
+        const point = drawing.points[index];
+        if (point === void 0) continue;
+        const screen = context.toScreen(point);
+        if (screen === null) continue;
+        if (Math.hypot(at.x - screen.x, at.y - screen.y) <= HANDLE_RADIUS) {
+          return { kind: "handle", id: drawing.id, index };
+        }
+      }
+    }
+    for (let i = ordered.length - 1; i >= 0; i--) {
+      const drawing = ordered[i];
+      if (drawing === void 0) continue;
+      const tool = this.source.tool(drawing.tool);
+      const distance = tool?.distance(drawing, at, context);
+      if (distance !== null && distance !== void 0 && distance <= HIT_TOLERANCE) {
+        return { kind: "body", id: drawing.id };
+      }
+    }
+    return { kind: "none" };
+  }
+  context(ctx, ratio, width, height) {
+    return {
+      ctx,
+      ratio,
+      width,
+      height,
+      theme: this.source.theme(),
+      toScreen: this.toScreen,
+      toY: this.toY
+    };
+  }
+  /**
+   * Format a price for an axis label.
+   *
+   * Uses the series' own formatter where it has one, so a drawing's label
+   * matches the scale beside it -- a chart reading 1,240.50 on the axis and
+   * 1240.5 on a drawing looks like two different numbers at a glance.
+   */
+  formatPrice(price) {
+    const format = this.series.priceFormatter;
+    if (typeof format === "function") {
+      try {
+        return format.call(this.series).format(price);
+      } catch {
+      }
+    }
+    return price.toFixed(2);
+  }
+  /** The same context minus the canvas, for hit tests outside a paint. */
+  contextForHitTest() {
+    return {
+      ratio: 1,
+      width: this.chart.timeScale().width(),
+      height: 0,
+      theme: this.source.theme(),
+      toScreen: this.toScreen,
+      toY: this.toY
+    };
+  }
+};
+
+// src/render/theme.ts
+var LIGHT_THEME = {
+  accent: "#2962ff",
+  selection: "#2962ff",
+  text: "#131722",
+  labelBackground: "#ffffffe6",
+  fill: "#2962ff1f"
+};
+var DARK_THEME = {
+  accent: "#5b8def",
+  selection: "#5b8def",
+  text: "#d1d4dc",
+  labelBackground: "#1e222de6",
+  fill: "#5b8def24"
+};
+
+// src/core/geometry.ts
+function distanceToSegment(p, a, b) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const lengthSquared = dx * dx + dy * dy;
+  if (lengthSquared === 0) return Math.hypot(p.x - a.x, p.y - a.y);
+  const t = Math.max(
+    0,
+    Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / lengthSquared)
+  );
+  return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+function distanceToHorizontal(p, y) {
+  return Math.abs(p.y - y);
+}
+function distanceToRect(p, a, b) {
+  const left = Math.min(a.x, b.x);
+  const right = Math.max(a.x, b.x);
+  const top = Math.min(a.y, b.y);
+  const bottom = Math.max(a.y, b.y);
+  if (p.x >= left && p.x <= right && p.y >= top && p.y <= bottom) return 0;
+  const dx = Math.max(left - p.x, 0, p.x - right);
+  const dy = Math.max(top - p.y, 0, p.y - bottom);
+  return Math.hypot(dx, dy);
+}
+var FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+function fibonacciPrices(from, to) {
+  const span = to - from;
+  return FIB_LEVELS.map((level) => from + span * level);
+}
+function percentChange(from, to) {
+  if (from === 0) return 0;
+  return (to - from) / Math.abs(from) * 100;
+}
+
+// src/render/draw.ts
+function toBitmap(value, ratio) {
+  return Math.round(value * ratio);
+}
+function snapLine(value, ratio, width) {
+  const scaled = Math.round(value * ratio);
+  return width % 2 === 1 ? scaled + 0.5 : scaled;
+}
+function dashPattern(style, ratio) {
+  switch (style) {
+    case "dashed":
+      return [6 * ratio, 4 * ratio];
+    case "dotted":
+      return [1 * ratio, 3 * ratio];
+    case "solid":
+      return [];
+  }
+}
+function strokeSegment(ctx, a, b, options) {
+  const { colour, width, style = "solid", ratio } = options;
+  const deviceWidth = Math.max(1, Math.round(width * ratio));
+  ctx.save();
+  ctx.strokeStyle = colour;
+  ctx.lineWidth = deviceWidth;
+  ctx.setLineDash(dashPattern(style, ratio));
+  ctx.beginPath();
+  ctx.moveTo(snapLine(a.x, ratio, deviceWidth), snapLine(a.y, ratio, deviceWidth));
+  ctx.lineTo(snapLine(b.x, ratio, deviceWidth), snapLine(b.y, ratio, deviceWidth));
+  ctx.stroke();
+  ctx.restore();
+}
+function fillRect(ctx, a, b, colour, ratio) {
+  const x = toBitmap(Math.min(a.x, b.x), ratio);
+  const y = toBitmap(Math.min(a.y, b.y), ratio);
+  const w = toBitmap(Math.abs(b.x - a.x), ratio);
+  const h = toBitmap(Math.abs(b.y - a.y), ratio);
+  ctx.save();
+  ctx.fillStyle = colour;
+  ctx.fillRect(x, y, w, h);
+  ctx.restore();
+}
+function drawHandle(ctx, point, colour, ratio, radius = 4) {
+  const r = radius * ratio;
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(toBitmap(point.x, ratio), toBitmap(point.y, ratio), r, 0, Math.PI * 2);
+  ctx.fillStyle = "#ffffff";
+  ctx.fill();
+  ctx.lineWidth = Math.max(1, Math.round(1.5 * ratio));
+  ctx.strokeStyle = colour;
+  ctx.stroke();
+  ctx.restore();
+}
+function drawLabel(ctx, text, at, options) {
+  const { colour, background, ratio, align = "left" } = options;
+  const fontSize = Math.round(11 * ratio);
+  const padX = Math.round(4 * ratio);
+  const padY = Math.round(2 * ratio);
+  ctx.save();
+  ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+  ctx.textBaseline = "middle";
+  const width = ctx.measureText(text).width;
+  const x = align === "right" ? toBitmap(at.x, ratio) - width - padX * 2 : toBitmap(at.x, ratio);
+  const y = toBitmap(at.y, ratio);
+  ctx.fillStyle = background;
+  ctx.fillRect(x, y - fontSize / 2 - padY, width + padX * 2, fontSize + padY * 2);
+  ctx.fillStyle = colour;
+  ctx.fillText(text, x + padX, y);
+  ctx.restore();
+}
+
+// src/tools/trendline.ts
+var Trendline = {
+  id: "trendline",
+  pointCount: 2,
+  draw(drawing, selected, context) {
+    const [start, end] = resolve(drawing, context);
+    if (start === null || end === null) return;
+    const style = drawing.style ?? {};
+    strokeSegment(context.ctx, start, end, {
+      colour: style.colour ?? context.theme.accent,
+      width: style.lineWidth ?? 2,
+      style: style.lineStyle ?? "solid",
+      ratio: context.ratio
+    });
+    if (selected) {
+      const colour = context.theme.selection;
+      drawHandle(context.ctx, start, colour, context.ratio);
+      drawHandle(context.ctx, end, colour, context.ratio);
+    }
+  },
+  distance(drawing, at, context) {
+    const [start, end] = resolve(drawing, context);
+    if (start === null || end === null) return null;
+    return distanceToSegment(at, start, end);
+  }
+};
+function resolve(drawing, context) {
+  const a = drawing.points[0];
+  const b = drawing.points[1];
+  return [
+    a === void 0 ? null : context.toScreen(a),
+    b === void 0 ? null : context.toScreen(b)
+  ];
+}
+
+// src/tools/horizontal-ray.ts
+var HorizontalRay = {
+  id: "horizontal-ray",
+  pointCount: 1,
+  draw(drawing, selected, context) {
+    const anchor = drawing.points[0];
+    if (anchor === void 0) return;
+    const at = context.toScreen(anchor);
+    if (at === null) return;
+    const style = drawing.style ?? {};
+    const colour = style.colour ?? context.theme.accent;
+    strokeSegment(
+      context.ctx,
+      { x: at.x, y: at.y },
+      // To the right edge, not to a second anchor.
+      { x: context.width, y: at.y },
+      {
+        colour,
+        width: style.lineWidth ?? 2,
+        style: style.lineStyle ?? "solid",
+        ratio: context.ratio
+      }
+    );
+    if (selected) drawHandle(context.ctx, at, context.theme.selection, context.ratio);
+  },
+  axisPrices(drawing) {
+    const anchor = drawing.points[0];
+    return anchor === void 0 ? [] : [anchor.price];
+  },
+  distance(drawing, at, context) {
+    const anchor = drawing.points[0];
+    if (anchor === void 0) return null;
+    const screen = context.toScreen(anchor);
+    if (screen === null) return null;
+    if (at.x < screen.x) return null;
+    return distanceToHorizontal(at, screen.y);
+  }
+};
+
+// src/tools/fibonacci.ts
+var BAND_ALPHA = "14";
+var Fibonacci = {
+  id: "fibonacci",
+  pointCount: 2,
+  draw(drawing, selected, context) {
+    const a = drawing.points[0];
+    const b = drawing.points[1];
+    if (a === void 0 || b === void 0) return;
+    const pa = context.toScreen(a);
+    const pb = context.toScreen(b);
+    if (pa === null || pb === null) return;
+    const colour = drawing.style?.colour ?? context.theme.accent;
+    const left = Math.min(pa.x, pb.x);
+    const right = Math.max(pa.x, pb.x);
+    const prices = fibonacciPrices(a.price, b.price);
+    for (let i = 0; i < prices.length - 1; i++) {
+      const top = yOf(prices[i], context);
+      const bottom = yOf(prices[i + 1], context);
+      if (top === null || bottom === null) continue;
+      if (i % 2 === 0) continue;
+      fillRect(
+        context.ctx,
+        { x: left, y: top },
+        { x: right, y: bottom },
+        `${colour}${BAND_ALPHA}`,
+        context.ratio
+      );
+    }
+    prices.forEach((price, i) => {
+      const y = yOf(price, context);
+      if (y === null) return;
+      const level = FIB_LEVELS[i] ?? 0;
+      strokeSegment(
+        context.ctx,
+        { x: left, y },
+        { x: right, y },
+        {
+          colour,
+          // The 0.618 line drawn heavier: it is the one people act on, and a
+          // ladder of seven identical lines makes it hunt for.
+          width: level === 0.618 ? 2 : 1,
+          style: level === 0 || level === 1 ? "solid" : "dashed",
+          ratio: context.ratio
+        }
+      );
+      drawLabel(context.ctx, `${level.toFixed(3)}  ${price.toFixed(2)}`, { x: left + 4, y }, {
+        colour: context.theme.text,
+        background: context.theme.labelBackground,
+        ratio: context.ratio
+      });
+    });
+    if (selected) {
+      drawHandle(context.ctx, pa, context.theme.selection, context.ratio);
+      drawHandle(context.ctx, pb, context.theme.selection, context.ratio);
+    }
+  },
+  distance(drawing, at, context) {
+    const a = drawing.points[0];
+    const b = drawing.points[1];
+    if (a === void 0 || b === void 0) return null;
+    const pa = context.toScreen(a);
+    const pb = context.toScreen(b);
+    if (pa === null || pb === null) return null;
+    return distanceToRect(at, pa, pb);
+  }
+};
+function yOf(price, context) {
+  return price === void 0 ? null : context.toY(price);
+}
+
+// src/tools/rectangle.ts
+var Rectangle = {
+  id: "rectangle",
+  pointCount: 2,
+  draw(drawing, selected, context) {
+    const a = drawing.points[0];
+    const b = drawing.points[1];
+    if (a === void 0 || b === void 0) return;
+    const pa = context.toScreen(a);
+    const pb = context.toScreen(b);
+    if (pa === null || pb === null) return;
+    const style = drawing.style ?? {};
+    const colour = style.colour ?? context.theme.accent;
+    fillRect(context.ctx, pa, pb, style.fill ?? context.theme.fill, context.ratio);
+    const corners = [
+      [{ x: pa.x, y: pa.y }, { x: pb.x, y: pa.y }],
+      [{ x: pb.x, y: pa.y }, { x: pb.x, y: pb.y }],
+      [{ x: pb.x, y: pb.y }, { x: pa.x, y: pb.y }],
+      [{ x: pa.x, y: pb.y }, { x: pa.x, y: pa.y }]
+    ];
+    for (const [from, to] of corners) {
+      strokeSegment(context.ctx, from, to, {
+        colour,
+        width: style.lineWidth ?? 1,
+        style: style.lineStyle ?? "solid",
+        ratio: context.ratio
+      });
+    }
+    if (selected) {
+      drawHandle(context.ctx, pa, context.theme.selection, context.ratio);
+      drawHandle(context.ctx, pb, context.theme.selection, context.ratio);
+    }
+  },
+  axisPrices(drawing) {
+    return drawing.points.map((p) => p.price);
+  },
+  distance(drawing, at, context) {
+    const a = drawing.points[0];
+    const b = drawing.points[1];
+    if (a === void 0 || b === void 0) return null;
+    const pa = context.toScreen(a);
+    const pb = context.toScreen(b);
+    if (pa === null || pb === null) return null;
+    return distanceToRect(at, pa, pb);
+  }
+};
+
+// src/tools/measure.ts
+var Measure = {
+  id: "measure",
+  pointCount: 2,
+  transient: true,
+  draw(drawing, _selected, context) {
+    const a = drawing.points[0];
+    const b = drawing.points[1];
+    if (a === void 0 || b === void 0) return;
+    const pa = context.toScreen(a);
+    const pb = context.toScreen(b);
+    if (pa === null || pb === null) return;
+    const up = b.price >= a.price;
+    const colour = up ? "#26a69a" : "#ef5350";
+    fillRect(context.ctx, pa, pb, `${colour}1f`, context.ratio);
+    strokeSegment(context.ctx, pa, pb, {
+      colour,
+      width: 1,
+      style: "dashed",
+      ratio: context.ratio
+    });
+    const change = percentChange(a.price, b.price);
+    const delta = b.price - a.price;
+    const bars = Math.abs(Math.round(b.logical - a.logical));
+    const text = `${delta >= 0 ? "+" : ""}${delta.toFixed(2)}  (${change >= 0 ? "+" : ""}${change.toFixed(2)}%)  ${String(bars)} ${bars === 1 ? "bar" : "bars"}`;
+    drawLabel(
+      context.ctx,
+      text,
+      { x: Math.min(pa.x, pb.x) + 6, y: up ? Math.min(pa.y, pb.y) - 12 : Math.max(pa.y, pb.y) + 12 },
+      {
+        colour: "#ffffff",
+        background: colour,
+        ratio: context.ratio
+      }
+    );
+  },
+  distance() {
+    return null;
+  }
+};
+
+// src/indicators/math.ts
+function sma(values, period) {
+  if (period <= 0) throw new Error("sma: period must be positive");
+  const out = [];
+  let sum = 0;
+  for (let i = 0; i < values.length; i++) {
+    sum += values[i] ?? 0;
+    if (i >= period) sum -= values[i - period] ?? 0;
+    out.push(i >= period - 1 ? sum / period : null);
+  }
+  return out;
+}
+function ema(values, period) {
+  if (period <= 0) throw new Error("ema: period must be positive");
+  const k = 2 / (period + 1);
+  const out = [];
+  let previous = null;
+  let seed = 0;
+  for (let i = 0; i < values.length; i++) {
+    const value = values[i] ?? 0;
+    if (previous === null) {
+      seed += value;
+      if (i === period - 1) {
+        previous = seed / period;
+        out.push(previous);
+      } else {
+        out.push(null);
+      }
+      continue;
+    }
+    previous = value * k + previous * (1 - k);
+    out.push(previous);
+  }
+  return out;
+}
+function wilder(values, period) {
+  if (period <= 0) throw new Error("wilder: period must be positive");
+  const out = [];
+  let previous = null;
+  let seed = 0;
+  for (let i = 0; i < values.length; i++) {
+    const value = values[i] ?? 0;
+    if (previous === null) {
+      seed += value;
+      if (i === period - 1) {
+        previous = seed / period;
+        out.push(previous);
+      } else {
+        out.push(null);
+      }
+      continue;
+    }
+    previous = (previous * (period - 1) + value) / period;
+    out.push(previous);
+  }
+  return out;
+}
+function stdev(values, period) {
+  if (period <= 0) throw new Error("stdev: period must be positive");
+  const out = [];
+  for (let i = 0; i < values.length; i++) {
+    if (i < period - 1) {
+      out.push(null);
+      continue;
+    }
+    let sum = 0;
+    for (let j = i - period + 1; j <= i; j++) sum += values[j] ?? 0;
+    const mean = sum / period;
+    let variance = 0;
+    for (let j = i - period + 1; j <= i; j++) {
+      const d = (values[j] ?? 0) - mean;
+      variance += d * d;
+    }
+    out.push(Math.sqrt(Math.max(0, variance / period)));
+  }
+  return out;
+}
+
+// src/indicators/bollinger.ts
+function bollinger(closes, period = 20, multiplier = 2) {
+  const middle = sma(closes, period);
+  const deviation = stdev(closes, period);
+  const upper = [];
+  const lower = [];
+  for (let i = 0; i < closes.length; i++) {
+    const m = middle[i];
+    const d = deviation[i];
+    if (m === null || d === null || m === void 0 || d === void 0) {
+      upper.push(null);
+      lower.push(null);
+      continue;
+    }
+    upper.push(m + multiplier * d);
+    lower.push(m - multiplier * d);
+  }
+  return { upper, middle, lower };
+}
+
+// src/indicators/macd.ts
+function macd(closes, fastPeriod = 12, slowPeriod = 26, signalPeriod = 9) {
+  const fast = ema(closes, fastPeriod);
+  const slow = ema(closes, slowPeriod);
+  const line = closes.map((_, i) => {
+    const f = fast[i];
+    const s = slow[i];
+    return f === null || s === null || f === void 0 || s === void 0 ? null : f - s;
+  });
+  const firstReal = line.findIndex((v) => v !== null);
+  const signal = line.map(() => null);
+  if (firstReal !== -1) {
+    const dense = line.slice(firstReal);
+    const smoothed = ema(dense, signalPeriod);
+    for (let i = 0; i < smoothed.length; i++) signal[firstReal + i] = smoothed[i] ?? null;
+  }
+  const histogram = line.map((value, i) => {
+    const s = signal[i];
+    return value === null || s === null || s === void 0 ? null : value - s;
+  });
+  return { macd: line, signal, histogram };
+}
+
+// src/indicators/rsi.ts
+function rsi(closes, period = 14) {
+  if (closes.length === 0) return [];
+  const gains = [];
+  const losses = [];
+  for (let i = 1; i < closes.length; i++) {
+    const change = (closes[i] ?? 0) - (closes[i - 1] ?? 0);
+    gains.push(Math.max(0, change));
+    losses.push(Math.max(0, -change));
+  }
+  const avgGain = wilder(gains, period);
+  const avgLoss = wilder(losses, period);
+  const out = [null];
+  for (let i = 0; i < avgGain.length; i++) {
+    const g = avgGain[i];
+    const l = avgLoss[i];
+    if (g === null || l === null || g === void 0 || l === void 0) {
+      out.push(null);
+      continue;
+    }
+    out.push(l === 0 ? 100 : 100 - 100 / (1 + g / l));
+  }
+  return out;
+}
+
+// src/indicators/attach.ts
+function points(bars, values) {
+  const out = [];
+  for (let i = 0; i < bars.length; i++) {
+    const value = values[i];
+    const bar = bars[i];
+    if (value === null || value === void 0 || bar === void 0) continue;
+    out.push({ time: bar.time, value });
+  }
+  return out;
+}
+function addIndicator(chart, spec, bars) {
+  const created = [];
+  let ownPaneIndex = null;
+  function newPane() {
+    const index = chart.panes().length;
+    ownPaneIndex = index;
+    return index;
+  }
+  if (spec.type === "bollinger") {
+    const colour = spec.colour ?? "#2962ff";
+    const band = { lineWidth: 1, priceLineVisible: false, lastValueVisible: false };
+    const upper = chart.addSeries(LineSeries, { color: colour, ...band });
+    const middle = chart.addSeries(LineSeries, {
+      color: colour,
+      lineWidth: 1,
+      lineStyle: 2,
+      priceLineVisible: false,
+      lastValueVisible: false
+    });
+    const lower = chart.addSeries(LineSeries, { color: colour, ...band });
+    created.push(upper, middle, lower);
+    const apply2 = (data) => {
+      const closes = data.map((b) => b.close);
+      const result = bollinger(closes, spec.period ?? 20, spec.multiplier ?? 2);
+      upper.setData(points(data, result.upper));
+      middle.setData(points(data, result.middle));
+      lower.setData(points(data, result.lower));
+    };
+    apply2(bars);
+    return { setData: apply2, remove: () => removeAll(chart, created, ownPaneIndex) };
+  }
+  if (spec.type === "rsi") {
+    const pane2 = newPane();
+    const line2 = chart.addSeries(
+      LineSeries,
+      {
+        color: spec.colour ?? "#7e57c2",
+        lineWidth: 2,
+        priceLineVisible: false,
+        // 0-100 by definition, so pinning the scale stops it rescaling to
+        // the visible range and making a move from 45 to 55 look violent.
+        autoscaleInfoProvider: () => ({ priceRange: { minValue: 0, maxValue: 100 } })
+      },
+      pane2
+    );
+    for (const level of [70, 30]) {
+      line2.createPriceLine({
+        price: level,
+        color: "#9598a1",
+        lineWidth: 1,
+        lineStyle: 2,
+        axisLabelVisible: true,
+        title: ""
+      });
+    }
+    created.push(line2);
+    const apply2 = (data) => {
+      line2.setData(points(data, rsi(data.map((b) => b.close), spec.period ?? 14)));
+    };
+    apply2(bars);
+    chart.panes()[pane2]?.setHeight(110);
+    return { setData: apply2, remove: () => removeAll(chart, created, ownPaneIndex) };
+  }
+  const pane = newPane();
+  const histogram = chart.addSeries(
+    HistogramSeries,
+    { priceLineVisible: false, lastValueVisible: false },
+    pane
+  );
+  const line = chart.addSeries(
+    LineSeries,
+    { color: "#2962ff", lineWidth: 2, priceLineVisible: false },
+    pane
+  );
+  const signal = chart.addSeries(
+    LineSeries,
+    { color: "#ff6d00", lineWidth: 2, priceLineVisible: false },
+    pane
+  );
+  created.push(histogram, line, signal);
+  const apply = (data) => {
+    const result = macd(
+      data.map((b) => b.close),
+      spec.fastPeriod ?? 12,
+      spec.slowPeriod ?? 26,
+      spec.signalPeriod ?? 9
+    );
+    line.setData(points(data, result.macd));
+    signal.setData(points(data, result.signal));
+    histogram.setData(
+      points(data, result.histogram).map((p) => ({
+        ...p,
+        color: p.value >= 0 ? "#26a69a80" : "#ef535080"
+      }))
+    );
+  };
+  apply(bars);
+  chart.panes()[pane]?.setHeight(110);
+  return { setData: apply, remove: () => removeAll(chart, created, ownPaneIndex) };
+}
+function removeAll(chart, series, paneIndex) {
+  for (const s of series) chart.removeSeries(s);
+  series.length = 0;
+  if (paneIndex !== null && chart.panes().length > paneIndex) {
+    const pane = chart.panes()[paneIndex];
+    if (pane !== void 0 && pane.getSeries().length === 0) chart.removePane(paneIndex);
+  }
+}
+
+// src/index.ts
+function createTrendkit(options) {
+  const store = new DrawingStore();
+  const tools = new Map(options.tools.map((tool) => [tool.id, tool]));
+  let theme = options.theme ?? LIGHT_THEME;
+  const primitive = new TrendkitPrimitive(options.chart, options.series, {
+    drawings: () => store.all(),
+    selectedId: () => store.selectedId(),
+    tool: (id) => tools.get(id),
+    theme: () => theme
+  });
+  options.series.attachPrimitive(primitive);
+  const unsubscribe = store.subscribe(() => primitive.update());
+  const interaction = new InteractionController({
+    chart: options.chart,
+    series: options.series,
+    store,
+    hits: primitive,
+    pointCount: (id) => tools.get(id)?.pointCount ?? 2,
+    isTransient: (id) => tools.get(id)?.transient === true,
+    magnetPx: options.magnetPx ?? 6
+  });
+  return {
+    store,
+    setActiveTool(tool) {
+      interaction.setActiveTool(tool);
+    },
+    activeTool() {
+      return interaction.getActiveTool();
+    },
+    setTheme(next) {
+      theme = next;
+      primitive.update();
+    },
+    toJSON() {
+      return toSnapshot(store.all());
+    },
+    fromJSON(snapshot) {
+      store.replaceAll(fromSnapshot(snapshot));
+    },
+    destroy() {
+      interaction.destroy();
+      unsubscribe();
+      options.series.detachPrimitive(primitive);
+    }
+  };
+}
+
+export { DARK_THEME, FIB_LEVELS, Fibonacci, HorizontalRay, LIGHT_THEME, Measure, Rectangle, Trendline, addIndicator, bollinger, createTrendkit, distanceToRect, distanceToSegment, ema, fibonacciPrices, macd, percentChange, rsi, sma, stdev, wilder };