deepspotscreen-sdk 0.1.1 → 0.2.0

package/dist/deepspot-sdk.esm.js

@@ -1,24 +1,24 @@
-class K {
+class B {
   constructor(e, t) {
     this.tokenCache = /* @__PURE__ */ new Map(), this.baseUrl = e.replace(/\/$/, ""), this.apiKey = t;
   }
   // ── Embed Token ─────────────────────────────────────────────────────────────
   async getEmbedToken(e) {
-    var r, a, o, l;
+    var o, i, a, f;
     const t = [
       e.dashboardId,
       e.embedType,
-      (r = e.embedLevel) != null ? r : "",
-      (a = e.componentId) != null ? a : "",
-      (o = e.userId) != null ? o : ""
+      (o = e.embedLevel) != null ? o : "",
+      (i = e.componentId) != null ? i : "",
+      (a = e.userId) != null ? a : ""
     ].join(":"), s = this.tokenCache.get(t);
     if (s && s.expiresAt > Date.now() + 6e4) return s.token;
-    const i = await this.post(
+    const r = await this.post(
       "/dashboard-builder/embed-token",
       {
         dashboardId: e.dashboardId,
         embedType: e.embedType,
-        embedLevel: (l = e.embedLevel) != null ? l : "dashboard",
+        embedLevel: (f = e.embedLevel) != null ? f : "dashboard",
         componentId: e.componentId,
         userId: e.userId,
         tenantId: e.tenantId,
@@ -27,35 +27,40 @@ class K {
       { "x-deepspot-api-key": this.apiKey }
     );
     return this.tokenCache.set(t, {
-      token: i.token,
-      expiresAt: new Date(i.expiresAt).getTime()
-    }), i.token;
+      token: r.token,
+      expiresAt: new Date(r.expiresAt).getTime()
+    }), r.token;
   }
   // ── Dashboard Render (lazy — loads one tab at a time) ──────────────────────
   async getDashboardRender(e, t, s = {}) {
-    var r;
-    const i = new URLSearchParams({
+    var o;
+    const r = new URLSearchParams({
       embedType: "dashboard",
-      embedLevel: (r = s.embedLevel) != null ? r : "dashboard"
+      embedLevel: (o = s.embedLevel) != null ? o : "dashboard"
     });
-    return s.pageId && i.set("pageId", s.pageId), s.tabId && i.set("tabId", s.tabId), s.filters && Object.entries(s.filters).forEach(([a, o]) => {
-      o != null && o !== "" && i.set(`filter[${a}]`, Array.isArray(o) ? o.join(",") : String(o));
+    return s.pageId && r.set("pageId", s.pageId), s.tabId && r.set("tabId", s.tabId), s.filters && Object.entries(s.filters).forEach(([i, a]) => {
+      a != null && a !== "" && r.set(`filter[${i}]`, Array.isArray(a) ? a.join(",") : String(a));
+    }), s.filterOperators && Object.entries(s.filterOperators).forEach(([i, a]) => {
+      a && r.set(`filterOp[${i}]`, a);
+    }), s.localFilters && Object.entries(s.localFilters).forEach(([i, { value: a, operator: f }]) => {
+      const h = Array.isArray(a) ? a.join(",") : String(a);
+      h && (r.set(`localFilter[${i}]`, h), f && r.set(`localFilterOp[${i}]`, f));
     }), this.get(
-      `/dashboard-builder/embed/${e}/render?${i}`,
+      `/dashboard-builder/embed/${e}/render?${r}`,
       { "x-embed-token": t }
     );
   }
   // ── Single Report Render ────────────────────────────────────────────────────
-  async getReportRender(e, t, s, i = {}) {
-    const r = new URLSearchParams({
+  async getReportRender(e, t, s, r = {}) {
+    const o = new URLSearchParams({
       embedType: "report",
       embedLevel: "report",
       componentId: t
     });
-    return i.filters && Object.entries(i.filters).forEach(([a, o]) => {
-      o != null && o !== "" && r.set(`filter[${a}]`, Array.isArray(o) ? o.join(",") : String(o));
+    return r.filters && Object.entries(r.filters).forEach(([i, a]) => {
+      a != null && a !== "" && o.set(`filter[${i}]`, Array.isArray(a) ? a.join(",") : String(a));
     }), this.get(
-      `/dashboard-builder/embed/${e}/render?${r}`,
+      `/dashboard-builder/embed/${e}/render?${o}`,
       { "x-embed-token": s }
     );
   }
@@ -81,10 +86,10 @@ class K {
    * Called by TableRenderer whenever the user navigates to a different page.
    * Mirrors: GET /dashboard-builder/embed/:dashboardId/table/:componentId/data
    */
-  async getTablePage(e, t, s, i, r) {
+  async getTablePage(e, t, s, r, o) {
     return this.get(
-      `/dashboard-builder/embed/${e}/table/${t}/data?page=${s}&pageSize=${i}`,
-      { "x-embed-token": r }
+      `/dashboard-builder/embed/${e}/table/${t}/data?page=${s}&pageSize=${r}`,
+      { "x-embed-token": o }
     );
   }
   // ── Filter Options ──────────────────────────────────────────────────────────
@@ -97,12 +102,12 @@ class K {
    */
   async getFilterOptions(e, t, s) {
     try {
-      const i = await this.get(
+      const r = await this.get(
         `/dashboard-builder/embed/${e}/filters/${t}/options`,
         { "x-embed-token": s }
       );
-      return Array.isArray(i) ? i : Array.isArray(i == null ? void 0 : i.options) ? i.options : Array.isArray(i == null ? void 0 : i.data) ? i.data : [];
-    } catch (i) {
+      return Array.isArray(r) ? r : Array.isArray(r == null ? void 0 : r.options) ? r.options : Array.isArray(r == null ? void 0 : r.data) ? r.data : [];
+    } catch (r) {
       return [];
     }
   }
@@ -118,12 +123,12 @@ class K {
     return this.handleResponse(s);
   }
   async post(e, t, s = {}) {
-    const i = await fetch(`${this.baseUrl}${e}`, {
+    const r = await fetch(`${this.baseUrl}${e}`, {
       method: "POST",
       headers: { "Content-Type": "application/json", ...s },
       body: JSON.stringify(t)
     });
-    return this.handleResponse(i);
+    return this.handleResponse(r);
   }
   async delete(e, t = {}) {
     const s = await fetch(`${this.baseUrl}${e}`, {
@@ -136,9 +141,9 @@ class K {
     if (!e.ok) {
       let s = `HTTP ${e.status}`;
       try {
-        const i = await e.json();
-        s = (i == null ? void 0 : i.message) || (i == null ? void 0 : i.error) || s;
-      } catch (i) {
+        const r = await e.json();
+        s = (r == null ? void 0 : r.message) || (r == null ? void 0 : r.error) || s;
+      } catch (r) {
       }
       throw new Error(`Deepspot SDK: ${s}`);
     }
@@ -146,7 +151,7 @@ class K {
     return (t == null ? void 0 : t.data) !== void 0 ? t.data : t;
   }
 }
-class E {
+class z {
   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 : "";
@@ -203,19 +208,19 @@ class E {
     this.refreshTimer && clearTimeout(this.refreshTimer), this.refreshTimer = setTimeout(() => this.refresh(), 300);
   }
   async fetchData() {
-    const { apiClient: e, dashboardId: t, componentId: s, token: i, embedType: r, embedLevel: a } = this.opts;
-    return r === "report" && s ? e.getReportRender(t, s, i, {
+    const { apiClient: e, dashboardId: t, componentId: s, token: r, embedType: o, embedLevel: i } = this.opts;
+    return o === "report" && s ? e.getReportRender(t, s, r, {
       filters: this.filters
-    }) : e.getDashboardRender(t, i, {
-      embedLevel: a,
+    }) : e.getDashboardRender(t, r, {
+      embedLevel: i,
       pageId: this.activePageId || void 0,
       tabId: this.activeTabId || void 0,
       filters: this.filters
     });
   }
 }
-const be = 24, M = 10, O = 12;
-class ae {
+const he = 24, D = 10, M = 12;
+class ie {
   /**
    * @param containerWidth  Actual pixel width of the grid container.
    * @param minY            Minimum y value across all components (normalises
@@ -226,23 +231,23 @@ class ae {
   }
   /** Pixel width of one column unit */
   get colWidth() {
-    return this.containerWidth / be;
+    return this.containerWidth / he;
   }
   /** 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) * D + s,
+      width: e.w * t - M,
+      height: e.h * D - 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;
+    const t = Math.min(...e.map((r) => r.y));
+    return (Math.max(...e.map((r) => r.y + r.h)) - t) * D + 40;
   }
   /** Apply absolute positioning styles directly to a DOM element */
   applyStyles(e, t) {
@@ -250,21 +255,21 @@ class ae {
     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 N = null;
+let H = null;
 function fe() {
-  return N || (N = import("./apexcharts.common-k3hLWpB8.js").then((w) => w.a)), N;
+  return H || (H = import("./apexcharts.common-k3hLWpB8.js").then((A) => A.a)), H;
 }
 class ne {
   constructor(e) {
     this.chart = null, this.container = e;
   }
-  async render(e, t, s, i) {
+  async render(e, t, s, r) {
     if (!t || t.length === 0) {
       this.renderEmpty(e.title);
       return;
     }
-    const r = this.buildOptions(e, t, s, i);
-    if (!r) {
+    const o = this.buildOptions(e, t, s, r);
+    if (!o) {
       this.renderEmpty(e.title);
       return;
     }
@@ -274,14 +279,14 @@ class ne {
         <div class="ds-chart-body" id="ds-chart-body-${e.id}"></div>
       </div>
     `;
-    const a = this.container.querySelector(`#ds-chart-body-${e.id}`);
-    if (a)
+    const i = this.container.querySelector(`#ds-chart-body-${e.id}`);
+    if (i)
       try {
         this.chart && this.chart.destroy();
-        const { default: o } = await fe();
-        this.chart = new o(a, r), this.chart.render();
-      } catch (o) {
-        console.error("[Deepspot SDK] ChartRenderer error:", o), a.innerHTML = '<div class="ds-chart-empty">Chart render error</div>';
+        const { default: a } = await fe();
+        this.chart = new a(i, o), this.chart.render();
+      } catch (a) {
+        console.error("[Deepspot SDK] ChartRenderer error:", a), i.innerHTML = '<div class="ds-chart-empty">Chart render error</div>';
       }
   }
   async update(e, t, s) {
@@ -289,14 +294,14 @@ class ne {
       await this.render(e, t, s);
       return;
     }
-    const { series: i, categories: r } = this.extractSeriesAndCategories(e, t);
+    const { series: r, categories: o } = this.extractSeriesAndCategories(e, t);
     try {
       this.chart.updateOptions({
-        series: i,
-        xaxis: { categories: r },
+        series: r,
+        xaxis: { categories: o },
         theme: { mode: s }
       });
-    } catch (a) {
+    } catch (i) {
       this.render(e, t, s);
     }
   }
@@ -309,13 +314,21 @@ class ne {
     this.chart = null;
   }
   // ── Private ─────────────────────────────────────────────────────────────────
-  buildOptions(e, t, s, i) {
-    const r = e.type;
-    return r === "pie" || r === "donut" ? this.buildPieOptions(e, t, s, i) : r === "bar" || r === "line" || r === "area" ? this.buildCartesianOptions(e, t, s, i) : null;
+  buildOptions(e, t, s, r) {
+    const o = e.type;
+    return o === "pie" || o === "donut" ? this.buildPieOptions(e, t, s, r) : o === "bar" || o === "line" || o === "area" ? this.buildCartesianOptions(e, t, s, r) : 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";
+  buildCartesianOptions(e, t, s, r) {
+    var g;
+    const { series: o, categories: i, xAxisLabel: a, yAxisLabel: f, seriesColors: h } = this.extractSeriesAndCategories(e, t), v = e.properties || {}, m = ["#4f46e5", "#10b981", "#f59e0b", "#ef4444", "#3b82f6", "#8b5cf6", "#ec4899", "#14b8a6"];
+    let p;
+    if (h.length > 0 && h.length === o.length)
+      p = h;
+    else {
+      const u = v.colors ? Object.values(v.colors).filter(Boolean) : [];
+      p = u.length > 0 ? u : m;
+    }
+    const n = s === "dark";
     return {
       chart: {
         type: e.type === "area" ? "area" : e.type === "line" ? "line" : "bar",
@@ -325,35 +338,35 @@ class ne {
         fontFamily: "inherit",
         // Explicit height prevents ApexCharts from guessing the flex-child height
         // at render time (which can read as 0 before the browser settles layout).
-        height: i != null ? i : "100%"
+        height: r != null ? r : "100%"
       },
       theme: { mode: s },
-      series: r,
+      series: o,
       xaxis: {
-        categories: a,
-        title: { text: o },
+        categories: i,
+        title: { text: a },
         labels: {
-          rotate: a.length > 8 ? -45 : 0,
-          style: { colors: b ? "#94a3b8" : "#6b7280", fontSize: "11px" }
+          rotate: i.length > 8 ? -45 : 0,
+          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: f },
+        labels: { style: { colors: n ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
       },
-      colors: h,
+      colors: p,
       legend: {
-        show: r.length > 1 || ((n = d.showLegend) != null ? n : !1),
+        show: o.length > 1 || ((g = v.showLegend) != null ? g : !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
+          bottom: i.length > 8 ? 60 : 10
         }
       },
       tooltip: { theme: s },
@@ -366,34 +379,34 @@ class ne {
       plotOptions: {
         bar: {
           borderRadius: 4,
-          distributed: r.length === 1
+          distributed: o.length === 1
         }
       }
     };
   }
-  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"];
+  buildPieOptions(e, t, s, r) {
+    const o = e.properties || {}, i = t.length > 0 ? Object.keys(t[0]) : [], a = i[0] || "label", f = i[1] || "value", h = t.map((u) => {
+      var b;
+      return String((b = u[a]) != null ? b : "");
+    }), v = t.map((u) => Number(u[f]) || 0), m = s === "dark", p = ["#4f46e5", "#10b981", "#f59e0b", "#ef4444", "#3b82f6", "#8b5cf6", "#ec4899", "#14b8a6"], n = o.colors ? Object.values(o.colors).filter(Boolean) : [], g = n.length > 0 ? n : p;
     return {
       chart: {
         type: e.type,
         toolbar: { show: !1 },
         background: "transparent",
         fontFamily: "inherit",
-        height: i != null ? i : "100%"
+        height: r != null ? r : "100%"
       },
       theme: { mode: s },
-      series: h,
-      labels: d,
-      colors: n,
+      series: v,
+      labels: h,
+      colors: g,
       legend: {
         position: "bottom",
-        labels: { colors: b ? "#94a3b8" : "#6b7280" }
+        labels: { colors: m ? "#94a3b8" : "#6b7280" }
       },
       tooltip: { theme: s },
-      dataLabels: { enabled: d.length <= 8 },
+      dataLabels: { enabled: h.length <= 8 },
       plotOptions: {
         pie: {
           donut: { size: e.type === "donut" ? "65%" : "0%" }
@@ -402,38 +415,40 @@ class ne {
     };
   }
   extractSeriesAndCategories(e, t) {
-    const s = e.properties || {}, i = t.length > 0 ? Object.keys(t[0]) : [], r = s.xAxis || i[0] || "x";
-    let a = [];
+    const s = e.properties || {}, r = t.length > 0 ? Object.keys(t[0]) : [], o = s.xAxis || r[0] || "x";
+    let i = [];
     if (s.selectedYAxisColumn)
       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
+        Array.isArray(n) && (i = n.map(
+          (g) => typeof g == "string" ? { column: g } : g
         ));
       } catch (n) {
       }
-    if (!a.length && s.yAxis) {
+    if (!i.length && s.yAxis) {
       const n = s.yAxis;
-      a = (Array.isArray(n) ? n : [n]).map((f) => ({ column: String(f) }));
+      i = (Array.isArray(n) ? n : [n]).map((u) => ({ column: String(u) }));
     }
-    !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;
+    !i.length && r.length > 1 && (i = r.slice(1).map((n) => ({ column: n })));
+    const a = t.map((n) => {
+      var g;
+      return String((g = n[o]) != null ? g : "");
+    }), f = t.length > 0 ? Object.keys(t[0]) : [], h = i.map((n) => {
+      const g = f.includes(n.column) ? n.column : null, u = g ? null : f.find((d) => d.includes(n.column) || n.column.includes(d)), b = !g && !u ? f.find((d) => {
+        var l;
+        return d !== o && !isNaN(Number((l = t[0]) == null ? void 0 : l[d]));
+      }) : null, c = g || u || b || 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((d) => {
+          const l = d[c];
+          return l != null ? Number(l) : null;
         })
       };
-    }), h = s.xAxisLabel || r.replace(/_/g, " "), b = s.yAxisLabel || (a.length === 1 ? a[0].column : "Values");
-    return { series: d, categories: o, xAxisLabel: h, yAxisLabel: b };
+    }), v = i.map((n) => n.color || n.colorHex || "").filter(Boolean), m = s.xAxisLabel || o, p = s.yAxisLabel || (i.length === 1 ? i[0].column : "");
+    return { series: h, categories: a, xAxisLabel: m, yAxisLabel: p, seriesColors: v };
   }
   renderEmpty(e) {
     this.container.innerHTML = `
@@ -449,16 +464,16 @@ class le {
     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, i) {
-    var h;
-    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;
+  render(e, t, s, r) {
+    var v;
+    this.container = e, this.component = t, this.fetchPage = r, this.searchTerm = "", this.currentPage = 1, this.currentPageSize = 10;
+    const o = s && !Array.isArray(s) && "rows" in s;
+    if (o) {
+      const m = s;
+      this.currentRows = m.rows, this.allData = [], this.totalRows = m.total, this.currentPage = m.page, this.currentPageSize = m.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) {
+    if (o && s.rows.length === 0 && s.total === 0 || !o && this.allData.length === 0) {
       e.innerHTML = `
         <div class="ds-table-card">
           <div class="ds-table-header-row">
@@ -470,18 +485,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)) : [];
-    this.columns = d.length ? d : o, this.paint();
+    const i = o ? s.rows[0] : this.allData[0], a = i ? Object.keys(i) : [], f = ((v = t.properties) == null ? void 0 : v.columns) || [], h = f.length ? f.filter((m) => a.includes(m)) : [];
+    this.columns = h.length ? h : a, 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)), r = (this.currentPage - 1) * this.currentPageSize + 1, o = this.fetchPage ? Math.min(r - 1 + (this.isLoading ? this.currentPageSize : e.length), this.totalRows) : Math.min(this.currentPage * this.currentPageSize, this.totalRows), i = this.columns.map((p) => `<th>${this.escape(this.formatHeader(p))}</th>`).join(""), a = 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((p, n) => {
+      const g = this.columns.map((u) => {
+        const b = p[u];
+        return `<td title="${this.escape(String(b != null ? b : ""))}">${this.escape(this.formatValue(b))}</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>${g}</tr>`;
+    }).join(""), f = this.currentPageSize, h = [10, 25, 50, 100].map((p) => `<option value="${p}"${p === f ? " selected" : ""}>${p}</option>`).join(""), v = this.currentPage <= 1, m = this.currentPage >= s;
     this.container.innerHTML = `
       <div class="ds-table-card">
         <div class="ds-table-header-row">
@@ -492,22 +507,22 @@ class le {
         </div>
         <div class="ds-table-scroll">
           <table class="ds-table">
-            <thead><tr><th class="ds-table-sno-th">S.No</th>${a}</tr></thead>
-            <tbody>${o}</tbody>
+            <thead><tr><th class="ds-table-sno-th">S.No</th>${i}</tr></thead>
+            <tbody>${a}</tbody>
           </table>
         </div>
         <div class="ds-table-footer">
           <div class="ds-table-info">
-            <span>${i.toLocaleString()}–${r.toLocaleString()} of ${this.totalRows.toLocaleString()}</span>
+            <span>${r.toLocaleString()}–${o.toLocaleString()} of ${this.totalRows.toLocaleString()}</span>
             <span class="ds-table-rows-label">Rows:</span>
-            <select class="ds-table-page-size">${d}</select>
+            <select class="ds-table-page-size">${h}</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" ${v ? "disabled" : ""}>&#171;</button>
+            <button class="ds-table-pg-btn" data-action="prev"  ${v ? "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" ${m ? "disabled" : ""}>Next</button>
+            <button class="ds-table-pg-btn" data-action="last" ${m ? "disabled" : ""}>&#187;</button>
           </div>
         </div>
         ${this.isLoading ? '<div class="ds-table-loading-overlay"><div class="ds-embed-spinner"></div></div>' : ""}
@@ -525,9 +540,9 @@ class le {
     }), this.container.querySelectorAll("[data-action]").forEach((s) => {
       s.addEventListener("click", () => {
         if (s.disabled) return;
-        const i = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), r = s.dataset.action;
-        let a = this.currentPage;
-        r === "first" ? a = 1 : r === "prev" ? a = Math.max(1, this.currentPage - 1) : r === "next" ? a = Math.min(i, this.currentPage + 1) : r === "last" && (a = i), (a !== this.currentPage || r === "first" || r === "last") && (this.currentPage = a, this.fetchPage ? this.loadPage(a) : this.paint());
+        const r = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), o = s.dataset.action;
+        let i = this.currentPage;
+        o === "first" ? i = 1 : o === "prev" ? i = Math.max(1, this.currentPage - 1) : o === "next" ? i = Math.min(r, this.currentPage + 1) : o === "last" && (i = r), (i !== this.currentPage || o === "first" || o === "last") && (this.currentPage = i, this.fetchPage ? this.loadPage(i) : this.paint());
       });
     });
   }
@@ -558,8 +573,8 @@ class le {
     const e = this.searchTerm.toLowerCase();
     return this.allData.filter(
       (t) => this.columns.some((s) => {
-        var i;
-        return String((i = t[s]) != null ? i : "").toLowerCase().includes(e);
+        var r;
+        return String((r = t[s]) != null ? r : "").toLowerCase().includes(e);
       })
     );
   }
@@ -576,24 +591,35 @@ class le {
 }
 class ce {
   render(e, t, s) {
-    const i = t.properties || {};
-    let r = null;
+    var g;
+    const r = t.properties || {};
+    let o = null;
     if (s && s.length > 0) {
-      const f = s[0], m = i.metric || Object.keys(f)[0], c = f[m];
+      const u = s[0], b = r.metric || Object.keys(u)[0], c = u[b];
       if (c !== void 0)
-        r = c;
+        o = c;
       else {
-        const u = Object.keys(f).find(
-          (g) => g.includes(m) || m.includes(g)
+        const d = Object.keys(u).find(
+          (l) => l.includes(b) || b.includes(l)
         );
-        r = f[u != null ? u : Object.keys(f)[0]];
+        o = u[d != null ? d : Object.keys(u)[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 i;
+    if (o == null)
+      try {
+        const u = (g = r == null ? void 0 : r.data) == null ? void 0 : g.dataContent, b = u ? typeof u == "string" ? JSON.parse(u) : u : null;
+        i = b != null && b.value ? String(b.value) : "—";
+      } catch (u) {
+        i = "—";
+      }
+    else
+      i = this.formatValue(o, r);
+    const a = r.styleConfig || {}, f = a.backgroundColor || r.backgroundColor || "", h = a.color || a.textColor || r.textColor || "", v = t.title || "", m = f ? `background:${f};border:none;` : "", p = h ? `color:${h};` : "", n = h ? `color:${h};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"${m ? ` style="${m}"` : ""}>
+        <div class="ds-card-label"${n ? ` style="${n}"` : ""}>${v}</div>
+        <div class="ds-card-value"${p ? ` style="${p}"` : ""}>${i}</div>
       </div>
     `;
   }
@@ -601,126 +627,394 @@ 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 r = (t == null ? void 0 : t.prefix) || (t == null ? void 0 : t.currencySymbol) || "", o = (t == null ? void 0 : t.suffix) || "", i = s % 1 === 0 ? s.toLocaleString() : parseFloat(s.toFixed(2)).toLocaleString();
+    return `${r}${i}${o}`;
   }
 }
-class pe {
+const be = [
+  { value: "=", label: "Equals (=)" },
+  { value: "!=", label: "Not Equals (!=)" },
+  { value: "LIKE", label: "Contains" },
+  { value: "NOT LIKE", label: "Not Contains" },
+  { value: "STARTS_WITH", label: "Starts With" },
+  { value: "IN", label: "In (Multiple)" },
+  { value: "NOT IN", label: "Not In" },
+  { value: ">", label: "Greater Than (>)" },
+  { value: ">=", label: "Greater or Equal (>=)" },
+  { value: "<", label: "Less Than (<)" },
+  { value: "<=", label: "Less or Equal (<=)" },
+  { value: "IS NULL", label: "Is Empty" },
+  { value: "IS NOT NULL", label: "Is Not Empty" }
+];
+class ge {
   constructor(e, t) {
-    this.currentValues = {}, this.container = e, this.onFilterChange = t;
+    this.filters = [], this.state = /* @__PURE__ */ new Map(), this.activePopoverId = null, this.container = e, this.onFilterChange = t;
   }
+  // ── Public API ─────────────────────────────────────────────────────────────
   render(e, t = {}) {
+    var s, r, o;
     if (!e || e.length === 0) {
       this.container.style.display = "none";
       return;
     }
-    this.container.style.display = "", this.currentValues = { ...t }, this.container.innerHTML = `<div class="ds-filter-bar">${e.map((s) => this.renderFilter(s, t[s.applyToField || s.filterId])).join("")}</div>`, this.attachListeners(e);
+    this.container.style.display = "", this.filters = e, this.state.clear();
+    for (const i of e) {
+      const a = i.applyToField || i.filterId, f = (s = t[i.filterId]) != null ? s : t[a], h = f ? Array.isArray(f) ? f.map(String) : [String(f)] : [];
+      this.state.set(i.filterId, {
+        operator: i.filterOperator || "=",
+        tempValues: [...h],
+        activeValues: [...h],
+        options: (o = (r = i.options) == null ? void 0 : r.map((v) => v)) != null ? o : [],
+        loading: !1,
+        search: ""
+      });
+    }
+    this.paint();
   }
-  /**
-   * Populate a dropdown / multi-select with options fetched from the API.
-   * Called asynchronously after the filter bar is rendered.
-   */
   updateOptions(e, t) {
-    const s = this.container.querySelector(
-      `select[data-filter-id="${e}"]`
-    );
-    if (!s) return;
-    const i = s.value;
-    s.innerHTML = '<option value="">All</option>' + t.map(
-      (r) => `<option value="${this.escAttr(r)}">${this.escText(r)}</option>`
-    ).join(""), i && t.includes(i) && (s.value = i);
+    const s = this.state.get(e);
+    s && (s.loading = !1, s.options = t, this.refreshPopoverOpts(e));
+  }
+  setLoading(e, t) {
+    const s = this.state.get(e);
+    s && (s.loading = t, this.refreshPopoverOpts(e));
   }
-  /** Update the stored values without re-rendering (for programmatic setFilter) */
   updateValues(e) {
-    Object.assign(this.currentValues, e), Object.entries(e).forEach(([t, s]) => {
-      const i = this.container.querySelector(`[data-filter-id="${t}"]`);
-      i && s !== void 0 && (i.value = String(s));
-    });
+    for (const [t, s] of Object.entries(e)) {
+      const r = this.filters.find(
+        (a) => (a.applyToField || a.filterId) === t || a.filterId === t
+      );
+      if (!r) continue;
+      const o = this.state.get(r.filterId);
+      if (!o) continue;
+      const i = s ? Array.isArray(s) ? s.map(String) : [String(s)] : [];
+      o.activeValues = i, o.tempValues = [...i];
+    }
+    this.repaintBadges();
   }
-  // ── Private ─────────────────────────────────────────────────────────────────
-  renderFilter(e, t) {
-    const s = `ds-filter-${e.filterId}`, i = `<label class="ds-filter-label" for="${s}">${e.label}</label>`;
-    switch (e.type) {
-      case "dropdown":
-        return `
-          <div class="ds-filter-item">
-            ${i}
-            <select class="ds-filter-select" id="${s}" data-filter-id="${e.filterId}">
-              <option value="">All</option>
-              ${(e.options || []).map((o) => `
-                <option value="${this.escAttr(o)}" ${t === o ? "selected" : ""}>
-                  ${this.escText(o)}
-                </option>
-              `).join("")}
-            </select>
-          </div>`;
-      case "multi-select":
-        return `
-          <div class="ds-filter-item">
-            ${i}
-            <select class="ds-filter-select" id="${s}" data-filter-id="${e.filterId}" multiple size="1">
-              ${(e.options || []).map((o) => `
-                <option value="${this.escAttr(o)}">${this.escText(o)}</option>
-              `).join("")}
+  // ── Paint badge bar ─────────────────────────────────────────────────────────
+  paint() {
+    this.container.innerHTML = `
+      <div class="ds-fp-v3">
+        <div class="ds-fp-v3-bar" id="ds-fp-v3-bar">
+          <span class="ds-fp-v3-label">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+              <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
+            </svg>
+            Filters:
+          </span>
+          <div class="ds-fp-v3-badges" id="ds-fp-v3-badges">
+            ${this.filters.map((e) => this.renderBadge(e)).join("")}
+          </div>
+        </div>
+        <!-- Popovers rendered per filter -->
+        ${this.filters.map((e) => this.renderPopoverHtml(e)).join("")}
+      </div>`, this.bindAll(), this.closePopoverOnOutsideClick();
+  }
+  renderBadge(e) {
+    return `
+      <button type="button"
+        class="ds-fp-v3-badge${this.state.get(e.filterId).activeValues.length > 0 ? " ds-fp-v3-badge-active" : ""}"
+        data-filter-id="${this.escAttr(e.filterId)}">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
+        </svg>
+        ${this.escText(e.label)}
+      </button>`;
+  }
+  renderPopoverHtml(e) {
+    const t = this.state.get(e.filterId);
+    return `
+      <div class="ds-fp-v3-pop" id="ds-fp-pop-${this.escAttr(e.filterId)}" style="display:none">
+        <div class="ds-fp-v3-pop-hd">
+          <span class="ds-fp-v3-pop-title">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+              <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
+            </svg>
+            Filter
+          </span>
+          <div class="ds-fp-v3-pop-actions">
+            <button type="button" class="ds-fp-v3-pop-icon-btn ds-fp-v3-pop-close-btn"
+              data-filter-id="${this.escAttr(e.filterId)}" title="Close">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"/>
+                <line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="ds-fp-v3-pop-body">
+          <div class="ds-fp-v3-field">
+            <label class="ds-fp-v3-field-lbl">CONDITION</label>
+            <select class="ds-fp-v3-condition" data-filter-id="${this.escAttr(e.filterId)}">
+              ${be.map(
+      (s) => `<option value="${this.escAttr(s.value)}"${s.value === t.operator ? " selected" : ""}>${s.label}</option>`
+    ).join("")}
             </select>
-          </div>`;
-      case "date-range":
-        const r = (t == null ? void 0 : t.from) || "", a = (t == null ? void 0 : t.to) || "";
-        return `
-          <div class="ds-filter-item">
-            ${i}
-            <div class="ds-date-range-inputs">
-              <input type="date" class="ds-filter-input"
-                data-filter-id="${e.filterId}" data-date-part="from"
-                value="${r}" />
-              <span>–</span>
-              <input type="date" class="ds-filter-input"
-                data-filter-id="${e.filterId}" data-date-part="to"
-                value="${a}" />
-            </div>
-          </div>`;
-      case "text-input":
-        return `
-          <div class="ds-filter-item">
-            ${i}
-            <input type="text" class="ds-filter-input" id="${s}"
-              data-filter-id="${e.filterId}"
-              value="${this.escAttr(String(t != null ? t : ""))}"
-              placeholder="Search..." />
-          </div>`;
-      case "number-input":
-        return `
-          <div class="ds-filter-item">
-            ${i}
-            <input type="number" class="ds-filter-input" id="${s}"
-              data-filter-id="${e.filterId}"
-              value="${this.escAttr(String(t != null ? t : ""))}" />
-          </div>`;
-      default:
-        return "";
-    }
+          </div>
+          <div class="ds-fp-v3-field">
+            <label class="ds-fp-v3-field-lbl">VALUES</label>
+            ${this.renderValuesControl(e, t)}
+          </div>
+        </div>
+        <div class="ds-fp-v3-pop-footer">
+          <button type="button" class="ds-fp-v3-clear-btn"
+            data-filter-id="${this.escAttr(e.filterId)}">Clear</button>
+          <button type="button" class="ds-fp-v3-apply-btn"
+            data-filter-id="${this.escAttr(e.filterId)}">Apply Filter</button>
+        </div>
+      </div>`;
   }
-  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;
-        if ((a == null ? void 0 : a.type) === "date-range" && r)
-          t[i] = t[i] || {}, t[i][r] = s.value, l = { ...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);
-        } else
-          l = s.value;
-        this.currentValues[i] = l, this.onFilterChange(i, l);
-      };
-      s.addEventListener(
-        (a == null ? void 0 : a.type) === "text-input" ? "input" : "change",
-        o
+  renderValuesControl(e, t) {
+    var s, r, o;
+    return e.type === "date-range" ? `
+        <div class="ds-fp-v3-date-range">
+          <input type="date" class="ds-fp-v3-date" data-part="from"
+            data-filter-id="${this.escAttr(e.filterId)}"
+            value="${this.escAttr((s = t.tempValues[0]) != null ? s : "")}" placeholder="From"/>
+          <span class="ds-fp-v3-date-sep">–</span>
+          <input type="date" class="ds-fp-v3-date" data-part="to"
+            data-filter-id="${this.escAttr(e.filterId)}"
+            value="${this.escAttr((r = t.tempValues[1]) != null ? r : "")}" placeholder="To"/>
+        </div>` : e.type === "text-input" || e.type === "number-input" ? `<input type="${e.type === "number-input" ? "number" : "text"}"
+        class="ds-fp-v3-text-input"
+        data-filter-id="${this.escAttr(e.filterId)}"
+        value="${this.escAttr((o = t.tempValues[0]) != null ? o : "")}"
+        placeholder="Enter value…"/>` : this.renderMultiSelectControl(e, t);
+  }
+  renderMultiSelectControl(e, t) {
+    const s = t.tempValues.length === 0 ? "" : t.tempValues.length === 1 ? this.optLabel(e.filterId, t.tempValues[0]) : `${t.tempValues.length} selected`;
+    return `
+      <div class="ds-fp-v3-ms-wrap" data-filter-id="${this.escAttr(e.filterId)}">
+        <div class="ds-fp-v3-ms-trigger" data-filter-id="${this.escAttr(e.filterId)}">
+          <span class="ds-fp-v3-ms-display">${s || "Type to search..."}</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"/>
+          </svg>
+        </div>
+        <div class="ds-fp-v3-ms-drop" id="ds-fp-drop-${this.escAttr(e.filterId)}" style="display:none">
+          <input type="text" class="ds-fp-v3-ms-search"
+            data-filter-id="${this.escAttr(e.filterId)}"
+            placeholder="Search ${this.escAttr(e.label)}…"
+            value="${this.escAttr(t.search)}"/>
+          <div class="ds-fp-v3-ms-opts" id="ds-fp-opts-${this.escAttr(e.filterId)}">
+            ${this.renderOpts(e.filterId, t)}
+          </div>
+        </div>
+        ${t.tempValues.length > 0 ? `
+        <div class="ds-fp-v3-chips" id="ds-fp-chips-${this.escAttr(e.filterId)}">
+          ${t.tempValues.map((r) => `
+            <span class="ds-fp-v3-chip">
+              ${this.escText(this.optLabel(e.filterId, r))}
+              <button type="button" class="ds-fp-v3-chip-x"
+                data-val="${this.escAttr(r)}"
+                data-filter-id="${this.escAttr(e.filterId)}">✕</button>
+            </span>`).join("")}
+        </div>` : `<div class="ds-fp-v3-chips" id="ds-fp-chips-${this.escAttr(e.filterId)}"></div>`}
+      </div>`;
+  }
+  renderOpts(e, t) {
+    if (t.loading) return '<div class="ds-fp-v3-opts-msg"><span class="ds-dd-spinner"></span> Loading…</div>';
+    const s = t.search.toLowerCase(), r = t.options.filter(
+      (o) => (typeof o == "string" ? o : o.label).toLowerCase().includes(s)
+    );
+    return t.options.length ? r.length ? r.map((o) => {
+      const i = typeof o == "string" ? o : o.value, a = typeof o == "string" ? o : o.label, f = t.tempValues.includes(i);
+      return `
+        <label class="ds-fp-v3-opt${f ? " ds-fp-v3-opt-on" : ""}" data-val="${this.escAttr(i)}"
+          data-filter-id="${this.escAttr(e)}">
+          <span class="ds-fp-v3-cb${f ? " ds-fp-v3-cb-on" : ""}">
+            ${f ? `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+                  stroke-linecap="round" stroke-linejoin="round" width="10" height="10">
+                  <polyline points="20 6 9 17 4 12"/>
+                 </svg>` : ""}
+          </span>
+          <span>${this.escText(a)}</span>
+        </label>`;
+    }).join("") : '<div class="ds-fp-v3-opts-msg">No matches</div>' : '<div class="ds-fp-v3-opts-msg">No options yet</div>';
+  }
+  // ── Event binding ──────────────────────────────────────────────────────────
+  bindAll() {
+    var e;
+    this.container.querySelectorAll(".ds-fp-v3-badge").forEach((t) => {
+      t.addEventListener("click", (s) => {
+        s.stopPropagation();
+        const r = t.dataset.filterId;
+        this.togglePopover(r, t);
+      });
+    }), (e = this.container.querySelector("#ds-fp-v3-add")) == null || e.addEventListener("click", (t) => {
+      t.stopPropagation();
+      const s = this.filters.find((o) => this.state.get(o.filterId).activeValues.length === 0);
+      if (!s) return;
+      const r = this.container.querySelector(
+        `.ds-fp-v3-badge[data-filter-id="${s.filterId}"]`
       );
+      r && this.togglePopover(s.filterId, r);
+    }), this.filters.forEach((t) => this.bindPopover(t));
+  }
+  bindPopover(e) {
+    var o, i, a, f, h, v, m;
+    const t = this.container.querySelector(`#ds-fp-pop-${e.filterId}`);
+    if (!t) return;
+    const s = this.state.get(e.filterId);
+    (o = t.querySelector(`.ds-fp-v3-condition[data-filter-id="${e.filterId}"]`)) == null || o.addEventListener("change", (p) => {
+      s.operator = p.target.value;
+    }), (i = t.querySelector(`.ds-fp-v3-text-input[data-filter-id="${e.filterId}"]`)) == null || i.addEventListener("input", (p) => {
+      const n = p.target.value;
+      s.tempValues = n ? [n] : [];
+    }), t.querySelectorAll(`.ds-fp-v3-date[data-filter-id="${e.filterId}"]`).forEach((p) => {
+      p.addEventListener("change", () => {
+        var u, b, c, d;
+        const n = (b = (u = t.querySelector(`[data-part="from"][data-filter-id="${e.filterId}"]`)) == null ? void 0 : u.value) != null ? b : "", g = (d = (c = t.querySelector(`[data-part="to"][data-filter-id="${e.filterId}"]`)) == null ? void 0 : c.value) != null ? d : "";
+        s.tempValues = [n, g];
+      });
+    }), (a = t.querySelector(`.ds-fp-v3-ms-trigger[data-filter-id="${e.filterId}"]`)) == null || a.addEventListener("click", (p) => {
+      p.stopPropagation();
+      const n = t.querySelector(`#ds-fp-drop-${e.filterId}`);
+      if (n) {
+        const g = n.style.display !== "none";
+        if (n.style.display = g ? "none" : "", !g) {
+          const u = n.querySelector(".ds-fp-v3-ms-search");
+          u == null || u.focus();
+        }
+      }
+    });
+    const r = t.querySelector(`.ds-fp-v3-ms-search[data-filter-id="${e.filterId}"]`);
+    r && r.addEventListener("input", () => {
+      s.search = r.value, this.repaintOpts(e.filterId);
+    }), this.bindOpts(e.filterId, t), this.bindChips(e.filterId, t), (f = t.querySelector(`.ds-fp-v3-pop-clear-btn[data-filter-id="${e.filterId}"]`)) == null || f.addEventListener("click", () => this.clearFilter(e.filterId)), (h = t.querySelector(`.ds-fp-v3-pop-close-btn[data-filter-id="${e.filterId}"]`)) == null || h.addEventListener("click", () => this.closePopover(e.filterId)), (v = t.querySelector(`.ds-fp-v3-clear-btn[data-filter-id="${e.filterId}"]`)) == null || v.addEventListener("click", () => this.clearFilter(e.filterId)), (m = t.querySelector(`.ds-fp-v3-apply-btn[data-filter-id="${e.filterId}"]`)) == null || m.addEventListener("click", () => this.applyFilter(e.filterId));
+  }
+  bindOpts(e, t) {
+    const s = this.state.get(e);
+    t.querySelectorAll(`.ds-fp-v3-opt[data-filter-id="${e}"]`).forEach((r) => {
+      r.addEventListener("click", (o) => {
+        var a;
+        o.stopPropagation();
+        const i = (a = r.dataset.val) != null ? a : "";
+        s.tempValues.includes(i) ? s.tempValues = s.tempValues.filter((f) => f !== i) : s.tempValues = [...s.tempValues, i], this.repaintOpts(e), this.repaintChips(e);
+      });
+    });
+  }
+  bindChips(e, t) {
+    const s = this.state.get(e);
+    t.querySelectorAll(`.ds-fp-v3-chip-x[data-filter-id="${e}"]`).forEach((r) => {
+      r.addEventListener("click", (o) => {
+        o.stopPropagation(), s.tempValues = s.tempValues.filter((i) => {
+          var a;
+          return i !== ((a = r.dataset.val) != null ? a : "");
+        }), this.repaintOpts(e), this.repaintChips(e);
+      });
     });
   }
+  // ── Popover show/hide ──────────────────────────────────────────────────────
+  togglePopover(e, t) {
+    if (this.activePopoverId === e) {
+      this.closePopover(e);
+      return;
+    }
+    this.activePopoverId && this.closePopover(this.activePopoverId);
+    const s = this.container.querySelector(`#ds-fp-pop-${e}`);
+    if (!s) return;
+    const r = this.container.getBoundingClientRect(), o = t.getBoundingClientRect();
+    s.style.top = `${o.bottom - r.top + 4}px`, s.style.left = `${o.left - r.left}px`, s.style.display = "", this.activePopoverId = e;
+    const i = this.state.get(e);
+    i.tempValues = [...i.activeValues], i.search = "", this.repaintOpts(e), this.repaintChips(e);
+    const a = s.querySelector(`#ds-fp-drop-${e}`);
+    a && (a.style.display = "none");
+  }
+  closePopover(e) {
+    const t = this.container.querySelector(`#ds-fp-pop-${e}`);
+    t && (t.style.display = "none"), this.activePopoverId === e && (this.activePopoverId = null);
+  }
+  closePopoverOnOutsideClick() {
+    document.addEventListener("mousedown", (e) => {
+      if (!this.activePopoverId) return;
+      const t = this.container.querySelector(`#ds-fp-pop-${this.activePopoverId}`), s = this.container.querySelector("#ds-fp-v3-bar");
+      t && !t.contains(e.target) && s && !s.contains(e.target) && this.closePopover(this.activePopoverId);
+    }, { capture: !0 });
+  }
+  // ── Apply / clear ──────────────────────────────────────────────────────────
+  applyFilter(e) {
+    var o;
+    const t = this.state.get(e), s = this.filters.find((i) => i.filterId === e);
+    t.activeValues = [...t.tempValues];
+    let r;
+    s.type === "date-range" ? r = t.tempValues.length >= 2 && (t.tempValues[0] || t.tempValues[1]) ? { from: t.tempValues[0], to: t.tempValues[1] } : "" : s.type === "multi-select" || t.tempValues.length > 1 ? r = t.tempValues.length > 0 ? [...t.tempValues] : "" : r = (o = t.tempValues[0]) != null ? o : "", this.repaintBadge(e), this.closePopover(e), this.onFilterChange(e, r, t.operator);
+  }
+  clearFilter(e) {
+    const t = this.state.get(e);
+    t.tempValues = [], t.activeValues = [], this.repaintBadge(e), this.repaintOpts(e), this.repaintChips(e), this.closePopover(e), this.onFilterChange(e, "", void 0);
+  }
+  // ── Repaint helpers ────────────────────────────────────────────────────────
+  repaintBadge(e) {
+    const t = this.state.get(e), s = this.container.querySelector(`.ds-fp-v3-badge[data-filter-id="${e}"]`);
+    s && (t.activeValues.length > 0 ? s.classList.add("ds-fp-v3-badge-active") : s.classList.remove("ds-fp-v3-badge-active"));
+  }
+  repaintBadges() {
+    this.filters.forEach((e) => this.repaintBadge(e.filterId));
+  }
+  repaintOpts(e) {
+    const t = this.state.get(e);
+    if (!t) return;
+    const s = this.container.querySelector(`#ds-fp-opts-${e}`);
+    if (!s) return;
+    s.innerHTML = this.renderOpts(e, t);
+    const r = this.container.querySelector(`#ds-fp-pop-${e}`);
+    r && this.bindOpts(e, r);
+  }
+  refreshPopoverOpts(e) {
+    this.repaintOpts(e);
+    const t = this.state.get(e);
+    if (!t) return;
+    const s = this.container.querySelector(
+      `.ds-fp-v3-ms-trigger[data-filter-id="${e}"] .ds-fp-v3-ms-display`
+    );
+    s && (s.textContent = t.tempValues.length === 0 ? "Type to search..." : t.tempValues.length === 1 ? this.optLabel(e, t.tempValues[0]) : `${t.tempValues.length} selected`);
+  }
+  repaintChips(e) {
+    const t = this.state.get(e);
+    if (!t) return;
+    const s = this.container.querySelector(`#ds-fp-chips-${e}`);
+    if (!s) return;
+    if (t.tempValues.length === 0) {
+      s.innerHTML = "";
+      const i = this.container.querySelector(
+        `.ds-fp-v3-ms-trigger[data-filter-id="${e}"] .ds-fp-v3-ms-display`
+      );
+      i && (i.textContent = "Type to search...");
+      return;
+    }
+    const r = this.filters.find((i) => i.filterId === e);
+    s.innerHTML = t.tempValues.map((i) => `
+      <span class="ds-fp-v3-chip">
+        ${this.escText(this.optLabel(r.filterId, i))}
+        <button type="button" class="ds-fp-v3-chip-x"
+          data-val="${this.escAttr(i)}"
+          data-filter-id="${this.escAttr(e)}">✕</button>
+      </span>`).join(""), this.bindChips(e, s);
+    const o = this.container.querySelector(
+      `.ds-fp-v3-ms-trigger[data-filter-id="${e}"] .ds-fp-v3-ms-display`
+    );
+    o && (o.textContent = t.tempValues.length === 1 ? this.optLabel(e, t.tempValues[0]) : `${t.tempValues.length} selected`);
+  }
+  // ── Emit reset-all signal ──────────────────────────────────────────────────
+  resetAll() {
+    this.state.forEach((e) => {
+      e.tempValues = [], e.activeValues = [];
+    }), this.repaintBadges(), this.activePopoverId && this.closePopover(this.activePopoverId), this.onFilterChange("__reset_all__", null);
+  }
+  // ── Utils ──────────────────────────────────────────────────────────────────
+  optLabel(e, t) {
+    const s = this.state.get(e);
+    if (!s) return t;
+    const r = s.options.find((o) => (typeof o == "string" ? o : o.value) === t);
+    return r ? typeof r == "string" ? r : r.label : t;
+  }
   escAttr(e) {
     return String(e != null ? e : "").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
   }
@@ -728,9 +1022,9 @@ class pe {
     return String(e != null ? e : "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 }
-const H = class H {
+const N = class N {
   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.activeFilterOperators = {}, this.activeLocalFilters = {}, 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,45 +1046,45 @@ const H = class H {
     this.chartRenderers.forEach((e) => e.destroy()), this.chartRenderers.clear(), this.root.innerHTML = "";
   }
   exportPDF() {
-    var n, p;
+    var p, 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 : "";
-    i && (i.style.height = "auto", i.style.overflow = "visible");
-    const o = Array.from(e.querySelectorAll(".ds-table-scroll")), l = o.map((f) => ({
-      el: f,
-      overflow: f.style.overflow,
-      maxHeight: f.style.maxHeight,
-      height: f.style.height
+    const r = this.root.querySelector("#ds-canvas"), o = (p = r == null ? void 0 : r.style.height) != null ? p : "", i = (n = r == null ? void 0 : r.style.overflow) != null ? n : "";
+    r && (r.style.height = "auto", r.style.overflow = "visible");
+    const a = Array.from(e.querySelectorAll(".ds-table-scroll")), f = a.map((g) => ({
+      el: g,
+      overflow: g.style.overflow,
+      maxHeight: g.style.maxHeight,
+      height: g.style.height
     }));
-    o.forEach((f) => {
-      f.style.overflow = "visible", f.style.maxHeight = "none", f.style.height = "auto";
+    a.forEach((g) => {
+      g.style.overflow = "visible", g.style.maxHeight = "none", g.style.height = "auto";
     });
-    const d = e.offsetWidth, h = parseInt(e.style.height, 10) || e.offsetHeight, b = e.getBoundingClientRect().top + window.scrollY;
+    const h = e.offsetWidth, v = parseInt(e.style.height, 10) || e.offsetHeight, m = e.getBoundingClientRect().top + window.scrollY;
     import("./html2canvas.esm-CzwMv54K.js").then(
-      ({ default: f }) => f(e, {
+      ({ default: g }) => g(e, {
         scale: 2,
         useCORS: !0,
         allowTaint: !0,
         logging: !1,
-        width: d,
-        height: h,
-        windowWidth: d,
-        windowHeight: h,
+        width: h,
+        height: v,
+        windowWidth: h,
+        windowHeight: v,
         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: -m
+      }).then((u) => {
+        this.root.style.height = t, this.root.style.overflow = s, r && (r.style.height = o, r.style.overflow = i), f.forEach(({ el: b, overflow: c, maxHeight: d, height: l }) => {
+          b.style.overflow = c, b.style.maxHeight = d, b.style.height = l;
+        }), import("./jspdf.es.min-d9hlG26J.js").then((b) => b.j).then(({ jsPDF: b }) => {
+          const c = u.width / 2, d = u.height / 2, l = new b({
+            orientation: c >= d ? "landscape" : "portrait",
             unit: "px",
-            format: [u, g]
+            format: [c, d]
           });
-          k.addImage(m.toDataURL("image/png"), "PNG", 0, 0, u, g), k.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
+          l.addImage(u.toDataURL("image/png"), "PNG", 0, 0, c, d), l.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
         });
       })
     );
@@ -799,30 +1093,42 @@ const H = class H {
     this.renderData.components.forEach((e) => {
       const t = this.renderData.data[e.id];
       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 : "");
+      const s = Object.keys(t[0]), r = [s.join(","), ...t.map(
+        (i) => s.map((a) => {
+          var f;
+          return JSON.stringify((f = i[a]) != null ? f : "");
         }).join(",")
       )].join(`
 `);
       Object.assign(document.createElement("a"), {
-        href: URL.createObjectURL(new Blob([i], { type: "text/csv" })),
+        href: URL.createObjectURL(new Blob([r], { type: "text/csv" })),
         download: `${e.title || e.id}.csv`
       }).click();
     });
   }
+  /** Returns a snapshot of the currently active filter values (used by DeepspotSDK onTabSwitch). */
+  getActiveFilters() {
+    return { ...this.activeFilters };
+  }
+  /** Returns a snapshot of the active filter operators (=, LIKE, IN, etc.) keyed by applyToField. */
+  getActiveFilterOperators() {
+    return { ...this.activeFilterOperators };
+  }
+  /** Returns local (component-scoped) filter values keyed by filterId. */
+  getActiveLocalFilters() {
+    return { ...this.activeLocalFilters };
+  }
   updateFilterValues(e) {
     var t;
     Object.assign(this.activeFilters, e), (t = this.filterRenderer) == null || t.updateValues(e);
   }
   // ── Shell ─────────────────────────────────────────────────────────────────
   buildShell() {
-    const e = this.opts.embedLevel, t = this.renderData.dashboard.pages, s = e === "dashboard" && t.length > 1, i = e === "page" || e === "dashboard";
+    const e = this.opts.embedLevel, t = this.renderData.dashboard.pages, s = e === "dashboard" && t.length > 1, r = e === "page" || e === "dashboard";
     this.root.innerHTML = `
       ${this.opts.hideExport ? "" : '<div class="ds-toolbar" id="ds-toolbar"></div>'}
       ${s ? '<nav class="ds-page-nav" id="ds-page-nav"></nav>' : ""}
-      ${i ? '<nav class="ds-page-nav" id="ds-tab-nav"></nav>' : ""}
+      ${r ? '<nav class="ds-page-nav" id="ds-tab-nav"></nav>' : ""}
       <div id="ds-filter-container"></div>
       <div class="ds-canvas" id="ds-canvas">
         <div class="ds-grid" id="ds-grid"></div>
@@ -832,13 +1138,17 @@ const H = class H {
         <div class="ds-embed-spinner"></div>
       </div>
     `, 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);
+    const o = this.root.querySelector("#ds-filter-container");
+    this.filterRenderer = new ge(o, (i, a, f) => {
+      var b, c, d, l, T, w, k, x, $, y, S;
+      if (i === "__reset_all__") {
+        this.activeFilters = {}, this.activeFilterOperators = {}, this.activeLocalFilters = {}, (c = (b = this.opts).onFilterChange) == null || c.call(b, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
+        return;
+      }
+      const h = (d = this.renderData.filters) == null ? void 0 : d.find((C) => C.filterId === i), v = (l = this.renderData.components) == null ? void 0 : l.find(
+        (C) => C.type === "inline-filter" && C.id === i
+      ), m = (h == null ? void 0 : h.applyToField) || ((T = v == null ? void 0 : v.properties) == null ? void 0 : T.applyToField) || i, p = (x = (k = h == null ? void 0 : h.columnMappings) != null ? k : (w = v == null ? void 0 : v.properties) == null ? void 0 : w.columnMappings) != null ? x : {}, g = (($ = h == null ? void 0 : h.targetComponents) != null ? $ : []).length > 0 || Object.keys(p).length > 0, u = a === "" || a === null || a === void 0 || Array.isArray(a) && a.length === 0;
+      g ? u ? delete this.activeLocalFilters[i] : this.activeLocalFilters[i] = { value: a, operator: f || "=" } : u ? (delete this.activeFilters[m], delete this.activeFilterOperators[m]) : (this.activeFilters[m] = a, f ? this.activeFilterOperators[m] = f : delete this.activeFilterOperators[m]), (S = (y = this.opts).onFilterChange) == null || S.call(y, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
     });
   }
   buildExportToolbar() {
@@ -860,9 +1170,9 @@ const H = class H {
         data-page-id="${t.pageId}">${t.title}</button>
     `).join(""), e.querySelectorAll(".ds-page-tab").forEach((t) => {
       t.addEventListener("click", () => {
-        var i, r;
+        var r, o;
         const s = t.dataset.pageId;
-        s === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(s, (r = (i = this.getTabsForPage(s)[0]) == null ? void 0 : i.id) != null ? r : "");
+        s === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(s, (o = (r = this.getTabsForPage(s)[0]) == null ? void 0 : r.id) != null ? o : "");
       });
     }));
   }
@@ -876,13 +1186,13 @@ const H = class H {
       e.style.display = "none";
       return;
     }
-    e.style.display = "", e.innerHTML = s.map((i) => `
-      <button class="ds-page-tab ${i.id === this.activeTabId ? "ds-active" : ""}"
-        data-tab-id="${i.id}" data-page-id="${t}">${i.title}</button>
-    `).join(""), e.querySelectorAll(".ds-page-tab").forEach((i) => {
-      i.addEventListener("click", () => {
-        const r = i.dataset.tabId, a = i.dataset.pageId;
-        r === this.activeTabId && a === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(a, r);
+    e.style.display = "", e.innerHTML = s.map((r) => `
+      <button class="ds-page-tab ${r.id === this.activeTabId ? "ds-active" : ""}"
+        data-tab-id="${r.id}" data-page-id="${t}">${r.title}</button>
+    `).join(""), e.querySelectorAll(".ds-page-tab").forEach((r) => {
+      r.addEventListener("click", () => {
+        const o = r.dataset.tabId, i = r.dataset.pageId;
+        o === this.activeTabId && i === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(i, o);
       });
     });
   }
@@ -901,88 +1211,133 @@ const H = class H {
   // components (type='inline-filter' in renderData.components[]).
   // Inline-filter components are NOT rendered in the grid — they appear here.
   renderFilterBar() {
-    if (this.opts.hideGlobalFilters) return;
-    const e = [
-      ...this.renderData.filters || [],
-      ...this.inlineFiltersAsDefinitions()
-    ];
-    this.filterRenderer.render(e, this.activeFilters), this.fetchFilterOptions();
+    this.opts.hideGlobalFilters || (this.filterRenderer.render(this.globalFilters(), this.mergedFilterValues()), this.fetchFilterOptions());
   }
   updateFilterBar() {
-    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 */
+    this.opts.hideGlobalFilters || (this.filterRenderer.render(this.globalFilters(), this.mergedFilterValues()), this.fetchFilterOptions());
+  }
+  /** Combines global activeFilters and local filter values (keyed by filterId)
+   *  so FilterRenderer can show correct active state for targeted filters. */
+  mergedFilterValues() {
+    const e = { ...this.activeFilters };
+    for (const [t, { value: s }] of Object.entries(this.activeLocalFilters))
+      e[t] = s;
+    return e;
+  }
+  /**
+   * Returns true when a filter should appear in the global top filter bar.
+   * A filter is global when the matching inline-filter component has
+   * filter_scope/scope !== 'local' and filterLevel !== 'component'.
+   */
+  filterIsGlobal(e) {
+    var r, o;
+    const t = (this.renderData.components || []).find(
+      (i) => i.type === "inline-filter" && i.id === e
+    );
+    if (t) {
+      const i = ((r = t.properties) == null ? void 0 : r.filter_scope) || ((o = t.properties) == null ? void 0 : o.scope);
+      if (i === "local") return !1;
+      if (i === "global") return !0;
+    }
+    const s = (this.renderData.filters || []).find((i) => i.filterId === e);
+    return !(s != null && s.filterLevel) || s.filterLevel === "global";
+  }
+  /** Filters from renderData.filters[] that should appear in the global top panel. */
+  globalFilters() {
+    return (this.renderData.filters || []).filter((e) => this.filterIsGlobal(e.filterId));
+  }
+  /**
+   * Filters that are component-scoped (filter_scope='local').
+   * Source of truth is filters[] — which has applyToField, targetComponents, etc.
+   * The matching inline-filter component in components[] provides the scope signal.
+   */
   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;
-      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: ((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,
-        applyToField: ((d = e.properties) == null ? void 0 : d.applyToField) || e.id
-      };
-    });
+    return this.opts.hideInlineFilters ? [] : (this.renderData.filters || []).filter((e) => {
+      var t, s;
+      return !this.filterIsGlobal(e.filterId) && ((s = (t = e.targetComponents) == null ? void 0 : t.length) != null ? s : 0) > 0;
+    }).map((e) => ({ ...e, filterLevel: "component" }));
   }
   async fetchFilterOptions() {
-    if (this.opts.onFetchFilterOptions)
-      for (const e of this.renderData.filters) {
-        if (e.type !== "dropdown" && e.type !== "multi-select" || e.options && e.options.length > 0) continue;
-        const t = await this.opts.onFetchFilterOptions(e.filterId);
-        t.length > 0 && this.filterRenderer.updateOptions(e.filterId, t);
-      }
+    if (this.opts.onFetchFilterOptions) {
+      for (const e of this.globalFilters())
+        if (!(e.type !== "dropdown" && e.type !== "multi-select") && !(e.options && e.options.length > 0)) {
+          this.filterRenderer.setLoading(e.filterId, !0);
+          try {
+            const t = await this.opts.onFetchFilterOptions(e.filterId);
+            this.filterRenderer.updateOptions(e.filterId, t);
+          } catch (t) {
+            this.filterRenderer.setLoading(e.filterId, !1);
+          }
+        }
+    }
   }
   // ── Grid ──────────────────────────────────────────────────────────────────
   renderGrid() {
+    var m;
     this.hideTabSpinner();
     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 p = this.root.querySelector("#ds-canvas"), n = this.renderData.dashboard.pages.find(
+        (u) => u.pageId === this.activePageId
+      ), g = (n == null ? void 0 : n.backgroundColor) || "";
+      p && (p.style.background = g), this.root.style.background = g;
     }
-    this.chartRenderers.forEach((d) => d.destroy()), this.chartRenderers.clear();
+    this.chartRenderers.forEach((p) => p.destroy()), this.chartRenderers.clear();
     const t = (this.renderData.components || []).filter(
-      (d) => d.type !== "inline-filter"
+      (p) => p.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, 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 = [];
-    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);
+    const s = e.clientWidth || this.root.clientWidth || 800, r = t.map((p) => p.position), o = r.length ? Math.min(...r.map((p) => p.y)) : 0, i = new ie(s, o);
+    e.style.height = `${ie.totalHeight(r)}px`, e.innerHTML = "";
+    const a = 36, f = this.inlineFiltersAsDefinitions(), h = /* @__PURE__ */ new Map();
+    for (const p of f)
+      for (const n of (m = p.targetComponents) != null ? m : [])
+        h.has(n) || h.set(n, []), h.get(n).push(p);
+    const v = [];
+    t.forEach((p) => {
+      var d, l, T, w, k;
+      const n = document.createElement("div");
+      if (n.className = "ds-component-wrapper", n.dataset.componentId = p.id, i.applyStyles(n, p.position), !this.opts.hideBackground) {
+        const x = ((l = (d = p.properties) == null ? void 0 : d.styleConfig) == null ? void 0 : l.backgroundColor) || ((T = p.properties) == null ? void 0 : T.backgroundColor);
+        x && (n.style.background = x);
       }
-      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(n);
+      const g = i.toPx(p.position), u = Math.max(50, g.height - a), b = document.createElement("div");
+      b.style.cssText = "width:100%;height:100%;", n.appendChild(b);
+      const c = this.getComponentDescription(p);
+      if (c) {
+        const x = this.getTooltipEl();
+        n.addEventListener("mouseenter", () => {
+          x.textContent = c, x.style.display = "block";
+          const $ = n.getBoundingClientRect(), y = x.offsetHeight || 36;
+          window.innerHeight - $.bottom >= y + 6 ? x.style.top = `${$.bottom + 4}px` : x.style.top = `${$.top - y - 4}px`, x.style.left = `${$.left}px`, x.style.width = `${$.width}px`;
+        }), n.addEventListener("mouseleave", () => {
+          x.style.display = "none";
+        });
+      }
+      if (!this.opts.hideInlineFilters) {
+        const x = [
+          ...(w = h.get(p.id)) != null ? w : [],
+          ...(k = h.get("__all__")) != null ? k : []
+        ].filter(($, y, S) => S.findIndex((C) => C.filterId === $.filterId) === y);
+        x.length > 0 && this.attachInlineFilterBtn(n, x);
+      }
+      v.push(
+        this.renderComponent(b, p, u).catch((x) => {
+          console.error(`[Deepspot SDK] Failed to render component ${p.id} (${p.type}):`, x), b.innerHTML = `<div style="padding:8px;color:#ef4444;font-size:12px;">⚠ ${p.type} render error</div>`;
         })
       );
-    }), Promise.all(l).catch(() => {
+    }), Promise.all(v).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;
-    const i = this.renderData.data[t.id] || [], r = this.opts.theme;
+    var i, a, f, h, v, m, p, n, g, u, b, c, d, l, T, w, k, x, $, y, S, C, P, U, W, Y, J, X, Z, Q, ee, te, se, re, oe;
+    const r = this.renderData.data[t.id] || [], o = this.opts.theme;
     switch (t.type) {
       case "bar":
       case "line":
@@ -991,82 +1346,307 @@ 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 F = new ne(e);
+        await F.render(t, r, o, s), this.chartRenderers.set(t.id, F);
         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 F = this.opts.onFetchTablePage ? (L, E) => this.opts.onFetchTablePage(t.id, L, E) : void 0;
+        this.tableRenderer.render(e, t, r, F);
         break;
       }
       case "number-card":
-        this.cardRenderer.render(e, t, i);
+        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 || "", 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}` : ""
-        ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-heading" style="${F}">${v}</div>`;
+        const F = ((a = (i = t.properties) == null ? void 0 : i.data) == null ? void 0 : a.dataContent) || ((f = t.properties) == null ? void 0 : f.content) || t.title || "", L = ((h = t.properties) == null ? void 0 : h.styleConfig) || {}, E = this.scToInlineStyle(L), I = this.opts.hideBackground ? {} : this.parseTwColor((m = (v = t.properties) == null ? void 0 : v.color) != null ? m : ""), R = [[
+          I.bg ? `background:${I.bg}` : "",
+          I.text ? `color:${I.text}` : ""
+        ].filter(Boolean).join(";"), E].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-heading" style="${R}">${F}</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}` : ""
-        ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-subheading" style="${F}">${v}</div>`;
+        const F = ((n = (p = t.properties) == null ? void 0 : p.data) == null ? void 0 : n.dataContent) || ((g = t.properties) == null ? void 0 : g.content) || t.title || "", L = ((u = t.properties) == null ? void 0 : u.styleConfig) || {}, E = this.scToInlineStyle(L), I = this.opts.hideBackground ? {} : this.parseTwColor((c = (b = t.properties) == null ? void 0 : b.color) != null ? c : ""), R = [[
+          I.bg ? `background:${I.bg}` : "",
+          I.text ? `color:${I.text}` : ""
+        ].filter(Boolean).join(";"), E].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-subheading" style="${R}">${F}</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}` : ""
-        ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-body" style="${F}">${v}</div>`;
+        const F = ((l = (d = t.properties) == null ? void 0 : d.data) == null ? void 0 : l.dataContent) || ((T = t.properties) == null ? void 0 : T.content) || "", L = ((w = t.properties) == null ? void 0 : w.styleConfig) || {}, E = this.scToInlineStyle(L), I = this.opts.hideBackground ? {} : this.parseTwColor((x = (k = t.properties) == null ? void 0 : k.color) != null ? x : ""), R = [[
+          I.bg ? `background:${I.bg}` : "",
+          I.text ? `color:${I.text}` : ""
+        ].filter(Boolean).join(";"), E].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-body" style="${R}">${F}</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}` : ""
-        ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-box" style="${F}">${v}</div>`;
+        const F = ((y = ($ = t.properties) == null ? void 0 : $.data) == null ? void 0 : y.dataContent) || ((S = t.properties) == null ? void 0 : S.content) || "", L = ((C = t.properties) == null ? void 0 : C.styleConfig) || {}, E = this.scToInlineStyle(L), I = this.opts.hideBackground ? {} : this.parseTwColor((U = (P = t.properties) == null ? void 0 : P.color) != null ? U : ""), R = [[
+          I.bg ? `background:${I.bg}` : "",
+          I.text ? `color:${I.text}` : ""
+        ].filter(Boolean).join(";"), E].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-box" style="${R}">${F}</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}` : ""
-        ].filter(Boolean).join(";"), S].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-body" style="${F}">${v}</div>`;
+        const F = ((Y = (W = t.properties) == null ? void 0 : W.data) == null ? void 0 : Y.dataContent) || ((J = t.properties) == null ? void 0 : J.content) || "", L = ((X = t.properties) == null ? void 0 : X.styleConfig) || {}, E = this.scToInlineStyle(L), I = this.opts.hideBackground ? {} : this.parseTwColor((Q = (Z = t.properties) == null ? void 0 : Z.color) != null ? Q : ""), R = [[
+          I.bg ? `background:${I.bg}` : "",
+          I.text ? `color:${I.text}` : ""
+        ].filter(Boolean).join(";"), E].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-body" style="${R}">${F}</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 F = ((te = (ee = t.properties) == null ? void 0 : ee.data) == null ? void 0 : te.dataContent) || ((se = t.properties) == null ? void 0 : se.content) || t.title || "", L = ((re = t.properties) == null ? void 0 : re.styleConfig) || {}, E = !this.opts.hideBackground && L.backgroundColor ? `background:${L.backgroundColor};` : "", I = L.color ? `color:${L.color};` : L.textColor ? `color:${L.textColor};` : "";
         e.innerHTML = `
-          <div class="ds-header-component" style="${S}${y}">
-            <div class="ds-header-content">${v}</div>
+          <div class="ds-header-component" style="${E}${I}">
+            <div class="ds-header-content">${F}</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 F = ((oe = t.properties) == null ? void 0 : oe.styleConfig) || {}, L = !this.opts.hideBackground && F.backgroundColor ? `background:${F.backgroundColor};` : "";
         e.innerHTML = `
-          <div class="ds-section-wrapper" style="${x}">
+          <div class="ds-section-wrapper" style="${L}">
             ${t.title ? `<div class="ds-section-title">${t.title}</div>` : ""}
           </div>`;
         break;
       }
     }
   }
+  // ── Inline-filter funnel button on chart wrappers ────────────────────────
+  attachInlineFilterBtn(e, t) {
+    var a;
+    e.style.overflow = "visible";
+    const s = (a = e.dataset.componentId) != null ? a : "", r = document.createElement("button");
+    r.type = "button", r.className = "ds-comp-filter-btn", r.title = "Filter", r.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
+    </svg>`;
+    const o = document.createElement("div");
+    o.className = "ds-comp-filter-pop", o.style.display = "none", this.buildInlineFilterPop(o, t, s), r.addEventListener("click", (f) => {
+      f.stopPropagation();
+      const h = o.style.display !== "none";
+      document.querySelectorAll(".ds-comp-filter-pop").forEach((v) => {
+        v.style.display = "none";
+      }), o.style.display = h ? "none" : "";
+    }), document.addEventListener("mousedown", (f) => {
+      e.contains(f.target) || (o.style.display = "none");
+    }), (() => {
+      const f = t.some((h) => {
+        const v = h.applyToField || h.filterId, m = this.activeFilters[v] !== void 0 && this.activeFilters[v] !== "", p = this.activeLocalFilters[h.filterId] !== void 0;
+        return m || p;
+      });
+      r.classList.toggle("ds-comp-filter-btn-active", f);
+    })(), e.appendChild(r), e.appendChild(o);
+  }
+  buildInlineFilterPop(e, t, s) {
+    var g, u, b;
+    const r = (c) => {
+      var T;
+      const d = (this.renderData.components || []).find(
+        (w) => w.type === "inline-filter" && w.id === c.filterId
+      ), l = (T = d == null ? void 0 : d.properties) == null ? void 0 : T.columnMappings;
+      return (l == null ? void 0 : l[s]) || c.applyToField || c.filterId;
+    }, o = (c) => c.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), i = (c) => c.replace(/"/g, "&quot;").replace(/'/g, "&#39;"), a = [
+      { value: "=", label: "Equals (=)" },
+      { value: "!=", label: "Not Equals (!=)" },
+      { value: "LIKE", label: "Contains" },
+      { value: "NOT LIKE", label: "Not Contains" },
+      { value: "STARTS_WITH", label: "Starts With" },
+      { value: "IN", label: "In (Multiple)" },
+      { value: "NOT IN", label: "Not In" },
+      { value: ">", label: "Greater Than (>)" },
+      { value: ">=", label: "Greater or Equal (>=)" },
+      { value: "<", label: "Less Than (<)" },
+      { value: "<=", label: "Less or Equal (<=)" },
+      { value: "IS NULL", label: "Is Empty" },
+      { value: "IS NOT NULL", label: "Is Not Empty" }
+    ], f = /* @__PURE__ */ new Map();
+    for (const c of t) {
+      const d = this.activeLocalFilters[c.filterId], l = (g = d == null ? void 0 : d.value) != null ? g : this.activeFilters[r(c)], T = l ? Array.isArray(l) ? l.map(String) : [String(l)] : [], w = (d == null ? void 0 : d.operator) || c.filterOperator || "=";
+      f.set(c.filterId, { pendingValues: [...T], operator: w, search: "" });
+    }
+    const h = (c) => `<select class="ds-fp-op-select">
+        ${a.map(
+      (d) => `<option value="${i(d.value)}"${d.value === c ? " selected" : ""}>${d.label}</option>`
+    ).join("")}
+      </select>`, v = (c, d) => {
+      const l = c.options || [];
+      if (!l.length)
+        return '<div class="ds-fp-opts-msg"><span class="ds-dd-spinner"></span> Loading…</div>';
+      const T = d.search.toLowerCase(), w = l.filter(
+        (k) => (typeof k == "string" ? k : k.label).toLowerCase().includes(T)
+      );
+      return w.length ? w.map((k) => {
+        const x = typeof k == "string" ? k : k.value, $ = typeof k == "string" ? k : k.label, y = d.pendingValues.includes(x);
+        return `<label class="ds-fp-opt${y ? " ds-fp-opt-on" : ""}" data-val="${i(x)}">
+          <span class="ds-fp-cb${y ? " ds-fp-cb-on" : ""}">
+            ${y ? `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+                  stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="20 6 9 17 4 12"/>
+                 </svg>` : ""}
+          </span>
+          <span class="ds-fp-opt-lbl">${o($)}</span>
+        </label>`;
+      }).join("") : '<div class="ds-fp-opts-msg">No matches</div>';
+    }, m = (c) => {
+      const d = f.get(c.filterId);
+      return `
+        <div class="ds-fp-item ds-fp-item-expanded" data-filter-id="${i(c.filterId)}">
+          <div class="ds-fp-item-hd">
+            <span class="ds-fp-item-name">${o(c.label)}</span>
+            <svg class="ds-fp-chevron" style="transform:rotate(180deg)"
+              viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </div>
+          <div class="ds-fp-item-body">
+            <div class="ds-fp-op-row">
+              <span class="ds-fp-op-lbl">Operator</span>
+              ${h(d.operator)}
+            </div>
+            <div class="ds-fp-ms">
+              ${d.pendingValues.length ? `<div class="ds-fp-chips-row">
+                ${d.pendingValues.map(
+        (l) => `<span class="ds-fp-chip">${o(l)}<button type="button" class="ds-fp-chip-x" data-val="${i(l)}">✕</button></span>`
+      ).join("")}
+              </div>` : ""}
+              <div class="ds-fp-search-wrap">
+                <input type="text" class="ds-fp-ms-search"
+                  placeholder="Search ${i(c.label)}…"
+                  value="${i(d.search)}"/>
+                <svg class="ds-fp-search-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                  stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="18 15 12 9 6 15"/>
+                </svg>
+              </div>
+              <div class="ds-fp-opts" data-filter-id="${i(c.filterId)}">
+                ${v(c, d)}
+              </div>
+            </div>
+            <button type="button" class="ds-fp-apply" data-apply-id="${i(c.filterId)}">✓ Apply Filter</button>
+          </div>
+        </div>`;
+    }, p = t.filter((c) => {
+      if (this.activeLocalFilters[c.filterId] !== void 0) return !0;
+      const d = this.activeFilters[r(c)];
+      return d !== void 0 && d !== "" && !(Array.isArray(d) && d.length === 0);
+    }).length;
+    e.innerHTML = `
+      <div class="ds-fp-panel ds-fp-panel-pop">
+        <div class="ds-fp-panel-hd">
+          <div class="ds-fp-panel-title">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <line x1="3" y1="6" x2="21" y2="6"/>
+              <line x1="3" y1="12" x2="21" y2="12"/>
+              <line x1="3" y1="18" x2="21" y2="18"/>
+            </svg>
+            <span>Filters</span>
+          </div>
+          <button type="button" class="ds-fp-close-btn ds-pop-close">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+        <div class="ds-fp-reset-section" style="display:${p ? "" : "none"}">
+          <button type="button" class="ds-fp-reset-all ds-pop-reset">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="1 4 1 10 7 10"/>
+              <path d="M3.51 15a9 9 0 1 0 .49-3.5"/>
+            </svg>
+            Reset All Filters
+          </button>
+        </div>
+        <div class="ds-fp-items">
+          ${t.map(m).join("")}
+        </div>
+      </div>`, (u = e.querySelector(".ds-pop-close")) == null || u.addEventListener("click", () => {
+      e.style.display = "none";
+    }), (b = e.querySelector(".ds-pop-reset")) == null || b.addEventListener("click", () => {
+      var c, d;
+      t.forEach((l) => {
+        delete this.activeLocalFilters[l.filterId];
+      }), (d = (c = this.opts).onFilterChange) == null || d.call(c, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId), e.style.display = "none";
+    });
+    const n = (c, d, l) => {
+      const T = t.find((x) => x.filterId === c), w = d.querySelector(".ds-fp-ms");
+      if (w) {
+        let x = w.querySelector(".ds-fp-chips-row");
+        if (l.pendingValues.length) {
+          const $ = l.pendingValues.map(
+            (y) => `<span class="ds-fp-chip">${o(y)}<button type="button" class="ds-fp-chip-x" data-val="${i(y)}">✕</button></span>`
+          ).join("");
+          x ? x.innerHTML = $ : (x = document.createElement("div"), x.className = "ds-fp-chips-row", x.innerHTML = $, w.insertBefore(x, w.querySelector(".ds-fp-search-wrap"))), x.querySelectorAll(".ds-fp-chip-x").forEach((y) => {
+            y.addEventListener("click", (S) => {
+              S.stopPropagation(), l.pendingValues = l.pendingValues.filter((C) => {
+                var P;
+                return C !== ((P = y.dataset.val) != null ? P : "");
+              }), n(c, d, l);
+            });
+          });
+        } else
+          x == null || x.remove();
+      }
+      const k = d.querySelector(`.ds-fp-opts[data-filter-id="${c}"]`);
+      k && (k.innerHTML = v(T, l), k.querySelectorAll(".ds-fp-opt").forEach((x) => {
+        x.addEventListener("click", () => {
+          var y;
+          const $ = (y = x.dataset.val) != null ? y : "";
+          l.pendingValues.includes($) ? l.pendingValues = l.pendingValues.filter((S) => S !== $) : l.pendingValues = [...l.pendingValues, $], n(c, d, l);
+        });
+      }));
+    };
+    t.forEach((c) => {
+      var w, k, x, $;
+      const d = f.get(c.filterId), l = e.querySelector(`.ds-fp-item[data-filter-id="${c.filterId}"]`);
+      if (!l) return;
+      (w = l.querySelector(".ds-fp-op-select")) == null || w.addEventListener("change", (y) => {
+        d.operator = y.target.value;
+      });
+      const T = l.querySelector(".ds-fp-ms-search");
+      T && (T.addEventListener("input", () => {
+        d.search = T.value, n(c.filterId, l, d);
+      }), (k = l.querySelector(".ds-fp-search-caret")) == null || k.addEventListener("click", () => {
+        const y = l.querySelector(".ds-fp-opts");
+        y && (y.style.display = y.style.display === "none" ? "" : "none");
+      })), l.querySelectorAll(".ds-fp-chip-x").forEach((y) => {
+        y.addEventListener("click", (S) => {
+          S.stopPropagation(), d.pendingValues = d.pendingValues.filter((C) => {
+            var P;
+            return C !== ((P = y.dataset.val) != null ? P : "");
+          }), n(c.filterId, l, d);
+        });
+      }), l.querySelectorAll(".ds-fp-opt").forEach((y) => {
+        y.addEventListener("click", () => {
+          var C;
+          const S = (C = y.dataset.val) != null ? C : "";
+          d.pendingValues.includes(S) ? d.pendingValues = d.pendingValues.filter((P) => P !== S) : d.pendingValues = [...d.pendingValues, S], n(c.filterId, l, d);
+        });
+      }), (x = l.querySelector(`.ds-fp-apply[data-apply-id="${c.filterId}"]`)) == null || x.addEventListener("click", () => {
+        var S, C, P;
+        const y = d.pendingValues.length > 1 ? [...d.pendingValues] : (S = d.pendingValues[0]) != null ? S : "";
+        !y || Array.isArray(y) && !y.length ? delete this.activeLocalFilters[c.filterId] : this.activeLocalFilters[c.filterId] = { value: y, operator: d.operator || "=" }, (P = (C = this.opts).onFilterChange) == null || P.call(C, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId), e.style.display = "none";
+      }), !(($ = c.options) != null && $.length) && this.opts.onFetchFilterOptions && this.opts.onFetchFilterOptions(c.filterId).then((y) => {
+        l.querySelector(`.ds-fp-opts[data-filter-id="${c.filterId}"]`) && (c.options = y.map((C) => typeof C == "string" ? C : C.value), n(c.filterId, l, d));
+      }).catch(() => {
+      });
+    });
+  }
   // ── Spinner ───────────────────────────────────────────────────────────────
   showTabSpinner() {
     const e = this.root.querySelector("#ds-tab-loading"), t = this.root.querySelector("#ds-grid");
@@ -1084,8 +1664,8 @@ const H = class H {
    * (so it can support CSS gradients via `background` shorthand).
    */
   scToInlineStyle(e) {
-    const t = /* @__PURE__ */ new Set(["backgroundColor"]), s = (i) => i.replace(/([A-Z])/g, "-$1").toLowerCase();
-    return Object.entries(e).filter(([i, r]) => !t.has(i) && r != null && r !== "").map(([i, r]) => `${s(i)}:${r}`).join(";");
+    const t = /* @__PURE__ */ new Set(["backgroundColor"]), s = (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase();
+    return Object.entries(e).filter(([r, o]) => !t.has(r) && o != null && o !== "").map(([r, o]) => `${s(r)}:${o}`).join(";");
   }
   /**
    * Parse a Tailwind utility class string (e.g. "bg-violet-100 text-violet-600")
@@ -1117,19 +1697,39 @@ const H = class H {
         t.text = "#000000";
         continue;
       }
-      const i = /^(bg|text)-([a-z]+)-(\d+)$/.exec(s);
-      if (!i) continue;
-      const r = H.TW_PALETTE[i[2]], a = r == null ? void 0 : r[Number(i[3])];
-      a && (i[1] === "bg" && (t.bg = a), i[1] === "text" && (t.text = a));
+      const r = /^(bg|text)-([a-z]+)-(\d+)$/.exec(s);
+      if (!r) continue;
+      const o = N.TW_PALETTE[r[2]], i = o == null ? void 0 : o[Number(r[3])];
+      i && (r[1] === "bg" && (t.bg = i), r[1] === "text" && (t.text = i));
     }
     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, r, o;
+    if ((t = e.properties) != null && t.description) return String(e.properties.description);
+    try {
+      const i = (r = (s = e.properties) == null ? void 0 : s.data) == null ? void 0 : r.dataContent;
+      if (i) {
+        const a = typeof i == "string" ? JSON.parse(i) : i;
+        return (a == null ? void 0 : a.description) || ((o = a == null ? void 0 : a.config) == null ? void 0 : o.description) || "";
+      }
+    } catch (i) {
+    }
+    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 : [];
+    return (s = (t = this.renderData.dashboard.pages.find((r) => r.pageId === e)) == null ? void 0 : t.tabs) != null ? s : [];
   }
 };
-H.TW_PALETTE = {
+N.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" },
@@ -1153,8 +1753,8 @@ H.TW_PALETTE = {
   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 D = H;
-class he {
+let j = N;
+class pe {
   constructor(e, t) {
     this.chartRenderer = null, this.tableRenderer = new le(), this.cardRenderer = new ce(), this.root = e, this.theme = t;
   }
@@ -1167,8 +1767,8 @@ class he {
       </div>`;
       return;
     }
-    const i = e.data[s.id] || [];
-    this.renderComponent(s, i), t == null || t();
+    const r = e.data[s.id] || [];
+    this.renderComponent(s, r), t == null || t();
   }
   update(e) {
     const t = e.components[0];
@@ -1215,12 +1815,12 @@ class he {
     }
   }
 }
-let oe = !1;
-function q() {
-  if (!(oe || typeof document == "undefined")) {
-    oe = !0;
+let ae = !1;
+function K() {
+  if (!(ae || typeof document == "undefined")) {
+    ae = !0;
     try {
-      const w = `/* ─────────────────────────────────────────────────────────────────────────────
+      const A = `/* ─────────────────────────────────────────────────────────────────────────────
    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 +2050,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 ───────────────────────────────────────────────────────── */
@@ -1964,121 +2582,1788 @@ function q() {
   border-bottom-color: #334155;
 }
 
-/* ── v2: Inline filter (selection-filter placed in-grid) ───────────────────── */
+/* ── Filter panel (publish-page style: toggle + collapsible items + Apply) ─── */
 
-.ds-inline-filter {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 4px;
-  padding: 6px 10px;
+.ds-fp {
+  border-bottom: 1px solid #e5e7eb;
+  background: inherit;
 }
 
-.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-theme-dark .ds-fp {
+  border-bottom-color: #1e293b;
 }
 
-.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);
+/* ── Toggle bar ────────────────────────────────────────────────────────────── */
+.ds-fp-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
 }
 
-.ds-theme-dark .ds-inline-filter-select,
-.ds-theme-dark .ds-inline-filter-input {
-  background: #1e293b;
-  border-color: #334155;
-  color: #f1f5f9;
+/* ── Panel header ──────────────────────────────────────────────────────────── */
+.ds-fp-panel-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid #e5e7eb;
 }
 
-/* ── Export toolbar ────────────────────────────────────────────────────────── */
-.ds-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  padding: 8px 16px 0;
-  gap: 8px;
+.ds-theme-dark .ds-fp-panel-hd {
+  border-bottom-color: #334155;
 }
 
-.ds-toolbar-btn {
-  height: 30px;
-  padding: 0 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  background: #ffffff;
-  color: #374151;
-  cursor: pointer;
+.ds-fp-panel-title {
   display: flex;
   align-items: center;
-  gap: 5px;
-  transition: background 0.15s, border-color 0.15s;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
 }
 
-.ds-toolbar-btn:hover {
-  background: #f9fafb;
-  border-color: #9ca3af;
+.ds-theme-dark .ds-fp-panel-title {
+  color: #f1f5f9;
 }
 
-.ds-theme-dark .ds-toolbar-btn {
-  background: #1e293b;
-  border-color: #334155;
-  color: #e2e8f0;
+.ds-fp-panel-title svg {
+  width: 16px;
+  height: 16px;
+  color: #6b7280;
+  flex-shrink: 0;
 }
 
-.ds-theme-dark .ds-toolbar-btn:hover {
-  background: #0f172a;
-}
-`, e = document.createElement("style");
-      e.id = "deepspot-sdk-styles", e.textContent = w, document.head.appendChild(e);
-    } catch (w) {
-    }
-  }
-}
-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`);
-    return e;
-  }
-  return w;
-}
-class ge {
+.ds-fp-close-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  flex-shrink: 0;
+}
+
+.ds-fp-close-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.ds-fp-close-btn:hover {
+  border-color: #6366f1;
+  color: #6366f1;
+  background: #eef2ff;
+}
+
+.ds-theme-dark .ds-fp-close-btn {
+  border-color: #334155;
+  color: #94a3b8;
+}
+
+/* ── Reset All section (inside panel) ─────────────────────────────────────── */
+.ds-fp-reset-section {
+  padding: 10px 16px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.ds-theme-dark .ds-fp-reset-section {
+  border-bottom-color: #1e293b;
+}
+
+.ds-fp-reset-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: none;
+  background: transparent;
+  color: #6366f1;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.15s;
+}
+
+.ds-fp-reset-all svg {
+  width: 13px;
+  height: 13px;
+}
+
+.ds-fp-reset-all:hover {
+  color: #4338ca;
+}
+
+.ds-theme-dark .ds-fp-reset-all {
+  color: #818cf8;
+}
+
+.ds-fp-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #374151;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.ds-fp-toggle:hover {
+  border-color: #6366f1;
+  background: #f5f3ff;
+}
+
+.ds-theme-dark .ds-fp-toggle {
+  background: #1e293b;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-fp-funnel {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+
+.ds-fp-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: #6366f1;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.ds-fp-reset-all {
+  border: none;
+  background: transparent;
+  color: #6366f1;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  transition: color 0.15s;
+}
+
+.ds-fp-reset-all:hover {
+  color: #4338ca;
+}
+
+.ds-theme-dark .ds-fp-reset-all {
+  color: #818cf8;
+}
+
+/* ── Expandable panel ──────────────────────────────────────────────────────── */
+.ds-fp-panel {
+  padding: 0 16px 10px;
+}
+
+.ds-fp-items {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* ── Filter item ───────────────────────────────────────────────────────────── */
+.ds-fp-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fafafa;
+}
+
+.ds-theme-dark .ds-fp-item {
+  border-color: #334155;
+  background: #1e293b;
+}
+
+.ds-fp-item-hd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.12s;
+}
+
+.ds-fp-item-hd:hover {
+  background: #f0f0ff;
+}
+
+.ds-theme-dark .ds-fp-item-hd:hover {
+  background: #0f172a;
+}
+
+.ds-fp-item-name {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.ds-theme-dark .ds-fp-item-name {
+  color: #e2e8f0;
+}
+
+.ds-fp-val-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 10px;
+  background: #e0e7ff;
+  color: #4338ca;
+  white-space: nowrap;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-theme-dark .ds-fp-val-badge {
+  background: #312e81;
+  color: #a5b4fc;
+}
+
+.ds-fp-item-clear {
+  border: none;
+  background: transparent;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 2px;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: color 0.12s;
+  display: flex;
+  align-items: center;
+}
+
+.ds-fp-item-clear svg {
+  width: 13px;
+  height: 13px;
+}
+
+.ds-fp-item-clear:hover {
+  color: #6366f1;
+}
+
+.ds-fp-chevron {
+  width: 14px;
+  height: 14px;
+  color: #9ca3af;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+/* Indigo border + highlight when expanded */
+.ds-fp-item-expanded,
+.ds-fp-item:has(.ds-fp-item-body) {
+  border-color: #6366f1;
+  background: #fafafe;
+}
+
+.ds-theme-dark .ds-fp-item-expanded,
+.ds-theme-dark .ds-fp-item:has(.ds-fp-item-body) {
+  border-color: #6366f1;
+  background: #1e1e3a;
+}
+
+/* ── Item body (expanded content) ──────────────────────────────────────────── */
+.ds-fp-item-body {
+  padding: 4px 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.ds-theme-dark .ds-fp-item-body {
+  border-top-color: #334155;
+}
+
+/* ── Operator row ──────────────────────────────────────────────────────────── */
+.ds-fp-op-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ds-fp-op-lbl {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #9ca3af;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ds-fp-op-select {
+  flex: 1;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 12px;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ds-fp-op-select:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
+}
+
+.ds-theme-dark .ds-fp-op-select {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+/* ── Search wrap (input + caret button) ────────────────────────────────────── */
+.ds-fp-search-wrap {
+  display: flex;
+  align-items: center;
+  border: 1px solid #6366f1;
+  border-radius: 8px;
+  background: #fff;
+  overflow: hidden;
+  transition: box-shadow 0.15s;
+}
+
+.ds-fp-search-wrap:focus-within {
+  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
+}
+
+.ds-theme-dark .ds-fp-search-wrap {
+  background: #0f172a;
+  border-color: #6366f1;
+}
+
+.ds-fp-ms-search {
+  flex: 1;
+  height: 36px;
+  padding: 0 10px;
+  border: none;
+  outline: none;
+  font-size: 13px;
+  background: transparent;
+  color: #374151;
+}
+
+.ds-theme-dark .ds-fp-ms-search {
+  color: #e2e8f0;
+}
+
+.ds-fp-ms-search::placeholder {
+  color: #9ca3af;
+}
+
+.ds-fp-search-caret {
+  width: 32px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-left: 1px solid #e5e7eb;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: color 0.12s, background 0.12s;
+}
+
+.ds-fp-search-caret:hover {
+  color: #6366f1;
+  background: #eef2ff;
+}
+
+.ds-theme-dark .ds-fp-search-caret {
+  border-left-color: #334155;
+}
+
+/* ── Multi-select container ────────────────────────────────────────────────── */
+.ds-fp-ms {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-fp-ms {
+  border-color: #334155;
+}
+
+/* Chips row (shown above search when values selected) */
+.ds-fp-chips-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 0 4px;
+}
+
+.ds-fp-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px 2px 8px;
+  border-radius: 12px;
+  background: #e0e7ff;
+  color: #4338ca;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.ds-theme-dark .ds-fp-chip {
+  background: #312e81;
+  color: #a5b4fc;
+}
+
+.ds-fp-chip-x {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 10px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.7;
+  transition: opacity 0.1s;
+}
+
+.ds-fp-chip-x:hover {
+  opacity: 1;
+}
+
+/* ds-fp-ms-search styles live in .ds-fp-search-wrap above */
+
+/* Options list */
+.ds-fp-opts {
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.ds-fp-opt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  cursor: pointer;
+  transition: background 0.1s;
+  user-select: none;
+}
+
+.ds-fp-opt:hover {
+  background: #f0f0ff;
+}
+
+.ds-theme-dark .ds-fp-opt:hover {
+  background: #1e293b;
+}
+
+.ds-fp-opt-on {
+  background: #eef2ff;
+}
+
+.ds-theme-dark .ds-fp-opt-on {
+  background: #1e293b;
+}
+
+/* Custom checkbox */
+.ds-fp-cb {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #d1d5db;
+  border-radius: 4px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.1s, background 0.1s;
+}
+
+.ds-fp-cb-on {
+  border-color: #6366f1;
+  background: #6366f1;
+}
+
+.ds-fp-cb-on svg {
+  width: 10px;
+  height: 10px;
+  stroke: #fff;
+}
+
+.ds-fp-opt-lbl {
+  font-size: 12px;
+  color: #374151;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-theme-dark .ds-fp-opt-lbl {
+  color: #cbd5e1;
+}
+
+.ds-fp-opts-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 14px 12px;
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+/* ── Apply Filter button ───────────────────────────────────────────────────── */
+.ds-fp-apply {
+  width: 100%;
+  padding: 9px 16px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #16a34a, #15803d);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+  letter-spacing: 0.01em;
+}
+
+.ds-fp-apply:hover {
+  opacity: 0.9;
+}
+
+.ds-fp-apply:active {
+  transform: scale(0.98);
+}
+
+/* ── Text / date inputs inside filter body ─────────────────────────────────── */
+.ds-fp-text-val {
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 13px;
+  background: #fff;
+  color: #374151;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ds-fp-text-val:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
+}
+
+.ds-theme-dark .ds-fp-text-val {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-fp-date-range {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ds-fp-date {
+  flex: 1;
+  height: 34px;
+  padding: 0 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 12px;
+  background: #fff;
+  color: #374151;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ds-fp-date:focus {
+  border-color: #6366f1;
+}
+
+.ds-fp-date-sep {
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+.ds-theme-dark .ds-fp-date {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+/* ── Component-level inline filter button (funnel icon on chart card) ──────── */
+.ds-comp-filter-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 10;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: rgba(255,255,255,0.9);
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  backdrop-filter: blur(4px);
+}
+
+.ds-comp-filter-btn:hover {
+  border-color: #6366f1;
+  color: #6366f1;
+  background: #fff;
+}
+
+.ds-comp-filter-btn-active {
+  border-color: #6366f1;
+  color: #6366f1;
+  background: #eef2ff;
+}
+
+.ds-comp-filter-btn svg {
+  width: 13px;
+  height: 13px;
+}
+
+.ds-theme-dark .ds-comp-filter-btn {
+  background: rgba(15,23,42,0.85);
+  border-color: #334155;
+  color: #94a3b8;
+}
+
+.ds-theme-dark .ds-comp-filter-btn-active {
+  border-color: #6366f1;
+  color: #818cf8;
+  background: #1e293b;
+}
+
+/* ── Inline filter popover ─────────────────────────────────────────────────── */
+.ds-comp-filter-pop {
+  position: absolute;
+  top: 38px;
+  right: 6px;
+  z-index: 9999;
+}
+
+/* Visual shell for the inline popover — same look as global filter panel */
+.ds-fp-panel-pop {
+  width: 300px;
+  max-height: 440px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
+}
+
+.ds-theme-dark .ds-fp-panel-pop {
+  background: #1e293b;
+  border-color: #334155;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+}
+
+.ds-cpop-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+}
+
+.ds-cpop-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6b7280;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.ds-theme-dark .ds-cpop-title {
+  color: #94a3b8;
+  border-bottom-color: #334155;
+}
+
+.ds-cpop-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 4px;
+}
+
+.ds-theme-dark .ds-cpop-label {
+  color: #e2e8f0;
+}
+
+.ds-cpop-opts-wrap {
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 6px;
+}
+
+.ds-theme-dark .ds-cpop-opts-wrap {
+  border-color: #334155;
+}
+
+.ds-cpop-opts {
+  max-height: 160px;
+  overflow-y: auto;
+}
+
+.ds-cpop-opt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  color: #374151;
+  transition: background 0.1s;
+  user-select: none;
+}
+
+.ds-cpop-opt:hover {
+  background: #f0f0ff;
+}
+
+.ds-theme-dark .ds-cpop-opt {
+  color: #cbd5e1;
+}
+
+.ds-theme-dark .ds-cpop-opt:hover {
+  background: #0f172a;
+}
+
+.ds-cpop-apply {
+  font-size: 12px;
+  padding: 7px 12px;
+}
+
+/* ── Custom dropdown filter (matches publish page SelectFilter) ────────────── */
+
+.ds-custom-dd {
+  position: relative;
+  min-width: 150px;
+}
+
+.ds-dd-trigger {
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #111827;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  white-space: nowrap;
+}
+
+.ds-dd-trigger:hover {
+  border-color: #6366f1;
+}
+
+.ds-dd-trigger:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.ds-theme-dark .ds-dd-trigger {
+  background: #1e293b;
+  border-color: #334155;
+  color: #f1f5f9;
+}
+
+.ds-dd-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+}
+
+/* "All" placeholder style */
+.ds-dd-trigger:not(.ds-dd-has-value) .ds-dd-value {
+  color: #9ca3af;
+}
+
+.ds-dd-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.ds-dd-clear {
+  font-size: 11px;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+.ds-dd-clear:hover {
+  color: #374151;
+}
+
+.ds-theme-dark .ds-dd-clear:hover {
+  color: #e2e8f0;
+}
+
+.ds-dd-arrow {
+  color: #9ca3af;
+  transition: transform 0.18s ease;
+  display: block;
+}
+
+/* ── Dropdown panel ────────────────────────────────────────────────────────── */
+
+.ds-dd-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  min-width: 180px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-dd-panel {
+  background: #1e293b;
+  border-color: #334155;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+/* Search row */
+.ds-dd-search-wrap {
+  padding: 8px 8px 6px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.ds-theme-dark .ds-dd-search-wrap {
+  border-bottom-color: #334155;
+}
+
+.ds-dd-search {
+  width: 100%;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 12px;
+  background: #f9fafb;
+  color: #374151;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.ds-dd-search:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+  background: #fff;
+}
+
+.ds-theme-dark .ds-dd-search {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-theme-dark .ds-dd-search:focus {
+  background: #1e293b;
+}
+
+/* Options list */
+.ds-dd-options {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.ds-dd-opt {
+  width: 100%;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  font-size: 13px;
+  color: #374151;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.ds-dd-opt:hover {
+  background: #eef2ff;
+}
+
+.ds-dd-opt-active {
+  background: #eef2ff;
+  color: #4338ca;
+  font-weight: 600;
+}
+
+.ds-dd-opt-active:hover {
+  background: #e0e7ff;
+}
+
+.ds-theme-dark .ds-dd-opt {
+  color: #cbd5e1;
+}
+
+.ds-theme-dark .ds-dd-opt:hover {
+  background: #0f172a;
+}
+
+.ds-theme-dark .ds-dd-opt-active {
+  background: #1e293b;
+  color: #818cf8;
+}
+
+.ds-dd-opt-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-dd-check {
+  color: #4338ca;
+  flex-shrink: 0;
+}
+
+.ds-theme-dark .ds-dd-check {
+  color: #818cf8;
+}
+
+/* Empty / loading message */
+.ds-dd-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 14px 12px;
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.ds-theme-dark .ds-dd-msg {
+  color: #64748b;
+}
+
+/* Spinner inside dropdown */
+.ds-dd-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #e5e7eb;
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: ds-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+/* ── 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;
+  justify-content: flex-end;
+  padding: 8px 16px 0;
+  gap: 8px;
+}
+
+.ds-toolbar-btn {
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  background: #ffffff;
+  color: #374151;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.ds-toolbar-btn:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+
+.ds-theme-dark .ds-toolbar-btn {
+  background: #1e293b;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-theme-dark .ds-toolbar-btn:hover {
+  background: #0f172a;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   v3 Badge-bar filter panel
+   Layout: [⊻ Filters:] [Filter A] [Filter B] [+ Add Filter]
+   Per-filter popovers open below the clicked badge.
+───────────────────────────────────────────────────────────────────────────── */
+
+/* Wrapper — relative so popovers can be absolutely positioned inside */
+.ds-fp-v3 {
+  position: relative;
+  border-bottom: 1px solid #e5e7eb;
+  background: inherit;
+}
+
+.ds-theme-dark .ds-fp-v3 {
+  border-bottom-color: #1e293b;
+}
+
+/* ── Horizontal bar ─────────────────────────────────────────────────────────── */
+.ds-fp-v3-bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 16px;
+}
+
+/* "⊻ Filters:" label */
+.ds-fp-v3-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-right: 2px;
+}
+
+.ds-fp-v3-label svg {
+  color: #9ca3af;
+}
+
+.ds-theme-dark .ds-fp-v3-label {
+  color: #94a3b8;
+}
+
+/* Container for all badge pills */
+.ds-fp-v3-badges {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+/* ── Filter badge pill ──────────────────────────────────────────────────────── */
+.ds-fp-v3-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 12px;
+  border: 1.5px solid #d1d5db;
+  border-radius: 20px;
+  background: #ffffff;
+  color: #374151;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
+  line-height: 1.4;
+}
+
+.ds-fp-v3-badge svg {
+  flex-shrink: 0;
+  color: #9ca3af;
+  transition: color 0.15s;
+}
+
+.ds-fp-v3-badge:hover {
+  border-color: #6366f1;
+  background: #f5f3ff;
+  color: #4338ca;
+}
+
+.ds-fp-v3-badge:hover svg {
+  color: #6366f1;
+}
+
+.ds-theme-dark .ds-fp-v3-badge {
+  background: #1e293b;
+  border-color: #334155;
+  color: #cbd5e1;
+}
+
+.ds-theme-dark .ds-fp-v3-badge:hover {
+  border-color: #6366f1;
+  background: #1e1e3a;
+  color: #a5b4fc;
+}
+
+/* Active state — green filled pill */
+.ds-fp-v3-badge-active {
+  border-color: #16a34a;
+  background: #16a34a;
+  color: #ffffff;
+}
+
+.ds-fp-v3-badge-active svg {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.ds-fp-v3-badge-active:hover {
+  border-color: #15803d;
+  background: #15803d;
+  color: #ffffff;
+}
+
+.ds-fp-v3-badge-active:hover svg {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ds-theme-dark .ds-fp-v3-badge-active {
+  border-color: #16a34a;
+  background: #16a34a;
+  color: #ffffff;
+}
+
+/* "+ Add Filter" ghost button */
+.ds-fp-v3-add {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border: 1.5px dashed #d1d5db;
+  border-radius: 20px;
+  background: transparent;
+  color: #9ca3af;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color 0.15s, color 0.15s;
+  line-height: 1.4;
+}
+
+.ds-fp-v3-add:hover {
+  border-color: #6366f1;
+  color: #6366f1;
+}
+
+.ds-theme-dark .ds-fp-v3-add {
+  border-color: #334155;
+  color: #64748b;
+}
+
+.ds-theme-dark .ds-fp-v3-add:hover {
+  border-color: #6366f1;
+  color: #818cf8;
+}
+
+/* ── Popover ────────────────────────────────────────────────────────────────── */
+.ds-fp-v3-pop {
+  position: absolute;
+  z-index: 9999;
+  width: 300px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-fp-v3-pop {
+  background: #1e293b;
+  border-color: #334155;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
+}
+
+/* Popover header */
+.ds-fp-v3-pop-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px 10px 14px;
+  border-bottom: 1px solid #f3f4f6;
+  background: #fafafa;
+}
+
+.ds-theme-dark .ds-fp-v3-pop-hd {
+  background: #0f172a;
+  border-bottom-color: #334155;
+}
+
+.ds-fp-v3-pop-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.ds-fp-v3-pop-title svg {
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.ds-theme-dark .ds-fp-v3-pop-title {
+  color: #e2e8f0;
+}
+
+.ds-theme-dark .ds-fp-v3-pop-title svg {
+  color: #94a3b8;
+}
+
+/* Action icon buttons (trash + close) */
+.ds-fp-v3-pop-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ds-fp-v3-pop-icon-btn {
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  flex-shrink: 0;
+}
+
+.ds-fp-v3-pop-icon-btn:hover {
+  border-color: #6366f1;
+  color: #6366f1;
+  background: #eef2ff;
+}
+
+.ds-theme-dark .ds-fp-v3-pop-icon-btn {
+  border-color: #334155;
+  color: #94a3b8;
+}
+
+.ds-theme-dark .ds-fp-v3-pop-icon-btn:hover {
+  border-color: #6366f1;
+  color: #818cf8;
+  background: #1e1e3a;
+}
+
+/* Popover body */
+.ds-fp-v3-pop-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px;
+}
+
+/* Field row (label + control) */
+.ds-fp-v3-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.ds-fp-v3-field-lbl {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #9ca3af;
+}
+
+.ds-theme-dark .ds-fp-v3-field-lbl {
+  color: #64748b;
+}
+
+/* Condition select */
+.ds-fp-v3-condition {
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 7px;
+  font-size: 12px;
+  background: #ffffff;
+  color: #374151;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ds-fp-v3-condition:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+}
+
+.ds-theme-dark .ds-fp-v3-condition {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+/* ── Multi-select widget ────────────────────────────────────────────────────── */
+.ds-fp-v3-ms-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* Trigger row */
+.ds-fp-v3-ms-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 7px;
+  background: #ffffff;
+  cursor: pointer;
+  font-size: 12px;
+  color: #374151;
+  transition: border-color 0.15s;
+  user-select: none;
+}
+
+.ds-fp-v3-ms-trigger:hover {
+  border-color: #6366f1;
+}
+
+.ds-theme-dark .ds-fp-v3-ms-trigger {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-fp-v3-ms-display {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+}
+
+/* When no value selected, show placeholder colour */
+.ds-fp-v3-ms-trigger:not(.ds-fp-v3-ms-has-value) .ds-fp-v3-ms-display {
+  color: #9ca3af;
+}
+
+/* Dropdown panel */
+.ds-fp-v3-ms-drop {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.ds-theme-dark .ds-fp-v3-ms-drop {
+  background: #0f172a;
+  border-color: #334155;
+}
+
+/* Search input inside dropdown */
+.ds-fp-v3-ms-search {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  border: none;
+  border-bottom: 1px solid #f3f4f6;
+  outline: none;
+  font-size: 12px;
+  background: #f9fafb;
+  color: #374151;
+  transition: background 0.15s;
+}
+
+.ds-fp-v3-ms-search:focus {
+  background: #ffffff;
+  border-bottom-color: #6366f1;
+}
+
+.ds-theme-dark .ds-fp-v3-ms-search {
+  background: #0f172a;
+  border-bottom-color: #1e293b;
+  color: #e2e8f0;
+}
+
+.ds-fp-v3-ms-search::placeholder {
+  color: #9ca3af;
+}
+
+/* Options list */
+.ds-fp-v3-ms-opts {
+  max-height: 160px;
+  overflow-y: auto;
+}
+
+/* Individual option row */
+.ds-fp-v3-opt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  color: #374151;
+  transition: background 0.1s;
+  user-select: none;
+}
+
+.ds-fp-v3-opt:hover {
+  background: #f0f0ff;
+}
+
+.ds-fp-v3-opt-on {
+  background: #eef2ff;
+}
+
+.ds-theme-dark .ds-fp-v3-opt {
+  color: #cbd5e1;
+}
+
+.ds-theme-dark .ds-fp-v3-opt:hover {
+  background: #1e293b;
+}
+
+.ds-theme-dark .ds-fp-v3-opt-on {
+  background: #1e293b;
+}
+
+/* Custom checkbox */
+.ds-fp-v3-cb {
+  width: 15px;
+  height: 15px;
+  border: 2px solid #d1d5db;
+  border-radius: 3px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.1s, background 0.1s;
+}
+
+.ds-fp-v3-cb-on {
+  border-color: #6366f1;
+  background: #6366f1;
+}
+
+.ds-fp-v3-cb-on svg {
+  stroke: #fff;
+}
+
+/* Options empty/loading message */
+.ds-fp-v3-opts-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px;
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+/* ── Chips row (selected values) ────────────────────────────────────────────── */
+.ds-fp-v3-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.ds-fp-v3-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #e0e7ff;
+  color: #4338ca;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.ds-theme-dark .ds-fp-v3-chip {
+  background: #312e81;
+  color: #a5b4fc;
+}
+
+.ds-fp-v3-chip-x {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 10px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.7;
+  transition: opacity 0.1s;
+}
+
+.ds-fp-v3-chip-x:hover {
+  opacity: 1;
+}
+
+/* ── Popover footer ─────────────────────────────────────────────────────────── */
+.ds-fp-v3-pop-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid #f3f4f6;
+  background: #fafafa;
+}
+
+.ds-theme-dark .ds-fp-v3-pop-footer {
+  background: #0f172a;
+  border-top-color: #334155;
+}
+
+.ds-fp-v3-clear-btn {
+  height: 30px;
+  padding: 0 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 7px;
+  background: #ffffff;
+  color: #374151;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.ds-fp-v3-clear-btn:hover {
+  border-color: #9ca3af;
+  background: #f3f4f6;
+}
+
+.ds-theme-dark .ds-fp-v3-clear-btn {
+  background: #1e293b;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-theme-dark .ds-fp-v3-clear-btn:hover {
+  background: #0f172a;
+}
+
+.ds-fp-v3-apply-btn {
+  height: 30px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 7px;
+  background: linear-gradient(135deg, #16a34a, #15803d);
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+  white-space: nowrap;
+}
+
+.ds-fp-v3-apply-btn:hover {
+  opacity: 0.9;
+}
+
+.ds-fp-v3-apply-btn:active {
+  transform: scale(0.97);
+}
+
+/* ── Date range inputs ──────────────────────────────────────────────────────── */
+.ds-fp-v3-date-range {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ds-fp-v3-date {
+  flex: 1;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 7px;
+  font-size: 12px;
+  background: #ffffff;
+  color: #374151;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ds-fp-v3-date:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+}
+
+.ds-theme-dark .ds-fp-v3-date {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-fp-v3-date-sep {
+  color: #9ca3af;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+/* ── Text / number input ────────────────────────────────────────────────────── */
+.ds-fp-v3-text-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 7px;
+  font-size: 12px;
+  background: #ffffff;
+  color: #374151;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.ds-fp-v3-text-input:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+}
+
+.ds-theme-dark .ds-fp-v3-text-input {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+`, e = document.createElement("style");
+      e.id = "deepspot-sdk-styles", e.textContent = A, document.head.appendChild(e);
+    } catch (A) {
+    }
+  }
+}
+function de(A) {
+  if (typeof A == "string") {
+    const e = document.querySelector(A);
+    if (!e) throw new Error(`Deepspot SDK: container "${A}" not found in DOM`);
+    return e;
+  }
+  return A;
+}
+class ue {
   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 B(e.baseUrl, e.apiKey), K();
   }
   // ── Embed full dashboard ────────────────────────────────────────────────────
   async embedDashboard(e) {
-    var a, o, l, d, h, b, n, p, f, m;
-    const t = de(e.container), s = (a = e.embedLevel) != null ? a : "dashboard", i = (o = e.theme) != null ? o : "light";
+    var i, a, f, h, v, m, p, n, g, u;
+    const t = de(e.container), s = (i = e.embedLevel) != null ? i : "dashboard", r = (a = e.theme) != null ? a : "light";
     t.style.height = e.height || "600px", t.style.display = "block";
-    const r = this.createRoot(t, i);
-    this.showLoading(r);
+    const o = this.createRoot(t, r);
+    this.showLoading(o);
     try {
-      const c = await this.apiClient.getEmbedToken({
+      const b = await this.apiClient.getEmbedToken({
         dashboardId: e.dashboardId,
         embedType: "dashboard",
         embedLevel: s,
         userId: e.userId,
         tenantId: e.tenantId
-      }), u = await this.apiClient.getDashboardRender(
+      }), c = await this.apiClient.getDashboardRender(
         e.dashboardId,
-        c,
+        b,
         {
           embedLevel: s,
           pageId: e.pageId,
@@ -2086,91 +4371,94 @@ class ge {
           filters: e.filters || {}
         }
       );
-      let g;
-      const k = new D(r, {
+      let d;
+      const l = new j(o, {
         embedLevel: s,
-        theme: i,
+        theme: r,
         // v1 backward compat (hideFilters → hideGlobalFilters)
-        hideFilters: (l = e.hideGlobalFilters) != null ? l : !1,
-        hideExport: (d = e.hideExport) != null ? d : !1,
+        hideFilters: (f = e.hideGlobalFilters) != null ? f : !1,
+        hideExport: (h = e.hideExport) != null ? h : !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,
-        hideBackground: (f = e.hideBackground) != null ? f : !1,
+        hideGlobalFilters: (v = e.hideGlobalFilters) != null ? v : !1,
+        hideInlineFilters: (m = e.hideInlineFilters) != null ? m : !1,
+        hideText: (p = e.hideText) != null ? p : !1,
+        hideHeader: (n = e.hideHeader) != null ? n : !1,
+        hideBackground: (g = e.hideBackground) != null ? g : !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),
-        onTabSwitch: async (T, C) => {
-          var $, R, I;
-          ($ = e.onTabSwitch) == null || $.call(e, T, C);
+        onFetchFilterOptions: (T) => this.apiClient.getFilterOptions(e.dashboardId, T, b),
+        onFetchTablePage: (T, w, k) => this.apiClient.getTablePage(e.dashboardId, T, w, k, b),
+        onTabSwitch: async (T, w) => {
+          var k;
+          (k = e.onTabSwitch) == null || k.call(e, T, w);
           try {
-            const P = await this.apiClient.getDashboardRender(
+            const x = await this.apiClient.getDashboardRender(
               e.dashboardId,
-              c,
+              b,
               {
                 embedLevel: s,
                 pageId: T,
-                tabId: C,
-                filters: (I = (R = g == null ? void 0 : g.getActiveFilters()) != null ? R : e.filters) != null ? I : {}
+                tabId: w,
+                // Use renderer's live filter state — instance.filters is a stale copy
+                filters: l.getActiveFilters(),
+                filterOperators: l.getActiveFilterOperators(),
+                localFilters: l.getActiveLocalFilters()
               }
             );
-            k.update(P);
-          } catch (P) {
-            console.error("Deepspot SDK: tab fetch failed", P);
+            l.update(x);
+          } catch (x) {
+            console.error("Deepspot SDK: tab fetch failed", x);
           }
         }
       });
-      return k.render(u), g = new E({
+      return l.render(c), d = new z({
         dashboardId: e.dashboardId,
-        token: c,
+        token: b,
         embedType: "dashboard",
         embedLevel: s,
-        activePageId: u.activePage,
-        activeTabId: u.activeTab,
+        activePageId: c.activePage,
+        activeTabId: c.activeTab,
         activeFilters: e.filters || {},
         apiClient: this.apiClient,
-        renderer: k,
+        renderer: l,
         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;
+      }), d;
+    } catch (b) {
+      throw this.showError(o, (b == null ? void 0 : b.message) || "Failed to load dashboard"), (u = e.onError) == null || u.call(e, (b == null ? void 0 : b.message) || "Failed to load dashboard"), b;
     }
   }
   // ── Embed single report (component) ────────────────────────────────────────
   async embedReport(e) {
-    var i;
+    var r;
     const t = de(e.container);
     t.style.height = e.height || "400px", t.style.display = "block";
     const s = this.createRoot(t, e.theme || "light");
     this.showLoading(s);
     try {
-      const r = await this.apiClient.getEmbedToken({
+      const o = await this.apiClient.getEmbedToken({
         dashboardId: e.dashboardId,
         embedType: "report",
         componentId: e.componentId,
         userId: e.userId,
         tenantId: e.tenantId
-      }), a = await this.apiClient.getReportRender(
+      }), i = await this.apiClient.getReportRender(
         e.dashboardId,
         e.componentId,
-        r,
+        o,
         { filters: e.filters || {} }
-      ), o = new he(s, e.theme || "light");
-      return o.render(a, e.onReady), new E({
+      ), a = new pe(s, e.theme || "light");
+      return a.render(i, e.onReady), new z({
         dashboardId: e.dashboardId,
         componentId: e.componentId,
-        token: r,
+        token: o,
         embedType: "report",
         activeFilters: e.filters || {},
         apiClient: this.apiClient,
-        renderer: o
+        renderer: a
       });
-    } catch (r) {
-      throw this.showError(s, (r == null ? void 0 : r.message) || "Failed to load report"), (i = e.onError) == null || i.call(e, (r == null ? void 0 : r.message) || "Failed to load report"), r;
+    } catch (o) {
+      throw this.showError(s, (o == null ? void 0 : o.message) || "Failed to load report"), (r = e.onError) == null || r.call(e, (o == null ? void 0 : o.message) || "Failed to load report"), o;
     }
   }
   // ── Private helpers ─────────────────────────────────────────────────────────
@@ -2197,83 +4485,83 @@ class ge {
     `;
   }
 }
-const B = class B extends HTMLElement {
+const _ = class _ 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, K(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
   }
   disconnectedCallback() {
     var e;
     this.connected = !1, (e = this.instance) == null || e.destroy(), this.instance = null;
   }
   attributeChangedCallback(e, t, s) {
-    var i;
-    t === s || !this.connected || ((i = this.instance) == null || i.destroy(), this.instance = null, this.mount());
+    var r;
+    t === s || !this.connected || ((r = this.instance) == null || r.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") || "", r = this.getAttribute("user-id") || void 0, o = this.getAttribute("tenant-id") || void 0, i = this.getAttribute("embed-level") || "dashboard", a = this.getAttribute("theme") || "light", f = this.getAttribute("height") || "600px", h = this.getAttribute("page-id") || void 0, v = this.getAttribute("tab-id") || void 0, m = this.getAttribute("hide-filters") === "true", p = this.getAttribute("hide-export") === "true", n = this.getAttribute("hide-global-filters") === "true" || m, g = this.getAttribute("hide-inline-filters") === "true", u = this.getAttribute("hide-text") === "true", b = this.getAttribute("hide-header") === "true", c = 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 = f, this.renderRoot.className = `ds-embed-root ds-theme-${a}`, this.showLoading();
     try {
-      const g = new K(s, t), k = await g.getEmbedToken({
+      const d = new B(s, t), l = await d.getEmbedToken({
         dashboardId: e,
         embedType: "dashboard",
-        embedLevel: a,
-        userId: i,
-        tenantId: r
-      }), T = await g.getDashboardRender(e, k, {
-        embedLevel: a,
-        pageId: d,
-        tabId: h,
+        embedLevel: i,
+        userId: r,
+        tenantId: o
+      }), T = await d.getDashboardRender(e, l, {
+        embedLevel: i,
+        pageId: h,
+        tabId: v,
         filters: {}
-      }), C = new D(this.renderRoot, {
-        embedLevel: a,
-        theme: o,
+      }), w = new j(this.renderRoot, {
+        embedLevel: i,
+        theme: a,
         // v1 backward compat
-        hideFilters: p,
-        hideExport: n,
+        hideFilters: n,
+        hideExport: p,
         // v2 visibility
-        hideGlobalFilters: p,
-        hideInlineFilters: f,
-        hideText: m,
-        hideHeader: c,
-        hideBackground: u,
+        hideGlobalFilters: n,
+        hideInlineFilters: g,
+        hideText: u,
+        hideHeader: b,
+        hideBackground: c,
         initialFilters: {},
-        onFetchFilterOptions: ($) => g.getFilterOptions(e, $, k),
-        onFetchTablePage: ($, R, I) => g.getTablePage(e, $, R, I, k),
-        onTabSwitch: async ($, R) => {
-          var I, P;
+        onFetchFilterOptions: (k) => d.getFilterOptions(e, k, l),
+        onFetchTablePage: (k, x, $) => d.getTablePage(e, k, x, $, l),
+        onTabSwitch: async (k, x) => {
+          var $, y;
           try {
-            const L = await g.getDashboardRender(e, k, {
-              embedLevel: a,
-              pageId: $,
-              tabId: R,
-              filters: (P = (I = this.instance) == null ? void 0 : I.getActiveFilters()) != null ? P : {}
+            const S = await d.getDashboardRender(e, l, {
+              embedLevel: i,
+              pageId: k,
+              tabId: x,
+              filters: (y = ($ = this.instance) == null ? void 0 : $.getActiveFilters()) != null ? y : {}
             });
-            C.update(L);
-          } catch (L) {
-            console.error("Deepspot SDK: tab fetch failed", L);
+            w.update(S);
+          } catch (S) {
+            console.error("Deepspot SDK: tab fetch failed", S);
           }
         }
       });
-      C.render(T), this.instance = new E({
+      w.render(T), this.instance = new z({
         dashboardId: e,
-        token: k,
-        embedLevel: a,
+        token: l,
+        embedLevel: i,
         embedType: "dashboard",
         activePageId: T.activePage,
         activeTabId: T.activeTab,
         activeFilters: {},
-        apiClient: g,
-        renderer: C
+        apiClient: d,
+        renderer: w
       });
-    } catch (g) {
-      this.showError((g == null ? void 0 : g.message) || "Failed to load dashboard");
+    } catch (d) {
+      this.showError((d == null ? void 0 : d.message) || "Failed to load dashboard");
     }
   }
   showLoading() {
@@ -2317,7 +4605,7 @@ const B = class B extends HTMLElement {
     (e = this.instance) == null || e.exportPDF();
   }
 };
-B.observedAttributes = [
+_.observedAttributes = [
   "dashboard-id",
   "api-key",
   "user-id",
@@ -2338,52 +4626,52 @@ B.observedAttributes = [
   "hide-header",
   "hide-background"
 ];
-let j = B;
-customElements.get("deepspot-dashboard") || customElements.define("deepspot-dashboard", j);
+let V = _;
+customElements.get("deepspot-dashboard") || customElements.define("deepspot-dashboard", V);
 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, K(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
   }
   disconnectedCallback() {
     var e;
     this.isConnected_ = !1, (e = this.instance) == null || e.destroy(), this.instance = null;
   }
   attributeChangedCallback(e, t, s) {
-    var i;
-    t !== s && this.isConnected_ && ((i = this.instance) == null || i.destroy(), this.instance = null, this.mount());
+    var r;
+    t !== s && this.isConnected_ && ((r = this.instance) == null || r.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";
-    if (!e || !t || !s || !i) {
+    const e = this.getAttribute("dashboard-id"), t = this.getAttribute("component-id"), s = this.getAttribute("api-key"), r = this.getAttribute("base-url") || "", o = this.getAttribute("user-id") || void 0, i = this.getAttribute("tenant-id") || void 0, a = this.getAttribute("theme") || "light", f = this.getAttribute("height") || "400px";
+    if (!e || !t || !s || !r) {
       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 = f, this.renderRoot.className = `ds-embed-root ds-theme-${a}`, this.showLoading();
     try {
-      const d = new K(i, s), h = await d.getEmbedToken({
+      const h = new B(r, s), v = await h.getEmbedToken({
         dashboardId: e,
         embedType: "report",
         componentId: t,
-        userId: r,
-        tenantId: a
-      }), b = await d.getReportRender(e, t, h, {
+        userId: o,
+        tenantId: i
+      }), m = await h.getReportRender(e, t, v, {
         filters: {}
-      }), n = new he(this.renderRoot, o);
-      n.render(b, () => {
-      }), this.instance = new E({
+      }), p = new pe(this.renderRoot, a);
+      p.render(m, () => {
+      }), this.instance = new z({
         dashboardId: e,
         componentId: t,
-        token: h,
+        token: v,
         embedType: "report",
         activeFilters: {},
-        apiClient: d,
-        renderer: n
+        apiClient: h,
+        renderer: p
       });
-    } catch (d) {
-      this.showError((d == null ? void 0 : d.message) || "Failed to load report");
+    } catch (h) {
+      this.showError((h == null ? void 0 : h.message) || "Failed to load report");
     }
   }
   showLoading() {
@@ -2426,10 +4714,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 q = G;
+customElements.get("deepspot-report") || customElements.define("deepspot-report", q);
+customElements.get("deepspot-dashboard") || customElements.define("deepspot-dashboard", V);
+customElements.get("deepspot-report") || customElements.define("deepspot-report", q);
 export {
-  ge as DeepspotSDK
+  ue as DeepspotSDK
 };