snice 4.8.0 → 4.9.0

package/dist/cdn/candlestick/snice-candlestick.js

@@ -0,0 +1,717 @@
+/*!
+ * snice v4.8.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-candlestick.min.js");}
+var SniceCandlestick = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;width:100%;--candlestick-bg:var(--snice-color-background, rgb(255 255 255));--candlestick-text:var(--snice-color-text, rgb(23 23 23));--candlestick-text-secondary:var(--snice-color-text-secondary, rgb(82 82 82));--candlestick-border:var(--snice-color-border, rgb(226 226 226));--candlestick-grid:var(--snice-color-border, rgb(226 226 226));--candlestick-bullish:var(--snice-candlestick-bullish, rgb(22 163 74));--candlestick-bearish:var(--snice-candlestick-bearish, rgb(220 38 38))}.candlestick{position:relative;background:var(--candlestick-bg);overflow:hidden;user-select:none}.candlestick__svg{display:block;width:100%;height:100%}.candlestick__grid-line{stroke:var(--candlestick-grid);stroke-width:1px;stroke-dasharray:2 4;opacity:.5}.candlestick__axis-label{fill:var(--candlestick-text-secondary);font-size:.6875rem;font-family:inherit}.candlestick__axis-label--x{text-anchor:middle;dominant-baseline:hanging}.candlestick__axis-label--y{text-anchor:end;dominant-baseline:central}.candlestick__body{cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms) ease}.candlestick__body:hover{opacity:.8}.candlestick__wick{stroke-width:1px;pointer-events:none}.candlestick__volume{opacity:.3}.candlestick__crosshair-h,.candlestick__crosshair-v{stroke:var(--candlestick-text-secondary);stroke-width:1px;stroke-dasharray:4 3;pointer-events:none;opacity:.6}.candlestick__crosshair-label{fill:var(--candlestick-text);font-size:.625rem;font-family:inherit;pointer-events:none}.candlestick__crosshair-label-bg{fill:var(--candlestick-bg);stroke:var(--candlestick-border);stroke-width:1px;pointer-events:none}.candlestick__tooltip{position:absolute;background:var(--candlestick-bg);border:1px solid var(--candlestick-border);border-radius:4px;padding:var(--snice-spacing-xs,.5rem);font-size:.75rem;color:var(--candlestick-text);pointer-events:none;z-index:10;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1));white-space:nowrap;opacity:0;transition:opacity var(--snice-transition-fast, 150ms) ease}.candlestick__tooltip--visible{opacity:1}.candlestick__tooltip-row{display:flex;justify-content:space-between;gap:var(--snice-spacing-sm,.75rem);line-height:var(--snice-line-height-normal, 1.5)}.candlestick__tooltip-label{color:var(--candlestick-text-secondary)}.candlestick__tooltip-value{font-weight:var(--snice-font-weight-semibold,600)}.candlestick__tooltip-value--bullish{color:var(--candlestick-bullish)}.candlestick__tooltip-value--bearish{color:var(--candlestick-bearish)}.candlestick__body--animated,.candlestick__wick--animated{animation:.4s ease-out both candlestick-appear}.candlestick__volume--animated{animation:.4s ease-out both volume-appear}@keyframes candlestick-appear{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes volume-appear{from{opacity:0}to{opacity:.3}}";
+
+  const PADDING = { top: 16, right: 64, bottom: 32, left: 8 };
+  const VOLUME_HEIGHT_RATIO = 0.2;
+  const MIN_CANDLE_WIDTH = 3;
+  const MAX_CANDLE_WIDTH = 24;
+  let SniceCandlestick = (() => {
+      let _classDecorators = [snice.element('snice-candlestick')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _data_decorators;
+      let _data_initializers = [];
+      let _data_extraInitializers = [];
+      let _showVolume_decorators;
+      let _showVolume_initializers = [];
+      let _showVolume_extraInitializers = [];
+      let _showGrid_decorators;
+      let _showGrid_initializers = [];
+      let _showGrid_extraInitializers = [];
+      let _showCrosshair_decorators;
+      let _showCrosshair_initializers = [];
+      let _showCrosshair_extraInitializers = [];
+      let _bullishColor_decorators;
+      let _bullishColor_initializers = [];
+      let _bullishColor_extraInitializers = [];
+      let _bearishColor_decorators;
+      let _bearishColor_initializers = [];
+      let _bearishColor_extraInitializers = [];
+      let _timeFormat_decorators;
+      let _timeFormat_initializers = [];
+      let _timeFormat_extraInitializers = [];
+      let _yAxisFormat_decorators;
+      let _yAxisFormat_initializers = [];
+      let _yAxisFormat_extraInitializers = [];
+      let _zoomEnabled_decorators;
+      let _zoomEnabled_initializers = [];
+      let _zoomEnabled_extraInitializers = [];
+      let _animation_decorators;
+      let _animation_initializers = [];
+      let _animation_extraInitializers = [];
+      let _containerEl_decorators;
+      let _containerEl_initializers = [];
+      let _containerEl_extraInitializers = [];
+      let _svgEl_decorators;
+      let _svgEl_initializers = [];
+      let _svgEl_extraInitializers = [];
+      let _chartContentEl_decorators;
+      let _chartContentEl_initializers = [];
+      let _chartContentEl_extraInitializers = [];
+      let _crosshairGroupEl_decorators;
+      let _crosshairGroupEl_initializers = [];
+      let _crosshairGroupEl_extraInitializers = [];
+      let _tooltipEl_decorators;
+      let _tooltipEl_initializers = [];
+      let _tooltipEl_extraInitializers = [];
+      let _emitCandleClick_decorators;
+      let _emitCandleHover_decorators;
+      let _emitCrosshairMove_decorators;
+      let _init_decorators;
+      let _cleanup_decorators;
+      let _onDataChange_decorators;
+      let _onDisplayChange_decorators;
+      let _renderContent_decorators;
+      let _componentStyles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          constructor() {
+              super(...arguments);
+              this.data = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _data_initializers, []));
+              this.showVolume = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _showVolume_initializers, false));
+              this.showGrid = (__runInitializers(this, _showVolume_extraInitializers), __runInitializers(this, _showGrid_initializers, true));
+              this.showCrosshair = (__runInitializers(this, _showGrid_extraInitializers), __runInitializers(this, _showCrosshair_initializers, true));
+              this.bullishColor = (__runInitializers(this, _showCrosshair_extraInitializers), __runInitializers(this, _bullishColor_initializers, ''));
+              this.bearishColor = (__runInitializers(this, _bullishColor_extraInitializers), __runInitializers(this, _bearishColor_initializers, ''));
+              this.timeFormat = (__runInitializers(this, _bearishColor_extraInitializers), __runInitializers(this, _timeFormat_initializers, 'auto'));
+              this.yAxisFormat = (__runInitializers(this, _timeFormat_extraInitializers), __runInitializers(this, _yAxisFormat_initializers, 'number'));
+              this.zoomEnabled = (__runInitializers(this, _yAxisFormat_extraInitializers), __runInitializers(this, _zoomEnabled_initializers, true));
+              this.animation = (__runInitializers(this, _zoomEnabled_extraInitializers), __runInitializers(this, _animation_initializers, true));
+              this.containerEl = (__runInitializers(this, _animation_extraInitializers), __runInitializers(this, _containerEl_initializers, void 0));
+              this.svgEl = (__runInitializers(this, _containerEl_extraInitializers), __runInitializers(this, _svgEl_initializers, void 0));
+              this.chartContentEl = (__runInitializers(this, _svgEl_extraInitializers), __runInitializers(this, _chartContentEl_initializers, void 0));
+              this.crosshairGroupEl = (__runInitializers(this, _chartContentEl_extraInitializers), __runInitializers(this, _crosshairGroupEl_initializers, void 0));
+              this.tooltipEl = (__runInitializers(this, _crosshairGroupEl_extraInitializers), __runInitializers(this, _tooltipEl_initializers, void 0));
+              // Internal state — plain fields, no @property
+              this.viewStart = (__runInitializers(this, _tooltipEl_extraInitializers), 0);
+              this.viewEnd = 0;
+              this.mouseX = -1;
+              this.mouseY = -1;
+              this.isDragging = false;
+              this.dragStartX = 0;
+              this.dragStartViewStart = 0;
+              this.dragStartViewEnd = 0;
+              this.resizeObserver = null;
+              this.svgWidth = 600;
+              this.svgHeight = 400;
+              this.lastDataLength = 0;
+              this.cachedData = [];
+              this.rafId = 0;
+              this.animateNext = true;
+              this.handleMouseMove = (e) => {
+                  const svg = this.svgEl;
+                  if (!svg)
+                      return;
+                  const ctm = svg.getScreenCTM();
+                  if (ctm) {
+                      const pt = new DOMPoint(e.clientX, e.clientY).matrixTransform(ctm.inverse());
+                      this.mouseX = pt.x;
+                      this.mouseY = pt.y;
+                  }
+                  if (this.isDragging && this.zoomEnabled) {
+                      const dx = e.clientX - this.dragStartX;
+                      const area = this.chartArea;
+                      const viewSize = this.dragStartViewEnd - this.dragStartViewStart;
+                      const candlesPerPx = viewSize / area.width;
+                      const shift = Math.round(-dx * candlesPerPx);
+                      let newStart = this.dragStartViewStart + shift;
+                      let newEnd = this.dragStartViewEnd + shift;
+                      if (newStart < 0) {
+                          newStart = 0;
+                          newEnd = viewSize;
+                      }
+                      if (newEnd > this.cachedData.length) {
+                          newEnd = this.cachedData.length;
+                          newStart = this.cachedData.length - viewSize;
+                      }
+                      const vs = Math.max(0, newStart);
+                      const ve = Math.min(this.cachedData.length, newEnd);
+                      if (vs !== this.viewStart || ve !== this.viewEnd) {
+                          this.viewStart = vs;
+                          this.viewEnd = ve;
+                          this.rebuildChart();
+                          return;
+                      }
+                  }
+                  if (this.showCrosshair) {
+                      const idx = this.xToIndex(this.mouseX);
+                      const candle = this.visibleData[idx];
+                      if (candle) {
+                          const price = this.yToPrice(this.mouseY);
+                          this.emitCrosshairMove(price, this.formatDate(candle.date), this.mouseX, this.mouseY);
+                      }
+                  }
+                  // Only update crosshair + tooltip via direct DOM manipulation — no re-render
+                  if (this.rafId)
+                      cancelAnimationFrame(this.rafId);
+                  this.rafId = requestAnimationFrame(() => {
+                      this.updateCrosshairDOM();
+                      this.updateTooltipDOM();
+                  });
+              };
+              this.handleMouseLeave = () => {
+                  this.mouseX = -1;
+                  this.mouseY = -1;
+                  this.isDragging = false;
+                  this.updateCrosshairDOM();
+                  this.updateTooltipDOM();
+              };
+              this.handleMouseDown = (e) => {
+                  if (!this.zoomEnabled)
+                      return;
+                  this.isDragging = true;
+                  this.dragStartX = e.clientX;
+                  this.dragStartViewStart = this.viewStart;
+                  this.dragStartViewEnd = this.viewEnd;
+              };
+              this.handleMouseUp = () => {
+                  this.isDragging = false;
+              };
+              this.handleWheel = (e) => {
+                  if (!this.zoomEnabled)
+                      return;
+                  e.preventDefault();
+                  const viewSize = this.viewEnd - this.viewStart;
+                  const zoomFactor = e.deltaY > 0 ? 1.1 : 0.9;
+                  let newSize = Math.round(viewSize * zoomFactor);
+                  newSize = Math.max(10, Math.min(this.cachedData.length, newSize));
+                  const area = this.chartArea;
+                  const mouseRatio = (this.mouseX - area.x) / area.width;
+                  const center = this.viewStart + viewSize * mouseRatio;
+                  let newStart = Math.round(center - newSize * mouseRatio);
+                  let newEnd = newStart + newSize;
+                  if (newStart < 0) {
+                      newStart = 0;
+                      newEnd = newSize;
+                  }
+                  if (newEnd > this.cachedData.length) {
+                      newEnd = this.cachedData.length;
+                      newStart = this.cachedData.length - newSize;
+                  }
+                  this.viewStart = Math.max(0, newStart);
+                  this.viewEnd = Math.min(this.cachedData.length, newEnd);
+                  this.rebuildChart();
+              };
+          }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _data_decorators = [snice.property({ type: Array, attribute: false })];
+              _showVolume_decorators = [snice.property({ type: Boolean })];
+              _showGrid_decorators = [snice.property({ type: Boolean })];
+              _showCrosshair_decorators = [snice.property({ type: Boolean })];
+              _bullishColor_decorators = [snice.property()];
+              _bearishColor_decorators = [snice.property()];
+              _timeFormat_decorators = [snice.property()];
+              _yAxisFormat_decorators = [snice.property()];
+              _zoomEnabled_decorators = [snice.property({ type: Boolean })];
+              _animation_decorators = [snice.property({ type: Boolean })];
+              _containerEl_decorators = [snice.query('.candlestick')];
+              _svgEl_decorators = [snice.query('.candlestick__svg')];
+              _chartContentEl_decorators = [snice.query('.candlestick__chart-content')];
+              _crosshairGroupEl_decorators = [snice.query('.candlestick__crosshair-group')];
+              _tooltipEl_decorators = [snice.query('.candlestick__tooltip')];
+              _emitCandleClick_decorators = [snice.dispatch('candle-click', { bubbles: true, composed: true })];
+              _emitCandleHover_decorators = [snice.dispatch('candle-hover', { bubbles: true, composed: true })];
+              _emitCrosshairMove_decorators = [snice.dispatch('crosshair-move', { bubbles: true, composed: true })];
+              _init_decorators = [snice.ready()];
+              _cleanup_decorators = [snice.dispose()];
+              _onDataChange_decorators = [snice.watch('data')];
+              _onDisplayChange_decorators = [snice.watch('showVolume', 'showGrid', 'bullishColor', 'bearishColor', 'timeFormat', 'yAxisFormat', 'animation')];
+              _renderContent_decorators = [snice.render({ once: true })];
+              _componentStyles_decorators = [snice.styles()];
+              __esDecorate(this, null, _emitCandleClick_decorators, { kind: "method", name: "emitCandleClick", static: false, private: false, access: { has: obj => "emitCandleClick" in obj, get: obj => obj.emitCandleClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitCandleHover_decorators, { kind: "method", name: "emitCandleHover", static: false, private: false, access: { has: obj => "emitCandleHover" in obj, get: obj => obj.emitCandleHover }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitCrosshairMove_decorators, { kind: "method", name: "emitCrosshairMove", static: false, private: false, access: { has: obj => "emitCrosshairMove" in obj, get: obj => obj.emitCrosshairMove }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _onDataChange_decorators, { kind: "method", name: "onDataChange", static: false, private: false, access: { has: obj => "onDataChange" in obj, get: obj => obj.onDataChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _onDisplayChange_decorators, { kind: "method", name: "onDisplayChange", static: false, private: false, access: { has: obj => "onDisplayChange" in obj, get: obj => obj.onDisplayChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _data_decorators, { kind: "field", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+              __esDecorate(null, null, _showVolume_decorators, { kind: "field", name: "showVolume", static: false, private: false, access: { has: obj => "showVolume" in obj, get: obj => obj.showVolume, set: (obj, value) => { obj.showVolume = value; } }, metadata: _metadata }, _showVolume_initializers, _showVolume_extraInitializers);
+              __esDecorate(null, null, _showGrid_decorators, { kind: "field", name: "showGrid", static: false, private: false, access: { has: obj => "showGrid" in obj, get: obj => obj.showGrid, set: (obj, value) => { obj.showGrid = value; } }, metadata: _metadata }, _showGrid_initializers, _showGrid_extraInitializers);
+              __esDecorate(null, null, _showCrosshair_decorators, { kind: "field", name: "showCrosshair", static: false, private: false, access: { has: obj => "showCrosshair" in obj, get: obj => obj.showCrosshair, set: (obj, value) => { obj.showCrosshair = value; } }, metadata: _metadata }, _showCrosshair_initializers, _showCrosshair_extraInitializers);
+              __esDecorate(null, null, _bullishColor_decorators, { kind: "field", name: "bullishColor", static: false, private: false, access: { has: obj => "bullishColor" in obj, get: obj => obj.bullishColor, set: (obj, value) => { obj.bullishColor = value; } }, metadata: _metadata }, _bullishColor_initializers, _bullishColor_extraInitializers);
+              __esDecorate(null, null, _bearishColor_decorators, { kind: "field", name: "bearishColor", static: false, private: false, access: { has: obj => "bearishColor" in obj, get: obj => obj.bearishColor, set: (obj, value) => { obj.bearishColor = value; } }, metadata: _metadata }, _bearishColor_initializers, _bearishColor_extraInitializers);
+              __esDecorate(null, null, _timeFormat_decorators, { kind: "field", name: "timeFormat", static: false, private: false, access: { has: obj => "timeFormat" in obj, get: obj => obj.timeFormat, set: (obj, value) => { obj.timeFormat = value; } }, metadata: _metadata }, _timeFormat_initializers, _timeFormat_extraInitializers);
+              __esDecorate(null, null, _yAxisFormat_decorators, { kind: "field", name: "yAxisFormat", static: false, private: false, access: { has: obj => "yAxisFormat" in obj, get: obj => obj.yAxisFormat, set: (obj, value) => { obj.yAxisFormat = value; } }, metadata: _metadata }, _yAxisFormat_initializers, _yAxisFormat_extraInitializers);
+              __esDecorate(null, null, _zoomEnabled_decorators, { kind: "field", name: "zoomEnabled", static: false, private: false, access: { has: obj => "zoomEnabled" in obj, get: obj => obj.zoomEnabled, set: (obj, value) => { obj.zoomEnabled = value; } }, metadata: _metadata }, _zoomEnabled_initializers, _zoomEnabled_extraInitializers);
+              __esDecorate(null, null, _animation_decorators, { kind: "field", name: "animation", static: false, private: false, access: { has: obj => "animation" in obj, get: obj => obj.animation, set: (obj, value) => { obj.animation = value; } }, metadata: _metadata }, _animation_initializers, _animation_extraInitializers);
+              __esDecorate(null, null, _containerEl_decorators, { kind: "field", name: "containerEl", static: false, private: false, access: { has: obj => "containerEl" in obj, get: obj => obj.containerEl, set: (obj, value) => { obj.containerEl = value; } }, metadata: _metadata }, _containerEl_initializers, _containerEl_extraInitializers);
+              __esDecorate(null, null, _svgEl_decorators, { kind: "field", name: "svgEl", static: false, private: false, access: { has: obj => "svgEl" in obj, get: obj => obj.svgEl, set: (obj, value) => { obj.svgEl = value; } }, metadata: _metadata }, _svgEl_initializers, _svgEl_extraInitializers);
+              __esDecorate(null, null, _chartContentEl_decorators, { kind: "field", name: "chartContentEl", static: false, private: false, access: { has: obj => "chartContentEl" in obj, get: obj => obj.chartContentEl, set: (obj, value) => { obj.chartContentEl = value; } }, metadata: _metadata }, _chartContentEl_initializers, _chartContentEl_extraInitializers);
+              __esDecorate(null, null, _crosshairGroupEl_decorators, { kind: "field", name: "crosshairGroupEl", static: false, private: false, access: { has: obj => "crosshairGroupEl" in obj, get: obj => obj.crosshairGroupEl, set: (obj, value) => { obj.crosshairGroupEl = value; } }, metadata: _metadata }, _crosshairGroupEl_initializers, _crosshairGroupEl_extraInitializers);
+              __esDecorate(null, null, _tooltipEl_decorators, { kind: "field", name: "tooltipEl", static: false, private: false, access: { has: obj => "tooltipEl" in obj, get: obj => obj.tooltipEl, set: (obj, value) => { obj.tooltipEl = value; } }, metadata: _metadata }, _tooltipEl_initializers, _tooltipEl_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          emitCandleClick(candle, index) {
+              return { candle, index };
+          }
+          emitCandleHover(candle, index) {
+              return { candle, index };
+          }
+          emitCrosshairMove(price, date, x, y) {
+              return { price, date, x, y };
+          }
+          init() {
+              this.cachedData = this.data;
+              this.viewEnd = this.data.length;
+              this.viewStart = Math.max(0, this.viewEnd - 80);
+              this.resizeObserver = new ResizeObserver(() => {
+                  this.measureSize();
+                  this.rebuildChart();
+              });
+              if (this.containerEl) {
+                  this.resizeObserver.observe(this.containerEl);
+              }
+              this.measureSize();
+              this.rebuildChart();
+          }
+          cleanup() {
+              this.resizeObserver?.disconnect();
+              if (this.rafId)
+                  cancelAnimationFrame(this.rafId);
+          }
+          onDataChange() {
+              this.cachedData = this.data;
+              const dataLen = this.cachedData.length;
+              if (dataLen > 0 && dataLen !== this.lastDataLength) {
+                  this.lastDataLength = dataLen;
+                  this.viewEnd = dataLen;
+                  this.viewStart = Math.max(0, dataLen - 80);
+              }
+              this.animateNext = true;
+              this.rebuildChart();
+          }
+          onDisplayChange() {
+              this.rebuildChart();
+          }
+          measureSize() {
+              if (!this.containerEl)
+                  return;
+              const rect = this.containerEl.getBoundingClientRect();
+              if (rect.width > 0)
+                  this.svgWidth = rect.width;
+              if (rect.height > 0)
+                  this.svgHeight = rect.height;
+          }
+          get visibleData() {
+              return this.cachedData.slice(this.viewStart, this.viewEnd);
+          }
+          get chartArea() {
+              const volumeSpace = this.showVolume ? this.svgHeight * VOLUME_HEIGHT_RATIO : 0;
+              return {
+                  x: PADDING.left,
+                  y: PADDING.top,
+                  width: this.svgWidth - PADDING.left - PADDING.right,
+                  height: this.svgHeight - PADDING.top - PADDING.bottom - volumeSpace,
+                  volumeY: this.svgHeight - PADDING.bottom - volumeSpace,
+                  volumeHeight: volumeSpace
+              };
+          }
+          get priceRange() {
+              const visible = this.visibleData;
+              if (visible.length === 0)
+                  return { min: 0, max: 100 };
+              let min = Infinity;
+              let max = -Infinity;
+              for (const d of visible) {
+                  if (d.low < min)
+                      min = d.low;
+                  if (d.high > max)
+                      max = d.high;
+              }
+              const padding = (max - min) * 0.05 || 1;
+              return { min: min - padding, max: max + padding };
+          }
+          get volumeMax() {
+              const visible = this.visibleData;
+              if (visible.length === 0)
+                  return 1;
+              return Math.max(...visible.map(d => d.volume || 0)) || 1;
+          }
+          get candleWidth() {
+              const area = this.chartArea;
+              const count = this.visibleData.length || 1;
+              const totalWidth = area.width / count;
+              const bodyWidth = totalWidth * 0.7;
+              return Math.max(MIN_CANDLE_WIDTH, Math.min(MAX_CANDLE_WIDTH, bodyWidth));
+          }
+          priceToY(price) {
+              const { min, max } = this.priceRange;
+              const area = this.chartArea;
+              const ratio = (price - min) / (max - min);
+              return area.y + area.height * (1 - ratio);
+          }
+          yToPrice(y) {
+              const { min, max } = this.priceRange;
+              const area = this.chartArea;
+              const ratio = 1 - (y - area.y) / area.height;
+              return min + ratio * (max - min);
+          }
+          indexToX(index) {
+              const area = this.chartArea;
+              const count = this.visibleData.length || 1;
+              const step = area.width / count;
+              return area.x + step * index + step / 2;
+          }
+          xToIndex(x) {
+              const area = this.chartArea;
+              const count = this.visibleData.length || 1;
+              const step = area.width / count;
+              const idx = Math.floor((x - area.x) / step);
+              return Math.max(0, Math.min(count - 1, idx));
+          }
+          formatPrice(price) {
+              switch (this.yAxisFormat) {
+                  case 'currency':
+                      return price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+                  case 'percent':
+                      return price.toFixed(2) + '%';
+                  default:
+                      return price >= 1000 ? price.toLocaleString(undefined, { maximumFractionDigits: 2 }) : price.toFixed(2);
+              }
+          }
+          formatDate(dateVal) {
+              const d = dateVal instanceof Date ? dateVal : new Date(dateVal);
+              if (isNaN(d.getTime()))
+                  return String(dateVal);
+              const fmt = this.timeFormat;
+              if (fmt === 'date')
+                  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+              if (fmt === 'time')
+                  return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+              if (fmt === 'datetime')
+                  return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+              if (fmt === 'month')
+                  return d.toLocaleDateString(undefined, { month: 'short', year: '2-digit' });
+              if (fmt === 'year')
+                  return d.getFullYear().toString();
+              // auto
+              return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+          }
+          /** Rebuild the static chart SVG (candles, grid, axes, volume). Does NOT include crosshair. */
+          rebuildChart() {
+              if (!this.chartContentEl || !this.svgEl) {
+                  requestAnimationFrame(() => this.rebuildChart());
+                  return;
+              }
+              const visible = this.visibleData;
+              let svg = '';
+              if (visible.length > 0) {
+                  svg += this.buildGridLines();
+                  svg += this.buildYAxis();
+                  svg += this.buildXAxis();
+                  svg += this.buildVolumeBars();
+                  svg += this.buildCandles();
+              }
+              this.chartContentEl.innerHTML = svg;
+              // Update SVG viewBox
+              this.svgEl.setAttribute('viewBox', `0 0 ${this.svgWidth} ${this.svgHeight}`);
+              this.svgEl.setAttribute('aria-label', `Candlestick chart with ${this.cachedData.length} data points`);
+              // Update container height
+              if (this.containerEl) {
+                  this.containerEl.style.height = `${this.svgHeight}px`;
+              }
+              // Consume animation flag after building candles
+              this.animateNext = false;
+              // Update crosshair after chart rebuild
+              this.updateCrosshairDOM();
+              this.updateTooltipDOM();
+          }
+          resetZoom() {
+              this.viewStart = 0;
+              this.viewEnd = this.cachedData.length;
+              this.rebuildChart();
+          }
+          zoomTo(startIndex, endIndex) {
+              this.viewStart = Math.max(0, startIndex);
+              this.viewEnd = Math.min(this.cachedData.length, endIndex);
+              this.rebuildChart();
+          }
+          /** Update crosshair overlay via direct DOM manipulation — no re-render needed */
+          updateCrosshairDOM() {
+              const group = this.crosshairGroupEl;
+              if (!group)
+                  return;
+              if (!this.showCrosshair || this.mouseX < 0 || this.mouseY < 0) {
+                  group.innerHTML = '';
+                  return;
+              }
+              const area = this.chartArea;
+              const totalChartBottom = area.y + area.height + area.volumeHeight;
+              const isInChart = this.mouseX >= area.x && this.mouseX <= area.x + area.width
+                  && this.mouseY >= area.y && this.mouseY <= totalChartBottom;
+              if (!isInChart) {
+                  group.innerHTML = '';
+                  return;
+              }
+              const price = this.yToPrice(this.mouseY);
+              const idx = this.xToIndex(this.mouseX);
+              const candle = this.visibleData[idx];
+              const snapX = this.indexToX(idx);
+              let parts = '';
+              // Horizontal line
+              parts += `<line class="candlestick__crosshair-h" x1="${area.x}" y1="${this.mouseY}" x2="${area.x + area.width}" y2="${this.mouseY}" />`;
+              // Vertical line
+              parts += `<line class="candlestick__crosshair-v" x1="${snapX}" y1="${area.y}" x2="${snapX}" y2="${totalChartBottom}" />`;
+              // Price label
+              const priceLabel = this.formatPrice(price);
+              const labelX = this.svgWidth - PADDING.right + 4;
+              parts += `<rect class="candlestick__crosshair-label-bg" x="${labelX}" y="${this.mouseY - 9}" width="${PADDING.right - 8}" height="18" rx="2" />`;
+              parts += `<text class="candlestick__crosshair-label" x="${labelX + 4}" y="${this.mouseY + 4}">${priceLabel}</text>`;
+              // Date label
+              if (candle) {
+                  const dateLabel = this.formatDate(candle.date);
+                  const dateLabelY = totalChartBottom + 4;
+                  parts += `<rect class="candlestick__crosshair-label-bg" x="${snapX - 36}" y="${dateLabelY}" width="72" height="18" rx="2" />`;
+                  parts += `<text class="candlestick__crosshair-label" x="${snapX}" y="${dateLabelY + 13}" text-anchor="middle">${dateLabel}</text>`;
+              }
+              group.innerHTML = parts;
+          }
+          /** Update tooltip via direct DOM manipulation — no re-render needed */
+          updateTooltipDOM() {
+              const tooltip = this.tooltipEl;
+              if (!tooltip)
+                  return;
+              const tooltipCandle = this.getTooltipCandle();
+              const hasTooltip = tooltipCandle !== null;
+              if (!hasTooltip) {
+                  tooltip.classList.remove('candlestick__tooltip--visible');
+                  return;
+              }
+              const isBullish = tooltipCandle.close >= tooltipCandle.open;
+              const showVolumeInTooltip = this.showVolume && tooltipCandle.volume !== undefined;
+              const tooltipIdx = this.xToIndex(this.mouseX);
+              const tooltipX = this.indexToX(tooltipIdx);
+              const tooltipLeft = tooltipX + this.candleWidth + 12;
+              const tooltipFlip = tooltipLeft + 160 > this.svgWidth;
+              const tooltipFinalLeft = tooltipFlip ? tooltipX - this.candleWidth - 170 : tooltipLeft;
+              tooltip.style.left = `${Math.max(0, tooltipFinalLeft)}px`;
+              tooltip.style.top = `${PADDING.top}px`;
+              tooltip.classList.add('candlestick__tooltip--visible');
+              let rows = '';
+              rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Date</span><span class="candlestick__tooltip-value">${this.formatDate(tooltipCandle.date)}</span></div>`;
+              rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Open</span><span class="candlestick__tooltip-value">${this.formatPrice(tooltipCandle.open)}</span></div>`;
+              rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">High</span><span class="candlestick__tooltip-value">${this.formatPrice(tooltipCandle.high)}</span></div>`;
+              rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Low</span><span class="candlestick__tooltip-value">${this.formatPrice(tooltipCandle.low)}</span></div>`;
+              const closeClass = isBullish ? 'candlestick__tooltip-value--bullish' : 'candlestick__tooltip-value--bearish';
+              rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Close</span><span class="candlestick__tooltip-value ${closeClass}">${this.formatPrice(tooltipCandle.close)}</span></div>`;
+              if (showVolumeInTooltip) {
+                  rows += `<div class="candlestick__tooltip-row"><span class="candlestick__tooltip-label">Volume</span><span class="candlestick__tooltip-value">${tooltipCandle.volume?.toLocaleString() || '0'}</span></div>`;
+              }
+              tooltip.innerHTML = rows;
+          }
+          buildGridLines() {
+              if (!this.showGrid)
+                  return '';
+              const area = this.chartArea;
+              const { min, max } = this.priceRange;
+              const ticks = 6;
+              const step = (max - min) / ticks;
+              let lines = '';
+              for (let i = 0; i <= ticks; i++) {
+                  const price = min + step * i;
+                  const y = this.priceToY(price);
+                  lines += `<line class="candlestick__grid-line" x1="${area.x}" y1="${y}" x2="${area.x + area.width}" y2="${y}" />`;
+              }
+              return lines;
+          }
+          buildYAxis() {
+              const { min, max } = this.priceRange;
+              const ticks = 6;
+              const step = (max - min) / ticks;
+              let labels = '';
+              const labelX = this.svgWidth - PADDING.right + 8;
+              for (let i = 0; i <= ticks; i++) {
+                  const price = min + step * i;
+                  const y = this.priceToY(price);
+                  labels += `<text class="candlestick__axis-label candlestick__axis-label--y" x="${labelX}" y="${y}">${this.formatPrice(price)}</text>`;
+              }
+              return labels;
+          }
+          buildXAxis() {
+              const visible = this.visibleData;
+              if (visible.length === 0)
+                  return '';
+              const area = this.chartArea;
+              const labelY = area.y + area.height + area.volumeHeight + 16;
+              const maxLabels = Math.floor(area.width / 80);
+              const step = Math.max(1, Math.ceil(visible.length / maxLabels));
+              let labels = '';
+              for (let i = 0; i < visible.length; i += step) {
+                  const x = this.indexToX(i);
+                  labels += `<text class="candlestick__axis-label candlestick__axis-label--x" x="${x}" y="${labelY}">${this.formatDate(visible[i].date)}</text>`;
+              }
+              return labels;
+          }
+          buildCandles() {
+              const visible = this.visibleData;
+              if (visible.length === 0)
+                  return '';
+              const cw = this.candleWidth;
+              const halfCw = cw / 2;
+              let parts = '';
+              for (let i = 0; i < visible.length; i++) {
+                  const candle = visible[i];
+                  const isBullish = candle.close >= candle.open;
+                  const color = isBullish
+                      ? (this.bullishColor || 'var(--candlestick-bullish)')
+                      : (this.bearishColor || 'var(--candlestick-bearish)');
+                  const x = this.indexToX(i);
+                  const highY = this.priceToY(candle.high);
+                  const lowY = this.priceToY(candle.low);
+                  const openY = this.priceToY(candle.open);
+                  const closeY = this.priceToY(candle.close);
+                  const bodyTop = Math.min(openY, closeY);
+                  const bodyHeight = Math.max(1, Math.abs(closeY - openY));
+                  const shouldAnimate = this.animation && this.animateNext;
+                  const animDelay = shouldAnimate ? `animation-delay: ${i * 8}ms;` : '';
+                  const wickAnimClass = shouldAnimate ? ' candlestick__wick--animated' : '';
+                  const bodyAnimClass = shouldAnimate ? ' candlestick__body--animated' : '';
+                  // Wick (high to low)
+                  parts += `<line class="candlestick__wick${wickAnimClass}" x1="${x}" y1="${highY}" x2="${x}" y2="${lowY}" stroke="${color}" style="${animDelay}" />`;
+                  // Body (open to close)
+                  parts += `<rect class="candlestick__body${bodyAnimClass}" x="${x - halfCw}" y="${bodyTop}" width="${cw}" height="${bodyHeight}" fill="${color}" stroke="${color}" stroke-width="1" rx="1" style="${animDelay}" data-candle-index="${i}" />`;
+              }
+              return parts;
+          }
+          buildVolumeBars() {
+              if (!this.showVolume)
+                  return '';
+              const visible = this.visibleData;
+              if (visible.length === 0)
+                  return '';
+              const area = this.chartArea;
+              const volMax = this.volumeMax;
+              const cw = this.candleWidth;
+              const halfCw = cw / 2;
+              let parts = '';
+              for (let i = 0; i < visible.length; i++) {
+                  const candle = visible[i];
+                  const vol = candle.volume || 0;
+                  const isBullish = candle.close >= candle.open;
+                  const color = isBullish
+                      ? (this.bullishColor || 'var(--candlestick-bullish)')
+                      : (this.bearishColor || 'var(--candlestick-bearish)');
+                  const x = this.indexToX(i);
+                  const barHeight = (vol / volMax) * area.volumeHeight;
+                  const barY = area.volumeY + area.volumeHeight - barHeight;
+                  const shouldAnimate = this.animation && this.animateNext;
+                  const animDelay = shouldAnimate ? `animation-delay: ${i * 8}ms;` : '';
+                  const animClass = shouldAnimate ? ' candlestick__volume--animated' : '';
+                  parts += `<rect class="candlestick__volume${animClass}" x="${x - halfCw}" y="${barY}" width="${cw}" height="${barHeight}" fill="${color}" style="${animDelay}" />`;
+              }
+              return parts;
+          }
+          getTooltipCandle() {
+              if (this.mouseX < 0)
+                  return null;
+              const area = this.chartArea;
+              if (this.mouseX < area.x || this.mouseX > area.x + area.width)
+                  return null;
+              const idx = this.xToIndex(this.mouseX);
+              return this.visibleData[idx] || null;
+          }
+          renderContent() {
+              return snice.html /*html*/ `
+      <div class="candlestick"
+           style="height: ${this.svgHeight}px;"
+           @mousemove=${this.handleMouseMove}
+           @mouseleave=${this.handleMouseLeave}
+           @mousedown=${this.handleMouseDown}
+           @mouseup=${this.handleMouseUp}
+           @wheel=${this.handleWheel}>
+        <svg class="candlestick__svg" viewBox="0 0 ${this.svgWidth} ${this.svgHeight}" preserveAspectRatio="none" role="img" aria-label="Candlestick chart with ${this.data.length} data points">
+          <g class="candlestick__chart-content"></g>
+          <g class="candlestick__crosshair-group"></g>
+        </svg>
+        <div class="candlestick__tooltip"></div>
+      </div>
+    `;
+          }
+          componentStyles() {
+              return snice.css /*css*/ `${cssContent}`;
+          }
+      });
+      return _classThis;
+  })();
+
+  exports.SniceCandlestick = SniceCandlestick;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-candlestick.js.map