@vasakgroup/vue-libvasak 0.1.0 → 0.2.0

package/dist/vue-libvasak.es.js

@@ -1,19 +1,19 @@
-import { createElementBlock as v, openBlock as f, renderSlot as R, defineComponent as C, createElementVNode as u, ref as p, onMounted as F, toDisplayString as U, unref as D, Fragment as V, createVNode as G } from "vue";
-const $ = (i, e) => {
-  const t = i.__vccOpts || i;
-  for (const [l, s] of e)
-    t[l] = s;
-  return t;
-}, H = {}, J = { class: "sidebar" };
-function q(i, e) {
-  return f(), v("div", J, [
-    R(i.$slots, "default")
+import { createElementBlock as s, openBlock as o, renderSlot as k, defineComponent as y, createElementVNode as u, ref as x, onMounted as q, toDisplayString as w, unref as W, Fragment as F, createVNode as Z, normalizeClass as d, createCommentVNode as g, renderList as Q, withModifiers as Y, computed as T } from "vue";
+const D = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [l, a] of e)
+    i[l] = a;
+  return i;
+}, K = {}, X = { class: "sidebar" };
+function ee(t, e) {
+  return o(), s("div", X, [
+    k(t.$slots, "default")
   ]);
 }
-const j = /* @__PURE__ */ $(H, [["render", q]]), Z = {
+const te = /* @__PURE__ */ D(K, [["render", ee]]), ie = {
   href: "#",
   class: "sidebar-button"
-}, Q = ["src"], Y = /* @__PURE__ */ C({
+}, ne = ["src", "alt"], le = /* @__PURE__ */ y({
   __name: "SideButton",
   props: {
     title: {
@@ -25,37 +25,38 @@ const j = /* @__PURE__ */ $(H, [["render", q]]), Z = {
       default: ""
     }
   },
-  setup(i) {
-    return (e, t) => (f(), v("a", Z, [
+  setup(t) {
+    return (e, i) => (o(), s("a", ie, [
       u("img", {
-        src: i.image,
+        src: t.image,
+        alt: t.title,
         class: "img-fluid"
-      }, null, 8, Q)
+      }, null, 8, ne)
     ]));
   }
 });
-function K(i, e, t, l) {
-  if (typeof e == "function" ? i !== e || !l : !e.has(i)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return t === "m" ? l : t === "a" ? l.call(i) : l ? l.value : e.get(i);
+function ae(t, e, i, l) {
+  if (typeof e == "function" ? t !== e || !l : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? l : i === "a" ? l.call(t) : l ? l.value : e.get(t);
 }
-function X(i, e, t, l, s) {
-  if (typeof e == "function" ? i !== e || !0 : !e.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return e.set(i, t), t;
+function se(t, e, i, l, a) {
+  if (typeof e == "function" ? t !== e || !0 : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return e.set(t, i), i;
 }
-var y;
-const o = "__TAURI_TO_IPC_KEY__";
-function ee(i, e = !1) {
-  return window.__TAURI_INTERNALS__.transformCallback(i, e);
+var I;
+const m = "__TAURI_TO_IPC_KEY__";
+function oe(t, e = !1) {
+  return window.__TAURI_INTERNALS__.transformCallback(t, e);
 }
-async function n(i, e = {}, t) {
-  return window.__TAURI_INTERNALS__.invoke(i, e, t);
+async function n(t, e = {}, i) {
+  return window.__TAURI_INTERNALS__.invoke(t, e, i);
 }
-class ie {
+class re {
   get rid() {
-    return K(this, y, "f");
+    return ae(this, I, "f");
   }
   constructor(e) {
-    y.set(this, void 0), X(this, y, e);
+    I.set(this, void 0), se(this, I, e);
   }
   /**
    * Destroys and cleans up this resource from memory.
@@ -67,8 +68,8 @@ class ie {
     });
   }
 }
-y = /* @__PURE__ */ new WeakMap();
-class L {
+I = /* @__PURE__ */ new WeakMap();
+class V {
   constructor(...e) {
     this.type = "Logical", e.length === 1 ? "Logical" in e[0] ? (this.width = e[0].Logical.width, this.height = e[0].Logical.height) : (this.width = e[0].width, this.height = e[0].height) : (this.width = e[0], this.height = e[1]);
   }
@@ -88,19 +89,19 @@ class L {
    * @since 2.0.0
    */
   toPhysical(e) {
-    return new b(this.width * e, this.height * e);
+    return new C(this.width * e, this.height * e);
   }
-  [o]() {
+  [m]() {
     return {
       width: this.width,
       height: this.height
     };
   }
   toJSON() {
-    return this[o]();
+    return this[m]();
   }
 }
-class b {
+class C {
   constructor(...e) {
     this.type = "Physical", e.length === 1 ? "Physical" in e[0] ? (this.width = e[0].Physical.width, this.height = e[0].Physical.height) : (this.width = e[0].width, this.height = e[0].height) : (this.width = e[0], this.height = e[1]);
   }
@@ -116,29 +117,29 @@ class b {
    * ```
    */
   toLogical(e) {
-    return new L(this.width / e, this.height / e);
+    return new V(this.width / e, this.height / e);
   }
-  [o]() {
+  [m]() {
     return {
       width: this.width,
       height: this.height
     };
   }
   toJSON() {
-    return this[o]();
+    return this[m]();
   }
 }
-class w {
+class _ {
   constructor(e) {
     this.size = e;
   }
   toLogical(e) {
-    return this.size instanceof L ? this.size : this.size.toLogical(e);
+    return this.size instanceof V ? this.size : this.size.toLogical(e);
   }
   toPhysical(e) {
-    return this.size instanceof b ? this.size : this.size.toPhysical(e);
+    return this.size instanceof C ? this.size : this.size.toPhysical(e);
   }
-  [o]() {
+  [m]() {
     return {
       [`${this.size.type}`]: {
         width: this.size.width,
@@ -147,10 +148,10 @@ class w {
     };
   }
   toJSON() {
-    return this[o]();
+    return this[m]();
   }
 }
-class E {
+class U {
   constructor(...e) {
     this.type = "Logical", e.length === 1 ? "Logical" in e[0] ? (this.x = e[0].Logical.x, this.y = e[0].Logical.y) : (this.x = e[0].x, this.y = e[0].y) : (this.x = e[0], this.y = e[1]);
   }
@@ -170,19 +171,19 @@ class E {
    * @since 2.0.0
    */
   toPhysical(e) {
-    return new c(this.x * e, this.y * e);
+    return new p(this.x * e, this.y * e);
   }
-  [o]() {
+  [m]() {
     return {
       x: this.x,
       y: this.y
     };
   }
   toJSON() {
-    return this[o]();
+    return this[m]();
   }
 }
-class c {
+class p {
   constructor(...e) {
     this.type = "Physical", e.length === 1 ? "Physical" in e[0] ? (this.x = e[0].Physical.x, this.y = e[0].Physical.y) : (this.x = e[0].x, this.y = e[0].y) : (this.x = e[0], this.y = e[1]);
   }
@@ -202,29 +203,29 @@ class c {
    * @since 2.0.0
    */
   toLogical(e) {
-    return new E(this.x / e, this.y / e);
+    return new U(this.x / e, this.y / e);
   }
-  [o]() {
+  [m]() {
     return {
       x: this.x,
       y: this.y
     };
   }
   toJSON() {
-    return this[o]();
+    return this[m]();
   }
 }
-class _ {
+class z {
   constructor(e) {
     this.position = e;
   }
   toLogical(e) {
-    return this.position instanceof E ? this.position : this.position.toLogical(e);
+    return this.position instanceof U ? this.position : this.position.toLogical(e);
   }
   toPhysical(e) {
-    return this.position instanceof c ? this.position : this.position.toPhysical(e);
+    return this.position instanceof p ? this.position : this.position.toPhysical(e);
   }
-  [o]() {
+  [m]() {
     return {
       [`${this.position.type}`]: {
         x: this.position.x,
@@ -233,47 +234,47 @@ class _ {
     };
   }
   toJSON() {
-    return this[o]();
+    return this[m]();
   }
 }
-var r;
-(function(i) {
-  i.WINDOW_RESIZED = "tauri://resize", i.WINDOW_MOVED = "tauri://move", i.WINDOW_CLOSE_REQUESTED = "tauri://close-requested", i.WINDOW_DESTROYED = "tauri://destroyed", i.WINDOW_FOCUS = "tauri://focus", i.WINDOW_BLUR = "tauri://blur", i.WINDOW_SCALE_FACTOR_CHANGED = "tauri://scale-change", i.WINDOW_THEME_CHANGED = "tauri://theme-changed", i.WINDOW_CREATED = "tauri://window-created", i.WEBVIEW_CREATED = "tauri://webview-created", i.DRAG_ENTER = "tauri://drag-enter", i.DRAG_OVER = "tauri://drag-over", i.DRAG_DROP = "tauri://drag-drop", i.DRAG_LEAVE = "tauri://drag-leave";
-})(r || (r = {}));
-async function P(i, e) {
-  window.__TAURI_EVENT_PLUGIN_INTERNALS__.unregisterListener(i, e), await n("plugin:event|unlisten", {
-    event: i,
+var b;
+(function(t) {
+  t.WINDOW_RESIZED = "tauri://resize", t.WINDOW_MOVED = "tauri://move", t.WINDOW_CLOSE_REQUESTED = "tauri://close-requested", t.WINDOW_DESTROYED = "tauri://destroyed", t.WINDOW_FOCUS = "tauri://focus", t.WINDOW_BLUR = "tauri://blur", t.WINDOW_SCALE_FACTOR_CHANGED = "tauri://scale-change", t.WINDOW_THEME_CHANGED = "tauri://theme-changed", t.WINDOW_CREATED = "tauri://window-created", t.WEBVIEW_CREATED = "tauri://webview-created", t.DRAG_ENTER = "tauri://drag-enter", t.DRAG_OVER = "tauri://drag-over", t.DRAG_DROP = "tauri://drag-drop", t.DRAG_LEAVE = "tauri://drag-leave";
+})(b || (b = {}));
+async function G(t, e) {
+  window.__TAURI_EVENT_PLUGIN_INTERNALS__.unregisterListener(t, e), await n("plugin:event|unlisten", {
+    event: t,
     eventId: e
   });
 }
-async function T(i, e, t) {
+async function H(t, e, i) {
   var l;
-  const s = typeof t?.target == "string" ? { kind: "AnyLabel", label: t.target } : (l = t?.target) !== null && l !== void 0 ? l : { kind: "Any" };
+  const a = typeof i?.target == "string" ? { kind: "AnyLabel", label: i.target } : (l = i?.target) !== null && l !== void 0 ? l : { kind: "Any" };
   return n("plugin:event|listen", {
-    event: i,
-    target: s,
-    handler: ee(e)
-  }).then((d) => async () => P(i, d));
+    event: t,
+    target: a,
+    handler: oe(e)
+  }).then((c) => async () => G(t, c));
 }
-async function te(i, e, t) {
-  return T(i, (l) => {
-    P(i, l.id), e(l);
-  }, t);
+async function ue(t, e, i) {
+  return H(t, (l) => {
+    G(t, l.id), e(l);
+  }, i);
 }
-async function ne(i, e) {
+async function ce(t, e) {
   await n("plugin:event|emit", {
-    event: i,
+    event: t,
     payload: e
   });
 }
-async function le(i, e, t) {
+async function de(t, e, i) {
   await n("plugin:event|emit_to", {
-    target: typeof i == "string" ? { kind: "AnyLabel", label: i } : i,
+    target: typeof t == "string" ? { kind: "AnyLabel", label: t } : t,
     event: e,
-    payload: t
+    payload: i
   });
 }
-class g extends ie {
+class S extends re {
   /**
    * Creates an Image from a resource ID. For internal use only.
    *
@@ -283,12 +284,12 @@ class g extends ie {
     super(e);
   }
   /** Creates a new Image using RGBA data, in row-major order from top to bottom, and with specified width and height. */
-  static async new(e, t, l) {
+  static async new(e, i, l) {
     return n("plugin:image|new", {
-      rgba: m(e),
-      width: t,
+      rgba: A(e),
+      width: i,
       height: l
-    }).then((s) => new g(s));
+    }).then((a) => new S(a));
   }
   /**
    * Creates a new image using the provided bytes by inferring the file format.
@@ -305,8 +306,8 @@ class g extends ie {
    */
   static async fromBytes(e) {
     return n("plugin:image|from_bytes", {
-      bytes: m(e)
-    }).then((t) => new g(t));
+      bytes: A(e)
+    }).then((i) => new S(i));
   }
   /**
    * Creates a new image using the provided path.
@@ -321,7 +322,7 @@ class g extends ie {
    * ```
    */
   static async fromPath(e) {
-    return n("plugin:image|from_path", { path: e }).then((t) => new g(t));
+    return n("plugin:image|from_path", { path: e }).then((i) => new S(i));
   }
   /** Returns the RGBA data for this image, in row-major order from top to bottom.  */
   async rgba() {
@@ -334,14 +335,14 @@ class g extends ie {
     return n("plugin:image|size", { rid: this.rid });
   }
 }
-function m(i) {
-  return i == null ? null : typeof i == "string" ? i : i instanceof g ? i.rid : i;
+function A(t) {
+  return t == null ? null : typeof t == "string" ? t : t instanceof S ? t.rid : t;
 }
-var x;
-(function(i) {
-  i[i.Critical = 1] = "Critical", i[i.Informational = 2] = "Informational";
-})(x || (x = {}));
-class se {
+var B;
+(function(t) {
+  t[t.Critical = 1] = "Critical", t[t.Informational = 2] = "Informational";
+})(B || (B = {}));
+class he {
   constructor(e) {
     this._preventDefault = !1, this.event = e.event, this.id = e.id;
   }
@@ -352,24 +353,24 @@ class se {
     return this._preventDefault;
   }
 }
-var k;
-(function(i) {
-  i.None = "none", i.Normal = "normal", i.Indeterminate = "indeterminate", i.Paused = "paused", i.Error = "error";
-})(k || (k = {}));
-function B() {
-  return new M(window.__TAURI_INTERNALS__.metadata.currentWindow.label, {
+var R;
+(function(t) {
+  t.None = "none", t.Normal = "normal", t.Indeterminate = "indeterminate", t.Paused = "paused", t.Error = "error";
+})(R || (R = {}));
+function j() {
+  return new J(window.__TAURI_INTERNALS__.metadata.currentWindow.label, {
     // @ts-expect-error `skip` is not defined in the public API but it is handled by the constructor
     skip: !0
   });
 }
-async function z() {
-  return n("plugin:window|get_all_windows").then((i) => i.map((e) => new M(e, {
+async function $() {
+  return n("plugin:window|get_all_windows").then((t) => t.map((e) => new J(e, {
     // @ts-expect-error `skip` is not defined in the public API but it is handled by the constructor
     skip: !0
   })));
 }
-const S = ["tauri://created", "tauri://error"];
-class M {
+const O = ["tauri://created", "tauri://error"];
+class J {
   /**
    * Creates a new Window.
    * @example
@@ -387,15 +388,15 @@ class M {
    * @param label The unique window label. Must be alphanumeric: `a-zA-Z-/:_`.
    * @returns The {@link Window} instance to communicate with the window.
    */
-  constructor(e, t = {}) {
+  constructor(e, i = {}) {
     var l;
-    this.label = e, this.listeners = /* @__PURE__ */ Object.create(null), t?.skip || n("plugin:window|create", {
+    this.label = e, this.listeners = /* @__PURE__ */ Object.create(null), i?.skip || n("plugin:window|create", {
       options: {
-        ...t,
-        parent: typeof t.parent == "string" ? t.parent : (l = t.parent) === null || l === void 0 ? void 0 : l.label,
+        ...i,
+        parent: typeof i.parent == "string" ? i.parent : (l = i.parent) === null || l === void 0 ? void 0 : l.label,
         label: e
       }
-    }).then(async () => this.emit("tauri://created")).catch(async (s) => this.emit("tauri://error", s));
+    }).then(async () => this.emit("tauri://created")).catch(async (a) => this.emit("tauri://error", a));
   }
   /**
    * Gets the Window associated with the given label.
@@ -409,20 +410,20 @@ class M {
    * @returns The Window instance to communicate with the window or null if the window doesn't exist.
    */
   static async getByLabel(e) {
-    var t;
-    return (t = (await z()).find((l) => l.label === e)) !== null && t !== void 0 ? t : null;
+    var i;
+    return (i = (await $()).find((l) => l.label === e)) !== null && i !== void 0 ? i : null;
   }
   /**
    * Get an instance of `Window` for the current window.
    */
   static getCurrent() {
-    return B();
+    return j();
   }
   /**
    * Gets a list of instances of `Window` for all available windows.
    */
   static async getAll() {
-    return z();
+    return $();
   }
   /**
    *  Gets the focused window.
@@ -435,7 +436,7 @@ class M {
    * @returns The Window instance or `undefined` if there is not any focused window.
    */
   static async getFocusedWindow() {
-    for (const e of await z())
+    for (const e of await $())
       if (await e.isFocused())
         return e;
     return null;
@@ -459,11 +460,11 @@ class M {
    * @returns A promise resolving to a function to unlisten to the event.
    * Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
    */
-  async listen(e, t) {
-    return this._handleTauriEvent(e, t) ? () => {
+  async listen(e, i) {
+    return this._handleTauriEvent(e, i) ? () => {
       const l = this.listeners[e];
-      l.splice(l.indexOf(t), 1);
-    } : T(e, t, {
+      l.splice(l.indexOf(i), 1);
+    } : H(e, i, {
       target: { kind: "Window", label: this.label }
     });
   }
@@ -486,11 +487,11 @@ class M {
    * @returns A promise resolving to a function to unlisten to the event.
    * Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
    */
-  async once(e, t) {
-    return this._handleTauriEvent(e, t) ? () => {
+  async once(e, i) {
+    return this._handleTauriEvent(e, i) ? () => {
       const l = this.listeners[e];
-      l.splice(l.indexOf(t), 1);
-    } : te(e, t, {
+      l.splice(l.indexOf(i), 1);
+    } : ue(e, i, {
       target: { kind: "Window", label: this.label }
     });
   }
@@ -505,17 +506,17 @@ class M {
    * @param event Event name. Must include only alphanumeric characters, `-`, `/`, `:` and `_`.
    * @param payload Event payload.
    */
-  async emit(e, t) {
-    if (S.includes(e)) {
+  async emit(e, i) {
+    if (O.includes(e)) {
       for (const l of this.listeners[e] || [])
         l({
           event: e,
           id: -1,
-          payload: t
+          payload: i
         });
       return;
     }
-    return ne(e, t);
+    return ce(e, i);
   }
   /**
    * Emits an event to all {@link EventTarget|targets} matching the given target.
@@ -529,21 +530,21 @@ class M {
    * @param event Event name. Must include only alphanumeric characters, `-`, `/`, `:` and `_`.
    * @param payload Event payload.
    */
-  async emitTo(e, t, l) {
-    if (S.includes(t)) {
-      for (const s of this.listeners[t] || [])
-        s({
-          event: t,
+  async emitTo(e, i, l) {
+    if (O.includes(i)) {
+      for (const a of this.listeners[i] || [])
+        a({
+          event: i,
           id: -1,
           payload: l
         });
       return;
     }
-    return le(e, t, l);
+    return de(e, i, l);
   }
   /** @ignore */
-  _handleTauriEvent(e, t) {
-    return S.includes(e) ? (e in this.listeners ? this.listeners[e].push(t) : this.listeners[e] = [t], !0) : !1;
+  _handleTauriEvent(e, i) {
+    return O.includes(e) ? (e in this.listeners ? this.listeners[e].push(i) : this.listeners[e] = [i], !0) : !1;
   }
   // Getters
   /**
@@ -574,7 +575,7 @@ class M {
   async innerPosition() {
     return n("plugin:window|inner_position", {
       label: this.label
-    }).then((e) => new c(e));
+    }).then((e) => new p(e));
   }
   /**
    * The position of the top-left hand corner of the window relative to the top-left hand corner of the desktop.
@@ -589,7 +590,7 @@ class M {
   async outerPosition() {
     return n("plugin:window|outer_position", {
       label: this.label
-    }).then((e) => new c(e));
+    }).then((e) => new p(e));
   }
   /**
    * The physical size of the window's client area.
@@ -605,7 +606,7 @@ class M {
   async innerSize() {
     return n("plugin:window|inner_size", {
       label: this.label
-    }).then((e) => new b(e));
+    }).then((e) => new C(e));
   }
   /**
    * The physical size of the entire window.
@@ -621,7 +622,7 @@ class M {
   async outerSize() {
     return n("plugin:window|outer_size", {
       label: this.label
-    }).then((e) => new b(e));
+    }).then((e) => new C(e));
   }
   /**
    * Gets the window's current fullscreen state.
@@ -871,10 +872,10 @@ class M {
    * @returns A promise indicating the success or failure of the operation.
    */
   async requestUserAttention(e) {
-    let t = null;
-    return e && (e === x.Critical ? t = { type: "Critical" } : t = { type: "Informational" }), n("plugin:window|request_user_attention", {
+    let i = null;
+    return e && (e === B.Critical ? i = { type: "Critical" } : i = { type: "Informational" }), n("plugin:window|request_user_attention", {
       label: this.label,
-      value: t
+      value: i
     });
   }
   /**
@@ -1272,7 +1273,7 @@ class M {
   async setSize(e) {
     return n("plugin:window|set_size", {
       label: this.label,
-      value: e instanceof w ? e : new w(e)
+      value: e instanceof _ ? e : new _(e)
     });
   }
   /**
@@ -1289,7 +1290,7 @@ class M {
   async setMinSize(e) {
     return n("plugin:window|set_min_size", {
       label: this.label,
-      value: e instanceof w ? e : e ? new w(e) : null
+      value: e instanceof _ ? e : e ? new _(e) : null
     });
   }
   /**
@@ -1306,7 +1307,7 @@ class M {
   async setMaxSize(e) {
     return n("plugin:window|set_max_size", {
       label: this.label,
-      value: e instanceof w ? e : e ? new w(e) : null
+      value: e instanceof _ ? e : e ? new _(e) : null
     });
   }
   /**
@@ -1321,16 +1322,16 @@ class M {
    * @returns A promise indicating the success or failure of the operation.
    */
   async setSizeConstraints(e) {
-    function t(l) {
+    function i(l) {
       return l ? { Logical: l } : null;
     }
     return n("plugin:window|set_size_constraints", {
       label: this.label,
       value: {
-        minWidth: t(e?.minWidth),
-        minHeight: t(e?.minHeight),
-        maxWidth: t(e?.maxWidth),
-        maxHeight: t(e?.maxHeight)
+        minWidth: i(e?.minWidth),
+        minHeight: i(e?.minHeight),
+        maxWidth: i(e?.maxWidth),
+        maxHeight: i(e?.maxHeight)
       }
     });
   }
@@ -1348,7 +1349,7 @@ class M {
   async setPosition(e) {
     return n("plugin:window|set_position", {
       label: this.label,
-      value: e instanceof _ ? e : new _(e)
+      value: e instanceof z ? e : new z(e)
     });
   }
   /**
@@ -1442,7 +1443,7 @@ class M {
   async setIcon(e) {
     return n("plugin:window|set_icon", {
       label: this.label,
-      value: m(e)
+      value: A(e)
     });
   }
   /**
@@ -1560,7 +1561,7 @@ class M {
   async setCursorPosition(e) {
     return n("plugin:window|set_cursor_position", {
       label: this.label,
-      value: e instanceof _ ? e : new _(e)
+      value: e instanceof z ? e : new z(e)
     });
   }
   /**
@@ -1677,7 +1678,7 @@ class M {
   async setOverlayIcon(e) {
     return n("plugin:window|set_overlay_icon", {
       label: this.label,
-      value: e ? m(e) : void 0
+      value: e ? A(e) : void 0
     });
   }
   /**
@@ -1766,8 +1767,8 @@ class M {
    * Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
    */
   async onResized(e) {
-    return this.listen(r.WINDOW_RESIZED, (t) => {
-      t.payload = new b(t.payload), e(t);
+    return this.listen(b.WINDOW_RESIZED, (i) => {
+      i.payload = new C(i.payload), e(i);
     });
   }
   /**
@@ -1788,8 +1789,8 @@ class M {
    * Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
    */
   async onMoved(e) {
-    return this.listen(r.WINDOW_MOVED, (t) => {
-      t.payload = new c(t.payload), e(t);
+    return this.listen(b.WINDOW_MOVED, (i) => {
+      i.payload = new p(i.payload), e(i);
     });
   }
   /**
@@ -1815,8 +1816,8 @@ class M {
    * Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
    */
   async onCloseRequested(e) {
-    return this.listen(r.WINDOW_CLOSE_REQUESTED, async (t) => {
-      const l = new se(t);
+    return this.listen(b.WINDOW_CLOSE_REQUESTED, async (i) => {
+      const l = new he(i);
       await e(l), l.isPreventDefault() || await this.destroy();
     });
   }
@@ -1846,37 +1847,37 @@ class M {
    * Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
    */
   async onDragDropEvent(e) {
-    const t = await this.listen(r.DRAG_ENTER, (a) => {
+    const i = await this.listen(b.DRAG_ENTER, (r) => {
       e({
-        ...a,
+        ...r,
         payload: {
           type: "enter",
-          paths: a.payload.paths,
-          position: new c(a.payload.position)
+          paths: r.payload.paths,
+          position: new p(r.payload.position)
         }
       });
-    }), l = await this.listen(r.DRAG_OVER, (a) => {
+    }), l = await this.listen(b.DRAG_OVER, (r) => {
       e({
-        ...a,
+        ...r,
         payload: {
           type: "over",
-          position: new c(a.payload.position)
+          position: new p(r.payload.position)
         }
       });
-    }), s = await this.listen(r.DRAG_DROP, (a) => {
+    }), a = await this.listen(b.DRAG_DROP, (r) => {
       e({
-        ...a,
+        ...r,
         payload: {
           type: "drop",
-          paths: a.payload.paths,
-          position: new c(a.payload.position)
+          paths: r.payload.paths,
+          position: new p(r.payload.position)
         }
       });
-    }), d = await this.listen(r.DRAG_LEAVE, (a) => {
-      e({ ...a, payload: { type: "leave" } });
+    }), c = await this.listen(b.DRAG_LEAVE, (r) => {
+      e({ ...r, payload: { type: "leave" } });
     });
     return () => {
-      t(), s(), l(), d();
+      i(), a(), l(), c();
     };
   }
   /**
@@ -1897,13 +1898,13 @@ class M {
    * Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
    */
   async onFocusChanged(e) {
-    const t = await this.listen(r.WINDOW_FOCUS, (s) => {
-      e({ ...s, payload: !0 });
-    }), l = await this.listen(r.WINDOW_BLUR, (s) => {
-      e({ ...s, payload: !1 });
+    const i = await this.listen(b.WINDOW_FOCUS, (a) => {
+      e({ ...a, payload: !0 });
+    }), l = await this.listen(b.WINDOW_BLUR, (a) => {
+      e({ ...a, payload: !1 });
     });
     return () => {
-      t(), l();
+      i(), l();
     };
   }
   /**
@@ -1928,7 +1929,7 @@ class M {
    * Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
    */
   async onScaleChanged(e) {
-    return this.listen(r.WINDOW_SCALE_FACTOR_CHANGED, e);
+    return this.listen(b.WINDOW_SCALE_FACTOR_CHANGED, e);
   }
   /**
    * Listen to the system theme change.
@@ -1948,106 +1949,113 @@ class M {
    * Note that removing the listener is required if your listener goes out of scope e.g. the component is unmounted.
    */
   async onThemeChanged(e) {
-    return this.listen(r.WINDOW_THEME_CHANGED, e);
+    return this.listen(b.WINDOW_THEME_CHANGED, e);
   }
 }
-var O;
-(function(i) {
-  i.Disabled = "disabled", i.Throttle = "throttle", i.Suspend = "suspend";
-})(O || (O = {}));
-var A;
-(function(i) {
-  i.AppearanceBased = "appearanceBased", i.Light = "light", i.Dark = "dark", i.MediumLight = "mediumLight", i.UltraDark = "ultraDark", i.Titlebar = "titlebar", i.Selection = "selection", i.Menu = "menu", i.Popover = "popover", i.Sidebar = "sidebar", i.HeaderView = "headerView", i.Sheet = "sheet", i.WindowBackground = "windowBackground", i.HudWindow = "hudWindow", i.FullScreenUI = "fullScreenUI", i.Tooltip = "tooltip", i.ContentBackground = "contentBackground", i.UnderWindowBackground = "underWindowBackground", i.UnderPageBackground = "underPageBackground", i.Mica = "mica", i.Blur = "blur", i.Acrylic = "acrylic", i.Tabbed = "tabbed", i.TabbedDark = "tabbedDark", i.TabbedLight = "tabbedLight";
-})(A || (A = {}));
 var N;
-(function(i) {
-  i.FollowsWindowActiveState = "followsWindowActiveState", i.Active = "active", i.Inactive = "inactive";
+(function(t) {
+  t.Disabled = "disabled", t.Throttle = "throttle", t.Suspend = "suspend";
 })(N || (N = {}));
-async function ae(i) {
+var E;
+(function(t) {
+  t.Default = "default", t.FluentOverlay = "fluentOverlay";
+})(E || (E = {}));
+var P;
+(function(t) {
+  t.AppearanceBased = "appearanceBased", t.Light = "light", t.Dark = "dark", t.MediumLight = "mediumLight", t.UltraDark = "ultraDark", t.Titlebar = "titlebar", t.Selection = "selection", t.Menu = "menu", t.Popover = "popover", t.Sidebar = "sidebar", t.HeaderView = "headerView", t.Sheet = "sheet", t.WindowBackground = "windowBackground", t.HudWindow = "hudWindow", t.FullScreenUI = "fullScreenUI", t.Tooltip = "tooltip", t.ContentBackground = "contentBackground", t.UnderWindowBackground = "underWindowBackground", t.UnderPageBackground = "underPageBackground", t.Mica = "mica", t.Blur = "blur", t.Acrylic = "acrylic", t.Tabbed = "tabbed", t.TabbedDark = "tabbedDark", t.TabbedLight = "tabbedLight";
+})(P || (P = {}));
+var M;
+(function(t) {
+  t.FollowsWindowActiveState = "followsWindowActiveState", t.Active = "active", t.Inactive = "inactive";
+})(M || (M = {}));
+async function be(t, e = {}, i) {
+  return window.__TAURI_INTERNALS__.invoke(t, e, i);
+}
+async function we(t) {
   try {
-    return await n("plugin:vicons|get_icon", { name: i });
+    return await be("plugin:vicons|get_icon", { name: t });
   } catch (e) {
     console.error("[Icon Error] Error obteniendo icono:", e);
   }
   return "";
 }
-function re(i) {
+function ge(t) {
   try {
-    const e = atob(i.substring(0, 32)), t = new Uint8Array(e.length);
+    const e = atob(t.substring(0, 32)), i = new Uint8Array(e.length);
     for (let l = 0; l < e.length; l++)
-      t[l] = e.charCodeAt(l);
-    return t[0] === 137 && t[1] === 80 && t[2] === 78 && t[3] === 71 ? "image/png" : "image/svg+xml";
+      i[l] = e.charCodeAt(l);
+    return i[0] === 137 && i[1] === 80 && i[2] === 78 && i[3] === 71 ? "image/png" : "image/svg+xml";
   } catch (e) {
     return console.error("Error identificando tipo de imagen:", e), "image/png";
   }
 }
-async function W(i) {
+async function L(t) {
   try {
-    const e = await ae(i);
-    return `data:${re(e)};base64,${e}`;
+    const e = await we(t);
+    return `data:${ge(e)};base64,${e}`;
   } catch (e) {
     return console.error("[Icon Error] Error obteniendo icono:", e), "";
   }
 }
-const oe = { "data-tauri-drag-region": "" }, ue = ["src"], ce = { "data-tauri-drag-region": "" }, de = { "data-tauri-drag-region": "" }, he = ["src"], we = ["src"], be = ["src"], ge = /* @__PURE__ */ C({
+const me = { "data-tauri-drag-region": "" }, ye = ["src"], fe = { "data-tauri-drag-region": "" }, pe = { "data-tauri-drag-region": "" }, ve = ["src"], _e = ["src"], ke = ["src"], xe = /* @__PURE__ */ y({
   __name: "TopBar",
   props: {
     title: String,
     image: String
   },
-  setup(i) {
-    const e = p(null), t = B(), l = p(""), s = p(""), d = p(""), a = i;
-    return F(async () => {
-      l.value = await W("window-close"), s.value = await W("window-minimize"), d.value = await W("window-maximize");
-    }), (ye, h) => (f(), v("div", {
+  setup(t) {
+    const e = x(null), i = j(), l = x(""), a = x(""), c = x(""), r = t;
+    return q(async () => {
+      l.value = await L("window-close"), a.value = await L("window-minimize"), c.value = await L("window-maximize");
+    }), (f, h) => (o(), s("div", {
       "data-tauri-drag-region": "",
       class: "flex h-8 px-4 py-1 bg-vsk-primary rounded-t-window justify-between align-center",
       ref_key: "bar",
       ref: e
     }, [
-      u("div", oe, [
+      u("div", me, [
         u("img", {
-          src: a.image,
+          src: r.image,
           "data-tauri-drag-region": "",
           class: "h-6 w-auto"
-        }, null, 8, ue)
+        }, null, 8, ye)
       ]),
-      u("div", ce, U(a.title), 1),
-      u("div", de, [
+      u("div", fe, w(r.title), 1),
+      u("div", pe, [
         u("span", {
           class: "win-button",
-          onClick: h[0] || (h[0] = (I) => D(t).minimize())
+          onClick: h[0] || (h[0] = (v) => W(i).minimize())
         }, [
           u("img", {
-            src: s.value,
+            src: a.value,
             class: "h-6 w-6 inline-block",
             alt: "Minimize"
-          }, null, 8, he)
+          }, null, 8, ve)
         ]),
         u("span", {
           class: "win-button",
-          onClick: h[1] || (h[1] = (I) => D(t).toggleMaximize())
+          onClick: h[1] || (h[1] = (v) => W(i).toggleMaximize())
         }, [
           u("img", {
-            src: d.value,
+            src: c.value,
             class: "h-6 w-6 inline-block",
             alt: "Maximize"
-          }, null, 8, we)
+          }, null, 8, _e)
         ]),
         u("span", {
           class: "win-button",
-          onClick: h[2] || (h[2] = (I) => D(t).close())
+          onClick: h[2] || (h[2] = (v) => W(i).close())
         }, [
           u("img", {
             src: l.value,
             class: "h-6 w-6 inline-block",
             alt: "Close"
-          }, null, 8, be)
+          }, null, 8, ke)
         ])
       ])
     ], 512));
   }
-}), pe = /* @__PURE__ */ C({
+}), Ce = /* @__PURE__ */ y({
   __name: "WindowFrame",
   props: {
     title: {
@@ -2059,26 +2067,411 @@ const oe = { "data-tauri-drag-region": "" }, ue = ["src"], ce = { "data-tauri-dr
       default: ""
     }
   },
-  setup(i) {
-    const e = i;
-    return (t, l) => (f(), v(V, null, [
-      G(ge, {
+  setup(t) {
+    const e = t;
+    return (i, l) => (o(), s(F, null, [
+      Z(xe, {
         title: e.title,
         image: e.image
       }, null, 8, ["title", "image"]),
-      R(t.$slots, "default")
+      k(i.$slots, "default")
     ], 64));
   }
-}), _e = [j, Y, pe], ve = {
-  install(i) {
-    _e.forEach((e) => {
-      i.component(e.name, e);
+}), Se = ["type", "disabled"], De = {
+  key: 0,
+  class: "w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+}, ze = ["src", "alt"], Ie = { key: 2 }, Ae = ["src", "alt"], We = /* @__PURE__ */ y({
+  __name: "ActionButton",
+  props: {
+    label: {},
+    disabled: { type: Boolean, default: !1 },
+    variant: { default: "primary" },
+    loading: { type: Boolean, default: !1 },
+    customClass: { default: () => ({}) },
+    size: { default: "md" },
+    fullWidth: { type: Boolean, default: !1 },
+    iconSrc: { default: "" },
+    iconAlt: { default: "" },
+    iconRight: { type: Boolean, default: !1 },
+    type: { default: "button" },
+    stopPropagation: { type: Boolean, default: !1 },
+    preventDefault: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(t, { emit: e }) {
+    const i = t, l = e, a = {
+      primary: "bg-vsk-primary text-white hover:bg-vsk-primary/90",
+      secondary: "bg-vsk-border text-vsk-text hover:bg-vsk-border/80",
+      danger: "bg-red-600 text-white hover:bg-red-700"
+    }, c = {
+      sm: "px-2 py-1 text-xs",
+      md: "px-3 py-1 text-sm",
+      lg: "px-4 py-2 text-base"
+    }, r = (f) => {
+      i.stopPropagation && f.stopPropagation(), i.preventDefault && f.preventDefault(), !i.disabled && !i.loading && l("click");
+    };
+    return (f, h) => (o(), s("button", {
+      type: i.type,
+      onClick: r,
+      class: d(["rounded-vsk transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2", [
+        a[i.variant],
+        c[i.size],
+        i.fullWidth ? "w-full" : "",
+        i.iconSrc && !i.label ? "px-2 py-2" : "",
+        t.customClass
+      ]]),
+      disabled: i.disabled || i.loading
+    }, [
+      t.loading ? (o(), s("span", De)) : g("", !0),
+      i.iconSrc && !i.iconRight ? (o(), s("img", {
+        key: 1,
+        src: i.iconSrc,
+        alt: i.iconAlt || i.label,
+        class: "w-4 h-4"
+      }, null, 8, ze)) : g("", !0),
+      i.label ? (o(), s("span", Ie, w(i.label), 1)) : g("", !0),
+      i.iconSrc && i.iconRight ? (o(), s("img", {
+        key: 3,
+        src: i.iconSrc,
+        alt: i.iconAlt || i.label,
+        class: "w-4 h-4"
+      }, null, 8, Ae)) : g("", !0)
+    ], 10, Se));
+  }
+}), $e = /* @__PURE__ */ D(We, [["__scopeId", "data-v-d1ce8923"]]), Oe = { class: "text-base font-semibold m-0 text-vsk-primary" }, Le = /* @__PURE__ */ y({
+  __name: "ConfigSection",
+  props: {
+    title: {},
+    icon: { default: "" },
+    customClass: { default: () => ({}) }
+  },
+  setup(t) {
+    return (e, i) => (o(), s("div", {
+      class: d(["flex flex-col gap-4 p-4 background rounded-vsk", t.customClass])
+    }, [
+      u("h3", Oe, w(t.icon ? `${t.icon} ${t.title}` : t.title), 1),
+      k(e.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), Be = /* @__PURE__ */ D(Le, [["__scopeId", "data-v-89531d08"]]), Te = { class: "flex items-center gap-3 flex-1 min-w-0" }, Re = ["src", "alt"], Ne = { class: "min-w-0" }, Ee = { class: "font-semibold truncate" }, Pe = {
+  key: 0,
+  class: "text-xs text-gray-400 truncate"
+}, Me = {
+  key: 1,
+  class: "text-xs text-gray-400 truncate"
+}, Fe = {
+  key: 2,
+  class: "text-xs text-gray-400 flex gap-2 mt-1"
+}, Ve = {
+  key: 1,
+  class: "w-2 h-2 rounded-full bg-green-500"
+}, Ue = /* @__PURE__ */ y({
+  __name: "DeviceCard",
+  props: {
+    icon: {},
+    title: {},
+    subtitle: { default: "" },
+    metadata: { default: "" },
+    extraInfo: { default: () => [] },
+    isConnected: { type: Boolean, default: !1 },
+    showActionButton: { type: Boolean, default: !0 },
+    actionLabel: { default: "Conectar" },
+    showStatusIndicator: { type: Boolean, default: !1 },
+    customClass: { default: "" },
+    clickable: { type: Boolean, default: !1 }
+  },
+  emits: ["action", "click"],
+  setup(t, { emit: e }) {
+    const i = e, l = () => {
+      i("action");
+    }, a = () => {
+      i("click");
+    };
+    return (c, r) => (o(), s("div", {
+      class: d(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4", [{ "border-l-4 border-green-500": t.isConnected }, t.customClass]]),
+      onClick: a
+    }, [
+      u("div", Te, [
+        u("img", {
+          src: t.icon,
+          alt: t.title,
+          class: "h-7 w-7 shrink-0"
+        }, null, 8, Re),
+        u("div", Ne, [
+          u("div", Ee, w(t.title), 1),
+          t.subtitle ? (o(), s("div", Pe, w(t.subtitle), 1)) : g("", !0),
+          t.metadata ? (o(), s("div", Me, w(t.metadata), 1)) : g("", !0),
+          t.extraInfo && t.extraInfo.length > 0 ? (o(), s("div", Fe, [
+            (o(!0), s(F, null, Q(t.extraInfo, (f, h) => (o(), s("span", { key: h }, w(f), 1))), 128))
+          ])) : g("", !0)
+        ])
+      ]),
+      t.showActionButton ? (o(), s("button", {
+        key: 0,
+        class: "bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",
+        onClick: Y(l, ["stop"])
+      }, w(t.actionLabel), 1)) : g("", !0),
+      t.showStatusIndicator && t.isConnected ? (o(), s("div", Ve)) : g("", !0)
+    ], 2));
+  }
+}), Ge = ["for"], He = /* @__PURE__ */ y({
+  __name: "FormGroup",
+  props: {
+    label: {},
+    htmlFor: { default: "" },
+    customClass: { default: () => ({}) },
+    labelClass: { default: () => ({}) }
+  },
+  setup(t) {
+    return (e, i) => (o(), s("div", {
+      class: d(["flex flex-col gap-2", t.customClass])
+    }, [
+      t.label ? (o(), s("label", {
+        key: 0,
+        for: t.htmlFor,
+        class: d(["text-sm font-medium text-vsk-primary", t.labelClass])
+      }, w(t.label), 11, Ge)) : g("", !0),
+      k(e.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), je = /* @__PURE__ */ D(He, [["__scopeId", "data-v-a4bd01fc"]]), Je = /* @__PURE__ */ y({
+  __name: "ListCard",
+  props: {
+    clickable: { type: Boolean, default: !1 },
+    customClass: { default: () => ({}) }
+  },
+  emits: ["click"],
+  setup(t, { emit: e }) {
+    const i = t, l = e, a = () => {
+      i.clickable && l("click");
+    };
+    return (c, r) => (o(), s("div", {
+      class: d([
+        "flex items-center justify-between background p-3 rounded-vsk border border-vsk-primary/70 transition-colors duration-200",
+        {
+          "hover:bg-vsk-primary/5 cursor-pointer": i.clickable
+        },
+        t.customClass
+      ]),
+      onClick: a
+    }, [
+      k(c.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), qe = /* @__PURE__ */ D(Je, [["__scopeId", "data-v-f86d47da"]]), Ze = { class: "background rounded-vsk flex flex-row items-center gap-2 justify-between w-full h-auto p-4 transition-all duration-200 hover:bg-white/60 dark:hover:bg-black/60" }, Qe = ["src", "alt", "title"], Ye = {
+  key: 1,
+  class: "w-8 h-8 flex items-center justify-center"
+}, Ke = ["src", "alt"], Xe = ["min", "max", "value"], et = /* @__PURE__ */ y({
+  __name: "SliderControl",
+  props: {
+    icon: {},
+    alt: { default: "" },
+    tooltip: { default: "" },
+    modelValue: {},
+    min: { default: 0 },
+    max: { default: 100 },
+    showButton: { type: Boolean, default: !1 },
+    iconClass: { default: () => ({}) },
+    getPercentageClass: { type: Function, default: () => "" }
+  },
+  emits: ["update:modelValue", "buttonClick"],
+  setup(t, { emit: e }) {
+    const i = t, l = e, a = T(() => {
+      if (i.max <= i.min) return 0;
+      const h = i.max - i.min, v = i.modelValue - i.min;
+      return Math.round(v / h * 100);
+    }), c = T(() => i.getPercentageClass ? i.getPercentageClass(a.value) : ""), r = (h) => {
+      const v = h.target;
+      l("update:modelValue", Number(v.value));
+    }, f = () => {
+      l("buttonClick");
+    };
+    return (h, v) => (o(), s("div", Ze, [
+      t.showButton ? (o(), s("button", {
+        key: 0,
+        onClick: f,
+        class: "w-8 h-8 flex items-center justify-center rounded-vsk transition-all duration-200 hover:bg-white/30 dark:hover:bg-black/30 hover:scale-110 active:scale-95"
+      }, [
+        u("img", {
+          src: t.icon,
+          alt: t.alt,
+          title: t.tooltip,
+          class: d(["w-6 h-6 transition-all duration-200", t.iconClass])
+        }, null, 10, Qe)
+      ])) : (o(), s("div", Ye, [
+        u("img", {
+          src: t.icon,
+          alt: t.alt,
+          class: "w-6 h-6 transition-all duration-200"
+        }, null, 8, Ke)
+      ])),
+      u("input", {
+        type: "range",
+        min: t.min,
+        max: t.max,
+        value: t.modelValue,
+        onInput: r,
+        class: "flex-1 transition-all duration-200 hover:scale-105"
+      }, null, 40, Xe),
+      u("span", {
+        class: d(["w-12 text-right transition-all duration-200 font-medium", c.value])
+      }, w(a.value) + "% ", 3)
+    ]));
+  }
+}), tt = ["disabled"], it = /* @__PURE__ */ y({
+  __name: "SwitchToggle",
+  props: {
+    isOn: { type: Boolean },
+    disabled: { type: Boolean, default: !1 },
+    size: { default: "small" },
+    activeClass: { default: "bg-vsk-primary" },
+    inactiveClass: { default: "background" },
+    customClass: { default: "" }
+  },
+  emits: ["toggle"],
+  setup(t, { emit: e }) {
+    const i = t, l = e, a = () => {
+      l("toggle", !i.isOn);
+    };
+    return (c, r) => (o(), s("button", {
+      type: "button",
+      onClick: a,
+      disabled: t.disabled,
+      class: d([
+        "relative inline-flex items-center rounded-full transition-colors",
+        t.size === "small" ? "h-6 w-11" : "h-7 w-12",
+        t.isOn ? t.activeClass : t.inactiveClass,
+        t.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        t.customClass
+      ])
+    }, [
+      u("span", {
+        class: d([
+          "inline-block transform rounded-full bg-white shadow transition-transform",
+          t.size === "small" ? "h-4 w-4" : "h-6 w-6",
+          t.isOn ? t.size === "small" ? "translate-x-6" : "translate-x-5" : "translate-x-1"
+        ])
+      }, null, 2)
+    ], 10, tt));
+  }
+}), nt = ["disabled"], lt = ["src", "alt", "title"], at = /* @__PURE__ */ y({
+  __name: "ToggleControl",
+  props: {
+    icon: {},
+    alt: { default: "" },
+    tooltip: { default: "" },
+    isActive: { type: Boolean, default: !1 },
+    isLoading: { type: Boolean, default: !1 },
+    iconClass: { default: () => ({}) },
+    customClass: { default: () => ({}) }
+  },
+  emits: ["click"],
+  setup(t, { emit: e }) {
+    const i = e, l = () => {
+      i("click");
+    };
+    return (a, c) => (o(), s("button", {
+      onClick: l,
+      class: d(["p-2 rounded-vsk background hover:opacity-50 transition-all duration-300 h-17.5 w-17.5 group relative overflow-hidden hover:scale-105 hover:shadow-lg active:scale-95", {
+        "animate-pulse": t.isLoading,
+        "ring-2 ring-vsk-primary/50": t.isActive,
+        "opacity-60": !t.isActive,
+        ...t.customClass
+      }]),
+      disabled: t.isLoading
+    }, [
+      u("img", {
+        src: t.icon,
+        alt: t.alt,
+        title: t.tooltip,
+        class: d(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10", {
+          "animate-spin": t.isLoading,
+          "filter brightness-75": !t.isActive,
+          "drop-shadow-lg": t.isActive,
+          ...t.iconClass
+        }])
+      }, null, 10, lt)
+    ], 10, nt));
+  }
+}), st = ["title"], ot = ["src", "alt"], rt = {
+  key: 0,
+  class: "absolute bottom-1 right-1 bg-vsk-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-bold animate-bounce"
+}, ut = /* @__PURE__ */ y({
+  __name: "TrayIconButton",
+  props: {
+    icon: {},
+    alt: { default: "" },
+    tooltip: { default: "" },
+    badge: { default: null },
+    iconClass: { default: () => ({}) },
+    customClass: { default: "" },
+    tooltipClass: { default: "" },
+    showCustomTooltip: { type: Boolean, default: !1 },
+    customTooltipText: { default: "" }
+  },
+  emits: ["click"],
+  setup(t, { emit: e }) {
+    const i = e, l = x(!1), a = () => {
+      i("click");
+    };
+    return (c, r) => (o(), s("div", {
+      class: d(["p-1 rounded-vsk relative hover:bg-vsk-primary/30 group transition-all duration-300", t.customClass]),
+      title: t.tooltip,
+      onClick: a,
+      onMouseenter: r[0] || (r[0] = (f) => l.value = !0),
+      onMouseleave: r[1] || (r[1] = (f) => l.value = !1)
+    }, [
+      u("img", {
+        src: t.icon,
+        alt: t.alt,
+        class: d(["m-auto h-5.5 w-auto transition-all duration-300", t.iconClass])
+      }, null, 10, ot),
+      t.badge !== null && t.badge > 0 ? (o(), s("div", rt, w(t.badge), 1)) : g("", !0),
+      t.showCustomTooltip && t.customTooltipText ? (o(), s("div", {
+        key: 1,
+        class: d(["absolute top-1 left-1/2 transform -translate-x-1/2 text-xs font-semibold p-1 rounded-vsk transition-all duration-300 pointer-events-none background", [
+          t.tooltipClass,
+          {
+            "opacity-0 -translate-y-2": !l.value,
+            "opacity-100 translate-y-0": l.value
+          }
+        ]])
+      }, w(t.customTooltipText), 3)) : g("", !0),
+      k(c.$slots, "default")
+    ], 42, st));
+  }
+}), ct = [
+  te,
+  le,
+  Ce,
+  $e,
+  Be,
+  Ue,
+  je,
+  qe,
+  et,
+  it,
+  at,
+  ut
+], ht = {
+  install(t) {
+    ct.forEach((e) => {
+      t.component(e.name, e);
     });
   }
 };
 export {
-  j as SideBar,
-  Y as SideButton,
-  pe as WindowFrame,
-  ve as default
+  $e as ActionButton,
+  Be as ConfigSection,
+  Ue as DeviceCard,
+  je as FormGroup,
+  qe as ListCard,
+  te as SideBar,
+  le as SideButton,
+  et as SliderControl,
+  it as SwitchToggle,
+  at as ToggleControl,
+  ut as TrayIconButton,
+  Ce as WindowFrame,
+  ht as default
 };