dhx-react-suite 1.1.6 → 1.1.8

package/dist/dhx-react-suite.js

@@ -1,6 +1,6 @@
-import { jsxs as g, jsx as t, Fragment as Ne } from "react/jsx-runtime";
-import { useEffect as K, useRef as U, useCallback as Z, useState as T, useMemo as ue, createContext as Pe, useContext as je } from "react";
-import { Tooltip as Oe, Legend as Ye, CartesianGrid as Fe, XAxis as Se, YAxis as we, BarChart as Ke, Bar as Ve, LineChart as _e, Line as Xe, AreaChart as qe, Area as Ge, PieChart as Je, Pie as Ue, Cell as Qe, RadarChart as Ze, PolarGrid as et, PolarAngleAxis as tt, PolarRadiusAxis as nt, Radar as rt, ScatterChart as ot, Scatter as it, ResponsiveContainer as lt, Treemap as st } from "recharts";
+import { jsxs as g, jsx as t, Fragment as Ye } from "react/jsx-runtime";
+import { useEffect as _, useRef as oe, useCallback as ae, useState as N, useMemo as ue, createContext as Qe, useContext as Ze } from "react";
+import { Tooltip as et, Legend as tt, CartesianGrid as nt, XAxis as Ee, YAxis as Re, BarChart as rt, Bar as ot, LineChart as it, Line as lt, AreaChart as st, Area as at, PieChart as dt, Pie as ct, Cell as ut, RadarChart as pt, PolarGrid as ht, PolarAngleAxis as ft, PolarRadiusAxis as xt, Radar as gt, ScatterChart as yt, Scatter as bt, ResponsiveContainer as mt, Treemap as vt } from "recharts";
 const e = {
   primary: "#0288d1",
   primaryDk: "#01579b",
@@ -20,11 +20,11 @@ const e = {
   r: "4px",
   rMd: "8px",
   font: "'Segoe UI', system-ui, -apple-system, sans-serif"
-}, ze = "dhx-react-styles";
-function _() {
-  if (typeof document > "u" || document.getElementById(ze)) return;
+}, We = "dhx-react-styles";
+function q() {
+  if (typeof document > "u" || document.getElementById(We)) return;
   const n = document.createElement("style");
-  n.id = ze, n.textContent = `
+  n.id = We, n.textContent = `
     *,*::before,*::after{box-sizing:border-box}
     .dhx{font-family:${e.font};font-size:14px;color:${e.text}}
     .dhx *{box-sizing:border-box}
@@ -66,112 +66,112 @@ function _() {
     .dhx-tag-warning{background:#fff3e0;color:#e65100}
   `, document.head.appendChild(n);
 }
-const at = {
+const kt = {
   sm: { height: 24, padding: "0 8px", fontSize: 12 },
   md: {},
   lg: { height: 38, padding: "0 18px", fontSize: 14 }
 };
-function Mt({
+function _t({
   children: n,
-  variant: i = "primary",
-  size: p = "md",
-  icon: s,
+  variant: o = "primary",
+  size: d = "md",
+  icon: l,
   disabled: f,
   onClick: a,
   style: h,
-  className: d = ""
+  className: u = ""
 }) {
-  return K(_, []), /* @__PURE__ */ g(
+  return _(q, []), /* @__PURE__ */ g(
     "button",
     {
-      className: `dhx dhx-btn dhx-btn-${i} ${d}`,
-      style: { ...at[p], ...h },
+      className: `dhx dhx-btn dhx-btn-${o} ${u}`,
+      style: { ...kt[d], ...h },
       disabled: f,
       onClick: a,
       children: [
-        s && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: s }),
+        l && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: l }),
         n
       ]
     }
   );
 }
-function he(n, i) {
-  K(() => {
-    const p = (s) => {
-      n.current && !n.current.contains(s.target) && i(s);
+function ge(n, o) {
+  _(() => {
+    const d = (l) => {
+      n.current && !n.current.contains(l.target) && o(l);
     };
-    return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
-  }, [n, i]);
+    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
+  }, [n, o]);
 }
-function dt(n) {
-  const i = U(!1), p = U({ x: 0, y: 0, ox: 0, oy: 0 });
-  return Z(
-    (s, f = 0, a = 0) => {
-      i.current = !0, p.current = { x: s.clientX, y: s.clientY, ox: f, oy: a };
-      const h = (y) => {
-        if (!i.current) return;
-        const { x: w, y: r, ox: l, oy: c } = p.current;
-        n(l + y.clientX - w, c + y.clientY - r);
-      }, d = () => {
-        i.current = !1, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", d);
+function St(n) {
+  const o = oe(!1), d = oe({ x: 0, y: 0, ox: 0, oy: 0 });
+  return ae(
+    (l, f = 0, a = 0) => {
+      o.current = !0, d.current = { x: l.clientX, y: l.clientY, ox: f, oy: a };
+      const h = (x) => {
+        if (!o.current) return;
+        const { x: w, y: r, ox: i, oy: c } = d.current;
+        n(i + x.clientX - w, c + x.clientY - r);
+      }, u = () => {
+        o.current = !1, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", u);
       };
-      document.addEventListener("mousemove", h), document.addEventListener("mouseup", d), s.preventDefault();
+      document.addEventListener("mousemove", h), document.addEventListener("mouseup", u), l.preventDefault();
     },
     [n]
   );
 }
-function fe({ items: n, onSelect: i, style: p }) {
-  const [s, f] = T(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", ...p }, children: n.map((a, h) => {
-    var y, w;
+function be({ items: n, onSelect: o, style: d }) {
+  const [l, f] = N(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", ...d }, children: n.map((a, h) => {
+    var x, w;
     if (a.type === "separator") return /* @__PURE__ */ t("div", { style: { height: 1, background: e.border, margin: "4px 0" } }, h);
-    const d = s === h;
+    const u = l === h;
     return /* @__PURE__ */ g("div", { style: { position: "relative" }, onMouseEnter: () => f(h), onMouseLeave: () => f(null), children: [
       /* @__PURE__ */ g(
         "div",
         {
           onClick: () => {
             var r;
-            return !a.disabled && !((r = a.items) != null && r.length) && i(a);
+            return !a.disabled && !((r = a.items) != null && r.length) && o(a);
           },
-          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: d && !a.disabled ? e.bg : "transparent", opacity: a.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: u && !a.disabled ? e.bg : "transparent", opacity: a.disabled ? 0.5 : 1 },
           children: [
             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 }),
-            (y = a.items) != null && y.length ? /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: "▶" }) : null
+            (x = a.items) != null && x.length ? /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: "▶" }) : null
           ]
         }
       ),
-      d && ((w = a.items) != null && w.length) ? /* @__PURE__ */ t(fe, { items: a.items, onSelect: i, style: { position: "absolute", left: "100%", top: -4 } }) : null
+      u && ((w = a.items) != null && w.length) ? /* @__PURE__ */ t(be, { items: a.items, onSelect: o, style: { position: "absolute", left: "100%", top: -4 } }) : null
     ] }, a.id || h);
   }) });
 }
-function $t({ items: n = [], label: i = "Menu", onSelect: p, style: s }) {
-  const [f, a] = T(!1), h = U(null);
-  return K(_, []), he(h, Z(() => a(!1), [])), /* @__PURE__ */ g("div", { ref: h, className: "dhx", style: { position: "relative", display: "inline-block", ...s }, children: [
-    /* @__PURE__ */ g("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: () => a((d) => !d), children: [
-      i,
+function Vt({ items: n = [], label: o = "Menu", onSelect: d, style: l }) {
+  const [f, a] = N(!1), h = oe(null);
+  return _(q, []), ge(h, ae(() => a(!1), [])), /* @__PURE__ */ g("div", { ref: h, className: "dhx", style: { position: "relative", display: "inline-block", ...l }, children: [
+    /* @__PURE__ */ g("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: () => a((u) => !u), children: [
+      o,
       " ",
       /* @__PURE__ */ t("span", { style: { fontSize: 10 }, children: f ? "▲" : "▼" })
     ] }),
-    f && /* @__PURE__ */ t(fe, { items: n, onSelect: (d) => {
-      p == null || p(d), a(!1);
+    f && /* @__PURE__ */ t(be, { items: n, onSelect: (u) => {
+      d == null || d(u), a(!1);
     } })
   ] });
 }
-function Dt({ items: n = [], onSelect: i, children: p }) {
-  const [s, f] = T(null), a = U(null);
-  return K(_, []), he(a, Z(() => f(null), [])), /* @__PURE__ */ g("div", { ref: a, onContextMenu: (d) => {
-    d.preventDefault(), f({ x: d.clientX, y: d.clientY });
+function Xt({ items: n = [], onSelect: o, children: d }) {
+  const [l, f] = N(null), a = oe(null);
+  return _(q, []), ge(a, ae(() => f(null), [])), /* @__PURE__ */ g("div", { ref: a, onContextMenu: (u) => {
+    u.preventDefault(), f({ x: u.clientX, y: u.clientY });
   }, style: { position: "relative", display: "contents" }, children: [
-    p,
-    s && /* @__PURE__ */ t("div", { style: { position: "fixed", left: s.x, top: s.y, zIndex: 9999 }, children: /* @__PURE__ */ t(fe, { items: n, onSelect: (d) => {
-      i == null || i(d), f(null);
+    d,
+    l && /* @__PURE__ */ t("div", { style: { position: "fixed", left: l.x, top: l.y, zIndex: 9999 }, children: /* @__PURE__ */ t(be, { items: n, onSelect: (u) => {
+      o == null || o(u), f(null);
     } }) })
   ] });
 }
-function Me({ count: n }) {
+function Ae({ count: n }) {
   return /* @__PURE__ */ t("span", { style: {
     position: "absolute",
     top: 2,
@@ -191,33 +191,33 @@ function Me({ count: n }) {
     pointerEvents: "none"
   }, children: n });
 }
-function Ct({ items: n = [], onAction: i, style: p }) {
-  const [s, f] = T(null), [a, h] = T(() => {
+function qt({ items: n = [], onAction: o, style: d }) {
+  const [l, f] = N(null), [a, h] = N(() => {
     const r = {};
-    return n.forEach((l) => {
-      l.id && (l.twoState || l.group) && l.active && (r[l.id] = !0);
+    return n.forEach((i) => {
+      i.id && (i.twoState || i.group) && i.active && (r[i.id] = !0);
     }), r;
-  }), d = U(null);
-  K(_, []), he(d, Z(() => f(null), []));
-  const y = (r, l) => {
-    var c, b;
+  }), u = oe(null);
+  _(q, []), ge(u, ae(() => f(null), []));
+  const x = (r, i) => {
+    var c, m;
     if (!r.disabled) {
       if (r.twoState && r.id && h((S) => ({ ...S, [r.id]: !S[r.id] })), r.group && r.id && h((S) => {
-        const o = { ...S };
-        return n.forEach((x) => {
-          x.group === r.group && x.id && (o[x.id] = !1);
-        }), o[r.id] = !0, o;
+        const s = { ...S };
+        return n.forEach((b) => {
+          b.group === r.group && b.id && (s[b.id] = !1);
+        }), s[r.id] = !0, s;
       }), (c = r.items) != null && c.length) {
-        f((S) => S === l ? null : l);
+        f((S) => S === i ? null : i);
         return;
       }
-      (b = r.onClick) == null || b.call(r, r.id || ""), i == null || i(r.id || "");
+      (m = r.onClick) == null || m.call(r, r.id || ""), o == null || o(r.id || "");
     }
-  }, w = (r, l) => {
-    var o, x;
+  }, w = (r, i) => {
+    var s, b;
     if (r.hidden) return null;
-    if (r.type === "separator") return /* @__PURE__ */ t("div", { style: { width: 1, background: e.border, margin: "6px 4px", alignSelf: "stretch" } }, l);
-    if (r.type === "spacer") return /* @__PURE__ */ t("div", { style: { flex: 1 } }, l);
+    if (r.type === "separator") return /* @__PURE__ */ t("div", { style: { width: 1, background: e.border, margin: "6px 4px", alignSelf: "stretch" } }, i);
+    if (r.type === "spacer") return /* @__PURE__ */ t("div", { style: { flex: 1 } }, i);
     if (r.type === "input") return /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
       r.label && /* @__PURE__ */ t("span", { style: { fontSize: 12, color: e.textSec, fontWeight: 500 }, children: r.label }),
       /* @__PURE__ */ g("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
@@ -229,14 +229,14 @@ function Ct({ items: n = [], onAction: i, style: p }) {
             style: { width: r.width || 140, height: 28, paddingLeft: r.icon ? 30 : void 0 },
             placeholder: r.placeholder,
             defaultValue: r.value,
-            onChange: (k) => {
-              var $;
-              return ($ = r.onChange) == null ? void 0 : $.call(r, k.target.value);
+            onChange: (M) => {
+              var D;
+              return (D = r.onChange) == null ? void 0 : D.call(r, M.target.value);
             }
           }
         )
       ] })
-    ] }, l);
+    ] }, i);
     if (r.type === "select") return /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
       r.label && /* @__PURE__ */ t("span", { style: { fontSize: 12, color: e.textSec, fontWeight: 500 }, children: r.label }),
       /* @__PURE__ */ t(
@@ -245,14 +245,14 @@ function Ct({ items: n = [], onAction: i, style: p }) {
           className: "dhx dhx-input",
           style: { width: r.width || 100, height: 28, cursor: "pointer" },
           defaultValue: r.value,
-          onChange: (k) => {
-            var $;
-            return ($ = r.onChange) == null ? void 0 : $.call(r, k.target.value);
+          onChange: (M) => {
+            var D;
+            return (D = r.onChange) == null ? void 0 : D.call(r, M.target.value);
           },
-          children: (o = r.options) == null ? void 0 : o.map((k) => /* @__PURE__ */ t("option", { value: k.value, children: k.label }, k.value))
+          children: (s = r.options) == null ? void 0 : s.map((M) => /* @__PURE__ */ t("option", { value: M.value, children: M.label }, M.value))
         }
       )
-    ] }, l);
+    ] }, i);
     if (r.type === "imageButton") return /* @__PURE__ */ g(
       "button",
       {
@@ -270,15 +270,15 @@ function Ct({ items: n = [], onAction: i, style: p }) {
           background: "transparent",
           flexShrink: 0
         },
-        onClick: () => y(r, l),
+        onClick: () => x(r, i),
         children: [
           r.src && /* @__PURE__ */ t("img", { src: r.src, alt: r.value || "", style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" } }),
-          r.count !== void 0 && /* @__PURE__ */ t(Me, { count: r.count })
+          r.count !== void 0 && /* @__PURE__ */ t(Ae, { count: r.count })
         ]
       },
-      l
+      i
     );
-    const c = !!(r.id && a[r.id]), b = r.value ?? r.text, S = !!((x = r.items) != null && x.length);
+    const c = !!(r.id && a[r.id]), m = r.value ?? r.text, S = !!((b = r.items) != null && b.length);
     return /* @__PURE__ */ g("div", { style: { position: "relative" }, children: [
       /* @__PURE__ */ g(
         "button",
@@ -295,29 +295,29 @@ function Ct({ items: n = [], onAction: i, style: p }) {
             opacity: r.disabled ? 0.55 : 1,
             cursor: r.disabled ? "not-allowed" : "pointer"
           },
-          onClick: () => y(r, l),
+          onClick: () => x(r, i),
           children: [
             r.icon && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: r.icon }),
-            b && /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: b }),
+            m && /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: m }),
             S && /* @__PURE__ */ t("span", { style: { fontSize: 9, opacity: 0.55, marginLeft: 2 }, children: "▼" }),
-            r.count !== void 0 && /* @__PURE__ */ t(Me, { count: r.count })
+            r.count !== void 0 && /* @__PURE__ */ t(Ae, { count: r.count })
           ]
         }
       ),
-      S && s === l && /* @__PURE__ */ t(
-        fe,
+      S && l === i && /* @__PURE__ */ t(
+        be,
         {
           items: r.items,
           onSelect: () => f(null),
           style: { top: "100%", left: 0 }
         }
       )
-    ] }, l);
+    ] }, i);
   };
   return /* @__PURE__ */ t(
     "div",
     {
-      ref: d,
+      ref: u,
       className: "dhx",
       style: {
         display: "flex",
@@ -328,52 +328,264 @@ function Ct({ items: n = [], onAction: i, style: p }) {
         borderBottom: `1px solid ${e.border}`,
         minHeight: 44,
         flexWrap: "wrap",
-        ...p
+        ...d
       },
       children: n.map(w)
     }
   );
 }
-function It({ items: n = [], width: i = 240, collapsed: p, onSelect: s, header: f, footer: a, style: h }) {
-  const [d, y] = T(p ?? !1), [w, r] = T(null), [l, c] = T({});
-  K(_, []);
-  const b = d ? 56 : i, S = (x) => {
-    r(x.id), s == null || s(x);
-  }, o = (x, k = 0) => {
-    var M;
-    if (x.type === "separator") return /* @__PURE__ */ t("div", { style: { height: 1, background: e.border, margin: "6px 8px" } }, x.id);
-    if (x.type === "customHTML") return /* @__PURE__ */ t("div", { style: { padding: "8px 12px" }, dangerouslySetInnerHTML: { __html: x.html || "" } }, x.id);
-    const $ = (((M = x.items) == null ? void 0 : M.length) ?? 0) > 0, L = l[x.id], m = w === x.id;
-    return /* @__PURE__ */ g("div", { children: [
+function wt(n) {
+  return n === "primary" ? e.primary : n === "success" ? "#43a047" : n === "secondary" ? "#9e9e9e" : "#e53935";
+}
+function zt(n, o) {
+  const d = [], l = (f) => {
+    var a;
+    f.id && f.group === o && d.push(f.id), (a = f.items) == null || a.forEach(l);
+  };
+  return n.forEach(l), d;
+}
+function Mt(n) {
+  const o = {}, d = (l) => {
+    var f;
+    l.id && l.twoState && l.active && (o[l.id] = !0), (f = l.items) == null || f.forEach(d);
+  };
+  return n.forEach(d), o;
+}
+function Gt({
+  items: n = [],
+  width: o = 240,
+  minWidth: d = 64,
+  header: l,
+  footer: f,
+  collapsed: a,
+  defaultCollapsed: h,
+  selected: u,
+  defaultSelected: x,
+  onSelect: w,
+  onCollapse: r,
+  onExpand: i,
+  onBeforeCollapse: c,
+  onBeforeExpand: m,
+  onToggleItem: S,
+  style: s
+}) {
+  const b = a !== void 0, M = u !== void 0, [D, R] = N(h ?? !1), [z, C] = N(x ?? null), [F, p] = N({}), [I, W] = N(() => Mt(n));
+  _(q, []);
+  const v = b ? a : D, X = M ? u ?? null : z, J = v ? d : o, se = () => {
+    if (v) {
+      if ((m == null ? void 0 : m()) === !1) return;
+      b || R(!1), i == null || i();
+    } else {
+      if ((c == null ? void 0 : c()) === !1) return;
+      b || R(!0), r == null || r();
+    }
+  }, U = (k) => {
+    M || C(k.id ?? null), w == null || w(k), k.id && k.onClick && k.onClick(k.id);
+  }, ie = (k) => {
+    if (!k.id) return;
+    const P = !I[k.id];
+    let O = { ...I, [k.id]: P };
+    k.group && P && zt(n, k.group).forEach((G) => {
+      G !== k.id && (O[G] = !1);
+    }), W(O), S == null || S(k.id, P);
+  }, E = (k, P) => {
+    if (k.count === void 0) return null;
+    const O = wt(k.countColor), G = k.count > 99 ? "99+" : String(k.count);
+    return P ? /* @__PURE__ */ t("span", { style: {
+      position: "absolute",
+      top: 1,
+      right: 1,
+      background: O,
+      color: "#fff",
+      borderRadius: 8,
+      fontSize: 9,
+      fontWeight: 700,
+      padding: "0 3px",
+      minWidth: 14,
+      textAlign: "center",
+      lineHeight: "14px",
+      pointerEvents: "none"
+    }, children: G }) : /* @__PURE__ */ t("span", { style: {
+      background: O,
+      color: "#fff",
+      borderRadius: 10,
+      padding: "1px 6px",
+      fontSize: 11,
+      fontWeight: 700,
+      flexShrink: 0
+    }, children: G });
+  }, $ = (k, P, O) => {
+    var ce;
+    if (k.hidden) return null;
+    const G = k.id ?? `${k.type ?? "navItem"}-${P}-${O}`, K = k.type ?? "navItem";
+    if (K === "separator") return /* @__PURE__ */ t("div", { style: { height: 1, background: e.border, margin: "6px 8px", flexShrink: 0 } }, G);
+    if (K === "spacer") return /* @__PURE__ */ t("div", { style: { flex: 1 } }, G);
+    if (K === "title")
+      return v ? null : /* @__PURE__ */ t("div", { style: {
+        padding: "10px 14px 4px",
+        fontSize: 10,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: 1,
+        color: e.textMut,
+        flexShrink: 0
+      }, children: k.value }, G);
+    if (K === "customHTML") return /* @__PURE__ */ t(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: k.html ?? "" },
+        style: { padding: "8px 12px", flexShrink: 0 }
+      },
+      G
+    );
+    const V = (((ce = k.items) == null ? void 0 : ce.length) ?? 0) > 0, Q = !!F[k.id ?? ""], Z = k.twoState ? !!I[k.id ?? ""] : !1, ne = !k.twoState && X === k.id || Z, H = !!k.disabled, de = v ? 0 : 12 + P * 16, me = () => {
+      H || (k.twoState ? (ie(k), U(k)) : (V && p((le) => ({ ...le, [k.id ?? ""]: !le[k.id ?? ""] })), U(k)));
+    };
+    return /* @__PURE__ */ g("div", { style: { flexShrink: 0 }, children: [
       /* @__PURE__ */ g(
         "div",
         {
-          onClick: () => {
-            $ && c((A) => ({ ...A, [x.id]: !A[x.id] })), S(x);
+          title: k.tooltip,
+          onClick: me,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: v ? 0 : 8,
+            justifyContent: v ? "center" : "flex-start",
+            paddingTop: 8,
+            paddingBottom: 8,
+            paddingLeft: v ? 0 : de,
+            paddingRight: v ? 0 : 10,
+            borderRadius: e.r,
+            margin: "1px 6px",
+            cursor: H ? "not-allowed" : "pointer",
+            userSelect: "none",
+            transition: "background .15s",
+            background: ne ? e.primaryLt : "transparent",
+            color: H ? e.textMut : ne ? e.primary : e.text,
+            opacity: H ? 0.55 : 1
+          },
+          onMouseEnter: (le) => {
+            !ne && !H && (le.currentTarget.style.background = e.bg);
+          },
+          onMouseLeave: (le) => {
+            !ne && !H && (le.currentTarget.style.background = "transparent");
           },
-          style: { display: "flex", alignItems: "center", gap: 10, padding: `8px ${d ? "0px" : `${12 + k * 16}px`}`, cursor: "pointer", borderRadius: e.r, margin: "1px 6px", justifyContent: d ? "center" : "flex-start", transition: "all .15s", background: m ? e.primaryLt : "transparent", color: m ? e.primary : e.text, userSelect: "none" },
-          onMouseEnter: (A) => !m && (A.currentTarget.style.background = e.bg),
-          onMouseLeave: (A) => !m && (A.currentTarget.style.background = "transparent"),
           children: [
-            x.icon && /* @__PURE__ */ t("span", { style: { fontSize: 18, minWidth: 22, textAlign: "center" }, children: x.icon }),
-            !d && /* @__PURE__ */ t("span", { style: { flex: 1, fontSize: 13, fontWeight: m ? 600 : 400 }, children: x.value }),
-            !d && x.count !== void 0 && /* @__PURE__ */ t("span", { style: { background: e.primary, color: "#fff", borderRadius: 10, padding: "1px 6px", fontSize: 11, fontWeight: 700 }, children: x.count }),
-            !d && $ && /* @__PURE__ */ t("span", { style: { fontSize: 12, color: e.textMut, transition: "transform .15s", transform: L ? "rotate(90deg)" : "rotate(0deg)" }, children: "▶" })
+            /* @__PURE__ */ g("span", { style: {
+              position: "relative",
+              minWidth: 22,
+              textAlign: "center",
+              fontSize: 18,
+              flexShrink: 0,
+              lineHeight: 1
+            }, children: [
+              k.icon ?? (k.value && !k.icon, null),
+              v && E(k, !0)
+            ] }),
+            !v && /* @__PURE__ */ t("span", { style: {
+              flex: 1,
+              fontSize: 13,
+              fontWeight: ne ? 600 : 400,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }, children: k.value }),
+            !v && E(k, !1),
+            !v && k.twoState && /* @__PURE__ */ t("span", { style: {
+              width: 14,
+              height: 14,
+              borderRadius: 2,
+              border: `2px solid ${ne ? e.primary : e.borderDk}`,
+              background: ne ? e.primary : "transparent",
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }, children: ne && /* @__PURE__ */ t("span", { style: { color: "#fff", fontSize: 8, fontWeight: 700, lineHeight: 1 }, children: "✓" }) }),
+            !v && V && !k.twoState && /* @__PURE__ */ t("span", { style: {
+              fontSize: 11,
+              color: e.textMut,
+              flexShrink: 0,
+              transition: "transform .2s",
+              transform: Q ? "rotate(90deg)" : "rotate(0deg)",
+              display: "inline-block"
+            }, children: "▶" })
           ]
         }
       ),
-      $ && L && !d && x.items.map((A) => o(A, k + 1))
-    ] }, x.id);
-  };
-  return /* @__PURE__ */ g("div", { className: "dhx", style: { width: b, minWidth: b, background: e.surface, borderRight: `1px solid ${e.border}`, display: "flex", flexDirection: "column", transition: "width .2s ease", overflow: "hidden", ...h }, children: [
-    f && !d && /* @__PURE__ */ t("div", { style: { padding: "12px 14px", borderBottom: `1px solid ${e.border}`, fontWeight: 700, fontSize: 15 }, children: f }),
-    /* @__PURE__ */ t("button", { onClick: () => y((x) => !x), style: { margin: "8px 6px", background: "transparent", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: d ? "center" : "flex-end", padding: "4px 6px", borderRadius: e.r, color: e.textSec }, children: /* @__PURE__ */ t("span", { style: { fontSize: 18 }, children: d ? "☰" : "✕" }) }),
-    /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { flex: 1, overflowY: "auto", overflowX: "hidden" }, children: n.map((x) => o(x)) }),
-    a && !d && /* @__PURE__ */ t("div", { style: { padding: "10px 14px", borderTop: `1px solid ${e.border}` }, children: a })
-  ] });
+      V && Q && !v && /* @__PURE__ */ t("div", { children: k.items.map((le, ye) => $(le, P + 1, ye)) })
+    ] }, G);
+  }, j = /* @__PURE__ */ g(
+    "div",
+    {
+      onClick: se,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: v ? "center" : "flex-start",
+        gap: 8,
+        padding: v ? "8px 0" : "8px 14px",
+        margin: "4px 6px",
+        borderRadius: e.r,
+        cursor: "pointer",
+        color: e.textMut,
+        fontSize: 13,
+        userSelect: "none",
+        transition: "background .15s",
+        flexShrink: 0
+      },
+      onMouseEnter: (k) => k.currentTarget.style.background = e.bg,
+      onMouseLeave: (k) => k.currentTarget.style.background = "transparent",
+      children: [
+        /* @__PURE__ */ t("span", { style: { fontSize: 16, fontWeight: 700, lineHeight: 1 }, children: v ? "›" : "‹" }),
+        !v && /* @__PURE__ */ t("span", { children: "Collapse" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: "dhx",
+      style: {
+        width: J,
+        minWidth: J,
+        background: e.surface,
+        borderRight: `1px solid ${e.border}`,
+        display: "flex",
+        flexDirection: "column",
+        transition: "width .2s ease, min-width .2s ease",
+        overflow: "hidden",
+        ...s
+      },
+      children: [
+        l && /* @__PURE__ */ t("div", { style: {
+          padding: v ? "12px 0" : "12px 14px",
+          borderBottom: `1px solid ${e.border}`,
+          fontWeight: 700,
+          fontSize: 15,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: v ? "center" : "flex-start",
+          overflow: "hidden",
+          flexShrink: 0
+        }, children: l }),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: "dhx-scroll",
+            style: { flex: 1, overflowY: "auto", overflowX: "hidden", display: "flex", flexDirection: "column" },
+            children: n.map((k, P) => $(k, 0, P))
+          }
+        ),
+        j,
+        f && !v && /* @__PURE__ */ t("div", { style: { padding: "10px 14px", borderTop: `1px solid ${e.border}`, flexShrink: 0 }, children: f })
+      ]
+    }
+  );
 }
-function ct({ config: n }) {
-  const [i, p] = T(!1), s = {
+function $t({ config: n }) {
+  const [o, d] = N(!1), l = {
     position: "relative",
     background: e.surface,
     border: `1px solid ${e.border}`,
@@ -381,550 +593,728 @@ function ct({ config: n }) {
     overflow: "hidden",
     ...n.width ? { width: n.width, minWidth: n.width } : { flex: 1 },
     ...n.height ? { height: n.height, minHeight: n.height } : { minHeight: 40 },
-    ...i ? { flex: "0 0 auto" } : {}
+    ...o ? { flex: "0 0 auto" } : {}
   };
-  return /* @__PURE__ */ g("div", { style: s, children: [
+  return /* @__PURE__ */ g("div", { style: l, children: [
     n.header && /* @__PURE__ */ g("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: n.header }),
-      n.collapsable && /* @__PURE__ */ t("button", { onClick: () => p((f) => !f), style: { background: "none", border: "none", cursor: "pointer", color: e.textMut, fontSize: 16, lineHeight: 1 }, children: i ? "▼" : "▲" })
+      n.collapsable && /* @__PURE__ */ t("button", { onClick: () => d((f) => !f), style: { background: "none", border: "none", cursor: "pointer", color: e.textMut, fontSize: 16, lineHeight: 1 }, children: o ? "▼" : "▲" })
     ] }),
-    !i && /* @__PURE__ */ g("div", { style: { padding: n.padding || 0, height: n.header ? "calc(100% - 33px)" : "100%", overflow: "auto" }, children: [
+    !o && /* @__PURE__ */ g("div", { style: { padding: n.padding || 0, height: n.header ? "calc(100% - 33px)" : "100%", overflow: "auto" }, children: [
       n.html ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: n.html } }) : n.content,
-      (n.rows || n.cols) && /* @__PURE__ */ t(pt, { rows: n.rows, cols: n.cols, style: { height: "100%" } })
+      (n.rows || n.cols) && /* @__PURE__ */ t(Dt, { rows: n.rows, cols: n.cols, style: { height: "100%" } })
     ] })
   ] });
 }
-function pt({ rows: n, cols: i, type: p = "line", style: s, children: f }) {
-  K(_, []);
-  const a = p === "space" ? 12 : p === "wide" ? 8 : 1, h = n || i, d = !!n;
-  return h ? /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", flexDirection: d ? "column" : "row", gap: a, width: "100%", height: "100%", ...s }, children: h.map((y, w) => /* @__PURE__ */ t(ct, { config: y }, y.id || w)) }) : /* @__PURE__ */ t("div", { className: "dhx", style: { width: "100%", height: "100%", ...s }, children: f });
+function Dt({ rows: n, cols: o, type: d = "line", style: l, children: f }) {
+  _(q, []);
+  const a = d === "space" ? 12 : d === "wide" ? 8 : 1, h = n || o, u = !!n;
+  return h ? /* @__PURE__ */ t("div", { className: "dhx", style: { display: "flex", flexDirection: u ? "column" : "row", gap: a, width: "100%", height: "100%", ...l }, children: h.map((x, w) => /* @__PURE__ */ t($t, { config: x }, x.id || w)) }) : /* @__PURE__ */ t("div", { className: "dhx", style: { width: "100%", height: "100%", ...l }, children: f });
 }
-function Lt({ views: n = [], mode: i = "top", tabAlign: p = "left", closable: s = [], disabled: f = [], defaultActive: a, onBeforeChange: h, onChange: d, style: y }) {
-  var m;
-  const [w, r] = T(a || ((m = n[0]) == null ? void 0 : m.id)), [l, c] = T(n.map((M) => M.id));
-  K(_, []);
-  const b = (M, A) => {
-    M.stopPropagation(), c((u) => u.filter((I) => I !== A)), w === A && r(l.find((u) => u !== A) ?? "");
-  }, S = (M) => {
-    f.includes(M) || h && h(M) === !1 || (r(M), d == null || d(M));
-  }, o = i === "left" || i === "right", x = n.filter((M) => l.includes(M.id)), k = /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: o ? "column" : "row", justifyContent: p === "center" ? "center" : p === "right" ? "flex-end" : "flex-start", background: e.surface, borderBottom: !o && i !== "bottom" ? `2px solid ${e.border}` : "none", borderTop: i === "bottom" ? `2px solid ${e.border}` : "none", borderRight: i === "left" ? `2px solid ${e.border}` : "none", borderLeft: i === "right" ? `2px solid ${e.border}` : "none", overflowX: "auto", flexShrink: 0 }, children: x.map((M) => {
-    const A = w === M.id, u = f.includes(M.id), I = i === "bottom" ? { borderTop: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 } : o ? { color: e.primary, fontWeight: 600, background: e.primaryLt, [i === "left" ? "borderRight" : "borderLeft"]: `2px solid ${e.primary}` } : { borderBottom: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 };
+function Jt({ views: n = [], mode: o = "top", tabAlign: d = "left", closable: l = [], disabled: f = [], defaultActive: a, onBeforeChange: h, onChange: u, style: x }) {
+  var z;
+  const [w, r] = N(a || ((z = n[0]) == null ? void 0 : z.id)), [i, c] = N(n.map((C) => C.id));
+  _(q, []);
+  const m = (C, F) => {
+    C.stopPropagation(), c((p) => p.filter((I) => I !== F)), w === F && r(i.find((p) => p !== F) ?? "");
+  }, S = (C) => {
+    f.includes(C) || h && h(C) === !1 || (r(C), u == null || u(C));
+  }, s = o === "left" || o === "right", b = n.filter((C) => i.includes(C.id)), M = /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: s ? "column" : "row", justifyContent: d === "center" ? "center" : d === "right" ? "flex-end" : "flex-start", background: e.surface, borderBottom: !s && o !== "bottom" ? `2px solid ${e.border}` : "none", borderTop: o === "bottom" ? `2px solid ${e.border}` : "none", borderRight: o === "left" ? `2px solid ${e.border}` : "none", borderLeft: o === "right" ? `2px solid ${e.border}` : "none", overflowX: "auto", flexShrink: 0 }, children: b.map((C) => {
+    const F = w === C.id, p = f.includes(C.id), I = o === "bottom" ? { borderTop: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 } : s ? { color: e.primary, fontWeight: 600, background: e.primaryLt, [o === "left" ? "borderRight" : "borderLeft"]: `2px solid ${e.primary}` } : { borderBottom: `2px solid ${e.primary}`, color: e.primary, fontWeight: 600 };
     return /* @__PURE__ */ g(
       "div",
       {
-        onClick: () => S(M.id),
-        style: { display: "flex", alignItems: "center", gap: 6, padding: "10px 16px", cursor: u ? "not-allowed" : "pointer", whiteSpace: "nowrap", fontSize: 13, transition: "color .15s", userSelect: "none", minWidth: o ? 120 : "auto", ...A ? I : { color: u ? e.textMut : e.textSec } },
+        onClick: () => S(C.id),
+        style: { display: "flex", alignItems: "center", gap: 6, padding: "10px 16px", cursor: p ? "not-allowed" : "pointer", whiteSpace: "nowrap", fontSize: 13, transition: "color .15s", userSelect: "none", minWidth: s ? 120 : "auto", ...F ? I : { color: p ? e.textMut : e.textSec } },
         children: [
-          M.icon && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: M.icon }),
-          /* @__PURE__ */ t("span", { children: M.tab }),
-          s.includes(M.id) && /* @__PURE__ */ t("span", { onClick: (R) => b(R, M.id), style: { marginLeft: 4, opacity: 0.6, fontSize: 12, cursor: "pointer" }, children: "✕" })
+          C.icon && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: C.icon }),
+          /* @__PURE__ */ t("span", { children: C.tab }),
+          l.includes(C.id) && /* @__PURE__ */ t("span", { onClick: (W) => m(W, C.id), style: { marginLeft: 4, opacity: 0.6, fontSize: 12, cursor: "pointer" }, children: "✕" })
         ]
       },
-      M.id
+      C.id
     );
-  }) }), $ = x.find((M) => M.id === w), L = /* @__PURE__ */ g("div", { className: "dhx-scroll", style: { flex: 1, overflow: "auto" }, children: [
-    $ == null ? void 0 : $.content,
-    ($ == null ? void 0 : $.html) && /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: $.html }, style: { padding: 16 } })
+  }) }), D = b.find((C) => C.id === w), R = /* @__PURE__ */ g("div", { className: "dhx-scroll", style: { flex: 1, overflow: "auto" }, children: [
+    D == null ? void 0 : D.content,
+    (D == null ? void 0 : D.html) && /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: D.html }, style: { padding: 16 } })
   ] });
-  return /* @__PURE__ */ g("div", { className: "dhx", style: { display: "flex", flexDirection: i === "top" ? "column" : i === "bottom" ? "column-reverse" : i === "left" ? "row" : "row-reverse", width: "100%", height: "100%", background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, overflow: "hidden", ...y }, children: [
-    k,
-    L
+  return /* @__PURE__ */ g("div", { className: "dhx", style: { display: "flex", flexDirection: o === "top" ? "column" : o === "bottom" ? "column-reverse" : o === "left" ? "row" : "row-reverse", width: "100%", height: "100%", background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, overflow: "hidden", ...x }, children: [
+    M,
+    R
   ] });
 }
-const se = `1px solid ${e.border}`;
-function ut({ active: n, dir: i }) {
+const he = `1px solid ${e.border}`;
+function Ct({ active: n, dir: o }) {
   return /* @__PURE__ */ g("span", { style: { display: "inline-flex", flexDirection: "column", gap: 1, flexShrink: 0, marginLeft: 4 }, children: [
-    /* @__PURE__ */ t("svg", { width: "7", height: "4", viewBox: "0 0 7 4", children: /* @__PURE__ */ t("path", { d: "M3.5 0L7 4H0z", fill: n && i === "asc" ? e.primary : e.borderDk }) }),
-    /* @__PURE__ */ t("svg", { width: "7", height: "4", viewBox: "0 0 7 4", children: /* @__PURE__ */ t("path", { d: "M3.5 4L0 0H7z", fill: n && i === "desc" ? e.primary : e.borderDk }) })
+    /* @__PURE__ */ t("svg", { width: "7", height: "4", viewBox: "0 0 7 4", children: /* @__PURE__ */ t("path", { d: "M3.5 0L7 4H0z", fill: n && o === "asc" ? e.primary : e.borderDk }) }),
+    /* @__PURE__ */ t("svg", { width: "7", height: "4", viewBox: "0 0 7 4", children: /* @__PURE__ */ t("path", { d: "M3.5 4L0 0H7z", fill: n && o === "desc" ? e.primary : e.borderDk }) })
+  ] });
+}
+function Lt({ options: n, value: o, onChange: d, onCommit: l, onCancel: f }) {
+  const [a, h] = N(o), [u, x] = N(!0), w = oe(null);
+  _(() => {
+    const i = (c) => {
+      w.current && !w.current.contains(c.target) && l();
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [l]);
+  const r = n.filter((i) => !a || i.toLowerCase().includes(a.toLowerCase()));
+  return /* @__PURE__ */ g("div", { ref: w, style: { width: "100%", position: "relative" }, children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        autoFocus: !0,
+        value: a,
+        onChange: (i) => {
+          h(i.target.value), d(i.target.value), x(!0);
+        },
+        onKeyDown: (i) => {
+          i.key === "Enter" && l(), i.key === "Escape" && f();
+        },
+        onClick: (i) => i.stopPropagation(),
+        style: { width: "100%", border: "none", outline: `2px solid ${e.primary}`, borderRadius: 2, fontSize: 13, padding: "2px 4px", background: e.surface, color: e.text }
+      }
+    ),
+    u && r.length > 0 && /* @__PURE__ */ t("div", { style: { position: "absolute", top: "100%", left: 0, right: 0, zIndex: 50, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.r, boxShadow: e.shadowLg, maxHeight: 160, overflowY: "auto" }, children: r.map((i) => /* @__PURE__ */ t(
+      "div",
+      {
+        onMouseDown: (c) => {
+          c.preventDefault(), d(i), h(i), x(!1), l();
+        },
+        style: { padding: "6px 10px", cursor: "pointer", fontSize: 13, color: e.text },
+        onMouseEnter: (c) => c.currentTarget.style.background = e.bg,
+        onMouseLeave: (c) => c.currentTarget.style.background = e.surface,
+        children: i
+      },
+      i
+    )) })
   ] });
 }
-function Tt({
+function It(n, o) {
+  if (n == null) return "";
+  if (o === "number") return typeof n == "number" ? n.toLocaleString() : String(n);
+  if (o === "date") {
+    const d = n instanceof Date ? n : new Date(String(n));
+    return isNaN(d.getTime()) ? String(n) : d.toLocaleDateString();
+  }
+  return String(n);
+}
+function Tt(n, o, d) {
+  return n == null ? 1 : o == null ? -1 : d === "date" ? new Date(String(n)).getTime() - new Date(String(o)).getTime() : d === "number" ? Number(n) - Number(o) : String(n) < String(o) ? -1 : String(n) > String(o) ? 1 : 0;
+}
+function Se(n) {
+  var o;
+  return Array.isArray(n.header) && ((o = n.header[1]) == null ? void 0 : o.content) != null ? n.header[1].content : n.filterable ? n.filterType === "select" ? "selectFilter" : "inputFilter" : null;
+}
+function Nt(n, o, d, l, f) {
+  const a = {
+    width: "100%",
+    border: "none",
+    outline: `2px solid ${e.primary}`,
+    borderRadius: 2,
+    fontSize: 13,
+    padding: "2px 4px",
+    background: e.surface,
+    color: e.text
+  }, h = n.editorType ?? "input";
+  if (h === "select") return /* @__PURE__ */ t(
+    "select",
+    {
+      autoFocus: !0,
+      value: o,
+      onChange: (x) => d(x.target.value),
+      onBlur: l,
+      onKeyDown: (x) => {
+        x.key === "Enter" && l(), x.key === "Escape" && f();
+      },
+      onClick: (x) => x.stopPropagation(),
+      style: { ...a, cursor: "pointer" },
+      children: (n.options ?? []).map((x) => /* @__PURE__ */ t("option", { value: x, children: x }, x))
+    }
+  );
+  if (h === "combobox") return /* @__PURE__ */ t(
+    Lt,
+    {
+      options: n.options ?? [],
+      value: o,
+      onChange: d,
+      onCommit: l,
+      onCancel: f
+    }
+  );
+  const u = n.type === "number" ? "number" : n.type === "date" ? "date" : "text";
+  return /* @__PURE__ */ t(
+    "input",
+    {
+      autoFocus: !0,
+      type: u,
+      value: o,
+      onChange: (x) => d(x.target.value),
+      onBlur: l,
+      onKeyDown: (x) => {
+        x.key === "Enter" && l(), x.key === "Escape" && f();
+      },
+      onClick: (x) => x.stopPropagation(),
+      style: a
+    }
+  );
+}
+function Ut({
   columns: n,
-  data: i = [],
-  height: p = 400,
-  rowHeight: s = 40,
-  sortable: f = !0,
-  resizable: a = !0,
-  editable: h = !1,
-  stripe: d = !1,
-  autoWidth: y = !1,
-  keyNavigation: w = !1,
-  selection: r,
-  multiselect: l,
-  onSelect: c,
+  data: o = [],
+  height: d = 400,
+  rowHeight: l = 40,
+  headerRowHeight: f = 40,
+  footerRowHeight: a = 40,
+  sortable: h = !0,
+  resizable: u = !0,
+  editable: x = !1,
+  stripe: w = !1,
+  autoWidth: r = !1,
+  keyNavigation: i = !1,
+  selection: c,
+  multiselect: m,
+  leftSplit: S = 0,
+  onSelect: s,
   onChange: b,
-  style: S
+  style: M
 }) {
-  const [o, x] = T(null), [k, $] = T("asc"), [L, m] = T({}), [M, A] = T(/* @__PURE__ */ new Set()), [u, I] = T(-1), [R, C] = T(() => n.map((v) => v.width ?? v.minWidth ?? 150)), [P, q] = T(null), [Q, ee] = T(""), [te, N] = T({}), z = U(null), [B, j] = T(0);
-  K(_, []), K(() => {
-    if (!y || !z.current) return;
-    const v = new ResizeObserver(() => {
-      var D;
-      return j(((D = z.current) == null ? void 0 : D.offsetWidth) ?? 0);
+  var Ce;
+  const [D, R] = N(null), [z, C] = N("asc"), [F, p] = N({}), [I, W] = N(/* @__PURE__ */ new Set()), [v, X] = N(-1), [J, se] = N(
+    () => Object.fromEntries(n.map((y) => [y.id, y.width ?? y.minWidth ?? 150]))
+  ), [U, ie] = N(null), [E, $] = N(""), [j, k] = N({}), P = oe(null), [O, G] = N(0);
+  _(q, []), _(() => {
+    if (!r || !P.current) return;
+    const y = new ResizeObserver(() => {
+      var L;
+      return G(((L = P.current) == null ? void 0 : L.offsetWidth) ?? 0);
     });
-    return v.observe(z.current), () => v.disconnect();
-  }, [y]);
-  const Y = ue(() => {
-    if (!y || B === 0) return R;
-    const v = R.reduce((W, E) => W + E, 0);
-    if (B <= v) return R;
-    const D = (B - v) / n.length;
-    return R.map((W) => W + D);
-  }, [y, B, R, n.length]), O = ue(() => {
-    let v = i.map((D, W) => {
-      const E = String(D.id ?? W);
-      return te[E] ? { ...D, ...te[E] } : D;
+    return y.observe(P.current), () => y.disconnect();
+  }, [r]);
+  const K = ue(
+    () => n.map(
+      (y) => y.summary && (!y.footer || y.footer.length === 0) ? { ...y, footer: [{ summary: y.summary }] } : y
+    ),
+    [n]
+  ), V = ue(
+    () => K.filter((y) => !y.hidden),
+    [K]
+  ), Q = ue(() => {
+    if (!r || O === 0) return J;
+    const y = V.reduce((T, A) => T + (J[A.id] ?? 150), 0);
+    if (O <= y) return J;
+    const L = (O - y) / V.length;
+    return Object.fromEntries(V.map((T) => [T.id, (J[T.id] ?? 150) + L]));
+  }, [r, O, J, V]), Z = ue(() => {
+    let y = o.map((L, T) => {
+      const A = String(L.id ?? T);
+      return j[A] ? { ...L, ...j[A] } : L;
     }).filter(
-      (D) => Object.entries(L).every(([W, E]) => !E || String(D[W] ?? "").toLowerCase().includes(E.toLowerCase()))
+      (L) => Object.entries(F).every(
+        ([T, A]) => !A || String(L[T] ?? "").toLowerCase().includes(A.toLowerCase())
+      )
     );
-    return o && (v = [...v].sort((D, W) => {
-      const E = D[o], V = W[o];
-      if (E == null) return 1;
-      if (V == null) return -1;
-      const F = E < V ? -1 : E > V ? 1 : 0;
-      return k === "asc" ? F : -F;
-    })), v;
-  }, [i, o, k, L, te]), J = ue(() => {
-    const v = {};
-    return n.forEach((D) => {
-      var W;
-      if ((W = D.footer) != null && W.some((E) => E.summary)) {
-        const E = O.map((F) => Number(F[D.id])).filter((F) => !isNaN(F)), V = E.reduce((F, de) => F + de, 0);
-        v[D.id] = { sum: V, avg: E.length ? V / E.length : 0, count: O.length, min: E.length ? Math.min(...E) : 0, max: E.length ? Math.max(...E) : 0 };
+    if (D) {
+      const L = K.find((T) => T.id === D);
+      y = [...y].sort((T, A) => {
+        const Y = Tt(T[D], A[D], L == null ? void 0 : L.type);
+        return z === "asc" ? Y : -Y;
+      });
+    }
+    return y;
+  }, [o, D, z, F, j, K]), fe = ue(() => {
+    const y = {};
+    return K.forEach((L) => {
+      var T;
+      if ((T = L.footer) != null && T.some((A) => A.summary)) {
+        const A = Z.map((B) => Number(B[L.id])).filter((B) => !isNaN(B)), Y = A.reduce((B, ee) => B + ee, 0);
+        y[L.id] = { sum: Y, avg: A.length ? Y / A.length : 0, count: Z.length, min: A.length ? Math.min(...A) : 0, max: A.length ? Math.max(...A) : 0 };
       }
-    }), v;
-  }, [O, n]), X = ue(() => {
-    const v = {};
-    return n.filter((D) => D.filterType === "select").forEach((D) => {
-      v[D.id] = [...new Set(i.map((W) => String(W[D.id] ?? "")))].sort();
-    }), v;
-  }, [i, n]), oe = n.some((v) => v.filterable), ne = n.some((v) => {
-    var D;
-    return (D = v.footer) == null ? void 0 : D.length;
-  }), ie = Y.reduce((v, D) => v + D, 0), le = (v, D) => v.id ?? D, ae = (v) => {
-    !f || v.sortable === !1 || ($((D) => o === v.id && D === "asc" ? "desc" : "asc"), x(v.id));
-  }, H = (v, D) => {
-    if (!r) return;
-    const W = le(v, D);
-    I(D), A((E) => {
-      const V = l ? new Set(E) : /* @__PURE__ */ new Set();
-      return V.has(W) ? V.delete(W) : V.add(W), V;
-    }), c == null || c(v);
-  }, re = () => {
-    if (!P) return;
-    const { key: v, colId: D } = P;
-    N((E) => ({ ...E, [String(v)]: { ...E[String(v)] || {}, [D]: Q } }));
-    const W = O.find((E, V) => le(E, V) === v);
-    W && (b == null || b(W, D, Q)), q(null);
-  }, Ae = (v) => {
-    if (P && v.key === "Escape") {
-      q(null);
+    }), y;
+  }, [Z, K]), ne = ue(() => {
+    const y = {};
+    return V.filter((L) => {
+      const T = Se(L);
+      return T === "selectFilter" || T === "comboFilter";
+    }).forEach((L) => {
+      y[L.id] = [...new Set(o.map((T) => String(T[L.id] ?? "")))].sort();
+    }), y;
+  }, [o, V]), H = V.some((y) => Se(y) !== null), de = K.some((y) => {
+    var L;
+    return (L = y.footer) == null ? void 0 : L.length;
+  }), me = V.reduce((y, L) => y + (Q[L.id] ?? 150), 0), ce = ue(() => {
+    if (!S) return {};
+    let y = 0;
+    const L = {};
+    return V.forEach((T, A) => {
+      A < S && (L[T.id] = y, y += Q[T.id] ?? 150);
+    }), L;
+  }, [S, V, Q]), le = S > 0 ? (Ce = V[S - 1]) == null ? void 0 : Ce.id : null, ye = (y, L) => y.id ?? L, Xe = (y) => {
+    !h || y.sortable === !1 || (C((L) => D === y.id && L === "asc" ? "desc" : "asc"), R(y.id));
+  }, ve = (y, L) => {
+    if (!c) return;
+    const T = ye(y, L);
+    X(L), W((A) => {
+      const Y = m ? new Set(A) : /* @__PURE__ */ new Set();
+      return Y.has(T) ? Y.delete(T) : Y.add(T), Y;
+    }), s == null || s(y);
+  }, qe = () => {
+    if (!U) return;
+    const { key: y, colId: L } = U;
+    k((A) => ({ ...A, [String(y)]: { ...A[String(y)] || {}, [L]: E } }));
+    const T = Z.find((A, Y) => ye(A, Y) === y);
+    T && (b == null || b(T, L, E)), ie(null);
+  }, Ge = (y) => {
+    if (U && y.key === "Escape") {
+      ie(null);
       return;
     }
-    if (!(!w || !r)) {
-      if (v.key === "ArrowDown") {
-        v.preventDefault();
-        const D = Math.min(u + 1, O.length - 1);
-        D >= 0 && H(O[D], D);
-      } else if (v.key === "ArrowUp") {
-        v.preventDefault();
-        const D = Math.max(u - 1, 0);
-        D >= 0 && H(O[D], D);
+    if (!(!i || !c)) {
+      if (y.key === "ArrowDown") {
+        y.preventDefault();
+        const L = Math.min(v + 1, Z.length - 1);
+        L >= 0 && ve(Z[L], L);
+      } else if (y.key === "ArrowUp") {
+        y.preventDefault();
+        const L = Math.max(v - 1, 0);
+        L >= 0 && ve(Z[L], L);
       }
     }
-  }, Be = (v, D) => {
-    v.preventDefault(), v.stopPropagation();
-    const W = v.clientX, E = R[D], V = (de) => C((ge) => {
-      const ce = [...ge];
-      return ce[D] = Math.max(n[D].minWidth || 50, E + de.clientX - W), ce;
-    }), F = () => {
-      document.removeEventListener("mousemove", V), document.removeEventListener("mouseup", F);
+  }, Je = (y, L) => {
+    y.preventDefault(), y.stopPropagation();
+    const T = y.clientX, A = J[L] ?? 150, Y = n.find((te) => te.id === L), B = (te) => se((pe) => ({
+      ...pe,
+      [L]: Math.max((Y == null ? void 0 : Y.minWidth) || 50, A + te.clientX - T)
+    })), ee = () => {
+      document.removeEventListener("mousemove", B), document.removeEventListener("mouseup", ee);
     };
-    document.addEventListener("mousemove", V), document.addEventListener("mouseup", F);
-  }, xe = (v, D, W, E) => ({
-    width: v,
-    minWidth: v,
-    flexShrink: 0,
-    boxSizing: "border-box",
-    padding: "0 12px",
-    height: E,
-    display: "flex",
-    alignItems: "center",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    fontSize: 13,
-    textAlign: D.align,
-    justifyContent: D.align === "center" ? "center" : D.align === "right" ? "flex-end" : "flex-start",
-    borderLeft: W ? "none" : se
-  });
+    document.addEventListener("mousemove", B), document.addEventListener("mouseup", ee);
+  }, ke = (y, L, T, A, Y, B = "hidden") => {
+    const ee = y in ce;
+    return {
+      width: L,
+      minWidth: L,
+      flexShrink: 0,
+      boxSizing: "border-box",
+      padding: "0 12px",
+      height: Y,
+      display: "flex",
+      alignItems: "center",
+      overflow: B,
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      fontSize: 13,
+      textAlign: T,
+      justifyContent: T === "center" ? "center" : T === "right" ? "flex-end" : "flex-start",
+      borderLeft: A ? "none" : he,
+      position: ee ? "sticky" : "relative",
+      ...ee ? {
+        left: ce[y],
+        zIndex: 1,
+        boxShadow: y === le ? "2px 0 6px rgba(0,0,0,0.1)" : void 0
+      } : {}
+    };
+  };
   return /* @__PURE__ */ t(
     "div",
     {
-      ref: z,
+      ref: P,
       className: "dhx",
-      tabIndex: w ? 0 : void 0,
-      onKeyDown: Ae,
-      style: { width: "100%", height: p, display: "flex", flexDirection: "column", border: se, borderRadius: e.r, overflow: "hidden", outline: "none", ...S },
-      children: /* @__PURE__ */ t("div", { style: { overflowX: "auto", flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }, children: /* @__PURE__ */ g("div", { style: { minWidth: ie, display: "flex", flexDirection: "column", height: "100%" }, children: [
-        /* @__PURE__ */ t("div", { style: { display: "flex", background: e.bg, borderBottom: se, flexShrink: 0, position: "sticky", top: 0, zIndex: 2 }, children: n.map((v, D) => {
-          var W;
+      tabIndex: i ? 0 : void 0,
+      onKeyDown: Ge,
+      style: { width: "100%", height: d, display: "flex", flexDirection: "column", border: he, borderRadius: e.r, overflow: "hidden", outline: "none", ...M },
+      children: /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { overflow: "auto", flex: 1 }, children: /* @__PURE__ */ g("div", { style: { minWidth: me, display: "flex", flexDirection: "column", minHeight: "100%" }, children: [
+        /* @__PURE__ */ t("div", { style: { display: "flex", background: e.bg, borderBottom: he, flexShrink: 0, position: "sticky", top: 0, zIndex: 3 }, children: V.map((y, L) => {
+          const T = Array.isArray(y.header) ? y.header[0] : null, A = (T == null ? void 0 : T.text) ?? (typeof y.header == "string" ? y.header : y.id), Y = (T == null ? void 0 : T.align) ?? y.align, B = Q[y.id] ?? 150, ee = y.id in ce;
           return /* @__PURE__ */ g(
             "div",
             {
-              onClick: () => ae(v),
+              onClick: () => Xe(y),
               style: {
-                ...xe(Y[D], v, D === 0, 40),
-                position: "relative",
+                ...ke(y.id, B, Y, L === 0, f),
                 fontWeight: 500,
                 color: e.text,
-                cursor: f && v.sortable !== !1 ? "pointer" : "default",
-                userSelect: "none"
+                background: e.bg,
+                cursor: h && y.sortable !== !1 ? "pointer" : "default",
+                userSelect: "none",
+                ...ee ? { zIndex: 4 } : {}
               },
               children: [
-                /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: Array.isArray(v.header) ? (W = v.header[0]) == null ? void 0 : W.text : v.header || v.id }),
-                f && v.sortable !== !1 && /* @__PURE__ */ t(ut, { active: o === v.id, dir: k }),
-                a && v.resizable !== !1 && D < n.length - 1 && /* @__PURE__ */ t(
+                T != null && T.htmlEnable ? /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden" }, dangerouslySetInnerHTML: { __html: A } }) : /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: A }),
+                h && y.sortable !== !1 && /* @__PURE__ */ t(Ct, { active: D === y.id, dir: z }),
+                u && y.resizable !== !1 && L < V.length - 1 && /* @__PURE__ */ t(
                   "div",
                   {
-                    onMouseDown: (E) => Be(E, D),
-                    onClick: (E) => E.stopPropagation(),
+                    onMouseDown: (te) => Je(te, y.id),
+                    onClick: (te) => te.stopPropagation(),
                     style: { position: "absolute", right: 0, top: 0, bottom: 0, width: 4, cursor: "col-resize", zIndex: 1 },
-                    onMouseEnter: (E) => E.currentTarget.style.background = e.primary + "55",
-                    onMouseLeave: (E) => E.currentTarget.style.background = "transparent"
+                    onMouseEnter: (te) => te.currentTarget.style.background = e.primary + "55",
+                    onMouseLeave: (te) => te.currentTarget.style.background = "transparent"
                   }
                 )
               ]
             },
-            v.id
+            y.id
           );
         }) }),
-        oe && /* @__PURE__ */ t("div", { style: { display: "flex", borderBottom: se, background: e.surface, flexShrink: 0 }, children: n.map((v, D) => /* @__PURE__ */ t("div", { style: { width: Y[D], minWidth: Y[D], flexShrink: 0, padding: "4px 6px", boxSizing: "border-box", borderLeft: D === 0 ? "none" : se }, children: v.filterable && v.filterType === "select" ? /* @__PURE__ */ g(
-          "select",
-          {
-            className: "dhx dhx-input",
-            style: { height: 26, fontSize: 12, padding: "0 4px" },
-            value: L[v.id] || "",
-            onChange: (W) => m((E) => ({ ...E, [v.id]: W.target.value })),
-            children: [
-              /* @__PURE__ */ t("option", { value: "", children: "All" }),
-              (X[v.id] || []).map((W) => /* @__PURE__ */ t("option", { value: W, children: W }, W))
-            ]
-          }
-        ) : v.filterable ? /* @__PURE__ */ t(
-          "input",
-          {
-            className: "dhx dhx-input",
-            style: { height: 26, fontSize: 12 },
-            placeholder: "Filter...",
-            value: L[v.id] || "",
-            onChange: (W) => m((E) => ({ ...E, [v.id]: W.target.value }))
-          }
-        ) : null }, v.id)) }),
-        /* @__PURE__ */ g("div", { className: "dhx-scroll", style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: [
-          O.map((v, D) => {
-            const W = le(v, D), E = M.has(W), V = E ? e.primaryLt : d && D % 2 !== 0 ? e.bg : e.surface;
+        H && /* @__PURE__ */ t("div", { style: {
+          display: "flex",
+          borderBottom: he,
+          background: e.surface,
+          flexShrink: 0,
+          ...S ? { position: "sticky", top: f, zIndex: 3 } : {}
+        }, children: V.map((y, L) => {
+          const T = Se(y), A = Q[y.id] ?? 150, Y = y.id in ce;
+          return /* @__PURE__ */ t("div", { style: {
+            width: A,
+            minWidth: A,
+            flexShrink: 0,
+            padding: "4px 6px",
+            boxSizing: "border-box",
+            borderLeft: L === 0 ? "none" : he,
+            background: e.surface,
+            ...Y ? {
+              position: "sticky",
+              left: ce[y.id],
+              zIndex: 4,
+              boxShadow: y.id === le ? "2px 0 6px rgba(0,0,0,0.1)" : void 0
+            } : {}
+          }, children: T === "selectFilter" || T === "comboFilter" ? /* @__PURE__ */ g(
+            "select",
+            {
+              className: "dhx dhx-input",
+              style: { height: 26, fontSize: 12, padding: "0 4px" },
+              value: F[y.id] || "",
+              onChange: (B) => p((ee) => ({ ...ee, [y.id]: B.target.value })),
+              children: [
+                /* @__PURE__ */ t("option", { value: "", children: "All" }),
+                (ne[y.id] || []).map((B) => /* @__PURE__ */ t("option", { value: B, children: B }, B))
+              ]
+            }
+          ) : T === "inputFilter" ? /* @__PURE__ */ t(
+            "input",
+            {
+              className: "dhx dhx-input",
+              style: { height: 26, fontSize: 12 },
+              placeholder: "Filter...",
+              value: F[y.id] || "",
+              onChange: (B) => p((ee) => ({ ...ee, [y.id]: B.target.value }))
+            }
+          ) : null }, y.id);
+        }) }),
+        /* @__PURE__ */ g("div", { style: { flex: 1 }, children: [
+          Z.map((y, L) => {
+            const T = ye(y, L), A = I.has(T), Y = A ? e.primaryLt : w && L % 2 !== 0 ? e.bg : e.surface;
             return /* @__PURE__ */ t(
               "div",
               {
-                style: { display: "flex", height: s, borderBottom: se, flexShrink: 0, background: V, transition: "background .1s", cursor: r ? "pointer" : "default" },
-                onMouseEnter: (F) => !E && (F.currentTarget.style.background = e.primaryLt + "80"),
-                onMouseLeave: (F) => !E && (F.currentTarget.style.background = V),
-                children: n.map((F, de) => {
-                  const ge = (P == null ? void 0 : P.key) === W && (P == null ? void 0 : P.colId) === F.id, ce = v[F.id], He = F.template ? F.template(ce, v) : String(ce ?? "");
-                  return /* @__PURE__ */ t(
+                style: { display: "flex", height: l, borderBottom: he, flexShrink: 0, background: Y, transition: "background .1s", cursor: c ? "pointer" : "default" },
+                onMouseEnter: (B) => !A && (B.currentTarget.style.background = e.primaryLt + "80"),
+                onMouseLeave: (B) => !A && (B.currentTarget.style.background = Y),
+                children: V.map((B, ee) => {
+                  const te = (U == null ? void 0 : U.key) === T && (U == null ? void 0 : U.colId) === B.id, pe = y[B.id], Ue = Q[B.id] ?? 150, Le = (x || B.editable) && B.editable !== !1;
+                  let xe;
+                  return te ? xe = Nt(B, E, $, qe, () => ie(null)) : B.template ? xe = B.template(pe, y) : B.htmlEnable ? xe = /* @__PURE__ */ t("span", { dangerouslySetInnerHTML: { __html: String(pe ?? "") } }) : B.type === "boolean" ? xe = /* @__PURE__ */ t(
+                    "input",
+                    {
+                      type: "checkbox",
+                      readOnly: !0,
+                      checked: !!pe,
+                      style: { width: 16, height: 16, accentColor: e.primary, cursor: Le ? "pointer" : "default" }
+                    }
+                  ) : xe = It(pe, B.type), /* @__PURE__ */ t(
                     "div",
                     {
                       onClick: () => {
-                        H(v, D), h && F.editable !== !1 && (q({ key: W, colId: F.id }), ee(String(ce ?? "")));
+                        if (ve(y, L), !!Le)
+                          if (B.type === "boolean") {
+                            const Ie = !pe, Te = String(T);
+                            k((Ne) => ({ ...Ne, [Te]: { ...Ne[Te] || {}, [B.id]: Ie } })), b == null || b(y, B.id, Ie);
+                          } else
+                            ie({ key: T, colId: B.id }), $(String(pe ?? ""));
                       },
-                      style: xe(Y[de], F, de === 0, s),
-                      children: ge ? /* @__PURE__ */ t(
-                        "input",
-                        {
-                          autoFocus: !0,
-                          value: Q,
-                          onChange: (pe) => ee(pe.target.value),
-                          onBlur: re,
-                          onKeyDown: (pe) => {
-                            pe.key === "Enter" && re(), pe.key === "Escape" && q(null);
-                          },
-                          onClick: (pe) => pe.stopPropagation(),
-                          style: { width: "100%", border: "none", outline: `2px solid ${e.primary}`, borderRadius: 2, fontSize: 13, padding: "2px 4px", background: e.surface, color: e.text }
-                        }
-                      ) : He
+                      style: { ...ke(B.id, Ue, B.align, ee === 0, l, te ? "visible" : "hidden"), background: Y },
+                      children: xe
                     },
-                    F.id
+                    B.id
                   );
                 })
               },
-              String(W)
+              String(T)
             );
           }),
-          O.length === 0 && /* @__PURE__ */ t("div", { style: { textAlign: "center", padding: 40, color: e.textMut, fontSize: 13 }, children: "No data" })
+          Z.length === 0 && /* @__PURE__ */ t("div", { style: { textAlign: "center", padding: 40, color: e.textMut, fontSize: 13 }, children: "No data" })
         ] }),
-        ne && /* @__PURE__ */ t("div", { style: { display: "flex", borderTop: se, background: e.bg, flexShrink: 0 }, children: n.map((v, D) => {
-          var F;
-          const W = (F = v.footer) == null ? void 0 : F[0], E = J[v.id] ?? { sum: 0, avg: 0, count: 0, min: 0, max: 0 };
-          let V = "";
-          return W && (typeof W.text == "function" ? V = W.text(E) : W.text ? V = W.text : W.summary && (V = String(Math.round(E[W.summary] * 100) / 100))), /* @__PURE__ */ t("div", { style: { ...xe(Y[D], v, D === 0, 40), fontWeight: 600, color: e.text }, children: V }, v.id);
+        de && /* @__PURE__ */ t("div", { style: { display: "flex", borderTop: he, background: e.bg, flexShrink: 0, position: "sticky", bottom: 0, zIndex: 2 }, children: V.map((y, L) => {
+          var te;
+          const T = (te = y.footer) == null ? void 0 : te[0], A = fe[y.id] ?? { sum: 0, avg: 0, count: 0, min: 0, max: 0 };
+          let Y = "";
+          T && (typeof T.text == "function" ? Y = T.text(A) : T.text ? Y = T.text : T.summary && (Y = String(Math.round(A[T.summary] * 100) / 100)));
+          const B = Q[y.id] ?? 150, ee = y.id in ce;
+          return /* @__PURE__ */ t("div", { style: {
+            ...ke(y.id, B, y.align, L === 0, a),
+            fontWeight: 600,
+            color: e.text,
+            background: e.bg,
+            ...ee ? { zIndex: 3 } : {}
+          }, children: Y }, y.id);
         }) })
       ] }) })
     }
   );
 }
-const G = ["#0288d1", "#43a047", "#f57c00", "#e53935", "#8e24aa", "#00838f", "#ef6c00", "#2e7d32"];
-function ht(n, i, p) {
-  const s = n.filter((a) => !a.parent), f = n.filter((a) => !!a.parent);
-  return s.map((a) => ({
-    name: a[p],
-    children: f.filter((h) => h.parent === a.id).map((h) => ({ name: h[p], value: Number(h[i] ?? 0) }))
+const re = ["#0288d1", "#43a047", "#f57c00", "#e53935", "#8e24aa", "#00838f", "#ef6c00", "#2e7d32"];
+function Et(n, o, d) {
+  const l = n.filter((a) => !a.parent), f = n.filter((a) => !!a.parent);
+  return l.map((a) => ({
+    name: a[d],
+    children: f.filter((h) => h.parent === a.id).map((h) => ({ name: h[d], value: Number(h[o] ?? 0) }))
   }));
 }
-function Nt({
+function Qt({
   type: n = "bar",
-  data: i = [],
-  series: p = [],
-  scales: s = {},
+  data: o = [],
+  series: d = [],
+  scales: l = {},
   legend: f,
   height: a = 280,
   style: h
 }) {
-  var x, k, $, L, m, M, A, u, I, R, C, P, q, Q, ee, te;
-  K(_, []);
-  const d = ((x = s.bottom) == null ? void 0 : x.text) || i[0] && Object.keys(i[0])[0] || "x", y = /* @__PURE__ */ t(
-    Oe,
+  var b, M, D, R, z, C, F, p, I, W, v, X, J, se, U, ie;
+  _(q, []);
+  const u = ((b = l.bottom) == null ? void 0 : b.text) || o[0] && Object.keys(o[0])[0] || "x", x = /* @__PURE__ */ t(
+    et,
     {
       contentStyle: { fontSize: 12, borderRadius: e.r, border: `1px solid ${e.border}` }
     }
   ), w = f ? /* @__PURE__ */ t(
-    Ye,
+    tt,
     {
       iconSize: 10,
       wrapperStyle: { fontSize: 12 },
       verticalAlign: f.valign === "bottom" ? "bottom" : f.valign === "middle" ? "middle" : "top",
       align: f.halign ?? "center"
     }
-  ) : null, r = /* @__PURE__ */ t(Fe, { strokeDasharray: "3 3", stroke: e.border }), l = /* @__PURE__ */ t(
-    Se,
+  ) : null, r = /* @__PURE__ */ t(nt, { strokeDasharray: "3 3", stroke: e.border }), i = /* @__PURE__ */ t(
+    Ee,
     {
-      dataKey: d,
+      dataKey: u,
       tick: { fontSize: 11, fill: e.textSec },
       axisLine: { stroke: e.border },
       tickLine: !1,
-      label: (k = s.bottom) != null && k.title ? { value: s.bottom.title, position: "insideBottom", offset: -4, fontSize: 11 } : void 0
+      label: (M = l.bottom) != null && M.title ? { value: l.bottom.title, position: "insideBottom", offset: -4, fontSize: 11 } : void 0
     }
   ), c = /* @__PURE__ */ t(
-    we,
+    Re,
     {
       tick: { fontSize: 11, fill: e.textSec },
       axisLine: !1,
       tickLine: !1,
-      domain: [(($ = s.left) == null ? void 0 : $.min) ?? "auto", ((L = s.left) == null ? void 0 : L.max) ?? "auto"],
-      tickCount: (m = s.left) == null ? void 0 : m.maxTicks,
-      label: (M = s.left) != null && M.title ? { value: s.left.title, angle: -90, position: "insideLeft", fontSize: 11 } : void 0
+      domain: [((D = l.left) == null ? void 0 : D.min) ?? "auto", ((R = l.left) == null ? void 0 : R.max) ?? "auto"],
+      tickCount: (z = l.left) == null ? void 0 : z.maxTicks,
+      label: (C = l.left) != null && C.title ? { value: l.left.title, angle: -90, position: "insideLeft", fontSize: 11 } : void 0
     }
-  ), b = {
+  ), m = {
     top: 10,
     right: 20,
     left: 0,
-    bottom: (A = s.bottom) != null && A.title ? 20 : 0
-  }, S = { data: i, margin: b };
-  let o;
+    bottom: (F = l.bottom) != null && F.title ? 20 : 0
+  }, S = { data: o, margin: m };
+  let s;
   if (n === "bar")
-    o = /* @__PURE__ */ g(Ke, { ...S, children: [
+    s = /* @__PURE__ */ g(rt, { ...S, children: [
       r,
-      l,
+      i,
       c,
-      y,
+      x,
       w,
-      p.map((N, z) => /* @__PURE__ */ t(
-        Ve,
+      d.map((E, $) => /* @__PURE__ */ t(
+        ot,
         {
-          dataKey: N.value || N.id || "",
-          name: N.label || N.id,
-          fill: N.fill || N.color || G[z % G.length],
+          dataKey: E.value || E.id || "",
+          name: E.label || E.id,
+          fill: E.fill || E.color || re[$ % re.length],
           radius: [3, 3, 0, 0]
         },
-        N.id ?? z
+        E.id ?? $
       ))
     ] });
   else if (n === "line")
-    o = /* @__PURE__ */ g(_e, { ...S, children: [
+    s = /* @__PURE__ */ g(it, { ...S, children: [
       r,
-      l,
+      i,
       c,
-      y,
+      x,
       w,
-      p.map((N, z) => {
-        const B = N.color || G[z % G.length];
+      d.map((E, $) => {
+        const j = E.color || re[$ % re.length];
         return /* @__PURE__ */ t(
-          Xe,
+          lt,
           {
             type: "monotone",
-            dataKey: N.value || N.id || "",
-            name: N.label || N.id,
-            stroke: B,
-            strokeWidth: N.strokeWidth ?? 2,
-            dot: { r: 3, fill: B }
+            dataKey: E.value || E.id || "",
+            name: E.label || E.id,
+            stroke: j,
+            strokeWidth: E.strokeWidth ?? 2,
+            dot: { r: 3, fill: j }
           },
-          N.id ?? z
+          E.id ?? $
         );
       })
     ] });
   else if (n === "area")
-    o = /* @__PURE__ */ g(qe, { ...S, children: [
+    s = /* @__PURE__ */ g(st, { ...S, children: [
       r,
-      l,
+      i,
       c,
-      y,
+      x,
       w,
-      p.map((N, z) => {
-        const B = N.color || G[z % G.length];
+      d.map((E, $) => {
+        const j = E.color || re[$ % re.length];
         return /* @__PURE__ */ t(
-          Ge,
+          at,
           {
             type: "monotone",
-            dataKey: N.value || N.id || "",
-            name: N.label || N.id,
-            stroke: B,
-            fill: (N.fill || B) + "33",
-            strokeWidth: N.strokeWidth ?? 2
+            dataKey: E.value || E.id || "",
+            name: E.label || E.id,
+            stroke: j,
+            fill: (E.fill || j) + "33",
+            strokeWidth: E.strokeWidth ?? 2
           },
-          N.id ?? z
+          E.id ?? $
         );
       })
     ] });
   else if (n === "pie" || n === "donut") {
-    const N = p[0] || {}, z = N.value || "value", B = N.text || "name", j = N.color && i[0] && N.color in i[0] ? N.color : null;
-    o = /* @__PURE__ */ g(Je, { children: [
+    const E = d[0] || {}, $ = E.value || "value", j = E.text || "name", k = E.color && o[0] && E.color in o[0] ? E.color : null;
+    s = /* @__PURE__ */ g(dt, { children: [
       /* @__PURE__ */ t(
-        Ue,
+        ct,
         {
-          data: i,
+          data: o,
           cx: "50%",
           cy: "50%",
           outerRadius: n === "donut" ? "70%" : "80%",
           innerRadius: n === "donut" ? "40%" : 0,
-          dataKey: z,
-          nameKey: B,
-          stroke: N.stroke || "none",
-          strokeWidth: N.strokeWidth ?? 0,
-          label: ({ name: Y, percent: O }) => `${Y ?? ""} ${((O ?? 0) * 100).toFixed(0)}%`,
+          dataKey: $,
+          nameKey: j,
+          stroke: E.stroke || "none",
+          strokeWidth: E.strokeWidth ?? 0,
+          label: ({ name: P, percent: O }) => `${P ?? ""} ${((O ?? 0) * 100).toFixed(0)}%`,
           labelLine: !0,
           paddingAngle: 2,
-          children: i.map((Y, O) => /* @__PURE__ */ t(
-            Qe,
+          children: o.map((P, O) => /* @__PURE__ */ t(
+            ut,
             {
-              fill: j ? Y[j] : G[O % G.length]
+              fill: k ? P[k] : re[O % re.length]
             },
             O
           ))
         }
       ),
-      y,
+      x,
       w
     ] });
   } else if (n === "radar") {
-    const N = ((u = s.radial) == null ? void 0 : u.value) || d;
-    o = /* @__PURE__ */ g(Ze, { ...S, cx: "50%", cy: "50%", children: [
-      /* @__PURE__ */ t(et, {}),
-      /* @__PURE__ */ t(tt, { dataKey: N, tick: { fontSize: 11 } }),
-      /* @__PURE__ */ t(nt, { tick: { fontSize: 9, fill: e.textMut }, axisLine: !1 }),
-      p.map((z, B) => {
-        const j = z.color || z.pointColor || G[B % G.length];
+    const E = ((p = l.radial) == null ? void 0 : p.value) || u;
+    s = /* @__PURE__ */ g(pt, { ...S, cx: "50%", cy: "50%", children: [
+      /* @__PURE__ */ t(ht, {}),
+      /* @__PURE__ */ t(ft, { dataKey: E, tick: { fontSize: 11 } }),
+      /* @__PURE__ */ t(xt, { tick: { fontSize: 9, fill: e.textMut }, axisLine: !1 }),
+      d.map(($, j) => {
+        const k = $.color || $.pointColor || re[j % re.length];
         return /* @__PURE__ */ t(
-          rt,
+          gt,
           {
-            dataKey: z.value || z.id || "",
-            name: z.label || z.id,
-            stroke: j,
-            fill: j + "44"
+            dataKey: $.value || $.id || "",
+            name: $.label || $.id,
+            stroke: k,
+            fill: k + "44"
           },
-          z.id ?? B
+          $.id ?? j
         );
       }),
-      y,
+      x,
       w
     ] });
   } else if (n === "scatter")
-    o = /* @__PURE__ */ g(ot, { margin: b, children: [
+    s = /* @__PURE__ */ g(yt, { margin: m, children: [
       r,
       /* @__PURE__ */ t(
-        Se,
+        Ee,
         {
           type: "number",
           dataKey: "x",
-          name: ((I = s.bottom) == null ? void 0 : I.title) || "x",
+          name: ((I = l.bottom) == null ? void 0 : I.title) || "x",
           tick: { fontSize: 11, fill: e.textSec },
           tickLine: !1,
-          domain: [((R = s.bottom) == null ? void 0 : R.min) ?? "auto", ((C = s.bottom) == null ? void 0 : C.max) ?? "auto"],
-          label: (P = s.bottom) != null && P.title ? { value: s.bottom.title, position: "insideBottom", offset: -4, fontSize: 11 } : void 0
+          domain: [((W = l.bottom) == null ? void 0 : W.min) ?? "auto", ((v = l.bottom) == null ? void 0 : v.max) ?? "auto"],
+          label: (X = l.bottom) != null && X.title ? { value: l.bottom.title, position: "insideBottom", offset: -4, fontSize: 11 } : void 0
         }
       ),
       /* @__PURE__ */ t(
-        we,
+        Re,
         {
           type: "number",
           dataKey: "y",
-          name: ((q = s.left) == null ? void 0 : q.title) || "y",
+          name: ((J = l.left) == null ? void 0 : J.title) || "y",
           tick: { fontSize: 11, fill: e.textSec },
           tickLine: !1,
           axisLine: !1,
-          domain: [((Q = s.left) == null ? void 0 : Q.min) ?? "auto", ((ee = s.left) == null ? void 0 : ee.max) ?? "auto"],
-          label: (te = s.left) != null && te.title ? { value: s.left.title, angle: -90, position: "insideLeft", fontSize: 11 } : void 0
+          domain: [((se = l.left) == null ? void 0 : se.min) ?? "auto", ((U = l.left) == null ? void 0 : U.max) ?? "auto"],
+          label: (ie = l.left) != null && ie.title ? { value: l.left.title, angle: -90, position: "insideLeft", fontSize: 11 } : void 0
         }
       ),
-      y,
+      x,
       w,
-      p.map((N, z) => {
-        const B = N.value || "x", j = N.valueY || "y", Y = (N.data || i).map((O) => ({
-          x: O[B],
-          y: O[j]
+      d.map((E, $) => {
+        const j = E.value || "x", k = E.valueY || "y", P = (E.data || o).map((O) => ({
+          x: O[j],
+          y: O[k]
         }));
         return /* @__PURE__ */ t(
-          it,
+          bt,
           {
-            data: Y,
-            name: N.label || N.id,
-            fill: N.color || G[z % G.length]
+            data: P,
+            name: E.label || E.id,
+            fill: E.color || re[$ % re.length]
           },
-          N.id ?? z
+          E.id ?? $
         );
       })
     ] });
   else if (n === "treeMap") {
-    const N = p[0] || {}, z = N.value || "value", B = N.text || "name", j = ht(i, z, B), Y = N.stroke || e.surface, O = N.strokeWidth ?? 2;
-    o = /* @__PURE__ */ t(
-      st,
+    const E = d[0] || {}, $ = E.value || "value", j = E.text || "name", k = Et(o, $, j), P = E.stroke || e.surface, O = E.strokeWidth ?? 2;
+    s = /* @__PURE__ */ t(
+      vt,
       {
-        data: j,
+        data: k,
         dataKey: "value",
         aspectRatio: 4 / 3,
-        stroke: Y,
-        content: (J) => {
-          const { x: X, y: oe, width: ne, height: ie, depth: le, index: ae, name: H } = J;
-          if (le === 0) return null;
-          const re = G[ae % G.length];
+        stroke: P,
+        content: (G) => {
+          const { x: K, y: V, width: Q, height: Z, depth: fe, index: ne, name: H } = G;
+          if (fe === 0) return null;
+          const de = re[ne % re.length];
           return /* @__PURE__ */ g("g", { children: [
             /* @__PURE__ */ t(
               "rect",
               {
-                x: X,
-                y: oe,
-                width: ne,
-                height: ie,
-                fill: re,
-                stroke: Y,
+                x: K,
+                y: V,
+                width: Q,
+                height: Z,
+                fill: de,
+                stroke: P,
                 strokeWidth: O,
                 style: { borderRadius: 3 }
               }
             ),
-            ne > 40 && ie > 20 && /* @__PURE__ */ t(
+            Q > 40 && Z > 20 && /* @__PURE__ */ t(
               "text",
               {
-                x: X + ne / 2,
-                y: oe + ie / 2,
+                x: K + Q / 2,
+                y: V + Z / 2,
                 textAnchor: "middle",
                 dominantBaseline: "middle",
                 fill: "#fff",
@@ -943,194 +1333,194 @@ function Nt({
     {
       className: "dhx",
       style: { width: "100%", height: a, padding: 12, background: e.surface, borderRadius: e.rMd, ...h },
-      children: /* @__PURE__ */ t(lt, { width: "100%", height: "100%", children: o })
+      children: /* @__PURE__ */ t(mt, { width: "100%", height: "100%", children: s })
     }
   );
 }
-const ft = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], xt = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-function Rt({ value: n, range: i = !1, timepicker: p = !1, onChange: s, style: f }) {
-  const a = /* @__PURE__ */ new Date(), h = n ? new Date(Array.isArray(n) ? n[0] : n) : a, [d, y] = T(h), [w, r] = T(n ?? (i ? [null, null] : null)), [l, c] = T(null), [b, S] = T({ h: 0, m: 0 });
-  K(_, []);
-  const o = d.getFullYear(), x = d.getMonth(), k = new Date(o, x, 1).getDay(), $ = new Date(o, x + 1, 0).getDate(), L = [];
-  for (let u = 0; u < k; u++) L.push(null);
-  for (let u = 1; u <= $; u++) L.push(new Date(o, x, u));
-  const m = (u) => u.toDateString() === a.toDateString(), M = (u) => {
+const Rt = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], Wt = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function Zt({ value: n, range: o = !1, timepicker: d = !1, onChange: l, style: f }) {
+  const a = /* @__PURE__ */ new Date(), h = n ? new Date(Array.isArray(n) ? n[0] : n) : a, [u, x] = N(h), [w, r] = N(n ?? (o ? [null, null] : null)), [i, c] = N(null), [m, S] = N({ h: 0, m: 0 });
+  _(q, []);
+  const s = u.getFullYear(), b = u.getMonth(), M = new Date(s, b, 1).getDay(), D = new Date(s, b + 1, 0).getDate(), R = [];
+  for (let p = 0; p < M; p++) R.push(null);
+  for (let p = 1; p <= D; p++) R.push(new Date(s, b, p));
+  const z = (p) => p.toDateString() === a.toDateString(), C = (p) => {
     if (!w) return !1;
-    if (i && Array.isArray(w)) {
-      const [I, R] = w;
+    if (o && Array.isArray(w)) {
+      const [I, W] = w;
       if (!I) return !1;
-      const C = u.getTime();
-      return R ? C >= I.getTime() && C <= R.getTime() : u.toDateString() === I.toDateString();
+      const v = p.getTime();
+      return W ? v >= I.getTime() && v <= W.getTime() : p.toDateString() === I.toDateString();
     }
-    return u.toDateString() === w.toDateString();
-  }, A = (u) => {
-    if (i) {
-      const [I, R] = Array.isArray(w) ? w : [null, null];
-      if (!I || R)
-        r([u, null]);
+    return p.toDateString() === w.toDateString();
+  }, F = (p) => {
+    if (o) {
+      const [I, W] = Array.isArray(w) ? w : [null, null];
+      if (!I || W)
+        r([p, null]);
       else {
-        const C = u < I ? [u, I] : [I, u];
-        r(C), s == null || s(C);
+        const v = p < I ? [p, I] : [I, p];
+        r(v), l == null || l(v);
       }
     } else
-      r(u), s == null || s(u);
+      r(p), l == null || l(p);
   };
   return /* @__PURE__ */ g("div", { className: "dhx", style: { background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, padding: 16, display: "inline-block", boxShadow: e.shadow, ...f }, children: [
     /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
-      /* @__PURE__ */ t("button", { onClick: () => y((u) => new Date(u.getFullYear(), u.getMonth() - 1, 1)), className: "dhx dhx-btn dhx-btn-ghost", style: { height: 28, padding: "0 8px", fontSize: 16 }, children: "‹" }),
+      /* @__PURE__ */ t("button", { onClick: () => x((p) => new Date(p.getFullYear(), p.getMonth() - 1, 1)), className: "dhx dhx-btn dhx-btn-ghost", style: { height: 28, padding: "0 8px", fontSize: 16 }, children: "‹" }),
       /* @__PURE__ */ g("div", { style: { fontWeight: 700, fontSize: 14 }, children: [
-        ft[x],
+        Rt[b],
         " ",
-        o
+        s
       ] }),
-      /* @__PURE__ */ t("button", { onClick: () => y((u) => new Date(u.getFullYear(), u.getMonth() + 1, 1)), className: "dhx dhx-btn dhx-btn-ghost", style: { height: 28, padding: "0 8px", fontSize: 16 }, children: "›" })
+      /* @__PURE__ */ t("button", { onClick: () => x((p) => new Date(p.getFullYear(), p.getMonth() + 1, 1)), className: "dhx dhx-btn dhx-btn-ghost", style: { height: 28, padding: "0 8px", fontSize: 16 }, children: "›" })
     ] }),
     /* @__PURE__ */ g("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 32px)", gap: 2 }, children: [
-      xt.map((u) => /* @__PURE__ */ t("div", { style: { textAlign: "center", fontSize: 11, fontWeight: 600, color: e.textMut, paddingBottom: 4 }, children: u }, u)),
-      L.map((u, I) => {
-        const R = u ? M(u) : !1, C = u && l && u.toDateString() === l.toDateString();
+      Wt.map((p) => /* @__PURE__ */ t("div", { style: { textAlign: "center", fontSize: 11, fontWeight: 600, color: e.textMut, paddingBottom: 4 }, children: p }, p)),
+      R.map((p, I) => {
+        const W = p ? C(p) : !1, v = p && i && p.toDateString() === i.toDateString();
         return /* @__PURE__ */ t(
           "div",
           {
-            onClick: () => u && A(u),
-            onMouseEnter: () => u && c(u),
+            onClick: () => p && F(p),
+            onMouseEnter: () => p && c(p),
             onMouseLeave: () => c(null),
-            style: { width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: e.r, cursor: u ? "pointer" : "default", fontSize: 12, fontWeight: u && m(u) ? 700 : 400, background: R ? e.primary : C ? e.bg : "transparent", color: R ? "#fff" : u && m(u) ? e.primary : u ? e.text : "transparent", border: u && m(u) && !R ? `1px solid ${e.primary}` : "1px solid transparent", transition: "all .1s" },
-            children: u == null ? void 0 : u.getDate()
+            style: { width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: e.r, cursor: p ? "pointer" : "default", fontSize: 12, fontWeight: p && z(p) ? 700 : 400, background: W ? e.primary : v ? e.bg : "transparent", color: W ? "#fff" : p && z(p) ? e.primary : p ? e.text : "transparent", border: p && z(p) && !W ? `1px solid ${e.primary}` : "1px solid transparent", transition: "all .1s" },
+            children: p == null ? void 0 : p.getDate()
           },
           I
         );
       })
     ] }),
-    p && /* @__PURE__ */ g("div", { style: { borderTop: `1px solid ${e.border}`, marginTop: 12, paddingTop: 12, display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }, children: [
-      /* @__PURE__ */ t("input", { type: "number", min: 0, max: 23, value: b.h, onChange: (u) => S((I) => ({ ...I, h: +u.target.value })), className: "dhx dhx-input", style: { width: 50, textAlign: "center" } }),
+    d && /* @__PURE__ */ g("div", { style: { borderTop: `1px solid ${e.border}`, marginTop: 12, paddingTop: 12, display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }, children: [
+      /* @__PURE__ */ t("input", { type: "number", min: 0, max: 23, value: m.h, onChange: (p) => S((I) => ({ ...I, h: +p.target.value })), className: "dhx dhx-input", style: { width: 50, textAlign: "center" } }),
       /* @__PURE__ */ t("span", { style: { fontWeight: 700, color: e.textSec }, children: ":" }),
-      /* @__PURE__ */ t("input", { type: "number", min: 0, max: 59, value: b.m, onChange: (u) => S((I) => ({ ...I, m: +u.target.value })), className: "dhx dhx-input", style: { width: 50, textAlign: "center" } })
+      /* @__PURE__ */ t("input", { type: "number", min: 0, max: 59, value: m.m, onChange: (p) => S((I) => ({ ...I, m: +p.target.value })), className: "dhx dhx-input", style: { width: 50, textAlign: "center" } })
     ] })
   ] });
 }
-function gt({ value: n, onChange: i, timeFormat: p = 12, controls: s = !1, minuteStep: f = 5, style: a }) {
-  const [h, d] = T((n == null ? void 0 : n.h) ?? (p === 24 ? 0 : 12)), [y, w] = T((n == null ? void 0 : n.m) ?? 0), [r, l] = T((n == null ? void 0 : n.ampm) ?? "AM"), [c, b] = T(null);
-  K(_, []);
-  const S = p === 24 ? Array.from({ length: 24 }, (m, M) => M) : Array.from({ length: 12 }, (m, M) => M + 1), o = Array.from({ length: Math.ceil(60 / f) }, (m, M) => M * f), x = (m, M, A) => {
-    const u = p === 24 ? { h: m, m: M } : { h: m, m: M, ampm: A };
-    s ? b(u) : i == null || i(u);
-  }, k = () => {
-    b(null), d((n == null ? void 0 : n.h) ?? (p === 24 ? 0 : 12)), w((n == null ? void 0 : n.m) ?? 0), l((n == null ? void 0 : n.ampm) ?? "AM");
-  }, $ = { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }, L = (m) => ({
+function At({ value: n, onChange: o, timeFormat: d = 12, controls: l = !1, minuteStep: f = 5, style: a }) {
+  const [h, u] = N((n == null ? void 0 : n.h) ?? (d === 24 ? 0 : 12)), [x, w] = N((n == null ? void 0 : n.m) ?? 0), [r, i] = N((n == null ? void 0 : n.ampm) ?? "AM"), [c, m] = N(null);
+  _(q, []);
+  const S = d === 24 ? Array.from({ length: 24 }, (z, C) => C) : Array.from({ length: 12 }, (z, C) => C + 1), s = Array.from({ length: Math.ceil(60 / f) }, (z, C) => C * f), b = (z, C, F) => {
+    const p = d === 24 ? { h: z, m: C } : { h: z, m: C, ampm: F };
+    l ? m(p) : o == null || o(p);
+  }, M = () => {
+    m(null), u((n == null ? void 0 : n.h) ?? (d === 24 ? 0 : 12)), w((n == null ? void 0 : n.m) ?? 0), i((n == null ? void 0 : n.ampm) ?? "AM");
+  }, D = { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }, R = (z) => ({
     height: 32,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     cursor: "pointer",
     fontSize: 13,
-    fontWeight: m ? 700 : 400,
-    background: m ? e.primaryLt : "transparent",
-    color: m ? e.primary : e.text
+    fontWeight: z ? 700 : 400,
+    background: z ? e.primaryLt : "transparent",
+    color: z ? e.primary : e.text
   });
   return /* @__PURE__ */ g("div", { className: "dhx", style: { background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, padding: 16, display: "inline-block", boxShadow: e.shadow, ...a }, children: [
     /* @__PURE__ */ g("div", { style: { display: "flex", gap: 8, alignItems: "stretch" }, children: [
-      /* @__PURE__ */ g("div", { style: $, children: [
+      /* @__PURE__ */ g("div", { style: D, children: [
         /* @__PURE__ */ t("span", { style: { fontSize: 11, fontWeight: 600, color: e.textMut }, children: "Hours" }),
-        /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { height: 160, overflowY: "auto", width: 48, border: `1px solid ${e.border}`, borderRadius: e.r }, children: S.map((m) => /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { height: 160, overflowY: "auto", width: 48, border: `1px solid ${e.border}`, borderRadius: e.r }, children: S.map((z) => /* @__PURE__ */ t(
           "div",
           {
             onClick: () => {
-              d(m), x(m, y, r);
+              u(z), b(z, x, r);
             },
-            style: L(h === m),
-            onMouseEnter: (M) => h !== m && (M.currentTarget.style.background = e.bg),
-            onMouseLeave: (M) => h !== m && (M.currentTarget.style.background = "transparent"),
-            children: String(m).padStart(2, "0")
+            style: R(h === z),
+            onMouseEnter: (C) => h !== z && (C.currentTarget.style.background = e.bg),
+            onMouseLeave: (C) => h !== z && (C.currentTarget.style.background = "transparent"),
+            children: String(z).padStart(2, "0")
           },
-          m
+          z
         )) })
       ] }),
-      /* @__PURE__ */ g("div", { style: $, children: [
+      /* @__PURE__ */ g("div", { style: D, children: [
         /* @__PURE__ */ t("span", { style: { fontSize: 11, fontWeight: 600, color: e.textMut }, children: "Minutes" }),
-        /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { height: 160, overflowY: "auto", width: 48, border: `1px solid ${e.border}`, borderRadius: e.r }, children: o.map((m) => /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { height: 160, overflowY: "auto", width: 48, border: `1px solid ${e.border}`, borderRadius: e.r }, children: s.map((z) => /* @__PURE__ */ t(
           "div",
           {
             onClick: () => {
-              w(m), x(h, m, r);
+              w(z), b(h, z, r);
             },
-            style: L(y === m),
-            onMouseEnter: (M) => y !== m && (M.currentTarget.style.background = e.bg),
-            onMouseLeave: (M) => y !== m && (M.currentTarget.style.background = "transparent"),
-            children: String(m).padStart(2, "0")
+            style: R(x === z),
+            onMouseEnter: (C) => x !== z && (C.currentTarget.style.background = e.bg),
+            onMouseLeave: (C) => x !== z && (C.currentTarget.style.background = "transparent"),
+            children: String(z).padStart(2, "0")
           },
-          m
+          z
         )) })
       ] }),
-      p === 12 && /* @__PURE__ */ g("div", { style: $, children: [
+      d === 12 && /* @__PURE__ */ g("div", { style: D, children: [
         /* @__PURE__ */ t("span", { style: { fontSize: 11, fontWeight: 600, color: e.textMut }, children: "AM/PM" }),
-        /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", border: `1px solid ${e.border}`, borderRadius: e.r, overflow: "hidden" }, children: ["AM", "PM"].map((m) => /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", border: `1px solid ${e.border}`, borderRadius: e.r, overflow: "hidden" }, children: ["AM", "PM"].map((z) => /* @__PURE__ */ t(
           "div",
           {
             onClick: () => {
-              l(m), x(h, y, m);
+              i(z), b(h, x, z);
             },
-            style: { height: 40, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", padding: "0 12px", fontSize: 13, fontWeight: r === m ? 700 : 400, background: r === m ? e.primary : e.surface, color: r === m ? "#fff" : e.text },
-            children: m
+            style: { height: 40, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", padding: "0 12px", fontSize: 13, fontWeight: r === z ? 700 : 400, background: r === z ? e.primary : e.surface, color: r === z ? "#fff" : e.text },
+            children: z
           },
-          m
+          z
         )) })
       ] })
     ] }),
     /* @__PURE__ */ g("div", { style: { textAlign: "center", marginTop: 12, fontSize: 22, fontWeight: 700, color: e.primary, letterSpacing: 2 }, children: [
       String(h).padStart(2, "0"),
       ":",
-      String(y).padStart(2, "0"),
-      p === 12 ? ` ${r}` : ""
+      String(x).padStart(2, "0"),
+      d === 12 ? ` ${r}` : ""
     ] }),
-    s && /* @__PURE__ */ g("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 12 }, children: [
-      /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: k, children: "Cancel" }),
+    l && /* @__PURE__ */ g("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 12 }, children: [
+      /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: M, children: "Cancel" }),
       /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-primary", onClick: () => {
-        const m = c ?? (p === 24 ? { h, m: y } : { h, m: y, ampm: r });
-        i == null || i(m);
+        const z = c ?? (d === 24 ? { h, m: x } : { h, m: x, ampm: r });
+        o == null || o(z);
       }, children: "Apply" })
     ] })
   ] });
 }
-const yt = ({ open: n }) => /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 12 12", style: { flexShrink: 0, transition: "transform .15s", transform: n ? "rotate(180deg)" : "rotate(0deg)" }, children: /* @__PURE__ */ t("path", { d: "M2 4l4 4 4-4", stroke: e.textMut, strokeWidth: "1.5", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) });
-function $e({ data: n = [], value: i, placeholder: p = "Select or type...", multiselection: s = !1, label: f, onChange: a, style: h }) {
-  var A;
-  const [d, y] = T(!1), [w, r] = T(""), [l, c] = T(
-    s ? i ? [].concat(i) : [] : i || null
-  ), b = U(null), S = U(null);
-  K(_, []), he(b, Z(() => {
-    y(!1), r("");
+const Bt = ({ open: n }) => /* @__PURE__ */ t("svg", { width: "12", height: "12", viewBox: "0 0 12 12", style: { flexShrink: 0, transition: "transform .15s", transform: n ? "rotate(180deg)" : "rotate(0deg)" }, children: /* @__PURE__ */ t("path", { d: "M2 4l4 4 4-4", stroke: e.textMut, strokeWidth: "1.5", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function Be({ data: n = [], value: o, placeholder: d = "Select or type...", multiselection: l = !1, label: f, onChange: a, style: h }) {
+  var F;
+  const [u, x] = N(!1), [w, r] = N(""), [i, c] = N(
+    l ? o ? [].concat(o) : [] : o || null
+  ), m = oe(null), S = oe(null);
+  _(q, []), ge(m, ae(() => {
+    x(!1), r("");
   }, []));
-  const o = ue(
-    () => n.filter((u) => !w || u.value.toLowerCase().includes(w.toLowerCase())),
+  const s = ue(
+    () => n.filter((p) => !w || p.value.toLowerCase().includes(w.toLowerCase())),
     [n, w]
-  ), x = (u) => s ? (l || []).includes(u) : l === u, k = (u) => {
-    const I = u.id || u.value;
-    if (s) {
-      const R = x(I) ? l.filter((C) => C !== I) : [...l || [], I];
-      c(R), a == null || a(R);
+  ), b = (p) => l ? (i || []).includes(p) : i === p, M = (p) => {
+    const I = p.id || p.value;
+    if (l) {
+      const W = b(I) ? i.filter((v) => v !== I) : [...i || [], I];
+      c(W), a == null || a(W);
     } else
-      c(I), r(""), y(!1), a == null || a(I);
-  }, $ = (u) => {
-    const I = l.filter((R) => R !== u);
+      c(I), r(""), x(!1), a == null || a(I);
+  }, D = (p) => {
+    const I = i.filter((W) => W !== p);
     c(I), a == null || a(I);
-  }, L = () => {
-    y(!0), setTimeout(() => {
-      var u;
-      return (u = S.current) == null ? void 0 : u.focus();
+  }, R = () => {
+    x(!0), setTimeout(() => {
+      var p;
+      return (p = S.current) == null ? void 0 : p.focus();
     }, 0);
-  }, m = ((A = n.find((u) => (u.id || u.value) === l)) == null ? void 0 : A.value) || "", M = s ? l || [] : [];
-  return /* @__PURE__ */ g("div", { ref: b, className: "dhx", style: { position: "relative", ...h }, children: [
+  }, z = ((F = n.find((p) => (p.id || p.value) === i)) == null ? void 0 : F.value) || "", C = l ? i || [] : [];
+  return /* @__PURE__ */ g("div", { ref: m, className: "dhx", style: { position: "relative", ...h }, children: [
     f && /* @__PURE__ */ t("label", { className: "dhx dhx-label", children: f }),
     /* @__PURE__ */ g(
       "div",
       {
-        onClick: L,
+        onClick: R,
         style: {
           display: "flex",
           alignItems: "center",
-          flexWrap: s ? "wrap" : "nowrap",
-          border: `1px solid ${d ? e.primary : e.border}`,
+          flexWrap: l ? "wrap" : "nowrap",
+          border: `1px solid ${u ? e.primary : e.border}`,
           borderRadius: e.r,
           minHeight: 34,
           padding: "4px 8px",
@@ -1138,11 +1528,11 @@ function $e({ data: n = [], value: i, placeholder: p = "Select or type...", mult
           background: e.surface,
           gap: 4,
           transition: "border-color .15s",
-          boxShadow: d ? `0 0 0 3px ${e.primary}22` : "none"
+          boxShadow: u ? `0 0 0 3px ${e.primary}22` : "none"
         },
         children: [
-          s && /* @__PURE__ */ g(Ne, { children: [
-            M.map((u) => {
+          l && /* @__PURE__ */ g(Ye, { children: [
+            C.map((p) => {
               var I;
               return /* @__PURE__ */ g("span", { style: {
                 display: "inline-flex",
@@ -1156,55 +1546,55 @@ function $e({ data: n = [], value: i, placeholder: p = "Select or type...", mult
                 lineHeight: 1.5,
                 whiteSpace: "nowrap"
               }, children: [
-                ((I = n.find((R) => (R.id || R.value) === u)) == null ? void 0 : I.value) || u,
+                ((I = n.find((W) => (W.id || W.value) === p)) == null ? void 0 : I.value) || p,
                 /* @__PURE__ */ t(
                   "span",
                   {
-                    onClick: (R) => {
-                      R.stopPropagation(), $(u);
+                    onClick: (W) => {
+                      W.stopPropagation(), D(p);
                     },
                     style: { cursor: "pointer", fontSize: 15, lineHeight: 1, opacity: 0.75, marginLeft: 2 },
                     children: "×"
                   }
                 )
-              ] }, u);
+              ] }, p);
             }),
             /* @__PURE__ */ t(
               "input",
               {
                 ref: S,
                 value: w,
-                onChange: (u) => {
-                  r(u.target.value), y(!0);
+                onChange: (p) => {
+                  r(p.target.value), x(!0);
                 },
-                onFocus: () => y(!0),
-                onClick: (u) => u.stopPropagation(),
-                placeholder: M.length ? "" : p,
+                onFocus: () => x(!0),
+                onClick: (p) => p.stopPropagation(),
+                placeholder: C.length ? "" : d,
                 style: { flex: 1, minWidth: 60, border: "none", outline: "none", fontSize: 13, background: "transparent", color: e.text, padding: 0 }
               }
             )
           ] }),
-          !s && /* @__PURE__ */ t(
+          !l && /* @__PURE__ */ t(
             "input",
             {
               ref: S,
-              value: d ? w : m,
-              onChange: (u) => {
-                r(u.target.value), y(!0);
+              value: u ? w : z,
+              onChange: (p) => {
+                r(p.target.value), x(!0);
               },
               onFocus: () => {
-                y(!0), r("");
+                x(!0), r("");
               },
-              onClick: (u) => u.stopPropagation(),
-              placeholder: p,
+              onClick: (p) => p.stopPropagation(),
+              placeholder: d,
               style: { flex: 1, border: "none", outline: "none", fontSize: 13, background: "transparent", color: e.text, padding: 0 }
             }
           ),
-          /* @__PURE__ */ t(yt, { open: d })
+          /* @__PURE__ */ t(Bt, { open: u })
         ]
       }
     ),
-    d && /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: {
+    u && /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: {
       position: "absolute",
       top: "calc(100% + 4px)",
       left: 0,
@@ -1215,12 +1605,12 @@ function $e({ data: n = [], value: i, placeholder: p = "Select or type...", mult
       boxShadow: e.shadowLg,
       zIndex: 100
     }, children: /* @__PURE__ */ g("div", { className: "dhx-scroll", style: { maxHeight: 220, overflowY: "auto" }, children: [
-      o.map((u) => {
-        const I = u.id || u.value, R = x(I);
+      s.map((p) => {
+        const I = p.id || p.value, W = b(I);
         return /* @__PURE__ */ g(
           "div",
           {
-            onClick: () => k(u),
+            onClick: () => M(p),
             style: {
               padding: "8px 12px",
               cursor: "pointer",
@@ -1228,28 +1618,28 @@ function $e({ data: n = [], value: i, placeholder: p = "Select or type...", mult
               alignItems: "center",
               gap: 8,
               fontSize: 13,
-              background: R ? e.primaryLt : "transparent",
-              color: R ? e.primary : e.text
+              background: W ? e.primaryLt : "transparent",
+              color: W ? e.primary : e.text
             },
-            onMouseEnter: (C) => !R && (C.currentTarget.style.background = e.bg),
-            onMouseLeave: (C) => !R && (C.currentTarget.style.background = "transparent"),
+            onMouseEnter: (v) => !W && (v.currentTarget.style.background = e.bg),
+            onMouseLeave: (v) => !W && (v.currentTarget.style.background = "transparent"),
             children: [
-              s && /* @__PURE__ */ t("span", { style: {
+              l && /* @__PURE__ */ t("span", { style: {
                 width: 14,
                 height: 14,
                 flexShrink: 0,
-                border: `2px solid ${R ? e.primary : e.borderDk}`,
+                border: `2px solid ${W ? e.primary : e.borderDk}`,
                 borderRadius: 3,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                background: R ? e.primary : "transparent"
-              }, children: R && /* @__PURE__ */ t("span", { style: { color: "#fff", fontSize: 9, lineHeight: 1 }, children: "✓" }) }),
-              /* @__PURE__ */ t("span", { style: { flex: 1 }, children: u.value }),
-              !s && R && /* @__PURE__ */ t("span", { style: { color: e.primary, fontSize: 12, fontWeight: 700 }, children: "✓" }),
-              u.count !== void 0 && /* @__PURE__ */ g("span", { style: { fontSize: 11, color: e.textMut }, children: [
+                background: W ? e.primary : "transparent"
+              }, children: W && /* @__PURE__ */ t("span", { style: { color: "#fff", fontSize: 9, lineHeight: 1 }, children: "✓" }) }),
+              /* @__PURE__ */ t("span", { style: { flex: 1 }, children: p.value }),
+              !l && W && /* @__PURE__ */ t("span", { style: { color: e.primary, fontSize: 12, fontWeight: 700 }, children: "✓" }),
+              p.count !== void 0 && /* @__PURE__ */ g("span", { style: { fontSize: 11, color: e.textMut }, children: [
                 "(",
-                u.count,
+                p.count,
                 ")"
               ] })
             ]
@@ -1257,84 +1647,84 @@ function $e({ data: n = [], value: i, placeholder: p = "Select or type...", mult
           I
         );
       }),
-      o.length === 0 && /* @__PURE__ */ t("div", { style: { padding: 16, textAlign: "center", color: e.textMut, fontSize: 13 }, children: "No matches" })
+      s.length === 0 && /* @__PURE__ */ t("div", { style: { padding: 16, textAlign: "center", color: e.textMut, fontSize: 13 }, children: "No matches" })
     ] }) })
   ] });
 }
-function De({ min: n = 0, max: i = 100, step: p = 1, value: s, range: f = !1, label: a, tick: h, disabled: d = !1, onChange: y, style: w }) {
-  const [r, l] = T(s ?? (f ? [n, i] : n));
-  K(_, []);
-  const c = (k, $) => {
-    if (!d)
+function He({ min: n = 0, max: o = 100, step: d = 1, value: l, range: f = !1, label: a, tick: h, disabled: u = !1, onChange: x, style: w }) {
+  const [r, i] = N(l ?? (f ? [n, o] : n));
+  _(q, []);
+  const c = (M, D) => {
+    if (!u)
       if (f) {
-        const L = [...r];
-        L[k] = $, l(L), y == null || y(L);
+        const R = [...r];
+        R[M] = D, i(R), x == null || x(R);
       } else
-        l($), y == null || y($);
-  }, b = (k) => (k - n) / (i - n) * 100, S = f ? r : [r], o = f ? { left: `${b(S[0])}%`, width: `${b(S[1]) - b(S[0])}%` } : { left: 0, width: `${b(S[0])}%` }, x = d ? e.border : e.primary;
-  return /* @__PURE__ */ g("div", { className: "dhx", style: { width: "100%", opacity: d ? 0.5 : 1, ...w }, children: [
+        i(D), x == null || x(D);
+  }, m = (M) => (M - n) / (o - n) * 100, S = f ? r : [r], s = f ? { left: `${m(S[0])}%`, width: `${m(S[1]) - m(S[0])}%` } : { left: 0, width: `${m(S[0])}%` }, b = u ? e.border : e.primary;
+  return /* @__PURE__ */ g("div", { className: "dhx", style: { width: "100%", opacity: u ? 0.5 : 1, ...w }, children: [
     a && /* @__PURE__ */ t("label", { className: "dhx dhx-label", children: a }),
     /* @__PURE__ */ t("div", { style: { position: "relative", height: 36, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ g("div", { style: { position: "relative", flex: 1, height: 4, background: e.border, borderRadius: 2 }, children: [
-      /* @__PURE__ */ t("div", { style: { position: "absolute", ...o, height: "100%", background: x, borderRadius: 2 } }),
-      S.map((k, $) => /* @__PURE__ */ t(
+      /* @__PURE__ */ t("div", { style: { position: "absolute", ...s, height: "100%", background: b, borderRadius: 2 } }),
+      S.map((M, D) => /* @__PURE__ */ t(
         "input",
         {
           type: "range",
           min: n,
-          max: i,
-          step: p,
-          value: k,
-          disabled: d,
-          onChange: (L) => {
-            const m = +L.target.value;
-            f && $ === 0 && m >= r[1] || f && $ === 1 && m <= r[0] || c($, m);
+          max: o,
+          step: d,
+          value: M,
+          disabled: u,
+          onChange: (R) => {
+            const z = +R.target.value;
+            f && D === 0 && z >= r[1] || f && D === 1 && z <= r[0] || c(D, z);
           },
-          style: { position: "absolute", width: "100%", height: "100%", opacity: 0, cursor: d ? "not-allowed" : "pointer", top: 0, left: 0, margin: 0 }
+          style: { position: "absolute", width: "100%", height: "100%", opacity: 0, cursor: u ? "not-allowed" : "pointer", top: 0, left: 0, margin: 0 }
         },
-        $
+        D
       )),
-      S.map((k, $) => /* @__PURE__ */ t("div", { style: { position: "absolute", left: `${b(k)}%`, top: "50%", transform: "translate(-50%, -50%)", width: 16, height: 16, borderRadius: "50%", background: e.surface, border: `2px solid ${x}`, 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: d ? e.textMut : e.primaryDk, color: "#fff", padding: "2px 6px", borderRadius: e.r, fontSize: 11, fontWeight: 700, whiteSpace: "nowrap" }, children: k }) }, $))
+      S.map((M, D) => /* @__PURE__ */ t("div", { style: { position: "absolute", left: `${m(M)}%`, top: "50%", transform: "translate(-50%, -50%)", width: 16, height: 16, borderRadius: "50%", background: e.surface, border: `2px solid ${b}`, 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: u ? e.textMut : e.primaryDk, color: "#fff", padding: "2px 6px", borderRadius: e.r, fontSize: 11, fontWeight: 700, whiteSpace: "nowrap" }, children: M }) }, D))
     ] }) }),
-    h && /* @__PURE__ */ t("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 2 }, children: [n, Math.round((i + n) / 2), i].map((k) => /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: k }, k)) })
+    h && /* @__PURE__ */ t("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 2 }, children: [n, Math.round((o + n) / 2), o].map((M) => /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: M }, M)) })
   ] });
 }
-const bt = ["#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 ye(n) {
-  const i = parseInt(n.slice(1, 3), 16) / 255, p = parseInt(n.slice(3, 5), 16) / 255, s = parseInt(n.slice(5, 7), 16) / 255, f = Math.max(i, p, s), a = Math.min(i, p, s);
-  let h = 0, d = 0;
-  const y = (f + a) / 2;
+const Ht = ["#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 we(n) {
+  const o = parseInt(n.slice(1, 3), 16) / 255, d = parseInt(n.slice(3, 5), 16) / 255, l = parseInt(n.slice(5, 7), 16) / 255, f = Math.max(o, d, l), a = Math.min(o, d, l);
+  let h = 0, u = 0;
+  const x = (f + a) / 2;
   if (f !== a) {
     const w = f - a;
-    d = y > 0.5 ? w / (2 - f - a) : w / (f + a), h = f === i ? ((p - s) / w + (p < s ? 6 : 0)) / 6 : f === p ? ((s - i) / w + 2) / 6 : ((i - p) / w + 4) / 6;
+    u = x > 0.5 ? w / (2 - f - a) : w / (f + a), h = f === o ? ((d - l) / w + (d < l ? 6 : 0)) / 6 : f === d ? ((l - o) / w + 2) / 6 : ((o - d) / w + 4) / 6;
   }
-  return [Math.round(h * 360), Math.round(d * 100), Math.round(y * 100)];
+  return [Math.round(h * 360), Math.round(u * 100), Math.round(x * 100)];
 }
-function Ce(n, i, p) {
-  i /= 100, p /= 100;
-  const s = i * Math.min(p, 1 - p), f = (a) => {
-    const h = (a + n / 30) % 12, d = p - s * Math.max(Math.min(h - 3, 9 - h, 1), -1);
-    return Math.round(255 * d).toString(16).padStart(2, "0");
+function je(n, o, d) {
+  o /= 100, d /= 100;
+  const l = o * Math.min(d, 1 - d), f = (a) => {
+    const h = (a + n / 30) % 12, u = d - l * Math.max(Math.min(h - 3, 9 - h, 1), -1);
+    return Math.round(255 * u).toString(16).padStart(2, "0");
   };
   return "#" + f(0) + f(8) + f(4);
 }
-function Et({ value: n = "#0288d1", onChange: i, style: p }) {
-  const [s, f] = T(() => ye(n)), a = Ce(...s);
-  K(_, []);
-  const h = (d) => {
-    f(d), i == null || i(Ce(...d));
+function en({ value: n = "#0288d1", onChange: o, style: d }) {
+  const [l, f] = N(() => we(n)), a = je(...l);
+  _(q, []);
+  const h = (u) => {
+    f(u), o == null || o(je(...u));
   };
-  return /* @__PURE__ */ g("div", { className: "dhx", style: { background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, padding: 16, display: "inline-block", boxShadow: e.shadow, ...p }, 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(${s[0]},100%,50%))`, cursor: "crosshair" } }),
-    [["Hue", 0, 360, s[0]], ["Saturation", 0, 100, s[1]], ["Lightness", 0, 100, s[2]]].map(([d, y, w, r], l) => /* @__PURE__ */ g("div", { style: { marginBottom: l < 2 ? 8 : 12 }, children: [
+  return /* @__PURE__ */ g("div", { className: "dhx", style: { background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, padding: 16, display: "inline-block", boxShadow: e.shadow, ...d }, 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(${l[0]},100%,50%))`, cursor: "crosshair" } }),
+    [["Hue", 0, 360, l[0]], ["Saturation", 0, 100, l[1]], ["Lightness", 0, 100, l[2]]].map(([u, x, w, r], i) => /* @__PURE__ */ g("div", { style: { marginBottom: i < 2 ? 8 : 12 }, children: [
       /* @__PURE__ */ g("div", { className: "dhx dhx-label", children: [
-        d,
-        l > 0 ? ` (${r}%)` : ""
+        u,
+        i > 0 ? ` (${r}%)` : ""
       ] }),
-      /* @__PURE__ */ t("input", { type: "range", min: y, max: w, value: r, onChange: (c) => {
-        const b = [...s];
-        b[l] = +c.target.value, h(b);
+      /* @__PURE__ */ t("input", { type: "range", min: x, max: w, value: r, onChange: (c) => {
+        const m = [...l];
+        m[i] = +c.target.value, h(m);
       }, style: { width: "100%", accentColor: e.primary } })
-    ] }, d)),
+    ] }, u)),
     /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }, children: [
       /* @__PURE__ */ t("div", { style: { width: 36, height: 36, borderRadius: e.r, background: a, border: `1px solid ${e.border}`, flexShrink: 0 } }),
       /* @__PURE__ */ t(
@@ -1343,162 +1733,162 @@ function Et({ value: n = "#0288d1", onChange: i, style: p }) {
           className: "dhx dhx-input",
           style: { flex: 1, fontFamily: "monospace", fontSize: 12 },
           value: a,
-          onChange: (d) => {
+          onChange: (u) => {
             try {
-              h(ye(d.target.value)), i == null || i(d.target.value);
+              h(we(u.target.value)), o == null || o(u.target.value);
             } catch {
             }
           }
         }
       )
     ] }),
-    /* @__PURE__ */ t("div", { style: { display: "grid", gridTemplateColumns: "repeat(13, 1fr)", gap: 3 }, children: bt.map((d) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { style: { display: "grid", gridTemplateColumns: "repeat(13, 1fr)", gap: 3 }, children: Ht.map((u) => /* @__PURE__ */ t(
       "div",
       {
         onClick: () => {
-          f(ye(d)), i == null || i(d);
+          f(we(u)), o == null || o(u);
         },
-        style: { width: 14, height: 14, borderRadius: 2, background: d, cursor: "pointer", border: a === d ? `2px solid ${e.text}` : "1px solid rgba(0,0,0,.15)", transition: "transform .1s" },
-        onMouseEnter: (y) => y.currentTarget.style.transform = "scale(1.3)",
-        onMouseLeave: (y) => y.currentTarget.style.transform = "scale(1)"
+        style: { width: 14, height: 14, borderRadius: 2, background: u, cursor: "pointer", border: a === u ? `2px solid ${e.text}` : "1px solid rgba(0,0,0,.15)", transition: "transform .1s" },
+        onMouseEnter: (x) => x.currentTarget.style.transform = "scale(1.3)",
+        onMouseLeave: (x) => x.currentTarget.style.transform = "scale(1)"
       },
-      d
+      u
     )) })
   ] });
 }
-function Wt({ trigger: n, children: i, placement: p = "bottom-start", style: s }) {
-  const [f, a] = T(!1), [h, d] = T({ top: "100%", left: 0 }), y = U(null), w = U(null);
-  return K(_, []), he(y, Z(() => a(!1), [])), /* @__PURE__ */ g("div", { ref: y, className: "dhx", style: { position: "relative", display: "inline-block" }, children: [
+function tn({ trigger: n, children: o, placement: d = "bottom-start", style: l }) {
+  const [f, a] = N(!1), [h, u] = N({ top: "100%", left: 0 }), x = oe(null), w = oe(null);
+  return _(q, []), ge(x, ae(() => a(!1), [])), /* @__PURE__ */ g("div", { ref: x, className: "dhx", style: { position: "relative", display: "inline-block" }, children: [
     /* @__PURE__ */ t("div", { ref: w, onClick: () => {
-      a((l) => {
-        if (!l && w.current) {
-          const c = w.current.getBoundingClientRect(), b = {
+      a((i) => {
+        if (!i && w.current) {
+          const c = w.current.getBoundingClientRect(), m = {
             "bottom-start": { top: c.height + 4, left: 0 },
             "bottom-end": { top: c.height + 4, right: 0, left: "auto" },
             "top-start": { bottom: c.height + 4, top: "auto", left: 0 }
           };
-          d(b[p] || b["bottom-start"]);
+          u(m[d] || m["bottom-start"]);
         }
-        return !l;
+        return !i;
       });
     }, children: n }),
-    f && /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: { position: "absolute", ...h, zIndex: 200, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, boxShadow: e.shadowLg, ...s }, children: i })
+    f && /* @__PURE__ */ t("div", { className: "dhx dhx-anim-fade", style: { position: "absolute", ...h, zIndex: 200, background: e.surface, border: `1px solid ${e.border}`, borderRadius: e.rMd, boxShadow: e.shadowLg, ...l }, children: o })
   ] });
 }
-function At({ title: n, children: i, width: p = 480, height: s, closable: f = !0, movable: a = !0, modal: h = !1, defaultOpen: d = !0, footer: y, onClose: w, style: r }) {
-  const [l, c] = T(d), [b, S] = T({ x: 0, y: 0 });
-  K(_, []);
-  const o = dt(Z((k, $) => a && S({ x: k, y: $ }), [a])), x = () => {
+function nn({ title: n, children: o, width: d = 480, height: l, closable: f = !0, movable: a = !0, modal: h = !1, defaultOpen: u = !0, footer: x, onClose: w, style: r }) {
+  const [i, c] = N(u), [m, S] = N({ x: 0, y: 0 });
+  _(q, []);
+  const s = St(ae((M, D) => a && S({ x: M, y: D }), [a])), b = () => {
     c(!1), w == null || w();
   };
-  return l ? /* @__PURE__ */ g(Ne, { children: [
-    h && /* @__PURE__ */ t("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,.45)", zIndex: 900 }, onClick: f ? x : void 0 }),
-    /* @__PURE__ */ g("div", { className: "dhx", style: { position: h ? "fixed" : "absolute", left: "50%", top: "50%", transform: `translate(calc(-50% + ${b.x}px), calc(-50% + ${b.y}px))`, width: p, ...s ? { height: s } : {}, background: e.surface, borderRadius: e.rMd, boxShadow: e.shadowLg, zIndex: 901, display: "flex", flexDirection: "column", overflow: "hidden", ...r }, children: [
-      /* @__PURE__ */ g("div", { onMouseDown: (k) => o(k, b.x, b.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: [
+  return i ? /* @__PURE__ */ g(Ye, { children: [
+    h && /* @__PURE__ */ t("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,.45)", zIndex: 900 }, onClick: f ? b : void 0 }),
+    /* @__PURE__ */ g("div", { className: "dhx", style: { position: h ? "fixed" : "absolute", left: "50%", top: "50%", transform: `translate(calc(-50% + ${m.x}px), calc(-50% + ${m.y}px))`, width: d, ...l ? { height: l } : {}, background: e.surface, borderRadius: e.rMd, boxShadow: e.shadowLg, zIndex: 901, display: "flex", flexDirection: "column", overflow: "hidden", ...r }, children: [
+      /* @__PURE__ */ g("div", { onMouseDown: (M) => s(M, m.x, m.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: n }),
         f && /* @__PURE__ */ t(
           "button",
           {
-            onClick: x,
+            onClick: b,
             style: { background: "none", border: "none", cursor: "pointer", width: 28, height: 28, borderRadius: e.r, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18, color: e.textSec },
-            onMouseEnter: (k) => k.currentTarget.style.background = e.border,
-            onMouseLeave: (k) => k.currentTarget.style.background = "none",
+            onMouseEnter: (M) => M.currentTarget.style.background = e.border,
+            onMouseLeave: (M) => M.currentTarget.style.background = "none",
             children: "×"
           }
         )
       ] }),
-      /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { flex: 1, minHeight: 0, padding: 20, overflowY: "auto" }, children: i }),
-      y && /* @__PURE__ */ t("div", { style: { padding: "12px 16px", borderTop: `1px solid ${e.border}`, display: "flex", justifyContent: "flex-end", gap: 8, background: e.bg }, children: y })
+      /* @__PURE__ */ t("div", { className: "dhx-scroll", style: { flex: 1, minHeight: 0, padding: 20, overflowY: "auto" }, children: o }),
+      x && /* @__PURE__ */ t("div", { style: { padding: "12px 16px", borderTop: `1px solid ${e.border}`, display: "flex", justifyContent: "flex-end", gap: 8, background: e.bg }, children: x })
     ] })
   ] }) : null;
 }
-const Re = Pe(null), mt = { success: "✓", error: "✕", warning: "⚠", info: "ℹ" }, Ie = { success: e.success, error: e.danger, warning: e.warning, info: e.primary };
-function Bt({ children: n }) {
-  const [i, p] = T([]);
-  K(_, []);
-  const s = Z((h) => p((d) => d.filter((y) => y.id !== h)), []), f = Z((h) => {
-    const d = Date.now();
-    return p((y) => [...y, { id: d, ...h }]), h.duration !== 0 && setTimeout(() => s(d), h.duration || 4e3), d;
-  }, [s]), a = {
+const Ke = Qe(null), jt = { success: "✓", error: "✕", warning: "⚠", info: "ℹ" }, Fe = { success: e.success, error: e.danger, warning: e.warning, info: e.primary };
+function rn({ children: n }) {
+  const [o, d] = N([]);
+  _(q, []);
+  const l = ae((h) => d((u) => u.filter((x) => x.id !== h)), []), f = ae((h) => {
+    const u = Date.now();
+    return d((x) => [...x, { id: u, ...h }]), h.duration !== 0 && setTimeout(() => l(u), h.duration || 4e3), u;
+  }, [l]), a = {
     message: f,
-    alert: (h, d) => f({ type: "info", title: h, ...d }),
-    confirm: (h, d, y) => f({ type: "warning", title: h, confirm: d, ...y })
+    alert: (h, u) => f({ type: "info", title: h, ...u }),
+    confirm: (h, u, x) => f({ type: "warning", title: h, confirm: u, ...x })
   };
-  return /* @__PURE__ */ g(Re.Provider, { value: a, children: [
+  return /* @__PURE__ */ g(Ke.Provider, { value: a, children: [
     n,
-    /* @__PURE__ */ t("div", { style: { position: "fixed", top: 20, right: 20, zIndex: 9999, display: "flex", flexDirection: "column", gap: 8, pointerEvents: "none" }, children: i.map((h) => {
-      const d = h.type || "info";
-      return /* @__PURE__ */ g("div", { style: { background: e.surface, border: `1px solid ${e.border}`, borderLeft: `4px solid ${Ie[d]}`, 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: Ie[d], lineHeight: 1 }, children: mt[d] }),
+    /* @__PURE__ */ t("div", { style: { position: "fixed", top: 20, right: 20, zIndex: 9999, display: "flex", flexDirection: "column", gap: 8, pointerEvents: "none" }, children: o.map((h) => {
+      const u = h.type || "info";
+      return /* @__PURE__ */ g("div", { style: { background: e.surface, border: `1px solid ${e.border}`, borderLeft: `4px solid ${Fe[u]}`, 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: Fe[u], lineHeight: 1 }, children: jt[u] }),
         /* @__PURE__ */ g("div", { style: { flex: 1 }, children: [
           h.title && /* @__PURE__ */ t("div", { style: { fontWeight: 600, fontSize: 13, marginBottom: h.text ? 3 : 0 }, children: h.title }),
           h.text && /* @__PURE__ */ t("div", { style: { fontSize: 12, color: e.textSec, lineHeight: 1.5 }, children: h.text }),
           h.confirm && /* @__PURE__ */ g("div", { style: { display: "flex", gap: 6, marginTop: 8 }, children: [
             /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-primary", style: { height: 26, fontSize: 12 }, onClick: () => {
-              h.confirm(!0), s(h.id);
+              h.confirm(!0), l(h.id);
             }, children: "Confirm" }),
             /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-secondary", style: { height: 26, fontSize: 12 }, onClick: () => {
-              h.confirm(!1), s(h.id);
+              h.confirm(!1), l(h.id);
             }, children: "Cancel" })
           ] })
         ] }),
-        /* @__PURE__ */ t("button", { onClick: () => s(h.id), style: { background: "none", border: "none", cursor: "pointer", color: e.textMut, fontSize: 14, lineHeight: 1, padding: 0 }, children: "×" })
+        /* @__PURE__ */ t("button", { onClick: () => l(h.id), style: { background: "none", border: "none", cursor: "pointer", color: e.textMut, fontSize: 14, lineHeight: 1, padding: 0 }, children: "×" })
       ] }, h.id);
     }) })
   ] });
 }
-function Ht() {
-  const n = je(Re);
+function on() {
+  const n = Ze(Ke);
   if (!n) throw new Error("useMessage must be used inside <MessageProvider>");
   return n;
 }
-function Pt({ data: n = [], template: i, keyNavigation: p = !0, multiselection: s = !1, editable: f = !1, height: a = 400, onSelect: h, onEdit: d, style: y }) {
-  const [w, r] = T(/* @__PURE__ */ new Set()), [l, c] = T(null), [b, S] = T(""), [o, x] = T(null);
-  K(_, []);
-  const k = (L, m) => {
-    const M = L.id ?? m;
-    r((A) => {
-      const u = s ? new Set(A) : /* @__PURE__ */ new Set();
-      return u.has(M) ? u.delete(M) : u.add(M), u;
-    }), x(m), h == null || h(L);
-  }, $ = (L, m) => {
-    d == null || d({ ...L, value: b }, m), c(null);
+function ln({ data: n = [], template: o, keyNavigation: d = !0, multiselection: l = !1, editable: f = !1, height: a = 400, onSelect: h, onEdit: u, style: x }) {
+  const [w, r] = N(/* @__PURE__ */ new Set()), [i, c] = N(null), [m, S] = N(""), [s, b] = N(null);
+  _(q, []);
+  const M = (R, z) => {
+    const C = R.id ?? z;
+    r((F) => {
+      const p = l ? new Set(F) : /* @__PURE__ */ new Set();
+      return p.has(C) ? p.delete(C) : p.add(C), p;
+    }), b(z), h == null || h(R);
+  }, D = (R, z) => {
+    u == null || u({ ...R, value: m }, z), c(null);
   };
   return /* @__PURE__ */ g(
     "div",
     {
       className: "dhx dhx-scroll",
-      style: { height: a, overflowY: "auto", border: `1px solid ${e.border}`, borderRadius: e.r, background: e.surface, ...y },
+      style: { height: a, overflowY: "auto", border: `1px solid ${e.border}`, borderRadius: e.r, background: e.surface, ...x },
       tabIndex: 0,
-      onKeyDown: (L) => {
-        p && (L.key === "ArrowDown" && x((m) => Math.min((m ?? -1) + 1, n.length - 1)), L.key === "ArrowUp" && x((m) => Math.max((m ?? 1) - 1, 0)));
+      onKeyDown: (R) => {
+        d && (R.key === "ArrowDown" && b((z) => Math.min((z ?? -1) + 1, n.length - 1)), R.key === "ArrowUp" && b((z) => Math.max((z ?? 1) - 1, 0)));
       },
       children: [
-        n.map((L, m) => {
-          const M = L.id ?? m, A = w.has(M), u = o === m;
+        n.map((R, z) => {
+          const C = R.id ?? z, F = w.has(C), p = s === z;
           return /* @__PURE__ */ t(
             "div",
             {
-              onClick: () => k(L, m),
-              onDoubleClick: () => f && (c(m), S(String(L.value || ""))),
-              style: { display: "flex", alignItems: "center", padding: "0 12px", height: 40, cursor: "pointer", fontSize: 13, borderBottom: `1px solid ${e.border}`, background: A ? e.primaryLt : u ? e.bg : e.surface, color: A ? e.primary : e.text, outline: u ? `2px solid ${e.primary}44` : "none", transition: "background .1s" },
-              children: l === m ? /* @__PURE__ */ t(
+              onClick: () => M(R, z),
+              onDoubleClick: () => f && (c(z), S(String(R.value || ""))),
+              style: { display: "flex", alignItems: "center", padding: "0 12px", height: 40, cursor: "pointer", fontSize: 13, borderBottom: `1px solid ${e.border}`, background: F ? e.primaryLt : p ? e.bg : e.surface, color: F ? e.primary : e.text, outline: p ? `2px solid ${e.primary}44` : "none", transition: "background .1s" },
+              children: i === z ? /* @__PURE__ */ t(
                 "input",
                 {
                   autoFocus: !0,
                   className: "dhx dhx-input",
                   style: { height: 28, flex: 1 },
-                  value: b,
+                  value: m,
                   onChange: (I) => S(I.target.value),
-                  onBlur: () => $(L, m),
+                  onBlur: () => D(R, z),
                   onKeyDown: (I) => {
-                    I.key === "Enter" && $(L, m), I.key === "Escape" && c(null);
+                    I.key === "Enter" && D(R, z), I.key === "Escape" && c(null);
                   },
                   onClick: (I) => I.stopPropagation()
                 }
-              ) : i ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: i(L) }, style: { flex: 1 } }) : /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: String(L.value ?? "") })
+              ) : o ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: o(R) }, style: { flex: 1 } }) : /* @__PURE__ */ t("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: String(R.value ?? "") })
             },
-            String(M)
+            String(C)
           );
         }),
         n.length === 0 && /* @__PURE__ */ t("div", { style: { padding: 24, textAlign: "center", color: e.textMut }, children: "No items" })
@@ -1506,30 +1896,30 @@ function Pt({ data: n = [], template: i, keyNavigation: p = !0, multiselection:
     }
   );
 }
-function jt({ data: n = [], template: i, itemsInRow: p = 3, gap: s = 12, multiselection: f = !1, onSelect: a, style: h }) {
-  const [d, y] = T(/* @__PURE__ */ new Set());
-  K(_, []);
+function sn({ data: n = [], template: o, itemsInRow: d = 3, gap: l = 12, multiselection: f = !1, onSelect: a, style: h }) {
+  const [u, x] = N(/* @__PURE__ */ new Set());
+  _(q, []);
   const w = (r) => {
-    const l = r.id ?? String(r.title);
-    y((c) => {
-      const b = f ? new Set(c) : /* @__PURE__ */ new Set();
-      return b.has(l) ? b.delete(l) : b.add(l), b;
+    const i = r.id ?? String(r.title);
+    x((c) => {
+      const m = f ? new Set(c) : /* @__PURE__ */ new Set();
+      return m.has(i) ? m.delete(i) : m.add(i), m;
     }), a == null || a(r);
   };
-  return /* @__PURE__ */ t("div", { className: "dhx", style: { display: "grid", gridTemplateColumns: `repeat(${p}, 1fr)`, gap: s, padding: s, ...h }, children: n.map((r, l) => {
-    const c = r.id ?? l, b = d.has(c);
+  return /* @__PURE__ */ t("div", { className: "dhx", style: { display: "grid", gridTemplateColumns: `repeat(${d}, 1fr)`, gap: l, padding: l, ...h }, children: n.map((r, i) => {
+    const c = r.id ?? i, m = u.has(c);
     return /* @__PURE__ */ t(
       "div",
       {
         onClick: () => w(r),
-        style: { background: e.surface, border: `2px solid ${b ? e.primary : e.border}`, borderRadius: e.rMd, overflow: "hidden", cursor: "pointer", transition: "all .15s", boxShadow: b ? `0 0 0 3px ${e.primary}33` : e.shadow, transform: b ? "translateY(-2px)" : "none" },
+        style: { background: e.surface, border: `2px solid ${m ? e.primary : e.border}`, borderRadius: e.rMd, overflow: "hidden", cursor: "pointer", transition: "all .15s", boxShadow: m ? `0 0 0 3px ${e.primary}33` : e.shadow, transform: m ? "translateY(-2px)" : "none" },
         onMouseEnter: (S) => {
           S.currentTarget.style.boxShadow = e.shadowLg, S.currentTarget.style.transform = "translateY(-2px)";
         },
         onMouseLeave: (S) => {
-          S.currentTarget.style.boxShadow = b ? `0 0 0 3px ${e.primary}33` : e.shadow, S.currentTarget.style.transform = b ? "translateY(-2px)" : "none";
+          S.currentTarget.style.boxShadow = m ? `0 0 0 3px ${e.primary}33` : e.shadow, S.currentTarget.style.transform = m ? "translateY(-2px)" : "none";
         },
-        children: i ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: i(r) } }) : /* @__PURE__ */ g("div", { style: { padding: 16 }, children: [
+        children: o ? /* @__PURE__ */ t("div", { dangerouslySetInnerHTML: { __html: o(r) } }) : /* @__PURE__ */ g("div", { style: { padding: 16 }, children: [
           r.img && /* @__PURE__ */ t("img", { src: r.img, alt: r.title || "", style: { width: "100%", borderRadius: e.r, marginBottom: 8, display: "block" } }),
           /* @__PURE__ */ t("div", { style: { fontWeight: 600, fontSize: 14, marginBottom: 4 }, children: r.title || r.value }),
           r.subtitle && /* @__PURE__ */ t("div", { style: { fontSize: 12, color: e.textSec }, children: r.subtitle })
@@ -1539,554 +1929,554 @@ function jt({ data: n = [], template: i, itemsInRow: p = 3, gap: s = 12, multise
     );
   }) });
 }
-function be(n) {
-  return n.map((i) => ({ ...i, items: i.items ? be(i.items) : void 0 }));
+function ze(n) {
+  return n.map((o) => ({ ...o, items: o.items ? ze(o.items) : void 0 }));
 }
-function me(n, i = {}) {
-  return n.forEach((p) => {
-    p.opened && (i[p.id] = !0), p.items && me(p.items, i);
-  }), i;
+function Me(n, o = {}) {
+  return n.forEach((d) => {
+    d.opened && (o[d.id] = !0), d.items && Me(d.items, o);
+  }), o;
 }
-function Ee(n, i) {
-  let p = null;
-  return [n.filter((f) => f.id === i ? (p = f, !1) : !0).map((f) => {
+function _e(n, o) {
+  let d = null;
+  return [n.filter((f) => f.id === o ? (d = f, !1) : !0).map((f) => {
     if (f.items) {
-      const [a, h] = Ee(f.items, i);
-      return h && (p = h), { ...f, items: a };
+      const [a, h] = _e(f.items, o);
+      return h && (d = h), { ...f, items: a };
     }
     return f;
-  }), p];
+  }), d];
 }
-function ve(n, i, p, s) {
-  if (s === "inside")
-    return n.map((a) => a.id === i ? { ...a, items: [...a.items || [], p] } : a.items ? { ...a, items: ve(a.items, i, p, s) } : a);
-  if (n.some((a) => a.id === i)) {
+function $e(n, o, d, l) {
+  if (l === "inside")
+    return n.map((a) => a.id === o ? { ...a, items: [...a.items || [], d] } : a.items ? { ...a, items: $e(a.items, o, d, l) } : a);
+  if (n.some((a) => a.id === o)) {
     const a = [];
     for (const h of n)
-      h.id === i ? s === "before" ? (a.push(p), a.push(h)) : (a.push(h), a.push(p)) : a.push(h);
+      h.id === o ? l === "before" ? (a.push(d), a.push(h)) : (a.push(h), a.push(d)) : a.push(h);
     return a;
   }
-  return n.map((a) => a.items ? { ...a, items: ve(a.items, i, p, s) } : a);
+  return n.map((a) => a.items ? { ...a, items: $e(a.items, o, d, l) } : a);
 }
-function vt(n, i, p) {
-  function s(f) {
+function Ft(n, o, d) {
+  function l(f) {
     var a, h;
-    if (f.id === i) {
-      const d = (y) => {
+    if (f.id === o) {
+      const u = (x) => {
         var w;
-        return y.id === p || (((w = y.items) == null ? void 0 : w.some(d)) ?? !1);
+        return x.id === d || (((w = x.items) == null ? void 0 : w.some(u)) ?? !1);
       };
-      return ((a = f.items) == null ? void 0 : a.some(d)) ?? !1;
+      return ((a = f.items) == null ? void 0 : a.some(u)) ?? !1;
     }
-    return ((h = f.items) == null ? void 0 : h.some(s)) ?? !1;
+    return ((h = f.items) == null ? void 0 : h.some(l)) ?? !1;
   }
-  return n.some(s);
+  return n.some(l);
 }
-function We(n, i, p) {
+function Ve(n, o, d) {
   return n.map(
-    (s) => s.id === i ? { ...s, value: p } : { ...s, items: s.items ? We(s.items, i, p) : void 0 }
+    (l) => l.id === o ? { ...l, value: d } : { ...l, items: l.items ? Ve(l.items, o, d) : void 0 }
   );
 }
-function kt(n, i) {
+function Pt(n, o) {
   var a;
-  let p = 0, s = 0;
+  let d = 0, l = 0;
   const f = (h) => {
-    var d;
-    p++, i[h.id] && s++, (d = h.items) == null || d.forEach(f);
+    var u;
+    d++, o[h.id] && l++, (u = h.items) == null || u.forEach(f);
   };
-  return (a = n.items) == null || a.forEach(f), { total: p, checkedCount: s };
+  return (a = n.items) == null || a.forEach(f), { total: d, checkedCount: l };
 }
-function Ot({
+function an({
   data: n = [],
-  checkbox: i = !1,
-  editable: p = !1,
-  dragMode: s,
+  checkbox: o = !1,
+  editable: d = !1,
+  dragMode: l,
   tooltip: f,
   onSelect: a,
   onCheck: h,
-  onChange: d,
-  style: y
+  onChange: u,
+  style: x
 }) {
-  const [w, r] = T(() => be(n)), [l, c] = T(() => me(n)), [b, S] = T(null), [o, x] = T({}), [k, $] = T(null), [L, m] = T(""), [M, A] = T(null), [u, I] = T(null);
-  K(_, []), K(() => {
-    r(be(n)), c((z) => ({ ...me(n), ...z }));
+  const [w, r] = N(() => ze(n)), [i, c] = N(() => Me(n)), [m, S] = N(null), [s, b] = N({}), [M, D] = N(null), [R, z] = N(""), [C, F] = N(null), [p, I] = N(null);
+  _(q, []), _(() => {
+    r(ze(n)), c(($) => ({ ...Me(n), ...$ }));
   }, [n]);
-  const R = (z) => c((B) => ({ ...B, [z]: !B[z] })), C = (z, B) => {
-    x((j) => ({ ...j, [z]: B })), h == null || h(z, B);
-  }, P = () => {
-    if (!k) return;
-    const z = k, B = L;
-    $(null), r((j) => {
-      const Y = We(j, z, B);
-      return d == null || d(Y), Y;
+  const W = ($) => c((j) => ({ ...j, [$]: !j[$] })), v = ($, j) => {
+    b((k) => ({ ...k, [$]: j })), h == null || h($, j);
+  }, X = () => {
+    if (!M) return;
+    const $ = M, j = R;
+    D(null), r((k) => {
+      const P = Ve(k, $, j);
+      return u == null || u(P), P;
     });
-  }, q = (z, B) => {
-    z.dataTransfer.effectAllowed = "move", A(B);
-  }, Q = (z, B) => {
-    if (!M || M === B || vt(w, M, B)) return;
-    z.preventDefault();
-    const j = z.currentTarget.getBoundingClientRect(), Y = z.clientY - j.top, O = j.height, J = Y < O * 0.25 ? "before" : Y > O * 0.75 ? "after" : "inside";
-    I((X) => (X == null ? void 0 : X.id) === B && (X == null ? void 0 : X.pos) === J ? X : { id: B, pos: J });
-  }, ee = (z, B) => {
-    if (z.preventDefault(), !M || !u || M === B) {
-      I(null), A(null);
+  }, J = ($, j) => {
+    $.dataTransfer.effectAllowed = "move", F(j);
+  }, se = ($, j) => {
+    if (!C || C === j || Ft(w, C, j)) return;
+    $.preventDefault();
+    const k = $.currentTarget.getBoundingClientRect(), P = $.clientY - k.top, O = k.height, G = P < O * 0.25 ? "before" : P > O * 0.75 ? "after" : "inside";
+    I((K) => (K == null ? void 0 : K.id) === j && (K == null ? void 0 : K.pos) === G ? K : { id: j, pos: G });
+  }, U = ($, j) => {
+    if ($.preventDefault(), !C || !p || C === j) {
+      I(null), F(null);
       return;
     }
-    r((j) => {
-      const [Y, O] = Ee(j, M);
-      if (!O) return j;
-      const J = ve(Y, B, O, u.pos);
-      return d == null || d(J), J;
-    }), u.pos === "inside" && c((j) => ({ ...j, [B]: !0 })), I(null), A(null);
-  }, te = () => {
-    A(null), I(null);
-  }, N = (z, B = 0) => {
-    var ae;
-    const j = (((ae = z.items) == null ? void 0 : ae.length) ?? 0) > 0, Y = l[z.id], O = b === z.id, J = M === z.id, X = (u == null ? void 0 : u.id) === z.id;
-    let oe = !!o[z.id], ne = !1;
-    if (i && j) {
-      const { total: H, checkedCount: re } = kt(z, o);
-      re > 0 && re < H ? ne = !0 : H > 0 && re === H && (oe = !0);
+    r((k) => {
+      const [P, O] = _e(k, C);
+      if (!O) return k;
+      const G = $e(P, j, O, p.pos);
+      return u == null || u(G), G;
+    }), p.pos === "inside" && c((k) => ({ ...k, [j]: !0 })), I(null), F(null);
+  }, ie = () => {
+    F(null), I(null);
+  }, E = ($, j = 0) => {
+    var ne;
+    const k = (((ne = $.items) == null ? void 0 : ne.length) ?? 0) > 0, P = i[$.id], O = m === $.id, G = C === $.id, K = (p == null ? void 0 : p.id) === $.id;
+    let V = !!s[$.id], Q = !1;
+    if (o && k) {
+      const { total: H, checkedCount: de } = Pt($, s);
+      de > 0 && de < H ? Q = !0 : H > 0 && de === H && (V = !0);
     }
-    const ie = X && u.pos !== "inside" ? { boxShadow: u.pos === "before" ? `inset 0 2px 0 0 ${e.primary}` : `inset 0 -2px 0 0 ${e.primary}` } : {}, le = X && u.pos === "inside" || O ? e.primaryLt : "transparent";
-    return /* @__PURE__ */ g("div", { style: { opacity: J ? 0.4 : 1 }, children: [
+    const Z = K && p.pos !== "inside" ? { boxShadow: p.pos === "before" ? `inset 0 2px 0 0 ${e.primary}` : `inset 0 -2px 0 0 ${e.primary}` } : {}, fe = K && p.pos === "inside" || O ? e.primaryLt : "transparent";
+    return /* @__PURE__ */ g("div", { style: { opacity: G ? 0.4 : 1 }, children: [
       /* @__PURE__ */ g(
         "div",
         {
-          draggable: !!s,
-          onDragStart: s ? (H) => q(H, z.id) : void 0,
-          onDragOver: s ? (H) => Q(H, z.id) : void 0,
-          onDrop: s ? (H) => ee(H, z.id) : void 0,
-          onDragEnd: s ? te : void 0,
-          title: f == null ? void 0 : f(z),
+          draggable: !!l,
+          onDragStart: l ? (H) => J(H, $.id) : void 0,
+          onDragOver: l ? (H) => se(H, $.id) : void 0,
+          onDrop: l ? (H) => U(H, $.id) : void 0,
+          onDragEnd: l ? ie : void 0,
+          title: f == null ? void 0 : f($),
           onClick: () => {
-            S(z.id), a == null || a(z), j && R(z.id);
+            S($.id), a == null || a($), k && W($.id);
           },
           onDoubleClick: () => {
-            p && ($(z.id), m(z.value || ""));
+            d && (D($.id), z($.value || ""));
           },
           style: {
             display: "flex",
             alignItems: "center",
             gap: 4,
-            padding: `5px 8px 5px ${12 + B * 18}px`,
-            cursor: s ? "grab" : "pointer",
+            padding: `5px 8px 5px ${12 + j * 18}px`,
+            cursor: l ? "grab" : "pointer",
             borderRadius: e.r,
             margin: "1px 4px",
-            background: le,
+            background: fe,
             color: O ? e.primary : e.text,
             userSelect: "none",
             fontSize: 13,
-            ...ie
+            ...Z
           },
-          onMouseEnter: (H) => !O && !X && (H.currentTarget.style.background = e.bg),
-          onMouseLeave: (H) => !O && !X && (H.currentTarget.style.background = "transparent"),
+          onMouseEnter: (H) => !O && !K && (H.currentTarget.style.background = e.bg),
+          onMouseLeave: (H) => !O && !K && (H.currentTarget.style.background = "transparent"),
           children: [
             /* @__PURE__ */ t(
               "span",
               {
                 style: { width: 16, textAlign: "center", fontSize: 11, color: e.textMut, flexShrink: 0 },
                 onClick: (H) => {
-                  H.stopPropagation(), j && R(z.id);
+                  H.stopPropagation(), k && W($.id);
                 },
-                children: j ? Y ? "▾" : "▸" : ""
+                children: k ? P ? "▾" : "▸" : ""
               }
             ),
-            /* @__PURE__ */ t("span", { style: { fontSize: 15, flexShrink: 0 }, children: j ? Y ? "📂" : "📁" : "📄" }),
-            i && /* @__PURE__ */ t(
+            /* @__PURE__ */ t("span", { style: { fontSize: 15, flexShrink: 0 }, children: k ? P ? "📂" : "📁" : "📄" }),
+            o && /* @__PURE__ */ t(
               "input",
               {
                 ref: (H) => {
-                  H && (H.indeterminate = ne);
+                  H && (H.indeterminate = Q);
                 },
                 type: "checkbox",
-                checked: oe,
+                checked: V,
                 onChange: (H) => {
-                  H.stopPropagation(), C(z.id, H.target.checked);
+                  H.stopPropagation(), v($.id, H.target.checked);
                 },
                 style: { cursor: "pointer", accentColor: e.primary, flexShrink: 0 },
                 onClick: (H) => H.stopPropagation()
               }
             ),
-            k === z.id ? /* @__PURE__ */ t(
+            M === $.id ? /* @__PURE__ */ t(
               "input",
               {
                 autoFocus: !0,
                 className: "dhx dhx-input",
                 style: { height: 24, fontSize: 12, flex: 1 },
-                value: L,
-                onChange: (H) => m(H.target.value),
-                onBlur: P,
+                value: R,
+                onChange: (H) => z(H.target.value),
+                onBlur: X,
                 onKeyDown: (H) => {
-                  H.key === "Enter" && P(), H.key === "Escape" && $(null);
+                  H.key === "Enter" && X(), H.key === "Escape" && D(null);
                 },
                 onClick: (H) => H.stopPropagation()
               }
-            ) : /* @__PURE__ */ t("span", { style: { flex: 1 }, children: z.value }),
-            z.count !== void 0 && /* @__PURE__ */ g("span", { style: { fontSize: 11, color: e.textMut }, children: [
+            ) : /* @__PURE__ */ t("span", { style: { flex: 1 }, children: $.value }),
+            $.count !== void 0 && /* @__PURE__ */ g("span", { style: { fontSize: 11, color: e.textMut }, children: [
               "(",
-              z.count,
+              $.count,
               ")"
             ] })
           ]
         }
       ),
-      j && Y && /* @__PURE__ */ t("div", { children: z.items.map((H) => N(H, B + 1)) })
-    ] }, z.id);
+      k && P && /* @__PURE__ */ t("div", { children: $.items.map((H) => E(H, j + 1)) })
+    ] }, $.id);
   };
   return /* @__PURE__ */ t(
     "div",
     {
       className: "dhx dhx-scroll",
-      style: { overflowY: "auto", ...y },
-      onDragOver: s ? (z) => z.preventDefault() : void 0,
-      onDrop: s ? (z) => {
-        z.preventDefault(), I(null), A(null);
+      style: { overflowY: "auto", ...x },
+      onDragOver: l ? ($) => $.preventDefault() : void 0,
+      onDrop: l ? ($) => {
+        $.preventDefault(), I(null), F(null);
       } : void 0,
-      children: w.map((z) => N(z))
+      children: w.map(($) => E($))
     }
   );
 }
-function Yt({ total: n, pageSize: i = 10, page: p, onChange: s, style: f }) {
-  const [a, h] = T(p || 1), d = Math.ceil(n / i);
-  K(_, []);
-  const y = (r) => {
-    const l = Math.min(Math.max(1, r), d);
-    h(l), s == null || s(l);
+function dn({ total: n, pageSize: o = 10, page: d, onChange: l, style: f }) {
+  const [a, h] = N(d || 1), u = Math.ceil(n / o);
+  _(q, []);
+  const x = (r) => {
+    const i = Math.min(Math.max(1, r), u);
+    h(i), l == null || l(i);
   }, w = ue(() => {
     const r = [];
-    for (let c = Math.max(1, a - 2); c <= Math.min(d, a + 2); c++) r.push(c);
-    return r[0] > 1 && (r[0] > 2 && r.unshift("..."), r.unshift(1)), r[r.length - 1] < d && (r[r.length - 1] < d - 1 && r.push("..."), r.push(d)), r;
-  }, [a, d]);
+    for (let c = Math.max(1, a - 2); c <= Math.min(u, a + 2); c++) r.push(c);
+    return r[0] > 1 && (r[0] > 2 && r.unshift("..."), r.unshift(1)), r[r.length - 1] < u && (r[r.length - 1] < u - 1 && r.push("..."), r.push(u)), r;
+  }, [a, u]);
   return /* @__PURE__ */ g("div", { className: "dhx", style: { display: "flex", alignItems: "center", gap: 4, padding: "8px 12px", ...f }, children: [
     /* @__PURE__ */ g("span", { style: { fontSize: 12, color: e.textSec, marginRight: 8 }, children: [
-      (a - 1) * i + 1,
+      (a - 1) * o + 1,
       "–",
-      Math.min(a * i, n),
+      Math.min(a * o, n),
       " of ",
       n
     ] }),
-    [["«", 1], ["‹", a - 1]].map(([r, l]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: a === 1, onClick: () => y(l), children: r }, r)),
-    w.map((r, l) => /* @__PURE__ */ t("button", { onClick: () => typeof r == "number" && y(r), className: `dhx dhx-btn ${r === a ? "dhx-btn-primary" : "dhx-btn-ghost"}`, style: { height: 30, minWidth: 30, padding: "0 8px", fontSize: 13 }, disabled: r === "...", children: r }, l)),
-    [["›", a + 1], ["»", d]].map(([r, l]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: a === d, onClick: () => y(l), children: r }, r))
+    [["«", 1], ["‹", a - 1]].map(([r, i]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: a === 1, onClick: () => x(i), children: r }, r)),
+    w.map((r, i) => /* @__PURE__ */ t("button", { onClick: () => typeof r == "number" && x(r), className: `dhx dhx-btn ${r === a ? "dhx-btn-primary" : "dhx-btn-ghost"}`, style: { height: 30, minWidth: 30, padding: "0 8px", fontSize: 13 }, disabled: r === "...", children: r }, i)),
+    [["›", a + 1], ["»", u]].map(([r, i]) => /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-ghost", style: { height: 30, padding: "0 8px", fontSize: 14 }, disabled: a === u, onClick: () => x(i), children: r }, r))
   ] });
 }
-function Ft({ config: n = {}, defaultValues: i = {}, onSubmit: p, style: s }) {
-  const [f, a] = T(i), [h, d] = T({}), [y, w] = T(null);
-  K(_, []);
-  const r = (o, x) => {
-    a((k) => ({ ...k, [o]: x })), d((k) => ({ ...k, [o]: null }));
-  }, l = (o) => {
-    const x = [];
-    return o.flat().forEach((k) => {
-      !k || typeof k != "object" || !("name" in k) || (x.push(k), k.type === "fieldset" && k.rows && x.push(...l(k.rows)));
-    }), x;
+function cn({ config: n = {}, defaultValues: o = {}, onSubmit: d, style: l }) {
+  const [f, a] = N(o), [h, u] = N({}), [x, w] = N(null);
+  _(q, []);
+  const r = (s, b) => {
+    a((M) => ({ ...M, [s]: b })), u((M) => ({ ...M, [s]: null }));
+  }, i = (s) => {
+    const b = [];
+    return s.flat().forEach((M) => {
+      !M || typeof M != "object" || !("name" in M) || (b.push(M), M.type === "fieldset" && M.rows && b.push(...i(M.rows)));
+    }), b;
   }, c = () => {
-    const o = {};
-    return l(n.rows || []).forEach((x) => {
-      x.required && !f[x.name] && (o[x.name] = `${x.label || x.name} is required`);
-    }), d(o), Object.keys(o).length === 0;
-  }, b = (o) => {
-    const x = f[o.name] ?? o.value ?? "", k = h[o.name], $ = o.labelWidth ?? n.labelWidth, L = $ !== void 0 || o.labelPosition === "left";
-    if (o.type === "fieldset") return /* @__PURE__ */ g("fieldset", { style: { border: `1px solid ${e.border}`, borderRadius: e.r, padding: "12px 16px", marginBottom: 14 }, children: [
-      /* @__PURE__ */ t("legend", { style: { fontSize: 12, fontWeight: 700, color: e.textSec, padding: "0 6px" }, children: o.label }),
-      (o.rows || []).map((C) => b(C))
-    ] }, o.name);
-    if (o.type === "spacer") return /* @__PURE__ */ t("div", { style: { height: o.height || 16 } }, o.name);
-    const m = $ ? { minWidth: $, width: $, flexShrink: 0, paddingTop: 8, boxSizing: "border-box" } : {}, M = o.label ? /* @__PURE__ */ g("label", { className: "dhx dhx-label", style: { display: "flex", gap: 4, ...m }, children: [
-      o.label,
-      o.required && /* @__PURE__ */ t("span", { style: { color: e.danger }, children: "*" })
-    ] }, "lbl") : null, A = k ? /* @__PURE__ */ t("div", { style: { fontSize: 11, color: e.danger, marginTop: 3 }, children: k }) : null, u = o.helpMessage ? /* @__PURE__ */ g("div", { style: { fontSize: 11, color: e.textMut, marginTop: 3 }, children: [
+    const s = {};
+    return i(n.rows || []).forEach((b) => {
+      b.required && !f[b.name] && (s[b.name] = `${b.label || b.name} is required`);
+    }), u(s), Object.keys(s).length === 0;
+  }, m = (s) => {
+    const b = f[s.name] ?? s.value ?? "", M = h[s.name], D = s.labelWidth ?? n.labelWidth, R = D !== void 0 || s.labelPosition === "left";
+    if (s.type === "fieldset") return /* @__PURE__ */ g("fieldset", { style: { border: `1px solid ${e.border}`, borderRadius: e.r, padding: "12px 16px", marginBottom: 14 }, children: [
+      /* @__PURE__ */ t("legend", { style: { fontSize: 12, fontWeight: 700, color: e.textSec, padding: "0 6px" }, children: s.label }),
+      (s.rows || []).map((v) => m(v))
+    ] }, s.name);
+    if (s.type === "spacer") return /* @__PURE__ */ t("div", { style: { height: s.height || 16 } }, s.name);
+    const z = D ? { minWidth: D, width: D, flexShrink: 0, paddingTop: 8, boxSizing: "border-box" } : {}, C = s.label ? /* @__PURE__ */ g("label", { className: "dhx dhx-label", style: { display: "flex", gap: 4, ...z }, children: [
+      s.label,
+      s.required && /* @__PURE__ */ t("span", { style: { color: e.danger }, children: "*" })
+    ] }, "lbl") : null, F = M ? /* @__PURE__ */ t("div", { style: { fontSize: 11, color: e.danger, marginTop: 3 }, children: M }) : null, p = s.helpMessage ? /* @__PURE__ */ g("div", { style: { fontSize: 11, color: e.textMut, marginTop: 3 }, children: [
       "ⓘ ",
-      o.helpMessage
-    ] }) : null, I = { key: o.name, className: "dhx-form-group" }, R = (C) => L ? /* @__PURE__ */ g("div", { ...I, style: { display: "flex", alignItems: "flex-start", gap: 8 }, children: [
-      M,
+      s.helpMessage
+    ] }) : null, I = { key: s.name, className: "dhx-form-group" }, W = (v) => R ? /* @__PURE__ */ g("div", { ...I, style: { display: "flex", alignItems: "flex-start", gap: 8 }, children: [
+      C,
       /* @__PURE__ */ g("div", { style: { flex: 1, minWidth: 0 }, children: [
-        C,
-        A,
-        u
+        v,
+        F,
+        p
       ] })
     ] }) : /* @__PURE__ */ g("div", { ...I, children: [
-      M,
       C,
-      A,
-      u
+      v,
+      F,
+      p
     ] });
-    if (!o.type || o.type === "input") return R(
+    if (!s.type || s.type === "input") return W(
       /* @__PURE__ */ g("div", { className: "dhx-input-wrap", children: [
-        o.icon && /* @__PURE__ */ t("span", { className: "dhx-input-icon", children: o.icon }),
+        s.icon && /* @__PURE__ */ t("span", { className: "dhx-input-icon", children: s.icon }),
         /* @__PURE__ */ t(
           "input",
           {
-            className: `dhx dhx-input${o.icon ? " dhx-input--with-icon" : ""}`,
-            style: { borderColor: k ? e.danger : void 0 },
-            type: o.inputType || "text",
-            placeholder: o.placeholder,
-            value: x,
-            onChange: (C) => r(o.name, C.target.value),
-            disabled: o.disabled
+            className: `dhx dhx-input${s.icon ? " dhx-input--with-icon" : ""}`,
+            style: { borderColor: M ? e.danger : void 0 },
+            type: s.inputType || "text",
+            placeholder: s.placeholder,
+            value: b,
+            onChange: (v) => r(s.name, v.target.value),
+            disabled: s.disabled
           }
         )
       ] })
     );
-    if (o.type === "textarea") return R(
+    if (s.type === "textarea") return W(
       /* @__PURE__ */ t(
         "textarea",
         {
           className: "dhx dhx-input",
           style: { height: 80, resize: "vertical", padding: "8px 10px" },
-          placeholder: o.placeholder,
-          value: x,
-          onChange: (C) => r(o.name, C.target.value)
+          placeholder: s.placeholder,
+          value: b,
+          onChange: (v) => r(s.name, v.target.value)
         }
       )
     );
-    if (o.type === "select") return R(
-      /* @__PURE__ */ g("select", { className: "dhx dhx-input", value: x, onChange: (C) => r(o.name, C.target.value), style: { cursor: "pointer" }, children: [
+    if (s.type === "select") return W(
+      /* @__PURE__ */ g("select", { className: "dhx dhx-input", value: b, onChange: (v) => r(s.name, v.target.value), style: { cursor: "pointer" }, children: [
         /* @__PURE__ */ t("option", { value: "", children: "— Select —" }),
-        (o.options || []).map((C) => /* @__PURE__ */ t("option", { value: C.value, children: C.label || C.value }, C.value))
+        (s.options || []).map((v) => /* @__PURE__ */ t("option", { value: v.value, children: v.label || v.value }, v.value))
       ] })
     );
-    if (o.type === "datepicker") return R(
-      /* @__PURE__ */ t("input", { type: "date", className: "dhx dhx-input", value: x, onChange: (C) => r(o.name, C.target.value) })
+    if (s.type === "datepicker") return W(
+      /* @__PURE__ */ t("input", { type: "date", className: "dhx dhx-input", value: b, onChange: (v) => r(s.name, v.target.value) })
     );
-    if (o.type === "timepicker") {
-      const C = f[o.name] ?? { h: 12, m: 0, ampm: "AM" }, P = !!f[o.name], q = P ? `${String(C.h).padStart(2, "0")}:${String(C.m).padStart(2, "0")}${C.ampm ? " " + C.ampm : ""}` : o.placeholder || "Click to select", Q = /* @__PURE__ */ g("div", { style: { position: "relative" }, children: [
+    if (s.type === "timepicker") {
+      const v = f[s.name] ?? { h: 12, m: 0, ampm: "AM" }, X = !!f[s.name], J = X ? `${String(v.h).padStart(2, "0")}:${String(v.m).padStart(2, "0")}${v.ampm ? " " + v.ampm : ""}` : s.placeholder || "Click to select", se = /* @__PURE__ */ g("div", { style: { position: "relative" }, children: [
         /* @__PURE__ */ g(
           "div",
           {
             className: "dhx dhx-input",
             style: { cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between" },
-            onClick: () => w(y === o.name ? null : o.name),
+            onClick: () => w(x === s.name ? null : s.name),
             children: [
-              /* @__PURE__ */ t("span", { style: { color: P ? e.text : e.textMut }, children: q }),
+              /* @__PURE__ */ t("span", { style: { color: X ? e.text : e.textMut }, children: J }),
               /* @__PURE__ */ t("span", { style: { fontSize: 13, color: e.textSec }, children: "🕐" })
             ]
           }
         ),
-        y === o.name && /* @__PURE__ */ t("div", { style: { position: "absolute", zIndex: 100, top: "calc(100% + 4px)", left: 0 }, children: /* @__PURE__ */ t(gt, { value: C, controls: !0, onChange: (ee) => {
-          r(o.name, ee), w(null);
+        x === s.name && /* @__PURE__ */ t("div", { style: { position: "absolute", zIndex: 100, top: "calc(100% + 4px)", left: 0 }, children: /* @__PURE__ */ t(At, { value: v, controls: !0, onChange: (U) => {
+          r(s.name, U), w(null);
         } }) })
       ] });
-      return R(Q);
+      return W(se);
     }
-    if (o.type === "colorpicker") return R(
+    if (s.type === "colorpicker") return W(
       /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ t(
           "input",
           {
             type: "color",
-            value: x || "#000000",
-            onChange: (C) => r(o.name, C.target.value),
+            value: b || "#000000",
+            onChange: (v) => r(s.name, v.target.value),
             style: { width: 36, height: 36, padding: 2, border: `1px solid ${e.border}`, borderRadius: e.r, cursor: "pointer", background: "none" }
           }
         ),
-        /* @__PURE__ */ t("span", { style: { fontSize: 12, color: e.textSec, fontFamily: "monospace" }, children: x || "#000000" })
+        /* @__PURE__ */ t("span", { style: { fontSize: 12, color: e.textSec, fontFamily: "monospace" }, children: b || "#000000" })
       ] })
     );
-    if (o.type === "text") return R(
-      /* @__PURE__ */ t("p", { style: { margin: "6px 0", fontSize: 13, color: e.text }, children: o.value })
+    if (s.type === "text") return W(
+      /* @__PURE__ */ t("p", { style: { margin: "6px 0", fontSize: 13, color: e.text }, children: s.value })
     );
-    if (o.type === "checkbox") return /* @__PURE__ */ g("div", { ...I, children: [
-      L ? /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        $ && /* @__PURE__ */ t("div", { style: { width: $, flexShrink: 0 } }),
+    if (s.type === "checkbox") return /* @__PURE__ */ g("div", { ...I, children: [
+      R ? /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        D && /* @__PURE__ */ t("div", { style: { width: D, flexShrink: 0 } }),
         /* @__PURE__ */ g("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
-          /* @__PURE__ */ t("input", { type: "checkbox", checked: !!x, onChange: (C) => r(o.name, C.target.checked), style: { width: 16, height: 16, accentColor: e.primary, cursor: "pointer" } }),
-          /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: o.label })
+          /* @__PURE__ */ t("input", { type: "checkbox", checked: !!b, onChange: (v) => r(s.name, v.target.checked), style: { width: 16, height: 16, accentColor: e.primary, cursor: "pointer" } }),
+          /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: s.label })
         ] })
       ] }) : /* @__PURE__ */ g("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
-        /* @__PURE__ */ t("input", { type: "checkbox", checked: !!x, onChange: (C) => r(o.name, C.target.checked), style: { width: 16, height: 16, accentColor: e.primary, cursor: "pointer" } }),
-        /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: o.label })
+        /* @__PURE__ */ t("input", { type: "checkbox", checked: !!b, onChange: (v) => r(s.name, v.target.checked), style: { width: 16, height: 16, accentColor: e.primary, cursor: "pointer" } }),
+        /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: s.label })
       ] }),
-      u
+      p
     ] });
-    if (o.type === "radio") {
-      const C = (o.options || []).map((P) => /* @__PURE__ */ g("label", { style: { display: "flex", alignItems: "center", gap: 6, cursor: "pointer", fontSize: 13 }, children: [
+    if (s.type === "radio") {
+      const v = (s.options || []).map((X) => /* @__PURE__ */ g("label", { style: { display: "flex", alignItems: "center", gap: 6, cursor: "pointer", fontSize: 13 }, children: [
         /* @__PURE__ */ t(
           "input",
           {
             type: "radio",
-            name: o.name,
-            value: P.value,
-            checked: x === P.value,
-            onChange: () => r(o.name, P.value),
+            name: s.name,
+            value: X.value,
+            checked: b === X.value,
+            onChange: () => r(s.name, X.value),
             style: { accentColor: e.primary, cursor: "pointer" }
           }
         ),
-        P.label || P.value
-      ] }, P.value));
-      return R(
-        /* @__PURE__ */ t("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", paddingTop: 8 }, children: C })
+        X.label || X.value
+      ] }, X.value));
+      return W(
+        /* @__PURE__ */ t("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", paddingTop: 8 }, children: v })
       );
     }
-    if (o.type === "slider") return L ? /* @__PURE__ */ g("div", { ...I, style: { display: "flex", alignItems: "flex-start", gap: 8 }, children: [
-      M,
+    if (s.type === "slider") return R ? /* @__PURE__ */ g("div", { ...I, style: { display: "flex", alignItems: "flex-start", gap: 8 }, children: [
+      C,
       /* @__PURE__ */ g("div", { style: { flex: 1 }, children: [
         /* @__PURE__ */ t(
-          De,
+          He,
           {
-            min: o.min,
-            max: o.max,
-            step: o.step,
-            value: x || o.min,
-            range: o.range,
-            onChange: (C) => r(o.name, C)
+            min: s.min,
+            max: s.max,
+            step: s.step,
+            value: b || s.min,
+            range: s.range,
+            onChange: (v) => r(s.name, v)
           }
         ),
-        u
+        p
       ] })
     ] }) : /* @__PURE__ */ g("div", { ...I, children: [
       /* @__PURE__ */ t(
-        De,
+        He,
         {
-          label: o.label,
-          min: o.min,
-          max: o.max,
-          step: o.step,
-          value: x || o.min,
-          range: o.range,
-          onChange: (C) => r(o.name, C)
+          label: s.label,
+          min: s.min,
+          max: s.max,
+          step: s.step,
+          value: b || s.min,
+          range: s.range,
+          onChange: (v) => r(s.name, v)
         }
       ),
-      u
+      p
     ] });
-    if (o.type === "combo") return L ? /* @__PURE__ */ g("div", { ...I, style: { display: "flex", alignItems: "flex-start", gap: 8 }, children: [
-      M,
+    if (s.type === "combo") return R ? /* @__PURE__ */ g("div", { ...I, style: { display: "flex", alignItems: "flex-start", gap: 8 }, children: [
+      C,
       /* @__PURE__ */ g("div", { style: { flex: 1 }, children: [
         /* @__PURE__ */ t(
-          $e,
+          Be,
           {
-            data: o.data || [],
-            multiselection: o.multiselection,
-            placeholder: o.placeholder || "Select...",
-            value: x || (o.multiselection ? [] : null),
-            onChange: (C) => r(o.name, C)
+            data: s.data || [],
+            multiselection: s.multiselection,
+            placeholder: s.placeholder || "Select...",
+            value: b || (s.multiselection ? [] : null),
+            onChange: (v) => r(s.name, v)
           }
         ),
-        A,
-        u
+        F,
+        p
       ] })
     ] }) : /* @__PURE__ */ g("div", { ...I, children: [
       /* @__PURE__ */ t(
-        $e,
+        Be,
         {
-          label: o.label,
-          data: o.data || [],
-          multiselection: o.multiselection,
-          placeholder: o.placeholder || "Select...",
-          value: x || (o.multiselection ? [] : null),
-          onChange: (C) => r(o.name, C)
+          label: s.label,
+          data: s.data || [],
+          multiselection: s.multiselection,
+          placeholder: s.placeholder || "Select...",
+          value: b || (s.multiselection ? [] : null),
+          onChange: (v) => r(s.name, v)
         }
       ),
-      A,
-      u
+      F,
+      p
     ] });
-    if (o.type === "toggle") {
-      const C = !!x, P = C ? o.icon : o.offIcon || o.icon, q = C ? o.text || o.label : o.offText || o.text || o.label;
+    if (s.type === "toggle") {
+      const v = !!b, X = v ? s.icon : s.offIcon || s.icon, J = v ? s.text || s.label : s.offText || s.text || s.label;
       return /* @__PURE__ */ g("div", { ...I, children: [
-        L && $ && /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-          /* @__PURE__ */ t("div", { style: { width: $, flexShrink: 0 } }),
+        R && D && /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ t("div", { style: { width: D, flexShrink: 0 } }),
           /* @__PURE__ */ g("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
-            /* @__PURE__ */ t(Le, { on: C, onClick: () => r(o.name, !x) }),
-            P && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: P }),
-            q && /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: q })
+            /* @__PURE__ */ t(Pe, { on: v, onClick: () => r(s.name, !b) }),
+            X && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: X }),
+            J && /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: J })
           ] })
         ] }),
-        !L && /* @__PURE__ */ g("label", { style: { display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }, children: [
-          /* @__PURE__ */ t(Le, { on: C, onClick: () => r(o.name, !x) }),
-          P && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: P }),
-          q && /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: q })
+        !R && /* @__PURE__ */ g("label", { style: { display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }, children: [
+          /* @__PURE__ */ t(Pe, { on: v, onClick: () => r(s.name, !b) }),
+          X && /* @__PURE__ */ t("span", { style: { fontSize: 16 }, children: X }),
+          J && /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: J })
         ] }),
-        u
+        p
       ] });
     }
     return null;
-  }, S = (o) => o.map(
-    (x, k) => Array.isArray(x) ? /* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, alignItems: "flex-start" }, children: x.map(b) }, k) : b(x)
+  }, S = (s) => s.map(
+    (b, M) => Array.isArray(b) ? /* @__PURE__ */ t("div", { style: { display: "flex", gap: 12, alignItems: "flex-start" }, children: b.map(m) }, M) : m(b)
   );
-  return /* @__PURE__ */ g("div", { className: "dhx", style: { padding: n.padding || 0, width: n.width || "100%", ...s }, children: [
+  return /* @__PURE__ */ g("div", { className: "dhx", style: { padding: n.padding || 0, width: n.width || "100%", ...l }, children: [
     S(n.rows || []),
-    (n.buttons || p) && /* @__PURE__ */ g("div", { style: { display: "flex", gap: 8, justifyContent: n.buttonAlign || "flex-start", marginTop: 8 }, children: [
-      /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-primary", onClick: () => c() && (p == null ? void 0 : p(f)), children: n.submitText || "Submit" }),
+    (n.buttons || d) && /* @__PURE__ */ g("div", { style: { display: "flex", gap: 8, justifyContent: n.buttonAlign || "flex-start", marginTop: 8 }, children: [
+      /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-primary", onClick: () => c() && (d == null ? void 0 : d(f)), children: n.submitText || "Submit" }),
       n.resetButton !== !1 && /* @__PURE__ */ t("button", { className: "dhx dhx-btn dhx-btn-secondary", onClick: () => {
-        a(i), d({});
+        a(o), u({});
       }, children: n.resetText || "Reset" })
     ] })
   ] });
 }
-function Le({ on: n, onClick: i }) {
-  return /* @__PURE__ */ g("div", { style: { position: "relative", width: 40, height: 22, flexShrink: 0 }, onClick: i, children: [
+function Pe({ on: n, onClick: o }) {
+  return /* @__PURE__ */ g("div", { style: { position: "relative", width: 40, height: 22, flexShrink: 0 }, onClick: o, children: [
     /* @__PURE__ */ t("div", { style: { width: 40, height: 22, borderRadius: 11, background: n ? e.primary : e.border, transition: "background 0.2s" } }),
     /* @__PURE__ */ t("div", { style: { position: "absolute", top: 3, left: n ? 21 : 3, width: 16, height: 16, borderRadius: "50%", background: "#fff", transition: "left 0.2s", boxShadow: "0 1px 3px rgba(0,0,0,.3)" } })
   ] });
 }
-function ke(n) {
-  const i = [];
-  for (const p of n)
-    p.type === "block" ? i.push(...ke(p.items || [])) : i.push(p);
-  return i;
+function De(n) {
+  const o = [];
+  for (const d of n)
+    d.type === "block" ? o.push(...De(d.items || [])) : o.push(d);
+  return o;
 }
-function Kt({ items: n = [], onAction: i, style: p }) {
-  K(_, []);
-  const [s, f] = T(() => {
-    const l = {};
-    for (const c of ke(n))
-      c.id && (l[c.id] = !!c.active);
-    return l;
-  }), a = ke(n), h = (l) => {
+function un({ items: n = [], onAction: o, style: d }) {
+  _(q, []);
+  const [l, f] = N(() => {
+    const i = {};
+    for (const c of De(n))
+      c.id && (i[c.id] = !!c.active);
+    return i;
+  }), a = De(n), h = (i) => {
     var c;
-    if (!l.disabled) {
-      if (l.id)
-        if (l.group) {
-          const b = a.filter((S) => S.group === l.group && S.id);
+    if (!i.disabled) {
+      if (i.id)
+        if (i.group) {
+          const m = a.filter((S) => S.group === i.group && S.id);
           f((S) => {
-            const o = { ...S };
-            for (const x of b) o[x.id] = !1;
-            return o[l.id] = !0, o;
+            const s = { ...S };
+            for (const b of m) s[b.id] = !1;
+            return s[i.id] = !0, s;
           });
-        } else l.twoState && f((b) => ({ ...b, [l.id]: !b[l.id] }));
-      (c = l.onClick) == null || c.call(l, l), l.id && (i == null || i(l.id, l));
+        } else i.twoState && f((m) => ({ ...m, [i.id]: !m[i.id] }));
+      (c = i.onClick) == null || c.call(i, i), i.id && (o == null || o(i.id, i));
     }
-  }, d = (l, c) => {
-    var x;
-    if (l.hidden) return null;
-    const b = l.value ?? l.text, S = l.size === "auto", o = l.id !== void 0 ? s[l.id] ?? !!l.active : !!l.active;
-    return l.type === "separator" || l.type === "sep" ? /* @__PURE__ */ t("div", { style: { width: 1, background: e.border, margin: "4px 2px", alignSelf: "stretch" } }, c) : l.type === "input" ? /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "center", padding: "2px 4px", gap: 2 }, children: [
-      l.label && /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: l.label }),
+  }, u = (i, c) => {
+    var b;
+    if (i.hidden) return null;
+    const m = i.value ?? i.text, S = i.size === "auto", s = i.id !== void 0 ? l[i.id] ?? !!i.active : !!i.active;
+    return i.type === "separator" || i.type === "sep" ? /* @__PURE__ */ t("div", { style: { width: 1, background: e.border, margin: "4px 2px", alignSelf: "stretch" } }, c) : i.type === "input" ? /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "center", padding: "2px 4px", gap: 2 }, children: [
+      i.label && /* @__PURE__ */ t("span", { style: { fontSize: 10, color: e.textMut }, children: i.label }),
       /* @__PURE__ */ g("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
-        l.icon && /* @__PURE__ */ t("span", { style: { position: "absolute", left: 6, fontSize: 13, color: e.textMut, pointerEvents: "none", zIndex: 1 }, children: l.icon }),
+        i.icon && /* @__PURE__ */ t("span", { style: { position: "absolute", left: 6, fontSize: 13, color: e.textMut, pointerEvents: "none", zIndex: 1 }, children: i.icon }),
         /* @__PURE__ */ t(
           "input",
           {
             className: "dhx dhx-input",
-            style: { width: l.width || 110, height: 26, fontSize: 12, paddingLeft: l.icon ? 24 : void 0 },
-            placeholder: l.placeholder,
-            defaultValue: l.value,
-            onChange: (k) => {
-              var $;
-              return ($ = l.onChange) == null ? void 0 : $.call(l, k.target.value);
+            style: { width: i.width || 110, height: 26, fontSize: 12, paddingLeft: i.icon ? 24 : void 0 },
+            placeholder: i.placeholder,
+            defaultValue: i.value,
+            onChange: (M) => {
+              var D;
+              return (D = i.onChange) == null ? void 0 : D.call(i, M.target.value);
             }
           }
         )
       ] })
-    ] }, c) : l.type === "selectButton" ? /* @__PURE__ */ t(
+    ] }, c) : i.type === "selectButton" ? /* @__PURE__ */ t(
       "select",
       {
         className: "dhx dhx-input",
-        style: { height: 26, fontSize: 12, cursor: "pointer", margin: 2, width: l.width },
-        defaultValue: l.value,
-        onChange: (k) => {
-          var $;
-          return ($ = l.onChange) == null ? void 0 : $.call(l, k.target.value);
+        style: { height: 26, fontSize: 12, cursor: "pointer", margin: 2, width: i.width },
+        defaultValue: i.value,
+        onChange: (M) => {
+          var D;
+          return (D = i.onChange) == null ? void 0 : D.call(i, M.target.value);
         },
-        children: (x = l.items) == null ? void 0 : x.map((k) => /* @__PURE__ */ t("option", { value: k.value, children: k.value }, k.value))
+        children: (b = i.items) == null ? void 0 : b.map((M) => /* @__PURE__ */ t("option", { value: M.value, children: M.value }, M.value))
       },
       c
     ) : /* @__PURE__ */ g(
       "button",
       {
-        title: l.tooltip,
-        disabled: l.disabled,
+        title: i.tooltip,
+        disabled: i.disabled,
         className: "dhx dhx-btn dhx-btn-ghost",
         style: {
           flexDirection: S ? "column" : "row",
@@ -2096,22 +2486,22 @@ function Kt({ items: n = [], onAction: i, style: p }) {
           padding: S ? "6px 10px" : "0 8px",
           gap: S ? 4 : 5,
           position: "relative",
-          background: o ? e.primaryLt : "transparent",
-          color: o ? e.primary : l.disabled ? e.textMut : e.text,
-          opacity: l.disabled ? 0.55 : 1,
-          cursor: l.disabled ? "not-allowed" : "pointer"
+          background: s ? e.primaryLt : "transparent",
+          color: s ? e.primary : i.disabled ? e.textMut : e.text,
+          opacity: i.disabled ? 0.55 : 1,
+          cursor: i.disabled ? "not-allowed" : "pointer"
         },
-        onClick: () => h(l),
+        onClick: () => h(i),
         children: [
-          l.icon && /* @__PURE__ */ t("span", { style: { fontSize: S ? 22 : 15, lineHeight: 1, flexShrink: 0 }, children: l.icon }),
-          b && /* @__PURE__ */ t("span", { style: {
+          i.icon && /* @__PURE__ */ t("span", { style: { fontSize: S ? 22 : 15, lineHeight: 1, flexShrink: 0 }, children: i.icon }),
+          m && /* @__PURE__ */ t("span", { style: {
             fontSize: 10,
             maxWidth: S ? 64 : void 0,
             textAlign: S ? "center" : "left",
             lineHeight: 1.2,
             whiteSpace: S ? "normal" : "nowrap"
-          }, children: b }),
-          l.count !== void 0 && /* @__PURE__ */ t("span", { style: {
+          }, children: m }),
+          i.count !== void 0 && /* @__PURE__ */ t("span", { style: {
             position: "absolute",
             top: 2,
             right: 2,
@@ -2127,24 +2517,24 @@ function Kt({ items: n = [], onAction: i, style: p }) {
             justifyContent: "center",
             padding: "0 2px",
             pointerEvents: "none"
-          }, children: l.count })
+          }, children: i.count })
         ]
       },
       c
     );
-  }, y = (l, c) => {
-    var b;
+  }, x = (i, c) => {
+    var m;
     return /* @__PURE__ */ t("div", { style: {
       display: "flex",
-      flexDirection: l.direction === "col" ? "column" : "row",
-      alignItems: l.direction === "col" ? "flex-start" : "center",
+      flexDirection: i.direction === "col" ? "column" : "row",
+      alignItems: i.direction === "col" ? "flex-start" : "center",
       gap: 2
-    }, children: (b = l.items) == null ? void 0 : b.map(
-      (S, o) => S.type === "block" ? y(S, `${c}-${o}`) : d(S, `${c}-${o}`)
+    }, children: (m = i.items) == null ? void 0 : m.map(
+      (S, s) => S.type === "block" ? x(S, `${c}-${s}`) : u(S, `${c}-${s}`)
     ) }, c);
-  }, w = (l, c) => {
+  }, w = (i, c) => {
     var S;
-    const b = l.title || l.label;
+    const m = i.title || i.label;
     return /* @__PURE__ */ g("div", { style: {
       display: "flex",
       flexDirection: "column",
@@ -2155,23 +2545,23 @@ function Kt({ items: n = [], onAction: i, style: p }) {
     }, children: [
       /* @__PURE__ */ t("div", { style: {
         display: "flex",
-        flexDirection: l.direction === "col" ? "column" : "row",
-        alignItems: l.direction === "col" ? "stretch" : "center",
+        flexDirection: i.direction === "col" ? "column" : "row",
+        alignItems: i.direction === "col" ? "stretch" : "center",
         gap: 2,
         flex: 1
-      }, children: (S = l.items) == null ? void 0 : S.map(
-        (o, x) => o.type === "block" ? y(o, x) : d(o, x)
+      }, children: (S = i.items) == null ? void 0 : S.map(
+        (s, b) => s.type === "block" ? x(s, b) : u(s, b)
       ) }),
-      b && /* @__PURE__ */ t("div", { style: {
+      m && /* @__PURE__ */ t("div", { style: {
         fontSize: 10,
         color: e.textMut,
         textAlign: "center",
         padding: "3px 0 4px",
         marginTop: 2,
         borderTop: `1px solid ${e.border}`
-      }, children: b })
+      }, children: m })
     ] }, c);
-  }, r = (l, c) => l.type === "block" ? w(l, c) : d(l, c);
+  }, r = (i, c) => i.type === "block" ? w(i, c) : u(i, c);
   return /* @__PURE__ */ t("div", { className: "dhx", style: {
     display: "flex",
     alignItems: "stretch",
@@ -2180,10 +2570,10 @@ function Kt({ items: n = [], onAction: i, style: p }) {
     overflowX: "auto",
     gap: 0,
     minHeight: 72,
-    ...p
+    ...d
   }, children: n.map(r) });
 }
-function Te({ count: n }) {
+function Oe({ count: n }) {
   return /* @__PURE__ */ t("span", { style: {
     position: "absolute",
     top: 3,
@@ -2203,33 +2593,33 @@ function Te({ count: n }) {
     pointerEvents: "none"
   }, children: n });
 }
-function Vt({ logo: n, items: i = [], vertical: p = !1, onAction: s, style: f }) {
-  const [a, h] = T(null), [d, y] = T(() => {
+function pn({ logo: n, items: o = [], vertical: d = !1, onAction: l, style: f }) {
+  const [a, h] = N(null), [u, x] = N(() => {
     const c = {};
-    return i.forEach((b) => {
-      b.id && b.twoState && b.active && (c[b.id] = !0);
+    return o.forEach((m) => {
+      m.id && m.twoState && m.active && (c[m.id] = !0);
     }), c;
-  }), w = U(null);
-  K(_, []), he(w, Z(() => h(null), []));
-  const r = (c, b) => {
-    var S, o;
+  }), w = oe(null);
+  _(q, []), ge(w, ae(() => h(null), []));
+  const r = (c, m) => {
+    var S, s;
     if (!c.disabled) {
-      if (c.twoState && c.id && y((x) => ({ ...x, [c.id]: !x[c.id] })), (S = c.items) != null && S.length) {
-        h((x) => x === b ? null : b);
+      if (c.twoState && c.id && x((b) => ({ ...b, [c.id]: !b[c.id] })), (S = c.items) != null && S.length) {
+        h((b) => b === m ? null : m);
         return;
       }
-      (o = c.onClick) == null || o.call(c, c.id || ""), s == null || s(c.id || "");
+      (s = c.onClick) == null || s.call(c, c.id || ""), l == null || l(c.id || "");
     }
-  }, l = (c, b) => {
-    var k;
+  }, i = (c, m) => {
+    var M;
     if (c.hidden) return null;
     if (c.type === "separator") return /* @__PURE__ */ t("div", { style: {
-      [p ? "height" : "width"]: 1,
+      [d ? "height" : "width"]: 1,
       background: e.border,
-      margin: p ? "4px 8px" : "0 6px",
+      margin: d ? "4px 8px" : "0 6px",
       alignSelf: "stretch"
-    } }, b);
-    if (c.type === "spacer") return /* @__PURE__ */ t("div", { style: { flex: 1 } }, b);
+    } }, m);
+    if (c.type === "spacer") return /* @__PURE__ */ t("div", { style: { flex: 1 } }, m);
     if (c.type === "input") return /* @__PURE__ */ g("div", { style: { position: "relative", display: "flex", alignItems: "center", margin: "0 4px" }, children: [
       c.icon && /* @__PURE__ */ t("span", { style: { position: "absolute", left: 8, color: e.textMut, fontSize: 15, pointerEvents: "none", zIndex: 1 }, children: c.icon }),
       /* @__PURE__ */ t(
@@ -2238,13 +2628,13 @@ function Vt({ logo: n, items: i = [], vertical: p = !1, onAction: s, style: f })
           className: "dhx dhx-input",
           style: { width: c.width || 200, height: 28, paddingLeft: c.icon ? 30 : void 0 },
           placeholder: c.placeholder,
-          onChange: ($) => {
-            var L;
-            return (L = c.onChange) == null ? void 0 : L.call(c, $.target.value);
+          onChange: (D) => {
+            var R;
+            return (R = c.onChange) == null ? void 0 : R.call(c, D.target.value);
           }
         }
       )
-    ] }, b);
+    ] }, m);
     if (c.type === "imageButton") return /* @__PURE__ */ g(
       "button",
       {
@@ -2262,23 +2652,23 @@ function Vt({ logo: n, items: i = [], vertical: p = !1, onAction: s, style: f })
           background: "transparent",
           flexShrink: 0
         },
-        onClick: () => r(c, b),
+        onClick: () => r(c, m),
         children: [
           c.src && /* @__PURE__ */ t("img", { src: c.src, alt: c.value || "", style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "50%" } }),
-          c.count !== void 0 && /* @__PURE__ */ t(Te, { count: c.count })
+          c.count !== void 0 && /* @__PURE__ */ t(Oe, { count: c.count })
         ]
       },
-      b
+      m
     );
-    const S = !!(c.twoState && c.id && d[c.id]), o = !!((k = c.items) != null && k.length), x = {
+    const S = !!(c.twoState && c.id && u[c.id]), s = !!((M = c.items) != null && M.length), b = {
       position: "relative",
-      height: p ? 40 : 36,
+      height: d ? 40 : 36,
       gap: 6,
       background: S ? e.primaryLt : "transparent",
       color: S ? e.primary : c.disabled ? e.textMut : e.text,
       opacity: c.disabled ? 0.55 : 1,
       cursor: c.disabled ? "not-allowed" : "pointer",
-      ...p ? {
+      ...d ? {
         width: "100%",
         justifyContent: "flex-start",
         padding: "0 16px",
@@ -2292,28 +2682,28 @@ function Vt({ logo: n, items: i = [], vertical: p = !1, onAction: s, style: f })
           className: "dhx dhx-btn dhx-btn-ghost",
           title: c.tooltip,
           disabled: c.disabled,
-          style: x,
-          onClick: () => r(c, b),
+          style: b,
+          onClick: () => r(c, m),
           children: [
             c.icon && /* @__PURE__ */ t("span", { style: { fontSize: 16, flexShrink: 0 }, children: c.icon }),
             c.value && /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: c.value }),
-            o && /* @__PURE__ */ t("span", { style: { fontSize: 9, opacity: 0.55, marginLeft: 2 }, children: "▼" }),
-            c.count !== void 0 && /* @__PURE__ */ t(Te, { count: c.count })
+            s && /* @__PURE__ */ t("span", { style: { fontSize: 9, opacity: 0.55, marginLeft: 2 }, children: "▼" }),
+            c.count !== void 0 && /* @__PURE__ */ t(Oe, { count: c.count })
           ]
         }
       ),
-      o && a === b && /* @__PURE__ */ t(
-        fe,
+      s && a === m && /* @__PURE__ */ t(
+        be,
         {
           items: c.items,
-          onSelect: ($) => {
-            var L;
-            h(null), $.id && ((L = c.onClick) == null || L.call(c, $.id), s == null || s($.id));
+          onSelect: (D) => {
+            var R;
+            h(null), D.id && ((R = c.onClick) == null || R.call(c, D.id), l == null || l(D.id));
           },
-          style: p ? { left: "100%", top: 0 } : { top: "100%" }
+          style: d ? { left: "100%", top: 0 } : { top: "100%" }
         }
       )
-    ] }, b);
+    ] }, m);
   };
   return /* @__PURE__ */ g(
     "nav",
@@ -2322,13 +2712,13 @@ function Vt({ logo: n, items: i = [], vertical: p = !1, onAction: s, style: f })
       className: "dhx",
       style: {
         display: "flex",
-        flexDirection: p ? "column" : "row",
-        alignItems: p ? "stretch" : "center",
+        flexDirection: d ? "column" : "row",
+        alignItems: d ? "stretch" : "center",
         background: e.surface,
-        borderBottom: p ? "none" : `1px solid ${e.border}`,
-        borderRight: p ? `1px solid ${e.border}` : "none",
-        padding: p ? "8px 0" : "0 12px",
-        minHeight: p ? void 0 : 48,
+        borderBottom: d ? "none" : `1px solid ${e.border}`,
+        borderRight: d ? `1px solid ${e.border}` : "none",
+        padding: d ? "8px 0" : "0 12px",
+        minHeight: d ? void 0 : 48,
         gap: 2,
         ...f
       },
@@ -2337,48 +2727,48 @@ function Vt({ logo: n, items: i = [], vertical: p = !1, onAction: s, style: f })
           color: e.text,
           fontWeight: 800,
           fontSize: 16,
-          padding: p ? "8px 16px 12px" : "0 12px 0 4px",
-          borderBottom: p ? `1px solid ${e.border}` : "none",
-          borderRight: p ? "none" : `1px solid ${e.border}`,
-          marginRight: p ? 0 : 8,
-          marginBottom: p ? 4 : 0,
+          padding: d ? "8px 16px 12px" : "0 12px 0 4px",
+          borderBottom: d ? `1px solid ${e.border}` : "none",
+          borderRight: d ? "none" : `1px solid ${e.border}`,
+          marginRight: d ? 0 : 8,
+          marginBottom: d ? 4 : 0,
           flexShrink: 0
         }, children: n }),
-        i.map(l)
+        o.map(i)
       ]
     }
   );
 }
 export {
-  Mt as Button,
-  Rt as Calendar,
-  Nt as Chart,
-  Et as Colorpicker,
-  $e as Combobox,
-  Dt as ContextMenu,
-  jt as DataView,
-  Ft as Form,
-  Tt as Grid,
-  pt as Layout,
-  Pt as List,
-  $t as Menu,
-  fe as MenuDropdown,
-  Re as MessageContext,
-  Bt as MessageProvider,
-  Vt as Navbar,
-  Yt as Pagination,
-  Wt as Popup,
-  Kt as Ribbon,
-  It as Sidebar,
-  De as Slider,
-  Lt as Tabbar,
-  gt as Timepicker,
-  Ct as Toolbar,
-  Ot as Tree,
-  At as Window,
+  _t as Button,
+  Zt as Calendar,
+  Qt as Chart,
+  en as Colorpicker,
+  Be as Combobox,
+  Xt as ContextMenu,
+  sn as DataView,
+  cn as Form,
+  Ut as Grid,
+  Dt as Layout,
+  ln as List,
+  Vt as Menu,
+  be as MenuDropdown,
+  Ke as MessageContext,
+  rn as MessageProvider,
+  pn as Navbar,
+  dn as Pagination,
+  tn as Popup,
+  un as Ribbon,
+  Gt as Sidebar,
+  He as Slider,
+  Jt as Tabbar,
+  At as Timepicker,
+  qt as Toolbar,
+  an as Tree,
+  nn as Window,
   e as tokens,
-  he as useClickOutside,
-  dt as useDrag,
-  Ht as useMessage
+  ge as useClickOutside,
+  St as useDrag,
+  on as useMessage
 };
 //# sourceMappingURL=dhx-react-suite.js.map