@giridharan_r/sdk 1.0.0

package/dist/deepspot-sdk.esm.js

@@ -0,0 +1,1392 @@
+class D {
+  constructor(e, t) {
+    this.tokenCache = /* @__PURE__ */ new Map(), this.baseUrl = e.replace(/\/$/, ""), this.apiKey = t;
+  }
+  // ── Embed Token ─────────────────────────────────────────────────────────────
+  async getEmbedToken(e) {
+    var i, a, d, o;
+    const t = [
+      e.dashboardId,
+      e.embedType,
+      (i = e.embedLevel) != null ? i : "",
+      (a = e.componentId) != null ? a : "",
+      (d = e.userId) != null ? d : ""
+    ].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: (o = e.embedLevel) != null ? o : "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 i;
+    const s = new URLSearchParams({
+      embedType: "dashboard",
+      embedLevel: (i = r.embedLevel) != null ? i : "dashboard"
+    });
+    return r.pageId && s.set("pageId", r.pageId), r.tabId && s.set("tabId", r.tabId), r.filters && Object.entries(r.filters).forEach(([a, d]) => {
+      d != null && d !== "" && s.set(`filter[${a}]`, Array.isArray(d) ? d.join(",") : String(d));
+    }), this.get(
+      `/dashboard-builder/embed/${e}/render?${s}`,
+      { "x-embed-token": t }
+    );
+  }
+  // ── Single Report Render ────────────────────────────────────────────────────
+  async getReportRender(e, t, r, s = {}) {
+    const i = new URLSearchParams({
+      embedType: "report",
+      embedLevel: "report",
+      componentId: t
+    });
+    return s.filters && Object.entries(s.filters).forEach(([a, d]) => {
+      d != null && d !== "" && i.set(`filter[${a}]`, Array.isArray(d) ? d.join(",") : String(d));
+    }), this.get(
+      `/dashboard-builder/embed/${e}/render?${i}`,
+      { "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}`
+    });
+  }
+  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 t = `HTTP ${e.status}`;
+      try {
+        const r = await e.json();
+        t = (r == null ? void 0 : r.message) || (r == null ? void 0 : r.error) || t;
+      } catch (r) {
+      }
+      throw new Error(`Deepspot SDK: ${t}`);
+    }
+    return e.json();
+  }
+}
+class k {
+  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();
+  }
+  /** 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: i, embedLevel: a } = this.opts;
+    return i === "report" && r ? e.getReportRender(t, r, s, {
+      filters: this.filters
+    }) : e.getDashboardRender(t, s, {
+      embedLevel: a,
+      pageId: this.activePageId || void 0,
+      tabId: this.activeTabId || void 0,
+      filters: this.filters
+    });
+  }
+}
+const I = 24, y = 10, f = 8;
+class $ {
+  constructor(e) {
+    this.containerWidth = e;
+  }
+  /** Pixel width of one column unit */
+  get colWidth() {
+    return (this.containerWidth - f * (I - 1)) / I;
+  }
+  /** Convert grid position {x,y,w,h} → CSS absolute pixel values */
+  toPx(e) {
+    const t = this.colWidth;
+    return {
+      left: e.x * (t + f),
+      top: e.y * (y + f),
+      width: e.w * t + (e.w - 1) * f,
+      height: e.h * y + (e.h - 1) * f
+    };
+  }
+  /** Total height of the grid needed to fit all components */
+  static totalHeight(e) {
+    return e.length ? Math.max(...e.map((r) => r.y + r.h)) * (y + f) : 400;
+  }
+  /** Apply absolute positioning 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`;
+  }
+}
+class C {
+  constructor(e) {
+    this.chart = null, this.container = e;
+  }
+  render(e, t, r) {
+    if (!t || t.length === 0) {
+      this.renderEmpty(e.title);
+      return;
+    }
+    const s = this.buildOptions(e, t, r);
+    if (!s) {
+      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(), this.chart = new ApexCharts(i, s), this.chart.render();
+      } catch (a) {
+        i.innerHTML = '<div class="ds-chart-empty">Chart render error</div>';
+      }
+  }
+  update(e, t, r) {
+    if (!this.chart || !t || t.length === 0) {
+      this.render(e, t, r);
+      return;
+    }
+    const { series: s, categories: i } = this.extractSeriesAndCategories(e, t);
+    try {
+      this.chart.updateOptions({
+        series: s,
+        xaxis: { categories: i },
+        theme: { mode: r }
+      });
+    } catch (a) {
+      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) {
+    const s = e.type;
+    return s === "pie" || s === "donut" ? this.buildPieOptions(e, t, r) : s === "bar" || s === "line" || s === "area" ? this.buildCartesianOptions(e, t, r) : null;
+  }
+  buildCartesianOptions(e, t, r) {
+    var n;
+    const { series: s, categories: i, xAxisLabel: a, yAxisLabel: d } = this.extractSeriesAndCategories(e, t), o = e.properties || {}, c = o.colors ? Object.values(o.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"], l = 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"
+      },
+      theme: { mode: r },
+      series: s,
+      xaxis: {
+        categories: i,
+        title: { text: a },
+        labels: {
+          rotate: i.length > 10 ? -45 : 0,
+          style: { colors: l ? "#94a3b8" : "#6b7280", fontSize: "11px" }
+        },
+        axisBorder: { color: l ? "#334155" : "#e5e7eb" },
+        axisTicks: { color: l ? "#334155" : "#e5e7eb" }
+      },
+      yaxis: {
+        title: { text: d },
+        labels: { style: { colors: l ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
+      },
+      colors: c,
+      legend: {
+        show: s.length > 1 || ((n = o.showLegend) != null ? n : !1),
+        position: "bottom",
+        labels: { colors: l ? "#94a3b8" : "#6b7280" }
+      },
+      grid: {
+        borderColor: l ? "#1e293b" : "#f3f4f6",
+        strokeDashArray: 4
+      },
+      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: s.length === 1
+        }
+      }
+    };
+  }
+  buildPieOptions(e, t, r) {
+    const s = e.properties || {}, i = t.length > 0 ? Object.keys(t[0]) : [], a = i[0] || "label", d = i[1] || "value", o = t.map((h) => {
+      var b;
+      return String((b = h[a]) != null ? b : "");
+    }), c = t.map((h) => Number(h[d]) || 0), l = r === "dark", n = s.colors ? Object.values(s.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"];
+    return {
+      chart: {
+        type: e.type,
+        toolbar: { show: !1 },
+        background: "transparent",
+        fontFamily: "inherit"
+      },
+      theme: { mode: r },
+      series: c,
+      labels: o,
+      colors: n,
+      legend: {
+        position: "bottom",
+        labels: { colors: l ? "#94a3b8" : "#6b7280" }
+      },
+      tooltip: { theme: r },
+      dataLabels: { enabled: o.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]) : [], i = r.xAxis || s[0] || "x";
+    let a = [];
+    if (r.selectedYAxisColumn)
+      try {
+        const n = typeof r.selectedYAxisColumn == "string" ? JSON.parse(r.selectedYAxisColumn) : r.selectedYAxisColumn;
+        Array.isArray(n) && (a = n.map(
+          (h) => typeof h == "string" ? { column: h } : h
+        ));
+      } catch (n) {
+      }
+    if (!a.length && r.yAxis) {
+      const n = r.yAxis;
+      a = (Array.isArray(n) ? n : [n]).map((b) => ({ column: String(b) }));
+    }
+    !a.length && s.length > 1 && (a = s.slice(1).map((n) => ({ column: n })));
+    const d = t.map((n) => {
+      var h;
+      return String((h = n[i]) != null ? h : "");
+    }), o = a.map((n) => ({
+      name: n.label || n.column.replace(/_/g, " "),
+      data: t.map((h) => {
+        const b = h[n.column];
+        return b != null ? Number(b) : null;
+      })
+    })), c = r.xAxisLabel || i.replace(/_/g, " "), l = r.yAxisLabel || (o.length === 1 ? o[0].name : "Values");
+    return { series: o, categories: d, xAxisLabel: c, yAxisLabel: l };
+  }
+  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 L {
+  render(e, t, r) {
+    var c;
+    if (!r || r.length === 0) {
+      e.innerHTML = `
+        <div class="ds-table-card">
+          <div class="ds-table-title">${t.title || ""}</div>
+          <div class="ds-chart-empty">No data available</div>
+        </div>
+      `;
+      return;
+    }
+    const s = Object.keys(r[0]), i = ((c = t.properties) == null ? void 0 : c.columns) || [], a = i.length ? i.filter((l) => s.includes(l)) : s, d = a.map((l) => `<th>${this.formatHeader(l)}</th>`).join(""), o = r.map((l) => `<tr>${a.map((h) => {
+      const b = l[h];
+      return `<td title="${this.escape(String(b != null ? b : ""))}">${this.escape(this.formatValue(b))}</td>`;
+    }).join("")}</tr>`).join("");
+    e.innerHTML = `
+      <div class="ds-table-card">
+        <div class="ds-table-title">${t.title || ""}</div>
+        <div class="ds-table-scroll">
+          <table class="ds-table">
+            <thead><tr>${d}</tr></thead>
+            <tbody>${o}</tbody>
+          </table>
+        </div>
+      </div>
+    `;
+  }
+  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 F {
+  render(e, t, r) {
+    const s = t.properties || {};
+    let i = null;
+    if (r && r.length > 0) {
+      const l = r[0], n = s.metric || Object.keys(l)[0];
+      i = l[n];
+    }
+    const a = this.formatValue(i, s), d = s.backgroundColor || "#ffffff", o = s.textColor || "#111827", c = t.title || "";
+    e.innerHTML = `
+      <div class="ds-card" style="background:${d}; border-color:${d};">
+        <div class="ds-card-label" style="color:${o}; opacity:0.7;">${c}</div>
+        <div class="ds-card-value" style="color:${o};">${a}</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) || "", i = (t == null ? void 0 : t.suffix) || "";
+    let a;
+    return Math.abs(r) >= 1e6 ? a = (r / 1e6).toFixed(1) + "M" : Math.abs(r) >= 1e3 ? a = (r / 1e3).toFixed(1) + "K" : a = r % 1 === 0 ? r.toLocaleString() : r.toFixed(2), `${s}${a}${i}`;
+  }
+}
+class E {
+  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((r) => this.renderFilter(r, t[r.applyToField || r.filterId])).join("")}</div>`, this.attachListeners(e);
+  }
+  /** Update the stored values without re-rendering (for programmatic setFilter) */
+  updateValues(e) {
+    Object.assign(this.currentValues, e), Object.entries(e).forEach(([t, r]) => {
+      const s = this.container.querySelector(`[data-filter-id="${t}"]`);
+      s && r !== void 0 && (s.value = String(r));
+    });
+  }
+  // ── Private ─────────────────────────────────────────────────────────────────
+  renderFilter(e, t) {
+    const r = `ds-filter-${e.filterId}`, s = `<label class="ds-filter-label" for="${r}">${e.label}</label>`;
+    switch (e.type) {
+      case "dropdown":
+        return `
+          <div class="ds-filter-item">
+            ${s}
+            <select class="ds-filter-select" id="${r}" data-filter-id="${e.filterId}">
+              <option value="">All</option>
+              ${(e.options || []).map((d) => `
+                <option value="${this.escAttr(d)}" ${t === d ? "selected" : ""}>
+                  ${this.escText(d)}
+                </option>
+              `).join("")}
+            </select>
+          </div>`;
+      case "multi-select":
+        return `
+          <div class="ds-filter-item">
+            ${s}
+            <select class="ds-filter-select" id="${r}" data-filter-id="${e.filterId}" multiple size="1">
+              ${(e.options || []).map((d) => `
+                <option value="${this.escAttr(d)}">${this.escText(d)}</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">
+            ${s}
+            <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">
+            ${s}
+            <input type="text" class="ds-filter-input" id="${r}"
+              data-filter-id="${e.filterId}"
+              value="${this.escAttr(String(t != null ? t : ""))}"
+              placeholder="Search..." />
+          </div>`;
+      case "number-input":
+        return `
+          <div class="ds-filter-item">
+            ${s}
+            <input type="number" class="ds-filter-input" id="${r}"
+              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((r) => {
+      const s = r.dataset.filterId, i = r.dataset.datePart, a = e.find((o) => o.filterId === s), d = () => {
+        let o;
+        if ((a == null ? void 0 : a.type) === "date-range" && i)
+          t[s] = t[s] || {}, t[s][i] = r.value, o = { ...t[s] };
+        else if ((a == null ? void 0 : a.type) === "multi-select") {
+          const c = r;
+          o = Array.from(c.selectedOptions).map((l) => l.value).filter(Boolean);
+        } else
+          o = r.value;
+        this.currentValues[s] = o, this.onFilterChange(s, o);
+      };
+      r.addEventListener(
+        (a == null ? void 0 : a.type) === "text-input" ? "input" : "change",
+        d
+      );
+    });
+  }
+  escAttr(e) {
+    return e.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  escText(e) {
+    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+}
+class A {
+  constructor(e, t) {
+    this.activePageId = "", this.activeTabId = "", this.activeFilters = {}, this.chartRenderers = /* @__PURE__ */ new Map(), this.tableRenderer = new L(), this.cardRenderer = new F(), this.isLoadingTab = !1, 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() {
+    const e = this.root.querySelector("#ds-canvas");
+    e && import("./html2canvas.esm-CzwMv54K.js").then(
+      ({ default: t }) => t(e, { scale: 2, useCORS: !0 }).then(
+        (r) => import("./jspdf.es.min-DIdZC3N_.js").then((s) => s.j).then(({ jsPDF: s }) => {
+          const i = new s({ orientation: "landscape", unit: "px" });
+          i.addImage(r.toDataURL("image/png"), "PNG", 0, 0, i.internal.pageSize.width, 0), i.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(
+        (a) => r.map((d) => {
+          var o;
+          return JSON.stringify((o = a[d]) != null ? o : "");
+        }).join(",")
+      )].join(`
+`);
+      Object.assign(document.createElement("a"), {
+        href: URL.createObjectURL(new Blob([s], { 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, 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 i = this.root.querySelector("#ds-filter-container");
+    this.filterRenderer = new E(i, (a, d) => {
+      var o, c;
+      this.activeFilters[a] = d, (c = (o = this.opts).onFilterChange) == null || c.call(o, 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">⬇ 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, i;
+        const r = t.dataset.pageId;
+        r === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(r, (i = (s = this.getTabsForPage(r)[0]) == null ? void 0 : s.id) != null ? i : "");
+      });
+    }));
+  }
+  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 i = s.dataset.tabId, a = s.dataset.pageId;
+        i === this.activeTabId && a === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(a, i);
+      });
+    });
+  }
+  /** Optimistically highlight new tab + show spinner, then fire callback */
+  triggerTabSwitch(e, t) {
+    this.isLoadingTab || !e || !t || (this.isLoadingTab = !0, this.activePageId = e, this.activeTabId = t, this.syncNavHighlight(), this.showTabSpinner(), this.opts.onTabSwitch(e, t));
+  }
+  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);
+  }
+  // ── Filter bar ────────────────────────────────────────────────────────────
+  renderFilterBar() {
+    this.opts.hideFilters || this.filterRenderer.render(this.renderData.filters, this.activeFilters);
+  }
+  updateFilterBar() {
+    this.opts.hideFilters || this.filterRenderer.render(this.renderData.filters, this.activeFilters);
+  }
+  // ── Grid ──────────────────────────────────────────────────────────────────
+  renderGrid() {
+    this.hideTabSpinner();
+    const e = this.root.querySelector("#ds-grid");
+    if (!e) return;
+    this.chartRenderers.forEach((i) => i.destroy()), this.chartRenderers.clear();
+    const t = this.renderData.components;
+    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 || 1248, s = new $(r);
+    e.style.height = `${$.totalHeight(t.map((i) => i.position))}px`, e.innerHTML = "", t.forEach((i) => {
+      const a = document.createElement("div");
+      a.className = "ds-component-wrapper", a.dataset.componentId = i.id, s.applyStyles(a, i.position), e.appendChild(a), this.renderComponent(a, i);
+    });
+  }
+  renderComponent(e, t) {
+    var i, a;
+    const r = this.renderData.data[t.id] || [], s = this.opts.theme;
+    switch (t.type) {
+      case "bar":
+      case "line":
+      case "pie":
+      case "donut":
+      case "area": {
+        const d = new C(e);
+        d.render(t, r, s), this.chartRenderers.set(t.id, d);
+        break;
+      }
+      case "table":
+        this.tableRenderer.render(e, t, r);
+        break;
+      case "number-card":
+        this.cardRenderer.render(e, t, r);
+        break;
+      case "text": {
+        const d = Object.entries(((i = t.properties) == null ? void 0 : i.style) || {}).map(([o, c]) => `${o}:${c}`).join(";");
+        e.innerHTML = `<div style="${d};padding:8px;">${((a = t.properties) == null ? void 0 : a.content) || ""}</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 ───────────────────────────────────────────────────────────────
+  getTabsForPage(e) {
+    var t, r;
+    return (r = (t = this.renderData.dashboard.pages.find((s) => s.pageId === e)) == null ? void 0 : t.tabs) != null ? r : [];
+  }
+}
+class P {
+  constructor(e, t) {
+    this.chartRenderer = null, this.tableRenderer = new L(), this.cardRenderer = new F(), 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 C(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 S = !1;
+function j() {
+  if (!(S || typeof document == "undefined")) {
+    S = !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;
+}
+
+.ds-embed-root.ds-theme-light {
+  background: #ffffff;
+  color: #111827;
+}
+
+.ds-embed-root.ds-theme-dark {
+  background: #0f172a;
+  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%;
+  padding: 16px;
+}
+
+.ds-grid {
+  position: relative;
+  width: 100%;
+}
+
+.ds-component-wrapper {
+  position: absolute;
+  overflow: hidden;
+}
+
+/* ── 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;
+}
+
+.ds-theme-dark .ds-table-card {
+  background: #1e293b;
+  border-color: #334155;
+}
+
+.ds-table-title {
+  padding: 10px 14px 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  flex-shrink: 0;
+}
+
+.ds-theme-dark .ds-table-title {
+  color: #e2e8f0;
+}
+
+.ds-table-scroll {
+  flex: 1;
+  overflow: auto;
+}
+
+.ds-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.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: #1e293b;
+}
+
+/* ── 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;
+}
+
+/* ── 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 = p, document.head.appendChild(e);
+    } catch (p) {
+    }
+  }
+}
+function R(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 O {
+  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 D(e.baseUrl, e.apiKey), j();
+  }
+  // ── Embed full dashboard ────────────────────────────────────────────────────
+  async embedDashboard(e) {
+    var a, d, o, c, l;
+    const t = R(e.container), r = (a = e.embedLevel) != null ? a : "dashboard", s = (d = e.theme) != null ? d : "light";
+    t.style.height = e.height || "600px", t.style.display = "block";
+    const i = this.createRoot(t, s);
+    this.showLoading(i);
+    try {
+      const n = await this.apiClient.getEmbedToken({
+        dashboardId: e.dashboardId,
+        embedType: "dashboard",
+        embedLevel: r,
+        userId: e.userId,
+        tenantId: e.tenantId
+      }), h = await this.apiClient.getDashboardRender(
+        e.dashboardId,
+        n,
+        {
+          embedLevel: r,
+          pageId: e.pageId,
+          tabId: e.tabId,
+          filters: e.filters || {}
+        }
+      );
+      let b;
+      const g = new A(i, {
+        embedLevel: r,
+        theme: s,
+        hideFilters: (o = e.hideFilters) != null ? o : !1,
+        hideExport: (c = e.hideExport) != null ? c : !1,
+        initialFilters: e.filters || {},
+        onFilterChange: e.onFilterChange,
+        onReady: e.onReady,
+        onTabSwitch: async (m, v) => {
+          var x, w, T;
+          (x = e.onTabSwitch) == null || x.call(e, m, v);
+          try {
+            const u = await this.apiClient.getDashboardRender(
+              e.dashboardId,
+              n,
+              {
+                embedLevel: r,
+                pageId: m,
+                tabId: v,
+                filters: (T = (w = b == null ? void 0 : b.getActiveFilters()) != null ? w : e.filters) != null ? T : {}
+              }
+            );
+            g.update(u);
+          } catch (u) {
+            console.error("Deepspot SDK: tab fetch failed", u);
+          }
+        }
+      });
+      return g.render(h), b = new k({
+        dashboardId: e.dashboardId,
+        token: n,
+        embedType: "dashboard",
+        embedLevel: r,
+        activePageId: h.activePage,
+        activeTabId: h.activeTab,
+        activeFilters: e.filters || {},
+        apiClient: this.apiClient,
+        renderer: g,
+        onFilterChange: e.onFilterChange
+      }), b;
+    } catch (n) {
+      throw this.showError(i, (n == null ? void 0 : n.message) || "Failed to load dashboard"), (l = e.onError) == null || l.call(e, (n == null ? void 0 : n.message) || "Failed to load dashboard"), n;
+    }
+  }
+  // ── Embed single report (component) ────────────────────────────────────────
+  async embedReport(e) {
+    var s;
+    const t = R(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 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 || {} }
+      ), d = new P(r, e.theme || "light");
+      return d.render(a, e.onReady), new k({
+        dashboardId: e.dashboardId,
+        componentId: e.componentId,
+        token: i,
+        embedType: "report",
+        activeFilters: e.filters || {},
+        apiClient: this.apiClient,
+        renderer: d
+      });
+    } catch (i) {
+      throw this.showError(r, (i == null ? void 0 : i.message) || "Failed to load report"), (s = e.onError) == null || s.call(e, (i == null ? void 0 : i.message) || "Failed to load report"), i;
+    }
+  }
+  // ── 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 {
+  O as DeepspotSDK
+};