@arabold/docs-mcp-server 1.27.0 → 1.28.0

package/public/assets/main.js

@@ -257,7 +257,14 @@ function tryCatch(e, t, n, ...i) {
     handleError(r, e, t);
   }
 }
-function handleError(e, t, n = void 0) {
+function handleError(...e) {
+  return errorHandler(...e);
+}
+var errorHandler = normalErrorHandler;
+function setErrorHandler(e) {
+  errorHandler = e;
+}
+function normalErrorHandler(e, t, n = void 0) {
   e = Object.assign(
     e ?? { message: "No error message given." },
     { el: t, expression: n }
@@ -295,9 +302,9 @@ function normalEvaluator(e, t) {
 }
 function generateEvaluatorFromFunction(e, t) {
   return (n = () => {
-  }, { scope: i = {}, params: r = [] } = {}) => {
-    let a = t.apply(mergeProxies([i, ...e]), r);
-    runIfTypeOfFunction(n, a);
+  }, { scope: i = {}, params: r = [], context: a } = {}) => {
+    let s = t.apply(mergeProxies([i, ...e]), r);
+    runIfTypeOfFunction(n, s);
   };
 }
 var evaluatorMemo = {};
@@ -323,14 +330,14 @@ function generateFunctionFromString(e, t) {
 function generateEvaluatorFromString(e, t, n) {
   let i = generateFunctionFromString(t, n);
   return (r = () => {
-  }, { scope: a = {}, params: s = [] } = {}) => {
+  }, { scope: a = {}, params: s = [], context: o } = {}) => {
     i.result = void 0, i.finished = !1;
-    let o = mergeProxies([a, ...e]);
+    let l = mergeProxies([a, ...e]);
     if (typeof i == "function") {
-      let l = i(i, o).catch((c) => handleError(c, n, t));
-      i.finished ? (runIfTypeOfFunction(r, i.result, o, s, n), i.result = void 0) : l.then((c) => {
-        runIfTypeOfFunction(r, c, o, s, n);
-      }).catch((c) => handleError(c, n, t)).finally(() => i.result = void 0);
+      let c = i.call(o, i, l).catch((u) => handleError(u, n, t));
+      i.finished ? (runIfTypeOfFunction(r, i.result, l, s, n), i.result = void 0) : c.then((u) => {
+        runIfTypeOfFunction(r, u, l, s, n);
+      }).catch((u) => handleError(u, n, t)).finally(() => i.result = void 0);
     }
   };
 }
@@ -975,9 +982,9 @@ function isRadio(e) {
   return e.type === "radio" || e.localName === "ui-radio";
 }
 function debounce$1(e, t) {
-  var n;
+  let n;
   return function() {
-    var i = this, r = arguments, a = function() {
+    const i = this, r = arguments, a = function() {
       n = null, e.apply(i, r);
     };
     clearTimeout(n), n = setTimeout(a, t);
@@ -1077,7 +1084,7 @@ var Alpine = {
   get raw() {
     return raw;
   },
-  version: "3.14.9",
+  version: "3.15.2",
   flushAndStopDeferringMutations,
   dontAutoEvaluateFunctions,
   disableEffectScheduling,
@@ -1091,6 +1098,7 @@ var Alpine = {
   onlyDuringClone,
   addRootSelector,
   addInitSelector,
+  setErrorHandler,
   interceptClone,
   addScopeToNode,
   deferMutations,
@@ -1481,7 +1489,7 @@ function createInstrumentations() {
     i
   ];
 }
-var [mutableInstrumentations, readonlyInstrumentations, shallowInstrumentations, shallowReadonlyInstrumentations] = /* @__PURE__ */ createInstrumentations();
+var [mutableInstrumentations, readonlyInstrumentations] = /* @__PURE__ */ createInstrumentations();
 function createInstrumentationGetter(e, t) {
   const n = e ? readonlyInstrumentations : mutableInstrumentations;
   return (i, r, a) => r === "__v_isReactive" ? !e : r === "__v_isReadonly" ? e : r === "__v_raw" ? i : Reflect.get(hasOwn(n, r) && r in i ? n : i, r, a);
@@ -1718,7 +1726,7 @@ function isClickEvent(e) {
   return ["contextmenu", "click", "mouse"].some((t) => e.includes(t));
 }
 function isListeningForASpecificKeyThatHasntBeenPressed(e, t) {
-  let n = t.filter((a) => !["window", "document", "prevent", "stop", "once", "capture", "self", "away", "outside", "passive"].includes(a));
+  let n = t.filter((a) => !["window", "document", "prevent", "stop", "once", "capture", "self", "away", "outside", "passive", "preserve-scroll"].includes(a));
   if (n.includes("debounce")) {
     let a = n.indexOf("debounce");
     n.splice(a, isNumeric((n[a + 1] || "invalid-wait").split("ms")[0]) ? 2 : 1);
@@ -1777,8 +1785,7 @@ directive("model", (e, { modifiers: t, expression: n }, { effect: i, cleanup: r
   typeof n == "string" && e.type === "radio" && mutateDom(() => {
     e.hasAttribute("name") || e.setAttribute("name", n);
   });
-  var u = e.tagName.toLowerCase() === "select" || ["checkbox", "radio"].includes(e.type) || t.includes("lazy") ? "change" : "input";
-  let d = isCloning ? () => {
+  let u = e.tagName.toLowerCase() === "select" || ["checkbox", "radio"].includes(e.type) || t.includes("lazy") ? "change" : "input", d = isCloning ? () => {
   } : on(e, u, t, (f) => {
     c(getInputValue(e, t, f, l()));
   });
@@ -2009,9 +2016,9 @@ function loop(e, t, n, i) {
       let [y, _] = d[h], b = y === "template" ? a : o[y];
       b._x_currentIfEl && (b = b._x_currentIfEl);
       let m = c[_], w = u[_], E = document.importNode(a.content, !0).firstElementChild, x = reactive(m);
-      addScopeToNode(E, x, a), E._x_refreshXForScope = (C) => {
-        Object.entries(C).forEach(([D, k]) => {
-          x[D] = k;
+      addScopeToNode(E, x, a), E._x_refreshXForScope = (S) => {
+        Object.entries(S).forEach(([A, D]) => {
+          x[A] = D;
         });
       }, mutateDom(() => {
         b.after(E), skipDuringClone(() => initTree(E))();
@@ -2175,8 +2182,8 @@ var __assign$d = function() {
   }, __assign$d.apply(this, arguments);
 }, Default$d = {
   alwaysOpen: !1,
-  activeClasses: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white",
-  inactiveClasses: "text-gray-500 dark:text-gray-400",
+  activeClasses: "bg-neutral-secondary-medium text-heading",
+  inactiveClasses: "bg-neutral-primary text-body",
   onOpen: function() {
   },
   onClose: function() {
@@ -2702,8 +2709,8 @@ var toPaddingObject = function(t, n) {
 function arrow(e) {
   var t, n = e.state, i = e.name, r = e.options, a = n.elements.arrow, s = n.modifiersData.popperOffsets, o = getBasePlacement(n.placement), l = getMainAxisFromPlacement(o), c = [left, right].indexOf(o) >= 0, u = c ? "height" : "width";
   if (!(!a || !s)) {
-    var d = toPaddingObject(r.padding, n), f = getLayoutRect(a), p = l === "y" ? top : left, g = l === "y" ? bottom : right, v = n.rects.reference[u] + n.rects.reference[l] - s[l] - n.rects.popper[u], h = s[l] - n.rects.reference[l], y = getOffsetParent(a), _ = y ? l === "y" ? y.clientHeight || 0 : y.clientWidth || 0 : 0, b = v / 2 - h / 2, m = d[p], w = _ - f[u] - d[g], E = _ / 2 - f[u] / 2 + b, x = within(m, E, w), C = l;
-    n.modifiersData[i] = (t = {}, t[C] = x, t.centerOffset = x - E, t);
+    var d = toPaddingObject(r.padding, n), f = getLayoutRect(a), p = l === "y" ? top : left, g = l === "y" ? bottom : right, v = n.rects.reference[u] + n.rects.reference[l] - s[l] - n.rects.popper[u], h = s[l] - n.rects.reference[l], y = getOffsetParent(a), _ = y ? l === "y" ? y.clientHeight || 0 : y.clientWidth || 0 : 0, b = v / 2 - h / 2, m = d[p], w = _ - f[u] - d[g], E = _ / 2 - f[u] / 2 + b, x = within(m, E, w), S = l;
+    n.modifiersData[i] = (t = {}, t[S] = x, t.centerOffset = x - E, t);
   }
 }
 function effect$1(e) {
@@ -2746,34 +2753,34 @@ function mapToStyles(e) {
   p = h.x, v = h.y;
   var y = s.hasOwnProperty("x"), _ = s.hasOwnProperty("y"), b = left, m = top, w = window;
   if (c) {
-    var E = getOffsetParent(n), x = "clientHeight", C = "clientWidth";
-    if (E === getWindow(n) && (E = getDocumentElement(n), getComputedStyle$1(E).position !== "static" && o === "absolute" && (x = "scrollHeight", C = "scrollWidth")), E = E, r === top || (r === left || r === right) && a === end) {
+    var E = getOffsetParent(n), x = "clientHeight", S = "clientWidth";
+    if (E === getWindow(n) && (E = getDocumentElement(n), getComputedStyle$1(E).position !== "static" && o === "absolute" && (x = "scrollHeight", S = "scrollWidth")), E = E, r === top || (r === left || r === right) && a === end) {
       m = bottom;
-      var D = d && E === w && w.visualViewport ? w.visualViewport.height : (
+      var A = d && E === w && w.visualViewport ? w.visualViewport.height : (
         // $FlowFixMe[prop-missing]
         E[x]
       );
-      v -= D - i.height, v *= l ? 1 : -1;
+      v -= A - i.height, v *= l ? 1 : -1;
     }
     if (r === left || (r === top || r === bottom) && a === end) {
       b = right;
-      var k = d && E === w && w.visualViewport ? w.visualViewport.width : (
+      var D = d && E === w && w.visualViewport ? w.visualViewport.width : (
         // $FlowFixMe[prop-missing]
-        E[C]
+        E[S]
       );
-      p -= k - i.width, p *= l ? 1 : -1;
+      p -= D - i.width, p *= l ? 1 : -1;
     }
   }
   var O = Object.assign({
     position: o
-  }, c && unsetSides), M = u === !0 ? roundOffsetsByDPR({
+  }, c && unsetSides), H = u === !0 ? roundOffsetsByDPR({
     x: p,
     y: v
   }, getWindow(n)) : {
     x: p,
     y: v
   };
-  if (p = M.x, v = M.y, l) {
+  if (p = H.x, v = H.y, l) {
     var T;
     return Object.assign({}, O, (T = {}, T[m] = _ ? "0" : "", T[b] = y ? "0" : "", T.transform = (w.devicePixelRatio || 1) <= 1 ? "translate(" + p + "px, " + v + "px)" : "translate3d(" + p + "px, " + v + "px, 0)", T));
   }
@@ -2981,20 +2988,20 @@ function detectOverflow(e, t) {
     reference: E,
     element: b,
     placement: r
-  }), C = rectToClientRect(Object.assign({}, b, x)), D = f === popper ? C : E, k = {
-    top: w.top - D.top + y.top,
-    bottom: D.bottom - w.bottom + y.bottom,
-    left: w.left - D.left + y.left,
-    right: D.right - w.right + y.right
+  }), S = rectToClientRect(Object.assign({}, b, x)), A = f === popper ? S : E, D = {
+    top: w.top - A.top + y.top,
+    bottom: A.bottom - w.bottom + y.bottom,
+    left: w.left - A.left + y.left,
+    right: A.right - w.right + y.right
   }, O = e.modifiersData.offset;
   if (f === popper && O) {
-    var M = O[r];
-    Object.keys(k).forEach(function(T) {
+    var H = O[r];
+    Object.keys(D).forEach(function(T) {
       var F = [right, bottom].indexOf(T) >= 0 ? 1 : -1, I = [top, bottom].indexOf(T) >= 0 ? "y" : "x";
-      k[T] += M[I] * F;
+      D[T] += H[I] * F;
     });
   }
-  return k;
+  return D;
 }
 function computeAutoPlacement(e, t) {
   t === void 0 && (t = {});
@@ -3034,40 +3041,40 @@ function flip(e) {
         flipVariations: g,
         allowedAutoPlacements: v
       }) : B);
-    }, []), w = t.rects.reference, E = t.rects.popper, x = /* @__PURE__ */ new Map(), C = !0, D = m[0], k = 0; k < m.length; k++) {
-      var O = m[k], M = getBasePlacement(O), T = getVariation(O) === start, F = [top, bottom].indexOf(M) >= 0, I = F ? "width" : "height", R = detectOverflow(t, {
+    }, []), w = t.rects.reference, E = t.rects.popper, x = /* @__PURE__ */ new Map(), S = !0, A = m[0], D = 0; D < m.length; D++) {
+      var O = m[D], H = getBasePlacement(O), T = getVariation(O) === start, F = [top, bottom].indexOf(H) >= 0, I = F ? "width" : "height", R = detectOverflow(t, {
         placement: O,
         boundary: u,
         rootBoundary: d,
         altBoundary: f,
         padding: c
-      }), S = F ? T ? right : left : T ? bottom : top;
-      w[I] > E[I] && (S = getOppositePlacement(S));
-      var W = getOppositePlacement(S), $ = [];
-      if (a && $.push(R[M] <= 0), o && $.push(R[S] <= 0, R[W] <= 0), $.every(function(V) {
+      }), k = F ? T ? right : left : T ? bottom : top;
+      w[I] > E[I] && (k = getOppositePlacement(k));
+      var W = getOppositePlacement(k), $ = [];
+      if (a && $.push(R[H] <= 0), o && $.push(R[k] <= 0, R[W] <= 0), $.every(function(V) {
         return V;
       })) {
-        D = O, C = !1;
+        A = O, S = !1;
         break;
       }
       x.set(O, $);
     }
-    if (C)
+    if (S)
       for (var q = g ? 3 : 1, N = function(B) {
-        var A = m.find(function(L) {
-          var H = x.get(L);
-          if (H)
-            return H.slice(0, B).every(function(K) {
+        var C = m.find(function(L) {
+          var M = x.get(L);
+          if (M)
+            return M.slice(0, B).every(function(K) {
               return K;
             });
         });
-        if (A)
-          return D = A, "break";
+        if (C)
+          return A = C, "break";
       }, P = q; P > 0; P--) {
         var j = N(P);
         if (j === "break") break;
       }
-    t.placement !== D && (t.modifiersData[i]._skip = !0, t.placement = D, t.reset = !0);
+    t.placement !== A && (t.modifiersData[i]._skip = !0, t.placement = A, t.reset = !0);
   }
 }
 const flip$1 = {
@@ -3168,31 +3175,31 @@ function preventOverflow(e) {
     rootBoundary: c,
     padding: d,
     altBoundary: u
-  }), y = getBasePlacement(t.placement), _ = getVariation(t.placement), b = !_, m = getMainAxisFromPlacement(y), w = getAltAxis(m), E = t.modifiersData.popperOffsets, x = t.rects.reference, C = t.rects.popper, D = typeof v == "function" ? v(Object.assign({}, t.rects, {
+  }), y = getBasePlacement(t.placement), _ = getVariation(t.placement), b = !_, m = getMainAxisFromPlacement(y), w = getAltAxis(m), E = t.modifiersData.popperOffsets, x = t.rects.reference, S = t.rects.popper, A = typeof v == "function" ? v(Object.assign({}, t.rects, {
     placement: t.placement
-  })) : v, k = typeof D == "number" ? {
-    mainAxis: D,
-    altAxis: D
+  })) : v, D = typeof A == "number" ? {
+    mainAxis: A,
+    altAxis: A
   } : Object.assign({
     mainAxis: 0,
     altAxis: 0
-  }, D), O = t.modifiersData.offset ? t.modifiersData.offset[t.placement] : null, M = {
+  }, A), O = t.modifiersData.offset ? t.modifiersData.offset[t.placement] : null, H = {
     x: 0,
     y: 0
   };
   if (E) {
     if (a) {
-      var T, F = m === "y" ? top : left, I = m === "y" ? bottom : right, R = m === "y" ? "height" : "width", S = E[m], W = S + h[F], $ = S - h[I], q = p ? -C[R] / 2 : 0, N = _ === start ? x[R] : C[R], P = _ === start ? -C[R] : -x[R], j = t.elements.arrow, V = p && j ? getLayoutRect(j) : {
+      var T, F = m === "y" ? top : left, I = m === "y" ? bottom : right, R = m === "y" ? "height" : "width", k = E[m], W = k + h[F], $ = k - h[I], q = p ? -S[R] / 2 : 0, N = _ === start ? x[R] : S[R], P = _ === start ? -S[R] : -x[R], j = t.elements.arrow, V = p && j ? getLayoutRect(j) : {
         width: 0,
         height: 0
-      }, B = t.modifiersData["arrow#persistent"] ? t.modifiersData["arrow#persistent"].padding : getFreshSideObject(), A = B[F], L = B[I], H = within(0, x[R], V[R]), K = b ? x[R] / 2 - q - H - A - k.mainAxis : N - H - A - k.mainAxis, ae = b ? -x[R] / 2 + q + H + L + k.mainAxis : P + H + L + k.mainAxis, Y = t.elements.arrow && getOffsetParent(t.elements.arrow), se = Y ? m === "y" ? Y.clientTop || 0 : Y.clientLeft || 0 : 0, J = (T = O?.[m]) != null ? T : 0, oe = S + K - J - se, le = S + ae - J, G = within(p ? min(W, oe) : W, S, p ? max($, le) : $);
-      E[m] = G, M[m] = G - S;
+      }, B = t.modifiersData["arrow#persistent"] ? t.modifiersData["arrow#persistent"].padding : getFreshSideObject(), C = B[F], L = B[I], M = within(0, x[R], V[R]), K = b ? x[R] / 2 - q - M - C - D.mainAxis : N - M - C - D.mainAxis, ae = b ? -x[R] / 2 + q + M + L + D.mainAxis : P + M + L + D.mainAxis, Y = t.elements.arrow && getOffsetParent(t.elements.arrow), se = Y ? m === "y" ? Y.clientTop || 0 : Y.clientLeft || 0 : 0, J = (T = O?.[m]) != null ? T : 0, oe = k + K - J - se, le = k + ae - J, G = within(p ? min(W, oe) : W, k, p ? max($, le) : $);
+      E[m] = G, H[m] = G - k;
     }
     if (o) {
-      var Z, ce = m === "x" ? top : left, ue = m === "x" ? bottom : right, z = E[w], U = w === "y" ? "height" : "width", Q = z + h[ce], ee = z - h[ue], X = [top, left].indexOf(y) !== -1, te = (Z = O?.[w]) != null ? Z : 0, ne = X ? Q : z - x[U] - C[U] - te + k.altAxis, ie = X ? z + x[U] + C[U] - te - k.altAxis : ee, re = p && X ? withinMaxClamp(ne, z, ie) : within(p ? ne : Q, z, p ? ie : ee);
-      E[w] = re, M[w] = re - z;
+      var Z, ce = m === "x" ? top : left, ue = m === "x" ? bottom : right, z = E[w], U = w === "y" ? "height" : "width", Q = z + h[ce], ee = z - h[ue], X = [top, left].indexOf(y) !== -1, te = (Z = O?.[w]) != null ? Z : 0, ne = X ? Q : z - x[U] - S[U] - te + D.altAxis, ie = X ? z + x[U] + S[U] - te - D.altAxis : ee, re = p && X ? withinMaxClamp(ne, z, ie) : within(p ? ne : Q, z, p ? ie : ee);
+      E[w] = re, H[w] = re - z;
     }
-    t.modifiersData[i] = M;
+    t.modifiersData[i] = H;
   }
 }
 const preventOverflow$1 = {
@@ -3334,19 +3341,19 @@ function popperGenerator(e) {
             u.rects = {
               reference: getCompositeRect(_, getOffsetParent(b), u.options.strategy === "fixed"),
               popper: getLayoutRect(b)
-            }, u.reset = !1, u.placement = u.options.placement, u.orderedModifiers.forEach(function(k) {
-              return u.modifiersData[k.name] = Object.assign({}, k.data);
+            }, u.reset = !1, u.placement = u.options.placement, u.orderedModifiers.forEach(function(D) {
+              return u.modifiersData[D.name] = Object.assign({}, D.data);
             });
             for (var m = 0; m < u.orderedModifiers.length; m++) {
               if (u.reset === !0) {
                 u.reset = !1, m = -1;
                 continue;
               }
-              var w = u.orderedModifiers[m], E = w.fn, x = w.options, C = x === void 0 ? {} : x, D = w.name;
+              var w = u.orderedModifiers[m], E = w.fn, x = w.options, S = x === void 0 ? {} : x, A = w.name;
               typeof E == "function" && (u = E({
                 state: u,
-                options: C,
-                name: D,
+                options: S,
+                name: A,
                 instance: p
               }) || u);
             }
@@ -3574,7 +3581,7 @@ var __assign$8 = function() {
   }, __assign$8.apply(this, arguments);
 }, Default$8 = {
   placement: "center",
-  backdropClasses: "bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40",
+  backdropClasses: "bg-dark-backdrop/70 fixed inset-0 z-40",
   backdrop: "dynamic",
   closable: !0,
   onHide: function() {
@@ -3746,7 +3753,7 @@ var __assign$7 = function() {
   backdrop: !0,
   edge: !1,
   edgeOffset: "bottom-[60px]",
-  backdropClasses: "bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30",
+  backdropClasses: "bg-dark-backdrop/70 fixed inset-0 z-30",
   onShow: function() {
   },
   onHide: function() {
@@ -3939,8 +3946,8 @@ var __assign$6 = function() {
   }, __assign$6.apply(this, arguments);
 }, Default$6 = {
   defaultTabId: null,
-  activeClasses: "text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500",
-  inactiveClasses: "dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300",
+  activeClasses: "text-fg-brand hover:text-fg-brand border-brand",
+  inactiveClasses: "border-transparent text-body hover:text-heading border-soft hover:border-default",
   onShow: function() {
   }
 }, DefaultInstanceOptions$6 = {
@@ -4962,10 +4969,10 @@ var locales = {
   maxNumberOfDates: 1,
   maxView: 3,
   minDate: null,
-  nextArrow: '<svg class="w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>',
+  nextArrow: '<svg class="w-4 h-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg>',
   orientation: "auto",
   pickLevel: 0,
-  prevArrow: '<svg class="w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/></svg>',
+  prevArrow: '<svg class="w-4 h-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/></svg>',
   showDaysOfWeek: !0,
   showOnClick: !0,
   showOnFocus: !0,
@@ -5028,8 +5035,8 @@ function processOptions(e, t) {
   }
   var m = d, w = c;
   if (n.minDate !== void 0 && (m = n.minDate === null ? dateValue(0, 0, 1) : validateDate(n.minDate, s, l, m), delete n.minDate), n.maxDate !== void 0 && (w = n.maxDate === null ? void 0 : validateDate(n.maxDate, s, l, w), delete n.maxDate), w < m ? (d = i.minDate = w, c = i.maxDate = m) : (d !== m && (d = i.minDate = m), c !== w && (c = i.maxDate = w)), n.datesDisabled && (i.datesDisabled = n.datesDisabled.reduce(function(I, R) {
-    var S = parseDate(R, s, l);
-    return S !== void 0 ? pushUnique(I, S) : I;
+    var k = parseDate(R, s, l);
+    return k !== void 0 ? pushUnique(I, k) : I;
   }, []), delete n.datesDisabled), n.defaultViewDate !== void 0) {
     var E = parseDate(n.defaultViewDate, s, l);
     E !== void 0 && (i.defaultViewDate = E), delete n.defaultViewDate;
@@ -5039,18 +5046,18 @@ function processOptions(e, t) {
     isNaN(x) || (g = i.weekStart = x, i.weekEnd = calcEndOfWeek(x)), delete n.weekStart;
   }
   if (n.daysOfWeekDisabled && (i.daysOfWeekDisabled = n.daysOfWeekDisabled.reduce(sanitizeDOW, []), delete n.daysOfWeekDisabled), n.daysOfWeekHighlighted && (i.daysOfWeekHighlighted = n.daysOfWeekHighlighted.reduce(sanitizeDOW, []), delete n.daysOfWeekHighlighted), n.maxNumberOfDates !== void 0) {
-    var C = parseInt(n.maxNumberOfDates, 10);
-    C >= 0 && (i.maxNumberOfDates = C, i.multidate = C !== 1), delete n.maxNumberOfDates;
+    var S = parseInt(n.maxNumberOfDates, 10);
+    S >= 0 && (i.maxNumberOfDates = S, i.multidate = S !== 1), delete n.maxNumberOfDates;
   }
   n.dateDelimiter && (i.dateDelimiter = String(n.dateDelimiter), delete n.dateDelimiter);
-  var D = f;
-  n.pickLevel !== void 0 && (D = validateViewId(n.pickLevel, 2), delete n.pickLevel), D !== f && (f = i.pickLevel = D);
-  var k = u;
-  n.maxView !== void 0 && (k = validateViewId(n.maxView, u), delete n.maxView), k = f > k ? f : k, k !== u && (u = i.maxView = k);
+  var A = f;
+  n.pickLevel !== void 0 && (A = validateViewId(n.pickLevel, 2), delete n.pickLevel), A !== f && (f = i.pickLevel = A);
+  var D = u;
+  n.maxView !== void 0 && (D = validateViewId(n.maxView, u), delete n.maxView), D = f > D ? f : D, D !== u && (u = i.maxView = D);
   var O = p;
   if (n.startView !== void 0 && (O = validateViewId(n.startView, O), delete n.startView), O < f ? O = f : O > u && (O = u), O !== p && (i.startView = O), n.prevArrow) {
-    var M = parseHTML(n.prevArrow);
-    M.childNodes.length > 0 && (i.prevArrow = M.childNodes), delete n.prevArrow;
+    var H = parseHTML(n.prevArrow);
+    H.childNodes.length > 0 && (i.prevArrow = H.childNodes), delete n.prevArrow;
   }
   if (n.nextArrow) {
     var T = parseHTML(n.nextArrow);
@@ -5080,34 +5087,34 @@ function processOptions(e, t) {
   }), i;
 }
 var pickerTemplate = optimizeTemplateHTML(`<div class="datepicker hidden">
-  <div class="datepicker-picker inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4">
+  <div class="datepicker-picker inline-block rounded-base bg-neutral-primary-medium border border-default-medium p-4">
     <div class="datepicker-header">
-      <div class="datepicker-title bg-white dark:bg-gray-700 dark:text-white px-2 py-3 text-center font-semibold"></div>
+      <div class="datepicker-title bg-neutral-primary-medium text-heading px-2 py-3 text-center font-medium"></div>
       <div class="datepicker-controls flex justify-between mb-2">
-        <button type="button" class="bg-white dark:bg-gray-700 rounded-lg text-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-gray-200 prev-btn"></button>
-        <button type="button" class="text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200 view-switch"></button>
-        <button type="button" class="bg-white dark:bg-gray-700 rounded-lg text-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-gray-200 next-btn"></button>
+        <button type="button" class="bg-neutral-primary-medium rounded-base text-body hover:bg-neutral-tertiary-medium hover:text-heading text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-neutral-tertiary prev-btn"></button>
+        <button type="button" class="text-sm rounded-base text-heading bg-neutral-primary-medium font-medium py-2.5 px-5 hover:bg-neutral-tertiary-medium focus:outline-none focus:ring-2 focus:ring-neutral-tertiary view-switch"></button>
+        <button type="button" class="bg-neutral-primary-medium rounded-base text-body hover:bg-neutral-tertiary-medium hover:text-heading text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-neutral-tertiary next-btn"></button>
       </div>
     </div>
     <div class="datepicker-main p-1"></div>
     <div class="datepicker-footer">
       <div class="datepicker-controls flex space-x-2 rtl:space-x-reverse mt-2">
-        <button type="button" class="%buttonClass% today-btn text-white bg-blue-700 !bg-primary-700 dark:bg-blue-600 dark:!bg-primary-600 hover:bg-blue-800 hover:!bg-primary-800 dark:hover:bg-blue-700 dark:hover:!bg-primary-700 focus:ring-4 focus:ring-blue-300 focus:!ring-primary-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
-        <button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300 focus:!ring-primary-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
+        <button type="button" class="%buttonClass% today-btn text-white bg-brand hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium font-medium rounded-base text-sm px-5 py-2 text-center w-1/2"></button>
+        <button type="button" class="%buttonClass% clear-btn text-body bg-neutral-secondary-medium border border-default-medium hover:bg-neutral-tertiary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium rounded-base text-sm px-5 py-2 text-center w-1/2"></button>
       </div>
     </div>
   </div>
 </div>`), daysTemplate = optimizeTemplateHTML(`<div class="days">
   <div class="days-of-week grid grid-cols-7 mb-1">`.concat(createTagRepeat("span", 7, {
-  class: "dow block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm"
+  class: "dow block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm"
 }), `</div>
   <div class="datepicker-grid w-64 grid grid-cols-7">`).concat(createTagRepeat("span", 42, {
-  class: "block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400"
+  class: "block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm h-6 leading-6 text-sm font-medium text-fg-disabled"
 }), `</div>
 </div>`)), calendarWeeksTemplate = optimizeTemplateHTML(`<div class="calendar-weeks">
-  <div class="days-of-week flex"><span class="dow h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400"></span></div>
+  <div class="days-of-week flex"><span class="dow h-6 leading-6 text-sm font-medium text-fg-disabled"></span></div>
   <div class="weeks">`.concat(createTagRepeat("span", 6, {
-  class: "week block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm"
+  class: "week block flex-1 leading-9 border-0 rounded-base cursor-default text-center text-body font-medium text-sm"
 }), `</div>
 </div>`)), View = /* @__PURE__ */ (function() {
   function e(t, n) {
@@ -5187,7 +5194,7 @@ var pickerTemplate = optimizeTemplateHTML(`<div class="datepicker hidden">
         } else this.calendarWeeks && !i.calendarWeeks && (this.element.removeChild(this.calendarWeeks.element), this.calendarWeeks = null);
       i.showDaysOfWeek !== void 0 && (i.showDaysOfWeek ? (showElement(this.dow), this.calendarWeeks && showElement(this.calendarWeeks.dow)) : (hideElement(this.dow), this.calendarWeeks && hideElement(this.calendarWeeks.dow))), a && Array.from(this.dow.children).forEach(function(l, c) {
         var u = (r.weekStart + c) % 7;
-        l.textContent = r.dayNames[u], l.className = r.daysOfWeekDisabled.includes(u) ? "dow disabled text-center h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400 cursor-not-allowed" : "dow text-center h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400";
+        l.textContent = r.dayNames[u], l.className = r.daysOfWeekDisabled.includes(u) ? "dow disabled text-center h-6 leading-6 text-sm font-medium text-fg-disabled cursor-not-allowed" : "dow text-center h-6 leading-6 text-sm font-medium text-body";
       });
     }
     // Apply update on the focused date to view's settings
@@ -5219,11 +5226,11 @@ var pickerTemplate = optimizeTemplateHTML(`<div class="datepicker hidden">
       }
       Array.from(this.grid.children).forEach(function(s, o) {
         var l = s.classList, c = addDays(i.start, o), u = new Date(c), d = u.getDay();
-        if (s.className = "datepicker-cell hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ".concat(i.cellClass), s.dataset.date = c, s.textContent = u.getDate(), c < i.first ? l.add("prev", "text-gray-500", "dark:text-white") : c > i.last && l.add("next", "text-gray-500", "dark:text-white"), i.today === c && l.add("today", "bg-gray-100", "dark:bg-gray-600"), (c < i.minDate || c > i.maxDate || i.disabled.includes(c)) && (l.add("disabled", "cursor-not-allowed", "text-gray-400", "dark:text-gray-500"), l.remove("hover:bg-gray-100", "dark:hover:bg-gray-600", "text-gray-900", "dark:text-white", "cursor-pointer")), i.daysOfWeekDisabled.includes(d) && (l.add("disabled", "cursor-not-allowed", "text-gray-400", "dark:text-gray-500"), l.remove("hover:bg-gray-100", "dark:hover:bg-gray-600", "text-gray-900", "dark:text-white", "cursor-pointer"), pushUnique(i.disabled, c)), i.daysOfWeekHighlighted.includes(d) && l.add("highlighted"), i.range) {
+        if (s.className = "datepicker-cell hover:bg-neutral-tertiary-medium block flex-1 leading-9 border-0 rounded-base cursor-pointer text-center text-body font-medium text-sm ".concat(i.cellClass), s.dataset.date = c, s.textContent = u.getDate(), c < i.first ? l.add("prev", "text-fg-disabled") : c > i.last && l.add("next", "text-fg-disabled"), i.today === c && l.add("today", "bg-gray-100", "dark:bg-gray-600"), (c < i.minDate || c > i.maxDate || i.disabled.includes(c)) && (l.add("disabled", "cursor-not-allowed", "text-fg-disabled"), l.remove("hover:bg-neutral-tertiary-medium", "text-body", "cursor-pointer")), i.daysOfWeekDisabled.includes(d) && (l.add("disabled", "cursor-not-allowed", "text-fg-disabled"), l.remove("hover:bg-neutral-tertiary-medium", "text-body", "cursor-pointer"), pushUnique(i.disabled, c)), i.daysOfWeekHighlighted.includes(d) && l.add("highlighted"), i.range) {
           var f = _slicedToArray(i.range, 2), p = f[0], g = f[1];
-          c > p && c < g && (l.add("range", "bg-gray-200", "dark:bg-gray-600"), l.remove("rounded-lg", "rounded-l-lg", "rounded-r-lg")), c === p && (l.add("range-start", "bg-gray-100", "dark:bg-gray-600", "rounded-l-lg"), l.remove("rounded-lg", "rounded-r-lg")), c === g && (l.add("range-end", "bg-gray-100", "dark:bg-gray-600", "rounded-r-lg"), l.remove("rounded-lg", "rounded-l-lg"));
+          c > p && c < g && (l.add("range", "bg-neutral-tertiary-medium"), l.remove("rounded-base", "rounded-s-base", "rounded-e-base")), c === p && (l.add("range-start", "bg-brand", "rounded-s-base"), l.remove("rounded-base", "rounded-e-base")), c === g && (l.add("range-end", "bg-neutral-tertiary-medium", "rounded-e-base"), l.remove("rounded-base", "rounded-s-base"));
         }
-        i.selected.includes(c) && (l.add("selected", "bg-blue-700", "!bg-primary-700", "text-white", "dark:bg-blue-600", "dark:!bg-primary-600", "dark:text-white"), l.remove("text-gray-900", "text-gray-500", "hover:bg-gray-100", "dark:text-white", "dark:hover:bg-gray-600", "dark:bg-gray-600", "bg-gray-100", "bg-gray-200")), c === i.focused && l.add("focused"), i.beforeShow && i.performBeforeHook(s, c, c);
+        i.selected.includes(c) && (l.add("selected", "bg-brand", "text-white"), l.remove("text-body", "hover:bg-neutral-tertiary-medium", "bg-neutral-tertiary-medium")), c === i.focused && l.add("focused"), i.beforeShow && i.performBeforeHook(s, c, c);
       });
     }
     // Update the view UI by applying the changes of selected and focused items
@@ -5232,10 +5239,10 @@ var pickerTemplate = optimizeTemplateHTML(`<div class="datepicker hidden">
     value: function() {
       var i = this, r = this.range || [], a = _slicedToArray(r, 2), s = a[0], o = a[1];
       this.grid.querySelectorAll(".range, .range-start, .range-end, .selected, .focused").forEach(function(l) {
-        l.classList.remove("range", "range-start", "range-end", "selected", "bg-blue-700", "!bg-primary-700", "text-white", "dark:bg-blue-600", "dark:!bg-primary-600", "dark:text-white", "focused"), l.classList.add("text-gray-900", "rounded-lg", "dark:text-white");
+        l.classList.remove("range", "range-start", "range-end", "selected", "bg-brand", "text-white", "focused"), l.classList.add("text-body", "rounded-base");
       }), Array.from(this.grid.children).forEach(function(l) {
         var c = Number(l.dataset.date), u = l.classList;
-        u.remove("bg-gray-200", "dark:bg-gray-600", "rounded-l-lg", "rounded-r-lg"), c > s && c < o && (u.add("range", "bg-gray-200", "dark:bg-gray-600"), u.remove("rounded-lg")), c === s && (u.add("range-start", "bg-gray-200", "dark:bg-gray-600", "rounded-l-lg"), u.remove("rounded-lg")), c === o && (u.add("range-end", "bg-gray-200", "dark:bg-gray-600", "rounded-r-lg"), u.remove("rounded-lg")), i.selected.includes(c) && (u.add("selected", "bg-blue-700", "!bg-primary-700", "text-white", "dark:bg-blue-600", "dark:!bg-primary-600", "dark:text-white"), u.remove("text-gray-900", "hover:bg-gray-100", "dark:text-white", "dark:hover:bg-gray-600", "bg-gray-100", "bg-gray-200", "dark:bg-gray-600")), c === i.focused && u.add("focused");
+        u.remove("bg-neutral-tertiary-medium", "rounded-s-base", "rounded-e-base"), c > s && c < o && (u.add("range", "bg-neutral-tertiary-medium"), u.remove("rounded-base")), c === s && (u.add("range-start", "bg-brand", "text-white", "rounded-s-base"), u.remove("rounded-base")), c === o && (u.add("range-end", "bg-neutral-tertiary-medium", "rounded-e-base"), u.remove("rounded-base")), i.selected.includes(c) && (u.add("selected", "bg-brand", "text-white"), u.remove("text-body", "hover:bg-neutral-tertiary-medium", "bg-neutral-tertiary-medium")), c === i.focused && u.add("focused");
       });
     }
     // Update the view UI by applying the change of focused item
@@ -5322,11 +5329,11 @@ var MonthsView = /* @__PURE__ */ (function(e) {
       var r = this.selected[this.year] || [], a = this.year < this.minYear || this.year > this.maxYear, s = this.year === this.minYear, o = this.year === this.maxYear, l = computeMonthRange(this.range, this.year);
       Array.from(this.grid.children).forEach(function(c, u) {
         var d = c.classList, f = dateValue(i.year, u, 1);
-        if (c.className = "datepicker-cell hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ".concat(i.cellClass), i.isMinView && (c.dataset.date = f), c.textContent = i.monthNames[u], (a || s && u < i.minMonth || o && u > i.maxMonth) && d.add("disabled"), l) {
+        if (c.className = "datepicker-cell hover:bg-neutral-tertiary-medium block flex-1 leading-9 border-0 rounded-base cursor-pointer text-center text-body font-medium text-sm ".concat(i.cellClass), i.isMinView && (c.dataset.date = f), c.textContent = i.monthNames[u], (a || s && u < i.minMonth || o && u > i.maxMonth) && d.add("disabled"), l) {
           var p = _slicedToArray(l, 2), g = p[0], v = p[1];
           u > g && u < v && d.add("range"), u === g && d.add("range-start"), u === v && d.add("range-end");
         }
-        r.includes(u) && (d.add("selected", "bg-blue-700", "!bg-primary-700", "text-white", "dark:bg-blue-600", "dark:!bg-primary-600", "dark:text-white"), d.remove("text-gray-900", "hover:bg-gray-100", "dark:text-white", "dark:hover:bg-gray-600")), u === i.focused && d.add("focused"), i.beforeShow && i.performBeforeHook(c, u, f);
+        r.includes(u) && (d.add("selected", "bg-brand", "text-white", "dark:text-white"), d.remove("text-body", "hover:bg-neutral-tertiary-medium", "dark:text-white")), u === i.focused && d.add("focused"), i.beforeShow && i.performBeforeHook(c, u, f);
       });
     }
     // Update the view UI by applying the changes of selected and focused items
@@ -5335,10 +5342,10 @@ var MonthsView = /* @__PURE__ */ (function(e) {
     value: function() {
       var i = this, r = this.selected[this.year] || [], a = computeMonthRange(this.range, this.year) || [], s = _slicedToArray(a, 2), o = s[0], l = s[1];
       this.grid.querySelectorAll(".range, .range-start, .range-end, .selected, .focused").forEach(function(c) {
-        c.classList.remove("range", "range-start", "range-end", "selected", "bg-blue-700", "!bg-primary-700", "dark:bg-blue-600", "dark:!bg-primary-700", "dark:text-white", "text-white", "focused"), c.classList.add("text-gray-900", "hover:bg-gray-100", "dark:text-white", "dark:hover:bg-gray-600");
+        c.classList.remove("range", "range-start", "range-end", "selected", "bg-brand", "dark:text-white", "text-white", "focused"), c.classList.add("text-body", "hover:bg-neutral-tertiary-medium", "dark:text-white");
       }), Array.from(this.grid.children).forEach(function(c, u) {
         var d = c.classList;
-        u > o && u < l && d.add("range"), u === o && d.add("range-start"), u === l && d.add("range-end"), r.includes(u) && (d.add("selected", "bg-blue-700", "!bg-primary-700", "text-white", "dark:bg-blue-600", "dark:!bg-primary-600", "dark:text-white"), d.remove("text-gray-900", "hover:bg-gray-100", "dark:text-white", "dark:hover:bg-gray-600")), u === i.focused && d.add("focused");
+        u > o && u < l && d.add("range"), u === o && d.add("range-start"), u === l && d.add("range-end"), r.includes(u) && (d.add("selected", "bg-brand", "text-white", "dark:text-white"), d.remove("text-body", "hover:bg-neutral-tertiary-medium", "dark:text-white")), u === i.focused && d.add("focused");
       });
     }
     // Update the view UI by applying the change of focused item
@@ -5400,11 +5407,11 @@ var YearsView = /* @__PURE__ */ (function(e) {
       var i = this;
       this.disabled = [], this.picker.setViewSwitchLabel("".concat(this.first, "-").concat(this.last)), this.picker.setPrevBtnDisabled(this.first <= this.minYear), this.picker.setNextBtnDisabled(this.last >= this.maxYear), Array.from(this.grid.children).forEach(function(r, a) {
         var s = r.classList, o = i.start + a * i.step, l = dateValue(o, 0, 1);
-        if (r.className = "datepicker-cell hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ".concat(i.cellClass), i.isMinView && (r.dataset.date = l), r.textContent = r.dataset.year = o, a === 0 ? s.add("prev") : a === 11 && s.add("next"), (o < i.minYear || o > i.maxYear) && s.add("disabled"), i.range) {
+        if (r.className = "datepicker-cell hover:bg-neutral-tertiary-medium block flex-1 leading-9 border-0 rounded-base cursor-pointer text-center text-body font-medium text-sm ".concat(i.cellClass), i.isMinView && (r.dataset.date = l), r.textContent = r.dataset.year = o, a === 0 ? s.add("prev") : a === 11 && s.add("next"), (o < i.minYear || o > i.maxYear) && s.add("disabled"), i.range) {
           var c = _slicedToArray(i.range, 2), u = c[0], d = c[1];
           o > u && o < d && s.add("range"), o === u && s.add("range-start"), o === d && s.add("range-end");
         }
-        i.selected.includes(o) && (s.add("selected", "bg-blue-700", "!bg-primary-700", "text-white", "dark:bg-blue-600", "dark:!bg-primary-600", "dark:text-white"), s.remove("text-gray-900", "hover:bg-gray-100", "dark:text-white", "dark:hover:bg-gray-600")), o === i.focused && s.add("focused"), i.beforeShow && i.performBeforeHook(r, o, l);
+        i.selected.includes(o) && (s.add("selected", "bg-brand", "text-white", "dark:text-white"), s.remove("text-body", "hover:bg-neutral-tertiary-medium", "dark:text-white")), o === i.focused && s.add("focused"), i.beforeShow && i.performBeforeHook(r, o, l);
       });
     }
     // Update the view UI by applying the changes of selected and focused items
@@ -5413,10 +5420,10 @@ var YearsView = /* @__PURE__ */ (function(e) {
     value: function() {
       var i = this, r = this.range || [], a = _slicedToArray(r, 2), s = a[0], o = a[1];
       this.grid.querySelectorAll(".range, .range-start, .range-end, .selected, .focused").forEach(function(l) {
-        l.classList.remove("range", "range-start", "range-end", "selected", "bg-blue-700", "!bg-primary-700", "text-white", "dark:bg-blue-600", "dark!bg-primary-600", "dark:text-white", "focused");
+        l.classList.remove("range", "range-start", "range-end", "selected", "bg-brand", "text-white", "dark:text-white", "focused");
       }), Array.from(this.grid.children).forEach(function(l) {
         var c = Number(l.textContent), u = l.classList;
-        c > s && c < o && u.add("range"), c === s && u.add("range-start"), c === o && u.add("range-end"), i.selected.includes(c) && (u.add("selected", "bg-blue-700", "!bg-primary-700", "text-white", "dark:bg-blue-600", "dark:!bg-primary-600", "dark:text-white"), u.remove("text-gray-900", "hover:bg-gray-100", "dark:text-white", "dark:hover:bg-gray-600")), c === i.focused && u.add("focused");
+        c > s && c < o && u.add("range"), c === s && u.add("range-start"), c === o && u.add("range-end"), i.selected.includes(c) && (u.add("selected", "bg-brand", "text-white", "hover:text-heading"), u.remove("text-body", "hover:bg-neutral-tertiary-medium", "hover:text-heading")), c === i.focused && u.add("focused");
       });
     }
     // Update the view UI by applying the change of focused item
@@ -5602,8 +5609,8 @@ var Picker = /* @__PURE__ */ (function() {
   }, {
     key: "place",
     value: function() {
-      var n = this.element, i = n.classList, r = n.style, a = this.datepicker, s = a.config, o = a.inputField, l = s.container, c = this.element.getBoundingClientRect(), u = c.width, d = c.height, f = l.getBoundingClientRect(), p = f.left, g = f.top, v = f.width, h = o.getBoundingClientRect(), y = h.left, _ = h.top, b = h.width, m = h.height, w = s.orientation, E = w.x, x = w.y, C, D, k;
-      l === document.body ? (C = window.scrollY, D = y + window.scrollX, k = _ + C) : (C = l.scrollTop, D = y - p, k = _ - g + C), E === "auto" && (D < 0 ? (E = "left", D = 10) : D + u > v ? E = "right" : E = getTextDirection(o) === "rtl" ? "right" : "left"), E === "right" && (D -= u - b), x === "auto" && (x = k - d < C ? "bottom" : "top"), x === "top" ? k -= d : k += m, i.remove("datepicker-orient-top", "datepicker-orient-bottom", "datepicker-orient-right", "datepicker-orient-left"), i.add("datepicker-orient-".concat(x), "datepicker-orient-".concat(E)), r.top = k && "".concat(k, "px"), r.left = D && "".concat(D, "px");
+      var n = this.element, i = n.classList, r = n.style, a = this.datepicker, s = a.config, o = a.inputField, l = s.container, c = this.element.getBoundingClientRect(), u = c.width, d = c.height, f = l.getBoundingClientRect(), p = f.left, g = f.top, v = f.width, h = o.getBoundingClientRect(), y = h.left, _ = h.top, b = h.width, m = h.height, w = s.orientation, E = w.x, x = w.y, S, A, D;
+      l === document.body ? (S = window.scrollY, A = y + window.scrollX, D = _ + S) : (S = l.scrollTop, A = y - p, D = _ - g + S), E === "auto" && (A < 0 ? (E = "left", A = 10) : A + u > v ? E = "right" : E = getTextDirection(o) === "rtl" ? "right" : "left"), E === "right" && (A -= u - b), x === "auto" && (x = D - d < S ? "bottom" : "top"), x === "top" ? D -= d : D += m, i.remove("datepicker-orient-top", "datepicker-orient-bottom", "datepicker-orient-right", "datepicker-orient-left"), i.add("datepicker-orient-".concat(x), "datepicker-orient-".concat(E)), r.top = D && "".concat(D, "px"), r.left = A && "".concat(A, "px");
     }
   }, {
     key: "setViewSwitchLabel",
@@ -6047,7 +6054,7 @@ var Datepicker$1 = /* @__PURE__ */ (function() {
   }, {
     key: "enterEditMode",
     value: function() {
-      this.inline || !this.picker.active || this.editMode || (this.editMode = !0, this.inputField.classList.add("in-edit", "border-blue-700", "!border-primary-700"));
+      this.inline || !this.picker.active || this.editMode || (this.editMode = !0, this.inputField.classList.add("in-edit", "border-brand"));
     }
     /**
      * Exit from edit mode
@@ -6065,7 +6072,7 @@ var Datepicker$1 = /* @__PURE__ */ (function() {
         var i = Object.assign({
           update: !1
         }, n);
-        delete this.editMode, this.inputField.classList.remove("in-edit", "border-blue-700", "!border-primary-700"), i.update && this.update(i);
+        delete this.editMode, this.inputField.classList.remove("in-edit", "border-brand"), i.update && this.update(i);
       }
     }
   }], [{
@@ -6615,7 +6622,14 @@ var htmx = (function() {
        * @type boolean
        * @default true
        */
-      historyRestoreAsHxRequest: !0
+      historyRestoreAsHxRequest: !0,
+      /**
+       * Whether to report input validation errors to the end user and update focus to the first input that fails validation.
+       * This should always be enabled as this matches default browser form submit behaviour
+       * @type boolean
+       * @default false
+       */
+      reportValidityOfForms: !1
     },
     /** @type {typeof parseInterval} */
     parseInterval: null,
@@ -6626,7 +6640,7 @@ var htmx = (function() {
     location,
     /** @type {typeof internalEval} */
     _: null,
-    version: "2.0.6"
+    version: "2.0.8"
   };
   htmx.onLoad = onLoadHelper, htmx.process = processNode, htmx.on = addEventListenerImpl, htmx.off = removeEventListenerImpl, htmx.trigger = triggerEvent, htmx.ajax = ajaxHelper, htmx.find = find, htmx.findAll = findAll, htmx.closest = closest, htmx.remove = removeElement, htmx.addClass = addClassToElement, htmx.removeClass = removeClassFromElement, htmx.toggleClass = toggleClassOnElement, htmx.takeClass = takeClassForElement, htmx.swap = swap, htmx.defineExtension = defineExtension, htmx.removeExtension = removeExtension, htmx.logAll = logAll, htmx.logNone = logNone, htmx.parseInterval = parseInterval, htmx._ = internalEval;
   const internalAPI = {
@@ -6716,7 +6730,7 @@ var htmx = (function() {
     return n ? n[1].toLowerCase() : "";
   }
   function parseHTML(e) {
-    return new DOMParser().parseFromString(e, "text/html");
+    return "parseHTMLUnsafe" in Document ? Document.parseHTMLUnsafe(e) : new DOMParser().parseFromString(e, "text/html");
   }
   function takeChildrenFor(e, t) {
     for (; t.childNodes.length > 0; )
@@ -7020,7 +7034,7 @@ var htmx = (function() {
     return htmx.config.attributesToSettle.includes(e);
   }
   function cloneAttributes(e, t) {
-    forEach(e.attributes, function(n) {
+    forEach(Array.from(e.attributes), function(n) {
       !t.hasAttribute(n.name) && shouldSettleAttribute(n.name) && e.removeAttribute(n.name);
     }), forEach(t.attributes, function(n) {
       shouldSettleAttribute(n.name) && e.setAttribute(n.name, n.value);
@@ -7502,7 +7516,20 @@ var htmx = (function() {
     }
   }
   function shouldCancel(e, t) {
-    return !!((e.type === "submit" || e.type === "click") && (t = asElement(e.target) || t, t.tagName === "FORM" || t.form && t.type === "submit" || (t = t.closest("a"), t && t.href && (t.getAttribute("href") === "#" || t.getAttribute("href").indexOf("#") !== 0))));
+    if (e.type === "submit" && t.tagName === "FORM")
+      return !0;
+    if (e.type === "click") {
+      const n = (
+        /** @type {HTMLButtonElement|HTMLInputElement|null} */
+        t.closest('input[type="submit"], button')
+      );
+      if (n && n.form && n.type === "submit")
+        return !0;
+      const i = t.closest("a"), r = /^#.+/;
+      if (i && i.href && !r.test(i.getAttribute("href")))
+        return !0;
+    }
+    return !1;
   }
   function ignoreBoostedAnchorCtrlClick(e, t) {
     return getInternalData(e).boosted && e instanceof HTMLAnchorElement && t.type === "click" && // @ts-ignore this will resolve to undefined for events that don't define those properties, which is fine
@@ -7530,7 +7557,7 @@ var htmx = (function() {
           o.removeEventListener(i.trigger, l);
           return;
         }
-        if (ignoreBoostedAnchorCtrlClick(e, c) || ((r || shouldCancel(c, e)) && c.preventDefault(), maybeFilterEvent(i, e, c)))
+        if (ignoreBoostedAnchorCtrlClick(e, c) || ((r || shouldCancel(c, o)) && c.preventDefault(), maybeFilterEvent(i, e, c)))
           return;
         const u = getInternalData(c);
         if (u.triggerSpec = i, u.handledFor == null && (u.handledFor = []), u.handledFor.indexOf(e) < 0) {
@@ -7680,7 +7707,8 @@ var htmx = (function() {
     if (!t)
       return;
     const n = getRelatedForm(t);
-    return getInternalData(n);
+    if (n)
+      return getInternalData(n);
   }
   function initButtonTracking(e) {
     e.addEventListener("click", maybeSetLastButtonClicked), e.addEventListener("focusin", maybeSetLastButtonClicked), e.addEventListener("focusout", maybeUnsetLastButtonClicked);
@@ -7775,10 +7803,11 @@ var htmx = (function() {
       r = r && s.onEvent(t, i) !== !1 && !i.defaultPrevented;
     }), r;
   }
-  let currentPathForHistory = location.pathname + location.search;
+  let currentPathForHistory;
   function setCurrentPathForHistory(e) {
     currentPathForHistory = e, canAccessLocalStorage() && sessionStorage.setItem("htmx-current-path-for-history", e);
   }
+  setCurrentPathForHistory(location.pathname + location.search);
   function getHistoryElement() {
     return getDocument().querySelector("[hx-history-elt],[data-hx-history-elt]") || getDocument().body;
   }
@@ -7946,7 +7975,10 @@ var htmx = (function() {
       /** @type {HTMLElement & ElementInternals} */
       e
     );
-    n.willValidate && (triggerEvent(n, "htmx:validation:validate"), n.checkValidity() || (t.push({ elt: n, message: n.validationMessage, validity: n.validity }), triggerEvent(n, "htmx:validation:failed", { message: n.validationMessage, validity: n.validity })));
+    n.willValidate && (triggerEvent(n, "htmx:validation:validate"), n.checkValidity() || (triggerEvent(n, "htmx:validation:failed", {
+      message: n.validationMessage,
+      validity: n.validity
+    }) && !t.length && htmx.config.reportValidityOfForms && n.reportValidity(), t.push({ elt: n, message: n.validationMessage, validity: n.validity })));
   }
   function overrideFormData(e, t) {
     for (const n of t.keys())
@@ -8160,7 +8192,10 @@ var htmx = (function() {
             targetOverride: i,
             swapOverride: n.swap,
             select: n.select,
-            returnPromise: !0
+            returnPromise: !0,
+            push: n.push,
+            replace: n.replace,
+            selectOOB: n.selectOOB
           }
         );
       }
@@ -8245,8 +8280,8 @@ var htmx = (function() {
   function issueAjaxRequest(e, t, n, i, r, a) {
     let s = null, o = null;
     if (r = r ?? {}, r.returnPromise && typeof Promise < "u")
-      var l = new Promise(function(A, L) {
-        s = A, o = L;
+      var l = new Promise(function(C, L) {
+        s = C, o = L;
       });
     n == null && (n = getDocument().body);
     const c = r.handler || handleAjaxResponse, u = r.select || null;
@@ -8258,8 +8293,8 @@ var htmx = (function() {
     let f = getInternalData(n);
     const p = f.lastButtonClicked;
     if (p) {
-      const A = getRawAttribute(p, "formaction");
-      A != null && (t = A);
+      const C = getRawAttribute(p, "formaction");
+      C != null && (t = C);
       const L = getRawAttribute(p, "formmethod");
       if (L != null)
         if (VERBS.includes(L.toLowerCase()))
@@ -8269,14 +8304,14 @@ var htmx = (function() {
           return maybeCall(s), l;
     }
     const g = getClosestAttributeValue(n, "hx-confirm");
-    if (a === void 0 && triggerEvent(n, "htmx:confirm", { target: d, elt: n, path: t, verb: e, triggeringEvent: i, etc: r, issueRequest: function(H) {
-      return issueAjaxRequest(e, t, n, i, r, !!H);
+    if (a === void 0 && triggerEvent(n, "htmx:confirm", { target: d, elt: n, path: t, verb: e, triggeringEvent: i, etc: r, issueRequest: function(M) {
+      return issueAjaxRequest(e, t, n, i, r, !!M);
     }, question: g }) === !1)
       return maybeCall(s), l;
     let v = n, h = getClosestAttributeValue(n, "hx-sync"), y = null, _ = !1;
     if (h) {
-      const A = h.split(":"), L = A[0].trim();
-      if (L === "this" ? v = findThisElement(n, "hx-sync") : v = asElement(querySelectorExt(n, L)), h = (A[1] || "drop").trim(), f = getInternalData(v), h === "drop" && f.xhr && f.abortable !== !0)
+      const C = h.split(":"), L = C[0].trim();
+      if (L === "this" ? v = findThisElement(n, "hx-sync") : v = asElement(querySelectorExt(n, L)), h = (C[1] || "drop").trim(), f = getInternalData(v), h === "drop" && f.xhr && f.abortable !== !0)
         return maybeCall(s), l;
       if (h === "abort") {
         if (f.xhr)
@@ -8290,8 +8325,8 @@ var htmx = (function() {
       else {
         if (y == null) {
           if (i) {
-            const A = getInternalData(i);
-            A && A.triggerSpec && A.triggerSpec.queue && (y = A.triggerSpec.queue);
+            const C = getInternalData(i);
+            C && C.triggerSpec && C.triggerSpec.queue && (y = C.triggerSpec.queue);
           }
           y == null && (y = "last");
         }
@@ -8317,51 +8352,51 @@ var htmx = (function() {
       return maybeCall(s), m(), l;
     let x = getHeaders(n, d, E);
     e !== "get" && !usesFormData(n) && (x["Content-Type"] = "application/x-www-form-urlencoded"), r.headers && (x = mergeObjects(x, r.headers));
-    const C = getInputValues(n, e);
-    let D = C.errors;
-    const k = C.formData;
-    r.values && overrideFormData(k, formDataFromObject(r.values));
-    const O = formDataFromObject(getExpressionVars(n, i)), M = overrideFormData(k, O);
-    let T = filterValues(M, n);
+    const S = getInputValues(n, e);
+    let A = S.errors;
+    const D = S.formData;
+    r.values && overrideFormData(D, formDataFromObject(r.values));
+    const O = formDataFromObject(getExpressionVars(n, i)), H = overrideFormData(D, O);
+    let T = filterValues(H, n);
     htmx.config.getCacheBusterParam && e === "get" && T.set("org.htmx.cache-buster", getRawAttribute(d, "id") || "true"), (t == null || t === "") && (t = location.href);
     const F = getValuesForElement(n, "hx-request"), I = getInternalData(n).boosted;
     let R = htmx.config.methodsThatUseUrlParams.indexOf(e) >= 0;
-    const S = {
+    const k = {
       boosted: I,
       useUrlParams: R,
       formData: T,
       parameters: formDataProxy(T),
-      unfilteredFormData: M,
-      unfilteredParameters: formDataProxy(M),
+      unfilteredFormData: H,
+      unfilteredParameters: formDataProxy(H),
       headers: x,
       elt: n,
       target: d,
       verb: e,
-      errors: D,
+      errors: A,
       withCredentials: r.credentials || F.credentials || htmx.config.withCredentials,
       timeout: r.timeout || F.timeout || htmx.config.timeout,
       path: t,
       triggeringEvent: i
     };
-    if (!triggerEvent(n, "htmx:configRequest", S))
+    if (!triggerEvent(n, "htmx:configRequest", k))
       return maybeCall(s), m(), l;
-    if (t = S.path, e = S.verb, x = S.headers, T = formDataFromObject(S.parameters), D = S.errors, R = S.useUrlParams, D && D.length > 0)
-      return triggerEvent(n, "htmx:validation:halted", S), maybeCall(s), m(), l;
+    if (t = k.path, e = k.verb, x = k.headers, T = formDataFromObject(k.parameters), A = k.errors, R = k.useUrlParams, A && A.length > 0)
+      return triggerEvent(n, "htmx:validation:halted", k), maybeCall(s), m(), l;
     const W = t.split("#"), $ = W[0], q = W[1];
     let N = t;
-    if (R && (N = $, !T.keys().next().done && (N.indexOf("?") < 0 ? N += "?" : N += "&", N += urlEncode(T), q && (N += "#" + q))), !verifyPath(n, N, S))
-      return triggerErrorEvent(n, "htmx:invalidPath", S), maybeCall(o), m(), l;
-    if (b.open(e.toUpperCase(), N, !0), b.overrideMimeType("text/html"), b.withCredentials = S.withCredentials, b.timeout = S.timeout, !F.noHeaders) {
-      for (const A in x)
-        if (x.hasOwnProperty(A)) {
-          const L = x[A];
-          safelySetHeaderValue(b, A, L);
+    if (R && (N = $, !T.keys().next().done && (N.indexOf("?") < 0 ? N += "?" : N += "&", N += urlEncode(T), q && (N += "#" + q))), !verifyPath(n, N, k))
+      return triggerErrorEvent(n, "htmx:invalidPath", k), maybeCall(o), m(), l;
+    if (b.open(e.toUpperCase(), N, !0), b.overrideMimeType("text/html"), b.withCredentials = k.withCredentials, b.timeout = k.timeout, !F.noHeaders) {
+      for (const C in x)
+        if (x.hasOwnProperty(C)) {
+          const L = x[C];
+          safelySetHeaderValue(b, C, L);
         }
     }
     const P = {
       xhr: b,
       target: d,
-      requestConfig: S,
+      requestConfig: k,
       etc: r,
       boosted: I,
       select: u,
@@ -8374,18 +8409,18 @@ var htmx = (function() {
     };
     if (b.onload = function() {
       try {
-        const A = hierarchyForElt(n);
+        const C = hierarchyForElt(n);
         if (P.pathInfo.responsePath = getPathFromResponse(b), c(n, P), P.keepIndicators !== !0 && removeRequestIndicators(j, V), triggerEvent(n, "htmx:afterRequest", P), triggerEvent(n, "htmx:afterOnLoad", P), !bodyContains(n)) {
           let L = null;
-          for (; A.length > 0 && L == null; ) {
-            const H = A.shift();
-            bodyContains(H) && (L = H);
+          for (; C.length > 0 && L == null; ) {
+            const M = C.shift();
+            bodyContains(M) && (L = M);
           }
           L && (triggerEvent(L, "htmx:afterRequest", P), triggerEvent(L, "htmx:afterOnLoad", P));
         }
         maybeCall(s);
-      } catch (A) {
-        throw triggerErrorEvent(n, "htmx:onLoadError", mergeObjects({ error: A }, P)), A;
+      } catch (C) {
+        throw triggerErrorEvent(n, "htmx:onLoadError", mergeObjects({ error: C }, P)), C;
       } finally {
         m();
       }
@@ -8398,13 +8433,13 @@ var htmx = (function() {
     }, !triggerEvent(n, "htmx:beforeRequest", P))
       return maybeCall(s), m(), l;
     var j = addRequestIndicatorClasses(n), V = disableElements(n);
-    forEach(["loadstart", "loadend", "progress", "abort"], function(A) {
+    forEach(["loadstart", "loadend", "progress", "abort"], function(C) {
       forEach([b, b.upload], function(L) {
-        L.addEventListener(A, function(H) {
-          triggerEvent(n, "htmx:xhr:" + A, {
-            lengthComputable: H.lengthComputable,
-            loaded: H.loaded,
-            total: H.total
+        L.addEventListener(C, function(M) {
+          triggerEvent(n, "htmx:xhr:" + C, {
+            lengthComputable: M.lengthComputable,
+            loaded: M.loaded,
+            total: M.total
           });
         });
       });
@@ -8420,7 +8455,7 @@ var htmx = (function() {
         type: r,
         path: i
       };
-    const a = t.pathInfo.finalRequestPath, s = t.pathInfo.responsePath, o = getClosestAttributeValue(e, "hx-push-url"), l = getClosestAttributeValue(e, "hx-replace-url"), c = getInternalData(e).boosted;
+    const a = t.pathInfo.finalRequestPath, s = t.pathInfo.responsePath, o = t.etc.push || getClosestAttributeValue(e, "hx-push-url"), l = t.etc.replace || getClosestAttributeValue(e, "hx-replace-url"), c = getInternalData(e).boosted;
     let u = null, d = null;
     return o ? (u = "push", d = o) : l ? (u = "replace", d = l) : c && (u = "push", d = s || a), d ? d === "false" ? {} : (d === "true" && (d = s || a), t.pathInfo.anchor && d.indexOf("#") === -1 && (d = d + "#" + t.pathInfo.anchor), {
       type: u,
@@ -8461,12 +8496,9 @@ var htmx = (function() {
     const r = t.etc, a = t.select;
     if (!triggerEvent(e, "htmx:beforeOnLoad", t)) return;
     if (hasHeader(n, /HX-Trigger:/i) && handleTriggerHeader(n, "HX-Trigger", e), hasHeader(n, /HX-Location:/i)) {
-      saveCurrentPageToHistory();
       let _ = n.getResponseHeader("HX-Location");
-      var s;
-      _.indexOf("{") === 0 && (s = parseJSON(_), _ = s.path, delete s.path), ajaxHelper("get", _, s).then(function() {
-        pushUrlIntoHistory(_);
-      });
+      var s = {};
+      _.indexOf("{") === 0 && (s = parseJSON(_), _ = s.path, delete s.path), s.push = s.push || "true", ajaxHelper("get", _, s);
       return;
     }
     const o = hasHeader(n, /HX-Refresh:/i) && n.getResponseHeader("HX-Refresh") === "true";
@@ -8498,7 +8530,7 @@ var htmx = (function() {
         }), l.type && saveCurrentPageToHistory();
         var y = getSwapSpecification(e, g);
         y.hasOwnProperty("ignoreTitle") || (y.ignoreTitle = f), i.classList.add(htmx.config.swappingClass), a && (p = a), hasHeader(n, /HX-Reselect:/i) && (p = n.getResponseHeader("HX-Reselect"));
-        const _ = getClosestAttributeValue(e, "hx-select-oob"), b = getClosestAttributeValue(e, "hx-select");
+        const _ = r.selectOOB || getClosestAttributeValue(e, "hx-select-oob"), b = getClosestAttributeValue(e, "hx-select");
         swap(i, v, y, {
           select: p === "unset" ? null : p || b,
           selectOOB: _,
@@ -8582,10 +8614,10 @@ var htmx = (function() {
   }
   function insertIndicatorStyles() {
     if (htmx.config.includeIndicatorStyles !== !1) {
-      const e = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : "";
+      const e = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : "", t = htmx.config.indicatorClass, n = htmx.config.requestClass;
       getDocument().head.insertAdjacentHTML(
         "beforeend",
-        "<style" + e + ">      ." + htmx.config.indicatorClass + "{opacity:0}      ." + htmx.config.requestClass + " ." + htmx.config.indicatorClass + "{opacity:1; transition: opacity 200ms ease-in;}      ." + htmx.config.requestClass + "." + htmx.config.indicatorClass + "{opacity:1; transition: opacity 200ms ease-in;}      </style>"
+        `<style${e}>.${t}{opacity:0;visibility: hidden} .${n} .${t}, .${n}.${t}{opacity:1;visibility: visible;transition: opacity 200ms ease-in}</style>`
       );
     }
   }
@@ -8605,7 +8637,10 @@ var htmx = (function() {
       "[hx-trigger='restored'],[data-hx-trigger='restored']"
     );
     e.addEventListener("htmx:abort", function(i) {
-      const r = i.target, a = getInternalData(r);
+      const r = (
+        /** @type {CustomEvent} */
+        i.detail.elt || i.target
+      ), a = getInternalData(r);
       a && a.xhr && a.xhr.abort();
     });
     const n = window.onpopstate ? window.onpopstate.bind(window) : null;
@@ -8621,6 +8656,82 @@ var htmx = (function() {
     }, 0);
   }), htmx;
 })();
+const ServerEventName = {
+  JOB_STATUS_CHANGE: "job-status-change",
+  JOB_PROGRESS: "job-progress",
+  LIBRARY_CHANGE: "library-change",
+  JOB_LIST_CHANGE: "job-list-change"
+};
+class EventClient {
+  callbacks = /* @__PURE__ */ new Set();
+  eventSource;
+  reconnectTimeout;
+  isConnected = !1;
+  /**
+   * Start the SSE connection.
+   */
+  connect() {
+    if (this.eventSource) {
+      console.warn("EventClient already connected");
+      return;
+    }
+    console.log("📡 Connecting to SSE endpoint..."), this.eventSource = new EventSource("/web/events"), this.eventSource.addEventListener("open", () => {
+      console.log("📡 SSE connection established"), this.isConnected = !0;
+    }), this.eventSource.addEventListener("error", (n) => {
+      console.error("❌ SSE connection error:", n), this.isConnected = !1;
+    });
+    const t = Object.values(ServerEventName);
+    console.log("🔧 Setting up event listeners", t);
+    for (const n of t)
+      this.eventSource.addEventListener(n, (i) => {
+        try {
+          const r = JSON.parse(i.data);
+          this.notifyCallbacks({
+            type: n,
+            payload: r
+          });
+        } catch (r) {
+          console.error(`Failed to parse SSE event data: ${r}`);
+        }
+      });
+    this.eventSource.addEventListener("message", (n) => {
+      console.log("📨 Generic message event received:", n.data);
+    });
+  }
+  /**
+   * Subscribe to events with a callback.
+   * @param callback Function to call when events are received
+   * @returns Unsubscribe function
+   */
+  subscribe(t) {
+    return this.callbacks.add(t), () => {
+      this.callbacks.delete(t);
+    };
+  }
+  /**
+   * Disconnect and clean up resources.
+   */
+  disconnect() {
+    this.reconnectTimeout && (clearTimeout(this.reconnectTimeout), this.reconnectTimeout = void 0), this.eventSource && (this.eventSource.close(), this.eventSource = void 0), this.isConnected = !1;
+  }
+  /**
+   * Notify all callbacks of an event.
+   */
+  notifyCallbacks(t) {
+    for (const n of this.callbacks)
+      try {
+        n(t);
+      } catch (i) {
+        console.error("Error in event callback:", i);
+      }
+  }
+  /**
+   * Check if the client is currently connected.
+   */
+  isActive() {
+    return this.isConnected;
+  }
+}
 const VERSION_PREFIX_PATTERN = /^v/i, normalizeVersionTag = (e) => {
   if (typeof e != "string")
     return null;
@@ -8718,12 +8829,29 @@ initFlowbite();
 document.addEventListener("job-list-refresh", () => {
   htmx.ajax("get", "/web/jobs", "#job-queue");
 });
-function autoRefreshJobList() {
-  document.querySelector("#job-queue") && htmx.ajax("get", "/web/jobs", "#job-queue");
-}
-let autoRefreshInterval = setInterval(autoRefreshJobList, 3e3);
-document.addEventListener("visibilitychange", () => {
-  document.hidden ? clearInterval(autoRefreshInterval) : autoRefreshInterval = setInterval(autoRefreshJobList, 3e3);
+document.addEventListener("job-status-change", () => {
+  htmx.ajax("get", "/web/jobs", "#job-queue");
+});
+document.addEventListener("job-progress", () => {
+  htmx.ajax("get", "/web/jobs", "#job-queue");
+});
+document.addEventListener("job-list-change", () => {
+  htmx.ajax("get", "/web/jobs", "#job-queue");
+});
+document.addEventListener("library-change", () => {
+  htmx.ajax("get", "/web/libraries", "#library-list");
+});
+const eventClient = new EventClient();
+eventClient.subscribe((e) => {
+  console.log(`📋 Received event: ${e.type}`, e.payload), document.body.dispatchEvent(
+    new CustomEvent(e.type, {
+      detail: e.payload
+    })
+  );
+});
+eventClient.connect();
+window.addEventListener("beforeunload", () => {
+  eventClient.disconnect();
 });
 document.addEventListener("version-list-refresh", (e) => {
   const n = e.detail?.library;