deepspotscreen-sdk 0.0.3 → 0.1.0

package/dist/{DeepspotSDK-BEdSECUH.js → DeepspotSDK-SyTH97IQ.js}

@@ -1,10 +1,10 @@
-class F {
+class ae {
   constructor(e, t) {
     this.tokenCache = /* @__PURE__ */ new Map(), this.baseUrl = e.replace(/\/$/, ""), this.apiKey = t;
   }
   // ── Embed Token ─────────────────────────────────────────────────────────────
   async getEmbedToken(e) {
-    var i, a, o, d;
+    var i, a, o, l;
     const t = [
       e.dashboardId,
       e.embedType,
@@ -18,7 +18,7 @@ class F {
       {
         dashboardId: e.dashboardId,
         embedType: e.embedType,
-        embedLevel: (d = e.embedLevel) != null ? d : "dashboard",
+        embedLevel: (l = e.embedLevel) != null ? l : "dashboard",
         componentId: e.componentId,
         userId: e.userId,
         tenantId: e.tenantId,
@@ -146,7 +146,7 @@ class F {
     return (t == null ? void 0 : t.data) !== void 0 ? t.data : t;
   }
 }
-class $ {
+class Q {
   constructor(e) {
     var t, s;
     this.destroyed = !1, this.refreshTimer = null, this.opts = e, this.filters = { ...e.activeFilters }, this.activePageId = (t = e.activePageId) != null ? t : "", this.activeTabId = (s = e.activeTabId) != null ? s : "";
@@ -163,6 +163,14 @@ class $ {
   setFilters(e) {
     Object.assign(this.filters, e), this.scheduleRefresh();
   }
+  /** v2 alias for setFilter — sets a global filter and re-fetches data */
+  setGlobalFilter(e, t) {
+    this.setFilter(e, t);
+  }
+  /** v2: clear all active filters and re-fetch data */
+  clearFilters() {
+    this.filters = {}, this.scheduleRefresh();
+  }
   /** Navigate to a different page (dashboard embed only) */
   goToPage(e) {
     this.opts.embedType === "dashboard" && (this.activePageId = e, this.opts.renderer.goToPage(e));
@@ -206,8 +214,8 @@ class $ {
     });
   }
 }
-const A = 24, w = 10, T = 12;
-class S {
+const oe = 24, E = 10, D = 12;
+class V {
   /**
    * @param containerWidth  Actual pixel width of the grid container.
    * @param minY            Minimum y value across all components (normalises
@@ -218,23 +226,23 @@ class S {
   }
   /** Pixel width of one column unit */
   get colWidth() {
-    return this.containerWidth / A;
+    return this.containerWidth / oe;
   }
   /** Convert grid position {x,y,w,h} → CSS absolute pixel values */
   toPx(e) {
-    const t = this.colWidth, s = T / 2;
+    const t = this.colWidth, s = D / 2;
     return {
       left: e.x * t + s,
-      top: (e.y - this.minY) * w + s,
-      width: e.w * t - T,
-      height: e.h * w - T
+      top: (e.y - this.minY) * E + s,
+      width: e.w * t - D,
+      height: e.h * E - D
     };
   }
   /** Total pixel height required to fit all positioned components */
   static totalHeight(e) {
     if (!e.length) return 400;
     const t = Math.min(...e.map((r) => r.y));
-    return (Math.max(...e.map((r) => r.y + r.h)) - t) * w + 40;
+    return (Math.max(...e.map((r) => r.y + r.h)) - t) * E + 40;
   }
   /** Apply absolute positioning styles directly to a DOM element */
   applyStyles(e, t) {
@@ -242,11 +250,11 @@ class S {
     e.style.position = "absolute", e.style.left = `${s.left}px`, e.style.top = `${s.top}px`, e.style.width = `${s.width}px`, e.style.height = `${s.height}px`;
   }
 }
-let k = null;
-function E() {
-  return k || (k = import("./apexcharts.common-k3hLWpB8.js").then((u) => u.a)), k;
+let j = null;
+function de() {
+  return j || (j = import("./apexcharts.common-k3hLWpB8.js").then((w) => w.a)), j;
 }
-class R {
+class se {
   constructor(e) {
     this.chart = null, this.container = e;
   }
@@ -270,7 +278,7 @@ class R {
     if (a)
       try {
         this.chart && this.chart.destroy();
-        const { default: o } = await E();
+        const { default: o } = await de();
         this.chart = new o(a, i), this.chart.render();
       } catch (o) {
         console.error("[Deepspot SDK] ChartRenderer error:", o), a.innerHTML = '<div class="ds-chart-empty">Chart render error</div>';
@@ -307,7 +315,7 @@ class R {
   }
   buildCartesianOptions(e, t, s, r) {
     var n;
-    const { series: i, categories: a, xAxisLabel: o, yAxisLabel: d } = this.extractSeriesAndCategories(e, t), c = e.properties || {}, h = c.colors ? Object.values(c.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"], l = s === "dark";
+    const { series: i, categories: a, xAxisLabel: o, yAxisLabel: l } = this.extractSeriesAndCategories(e, t), d = e.properties || {}, f = d.colors ? Object.values(d.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"], h = s === "dark";
     return {
       chart: {
         type: e.type === "area" ? "area" : e.type === "line" ? "line" : "bar",
@@ -326,23 +334,23 @@ class R {
         title: { text: o },
         labels: {
           rotate: a.length > 8 ? -45 : 0,
-          style: { colors: l ? "#94a3b8" : "#6b7280", fontSize: "11px" }
+          style: { colors: h ? "#94a3b8" : "#6b7280", fontSize: "11px" }
         },
-        axisBorder: { color: l ? "#334155" : "#e5e7eb" },
-        axisTicks: { color: l ? "#334155" : "#e5e7eb" }
+        axisBorder: { color: h ? "#334155" : "#e5e7eb" },
+        axisTicks: { color: h ? "#334155" : "#e5e7eb" }
       },
       yaxis: {
-        title: { text: d },
-        labels: { style: { colors: l ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
+        title: { text: l },
+        labels: { style: { colors: h ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
       },
-      colors: h,
+      colors: f,
       legend: {
-        show: i.length > 1 || ((n = c.showLegend) != null ? n : !1),
+        show: i.length > 1 || ((n = d.showLegend) != null ? n : !1),
         position: "bottom",
-        labels: { colors: l ? "#94a3b8" : "#6b7280" }
+        labels: { colors: h ? "#94a3b8" : "#6b7280" }
       },
       grid: {
-        borderColor: l ? "#1e293b" : "#f3f4f6",
+        borderColor: h ? "#1e293b" : "#f3f4f6",
         strokeDashArray: 4,
         padding: {
           bottom: a.length > 8 ? 60 : 10
@@ -364,10 +372,10 @@ class R {
     };
   }
   buildPieOptions(e, t, s, r) {
-    const i = e.properties || {}, a = t.length > 0 ? Object.keys(t[0]) : [], o = a[0] || "label", d = a[1] || "value", c = t.map((b) => {
-      var p;
-      return String((p = b[o]) != null ? p : "");
-    }), h = t.map((b) => Number(b[d]) || 0), l = s === "dark", n = i.colors ? Object.values(i.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"];
+    const i = e.properties || {}, a = t.length > 0 ? Object.keys(t[0]) : [], o = a[0] || "label", l = a[1] || "value", d = t.map((p) => {
+      var b;
+      return String((b = p[o]) != null ? b : "");
+    }), f = t.map((p) => Number(p[l]) || 0), h = s === "dark", n = i.colors ? Object.values(i.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"];
     return {
       chart: {
         type: e.type,
@@ -377,15 +385,15 @@ class R {
         height: r != null ? r : "100%"
       },
       theme: { mode: s },
-      series: h,
-      labels: c,
+      series: f,
+      labels: d,
       colors: n,
       legend: {
         position: "bottom",
-        labels: { colors: l ? "#94a3b8" : "#6b7280" }
+        labels: { colors: h ? "#94a3b8" : "#6b7280" }
       },
       tooltip: { theme: s },
-      dataLabels: { enabled: c.length <= 8 },
+      dataLabels: { enabled: d.length <= 8 },
       plotOptions: {
         pie: {
           donut: { size: e.type === "donut" ? "65%" : "0%" }
@@ -400,32 +408,32 @@ class R {
       try {
         const n = typeof s.selectedYAxisColumn == "string" ? JSON.parse(s.selectedYAxisColumn) : s.selectedYAxisColumn;
         Array.isArray(n) && (a = n.map(
-          (b) => typeof b == "string" ? { column: b } : b
+          (p) => typeof p == "string" ? { column: p } : p
         ));
       } catch (n) {
       }
     if (!a.length && s.yAxis) {
       const n = s.yAxis;
-      a = (Array.isArray(n) ? n : [n]).map((p) => ({ column: String(p) }));
+      a = (Array.isArray(n) ? n : [n]).map((b) => ({ column: String(b) }));
     }
     !a.length && r.length > 1 && (a = r.slice(1).map((n) => ({ column: n })));
     const o = t.map((n) => {
-      var b;
-      return String((b = n[i]) != null ? b : "");
-    }), d = t.length > 0 ? Object.keys(t[0]) : [], c = a.map((n) => {
-      const b = d.includes(n.column) ? n.column : null, p = b ? null : d.find((g) => g.includes(n.column) || n.column.includes(g)), m = !b && !p ? d.find((g) => {
+      var p;
+      return String((p = n[i]) != null ? p : "");
+    }), l = t.length > 0 ? Object.keys(t[0]) : [], d = a.map((n) => {
+      const p = l.includes(n.column) ? n.column : null, b = p ? null : l.find((u) => u.includes(n.column) || n.column.includes(u)), x = !p && !b ? l.find((u) => {
         var y;
-        return g !== i && !isNaN(Number((y = t[0]) == null ? void 0 : y[g]));
-      }) : null, f = b || p || m || n.column;
+        return u !== i && !isNaN(Number((y = t[0]) == null ? void 0 : y[u]));
+      }) : null, c = p || b || x || n.column;
       return {
         name: n.label || n.column.replace(/_/g, " "),
-        data: t.map((g) => {
-          const y = g[f];
+        data: t.map((u) => {
+          const y = u[c];
           return y != null ? Number(y) : null;
         })
       };
-    }), h = s.xAxisLabel || i.replace(/_/g, " "), l = s.yAxisLabel || (c.length === 1 ? c[0].name : "Values");
-    return { series: c, categories: o, xAxisLabel: h, yAxisLabel: l };
+    }), f = s.xAxisLabel || i.replace(/_/g, " "), h = s.yAxisLabel || (d.length === 1 ? d[0].name : "Values");
+    return { series: d, categories: o, xAxisLabel: f, yAxisLabel: h };
   }
   renderEmpty(e) {
     this.container.innerHTML = `
@@ -436,18 +444,18 @@ class R {
     `;
   }
 }
-class L {
+class re {
   constructor() {
     this.columns = [], this.allData = [], this.currentRows = [], this.totalRows = 0, this.currentPage = 1, this.currentPageSize = 10, this.searchTerm = "", this.isLoading = !1;
   }
   // ── Public API ─────────────────────────────────────────────────────────────
   render(e, t, s, r) {
-    var h;
+    var f;
     this.container = e, this.component = t, this.fetchPage = r, this.searchTerm = "", this.currentPage = 1, this.currentPageSize = 10;
     const i = s && !Array.isArray(s) && "rows" in s;
     if (i) {
-      const l = s;
-      this.currentRows = l.rows, this.allData = [], this.totalRows = l.total, this.currentPage = l.page, this.currentPageSize = l.pageSize;
+      const h = s;
+      this.currentRows = h.rows, this.allData = [], this.totalRows = h.total, this.currentPage = h.page, this.currentPageSize = h.pageSize;
     } else
       this.allData = s || [], this.currentRows = [], this.totalRows = this.allData.length, this.currentPage = 1;
     if (i && s.rows.length === 0 && s.total === 0 || !i && this.allData.length === 0) {
@@ -462,18 +470,18 @@ class L {
       `;
       return;
     }
-    const a = i ? s.rows[0] : this.allData[0], o = a ? Object.keys(a) : [], d = ((h = t.properties) == null ? void 0 : h.columns) || [], c = d.length ? d.filter((l) => o.includes(l)) : [];
-    this.columns = c.length ? c : o, this.paint();
+    const a = i ? s.rows[0] : this.allData[0], o = a ? Object.keys(a) : [], l = ((f = t.properties) == null ? void 0 : f.columns) || [], d = l.length ? l.filter((h) => o.includes(h)) : [];
+    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)), r = (this.currentPage - 1) * this.currentPageSize + 1, i = this.fetchPage ? Math.min(r - 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, b) => {
-      const p = this.columns.map((m) => {
-        const f = n[m];
-        return `<td title="${this.escape(String(f != null ? f : ""))}">${this.escape(this.formatValue(f))}</td>`;
+    const { rows: e, startNum: t } = this.getPageRows(), s = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), r = (this.currentPage - 1) * this.currentPageSize + 1, i = this.fetchPage ? Math.min(r - 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 b = this.columns.map((x) => {
+        const c = n[x];
+        return `<td title="${this.escape(String(c != null ? c : ""))}">${this.escape(this.formatValue(c))}</td>`;
       }).join("");
-      return `<tr><td class="ds-table-sno">${t + b}</td>${p}</tr>`;
-    }).join(""), d = this.currentPageSize, c = [10, 25, 50, 100].map((n) => `<option value="${n}"${n === d ? " selected" : ""}>${n}</option>`).join(""), h = this.currentPage <= 1, l = this.currentPage >= s;
+      return `<tr><td class="ds-table-sno">${t + p}</td>${b}</tr>`;
+    }).join(""), l = this.currentPageSize, d = [10, 25, 50, 100].map((n) => `<option value="${n}"${n === l ? " selected" : ""}>${n}</option>`).join(""), f = this.currentPage <= 1, h = this.currentPage >= s;
     this.container.innerHTML = `
       <div class="ds-table-card">
         <div class="ds-table-header-row">
@@ -492,14 +500,14 @@ class L {
           <div class="ds-table-info">
             <span>${r.toLocaleString()}–${i.toLocaleString()} of ${this.totalRows.toLocaleString()}</span>
             <span class="ds-table-rows-label">Rows:</span>
-            <select class="ds-table-page-size">${c}</select>
+            <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" ${f ? "disabled" : ""}>&#171;</button>
+            <button class="ds-table-pg-btn" data-action="prev"  ${f ? "disabled" : ""}>Previous</button>
             <span class="ds-table-pg-info">Page ${this.currentPage} of ${s}</span>
-            <button class="ds-table-pg-btn" data-action="next" ${l ? "disabled" : ""}>Next</button>
-            <button class="ds-table-pg-btn" data-action="last" ${l ? "disabled" : ""}>&#187;</button>
+            <button class="ds-table-pg-btn" data-action="next" ${h ? "disabled" : ""}>Next</button>
+            <button class="ds-table-pg-btn" data-action="last" ${h ? "disabled" : ""}>&#187;</button>
           </div>
         </div>
         ${this.isLoading ? '<div class="ds-table-loading-overlay"><div class="ds-embed-spinner"></div></div>' : ""}
@@ -566,26 +574,26 @@ class L {
     return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
 }
-class C {
+class ie {
   render(e, t, s) {
     const r = t.properties || {};
     let i = null;
     if (s && s.length > 0) {
-      const b = s[0], p = r.metric || Object.keys(b)[0], m = b[p];
-      if (m !== void 0)
-        i = m;
+      const b = s[0], x = r.metric || Object.keys(b)[0], c = b[x];
+      if (c !== void 0)
+        i = c;
       else {
-        const f = Object.keys(b).find(
-          (g) => g.includes(p) || p.includes(g)
+        const u = Object.keys(b).find(
+          (y) => y.includes(x) || x.includes(y)
         );
-        i = b[f != null ? f : Object.keys(b)[0]];
+        i = b[u != null ? u : Object.keys(b)[0]];
       }
     }
-    const a = this.formatValue(i, r), o = r.backgroundColor || "", d = r.textColor || "", c = t.title || "", h = o ? `background:${o};border-color:${o};` : "", l = d ? `color:${d};` : "", n = d ? `color:${d};opacity:0.7;` : "";
+    const a = this.formatValue(i, r), o = r.styleConfig || {}, l = o.backgroundColor || r.backgroundColor || "", d = o.color || o.textColor || r.textColor || "", f = t.title || "", h = l ? `background:${l};border-color:${l};` : "", n = d ? `color:${d};` : "", p = d ? `color:${d};opacity:0.7;` : "";
     e.innerHTML = `
       <div class="ds-card"${h ? ` style="${h}"` : ""}>
-        <div class="ds-card-label"${n ? ` style="${n}"` : ""}>${c}</div>
-        <div class="ds-card-value"${l ? ` style="${l}"` : ""}>${a}</div>
+        <div class="ds-card-label"${p ? ` style="${p}"` : ""}>${f}</div>
+        <div class="ds-card-value"${n ? ` style="${n}"` : ""}>${a}</div>
       </div>
     `;
   }
@@ -598,7 +606,7 @@ class C {
     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), `${r}${a}${i}`;
   }
 }
-class D {
+class ne {
   constructor(e, t) {
     this.currentValues = {}, this.container = e, this.onFilterChange = t;
   }
@@ -696,16 +704,16 @@ class D {
   attachListeners(e) {
     const t = {};
     this.container.querySelectorAll("[data-filter-id]").forEach((s) => {
-      const r = s.dataset.filterId, i = s.dataset.datePart, a = e.find((d) => d.filterId === r), o = () => {
-        let d;
+      const r = s.dataset.filterId, i = s.dataset.datePart, a = e.find((l) => l.filterId === r), o = () => {
+        let l;
         if ((a == null ? void 0 : a.type) === "date-range" && i)
-          t[r] = t[r] || {}, t[r][i] = s.value, d = { ...t[r] };
+          t[r] = t[r] || {}, t[r][i] = s.value, l = { ...t[r] };
         else if ((a == null ? void 0 : a.type) === "multi-select") {
-          const c = s;
-          d = Array.from(c.selectedOptions).map((h) => h.value).filter(Boolean);
+          const d = s;
+          l = Array.from(d.selectedOptions).map((f) => f.value).filter(Boolean);
         } else
-          d = s.value;
-        this.currentValues[r] = d, this.onFilterChange(r, d);
+          l = s.value;
+        this.currentValues[r] = l, this.onFilterChange(r, l);
       };
       s.addEventListener(
         (a == null ? void 0 : a.type) === "text-input" ? "input" : "change",
@@ -714,15 +722,15 @@ class D {
     });
   }
   escAttr(e) {
-    return e.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+    return String(e != null ? e : "").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
   }
   escText(e) {
-    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return String(e != null ? e : "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 }
-class z {
+const A = class A {
   constructor(e, t) {
-    this.activePageId = "", this.activeTabId = "", this.activeFilters = {}, this.chartRenderers = /* @__PURE__ */ new Map(), this.tableRenderer = new L(), this.cardRenderer = new C(), 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 re(), this.cardRenderer = new ie(), this.isLoadingTab = !1, this.root = e, this.opts = t, this.activeFilters = { ...t.initialFilters };
   }
   // ── Initial full render ───────────────────────────────────────────────────
   render(e) {
@@ -744,45 +752,45 @@ class z {
     this.chartRenderers.forEach((e) => e.destroy()), this.chartRenderers.clear(), this.root.innerHTML = "";
   }
   exportPDF() {
-    var n, b;
+    var n, p;
     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 r = this.root.querySelector("#ds-canvas"), i = (n = r == null ? void 0 : r.style.height) != null ? n : "", a = (b = r == null ? void 0 : r.style.overflow) != null ? b : "";
+    const r = this.root.querySelector("#ds-canvas"), i = (n = r == null ? void 0 : r.style.height) != null ? n : "", a = (p = r == null ? void 0 : r.style.overflow) != null ? p : "";
     r && (r.style.height = "auto", r.style.overflow = "visible");
-    const o = Array.from(e.querySelectorAll(".ds-table-scroll")), d = o.map((p) => ({
-      el: p,
-      overflow: p.style.overflow,
-      maxHeight: p.style.maxHeight,
-      height: p.style.height
+    const o = Array.from(e.querySelectorAll(".ds-table-scroll")), l = o.map((b) => ({
+      el: b,
+      overflow: b.style.overflow,
+      maxHeight: b.style.maxHeight,
+      height: b.style.height
     }));
-    o.forEach((p) => {
-      p.style.overflow = "visible", p.style.maxHeight = "none", p.style.height = "auto";
+    o.forEach((b) => {
+      b.style.overflow = "visible", b.style.maxHeight = "none", b.style.height = "auto";
     });
-    const c = e.offsetWidth, h = parseInt(e.style.height, 10) || e.offsetHeight, l = e.getBoundingClientRect().top + window.scrollY;
+    const d = e.offsetWidth, f = parseInt(e.style.height, 10) || e.offsetHeight, h = e.getBoundingClientRect().top + window.scrollY;
     import("./html2canvas.esm-CzwMv54K.js").then(
-      ({ default: p }) => p(e, {
+      ({ default: b }) => b(e, {
         scale: 2,
         useCORS: !0,
         allowTaint: !0,
         logging: !1,
-        width: c,
-        height: h,
-        windowWidth: c,
-        windowHeight: h,
+        width: d,
+        height: f,
+        windowWidth: d,
+        windowHeight: f,
         scrollX: 0,
-        scrollY: -l
-      }).then((m) => {
-        this.root.style.height = t, this.root.style.overflow = s, r && (r.style.height = i, r.style.overflow = a), d.forEach(({ el: f, overflow: g, maxHeight: y, height: v }) => {
-          f.style.overflow = g, f.style.maxHeight = y, f.style.height = v;
-        }), import("./jspdf.es.min-Ge0fRUwj.js").then((f) => f.j).then(({ jsPDF: f }) => {
-          const g = m.width / 2, y = m.height / 2, v = new f({
-            orientation: g >= y ? "landscape" : "portrait",
+        scrollY: -h
+      }).then((x) => {
+        this.root.style.height = t, this.root.style.overflow = s, r && (r.style.height = i, r.style.overflow = a), l.forEach(({ el: c, overflow: u, maxHeight: y, height: T }) => {
+          c.style.overflow = u, c.style.maxHeight = y, c.style.height = T;
+        }), import("./jspdf.es.min-Ge0fRUwj.js").then((c) => c.j).then(({ jsPDF: c }) => {
+          const u = x.width / 2, y = x.height / 2, T = new c({
+            orientation: u >= y ? "landscape" : "portrait",
             unit: "px",
-            format: [g, y]
+            format: [u, y]
           });
-          v.addImage(m.toDataURL("image/png"), "PNG", 0, 0, g, y), v.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
+          T.addImage(x.toDataURL("image/png"), "PNG", 0, 0, u, y), T.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
         });
       })
     );
@@ -793,8 +801,8 @@ class z {
       if (!(t != null && t.length) || !["table", "bar", "line", "area"].includes(e.type)) return;
       const s = Object.keys(t[0]), r = [s.join(","), ...t.map(
         (a) => s.map((o) => {
-          var d;
-          return JSON.stringify((d = a[o]) != null ? d : "");
+          var l;
+          return JSON.stringify((l = a[o]) != null ? l : "");
         }).join(",")
       )].join(`
 `);
@@ -825,10 +833,12 @@ class z {
       </div>
     `, this.root.style.position = "relative", this.opts.hideExport || this.buildExportToolbar();
     const i = this.root.querySelector("#ds-filter-container");
-    this.filterRenderer = new D(i, (a, o) => {
-      var h, l;
-      const d = this.renderData.filters.find((n) => n.filterId === a), c = (d == null ? void 0 : d.applyToField) || a;
-      this.activeFilters[c] = o, (l = (h = this.opts).onFilterChange) == null || l.call(h, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
+    this.filterRenderer = new ne(i, (a, o) => {
+      var h, n, p, b, x;
+      const l = (h = this.renderData.filters) == null ? void 0 : h.find((c) => c.filterId === a), d = (n = this.renderData.components) == null ? void 0 : n.find(
+        (c) => c.type === "inline-filter" && c.id === a
+      ), f = (l == null ? void 0 : l.applyToField) || ((p = d == null ? void 0 : d.properties) == null ? void 0 : p.applyToField) || a;
+      this.activeFilters[f] = o, (x = (b = this.opts).onFilterChange) == null || x.call(b, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
     });
   }
   buildExportToolbar() {
@@ -876,7 +886,6 @@ class z {
       });
     });
   }
-  /** Optimistically highlight new tab + show spinner, then fire callback */
   triggerTabSwitch(e, t) {
     this.isLoadingTab || !e || !t || (this.isLoadingTab = !0, this.activePageId = e, this.activeTabId = t, this.syncNavHighlight(), this.showTabSpinner(), this.opts.onTabSwitch(e, t));
   }
@@ -887,18 +896,42 @@ class z {
     const e = this.root.querySelector("#ds-tab-nav");
     e && this.buildTabButtons(e, this.activePageId);
   }
-  // ── Filter bar ────────────────────────────────────────────────────────────
+  // ── Global Filter bar ─────────────────────────────────────────────────────
+  // Merges global filters (from renderData.filters[]) with inline-filter
+  // components (type='inline-filter' in renderData.components[]).
+  // Inline-filter components are NOT rendered in the grid — they appear here.
   renderFilterBar() {
-    this.opts.hideFilters || (this.filterRenderer.render(this.renderData.filters, this.activeFilters), this.fetchFilterOptions());
+    if (this.opts.hideGlobalFilters) return;
+    const e = [
+      ...this.renderData.filters || [],
+      ...this.inlineFiltersAsDefinitions()
+    ];
+    this.filterRenderer.render(e, this.activeFilters), this.fetchFilterOptions();
   }
   updateFilterBar() {
-    this.opts.hideFilters || (this.filterRenderer.render(this.renderData.filters, this.activeFilters), this.fetchFilterOptions());
+    if (this.opts.hideGlobalFilters) return;
+    const e = [
+      ...this.renderData.filters || [],
+      ...this.inlineFiltersAsDefinitions()
+    ];
+    this.filterRenderer.render(e, this.activeFilters), this.fetchFilterOptions();
+  }
+  /** 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, r, i, a, o, l, d;
+      return {
+        filterId: e.id,
+        label: ((t = e.properties) == null ? void 0 : t.filterLabel) || e.title || "",
+        type: ((s = e.properties) == null ? void 0 : s.filterType) || "dropdown",
+        options: ((r = e.properties) == null ? void 0 : r.filterOptions) || ((i = e.properties) == null ? void 0 : i.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,
+        applyToField: ((d = e.properties) == null ? void 0 : d.applyToField) || e.id
+      };
+    });
   }
-  /**
-   * For every dropdown / multi-select filter whose options array is empty,
-   * call onFetchFilterOptions(filterId) and populate the select element.
-   * Mirrors: GET /dashboard-builder/{dashboardId}/filters/{filterId}/options
-   */
   async fetchFilterOptions() {
     if (this.opts.onFetchFilterOptions)
       for (const e of this.renderData.filters) {
@@ -912,47 +945,124 @@ class z {
     this.hideTabSpinner();
     const e = this.root.querySelector("#ds-grid");
     if (!e) return;
-    this.chartRenderers.forEach((c) => c.destroy()), this.chartRenderers.clear();
-    const t = this.renderData.components;
+    if (!this.opts.hideBackground) {
+      const d = this.root.querySelector("#ds-canvas"), f = this.renderData.dashboard.pages.find(
+        (n) => n.pageId === this.activePageId
+      ), h = (f == null ? void 0 : f.backgroundColor) || "";
+      d && (d.style.background = h), this.root.style.background = h;
+    }
+    this.chartRenderers.forEach((d) => d.destroy()), this.chartRenderers.clear();
+    const t = (this.renderData.components || []).filter(
+      (d) => d.type !== "inline-filter"
+    );
     if (!t.length) {
       e.style.height = "200px", e.innerHTML = '<div class="ds-chart-empty" style="padding-top:80px;">No components on this tab.</div>';
       return;
     }
-    const s = e.clientWidth || this.root.clientWidth || 800, r = t.map((c) => c.position), i = r.length ? Math.min(...r.map((c) => c.y)) : 0, a = new S(s, i);
-    e.style.height = `${S.totalHeight(r)}px`, e.innerHTML = "";
-    const o = 36, d = [];
-    t.forEach((c) => {
-      const h = document.createElement("div");
-      h.className = "ds-component-wrapper", h.dataset.componentId = c.id, a.applyStyles(h, c.position), e.appendChild(h);
-      const l = a.toPx(c.position), n = Math.max(50, l.height - o);
-      d.push(this.renderComponent(h, c, n));
-    }), Promise.all(d).catch(() => {
+    const s = e.clientWidth || this.root.clientWidth || 800, r = t.map((d) => d.position), i = r.length ? Math.min(...r.map((d) => d.y)) : 0, a = new V(s, i);
+    e.style.height = `${V.totalHeight(r)}px`, e.innerHTML = "";
+    const o = 36, l = [];
+    t.forEach((d) => {
+      var p, b, x;
+      const f = document.createElement("div");
+      if (f.className = "ds-component-wrapper", f.dataset.componentId = d.id, a.applyStyles(f, d.position), !this.opts.hideBackground) {
+        const c = ((b = (p = d.properties) == null ? void 0 : p.styleConfig) == null ? void 0 : b.backgroundColor) || ((x = d.properties) == null ? void 0 : x.backgroundColor);
+        c && (f.style.background = c);
+      }
+      e.appendChild(f);
+      const h = a.toPx(d.position), n = Math.max(50, h.height - o);
+      l.push(
+        this.renderComponent(f, d, n).catch((c) => {
+          console.error(`[Deepspot SDK] Failed to render component ${d.id} (${d.type}):`, c), f.innerHTML = `<div style="padding:8px;color:#ef4444;font-size:12px;">⚠ ${d.type} render error</div>`;
+        })
+      );
+    }), Promise.all(l).catch(() => {
     });
   }
+  // ── Component renderer switch ─────────────────────────────────────────────
   async renderComponent(e, t, s) {
-    var a, o;
+    var a, o, l, d, f, h, n, p, b, x, c, u, y, T, $, I, C, R, L, P, O, H, M, N, K, q, B, G, W, U, Y, _, J, X, Z;
     const r = this.renderData.data[t.id] || [], i = this.opts.theme;
     switch (t.type) {
       case "bar":
       case "line":
       case "pie":
       case "donut":
-      case "area": {
-        const d = new R(e);
-        await d.render(t, r, i, s), this.chartRenderers.set(t.id, d);
+      case "area":
+      case "scatter":
+      case "stacked-bar": {
+        const v = new se(e);
+        await v.render(t, r, i, s), this.chartRenderers.set(t.id, v);
         break;
       }
       case "table": {
-        const d = this.opts.onFetchTablePage ? (c, h) => this.opts.onFetchTablePage(t.id, c, h) : void 0;
-        this.tableRenderer.render(e, t, r, d);
+        const v = this.opts.onFetchTablePage ? (m, k) => this.opts.onFetchTablePage(t.id, m, k) : void 0;
+        this.tableRenderer.render(e, t, r, v);
         break;
       }
       case "number-card":
         this.cardRenderer.render(e, t, r);
         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 || "", m = ((d = t.properties) == null ? void 0 : d.styleConfig) || {}, k = this.scToInlineStyle(m), g = this.opts.hideBackground ? {} : this.parseTwColor((h = (f = t.properties) == null ? void 0 : f.color) != null ? h : ""), S = [[
+          g.bg ? `background:${g.bg}` : "",
+          g.text ? `color:${g.text}` : ""
+        ].filter(Boolean).join(";"), k].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-heading" style="${S}">${v}</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) || ((b = t.properties) == null ? void 0 : b.content) || t.title || "", m = ((x = t.properties) == null ? void 0 : x.styleConfig) || {}, k = this.scToInlineStyle(m), g = this.opts.hideBackground ? {} : this.parseTwColor((u = (c = t.properties) == null ? void 0 : c.color) != null ? u : ""), S = [[
+          g.bg ? `background:${g.bg}` : "",
+          g.text ? `color:${g.text}` : ""
+        ].filter(Boolean).join(";"), k].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-subheading" style="${S}">${v}</div>`;
+        break;
+      }
+      case "text-body": {
+        if (this.opts.hideText) break;
+        const v = ((T = (y = t.properties) == null ? void 0 : y.data) == null ? void 0 : T.dataContent) || (($ = t.properties) == null ? void 0 : $.content) || "", m = ((I = t.properties) == null ? void 0 : I.styleConfig) || {}, k = this.scToInlineStyle(m), g = this.opts.hideBackground ? {} : this.parseTwColor((R = (C = t.properties) == null ? void 0 : C.color) != null ? R : ""), S = [[
+          g.bg ? `background:${g.bg}` : "",
+          g.text ? `color:${g.text}` : ""
+        ].filter(Boolean).join(";"), k].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-body" style="${S}">${v}</div>`;
+        break;
+      }
+      case "text-box": {
+        if (this.opts.hideText) break;
+        const v = ((P = (L = t.properties) == null ? void 0 : L.data) == null ? void 0 : P.dataContent) || ((O = t.properties) == null ? void 0 : O.content) || "", m = ((H = t.properties) == null ? void 0 : H.styleConfig) || {}, k = this.scToInlineStyle(m), g = this.opts.hideBackground ? {} : this.parseTwColor((N = (M = t.properties) == null ? void 0 : M.color) != null ? N : ""), S = [[
+          g.bg ? `background:${g.bg}` : "",
+          g.text ? `color:${g.text}` : ""
+        ].filter(Boolean).join(";"), k].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-box" style="${S}">${v}</div>`;
+        break;
+      }
       case "text": {
-        const d = Object.entries(((a = t.properties) == null ? void 0 : a.style) || {}).map(([c, h]) => `${c}:${h}`).join(";");
-        e.innerHTML = `<div style="${d};padding:8px;">${((o = t.properties) == null ? void 0 : o.content) || ""}</div>`;
+        if (this.opts.hideText) break;
+        const v = ((q = (K = t.properties) == null ? void 0 : K.data) == null ? void 0 : q.dataContent) || ((B = t.properties) == null ? void 0 : B.content) || "", m = ((G = t.properties) == null ? void 0 : G.styleConfig) || {}, k = this.scToInlineStyle(m), g = this.opts.hideBackground ? {} : this.parseTwColor((U = (W = t.properties) == null ? void 0 : W.color) != null ? U : ""), S = [[
+          g.bg ? `background:${g.bg}` : "",
+          g.text ? `color:${g.text}` : ""
+        ].filter(Boolean).join(";"), k].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-body" style="${S}">${v}</div>`;
+        break;
+      }
+      case "header": {
+        if (this.opts.hideHeader) break;
+        const v = ((_ = (Y = t.properties) == null ? void 0 : Y.data) == null ? void 0 : _.dataContent) || ((J = t.properties) == null ? void 0 : J.content) || t.title || "", m = ((X = t.properties) == null ? void 0 : X.styleConfig) || {}, k = !this.opts.hideBackground && m.backgroundColor ? `background:${m.backgroundColor};` : "", g = m.color ? `color:${m.color};` : m.textColor ? `color:${m.textColor};` : "";
+        e.innerHTML = `
+          <div class="ds-header-component" style="${k}${g}">
+            <div class="ds-header-content">${v}</div>
+          </div>`;
+        break;
+      }
+      case "section": {
+        const v = ((Z = t.properties) == null ? void 0 : Z.styleConfig) || {}, m = !this.opts.hideBackground && v.backgroundColor ? `background:${v.backgroundColor};` : "";
+        e.innerHTML = `
+          <div class="ds-section-wrapper" style="${m}">
+            ${t.title ? `<div class="ds-section-title">${t.title}</div>` : ""}
+          </div>`;
         break;
       }
     }
@@ -967,14 +1077,86 @@ class z {
     e && (e.style.display = "none"), t && (t.style.opacity = "1");
   }
   // ── Helpers ───────────────────────────────────────────────────────────────
+  /**
+   * Convert a styleConfig object to an inline CSS string.
+   * Maps camelCase keys (e.g. fontSize) to kebab-case CSS properties.
+   * Skips backgroundColor — that is applied to the wrapper div separately
+   * (so it can support CSS gradients via `background` shorthand).
+   */
+  scToInlineStyle(e) {
+    const t = /* @__PURE__ */ new Set(["backgroundColor"]), s = (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase();
+    return Object.entries(e).filter(([r, i]) => !t.has(r) && i != null && i !== "").map(([r, i]) => `${s(r)}:${i}`).join(";");
+  }
+  /**
+   * Parse a Tailwind utility class string (e.g. "bg-violet-100 text-violet-600")
+   * into plain CSS hex values. Used for text components whose builder color
+   * is stored as Tailwind class names rather than raw CSS.
+   */
+  parseTwColor(e) {
+    if (!e) return {};
+    const t = {};
+    for (const s of e.split(/\s+/)) {
+      if (!s) continue;
+      if (s === "bg-white") {
+        t.bg = "#ffffff";
+        continue;
+      }
+      if (s === "bg-black") {
+        t.bg = "#000000";
+        continue;
+      }
+      if (s === "bg-transparent") {
+        t.bg = "transparent";
+        continue;
+      }
+      if (s === "text-white") {
+        t.text = "#ffffff";
+        continue;
+      }
+      if (s === "text-black") {
+        t.text = "#000000";
+        continue;
+      }
+      const r = /^(bg|text)-([a-z]+)-(\d+)$/.exec(s);
+      if (!r) continue;
+      const i = A.TW_PALETTE[r[2]], a = i == null ? void 0 : i[Number(r[3])];
+      a && (r[1] === "bg" && (t.bg = a), r[1] === "text" && (t.text = a));
+    }
+    return t;
+  }
   getTabsForPage(e) {
     var t, s;
     return (s = (t = this.renderData.dashboard.pages.find((r) => r.pageId === e)) == null ? void 0 : t.tabs) != null ? s : [];
   }
-}
-class O {
+};
+A.TW_PALETTE = {
+  slate: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a" },
+  gray: { 50: "#f9fafb", 100: "#f3f4f6", 200: "#e5e7eb", 300: "#d1d5db", 400: "#9ca3af", 500: "#6b7280", 600: "#4b5563", 700: "#374151", 800: "#1f2937", 900: "#111827" },
+  zinc: { 50: "#fafafa", 100: "#f4f4f5", 200: "#e4e4e7", 300: "#d4d4d8", 400: "#a1a1aa", 500: "#71717a", 600: "#52525b", 700: "#3f3f46", 800: "#27272a", 900: "#18181b" },
+  neutral: { 50: "#fafafa", 100: "#f5f5f5", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#a3a3a3", 500: "#737373", 600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717" },
+  stone: { 50: "#fafaf9", 100: "#f5f5f4", 200: "#e7e5e4", 300: "#d6d3d1", 400: "#a8a29e", 500: "#78716c", 600: "#57534e", 700: "#44403c", 800: "#292524", 900: "#1c1917" },
+  red: { 50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d" },
+  orange: { 50: "#fff7ed", 100: "#ffedd5", 200: "#fed7aa", 300: "#fdba74", 400: "#fb923c", 500: "#f97316", 600: "#ea580c", 700: "#c2410c", 800: "#9a3412", 900: "#7c2d12" },
+  amber: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f" },
+  yellow: { 50: "#fefce8", 100: "#fef9c3", 200: "#fef08a", 300: "#fde047", 400: "#facc15", 500: "#eab308", 600: "#ca8a04", 700: "#a16207", 800: "#854d0e", 900: "#713f12" },
+  lime: { 50: "#f7fee7", 100: "#ecfccb", 200: "#d9f99d", 300: "#bef264", 400: "#a3e635", 500: "#84cc16", 600: "#65a30d", 700: "#4d7c0f", 800: "#3f6212", 900: "#365314" },
+  green: { 50: "#f0fdf4", 100: "#dcfce7", 200: "#bbf7d0", 300: "#86efac", 400: "#4ade80", 500: "#22c55e", 600: "#16a34a", 700: "#15803d", 800: "#166534", 900: "#14532d" },
+  emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b" },
+  teal: { 50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4", 400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e", 800: "#115e59", 900: "#134e4a" },
+  cyan: { 50: "#ecfeff", 100: "#cffafe", 200: "#a5f3fc", 300: "#67e8f9", 400: "#22d3ee", 500: "#06b6d4", 600: "#0891b2", 700: "#0e7490", 800: "#155e75", 900: "#164e63" },
+  sky: { 50: "#f0f9ff", 100: "#e0f2fe", 200: "#bae6fd", 300: "#7dd3fc", 400: "#38bdf8", 500: "#0ea5e9", 600: "#0284c7", 700: "#0369a1", 800: "#075985", 900: "#0c4a6e" },
+  blue: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a" },
+  indigo: { 50: "#eef2ff", 100: "#e0e7ff", 200: "#c7d2fe", 300: "#a5b4fc", 400: "#818cf8", 500: "#6366f1", 600: "#4f46e5", 700: "#4338ca", 800: "#3730a3", 900: "#312e81" },
+  violet: { 50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd", 400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9", 800: "#5b21b6", 900: "#4c1d95" },
+  purple: { 50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 300: "#d8b4fe", 400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7e22ce", 800: "#6b21a8", 900: "#581c87" },
+  fuchsia: { 50: "#fdf4ff", 100: "#fae8ff", 200: "#f5d0fe", 300: "#f0abfc", 400: "#e879f9", 500: "#d946ef", 600: "#c026d3", 700: "#a21caf", 800: "#86198f", 900: "#701a75" },
+  pink: { 50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4", 400: "#f472b6", 500: "#ec4899", 600: "#db2777", 700: "#be185d", 800: "#9d174d", 900: "#831843" },
+  rose: { 50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 300: "#fda4af", 400: "#fb7185", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c", 800: "#9f1239", 900: "#881337" }
+};
+let z = A;
+class le {
   constructor(e, t) {
-    this.chartRenderer = null, this.tableRenderer = new L(), this.cardRenderer = new C(), this.root = e, this.theme = t;
+    this.chartRenderer = null, this.tableRenderer = new re(), this.cardRenderer = new ie(), this.root = e, this.theme = t;
   }
   render(e, t) {
     const s = e.components[0];
@@ -1020,7 +1202,7 @@ class O {
       case "pie":
       case "donut":
       case "area":
-        (s = this.chartRenderer) == null || s.destroy(), this.chartRenderer = new R(this.root), this.chartRenderer.render(e, t, this.theme);
+        (s = this.chartRenderer) == null || s.destroy(), this.chartRenderer = new se(this.root), this.chartRenderer.render(e, t, this.theme);
         break;
       case "table":
         this.tableRenderer.render(this.root, e, t);
@@ -1033,12 +1215,12 @@ class O {
     }
   }
 }
-let I = !1;
-function j() {
-  if (!(I || typeof document == "undefined")) {
-    I = !0;
+let ee = !1;
+function ce() {
+  if (!(ee || typeof document == "undefined")) {
+    ee = !0;
     try {
-      const u = `/* ─────────────────────────────────────────────────────────────────────────────
+      const w = `/* ─────────────────────────────────────────────────────────────────────────────
    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.
@@ -1063,15 +1245,18 @@ function j() {
   height: 100%;
   overflow: auto;
   position: relative;
+  /* Default white background — overridden by page backgroundColor from publish page */
+  background: #ffffff;
+  color: #111827;
 }
 
 .ds-embed-root.ds-theme-light {
-  background: #ffffff;
+  /* No forced background — let component styleConfig backgrounds show through */
   color: #111827;
 }
 
 .ds-embed-root.ds-theme-dark {
-  background: #0f172a;
+  /* No forced background — let component styleConfig backgrounds show through */
   color: #f1f5f9;
 }
 
@@ -1646,6 +1831,179 @@ function j() {
   color: #f1f5f9;
 }
 
+/* ── v2: Text / content components ────────────────────────────────────────── */
+
+.ds-text-heading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 8px 12px;
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.3;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-text-heading {
+  color: #f1f5f9;
+}
+
+.ds-text-subheading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 6px 12px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #374151;
+  line-height: 1.4;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-text-subheading {
+  color: #cbd5e1;
+}
+
+.ds-text-body {
+  width: 100%;
+  height: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #374151;
+  line-height: 1.6;
+  overflow: auto;
+}
+
+.ds-theme-dark .ds-text-body {
+  color: #94a3b8;
+}
+
+.ds-text-box {
+  width: 100%;
+  height: 100%;
+  padding: 10px 14px;
+  font-size: 13px;
+  color: #374151;
+  line-height: 1.6;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f9fafb;
+  overflow: auto;
+}
+
+.ds-theme-dark .ds-text-box {
+  color: #cbd5e1;
+  border-color: #334155;
+  background: #1e293b;
+}
+
+/* ── v2: Header component ──────────────────────────────────────────────────── */
+
+.ds-header-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  background: #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-header-component {
+  background: #1e293b;
+  border-bottom-color: #334155;
+}
+
+.ds-header-content {
+  font-size: 18px;
+  font-weight: 700;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-theme-dark .ds-header-content {
+  color: #f1f5f9;
+}
+
+/* ── v2: Section container ─────────────────────────────────────────────────── */
+
+.ds-section-wrapper {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #f9fafb;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-section-wrapper {
+  border-color: #334155;
+  background: #1e293b;
+}
+
+.ds-section-title {
+  padding: 8px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6b7280;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.ds-theme-dark .ds-section-title {
+  color: #94a3b8;
+  border-bottom-color: #334155;
+}
+
+/* ── v2: Inline filter (selection-filter placed in-grid) ───────────────────── */
+
+.ds-inline-filter {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 10px;
+}
+
+.ds-inline-filter-select,
+.ds-inline-filter-input {
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 13px;
+  background: #ffffff;
+  color: #111827;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.ds-inline-filter-select:focus,
+.ds-inline-filter-input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.ds-theme-dark .ds-inline-filter-select,
+.ds-theme-dark .ds-inline-filter-input {
+  background: #1e293b;
+  border-color: #334155;
+  color: #f1f5f9;
+}
+
 /* ── Export toolbar ────────────────────────────────────────────────────────── */
 .ds-toolbar {
   display: flex;
@@ -1685,42 +2043,42 @@ function j() {
   background: #0f172a;
 }
 `, e = document.createElement("style");
-      e.id = "deepspot-sdk-styles", e.textContent = u, document.head.appendChild(e);
-    } catch (u) {
+      e.id = "deepspot-sdk-styles", e.textContent = w, document.head.appendChild(e);
+    } catch (w) {
     }
   }
 }
-function P(u) {
-  if (typeof u == "string") {
-    const e = document.querySelector(u);
-    if (!e) throw new Error(`Deepspot SDK: container "${u}" not found in DOM`);
+function te(w) {
+  if (typeof w == "string") {
+    const e = document.querySelector(w);
+    if (!e) throw new Error(`Deepspot SDK: container "${w}" not found in DOM`);
     return e;
   }
-  return u;
+  return w;
 }
-class M {
+class he {
   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 F(e.baseUrl, e.apiKey), j();
+    this.apiClient = new ae(e.baseUrl, e.apiKey), ce();
   }
   // ── Embed full dashboard ────────────────────────────────────────────────────
   async embedDashboard(e) {
-    var a, o, d, c, h;
-    const t = P(e.container), s = (a = e.embedLevel) != null ? a : "dashboard", r = (o = e.theme) != null ? o : "light";
+    var a, o, l, d, f, h, n, p, b, x;
+    const t = te(e.container), s = (a = e.embedLevel) != null ? a : "dashboard", r = (o = e.theme) != null ? o : "light";
     t.style.height = e.height || "600px", t.style.display = "block";
     const i = this.createRoot(t, r);
     this.showLoading(i);
     try {
-      const l = await this.apiClient.getEmbedToken({
+      const c = await this.apiClient.getEmbedToken({
         dashboardId: e.dashboardId,
         embedType: "dashboard",
         embedLevel: s,
         userId: e.userId,
         tenantId: e.tenantId
-      }), n = await this.apiClient.getDashboardRender(
+      }), u = await this.apiClient.getDashboardRender(
         e.dashboardId,
-        l,
+        c,
         {
           embedLevel: s,
           pageId: e.pageId,
@@ -1728,57 +2086,64 @@ class M {
           filters: e.filters || {}
         }
       );
-      let b;
-      const p = new z(i, {
+      let y;
+      const T = new z(i, {
         embedLevel: s,
         theme: r,
-        hideFilters: (d = e.hideFilters) != null ? d : !1,
-        hideExport: (c = e.hideExport) != null ? c : !1,
+        // v1 backward compat (hideFilters → hideGlobalFilters)
+        hideFilters: (l = e.hideGlobalFilters) != null ? l : !1,
+        hideExport: (d = e.hideExport) != null ? d : !1,
+        // v2 visibility
+        hideGlobalFilters: (f = e.hideGlobalFilters) != null ? f : !1,
+        hideInlineFilters: (h = e.hideInlineFilters) != null ? h : !1,
+        hideText: (n = e.hideText) != null ? n : !1,
+        hideHeader: (p = e.hideHeader) != null ? p : !1,
+        hideBackground: (b = e.hideBackground) != null ? b : !1,
         initialFilters: e.filters || {},
         onFilterChange: e.onFilterChange,
         onReady: e.onReady,
-        onFetchFilterOptions: (m) => this.apiClient.getFilterOptions(e.dashboardId, m, l),
-        onFetchTablePage: (m, f, g) => this.apiClient.getTablePage(e.dashboardId, m, f, g, l),
-        onTabSwitch: async (m, f) => {
-          var g, y, v;
-          (g = e.onTabSwitch) == null || g.call(e, m, f);
+        onFetchFilterOptions: ($) => this.apiClient.getFilterOptions(e.dashboardId, $, c),
+        onFetchTablePage: ($, I, C) => this.apiClient.getTablePage(e.dashboardId, $, I, C, c),
+        onTabSwitch: async ($, I) => {
+          var C, R, L;
+          (C = e.onTabSwitch) == null || C.call(e, $, I);
           try {
-            const x = await this.apiClient.getDashboardRender(
+            const P = await this.apiClient.getDashboardRender(
               e.dashboardId,
-              l,
+              c,
               {
                 embedLevel: s,
-                pageId: m,
-                tabId: f,
-                filters: (v = (y = b == null ? void 0 : b.getActiveFilters()) != null ? y : e.filters) != null ? v : {}
+                pageId: $,
+                tabId: I,
+                filters: (L = (R = y == null ? void 0 : y.getActiveFilters()) != null ? R : e.filters) != null ? L : {}
               }
             );
-            p.update(x);
-          } catch (x) {
-            console.error("Deepspot SDK: tab fetch failed", x);
+            T.update(P);
+          } catch (P) {
+            console.error("Deepspot SDK: tab fetch failed", P);
           }
         }
       });
-      return p.render(n), b = new $({
+      return T.render(u), y = new Q({
         dashboardId: e.dashboardId,
-        token: l,
+        token: c,
         embedType: "dashboard",
         embedLevel: s,
-        activePageId: n.activePage,
-        activeTabId: n.activeTab,
+        activePageId: u.activePage,
+        activeTabId: u.activeTab,
         activeFilters: e.filters || {},
         apiClient: this.apiClient,
-        renderer: p,
+        renderer: T,
         onFilterChange: e.onFilterChange
-      }), b;
-    } catch (l) {
-      throw this.showError(i, (l == null ? void 0 : l.message) || "Failed to load dashboard"), (h = e.onError) == null || h.call(e, (l == null ? void 0 : l.message) || "Failed to load dashboard"), l;
+      }), y;
+    } catch (c) {
+      throw this.showError(i, (c == null ? void 0 : c.message) || "Failed to load dashboard"), (x = e.onError) == null || x.call(e, (c == null ? void 0 : c.message) || "Failed to load dashboard"), c;
     }
   }
   // ── Embed single report (component) ────────────────────────────────────────
   async embedReport(e) {
     var r;
-    const t = P(e.container);
+    const t = te(e.container);
     t.style.height = e.height || "400px", t.style.display = "block";
     const s = this.createRoot(t, e.theme || "light");
     this.showLoading(s);
@@ -1794,8 +2159,8 @@ class M {
         e.componentId,
         i,
         { filters: e.filters || {} }
-      ), o = new O(s, e.theme || "light");
-      return o.render(a, e.onReady), new $({
+      ), o = new le(s, e.theme || "light");
+      return o.render(a, e.onReady), new Q({
         dashboardId: e.dashboardId,
         componentId: e.componentId,
         token: i,
@@ -1833,5 +2198,5 @@ class M {
   }
 }
 export {
-  M as DeepspotSDK
+  he as DeepspotSDK
 };