@design.estate/dees-catalog 3.98.0 → 3.99.0

package/dist_bundle/bundle.js

@@ -160989,6 +160989,16 @@ var chartAreaStyles = [
         position: absolute;
         inset: 0 0 4px 0;
       }
+      .rangeSelectionOverlay {
+        position: absolute;
+        display: none;
+        top: 0;
+        bottom: 0;
+        z-index: 3;
+        pointer-events: none;
+        background: color-mix(in srgb, var(--dees-color-accent, #3b82f6) 18%, transparent);
+        border-inline: 1px solid color-mix(in srgb, var(--dees-color-accent, #3b82f6) 70%, transparent);
+      }
       .statsBar {
         min-height: 32px;
         padding: 4px 16px;
@@ -161054,7 +161064,9 @@ var renderChartArea = /* @__PURE__ */ __name((component) => {
               <dees-icon .icon=${component.isFullPage ? "lucide:Minimize2" : "lucide:Maximize2"} .iconSize=${14}></dees-icon>
             </button>
           </div>
-          <div class="chartContainer"></div>
+          <div class="chartContainer">
+            <div class="rangeSelectionOverlay" aria-hidden="true"></div>
+          </div>
           ${component.seriesStats.length > 0 && !component.hideLegend ? b2`
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map((s9) => b2`
@@ -161072,6 +161084,72 @@ var renderChartArea = /* @__PURE__ */ __name((component) => {
       `;
 }, "renderChartArea");
 
+// ts_web/elements/00group-chart/dees-chart-area/realtime-updates.ts
+var planRealtimeChartUpdates = /* @__PURE__ */ __name((renderedData, canonicalData) => {
+  if (canonicalData.length === 0) {
+    return {
+      replacementRequired: renderedData.length !== 0,
+      updates: [],
+      pruneRecommended: false,
+      pruneRequired: false
+    };
+  }
+  if (renderedData.length === 0) {
+    return {
+      replacementRequired: false,
+      updates: canonicalData.map((point4) => ({ point: point4, historicalUpdate: false })),
+      pruneRecommended: false,
+      pruneRequired: false
+    };
+  }
+  const renderedByTime = new Map(renderedData.map((point4) => [point4.time, point4]));
+  const canonicalByTime = new Map(canonicalData.map((point4) => [point4.time, point4]));
+  const canonicalStart = canonicalData[0].time;
+  const renderedLastTime = renderedData[renderedData.length - 1].time;
+  const hasStructuralDeletion = renderedData.some(
+    (point4) => point4.time >= canonicalStart && !canonicalByTime.has(point4.time)
+  );
+  if (hasStructuralDeletion) {
+    return {
+      replacementRequired: true,
+      updates: [],
+      pruneRecommended: false,
+      pruneRequired: false
+    };
+  }
+  const updates = [];
+  for (const canonicalPoint of canonicalData) {
+    const renderedPoint = renderedByTime.get(canonicalPoint.time);
+    if (!renderedPoint) {
+      if (canonicalPoint.time < renderedLastTime) {
+        return {
+          replacementRequired: true,
+          updates: [],
+          pruneRecommended: false,
+          pruneRequired: false
+        };
+      }
+      updates.push({ point: canonicalPoint, historicalUpdate: false });
+      continue;
+    }
+    if (renderedPoint.value !== canonicalPoint.value) {
+      updates.push({
+        point: canonicalPoint,
+        historicalUpdate: canonicalPoint.time < renderedLastTime
+      });
+    }
+  }
+  const firstCanonicalPointIndex = renderedData.findIndex((point4) => point4.time >= canonicalStart);
+  const retainedPrefixLength = firstCanonicalPointIndex === -1 ? renderedData.length : firstCanonicalPointIndex;
+  const projectedLength = renderedData.length + updates.filter((update) => !renderedByTime.has(update.point.time)).length;
+  const retentionLimit = Math.max(canonicalData.length * 2, 2);
+  const pruneRecommended = retainedPrefixLength > 0 && projectedLength > retentionLimit;
+  const hardRetentionLimit = Math.max(canonicalData.length * 3, 3);
+  const pruneRequired = retainedPrefixLength > 0 && projectedLength > hardRetentionLimit;
+  return { replacementRequired: false, updates, pruneRecommended, pruneRequired };
+}, "planRealtimeChartUpdates");
+var haveSameSeriesLayout = /* @__PURE__ */ __name((renderedNames, canonicalNames) => renderedNames.length === canonicalNames.length && renderedNames.every((name, index3) => name === canonicalNames[index3]), "haveSameSeriesLayout");
+
 // ts_web/elements/00group-chart/dees-chart-echarts-theme.ts
 init_theme();
 init_fonts();
@@ -161157,10 +161235,10 @@ init_dist_ts25();
 init_dist_ts24();
 init_services();
 init_dees_tile();
-var _chartLines_dec, _hideLegend_dec, _legendStats_dec, _autoScrollInterval_dec, _yAxisMax_dec, _yAxisScaling_dec, _realtimeMode_dec, _rollingWindow_dec, _yAxisFormatter_dec, _series_dec, _label_dec5, _isFullPage_dec, _seriesStats_dec, _chart_dec, _a56, _DeesChartArea_decorators, _init57, _chart, _seriesStats, _isFullPage, _label5, _series, _yAxisFormatter, _rollingWindow, _realtimeMode, _yAxisScaling, _yAxisMax, _autoScrollInterval, _legendStats, _hideLegend, _chartLines;
+var _selectedRange_dec, _rangeSelectionEnabled_dec, _chartLines_dec, _hideLegend_dec, _legendStats_dec, _autoScrollInterval_dec, _yAxisMax_dec, _yAxisScaling_dec, _realtimeMode_dec, _rollingWindow_dec, _yAxisFormatter_dec, _series_dec, _label_dec5, _isFullPage_dec, _seriesStats_dec, _chart_dec, _a56, _DeesChartArea_decorators, _init57, _chart, _seriesStats, _isFullPage, _label5, _series, _yAxisFormatter, _rollingWindow, _realtimeMode, _yAxisScaling, _yAxisMax, _autoScrollInterval, _legendStats, _hideLegend, _chartLines, _rangeSelectionEnabled, _selectedRange;
 var CHART_LEGEND_STATS = ["latest", "min", "max", "avg"];
 _DeesChartArea_decorators = [customElement("dees-chart-area")];
-var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_dec = [r5()], _seriesStats_dec = [r5()], _isFullPage_dec = [r5()], _label_dec5 = [n5()], _series_dec = [n5({ type: Array })], _yAxisFormatter_dec = [n5({ attribute: false })], _rollingWindow_dec = [n5({ type: Number })], _realtimeMode_dec = [n5({ type: Boolean })], _yAxisScaling_dec = [n5({ type: String })], _yAxisMax_dec = [n5({ type: Number })], _autoScrollInterval_dec = [n5({ type: Number })], _legendStats_dec = [n5({ type: Array })], _hideLegend_dec = [n5({ type: Boolean })], _chartLines_dec = [n5({ type: Array })], _a56) {
+var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_dec = [r5()], _seriesStats_dec = [r5()], _isFullPage_dec = [r5()], _label_dec5 = [n5()], _series_dec = [n5({ type: Array })], _yAxisFormatter_dec = [n5({ attribute: false })], _rollingWindow_dec = [n5({ type: Number })], _realtimeMode_dec = [n5({ type: Boolean })], _yAxisScaling_dec = [n5({ type: String })], _yAxisMax_dec = [n5({ type: Number })], _autoScrollInterval_dec = [n5({ type: Number })], _legendStats_dec = [n5({ type: Array })], _hideLegend_dec = [n5({ type: Boolean })], _chartLines_dec = [n5({ type: Array })], _rangeSelectionEnabled_dec = [n5({ type: Boolean })], _selectedRange_dec = [n5({ attribute: false })], _a56) {
   constructor() {
     super();
     __privateAdd(this, _chart, __runInitializers(_init57, 8, this, null)), __runInitializers(_init57, 11, this);
@@ -161177,25 +161255,112 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     __privateAdd(this, _legendStats, __runInitializers(_init57, 52, this, [...CHART_LEGEND_STATS])), __runInitializers(_init57, 55, this);
     __privateAdd(this, _hideLegend, __runInitializers(_init57, 56, this, false)), __runInitializers(_init57, 59, this);
     __privateAdd(this, _chartLines, __runInitializers(_init57, 60, this, ["avg", "max"])), __runInitializers(_init57, 63, this);
+    __privateAdd(this, _rangeSelectionEnabled, __runInitializers(_init57, 64, this, false)), __runInitializers(_init57, 67, this);
+    __privateAdd(this, _selectedRange, __runInitializers(_init57, 68, this, null)), __runInitializers(_init57, 71, this);
     __publicField(this, "internalChartData", []);
     __publicField(this, "autoScrollTimer", null);
     __publicField(this, "lcBundle", null);
     __publicField(this, "seriesApis", /* @__PURE__ */ new Map());
     __publicField(this, "priceLines", /* @__PURE__ */ new Map());
     __publicField(this, "tooltipEl", null);
+    __publicField(this, "crosshairActive", false);
+    __publicField(this, "pendingRealtimePrune", false);
+    __publicField(this, "crosshairMoveHandler", null);
+    __publicField(this, "chartContainer", null);
+    __publicField(this, "rangeOverlay", null);
+    __publicField(this, "rangeResizeObserver", null);
+    __publicField(this, "rangeDrag", null);
+    __publicField(this, "rangePointerDownHandler", /* @__PURE__ */ __name((event) => {
+      if (!this.rangeSelectionEnabled || event.button !== 0 || !this.chartContainer) return;
+      const x3 = this.getRangePointerX(event);
+      const timeMs = this.coordinateToEpochMs(x3);
+      if (timeMs === null) return;
+      event.preventDefault();
+      this.rangeDrag = { pointerId: event.pointerId, startX: x3, startMs: timeMs };
+      try {
+        this.chartContainer.setPointerCapture(event.pointerId);
+      } catch {
+      }
+      window.addEventListener("keydown", this.rangeKeydownHandler);
+      this.paintRangeOverlay(x3, x3);
+    }, "rangePointerDownHandler"));
+    __publicField(this, "rangePointerMoveHandler", /* @__PURE__ */ __name((event) => {
+      if (!this.rangeDrag || event.pointerId !== this.rangeDrag.pointerId) return;
+      event.preventDefault();
+      this.paintRangeOverlay(this.rangeDrag.startX, this.getRangePointerX(event));
+    }, "rangePointerMoveHandler"));
+    __publicField(this, "rangePointerUpHandler", /* @__PURE__ */ __name((event) => {
+      const drag = this.rangeDrag;
+      if (!drag || event.pointerId !== drag.pointerId) return;
+      const endX = this.getRangePointerX(event);
+      const endMs = this.coordinateToEpochMs(endX);
+      this.finishRangeDrag(event.pointerId);
+      if (endMs === null || Math.abs(endX - drag.startX) < 4) {
+        this.syncRangeOverlay();
+        return;
+      }
+      const from3 = Math.min(drag.startMs, endMs);
+      const to = Math.max(drag.startMs, endMs);
+      if (!Number.isSafeInteger(from3) || !Number.isSafeInteger(to) || from3 >= to) {
+        this.syncRangeOverlay();
+        return;
+      }
+      this.dispatchEvent(new CustomEvent("range-change", {
+        detail: { from: from3, to },
+        bubbles: true,
+        composed: true
+      }));
+      this.syncRangeOverlay();
+    }, "rangePointerUpHandler"));
+    __publicField(this, "rangePointerCancelHandler", /* @__PURE__ */ __name((event) => {
+      if (!this.rangeDrag || event.pointerId !== this.rangeDrag.pointerId) return;
+      this.finishRangeDrag(event.pointerId);
+      this.syncRangeOverlay();
+    }, "rangePointerCancelHandler"));
+    __publicField(this, "rangeKeydownHandler", /* @__PURE__ */ __name((event) => {
+      if (event.key !== "Escape" || !this.rangeDrag) return;
+      const pointerId = this.rangeDrag.pointerId;
+      this.finishRangeDrag(pointerId);
+      this.syncRangeOverlay();
+    }, "rangeKeydownHandler"));
+    __publicField(this, "rangeVisibleTimeChangeHandler", /* @__PURE__ */ __name(() => {
+      this.syncRangeOverlay();
+    }, "rangeVisibleTimeChangeHandler"));
+    __publicField(this, "chartMouseLeaveHandler", /* @__PURE__ */ __name(() => {
+      this.chart?.clearCrosshairPosition();
+      this.handleCrosshairCleared();
+    }, "chartMouseLeaveHandler"));
     domtools_elementbasic_exports.setup();
     this.registerGarbageFunction(async () => {
       this.stopAutoScroll();
-      if (this.chart) {
+      const chart = this.chart;
+      const crosshairMoveHandler = this.crosshairMoveHandler;
+      this.crosshairMoveHandler = null;
+      this.chartContainer?.removeEventListener("mouseleave", this.chartMouseLeaveHandler);
+      this.teardownRangeSelection();
+      this.chart = null;
+      this.rangeResizeObserver?.disconnect();
+      this.rangeResizeObserver = null;
+      this.chartContainer = null;
+      this.tooltipEl = null;
+      this.rangeOverlay = null;
+      this.crosshairActive = false;
+      this.pendingRealtimePrune = false;
+      if (crosshairMoveHandler && chart) {
         try {
-          this.chart.remove();
-          this.chart = null;
-          this.seriesApis.clear();
-          this.priceLines.clear();
-        } catch (e10) {
-          console.error("Error destroying chart:", e10);
+          chart.unsubscribeCrosshairMove(crosshairMoveHandler);
+        } catch (error) {
+          console.error("Error unsubscribing chart crosshair:", error);
         }
       }
+      try {
+        chart?.remove();
+      } catch (error) {
+        console.error("Error destroying chart:", error);
+      } finally {
+        this.seriesApis.clear();
+        this.priceLines.clear();
+      }
     });
   }
   get chartSeries() {
@@ -161205,11 +161370,116 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     return renderChartArea(this);
   }
   // --- Helpers ---
+  getRangePointerX(event) {
+    const rect = this.chartContainer.getBoundingClientRect();
+    return Math.min(Math.max(event.clientX - rect.left, 0), rect.width);
+  }
+  coordinateToEpochMs(coordinateArg) {
+    const time = this.chart?.timeScale().coordinateToTime(coordinateArg);
+    if (typeof time !== "number" || !Number.isFinite(time)) return null;
+    const epochMs = Math.round(time * 1e3);
+    return Number.isSafeInteger(epochMs) && epochMs >= 0 ? epochMs : null;
+  }
+  paintRangeOverlay(firstXArg, secondXArg) {
+    if (!this.rangeOverlay) return;
+    const left = Math.min(firstXArg, secondXArg);
+    const width = Math.abs(secondXArg - firstXArg);
+    this.rangeOverlay.style.display = "block";
+    this.rangeOverlay.style.left = `${left}px`;
+    this.rangeOverlay.style.width = `${Math.max(width, 1)}px`;
+  }
+  finishRangeDrag(pointerIdArg) {
+    this.rangeDrag = null;
+    window.removeEventListener("keydown", this.rangeKeydownHandler);
+    try {
+      this.chartContainer?.releasePointerCapture(pointerIdArg);
+    } catch {
+    }
+  }
+  setupRangeSelection() {
+    if (!this.chartContainer) return;
+    this.rangeOverlay = this.chartContainer.querySelector(".rangeSelectionOverlay");
+    this.chart?.timeScale().subscribeVisibleTimeRangeChange(this.rangeVisibleTimeChangeHandler);
+    this.chartContainer.addEventListener("pointerdown", this.rangePointerDownHandler);
+    this.chartContainer.addEventListener("pointermove", this.rangePointerMoveHandler);
+    this.chartContainer.addEventListener("pointerup", this.rangePointerUpHandler);
+    this.chartContainer.addEventListener("pointercancel", this.rangePointerCancelHandler);
+    this.chartContainer.addEventListener("lostpointercapture", this.rangePointerCancelHandler);
+    this.rangeResizeObserver = new ResizeObserver(() => this.syncRangeOverlay());
+    this.rangeResizeObserver.observe(this.chartContainer);
+    this.syncRangeOverlay();
+  }
+  teardownRangeSelection() {
+    if (!this.chartContainer) return;
+    this.chart?.timeScale().unsubscribeVisibleTimeRangeChange(this.rangeVisibleTimeChangeHandler);
+    this.chartContainer.removeEventListener("pointerdown", this.rangePointerDownHandler);
+    this.chartContainer.removeEventListener("pointermove", this.rangePointerMoveHandler);
+    this.chartContainer.removeEventListener("pointerup", this.rangePointerUpHandler);
+    this.chartContainer.removeEventListener("pointercancel", this.rangePointerCancelHandler);
+    this.chartContainer.removeEventListener("lostpointercapture", this.rangePointerCancelHandler);
+    window.removeEventListener("keydown", this.rangeKeydownHandler);
+    if (this.rangeDrag) {
+      try {
+        this.chartContainer.releasePointerCapture(this.rangeDrag.pointerId);
+      } catch {
+      }
+    }
+    this.rangeDrag = null;
+  }
+  syncRangeOverlay() {
+    if (!this.rangeOverlay || !this.chart || !this.rangeSelectionEnabled || !this.selectedRange) {
+      if (this.rangeOverlay) this.rangeOverlay.style.display = "none";
+      return;
+    }
+    const { from: from3, to } = this.selectedRange;
+    if (!Number.isSafeInteger(from3) || !Number.isSafeInteger(to) || from3 < 0 || to <= from3) {
+      this.rangeOverlay.style.display = "none";
+      return;
+    }
+    const fromCoordinate = this.chart.timeScale().timeToCoordinate(
+      Math.floor(from3 / 1e3)
+    );
+    const toCoordinate = this.chart.timeScale().timeToCoordinate(
+      Math.floor(to / 1e3)
+    );
+    if (fromCoordinate === null || toCoordinate === null) {
+      this.rangeOverlay.style.display = "none";
+      return;
+    }
+    this.paintRangeOverlay(fromCoordinate, toCoordinate);
+  }
   convertDataToLC(data) {
-    return data.map((point4) => {
+    const pointsByTime = /* @__PURE__ */ new Map();
+    for (const point4 of data) {
       const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
-      return { time: Math.floor(ms / 1e3), value: point4.y };
-    }).sort((a4, b4) => a4.time - b4.time);
+      const time = Math.floor(ms / 1e3);
+      if (!Number.isFinite(time) || !Number.isFinite(point4.y)) continue;
+      pointsByTime.set(time, { time, value: point4.y });
+    }
+    return [...pointsByTime.values()].sort((a4, b4) => a4.time - b4.time);
+  }
+  getSeriesName(series, index3) {
+    return series.name || `series-${index3}`;
+  }
+  getSeriesKey(series, index3) {
+    return `${index3}:${this.getSeriesName(series, index3)}`;
+  }
+  getCanonicalChartSeries(chartSeries) {
+    const cutoffTime = Date.now() - this.rollingWindow;
+    return chartSeries.map((series) => ({
+      ...series,
+      data: this.convertDataToLC(series.data.filter((point4) => {
+        if (!this.realtimeMode || this.rollingWindow <= 0) return true;
+        const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
+        return ms > cutoffTime;
+      })).map((point4) => ({
+        x: point4.time * 1e3,
+        y: point4.value
+      }))
+    }));
+  }
+  getRenderedSeriesData(api) {
+    return api.data().filter((point4) => "value" in point4).map((point4) => ({ time: point4.time, value: point4.value }));
   }
   colorToRgba(color2, alpha2) {
     if (/^#[0-9a-fA-F]{6}$/.test(color2)) {
@@ -161301,7 +161571,7 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
         crosshairMarkerRadius: 4
       });
       api.setData(this.convertDataToLC(s9.data));
-      this.updatePriceLines(s9.name || `series-${index3}`, api, s9.data, color2);
+      this.updatePriceLines(this.getSeriesKey(s9, index3), api, s9.data, color2);
       if (this.yAxisScaling !== "dynamic") {
         api.applyOptions({
           autoscaleInfoProvider: /* @__PURE__ */ __name(() => ({
@@ -161309,13 +161579,63 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
           }), "autoscaleInfoProvider")
         });
       }
-      this.seriesApis.set(s9.name || `series-${index3}`, api);
+      this.seriesApis.set(this.getSeriesKey(s9, index3), api);
     });
     this.computeStats(chartSeries);
-    if (this.rollingWindow <= 0) {
+    this.pendingRealtimePrune = false;
+    if (this.realtimeMode && this.rollingWindow > 0) {
+      void this.updateTimeWindow();
+    } else {
       this.chart.timeScale().fitContent();
     }
   }
+  updateSeriesPresentation(chartSeries) {
+    const isDark = !this.goBright;
+    chartSeries.forEach((series, index3) => {
+      const seriesKey = this.getSeriesKey(series, index3);
+      const api = this.seriesApis.get(seriesKey);
+      if (!api) return;
+      const color2 = this.resolveSeriesColor(series, index3, isDark);
+      api.applyOptions({
+        topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
+        bottomColor: this.colorToRgba(color2, 0),
+        lineColor: color2
+      });
+      this.updatePriceLines(seriesKey, api, series.data, color2);
+    });
+    this.computeStats(chartSeries);
+    if (this.yAxisScaling === "dynamic") {
+      const allValues = chartSeries.flatMap((series) => series.data.map((point4) => point4.y));
+      if (allValues.length > 0) {
+        const dynamicMax = Math.ceil(Math.max(...allValues) * 1.1);
+        for (const [, api] of this.seriesApis) {
+          api.applyOptions({
+            autoscaleInfoProvider: /* @__PURE__ */ __name(() => ({ priceRange: { minValue: 0, maxValue: dynamicMax } }), "autoscaleInfoProvider")
+          });
+        }
+      }
+    }
+  }
+  handleCrosshairCleared() {
+    this.crosshairActive = false;
+    if (this.tooltipEl) this.tooltipEl.style.display = "none";
+    this.flushPendingRealtimePrune();
+  }
+  clearCrosshairForDataReplacement() {
+    this.pendingRealtimePrune = false;
+    this.chart?.clearCrosshairPosition();
+    this.crosshairActive = false;
+    if (this.tooltipEl) this.tooltipEl.style.display = "none";
+  }
+  flushPendingRealtimePrune() {
+    if (!this.pendingRealtimePrune || this.crosshairActive || !this.chart || !this.realtimeMode || this.rollingWindow <= 0) return;
+    const canonicalSeries = this.getCanonicalChartSeries(this.internalChartData);
+    canonicalSeries.forEach((series, index3) => {
+      const api = this.seriesApis.get(this.getSeriesKey(series, index3));
+      if (api) api.setData(this.convertDataToLC(series.data));
+    });
+    this.pendingRealtimePrune = false;
+  }
   computeStats(chartSeries) {
     const isDark = !this.goBright;
     this.seriesStats = chartSeries.map((s9, index3) => {
@@ -161375,13 +161695,16 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     this.tooltipEl = document.createElement("div");
     this.tooltipEl.className = "lw-tooltip";
     this.tooltipEl.style.display = "none";
-    this.shadowRoot.querySelector(".chartContainer")?.appendChild(this.tooltipEl);
-    this.chart.subscribeCrosshairMove((param) => {
+    this.chartContainer = this.shadowRoot.querySelector(".chartContainer");
+    this.chartContainer?.appendChild(this.tooltipEl);
+    this.chartContainer?.addEventListener("mouseleave", this.chartMouseLeaveHandler);
+    this.crosshairMoveHandler = (param) => {
       if (!this.tooltipEl) return;
-      if (!param.point || !param.time || param.point.x < 0 || param.point.y < 0) {
-        this.tooltipEl.style.display = "none";
+      if (!param.point || param.time === void 0 || param.point.x < 0 || param.point.y < 0) {
+        this.handleCrosshairCleared();
         return;
       }
+      this.crosshairActive = true;
       const isDark = !this.goBright;
       const bgColor = isDark ? "hsl(0 0% 9%)" : "hsl(0 0% 100%)";
       const textColor = isDark ? "hsl(0 0% 95%)" : "hsl(0 0% 9%)";
@@ -161389,11 +161712,13 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
       let html8 = "";
       let idx = 0;
       let hasData = false;
-      for (const [name, api] of this.seriesApis) {
+      for (const api of this.seriesApis.values()) {
         const data = param.seriesData.get(api);
         if (data && "value" in data && data.value !== void 0) {
           hasData = true;
-          const color2 = this.resolveSeriesColor(this.chartSeries[idx], idx, isDark);
+          const series = this.internalChartData[idx];
+          const name = series ? this.getSeriesName(series, idx) : `series-${idx}`;
+          const color2 = this.resolveSeriesColor(series, idx, isDark);
           const formatted = this.yAxisFormatter(data.value);
           html8 += `<div style="display:flex;align-items:center;gap:8px;margin:${idx > 0 ? "6px" : "0"} 0;">
             <span style="display:inline-block;width:10px;height:10px;background:${color2};border-radius:2px;"></span>
@@ -161419,13 +161744,17 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
       if (left + 200 > containerWidth) left = param.point.x - 216;
       this.tooltipEl.style.left = `${left}px`;
       this.tooltipEl.style.top = `${param.point.y - 16}px`;
-    });
+    };
+    this.chart.subscribeCrosshairMove(this.crosshairMoveHandler);
   }
   // --- Lifecycle ---
   async firstUpdated() {
     await this.domtoolsPromise;
+    if (!this.isConnected) return;
     this.lcBundle = await DeesServiceLibLoader.getInstance().loadLightweightCharts();
+    if (!this.isConnected) return;
     await new Promise((resolve2) => requestAnimationFrame(resolve2));
+    if (!this.isConnected) return;
     const chartContainer = this.shadowRoot.querySelector(".chartContainer");
     if (!chartContainer) return;
     const isDark = !this.goBright;
@@ -161480,9 +161809,12 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
           ]
         }
       ];
-      this.internalChartData = chartSeries;
-      this.recreateSeries(chartSeries);
+      const canonicalSeries = this.getCanonicalChartSeries(chartSeries);
+      this.internalChartData = canonicalSeries;
+      this.recreateSeries(canonicalSeries);
       this.setupTooltip();
+      this.setupRangeSelection();
+      this.syncAutoScroll();
     } catch (error) {
       console.error("Failed to initialize chart:", error);
     }
@@ -161492,23 +161824,29 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     if (changedProperties.has("goBright") && this.chart) {
       this.applyTheme();
     }
-    if (changedProperties.has("series") && this.chart && this.series.length > 0) {
+    const seriesChanged = changedProperties.has("series") && this.series.length > 0;
+    if (seriesChanged && this.chart) {
       await this.updateSeries(this.series);
     }
     if (changedProperties.has("yAxisFormatter") && this.chart) {
     }
-    if (changedProperties.has("realtimeMode") && this.chart) {
-      if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
-        this.startAutoScroll();
+    const realtimeConfigurationChanged = changedProperties.has("realtimeMode") || changedProperties.has("rollingWindow");
+    const autoScrollConfigurationChanged = realtimeConfigurationChanged || changedProperties.has("autoScrollInterval");
+    if (this.chart && realtimeConfigurationChanged) {
+      if (!seriesChanged && this.internalChartData.length > 0) {
+        await this.updateSeries(this.internalChartData);
+      }
+      if (this.realtimeMode && this.rollingWindow > 0) {
+        await this.updateTimeWindow();
       } else {
-        this.stopAutoScroll();
+        this.chart.timeScale().fitContent();
       }
     }
-    if (changedProperties.has("autoScrollInterval") && this.chart) {
-      this.stopAutoScroll();
-      if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
-        this.startAutoScroll();
-      }
+    if (this.chart && autoScrollConfigurationChanged) {
+      this.syncAutoScroll();
+    }
+    if (changedProperties.has("selectedRange") || changedProperties.has("rangeSelectionEnabled")) {
+      this.syncRangeOverlay();
     }
     if (changedProperties.has("chartLines") && this.chart) {
       this.refreshPriceLines();
@@ -161529,77 +161867,76 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
   async updateSeries(newSeries, animate = true) {
     if (!this.chart) return;
     try {
-      this.internalChartData = newSeries;
-      if (this.rollingWindow > 0 && this.realtimeMode) {
-        const now3 = Date.now();
-        const cutoffTime = now3 - this.rollingWindow;
-        if (newSeries.length !== this.seriesApis.size) {
-          this.recreateSeries(newSeries);
-        } else {
-          const isDark = !this.goBright;
-          newSeries.forEach((s9, index3) => {
-            const name = s9.name || `series-${index3}`;
-            const api = this.seriesApis.get(name);
-            if (!api) return;
-            const filtered = s9.data.filter((point4) => {
-              const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
-              return ms > cutoffTime;
-            });
-            api.setData(this.convertDataToLC(filtered));
-            const color2 = this.resolveSeriesColor(s9, index3, isDark);
-            api.applyOptions({
-              topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
-              bottomColor: this.colorToRgba(color2, 0),
-              lineColor: color2
-            });
-            this.updatePriceLines(name, api, filtered, color2);
-          });
-          this.computeStats(newSeries);
-        }
-        try {
-          this.chart.timeScale().setVisibleRange({
-            from: Math.floor(cutoffTime / 1e3),
-            to: Math.floor(now3 / 1e3)
-          });
-        } catch (e10) {
-        }
-        if (this.yAxisScaling === "dynamic") {
-          const allValues = newSeries.flatMap(
-            (s9) => s9.data.filter((p6) => {
-              const ms = typeof p6.x === "number" ? p6.x : new Date(p6.x).getTime();
-              return ms > cutoffTime;
-            }).map((d5) => d5.y)
-          );
-          if (allValues.length > 0) {
-            const dynamicMax = Math.ceil(Math.max(...allValues) * 1.1);
-            for (const [, api] of this.seriesApis) {
-              api.applyOptions({
-                autoscaleInfoProvider: /* @__PURE__ */ __name(() => ({ priceRange: { minValue: 0, maxValue: dynamicMax } }), "autoscaleInfoProvider")
-              });
-            }
-          }
+      void animate;
+      const canonicalSeries = this.getCanonicalChartSeries(newSeries);
+      this.internalChartData = canonicalSeries;
+      const renderedKeys = [...this.seriesApis.keys()];
+      const canonicalKeys = canonicalSeries.map((series, index3) => this.getSeriesKey(series, index3));
+      if (!haveSameSeriesLayout(renderedKeys, canonicalKeys)) {
+        this.clearCrosshairForDataReplacement();
+        this.recreateSeries(canonicalSeries);
+        this.updateSeriesPresentation(canonicalSeries);
+        return;
+      }
+      if (!this.realtimeMode || this.rollingWindow <= 0) {
+        this.clearCrosshairForDataReplacement();
+        canonicalSeries.forEach((series, index3) => {
+          this.seriesApis.get(this.getSeriesKey(series, index3)).setData(this.convertDataToLC(series.data));
+        });
+        this.pendingRealtimePrune = false;
+        this.updateSeriesPresentation(canonicalSeries);
+        return;
+      }
+      const plannedUpdates = canonicalSeries.map((series, index3) => {
+        const api = this.seriesApis.get(this.getSeriesKey(series, index3));
+        const canonicalData = this.convertDataToLC(series.data).map((point4) => ({ time: point4.time, value: point4.value }));
+        return {
+          api,
+          canonicalData,
+          plan: planRealtimeChartUpdates(this.getRenderedSeriesData(api), canonicalData)
+        };
+      });
+      if (plannedUpdates.some(({ plan }) => plan.replacementRequired)) {
+        this.clearCrosshairForDataReplacement();
+        for (const { api, canonicalData } of plannedUpdates) {
+          api.setData(canonicalData.map((point4) => ({
+            time: point4.time,
+            value: point4.value
+          })));
         }
+        this.pendingRealtimePrune = false;
       } else {
-        if (newSeries.length !== this.seriesApis.size) {
-          this.recreateSeries(newSeries);
-        } else {
-          const isDark = !this.goBright;
-          newSeries.forEach((s9, index3) => {
-            const name = s9.name || `series-${index3}`;
-            const api = this.seriesApis.get(name);
-            if (!api) return;
-            api.setData(this.convertDataToLC(s9.data));
-            const color2 = this.resolveSeriesColor(s9, index3, isDark);
-            api.applyOptions({
-              topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
-              bottomColor: this.colorToRgba(color2, 0),
-              lineColor: color2
-            });
-            this.updatePriceLines(name, api, s9.data, color2);
-          });
-          this.computeStats(newSeries);
-        }
-      }
+        for (const { api, plan } of plannedUpdates) {
+          for (const update of plan.updates) {
+            api.update({
+              time: update.point.time,
+              value: update.point.value
+            }, update.historicalUpdate);
+          }
+        }
+        const pruneRequired = plannedUpdates.some(({ plan }) => plan.pruneRequired);
+        const pruneRecommended = plannedUpdates.some(({ plan }) => plan.pruneRecommended);
+        if (pruneRequired) {
+          this.clearCrosshairForDataReplacement();
+          for (const { api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point4) => ({
+              time: point4.time,
+              value: point4.value
+            })));
+          }
+        } else if (pruneRecommended && this.crosshairActive) {
+          this.pendingRealtimePrune = true;
+        } else if (pruneRecommended) {
+          for (const { api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point4) => ({
+              time: point4.time,
+              value: point4.value
+            })));
+          }
+          this.pendingRealtimePrune = false;
+        }
+      }
+      this.updateSeriesPresentation(canonicalSeries);
     } catch (error) {
       console.error("Failed to update chart series:", error);
     }
@@ -161618,15 +161955,26 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
   }
   async appendData(newData) {
     if (!this.chart) return;
+    const nextSeries = this.internalChartData.map((series) => ({
+      ...series,
+      data: [...series.data]
+    }));
+    const namedOccurrences = /* @__PURE__ */ new Map();
     newData.forEach((s9, index3) => {
-      const name = s9.name || `series-${index3}`;
-      const api = this.seriesApis.get(name);
-      if (!api || s9.data.length === 0) return;
-      for (const point4 of s9.data) {
-        const lcPoints = this.convertDataToLC([point4]);
-        if (lcPoints.length > 0) api.update(lcPoints[0]);
-      }
+      let targetIndex = index3;
+      if (s9.name) {
+        const occurrence = namedOccurrences.get(s9.name) ?? 0;
+        namedOccurrences.set(s9.name, occurrence + 1);
+        const matchingIndices = this.internalChartData.map((series, seriesIndex) => series.name === s9.name ? seriesIndex : -1).filter((seriesIndex) => seriesIndex >= 0);
+        const matchingIndex = matchingIndices[occurrence];
+        if (matchingIndex === void 0) return;
+        targetIndex = matchingIndex;
+      }
+      const targetSeries = nextSeries[targetIndex];
+      if (!targetSeries || s9.data.length === 0) return;
+      targetSeries.data.push(...s9.data);
     });
+    await this.updateSeries(nextSeries);
   }
   async updateOptions(options2) {
     if (!this.chart) return;
@@ -161663,25 +162011,31 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
   }
   refreshPriceLines() {
     const isDark = !this.goBright;
-    this.chartSeries.forEach((s9, index3) => {
-      const name = s9.name || `series-${index3}`;
-      const api = this.seriesApis.get(name);
+    this.getCanonicalChartSeries(this.internalChartData).forEach((s9, index3) => {
+      const seriesKey = this.getSeriesKey(s9, index3);
+      const api = this.seriesApis.get(seriesKey);
       if (!api) return;
-      this.updatePriceLines(name, api, s9.data, this.resolveSeriesColor(s9, index3, isDark));
+      this.updatePriceLines(seriesKey, api, s9.data, this.resolveSeriesColor(s9, index3, isDark));
     });
   }
   startAutoScroll() {
-    if (this.autoScrollTimer) return;
+    if (this.autoScrollTimer !== null) return;
     this.autoScrollTimer = window.setInterval(() => {
       this.updateTimeWindow();
     }, this.autoScrollInterval);
   }
   stopAutoScroll() {
-    if (this.autoScrollTimer) {
+    if (this.autoScrollTimer !== null) {
       window.clearInterval(this.autoScrollTimer);
       this.autoScrollTimer = null;
     }
   }
+  syncAutoScroll() {
+    this.stopAutoScroll();
+    if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
+      this.startAutoScroll();
+    }
+  }
 };
 _init57 = __decoratorStart(_a56);
 _chart = new WeakMap();
@@ -161698,6 +162052,8 @@ _autoScrollInterval = new WeakMap();
 _legendStats = new WeakMap();
 _hideLegend = new WeakMap();
 _chartLines = new WeakMap();
+_rangeSelectionEnabled = new WeakMap();
+_selectedRange = new WeakMap();
 __decorateElement(_init57, 4, "chart", _chart_dec, _DeesChartArea, _chart);
 __decorateElement(_init57, 4, "seriesStats", _seriesStats_dec, _DeesChartArea, _seriesStats);
 __decorateElement(_init57, 4, "isFullPage", _isFullPage_dec, _DeesChartArea, _isFullPage);
@@ -161712,6 +162068,8 @@ __decorateElement(_init57, 4, "autoScrollInterval", _autoScrollInterval_dec, _De
 __decorateElement(_init57, 4, "legendStats", _legendStats_dec, _DeesChartArea, _legendStats);
 __decorateElement(_init57, 4, "hideLegend", _hideLegend_dec, _DeesChartArea, _hideLegend);
 __decorateElement(_init57, 4, "chartLines", _chartLines_dec, _DeesChartArea, _chartLines);
+__decorateElement(_init57, 4, "rangeSelectionEnabled", _rangeSelectionEnabled_dec, _DeesChartArea, _rangeSelectionEnabled);
+__decorateElement(_init57, 4, "selectedRange", _selectedRange_dec, _DeesChartArea, _selectedRange);
 _DeesChartArea = __decorateElement(_init57, 0, "DeesChartArea", _DeesChartArea_decorators, _DeesChartArea);
 __name(_DeesChartArea, "DeesChartArea");
 __publicField(_DeesChartArea, "demo", demoFunc37);
@@ -198026,7 +198384,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.98.0",
+  version: "3.99.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };