dhx-react-suite 1.0.0 → 1.0.2

package/dist/dhx-react-suite.js

@@ -1,6 +1,6 @@
 import { jsxs as f, jsx as t, Fragment as Z } from "react/jsx-runtime";
 import { useEffect as T, useState as z, useMemo as F, useRef as B, useCallback as H, createContext as ee, useContext as te } from "react";
-import { Tooltip as re, Legend as ne, CartesianGrid as oe, XAxis as _, YAxis as X, BarChart as ie, Bar as ae, LineChart as le, Line as se, AreaChart as de, Area as ce, PieChart as pe, Pie as ue, Cell as he, RadarChart as xe, PolarGrid as ge, PolarAngleAxis as fe, Radar as ye, ScatterChart as be, Scatter as me, ResponsiveContainer as ve } from "recharts";
+import { Tooltip as re, Legend as ne, CartesianGrid as oe, XAxis as _, YAxis as X, BarChart as ie, Bar as le, LineChart as ae, Line as se, AreaChart as de, Area as ce, PieChart as pe, Pie as ue, Cell as he, RadarChart as xe, PolarGrid as ge, PolarAngleAxis as fe, Radar as ye, ScatterChart as be, Scatter as me, ResponsiveContainer as ve } from "recharts";
 const e = {
   primary: "#0288d1",
   primaryDk: "#01579b",
@@ -73,21 +73,21 @@ const ke = {
 };
 function We({
   children: r,
-  variant: a = "primary",
+  variant: l = "primary",
   size: g = "md",
   icon: o,
   disabled: s,
-  onClick: l,
+  onClick: a,
   style: c,
   className: n = ""
 }) {
   return T(W, []), /* @__PURE__ */ f(
     "button",
     {
-      className: `dhx dhx-btn dhx-btn-${a} ${n}`,
+      className: `dhx dhx-btn dhx-btn-${l} ${n}`,
       style: { ...ke[g], ...c },
       disabled: s,
-      onClick: l,
+      onClick: a,
       children: [
         o && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: o }),
         r
@@ -95,7 +95,7 @@ function We({
     }
   );
 }
-function Ee({ items: r = [], style: a }) {
+function Ee({ items: r = [], style: l }) {
   T(W, []);
   const g = (o, s) => {
     var c;
@@ -135,12 +135,12 @@ function Ee({ items: r = [], style: a }) {
         },
         s
       );
-    const l = o.active;
+    const a = o.active;
     return /* @__PURE__ */ f(
       "button",
       {
-        className: `dhx dhx-btn ${l ? "dhx-btn-primary" : "dhx-btn-ghost"}`,
-        style: { height: 32, gap: 4, ...o.twoState && l ? { background: e.primaryLt, color: e.primary, borderColor: `${e.primary}66` } : {} },
+        className: `dhx dhx-btn ${a ? "dhx-btn-primary" : "dhx-btn-ghost"}`,
+        style: { height: 32, gap: 4, ...o.twoState && a ? { background: e.primaryLt, color: e.primary, borderColor: `${e.primary}66` } : {} },
         disabled: o.disabled,
         onClick: () => {
           var n;
@@ -154,12 +154,12 @@ function Ee({ items: r = [], style: a }) {
       s
     );
   };
-  return /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", alignItems: "center", gap: 2, padding: "4px 8px", background: e.surface, borderBottom: `1px solid ${e.border}`, minHeight: 44, flexWrap: "wrap", ...a }, children: r.map(g) });
+  return /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", alignItems: "center", gap: 2, padding: "4px 8px", background: e.surface, borderBottom: `1px solid ${e.border}`, minHeight: 44, flexWrap: "wrap", ...l }, children: r.map(g) });
 }
-function Ae({ items: r = [], width: a = 240, collapsed: g, onSelect: o, header: s, footer: l, style: c }) {
+function Ae({ items: r = [], width: l = 240, collapsed: g, onSelect: o, header: s, footer: a, style: c }) {
   const [n, p] = z(g ?? !1), [m, d] = z(null), [h, i] = z({});
   T(W, []);
-  const y = n ? 56 : a, $ = (v) => {
+  const y = n ? 56 : l, $ = (v) => {
     d(v.id), o == null || o(v);
   }, S = (v, N = 0) => {
     var M;
@@ -191,11 +191,11 @@ function Ae({ items: r = [], width: a = 240, collapsed: g, onSelect: o, header:
     s && !n && /* @__PURE__ */ t("div", { style: { padding: "12px 14px", borderBottom: `1px solid ${e.border}`, fontWeight: 700, fontSize: 15 }, children: s }),
     /* @__PURE__ */ t("button", { onClick: () => p((v) => !v), style: { margin: "8px 6px", background: "transparent", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: n ? "center" : "flex-end", padding: "4px 6px", borderRadius: e.r, color: e.textSec }, children: /* @__PURE__ */ t("span", { style: { fontSize: 18 }, children: n ? "☰" : "✕" }) }),
     /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { flex: 1, overflowY: "auto", overflowX: "hidden" }, children: r.map((v) => S(v)) }),
-    l && !n && /* @__PURE__ */ t("div", { style: { padding: "10px 14px", borderTop: `1px solid ${e.border}` }, children: l })
+    a && !n && /* @__PURE__ */ t("div", { style: { padding: "10px 14px", borderTop: `1px solid ${e.border}` }, children: a })
   ] });
 }
 function we({ config: r }) {
-  const [a, g] = z(!1), o = {
+  const [l, g] = z(!1), o = {
     position: "relative",
     background: e.surface,
     border: `1px solid ${e.border}`,
@@ -203,34 +203,34 @@ function we({ config: r }) {
     overflow: "hidden",
     ...r.width ? { width: r.width, minWidth: r.width } : { flex: 1 },
     ...r.height ? { height: r.height, minHeight: r.height } : { minHeight: 40 },
-    ...a ? { flex: "0 0 auto" } : {}
+    ...l ? { flex: "0 0 auto" } : {}
   };
   return /* @__PURE__ */ f("div", { style: o, children: [
     r.header && /* @__PURE__ */ f("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "6px 12px", background: e.bg, borderBottom: `1px solid ${e.border}`, fontSize: 12, fontWeight: 600, color: e.textSec, userSelect: "none" }, children: [
       /* @__PURE__ */ t("span", { children: r.header }),
-      r.collapsable && /* @__PURE__ */ t("button", { onClick: () => g((s) => !s), style: { background: "none", border: "none", cursor: "pointer", color: e.textMut, fontSize: 16, lineHeight: 1 }, children: a ? "▼" : "▲" })
+      r.collapsable && /* @__PURE__ */ t("button", { onClick: () => g((s) => !s), style: { background: "none", border: "none", cursor: "pointer", color: e.textMut, fontSize: 16, lineHeight: 1 }, children: l ? "▼" : "▲" })
     ] }),
-    !a && /* @__PURE__ */ f("div", { style: { padding: r.padding || 0, height: r.header ? "calc(100% - 33px)" : "100%", overflow: "auto" }, children: [
+    !l && /* @__PURE__ */ f("div", { style: { padding: r.padding || 0, height: r.header ? "calc(100% - 33px)" : "100%", overflow: "auto" }, children: [
       r.html ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: r.html } }) : r.content,
       (r.rows || r.cols) && /* @__PURE__ */ t(Se, { rows: r.rows, cols: r.cols, style: { height: "100%" } })
     ] })
   ] });
 }
-function Se({ rows: r, cols: a, type: g = "line", style: o, children: s }) {
+function Se({ rows: r, cols: l, type: g = "line", style: o, children: s }) {
   T(W, []);
-  const l = g === "space" ? 12 : g === "wide" ? 8 : 1, c = r || a, n = !!r;
-  return c ? /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", flexDirection: n ? "column" : "row", gap: l, width: "100%", height: "100%", ...o }, children: c.map((p, m) => /* @__PURE__ */ t(we, { config: p }, p.id || m)) }) : /* @__PURE__ */ t("div", { className: "dhx", style: { width: "100%", height: "100%", ...o }, children: s });
+  const a = g === "space" ? 12 : g === "wide" ? 8 : 1, c = r || l, n = !!r;
+  return c ? /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", flexDirection: n ? "column" : "row", gap: a, width: "100%", height: "100%", ...o }, children: c.map((p, m) => /* @__PURE__ */ t(we, { config: p }, p.id || m)) }) : /* @__PURE__ */ t("div", { className: "dhx", style: { width: "100%", height: "100%", ...o }, children: s });
 }
-function He({ views: r = [], mode: a = "top", tabAlign: g = "left", closable: o = [], disabled: s = [], defaultActive: l, onBeforeChange: c, onChange: n, style: p }) {
+function He({ views: r = [], mode: l = "top", tabAlign: g = "left", closable: o = [], disabled: s = [], defaultActive: a, onBeforeChange: c, onChange: n, style: p }) {
   var x;
-  const [m, d] = z(l || ((x = r[0]) == null ? void 0 : x.id)), [h, i] = z(r.map((M) => M.id));
+  const [m, d] = z(a || ((x = r[0]) == null ? void 0 : x.id)), [h, i] = z(r.map((M) => M.id));
   T(W, []);
   const y = (M, D) => {
     M.stopPropagation(), i((b) => b.filter((C) => C !== D)), m === D && d(h.find((b) => b !== D) ?? "");
   }, $ = (M) => {
     s.includes(M) || c && c(M) === !1 || (d(M), n == null || n(M));
-  }, S = a === "left" || a === "right", v = r.filter((M) => h.includes(M.id)), N = /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: S ? "column" : "row", justifyContent: g === "center" ? "center" : g === "right" ? "flex-end" : "flex-start", background: e.surface, borderBottom: !S && a !== "bottom" ? `2px solid ${e.border}` : "none", borderTop: a === "bottom" ? `2px solid ${e.border}` : "none", borderRight: a === "left" ? `2px solid ${e.border}` : "none", borderLeft: a === "right" ? `2px solid ${e.border}` : "none", overflowX: "auto", flexShrink: 0 }, children: v.map((M) => {
-    const D = m === M.id, b = s.includes(M.id), C = a === "bottom" ? { borderTop: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 } : S ? { color: e.primary, fontWeight: 600, background: e.primaryLt, [a === "left" ? "borderRight" : "borderLeft"]: `2px solid ${e.primary}` } : { borderBottom: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 };
+  }, S = l === "left" || l === "right", v = r.filter((M) => h.includes(M.id)), N = /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: S ? "column" : "row", justifyContent: g === "center" ? "center" : g === "right" ? "flex-end" : "flex-start", background: e.surface, borderBottom: !S && l !== "bottom" ? `2px solid ${e.border}` : "none", borderTop: l === "bottom" ? `2px solid ${e.border}` : "none", borderRight: l === "left" ? `2px solid ${e.border}` : "none", borderLeft: l === "right" ? `2px solid ${e.border}` : "none", overflowX: "auto", flexShrink: 0 }, children: v.map((M) => {
+    const D = m === M.id, b = s.includes(M.id), C = l === "bottom" ? { borderTop: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 } : S ? { color: e.primary, fontWeight: 600, background: e.primaryLt, [l === "left" ? "borderRight" : "borderLeft"]: `2px solid ${e.primary}` } : { borderBottom: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 };
     return /* @__PURE__ */ f(
       "div",
       {
@@ -248,23 +248,23 @@ function He({ views: r = [], mode: a = "top", tabAlign: g = "left", closable: o
     k == null ? void 0 : k.content,
     (k == null ? void 0 : k.html) && /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: k.html }, style: { padding: 16 } })
   ] });
-  return /* @__PURE__ */ f("div", { className: "dhx", style: { display: "flex", flexDirection: a === "top" ? "column" : a === "bottom" ? "column-reverse" : a === "left" ? "row" : "row-reverse", width: "100%", height: "100%", background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, overflow: "hidden", ...p }, children: [
+  return /* @__PURE__ */ f("div", { className: "dhx", style: { display: "flex", flexDirection: l === "top" ? "column" : l === "bottom" ? "column-reverse" : l === "left" ? "row" : "row-reverse", width: "100%", height: "100%", background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, overflow: "hidden", ...p }, children: [
     N,
     u
   ] });
 }
-function Be({ columns: r, data: a = [], height: g = 400, rowHeight: o = 40, sortable: s = !0, resizable: l = !0, selection: c, multiselect: n, onSelect: p, style: m }) {
+function Be({ columns: r, data: l = [], height: g = 400, rowHeight: o = 40, sortable: s = !0, resizable: a = !0, selection: c, multiselect: n, onSelect: p, style: m }) {
   const [d, h] = z(null), [i, y] = z("asc"), [$, S] = z({}), [v, N] = z(/* @__PURE__ */ new Set()), [k, u] = z(r.map((w) => w.width || w.minWidth || 140));
   T(W, []);
   const x = F(() => {
-    let w = a.filter(
+    let w = l.filter(
       (L) => Object.entries($).every(([E, I]) => !I || String(L[E] ?? "").toLowerCase().includes(I.toLowerCase()))
     );
     return d && (w = [...w].sort((L, E) => {
       const I = L[d], R = E[d];
       return I == null ? 1 : R == null ? -1 : i === "asc" ? I < R ? -1 : I > R ? 1 : 0 : I > R ? -1 : I < R ? 1 : 0;
     })), w;
-  }, [a, d, i, $]), M = (w) => {
+  }, [l, d, i, $]), M = (w) => {
     !s || w.sortable === !1 || (y((L) => d === w.id && L === "asc" ? "desc" : "asc"), h(w.id));
   }, D = (w, L) => {
     if (!c) return;
@@ -293,7 +293,7 @@ function Be({ columns: r, data: a = [], height: g = 400, rowHeight: o = 40, sort
           children: [
             /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: Array.isArray(w.header) ? (E = w.header[0]) == null ? void 0 : E.text : w.header || w.id }),
             s && w.sortable !== !1 && /* @__PURE__ */ t("span", { style: { opacity: d === w.id ? 1 : 0.25, fontSize: 10 }, children: d === w.id ? i === "asc" ? "▲" : "▼" : "⇅" }),
-            l && L < r.length - 1 && /* @__PURE__ */ t(
+            a && L < r.length - 1 && /* @__PURE__ */ t(
               "div",
               {
                 onMouseDown: (I) => b(I, L),
@@ -328,10 +328,10 @@ function Be({ columns: r, data: a = [], height: g = 400, rowHeight: o = 40, sort
   ] }) }) });
 }
 const A = ["#0288d1", "#43a047", "#f57c00", "#e53935", "#8e24aa", "#00838f", "#ef6c00", "#2e7d32"];
-function je({ type: r = "bar", data: a = [], series: g = [], scales: o = {}, legend: s, height: l = 280, style: c }) {
+function je({ type: r = "bar", data: l = [], series: g = [], scales: o = {}, legend: s, height: a = 280, style: c }) {
   var S, v, N, k, u;
   T(W, []);
-  const n = ((S = o.bottom) == null ? void 0 : S.text) || a[0] && Object.keys(a[0])[0] || "x", p = /* @__PURE__ */ t(re, { contentStyle: { fontSize: 12, borderRadius: e.r, border: `1px solid ${e.border}` } }), m = s ? /* @__PURE__ */ t(ne, { iconSize: 10, wrapperStyle: { fontSize: 12 }, verticalAlign: s.valign, align: s.halign }) : null, d = /* @__PURE__ */ t(oe, { strokeDasharray: "3 3", stroke: e.border }), h = /* @__PURE__ */ t(_, { dataKey: n, tick: { fontSize: 11, fill: e.textSec }, axisLine: { stroke: e.border }, tickLine: !1 }), i = /* @__PURE__ */ t(X, { tick: { fontSize: 11, fill: e.textSec }, axisLine: !1, tickLine: !1, domain: [((v = o.left) == null ? void 0 : v.min) ?? "auto", ((N = o.left) == null ? void 0 : N.max) ?? "auto"] }), y = { data: a, margin: { top: 10, right: 20, left: 0, bottom: 0 } };
+  const n = ((S = o.bottom) == null ? void 0 : S.text) || l[0] && Object.keys(l[0])[0] || "x", p = /* @__PURE__ */ t(re, { contentStyle: { fontSize: 12, borderRadius: e.r, border: `1px solid ${e.border}` } }), m = s ? /* @__PURE__ */ t(ne, { iconSize: 10, wrapperStyle: { fontSize: 12 }, verticalAlign: s.valign, align: s.halign }) : null, d = /* @__PURE__ */ t(oe, { strokeDasharray: "3 3", stroke: e.border }), h = /* @__PURE__ */ t(_, { dataKey: n, tick: { fontSize: 11, fill: e.textSec }, axisLine: { stroke: e.border }, tickLine: !1 }), i = /* @__PURE__ */ t(X, { tick: { fontSize: 11, fill: e.textSec }, axisLine: !1, tickLine: !1, domain: [((v = o.left) == null ? void 0 : v.min) ?? "auto", ((N = o.left) == null ? void 0 : N.max) ?? "auto"] }), y = { data: l, margin: { top: 10, right: 20, left: 0, bottom: 0 } };
   let $;
   if (r === "bar")
     $ = /* @__PURE__ */ f(ie, { ...y, children: [
@@ -340,10 +340,10 @@ function je({ type: r = "bar", data: a = [], series: g = [], scales: o = {}, leg
       i,
       p,
       m,
-      g.map((x, M) => /* @__PURE__ */ t(ae, { dataKey: x.value || x.id, name: x.label || x.id, fill: x.fill || A[M % A.length], radius: [3, 3, 0, 0] }, x.id))
+      g.map((x, M) => /* @__PURE__ */ t(le, { dataKey: x.value || x.id, name: x.label || x.id, fill: x.fill || A[M % A.length], radius: [3, 3, 0, 0] }, x.id))
     ] });
   else if (r === "line")
-    $ = /* @__PURE__ */ f(le, { ...y, children: [
+    $ = /* @__PURE__ */ f(ae, { ...y, children: [
       d,
       h,
       i,
@@ -361,12 +361,12 @@ function je({ type: r = "bar", data: a = [], series: g = [], scales: o = {}, leg
       g.map((x, M) => /* @__PURE__ */ t(ce, { type: "monotone", dataKey: x.value || x.id, name: x.label || x.id, stroke: x.color || A[M % A.length], fill: (x.fill || A[M % A.length]) + "33", strokeWidth: 2 }, x.id))
     ] });
   else if (r === "pie" || r === "donut") {
-    const x = a[0] || {}, M = Object.keys(x).find((b) => typeof x[b] == "number") || "value", D = Object.keys(x).find((b) => typeof x[b] == "string") || "x";
+    const x = l[0] || {}, M = Object.keys(x).find((b) => typeof x[b] == "number") || "value", D = Object.keys(x).find((b) => typeof x[b] == "string") || "x";
     $ = /* @__PURE__ */ f(pe, { children: [
       /* @__PURE__ */ t(
         ue,
         {
-          data: a,
+          data: l,
           cx: "50%",
           cy: "50%",
           outerRadius: r === "donut" ? "70%" : "80%",
@@ -376,7 +376,7 @@ function je({ type: r = "bar", data: a = [], series: g = [], scales: o = {}, leg
           label: ({ name: b, percent: C }) => `${b ?? ""} ${((C ?? 0) * 100).toFixed(0)}%`,
           labelLine: !0,
           paddingAngle: 2,
-          children: a.map((b, C) => /* @__PURE__ */ t(he, { fill: A[C % A.length] }, C))
+          children: l.map((b, C) => /* @__PURE__ */ t(he, { fill: A[C % A.length] }, C))
         }
       ),
       p,
@@ -393,20 +393,20 @@ function je({ type: r = "bar", data: a = [], series: g = [], scales: o = {}, leg
     /* @__PURE__ */ t(_, { dataKey: ((k = g[0]) == null ? void 0 : k.xValue) || "x", type: "number", tick: { fontSize: 11, fill: e.textSec } }),
     /* @__PURE__ */ t(X, { dataKey: ((u = g[0]) == null ? void 0 : u.yValue) || "y", tick: { fontSize: 11, fill: e.textSec } }),
     p,
-    g.map((x, M) => /* @__PURE__ */ t(me, { data: x.data || a, name: x.label || x.id, fill: x.color || A[M] }, x.id))
+    g.map((x, M) => /* @__PURE__ */ t(me, { data: x.data || l, name: x.label || x.id, fill: x.color || A[M] }, x.id))
   ] }));
-  return /* @__PURE__ */ t("div", { className: "dhx", style: { width: "100%", height: l, padding: 12, background: e.surface, borderRadius: e.rMd, ...c }, children: /* @__PURE__ */ t(ve, { width: "100%", height: "100%", children: $ }) });
+  return /* @__PURE__ */ t("div", { className: "dhx", style: { width: "100%", height: a, padding: 12, background: e.surface, borderRadius: e.rMd, ...c }, children: /* @__PURE__ */ t(ve, { width: "100%", height: "100%", children: $ }) });
 }
 const Me = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], $e = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-function Ye({ value: r, range: a = !1, timepicker: g = !1, onChange: o, style: s }) {
-  const l = /* @__PURE__ */ new Date(), c = r ? new Date(Array.isArray(r) ? r[0] : r) : l, [n, p] = z(c), [m, d] = z(r ?? (a ? [null, null] : null)), [h, i] = z(null), [y, $] = z({ h: 0, m: 0 });
+function Ye({ value: r, range: l = !1, timepicker: g = !1, onChange: o, style: s }) {
+  const a = /* @__PURE__ */ new Date(), c = r ? new Date(Array.isArray(r) ? r[0] : r) : a, [n, p] = z(c), [m, d] = z(r ?? (l ? [null, null] : null)), [h, i] = z(null), [y, $] = z({ h: 0, m: 0 });
   T(W, []);
   const S = n.getFullYear(), v = n.getMonth(), N = new Date(S, v, 1).getDay(), k = new Date(S, v + 1, 0).getDate(), u = [];
   for (let b = 0; b < N; b++) u.push(null);
   for (let b = 1; b <= k; b++) u.push(new Date(S, v, b));
-  const x = (b) => b.toDateString() === l.toDateString(), M = (b) => {
+  const x = (b) => b.toDateString() === a.toDateString(), M = (b) => {
     if (!m) return !1;
-    if (a && Array.isArray(m)) {
+    if (l && Array.isArray(m)) {
       const [C, w] = m;
       if (!C) return !1;
       const L = b.getTime();
@@ -414,7 +414,7 @@ function Ye({ value: r, range: a = !1, timepicker: g = !1, onChange: o, style: s
     }
     return b.toDateString() === m.toDateString();
   }, D = (b) => {
-    if (a) {
+    if (l) {
       const [C, w] = Array.isArray(m) ? m : [null, null];
       if (!C || w)
         d([b, null]);
@@ -459,19 +459,19 @@ function Ye({ value: r, range: a = !1, timepicker: g = !1, onChange: o, style: s
     ] })
   ] });
 }
-function Oe({ value: r, onChange: a, style: g }) {
-  const [o, s] = z((r == null ? void 0 : r.h) ?? 12), [l, c] = z((r == null ? void 0 : r.m) ?? 0), [n, p] = z((r == null ? void 0 : r.ampm) ?? "AM");
+function Oe({ value: r, onChange: l, style: g }) {
+  const [o, s] = z((r == null ? void 0 : r.h) ?? 12), [a, c] = z((r == null ? void 0 : r.m) ?? 0), [n, p] = z((r == null ? void 0 : r.ampm) ?? "AM");
   T(W, []);
   const m = Array.from({ length: 12 }, (h, i) => i + 1), d = Array.from({ length: 12 }, (h, i) => i * 5);
   return /* @__PURE__ */ f("div", { className: "dhx", style: { background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, padding: 16, display: "inline-block", boxShadow: e.shadow, ...g }, children: [
     /* @__PURE__ */ f("div", { style: { display: "flex", gap: 8, alignItems: "stretch" }, children: [
-      [{ label: "Hours", values: m, val: o, setFn: s }, { label: "Minutes", values: d, val: l, setFn: c }].map(({ label: h, values: i, val: y, setFn: $ }) => /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }, children: [
+      [{ label: "Hours", values: m, val: o, setFn: s }, { label: "Minutes", values: d, val: a, setFn: c }].map(({ label: h, values: i, val: y, setFn: $ }) => /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }, children: [
         /* @__PURE__ */ t("span", { style: { fontSize: 11, fontWeight: 600, color: e.textMut }, children: h }),
         /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { height: 160, overflowY: "auto", width: 48, border: `1px solid ${e.border}`, borderRadius: e.r }, children: i.map((S) => /* @__PURE__ */ t(
           "div",
           {
             onClick: () => {
-              $(S), a == null || a({ h: h === "Hours" ? S : o, m: h === "Minutes" ? S : l, ampm: n });
+              $(S), l == null || l({ h: h === "Hours" ? S : o, m: h === "Minutes" ? S : a, ampm: n });
             },
             style: { height: 32, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 13, fontWeight: y === S ? 700 : 400, background: y === S ? e.primaryLt : "transparent", color: y === S ? e.primary : e.text },
             onMouseEnter: (v) => y !== S && (v.currentTarget.style.background = e.bg),
@@ -487,7 +487,7 @@ function Oe({ value: r, onChange: a, style: g }) {
           "div",
           {
             onClick: () => {
-              p(h), a == null || a({ h: o, m: l, ampm: h });
+              p(h), l == null || l({ h: o, m: a, ampm: h });
             },
             style: { height: 40, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", padding: "0 12px", fontSize: 13, fontWeight: n === h ? 700 : 400, background: n === h ? e.primary : e.surface, color: n === h ? "#fff" : e.text },
             children: h
@@ -499,48 +499,48 @@ function Oe({ value: r, onChange: a, style: g }) {
     /* @__PURE__ */ f("div", { style: { textAlign: "center", marginTop: 12, fontSize: 22, fontWeight: 700, color: e.primary, letterSpacing: 2 }, children: [
       String(o).padStart(2, "0"),
       ":",
-      String(l).padStart(2, "0"),
+      String(a).padStart(2, "0"),
       " ",
       n
     ] })
   ] });
 }
-function Y(r, a) {
+function Y(r, l) {
   T(() => {
     const g = (o) => {
-      r.current && !r.current.contains(o.target) && a(o);
+      r.current && !r.current.contains(o.target) && l(o);
     };
     return document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
-  }, [r, a]);
+  }, [r, l]);
 }
 function ze(r) {
-  const a = B(!1), g = B({ x: 0, y: 0, ox: 0, oy: 0 });
+  const l = B(!1), g = B({ x: 0, y: 0, ox: 0, oy: 0 });
   return H(
-    (o, s = 0, l = 0) => {
-      a.current = !0, g.current = { x: o.clientX, y: o.clientY, ox: s, oy: l };
+    (o, s = 0, a = 0) => {
+      l.current = !0, g.current = { x: o.clientX, y: o.clientY, ox: s, oy: a };
       const c = (p) => {
-        if (!a.current) return;
+        if (!l.current) return;
         const { x: m, y: d, ox: h, oy: i } = g.current;
         r(h + p.clientX - m, i + p.clientY - d);
       }, n = () => {
-        a.current = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", n);
+        l.current = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", n);
       };
       document.addEventListener("mousemove", c), document.addEventListener("mouseup", n), o.preventDefault();
     },
     [r]
   );
 }
-function Ne({ data: r = [], value: a, placeholder: g = "Select or type...", multiselection: o = !1, label: s, onChange: l, style: c }) {
+function Ne({ data: r = [], value: l, placeholder: g = "Select or type...", multiselection: o = !1, label: s, onChange: a, style: c }) {
   var k;
-  const [n, p] = z(!1), [m, d] = z(""), [h, i] = z(o ? a ? [].concat(a) : [] : a || null), y = B(null);
+  const [n, p] = z(!1), [m, d] = z(""), [h, i] = z(o ? l ? [].concat(l) : [] : l || null), y = B(null);
   T(W, []), Y(y, H(() => p(!1), []));
   const $ = F(() => r.filter((u) => !m || u.value.toLowerCase().includes(m.toLowerCase())), [r, m]), S = (u) => o ? (h || []).includes(u) : h === u, v = (u) => {
     const x = u.id || u.value;
     if (o) {
       const M = S(x) ? h.filter((D) => D !== x) : [...h || [], x];
-      i(M), l == null || l(M);
+      i(M), a == null || a(M);
     } else
-      i(x), d(""), p(!1), l == null || l(x);
+      i(x), d(""), p(!1), a == null || a(x);
   }, N = o ? h != null && h.length ? `${h.length} selected` : "" : ((k = r.find((u) => (u.id || u.value) === h)) == null ? void 0 : k.value) || "";
   return /* @__PURE__ */ f("div", { ref: y, className: "dhx", style: { position: "relative", ...c }, children: [
     s && /* @__PURE__ */ t("label", { className: "dhx dhx-label", children: s }),
@@ -593,8 +593,8 @@ function Ne({ data: r = [], value: a, placeholder: g = "Select or type...", mult
     ] })
   ] });
 }
-function Ce({ min: r = 0, max: a = 100, step: g = 1, value: o, range: s = !1, label: l, tick: c, onChange: n, style: p }) {
-  const [m, d] = z(o ?? (s ? [r, a] : r));
+function Ce({ min: r = 0, max: l = 100, step: g = 1, value: o, range: s = !1, label: a, tick: c, onChange: n, style: p }) {
+  const [m, d] = z(o ?? (s ? [r, l] : r));
   T(W, []);
   const h = (S, v) => {
     if (s) {
@@ -602,9 +602,9 @@ function Ce({ min: r = 0, max: a = 100, step: g = 1, value: o, range: s = !1, la
       N[S] = v, d(N), n == null || n(N);
     } else
       d(v), n == null || n(v);
-  }, i = (S) => (S - r) / (a - r) * 100, y = s ? m : [m], $ = s ? { left: `${i(y[0])}%`, width: `${i(y[1]) - i(y[0])}%` } : { left: 0, width: `${i(y[0])}%` };
+  }, i = (S) => (S - r) / (l - r) * 100, y = s ? m : [m], $ = s ? { left: `${i(y[0])}%`, width: `${i(y[1]) - i(y[0])}%` } : { left: 0, width: `${i(y[0])}%` };
   return /* @__PURE__ */ f("div", { className: "dhx", style: { width: "100%", ...p }, children: [
-    l && /* @__PURE__ */ t("label", { className: "dhx dhx-label", children: l }),
+    a && /* @__PURE__ */ t("label", { className: "dhx dhx-label", children: a }),
     /* @__PURE__ */ t("div", { style: { position: "relative", height: 36, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ f("div", { style: { position: "relative", flex: 1, height: 4, background: e.border, borderRadius: 2 }, children: [
       /* @__PURE__ */ t("div", { style: { position: "absolute", ...$, height: "100%", background: e.primary, borderRadius: 2 } }),
       y.map((S, v) => /* @__PURE__ */ t(
@@ -612,7 +612,7 @@ function Ce({ min: r = 0, max: a = 100, step: g = 1, value: o, range: s = !1, la
         {
           type: "range",
           min: r,
-          max: a,
+          max: l,
           step: g,
           value: S,
           onChange: (N) => {
@@ -625,33 +625,33 @@ function Ce({ min: r = 0, max: a = 100, step: g = 1, value: o, range: s = !1, la
       )),
       y.map((S, v) => /* @__PURE__ */ t("div", { style: { position: "absolute", left: `${i(S)}%`, top: "50%", transform: "translate(-50%, -50%)", width: 16, height: 16, borderRadius: "50%", background: e.surface, border: `2px solid ${e.primary}`, boxShadow: "0 1px 4px rgba(0,0,0,.2)", pointerEvents: "none" }, children: /* @__PURE__ */ t("div", { style: { position: "absolute", bottom: "calc(100% + 6px)", left: "50%", transform: "translateX(-50%)", background: e.primaryDk, color: "#fff", padding: "2px 6px", borderRadius: e.r, fontSize: 11, fontWeight: 700, whiteSpace: "nowrap" }, children: S }) }, v))
     ] }) }),
-    c && /* @__PURE__ */ t("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 2 }, children: [r, Math.round((a + r) / 2), a].map((S) => /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: S }, S)) })
+    c && /* @__PURE__ */ t("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 2 }, children: [r, Math.round((l + r) / 2), l].map((S) => /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: S }, S)) })
   ] });
 }
 const Le = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b", "#9e9e9e", "#000000", "#ffffff", "#0288d1", "#01579b", "#43a047", "#e53935", "#f57c00"];
 function P(r) {
-  const a = parseInt(r.slice(1, 3), 16) / 255, g = parseInt(r.slice(3, 5), 16) / 255, o = parseInt(r.slice(5, 7), 16) / 255, s = Math.max(a, g, o), l = Math.min(a, g, o);
+  const l = parseInt(r.slice(1, 3), 16) / 255, g = parseInt(r.slice(3, 5), 16) / 255, o = parseInt(r.slice(5, 7), 16) / 255, s = Math.max(l, g, o), a = Math.min(l, g, o);
   let c = 0, n = 0;
-  const p = (s + l) / 2;
-  if (s !== l) {
-    const m = s - l;
-    n = p > 0.5 ? m / (2 - s - l) : m / (s + l), c = s === a ? ((g - o) / m + (g < o ? 6 : 0)) / 6 : s === g ? ((o - a) / m + 2) / 6 : ((a - g) / m + 4) / 6;
+  const p = (s + a) / 2;
+  if (s !== a) {
+    const m = s - a;
+    n = p > 0.5 ? m / (2 - s - a) : m / (s + a), c = s === l ? ((g - o) / m + (g < o ? 6 : 0)) / 6 : s === g ? ((o - l) / m + 2) / 6 : ((l - g) / m + 4) / 6;
   }
   return [Math.round(c * 360), Math.round(n * 100), Math.round(p * 100)];
 }
-function q(r, a, g) {
-  a /= 100, g /= 100;
-  const o = a * Math.min(g, 1 - g), s = (l) => {
-    const c = (l + r / 30) % 12, n = g - o * Math.max(Math.min(c - 3, 9 - c, 1), -1);
+function q(r, l, g) {
+  l /= 100, g /= 100;
+  const o = l * Math.min(g, 1 - g), s = (a) => {
+    const c = (a + r / 30) % 12, n = g - o * Math.max(Math.min(c - 3, 9 - c, 1), -1);
     return Math.round(255 * n).toString(16).padStart(2, "0");
   };
   return "#" + s(0) + s(8) + s(4);
 }
-function Pe({ value: r = "#0288d1", onChange: a, style: g }) {
-  const [o, s] = z(() => P(r)), l = q(...o);
+function Pe({ value: r = "#0288d1", onChange: l, style: g }) {
+  const [o, s] = z(() => P(r)), a = q(...o);
   T(W, []);
   const c = (n) => {
-    s(n), a == null || a(q(...n));
+    s(n), l == null || l(q(...n));
   };
   return /* @__PURE__ */ f("div", { className: "dhx", style: { background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, padding: 16, display: "inline-block", boxShadow: e.shadow, ...g }, children: [
     /* @__PURE__ */ t("div", { style: { width: 200, height: 120, borderRadius: e.r, marginBottom: 12, background: `linear-gradient(to bottom, transparent, black), linear-gradient(to right, white, hsl(${o[0]},100%,50%))`, cursor: "crosshair" } }),
@@ -666,16 +666,16 @@ function Pe({ value: r = "#0288d1", onChange: a, style: g }) {
       }, style: { width: "100%", accentColor: e.primary } })
     ] }, n)),
     /* @__PURE__ */ f("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }, children: [
-      /* @__PURE__ */ t("div", { style: { width: 36, height: 36, borderRadius: e.r, background: l, border: `1px solid ${e.border}`, flexShrink: 0 } }),
+      /* @__PURE__ */ t("div", { style: { width: 36, height: 36, borderRadius: e.r, background: a, border: `1px solid ${e.border}`, flexShrink: 0 } }),
       /* @__PURE__ */ t(
         "input",
         {
           className: "dhx dhx-input",
           style: { flex: 1, fontFamily: "monospace", fontSize: 12 },
-          value: l,
+          value: a,
           onChange: (n) => {
             try {
-              c(P(n.target.value)), a == null || a(n.target.value);
+              c(P(n.target.value)), l == null || l(n.target.value);
             } catch {
             }
           }
@@ -686,9 +686,9 @@ function Pe({ value: r = "#0288d1", onChange: a, style: g }) {
       "div",
       {
         onClick: () => {
-          s(P(n)), a == null || a(n);
+          s(P(n)), l == null || l(n);
         },
-        style: { width: 14, height: 14, borderRadius: 2, background: n, cursor: "pointer", border: l === n ? `2px solid ${e.text}` : "1px solid rgba(0,0,0,.15)", transition: "transform .1s" },
+        style: { width: 14, height: 14, borderRadius: 2, background: n, cursor: "pointer", border: a === n ? `2px solid ${e.text}` : "1px solid rgba(0,0,0,.15)", transition: "transform .1s" },
         onMouseEnter: (p) => p.currentTarget.style.transform = "scale(1.3)",
         onMouseLeave: (p) => p.currentTarget.style.transform = "scale(1)"
       },
@@ -696,11 +696,11 @@ function Pe({ value: r = "#0288d1", onChange: a, style: g }) {
     )) })
   ] });
 }
-function O({ items: r, onSelect: a, style: g }) {
+function O({ items: r, onSelect: l, style: g }) {
   const [o, s] = z(null);
-  return /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: { position: "absolute", top: "calc(100% + 4px)", left: 0, minWidth: 180, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, boxShadow: e.shadowLg, zIndex: 200, padding: "4px 0", ...g }, children: r.map((l, c) => {
+  return /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: { position: "absolute", top: "calc(100% + 4px)", left: 0, minWidth: 180, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, boxShadow: e.shadowLg, zIndex: 200, padding: "4px 0", ...g }, children: r.map((a, c) => {
     var p, m;
-    if (l.type === "separator") return /* @__PURE__ */ t("div", { style: { height: 1, background: e.border, margin: "4px 0" } }, c);
+    if (a.type === "separator") return /* @__PURE__ */ t("div", { style: { height: 1, background: e.border, margin: "4px 0" } }, c);
     const n = o === c;
     return /* @__PURE__ */ f("div", { style: { position: "relative" }, onMouseEnter: () => s(c), onMouseLeave: () => s(null), children: [
       /* @__PURE__ */ f(
@@ -708,50 +708,50 @@ function O({ items: r, onSelect: a, style: g }) {
         {
           onClick: () => {
             var d;
-            return !l.disabled && !((d = l.items) != null && d.length) && a(l);
+            return !a.disabled && !((d = a.items) != null && d.length) && l(a);
           },
-          style: { display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", cursor: l.disabled ? "not-allowed" : "pointer", fontSize: 13, color: l.disabled ? e.textMut : e.text, background: n && !l.disabled ? e.bg : "transparent", opacity: l.disabled ? 0.5 : 1 },
+          style: { display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", cursor: a.disabled ? "not-allowed" : "pointer", fontSize: 13, color: a.disabled ? e.textMut : e.text, background: n && !a.disabled ? e.bg : "transparent", opacity: a.disabled ? 0.5 : 1 },
           children: [
-            l.icon && /* @__PURE__ */ t("span", { style: { fontSize: 15, width: 18, textAlign: "center" }, children: l.icon }),
-            /* @__PURE__ */ t("span", { style: { flex: 1 }, children: l.value || l.id }),
-            l.hotkey && /* @__PURE__ */ t("span", { style: { fontSize: 11, color: e.textMut }, children: l.hotkey }),
-            (p = l.items) != null && p.length ? /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: "▶" }) : null
+            a.icon && /* @__PURE__ */ t("span", { style: { fontSize: 15, width: 18, textAlign: "center" }, children: a.icon }),
+            /* @__PURE__ */ t("span", { style: { flex: 1 }, children: a.value || a.id }),
+            a.hotkey && /* @__PURE__ */ t("span", { style: { fontSize: 11, color: e.textMut }, children: a.hotkey }),
+            (p = a.items) != null && p.length ? /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: "▶" }) : null
           ]
         }
       ),
-      n && ((m = l.items) != null && m.length) ? /* @__PURE__ */ t(O, { items: l.items, onSelect: a, style: { position: "absolute", left: "100%", top: -4 } }) : null
-    ] }, l.id || c);
+      n && ((m = a.items) != null && m.length) ? /* @__PURE__ */ t(O, { items: a.items, onSelect: l, style: { position: "absolute", left: "100%", top: -4 } }) : null
+    ] }, a.id || c);
   }) });
 }
-function Fe({ items: r = [], label: a = "Menu", onSelect: g, style: o }) {
-  const [s, l] = z(!1), c = B(null);
-  return T(W, []), Y(c, H(() => l(!1), [])), /* @__PURE__ */ f("div", { ref: c, className: "dhx", style: { position: "relative", display: "inline-block", ...o }, children: [
-    /* @__PURE__ */ f("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: () => l((n) => !n), children: [
-      a,
+function Fe({ items: r = [], label: l = "Menu", onSelect: g, style: o }) {
+  const [s, a] = z(!1), c = B(null);
+  return T(W, []), Y(c, H(() => a(!1), [])), /* @__PURE__ */ f("div", { ref: c, className: "dhx", style: { position: "relative", display: "inline-block", ...o }, children: [
+    /* @__PURE__ */ f("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: () => a((n) => !n), children: [
+      l,
       " ",
       /* @__PURE__ */ t("span", { style: { fontSize: 10 }, children: s ? "▲" : "▼" })
     ] }),
     s && /* @__PURE__ */ t(O, { items: r, onSelect: (n) => {
-      g == null || g(n), l(!1);
+      g == null || g(n), a(!1);
     } })
   ] });
 }
-function Ke({ items: r = [], onSelect: a, children: g }) {
-  const [o, s] = z(null), l = B(null);
-  return T(W, []), Y(l, H(() => s(null), [])), /* @__PURE__ */ f("div", { ref: l, onContextMenu: (n) => {
+function Ke({ items: r = [], onSelect: l, children: g }) {
+  const [o, s] = z(null), a = B(null);
+  return T(W, []), Y(a, H(() => s(null), [])), /* @__PURE__ */ f("div", { ref: a, onContextMenu: (n) => {
     n.preventDefault(), s({ x: n.clientX, y: n.clientY });
   }, style: { position: "relative", display: "contents" }, children: [
     g,
     o && /* @__PURE__ */ t("div", { style: { position: "fixed", left: o.x, top: o.y, zIndex: 9999 }, children: /* @__PURE__ */ t(O, { items: r, onSelect: (n) => {
-      a == null || a(n), s(null);
+      l == null || l(n), s(null);
     } }) })
   ] });
 }
-function _e({ trigger: r, children: a, placement: g = "bottom-start", style: o }) {
-  const [s, l] = z(!1), [c, n] = z({ top: "100%", left: 0 }), p = B(null), m = B(null);
-  return T(W, []), Y(p, H(() => l(!1), [])), /* @__PURE__ */ f("div", { ref: p, className: "dhx", style: { position: "relative", display: "inline-block" }, children: [
+function _e({ trigger: r, children: l, placement: g = "bottom-start", style: o }) {
+  const [s, a] = z(!1), [c, n] = z({ top: "100%", left: 0 }), p = B(null), m = B(null);
+  return T(W, []), Y(p, H(() => a(!1), [])), /* @__PURE__ */ f("div", { ref: p, className: "dhx", style: { position: "relative", display: "inline-block" }, children: [
     /* @__PURE__ */ t("div", { ref: m, onClick: () => {
-      l((h) => {
+      a((h) => {
         if (!h && m.current) {
           const i = m.current.getBoundingClientRect(), y = {
             "bottom-start": { top: i.height + 4, left: 0 },
@@ -763,19 +763,19 @@ function _e({ trigger: r, children: a, placement: g = "bottom-start", style: o }
         return !h;
       });
     }, children: r }),
-    s && /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: { position: "absolute", ...c, zIndex: 200, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, boxShadow: e.shadowLg, ...o }, children: a })
+    s && /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: { position: "absolute", ...c, zIndex: 200, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, boxShadow: e.shadowLg, ...o }, children: l })
   ] });
 }
-function Xe({ title: r, children: a, width: g = 480, height: o, closable: s = !0, movable: l = !0, modal: c = !1, defaultOpen: n = !0, footer: p, onClose: m, style: d }) {
+function Xe({ title: r, children: l, width: g = 480, height: o, closable: s = !0, movable: a = !0, modal: c = !1, defaultOpen: n = !0, footer: p, onClose: m, style: d }) {
   const [h, i] = z(n), [y, $] = z({ x: 0, y: 0 });
   T(W, []);
-  const S = ze(H((N, k) => l && $({ x: N, y: k }), [l])), v = () => {
+  const S = ze(H((N, k) => a && $({ x: N, y: k }), [a])), v = () => {
     i(!1), m == null || m();
   };
   return h ? /* @__PURE__ */ f(Z, { children: [
     c && /* @__PURE__ */ t("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,.45)", zIndex: 900 }, onClick: s ? v : void 0 }),
     /* @__PURE__ */ f("div", { className: "dhx", style: { position: c ? "fixed" : "absolute", left: c ? "50%" : `calc(50% + ${y.x}px)`, top: c ? "50%" : `calc(50% + ${y.y}px)`, transform: `translate(calc(-50% + ${y.x}px), calc(-50% + ${y.y}px))`, width: g, ...o ? { height: o } : {}, background: e.surface, borderRadius: e.rMd, boxShadow: e.shadowLg, zIndex: 901, display: "flex", flexDirection: "column", overflow: "hidden", ...d }, children: [
-      /* @__PURE__ */ f("div", { onMouseDown: (N) => S(N, y.x, y.y), style: { display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: `1px solid ${e.border}`, cursor: l ? "grab" : "default", background: e.bg, gap: 8, userSelect: "none" }, children: [
+      /* @__PURE__ */ f("div", { onMouseDown: (N) => S(N, y.x, y.y), style: { display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: `1px solid ${e.border}`, cursor: a ? "grab" : "default", background: e.bg, gap: 8, userSelect: "none" }, children: [
         /* @__PURE__ */ t("span", { style: { flex: 1, fontWeight: 700, fontSize: 15 }, children: r }),
         s && /* @__PURE__ */ t(
           "button",
@@ -788,26 +788,26 @@ function Xe({ title: r, children: a, width: g = 480, height: o, closable: s = !0
           }
         )
       ] }),
-      /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { flex: 1, padding: 20, overflowY: "auto" }, children: a }),
+      /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { flex: 1, minHeight: 0, padding: 20, overflowY: "auto" }, children: l }),
       p && /* @__PURE__ */ t("div", { style: { padding: "12px 16px", borderTop: `1px solid ${e.border}`, display: "flex", justifyContent: "flex-end", gap: 8, background: e.bg }, children: p })
     ] })
   ] }) : null;
 }
 const J = ee(null), De = { success: "✓", error: "✕", warning: "⚠", info: "ℹ" }, G = { success: e.success, error: e.danger, warning: e.warning, info: e.primary };
 function Ve({ children: r }) {
-  const [a, g] = z([]);
+  const [l, g] = z([]);
   T(W, []);
   const o = H((c) => g((n) => n.filter((p) => p.id !== c)), []), s = H((c) => {
     const n = Date.now();
     return g((p) => [...p, { id: n, ...c }]), c.duration !== 0 && setTimeout(() => o(n), c.duration || 4e3), n;
-  }, [o]), l = {
+  }, [o]), a = {
     message: s,
     alert: (c, n) => s({ type: "info", title: c, ...n }),
     confirm: (c, n, p) => s({ type: "warning", title: c, confirm: n, ...p })
   };
-  return /* @__PURE__ */ f(J.Provider, { value: l, children: [
+  return /* @__PURE__ */ f(J.Provider, { value: a, children: [
     r,
-    /* @__PURE__ */ t("div", { style: { position: "fixed", top: 20, right: 20, zIndex: 9999, display: "flex", flexDirection: "column", gap: 8, pointerEvents: "none" }, children: a.map((c) => {
+    /* @__PURE__ */ t("div", { style: { position: "fixed", top: 20, right: 20, zIndex: 9999, display: "flex", flexDirection: "column", gap: 8, pointerEvents: "none" }, children: l.map((c) => {
       const n = c.type || "info";
       return /* @__PURE__ */ f("div", { style: { background: e.surface, border: `1px solid ${e.border}`, borderLeft: `4px solid ${G[n]}`, borderRadius: e.r, boxShadow: e.shadowLg, padding: "12px 16px", minWidth: 280, maxWidth: 380, pointerEvents: "all", display: "flex", gap: 10, alignItems: "flex-start", animation: "dhx-toast .3s ease" }, children: [
         /* @__PURE__ */ t("span", { style: { fontSize: 18, color: G[n], lineHeight: 1 }, children: De[n] }),
@@ -833,7 +833,7 @@ function qe() {
   if (!r) throw new Error("useMessage must be used inside <MessageProvider>");
   return r;
 }
-function Ge({ data: r = [], template: a, keyNavigation: g = !0, multiselection: o = !1, editable: s = !1, height: l = 400, onSelect: c, onEdit: n, style: p }) {
+function Ge({ data: r = [], template: l, keyNavigation: g = !0, multiselection: o = !1, editable: s = !1, height: a = 400, onSelect: c, onEdit: n, style: p }) {
   const [m, d] = z(/* @__PURE__ */ new Set()), [h, i] = z(null), [y, $] = z(""), [S, v] = z(null);
   T(W, []);
   const N = (u, x) => {
@@ -849,7 +849,7 @@ function Ge({ data: r = [], template: a, keyNavigation: g = !0, multiselection:
     "div",
     {
       className: "dhx dhx-scroll",
-      style: { height: l, overflowY: "auto", border: `1px solid ${e.border}`, borderRadius: e.r, background: e.surface, ...p },
+      style: { height: a, overflowY: "auto", border: `1px solid ${e.border}`, borderRadius: e.r, background: e.surface, ...p },
       tabIndex: 0,
       onKeyDown: (u) => {
         g && (u.key === "ArrowDown" && v((x) => Math.min((x ?? -1) + 1, r.length - 1)), u.key === "ArrowUp" && v((x) => Math.max((x ?? 1) - 1, 0)));
@@ -877,7 +877,7 @@ function Ge({ data: r = [], template: a, keyNavigation: g = !0, multiselection:
                   },
                   onClick: (C) => C.stopPropagation()
                 }
-              ) : a ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: a(u) }, style: { flex: 1 } }) : /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: String(u.value ?? "") })
+              ) : l ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: l(u) }, style: { flex: 1 } }) : /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: String(u.value ?? "") })
             },
             String(M)
           );
@@ -887,7 +887,7 @@ function Ge({ data: r = [], template: a, keyNavigation: g = !0, multiselection:
     }
   );
 }
-function Je({ data: r = [], template: a, itemsInRow: g = 3, gap: o = 12, multiselection: s = !1, onSelect: l, style: c }) {
+function Je({ data: r = [], template: l, itemsInRow: g = 3, gap: o = 12, multiselection: s = !1, onSelect: a, style: c }) {
   const [n, p] = z(/* @__PURE__ */ new Set());
   T(W, []);
   const m = (d) => {
@@ -895,7 +895,7 @@ function Je({ data: r = [], template: a, itemsInRow: g = 3, gap: o = 12, multise
     p((i) => {
       const y = s ? new Set(i) : /* @__PURE__ */ new Set();
       return y.has(h) ? y.delete(h) : y.add(h), y;
-    }), l == null || l(d);
+    }), a == null || a(d);
   };
   return /* @__PURE__ */ t("div", { className: "dhx", style: { display: "grid", gridTemplateColumns: `repeat(${g}, 1fr)`, gap: o, padding: o, ...c }, children: r.map((d, h) => {
     const i = d.id ?? h, y = n.has(i);
@@ -910,7 +910,7 @@ function Je({ data: r = [], template: a, itemsInRow: g = 3, gap: o = 12, multise
         onMouseLeave: ($) => {
           $.currentTarget.style.boxShadow = y ? `0 0 0 3px ${e.primary}33` : e.shadow, $.currentTarget.style.transform = y ? "translateY(-2px)" : "none";
         },
-        children: a ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: a(d) } }) : /* @__PURE__ */ f("div", { style: { padding: 16 }, children: [
+        children: l ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: l(d) } }) : /* @__PURE__ */ f("div", { style: { padding: 16 }, children: [
           d.img && /* @__PURE__ */ t("img", { src: d.img, alt: d.title || "", style: { width: "100%", borderRadius: e.r, marginBottom: 8, display: "block" } }),
           /* @__PURE__ */ t("div", { style: { fontWeight: 600, fontSize: 14, marginBottom: 4 }, children: d.title || d.value }),
           d.subtitle && /* @__PURE__ */ t("div", { style: { fontSize: 12, color: e.textSec }, children: d.subtitle })
@@ -920,7 +920,7 @@ function Je({ data: r = [], template: a, itemsInRow: g = 3, gap: o = 12, multise
     );
   }) });
 }
-function Ue({ data: r = [], checkbox: a = !1, editable: g = !1, onSelect: o, onCheck: s, style: l }) {
+function Ue({ data: r = [], checkbox: l = !1, editable: g = !1, onSelect: o, onCheck: s, style: a }) {
   const [c, n] = z({}), [p, m] = z(null), [d, h] = z({}), [i, y] = z(null), [$, S] = z("");
   T(W, []);
   const v = (u) => n((x) => ({ ...x, [u]: !x[u] })), N = (u, x) => {
@@ -944,7 +944,7 @@ function Ue({ data: r = [], checkbox: a = !1, editable: g = !1, onSelect: o, onC
           children: [
             /* @__PURE__ */ t("span", { style: { width: 16, textAlign: "center", fontSize: 11, color: e.textMut, flexShrink: 0 }, children: M ? D ? "▾" : "▸" : "" }),
             /* @__PURE__ */ t("span", { style: { fontSize: 15, flexShrink: 0 }, children: M ? D ? "📂" : "📁" : "📄" }),
-            a && /* @__PURE__ */ t("input", { type: "checkbox", checked: !!d[u.id], onChange: (w) => {
+            l && /* @__PURE__ */ t("input", { type: "checkbox", checked: !!d[u.id], onChange: (w) => {
               w.stopPropagation(), N(u.id, w.target.checked);
             }, style: { cursor: "pointer", accentColor: e.primary }, onClick: (w) => w.stopPropagation() }),
             i === u.id ? /* @__PURE__ */ t("input", { autoFocus: !0, className: "dhx dhx-input", style: { height: 24, fontSize: 12, flex: 1 }, value: $, onChange: (w) => S(w.target.value), onBlur: () => y(null), onKeyDown: (w) => w.key === "Enter" && y(null), onClick: (w) => w.stopPropagation() }) : /* @__PURE__ */ t("span", { style: { flex: 1 }, children: u.value }),
@@ -959,37 +959,37 @@ function Ue({ data: r = [], checkbox: a = !1, editable: g = !1, onSelect: o, onC
       M && D && /* @__PURE__ */ t("div", { children: u.items.map((w) => k(w, x + 1)) })
     ] }, u.id);
   };
-  return /* @__PURE__ */ t("div", { className: "dhx dhx-scroll", style: { overflowY: "auto", ...l }, children: r.map((u) => k(u)) });
+  return /* @__PURE__ */ t("div", { className: "dhx dhx-scroll", style: { overflowY: "auto", ...a }, children: r.map((u) => k(u)) });
 }
-function Qe({ total: r, pageSize: a = 10, page: g, onChange: o, style: s }) {
-  const [l, c] = z(g || 1), n = Math.ceil(r / a);
+function Qe({ total: r, pageSize: l = 10, page: g, onChange: o, style: s }) {
+  const [a, c] = z(g || 1), n = Math.ceil(r / l);
   T(W, []);
   const p = (d) => {
     const h = Math.min(Math.max(1, d), n);
     c(h), o == null || o(h);
   }, m = F(() => {
     const d = [];
-    for (let i = Math.max(1, l - 2); i <= Math.min(n, l + 2); i++) d.push(i);
+    for (let i = Math.max(1, a - 2); i <= Math.min(n, a + 2); i++) d.push(i);
     return d[0] > 1 && (d[0] > 2 && d.unshift("..."), d.unshift(1)), d[d.length - 1] < n && (d[d.length - 1] < n - 1 && d.push("..."), d.push(n)), d;
-  }, [l, n]);
+  }, [a, n]);
   return /* @__PURE__ */ f("div", { className: "dhx", style: { display: "flex", alignItems: "center", gap: 4, padding: "8px 12px", ...s }, children: [
     /* @__PURE__ */ f("span", { style: { fontSize: 12, color: e.textSec, marginRight: 8 }, children: [
-      (l - 1) * a + 1,
+      (a - 1) * l + 1,
       "–",
-      Math.min(l * a, r),
+      Math.min(a * l, r),
       " of ",
       r
     ] }),
-    [["«", 1], ["‹", l - 1]].map(([d, h]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: l === 1, onClick: () => p(h), children: d }, d)),
-    m.map((d, h) => /* @__PURE__ */ t("button", { onClick: () => typeof d == "number" && p(d), className: `dhx dhx-btn ${d === l ? "dhx-btn-primary" : "dhx-btn-ghost"}`, style: { height: 30, minWidth: 30, padding: "0 8px", fontSize: 13 }, disabled: d === "...", children: d }, h)),
-    [["›", l + 1], ["»", n]].map(([d, h]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: l === n, onClick: () => p(h), children: d }, d))
+    [["«", 1], ["‹", a - 1]].map(([d, h]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: a === 1, onClick: () => p(h), children: d }, d)),
+    m.map((d, h) => /* @__PURE__ */ t("button", { onClick: () => typeof d == "number" && p(d), className: `dhx dhx-btn ${d === a ? "dhx-btn-primary" : "dhx-btn-ghost"}`, style: { height: 30, minWidth: 30, padding: "0 8px", fontSize: 13 }, disabled: d === "...", children: d }, h)),
+    [["›", a + 1], ["»", n]].map(([d, h]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: a === n, onClick: () => p(h), children: d }, d))
   ] });
 }
-function Ze({ config: r = {}, defaultValues: a = {}, onSubmit: g, style: o }) {
-  const [s, l] = z(a), [c, n] = z({});
+function Ze({ config: r = {}, defaultValues: l = {}, onSubmit: g, style: o }) {
+  const [s, a] = z(l), [c, n] = z({});
   T(W, []);
   const p = (i, y) => {
-    l(($) => ({ ...$, [i]: y })), n(($) => ({ ...$, [i]: null }));
+    a(($) => ({ ...$, [i]: y })), n(($) => ({ ...$, [i]: null }));
   }, m = () => {
     const i = {};
     return (r.rows || []).flat().forEach((y) => {
@@ -1055,17 +1055,17 @@ function Ze({ config: r = {}, defaultValues: a = {}, onSubmit: g, style: o }) {
     (r.buttons || g) && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 8, justifyContent: r.buttonAlign || "flex-start", marginTop: 8 }, children: [
       /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-primary", onClick: () => m() && (g == null ? void 0 : g(s)), children: r.submitText || "Submit" }),
       r.resetButton !== !1 && /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: () => {
-        l(a), n({});
+        a(l), n({});
       }, children: r.resetText || "Reset" })
     ] })
   ] });
 }
-function et({ items: r = [], onAction: a, style: g }) {
+function et({ items: r = [], onAction: l, style: g }) {
   T(W, []);
-  const o = (s, l) => {
+  const o = (s, a) => {
     var p, m;
     if ("type" in s && (s.type === "separator" || s.type === "sep"))
-      return /* @__PURE__ */ t("div", { style: { width: 1, background: e.border, margin: "8px 4px", alignSelf: "stretch" } }, l);
+      return /* @__PURE__ */ t("div", { style: { width: 1, background: e.border, margin: "8px 4px", alignSelf: "stretch" } }, a);
     if ("type" in s && s.type === "input")
       return /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "4px 6px", gap: 4 }, children: [
         s.label && /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: s.label }),
@@ -1073,20 +1073,20 @@ function et({ items: r = [], onAction: a, style: g }) {
           var h;
           return (h = s.onChange) == null ? void 0 : h.call(s, d.target.value);
         } })
-      ] }, l);
+      ] }, a);
     if ("type" in s && s.type === "block") {
       const d = s;
       return /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: d.direction === "col" ? "column" : "row", alignItems: "center", gap: 4, padding: "4px 8px", borderRight: `1px solid ${e.border}`, minHeight: 64 }, children: [
         /* @__PURE__ */ t("div", { style: { display: "flex", gap: 2 }, children: (p = d.items) == null ? void 0 : p.map((h, i) => o(h, i)) }),
         d.label && /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut, marginTop: 2 }, children: d.label })
-      ] }, l);
+      ] }, a);
     }
     if ("type" in s && s.type === "selectButton") {
       const d = s;
       return /* @__PURE__ */ t("select", { className: "dhx dhx-input", style: { height: 28, fontSize: 12, cursor: "pointer", margin: 2 }, defaultValue: d.value, onChange: (h) => {
         var i;
         return (i = d.onChange) == null ? void 0 : i.call(d, h.target.value);
-      }, children: (m = d.items) == null ? void 0 : m.map((h) => /* @__PURE__ */ t("option", { value: h.value, children: h.value }, h.value)) }, l);
+      }, children: (m = d.items) == null ? void 0 : m.map((h) => /* @__PURE__ */ t("option", { value: h.value, children: h.value }, h.value)) }, a);
     }
     const c = s, n = c.active;
     return /* @__PURE__ */ f(
@@ -1098,32 +1098,32 @@ function et({ items: r = [], onAction: a, style: g }) {
         disabled: c.disabled,
         onClick: () => {
           var d;
-          (d = c.onClick) == null || d.call(c, c), c.id && (a == null || a(c.id, c));
+          (d = c.onClick) == null || d.call(c, c), c.id && (l == null || l(c.id, c));
         },
         children: [
           c.icon && /* @__PURE__ */ t("span", { style: { fontSize: c.size === "large" ? 24 : 18 }, children: c.icon }),
           c.text && /* @__PURE__ */ t("span", { style: { fontSize: 10, maxWidth: 60, textAlign: "center", lineHeight: 1.2, whiteSpace: "normal" }, children: c.text })
         ]
       },
-      l
+      a
     );
   };
   return /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", alignItems: "stretch", background: e.bg, borderBottom: `1px solid ${e.border}`, padding: "4px 0", overflowX: "auto", gap: 0, ...g }, children: r.map(o) });
 }
-function tt({ logo: r, items: a = [], vertical: g = !1, style: o }) {
-  const [s, l] = z(null), c = B(null);
-  T(W, []), Y(c, H(() => l(null), []));
+function tt({ logo: r, items: l = [], vertical: g = !1, style: o }) {
+  const [s, a] = z(null), c = B(null);
+  T(W, []), Y(c, H(() => a(null), []));
   const n = (p, m) => {
     var d;
-    return p.type === "separator" ? /* @__PURE__ */ t("div", { style: { [g ? "height" : "width"]: 1, background: "rgba(255,255,255,.25)", margin: g ? "4px 8px" : "0 6px", alignSelf: "stretch" } }, m) : p.type === "spacer" ? /* @__PURE__ */ t("div", { style: { flex: 1 } }, m) : p.type === "input" ? /* @__PURE__ */ t("input", { className: "dhx dhx-input", style: { width: p.width || 200, height: 28, margin: "0 4px" }, placeholder: p.placeholder }, m) : p.type === "menuItem" && ((d = p.items) != null && d.length) ? /* @__PURE__ */ f("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ f("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 36, color: "#fff" }, onClick: () => l(s === m ? null : m), children: [
+    return p.type === "separator" ? /* @__PURE__ */ t("div", { style: { [g ? "height" : "width"]: 1, background: e.border, margin: g ? "4px 8px" : "0 6px", alignSelf: "stretch" } }, m) : p.type === "spacer" ? /* @__PURE__ */ t("div", { style: { flex: 1 } }, m) : p.type === "input" ? /* @__PURE__ */ t("input", { className: "dhx dhx-input", style: { width: p.width || 200, height: 28, margin: "0 4px" }, placeholder: p.placeholder }, m) : p.type === "menuItem" && ((d = p.items) != null && d.length) ? /* @__PURE__ */ f("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ f("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 36, color: e.text }, onClick: () => a(s === m ? null : m), children: [
         p.icon && /* @__PURE__ */ t("span", { children: p.icon }),
         p.value,
         " ",
         /* @__PURE__ */ t("span", { style: { fontSize: 9 }, children: "▼" })
       ] }),
-      s === m && /* @__PURE__ */ t(O, { items: p.items, onSelect: () => l(null), style: { top: "100%" } })
-    ] }, m) : /* @__PURE__ */ f("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 36, gap: 6, color: "#fff" }, onClick: () => {
+      s === m && /* @__PURE__ */ t(O, { items: p.items, onSelect: () => a(null), style: { top: "100%" } })
+    ] }, m) : /* @__PURE__ */ f("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 36, gap: 6, color: e.text }, onClick: () => {
       var h;
       return (h = p.onClick) == null ? void 0 : h.call(p);
     }, children: [
@@ -1131,9 +1131,9 @@ function tt({ logo: r, items: a = [], vertical: g = !1, style: o }) {
       p.value && /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: p.value })
     ] }, m);
   };
-  return /* @__PURE__ */ f("nav", { ref: c, className: "dhx", style: { display: "flex", flexDirection: g ? "column" : "row", alignItems: g ? "stretch" : "center", background: e.primary, padding: g ? "12px 0" : "0 12px", minHeight: g ? void 0 : 48, gap: 2, ...o }, children: [
-    r && /* @__PURE__ */ t("div", { style: { color: "#fff", fontWeight: 800, fontSize: 16, padding: g ? "8px 16px" : "0 12px 0 4px", borderRight: g ? "none" : "1px solid rgba(255,255,255,.25)", marginRight: g ? 0 : 8 }, children: r }),
-    a.map(n)
+  return /* @__PURE__ */ f("nav", { ref: c, className: "dhx", style: { display: "flex", flexDirection: g ? "column" : "row", alignItems: g ? "stretch" : "center", background: e.surface, borderBottom: g ? "none" : `1px solid ${e.border}`, borderRight: g ? `1px solid ${e.border}` : "none", padding: g ? "12px 0" : "0 12px", minHeight: g ? void 0 : 48, gap: 2, ...o }, children: [
+    r && /* @__PURE__ */ t("div", { style: { color: e.text, fontWeight: 800, fontSize: 16, padding: g ? "8px 16px" : "0 12px 0 4px", borderRight: g ? "none" : `1px solid ${e.border}`, marginRight: g ? 0 : 8 }, children: r }),
+    l.map(n)
   ] });
 }
 export {