@actionexec/dashboards 0.6.0 → 0.8.0

package/dist/index.js

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