@design.estate/dees-catalog 3.50.1 → 3.51.0

package/dist_bundle/bundle.js

@@ -108413,7 +108413,7 @@ var init_versions = __esm({
       xtermAddonFit: "0.8.0",
       xtermAddonSearch: "0.13.0",
       highlightJs: "11.11.1",
-      apexcharts: "5.10.4",
+      lightweightCharts: "5.1.0",
       tiptap: "2.27.2",
       fontawesome: "7.2.0"
     };
@@ -108436,14 +108436,14 @@ var init_DeesServiceLibLoader = __esm({
       xtermFitAddonLib = null;
       xtermSearchAddonLib = null;
       highlightJsLib = null;
-      apexChartsLib = null;
+      lightweightChartsLib = null;
       tiptapLib = null;
       // Loading promises to prevent duplicate concurrent loads
       xtermLoadingPromise = null;
       xtermFitAddonLoadingPromise = null;
       xtermSearchAddonLoadingPromise = null;
       highlightJsLoadingPromise = null;
-      apexChartsLoadingPromise = null;
+      lightweightChartsLoadingPromise = null;
       tiptapLoadingPromise = null;
       constructor() {
       }
@@ -108575,26 +108575,33 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
         return this.highlightJsLoadingPromise;
       }
       /**
-       * Load ApexCharts charting library from CDN
-       * @returns Promise resolving to ApexCharts constructor
+       * Load TradingView Lightweight Charts from CDN
+       * @returns Promise resolving to Lightweight Charts bundle
        */
-      async loadApexCharts() {
-        if (this.apexChartsLib) {
-          return this.apexChartsLib;
+      async loadLightweightCharts() {
+        if (this.lightweightChartsLib) {
+          return this.lightweightChartsLib;
         }
-        if (this.apexChartsLoadingPromise) {
-          return this.apexChartsLoadingPromise;
+        if (this.lightweightChartsLoadingPromise) {
+          return this.lightweightChartsLoadingPromise;
         }
-        this.apexChartsLoadingPromise = (async () => {
-          const url = `${CDN_BASE}/apexcharts@${CDN_VERSIONS.apexcharts}/+esm`;
+        this.lightweightChartsLoadingPromise = (async () => {
+          const url = `${CDN_BASE}/lightweight-charts@${CDN_VERSIONS.lightweightCharts}/+esm`;
           const module = await import(
             /* @vite-ignore */
             url
           );
-          this.apexChartsLib = module.default;
-          return this.apexChartsLib;
+          this.lightweightChartsLib = {
+            createChart: module.createChart,
+            AreaSeries: module.AreaSeries,
+            LineSeries: module.LineSeries,
+            ColorType: module.ColorType,
+            LineType: module.LineType,
+            CrosshairMode: module.CrosshairMode
+          };
+          return this.lightweightChartsLib;
         })();
-        return this.apexChartsLoadingPromise;
+        return this.lightweightChartsLoadingPromise;
       }
       /**
        * Load Tiptap rich text editor and extensions from CDN
@@ -108664,7 +108671,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
           this.loadXtermFitAddon(),
           this.loadXtermSearchAddon(),
           this.loadHighlightJs(),
-          this.loadApexCharts(),
+          this.loadLightweightCharts(),
           this.loadTiptap()
         ]);
       }
@@ -108681,8 +108688,8 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
             return this.xtermSearchAddonLib !== null;
           case "highlightJs":
             return this.highlightJsLib !== null;
-          case "apexCharts":
-            return this.apexChartsLib !== null;
+          case "lightweightCharts":
+            return this.lightweightChartsLib !== null;
           case "tiptap":
             return this.tiptapLib !== null;
           default:
@@ -150486,15 +150493,37 @@ var demoFunc36 = /* @__PURE__ */ __name(() => {
       lastDataPointTime = 0;
       connectionsLastUpdate = 0;
     }, "randomizeData");
+    const updateButtonStates = /* @__PURE__ */ __name(() => {
+      const allButtons = elementArg.querySelectorAll("dees-button");
+      allButtons.forEach((button) => {
+        const text9 = button.text?.trim();
+        if (text9 === "System Usage") {
+          button.type = currentDataset === "system" ? "highlighted" : "normal";
+        } else if (text9 === "Network Traffic") {
+          button.type = currentDataset === "network" ? "highlighted" : "normal";
+        } else if (text9 === "Sales Data") {
+          button.type = currentDataset === "sales" ? "highlighted" : "normal";
+        }
+      });
+    }, "updateButtonStates");
     const buttons = elementArg.querySelectorAll("dees-button");
     buttons.forEach((button) => {
-      const text9 = button.textContent?.trim();
+      const text9 = button.text?.trim();
       if (text9 === "System Usage") {
-        button.addEventListener("click", () => switchDataset("system"));
+        button.addEventListener("click", () => {
+          switchDataset("system");
+          updateButtonStates();
+        });
       } else if (text9 === "Network Traffic") {
-        button.addEventListener("click", () => switchDataset("network"));
+        button.addEventListener("click", () => {
+          switchDataset("network");
+          updateButtonStates();
+        });
       } else if (text9 === "Sales Data") {
-        button.addEventListener("click", () => switchDataset("sales"));
+        button.addEventListener("click", () => {
+          switchDataset("sales");
+          updateButtonStates();
+        });
       } else if (text9 === "Start Live") {
         button.addEventListener("click", () => startRealtime());
       } else if (text9 === "Stop Live") {
@@ -150503,19 +150532,6 @@ var demoFunc36 = /* @__PURE__ */ __name(() => {
         button.addEventListener("click", () => randomizeData());
       }
     });
-    const updateButtonStates = /* @__PURE__ */ __name(() => {
-      const buttons2 = elementArg.querySelectorAll("dees-button");
-      buttons2.forEach((button) => {
-        const text9 = button.textContent?.trim();
-        if (text9 === "System Usage") {
-          button.type = currentDataset === "system" ? "highlighted" : "normal";
-        } else if (text9 === "Network Traffic") {
-          button.type = currentDataset === "network" ? "highlighted" : "normal";
-        } else if (text9 === "Sales Data") {
-          button.type = currentDataset === "sales" ? "highlighted" : "normal";
-        }
-      });
-    }, "updateButtonStates");
     chartElement.rollingWindow = TIME_WINDOW;
     chartElement.realtimeMode = false;
     chartElement.yAxisScaling = "percentage";
@@ -150524,24 +150540,6 @@ var demoFunc36 = /* @__PURE__ */ __name(() => {
     setTimeout(() => {
       chartElement.updateTimeWindow();
     }, 100);
-    const originalSwitchDataset = switchDataset;
-    const switchDatasetWithButtonUpdate = /* @__PURE__ */ __name((name) => {
-      originalSwitchDataset(name);
-      updateButtonStates();
-    }, "switchDatasetWithButtonUpdate");
-    buttons.forEach((button) => {
-      const text9 = button.textContent?.trim();
-      if (text9 === "System Usage") {
-        button.removeEventListener("click", () => switchDataset("system"));
-        button.addEventListener("click", () => switchDatasetWithButtonUpdate("system"));
-      } else if (text9 === "Network Traffic") {
-        button.removeEventListener("click", () => switchDataset("network"));
-        button.addEventListener("click", () => switchDatasetWithButtonUpdate("network"));
-      } else if (text9 === "Sales Data") {
-        button.removeEventListener("click", () => switchDataset("sales"));
-        button.addEventListener("click", () => switchDatasetWithButtonUpdate("sales"));
-      }
-    });
     if (connectionsChartElement) {
       const initialConnectionsData = generateInitialData(previousValues.connections, 30, UPDATE_INTERVAL);
       connectionsChartElement.series = [{
@@ -150650,7 +150648,6 @@ var chartAreaStyles = [
       :host {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
         color: ${cssManager.bdTheme("hsl(0 0% 3.9%)", "hsl(0 0% 98%)")};
-        font-weight: 400;
         font-size: 14px;
       }
       .mainbox {
@@ -150662,7 +150659,6 @@ var chartAreaStyles = [
         border-radius: 8px;
         overflow: hidden;
       }
-
       .chartTitle {
         position: absolute;
         top: 0;
@@ -150678,26 +150674,22 @@ var chartAreaStyles = [
       }
       .chartContainer {
         position: absolute;
-        top: 0px;
-        left: 0px;
-        bottom: 0px;
-        right: 0px;
-        padding: 44px 16px 16px 0px;
-        overflow: hidden;
-        background: transparent; /* Ensure container doesn't override chart background */
-      }
-      
-      /* ApexCharts theme overrides */
-      .apexcharts-canvas {
-        background: transparent !important;
-      }
-      
-      .apexcharts-inner {
-        background: transparent !important;
+        top: 44px;
+        left: 0;
+        bottom: 0;
+        right: 0;
       }
-      
-      .apexcharts-graphical {
-        background: transparent !important;
+      .lw-tooltip {
+        position: absolute;
+        z-index: 100;
+        pointer-events: none;
+        padding: 12px;
+        border-radius: 6px;
+        border: 1px solid;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-size: 12px;
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+        min-width: 140px;
       }
     `
 ];
@@ -150722,7 +150714,7 @@ _DeesChartArea_decorators = [customElement("dees-chart-area")];
 var _DeesChartArea = class _DeesChartArea extends (_a53 = DeesElement, _chart_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 })], _a53) {
   constructor() {
     super();
-    __privateAdd(this, _chart, __runInitializers(_init54, 8, this)), __runInitializers(_init54, 11, this);
+    __privateAdd(this, _chart, __runInitializers(_init54, 8, this, null)), __runInitializers(_init54, 11, this);
     __privateAdd(this, _label5, __runInitializers(_init54, 12, this, "Untitled Chart")), __runInitializers(_init54, 15, this);
     __privateAdd(this, _series, __runInitializers(_init54, 16, this, [])), __runInitializers(_init54, 19, this);
     __privateAdd(this, _yAxisFormatter, __runInitializers(_init54, 20, this, /* @__PURE__ */ __name((val) => `${val} Mbps`, "yAxisFormatter"))), __runInitializers(_init54, 23, this);
@@ -150731,304 +150723,296 @@ var _DeesChartArea = class _DeesChartArea extends (_a53 = DeesElement, _chart_de
     __privateAdd(this, _yAxisScaling, __runInitializers(_init54, 32, this, "dynamic")), __runInitializers(_init54, 35, this);
     __privateAdd(this, _yAxisMax, __runInitializers(_init54, 36, this, 100)), __runInitializers(_init54, 39, this);
     __privateAdd(this, _autoScrollInterval, __runInitializers(_init54, 40, this, 1e3)), __runInitializers(_init54, 43, this);
-    // Auto-scroll interval in milliseconds (0 to disable)
-    __publicField(this, "resizeObserver");
-    __publicField(this, "resizeTimeout");
     __publicField(this, "internalChartData", []);
     __publicField(this, "autoScrollTimer", null);
-    __publicField(this, "DEBUG_RESIZE", false);
-    // Set to true to enable resize debugging
-    // Chart color schemes
+    __publicField(this, "lcBundle", null);
+    __publicField(this, "seriesApis", /* @__PURE__ */ new Map());
+    __publicField(this, "priceLines", /* @__PURE__ */ new Map());
+    __publicField(this, "tooltipEl", null);
     __publicField(this, "CHART_COLORS", {
       dark: [
         "hsl(217.2 91.2% 59.8%)",
-        // Blue
         "hsl(173.4 80.4% 40%)",
-        // Teal
         "hsl(280.3 87.4% 66.7%)",
-        // Purple
         "hsl(24.6 95% 53.1%)"
-        // Orange
       ],
       light: [
         "hsl(222.2 47.4% 51.2%)",
-        // Blue (shadcn primary)
         "hsl(142.1 76.2% 36.3%)",
-        // Green (shadcn success)
         "hsl(280.3 47.7% 50.2%)",
-        // Purple (muted)
         "hsl(20.5 90.2% 48.2%)"
-        // Orange (shadcn destructive variant)
       ]
     });
     domtools_elementbasic_exports.setup();
-    this.resizeObserver = new ResizeObserver((entries) => {
-      if (this.resizeTimeout) {
-        clearTimeout(this.resizeTimeout);
-      }
-      this.resizeTimeout = window.setTimeout(() => {
-        if (this.chart) {
-          if (this.DEBUG_RESIZE && entries.length > 0) {
-            const entry = entries[0];
-            console.log("DeesChartArea - Resize detected:", {
-              width: entry.contentRect.width,
-              height: entry.contentRect.height
-            });
-          }
-          this.resizeChart();
-        }
-      }, 100);
-    });
     this.registerGarbageFunction(async () => {
-      if (this.resizeTimeout) {
-        clearTimeout(this.resizeTimeout);
-      }
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect();
-      }
       this.stopAutoScroll();
       if (this.chart) {
         try {
-          this.chart.destroy();
+          this.chart.remove();
           this.chart = null;
-        } catch (error) {
-          console.error("Error destroying chart:", error);
+          this.seriesApis.clear();
+          this.priceLines.clear();
+        } catch (e11) {
+          console.error("Error destroying chart:", e11);
         }
       }
     });
   }
-  // Override getter to return internal chart data
   get chartSeries() {
     return this.internalChartData.length > 0 ? this.internalChartData : this.series;
   }
-  async connectedCallback() {
-    super.connectedCallback();
-    if (this.chart) {
-      await new Promise((resolve2) => requestAnimationFrame(resolve2));
-      await this.resizeChart();
-    }
-  }
   render() {
     return renderChartArea(this);
   }
+  // --- Helpers ---
+  convertDataToLC(data) {
+    return data.map((point4) => {
+      const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
+      return { time: Math.floor(ms / 1e3), value: point4.y };
+    }).sort((a5, b5) => a5.time - b5.time);
+  }
+  hslToRgba(hslColor, alpha) {
+    const match2 = hslColor.match(/hsl\(([^)]+)\)/);
+    if (!match2) return hslColor;
+    const parts = match2[1].trim().split(/\s+/);
+    if (parts.length < 3) return hslColor;
+    const h8 = parseFloat(parts[0]) / 360;
+    const s10 = parseFloat(parts[1]) / 100;
+    const l6 = parseFloat(parts[2]) / 100;
+    let r11, g4, b5;
+    if (s10 === 0) {
+      r11 = g4 = b5 = l6;
+    } else {
+      const hue2rgb = /* @__PURE__ */ __name((p7, q, t9) => {
+        if (t9 < 0) t9 += 1;
+        if (t9 > 1) t9 -= 1;
+        if (t9 < 1 / 6) return p7 + (q - p7) * 6 * t9;
+        if (t9 < 1 / 2) return q;
+        if (t9 < 2 / 3) return p7 + (q - p7) * (2 / 3 - t9) * 6;
+        return p7;
+      }, "hue2rgb");
+      const q2 = l6 < 0.5 ? l6 * (1 + s10) : l6 + s10 - l6 * s10;
+      const p22 = 2 * l6 - q2;
+      r11 = hue2rgb(p22, q2, h8 + 1 / 3);
+      g4 = hue2rgb(p22, q2, h8);
+      b5 = hue2rgb(p22, q2, h8 - 1 / 3);
+    }
+    return `rgba(${Math.round(r11 * 255)}, ${Math.round(g4 * 255)}, ${Math.round(b5 * 255)}, ${alpha})`;
+  }
+  getSeriesColors(isDark) {
+    return isDark ? this.CHART_COLORS.dark : this.CHART_COLORS.light;
+  }
+  applyTheme() {
+    if (!this.chart || !this.lcBundle) return;
+    const isDark = !this.goBright;
+    const colors8 = this.getSeriesColors(isDark);
+    this.chart.applyOptions({
+      layout: {
+        background: { type: this.lcBundle.ColorType.Solid, color: "transparent" },
+        textColor: isDark ? "hsl(0 0% 63.9%)" : "hsl(0 0% 20%)",
+        attributionLogo: false
+      },
+      grid: {
+        vertLines: { visible: false },
+        horzLines: { color: isDark ? "hsl(0 0% 14.9%)" : "hsl(0 0% 94%)" }
+      }
+    });
+    let idx = 0;
+    for (const [, api2] of this.seriesApis) {
+      const color2 = colors8[idx % colors8.length];
+      api2.applyOptions({
+        topColor: this.hslToRgba(color2, isDark ? 0.2 : 0.3),
+        bottomColor: this.hslToRgba(color2, 0),
+        lineColor: color2
+      });
+      idx++;
+    }
+  }
+  recreateSeries(chartSeries) {
+    if (!this.chart || !this.lcBundle) return;
+    const isDark = !this.goBright;
+    const colors8 = this.getSeriesColors(isDark);
+    for (const [, api2] of this.seriesApis) {
+      this.chart.removeSeries(api2);
+    }
+    this.seriesApis.clear();
+    this.priceLines.clear();
+    chartSeries.forEach((s10, index2) => {
+      const color2 = colors8[index2 % colors8.length];
+      const api2 = this.chart.addSeries(this.lcBundle.AreaSeries, {
+        topColor: this.hslToRgba(color2, isDark ? 0.2 : 0.3),
+        bottomColor: this.hslToRgba(color2, 0),
+        lineColor: color2,
+        lineWidth: 2,
+        lineType: this.lcBundle.LineType.Curved,
+        lastValueVisible: false,
+        priceLineVisible: false,
+        crosshairMarkerVisible: true,
+        crosshairMarkerRadius: 4
+      });
+      api2.setData(this.convertDataToLC(s10.data));
+      this.updatePriceLines(s10.name || `series-${index2}`, api2, s10.data, color2);
+      if (this.yAxisScaling !== "dynamic") {
+        api2.applyOptions({
+          autoscaleInfoProvider: /* @__PURE__ */ __name(() => ({
+            priceRange: { minValue: 0, maxValue: this.yAxisMax }
+          }), "autoscaleInfoProvider")
+        });
+      }
+      this.seriesApis.set(s10.name || `series-${index2}`, api2);
+    });
+  }
+  updatePriceLines(name, api2, data, color2) {
+    const existing = this.priceLines.get(name);
+    if (existing) {
+      for (const line of existing) {
+        api2.removePriceLine(line);
+      }
+    }
+    if (data.length === 0) {
+      this.priceLines.set(name, []);
+      return;
+    }
+    const values = data.map((d5) => d5.y);
+    const avg = values.reduce((sum, v5) => sum + v5, 0) / values.length;
+    const max3 = Math.max(...values);
+    const lines = [];
+    lines.push(api2.createPriceLine({
+      price: Math.round(avg * 100) / 100,
+      color: this.hslToRgba(color2, 0.5),
+      lineWidth: 1,
+      lineStyle: 2,
+      // Dashed
+      axisLabelVisible: true,
+      title: "avg"
+    }));
+    if (avg > 0 && (max3 - avg) / avg > 0.1) {
+      lines.push(api2.createPriceLine({
+        price: max3,
+        color: this.hslToRgba(color2, 0.8),
+        lineWidth: 1,
+        lineStyle: 1,
+        // Dotted
+        axisLabelVisible: true,
+        title: "max"
+      }));
+    }
+    this.priceLines.set(name, lines);
+  }
+  setupTooltip() {
+    if (!this.chart) return;
+    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) => {
+      if (!this.tooltipEl) return;
+      if (!param.point || !param.time || param.point.x < 0 || param.point.y < 0) {
+        this.tooltipEl.style.display = "none";
+        return;
+      }
+      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%)";
+      const borderColor = isDark ? "hsl(0 0% 14.9%)" : "hsl(0 0% 89.8%)";
+      const colors8 = this.getSeriesColors(isDark);
+      let html9 = "";
+      let idx = 0;
+      let hasData = false;
+      for (const [name, api2] of this.seriesApis) {
+        const data = param.seriesData.get(api2);
+        if (data && "value" in data && data.value !== void 0) {
+          hasData = true;
+          const color2 = colors8[idx % colors8.length];
+          const formatted = this.yAxisFormatter(data.value);
+          html9 += `<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>
+            <span style="font-weight:500;">${name}:</span>
+            <span style="margin-left:auto;font-weight:600;">${formatted}</span>
+          </div>`;
+        }
+        idx++;
+      }
+      if (!hasData) {
+        this.tooltipEl.style.display = "none";
+        return;
+      }
+      this.tooltipEl.innerHTML = html9;
+      Object.assign(this.tooltipEl.style, {
+        display: "block",
+        background: bgColor,
+        color: textColor,
+        borderColor
+      });
+      const containerWidth = this.shadowRoot.querySelector(".chartContainer").clientWidth;
+      let left = param.point.x + 16;
+      if (left + 200 > containerWidth) left = param.point.x - 216;
+      this.tooltipEl.style.left = `${left}px`;
+      this.tooltipEl.style.top = `${param.point.y - 16}px`;
+    });
+  }
+  // --- Lifecycle ---
   async firstUpdated() {
     await this.domtoolsPromise;
-    const ApexChartsLib = await DeesServiceLibLoader.getInstance().loadApexCharts();
+    this.lcBundle = await DeesServiceLibLoader.getInstance().loadLightweightCharts();
     await new Promise((resolve2) => requestAnimationFrame(resolve2));
-    const mainbox = this.shadowRoot.querySelector(".mainbox");
     const chartContainer = this.shadowRoot.querySelector(".chartContainer");
-    if (!mainbox || !chartContainer) {
-      console.error("Chart containers not found");
-      return;
-    }
-    const styleChartContainer = window.getComputedStyle(chartContainer);
-    const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
-    const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
-    const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
-    const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
-    const initialWidth = mainbox.clientWidth - paddingLeft - paddingRight;
-    const initialHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
-    const chartSeries = this.series.length > 0 ? this.series : [
-      {
-        name: "cpu",
-        data: [
-          { x: "2025-01-15T03:00:00", y: 25 },
-          { x: "2025-01-15T07:00:00", y: 30 },
-          { x: "2025-01-15T11:00:00", y: 20 },
-          { x: "2025-01-15T15:00:00", y: 35 },
-          { x: "2025-01-15T19:00:00", y: 25 }
-        ]
-      },
-      {
-        name: "memory",
-        data: [
-          { x: "2025-01-15T03:00:00", y: 10 },
-          { x: "2025-01-15T07:00:00", y: 12 },
-          { x: "2025-01-15T11:00:00", y: 10 },
-          { x: "2025-01-15T15:00:00", y: 30 },
-          { x: "2025-01-15T19:00:00", y: 40 }
-        ]
-      }
-    ];
-    this.internalChartData = chartSeries;
+    if (!chartContainer) return;
     const isDark = !this.goBright;
-    const theme = isDark ? "dark" : "light";
-    var options = {
-      series: chartSeries,
-      chart: {
-        width: initialWidth || 100,
-        // Use actual width or fallback
-        height: initialHeight || 100,
-        // Use actual height or fallback
-        type: "area",
-        background: "transparent",
-        // Transparent background to inherit from container
-        toolbar: {
-          show: false
-          // This line disables the toolbar
-        },
-        animations: {
-          enabled: !this.realtimeMode,
-          // Disable animations in realtime mode
-          speed: 400,
-          animateGradually: {
-            enabled: false,
-            // Disable gradual animation for cleaner updates
-            delay: 0
-          },
-          dynamicAnimation: {
-            enabled: !this.realtimeMode,
-            speed: 350
-          }
-        },
-        zoom: {
-          enabled: false
-          // Disable zoom for cleaner interaction
-        },
-        selection: {
-          enabled: false
-          // Disable selection
-        }
-      },
-      dataLabels: {
-        enabled: false
-      },
-      stroke: {
-        width: 2,
-        curve: "smooth"
-      },
-      xaxis: {
-        type: "datetime",
-        // Time-series data
-        labels: {
-          format: "HH:mm:ss",
-          // Time formatting with seconds
-          datetimeUTC: false,
-          style: {
-            colors: [isDark ? "hsl(0 0% 63.9%)" : "hsl(0 0% 20%)"],
-            // Label color
-            fontSize: "12px",
-            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-            fontWeight: "400"
-          }
+    try {
+      this.chart = this.lcBundle.createChart(chartContainer, {
+        autoSize: true,
+        layout: {
+          background: { type: this.lcBundle.ColorType.Solid, color: "transparent" },
+          textColor: isDark ? "hsl(0 0% 63.9%)" : "hsl(0 0% 20%)",
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+          fontSize: 12,
+          attributionLogo: false
         },
-        axisBorder: {
-          show: false
-          // Hide x-axis border
+        grid: {
+          vertLines: { visible: false },
+          horzLines: { color: isDark ? "hsl(0 0% 14.9%)" : "hsl(0 0% 94%)" }
         },
-        axisTicks: {
-          show: false
-          // Hide x-axis ticks
-        }
-      },
-      yaxis: {
-        min: 0,
-        max: this.yAxisScaling === "dynamic" ? void 0 : this.yAxisMax,
-        labels: {
-          formatter: this.yAxisFormatter,
-          style: {
-            colors: [isDark ? "hsl(0 0% 63.9%)" : "hsl(0 0% 20%)"],
-            // Label color
-            fontSize: "12px",
-            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-            fontWeight: "400"
-          }
+        rightPriceScale: {
+          borderVisible: false,
+          scaleMargins: { top: 0.1, bottom: 0.1 }
         },
-        axisBorder: {
-          show: false
-          // Hide y-axis border
+        timeScale: {
+          borderVisible: false,
+          timeVisible: true,
+          secondsVisible: true
         },
-        axisTicks: {
-          show: false
-          // Hide y-axis ticks
-        }
-      },
-      tooltip: {
-        shared: true,
-        // Enables the tooltip to display across series
-        intersect: false,
-        // Allows hovering anywhere on the chart
-        followCursor: true,
-        // Makes tooltip follow mouse even between points
-        x: {
-          format: "dd/MM/yy HH:mm"
+        crosshair: {
+          mode: this.lcBundle.CrosshairMode.Magnet
         },
-        custom: /* @__PURE__ */ __name(({ series, dataPointIndex, w: w4 }) => {
-          const currentTheme = w4.config.theme.mode;
-          const isDarkMode = currentTheme === "dark";
-          const bgColor = isDarkMode ? "hsl(0 0% 9%)" : "hsl(0 0% 100%)";
-          const textColor = isDarkMode ? "hsl(0 0% 95%)" : "hsl(0 0% 9%)";
-          const borderColor = isDarkMode ? "hsl(0 0% 14.9%)" : "hsl(0 0% 89.8%)";
-          const formatter2 = w4.config.yaxis[0]?.labels?.formatter || ((val) => val.toString());
-          let tooltipContent = `<div style="padding: 12px; background: ${bgColor}; color: ${textColor}; border-radius: 6px; box-shadow: 0 2px 8px 0 hsl(0 0% 0% / ${isDarkMode ? "0.2" : "0.1"}); border: 1px solid ${borderColor};font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px;">`;
-          series.forEach((s10, index2) => {
-            const label = w4.globals.seriesNames[index2];
-            const value2 = s10[dataPointIndex];
-            const color2 = w4.globals.colors[index2];
-            const formattedValue = formatter2(value2);
-            tooltipContent += `<div style="display: flex; align-items: center; gap: 8px; margin: ${index2 > 0 ? "6px" : "0"} 0;">
-              <span style="display: inline-block; width: 10px; height: 10px; background: ${color2}; border-radius: 2px;"></span>
-              <span style="font-weight: 500;">${label}:</span>
-              <span style="margin-left: auto; font-weight: 600;">${formattedValue}</span>
-            </div>`;
-          });
-          tooltipContent += `</div>`;
-          return tooltipContent;
-        }, "custom")
-      },
-      grid: {
-        xaxis: {
-          lines: {
-            show: false
-            // Hide vertical grid lines for cleaner look
-          }
-        },
-        yaxis: {
-          lines: {
-            show: true
-          }
+        handleScroll: false,
+        handleScale: false
+      });
+      const chartSeries = this.series.length > 0 ? this.series : [
+        {
+          name: "cpu",
+          data: [
+            { x: "2025-01-15T03:00:00", y: 25 },
+            { x: "2025-01-15T07:00:00", y: 30 },
+            { x: "2025-01-15T11:00:00", y: 20 },
+            { x: "2025-01-15T15:00:00", y: 35 },
+            { x: "2025-01-15T19:00:00", y: 25 }
+          ]
         },
-        borderColor: isDark ? "hsl(0 0% 14.9%)" : "hsl(0 0% 94%)",
-        // Very subtle grid lines
-        strokeDashArray: 0,
-        // Solid line
-        padding: {
-          top: 10,
-          right: 20,
-          bottom: 10,
-          left: 20
-        }
-      },
-      fill: {
-        type: "gradient",
-        // Gradient fill for the area
-        gradient: {
-          shade: isDark ? "dark" : "light",
-          type: "vertical",
-          shadeIntensity: 0.1,
-          opacityFrom: isDark ? 0.2 : 0.3,
-          opacityTo: 0,
-          stops: [0, 100]
-        }
-      },
-      colors: isDark ? this.CHART_COLORS.dark : this.CHART_COLORS.light,
-      theme: {
-        mode: theme
-      }
-    };
-    try {
-      this.chart = new ApexChartsLib(this.shadowRoot.querySelector(".chartContainer"), options);
-      await this.chart.render();
-      await new Promise((resolve2) => setTimeout(resolve2, 100));
-      await this.resizeChart();
-      const mainbox2 = this.shadowRoot.querySelector(".mainbox");
-      if (mainbox2 && this.resizeObserver) {
-        this.resizeObserver.disconnect();
-        this.resizeObserver.observe(mainbox2);
-        if (this.DEBUG_RESIZE) {
-          console.log("DeesChartArea - ResizeObserver attached to mainbox");
+        {
+          name: "memory",
+          data: [
+            { x: "2025-01-15T03:00:00", y: 10 },
+            { x: "2025-01-15T07:00:00", y: 12 },
+            { x: "2025-01-15T11:00:00", y: 10 },
+            { x: "2025-01-15T15:00:00", y: 30 },
+            { x: "2025-01-15T19:00:00", y: 40 }
+          ]
         }
-      }
+      ];
+      this.internalChartData = chartSeries;
+      this.recreateSeries(chartSeries);
+      this.setupTooltip();
     } catch (error) {
       console.error("Failed to initialize chart:", error);
     }
@@ -151036,37 +151020,14 @@ var _DeesChartArea = class _DeesChartArea extends (_a53 = DeesElement, _chart_de
   async updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("goBright") && this.chart) {
-      await this.updateChartTheme();
+      this.applyTheme();
     }
     if (changedProperties.has("series") && this.chart && this.series.length > 0) {
       await this.updateSeries(this.series);
     }
     if (changedProperties.has("yAxisFormatter") && this.chart) {
-      await this.chart.updateOptions({
-        yaxis: {
-          labels: {
-            formatter: this.yAxisFormatter
-          }
-        }
-      });
     }
     if (changedProperties.has("realtimeMode") && this.chart) {
-      await this.chart.updateOptions({
-        chart: {
-          animations: {
-            enabled: !this.realtimeMode,
-            speed: 400,
-            animateGradually: {
-              enabled: false,
-              delay: 0
-            },
-            dynamicAnimation: {
-              enabled: !this.realtimeMode,
-              speed: 350
-            }
-          }
-        }
-      });
       if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
         this.startAutoScroll();
       } else {
@@ -151080,143 +151041,120 @@ var _DeesChartArea = class _DeesChartArea extends (_a53 = DeesElement, _chart_de
       }
     }
     if ((changedProperties.has("yAxisScaling") || changedProperties.has("yAxisMax")) && this.chart) {
-      await this.chart.updateOptions({
-        yaxis: {
-          min: 0,
-          max: this.yAxisScaling === "dynamic" ? void 0 : this.yAxisMax
+      for (const [, api2] of this.seriesApis) {
+        if (this.yAxisScaling === "dynamic") {
+          api2.applyOptions({ autoscaleInfoProvider: void 0 });
+        } else {
+          api2.applyOptions({
+            autoscaleInfoProvider: /* @__PURE__ */ __name(() => ({ priceRange: { minValue: 0, maxValue: this.yAxisMax } }), "autoscaleInfoProvider")
+          });
         }
-      });
+      }
     }
   }
+  // --- Public API ---
   async updateSeries(newSeries, animate = true) {
-    if (!this.chart) {
-      return;
-    }
+    if (!this.chart) return;
     try {
       this.internalChartData = newSeries;
       if (this.rollingWindow > 0 && this.realtimeMode) {
         const now2 = Date.now();
         const cutoffTime = now2 - this.rollingWindow;
-        const filteredSeries = newSeries.map((series) => ({
-          name: series.name,
-          data: series.data.filter((point4) => {
-            if (typeof point4 === "object" && point4 !== null && "x" in point4) {
-              return new Date(point4.x).getTime() > cutoffTime;
-            }
-            return false;
-          })
-        }));
-        if (filteredSeries.some((s10) => s10.data.length > 0)) {
-          if (this.yAxisScaling === "dynamic") {
-            const allValues = filteredSeries.flatMap((s10) => s10.data.map((d5) => d5.y));
-            if (allValues.length > 0) {
-              const maxValue = Math.max(...allValues);
-              const dynamicMax = Math.ceil(maxValue * 1.1);
-              await this.chart.updateOptions({
-                yaxis: {
-                  min: 0,
-                  max: dynamicMax
-                }
-              }, false, false);
+        if (newSeries.length !== this.seriesApis.size) {
+          this.recreateSeries(newSeries);
+        } else {
+          const colors8 = this.getSeriesColors(!this.goBright);
+          newSeries.forEach((s10, index2) => {
+            const name = s10.name || `series-${index2}`;
+            const api2 = this.seriesApis.get(name);
+            if (!api2) return;
+            const filtered = s10.data.filter((point4) => {
+              const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
+              return ms > cutoffTime;
+            });
+            api2.setData(this.convertDataToLC(filtered));
+            this.updatePriceLines(name, api2, filtered, colors8[index2 % colors8.length]);
+          });
+        }
+        try {
+          this.chart.timeScale().setVisibleRange({
+            from: Math.floor(cutoffTime / 1e3),
+            to: Math.floor(now2 / 1e3)
+          });
+        } catch (e11) {
+        }
+        if (this.yAxisScaling === "dynamic") {
+          const allValues = newSeries.flatMap(
+            (s10) => s10.data.filter((p7) => {
+              const ms = typeof p7.x === "number" ? p7.x : new Date(p7.x).getTime();
+              return ms > cutoffTime;
+            }).map((d5) => d5.y)
+          );
+          if (allValues.length > 0) {
+            const dynamicMax = Math.ceil(Math.max(...allValues) * 1.1);
+            for (const [, api2] of this.seriesApis) {
+              api2.applyOptions({
+                autoscaleInfoProvider: /* @__PURE__ */ __name(() => ({ priceRange: { minValue: 0, maxValue: dynamicMax } }), "autoscaleInfoProvider")
+              });
             }
           }
-          await this.chart.updateSeries(filteredSeries, false);
         }
       } else {
-        await this.chart.updateSeries(newSeries, animate);
+        if (newSeries.length !== this.seriesApis.size) {
+          this.recreateSeries(newSeries);
+        } else {
+          const colors8 = this.getSeriesColors(!this.goBright);
+          newSeries.forEach((s10, index2) => {
+            const name = s10.name || `series-${index2}`;
+            const api2 = this.seriesApis.get(name);
+            if (!api2) return;
+            api2.setData(this.convertDataToLC(s10.data));
+            this.updatePriceLines(name, api2, s10.data, colors8[index2 % colors8.length]);
+          });
+        }
       }
     } catch (error) {
       console.error("Failed to update chart series:", error);
     }
   }
-  // Update just the x-axis for smooth scrolling in realtime mode
-  // Public for advanced usage in demos, but typically handled automatically
   async updateTimeWindow() {
-    if (!this.chart || this.rollingWindow <= 0) {
-      return;
-    }
+    if (!this.chart || this.rollingWindow <= 0) return;
     const now2 = Date.now();
     const cutoffTime = now2 - this.rollingWindow;
-    await this.chart.updateOptions({
-      xaxis: {
-        min: cutoffTime,
-        max: now2,
-        labels: {
-          format: "HH:mm:ss",
-          datetimeUTC: false,
-          style: {
-            colors: [!this.goBright ? "hsl(0 0% 63.9%)" : "hsl(0 0% 20%)"],
-            fontSize: "12px",
-            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-            fontWeight: "400"
-          }
-        },
-        tickAmount: 6
-      }
-    }, false, false);
+    try {
+      this.chart.timeScale().setVisibleRange({
+        from: Math.floor(cutoffTime / 1e3),
+        to: Math.floor(now2 / 1e3)
+      });
+    } catch (e11) {
+    }
   }
   async appendData(newData) {
-    if (!this.chart) {
-      return;
-    }
-    this.chart.appendData(newData);
+    if (!this.chart) return;
+    newData.forEach((s10, index2) => {
+      const name = s10.name || `series-${index2}`;
+      const api2 = this.seriesApis.get(name);
+      if (!api2 || s10.data.length === 0) return;
+      for (const point4 of s10.data) {
+        const lcPoints = this.convertDataToLC([point4]);
+        if (lcPoints.length > 0) api2.update(lcPoints[0]);
+      }
+    });
   }
-  async updateOptions(options, redrawPaths, animate) {
-    if (!this.chart) {
-      return;
-    }
-    return this.chart.updateOptions(options, redrawPaths, animate);
+  async updateOptions(options) {
+    if (!this.chart) return;
+    this.chart.applyOptions(options);
   }
   async resizeChart() {
-    if (!this.chart) {
-      return;
-    }
-    if (this.DEBUG_RESIZE) {
-      console.log("DeesChartArea - resizeChart called");
-    }
-    try {
-      const mainbox = this.shadowRoot.querySelector(".mainbox");
-      const chartContainer = this.shadowRoot.querySelector(".chartContainer");
-      if (!mainbox || !chartContainer) {
-        return;
-      }
-      void mainbox.offsetHeight;
-      const styleChartContainer = window.getComputedStyle(chartContainer);
-      const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
-      const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
-      const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
-      const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
-      const actualWidth = mainbox.clientWidth - paddingLeft - paddingRight;
-      const actualHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
-      if (actualWidth > 0 && actualHeight > 0) {
-        if (this.DEBUG_RESIZE) {
-          console.log("DeesChartArea - Updating chart dimensions:", {
-            width: actualWidth,
-            height: actualHeight
-          });
-        }
-        await this.chart.updateOptions({
-          chart: {
-            width: actualWidth,
-            height: actualHeight
-          }
-        }, true, false);
-      }
-    } catch (error) {
-      console.error("Failed to resize chart:", error);
+    if (this.chart) {
+      this.chart.timeScale().fitContent();
     }
   }
-  /**
-   * Manually trigger a chart resize. Useful when automatic detection doesn't work.
-   * This is a convenience method that can be called from outside the component.
-   */
   async forceResize() {
     await this.resizeChart();
   }
   startAutoScroll() {
-    if (this.autoScrollTimer) {
-      return;
-    }
+    if (this.autoScrollTimer) return;
     this.autoScrollTimer = window.setInterval(() => {
       this.updateTimeWindow();
     }, this.autoScrollInterval);
@@ -151227,42 +151165,6 @@ var _DeesChartArea = class _DeesChartArea extends (_a53 = DeesElement, _chart_de
       this.autoScrollTimer = null;
     }
   }
-  async updateChartTheme() {
-    if (!this.chart) {
-      return;
-    }
-    const isDark = !this.goBright;
-    const theme = isDark ? "dark" : "light";
-    await this.chart.updateOptions({
-      theme: {
-        mode: theme
-      },
-      colors: isDark ? this.CHART_COLORS.dark : this.CHART_COLORS.light,
-      xaxis: {
-        labels: {
-          style: {
-            colors: [isDark ? "hsl(0 0% 63.9%)" : "hsl(0 0% 20%)"]
-          }
-        }
-      },
-      yaxis: {
-        labels: {
-          style: {
-            colors: [isDark ? "hsl(0 0% 63.9%)" : "hsl(0 0% 20%)"]
-          }
-        }
-      },
-      grid: {
-        borderColor: isDark ? "hsl(0 0% 14.9%)" : "hsl(0 0% 94%)"
-      },
-      fill: {
-        gradient: {
-          shade: isDark ? "dark" : "light",
-          opacityFrom: isDark ? 0.2 : 0.3
-        }
-      }
-    });
-  }
 };
 _init54 = __decoratorStart(_a53);
 _chart = new WeakMap();
@@ -151419,7 +151321,7 @@ var demoFunc37 = /* @__PURE__ */ __name(() => {
     }, "stopRawSimulation");
     const buttons = elementArg.querySelectorAll("dees-button");
     buttons.forEach((button) => {
-      const text9 = button.textContent?.trim();
+      const text9 = button.text?.trim();
       switch (text9) {
         case "Add Structured Log":
           button.addEventListener("click", () => generateRandomLog());
@@ -159521,7 +159423,7 @@ var demoFunc47 = /* @__PURE__ */ __name(() => {
     let widgetCounter = 4;
     const buttons = elementArg.querySelectorAll("dees-button");
     buttons.forEach((button) => {
-      const text9 = button.textContent?.trim();
+      const text9 = button.text?.trim();
       switch (text9) {
         case "Toggle Animation":
           button.addEventListener("click", () => {
@@ -159564,7 +159466,7 @@ var demoFunc47 = /* @__PURE__ */ __name(() => {
         case "Toggle Edit Mode":
           button.addEventListener("click", () => {
             grid.editable = !grid.editable;
-            button.textContent = grid.editable ? "Lock Grid" : "Unlock Grid";
+            button.text = grid.editable ? "Lock Grid" : "Unlock Grid";
           });
           break;
         case "Reset Layout":
@@ -168590,6 +168492,7 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a89 = DeesElement, _
     terminal.style.top = "var(--banner-area-height, 0px)";
     terminal.style.left = "240px";
     terminal.style.right = "0px";
+    terminal.style.height = "auto";
     terminal.style.bottom = "24px";
     terminal.style.opacity = "0";
     terminal.style.transform = "translateY(8px) scale(0.99)";
@@ -174722,7 +174625,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.50.1",
+  version: "3.51.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -176688,4 +176591,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775157226225.js.map
+//# sourceMappingURL=bundle-1775211113131.js.map