emberwick 0.1.0

package/index.js

@@ -0,0 +1,1310 @@
+class Layers {
+  constructor(container, names) {
+    this.container = container;
+    this.names = names;
+    this.canvas = {};
+    this.ctx = {};
+    this.width = 0;
+    this.height = 0;
+    this.dpr = 0;
+    this.onResize = null;
+    if (getComputedStyle(container).position === "static") {
+      container.style.position = "relative";
+    }
+    names.forEach((name, i) => {
+      const c = document.createElement("canvas");
+      Object.assign(c.style, {
+        position: "absolute",
+        left: "0",
+        top: "0",
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: String(i + 1)
+      });
+      container.appendChild(c);
+      this.canvas[name] = c;
+      this.ctx[name] = c.getContext("2d");
+    });
+    this._ro = new ResizeObserver(() => this.measure());
+    this._ro.observe(container);
+    this.measure();
+  }
+  measure() {
+    const r = this.container.getBoundingClientRect();
+    const w = Math.max(1, Math.floor(r.width));
+    const h = Math.max(1, Math.floor(r.height));
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    if (w === this.width && h === this.height && dpr === this.dpr) return;
+    this.width = w;
+    this.height = h;
+    this.dpr = dpr;
+    for (const n of this.names) {
+      const c = this.canvas[n];
+      c.width = Math.floor(w * dpr);
+      c.height = Math.floor(h * dpr);
+      this.ctx[n].setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+    if (this.onResize) this.onResize(w, h);
+  }
+  /** Flatten all layers into a single canvas (for toImage/export). */
+  composite() {
+    const out = document.createElement("canvas");
+    out.width = Math.floor(this.width * this.dpr);
+    out.height = Math.floor(this.height * this.dpr);
+    const c = out.getContext("2d");
+    for (const n of this.names) c.drawImage(this.canvas[n], 0, 0);
+    return out;
+  }
+  destroy() {
+    this._ro.disconnect();
+    for (const n of this.names) this.canvas[n].remove();
+    this.canvas = {};
+    this.ctx = {};
+  }
+}
+class Loop {
+  constructor(onFrame) {
+    this.onFrame = onFrame;
+    this.fps = 0;
+    this._raf = 0;
+    this._dirty = /* @__PURE__ */ new Set();
+    this._last = 0;
+    this._running = false;
+    this._frames = 0;
+    this._fpsAt = 0;
+    this._tick = this._tick.bind(this);
+  }
+  invalidate(...layers) {
+    if (!layers.length) this._dirty.add("all");
+    else for (const l of layers) this._dirty.add(l);
+    this._schedule();
+  }
+  start() {
+    if (this._running) return;
+    this._running = true;
+    this._last = performance.now();
+    this._fpsAt = this._last;
+    this.invalidate("all");
+  }
+  stop() {
+    this._running = false;
+    if (this._raf) cancelAnimationFrame(this._raf);
+    this._raf = 0;
+  }
+  _schedule() {
+    if (this._raf || !this._running) return;
+    this._raf = requestAnimationFrame(this._tick);
+  }
+  _tick(now) {
+    this._raf = 0;
+    if (!this._running) return;
+    const dt = Math.min(Math.max(now - this._last, 1), 64);
+    this._last = now;
+    this._frames++;
+    if (now - this._fpsAt >= 500) {
+      this.fps = Math.round(this._frames * 1e3 / (now - this._fpsAt));
+      this._frames = 0;
+      this._fpsAt = now;
+    }
+    const dirty = this._dirty;
+    this._dirty = /* @__PURE__ */ new Set();
+    let wantMore = false;
+    try {
+      wantMore = this.onFrame(dirty, dt, now) === true;
+    } catch (e) {
+      console.error("[Emberwick] frame error", e);
+    }
+    if (wantMore || this._dirty.size) this._schedule();
+  }
+}
+const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+class Smoothed {
+  constructor(value = 0, tau = 90) {
+    this.value = value;
+    this.target = value;
+    this.tau = tau;
+  }
+  set(target) {
+    this.target = target;
+  }
+  /** Snap with no animation. */
+  jump(v) {
+    this.value = v;
+    this.target = v;
+  }
+  get settled() {
+    const eps = 1e-9 + Math.abs(this.target) * 1e-6;
+    return Math.abs(this.target - this.value) <= eps;
+  }
+  /** @returns {boolean} true while still moving (caller keeps the loop alive) */
+  tick(dt) {
+    if (this.settled) {
+      this.value = this.target;
+      return false;
+    }
+    this.value += (this.target - this.value) * (1 - Math.exp(-dt / this.tau));
+    return true;
+  }
+}
+class Tween {
+  constructor(duration = 200, ease = easeOutCubic) {
+    this.duration = duration;
+    this.ease = ease;
+    this.t = duration;
+  }
+  restart() {
+    this.t = 0;
+  }
+  get done() {
+    return this.t >= this.duration;
+  }
+  get progress() {
+    return this.ease(Math.min(1, this.t / this.duration));
+  }
+  tick(dt) {
+    if (this.done) return false;
+    this.t += dt;
+    return true;
+  }
+}
+const clamp$1 = (v, a, b) => v < a ? a : v > b ? b : v;
+class TimeScale {
+  constructor({ spacing = 9, minSpacing = 0.8, maxSpacing = 160, rightOffset = 12 } = {}) {
+    this.minSpacing = minSpacing;
+    this.maxSpacing = maxSpacing;
+    this.rightOffset = rightOffset;
+    this.width = 0;
+    this.barCount = 0;
+    this.follow = true;
+    this.timeframeMs = 6e4;
+    this._spacing = new Smoothed(spacing, 65);
+    this._right = new Smoothed(rightOffset, 65);
+    this._initial = spacing;
+  }
+  get spacing() {
+    return this._spacing.value;
+  }
+  get right() {
+    return this._right.value;
+  }
+  resize(w) {
+    this.width = Math.max(1, w);
+  }
+  setBarCount(n) {
+    const grew = n > this.barCount;
+    this.barCount = n;
+    if (this.follow) {
+      const t = n - 1 + this.rightOffset;
+      if (grew) this._right.set(t);
+      else this._right.jump(t);
+    }
+  }
+  x(i) {
+    return this.width - (this._right.value - i) * this._spacing.value;
+  }
+  /** Centre-x of bar i (bars are drawn centred on their slot). */
+  index(x) {
+    return this._right.value - (this.width - x) / this._spacing.value;
+  }
+  barWidth() {
+    const s = this._spacing.value;
+    return Math.max(1, Math.floor(s * 0.72));
+  }
+  visibleRange() {
+    const first = Math.floor(this.index(0)) - 1;
+    const last = Math.ceil(this.index(this.width)) + 1;
+    return {
+      from: clamp$1(first, 0, Math.max(0, this.barCount - 1)),
+      to: clamp$1(last, 0, Math.max(0, this.barCount - 1))
+    };
+  }
+  _clampRight(v) {
+    const max = this.barCount - 1 + this.rightOffset + this.width / this._spacing.target;
+    const min = Math.min(4, this.barCount - 1 + this.rightOffset);
+    return clamp$1(v, min, max);
+  }
+  /** Immediate pan, in pixels. Positive dx drags content right (back in time). */
+  panBy(dxPx) {
+    if (!dxPx) return false;
+    const next = this._clampRight(this._right.value - dxPx / this._spacing.value);
+    this._right.jump(next);
+    this.follow = false;
+    return true;
+  }
+  /** Zoom by `factor`, keeping the bar under `x` pinned. */
+  zoomAt(x, factor) {
+    const s0 = this._spacing.target;
+    const s1 = clamp$1(s0 * factor, this.minSpacing, this.maxSpacing);
+    if (Math.abs(s1 - s0) < 1e-9) return false;
+    const anchorX = this.follow ? this.width : x;
+    const r0 = this._right.target;
+    const idx = r0 - (this.width - anchorX) / s0;
+    const r1 = idx + (this.width - anchorX) / s1;
+    this._spacing.set(s1);
+    this._right.set(this._clampRight(r1));
+    return true;
+  }
+  snapToRealtime() {
+    this.follow = true;
+    this._right.set(this.barCount - 1 + this.rightOffset);
+  }
+  reset() {
+    this._spacing.set(this._initial);
+    this.snapToRealtime();
+  }
+  /** True while the view is still easing. */
+  tick(dt) {
+    const a = this._spacing.tick(dt);
+    const b = this._right.tick(dt);
+    return a || b;
+  }
+  get settled() {
+    return this._spacing.settled && this._right.settled;
+  }
+}
+const clamp = (v, a, b) => v < a ? a : v > b ? b : v;
+class PriceScale {
+  constructor({ mode = "linear", tau = 120, marginTop = 0.12, marginBottom = 0.12 } = {}) {
+    this.mode = mode;
+    this.marginTop = marginTop;
+    this.marginBottom = marginBottom;
+    this.auto = true;
+    this.top = 0;
+    this.height = 1;
+    this._lo = new Smoothed(0, tau);
+    this._hi = new Smoothed(1, tau);
+    this._primed = false;
+  }
+  _fwd(v) {
+    return this.mode === "log" ? Math.log(Math.max(v, 1e-9)) : v;
+  }
+  _inv(v) {
+    return this.mode === "log" ? Math.exp(v) : v;
+  }
+  setMode(mode) {
+    if (mode === this.mode) return;
+    const lo = this._inv(this._lo.value);
+    const hi = this._inv(this._hi.value);
+    this.mode = mode;
+    this._lo.jump(this._fwd(lo));
+    this._hi.jump(this._fwd(hi));
+  }
+  layout(top, height) {
+    this.top = top;
+    this.height = Math.max(1, height);
+  }
+  get lo() {
+    return this._inv(this._lo.value);
+  }
+  get hi() {
+    return this._inv(this._hi.value);
+  }
+  y(price) {
+    const a = this._lo.value;
+    const b = this._hi.value;
+    const t = (this._fwd(price) - a) / (b - a || 1);
+    return this.top + this.height * (1 - t);
+  }
+  price(y) {
+    const a = this._lo.value;
+    const b = this._hi.value;
+    const t = 1 - (y - this.top) / this.height;
+    return this._inv(a + t * (b - a));
+  }
+  /** Fit visible bars. `extra` lets the forming candle influence the range. */
+  fit(bars, from, to, extra) {
+    if (!this.auto || !bars.length) return;
+    let min = Infinity;
+    let max = -Infinity;
+    for (let i = from; i <= to; i++) {
+      const b2 = bars[i];
+      if (!b2) continue;
+      if (b2.low < min) min = b2.low;
+      if (b2.high > max) max = b2.high;
+    }
+    if (extra) {
+      if (extra.low < min) min = extra.low;
+      if (extra.high > max) max = extra.high;
+    }
+    if (!isFinite(min) || !isFinite(max)) return;
+    let a = this._fwd(min);
+    let b = this._fwd(max);
+    let pad = (b - a) * this.marginTop;
+    if (!(pad > 0)) pad = Math.abs(b) * 0.01 || 1;
+    a -= pad;
+    b += (b - a) * 0 + pad;
+    this._lo.set(a);
+    this._hi.set(b);
+    if (!this._primed) {
+      this._lo.jump(a);
+      this._hi.jump(b);
+      this._primed = true;
+    }
+  }
+  /** Manual axis-drag scaling around the vertical centre. */
+  scaleBy(factor) {
+    this.auto = false;
+    const a = this._lo.target;
+    const b = this._hi.target;
+    const mid = (a + b) / 2;
+    const half = (b - a) / 2 * clamp(factor, 0.2, 5);
+    this._lo.set(mid - half);
+    this._hi.set(mid + half);
+  }
+  resetAuto() {
+    this.auto = true;
+  }
+  tick(dt) {
+    const a = this._lo.tick(dt);
+    const b = this._hi.tick(dt);
+    return a || b;
+  }
+}
+const defaultTheme = {
+  background: "#0b0e14",
+  grid: "rgba(255,255,255,0.045)",
+  axisLine: "rgba(255,255,255,0.10)",
+  text: "#8b93a7",
+  textStrong: "#e6e9ef",
+  up: "#26a69a",
+  down: "#ef5350",
+  upFill: "#26a69a",
+  downFill: "#ef5350",
+  wickUp: "#26a69a",
+  wickDown: "#ef5350",
+  volumeUp: "rgba(38,166,154,0.30)",
+  volumeDown: "rgba(239,83,80,0.30)",
+  crosshair: "rgba(255,255,255,0.32)",
+  labelBg: "#2a3040",
+  labelText: "#e6e9ef",
+  tagText: "#06080d",
+  font: '11px ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif',
+  priceAxisWidth: 68,
+  timeAxisHeight: 26
+};
+const lightTheme = {
+  ...defaultTheme,
+  background: "#ffffff",
+  grid: "rgba(0,0,0,0.06)",
+  axisLine: "rgba(0,0,0,0.14)",
+  text: "#6b7280",
+  textStrong: "#111827",
+  labelBg: "#374151",
+  volumeUp: "rgba(38,166,154,0.25)",
+  volumeDown: "rgba(239,83,80,0.25)",
+  crosshair: "rgba(0,0,0,0.35)",
+  tagText: "#ffffff"
+};
+class LiveCandle {
+  constructor(tau = 55) {
+    this.enabled = true;
+    this.o = new Smoothed(0, tau);
+    this.h = new Smoothed(0, tau);
+    this.l = new Smoothed(0, tau);
+    this.c = new Smoothed(0, tau);
+    this.vol = new Smoothed(0, tau * 2);
+    this.spawn = new Tween(240);
+    this._has = false;
+    this._time = null;
+  }
+  setTarget(bar) {
+    if (!bar) {
+      this._has = false;
+      return;
+    }
+    if (!this._has || bar.time !== this._time) {
+      this.o.jump(bar.open);
+      this.h.jump(bar.open);
+      this.l.jump(bar.open);
+      this.c.jump(bar.open);
+      this.vol.jump(0);
+      this.spawn.restart();
+      this._time = bar.time;
+      this._has = true;
+    }
+    this.o.set(bar.open);
+    this.h.set(bar.high);
+    this.l.set(bar.low);
+    this.c.set(bar.close);
+    this.vol.set(bar.volume || 0);
+  }
+  reset() {
+    this._has = false;
+    this._time = null;
+  }
+  /** @returns {boolean} true while animating */
+  tick(dt) {
+    if (!this._has) return false;
+    let moving = false;
+    if (this.o.tick(dt)) moving = true;
+    if (this.h.tick(dt)) moving = true;
+    if (this.l.tick(dt)) moving = true;
+    if (this.c.tick(dt)) moving = true;
+    if (this.vol.tick(dt)) moving = true;
+    if (this.spawn.tick(dt)) moving = true;
+    return moving;
+  }
+  /** Interpolated view of `bar`, or `bar` itself when disabled. */
+  read(bar) {
+    if (!this._has || !this.enabled || bar.time !== this._time) return bar;
+    const o = this.o.value;
+    const c = this.c.value;
+    return {
+      time: bar.time,
+      open: o,
+      close: c,
+      // keep the wick consistent while values chase each other
+      high: Math.max(this.h.value, o, c),
+      low: Math.min(this.l.value, o, c),
+      volume: this.vol.value,
+      _spawn: this.spawn.progress
+    };
+  }
+}
+class Inertia {
+  constructor({ friction = 0.92, min = 0.015 } = {}) {
+    this.friction = friction;
+    this.min = min;
+    this.v = 0;
+    this.active = false;
+  }
+  sample(dx, dt) {
+    if (dt <= 0) return;
+    const instant = dx / dt;
+    this.v = this.v * 0.6 + instant * 0.4;
+    this.active = false;
+  }
+  release() {
+    if (Math.abs(this.v) > this.min) this.active = true;
+  }
+  stop() {
+    this.v = 0;
+    this.active = false;
+  }
+  /** @returns {number} px to pan this frame (0 when idle) */
+  tick(dt) {
+    if (!this.active) return 0;
+    const dx = this.v * dt;
+    this.v *= Math.pow(this.friction, dt / 16.6667);
+    if (Math.abs(this.v) < this.min) this.stop();
+    return dx;
+  }
+}
+function niceStep(span, count) {
+  const raw = span / Math.max(1, count);
+  if (!(raw > 0) || !isFinite(raw)) return 1;
+  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const n = raw / mag;
+  const s = n < 1.5 ? 1 : n < 3 ? 2 : n < 7 ? 5 : 10;
+  return s * mag;
+}
+function priceTicks(lo, hi, count) {
+  const step = niceStep(hi - lo, count);
+  const ticks = [];
+  const start = Math.ceil(lo / step) * step;
+  for (let v = start; v <= hi + step * 1e-9; v += step) ticks.push(v);
+  return { ticks, step };
+}
+function decimalsFor(step) {
+  if (!isFinite(step) || step <= 0) return 2;
+  if (step >= 100) return 0;
+  if (step >= 1) return 2;
+  return Math.min(8, Math.ceil(-Math.log10(step)) + 1);
+}
+function niceBarStep(minBars) {
+  const opts = [1, 2, 5, 10, 15, 20, 30, 60, 120, 240, 480, 960, 1920, 3840, 7680];
+  for (const o of opts) if (o >= minBars) return o;
+  return Math.ceil(minBars / 1e3) * 1e3;
+}
+const p2 = (n) => String(n).padStart(2, "0");
+function fmtAxisTime(ms, tfMs) {
+  const d = new Date(ms);
+  if (tfMs >= 864e5) return `${d.getDate()} ${d.toLocaleString("en", { month: "short" })}`;
+  if (d.getHours() === 0 && d.getMinutes() === 0) {
+    return `${d.getDate()} ${d.toLocaleString("en", { month: "short" })}`;
+  }
+  return `${p2(d.getHours())}:${p2(d.getMinutes())}`;
+}
+function fmtDateTime(ms) {
+  const d = new Date(ms);
+  return `${d.getFullYear()}-${p2(d.getMonth() + 1)}-${p2(d.getDate())} ${p2(d.getHours())}:${p2(d.getMinutes())}`;
+}
+function drawGrid(ctx, s) {
+  const { theme, ts, ps, plot, bars, width, height } = s;
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = theme.background;
+  ctx.fillRect(0, 0, width, height);
+  ctx.font = theme.font;
+  ctx.textBaseline = "middle";
+  const rows = Math.max(2, Math.floor(plot.h / 58));
+  const { ticks, step } = priceTicks(ps.lo, ps.hi, rows);
+  const dec = decimalsFor(step);
+  ctx.strokeStyle = theme.grid;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  for (const v of ticks) {
+    const y = Math.round(ps.y(v)) + 0.5;
+    if (y < plot.y || y > plot.y + plot.h) continue;
+    ctx.moveTo(0, y);
+    ctx.lineTo(plot.w, y);
+  }
+  ctx.stroke();
+  ctx.fillStyle = theme.text;
+  ctx.textAlign = "left";
+  for (const v of ticks) {
+    const y = Math.round(ps.y(v));
+    if (y < plot.y + 6 || y > plot.y + plot.h - 6) continue;
+    ctx.fillText(v.toFixed(dec), plot.w + 8, y);
+  }
+  if (bars.length) {
+    const minBars = Math.ceil(74 / Math.max(1e-4, ts.spacing));
+    const stepBars = niceBarStep(minBars);
+    const { from, to } = ts.visibleRange();
+    const first = Math.ceil(from / stepBars) * stepBars;
+    ctx.strokeStyle = theme.grid;
+    ctx.beginPath();
+    for (let i = first; i <= to; i += stepBars) {
+      const x = Math.round(ts.x(i)) + 0.5;
+      if (x < 0 || x > plot.w) continue;
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, plot.h);
+    }
+    ctx.stroke();
+    ctx.fillStyle = theme.text;
+    ctx.textAlign = "center";
+    const ty = plot.h + theme.timeAxisHeight / 2;
+    for (let i = first; i <= to; i += stepBars) {
+      const bar = bars[i];
+      if (!bar) continue;
+      const x = Math.round(ts.x(i));
+      if (x < 28 || x > plot.w - 28) continue;
+      ctx.fillText(fmtAxisTime(bar.time, ts.timeframeMs), x, ty);
+    }
+  }
+  ctx.strokeStyle = theme.axisLine;
+  ctx.beginPath();
+  ctx.moveTo(plot.w + 0.5, 0);
+  ctx.lineTo(plot.w + 0.5, plot.h);
+  ctx.moveTo(0, plot.h + 0.5);
+  ctx.lineTo(width, plot.h + 0.5);
+  ctx.stroke();
+}
+function drawCandles(ctx, s) {
+  const { theme, ts, ps, plot, bars, width, height, live, volumeRatio } = s;
+  ctx.clearRect(0, 0, width, height);
+  if (!bars.length) return;
+  const { from, to } = ts.visibleRange();
+  const bw = ts.barWidth();
+  const half = bw / 2;
+  const thin = bw <= 2;
+  const volH = plot.h * volumeRatio;
+  const volTop = plot.y + plot.h - volH;
+  let vmax = 0;
+  for (let i = from; i <= to; i++) {
+    const b = bars[i];
+    if (b && b.volume > vmax) vmax = b.volume;
+  }
+  if (vmax > 0) {
+    for (let i = from; i <= to; i++) {
+      let b = bars[i];
+      if (!b) continue;
+      if (live && i === bars.length - 1) b = live;
+      const x = ts.x(i);
+      if (x < -bw || x > plot.w + bw) continue;
+      const h = b.volume / vmax * volH * 0.9;
+      ctx.fillStyle = b.close >= b.open ? theme.volumeUp : theme.volumeDown;
+      ctx.fillRect(Math.round(x - half), volTop + (volH - h), Math.max(1, bw), h);
+    }
+  }
+  for (let i = from; i <= to; i++) {
+    let b = bars[i];
+    if (!b) continue;
+    const isLast = i === bars.length - 1;
+    if (live && isLast) b = live;
+    const x = ts.x(i);
+    if (x < -bw || x > plot.w + bw) continue;
+    const up = b.close >= b.open;
+    const color = up ? theme.up : theme.down;
+    const yO = ps.y(b.open);
+    const yC = ps.y(b.close);
+    const yH = ps.y(b.high);
+    const yL = ps.y(b.low);
+    let scale = 1;
+    if (live && isLast && typeof b._spawn === "number") scale = 0.35 + 0.65 * b._spawn;
+    const cx = Math.round(x) + (bw % 2 ? 0.5 : 0);
+    ctx.strokeStyle = up ? theme.wickUp : theme.wickDown;
+    ctx.lineWidth = Math.max(1, Math.min(2, bw * 0.16));
+    ctx.beginPath();
+    ctx.moveTo(cx, yH);
+    ctx.lineTo(cx, yL);
+    ctx.stroke();
+    if (thin) continue;
+    const top = Math.min(yO, yC);
+    const bodyH = Math.max(1, Math.abs(yC - yO));
+    const w = Math.max(1, bw * scale);
+    ctx.fillStyle = color;
+    ctx.fillRect(Math.round(x - w / 2), Math.round(top), Math.round(w), Math.round(bodyH));
+  }
+  const lastBar = live || bars[bars.length - 1];
+  if (lastBar) {
+    const y = Math.round(ps.y(lastBar.close)) + 0.5;
+    if (y > plot.y && y < plot.y + plot.h) {
+      const up = lastBar.close >= lastBar.open;
+      ctx.save();
+      ctx.setLineDash([3, 3]);
+      ctx.strokeStyle = up ? theme.up : theme.down;
+      ctx.lineWidth = 1;
+      ctx.globalAlpha = 0.7;
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(plot.w, y);
+      ctx.stroke();
+      ctx.restore();
+      const { step } = priceTicks(ps.lo, ps.hi, Math.max(2, Math.floor(plot.h / 58)));
+      const label = lastBar.close.toFixed(decimalsFor(step));
+      ctx.font = theme.font;
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "left";
+      const tw = ctx.measureText(label).width;
+      ctx.fillStyle = up ? theme.up : theme.down;
+      ctx.fillRect(plot.w + 1, y - 9, tw + 14, 18);
+      ctx.fillStyle = theme.tagText;
+      ctx.fillText(label, plot.w + 8, y);
+    }
+  }
+}
+function drawCrosshair(ctx, s) {
+  const { theme, ts, ps, plot, bars, width, height, cursor, magnet } = s;
+  ctx.clearRect(0, 0, width, height);
+  if (!cursor || !bars.length) return;
+  if (cursor.x < 0 || cursor.x > plot.w || cursor.y < 0 || cursor.y > plot.h) return;
+  const i = Math.round(ts.index(cursor.x));
+  const bar = bars[i];
+  let x = cursor.x;
+  let y = cursor.y;
+  if (bar) {
+    x = ts.x(i);
+    if (magnet) {
+      const cands = [bar.open, bar.high, bar.low, bar.close];
+      let best = null;
+      let bestD = Infinity;
+      for (const p of cands) {
+        const py = ps.y(p);
+        const d = Math.abs(py - cursor.y);
+        if (d < bestD) {
+          bestD = d;
+          best = py;
+        }
+      }
+      if (bestD < 22) y = best;
+    }
+  }
+  ctx.save();
+  ctx.setLineDash([4, 4]);
+  ctx.strokeStyle = theme.crosshair;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(Math.round(x) + 0.5, 0);
+  ctx.lineTo(Math.round(x) + 0.5, plot.h);
+  ctx.moveTo(0, Math.round(y) + 0.5);
+  ctx.lineTo(plot.w, Math.round(y) + 0.5);
+  ctx.stroke();
+  ctx.restore();
+  ctx.font = theme.font;
+  ctx.textBaseline = "middle";
+  const { step } = priceTicks(ps.lo, ps.hi, Math.max(2, Math.floor(plot.h / 58)));
+  const priceLabel = ps.price(y).toFixed(decimalsFor(step));
+  ctx.textAlign = "left";
+  const pw = ctx.measureText(priceLabel).width;
+  ctx.fillStyle = theme.labelBg;
+  ctx.fillRect(plot.w + 1, y - 9, pw + 14, 18);
+  ctx.fillStyle = theme.labelText;
+  ctx.fillText(priceLabel, plot.w + 8, y);
+  if (bar) {
+    const t = fmtDateTime(bar.time);
+    ctx.textAlign = "center";
+    const tw = ctx.measureText(t).width;
+    const bx = Math.min(Math.max(x, tw / 2 + 6), plot.w - tw / 2 - 6);
+    ctx.fillStyle = theme.labelBg;
+    ctx.fillRect(bx - tw / 2 - 7, plot.h + 3, tw + 14, 18);
+    ctx.fillStyle = theme.labelText;
+    ctx.fillText(t, bx, plot.h + 12);
+  }
+}
+class Chart {
+  constructor(container, options = {}) {
+    if (!container) throw new Error("Chart: container element is required");
+    this.container = container;
+    this.theme = { ...defaultTheme, ...options.theme || {} };
+    this.options = {
+      volumeRatio: 0.18,
+      magnet: true,
+      animate: true,
+      ...options
+    };
+    this.bars = [];
+    this.feed = null;
+    this._unsub = null;
+    this._loadingHistory = false;
+    this._exhausted = false;
+    this._listeners = { crosshair: /* @__PURE__ */ new Set(), visibleRange: /* @__PURE__ */ new Set() };
+    this.layers = new Layers(container, ["base", "main", "overlay"]);
+    this.ts = new TimeScale(options.timeScale);
+    this.ps = new PriceScale(options.priceScale);
+    this.live = new LiveCandle();
+    this.live.enabled = this.options.animate !== false;
+    this.inertia = new Inertia();
+    this.cursor = null;
+    this.plot = { x: 0, y: 0, w: 1, h: 1 };
+    this.loop = new Loop((dirty, dt) => this._frame(dirty, dt));
+    this.layers.onResize = () => {
+      this._layout();
+      this.loop.invalidate("all");
+    };
+    this._layout();
+    this._bindEvents();
+    this.loop.start();
+  }
+  // ---------------------------------------------------------------- layout --
+  _layout() {
+    const { width, height } = this.layers;
+    const w = Math.max(1, width - this.theme.priceAxisWidth);
+    const h = Math.max(1, height - this.theme.timeAxisHeight);
+    this.plot = { x: 0, y: 0, w, h };
+    this.ts.resize(w);
+    this.ps.layout(0, h);
+  }
+  // ------------------------------------------------------------------ data --
+  setData(bars) {
+    this.bars = Array.isArray(bars) ? bars.slice() : [];
+    this._exhausted = false;
+    if (this.bars.length > 1) {
+      this.ts.timeframeMs = this.bars[1].time - this.bars[0].time;
+    }
+    this.ts.setBarCount(this.bars.length);
+    this.ts.snapToRealtime();
+    this.live.reset();
+    this.ps._primed = false;
+    this.loop.invalidate("all");
+  }
+  /** Merge a tick into the forming candle (animated). */
+  update(bar) {
+    if (!bar) return;
+    const n = this.bars.length;
+    if (n && this.bars[n - 1].time === bar.time) {
+      this.bars[n - 1] = bar;
+    } else {
+      this.append(bar);
+      return;
+    }
+    this.live.setTarget(bar);
+    this.loop.invalidate("main");
+  }
+  /** Open a new candle; the previous one is now closed. */
+  append(bar) {
+    if (!bar) return;
+    const n = this.bars.length;
+    if (n && bar.time <= this.bars[n - 1].time) {
+      this.bars[n - 1] = bar;
+    } else {
+      this.bars.push(bar);
+      this.ts.setBarCount(this.bars.length);
+    }
+    this.live.setTarget(bar);
+    this.loop.invalidate("main");
+  }
+  async setFeed(feed) {
+    this.detachFeed();
+    this.feed = feed;
+    if (!feed) return;
+    this.ts.timeframeMs = feed.timeframe || this.ts.timeframeMs;
+    const bars = await feed.getBars({
+      symbol: feed.symbol,
+      timeframe: feed.timeframe,
+      to: null,
+      limit: this.options.initialBars || 1500
+    });
+    this.setData(bars);
+    if (typeof feed.prime === "function") feed.prime(bars[bars.length - 1]);
+    this._unsub = feed.subscribe((msg) => {
+      if (!msg || !msg.bar) return;
+      if (msg.type === "append") this.append(msg.bar);
+      else this.update(msg.bar);
+    });
+  }
+  detachFeed() {
+    if (this._unsub) this._unsub();
+    this._unsub = null;
+    this.feed = null;
+  }
+  async _maybeLoadHistory() {
+    if (this._loadingHistory || this._exhausted || !this.feed) return;
+    const { from } = this.ts.visibleRange();
+    if (from > 80 || !this.bars.length) return;
+    this._loadingHistory = true;
+    try {
+      const oldest = this.bars[0].time;
+      const older = await this.feed.getBars({
+        symbol: this.feed.symbol,
+        timeframe: this.feed.timeframe,
+        to: oldest,
+        limit: 1e3
+      });
+      if (!older || !older.length) {
+        this._exhausted = true;
+      } else {
+        const added = older.filter((b) => b.time < oldest);
+        if (!added.length) {
+          this._exhausted = true;
+        } else {
+          this.bars = added.concat(this.bars);
+          const wasFollowing = this.ts.follow;
+          this.ts.barCount = this.bars.length;
+          this.ts._right.jump(this.ts._right.value + added.length);
+          this.ts._right.set(this.ts._right.target + added.length);
+          this.ts.follow = wasFollowing;
+          this.loop.invalidate("all");
+        }
+      }
+    } catch (e) {
+      console.error("[Emberwick] history load failed", e);
+      this._exhausted = true;
+    } finally {
+      this._loadingHistory = false;
+    }
+  }
+  // ---------------------------------------------------------------- events --
+  _bindEvents() {
+    const el = this.container;
+    el.style.touchAction = "none";
+    el.style.cursor = "crosshair";
+    let dragging = false;
+    let mode = null;
+    let lastX = 0;
+    let lastY = 0;
+    let lastT = 0;
+    let moved = false;
+    const pointers = /* @__PURE__ */ new Map();
+    let pinchDist = 0;
+    const localPos = (e) => {
+      const r = el.getBoundingClientRect();
+      return { x: e.clientX - r.left, y: e.clientY - r.top };
+    };
+    this._onDown = (e) => {
+      pointers.set(e.pointerId, localPos(e));
+      if (pointers.size === 2) {
+        const [a, b] = [...pointers.values()];
+        pinchDist = Math.hypot(a.x - b.x, a.y - b.y);
+        dragging = false;
+        return;
+      }
+      const p = localPos(e);
+      dragging = true;
+      moved = false;
+      mode = p.x > this.plot.w ? "price" : p.y > this.plot.h ? "time" : "pan";
+      lastX = p.x;
+      lastY = p.y;
+      lastT = performance.now();
+      this.inertia.stop();
+      el.setPointerCapture(e.pointerId);
+    };
+    this._onMove = (e) => {
+      const p = localPos(e);
+      if (pointers.has(e.pointerId)) pointers.set(e.pointerId, p);
+      if (pointers.size === 2) {
+        const [a, b] = [...pointers.values()];
+        const d = Math.hypot(a.x - b.x, a.y - b.y);
+        if (pinchDist > 0 && d > 0) {
+          const mid = (a.x + b.x) / 2;
+          this.ts.zoomAt(mid, d / pinchDist);
+          this.loop.invalidate("all");
+        }
+        pinchDist = d;
+        return;
+      }
+      this.cursor = p;
+      this._emitCrosshair(p);
+      this.loop.invalidate("overlay");
+      if (!dragging) return;
+      const now = performance.now();
+      const dt = now - lastT;
+      const dx = p.x - lastX;
+      const dy = p.y - lastY;
+      if (Math.abs(dx) > 1 || Math.abs(dy) > 1) moved = true;
+      if (mode === "pan") {
+        this.ts.panBy(dx);
+        this.inertia.sample(dx, dt);
+        this.loop.invalidate("all");
+        this._maybeLoadHistory();
+      } else if (mode === "price") {
+        this.ps.scaleBy(1 + dy / 220);
+        this.loop.invalidate("all");
+      } else if (mode === "time") {
+        this.ts.zoomAt(this.plot.w, 1 - dx / 260);
+        this.loop.invalidate("all");
+      }
+      lastX = p.x;
+      lastY = p.y;
+      lastT = now;
+    };
+    this._onUp = (e) => {
+      pointers.delete(e.pointerId);
+      if (pointers.size < 2) pinchDist = 0;
+      if (dragging && mode === "pan" && moved) {
+        this.inertia.release();
+        this.loop.invalidate("all");
+      }
+      dragging = false;
+      mode = null;
+      try {
+        el.releasePointerCapture(e.pointerId);
+      } catch (_) {
+      }
+    };
+    this._onLeave = () => {
+      this.cursor = null;
+      this._emitCrosshair(null);
+      this.loop.invalidate("overlay");
+    };
+    this._onWheel = (e) => {
+      e.preventDefault();
+      const r = el.getBoundingClientRect();
+      const x = e.clientX - r.left;
+      const factor = Math.pow(0.999, e.deltaY);
+      this.ts.zoomAt(x, factor);
+      this.loop.invalidate("all");
+      this._maybeLoadHistory();
+    };
+    this._onDbl = () => {
+      this.ts.reset();
+      this.ps.resetAuto();
+      this.loop.invalidate("all");
+    };
+    this._onKey = (e) => {
+      const step = e.shiftKey ? 120 : 40;
+      if (e.key === "ArrowLeft") {
+        this.ts.panBy(step);
+        this.loop.invalidate("all");
+        this._maybeLoadHistory();
+      } else if (e.key === "ArrowRight") {
+        this.ts.panBy(-step);
+        this.loop.invalidate("all");
+      } else if (e.key === "+" || e.key === "=") {
+        this.ts.zoomAt(this.plot.w / 2, 1.2);
+        this.loop.invalidate("all");
+      } else if (e.key === "-" || e.key === "_") {
+        this.ts.zoomAt(this.plot.w / 2, 0.8);
+        this.loop.invalidate("all");
+      } else return;
+      e.preventDefault();
+    };
+    el.addEventListener("pointerdown", this._onDown);
+    el.addEventListener("pointermove", this._onMove);
+    el.addEventListener("pointerup", this._onUp);
+    el.addEventListener("pointercancel", this._onUp);
+    el.addEventListener("pointerleave", this._onLeave);
+    el.addEventListener("wheel", this._onWheel, { passive: false });
+    el.addEventListener("dblclick", this._onDbl);
+    el.addEventListener("keydown", this._onKey);
+    if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "0");
+  }
+  _emitCrosshair(p) {
+    if (!this._listeners.crosshair.size) return;
+    let payload = null;
+    if (p && this.bars.length && p.x <= this.plot.w && p.y <= this.plot.h) {
+      const i = Math.round(this.ts.index(p.x));
+      const bar = this.bars[i];
+      if (bar) payload = { index: i, bar, price: this.ps.price(p.y) };
+    }
+    for (const fn of this._listeners.crosshair) fn(payload);
+  }
+  subscribe(event, fn) {
+    const set = this._listeners[event];
+    if (!set) throw new Error(`Chart: unknown event "${event}"`);
+    set.add(fn);
+    return () => set.delete(fn);
+  }
+  // ----------------------------------------------------------------- frame --
+  _frame(dirty, dt) {
+    let animating = false;
+    if (this.ts.tick(dt)) animating = true;
+    const dx = this.inertia.tick(dt);
+    if (dx) {
+      this.ts.panBy(dx);
+      animating = true;
+      this._maybeLoadHistory();
+    }
+    if (this.live.tick(dt)) animating = true;
+    const { from, to } = this.ts.visibleRange();
+    const lastIdx = this.bars.length - 1;
+    const liveBar = this.bars.length ? this.live.read(this.bars[lastIdx]) : null;
+    const liveVisible = liveBar && to >= lastIdx ? liveBar : null;
+    this.ps.fit(this.bars, from, to, liveVisible);
+    if (this.ps.tick(dt)) animating = true;
+    const redrawAll = animating || dirty.has("all") || dirty.has("base") || dirty.has("main");
+    const state = {
+      theme: this.theme,
+      ts: this.ts,
+      ps: this.ps,
+      plot: this.plot,
+      bars: this.bars,
+      width: this.layers.width,
+      height: this.layers.height,
+      live: liveVisible,
+      volumeRatio: this.options.volumeRatio,
+      cursor: this.cursor,
+      magnet: this.options.magnet
+    };
+    if (redrawAll) {
+      drawGrid(this.layers.ctx.base, state);
+      drawCandles(this.layers.ctx.main, state);
+    }
+    if (redrawAll || dirty.has("overlay")) {
+      drawCrosshair(this.layers.ctx.overlay, state);
+    }
+    return animating;
+  }
+  // ------------------------------------------------------------------- api --
+  get fps() {
+    return this.loop.fps;
+  }
+  setTheme(theme) {
+    this.theme = { ...this.theme, ...theme };
+    this._layout();
+    this.loop.invalidate("all");
+  }
+  setPriceMode(mode) {
+    this.ps.setMode(mode);
+    this.loop.invalidate("all");
+  }
+  setAnimate(on) {
+    this.live.enabled = !!on;
+    this.loop.invalidate("all");
+  }
+  setMagnet(on) {
+    this.options.magnet = !!on;
+    this.loop.invalidate("overlay");
+  }
+  snapToRealtime() {
+    this.ts.snapToRealtime();
+    this.ps.resetAuto();
+    this.loop.invalidate("all");
+  }
+  toImage() {
+    return this.layers.composite().toDataURL("image/png");
+  }
+  destroy() {
+    const el = this.container;
+    el.removeEventListener("pointerdown", this._onDown);
+    el.removeEventListener("pointermove", this._onMove);
+    el.removeEventListener("pointerup", this._onUp);
+    el.removeEventListener("pointercancel", this._onUp);
+    el.removeEventListener("pointerleave", this._onLeave);
+    el.removeEventListener("wheel", this._onWheel);
+    el.removeEventListener("dblclick", this._onDbl);
+    el.removeEventListener("keydown", this._onKey);
+    this.detachFeed();
+    this.loop.stop();
+    this.layers.destroy();
+    this._listeners.crosshair.clear();
+    this._listeners.visibleRange.clear();
+    this.bars = [];
+  }
+}
+class DataFeed {
+  constructor({ symbol = "DEMO", timeframe = 6e4 } = {}) {
+    this.symbol = symbol;
+    this.timeframe = timeframe;
+  }
+  // eslint-disable-next-line no-unused-vars
+  async getBars({ symbol, timeframe, to, limit }) {
+    throw new Error("DataFeed.getBars() not implemented");
+  }
+  // eslint-disable-next-line no-unused-vars
+  subscribe(handler) {
+    return () => {
+    };
+  }
+  destroy() {
+  }
+}
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return function() {
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+class RandomFeed extends DataFeed {
+  constructor({
+    symbol = "EMBR",
+    timeframe = 6e4,
+    seed = 7,
+    start = 100,
+    volatility = 22e-4,
+    drift = 2e-5,
+    ticksPerSecond = 8,
+    speed = 1
+  } = {}) {
+    super({ symbol, timeframe });
+    this.seed = seed;
+    this.start = start;
+    this.volatility = volatility;
+    this.drift = drift;
+    this.ticksPerSecond = ticksPerSecond;
+    this.speed = speed;
+    this._rnd = mulberry32(seed);
+    this._handlers = /* @__PURE__ */ new Set();
+    this._timer = null;
+    this._forming = null;
+    this._last = start;
+    this._vol = volatility;
+    this._anchorTime = Math.floor(Date.now() / timeframe) * timeframe;
+  }
+  _gauss() {
+    let u = 0;
+    let v = 0;
+    while (u === 0) u = this._rnd();
+    while (v === 0) v = this._rnd();
+    return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
+  }
+  _step(price) {
+    const shock = this._gauss();
+    this._vol += (this.volatility - this._vol) * 0.02 + Math.abs(shock) * this.volatility * 0.015;
+    this._vol = Math.min(this._vol, this.volatility * 6);
+    return Math.max(0.01, price * (1 + this.drift + shock * this._vol));
+  }
+  _makeBar(time, open) {
+    let c = open;
+    const n = 14;
+    let hi = open;
+    let lo = open;
+    for (let i = 0; i < n; i++) {
+      c = this._step(c);
+      if (c > hi) hi = c;
+      if (c < lo) lo = c;
+    }
+    const range = Math.max(1e-9, hi - lo);
+    const volume = Math.round(
+      (300 + this._rnd() * 900) * (1 + range / open * 260)
+    );
+    return { time, open, high: hi, low: lo, close: c, volume };
+  }
+  /**
+   * Historical bars ending just before `to`. Walks BACKWARDS from a synthetic
+   * anchor, so paging further left keeps producing coherent history.
+   */
+  async getBars({ to, limit = 1500, timeframe = this.timeframe } = {}) {
+    const end = to == null ? this._anchorTime : to;
+    const bars = [];
+    const startTime = end - limit * timeframe;
+    const gen = mulberry32(this.seed ^ Math.floor(startTime / timeframe));
+    const saved = this._rnd;
+    this._rnd = gen;
+    let price = this.start * (1 + (gen() - 0.5) * 0.04);
+    for (let i = 0; i < limit; i++) {
+      const t = startTime + i * timeframe;
+      const bar = this._makeBar(t, price);
+      price = bar.close;
+      bars.push(bar);
+    }
+    this._rnd = saved;
+    if (to == null) {
+      this._last = bars.length ? bars[bars.length - 1].close : this.start;
+    }
+    return bars;
+  }
+  subscribe(handler) {
+    this._handlers.add(handler);
+    if (!this._timer) this._start();
+    return () => {
+      this._handlers.delete(handler);
+      if (!this._handlers.size) this.stop();
+    };
+  }
+  _emit(msg) {
+    for (const h of this._handlers) h(msg);
+  }
+  _start() {
+    const interval = Math.max(16, 1e3 / this.ticksPerSecond);
+    this._timer = setInterval(() => this._tick(), interval);
+  }
+  /** Seed the live candle from wherever history ended. */
+  prime(lastBar) {
+    if (lastBar) {
+      this._last = lastBar.close;
+      this._forming = { ...lastBar };
+    }
+  }
+  _tick() {
+    const tf = this.timeframe / this.speed;
+    const now = Date.now();
+    const slot = Math.floor(now / tf) * tf;
+    if (!this._forming || this._forming.time !== slot) {
+      const open = this._last;
+      this._forming = { time: slot, open, high: open, low: open, close: open, volume: 0 };
+      this._emit({ type: "append", bar: { ...this._forming } });
+      return;
+    }
+    const next = this._step(this._last);
+    this._last = next;
+    const f = this._forming;
+    f.close = next;
+    if (next > f.high) f.high = next;
+    if (next < f.low) f.low = next;
+    f.volume += Math.round(20 + this._rnd() * 120);
+    this._emit({ type: "update", bar: { ...f } });
+  }
+  setSpeed(s) {
+    this.speed = s;
+  }
+  setTicksPerSecond(n) {
+    this.ticksPerSecond = n;
+    if (this._timer) {
+      this.stop();
+      this._start();
+    }
+  }
+  setPaused(paused) {
+    if (paused) this.stop();
+    else if (!this._timer && this._handlers.size) this._start();
+  }
+  get paused() {
+    return !this._timer;
+  }
+  stop() {
+    if (this._timer) clearInterval(this._timer);
+    this._timer = null;
+  }
+  destroy() {
+    this.stop();
+    this._handlers.clear();
+  }
+}
+function createChart(container, options) {
+  return new Chart(container, options);
+}
+const version = "0.1.0";
+export {
+  Chart,
+  DataFeed,
+  Inertia,
+  LiveCandle,
+  PriceScale,
+  RandomFeed,
+  Smoothed,
+  TimeScale,
+  Tween,
+  createChart,
+  defaultTheme,
+  easeInOutCubic,
+  easeOutCubic,
+  lightTheme,
+  mulberry32,
+  version
+};
+//# sourceMappingURL=index.js.map