deepspotscreen-sdk 0.1.1 → 0.2.0

package/dist/DeepspotSDK-smoJaflG.js

@@ -0,0 +1,4490 @@
+class ie {
+  constructor(e, t) {
+    this.tokenCache = /* @__PURE__ */ new Map(), this.baseUrl = e.replace(/\/$/, ""), this.apiKey = t;
+  }
+  // ── Embed Token ─────────────────────────────────────────────────────────────
+  async getEmbedToken(e) {
+    var o, i, a, f;
+    const t = [
+      e.dashboardId,
+      e.embedType,
+      (o = e.embedLevel) != null ? o : "",
+      (i = e.componentId) != null ? i : "",
+      (a = e.userId) != null ? a : ""
+    ].join(":"), r = this.tokenCache.get(t);
+    if (r && r.expiresAt > Date.now() + 6e4) return r.token;
+    const s = await this.post(
+      "/dashboard-builder/embed-token",
+      {
+        dashboardId: e.dashboardId,
+        embedType: e.embedType,
+        embedLevel: (f = e.embedLevel) != null ? f : "dashboard",
+        componentId: e.componentId,
+        userId: e.userId,
+        tenantId: e.tenantId,
+        expiresIn: 3600
+      },
+      { "x-deepspot-api-key": this.apiKey }
+    );
+    return this.tokenCache.set(t, {
+      token: s.token,
+      expiresAt: new Date(s.expiresAt).getTime()
+    }), s.token;
+  }
+  // ── Dashboard Render (lazy — loads one tab at a time) ──────────────────────
+  async getDashboardRender(e, t, r = {}) {
+    var o;
+    const s = new URLSearchParams({
+      embedType: "dashboard",
+      embedLevel: (o = r.embedLevel) != null ? o : "dashboard"
+    });
+    return r.pageId && s.set("pageId", r.pageId), r.tabId && s.set("tabId", r.tabId), r.filters && Object.entries(r.filters).forEach(([i, a]) => {
+      a != null && a !== "" && s.set(`filter[${i}]`, Array.isArray(a) ? a.join(",") : String(a));
+    }), r.filterOperators && Object.entries(r.filterOperators).forEach(([i, a]) => {
+      a && s.set(`filterOp[${i}]`, a);
+    }), r.localFilters && Object.entries(r.localFilters).forEach(([i, { value: a, operator: f }]) => {
+      const h = Array.isArray(a) ? a.join(",") : String(a);
+      h && (s.set(`localFilter[${i}]`, h), f && s.set(`localFilterOp[${i}]`, f));
+    }), this.get(
+      `/dashboard-builder/embed/${e}/render?${s}`,
+      { "x-embed-token": t }
+    );
+  }
+  // ── Single Report Render ────────────────────────────────────────────────────
+  async getReportRender(e, t, r, s = {}) {
+    const o = new URLSearchParams({
+      embedType: "report",
+      embedLevel: "report",
+      componentId: t
+    });
+    return s.filters && Object.entries(s.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?${o}`,
+      { "x-embed-token": r }
+    );
+  }
+  // ── API Key Management ──────────────────────────────────────────────────────
+  async createApiKey(e, t) {
+    return this.post("/dashboard-builder/api-keys", e, {
+      Authorization: `Bearer ${t}`
+    });
+  }
+  async listApiKeys(e) {
+    return this.get("/dashboard-builder/api-keys", {
+      Authorization: `Bearer ${e}`
+    });
+  }
+  async deleteApiKey(e, t) {
+    await this.delete(`/dashboard-builder/api-keys/${e}`, {
+      Authorization: `Bearer ${t}`
+    });
+  }
+  // ── Paginated Table Data ────────────────────────────────────────────────────
+  /**
+   * Fetches one page of data for an embedded data-table component.
+   * Called by TableRenderer whenever the user navigates to a different page.
+   * Mirrors: GET /dashboard-builder/embed/:dashboardId/table/:componentId/data
+   */
+  async getTablePage(e, t, r, s, o) {
+    return this.get(
+      `/dashboard-builder/embed/${e}/table/${t}/data?page=${r}&pageSize=${s}`,
+      { "x-embed-token": o }
+    );
+  }
+  // ── Filter Options ──────────────────────────────────────────────────────────
+  /**
+   * Fetches distinct option values for a dropdown / multi-select filter.
+   * Mirrors the main dashboard call:
+   *   GET /dashboard-builder/{dashboardId}/filters/{filterId}/options
+   * The embed token is sent so the backend can validate the caller has
+   * access to this dashboard without requiring an admin JWT.
+   */
+  async getFilterOptions(e, t, r) {
+    try {
+      const s = await this.get(
+        `/dashboard-builder/embed/${e}/filters/${t}/options`,
+        { "x-embed-token": r }
+      );
+      return Array.isArray(s) ? s : Array.isArray(s == null ? void 0 : s.options) ? s.options : Array.isArray(s == null ? void 0 : s.data) ? s.data : [];
+    } catch (s) {
+      return [];
+    }
+  }
+  clearTokenCache() {
+    this.tokenCache.clear();
+  }
+  // ── Private helpers ─────────────────────────────────────────────────────────
+  async get(e, t = {}) {
+    const r = await fetch(`${this.baseUrl}${e}`, {
+      method: "GET",
+      headers: { "Content-Type": "application/json", ...t }
+    });
+    return this.handleResponse(r);
+  }
+  async post(e, t, r = {}) {
+    const s = await fetch(`${this.baseUrl}${e}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...r },
+      body: JSON.stringify(t)
+    });
+    return this.handleResponse(s);
+  }
+  async delete(e, t = {}) {
+    const r = await fetch(`${this.baseUrl}${e}`, {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json", ...t }
+    });
+    if (!r.ok) throw new Error(`Deepspot SDK: DELETE ${e} failed (${r.status})`);
+  }
+  async handleResponse(e) {
+    if (!e.ok) {
+      let r = `HTTP ${e.status}`;
+      try {
+        const s = await e.json();
+        r = (s == null ? void 0 : s.message) || (s == null ? void 0 : s.error) || r;
+      } catch (s) {
+      }
+      throw new Error(`Deepspot SDK: ${r}`);
+    }
+    const t = await e.json();
+    return (t == null ? void 0 : t.data) !== void 0 ? t.data : t;
+  }
+}
+class Z {
+  constructor(e) {
+    var t, r;
+    this.destroyed = !1, this.refreshTimer = null, this.opts = e, this.filters = { ...e.activeFilters }, this.activePageId = (t = e.activePageId) != null ? t : "", this.activeTabId = (r = e.activeTabId) != null ? r : "";
+  }
+  /** Returns a copy of the currently applied filters */
+  getActiveFilters() {
+    return { ...this.filters };
+  }
+  /** Apply a single filter and re-fetch data */
+  setFilter(e, t) {
+    this.filters[e] = t, this.scheduleRefresh();
+  }
+  /** Apply multiple filters at once and re-fetch */
+  setFilters(e) {
+    Object.assign(this.filters, e), this.scheduleRefresh();
+  }
+  /** v2 alias for setFilter — sets a global filter and re-fetches data */
+  setGlobalFilter(e, t) {
+    this.setFilter(e, t);
+  }
+  /** v2: clear all active filters and re-fetch data */
+  clearFilters() {
+    this.filters = {}, this.scheduleRefresh();
+  }
+  /** Navigate to a different page (dashboard embed only) */
+  goToPage(e) {
+    this.opts.embedType === "dashboard" && (this.activePageId = e, this.opts.renderer.goToPage(e));
+  }
+  /** Navigate to a specific tab on a specific page */
+  goToTab(e, t) {
+    this.opts.embedType === "dashboard" && (this.activePageId = e, this.activeTabId = t, this.opts.renderer.goToTab(e, t));
+  }
+  /** Force re-fetch all data from backend */
+  async refresh() {
+    if (!this.destroyed)
+      try {
+        const e = await this.fetchData();
+        this.opts.renderer.update(e);
+      } catch (e) {
+        console.error("Deepspot SDK: refresh failed", e);
+      }
+  }
+  /** Export PDF (dashboard embed only) */
+  exportPDF() {
+    this.opts.embedType === "dashboard" && this.opts.renderer.exportPDF();
+  }
+  /** Remove the embed and clean up */
+  destroy() {
+    this.destroyed = !0, this.refreshTimer && clearTimeout(this.refreshTimer), this.opts.renderer.destroy(), this.opts.apiClient.clearTokenCache();
+  }
+  // ── Private ─────────────────────────────────────────────────────────────────
+  /** Debounce rapid filter changes into a single fetch */
+  scheduleRefresh() {
+    this.refreshTimer && clearTimeout(this.refreshTimer), this.refreshTimer = setTimeout(() => this.refresh(), 300);
+  }
+  async fetchData() {
+    const { apiClient: e, dashboardId: t, componentId: r, token: s, embedType: o, embedLevel: i } = this.opts;
+    return o === "report" && r ? e.getReportRender(t, r, s, {
+      filters: this.filters
+    }) : e.getDashboardRender(t, s, {
+      embedLevel: i,
+      pageId: this.activePageId || void 0,
+      tabId: this.activeTabId || void 0,
+      filters: this.filters
+    });
+  }
+}
+const ae = 24, j = 10, V = 12;
+class Q {
+  /**
+   * @param containerWidth  Actual pixel width of the grid container.
+   * @param minY            Minimum y value across all components (normalises
+   *                        the grid so the topmost component starts at top=6px).
+   */
+  constructor(e, t = 0) {
+    this.containerWidth = e, this.minY = t;
+  }
+  /** Pixel width of one column unit */
+  get colWidth() {
+    return this.containerWidth / ae;
+  }
+  /** Convert grid position {x,y,w,h} → CSS absolute pixel values */
+  toPx(e) {
+    const t = this.colWidth, r = V / 2;
+    return {
+      left: e.x * t + r,
+      top: (e.y - this.minY) * j + r,
+      width: e.w * t - V,
+      height: e.h * j - V
+    };
+  }
+  /** Total pixel height required to fit all positioned components */
+  static totalHeight(e) {
+    if (!e.length) return 400;
+    const t = Math.min(...e.map((s) => s.y));
+    return (Math.max(...e.map((s) => s.y + s.h)) - t) * j + 40;
+  }
+  /** Apply absolute positioning styles directly to a DOM element */
+  applyStyles(e, t) {
+    const r = this.toPx(t);
+    e.style.position = "absolute", e.style.left = `${r.left}px`, e.style.top = `${r.top}px`, e.style.width = `${r.width}px`, e.style.height = `${r.height}px`;
+  }
+}
+let q = null;
+function de() {
+  return q || (q = import("./apexcharts.common-k3hLWpB8.js").then((P) => P.a)), q;
+}
+class re {
+  constructor(e) {
+    this.chart = null, this.container = e;
+  }
+  async render(e, t, r, s) {
+    if (!t || t.length === 0) {
+      this.renderEmpty(e.title);
+      return;
+    }
+    const o = this.buildOptions(e, t, r, s);
+    if (!o) {
+      this.renderEmpty(e.title);
+      return;
+    }
+    this.container.innerHTML = `
+      <div class="ds-chart-card">
+        <div class="ds-chart-title">${e.title || ""}</div>
+        <div class="ds-chart-body" id="ds-chart-body-${e.id}"></div>
+      </div>
+    `;
+    const i = this.container.querySelector(`#ds-chart-body-${e.id}`);
+    if (i)
+      try {
+        this.chart && this.chart.destroy();
+        const { default: a } = await de();
+        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, r) {
+    if (!this.chart || !t || t.length === 0) {
+      await this.render(e, t, r);
+      return;
+    }
+    const { series: s, categories: o } = this.extractSeriesAndCategories(e, t);
+    try {
+      this.chart.updateOptions({
+        series: s,
+        xaxis: { categories: o },
+        theme: { mode: r }
+      });
+    } catch (i) {
+      this.render(e, t, r);
+    }
+  }
+  destroy() {
+    var e;
+    try {
+      (e = this.chart) == null || e.destroy();
+    } catch (t) {
+    }
+    this.chart = null;
+  }
+  // ── Private ─────────────────────────────────────────────────────────────────
+  buildOptions(e, t, r, s) {
+    const o = e.type;
+    return o === "pie" || o === "donut" ? this.buildPieOptions(e, t, r, s) : o === "bar" || o === "line" || o === "area" ? this.buildCartesianOptions(e, t, r, s) : null;
+  }
+  buildCartesianOptions(e, t, r, s) {
+    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 = r === "dark";
+    return {
+      chart: {
+        type: e.type === "area" ? "area" : e.type === "line" ? "line" : "bar",
+        toolbar: { show: !1 },
+        background: "transparent",
+        animations: { enabled: !0, speed: 400 },
+        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: s != null ? s : "100%"
+      },
+      theme: { mode: r },
+      series: o,
+      xaxis: {
+        categories: i,
+        title: { text: a },
+        labels: {
+          rotate: i.length > 8 ? -45 : 0,
+          style: { colors: n ? "#94a3b8" : "#6b7280", fontSize: "11px" }
+        },
+        axisBorder: { color: n ? "#334155" : "#e5e7eb" },
+        axisTicks: { color: n ? "#334155" : "#e5e7eb" }
+      },
+      yaxis: {
+        title: { text: f },
+        labels: { style: { colors: n ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
+      },
+      colors: p,
+      legend: {
+        show: o.length > 1 || ((g = v.showLegend) != null ? g : !1),
+        position: "bottom",
+        labels: { colors: n ? "#94a3b8" : "#6b7280" }
+      },
+      grid: {
+        borderColor: n ? "#1e293b" : "#f3f4f6",
+        strokeDashArray: 4,
+        padding: {
+          bottom: i.length > 8 ? 60 : 10
+        }
+      },
+      tooltip: { theme: r },
+      stroke: {
+        curve: "smooth",
+        width: e.type === "bar" ? 0 : 2
+      },
+      fill: e.type === "area" ? { type: "gradient", gradient: { shadeIntensity: 0.5, opacityFrom: 0.4, opacityTo: 0 } } : {},
+      dataLabels: { enabled: !1 },
+      plotOptions: {
+        bar: {
+          borderRadius: 4,
+          distributed: o.length === 1
+        }
+      }
+    };
+  }
+  buildPieOptions(e, t, r, s) {
+    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 = r === "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: s != null ? s : "100%"
+      },
+      theme: { mode: r },
+      series: v,
+      labels: h,
+      colors: g,
+      legend: {
+        position: "bottom",
+        labels: { colors: m ? "#94a3b8" : "#6b7280" }
+      },
+      tooltip: { theme: r },
+      dataLabels: { enabled: h.length <= 8 },
+      plotOptions: {
+        pie: {
+          donut: { size: e.type === "donut" ? "65%" : "0%" }
+        }
+      }
+    };
+  }
+  extractSeriesAndCategories(e, t) {
+    const r = e.properties || {}, s = t.length > 0 ? Object.keys(t[0]) : [], o = r.xAxis || s[0] || "x";
+    let i = [];
+    if (r.selectedYAxisColumn)
+      try {
+        const n = typeof r.selectedYAxisColumn == "string" ? JSON.parse(r.selectedYAxisColumn) : r.selectedYAxisColumn;
+        Array.isArray(n) && (i = n.map(
+          (g) => typeof g == "string" ? { column: g } : g
+        ));
+      } catch (n) {
+      }
+    if (!i.length && r.yAxis) {
+      const n = r.yAxis;
+      i = (Array.isArray(n) ? n : [n]).map((u) => ({ column: String(u) }));
+    }
+    !i.length && s.length > 1 && (i = s.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 c;
+        return d !== o && !isNaN(Number((c = t[0]) == null ? void 0 : c[d]));
+      }) : null, l = g || u || b || n.column;
+      return {
+        // 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 c = d[l];
+          return c != null ? Number(c) : null;
+        })
+      };
+    }), v = i.map((n) => n.color || n.colorHex || "").filter(Boolean), m = r.xAxisLabel || o, p = r.yAxisLabel || (i.length === 1 ? i[0].column : "");
+    return { series: h, categories: a, xAxisLabel: m, yAxisLabel: p, seriesColors: v };
+  }
+  renderEmpty(e) {
+    this.container.innerHTML = `
+      <div class="ds-chart-card">
+        ${e ? `<div class="ds-chart-title">${e}</div>` : ""}
+        <div class="ds-chart-empty">No data available</div>
+      </div>
+    `;
+  }
+}
+class se {
+  constructor() {
+    this.columns = [], this.allData = [], this.currentRows = [], this.totalRows = 0, this.currentPage = 1, this.currentPageSize = 10, this.searchTerm = "", this.isLoading = !1;
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  render(e, t, r, s) {
+    var v;
+    this.container = e, this.component = t, this.fetchPage = s, this.searchTerm = "", this.currentPage = 1, this.currentPageSize = 10;
+    const o = r && !Array.isArray(r) && "rows" in r;
+    if (o) {
+      const m = r;
+      this.currentRows = m.rows, this.allData = [], this.totalRows = m.total, this.currentPage = m.page, this.currentPageSize = m.pageSize;
+    } else
+      this.allData = r || [], this.currentRows = [], this.totalRows = this.allData.length, this.currentPage = 1;
+    if (o && r.rows.length === 0 && r.total === 0 || !o && this.allData.length === 0) {
+      e.innerHTML = `
+        <div class="ds-table-card">
+          <div class="ds-table-header-row">
+            <span class="ds-table-dot"></span>
+            <div class="ds-table-title">${this.escape(t.title || "")}</div>
+          </div>
+          <div class="ds-chart-empty">No data available</div>
+        </div>
+      `;
+      return;
+    }
+    const i = o ? r.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(), r = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), s = (this.currentPage - 1) * this.currentPageSize + 1, o = this.fetchPage ? Math.min(s - 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 + 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 >= r;
+    this.container.innerHTML = `
+      <div class="ds-table-card">
+        <div class="ds-table-header-row">
+          <div class="ds-table-title-wrap">
+            <span class="ds-table-dot"></span>
+            <span class="ds-table-title">${this.escape(this.component.title || "")}</span>
+          </div>
+        </div>
+        <div class="ds-table-scroll">
+          <table class="ds-table">
+            <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>${s.toLocaleString()}–${o.toLocaleString()} of ${this.totalRows.toLocaleString()}</span>
+            <span class="ds-table-rows-label">Rows:</span>
+            <select class="ds-table-page-size">${h}</select>
+          </div>
+          <div class="ds-table-pagination">
+            <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 ${r}</span>
+            <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>' : ""}
+      </div>
+    `, this.attachEvents();
+  }
+  attachEvents() {
+    const e = this.container.querySelector(".ds-table-search");
+    e == null || e.addEventListener("input", () => {
+      this.searchTerm = e.value, this.currentPage = 1, this.fetchPage || (this.totalRows = this.filteredRows().length, this.paint());
+    });
+    const t = this.container.querySelector(".ds-table-page-size");
+    t == null || t.addEventListener("change", () => {
+      this.currentPageSize = parseInt(t.value, 10), this.currentPage = 1, this.fetchPage ? this.loadPage(1) : (this.totalRows = this.filteredRows().length, this.paint());
+    }), this.container.querySelectorAll("[data-action]").forEach((r) => {
+      r.addEventListener("click", () => {
+        if (r.disabled) return;
+        const s = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), o = r.dataset.action;
+        let i = this.currentPage;
+        o === "first" ? i = 1 : o === "prev" ? i = Math.max(1, this.currentPage - 1) : o === "next" ? i = Math.min(s, this.currentPage + 1) : o === "last" && (i = s), (i !== this.currentPage || o === "first" || o === "last") && (this.currentPage = i, this.fetchPage ? this.loadPage(i) : this.paint());
+      });
+    });
+  }
+  // ── Server-side page load ──────────────────────────────────────────────────
+  async loadPage(e) {
+    if (this.fetchPage) {
+      this.isLoading = !0, this.currentPage = e, this.paint();
+      try {
+        const t = await this.fetchPage(e, this.currentPageSize);
+        this.currentRows = t.rows || [], this.totalRows = Number(t.total) || this.currentRows.length, this.currentPage = Number(t.page) || e;
+      } catch (t) {
+        console.error("[Deepspot SDK] TableRenderer: page fetch failed", t);
+      } finally {
+        this.isLoading = !1, this.paint();
+      }
+    }
+  }
+  // ── Data helpers ───────────────────────────────────────────────────────────
+  getPageRows() {
+    const e = (this.currentPage - 1) * this.currentPageSize + 1;
+    if (this.fetchPage)
+      return { rows: this.currentRows, startNum: e };
+    const t = this.filteredRows(), r = (this.currentPage - 1) * this.currentPageSize;
+    return { rows: t.slice(r, r + this.currentPageSize), startNum: e };
+  }
+  filteredRows() {
+    if (!this.searchTerm) return this.allData;
+    const e = this.searchTerm.toLowerCase();
+    return this.allData.filter(
+      (t) => this.columns.some((r) => {
+        var s;
+        return String((s = t[r]) != null ? s : "").toLowerCase().includes(e);
+      })
+    );
+  }
+  // ── Formatters ─────────────────────────────────────────────────────────────
+  formatHeader(e) {
+    return e.replace(/_/g, " ").replace(/\b\w/g, (t) => t.toUpperCase());
+  }
+  formatValue(e) {
+    return e == null ? "—" : typeof e == "number" ? e % 1 === 0 ? e.toLocaleString() : e.toFixed(2) : String(e);
+  }
+  escape(e) {
+    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+}
+class oe {
+  render(e, t, r) {
+    var g;
+    const s = t.properties || {};
+    let o = null;
+    if (r && r.length > 0) {
+      const u = r[0], b = s.metric || Object.keys(u)[0], l = u[b];
+      if (l !== void 0)
+        o = l;
+      else {
+        const d = Object.keys(u).find(
+          (c) => c.includes(b) || b.includes(c)
+        );
+        o = u[d != null ? d : Object.keys(u)[0]];
+      }
+    }
+    let i;
+    if (o == null)
+      try {
+        const u = (g = s == null ? void 0 : s.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, s);
+    const a = s.styleConfig || {}, f = a.backgroundColor || s.backgroundColor || "", h = a.color || a.textColor || s.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"${m ? ` style="${m}"` : ""}>
+        <div class="ds-card-label"${n ? ` style="${n}"` : ""}>${v}</div>
+        <div class="ds-card-value"${p ? ` style="${p}"` : ""}>${i}</div>
+      </div>
+    `;
+  }
+  formatValue(e, t) {
+    if (e == null) return "—";
+    const r = Number(e);
+    if (isNaN(r)) return String(e);
+    const s = (t == null ? void 0 : t.prefix) || (t == null ? void 0 : t.currencySymbol) || "", o = (t == null ? void 0 : t.suffix) || "", i = r % 1 === 0 ? r.toLocaleString() : parseFloat(r.toFixed(2)).toLocaleString();
+    return `${s}${i}${o}`;
+  }
+}
+const ne = [
+  { 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 le {
+  constructor(e, t) {
+    this.filters = [], this.state = /* @__PURE__ */ new Map(), this.activePopoverId = null, this.container = e, this.onFilterChange = t;
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  render(e, t = {}) {
+    var r, s, o;
+    if (!e || e.length === 0) {
+      this.container.style.display = "none";
+      return;
+    }
+    this.container.style.display = "", this.filters = e, this.state.clear();
+    for (const i of e) {
+      const a = i.applyToField || i.filterId, f = (r = t[i.filterId]) != null ? r : 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 = (s = i.options) == null ? void 0 : s.map((v) => v)) != null ? o : [],
+        loading: !1,
+        search: ""
+      });
+    }
+    this.paint();
+  }
+  updateOptions(e, t) {
+    const r = this.state.get(e);
+    r && (r.loading = !1, r.options = t, this.refreshPopoverOpts(e));
+  }
+  setLoading(e, t) {
+    const r = this.state.get(e);
+    r && (r.loading = t, this.refreshPopoverOpts(e));
+  }
+  updateValues(e) {
+    for (const [t, r] of Object.entries(e)) {
+      const s = this.filters.find(
+        (a) => (a.applyToField || a.filterId) === t || a.filterId === t
+      );
+      if (!s) continue;
+      const o = this.state.get(s.filterId);
+      if (!o) continue;
+      const i = r ? Array.isArray(r) ? r.map(String) : [String(r)] : [];
+      o.activeValues = i, o.tempValues = [...i];
+    }
+    this.repaintBadges();
+  }
+  // ── 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)}">
+              ${ne.map(
+      (r) => `<option value="${this.escAttr(r.value)}"${r.value === t.operator ? " selected" : ""}>${r.label}</option>`
+    ).join("")}
+            </select>
+          </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>`;
+  }
+  renderValuesControl(e, t) {
+    var r, s, 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((r = t.tempValues[0]) != null ? r : "")}" 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((s = t.tempValues[1]) != null ? s : "")}" 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 r = 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">${r || "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((s) => `
+            <span class="ds-fp-v3-chip">
+              ${this.escText(this.optLabel(e.filterId, s))}
+              <button type="button" class="ds-fp-v3-chip-x"
+                data-val="${this.escAttr(s)}"
+                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 r = t.search.toLowerCase(), s = t.options.filter(
+      (o) => (typeof o == "string" ? o : o.label).toLowerCase().includes(r)
+    );
+    return t.options.length ? s.length ? s.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", (r) => {
+        r.stopPropagation();
+        const s = t.dataset.filterId;
+        this.togglePopover(s, t);
+      });
+    }), (e = this.container.querySelector("#ds-fp-v3-add")) == null || e.addEventListener("click", (t) => {
+      t.stopPropagation();
+      const r = this.filters.find((o) => this.state.get(o.filterId).activeValues.length === 0);
+      if (!r) return;
+      const s = this.container.querySelector(
+        `.ds-fp-v3-badge[data-filter-id="${r.filterId}"]`
+      );
+      s && this.togglePopover(r.filterId, s);
+    }), 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 r = this.state.get(e.filterId);
+    (o = t.querySelector(`.ds-fp-v3-condition[data-filter-id="${e.filterId}"]`)) == null || o.addEventListener("change", (p) => {
+      r.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;
+      r.tempValues = n ? [n] : [];
+    }), t.querySelectorAll(`.ds-fp-v3-date[data-filter-id="${e.filterId}"]`).forEach((p) => {
+      p.addEventListener("change", () => {
+        var u, b, l, d;
+        const n = (b = (u = t.querySelector(`[data-part="from"][data-filter-id="${e.filterId}"]`)) == null ? void 0 : u.value) != null ? b : "", g = (d = (l = t.querySelector(`[data-part="to"][data-filter-id="${e.filterId}"]`)) == null ? void 0 : l.value) != null ? d : "";
+        r.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 s = t.querySelector(`.ds-fp-v3-ms-search[data-filter-id="${e.filterId}"]`);
+    s && s.addEventListener("input", () => {
+      r.search = s.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 r = this.state.get(e);
+    t.querySelectorAll(`.ds-fp-v3-opt[data-filter-id="${e}"]`).forEach((s) => {
+      s.addEventListener("click", (o) => {
+        var a;
+        o.stopPropagation();
+        const i = (a = s.dataset.val) != null ? a : "";
+        r.tempValues.includes(i) ? r.tempValues = r.tempValues.filter((f) => f !== i) : r.tempValues = [...r.tempValues, i], this.repaintOpts(e), this.repaintChips(e);
+      });
+    });
+  }
+  bindChips(e, t) {
+    const r = this.state.get(e);
+    t.querySelectorAll(`.ds-fp-v3-chip-x[data-filter-id="${e}"]`).forEach((s) => {
+      s.addEventListener("click", (o) => {
+        o.stopPropagation(), r.tempValues = r.tempValues.filter((i) => {
+          var a;
+          return i !== ((a = s.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 r = this.container.querySelector(`#ds-fp-pop-${e}`);
+    if (!r) return;
+    const s = this.container.getBoundingClientRect(), o = t.getBoundingClientRect();
+    r.style.top = `${o.bottom - s.top + 4}px`, r.style.left = `${o.left - s.left}px`, r.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 = r.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}`), r = this.container.querySelector("#ds-fp-v3-bar");
+      t && !t.contains(e.target) && r && !r.contains(e.target) && this.closePopover(this.activePopoverId);
+    }, { capture: !0 });
+  }
+  // ── Apply / clear ──────────────────────────────────────────────────────────
+  applyFilter(e) {
+    var o;
+    const t = this.state.get(e), r = this.filters.find((i) => i.filterId === e);
+    t.activeValues = [...t.tempValues];
+    let s;
+    r.type === "date-range" ? s = t.tempValues.length >= 2 && (t.tempValues[0] || t.tempValues[1]) ? { from: t.tempValues[0], to: t.tempValues[1] } : "" : r.type === "multi-select" || t.tempValues.length > 1 ? s = t.tempValues.length > 0 ? [...t.tempValues] : "" : s = (o = t.tempValues[0]) != null ? o : "", this.repaintBadge(e), this.closePopover(e), this.onFilterChange(e, s, 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), r = this.container.querySelector(`.ds-fp-v3-badge[data-filter-id="${e}"]`);
+    r && (t.activeValues.length > 0 ? r.classList.add("ds-fp-v3-badge-active") : r.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 r = this.container.querySelector(`#ds-fp-opts-${e}`);
+    if (!r) return;
+    r.innerHTML = this.renderOpts(e, t);
+    const s = this.container.querySelector(`#ds-fp-pop-${e}`);
+    s && this.bindOpts(e, s);
+  }
+  refreshPopoverOpts(e) {
+    this.repaintOpts(e);
+    const t = this.state.get(e);
+    if (!t) return;
+    const r = this.container.querySelector(
+      `.ds-fp-v3-ms-trigger[data-filter-id="${e}"] .ds-fp-v3-ms-display`
+    );
+    r && (r.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 r = this.container.querySelector(`#ds-fp-chips-${e}`);
+    if (!r) return;
+    if (t.tempValues.length === 0) {
+      r.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 s = this.filters.find((i) => i.filterId === e);
+    r.innerHTML = t.tempValues.map((i) => `
+      <span class="ds-fp-v3-chip">
+        ${this.escText(this.optLabel(s.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, r);
+    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 r = this.state.get(e);
+    if (!r) return t;
+    const s = r.options.find((o) => (typeof o == "string" ? o : o.value) === t);
+    return s ? typeof s == "string" ? s : s.label : t;
+  }
+  escAttr(e) {
+    return String(e != null ? e : "").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  escText(e) {
+    return String(e != null ? e : "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+}
+const z = class z {
+  constructor(e, t) {
+    this.activePageId = "", this.activeTabId = "", this.activeFilters = {}, this.activeFilterOperators = {}, this.activeLocalFilters = {}, this.chartRenderers = /* @__PURE__ */ new Map(), this.tableRenderer = new se(), this.cardRenderer = new oe(), this.isLoadingTab = !1, this.tooltipEl = null, this.root = e, this.opts = t, this.activeFilters = { ...t.initialFilters };
+  }
+  // ── Initial full render ───────────────────────────────────────────────────
+  render(e) {
+    var t, r;
+    this.renderData = e, this.activePageId = e.activePage, this.activeTabId = e.activeTab, this.buildShell(), this.renderNavigation(), this.renderFilterBar(), this.renderGrid(), (r = (t = this.opts).onReady) == null || r.call(t);
+  }
+  // ── Called after lazy tab fetch completes ─────────────────────────────────
+  update(e) {
+    this.renderData = e, this.activePageId = e.activePage, this.activeTabId = e.activeTab, this.isLoadingTab = !1, this.syncNavHighlight(), this.updateFilterBar(), this.renderGrid();
+  }
+  goToPage(e) {
+    const t = this.getTabsForPage(e)[0];
+    t && this.triggerTabSwitch(e, t.id);
+  }
+  goToTab(e, t) {
+    this.triggerTabSwitch(e, t);
+  }
+  destroy() {
+    this.chartRenderers.forEach((e) => e.destroy()), this.chartRenderers.clear(), this.root.innerHTML = "";
+  }
+  exportPDF() {
+    var p, n;
+    const e = this.root.querySelector("#ds-grid");
+    if (!e) return;
+    const t = this.root.style.height, r = this.root.style.overflow;
+    this.root.style.height = "auto", this.root.style.overflow = "visible";
+    const s = this.root.querySelector("#ds-canvas"), o = (p = s == null ? void 0 : s.style.height) != null ? p : "", i = (n = s == null ? void 0 : s.style.overflow) != null ? n : "";
+    s && (s.style.height = "auto", s.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
+    }));
+    a.forEach((g) => {
+      g.style.overflow = "visible", g.style.maxHeight = "none", g.style.height = "auto";
+    });
+    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: g }) => g(e, {
+        scale: 2,
+        useCORS: !0,
+        allowTaint: !0,
+        logging: !1,
+        width: h,
+        height: v,
+        windowWidth: h,
+        windowHeight: v,
+        scrollX: 0,
+        scrollY: -m
+      }).then((u) => {
+        this.root.style.height = t, this.root.style.overflow = r, s && (s.style.height = o, s.style.overflow = i), f.forEach(({ el: b, overflow: l, maxHeight: d, height: c }) => {
+          b.style.overflow = l, b.style.maxHeight = d, b.style.height = c;
+        }), import("./jspdf.es.min-Ge0fRUwj.js").then((b) => b.j).then(({ jsPDF: b }) => {
+          const l = u.width / 2, d = u.height / 2, c = new b({
+            orientation: l >= d ? "landscape" : "portrait",
+            unit: "px",
+            format: [l, d]
+          });
+          c.addImage(u.toDataURL("image/png"), "PNG", 0, 0, l, d), c.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
+        });
+      })
+    );
+  }
+  exportCSV() {
+    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 r = Object.keys(t[0]), s = [r.join(","), ...t.map(
+        (i) => r.map((a) => {
+          var f;
+          return JSON.stringify((f = i[a]) != null ? f : "");
+        }).join(",")
+      )].join(`
+`);
+      Object.assign(document.createElement("a"), {
+        href: URL.createObjectURL(new Blob([s], { 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, r = e === "dashboard" && t.length > 1, s = e === "page" || e === "dashboard";
+    this.root.innerHTML = `
+      ${this.opts.hideExport ? "" : '<div class="ds-toolbar" id="ds-toolbar"></div>'}
+      ${r ? '<nav class="ds-page-nav" id="ds-page-nav"></nav>' : ""}
+      ${s ? '<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>
+      </div>
+      <div id="ds-tab-loading" style="display:none;position:absolute;inset:0;
+        background:rgba(255,255,255,0.5);align-items:center;justify-content:center;">
+        <div class="ds-embed-spinner"></div>
+      </div>
+    `, this.root.style.position = "relative", this.opts.hideExport || this.buildExportToolbar();
+    const o = this.root.querySelector("#ds-filter-container");
+    this.filterRenderer = new le(o, (i, a, f) => {
+      var b, l, d, c, $, w, k, x, T, y, C;
+      if (i === "__reset_all__") {
+        this.activeFilters = {}, this.activeFilterOperators = {}, this.activeLocalFilters = {}, (l = (b = this.opts).onFilterChange) == null || l.call(b, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
+        return;
+      }
+      const h = (d = this.renderData.filters) == null ? void 0 : d.find((I) => I.filterId === i), v = (c = this.renderData.components) == null ? void 0 : c.find(
+        (I) => I.type === "inline-filter" && I.id === i
+      ), m = (h == null ? void 0 : h.applyToField) || (($ = v == null ? void 0 : v.properties) == null ? void 0 : $.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 = ((T = h == null ? void 0 : h.targetComponents) != null ? T : []).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]), (C = (y = this.opts).onFilterChange) == null || C.call(y, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
+    });
+  }
+  buildExportToolbar() {
+    var t, r;
+    const e = this.root.querySelector("#ds-toolbar");
+    e && (e.innerHTML = `
+      <button class="ds-toolbar-btn" id="ds-btn-pdf">⬇ PDF</button>
+      <button class="ds-toolbar-btn" id="ds-btn-csv" style="display:none">⬇ CSV</button>
+    `, (t = e.querySelector("#ds-btn-pdf")) == null || t.addEventListener("click", () => this.exportPDF()), (r = e.querySelector("#ds-btn-csv")) == null || r.addEventListener("click", () => this.exportCSV()));
+  }
+  // ── Navigation ────────────────────────────────────────────────────────────
+  renderNavigation() {
+    this.renderPageNav(), this.renderTabNav(this.activePageId);
+  }
+  renderPageNav() {
+    const e = this.root.querySelector("#ds-page-nav");
+    e && (e.innerHTML = this.renderData.dashboard.pages.map((t) => `
+      <button class="ds-page-tab ${t.pageId === this.activePageId ? "ds-active" : ""}"
+        data-page-id="${t.pageId}">${t.title}</button>
+    `).join(""), e.querySelectorAll(".ds-page-tab").forEach((t) => {
+      t.addEventListener("click", () => {
+        var s, o;
+        const r = t.dataset.pageId;
+        r === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(r, (o = (s = this.getTabsForPage(r)[0]) == null ? void 0 : s.id) != null ? o : "");
+      });
+    }));
+  }
+  renderTabNav(e) {
+    const t = this.root.querySelector("#ds-tab-nav");
+    t && this.buildTabButtons(t, e);
+  }
+  buildTabButtons(e, t) {
+    const r = this.getTabsForPage(t);
+    if (r.length <= 1) {
+      e.style.display = "none";
+      return;
+    }
+    e.style.display = "", e.innerHTML = r.map((s) => `
+      <button class="ds-page-tab ${s.id === this.activeTabId ? "ds-active" : ""}"
+        data-tab-id="${s.id}" data-page-id="${t}">${s.title}</button>
+    `).join(""), e.querySelectorAll(".ds-page-tab").forEach((s) => {
+      s.addEventListener("click", () => {
+        const o = s.dataset.tabId, i = s.dataset.pageId;
+        o === this.activeTabId && i === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(i, o);
+      });
+    });
+  }
+  triggerTabSwitch(e, t) {
+    this.isLoadingTab || !e || !t || (this.isLoadingTab = !0, this.activePageId = e, this.activeTabId = t, this.syncNavHighlight(), this.showTabSpinner(), this.opts.onTabSwitch(e, t));
+  }
+  syncNavHighlight() {
+    this.root.querySelectorAll("#ds-page-nav .ds-page-tab").forEach((t) => {
+      t.classList.toggle("ds-active", t.dataset.pageId === this.activePageId);
+    });
+    const e = this.root.querySelector("#ds-tab-nav");
+    e && this.buildTabButtons(e, this.activePageId);
+  }
+  // ── Global Filter bar ─────────────────────────────────────────────────────
+  // Merges global filters (from renderData.filters[]) with inline-filter
+  // components (type='inline-filter' in renderData.components[]).
+  // Inline-filter components are NOT rendered in the grid — they appear here.
+  renderFilterBar() {
+    this.opts.hideGlobalFilters || (this.filterRenderer.render(this.globalFilters(), this.mergedFilterValues()), this.fetchFilterOptions());
+  }
+  updateFilterBar() {
+    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: r }] of Object.entries(this.activeLocalFilters))
+      e[t] = r;
+    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 s, o;
+    const t = (this.renderData.components || []).find(
+      (i) => i.type === "inline-filter" && i.id === e
+    );
+    if (t) {
+      const i = ((s = t.properties) == null ? void 0 : s.filter_scope) || ((o = t.properties) == null ? void 0 : o.scope);
+      if (i === "local") return !1;
+      if (i === "global") return !0;
+    }
+    const r = (this.renderData.filters || []).find((i) => i.filterId === e);
+    return !(r != null && r.filterLevel) || r.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.filters || []).filter((e) => {
+      var t, r;
+      return !this.filterIsGlobal(e.filterId) && ((r = (t = e.targetComponents) == null ? void 0 : t.length) != null ? r : 0) > 0;
+    }).map((e) => ({ ...e, filterLevel: "component" }));
+  }
+  async fetchFilterOptions() {
+    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 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((p) => p.destroy()), this.chartRenderers.clear();
+    const t = (this.renderData.components || []).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 r = e.clientWidth || this.root.clientWidth || 800, s = t.map((p) => p.position), o = s.length ? Math.min(...s.map((p) => p.y)) : 0, i = new Q(r, o);
+    e.style.height = `${Q.totalHeight(s)}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, c, $, 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 = ((c = (d = p.properties) == null ? void 0 : d.styleConfig) == null ? void 0 : c.backgroundColor) || (($ = p.properties) == null ? void 0 : $.backgroundColor);
+        x && (n.style.background = x);
+      }
+      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 l = this.getComponentDescription(p);
+      if (l) {
+        const x = this.getTooltipEl();
+        n.addEventListener("mouseenter", () => {
+          x.textContent = l, x.style.display = "block";
+          const T = n.getBoundingClientRect(), y = x.offsetHeight || 36;
+          window.innerHeight - T.bottom >= y + 6 ? x.style.top = `${T.bottom + 4}px` : x.style.top = `${T.top - y - 4}px`, x.style.left = `${T.left}px`, x.style.width = `${T.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((T, y, C) => C.findIndex((I) => I.filterId === T.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(v).catch(() => {
+    });
+  }
+  // ── Component renderer switch ─────────────────────────────────────────────
+  async renderComponent(e, t, r) {
+    var i, a, f, h, v, m, p, n, g, u, b, l, d, c, $, w, k, x, T, y, C, I, E, N, M, H, B, K, G, _, U, W, Y, J, X;
+    const s = this.renderData.data[t.id] || [], o = this.opts.theme;
+    switch (t.type) {
+      case "bar":
+      case "line":
+      case "pie":
+      case "donut":
+      case "area":
+      case "scatter":
+      case "stacked-bar": {
+        const F = new re(e);
+        await F.render(t, s, o, r), this.chartRenderers.set(t.id, F);
+        break;
+      }
+      case "table": {
+        const F = this.opts.onFetchTablePage ? (L, A) => this.opts.onFetchTablePage(t.id, L, A) : void 0;
+        this.tableRenderer.render(e, t, s, F);
+        break;
+      }
+      case "number-card":
+        this.cardRenderer.render(e, t, s);
+        break;
+      case "text-heading": {
+        if (this.opts.hideText) break;
+        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) || {}, A = this.scToInlineStyle(L), S = this.opts.hideBackground ? {} : this.parseTwColor((m = (v = t.properties) == null ? void 0 : v.color) != null ? m : ""), O = [[
+          S.bg ? `background:${S.bg}` : "",
+          S.text ? `color:${S.text}` : ""
+        ].filter(Boolean).join(";"), A].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-heading" style="${O}">${F}</div>`;
+        break;
+      }
+      case "text-subheading": {
+        if (this.opts.hideText) break;
+        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) || {}, A = this.scToInlineStyle(L), S = this.opts.hideBackground ? {} : this.parseTwColor((l = (b = t.properties) == null ? void 0 : b.color) != null ? l : ""), O = [[
+          S.bg ? `background:${S.bg}` : "",
+          S.text ? `color:${S.text}` : ""
+        ].filter(Boolean).join(";"), A].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-subheading" style="${O}">${F}</div>`;
+        break;
+      }
+      case "text-body": {
+        if (this.opts.hideText) break;
+        const F = ((c = (d = t.properties) == null ? void 0 : d.data) == null ? void 0 : c.dataContent) || (($ = t.properties) == null ? void 0 : $.content) || "", L = ((w = t.properties) == null ? void 0 : w.styleConfig) || {}, A = this.scToInlineStyle(L), S = this.opts.hideBackground ? {} : this.parseTwColor((x = (k = t.properties) == null ? void 0 : k.color) != null ? x : ""), O = [[
+          S.bg ? `background:${S.bg}` : "",
+          S.text ? `color:${S.text}` : ""
+        ].filter(Boolean).join(";"), A].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-body" style="${O}">${F}</div>`;
+        break;
+      }
+      case "text-box": {
+        if (this.opts.hideText) break;
+        const F = ((y = (T = t.properties) == null ? void 0 : T.data) == null ? void 0 : y.dataContent) || ((C = t.properties) == null ? void 0 : C.content) || "", L = ((I = t.properties) == null ? void 0 : I.styleConfig) || {}, A = this.scToInlineStyle(L), S = this.opts.hideBackground ? {} : this.parseTwColor((N = (E = t.properties) == null ? void 0 : E.color) != null ? N : ""), O = [[
+          S.bg ? `background:${S.bg}` : "",
+          S.text ? `color:${S.text}` : ""
+        ].filter(Boolean).join(";"), A].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-box" style="${O}">${F}</div>`;
+        break;
+      }
+      case "text": {
+        if (this.opts.hideText) break;
+        const F = ((H = (M = t.properties) == null ? void 0 : M.data) == null ? void 0 : H.dataContent) || ((B = t.properties) == null ? void 0 : B.content) || "", L = ((K = t.properties) == null ? void 0 : K.styleConfig) || {}, A = this.scToInlineStyle(L), S = this.opts.hideBackground ? {} : this.parseTwColor((_ = (G = t.properties) == null ? void 0 : G.color) != null ? _ : ""), O = [[
+          S.bg ? `background:${S.bg}` : "",
+          S.text ? `color:${S.text}` : ""
+        ].filter(Boolean).join(";"), A].filter(Boolean).join(";");
+        e.innerHTML = `<div class="ds-text-body" style="${O}">${F}</div>`;
+        break;
+      }
+      case "header": {
+        if (this.opts.hideHeader) break;
+        const F = ((W = (U = t.properties) == null ? void 0 : U.data) == null ? void 0 : W.dataContent) || ((Y = t.properties) == null ? void 0 : Y.content) || t.title || "", L = ((J = t.properties) == null ? void 0 : J.styleConfig) || {}, A = !this.opts.hideBackground && L.backgroundColor ? `background:${L.backgroundColor};` : "", S = L.color ? `color:${L.color};` : L.textColor ? `color:${L.textColor};` : "";
+        e.innerHTML = `
+          <div class="ds-header-component" style="${A}${S}">
+            <div class="ds-header-content">${F}</div>
+          </div>`;
+        break;
+      }
+      case "section": {
+        const F = ((X = t.properties) == null ? void 0 : X.styleConfig) || {}, L = !this.opts.hideBackground && F.backgroundColor ? `background:${F.backgroundColor};` : "";
+        e.innerHTML = `
+          <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 r = (a = e.dataset.componentId) != null ? a : "", s = document.createElement("button");
+    s.type = "button", s.className = "ds-comp-filter-btn", s.title = "Filter", s.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, r), s.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;
+      });
+      s.classList.toggle("ds-comp-filter-btn-active", f);
+    })(), e.appendChild(s), e.appendChild(o);
+  }
+  buildInlineFilterPop(e, t, r) {
+    var g, u, b;
+    const s = (l) => {
+      var $;
+      const d = (this.renderData.components || []).find(
+        (w) => w.type === "inline-filter" && w.id === l.filterId
+      ), c = ($ = d == null ? void 0 : d.properties) == null ? void 0 : $.columnMappings;
+      return (c == null ? void 0 : c[r]) || l.applyToField || l.filterId;
+    }, o = (l) => l.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), i = (l) => l.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 l of t) {
+      const d = this.activeLocalFilters[l.filterId], c = (g = d == null ? void 0 : d.value) != null ? g : this.activeFilters[s(l)], $ = c ? Array.isArray(c) ? c.map(String) : [String(c)] : [], w = (d == null ? void 0 : d.operator) || l.filterOperator || "=";
+      f.set(l.filterId, { pendingValues: [...$], operator: w, search: "" });
+    }
+    const h = (l) => `<select class="ds-fp-op-select">
+        ${a.map(
+      (d) => `<option value="${i(d.value)}"${d.value === l ? " selected" : ""}>${d.label}</option>`
+    ).join("")}
+      </select>`, v = (l, d) => {
+      const c = l.options || [];
+      if (!c.length)
+        return '<div class="ds-fp-opts-msg"><span class="ds-dd-spinner"></span> Loading…</div>';
+      const $ = d.search.toLowerCase(), w = c.filter(
+        (k) => (typeof k == "string" ? k : k.label).toLowerCase().includes($)
+      );
+      return w.length ? w.map((k) => {
+        const x = typeof k == "string" ? k : k.value, T = 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(T)}</span>
+        </label>`;
+      }).join("") : '<div class="ds-fp-opts-msg">No matches</div>';
+    }, m = (l) => {
+      const d = f.get(l.filterId);
+      return `
+        <div class="ds-fp-item ds-fp-item-expanded" data-filter-id="${i(l.filterId)}">
+          <div class="ds-fp-item-hd">
+            <span class="ds-fp-item-name">${o(l.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(
+        (c) => `<span class="ds-fp-chip">${o(c)}<button type="button" class="ds-fp-chip-x" data-val="${i(c)}">✕</button></span>`
+      ).join("")}
+              </div>` : ""}
+              <div class="ds-fp-search-wrap">
+                <input type="text" class="ds-fp-ms-search"
+                  placeholder="Search ${i(l.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(l.filterId)}">
+                ${v(l, d)}
+              </div>
+            </div>
+            <button type="button" class="ds-fp-apply" data-apply-id="${i(l.filterId)}">✓ Apply Filter</button>
+          </div>
+        </div>`;
+    }, p = t.filter((l) => {
+      if (this.activeLocalFilters[l.filterId] !== void 0) return !0;
+      const d = this.activeFilters[s(l)];
+      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 l, d;
+      t.forEach((c) => {
+        delete this.activeLocalFilters[c.filterId];
+      }), (d = (l = this.opts).onFilterChange) == null || d.call(l, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId), e.style.display = "none";
+    });
+    const n = (l, d, c) => {
+      const $ = t.find((x) => x.filterId === l), w = d.querySelector(".ds-fp-ms");
+      if (w) {
+        let x = w.querySelector(".ds-fp-chips-row");
+        if (c.pendingValues.length) {
+          const T = c.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 = T : (x = document.createElement("div"), x.className = "ds-fp-chips-row", x.innerHTML = T, w.insertBefore(x, w.querySelector(".ds-fp-search-wrap"))), x.querySelectorAll(".ds-fp-chip-x").forEach((y) => {
+            y.addEventListener("click", (C) => {
+              C.stopPropagation(), c.pendingValues = c.pendingValues.filter((I) => {
+                var E;
+                return I !== ((E = y.dataset.val) != null ? E : "");
+              }), n(l, d, c);
+            });
+          });
+        } else
+          x == null || x.remove();
+      }
+      const k = d.querySelector(`.ds-fp-opts[data-filter-id="${l}"]`);
+      k && (k.innerHTML = v($, c), k.querySelectorAll(".ds-fp-opt").forEach((x) => {
+        x.addEventListener("click", () => {
+          var y;
+          const T = (y = x.dataset.val) != null ? y : "";
+          c.pendingValues.includes(T) ? c.pendingValues = c.pendingValues.filter((C) => C !== T) : c.pendingValues = [...c.pendingValues, T], n(l, d, c);
+        });
+      }));
+    };
+    t.forEach((l) => {
+      var w, k, x, T;
+      const d = f.get(l.filterId), c = e.querySelector(`.ds-fp-item[data-filter-id="${l.filterId}"]`);
+      if (!c) return;
+      (w = c.querySelector(".ds-fp-op-select")) == null || w.addEventListener("change", (y) => {
+        d.operator = y.target.value;
+      });
+      const $ = c.querySelector(".ds-fp-ms-search");
+      $ && ($.addEventListener("input", () => {
+        d.search = $.value, n(l.filterId, c, d);
+      }), (k = c.querySelector(".ds-fp-search-caret")) == null || k.addEventListener("click", () => {
+        const y = c.querySelector(".ds-fp-opts");
+        y && (y.style.display = y.style.display === "none" ? "" : "none");
+      })), c.querySelectorAll(".ds-fp-chip-x").forEach((y) => {
+        y.addEventListener("click", (C) => {
+          C.stopPropagation(), d.pendingValues = d.pendingValues.filter((I) => {
+            var E;
+            return I !== ((E = y.dataset.val) != null ? E : "");
+          }), n(l.filterId, c, d);
+        });
+      }), c.querySelectorAll(".ds-fp-opt").forEach((y) => {
+        y.addEventListener("click", () => {
+          var I;
+          const C = (I = y.dataset.val) != null ? I : "";
+          d.pendingValues.includes(C) ? d.pendingValues = d.pendingValues.filter((E) => E !== C) : d.pendingValues = [...d.pendingValues, C], n(l.filterId, c, d);
+        });
+      }), (x = c.querySelector(`.ds-fp-apply[data-apply-id="${l.filterId}"]`)) == null || x.addEventListener("click", () => {
+        var C, I, E;
+        const y = d.pendingValues.length > 1 ? [...d.pendingValues] : (C = d.pendingValues[0]) != null ? C : "";
+        !y || Array.isArray(y) && !y.length ? delete this.activeLocalFilters[l.filterId] : this.activeLocalFilters[l.filterId] = { value: y, operator: d.operator || "=" }, (E = (I = this.opts).onFilterChange) == null || E.call(I, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId), e.style.display = "none";
+      }), !((T = l.options) != null && T.length) && this.opts.onFetchFilterOptions && this.opts.onFetchFilterOptions(l.filterId).then((y) => {
+        c.querySelector(`.ds-fp-opts[data-filter-id="${l.filterId}"]`) && (l.options = y.map((I) => typeof I == "string" ? I : I.value), n(l.filterId, c, d));
+      }).catch(() => {
+      });
+    });
+  }
+  // ── Spinner ───────────────────────────────────────────────────────────────
+  showTabSpinner() {
+    const e = this.root.querySelector("#ds-tab-loading"), t = this.root.querySelector("#ds-grid");
+    e && (e.style.display = "flex"), t && (t.style.opacity = "0.35");
+  }
+  hideTabSpinner() {
+    const e = this.root.querySelector("#ds-tab-loading"), t = this.root.querySelector("#ds-grid");
+    e && (e.style.display = "none"), t && (t.style.opacity = "1");
+  }
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  /**
+   * Convert a styleConfig object to an inline CSS string.
+   * Maps camelCase keys (e.g. fontSize) to kebab-case CSS properties.
+   * Skips backgroundColor — that is applied to the wrapper div separately
+   * (so it can support CSS gradients via `background` shorthand).
+   */
+  scToInlineStyle(e) {
+    const t = /* @__PURE__ */ new Set(["backgroundColor"]), r = (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase();
+    return Object.entries(e).filter(([s, o]) => !t.has(s) && o != null && o !== "").map(([s, o]) => `${r(s)}:${o}`).join(";");
+  }
+  /**
+   * Parse a Tailwind utility class string (e.g. "bg-violet-100 text-violet-600")
+   * into plain CSS hex values. Used for text components whose builder color
+   * is stored as Tailwind class names rather than raw CSS.
+   */
+  parseTwColor(e) {
+    if (!e) return {};
+    const t = {};
+    for (const r of e.split(/\s+/)) {
+      if (!r) continue;
+      if (r === "bg-white") {
+        t.bg = "#ffffff";
+        continue;
+      }
+      if (r === "bg-black") {
+        t.bg = "#000000";
+        continue;
+      }
+      if (r === "bg-transparent") {
+        t.bg = "transparent";
+        continue;
+      }
+      if (r === "text-white") {
+        t.text = "#ffffff";
+        continue;
+      }
+      if (r === "text-black") {
+        t.text = "#000000";
+        continue;
+      }
+      const s = /^(bg|text)-([a-z]+)-(\d+)$/.exec(r);
+      if (!s) continue;
+      const o = z.TW_PALETTE[s[2]], i = o == null ? void 0 : o[Number(s[3])];
+      i && (s[1] === "bg" && (t.bg = i), s[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, r, s, o;
+    if ((t = e.properties) != null && t.description) return String(e.properties.description);
+    try {
+      const i = (s = (r = e.properties) == null ? void 0 : r.data) == null ? void 0 : s.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, r;
+    return (r = (t = this.renderData.dashboard.pages.find((s) => s.pageId === e)) == null ? void 0 : t.tabs) != null ? r : [];
+  }
+};
+z.TW_PALETTE = {
+  slate: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a" },
+  gray: { 50: "#f9fafb", 100: "#f3f4f6", 200: "#e5e7eb", 300: "#d1d5db", 400: "#9ca3af", 500: "#6b7280", 600: "#4b5563", 700: "#374151", 800: "#1f2937", 900: "#111827" },
+  zinc: { 50: "#fafafa", 100: "#f4f4f5", 200: "#e4e4e7", 300: "#d4d4d8", 400: "#a1a1aa", 500: "#71717a", 600: "#52525b", 700: "#3f3f46", 800: "#27272a", 900: "#18181b" },
+  neutral: { 50: "#fafafa", 100: "#f5f5f5", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#a3a3a3", 500: "#737373", 600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717" },
+  stone: { 50: "#fafaf9", 100: "#f5f5f4", 200: "#e7e5e4", 300: "#d6d3d1", 400: "#a8a29e", 500: "#78716c", 600: "#57534e", 700: "#44403c", 800: "#292524", 900: "#1c1917" },
+  red: { 50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d" },
+  orange: { 50: "#fff7ed", 100: "#ffedd5", 200: "#fed7aa", 300: "#fdba74", 400: "#fb923c", 500: "#f97316", 600: "#ea580c", 700: "#c2410c", 800: "#9a3412", 900: "#7c2d12" },
+  amber: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f" },
+  yellow: { 50: "#fefce8", 100: "#fef9c3", 200: "#fef08a", 300: "#fde047", 400: "#facc15", 500: "#eab308", 600: "#ca8a04", 700: "#a16207", 800: "#854d0e", 900: "#713f12" },
+  lime: { 50: "#f7fee7", 100: "#ecfccb", 200: "#d9f99d", 300: "#bef264", 400: "#a3e635", 500: "#84cc16", 600: "#65a30d", 700: "#4d7c0f", 800: "#3f6212", 900: "#365314" },
+  green: { 50: "#f0fdf4", 100: "#dcfce7", 200: "#bbf7d0", 300: "#86efac", 400: "#4ade80", 500: "#22c55e", 600: "#16a34a", 700: "#15803d", 800: "#166534", 900: "#14532d" },
+  emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b" },
+  teal: { 50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4", 400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e", 800: "#115e59", 900: "#134e4a" },
+  cyan: { 50: "#ecfeff", 100: "#cffafe", 200: "#a5f3fc", 300: "#67e8f9", 400: "#22d3ee", 500: "#06b6d4", 600: "#0891b2", 700: "#0e7490", 800: "#155e75", 900: "#164e63" },
+  sky: { 50: "#f0f9ff", 100: "#e0f2fe", 200: "#bae6fd", 300: "#7dd3fc", 400: "#38bdf8", 500: "#0ea5e9", 600: "#0284c7", 700: "#0369a1", 800: "#075985", 900: "#0c4a6e" },
+  blue: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a" },
+  indigo: { 50: "#eef2ff", 100: "#e0e7ff", 200: "#c7d2fe", 300: "#a5b4fc", 400: "#818cf8", 500: "#6366f1", 600: "#4f46e5", 700: "#4338ca", 800: "#3730a3", 900: "#312e81" },
+  violet: { 50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd", 400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9", 800: "#5b21b6", 900: "#4c1d95" },
+  purple: { 50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 300: "#d8b4fe", 400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7e22ce", 800: "#6b21a8", 900: "#581c87" },
+  fuchsia: { 50: "#fdf4ff", 100: "#fae8ff", 200: "#f5d0fe", 300: "#f0abfc", 400: "#e879f9", 500: "#d946ef", 600: "#c026d3", 700: "#a21caf", 800: "#86198f", 900: "#701a75" },
+  pink: { 50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4", 400: "#f472b6", 500: "#ec4899", 600: "#db2777", 700: "#be185d", 800: "#9d174d", 900: "#831843" },
+  rose: { 50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 300: "#fda4af", 400: "#fb7185", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c", 800: "#9f1239", 900: "#881337" }
+};
+let D = z;
+class ce {
+  constructor(e, t) {
+    this.chartRenderer = null, this.tableRenderer = new se(), this.cardRenderer = new oe(), this.root = e, this.theme = t;
+  }
+  render(e, t) {
+    const r = e.components[0];
+    if (!r) {
+      this.root.innerHTML = `<div class="ds-embed-error">
+        <div class="ds-embed-error-icon">⚠</div>
+        <div>Component not found.</div>
+      </div>`;
+      return;
+    }
+    const s = e.data[r.id] || [];
+    this.renderComponent(r, s), t == null || t();
+  }
+  update(e) {
+    const t = e.components[0];
+    if (!t) return;
+    const r = e.data[t.id] || [];
+    switch (t.type) {
+      case "bar":
+      case "line":
+      case "pie":
+      case "donut":
+      case "area":
+        this.chartRenderer ? this.chartRenderer.update(t, r, this.theme) : this.renderComponent(t, r);
+        break;
+      case "table":
+        this.tableRenderer.render(this.root, t, r);
+        break;
+      case "number-card":
+        this.cardRenderer.render(this.root, t, r);
+        break;
+    }
+  }
+  destroy() {
+    var e;
+    (e = this.chartRenderer) == null || e.destroy(), this.chartRenderer = null, this.root.innerHTML = "";
+  }
+  renderComponent(e, t) {
+    var r;
+    switch (e.type) {
+      case "bar":
+      case "line":
+      case "pie":
+      case "donut":
+      case "area":
+        (r = this.chartRenderer) == null || r.destroy(), this.chartRenderer = new re(this.root), this.chartRenderer.render(e, t, this.theme);
+        break;
+      case "table":
+        this.tableRenderer.render(this.root, e, t);
+        break;
+      case "number-card":
+        this.cardRenderer.render(this.root, e, t);
+        break;
+      default:
+        this.root.innerHTML = `<div class="ds-chart-empty">Unsupported component type: ${e.type}</div>`;
+    }
+  }
+}
+let ee = !1;
+function pe() {
+  if (!(ee || typeof document == "undefined")) {
+    ee = !0;
+    try {
+      const P = `/* ─────────────────────────────────────────────────────────────────────────────
+   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.
+───────────────────────────────────────────────────────────────────────────── */
+
+/* ── Reset inside SDK containers ──────────────────────────────────────────── */
+.ds-embed-root *,
+.ds-embed-root *::before,
+.ds-embed-root *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Root container ────────────────────────────────────────────────────────── */
+.ds-embed-root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+  /* Default white background — overridden by page backgroundColor from publish page */
+  background: #ffffff;
+  color: #111827;
+}
+
+.ds-embed-root.ds-theme-light {
+  /* No forced background — let component styleConfig backgrounds show through */
+  color: #111827;
+}
+
+.ds-embed-root.ds-theme-dark {
+  /* No forced background — let component styleConfig backgrounds show through */
+  color: #f1f5f9;
+}
+
+/* ── Loading state ─────────────────────────────────────────────────────────── */
+.ds-embed-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  gap: 12px;
+  color: #6b7280;
+}
+
+.ds-embed-spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid #e5e7eb;
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: ds-spin 0.8s linear infinite;
+}
+
+@keyframes ds-spin {
+  to { transform: rotate(360deg); }
+}
+
+.ds-embed-loading-text {
+  font-size: 13px;
+}
+
+/* ── Error state ───────────────────────────────────────────────────────────── */
+.ds-embed-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  gap: 8px;
+  padding: 24px;
+  text-align: center;
+  color: #ef4444;
+}
+
+.ds-embed-error-icon {
+  font-size: 32px;
+}
+
+.ds-embed-error-message {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+/* ── Filter bar ────────────────────────────────────────────────────────────── */
+.ds-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  background: inherit;
+}
+
+.ds-theme-dark .ds-filter-bar {
+  border-bottom-color: #1e293b;
+}
+
+.ds-filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ds-filter-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6b7280;
+}
+
+.ds-filter-select,
+.ds-filter-input {
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 13px;
+  background: #ffffff;
+  color: #111827;
+  cursor: pointer;
+  min-width: 130px;
+}
+
+.ds-theme-dark .ds-filter-select,
+.ds-theme-dark .ds-filter-input {
+  background: #1e293b;
+  border-color: #334155;
+  color: #f1f5f9;
+}
+
+.ds-filter-select:focus,
+.ds-filter-input:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+}
+
+.ds-date-range-inputs {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.ds-date-range-inputs input[type="date"] {
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 13px;
+  background: #ffffff;
+  color: #111827;
+}
+
+.ds-theme-dark .ds-date-range-inputs input[type="date"] {
+  background: #1e293b;
+  border-color: #334155;
+  color: #f1f5f9;
+}
+
+/* ── Page / Tab navigation ─────────────────────────────────────────────────── */
+.ds-page-nav {
+  display: flex;
+  gap: 4px;
+  padding: 8px 16px 0;
+  border-bottom: 1px solid #e5e7eb;
+  overflow-x: auto;
+}
+
+.ds-theme-dark .ds-page-nav {
+  border-bottom-color: #1e293b;
+}
+
+.ds-page-tab {
+  padding: 6px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.ds-page-tab:hover {
+  color: #111827;
+}
+
+.ds-theme-dark .ds-page-tab:hover {
+  color: #f1f5f9;
+}
+
+.ds-page-tab.ds-active {
+  color: #6366f1;
+  border-bottom-color: #6366f1;
+}
+
+/* ── Grid canvas ───────────────────────────────────────────────────────────── */
+.ds-canvas {
+  position: relative;
+  width: 100%;
+  /* No horizontal padding — grid.clientWidth must equal container width so
+     GridLayout.colWidth = containerWidth/24 matches the dashboard builder.
+     16px on each side was shrinking the grid by 32px and misaligning positions. */
+  padding: 8px 0 16px;
+  overflow-x: hidden;
+}
+
+.ds-grid {
+  position: relative;
+  width: 100%;
+  /* Clip absolutely-positioned children to the grid boundary so rounding
+     errors or miscalculated widths don't create a horizontal scrollbar. */
+  overflow: hidden;
+}
+
+.ds-component-wrapper {
+  position: absolute;
+  /* 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 ───────────────────────────────────────────────────────── */
+.ds-chart-card {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-theme-dark .ds-chart-card {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+.ds-chart-title {
+  padding: 10px 14px 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  flex-shrink: 0;
+}
+
+.ds-theme-dark .ds-chart-title {
+  color: #e2e8f0;
+}
+
+.ds-chart-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.ds-chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #9ca3af;
+  font-size: 13px;
+}
+
+/* ── Table component ───────────────────────────────────────────────────────── */
+.ds-table-card {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.ds-theme-dark .ds-table-card {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+/* ── Table header: dot + title on left, search on right ──────────────────────*/
+.ds-table-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px 8px;
+  flex-shrink: 0;
+  gap: 8px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.ds-theme-dark .ds-table-header-row {
+  border-bottom-color: #334155;
+}
+
+.ds-table-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.ds-table-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #6366f1;
+  flex-shrink: 0;
+}
+
+.ds-table-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-theme-dark .ds-table-title {
+  color: #e2e8f0;
+}
+
+/* ── Search ──────────────────────────────────────────────────────────────────*/
+.ds-table-search-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.ds-table-search-icon {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: #9ca3af;
+  pointer-events: none;
+}
+
+.ds-table-search {
+  height: 30px;
+  padding: 0 10px 0 28px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 12px;
+  background: #f9fafb;
+  color: #374151;
+  width: 180px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.ds-table-search:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
+  background: #fff;
+}
+
+.ds-theme-dark .ds-table-search {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-theme-dark .ds-table-search:focus {
+  background: #1e293b;
+}
+
+/* ── Scroll area ─────────────────────────────────────────────────────────────*/
+.ds-table-scroll {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+.ds-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.ds-table-sno-th {
+  width: 48px;
+  text-align: center !important;
+}
+
+.ds-table-sno {
+  text-align: center;
+  color: #9ca3af;
+  font-size: 11px;
+}
+
+.ds-theme-dark .ds-table-sno {
+  color: #64748b;
+}
+
+.ds-table th {
+  position: sticky;
+  top: 0;
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: #f9fafb;
+  color: #6b7280;
+  border-bottom: 1px solid #e5e7eb;
+  white-space: nowrap;
+}
+
+.ds-theme-dark .ds-table th {
+  background: #0f172a;
+  color: #94a3b8;
+  border-bottom-color: #334155;
+}
+
+.ds-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid #f3f4f6;
+  color: #374151;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-theme-dark .ds-table td {
+  color: #cbd5e1;
+  border-bottom-color: #1e293b;
+}
+
+.ds-table tr:hover td {
+  background: #f9fafb;
+}
+
+.ds-theme-dark .ds-table tr:hover td {
+  background: #0f172a;
+}
+
+/* ── Footer: info + pagination ───────────────────────────────────────────────*/
+.ds-table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  border-top: 1px solid #f3f4f6;
+  flex-shrink: 0;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.ds-theme-dark .ds-table-footer {
+  border-top-color: #334155;
+}
+
+.ds-table-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.ds-theme-dark .ds-table-info {
+  color: #94a3b8;
+}
+
+.ds-table-rows-label {
+  margin-left: 4px;
+}
+
+.ds-table-page-size {
+  height: 28px;
+  padding: 0 6px;
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+  font-size: 12px;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+  outline: none;
+}
+
+.ds-theme-dark .ds-table-page-size {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-table-pagination {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ds-table-pg-btn {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+  white-space: nowrap;
+}
+
+.ds-table-pg-btn:hover:not(:disabled) {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+.ds-table-pg-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-theme-dark .ds-table-pg-btn {
+  background: #1e293b;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-theme-dark .ds-table-pg-btn:hover:not(:disabled) {
+  background: #0f172a;
+}
+
+.ds-table-pg-info {
+  font-size: 12px;
+  color: #6b7280;
+  white-space: nowrap;
+}
+
+.ds-theme-dark .ds-table-pg-info {
+  color: #94a3b8;
+}
+
+/* ── Loading overlay while fetching a page ───────────────────────────────────*/
+.ds-table-loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255,255,255,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  z-index: 10;
+}
+
+.ds-theme-dark .ds-table-loading-overlay {
+  background: rgba(30,41,59,0.7);
+}
+
+/* ── KPI Number Card ───────────────────────────────────────────────────────── */
+.ds-card {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  text-align: center;
+  background: #ffffff;
+}
+
+.ds-theme-dark .ds-card {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+.ds-card-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #6b7280;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ds-card-value {
+  font-size: 32px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.1;
+}
+
+.ds-theme-dark .ds-card-value {
+  color: #f1f5f9;
+}
+
+/* ── v2: Text / content components ────────────────────────────────────────── */
+
+.ds-text-heading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 8px 12px;
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.3;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-text-heading {
+  color: #f1f5f9;
+}
+
+.ds-text-subheading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 6px 12px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #374151;
+  line-height: 1.4;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-text-subheading {
+  color: #cbd5e1;
+}
+
+.ds-text-body {
+  width: 100%;
+  height: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #374151;
+  line-height: 1.6;
+  overflow: auto;
+}
+
+.ds-theme-dark .ds-text-body {
+  color: #94a3b8;
+}
+
+.ds-text-box {
+  width: 100%;
+  height: 100%;
+  padding: 10px 14px;
+  font-size: 13px;
+  color: #374151;
+  line-height: 1.6;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f9fafb;
+  overflow: auto;
+}
+
+.ds-theme-dark .ds-text-box {
+  color: #cbd5e1;
+  border-color: #334155;
+  background: #1e293b;
+}
+
+/* ── v2: Header component ──────────────────────────────────────────────────── */
+
+.ds-header-component {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  background: #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-header-component {
+  background: #1e293b;
+  border-bottom-color: #334155;
+}
+
+.ds-header-content {
+  font-size: 18px;
+  font-weight: 700;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-theme-dark .ds-header-content {
+  color: #f1f5f9;
+}
+
+/* ── v2: Section container ─────────────────────────────────────────────────── */
+
+.ds-section-wrapper {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #f9fafb;
+  overflow: hidden;
+}
+
+.ds-theme-dark .ds-section-wrapper {
+  border-color: #334155;
+  background: #1e293b;
+}
+
+.ds-section-title {
+  padding: 8px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6b7280;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.ds-theme-dark .ds-section-title {
+  color: #94a3b8;
+  border-bottom-color: #334155;
+}
+
+/* ── Filter panel (publish-page style: toggle + collapsible items + Apply) ─── */
+
+.ds-fp {
+  border-bottom: 1px solid #e5e7eb;
+  background: inherit;
+}
+
+.ds-theme-dark .ds-fp {
+  border-bottom-color: #1e293b;
+}
+
+/* ── Toggle bar ────────────────────────────────────────────────────────────── */
+.ds-fp-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+}
+
+/* ── Panel header ──────────────────────────────────────────────────────────── */
+.ds-fp-panel-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.ds-theme-dark .ds-fp-panel-hd {
+  border-bottom-color: #334155;
+}
+
+.ds-fp-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.ds-theme-dark .ds-fp-panel-title {
+  color: #f1f5f9;
+}
+
+.ds-fp-panel-title svg {
+  width: 16px;
+  height: 16px;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.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 = P, document.head.appendChild(e);
+    } catch (P) {
+    }
+  }
+}
+function te(P) {
+  if (typeof P == "string") {
+    const e = document.querySelector(P);
+    if (!e) throw new Error(`Deepspot SDK: container "${P}" not found in DOM`);
+    return e;
+  }
+  return P;
+}
+class fe {
+  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 ie(e.baseUrl, e.apiKey), pe();
+  }
+  // ── Embed full dashboard ────────────────────────────────────────────────────
+  async embedDashboard(e) {
+    var i, a, f, h, v, m, p, n, g, u;
+    const t = te(e.container), r = (i = e.embedLevel) != null ? i : "dashboard", s = (a = e.theme) != null ? a : "light";
+    t.style.height = e.height || "600px", t.style.display = "block";
+    const o = this.createRoot(t, s);
+    this.showLoading(o);
+    try {
+      const b = await this.apiClient.getEmbedToken({
+        dashboardId: e.dashboardId,
+        embedType: "dashboard",
+        embedLevel: r,
+        userId: e.userId,
+        tenantId: e.tenantId
+      }), l = await this.apiClient.getDashboardRender(
+        e.dashboardId,
+        b,
+        {
+          embedLevel: r,
+          pageId: e.pageId,
+          tabId: e.tabId,
+          filters: e.filters || {}
+        }
+      );
+      let d;
+      const c = new D(o, {
+        embedLevel: r,
+        theme: s,
+        // v1 backward compat (hideFilters → hideGlobalFilters)
+        hideFilters: (f = e.hideGlobalFilters) != null ? f : !1,
+        hideExport: (h = e.hideExport) != null ? h : !1,
+        // v2 visibility
+        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: ($) => this.apiClient.getFilterOptions(e.dashboardId, $, b),
+        onFetchTablePage: ($, w, k) => this.apiClient.getTablePage(e.dashboardId, $, w, k, b),
+        onTabSwitch: async ($, w) => {
+          var k;
+          (k = e.onTabSwitch) == null || k.call(e, $, w);
+          try {
+            const x = await this.apiClient.getDashboardRender(
+              e.dashboardId,
+              b,
+              {
+                embedLevel: r,
+                pageId: $,
+                tabId: w,
+                // Use renderer's live filter state — instance.filters is a stale copy
+                filters: c.getActiveFilters(),
+                filterOperators: c.getActiveFilterOperators(),
+                localFilters: c.getActiveLocalFilters()
+              }
+            );
+            c.update(x);
+          } catch (x) {
+            console.error("Deepspot SDK: tab fetch failed", x);
+          }
+        }
+      });
+      return c.render(l), d = new Z({
+        dashboardId: e.dashboardId,
+        token: b,
+        embedType: "dashboard",
+        embedLevel: r,
+        activePageId: l.activePage,
+        activeTabId: l.activeTab,
+        activeFilters: e.filters || {},
+        apiClient: this.apiClient,
+        renderer: c,
+        onFilterChange: e.onFilterChange
+      }), 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 s;
+    const t = te(e.container);
+    t.style.height = e.height || "400px", t.style.display = "block";
+    const r = this.createRoot(t, e.theme || "light");
+    this.showLoading(r);
+    try {
+      const o = await this.apiClient.getEmbedToken({
+        dashboardId: e.dashboardId,
+        embedType: "report",
+        componentId: e.componentId,
+        userId: e.userId,
+        tenantId: e.tenantId
+      }), i = await this.apiClient.getReportRender(
+        e.dashboardId,
+        e.componentId,
+        o,
+        { filters: e.filters || {} }
+      ), a = new ce(r, e.theme || "light");
+      return a.render(i, e.onReady), new Z({
+        dashboardId: e.dashboardId,
+        componentId: e.componentId,
+        token: o,
+        embedType: "report",
+        activeFilters: e.filters || {},
+        apiClient: this.apiClient,
+        renderer: a
+      });
+    } catch (o) {
+      throw this.showError(r, (o == null ? void 0 : o.message) || "Failed to load report"), (s = e.onError) == null || s.call(e, (o == null ? void 0 : o.message) || "Failed to load report"), o;
+    }
+  }
+  // ── Private helpers ─────────────────────────────────────────────────────────
+  createRoot(e, t) {
+    e.innerHTML = "";
+    const r = document.createElement("div");
+    return r.className = `ds-embed-root ds-theme-${t}`, r.style.width = "100%", r.style.height = "100%", e.appendChild(r), r;
+  }
+  showLoading(e) {
+    e.innerHTML = `
+      <div class="ds-embed-loading">
+        <div class="ds-embed-spinner"></div>
+        <div class="ds-embed-loading-text">Loading…</div>
+      </div>
+    `;
+  }
+  showError(e, t) {
+    e.innerHTML = `
+      <div class="ds-embed-error">
+        <div class="ds-embed-error-icon">⚠</div>
+        <div>${t}</div>
+        <div class="ds-embed-error-message">Check your SDK configuration.</div>
+      </div>
+    `;
+  }
+}
+export {
+  fe as DeepspotSDK
+};