@actionexec/dashboards 0.5.5 → 0.7.0

package/dist/index.js

@@ -1,119 +1,201 @@
-import { jsxs as _, jsx as l } from "react/jsx-runtime";
-import { useState as N, useRef as F, useEffect as T, useCallback as M, useMemo as j } from "react";
-import { Q as z, R as U, n as I, L as H, G as L, I as W, m as D, w as R, J as X, k as A, q, v as Q, t as J, d as Z, y as B, x as ee, b as te } from "./ColorPaletteSelector-B4ojsspD.js";
-import { U as je } from "./ColorPaletteSelector-B4ojsspD.js";
-import { PieChart as ae, Pie as re, Cell as le, Tooltip as Y, LineChart as ne, Line as ie, AreaChart as se, Area as ce, BarChart as oe, Bar as de, CartesianGrid as he, XAxis as ge, YAxis as ue, Legend as me } from "recharts";
-const _e = 300;
-function pe(a) {
-  const [r, n] = N(null), [t, e] = N(null), [i, c] = N({}), [s, m] = N({}), [o, d] = N(null), [h, u] = N(!0), [w, g] = N(null), p = F(), k = F(!1);
-  T(() => {
-    let v = !1;
-    return z(a).then((f) => {
-      v || n(f);
-    }).catch((f) => {
-      v || g(f.message);
+import { jsxs as w, jsx as l, Fragment as ae } from "react/jsx-runtime";
+import { useState as L, useRef as C, useEffect as O, useCallback as R, useMemo as Q } from "react";
+import { a1 as ne, a2 as le, r as H, v as G, w as V, y as ie, $ as se, V as z, Y as Z, q as J, L as D, Z as ce, l as K, u as oe, K as de, I as ue, e as he, Q as ge, O as me, c as fe, x as pe, z as be, n as _e, G as j, C as we, o as ve } from "./ColorPaletteSelector-BSAe2YMH.js";
+import { a3 as ft } from "./ColorPaletteSelector-BSAe2YMH.js";
+import { PieChart as ye, Pie as Ne, Cell as ke, Tooltip as B, LineChart as Se, Line as $e, AreaChart as Ce, Area as Re, BarChart as xe, Bar as Me, CartesianGrid as Fe, XAxis as Le, YAxis as Te, Legend as Ae } from "recharts";
+const Ie = 300;
+function We(e) {
+  const [t, a] = L(null), [n, r] = L(null), [i, c] = L({}), [s, g] = L({}), [o, d] = L(null), [u, h] = L(!0), [N, m] = L(null), _ = C(), y = C(!1);
+  O(() => {
+    let S = !1;
+    return ne(e).then((v) => {
+      S || a(v);
+    }).catch((v) => {
+      S || m(v.message);
     }), () => {
-      v = !0;
+      S = !0;
     };
-  }, [a]), T(() => {
-    if (r)
-      return p.current && clearTimeout(p.current), p.current = setTimeout(() => {
-        const v = be(i, s);
-        u(!0), U(a, v).then((f) => {
-          e(f), !k.current && f.applied && (k.current = !0, c(($) => ({ ...fe(f.applied), ...$ }))), g(null);
-        }).catch((f) => g(f.message)).finally(() => u(!1));
-      }, _e), () => {
-        p.current && clearTimeout(p.current);
+  }, [e]), O(() => {
+    if (t)
+      return _.current && clearTimeout(_.current), _.current = setTimeout(() => {
+        const S = Ee(i, s);
+        h(!0), le(e, S).then((v) => {
+          r(v), !y.current && v.applied && (y.current = !0, c((f) => ({ ...Oe(v.applied), ...f }))), m(null);
+        }).catch((v) => m(v.message)).finally(() => h(!1));
+      }, Ie), () => {
+        _.current && clearTimeout(_.current);
       };
-  }, [a, r, i, s]);
-  const b = M((v, f) => {
-    c(($) => ({ ...$, [v]: f }));
-  }, []), S = M((v, f) => {
-    m(($) => ({ ...$, [v]: f }));
-  }, []), y = M((v) => {
-    d(v);
-  }, []), C = j(
-    () => o ?? (r == null ? void 0 : r.palette) ?? [],
-    [o, r]
+  }, [e, t, i, s]);
+  const T = R((S, v) => {
+    c((f) => ({ ...f, [S]: v }));
+  }, []), k = R((S, v) => {
+    g((f) => ({ ...f, [S]: v }));
+  }, []), E = R((S) => {
+    d(S);
+  }, []), F = Q(
+    () => o ?? (t == null ? void 0 : t.palette) ?? [],
+    [o, t]
   );
   return {
-    layout: r,
-    renderData: t,
-    loading: h,
-    error: w,
+    layout: t,
+    renderData: n,
+    loading: u,
+    error: N,
     filters: i,
     variables: s,
-    palette: C,
-    setFilter: b,
-    setVariable: S,
-    setPalette: y
+    palette: F,
+    setFilter: T,
+    setVariable: k,
+    setPalette: E
   };
 }
-function be(a, r) {
-  const n = {};
-  for (const [t, e] of Object.entries(a))
-    if (e.includes("|")) {
-      const [i, c] = e.split("|");
-      i && (n.f_date_start = i), c && (n.f_date_end = c);
+function Ee(e, t) {
+  const a = {};
+  for (const [n, r] of Object.entries(e))
+    if (r.includes("|")) {
+      const [i, c] = r.split("|");
+      i && (a.f_date_start = i), c && (a.f_date_end = c);
     } else
-      n[`f_${t}`] = e;
-  for (const [t, e] of Object.entries(r))
-    n[`v_${t}`] = String(e);
-  return n;
+      a[`f_${n}`] = r;
+  for (const [n, r] of Object.entries(t))
+    a[`v_${n}`] = String(r);
+  return a;
 }
-function fe(a) {
-  const r = {};
-  for (const [n, t] of Object.entries(a))
-    if (t && typeof t == "object" && "start" in t) {
-      const e = t;
-      r[n] = `${e.start || ""}|${e.end || ""}`;
-    } else Array.isArray(t) ? r[n] = t.join(I) : typeof t == "string" && (r[n] = t);
-  return r;
+function Oe(e) {
+  const t = {};
+  for (const [a, n] of Object.entries(e))
+    if (n && typeof n == "object" && "start" in n) {
+      const r = n;
+      t[a] = `${r.start || ""}|${r.end || ""}`;
+    } else Array.isArray(n) ? t[a] = n.join(H) : typeof n == "string" && (t[a] = n);
+  return t;
 }
-function ve({ data: a, label: r }) {
-  const n = r || String(a.label || ""), t = String(a.formatted || "-"), e = a.comparison, i = (e == null ? void 0 : e.trend) === "up" ? "widget-kpi__trend--up" : (e == null ? void 0 : e.trend) === "down" ? "widget-kpi__trend--down" : "", c = (e == null ? void 0 : e.trend) === "up" ? "↑" : (e == null ? void 0 : e.trend) === "down" ? "↓" : "";
-  return /* @__PURE__ */ _("div", { className: "widget widget-kpi", children: [
-    /* @__PURE__ */ l("span", { className: "widget-kpi__label", children: n }),
-    /* @__PURE__ */ l("span", { className: "widget-kpi__value", children: t }),
-    e && e.variance_pct != null && /* @__PURE__ */ _("div", { className: `widget-kpi__trend ${i}`, children: [
-      /* @__PURE__ */ _("span", { className: "widget-kpi__variance", children: [
+const Pe = (e) => {
+  var t, a;
+  return ((a = (t = e.borderBoxSize) == null ? void 0 : t[0]) == null ? void 0 : a.inlineSize) ?? e.target.offsetWidth;
+}, De = (e) => {
+  var t, a;
+  return ((a = (t = e.borderBoxSize) == null ? void 0 : t[0]) == null ? void 0 : a.blockSize) ?? e.target.offsetHeight;
+};
+function Ye(e, t, a) {
+  return e === void 0 ? 0 : e === "auto" ? ie(t, a) : Math.max(0, e);
+}
+function He(e) {
+  let t = e.parentElement;
+  for (; t && t !== document.body && t !== document.documentElement; ) {
+    const { overflowY: a } = getComputedStyle(t);
+    if (a !== "visible")
+      return a === "hidden" || a === "clip" ? t : null;
+    t = t.parentElement;
+  }
+  return null;
+}
+function ze(e) {
+  const t = C(e);
+  t.current = e;
+  const a = C(null), n = C(null), r = C(null), i = C(null), c = C(null), s = C(0), g = C(0), o = C(!1), d = C(!1), u = C(-1), [h, N] = L(!1), m = R((f) => {
+    const p = n.current;
+    if (d.current || t.current.silenceWarnings || !p) return;
+    const $ = He(p);
+    !$ || $.clientHeight >= f.gridHeight || (d.current = !0, console.warn(
+      `[@actionexec/dashboards] O dashboard esta sendo cortado: o container precisa de ${Math.ceil(f.gridHeight)}px de altura, mas o ancestral com overflow oculto tem ${$.clientHeight}px. A altura do dashboard varia com a largura — use a prop onGeometryChange para dimensionar o container, ou troque o overflow para auto. Passe silenceWarnings para desligar este aviso.`
+    ));
+  }, []), _ = R(() => {
+    var W, A;
+    if (!a.current) return;
+    const { columns: f, cellAspect: p } = t.current, $ = s.current, I = V($, f), b = {
+      containerWidth: $,
+      cellWidth: I,
+      cellHeight: G(I, p),
+      gridHeight: g.current,
+      stacked: o.current
+    }, x = c.current;
+    x && x.containerWidth === b.containerWidth && x.cellWidth === b.cellWidth && x.cellHeight === b.cellHeight && x.gridHeight === b.gridHeight && x.stacked === b.stacked || (c.current = b, (A = (W = t.current).onGeometryChange) == null || A.call(W, b), m(b));
+  }, [m]), y = R((f = !1) => {
+    const p = a.current;
+    if (!p) return;
+    const $ = s.current;
+    if (!f && $ === u.current) return;
+    u.current = $;
+    const { columns: I, cellAspect: b, stackBelow: x } = t.current, M = V($, I);
+    p.style.setProperty("--dash-cell-h", `${G(M, b)}px`);
+    const W = Ye(x, I, b), A = W > 0 && $ > 0 && $ < W;
+    A !== o.current && (o.current = A, N(A));
+  }, []), T = R(() => {
+    i.current !== null && (cancelAnimationFrame(i.current), i.current = null);
+  }, []), k = R(() => {
+    i.current === null && (i.current = requestAnimationFrame(() => {
+      i.current = null, y(), _();
+    }));
+  }, [y, _]), E = R((f) => {
+    for (const p of f)
+      p.target === a.current ? s.current = Math.round(Pe(p)) : p.target === n.current && (g.current = De(p));
+    k();
+  }, [k]), F = R(() => r.current ? r.current : typeof ResizeObserver > "u" ? null : (r.current = new ResizeObserver(E), r.current), [E]), S = R((f) => {
+    const p = F();
+    a.current && (p == null || p.unobserve(a.current)), a.current = f, f && (p == null || p.observe(f), s.current = Math.round(f.getBoundingClientRect().width), y(!0), k());
+  }, [y, F, k]), v = R((f) => {
+    const p = F();
+    if (n.current && (p == null || p.unobserve(n.current)), n.current = f, !f) {
+      g.current = 0;
+      return;
+    }
+    p == null || p.observe(f), g.current = f.getBoundingClientRect().height, k();
+  }, [F, k]);
+  return O(() => {
+    const f = F();
+    return a.current && (f == null || f.observe(a.current)), n.current && (f == null || f.observe(n.current)), () => {
+      var p;
+      (p = r.current) == null || p.disconnect(), r.current = null, T();
+    };
+  }, [F, T]), O(() => {
+    a.current && (y(!0), k());
+  }, [e.columns, e.cellAspect, e.stackBelow, y, k]), { rootRef: S, gridRef: v, stacked: h };
+}
+function Ge({ data: e, label: t }) {
+  const a = t || String(e.label || ""), n = String(e.formatted || "-"), r = e.comparison, i = (r == null ? void 0 : r.trend) === "up" ? "widget-kpi__trend--up" : (r == null ? void 0 : r.trend) === "down" ? "widget-kpi__trend--down" : "", c = (r == null ? void 0 : r.trend) === "up" ? "↑" : (r == null ? void 0 : r.trend) === "down" ? "↓" : "";
+  return /* @__PURE__ */ w("div", { className: "widget widget-kpi", children: [
+    /* @__PURE__ */ l("span", { className: "widget-kpi__label", children: a }),
+    /* @__PURE__ */ l("span", { className: "widget-kpi__value", children: n }),
+    r && r.variance_pct != null && /* @__PURE__ */ w("div", { className: `widget-kpi__trend ${i}`, children: [
+      /* @__PURE__ */ w("span", { className: "widget-kpi__variance", children: [
         c,
         " ",
-        e.variance_pct > 0 ? "+" : "",
-        e.variance_pct.toFixed(1),
+        r.variance_pct > 0 ? "+" : "",
+        r.variance_pct.toFixed(1),
         "%"
       ] }),
-      e.label && /* @__PURE__ */ l("span", { className: "widget-kpi__trend-label", children: e.label })
+      r.label && /* @__PURE__ */ l("span", { className: "widget-kpi__trend-label", children: r.label })
     ] })
   ] });
 }
-const we = "var(--bg-elevated)";
-function E(a, r, n, t) {
-  if (t <= 0) return "";
-  if (t >= 1)
-    return `M ${a - n} ${r} A ${n} ${n} 0 0 1 ${a} ${r - n} A ${n} ${n} 0 0 1 ${a + n} ${r}`;
-  const e = t * Math.PI, i = a - n * Math.cos(e), c = r - n * Math.sin(e);
-  return `M ${a - n} ${r} A ${n} ${n} 0 0 1 ${i} ${c}`;
+const Ve = "var(--bg-elevated)";
+function X(e, t, a, n) {
+  if (n <= 0) return "";
+  if (n >= 1)
+    return `M ${e - a} ${t} A ${a} ${a} 0 0 1 ${e} ${t - a} A ${a} ${a} 0 0 1 ${e + a} ${t}`;
+  const r = n * Math.PI, i = e - a * Math.cos(r), c = t - a * Math.sin(r);
+  return `M ${e - a} ${t} A ${a} ${a} 0 0 1 ${i} ${c}`;
 }
-function O(a) {
-  const r = Math.abs(a);
-  return r >= 1e6 ? `${(a / 1e6).toFixed(1)}M` : r >= 1e3 ? `${(a / 1e3).toFixed(1)}K` : a.toLocaleString("pt-BR");
+function q(e) {
+  const t = Math.abs(e);
+  return t >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : t >= 1e3 ? `${(e / 1e3).toFixed(1)}K` : e.toLocaleString("pt-BR");
 }
-function ye({ data: a, palette: r, label: n }) {
-  const t = n || String(a.label || ""), e = typeof a.value == "number" ? a.value : null, i = e != null ? O(e) : "-", c = String(a.formatted || "-"), s = typeof a.ratio == "number" ? a.ratio : 0, m = a.target_value, o = a.comparison_label, d = s >= 1, h = Math.min(Math.max(s, 0), 1), u = d ? "var(--action-green)" : s >= 0.7 ? r[0] || "var(--color-info)" : s >= 0.4 ? "var(--color-warning)" : "var(--color-error)", w = m != null ? O(m) : "-", g = 50, p = 50, k = 44, b = 10;
-  return /* @__PURE__ */ _("div", { className: "widget widget-gauge", children: [
-    /* @__PURE__ */ l("span", { className: "widget-gauge__label", children: t }),
-    /* @__PURE__ */ _("div", { className: "widget-gauge__chart", children: [
-      /* @__PURE__ */ _("svg", { viewBox: "0 0 100 56", preserveAspectRatio: "xMidYMax meet", children: [
-        /* @__PURE__ */ l("path", { d: E(g, p, k, 1), fill: "none", stroke: we, strokeWidth: b, strokeLinecap: "butt" }),
-        h > 0 && /* @__PURE__ */ l("path", { d: E(g, p, k, h), fill: "none", stroke: u, strokeWidth: b, strokeLinecap: "butt" })
+function Ke({ data: e, palette: t, label: a }) {
+  const n = a || String(e.label || ""), r = typeof e.value == "number" ? e.value : null, i = r != null ? q(r) : "-", c = String(e.formatted || "-"), s = typeof e.ratio == "number" ? e.ratio : 0, g = e.target_value, o = e.comparison_label, d = s >= 1, u = Math.min(Math.max(s, 0), 1), h = d ? "var(--action-green)" : s >= 0.7 ? t[0] || "var(--color-info)" : s >= 0.4 ? "var(--color-warning)" : "var(--color-error)", N = g != null ? q(g) : "-", m = 50, _ = 50, y = 44, T = 10;
+  return /* @__PURE__ */ w("div", { className: "widget widget-gauge", children: [
+    /* @__PURE__ */ l("span", { className: "widget-gauge__label", children: n }),
+    /* @__PURE__ */ w("div", { className: "widget-gauge__chart", children: [
+      /* @__PURE__ */ w("svg", { viewBox: "0 0 100 56", preserveAspectRatio: "xMidYMax meet", children: [
+        /* @__PURE__ */ l("path", { d: X(m, _, y, 1), fill: "none", stroke: Ve, strokeWidth: T, strokeLinecap: "butt" }),
+        u > 0 && /* @__PURE__ */ l("path", { d: X(m, _, y, u), fill: "none", stroke: h, strokeWidth: T, strokeLinecap: "butt" })
       ] }),
-      /* @__PURE__ */ _("div", { className: "widget-gauge__center", children: [
+      /* @__PURE__ */ w("div", { className: "widget-gauge__center", children: [
         /* @__PURE__ */ l("span", { className: "widget-gauge__percent", children: c }),
-        /* @__PURE__ */ _("span", { className: "widget-gauge__comparison", children: [
+        /* @__PURE__ */ w("span", { className: "widget-gauge__comparison", children: [
           i,
           " / ",
-          w
+          N
         ] }),
         d && /* @__PURE__ */ l("span", { className: "widget-gauge__badge", children: o || "Meta batida" }),
         !d && o && /* @__PURE__ */ l("span", { className: "widget-gauge__comparison", children: o })
@@ -121,195 +203,248 @@ function ye({ data: a, palette: r, label: n }) {
     ] })
   ] });
 }
-const P = { fontSize: 10, fill: "var(--text-muted)" }, Ne = "var(--bg-elevated)", V = {
+const U = { fontSize: 10, fill: "var(--text-muted)" }, je = "var(--bg-elevated)", ee = {
   backgroundColor: "var(--bg-elevated)",
   border: "1px solid var(--bg-paper)",
   borderRadius: "6px",
   color: "var(--text-primary)"
-}, K = {
+}, te = {
   color: "var(--text-primary)",
   fontWeight: 600
 };
-function G(a, r) {
-  var e;
-  const n = Array.isArray(r) ? r[0] : void 0, t = (e = n == null ? void 0 : n.payload) == null ? void 0 : e.tooltipLabel;
-  return typeof t == "string" && t ? t : String(a ?? "");
+function re(e, t) {
+  var r;
+  const a = Array.isArray(t) ? t[0] : void 0, n = (r = a == null ? void 0 : a.payload) == null ? void 0 : r.tooltipLabel;
+  return typeof n == "string" && n ? n : String(e ?? "");
 }
-function ke(a) {
-  const [r, n] = N({ width: 0, height: 0 });
-  return T(() => {
-    const t = a.current;
-    if (!t) return;
-    const e = new ResizeObserver(([i]) => {
+function Xe(e) {
+  const [t, a] = L({ width: 0, height: 0 });
+  return O(() => {
+    const n = e.current;
+    if (!n) return;
+    const r = new ResizeObserver(([i]) => {
       const { width: c, height: s } = i.contentRect;
-      n(
-        (m) => m.width !== Math.floor(c) || m.height !== Math.floor(s) ? { width: Math.floor(c), height: Math.floor(s) } : m
+      a(
+        (g) => g.width !== Math.floor(c) || g.height !== Math.floor(s) ? { width: Math.floor(c), height: Math.floor(s) } : g
       );
     });
-    return e.observe(t), () => e.disconnect();
-  }, [a]), r;
+    return r.observe(n), () => r.disconnect();
+  }, [e]), t;
 }
-function x({ Chart: a, chartData: r, xKey: n, series: t, palette: e, renderSeries: i, width: c, height: s }) {
-  return /* @__PURE__ */ _(a, { data: r, width: c, height: s, children: [
-    /* @__PURE__ */ l(he, { strokeDasharray: "3 3", stroke: Ne }),
-    /* @__PURE__ */ l(ge, { dataKey: n, tick: P }),
-    /* @__PURE__ */ l(ue, { tick: P }),
+function Y({ Chart: e, chartData: t, xKey: a, series: n, palette: r, renderSeries: i, width: c, height: s }) {
+  return /* @__PURE__ */ w(e, { data: t, width: c, height: s, children: [
+    /* @__PURE__ */ l(Fe, { strokeDasharray: "3 3", stroke: je }),
+    /* @__PURE__ */ l(Le, { dataKey: a, tick: U }),
+    /* @__PURE__ */ l(Te, { tick: U }),
     /* @__PURE__ */ l(
-      Y,
+      B,
       {
-        contentStyle: V,
-        labelStyle: K,
-        labelFormatter: G,
+        contentStyle: ee,
+        labelStyle: te,
+        labelFormatter: re,
         cursor: { fill: "var(--bg-paper)", opacity: 0.3 }
       }
     ),
-    t.length > 1 && /* @__PURE__ */ l(me, {}),
-    t.map((m, o) => i(m, e[o % e.length], o))
+    n.length > 1 && /* @__PURE__ */ l(Ae, {}),
+    n.map((g, o) => i(g, r[o % r.length], o))
   ] });
 }
-function $e({ data: a, palette: r, label: n }) {
-  const t = String(a.chartType || "bar"), e = n || String(a.label || ""), i = String(a.xKey || "label"), c = a.series || [], s = a.data || [], m = F(null), { width: o, height: d } = ke(m), h = () => {
-    var w;
+function qe({ data: e, palette: t, label: a }) {
+  const n = String(e.chartType || "bar"), r = a || String(e.label || ""), i = String(e.xKey || "label"), c = e.series || [], s = e.data || [], g = C(null), { width: o, height: d } = Xe(g), u = () => {
+    var N;
     if (o <= 0 || d <= 0) return null;
-    if (t === "pie")
-      return /* @__PURE__ */ _(ae, { width: o, height: d, children: [
+    if (n === "pie")
+      return /* @__PURE__ */ w(ye, { width: o, height: d, children: [
         /* @__PURE__ */ l(
-          re,
+          Ne,
           {
             data: s,
-            dataKey: ((w = c[0]) == null ? void 0 : w.key) || "s0",
+            dataKey: ((N = c[0]) == null ? void 0 : N.key) || "s0",
             nameKey: i,
             cx: "50%",
             cy: "50%",
             outerRadius: "75%",
-            label: ({ name: g, percent: p }) => `${g}: ${(p * 100).toFixed(0)}%`,
+            label: ({ name: m, percent: _ }) => `${m}: ${(_ * 100).toFixed(0)}%`,
             labelLine: !1,
-            children: s.map((g, p) => /* @__PURE__ */ l(le, { fill: r[p % r.length] }, p))
+            children: s.map((m, _) => /* @__PURE__ */ l(ke, { fill: t[_ % t.length] }, _))
           }
         ),
         /* @__PURE__ */ l(
-          Y,
+          B,
           {
-            contentStyle: V,
-            labelStyle: K,
-            labelFormatter: G
+            contentStyle: ee,
+            labelStyle: te,
+            labelFormatter: re
           }
         )
       ] });
-    const u = { chartData: s, xKey: i, series: c, palette: r, width: o, height: d };
-    return t === "line" ? /* @__PURE__ */ l(x, { ...u, Chart: ne, renderSeries: (g, p) => /* @__PURE__ */ l(
-      ie,
+    const h = { chartData: s, xKey: i, series: c, palette: t, width: o, height: d };
+    return n === "line" ? /* @__PURE__ */ l(Y, { ...h, Chart: Se, renderSeries: (m, _) => /* @__PURE__ */ l(
+      $e,
       {
         type: "monotone",
-        dataKey: g.key,
-        name: g.label,
-        stroke: p,
+        dataKey: m.key,
+        name: m.label,
+        stroke: _,
         strokeWidth: 2,
         dot: s.length <= 31
       },
-      g.key
-    ) }) : t === "area" ? /* @__PURE__ */ l(x, { ...u, Chart: se, renderSeries: (g, p) => /* @__PURE__ */ l(
-      ce,
+      m.key
+    ) }) : n === "area" ? /* @__PURE__ */ l(Y, { ...h, Chart: Ce, renderSeries: (m, _) => /* @__PURE__ */ l(
+      Re,
       {
         type: "monotone",
-        dataKey: g.key,
-        name: g.label,
-        fill: p,
-        stroke: p,
+        dataKey: m.key,
+        name: m.label,
+        fill: _,
+        stroke: _,
         fillOpacity: 0.3
       },
-      g.key
-    ) }) : /* @__PURE__ */ l(x, { ...u, Chart: oe, renderSeries: (g, p) => /* @__PURE__ */ l(
-      de,
+      m.key
+    ) }) : /* @__PURE__ */ l(Y, { ...h, Chart: xe, renderSeries: (m, _) => /* @__PURE__ */ l(
+      Me,
       {
-        dataKey: g.key,
-        name: g.label,
-        fill: p,
+        dataKey: m.key,
+        name: m.label,
+        fill: _,
         radius: [3, 3, 0, 0]
       },
-      g.key
+      m.key
     ) });
   };
-  return /* @__PURE__ */ _("div", { className: "widget widget-chart", children: [
-    e && /* @__PURE__ */ l("h4", { className: "widget-chart__title", children: e }),
-    /* @__PURE__ */ l("div", { ref: m, className: "widget-chart__container", children: s.length === 0 ? /* @__PURE__ */ l("div", { className: "widget-chart__empty", children: "Sem dados" }) : h() })
+  return /* @__PURE__ */ w("div", { className: "widget widget-chart", children: [
+    r && /* @__PURE__ */ l("h4", { className: "widget-chart__title", children: r }),
+    /* @__PURE__ */ l("div", { ref: g, className: "widget-chart__container", children: s.length === 0 ? /* @__PURE__ */ l("div", { className: "widget-chart__empty", children: "Sem dados" }) : u() })
+  ] });
+}
+function Ue(e, t) {
+  if (e == null || e === "") return "-";
+  const a = typeof e == "number" ? e : Number(e), n = e !== "" && !Number.isNaN(a);
+  switch (t) {
+    case "currency":
+      return n ? a.toLocaleString("pt-BR", { style: "currency", currency: "BRL" }) : String(e);
+    case "integer":
+      return n ? Math.round(a).toLocaleString("pt-BR") : String(e);
+    case "number":
+      return n ? a.toLocaleString("pt-BR", { maximumFractionDigits: 1 }) : String(e);
+    case "percentage":
+      return n ? `${a > 0 ? "+" : ""}${Math.round(a)}%` : String(e);
+    default:
+      return String(e);
+  }
+}
+function Qe({ data: e, label: t }) {
+  var o;
+  const [a, n] = L(0), r = e.columns || [], i = e.tabs || [], c = i.length > 0, s = c ? ((o = i[Math.min(a, i.length - 1)]) == null ? void 0 : o.rows) || [] : e.rows || [], g = t || String(e.label || "");
+  return r.length === 0 ? /* @__PURE__ */ w("div", { className: "widget widget-table", children: [
+    g && /* @__PURE__ */ l("span", { className: "widget-table__label", children: g }),
+    /* @__PURE__ */ l("span", { className: "widget-table__empty", children: "Configure as colunas da tabela." })
+  ] }) : /* @__PURE__ */ w("div", { className: "widget widget-table", children: [
+    g && /* @__PURE__ */ l("span", { className: "widget-table__label", children: g }),
+    c && /* @__PURE__ */ l("div", { className: "widget-table__tabs", role: "tablist", children: i.map((d, u) => /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": u === a,
+        className: `widget-table__tab${u === a ? " widget-table__tab--active" : ""}`,
+        onClick: () => n(u),
+        children: d.label
+      },
+      u
+    )) }),
+    /* @__PURE__ */ l("div", { className: "widget-table__scroll", children: /* @__PURE__ */ w("table", { className: "widget-table__table", children: [
+      /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: r.map((d) => {
+        const u = !!d.format && d.format !== "text";
+        return /* @__PURE__ */ l("th", { className: `widget-table__th${u ? " widget-table__th--num" : ""}`, children: d.label || d.key }, d.key);
+      }) }) }),
+      /* @__PURE__ */ l("tbody", { children: s.length === 0 ? /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", { className: "widget-table__td widget-table__empty", colSpan: r.length, children: "Sem dados" }) }) : s.map((d, u) => /* @__PURE__ */ l("tr", { children: r.map((h) => {
+        const N = d[h.key], m = !!h.format && h.format !== "text";
+        let _ = "";
+        if (h.format === "percentage") {
+          const y = Number(N);
+          Number.isNaN(y) || (_ = y > 0 ? " widget-table__td--up" : y < 0 ? " widget-table__td--down" : "");
+        }
+        return /* @__PURE__ */ l("td", { className: `widget-table__td${m ? " widget-table__td--num" : ""}${_}`, children: Ue(N, h.format) }, h.key);
+      }) }, u)) })
+    ] }) })
   ] });
 }
-function Se({ config: a, value: r, options: n = [], dateBounds: t, onChange: e }) {
-  const i = a.filterType || "select", c = a.label || "Filtro", s = a.dateFilterMode || "range";
-  return /* @__PURE__ */ _("div", { className: "widget-filter", children: [
+function Ze({ config: e, value: t, options: a = [], dateBounds: n, onChange: r }) {
+  const i = e.filterType || "select", c = e.label || "Filtro", s = e.dateFilterMode || "range";
+  return /* @__PURE__ */ w("div", { className: "widget-filter", children: [
     /* @__PURE__ */ l("label", { className: "widget-filter__label", children: c }),
-    i === "date_range" ? s === "yearly" ? /* @__PURE__ */ l(Me, { value: r, dateBounds: t, onChange: e }) : s === "monthly" ? /* @__PURE__ */ l(Re, { value: r, dateBounds: t, onChange: e }) : s === "weekly" ? /* @__PURE__ */ l(xe, { value: r, dateBounds: t, onChange: e }) : /* @__PURE__ */ l(Ce, { value: r, dateBounds: t, onChange: e }) : /* @__PURE__ */ l(
-      Fe,
+    i === "date_range" ? s === "yearly" ? /* @__PURE__ */ l(Be, { value: t, dateBounds: n, onChange: r }) : s === "monthly" ? /* @__PURE__ */ l(et, { value: t, dateBounds: n, onChange: r }) : s === "weekly" ? /* @__PURE__ */ l(tt, { value: t, dateBounds: n, onChange: r }) : /* @__PURE__ */ l(Je, { value: t, dateBounds: n, onChange: r }) : /* @__PURE__ */ l(
+      rt,
       {
-        value: r,
-        options: n,
+        value: t,
+        options: a,
         multi: i === "multi_select",
-        searchable: a.searchable || !1,
-        onChange: e
+        searchable: e.searchable || !1,
+        onChange: r
       }
     )
   ] });
 }
-function Ce({ value: a, dateBounds: r, onChange: n }) {
-  const [t, e] = a ? a.split("|") : ["", ""];
-  return /* @__PURE__ */ _("div", { className: "widget-filter__date-range widget-filter__date-range--stacked", children: [
+function Je({ value: e, dateBounds: t, onChange: a }) {
+  const [n, r] = e ? e.split("|") : ["", ""];
+  return /* @__PURE__ */ w("div", { className: "widget-filter__date-range widget-filter__date-range--stacked", children: [
     /* @__PURE__ */ l(
-      A,
+      K,
       {
-        value: t,
-        minIso: r == null ? void 0 : r.min,
-        maxIso: e || (r == null ? void 0 : r.max),
+        value: n,
+        minIso: t == null ? void 0 : t.min,
+        maxIso: r || (t == null ? void 0 : t.max),
         selectsStart: !0,
-        startIso: t,
-        endIso: e,
+        startIso: n,
+        endIso: r,
         placeholder: "Data inicial",
-        onChange: (i) => n(`${i}|${e}`)
+        onChange: (i) => a(`${i}|${r}`)
       }
     ),
     /* @__PURE__ */ l(
-      A,
+      K,
       {
-        value: e,
-        minIso: t || (r == null ? void 0 : r.min),
-        maxIso: r == null ? void 0 : r.max,
+        value: r,
+        minIso: n || (t == null ? void 0 : t.min),
+        maxIso: t == null ? void 0 : t.max,
         selectsEnd: !0,
-        startIso: t,
-        endIso: e,
+        startIso: n,
+        endIso: r,
         placeholder: "Data final",
-        onChange: (i) => n(`${t}|${i}`)
+        onChange: (i) => a(`${n}|${i}`)
       }
     )
   ] });
 }
-function Me({ value: a, dateBounds: r, onChange: n }) {
-  const [t] = a ? a.split("|") : [""], e = H(t), i = /* @__PURE__ */ new Date(), c = (e == null ? void 0 : e.year) ?? i.getFullYear(), s = L(r), m = (o) => {
-    const d = J(o);
-    n(`${d.start}|${d.end}`);
+function Be({ value: e, dateBounds: t, onChange: a }) {
+  const [n] = e ? e.split("|") : [""], r = se(n), i = /* @__PURE__ */ new Date(), c = (r == null ? void 0 : r.year) ?? i.getFullYear(), s = z(t), g = (o) => {
+    const d = ue(o);
+    a(`${d.start}|${d.end}`);
   };
   return /* @__PURE__ */ l("div", { className: "widget-filter__date-range widget-filter__date-range--year", children: /* @__PURE__ */ l(
     "select",
     {
       className: "widget-filter__select",
       value: c,
-      onChange: (o) => m(parseInt(o.target.value)),
+      onChange: (o) => g(parseInt(o.target.value)),
       children: s.map((o) => /* @__PURE__ */ l("option", { value: o, children: o }, o))
     }
   ) });
 }
-function Re({ value: a, dateBounds: r, onChange: n }) {
-  const [t] = a ? a.split("|") : [""], e = W(t), i = /* @__PURE__ */ new Date(), c = (e == null ? void 0 : e.year) ?? i.getFullYear(), s = (e == null ? void 0 : e.month) ?? i.getMonth() + 1, m = L(r), o = (d, h) => {
-    const u = Q(d, h);
-    n(`${u.start}|${u.end}`);
+function et({ value: e, dateBounds: t, onChange: a }) {
+  const [n] = e ? e.split("|") : [""], r = Z(n), i = /* @__PURE__ */ new Date(), c = (r == null ? void 0 : r.year) ?? i.getFullYear(), s = (r == null ? void 0 : r.month) ?? i.getMonth() + 1, g = z(t), o = (d, u) => {
+    const h = de(d, u);
+    a(`${h.start}|${h.end}`);
   };
-  return /* @__PURE__ */ _("div", { className: "widget-filter__date-range widget-filter__date-range--month", children: [
+  return /* @__PURE__ */ w("div", { className: "widget-filter__date-range widget-filter__date-range--month", children: [
     /* @__PURE__ */ l(
       "select",
       {
         className: "widget-filter__select",
         value: s,
         onChange: (d) => o(c, parseInt(d.target.value)),
-        children: D.map((d, h) => /* @__PURE__ */ l("option", { value: h + 1, children: d }, h + 1))
+        children: J.map((d, u) => /* @__PURE__ */ l("option", { value: u + 1, children: d }, u + 1))
       }
     ),
     /* @__PURE__ */ l(
@@ -318,24 +453,24 @@ function Re({ value: a, dateBounds: r, onChange: n }) {
         className: "widget-filter__select",
         value: c,
         onChange: (d) => o(parseInt(d.target.value), s),
-        children: m.map((d) => /* @__PURE__ */ l("option", { value: d, children: d }, d))
+        children: g.map((d) => /* @__PURE__ */ l("option", { value: d, children: d }, d))
       }
     )
   ] });
 }
-function xe({ value: a, dateBounds: r, onChange: n }) {
-  const [t] = a ? a.split("|") : [""], e = W(t), i = /* @__PURE__ */ new Date(), c = (e == null ? void 0 : e.year) ?? i.getFullYear(), s = (e == null ? void 0 : e.month) ?? i.getMonth() + 1, m = L(r), o = R(c, s), d = X(t, c, s) || 1;
-  return /* @__PURE__ */ _("div", { className: "widget-filter__date-range widget-filter__date-range--week", children: [
+function tt({ value: e, dateBounds: t, onChange: a }) {
+  const [n] = e ? e.split("|") : [""], r = Z(n), i = /* @__PURE__ */ new Date(), c = (r == null ? void 0 : r.year) ?? i.getFullYear(), s = (r == null ? void 0 : r.month) ?? i.getMonth() + 1, g = z(t), o = D(c, s), d = ce(n, c, s) || 1;
+  return /* @__PURE__ */ w("div", { className: "widget-filter__date-range widget-filter__date-range--week", children: [
     /* @__PURE__ */ l(
       "select",
       {
         className: "widget-filter__select",
         value: c,
-        onChange: (h) => {
-          const u = parseInt(h.target.value), g = R(u, s)[0];
-          g && n(`${g.start}|${g.end}`);
+        onChange: (u) => {
+          const h = parseInt(u.target.value), m = D(h, s)[0];
+          m && a(`${m.start}|${m.end}`);
         },
-        children: m.map((h) => /* @__PURE__ */ l("option", { value: h, children: h }, h))
+        children: g.map((u) => /* @__PURE__ */ l("option", { value: u, children: u }, u))
       }
     ),
     /* @__PURE__ */ l(
@@ -343,11 +478,11 @@ function xe({ value: a, dateBounds: r, onChange: n }) {
       {
         className: "widget-filter__select",
         value: s,
-        onChange: (h) => {
-          const u = parseInt(h.target.value), g = R(c, u)[0];
-          g && n(`${g.start}|${g.end}`);
+        onChange: (u) => {
+          const h = parseInt(u.target.value), m = D(c, h)[0];
+          m && a(`${m.start}|${m.end}`);
         },
-        children: D.map((h, u) => /* @__PURE__ */ l("option", { value: u + 1, children: h }, u + 1))
+        children: J.map((u, h) => /* @__PURE__ */ l("option", { value: h + 1, children: u }, h + 1))
       }
     ),
     /* @__PURE__ */ l(
@@ -355,42 +490,42 @@ function xe({ value: a, dateBounds: r, onChange: n }) {
       {
         className: "widget-filter__select",
         value: d,
-        onChange: (h) => {
-          const u = o[parseInt(h.target.value) - 1];
-          u && n(`${u.start}|${u.end}`);
+        onChange: (u) => {
+          const h = o[parseInt(u.target.value) - 1];
+          h && a(`${h.start}|${h.end}`);
         },
-        children: o.map((h) => /* @__PURE__ */ l("option", { value: h.index, children: h.label }, h.index))
+        children: o.map((u) => /* @__PURE__ */ l("option", { value: u.index, children: u.label }, u.index))
       }
     )
   ] });
 }
-function Fe({ value: a, options: r, multi: n, searchable: t, onChange: e }) {
-  if (t)
+function rt({ value: e, options: t, multi: a, searchable: n, onChange: r }) {
+  if (n)
     return /* @__PURE__ */ l(
-      q,
+      oe,
       {
-        value: a,
-        options: r,
-        multi: n,
-        onChange: e
+        value: e,
+        options: t,
+        multi: a,
+        onChange: r
       }
     );
-  if (n) {
-    const i = a ? a.split(I) : [], c = (s) => {
-      const m = i.includes(s) ? i.filter((o) => o !== s) : [...i, s];
-      e(m.join(I));
+  if (a) {
+    const i = e ? e.split(H) : [], c = (s) => {
+      const g = i.includes(s) ? i.filter((o) => o !== s) : [...i, s];
+      r(g.join(H));
     };
-    return /* @__PURE__ */ _("div", { className: "widget-filter__multi", children: [
+    return /* @__PURE__ */ w("div", { className: "widget-filter__multi", children: [
       i.length > 0 && /* @__PURE__ */ l(
         "button",
         {
           type: "button",
           className: "widget-filter__multi-clear",
-          onClick: () => e(""),
+          onClick: () => r(""),
           children: "Limpar filtro"
         }
       ),
-      r.map((s) => /* @__PURE__ */ _("label", { className: "widget-filter__multi-option", children: [
+      t.map((s) => /* @__PURE__ */ w("label", { className: "widget-filter__multi-option", children: [
         /* @__PURE__ */ l(
           "input",
           {
@@ -403,182 +538,204 @@ function Fe({ value: a, options: r, multi: n, searchable: t, onChange: e }) {
       ] }, s))
     ] });
   }
-  return /* @__PURE__ */ _(
+  return /* @__PURE__ */ w(
     "select",
     {
       className: "widget-filter__select",
-      value: a,
-      onChange: (i) => e(i.target.value),
+      value: e,
+      onChange: (i) => r(i.target.value),
       children: [
         /* @__PURE__ */ l("option", { value: "", children: "Todos" }),
-        r.map((i) => /* @__PURE__ */ l("option", { value: i, children: i }, i))
+        t.map((i) => /* @__PURE__ */ l("option", { value: i, children: i }, i))
       ]
     }
   );
 }
-const Te = {
+const at = {
   currency: "R$",
   percentage: "%"
 };
-function Ie({ config: a, value: r, onChange: n }) {
-  const t = a.label || "Variavel", e = a.locked || !1, i = a.variableFormat || "number", c = Te[i] || "";
-  return /* @__PURE__ */ _("div", { className: `widget-variable ${e ? "widget-variable--locked" : ""}`, children: [
-    /* @__PURE__ */ l("label", { className: "widget-variable__label", children: t }),
-    /* @__PURE__ */ _("div", { className: "widget-variable__input-wrapper", children: [
+function nt({ config: e, value: t, onChange: a }) {
+  const n = e.label || "Variavel", r = e.locked || !1, i = e.variableFormat || "number", c = at[i] || "";
+  return /* @__PURE__ */ w("div", { className: `widget-variable ${r ? "widget-variable--locked" : ""}`, children: [
+    /* @__PURE__ */ l("label", { className: "widget-variable__label", children: n }),
+    /* @__PURE__ */ w("div", { className: "widget-variable__input-wrapper", children: [
       /* @__PURE__ */ l(
         "input",
         {
           className: "widget-variable__input",
           type: "number",
-          value: r,
-          onChange: (s) => n(parseFloat(s.target.value) || 0),
-          disabled: e,
+          value: t,
+          onChange: (s) => a(parseFloat(s.target.value) || 0),
+          disabled: r,
           step: i === "integer" ? 1 : 0.01
         }
       ),
       c && /* @__PURE__ */ l("span", { className: "widget-variable__suffix", children: c })
     ] }),
-    e && /* @__PURE__ */ l("span", { className: "widget-variable__lock-icon", title: "Bloqueado", children: "🔒" })
+    r && /* @__PURE__ */ l("span", { className: "widget-variable__lock-icon", title: "Bloqueado", children: "🔒" })
   ] });
 }
-function Le({ config: a, palette: r, onChange: n }) {
-  const t = a.label || "Cores", e = a.locked || !1;
-  return /* @__PURE__ */ _("div", { className: `widget-palette ${e ? "widget-palette--locked" : ""}`, children: [
-    /* @__PURE__ */ l("label", { className: "widget-palette__label", children: t }),
-    /* @__PURE__ */ l(Z, { selected: r, onSelect: n, customMode: !0, disabled: e }),
-    e && /* @__PURE__ */ l("span", { className: "widget-palette__lock-icon", title: "Bloqueado", children: "🔒" })
+function lt({ config: e, palette: t, onChange: a }) {
+  const n = e.label || "Cores", r = e.locked || !1;
+  return /* @__PURE__ */ w("div", { className: `widget-palette ${r ? "widget-palette--locked" : ""}`, children: [
+    /* @__PURE__ */ l("label", { className: "widget-palette__label", children: n }),
+    /* @__PURE__ */ l(he, { selected: t, onSelect: a, customMode: !0, disabled: r }),
+    r && /* @__PURE__ */ l("span", { className: "widget-palette__lock-icon", title: "Bloqueado", children: "🔒" })
   ] });
 }
-function Ae({
-  type: a,
-  computed: r,
-  palette: n,
-  config: t,
-  filterValue: e,
+function it({
+  type: e,
+  computed: t,
+  palette: a,
+  config: n,
+  filterValue: r,
   filterOptions: i,
   dateBounds: c,
   onFilterChange: s,
-  variableValue: m,
+  variableValue: g,
   onVariableChange: o,
   onPaletteChange: d
 }) {
-  if (r.error)
-    return /* @__PURE__ */ l("div", { className: "widget widget--error", children: /* @__PURE__ */ l("span", { className: "widget__error-text", children: String(r.error) }) });
-  const h = B(n);
-  switch (a) {
+  if (t.error)
+    return /* @__PURE__ */ l("div", { className: "widget widget--error", children: /* @__PURE__ */ l("span", { className: "widget__error-text", children: String(t.error) }) });
+  const u = ge(a);
+  switch (e) {
     case "kpi_card":
-      return /* @__PURE__ */ l(ve, { data: r, label: t == null ? void 0 : t.label });
+      return /* @__PURE__ */ l(Ge, { data: t, label: n == null ? void 0 : n.label });
     case "gauge":
-      return /* @__PURE__ */ l(ye, { data: r, palette: h, label: t == null ? void 0 : t.label });
+      return /* @__PURE__ */ l(Ke, { data: t, palette: u, label: n == null ? void 0 : n.label });
     case "chart":
-      return /* @__PURE__ */ l($e, { data: r, palette: h, label: t == null ? void 0 : t.label });
+      return /* @__PURE__ */ l(qe, { data: t, palette: u, label: n == null ? void 0 : n.label });
+    case "table":
+      return /* @__PURE__ */ l(Qe, { data: t, label: n == null ? void 0 : n.label });
     case "filter":
-      return t && s ? /* @__PURE__ */ l(
-        Se,
+      return n && s ? /* @__PURE__ */ l(
+        Ze,
         {
-          config: t,
-          value: e || "",
+          config: n,
+          value: r || "",
           options: i,
           dateBounds: c,
           onChange: s
         }
       ) : null;
     case "variable": {
-      const u = t;
-      return u && o ? /* @__PURE__ */ l(
-        Ie,
+      const h = n;
+      return h && o ? /* @__PURE__ */ l(
+        nt,
         {
-          config: u,
-          value: m ?? u.variableValue ?? 0,
+          config: h,
+          value: g ?? h.variableValue ?? 0,
           onChange: o
         }
       ) : null;
     }
     case "color_palette":
-      return t && d ? /* @__PURE__ */ l(
-        Le,
+      return n && d ? /* @__PURE__ */ l(
+        lt,
         {
-          config: t,
-          palette: n,
+          config: n,
+          palette: a,
           onChange: d
         }
       ) : null;
     default:
-      return /* @__PURE__ */ _("div", { className: "widget", children: [
+      return /* @__PURE__ */ w("div", { className: "widget", children: [
         "Widget: ",
-        a
+        e
       ] });
   }
 }
-const Ee = 2.5, Oe = 0.375;
-function Ve({
-  token: a,
-  rowHeight: r = Ee,
-  gridGap: n = Oe,
-  className: t
+const st = (e, t) => e.grid.y - t.grid.y || e.grid.x - t.grid.x;
+function ht({
+  token: e,
+  cellAspect: t = we,
+  stackBelow: a,
+  onGeometryChange: n,
+  silenceWarnings: r,
+  className: i
 }) {
   const {
-    layout: e,
-    renderData: i,
-    loading: c,
-    error: s,
-    filters: m,
-    variables: o,
-    palette: d,
-    setFilter: h,
-    setVariable: u,
-    setPalette: w
-  } = pe(a);
-  if (s && !e)
-    return /* @__PURE__ */ l("div", { className: `preview-tab ${t ?? ""}`, children: /* @__PURE__ */ l("div", { className: "preview-tab__error", children: s }) });
-  if (!e)
-    return /* @__PURE__ */ l("div", { className: `preview-tab ${t ?? ""}`, children: /* @__PURE__ */ l("div", { className: "preview-tab__loading", children: "Carregando dashboard..." }) });
-  if (e.widgets.length === 0)
-    return /* @__PURE__ */ l("div", { className: `preview-tab ${t ?? ""}`, children: /* @__PURE__ */ l("div", { className: "preview-tab__empty", children: "Este dashboard nao possui widgets." }) });
-  const g = (i == null ? void 0 : i.widgets) ?? {}, p = (i == null ? void 0 : i.date_bounds) ?? null, k = {
-    display: "grid",
-    gridTemplateColumns: `repeat(${e.gridColumns}, 1fr)`,
-    gridTemplateRows: `repeat(${e.gridRows}, ${r}rem)`,
-    gap: `${n}rem`,
-    ...ee(d)
-  };
-  return /* @__PURE__ */ _("div", { className: `preview-tab ${t ?? ""}`, children: [
-    s && !i && /* @__PURE__ */ l("div", { className: "preview-tab__error", children: s }),
-    i && /* @__PURE__ */ l("div", { className: "preview-tab__grid", style: k, children: e.widgets.map((b) => {
-      const S = te.has(b.type), y = g[b.id], C = {
-        gridColumn: `${b.grid.x + 1} / span ${b.grid.w}`,
-        gridRow: `${b.grid.y + 1} / span ${b.grid.h}`
-      }, v = b.type === "variable" ? o[b.id] ?? (y == null ? void 0 : y.value) ?? b.config.variableValue ?? 0 : void 0;
-      return /* @__PURE__ */ l(
-        "div",
-        {
-          className: `preview-tab__widget ${S ? "preview-tab__widget--control" : ""}`,
-          style: C,
-          children: S || y ? /* @__PURE__ */ l(
-            Ae,
-            {
-              type: b.type,
-              computed: y || {},
-              palette: d,
-              config: b.config,
-              filterValue: m[b.id] || "",
-              filterOptions: (y == null ? void 0 : y.available_values) || [],
-              dateBounds: p,
-              onFilterChange: (f) => h(b.id, f),
-              variableValue: v,
-              onVariableChange: (f) => u(b.id, f),
-              onPaletteChange: w
-            }
-          ) : /* @__PURE__ */ l("div", { className: "preview-tab__widget-loading", children: c ? "Carregando..." : "Sem dados" })
-        },
-        b.id
-      );
-    }) }),
-    c && i && /* @__PURE__ */ l("div", { className: "preview-tab__recalculating", children: "Atualizando..." })
-  ] });
+    layout: c,
+    renderData: s,
+    loading: g,
+    error: o,
+    filters: d,
+    variables: u,
+    palette: h,
+    setFilter: N,
+    setVariable: m,
+    setPalette: _
+  } = We(e), { rootRef: y, gridRef: T, stacked: k } = ze({
+    columns: (c == null ? void 0 : c.gridColumns) ?? 0,
+    cellAspect: t,
+    stackBelow: a,
+    onGeometryChange: n,
+    silenceWarnings: r
+  }), E = Q(() => {
+    const f = (c == null ? void 0 : c.widgets) ?? [];
+    return k ? [...f].sort(st) : f;
+  }, [c == null ? void 0 : c.widgets, k]), F = {
+    "--dash-gap": `${j}px`,
+    "--dash-pad": `${_e}px`
+  }, S = ["preview-tab", i].filter(Boolean).join(" ");
+  let v;
+  if (o && !c)
+    v = /* @__PURE__ */ l("div", { className: "preview-tab__error", children: o });
+  else if (!c)
+    v = /* @__PURE__ */ l("div", { className: "preview-tab__loading", children: "Carregando dashboard..." });
+  else if (c.widgets.length === 0)
+    v = /* @__PURE__ */ l("div", { className: "preview-tab__empty", children: "Este dashboard nao possui widgets." });
+  else {
+    const f = (s == null ? void 0 : s.widgets) ?? {}, p = (s == null ? void 0 : s.date_bounds) ?? null, $ = {
+      "--dash-cols": c.gridColumns,
+      "--dash-rows": c.gridRows,
+      ...me(h)
+    }, I = ["preview-tab__grid", k && "preview-tab__grid--stacked"].filter(Boolean).join(" ");
+    v = /* @__PURE__ */ w(ae, { children: [
+      o && !s && /* @__PURE__ */ l("div", { className: "preview-tab__error", children: o }),
+      s && /* @__PURE__ */ l("div", { className: I, style: $, ref: T, children: E.map((b) => {
+        const x = fe.has(b.type), M = f[b.id], W = k ? {
+          gridColumn: 1,
+          aspectRatio: `${be(b.grid.w, b.grid.h, t)}`,
+          minHeight: `${pe(b.grid.h, ve, j, 0)}px`
+        } : {
+          gridColumn: `${b.grid.x + 1} / span ${b.grid.w}`,
+          gridRow: `${b.grid.y + 1} / span ${b.grid.h}`
+        }, A = b.type === "variable" ? u[b.id] ?? (M == null ? void 0 : M.value) ?? b.config.variableValue ?? 0 : void 0;
+        return /* @__PURE__ */ l(
+          "div",
+          {
+            className: `preview-tab__widget ${x ? "preview-tab__widget--control" : ""}`,
+            style: W,
+            children: x || M ? /* @__PURE__ */ l(
+              it,
+              {
+                type: b.type,
+                computed: M || {},
+                palette: h,
+                config: b.config,
+                filterValue: d[b.id] || "",
+                filterOptions: (M == null ? void 0 : M.available_values) || [],
+                dateBounds: p,
+                onFilterChange: (P) => N(b.id, P),
+                variableValue: A,
+                onVariableChange: (P) => m(b.id, P),
+                onPaletteChange: _
+              }
+            ) : /* @__PURE__ */ l("div", { className: "preview-tab__widget-loading", children: g ? "Carregando..." : "Sem dados" })
+          },
+          b.id
+        );
+      }) }),
+      g && s && /* @__PURE__ */ l("div", { className: "preview-tab__recalculating", children: "Atualizando..." })
+    ] });
+  }
+  return /* @__PURE__ */ l("div", { className: S, style: F, ref: y, children: v });
 }
 export {
-  je as ApiError,
-  Ve as Dashboard
+  ft as ApiError,
+  ht as Dashboard
 };
 //# sourceMappingURL=index.js.map