deepspotscreen-sdk 0.1.0 → 0.1.2

package/dist/deepspot-sdk.esm.js

@@ -4,7 +4,7 @@ class K {
   }
   // ── Embed Token ─────────────────────────────────────────────────────────────
   async getEmbedToken(e) {
-    var r, a, o, l;
+    var r, a, o, c;
     const t = [
       e.dashboardId,
       e.embedType,
@@ -18,7 +18,7 @@ class K {
       {
         dashboardId: e.dashboardId,
         embedType: e.embedType,
-        embedLevel: (l = e.embedLevel) != null ? l : "dashboard",
+        embedLevel: (c = e.embedLevel) != null ? c : "dashboard",
         componentId: e.componentId,
         userId: e.userId,
         tenantId: e.tenantId,
@@ -214,7 +214,7 @@ class E {
     });
   }
 }
-const be = 24, M = 10, O = 12;
+const be = 24, O = 10, M = 12;
 class ae {
   /**
    * @param containerWidth  Actual pixel width of the grid container.
@@ -230,19 +230,19 @@ class ae {
   }
   /** Convert grid position {x,y,w,h} → CSS absolute pixel values */
   toPx(e) {
-    const t = this.colWidth, s = O / 2;
+    const t = this.colWidth, s = M / 2;
     return {
       left: e.x * t + s,
-      top: (e.y - this.minY) * M + s,
-      width: e.w * t - O,
-      height: e.h * M - O
+      top: (e.y - this.minY) * O + s,
+      width: e.w * t - M,
+      height: e.h * O - M
     };
   }
   /** Total pixel height required to fit all positioned components */
   static totalHeight(e) {
     if (!e.length) return 400;
     const t = Math.min(...e.map((i) => i.y));
-    return (Math.max(...e.map((i) => i.y + i.h)) - t) * M + 40;
+    return (Math.max(...e.map((i) => i.y + i.h)) - t) * O + 40;
   }
   /** Apply absolute positioning styles directly to a DOM element */
   applyStyles(e, t) {
@@ -252,7 +252,7 @@ class ae {
 }
 let N = null;
 function fe() {
-  return N || (N = import("./apexcharts.common-k3hLWpB8.js").then((w) => w.a)), N;
+  return N || (N = import("./apexcharts.common-k3hLWpB8.js").then((k) => k.a)), N;
 }
 class ne {
   constructor(e) {
@@ -314,8 +314,16 @@ class ne {
     return r === "pie" || r === "donut" ? this.buildPieOptions(e, t, s, i) : r === "bar" || r === "line" || r === "area" ? this.buildCartesianOptions(e, t, s, i) : null;
   }
   buildCartesianOptions(e, t, s, i) {
-    var n;
-    const { series: r, categories: a, xAxisLabel: o, yAxisLabel: l } = this.extractSeriesAndCategories(e, t), d = e.properties || {}, h = d.colors ? Object.values(d.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"], b = s === "dark";
+    var f;
+    const { series: r, categories: a, xAxisLabel: o, yAxisLabel: c, seriesColors: d } = this.extractSeriesAndCategories(e, t), b = e.properties || {}, u = ["#4f46e5", "#10b981", "#f59e0b", "#ef4444", "#3b82f6", "#8b5cf6", "#ec4899", "#14b8a6"];
+    let g;
+    if (d.length > 0 && d.length === r.length)
+      g = d;
+    else {
+      const p = b.colors ? Object.values(b.colors).filter(Boolean) : [];
+      g = p.length > 0 ? p : u;
+    }
+    const n = s === "dark";
     return {
       chart: {
         type: e.type === "area" ? "area" : e.type === "line" ? "line" : "bar",
@@ -334,23 +342,23 @@ class ne {
         title: { text: o },
         labels: {
           rotate: a.length > 8 ? -45 : 0,
-          style: { colors: b ? "#94a3b8" : "#6b7280", fontSize: "11px" }
+          style: { colors: n ? "#94a3b8" : "#6b7280", fontSize: "11px" }
         },
-        axisBorder: { color: b ? "#334155" : "#e5e7eb" },
-        axisTicks: { color: b ? "#334155" : "#e5e7eb" }
+        axisBorder: { color: n ? "#334155" : "#e5e7eb" },
+        axisTicks: { color: n ? "#334155" : "#e5e7eb" }
       },
       yaxis: {
-        title: { text: l },
-        labels: { style: { colors: b ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
+        title: { text: c },
+        labels: { style: { colors: n ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
       },
-      colors: h,
+      colors: g,
       legend: {
-        show: r.length > 1 || ((n = d.showLegend) != null ? n : !1),
+        show: r.length > 1 || ((f = b.showLegend) != null ? f : !1),
         position: "bottom",
-        labels: { colors: b ? "#94a3b8" : "#6b7280" }
+        labels: { colors: n ? "#94a3b8" : "#6b7280" }
       },
       grid: {
-        borderColor: b ? "#1e293b" : "#f3f4f6",
+        borderColor: n ? "#1e293b" : "#f3f4f6",
         strokeDashArray: 4,
         padding: {
           bottom: a.length > 8 ? 60 : 10
@@ -372,10 +380,10 @@ class ne {
     };
   }
   buildPieOptions(e, t, s, i) {
-    const r = e.properties || {}, a = t.length > 0 ? Object.keys(t[0]) : [], o = a[0] || "label", l = a[1] || "value", d = t.map((p) => {
-      var f;
-      return String((f = p[o]) != null ? f : "");
-    }), h = t.map((p) => Number(p[l]) || 0), b = s === "dark", n = r.colors ? Object.values(r.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"];
+    const r = e.properties || {}, a = t.length > 0 ? Object.keys(t[0]) : [], o = a[0] || "label", c = a[1] || "value", d = t.map((p) => {
+      var l;
+      return String((l = p[o]) != null ? l : "");
+    }), b = t.map((p) => Number(p[c]) || 0), u = s === "dark", g = ["#4f46e5", "#10b981", "#f59e0b", "#ef4444", "#3b82f6", "#8b5cf6", "#ec4899", "#14b8a6"], n = r.colors ? Object.values(r.colors).filter(Boolean) : [], f = n.length > 0 ? n : g;
     return {
       chart: {
         type: e.type,
@@ -385,12 +393,12 @@ class ne {
         height: i != null ? i : "100%"
       },
       theme: { mode: s },
-      series: h,
+      series: b,
       labels: d,
-      colors: n,
+      colors: f,
       legend: {
         position: "bottom",
-        labels: { colors: b ? "#94a3b8" : "#6b7280" }
+        labels: { colors: u ? "#94a3b8" : "#6b7280" }
       },
       tooltip: { theme: s },
       dataLabels: { enabled: d.length <= 8 },
@@ -408,32 +416,34 @@ class ne {
       try {
         const n = typeof s.selectedYAxisColumn == "string" ? JSON.parse(s.selectedYAxisColumn) : s.selectedYAxisColumn;
         Array.isArray(n) && (a = n.map(
-          (p) => typeof p == "string" ? { column: p } : p
+          (f) => typeof f == "string" ? { column: f } : f
         ));
       } catch (n) {
       }
     if (!a.length && s.yAxis) {
       const n = s.yAxis;
-      a = (Array.isArray(n) ? n : [n]).map((f) => ({ column: String(f) }));
+      a = (Array.isArray(n) ? n : [n]).map((p) => ({ column: String(p) }));
     }
     !a.length && i.length > 1 && (a = i.slice(1).map((n) => ({ column: n })));
     const o = t.map((n) => {
-      var p;
-      return String((p = n[r]) != null ? p : "");
-    }), l = t.length > 0 ? Object.keys(t[0]) : [], d = a.map((n) => {
-      const p = l.includes(n.column) ? n.column : null, f = p ? null : l.find((u) => u.includes(n.column) || n.column.includes(u)), m = !p && !f ? l.find((u) => {
-        var g;
-        return u !== r && !isNaN(Number((g = t[0]) == null ? void 0 : g[u]));
-      }) : null, c = p || f || m || n.column;
+      var f;
+      return String((f = n[r]) != null ? f : "");
+    }), c = t.length > 0 ? Object.keys(t[0]) : [], d = a.map((n) => {
+      const f = c.includes(n.column) ? n.column : null, p = f ? null : c.find((h) => h.includes(n.column) || n.column.includes(h)), l = !f && !p ? c.find((h) => {
+        var y;
+        return h !== r && !isNaN(Number((y = t[0]) == null ? void 0 : y[h]));
+      }) : null, x = f || p || l || n.column;
       return {
-        name: n.label || n.column.replace(/_/g, " "),
-        data: t.map((u) => {
-          const g = u[c];
-          return g != null ? Number(g) : null;
+        // Use the column name directly as the series label (matches builder behaviour).
+        // col.label often stores the chart title, not the series name — ignore it.
+        name: n.column,
+        data: t.map((h) => {
+          const y = h[x];
+          return y != null ? Number(y) : null;
         })
       };
-    }), h = s.xAxisLabel || r.replace(/_/g, " "), b = s.yAxisLabel || (d.length === 1 ? d[0].name : "Values");
-    return { series: d, categories: o, xAxisLabel: h, yAxisLabel: b };
+    }), b = a.map((n) => n.color || n.colorHex || "").filter(Boolean), u = s.xAxisLabel || r, g = s.yAxisLabel || (a.length === 1 ? a[0].column : "");
+    return { series: d, categories: o, xAxisLabel: u, yAxisLabel: g, seriesColors: b };
   }
   renderEmpty(e) {
     this.container.innerHTML = `
@@ -450,12 +460,12 @@ class le {
   }
   // ── Public API ─────────────────────────────────────────────────────────────
   render(e, t, s, i) {
-    var h;
+    var b;
     this.container = e, this.component = t, this.fetchPage = i, this.searchTerm = "", this.currentPage = 1, this.currentPageSize = 10;
     const r = s && !Array.isArray(s) && "rows" in s;
     if (r) {
-      const b = s;
-      this.currentRows = b.rows, this.allData = [], this.totalRows = b.total, this.currentPage = b.page, this.currentPageSize = b.pageSize;
+      const u = s;
+      this.currentRows = u.rows, this.allData = [], this.totalRows = u.total, this.currentPage = u.page, this.currentPageSize = u.pageSize;
     } else
       this.allData = s || [], this.currentRows = [], this.totalRows = this.allData.length, this.currentPage = 1;
     if (r && s.rows.length === 0 && s.total === 0 || !r && this.allData.length === 0) {
@@ -470,18 +480,18 @@ class le {
       `;
       return;
     }
-    const a = r ? s.rows[0] : this.allData[0], o = a ? Object.keys(a) : [], l = ((h = t.properties) == null ? void 0 : h.columns) || [], d = l.length ? l.filter((b) => o.includes(b)) : [];
+    const a = r ? s.rows[0] : this.allData[0], o = a ? Object.keys(a) : [], c = ((b = t.properties) == null ? void 0 : b.columns) || [], d = c.length ? c.filter((u) => o.includes(u)) : [];
     this.columns = d.length ? d : o, this.paint();
   }
   // ── Rendering ──────────────────────────────────────────────────────────────
   paint() {
-    const { rows: e, startNum: t } = this.getPageRows(), s = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), i = (this.currentPage - 1) * this.currentPageSize + 1, r = this.fetchPage ? Math.min(i - 1 + (this.isLoading ? this.currentPageSize : e.length), this.totalRows) : Math.min(this.currentPage * this.currentPageSize, this.totalRows), a = this.columns.map((n) => `<th>${this.escape(this.formatHeader(n))}</th>`).join(""), o = e.length === 0 ? `<tr><td colspan="${this.columns.length + 1}" style="text-align:center;padding:20px;color:#9ca3af">No results found</td></tr>` : e.map((n, p) => {
-      const f = this.columns.map((m) => {
-        const c = n[m];
-        return `<td title="${this.escape(String(c != null ? c : ""))}">${this.escape(this.formatValue(c))}</td>`;
+    const { rows: e, startNum: t } = this.getPageRows(), s = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), i = (this.currentPage - 1) * this.currentPageSize + 1, r = this.fetchPage ? Math.min(i - 1 + (this.isLoading ? this.currentPageSize : e.length), this.totalRows) : Math.min(this.currentPage * this.currentPageSize, this.totalRows), a = this.columns.map((g) => `<th>${this.escape(this.formatHeader(g))}</th>`).join(""), o = e.length === 0 ? `<tr><td colspan="${this.columns.length + 1}" style="text-align:center;padding:20px;color:#9ca3af">No results found</td></tr>` : e.map((g, n) => {
+      const f = this.columns.map((p) => {
+        const l = g[p];
+        return `<td title="${this.escape(String(l != null ? l : ""))}">${this.escape(this.formatValue(l))}</td>`;
       }).join("");
-      return `<tr><td class="ds-table-sno">${t + p}</td>${f}</tr>`;
-    }).join(""), l = this.currentPageSize, d = [10, 25, 50, 100].map((n) => `<option value="${n}"${n === l ? " selected" : ""}>${n}</option>`).join(""), h = this.currentPage <= 1, b = this.currentPage >= s;
+      return `<tr><td class="ds-table-sno">${t + n}</td>${f}</tr>`;
+    }).join(""), c = this.currentPageSize, d = [10, 25, 50, 100].map((g) => `<option value="${g}"${g === c ? " selected" : ""}>${g}</option>`).join(""), b = this.currentPage <= 1, u = this.currentPage >= s;
     this.container.innerHTML = `
       <div class="ds-table-card">
         <div class="ds-table-header-row">
@@ -503,11 +513,11 @@ class le {
             <select class="ds-table-page-size">${d}</select>
           </div>
           <div class="ds-table-pagination">
-            <button class="ds-table-pg-btn" data-action="first" ${h ? "disabled" : ""}>&#171;</button>
-            <button class="ds-table-pg-btn" data-action="prev"  ${h ? "disabled" : ""}>Previous</button>
+            <button class="ds-table-pg-btn" data-action="first" ${b ? "disabled" : ""}>&#171;</button>
+            <button class="ds-table-pg-btn" data-action="prev"  ${b ? "disabled" : ""}>Previous</button>
             <span class="ds-table-pg-info">Page ${this.currentPage} of ${s}</span>
-            <button class="ds-table-pg-btn" data-action="next" ${b ? "disabled" : ""}>Next</button>
-            <button class="ds-table-pg-btn" data-action="last" ${b ? "disabled" : ""}>&#187;</button>
+            <button class="ds-table-pg-btn" data-action="next" ${u ? "disabled" : ""}>Next</button>
+            <button class="ds-table-pg-btn" data-action="last" ${u ? "disabled" : ""}>&#187;</button>
           </div>
         </div>
         ${this.isLoading ? '<div class="ds-table-loading-overlay"><div class="ds-embed-spinner"></div></div>' : ""}
@@ -576,24 +586,35 @@ class le {
 }
 class ce {
   render(e, t, s) {
+    var f;
     const i = t.properties || {};
     let r = null;
     if (s && s.length > 0) {
-      const f = s[0], m = i.metric || Object.keys(f)[0], c = f[m];
-      if (c !== void 0)
-        r = c;
+      const p = s[0], l = i.metric || Object.keys(p)[0], x = p[l];
+      if (x !== void 0)
+        r = x;
       else {
-        const u = Object.keys(f).find(
-          (g) => g.includes(m) || m.includes(g)
+        const h = Object.keys(p).find(
+          (y) => y.includes(l) || l.includes(y)
         );
-        r = f[u != null ? u : Object.keys(f)[0]];
+        r = p[h != null ? h : Object.keys(p)[0]];
       }
     }
-    const a = this.formatValue(r, i), o = i.styleConfig || {}, l = o.backgroundColor || i.backgroundColor || "", d = o.color || o.textColor || i.textColor || "", h = t.title || "", b = l ? `background:${l};border-color:${l};` : "", n = d ? `color:${d};` : "", p = d ? `color:${d};opacity:0.7;` : "";
+    let a;
+    if (r == null)
+      try {
+        const p = (f = i == null ? void 0 : i.data) == null ? void 0 : f.dataContent, l = p ? typeof p == "string" ? JSON.parse(p) : p : null;
+        a = l != null && l.value ? String(l.value) : "—";
+      } catch (p) {
+        a = "—";
+      }
+    else
+      a = this.formatValue(r, i);
+    const o = i.styleConfig || {}, c = o.backgroundColor || i.backgroundColor || "", d = o.color || o.textColor || i.textColor || "", b = t.title || "", u = c ? `background:${c};border:none;` : "", g = d ? `color:${d};` : "", n = d ? `color:${d};opacity:0.7;` : "";
     e.innerHTML = `
-      <div class="ds-card"${b ? ` style="${b}"` : ""}>
-        <div class="ds-card-label"${p ? ` style="${p}"` : ""}>${h}</div>
-        <div class="ds-card-value"${n ? ` style="${n}"` : ""}>${a}</div>
+      <div class="ds-card"${u ? ` style="${u}"` : ""}>
+        <div class="ds-card-label"${n ? ` style="${n}"` : ""}>${b}</div>
+        <div class="ds-card-value"${g ? ` style="${g}"` : ""}>${a}</div>
       </div>
     `;
   }
@@ -601,9 +622,8 @@ class ce {
     if (e == null) return "—";
     const s = Number(e);
     if (isNaN(s)) return String(e);
-    const i = (t == null ? void 0 : t.prefix) || (t == null ? void 0 : t.currencySymbol) || "", r = (t == null ? void 0 : t.suffix) || "";
-    let a;
-    return Math.abs(s) >= 1e6 ? a = (s / 1e6).toFixed(1) + "M" : Math.abs(s) >= 1e3 ? a = (s / 1e3).toFixed(1) + "K" : a = s % 1 === 0 ? s.toLocaleString() : s.toFixed(2), `${i}${a}${r}`;
+    const i = (t == null ? void 0 : t.prefix) || (t == null ? void 0 : t.currencySymbol) || "", r = (t == null ? void 0 : t.suffix) || "", a = s % 1 === 0 ? s.toLocaleString() : parseFloat(s.toFixed(2)).toLocaleString();
+    return `${i}${a}${r}`;
   }
 }
 class pe {
@@ -704,16 +724,16 @@ class pe {
   attachListeners(e) {
     const t = {};
     this.container.querySelectorAll("[data-filter-id]").forEach((s) => {
-      const i = s.dataset.filterId, r = s.dataset.datePart, a = e.find((l) => l.filterId === i), o = () => {
-        let l;
+      const i = s.dataset.filterId, r = s.dataset.datePart, a = e.find((c) => c.filterId === i), o = () => {
+        let c;
         if ((a == null ? void 0 : a.type) === "date-range" && r)
-          t[i] = t[i] || {}, t[i][r] = s.value, l = { ...t[i] };
+          t[i] = t[i] || {}, t[i][r] = s.value, c = { ...t[i] };
         else if ((a == null ? void 0 : a.type) === "multi-select") {
           const d = s;
-          l = Array.from(d.selectedOptions).map((h) => h.value).filter(Boolean);
+          c = Array.from(d.selectedOptions).map((b) => b.value).filter(Boolean);
         } else
-          l = s.value;
-        this.currentValues[i] = l, this.onFilterChange(i, l);
+          c = s.value;
+        this.currentValues[i] = c, this.onFilterChange(i, c);
       };
       s.addEventListener(
         (a == null ? void 0 : a.type) === "text-input" ? "input" : "change",
@@ -730,7 +750,7 @@ class pe {
 }
 const H = class H {
   constructor(e, t) {
-    this.activePageId = "", this.activeTabId = "", this.activeFilters = {}, this.chartRenderers = /* @__PURE__ */ new Map(), this.tableRenderer = new le(), this.cardRenderer = new ce(), this.isLoadingTab = !1, this.root = e, this.opts = t, this.activeFilters = { ...t.initialFilters };
+    this.activePageId = "", this.activeTabId = "", this.activeFilters = {}, this.chartRenderers = /* @__PURE__ */ new Map(), this.tableRenderer = new le(), this.cardRenderer = new ce(), this.isLoadingTab = !1, this.tooltipEl = null, this.root = e, this.opts = t, this.activeFilters = { ...t.initialFilters };
   }
   // ── Initial full render ───────────────────────────────────────────────────
   render(e) {
@@ -752,14 +772,14 @@ const H = class H {
     this.chartRenderers.forEach((e) => e.destroy()), this.chartRenderers.clear(), this.root.innerHTML = "";
   }
   exportPDF() {
-    var n, p;
+    var g, n;
     const e = this.root.querySelector("#ds-grid");
     if (!e) return;
     const t = this.root.style.height, s = this.root.style.overflow;
     this.root.style.height = "auto", this.root.style.overflow = "visible";
-    const i = this.root.querySelector("#ds-canvas"), r = (n = i == null ? void 0 : i.style.height) != null ? n : "", a = (p = i == null ? void 0 : i.style.overflow) != null ? p : "";
+    const i = this.root.querySelector("#ds-canvas"), r = (g = i == null ? void 0 : i.style.height) != null ? g : "", a = (n = i == null ? void 0 : i.style.overflow) != null ? n : "";
     i && (i.style.height = "auto", i.style.overflow = "visible");
-    const o = Array.from(e.querySelectorAll(".ds-table-scroll")), l = o.map((f) => ({
+    const o = Array.from(e.querySelectorAll(".ds-table-scroll")), c = o.map((f) => ({
       el: f,
       overflow: f.style.overflow,
       maxHeight: f.style.maxHeight,
@@ -768,7 +788,7 @@ const H = class H {
     o.forEach((f) => {
       f.style.overflow = "visible", f.style.maxHeight = "none", f.style.height = "auto";
     });
-    const d = e.offsetWidth, h = parseInt(e.style.height, 10) || e.offsetHeight, b = e.getBoundingClientRect().top + window.scrollY;
+    const d = e.offsetWidth, b = parseInt(e.style.height, 10) || e.offsetHeight, u = e.getBoundingClientRect().top + window.scrollY;
     import("./html2canvas.esm-CzwMv54K.js").then(
       ({ default: f }) => f(e, {
         scale: 2,
@@ -776,21 +796,21 @@ const H = class H {
         allowTaint: !0,
         logging: !1,
         width: d,
-        height: h,
+        height: b,
         windowWidth: d,
-        windowHeight: h,
+        windowHeight: b,
         scrollX: 0,
-        scrollY: -b
-      }).then((m) => {
-        this.root.style.height = t, this.root.style.overflow = s, i && (i.style.height = r, i.style.overflow = a), l.forEach(({ el: c, overflow: u, maxHeight: g, height: k }) => {
-          c.style.overflow = u, c.style.maxHeight = g, c.style.height = k;
-        }), import("./jspdf.es.min-d9hlG26J.js").then((c) => c.j).then(({ jsPDF: c }) => {
-          const u = m.width / 2, g = m.height / 2, k = new c({
-            orientation: u >= g ? "landscape" : "portrait",
+        scrollY: -u
+      }).then((p) => {
+        this.root.style.height = t, this.root.style.overflow = s, i && (i.style.height = r, i.style.overflow = a), c.forEach(({ el: l, overflow: x, maxHeight: h, height: y }) => {
+          l.style.overflow = x, l.style.maxHeight = h, l.style.height = y;
+        }), import("./jspdf.es.min-d9hlG26J.js").then((l) => l.j).then(({ jsPDF: l }) => {
+          const x = p.width / 2, h = p.height / 2, y = new l({
+            orientation: x >= h ? "landscape" : "portrait",
             unit: "px",
-            format: [u, g]
+            format: [x, h]
           });
-          k.addImage(m.toDataURL("image/png"), "PNG", 0, 0, u, g), k.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
+          y.addImage(p.toDataURL("image/png"), "PNG", 0, 0, x, h), y.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
         });
       })
     );
@@ -801,8 +821,8 @@ const H = class H {
       if (!(t != null && t.length) || !["table", "bar", "line", "area"].includes(e.type)) return;
       const s = Object.keys(t[0]), i = [s.join(","), ...t.map(
         (a) => s.map((o) => {
-          var l;
-          return JSON.stringify((l = a[o]) != null ? l : "");
+          var c;
+          return JSON.stringify((c = a[o]) != null ? c : "");
         }).join(",")
       )].join(`
 `);
@@ -834,11 +854,11 @@ const H = class H {
     `, this.root.style.position = "relative", this.opts.hideExport || this.buildExportToolbar();
     const r = this.root.querySelector("#ds-filter-container");
     this.filterRenderer = new pe(r, (a, o) => {
-      var b, n, p, f, m;
-      const l = (b = this.renderData.filters) == null ? void 0 : b.find((c) => c.filterId === a), d = (n = this.renderData.components) == null ? void 0 : n.find(
-        (c) => c.type === "inline-filter" && c.id === a
-      ), h = (l == null ? void 0 : l.applyToField) || ((p = d == null ? void 0 : d.properties) == null ? void 0 : p.applyToField) || a;
-      this.activeFilters[h] = o, (m = (f = this.opts).onFilterChange) == null || m.call(f, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
+      var u, g, n, f, p;
+      const c = (u = this.renderData.filters) == null ? void 0 : u.find((l) => l.filterId === a), d = (g = this.renderData.components) == null ? void 0 : g.find(
+        (l) => l.type === "inline-filter" && l.id === a
+      ), b = (c == null ? void 0 : c.applyToField) || ((n = d == null ? void 0 : d.properties) == null ? void 0 : n.applyToField) || a;
+      this.activeFilters[b] = o, (p = (f = this.opts).onFilterChange) == null || p.call(f, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
     });
   }
   buildExportToolbar() {
@@ -919,7 +939,7 @@ const H = class H {
   /** Convert inline-filter ComponentConfig entries to FilterDefinition shape */
   inlineFiltersAsDefinitions() {
     return this.opts.hideInlineFilters ? [] : (this.renderData.components || []).filter((e) => e.type === "inline-filter").map((e) => {
-      var t, s, i, r, a, o, l, d;
+      var t, s, i, r, a, o, c, d;
       return {
         filterId: e.id,
         label: ((t = e.properties) == null ? void 0 : t.filterLabel) || e.title || "",
@@ -927,7 +947,7 @@ const H = class H {
         options: ((i = e.properties) == null ? void 0 : i.filterOptions) || ((r = e.properties) == null ? void 0 : r.options) || [],
         defaultValue: (a = e.properties) == null ? void 0 : a.defaultValue,
         targetComponents: ((o = e.properties) == null ? void 0 : o.targetComponents) || [],
-        filterOperator: (l = e.properties) == null ? void 0 : l.filterOperator,
+        filterOperator: (c = e.properties) == null ? void 0 : c.filterOperator,
         applyToField: ((d = e.properties) == null ? void 0 : d.applyToField) || e.id
       };
     });
@@ -946,10 +966,10 @@ const H = class H {
     const e = this.root.querySelector("#ds-grid");
     if (!e) return;
     if (!this.opts.hideBackground) {
-      const d = this.root.querySelector("#ds-canvas"), h = this.renderData.dashboard.pages.find(
-        (n) => n.pageId === this.activePageId
-      ), b = (h == null ? void 0 : h.backgroundColor) || "";
-      d && (d.style.background = b), this.root.style.background = b;
+      const d = this.root.querySelector("#ds-canvas"), b = this.renderData.dashboard.pages.find(
+        (g) => g.pageId === this.activePageId
+      ), u = (b == null ? void 0 : b.backgroundColor) || "";
+      d && (d.style.background = u), this.root.style.background = u;
     }
     this.chartRenderers.forEach((d) => d.destroy()), this.chartRenderers.clear();
     const t = (this.renderData.components || []).filter(
@@ -961,27 +981,39 @@ const H = class H {
     }
     const s = e.clientWidth || this.root.clientWidth || 800, i = t.map((d) => d.position), r = i.length ? Math.min(...i.map((d) => d.y)) : 0, a = new ae(s, r);
     e.style.height = `${ae.totalHeight(i)}px`, e.innerHTML = "";
-    const o = 36, l = [];
+    const o = 36, c = [];
     t.forEach((d) => {
-      var p, f, m;
-      const h = document.createElement("div");
-      if (h.className = "ds-component-wrapper", h.dataset.componentId = d.id, a.applyStyles(h, d.position), !this.opts.hideBackground) {
-        const c = ((f = (p = d.properties) == null ? void 0 : p.styleConfig) == null ? void 0 : f.backgroundColor) || ((m = d.properties) == null ? void 0 : m.backgroundColor);
-        c && (h.style.background = c);
+      var p, l, x;
+      const b = document.createElement("div");
+      if (b.className = "ds-component-wrapper", b.dataset.componentId = d.id, a.applyStyles(b, d.position), !this.opts.hideBackground) {
+        const h = ((l = (p = d.properties) == null ? void 0 : p.styleConfig) == null ? void 0 : l.backgroundColor) || ((x = d.properties) == null ? void 0 : x.backgroundColor);
+        h && (b.style.background = h);
       }
-      e.appendChild(h);
-      const b = a.toPx(d.position), n = Math.max(50, b.height - o);
-      l.push(
-        this.renderComponent(h, d, n).catch((c) => {
-          console.error(`[Deepspot SDK] Failed to render component ${d.id} (${d.type}):`, c), h.innerHTML = `<div style="padding:8px;color:#ef4444;font-size:12px;">⚠ ${d.type} render error</div>`;
+      e.appendChild(b);
+      const u = a.toPx(d.position), g = Math.max(50, u.height - o), n = document.createElement("div");
+      n.style.cssText = "width:100%;height:100%;", b.appendChild(n);
+      const f = this.getComponentDescription(d);
+      if (f) {
+        const h = this.getTooltipEl();
+        b.addEventListener("mouseenter", () => {
+          h.textContent = f, h.style.display = "block";
+          const y = b.getBoundingClientRect(), T = h.offsetHeight || 36;
+          window.innerHeight - y.bottom >= T + 6 ? h.style.top = `${y.bottom + 4}px` : h.style.top = `${y.top - T - 4}px`, h.style.left = `${y.left}px`, h.style.width = `${y.width}px`;
+        }), b.addEventListener("mouseleave", () => {
+          h.style.display = "none";
+        });
+      }
+      c.push(
+        this.renderComponent(n, d, g).catch((h) => {
+          console.error(`[Deepspot SDK] Failed to render component ${d.id} (${d.type}):`, h), n.innerHTML = `<div style="padding:8px;color:#ef4444;font-size:12px;">⚠ ${d.type} render error</div>`;
         })
       );
-    }), Promise.all(l).catch(() => {
+    }), Promise.all(c).catch(() => {
     });
   }
   // ── Component renderer switch ─────────────────────────────────────────────
   async renderComponent(e, t, s) {
-    var a, o, l, d, h, b, n, p, f, m, c, u, g, k, T, C, $, R, I, P, L, U, W, _, Y, J, X, Z, Q, V, ee, te, se, ie, re;
+    var a, o, c, d, b, u, g, n, f, p, l, x, h, y, T, C, $, R, I, L, F, U, W, _, Y, J, V, X, Z, Q, ee, te, se, ie, re;
     const i = this.renderData.data[t.id] || [], r = this.opts.theme;
     switch (t.type) {
       case "bar":
@@ -991,13 +1023,13 @@ const H = class H {
       case "area":
       case "scatter":
       case "stacked-bar": {
-        const v = new ne(e);
-        await v.render(t, i, r, s), this.chartRenderers.set(t.id, v);
+        const w = new ne(e);
+        await w.render(t, i, r, s), this.chartRenderers.set(t.id, w);
         break;
       }
       case "table": {
-        const v = this.opts.onFetchTablePage ? (x, S) => this.opts.onFetchTablePage(t.id, x, S) : void 0;
-        this.tableRenderer.render(e, t, i, v);
+        const w = this.opts.onFetchTablePage ? (v, S) => this.opts.onFetchTablePage(t.id, v, S) : void 0;
+        this.tableRenderer.render(e, t, i, w);
         break;
       }
       case "number-card":
@@ -1005,62 +1037,62 @@ const H = class H {
         break;
       case "text-heading": {
         if (this.opts.hideText) break;
-        const v = ((o = (a = t.properties) == null ? void 0 : a.data) == null ? void 0 : o.dataContent) || ((l = t.properties) == null ? void 0 : l.content) || t.title || "", x = ((d = t.properties) == null ? void 0 : d.styleConfig) || {}, S = this.scToInlineStyle(x), y = this.opts.hideBackground ? {} : this.parseTwColor((b = (h = t.properties) == null ? void 0 : h.color) != null ? b : ""), F = [[
-          y.bg ? `background:${y.bg}` : "",
-          y.text ? `color:${y.text}` : ""
+        const w = ((o = (a = t.properties) == null ? void 0 : a.data) == null ? void 0 : o.dataContent) || ((c = t.properties) == null ? void 0 : c.content) || t.title || "", v = ((d = t.properties) == null ? void 0 : d.styleConfig) || {}, S = this.scToInlineStyle(v), m = this.opts.hideBackground ? {} : this.parseTwColor((u = (b = t.properties) == null ? void 0 : b.color) != null ? u : ""), P = [[
+          m.bg ? `background:${m.bg}` : "",
+          m.text ? `color:${m.text}` : ""
         ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-heading" style="${F}">${v}</div>`;
+        e.innerHTML = `<div class="ds-text-heading" style="${P}">${w}</div>`;
         break;
       }
       case "text-subheading": {
         if (this.opts.hideText) break;
-        const v = ((p = (n = t.properties) == null ? void 0 : n.data) == null ? void 0 : p.dataContent) || ((f = t.properties) == null ? void 0 : f.content) || t.title || "", x = ((m = t.properties) == null ? void 0 : m.styleConfig) || {}, S = this.scToInlineStyle(x), y = this.opts.hideBackground ? {} : this.parseTwColor((u = (c = t.properties) == null ? void 0 : c.color) != null ? u : ""), F = [[
-          y.bg ? `background:${y.bg}` : "",
-          y.text ? `color:${y.text}` : ""
+        const w = ((n = (g = t.properties) == null ? void 0 : g.data) == null ? void 0 : n.dataContent) || ((f = t.properties) == null ? void 0 : f.content) || t.title || "", v = ((p = t.properties) == null ? void 0 : p.styleConfig) || {}, S = this.scToInlineStyle(v), m = this.opts.hideBackground ? {} : this.parseTwColor((x = (l = t.properties) == null ? void 0 : l.color) != null ? x : ""), P = [[
+          m.bg ? `background:${m.bg}` : "",
+          m.text ? `color:${m.text}` : ""
         ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-subheading" style="${F}">${v}</div>`;
+        e.innerHTML = `<div class="ds-text-subheading" style="${P}">${w}</div>`;
         break;
       }
       case "text-body": {
         if (this.opts.hideText) break;
-        const v = ((k = (g = t.properties) == null ? void 0 : g.data) == null ? void 0 : k.dataContent) || ((T = t.properties) == null ? void 0 : T.content) || "", x = ((C = t.properties) == null ? void 0 : C.styleConfig) || {}, S = this.scToInlineStyle(x), y = this.opts.hideBackground ? {} : this.parseTwColor((R = ($ = t.properties) == null ? void 0 : $.color) != null ? R : ""), F = [[
-          y.bg ? `background:${y.bg}` : "",
-          y.text ? `color:${y.text}` : ""
+        const w = ((y = (h = t.properties) == null ? void 0 : h.data) == null ? void 0 : y.dataContent) || ((T = t.properties) == null ? void 0 : T.content) || "", v = ((C = t.properties) == null ? void 0 : C.styleConfig) || {}, S = this.scToInlineStyle(v), m = this.opts.hideBackground ? {} : this.parseTwColor((R = ($ = t.properties) == null ? void 0 : $.color) != null ? R : ""), P = [[
+          m.bg ? `background:${m.bg}` : "",
+          m.text ? `color:${m.text}` : ""
         ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-body" style="${F}">${v}</div>`;
+        e.innerHTML = `<div class="ds-text-body" style="${P}">${w}</div>`;
         break;
       }
       case "text-box": {
         if (this.opts.hideText) break;
-        const v = ((P = (I = t.properties) == null ? void 0 : I.data) == null ? void 0 : P.dataContent) || ((L = t.properties) == null ? void 0 : L.content) || "", x = ((U = t.properties) == null ? void 0 : U.styleConfig) || {}, S = this.scToInlineStyle(x), y = this.opts.hideBackground ? {} : this.parseTwColor((_ = (W = t.properties) == null ? void 0 : W.color) != null ? _ : ""), F = [[
-          y.bg ? `background:${y.bg}` : "",
-          y.text ? `color:${y.text}` : ""
+        const w = ((L = (I = t.properties) == null ? void 0 : I.data) == null ? void 0 : L.dataContent) || ((F = t.properties) == null ? void 0 : F.content) || "", v = ((U = t.properties) == null ? void 0 : U.styleConfig) || {}, S = this.scToInlineStyle(v), m = this.opts.hideBackground ? {} : this.parseTwColor((_ = (W = t.properties) == null ? void 0 : W.color) != null ? _ : ""), P = [[
+          m.bg ? `background:${m.bg}` : "",
+          m.text ? `color:${m.text}` : ""
         ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-box" style="${F}">${v}</div>`;
+        e.innerHTML = `<div class="ds-text-box" style="${P}">${w}</div>`;
         break;
       }
       case "text": {
         if (this.opts.hideText) break;
-        const v = ((J = (Y = t.properties) == null ? void 0 : Y.data) == null ? void 0 : J.dataContent) || ((X = t.properties) == null ? void 0 : X.content) || "", x = ((Z = t.properties) == null ? void 0 : Z.styleConfig) || {}, S = this.scToInlineStyle(x), y = this.opts.hideBackground ? {} : this.parseTwColor((V = (Q = t.properties) == null ? void 0 : Q.color) != null ? V : ""), F = [[
-          y.bg ? `background:${y.bg}` : "",
-          y.text ? `color:${y.text}` : ""
+        const w = ((J = (Y = t.properties) == null ? void 0 : Y.data) == null ? void 0 : J.dataContent) || ((V = t.properties) == null ? void 0 : V.content) || "", v = ((X = t.properties) == null ? void 0 : X.styleConfig) || {}, S = this.scToInlineStyle(v), m = this.opts.hideBackground ? {} : this.parseTwColor((Q = (Z = t.properties) == null ? void 0 : Z.color) != null ? Q : ""), P = [[
+          m.bg ? `background:${m.bg}` : "",
+          m.text ? `color:${m.text}` : ""
         ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-body" style="${F}">${v}</div>`;
+        e.innerHTML = `<div class="ds-text-body" style="${P}">${w}</div>`;
         break;
       }
       case "header": {
         if (this.opts.hideHeader) break;
-        const v = ((te = (ee = t.properties) == null ? void 0 : ee.data) == null ? void 0 : te.dataContent) || ((se = t.properties) == null ? void 0 : se.content) || t.title || "", x = ((ie = t.properties) == null ? void 0 : ie.styleConfig) || {}, S = !this.opts.hideBackground && x.backgroundColor ? `background:${x.backgroundColor};` : "", y = x.color ? `color:${x.color};` : x.textColor ? `color:${x.textColor};` : "";
+        const w = ((te = (ee = t.properties) == null ? void 0 : ee.data) == null ? void 0 : te.dataContent) || ((se = t.properties) == null ? void 0 : se.content) || t.title || "", v = ((ie = t.properties) == null ? void 0 : ie.styleConfig) || {}, S = !this.opts.hideBackground && v.backgroundColor ? `background:${v.backgroundColor};` : "", m = v.color ? `color:${v.color};` : v.textColor ? `color:${v.textColor};` : "";
         e.innerHTML = `
-          <div class="ds-header-component" style="${S}${y}">
-            <div class="ds-header-content">${v}</div>
+          <div class="ds-header-component" style="${S}${m}">
+            <div class="ds-header-content">${w}</div>
           </div>`;
         break;
       }
       case "section": {
-        const v = ((re = t.properties) == null ? void 0 : re.styleConfig) || {}, x = !this.opts.hideBackground && v.backgroundColor ? `background:${v.backgroundColor};` : "";
+        const w = ((re = t.properties) == null ? void 0 : re.styleConfig) || {}, v = !this.opts.hideBackground && w.backgroundColor ? `background:${w.backgroundColor};` : "";
         e.innerHTML = `
-          <div class="ds-section-wrapper" style="${x}">
+          <div class="ds-section-wrapper" style="${v}">
             ${t.title ? `<div class="ds-section-title">${t.title}</div>` : ""}
           </div>`;
         break;
@@ -1124,6 +1156,26 @@ const H = class H {
     }
     return t;
   }
+  getTooltipEl() {
+    if (!this.tooltipEl) {
+      const e = document.createElement("div");
+      e.className = "ds-global-tooltip", e.style.display = "none", document.body.appendChild(e), this.tooltipEl = e;
+    }
+    return this.tooltipEl;
+  }
+  getComponentDescription(e) {
+    var t, s, i, r;
+    if ((t = e.properties) != null && t.description) return String(e.properties.description);
+    try {
+      const a = (i = (s = e.properties) == null ? void 0 : s.data) == null ? void 0 : i.dataContent;
+      if (a) {
+        const o = typeof a == "string" ? JSON.parse(a) : a;
+        return (o == null ? void 0 : o.description) || ((r = o == null ? void 0 : o.config) == null ? void 0 : r.description) || "";
+      }
+    } catch (a) {
+    }
+    return "";
+  }
   getTabsForPage(e) {
     var t, s;
     return (s = (t = this.renderData.dashboard.pages.find((i) => i.pageId === e)) == null ? void 0 : t.tabs) != null ? s : [];
@@ -1216,11 +1268,11 @@ class he {
   }
 }
 let oe = !1;
-function q() {
+function B() {
   if (!(oe || typeof document == "undefined")) {
     oe = !0;
     try {
-      const w = `/* ─────────────────────────────────────────────────────────────────────────────
+      const k = `/* ─────────────────────────────────────────────────────────────────────────────
    Deepspot SDK — Base Embed Styles
    Injected once into the host page's <head> by the SDK.
    All selectors are scoped under .ds-embed-* to avoid leaking into host styles.
@@ -1450,7 +1502,25 @@ function q() {
 
 .ds-component-wrapper {
   position: absolute;
-  overflow: hidden;
+  /* overflow intentionally not set — individual card components handle their own clipping,
+     and tooltip bubbles must be able to overflow the wrapper boundary */
+}
+
+/* ── Description tooltip — fixed on body, positioned via JS, never clips content ── */
+.ds-global-tooltip {
+  position: fixed;
+  z-index: 9999;
+  background: rgba(15, 23, 42, 0.92);
+  color: #f1f5f9;
+  font-size: 12px;
+  line-height: 1.6;
+  padding: 8px 14px;
+  border-radius: 8px;
+  white-space: normal;
+  pointer-events: none;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+  max-width: 600px;
 }
 
 /* ── Chart component ───────────────────────────────────────────────────────── */
@@ -2043,42 +2113,42 @@ function q() {
   background: #0f172a;
 }
 `, e = document.createElement("style");
-      e.id = "deepspot-sdk-styles", e.textContent = w, document.head.appendChild(e);
-    } catch (w) {
+      e.id = "deepspot-sdk-styles", e.textContent = k, document.head.appendChild(e);
+    } catch (k) {
     }
   }
 }
-function de(w) {
-  if (typeof w == "string") {
-    const e = document.querySelector(w);
-    if (!e) throw new Error(`Deepspot SDK: container "${w}" not found in DOM`);
+function de(k) {
+  if (typeof k == "string") {
+    const e = document.querySelector(k);
+    if (!e) throw new Error(`Deepspot SDK: container "${k}" not found in DOM`);
     return e;
   }
-  return w;
+  return k;
 }
 class ge {
   constructor(e) {
     if (!e.apiKey) throw new Error("Deepspot SDK: apiKey is required");
     if (!e.baseUrl) throw new Error("Deepspot SDK: baseUrl is required");
-    this.apiClient = new K(e.baseUrl, e.apiKey), q();
+    this.apiClient = new K(e.baseUrl, e.apiKey), B();
   }
   // ── Embed full dashboard ────────────────────────────────────────────────────
   async embedDashboard(e) {
-    var a, o, l, d, h, b, n, p, f, m;
+    var a, o, c, d, b, u, g, n, f, p;
     const t = de(e.container), s = (a = e.embedLevel) != null ? a : "dashboard", i = (o = e.theme) != null ? o : "light";
     t.style.height = e.height || "600px", t.style.display = "block";
     const r = this.createRoot(t, i);
     this.showLoading(r);
     try {
-      const c = await this.apiClient.getEmbedToken({
+      const l = await this.apiClient.getEmbedToken({
         dashboardId: e.dashboardId,
         embedType: "dashboard",
         embedLevel: s,
         userId: e.userId,
         tenantId: e.tenantId
-      }), u = await this.apiClient.getDashboardRender(
+      }), x = await this.apiClient.getDashboardRender(
         e.dashboardId,
-        c,
+        l,
         {
           embedLevel: s,
           pageId: e.pageId,
@@ -2086,58 +2156,58 @@ class ge {
           filters: e.filters || {}
         }
       );
-      let g;
-      const k = new D(r, {
+      let h;
+      const y = new D(r, {
         embedLevel: s,
         theme: i,
         // v1 backward compat (hideFilters → hideGlobalFilters)
-        hideFilters: (l = e.hideGlobalFilters) != null ? l : !1,
+        hideFilters: (c = e.hideGlobalFilters) != null ? c : !1,
         hideExport: (d = e.hideExport) != null ? d : !1,
         // v2 visibility
-        hideGlobalFilters: (h = e.hideGlobalFilters) != null ? h : !1,
-        hideInlineFilters: (b = e.hideInlineFilters) != null ? b : !1,
-        hideText: (n = e.hideText) != null ? n : !1,
-        hideHeader: (p = e.hideHeader) != null ? p : !1,
+        hideGlobalFilters: (b = e.hideGlobalFilters) != null ? b : !1,
+        hideInlineFilters: (u = e.hideInlineFilters) != null ? u : !1,
+        hideText: (g = e.hideText) != null ? g : !1,
+        hideHeader: (n = e.hideHeader) != null ? n : !1,
         hideBackground: (f = e.hideBackground) != null ? f : !1,
         initialFilters: e.filters || {},
         onFilterChange: e.onFilterChange,
         onReady: e.onReady,
-        onFetchFilterOptions: (T) => this.apiClient.getFilterOptions(e.dashboardId, T, c),
-        onFetchTablePage: (T, C, $) => this.apiClient.getTablePage(e.dashboardId, T, C, $, c),
+        onFetchFilterOptions: (T) => this.apiClient.getFilterOptions(e.dashboardId, T, l),
+        onFetchTablePage: (T, C, $) => this.apiClient.getTablePage(e.dashboardId, T, C, $, l),
         onTabSwitch: async (T, C) => {
           var $, R, I;
           ($ = e.onTabSwitch) == null || $.call(e, T, C);
           try {
-            const P = await this.apiClient.getDashboardRender(
+            const L = await this.apiClient.getDashboardRender(
               e.dashboardId,
-              c,
+              l,
               {
                 embedLevel: s,
                 pageId: T,
                 tabId: C,
-                filters: (I = (R = g == null ? void 0 : g.getActiveFilters()) != null ? R : e.filters) != null ? I : {}
+                filters: (I = (R = h == null ? void 0 : h.getActiveFilters()) != null ? R : e.filters) != null ? I : {}
               }
             );
-            k.update(P);
-          } catch (P) {
-            console.error("Deepspot SDK: tab fetch failed", P);
+            y.update(L);
+          } catch (L) {
+            console.error("Deepspot SDK: tab fetch failed", L);
           }
         }
       });
-      return k.render(u), g = new E({
+      return y.render(x), h = new E({
         dashboardId: e.dashboardId,
-        token: c,
+        token: l,
         embedType: "dashboard",
         embedLevel: s,
-        activePageId: u.activePage,
-        activeTabId: u.activeTab,
+        activePageId: x.activePage,
+        activeTabId: x.activeTab,
         activeFilters: e.filters || {},
         apiClient: this.apiClient,
-        renderer: k,
+        renderer: y,
         onFilterChange: e.onFilterChange
-      }), g;
-    } catch (c) {
-      throw this.showError(r, (c == null ? void 0 : c.message) || "Failed to load dashboard"), (m = e.onError) == null || m.call(e, (c == null ? void 0 : c.message) || "Failed to load dashboard"), c;
+      }), h;
+    } catch (l) {
+      throw this.showError(r, (l == null ? void 0 : l.message) || "Failed to load dashboard"), (p = e.onError) == null || p.call(e, (l == null ? void 0 : l.message) || "Failed to load dashboard"), l;
     }
   }
   // ── Embed single report (component) ────────────────────────────────────────
@@ -2197,12 +2267,12 @@ class ge {
     `;
   }
 }
-const B = class B extends HTMLElement {
+const q = class q extends HTMLElement {
   constructor() {
     super(...arguments), this.instance = null, this.connected = !1;
   }
   connectedCallback() {
-    this.connected = !0, q(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
+    this.connected = !0, B(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
   }
   disconnectedCallback() {
     var e;
@@ -2213,67 +2283,67 @@ const B = class B extends HTMLElement {
     t === s || !this.connected || ((i = this.instance) == null || i.destroy(), this.instance = null, this.mount());
   }
   async mount() {
-    const e = this.getAttribute("dashboard-id"), t = this.getAttribute("api-key"), s = this.getAttribute("base-url") || "", i = this.getAttribute("user-id") || void 0, r = this.getAttribute("tenant-id") || void 0, a = this.getAttribute("embed-level") || "dashboard", o = this.getAttribute("theme") || "light", l = this.getAttribute("height") || "600px", d = this.getAttribute("page-id") || void 0, h = this.getAttribute("tab-id") || void 0, b = this.getAttribute("hide-filters") === "true", n = this.getAttribute("hide-export") === "true", p = this.getAttribute("hide-global-filters") === "true" || b, f = this.getAttribute("hide-inline-filters") === "true", m = this.getAttribute("hide-text") === "true", c = this.getAttribute("hide-header") === "true", u = this.getAttribute("hide-background") === "true";
+    const e = this.getAttribute("dashboard-id"), t = this.getAttribute("api-key"), s = this.getAttribute("base-url") || "", i = this.getAttribute("user-id") || void 0, r = this.getAttribute("tenant-id") || void 0, a = this.getAttribute("embed-level") || "dashboard", o = this.getAttribute("theme") || "light", c = this.getAttribute("height") || "600px", d = this.getAttribute("page-id") || void 0, b = this.getAttribute("tab-id") || void 0, u = this.getAttribute("hide-filters") === "true", g = this.getAttribute("hide-export") === "true", n = this.getAttribute("hide-global-filters") === "true" || u, f = this.getAttribute("hide-inline-filters") === "true", p = this.getAttribute("hide-text") === "true", l = this.getAttribute("hide-header") === "true", x = this.getAttribute("hide-background") === "true";
     if (!e || !t || !s) {
       this.showError("Missing required attributes: dashboard-id, api-key, base-url");
       return;
     }
-    this.renderRoot.style.height = l, this.renderRoot.className = `ds-embed-root ds-theme-${o}`, this.showLoading();
+    this.renderRoot.style.height = c, this.renderRoot.className = `ds-embed-root ds-theme-${o}`, this.showLoading();
     try {
-      const g = new K(s, t), k = await g.getEmbedToken({
+      const h = new K(s, t), y = await h.getEmbedToken({
         dashboardId: e,
         embedType: "dashboard",
         embedLevel: a,
         userId: i,
         tenantId: r
-      }), T = await g.getDashboardRender(e, k, {
+      }), T = await h.getDashboardRender(e, y, {
         embedLevel: a,
         pageId: d,
-        tabId: h,
+        tabId: b,
         filters: {}
       }), C = new D(this.renderRoot, {
         embedLevel: a,
         theme: o,
         // v1 backward compat
-        hideFilters: p,
-        hideExport: n,
+        hideFilters: n,
+        hideExport: g,
         // v2 visibility
-        hideGlobalFilters: p,
+        hideGlobalFilters: n,
         hideInlineFilters: f,
-        hideText: m,
-        hideHeader: c,
-        hideBackground: u,
+        hideText: p,
+        hideHeader: l,
+        hideBackground: x,
         initialFilters: {},
-        onFetchFilterOptions: ($) => g.getFilterOptions(e, $, k),
-        onFetchTablePage: ($, R, I) => g.getTablePage(e, $, R, I, k),
+        onFetchFilterOptions: ($) => h.getFilterOptions(e, $, y),
+        onFetchTablePage: ($, R, I) => h.getTablePage(e, $, R, I, y),
         onTabSwitch: async ($, R) => {
-          var I, P;
+          var I, L;
           try {
-            const L = await g.getDashboardRender(e, k, {
+            const F = await h.getDashboardRender(e, y, {
               embedLevel: a,
               pageId: $,
               tabId: R,
-              filters: (P = (I = this.instance) == null ? void 0 : I.getActiveFilters()) != null ? P : {}
+              filters: (L = (I = this.instance) == null ? void 0 : I.getActiveFilters()) != null ? L : {}
             });
-            C.update(L);
-          } catch (L) {
-            console.error("Deepspot SDK: tab fetch failed", L);
+            C.update(F);
+          } catch (F) {
+            console.error("Deepspot SDK: tab fetch failed", F);
           }
         }
       });
       C.render(T), this.instance = new E({
         dashboardId: e,
-        token: k,
+        token: y,
         embedLevel: a,
         embedType: "dashboard",
         activePageId: T.activePage,
         activeTabId: T.activeTab,
         activeFilters: {},
-        apiClient: g,
+        apiClient: h,
         renderer: C
       });
-    } catch (g) {
-      this.showError((g == null ? void 0 : g.message) || "Failed to load dashboard");
+    } catch (h) {
+      this.showError((h == null ? void 0 : h.message) || "Failed to load dashboard");
     }
   }
   showLoading() {
@@ -2317,7 +2387,7 @@ const B = class B extends HTMLElement {
     (e = this.instance) == null || e.exportPDF();
   }
 };
-B.observedAttributes = [
+q.observedAttributes = [
   "dashboard-id",
   "api-key",
   "user-id",
@@ -2338,14 +2408,14 @@ B.observedAttributes = [
   "hide-header",
   "hide-background"
 ];
-let j = B;
-customElements.get("deepspot-dashboard") || customElements.define("deepspot-dashboard", j);
+let z = q;
+customElements.get("deepspot-dashboard") || customElements.define("deepspot-dashboard", z);
 const G = class G extends HTMLElement {
   constructor() {
     super(...arguments), this.instance = null, this.isConnected_ = !1;
   }
   connectedCallback() {
-    this.isConnected_ = !0, q(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
+    this.isConnected_ = !0, B(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
   }
   disconnectedCallback() {
     var e;
@@ -2356,31 +2426,31 @@ const G = class G extends HTMLElement {
     t !== s && this.isConnected_ && ((i = this.instance) == null || i.destroy(), this.instance = null, this.mount());
   }
   async mount() {
-    const e = this.getAttribute("dashboard-id"), t = this.getAttribute("component-id"), s = this.getAttribute("api-key"), i = this.getAttribute("base-url") || "", r = this.getAttribute("user-id") || void 0, a = this.getAttribute("tenant-id") || void 0, o = this.getAttribute("theme") || "light", l = this.getAttribute("height") || "400px";
+    const e = this.getAttribute("dashboard-id"), t = this.getAttribute("component-id"), s = this.getAttribute("api-key"), i = this.getAttribute("base-url") || "", r = this.getAttribute("user-id") || void 0, a = this.getAttribute("tenant-id") || void 0, o = this.getAttribute("theme") || "light", c = this.getAttribute("height") || "400px";
     if (!e || !t || !s || !i) {
       this.showError("Missing required attributes: dashboard-id, component-id, api-key, base-url");
       return;
     }
-    this.renderRoot.style.height = l, this.renderRoot.className = `ds-embed-root ds-theme-${o}`, this.showLoading();
+    this.renderRoot.style.height = c, this.renderRoot.className = `ds-embed-root ds-theme-${o}`, this.showLoading();
     try {
-      const d = new K(i, s), h = await d.getEmbedToken({
+      const d = new K(i, s), b = await d.getEmbedToken({
         dashboardId: e,
         embedType: "report",
         componentId: t,
         userId: r,
         tenantId: a
-      }), b = await d.getReportRender(e, t, h, {
+      }), u = await d.getReportRender(e, t, b, {
         filters: {}
-      }), n = new he(this.renderRoot, o);
-      n.render(b, () => {
+      }), g = new he(this.renderRoot, o);
+      g.render(u, () => {
       }), this.instance = new E({
         dashboardId: e,
         componentId: t,
-        token: h,
+        token: b,
         embedType: "report",
         activeFilters: {},
         apiClient: d,
-        renderer: n
+        renderer: g
       });
     } catch (d) {
       this.showError((d == null ? void 0 : d.message) || "Failed to load report");
@@ -2426,10 +2496,10 @@ G.observedAttributes = [
   "theme",
   "height"
 ];
-let z = G;
-customElements.get("deepspot-report") || customElements.define("deepspot-report", z);
-customElements.get("deepspot-dashboard") || customElements.define("deepspot-dashboard", j);
-customElements.get("deepspot-report") || customElements.define("deepspot-report", z);
+let j = G;
+customElements.get("deepspot-report") || customElements.define("deepspot-report", j);
+customElements.get("deepspot-dashboard") || customElements.define("deepspot-dashboard", z);
+customElements.get("deepspot-report") || customElements.define("deepspot-report", j);
 export {
   ge as DeepspotSDK
 };