deepspotscreen-sdk 0.1.2 → 0.2.0

package/dist/DeepspotSDK-ClR0wrhx.js

@@ -1,2272 +0,0 @@
-class ae {
-  constructor(e, t) {
-    this.tokenCache = /* @__PURE__ */ new Map(), this.baseUrl = e.replace(/\/$/, ""), this.apiKey = t;
-  }
-  // ── Embed Token ─────────────────────────────────────────────────────────────
-  async getEmbedToken(e) {
-    var i, a, o, c;
-    const t = [
-      e.dashboardId,
-      e.embedType,
-      (i = e.embedLevel) != null ? i : "",
-      (a = e.componentId) != null ? a : "",
-      (o = e.userId) != null ? o : ""
-    ].join(":"), s = this.tokenCache.get(t);
-    if (s && s.expiresAt > Date.now() + 6e4) return s.token;
-    const r = await this.post(
-      "/dashboard-builder/embed-token",
-      {
-        dashboardId: e.dashboardId,
-        embedType: e.embedType,
-        embedLevel: (c = e.embedLevel) != null ? c : "dashboard",
-        componentId: e.componentId,
-        userId: e.userId,
-        tenantId: e.tenantId,
-        expiresIn: 3600
-      },
-      { "x-deepspot-api-key": this.apiKey }
-    );
-    return this.tokenCache.set(t, {
-      token: r.token,
-      expiresAt: new Date(r.expiresAt).getTime()
-    }), r.token;
-  }
-  // ── Dashboard Render (lazy — loads one tab at a time) ──────────────────────
-  async getDashboardRender(e, t, s = {}) {
-    var i;
-    const r = new URLSearchParams({
-      embedType: "dashboard",
-      embedLevel: (i = s.embedLevel) != null ? i : "dashboard"
-    });
-    return s.pageId && r.set("pageId", s.pageId), s.tabId && r.set("tabId", s.tabId), s.filters && Object.entries(s.filters).forEach(([a, o]) => {
-      o != null && o !== "" && r.set(`filter[${a}]`, Array.isArray(o) ? o.join(",") : String(o));
-    }), this.get(
-      `/dashboard-builder/embed/${e}/render?${r}`,
-      { "x-embed-token": t }
-    );
-  }
-  // ── Single Report Render ────────────────────────────────────────────────────
-  async getReportRender(e, t, s, r = {}) {
-    const i = new URLSearchParams({
-      embedType: "report",
-      embedLevel: "report",
-      componentId: t
-    });
-    return r.filters && Object.entries(r.filters).forEach(([a, o]) => {
-      o != null && o !== "" && i.set(`filter[${a}]`, Array.isArray(o) ? o.join(",") : String(o));
-    }), this.get(
-      `/dashboard-builder/embed/${e}/render?${i}`,
-      { "x-embed-token": s }
-    );
-  }
-  // ── 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, s, r, i) {
-    return this.get(
-      `/dashboard-builder/embed/${e}/table/${t}/data?page=${s}&pageSize=${r}`,
-      { "x-embed-token": i }
-    );
-  }
-  // ── 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, s) {
-    try {
-      const r = await this.get(
-        `/dashboard-builder/embed/${e}/filters/${t}/options`,
-        { "x-embed-token": s }
-      );
-      return Array.isArray(r) ? r : Array.isArray(r == null ? void 0 : r.options) ? r.options : Array.isArray(r == null ? void 0 : r.data) ? r.data : [];
-    } catch (r) {
-      return [];
-    }
-  }
-  clearTokenCache() {
-    this.tokenCache.clear();
-  }
-  // ── Private helpers ─────────────────────────────────────────────────────────
-  async get(e, t = {}) {
-    const s = await fetch(`${this.baseUrl}${e}`, {
-      method: "GET",
-      headers: { "Content-Type": "application/json", ...t }
-    });
-    return this.handleResponse(s);
-  }
-  async post(e, t, s = {}) {
-    const r = await fetch(`${this.baseUrl}${e}`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json", ...s },
-      body: JSON.stringify(t)
-    });
-    return this.handleResponse(r);
-  }
-  async delete(e, t = {}) {
-    const s = await fetch(`${this.baseUrl}${e}`, {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json", ...t }
-    });
-    if (!s.ok) throw new Error(`Deepspot SDK: DELETE ${e} failed (${s.status})`);
-  }
-  async handleResponse(e) {
-    if (!e.ok) {
-      let s = `HTTP ${e.status}`;
-      try {
-        const r = await e.json();
-        s = (r == null ? void 0 : r.message) || (r == null ? void 0 : r.error) || s;
-      } catch (r) {
-      }
-      throw new Error(`Deepspot SDK: ${s}`);
-    }
-    const t = await e.json();
-    return (t == null ? void 0 : t.data) !== void 0 ? t.data : t;
-  }
-}
-class Z {
-  constructor(e) {
-    var t, s;
-    this.destroyed = !1, this.refreshTimer = null, this.opts = e, this.filters = { ...e.activeFilters }, this.activePageId = (t = e.activePageId) != null ? t : "", this.activeTabId = (s = e.activeTabId) != null ? s : "";
-  }
-  /** 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: s, token: r, embedType: i, embedLevel: a } = this.opts;
-    return i === "report" && s ? e.getReportRender(t, s, r, {
-      filters: this.filters
-    }) : e.getDashboardRender(t, r, {
-      embedLevel: a,
-      pageId: this.activePageId || void 0,
-      tabId: this.activeTabId || void 0,
-      filters: this.filters
-    });
-  }
-}
-const oe = 24, A = 10, D = 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 / oe;
-  }
-  /** Convert grid position {x,y,w,h} → CSS absolute pixel values */
-  toPx(e) {
-    const t = this.colWidth, s = D / 2;
-    return {
-      left: e.x * t + s,
-      top: (e.y - this.minY) * A + s,
-      width: e.w * t - D,
-      height: e.h * A - D
-    };
-  }
-  /** Total pixel height required to fit all positioned components */
-  static totalHeight(e) {
-    if (!e.length) return 400;
-    const t = Math.min(...e.map((r) => r.y));
-    return (Math.max(...e.map((r) => r.y + r.h)) - t) * A + 40;
-  }
-  /** Apply absolute positioning styles directly to a DOM element */
-  applyStyles(e, t) {
-    const s = this.toPx(t);
-    e.style.position = "absolute", e.style.left = `${s.left}px`, e.style.top = `${s.top}px`, e.style.width = `${s.width}px`, e.style.height = `${s.height}px`;
-  }
-}
-let z = null;
-function de() {
-  return z || (z = import("./apexcharts.common-k3hLWpB8.js").then((k) => k.a)), z;
-}
-class se {
-  constructor(e) {
-    this.chart = null, this.container = e;
-  }
-  async render(e, t, s, r) {
-    if (!t || t.length === 0) {
-      this.renderEmpty(e.title);
-      return;
-    }
-    const i = this.buildOptions(e, t, s, r);
-    if (!i) {
-      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 a = this.container.querySelector(`#ds-chart-body-${e.id}`);
-    if (a)
-      try {
-        this.chart && this.chart.destroy();
-        const { default: o } = await de();
-        this.chart = new o(a, i), this.chart.render();
-      } catch (o) {
-        console.error("[Deepspot SDK] ChartRenderer error:", o), a.innerHTML = '<div class="ds-chart-empty">Chart render error</div>';
-      }
-  }
-  async update(e, t, s) {
-    if (!this.chart || !t || t.length === 0) {
-      await this.render(e, t, s);
-      return;
-    }
-    const { series: r, categories: i } = this.extractSeriesAndCategories(e, t);
-    try {
-      this.chart.updateOptions({
-        series: r,
-        xaxis: { categories: i },
-        theme: { mode: s }
-      });
-    } catch (a) {
-      this.render(e, t, s);
-    }
-  }
-  destroy() {
-    var e;
-    try {
-      (e = this.chart) == null || e.destroy();
-    } catch (t) {
-    }
-    this.chart = null;
-  }
-  // ── Private ─────────────────────────────────────────────────────────────────
-  buildOptions(e, t, s, r) {
-    const i = e.type;
-    return i === "pie" || i === "donut" ? this.buildPieOptions(e, t, s, r) : i === "bar" || i === "line" || i === "area" ? this.buildCartesianOptions(e, t, s, r) : null;
-  }
-  buildCartesianOptions(e, t, s, r) {
-    var h;
-    const { series: i, categories: a, xAxisLabel: o, yAxisLabel: c, seriesColors: d } = this.extractSeriesAndCategories(e, t), f = e.properties || {}, g = ["#4f46e5", "#10b981", "#f59e0b", "#ef4444", "#3b82f6", "#8b5cf6", "#ec4899", "#14b8a6"];
-    let u;
-    if (d.length > 0 && d.length === i.length)
-      u = d;
-    else {
-      const b = f.colors ? Object.values(f.colors).filter(Boolean) : [];
-      u = b.length > 0 ? b : g;
-    }
-    const n = s === "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: r != null ? r : "100%"
-      },
-      theme: { mode: s },
-      series: i,
-      xaxis: {
-        categories: a,
-        title: { text: o },
-        labels: {
-          rotate: a.length > 8 ? -45 : 0,
-          style: { colors: n ? "#94a3b8" : "#6b7280", fontSize: "11px" }
-        },
-        axisBorder: { color: n ? "#334155" : "#e5e7eb" },
-        axisTicks: { color: n ? "#334155" : "#e5e7eb" }
-      },
-      yaxis: {
-        title: { text: c },
-        labels: { style: { colors: n ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
-      },
-      colors: u,
-      legend: {
-        show: i.length > 1 || ((h = f.showLegend) != null ? h : !1),
-        position: "bottom",
-        labels: { colors: n ? "#94a3b8" : "#6b7280" }
-      },
-      grid: {
-        borderColor: n ? "#1e293b" : "#f3f4f6",
-        strokeDashArray: 4,
-        padding: {
-          bottom: a.length > 8 ? 60 : 10
-        }
-      },
-      tooltip: { theme: s },
-      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: i.length === 1
-        }
-      }
-    };
-  }
-  buildPieOptions(e, t, s, r) {
-    const i = e.properties || {}, a = t.length > 0 ? Object.keys(t[0]) : [], o = a[0] || "label", c = a[1] || "value", d = t.map((b) => {
-      var l;
-      return String((l = b[o]) != null ? l : "");
-    }), f = t.map((b) => Number(b[c]) || 0), g = s === "dark", u = ["#4f46e5", "#10b981", "#f59e0b", "#ef4444", "#3b82f6", "#8b5cf6", "#ec4899", "#14b8a6"], n = i.colors ? Object.values(i.colors).filter(Boolean) : [], h = n.length > 0 ? n : u;
-    return {
-      chart: {
-        type: e.type,
-        toolbar: { show: !1 },
-        background: "transparent",
-        fontFamily: "inherit",
-        height: r != null ? r : "100%"
-      },
-      theme: { mode: s },
-      series: f,
-      labels: d,
-      colors: h,
-      legend: {
-        position: "bottom",
-        labels: { colors: g ? "#94a3b8" : "#6b7280" }
-      },
-      tooltip: { theme: s },
-      dataLabels: { enabled: d.length <= 8 },
-      plotOptions: {
-        pie: {
-          donut: { size: e.type === "donut" ? "65%" : "0%" }
-        }
-      }
-    };
-  }
-  extractSeriesAndCategories(e, t) {
-    const s = e.properties || {}, r = t.length > 0 ? Object.keys(t[0]) : [], i = s.xAxis || r[0] || "x";
-    let a = [];
-    if (s.selectedYAxisColumn)
-      try {
-        const n = typeof s.selectedYAxisColumn == "string" ? JSON.parse(s.selectedYAxisColumn) : s.selectedYAxisColumn;
-        Array.isArray(n) && (a = n.map(
-          (h) => typeof h == "string" ? { column: h } : h
-        ));
-      } catch (n) {
-      }
-    if (!a.length && s.yAxis) {
-      const n = s.yAxis;
-      a = (Array.isArray(n) ? n : [n]).map((b) => ({ column: String(b) }));
-    }
-    !a.length && r.length > 1 && (a = r.slice(1).map((n) => ({ column: n })));
-    const o = t.map((n) => {
-      var h;
-      return String((h = n[i]) != null ? h : "");
-    }), c = t.length > 0 ? Object.keys(t[0]) : [], d = a.map((n) => {
-      const h = c.includes(n.column) ? n.column : null, b = h ? null : c.find((p) => p.includes(n.column) || n.column.includes(p)), l = !h && !b ? c.find((p) => {
-        var y;
-        return p !== i && !isNaN(Number((y = t[0]) == null ? void 0 : y[p]));
-      }) : null, m = h || b || l || 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((p) => {
-          const y = p[m];
-          return y != null ? Number(y) : null;
-        })
-      };
-    }), f = a.map((n) => n.color || n.colorHex || "").filter(Boolean), g = s.xAxisLabel || i, u = s.yAxisLabel || (a.length === 1 ? a[0].column : "");
-    return { series: d, categories: o, xAxisLabel: g, yAxisLabel: u, seriesColors: f };
-  }
-  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 re {
-  constructor() {
-    this.columns = [], this.allData = [], this.currentRows = [], this.totalRows = 0, this.currentPage = 1, this.currentPageSize = 10, this.searchTerm = "", this.isLoading = !1;
-  }
-  // ── Public API ─────────────────────────────────────────────────────────────
-  render(e, t, s, r) {
-    var f;
-    this.container = e, this.component = t, this.fetchPage = r, this.searchTerm = "", this.currentPage = 1, this.currentPageSize = 10;
-    const i = s && !Array.isArray(s) && "rows" in s;
-    if (i) {
-      const g = s;
-      this.currentRows = g.rows, this.allData = [], this.totalRows = g.total, this.currentPage = g.page, this.currentPageSize = g.pageSize;
-    } else
-      this.allData = s || [], this.currentRows = [], this.totalRows = this.allData.length, this.currentPage = 1;
-    if (i && s.rows.length === 0 && s.total === 0 || !i && this.allData.length === 0) {
-      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 a = i ? s.rows[0] : this.allData[0], o = a ? Object.keys(a) : [], c = ((f = t.properties) == null ? void 0 : f.columns) || [], d = c.length ? c.filter((g) => o.includes(g)) : [];
-    this.columns = d.length ? d : o, this.paint();
-  }
-  // ── Rendering ──────────────────────────────────────────────────────────────
-  paint() {
-    const { rows: e, startNum: t } = this.getPageRows(), s = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), r = (this.currentPage - 1) * this.currentPageSize + 1, i = this.fetchPage ? Math.min(r - 1 + (this.isLoading ? this.currentPageSize : e.length), this.totalRows) : Math.min(this.currentPage * this.currentPageSize, this.totalRows), a = this.columns.map((u) => `<th>${this.escape(this.formatHeader(u))}</th>`).join(""), o = e.length === 0 ? `<tr><td colspan="${this.columns.length + 1}" style="text-align:center;padding:20px;color:#9ca3af">No results found</td></tr>` : e.map((u, n) => {
-      const h = this.columns.map((b) => {
-        const l = u[b];
-        return `<td title="${this.escape(String(l != null ? l : ""))}">${this.escape(this.formatValue(l))}</td>`;
-      }).join("");
-      return `<tr><td class="ds-table-sno">${t + n}</td>${h}</tr>`;
-    }).join(""), c = this.currentPageSize, d = [10, 25, 50, 100].map((u) => `<option value="${u}"${u === c ? " selected" : ""}>${u}</option>`).join(""), f = this.currentPage <= 1, g = this.currentPage >= s;
-    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>${a}</tr></thead>
-            <tbody>${o}</tbody>
-          </table>
-        </div>
-        <div class="ds-table-footer">
-          <div class="ds-table-info">
-            <span>${r.toLocaleString()}–${i.toLocaleString()} of ${this.totalRows.toLocaleString()}</span>
-            <span class="ds-table-rows-label">Rows:</span>
-            <select class="ds-table-page-size">${d}</select>
-          </div>
-          <div class="ds-table-pagination">
-            <button class="ds-table-pg-btn" data-action="first" ${f ? "disabled" : ""}>&#171;</button>
-            <button class="ds-table-pg-btn" data-action="prev"  ${f ? "disabled" : ""}>Previous</button>
-            <span class="ds-table-pg-info">Page ${this.currentPage} of ${s}</span>
-            <button class="ds-table-pg-btn" data-action="next" ${g ? "disabled" : ""}>Next</button>
-            <button class="ds-table-pg-btn" data-action="last" ${g ? "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((s) => {
-      s.addEventListener("click", () => {
-        if (s.disabled) return;
-        const r = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), i = s.dataset.action;
-        let a = this.currentPage;
-        i === "first" ? a = 1 : i === "prev" ? a = Math.max(1, this.currentPage - 1) : i === "next" ? a = Math.min(r, this.currentPage + 1) : i === "last" && (a = r), (a !== this.currentPage || i === "first" || i === "last") && (this.currentPage = a, this.fetchPage ? this.loadPage(a) : 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(), s = (this.currentPage - 1) * this.currentPageSize;
-    return { rows: t.slice(s, s + this.currentPageSize), startNum: e };
-  }
-  filteredRows() {
-    if (!this.searchTerm) return this.allData;
-    const e = this.searchTerm.toLowerCase();
-    return this.allData.filter(
-      (t) => this.columns.some((s) => {
-        var r;
-        return String((r = t[s]) != null ? r : "").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 ie {
-  render(e, t, s) {
-    var h;
-    const r = t.properties || {};
-    let i = null;
-    if (s && s.length > 0) {
-      const b = s[0], l = r.metric || Object.keys(b)[0], m = b[l];
-      if (m !== void 0)
-        i = m;
-      else {
-        const p = Object.keys(b).find(
-          (y) => y.includes(l) || l.includes(y)
-        );
-        i = b[p != null ? p : Object.keys(b)[0]];
-      }
-    }
-    let a;
-    if (i == null)
-      try {
-        const b = (h = r == null ? void 0 : r.data) == null ? void 0 : h.dataContent, l = b ? typeof b == "string" ? JSON.parse(b) : b : null;
-        a = l != null && l.value ? String(l.value) : "—";
-      } catch (b) {
-        a = "—";
-      }
-    else
-      a = this.formatValue(i, r);
-    const o = r.styleConfig || {}, c = o.backgroundColor || r.backgroundColor || "", d = o.color || o.textColor || r.textColor || "", f = t.title || "", g = c ? `background:${c};border:none;` : "", u = d ? `color:${d};` : "", n = d ? `color:${d};opacity:0.7;` : "";
-    e.innerHTML = `
-      <div class="ds-card"${g ? ` style="${g}"` : ""}>
-        <div class="ds-card-label"${n ? ` style="${n}"` : ""}>${f}</div>
-        <div class="ds-card-value"${u ? ` style="${u}"` : ""}>${a}</div>
-      </div>
-    `;
-  }
-  formatValue(e, t) {
-    if (e == null) return "—";
-    const s = Number(e);
-    if (isNaN(s)) return String(e);
-    const r = (t == null ? void 0 : t.prefix) || (t == null ? void 0 : t.currencySymbol) || "", i = (t == null ? void 0 : t.suffix) || "", a = s % 1 === 0 ? s.toLocaleString() : parseFloat(s.toFixed(2)).toLocaleString();
-    return `${r}${a}${i}`;
-  }
-}
-class ne {
-  constructor(e, t) {
-    this.currentValues = {}, this.container = e, this.onFilterChange = t;
-  }
-  render(e, t = {}) {
-    if (!e || e.length === 0) {
-      this.container.style.display = "none";
-      return;
-    }
-    this.container.style.display = "", this.currentValues = { ...t }, this.container.innerHTML = `<div class="ds-filter-bar">${e.map((s) => this.renderFilter(s, t[s.applyToField || s.filterId])).join("")}</div>`, this.attachListeners(e);
-  }
-  /**
-   * Populate a dropdown / multi-select with options fetched from the API.
-   * Called asynchronously after the filter bar is rendered.
-   */
-  updateOptions(e, t) {
-    const s = this.container.querySelector(
-      `select[data-filter-id="${e}"]`
-    );
-    if (!s) return;
-    const r = s.value;
-    s.innerHTML = '<option value="">All</option>' + t.map(
-      (i) => `<option value="${this.escAttr(i)}">${this.escText(i)}</option>`
-    ).join(""), r && t.includes(r) && (s.value = r);
-  }
-  /** Update the stored values without re-rendering (for programmatic setFilter) */
-  updateValues(e) {
-    Object.assign(this.currentValues, e), Object.entries(e).forEach(([t, s]) => {
-      const r = this.container.querySelector(`[data-filter-id="${t}"]`);
-      r && s !== void 0 && (r.value = String(s));
-    });
-  }
-  // ── Private ─────────────────────────────────────────────────────────────────
-  renderFilter(e, t) {
-    const s = `ds-filter-${e.filterId}`, r = `<label class="ds-filter-label" for="${s}">${e.label}</label>`;
-    switch (e.type) {
-      case "dropdown":
-        return `
-          <div class="ds-filter-item">
-            ${r}
-            <select class="ds-filter-select" id="${s}" data-filter-id="${e.filterId}">
-              <option value="">All</option>
-              ${(e.options || []).map((o) => `
-                <option value="${this.escAttr(o)}" ${t === o ? "selected" : ""}>
-                  ${this.escText(o)}
-                </option>
-              `).join("")}
-            </select>
-          </div>`;
-      case "multi-select":
-        return `
-          <div class="ds-filter-item">
-            ${r}
-            <select class="ds-filter-select" id="${s}" data-filter-id="${e.filterId}" multiple size="1">
-              ${(e.options || []).map((o) => `
-                <option value="${this.escAttr(o)}">${this.escText(o)}</option>
-              `).join("")}
-            </select>
-          </div>`;
-      case "date-range":
-        const i = (t == null ? void 0 : t.from) || "", a = (t == null ? void 0 : t.to) || "";
-        return `
-          <div class="ds-filter-item">
-            ${r}
-            <div class="ds-date-range-inputs">
-              <input type="date" class="ds-filter-input"
-                data-filter-id="${e.filterId}" data-date-part="from"
-                value="${i}" />
-              <span>–</span>
-              <input type="date" class="ds-filter-input"
-                data-filter-id="${e.filterId}" data-date-part="to"
-                value="${a}" />
-            </div>
-          </div>`;
-      case "text-input":
-        return `
-          <div class="ds-filter-item">
-            ${r}
-            <input type="text" class="ds-filter-input" id="${s}"
-              data-filter-id="${e.filterId}"
-              value="${this.escAttr(String(t != null ? t : ""))}"
-              placeholder="Search..." />
-          </div>`;
-      case "number-input":
-        return `
-          <div class="ds-filter-item">
-            ${r}
-            <input type="number" class="ds-filter-input" id="${s}"
-              data-filter-id="${e.filterId}"
-              value="${this.escAttr(String(t != null ? t : ""))}" />
-          </div>`;
-      default:
-        return "";
-    }
-  }
-  attachListeners(e) {
-    const t = {};
-    this.container.querySelectorAll("[data-filter-id]").forEach((s) => {
-      const r = s.dataset.filterId, i = s.dataset.datePart, a = e.find((c) => c.filterId === r), o = () => {
-        let c;
-        if ((a == null ? void 0 : a.type) === "date-range" && i)
-          t[r] = t[r] || {}, t[r][i] = s.value, c = { ...t[r] };
-        else if ((a == null ? void 0 : a.type) === "multi-select") {
-          const d = s;
-          c = Array.from(d.selectedOptions).map((f) => f.value).filter(Boolean);
-        } else
-          c = s.value;
-        this.currentValues[r] = c, this.onFilterChange(r, c);
-      };
-      s.addEventListener(
-        (a == null ? void 0 : a.type) === "text-input" ? "input" : "change",
-        o
-      );
-    });
-  }
-  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 E = class E {
-  constructor(e, t) {
-    this.activePageId = "", this.activeTabId = "", this.activeFilters = {}, this.chartRenderers = /* @__PURE__ */ new Map(), this.tableRenderer = new re(), this.cardRenderer = new ie(), this.isLoadingTab = !1, this.tooltipEl = null, this.root = e, this.opts = t, this.activeFilters = { ...t.initialFilters };
-  }
-  // ── Initial full render ───────────────────────────────────────────────────
-  render(e) {
-    var t, s;
-    this.renderData = e, this.activePageId = e.activePage, this.activeTabId = e.activeTab, this.buildShell(), this.renderNavigation(), this.renderFilterBar(), this.renderGrid(), (s = (t = this.opts).onReady) == null || s.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 u, n;
-    const e = this.root.querySelector("#ds-grid");
-    if (!e) return;
-    const t = this.root.style.height, s = this.root.style.overflow;
-    this.root.style.height = "auto", this.root.style.overflow = "visible";
-    const r = this.root.querySelector("#ds-canvas"), i = (u = r == null ? void 0 : r.style.height) != null ? u : "", a = (n = r == null ? void 0 : r.style.overflow) != null ? n : "";
-    r && (r.style.height = "auto", r.style.overflow = "visible");
-    const o = Array.from(e.querySelectorAll(".ds-table-scroll")), c = o.map((h) => ({
-      el: h,
-      overflow: h.style.overflow,
-      maxHeight: h.style.maxHeight,
-      height: h.style.height
-    }));
-    o.forEach((h) => {
-      h.style.overflow = "visible", h.style.maxHeight = "none", h.style.height = "auto";
-    });
-    const d = e.offsetWidth, f = parseInt(e.style.height, 10) || e.offsetHeight, g = e.getBoundingClientRect().top + window.scrollY;
-    import("./html2canvas.esm-CzwMv54K.js").then(
-      ({ default: h }) => h(e, {
-        scale: 2,
-        useCORS: !0,
-        allowTaint: !0,
-        logging: !1,
-        width: d,
-        height: f,
-        windowWidth: d,
-        windowHeight: f,
-        scrollX: 0,
-        scrollY: -g
-      }).then((b) => {
-        this.root.style.height = t, this.root.style.overflow = s, r && (r.style.height = i, r.style.overflow = a), c.forEach(({ el: l, overflow: m, maxHeight: p, height: y }) => {
-          l.style.overflow = m, l.style.maxHeight = p, l.style.height = y;
-        }), import("./jspdf.es.min-Ge0fRUwj.js").then((l) => l.j).then(({ jsPDF: l }) => {
-          const m = b.width / 2, p = b.height / 2, y = new l({
-            orientation: m >= p ? "landscape" : "portrait",
-            unit: "px",
-            format: [m, p]
-          });
-          y.addImage(b.toDataURL("image/png"), "PNG", 0, 0, m, p), y.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 s = Object.keys(t[0]), r = [s.join(","), ...t.map(
-        (a) => s.map((o) => {
-          var c;
-          return JSON.stringify((c = a[o]) != null ? c : "");
-        }).join(",")
-      )].join(`
-`);
-      Object.assign(document.createElement("a"), {
-        href: URL.createObjectURL(new Blob([r], { type: "text/csv" })),
-        download: `${e.title || e.id}.csv`
-      }).click();
-    });
-  }
-  updateFilterValues(e) {
-    var t;
-    Object.assign(this.activeFilters, e), (t = this.filterRenderer) == null || t.updateValues(e);
-  }
-  // ── Shell ─────────────────────────────────────────────────────────────────
-  buildShell() {
-    const e = this.opts.embedLevel, t = this.renderData.dashboard.pages, s = e === "dashboard" && t.length > 1, r = e === "page" || e === "dashboard";
-    this.root.innerHTML = `
-      ${this.opts.hideExport ? "" : '<div class="ds-toolbar" id="ds-toolbar"></div>'}
-      ${s ? '<nav class="ds-page-nav" id="ds-page-nav"></nav>' : ""}
-      ${r ? '<nav class="ds-page-nav" id="ds-tab-nav"></nav>' : ""}
-      <div id="ds-filter-container"></div>
-      <div class="ds-canvas" id="ds-canvas">
-        <div class="ds-grid" id="ds-grid"></div>
-      </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 i = this.root.querySelector("#ds-filter-container");
-    this.filterRenderer = new ne(i, (a, o) => {
-      var g, u, n, h, b;
-      const c = (g = this.renderData.filters) == null ? void 0 : g.find((l) => l.filterId === a), d = (u = this.renderData.components) == null ? void 0 : u.find(
-        (l) => l.type === "inline-filter" && l.id === a
-      ), f = (c == null ? void 0 : c.applyToField) || ((n = d == null ? void 0 : d.properties) == null ? void 0 : n.applyToField) || a;
-      this.activeFilters[f] = o, (b = (h = this.opts).onFilterChange) == null || b.call(h, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
-    });
-  }
-  buildExportToolbar() {
-    var t, s;
-    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()), (s = e.querySelector("#ds-btn-csv")) == null || s.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 r, i;
-        const s = t.dataset.pageId;
-        s === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(s, (i = (r = this.getTabsForPage(s)[0]) == null ? void 0 : r.id) != null ? i : "");
-      });
-    }));
-  }
-  renderTabNav(e) {
-    const t = this.root.querySelector("#ds-tab-nav");
-    t && this.buildTabButtons(t, e);
-  }
-  buildTabButtons(e, t) {
-    const s = this.getTabsForPage(t);
-    if (s.length <= 1) {
-      e.style.display = "none";
-      return;
-    }
-    e.style.display = "", e.innerHTML = s.map((r) => `
-      <button class="ds-page-tab ${r.id === this.activeTabId ? "ds-active" : ""}"
-        data-tab-id="${r.id}" data-page-id="${t}">${r.title}</button>
-    `).join(""), e.querySelectorAll(".ds-page-tab").forEach((r) => {
-      r.addEventListener("click", () => {
-        const i = r.dataset.tabId, a = r.dataset.pageId;
-        i === this.activeTabId && a === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(a, i);
-      });
-    });
-  }
-  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() {
-    if (this.opts.hideGlobalFilters) return;
-    const e = [
-      ...this.renderData.filters || [],
-      ...this.inlineFiltersAsDefinitions()
-    ];
-    this.filterRenderer.render(e, this.activeFilters), this.fetchFilterOptions();
-  }
-  updateFilterBar() {
-    if (this.opts.hideGlobalFilters) return;
-    const e = [
-      ...this.renderData.filters || [],
-      ...this.inlineFiltersAsDefinitions()
-    ];
-    this.filterRenderer.render(e, this.activeFilters), this.fetchFilterOptions();
-  }
-  /** Convert inline-filter ComponentConfig entries to FilterDefinition shape */
-  inlineFiltersAsDefinitions() {
-    return this.opts.hideInlineFilters ? [] : (this.renderData.components || []).filter((e) => e.type === "inline-filter").map((e) => {
-      var t, s, r, i, a, o, c, d;
-      return {
-        filterId: e.id,
-        label: ((t = e.properties) == null ? void 0 : t.filterLabel) || e.title || "",
-        type: ((s = e.properties) == null ? void 0 : s.filterType) || "dropdown",
-        options: ((r = e.properties) == null ? void 0 : r.filterOptions) || ((i = e.properties) == null ? void 0 : i.options) || [],
-        defaultValue: (a = e.properties) == null ? void 0 : a.defaultValue,
-        targetComponents: ((o = e.properties) == null ? void 0 : o.targetComponents) || [],
-        filterOperator: (c = e.properties) == null ? void 0 : c.filterOperator,
-        applyToField: ((d = e.properties) == null ? void 0 : d.applyToField) || e.id
-      };
-    });
-  }
-  async fetchFilterOptions() {
-    if (this.opts.onFetchFilterOptions)
-      for (const e of this.renderData.filters) {
-        if (e.type !== "dropdown" && e.type !== "multi-select" || e.options && e.options.length > 0) continue;
-        const t = await this.opts.onFetchFilterOptions(e.filterId);
-        t.length > 0 && this.filterRenderer.updateOptions(e.filterId, t);
-      }
-  }
-  // ── Grid ──────────────────────────────────────────────────────────────────
-  renderGrid() {
-    this.hideTabSpinner();
-    const e = this.root.querySelector("#ds-grid");
-    if (!e) return;
-    if (!this.opts.hideBackground) {
-      const d = this.root.querySelector("#ds-canvas"), f = this.renderData.dashboard.pages.find(
-        (u) => u.pageId === this.activePageId
-      ), g = (f == null ? void 0 : f.backgroundColor) || "";
-      d && (d.style.background = g), this.root.style.background = g;
-    }
-    this.chartRenderers.forEach((d) => d.destroy()), this.chartRenderers.clear();
-    const t = (this.renderData.components || []).filter(
-      (d) => d.type !== "inline-filter"
-    );
-    if (!t.length) {
-      e.style.height = "200px", e.innerHTML = '<div class="ds-chart-empty" style="padding-top:80px;">No components on this tab.</div>';
-      return;
-    }
-    const s = e.clientWidth || this.root.clientWidth || 800, r = t.map((d) => d.position), i = r.length ? Math.min(...r.map((d) => d.y)) : 0, a = new Q(s, i);
-    e.style.height = `${Q.totalHeight(r)}px`, e.innerHTML = "";
-    const o = 36, c = [];
-    t.forEach((d) => {
-      var b, l, m;
-      const f = document.createElement("div");
-      if (f.className = "ds-component-wrapper", f.dataset.componentId = d.id, a.applyStyles(f, d.position), !this.opts.hideBackground) {
-        const p = ((l = (b = d.properties) == null ? void 0 : b.styleConfig) == null ? void 0 : l.backgroundColor) || ((m = d.properties) == null ? void 0 : m.backgroundColor);
-        p && (f.style.background = p);
-      }
-      e.appendChild(f);
-      const g = a.toPx(d.position), u = Math.max(50, g.height - o), n = document.createElement("div");
-      n.style.cssText = "width:100%;height:100%;", f.appendChild(n);
-      const h = this.getComponentDescription(d);
-      if (h) {
-        const p = this.getTooltipEl();
-        f.addEventListener("mouseenter", () => {
-          p.textContent = h, p.style.display = "block";
-          const y = f.getBoundingClientRect(), $ = p.offsetHeight || 36;
-          window.innerHeight - y.bottom >= $ + 6 ? p.style.top = `${y.bottom + 4}px` : p.style.top = `${y.top - $ - 4}px`, p.style.left = `${y.left}px`, p.style.width = `${y.width}px`;
-        }), f.addEventListener("mouseleave", () => {
-          p.style.display = "none";
-        });
-      }
-      c.push(
-        this.renderComponent(n, d, u).catch((p) => {
-          console.error(`[Deepspot SDK] Failed to render component ${d.id} (${d.type}):`, p), n.innerHTML = `<div style="padding:8px;color:#ef4444;font-size:12px;">⚠ ${d.type} render error</div>`;
-        })
-      );
-    }), Promise.all(c).catch(() => {
-    });
-  }
-  // ── Component renderer switch ─────────────────────────────────────────────
-  async renderComponent(e, t, s) {
-    var a, o, c, d, f, g, u, n, h, b, l, m, p, y, $, C, I, L, R, P, O, H, M, N, B, K, q, G, U, W, Y, _, J, V, X;
-    const r = this.renderData.data[t.id] || [], i = this.opts.theme;
-    switch (t.type) {
-      case "bar":
-      case "line":
-      case "pie":
-      case "donut":
-      case "area":
-      case "scatter":
-      case "stacked-bar": {
-        const w = new se(e);
-        await w.render(t, r, i, s), this.chartRenderers.set(t.id, w);
-        break;
-      }
-      case "table": {
-        const w = this.opts.onFetchTablePage ? (v, T) => this.opts.onFetchTablePage(t.id, v, T) : void 0;
-        this.tableRenderer.render(e, t, r, w);
-        break;
-      }
-      case "number-card":
-        this.cardRenderer.render(e, t, r);
-        break;
-      case "text-heading": {
-        if (this.opts.hideText) break;
-        const w = ((o = (a = t.properties) == null ? void 0 : a.data) == null ? void 0 : o.dataContent) || ((c = t.properties) == null ? void 0 : c.content) || t.title || "", v = ((d = t.properties) == null ? void 0 : d.styleConfig) || {}, T = this.scToInlineStyle(v), x = this.opts.hideBackground ? {} : this.parseTwColor((g = (f = t.properties) == null ? void 0 : f.color) != null ? g : ""), S = [[
-          x.bg ? `background:${x.bg}` : "",
-          x.text ? `color:${x.text}` : ""
-        ].filter(Boolean).join(";"), T].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-heading" style="${S}">${w}</div>`;
-        break;
-      }
-      case "text-subheading": {
-        if (this.opts.hideText) break;
-        const w = ((n = (u = t.properties) == null ? void 0 : u.data) == null ? void 0 : n.dataContent) || ((h = t.properties) == null ? void 0 : h.content) || t.title || "", v = ((b = t.properties) == null ? void 0 : b.styleConfig) || {}, T = this.scToInlineStyle(v), x = this.opts.hideBackground ? {} : this.parseTwColor((m = (l = t.properties) == null ? void 0 : l.color) != null ? m : ""), S = [[
-          x.bg ? `background:${x.bg}` : "",
-          x.text ? `color:${x.text}` : ""
-        ].filter(Boolean).join(";"), T].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-subheading" style="${S}">${w}</div>`;
-        break;
-      }
-      case "text-body": {
-        if (this.opts.hideText) break;
-        const w = ((y = (p = t.properties) == null ? void 0 : p.data) == null ? void 0 : y.dataContent) || (($ = t.properties) == null ? void 0 : $.content) || "", v = ((C = t.properties) == null ? void 0 : C.styleConfig) || {}, T = this.scToInlineStyle(v), x = this.opts.hideBackground ? {} : this.parseTwColor((L = (I = t.properties) == null ? void 0 : I.color) != null ? L : ""), S = [[
-          x.bg ? `background:${x.bg}` : "",
-          x.text ? `color:${x.text}` : ""
-        ].filter(Boolean).join(";"), T].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-body" style="${S}">${w}</div>`;
-        break;
-      }
-      case "text-box": {
-        if (this.opts.hideText) break;
-        const w = ((P = (R = t.properties) == null ? void 0 : R.data) == null ? void 0 : P.dataContent) || ((O = t.properties) == null ? void 0 : O.content) || "", v = ((H = t.properties) == null ? void 0 : H.styleConfig) || {}, T = this.scToInlineStyle(v), x = this.opts.hideBackground ? {} : this.parseTwColor((N = (M = t.properties) == null ? void 0 : M.color) != null ? N : ""), S = [[
-          x.bg ? `background:${x.bg}` : "",
-          x.text ? `color:${x.text}` : ""
-        ].filter(Boolean).join(";"), T].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-box" style="${S}">${w}</div>`;
-        break;
-      }
-      case "text": {
-        if (this.opts.hideText) break;
-        const w = ((K = (B = t.properties) == null ? void 0 : B.data) == null ? void 0 : K.dataContent) || ((q = t.properties) == null ? void 0 : q.content) || "", v = ((G = t.properties) == null ? void 0 : G.styleConfig) || {}, T = this.scToInlineStyle(v), x = this.opts.hideBackground ? {} : this.parseTwColor((W = (U = t.properties) == null ? void 0 : U.color) != null ? W : ""), S = [[
-          x.bg ? `background:${x.bg}` : "",
-          x.text ? `color:${x.text}` : ""
-        ].filter(Boolean).join(";"), T].filter(Boolean).join(";");
-        e.innerHTML = `<div class="ds-text-body" style="${S}">${w}</div>`;
-        break;
-      }
-      case "header": {
-        if (this.opts.hideHeader) break;
-        const w = ((_ = (Y = t.properties) == null ? void 0 : Y.data) == null ? void 0 : _.dataContent) || ((J = t.properties) == null ? void 0 : J.content) || t.title || "", v = ((V = t.properties) == null ? void 0 : V.styleConfig) || {}, T = !this.opts.hideBackground && v.backgroundColor ? `background:${v.backgroundColor};` : "", x = v.color ? `color:${v.color};` : v.textColor ? `color:${v.textColor};` : "";
-        e.innerHTML = `
-          <div class="ds-header-component" style="${T}${x}">
-            <div class="ds-header-content">${w}</div>
-          </div>`;
-        break;
-      }
-      case "section": {
-        const w = ((X = t.properties) == null ? void 0 : X.styleConfig) || {}, v = !this.opts.hideBackground && w.backgroundColor ? `background:${w.backgroundColor};` : "";
-        e.innerHTML = `
-          <div class="ds-section-wrapper" style="${v}">
-            ${t.title ? `<div class="ds-section-title">${t.title}</div>` : ""}
-          </div>`;
-        break;
-      }
-    }
-  }
-  // ── 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"]), s = (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase();
-    return Object.entries(e).filter(([r, i]) => !t.has(r) && i != null && i !== "").map(([r, i]) => `${s(r)}:${i}`).join(";");
-  }
-  /**
-   * Parse a Tailwind utility class string (e.g. "bg-violet-100 text-violet-600")
-   * into plain CSS hex values. Used for text components whose builder color
-   * is stored as Tailwind class names rather than raw CSS.
-   */
-  parseTwColor(e) {
-    if (!e) return {};
-    const t = {};
-    for (const s of e.split(/\s+/)) {
-      if (!s) continue;
-      if (s === "bg-white") {
-        t.bg = "#ffffff";
-        continue;
-      }
-      if (s === "bg-black") {
-        t.bg = "#000000";
-        continue;
-      }
-      if (s === "bg-transparent") {
-        t.bg = "transparent";
-        continue;
-      }
-      if (s === "text-white") {
-        t.text = "#ffffff";
-        continue;
-      }
-      if (s === "text-black") {
-        t.text = "#000000";
-        continue;
-      }
-      const r = /^(bg|text)-([a-z]+)-(\d+)$/.exec(s);
-      if (!r) continue;
-      const i = E.TW_PALETTE[r[2]], a = i == null ? void 0 : i[Number(r[3])];
-      a && (r[1] === "bg" && (t.bg = a), r[1] === "text" && (t.text = a));
-    }
-    return t;
-  }
-  getTooltipEl() {
-    if (!this.tooltipEl) {
-      const e = document.createElement("div");
-      e.className = "ds-global-tooltip", e.style.display = "none", document.body.appendChild(e), this.tooltipEl = e;
-    }
-    return this.tooltipEl;
-  }
-  getComponentDescription(e) {
-    var t, s, r, i;
-    if ((t = e.properties) != null && t.description) return String(e.properties.description);
-    try {
-      const a = (r = (s = e.properties) == null ? void 0 : s.data) == null ? void 0 : r.dataContent;
-      if (a) {
-        const o = typeof a == "string" ? JSON.parse(a) : a;
-        return (o == null ? void 0 : o.description) || ((i = o == null ? void 0 : o.config) == null ? void 0 : i.description) || "";
-      }
-    } catch (a) {
-    }
-    return "";
-  }
-  getTabsForPage(e) {
-    var t, s;
-    return (s = (t = this.renderData.dashboard.pages.find((r) => r.pageId === e)) == null ? void 0 : t.tabs) != null ? s : [];
-  }
-};
-E.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 j = E;
-class le {
-  constructor(e, t) {
-    this.chartRenderer = null, this.tableRenderer = new re(), this.cardRenderer = new ie(), this.root = e, this.theme = t;
-  }
-  render(e, t) {
-    const s = e.components[0];
-    if (!s) {
-      this.root.innerHTML = `<div class="ds-embed-error">
-        <div class="ds-embed-error-icon">⚠</div>
-        <div>Component not found.</div>
-      </div>`;
-      return;
-    }
-    const r = e.data[s.id] || [];
-    this.renderComponent(s, r), t == null || t();
-  }
-  update(e) {
-    const t = e.components[0];
-    if (!t) return;
-    const s = e.data[t.id] || [];
-    switch (t.type) {
-      case "bar":
-      case "line":
-      case "pie":
-      case "donut":
-      case "area":
-        this.chartRenderer ? this.chartRenderer.update(t, s, this.theme) : this.renderComponent(t, s);
-        break;
-      case "table":
-        this.tableRenderer.render(this.root, t, s);
-        break;
-      case "number-card":
-        this.cardRenderer.render(this.root, t, s);
-        break;
-    }
-  }
-  destroy() {
-    var e;
-    (e = this.chartRenderer) == null || e.destroy(), this.chartRenderer = null, this.root.innerHTML = "";
-  }
-  renderComponent(e, t) {
-    var s;
-    switch (e.type) {
-      case "bar":
-      case "line":
-      case "pie":
-      case "donut":
-      case "area":
-        (s = this.chartRenderer) == null || s.destroy(), this.chartRenderer = new se(this.root), this.chartRenderer.render(e, t, this.theme);
-        break;
-      case "table":
-        this.tableRenderer.render(this.root, e, t);
-        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 ce() {
-  if (!(ee || typeof document == "undefined")) {
-    ee = !0;
-    try {
-      const k = `/* ─────────────────────────────────────────────────────────────────────────────
-   Deepspot SDK — Base Embed Styles
-   Injected once into the host page's <head> by the SDK.
-   All selectors are scoped under .ds-embed-* to avoid leaking into host styles.
-───────────────────────────────────────────────────────────────────────────── */
-
-/* ── 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;
-}
-
-/* ── 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;
-}
-`, e = document.createElement("style");
-      e.id = "deepspot-sdk-styles", e.textContent = k, document.head.appendChild(e);
-    } catch (k) {
-    }
-  }
-}
-function te(k) {
-  if (typeof k == "string") {
-    const e = document.querySelector(k);
-    if (!e) throw new Error(`Deepspot SDK: container "${k}" not found in DOM`);
-    return e;
-  }
-  return k;
-}
-class he {
-  constructor(e) {
-    if (!e.apiKey) throw new Error("Deepspot SDK: apiKey is required");
-    if (!e.baseUrl) throw new Error("Deepspot SDK: baseUrl is required");
-    this.apiClient = new ae(e.baseUrl, e.apiKey), ce();
-  }
-  // ── Embed full dashboard ────────────────────────────────────────────────────
-  async embedDashboard(e) {
-    var a, o, c, d, f, g, u, n, h, b;
-    const t = te(e.container), s = (a = e.embedLevel) != null ? a : "dashboard", r = (o = e.theme) != null ? o : "light";
-    t.style.height = e.height || "600px", t.style.display = "block";
-    const i = this.createRoot(t, r);
-    this.showLoading(i);
-    try {
-      const l = await this.apiClient.getEmbedToken({
-        dashboardId: e.dashboardId,
-        embedType: "dashboard",
-        embedLevel: s,
-        userId: e.userId,
-        tenantId: e.tenantId
-      }), m = await this.apiClient.getDashboardRender(
-        e.dashboardId,
-        l,
-        {
-          embedLevel: s,
-          pageId: e.pageId,
-          tabId: e.tabId,
-          filters: e.filters || {}
-        }
-      );
-      let p;
-      const y = new j(i, {
-        embedLevel: s,
-        theme: r,
-        // v1 backward compat (hideFilters → hideGlobalFilters)
-        hideFilters: (c = e.hideGlobalFilters) != null ? c : !1,
-        hideExport: (d = e.hideExport) != null ? d : !1,
-        // v2 visibility
-        hideGlobalFilters: (f = e.hideGlobalFilters) != null ? f : !1,
-        hideInlineFilters: (g = e.hideInlineFilters) != null ? g : !1,
-        hideText: (u = e.hideText) != null ? u : !1,
-        hideHeader: (n = e.hideHeader) != null ? n : !1,
-        hideBackground: (h = e.hideBackground) != null ? h : !1,
-        initialFilters: e.filters || {},
-        onFilterChange: e.onFilterChange,
-        onReady: e.onReady,
-        onFetchFilterOptions: ($) => this.apiClient.getFilterOptions(e.dashboardId, $, l),
-        onFetchTablePage: ($, C, I) => this.apiClient.getTablePage(e.dashboardId, $, C, I, l),
-        onTabSwitch: async ($, C) => {
-          var I, L, R;
-          (I = e.onTabSwitch) == null || I.call(e, $, C);
-          try {
-            const P = await this.apiClient.getDashboardRender(
-              e.dashboardId,
-              l,
-              {
-                embedLevel: s,
-                pageId: $,
-                tabId: C,
-                filters: (R = (L = p == null ? void 0 : p.getActiveFilters()) != null ? L : e.filters) != null ? R : {}
-              }
-            );
-            y.update(P);
-          } catch (P) {
-            console.error("Deepspot SDK: tab fetch failed", P);
-          }
-        }
-      });
-      return y.render(m), p = new Z({
-        dashboardId: e.dashboardId,
-        token: l,
-        embedType: "dashboard",
-        embedLevel: s,
-        activePageId: m.activePage,
-        activeTabId: m.activeTab,
-        activeFilters: e.filters || {},
-        apiClient: this.apiClient,
-        renderer: y,
-        onFilterChange: e.onFilterChange
-      }), p;
-    } catch (l) {
-      throw this.showError(i, (l == null ? void 0 : l.message) || "Failed to load dashboard"), (b = e.onError) == null || b.call(e, (l == null ? void 0 : l.message) || "Failed to load dashboard"), l;
-    }
-  }
-  // ── Embed single report (component) ────────────────────────────────────────
-  async embedReport(e) {
-    var r;
-    const t = te(e.container);
-    t.style.height = e.height || "400px", t.style.display = "block";
-    const s = this.createRoot(t, e.theme || "light");
-    this.showLoading(s);
-    try {
-      const i = await this.apiClient.getEmbedToken({
-        dashboardId: e.dashboardId,
-        embedType: "report",
-        componentId: e.componentId,
-        userId: e.userId,
-        tenantId: e.tenantId
-      }), a = await this.apiClient.getReportRender(
-        e.dashboardId,
-        e.componentId,
-        i,
-        { filters: e.filters || {} }
-      ), o = new le(s, e.theme || "light");
-      return o.render(a, e.onReady), new Z({
-        dashboardId: e.dashboardId,
-        componentId: e.componentId,
-        token: i,
-        embedType: "report",
-        activeFilters: e.filters || {},
-        apiClient: this.apiClient,
-        renderer: o
-      });
-    } catch (i) {
-      throw this.showError(s, (i == null ? void 0 : i.message) || "Failed to load report"), (r = e.onError) == null || r.call(e, (i == null ? void 0 : i.message) || "Failed to load report"), i;
-    }
-  }
-  // ── Private helpers ─────────────────────────────────────────────────────────
-  createRoot(e, t) {
-    e.innerHTML = "";
-    const s = document.createElement("div");
-    return s.className = `ds-embed-root ds-theme-${t}`, s.style.width = "100%", s.style.height = "100%", e.appendChild(s), s;
-  }
-  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 {
-  he as DeepspotSDK
-};