@vasakgroup/vue-libvasak 0.4.0 → 0.4.1

package/dist/vue-libvasak.es.js

@@ -1,31 +1,31 @@
-import { ref as S, onMounted as Y, onUnmounted as re, watch as K, defineComponent as w, toRef as J, computed as y, createElementBlock as o, unref as V, openBlock as l, normalizeStyle as Q, createCommentVNode as v, createElementVNode as h, createVNode as D, toDisplayString as k, normalizeClass as m, renderSlot as z, createBlock as P, onBeforeUnmount as q, Fragment as F, renderList as W, withCtx as N, mergeModels as ue, useAttrs as ce, useId as de, useModel as fe, withDirectives as me, mergeProps as be, isRef as ve, vModelSelect as ge, inject as he, provide as te, createTextVNode as ye, createSlots as xe, withModifiers as $, withKeys as B, nextTick as ae } from "vue";
-import { listen as pe } from "@tauri-apps/api/event";
-import { getSymbolSource as ke, getIconSource as we } from "@vasakgroup/plugin-vicons";
-import { getCurrentWindow as $e } from "@tauri-apps/api/window";
-function Ce(e, i) {
+import { ref as S, onMounted as Q, onUnmounted as ke, watch as Z, defineComponent as L, toRef as ae, computed as y, createElementBlock as n, unref as O, openBlock as l, normalizeStyle as H, createCommentVNode as f, createElementVNode as h, createVNode as V, toDisplayString as w, normalizeClass as d, renderSlot as T, createBlock as F, onBeforeUnmount as _, Fragment as X, renderList as Y, withCtx as W, mergeModels as $e, useAttrs as we, useId as Ce, useModel as ze, withDirectives as Le, mergeProps as Be, isRef as Se, vModelSelect as Ae, inject as Te, provide as ie, createTextVNode as De, createSlots as Ee, withModifiers as z, withKeys as D, Teleport as Me, Transition as Ie, nextTick as re } from "vue";
+import { listen as Ve } from "@tauri-apps/api/event";
+import { getSymbolSource as je, getIconSource as Oe } from "@vasakgroup/plugin-vicons";
+import { getCurrentWindow as Pe } from "@tauri-apps/api/window";
+function Ne(e, s) {
   const t = S("");
-  let a = null, s = !1, r = 0;
+  let a = null, o = !1, i = 0;
   async function c() {
-    const u = ++r, b = e.value;
-    if (!b) {
+    const u = ++i, m = e.value;
+    if (!m) {
       t.value = "";
       return;
     }
-    const g = i.value === "symbol" ? await ke(b) : await we(b);
-    u === r && (t.value = g);
+    const v = s.value === "symbol" ? await je(m) : await Oe(m);
+    u === i && (t.value = v);
   }
-  return Y(async () => {
-    const u = await pe("vicons:theme-changed", c);
-    if (s) {
+  return Q(async () => {
+    const u = await Ve("vicons:theme-changed", c);
+    if (o) {
       u();
       return;
     }
     a = u, await c();
-  }), re(() => {
-    s = !0, a?.();
-  }), K(e, c), t;
+  }), ke(() => {
+    o = !0, a?.();
+  }), Z(e, c), t;
 }
-const ze = ["src", "alt"], A = /* @__PURE__ */ w({
+const Re = ["src", "alt"], M = /* @__PURE__ */ L({
   __name: "ThemeIcon",
   props: {
     name: {},
@@ -34,23 +34,23 @@ const ze = ["src", "alt"], A = /* @__PURE__ */ w({
     alt: { default: "" }
   },
   setup(e) {
-    const i = e, t = Ce(J(i, "name"), J(i, "type")), a = y(() => `${i.size}px`);
-    return (s, r) => V(t) ? (l(), o("img", {
+    const s = e, t = Ne(ae(s, "name"), ae(s, "type")), a = y(() => `${s.size}px`);
+    return (o, i) => O(t) ? (l(), n("img", {
       key: 0,
-      src: V(t),
+      src: O(t),
       alt: e.alt,
-      style: Q({ width: a.value, height: a.value }),
+      style: H({ width: a.value, height: a.value }),
       class: "shrink-0 object-contain"
-    }, null, 12, ze)) : (l(), o("span", {
+    }, null, 12, Re)) : (l(), n("span", {
       key: 1,
-      style: Q({ width: a.value, height: a.value }),
+      style: H({ width: a.value, height: a.value }),
       class: "shrink-0"
     }, null, 4));
   }
-}), Le = { class: "flex flex-col gap-2" }, Be = ["aria-expanded"], Se = {
+}), Fe = { class: "flex flex-col gap-2" }, We = ["aria-expanded"], Ue = {
   key: 1,
   class: "flex flex-col gap-1"
-}, le = /* @__PURE__ */ w({
+}, ue = /* @__PURE__ */ L({
   __name: "SideGroup",
   props: {
     title: {},
@@ -58,40 +58,40 @@ const ze = ["src", "alt"], A = /* @__PURE__ */ w({
     defaultOpen: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const i = e, t = S(i.defaultOpen);
-    return K(
-      () => i.collapsed,
+    const s = e, t = S(s.defaultOpen);
+    return Z(
+      () => s.collapsed,
       (a) => {
         a && (t.value = !0);
       }
-    ), (a, s) => (l(), o("section", Le, [
-      e.collapsed ? v("", !0) : (l(), o("button", {
+    ), (a, o) => (l(), n("section", Fe, [
+      e.collapsed ? f("", !0) : (l(), n("button", {
         key: 0,
         type: "button",
         class: "group flex w-full items-center justify-between rounded-corner px-2 py-1 text-tx-muted text-xs uppercase tracking-[0.08em] hover:bg-ui-surface/60",
         "aria-expanded": t.value,
-        onClick: s[0] || (s[0] = (r) => t.value = !t.value)
+        onClick: o[0] || (o[0] = (i) => t.value = !t.value)
       }, [
-        h("span", null, k(e.title), 1),
-        D(A, {
+        h("span", null, w(e.title), 1),
+        V(M, {
           name: "pan-down-symbolic",
           type: "symbol",
           size: 12,
-          class: m(["transition-transform duration-200", t.value ? "" : "-rotate-90"])
+          class: d(["transition-transform duration-200", t.value ? "" : "-rotate-90"])
         }, null, 8, ["class"])
-      ], 8, Be)),
-      t.value || e.collapsed ? (l(), o("div", Se, [
-        z(a.$slots, "default")
-      ])) : v("", !0)
+      ], 8, We)),
+      t.value || e.collapsed ? (l(), n("div", Ue, [
+        T(a.$slots, "default")
+      ])) : f("", !0)
     ]));
   }
-}), Ae = ["title", "aria-label", "disabled", "aria-current"], Te = { key: 1 }, De = {
+}), Ge = ["title", "aria-label", "disabled", "aria-current"], Xe = { key: 1 }, Ye = {
   key: 0,
   class: "min-w-0 flex-1 truncate font-medium"
-}, Me = {
+}, Ke = {
   key: 1,
   class: "rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs"
-}, ne = /* @__PURE__ */ w({
+}, ce = /* @__PURE__ */ L({
   __name: "SideButton",
   props: {
     label: {},
@@ -103,49 +103,49 @@ const ze = ["src", "alt"], A = /* @__PURE__ */ w({
   },
   emits: ["click"],
   setup(e) {
-    return (i, t) => (l(), o("button", {
+    return (s, t) => (l(), n("button", {
       type: "button",
       title: e.collapsed ? e.label : void 0,
       "aria-label": e.collapsed ? e.label : void 0,
       disabled: e.disabled,
       "aria-current": e.active ? "page" : void 0,
-      class: m(["group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200", [
+      class: d(["group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200", [
         e.active ? "border-secondary bg-primary/15 text-tx-main shadow-sm" : "border-transparent bg-transparent hover:border-ui-border hover:bg-ui-surface/70",
         e.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
         e.collapsed ? "justify-center px-2" : ""
       ]]),
-      onClick: t[0] || (t[0] = (a) => i.$emit("click"))
+      onClick: t[0] || (t[0] = (a) => s.$emit("click"))
     }, [
       h("span", {
-        class: m(["flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide", e.active ? "border-secondary bg-primary/20" : ""]),
+        class: d(["flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide", e.active ? "border-secondary bg-primary/20" : ""]),
         "aria-hidden": "true"
       }, [
-        e.icon ? (l(), P(A, {
+        e.icon ? (l(), F(M, {
           key: 0,
           name: e.icon,
           size: 20
-        }, null, 8, ["name"])) : (l(), o("span", Te, k(e.label.charAt(0).toUpperCase()), 1))
+        }, null, 8, ["name"])) : (l(), n("span", Xe, w(e.label.charAt(0).toUpperCase()), 1))
       ], 2),
-      e.collapsed ? v("", !0) : (l(), o("span", De, k(e.label), 1)),
-      !e.collapsed && e.badge !== "" ? (l(), o("span", Me, k(e.badge), 1)) : v("", !0)
-    ], 10, Ae));
+      e.collapsed ? f("", !0) : (l(), n("span", Ye, w(e.label), 1)),
+      !e.collapsed && e.badge !== "" ? (l(), n("span", Ke, w(e.badge), 1)) : f("", !0)
+    ], 10, Ge));
   }
-}), Ee = {
+}), qe = {
   key: 0,
   class: "flex flex-col gap-2 border-ui-border border-b p-2"
-}, Ie = { class: "flex items-center gap-2" }, Ve = ["aria-label", "aria-expanded"], Oe = {
+}, He = { class: "flex items-center gap-2" }, Je = ["aria-label", "aria-expanded"], Qe = {
   key: 0,
   class: "min-w-0 flex-1"
-}, je = {
+}, Ze = {
   key: 0,
   class: "truncate font-semibold text-sm"
-}, Pe = {
+}, _e = {
   key: 1,
   class: "truncate text-tx-muted text-xs"
-}, Ne = { key: 0 }, Re = {
+}, et = { key: 0 }, tt = {
   key: 1,
   class: "flex border-ui-border border-b p-2"
-}, Fe = ["aria-label", "aria-expanded"], We = { class: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-2" }, Z = "hidden h-8 w-8 shrink-0 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 transition-colors hover:bg-ui-surface md:inline-flex", _ = 767, Ue = /* @__PURE__ */ w({
+}, at = ["aria-label", "aria-expanded"], lt = { class: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-2" }, le = "hidden h-8 w-8 shrink-0 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 transition-colors hover:bg-ui-surface md:inline-flex", ne = 767, nt = /* @__PURE__ */ L({
   __name: "SideBar",
   props: {
     title: { default: "" },
@@ -157,101 +157,101 @@ const ze = ["src", "alt"], A = /* @__PURE__ */ w({
     expandLabel: { default: "Expand" }
   },
   emits: ["update:modelValue", "update:collapsed", "change"],
-  setup(e, { expose: i, emit: t }) {
-    const a = e, s = t, r = S(a.collapsed ?? !1), c = S(!1);
-    let u = null, b = null;
-    const g = y(() => c.value || r.value), E = y(() => !!(a.title || a.subtitle));
+  setup(e, { expose: s, emit: t }) {
+    const a = e, o = t, i = S(a.collapsed ?? !1), c = S(!1);
+    let u = null, m = null;
+    const v = y(() => c.value || i.value), I = y(() => !!(a.title || a.subtitle));
     y(() => a.categories.length > 0);
-    function O() {
+    function N() {
       return document.documentElement?.clientWidth || window.innerWidth;
     }
-    function L() {
-      c.value = O() <= _;
+    function A() {
+      c.value = N() <= ne;
     }
-    function T() {
-      r.value = !r.value, s("update:collapsed", r.value);
+    function E() {
+      i.value = !i.value, o("update:collapsed", i.value);
     }
-    function j(x) {
-      s("update:modelValue", x), s("change", x);
+    function P(k) {
+      o("update:modelValue", k), o("change", k);
     }
-    return K(
+    return Z(
       () => a.collapsed,
-      (x) => {
-        x !== void 0 && (r.value = x);
+      (k) => {
+        k !== void 0 && (i.value = k);
       }
-    ), Y(() => {
-      u = window.matchMedia(`(max-width: ${_}px)`), L(), u.addEventListener("change", L), window.addEventListener("resize", L), typeof ResizeObserver < "u" && document.documentElement && (b = new ResizeObserver(L), b.observe(document.documentElement));
-    }), q(() => {
-      u?.removeEventListener("change", L), window.removeEventListener("resize", L), b?.disconnect(), b = null;
-    }), i({ collapsed: g }), (x, M) => (l(), o("aside", {
-      class: m(["relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-surface/70 transition-all duration-300", ["w-[84px]", g.value ? "md:w-[84px]" : "md:w-72"]])
+    ), Q(() => {
+      u = window.matchMedia(`(max-width: ${ne}px)`), A(), u.addEventListener("change", A), window.addEventListener("resize", A), typeof ResizeObserver < "u" && document.documentElement && (m = new ResizeObserver(A), m.observe(document.documentElement));
+    }), _(() => {
+      u?.removeEventListener("change", A), window.removeEventListener("resize", A), m?.disconnect(), m = null;
+    }), s({ collapsed: v }), (k, j) => (l(), n("aside", {
+      class: d(["relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-surface/70 transition-all duration-300", ["w-[84px]", v.value ? "md:w-[84px]" : "md:w-72"]])
     }, [
-      E.value || x.$slots.header ? (l(), o("header", Ee, [
-        h("div", Ie, [
+      I.value || k.$slots.header ? (l(), n("header", qe, [
+        h("div", He, [
           h("button", {
             type: "button",
-            class: m(Z),
-            "aria-label": g.value ? e.expandLabel : e.collapseLabel,
-            "aria-expanded": !g.value,
-            onClick: T
+            class: d(le),
+            "aria-label": v.value ? e.expandLabel : e.collapseLabel,
+            "aria-expanded": !v.value,
+            onClick: E
           }, [
-            D(A, {
-              name: g.value ? "pan-end-symbolic" : "pan-start-symbolic",
+            V(M, {
+              name: v.value ? "pan-end-symbolic" : "pan-start-symbolic",
               type: "symbol",
               size: 16
             }, null, 8, ["name"])
-          ], 8, Ve),
-          E.value && !g.value ? (l(), o("div", Oe, [
-            e.title ? (l(), o("p", je, k(e.title), 1)) : v("", !0),
-            e.subtitle ? (l(), o("p", Pe, k(e.subtitle), 1)) : v("", !0)
-          ])) : v("", !0)
+          ], 8, Je),
+          I.value && !v.value ? (l(), n("div", Qe, [
+            e.title ? (l(), n("p", Ze, w(e.title), 1)) : f("", !0),
+            e.subtitle ? (l(), n("p", _e, w(e.subtitle), 1)) : f("", !0)
+          ])) : f("", !0)
         ]),
-        x.$slots.header && !g.value ? (l(), o("div", Ne, [
-          z(x.$slots, "header", { collapsed: g.value })
-        ])) : v("", !0)
-      ])) : (l(), o("div", Re, [
+        k.$slots.header && !v.value ? (l(), n("div", et, [
+          T(k.$slots, "header", { collapsed: v.value })
+        ])) : f("", !0)
+      ])) : (l(), n("div", tt, [
         h("button", {
           type: "button",
-          class: m(Z),
-          "aria-label": g.value ? e.expandLabel : e.collapseLabel,
-          "aria-expanded": !g.value,
-          onClick: T
+          class: d(le),
+          "aria-label": v.value ? e.expandLabel : e.collapseLabel,
+          "aria-expanded": !v.value,
+          onClick: E
         }, [
-          D(A, {
-            name: g.value ? "pan-end-symbolic" : "pan-start-symbolic",
+          V(M, {
+            name: v.value ? "pan-end-symbolic" : "pan-start-symbolic",
             type: "symbol",
             size: 16
           }, null, 8, ["name"])
-        ], 8, Fe)
+        ], 8, at)
       ])),
-      h("div", We, [
-        (l(!0), o(F, null, W(e.categories, (I) => (l(), P(le, {
-          key: I.id,
-          title: I.title,
-          collapsed: g.value
+      h("div", lt, [
+        (l(!0), n(X, null, Y(e.categories, (R) => (l(), F(ue, {
+          key: R.id,
+          title: R.title,
+          collapsed: v.value
         }, {
-          default: N(() => [
-            (l(!0), o(F, null, W(I.items, (d) => (l(), P(ne, {
-              key: d.id,
-              label: d.label,
-              icon: d.icon,
-              badge: d.badge,
-              disabled: d.disabled,
-              collapsed: g.value,
-              active: e.modelValue === d.id,
-              onClick: (n) => j(d.id)
+          default: W(() => [
+            (l(!0), n(X, null, Y(R.items, (b) => (l(), F(ce, {
+              key: b.id,
+              label: b.label,
+              icon: b.icon,
+              badge: b.badge,
+              disabled: b.disabled,
+              collapsed: v.value,
+              active: e.modelValue === b.id,
+              onClick: (g) => P(b.id)
             }, null, 8, ["label", "icon", "badge", "disabled", "collapsed", "active", "onClick"]))), 128))
           ]),
           _: 2
         }, 1032, ["title", "collapsed"]))), 128)),
-        z(x.$slots, "default", { collapsed: g.value })
+        T(k.$slots, "default", { collapsed: v.value })
       ])
     ], 2));
   }
-}), Ge = { class: "flex min-w-0 flex-col gap-1" }, Xe = ["for"], Ye = { class: "relative flex min-w-0 items-center" }, Ke = ["id"], qe = /* @__PURE__ */ w({
+}), ot = { class: "flex min-w-0 flex-col gap-1" }, st = ["for"], it = { class: "relative flex min-w-0 items-center" }, rt = ["id"], ut = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "SelectField",
-  props: /* @__PURE__ */ ue({
+  props: /* @__PURE__ */ $e({
     label: {}
   }, {
     modelValue: {
@@ -261,28 +261,28 @@ const ze = ["src", "alt"], A = /* @__PURE__ */ w({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const i = e, t = ce(), a = de(), s = y(() => t.id ?? a), [r, c] = fe(e, "modelValue", {
+    const s = e, t = we(), a = Ce(), o = y(() => t.id ?? a), [i, c] = ze(e, "modelValue", {
       set(u) {
         return c.number ? Number(u) : u;
       }
     });
-    return (u, b) => (l(), o("div", Ge, [
-      i.label ? (l(), o("label", {
+    return (u, m) => (l(), n("div", ot, [
+      s.label ? (l(), n("label", {
         key: 0,
-        for: s.value,
+        for: o.value,
         class: "text-tx-muted text-xs"
-      }, k(i.label), 9, Xe)) : v("", !0),
-      h("div", Ye, [
-        me(h("select", be({
-          id: s.value,
-          "onUpdate:modelValue": b[0] || (b[0] = (g) => ve(r) ? r.value = g : null),
+      }, w(s.label), 9, st)) : f("", !0),
+      h("div", it, [
+        Le(h("select", Be({
+          id: o.value,
+          "onUpdate:modelValue": m[0] || (m[0] = (v) => Se(i) ? i.value = v : null),
           class: "min-w-0 flex-1 appearance-none truncate rounded-corner border border-ui-border bg-ui-surface/60 py-1.5 pr-8 pl-2 text-sm text-tx-main"
-        }, V(t)), [
-          z(u.$slots, "default")
-        ], 16, Ke), [
-          [ge, V(r)]
+        }, O(t)), [
+          T(u.$slots, "default")
+        ], 16, rt), [
+          [Ae, O(i)]
         ]),
-        D(A, {
+        V(M, {
           name: "pan-down-symbolic",
           type: "symbol",
           size: 14,
@@ -291,44 +291,44 @@ const ze = ["src", "alt"], A = /* @__PURE__ */ w({
       ])
     ]));
   }
-}), H = /* @__PURE__ */ Symbol("barra de vasak");
-function X(e) {
+}), ee = /* @__PURE__ */ Symbol("barra de vasak");
+function J(e) {
   return e === "left" || e === "right" ? "vertical" : "horizontal";
 }
-const He = ["top", "bottom", "left", "right"];
-function Je(e) {
-  return typeof e == "string" && He.includes(e);
+const ct = ["top", "bottom", "left", "right"];
+function dt(e) {
+  return typeof e == "string" && ct.includes(e);
 }
-function R() {
-  const e = he(H, null);
+function G() {
+  const e = Te(ee, null);
   if (e) return e;
-  const i = S("top");
+  const s = S("top");
   return {
-    posicion: i,
-    orientacion: y(() => X(i.value)),
-    vertical: y(() => X(i.value) === "vertical")
+    posicion: s,
+    orientacion: y(() => J(s.value)),
+    vertical: y(() => J(s.value) === "vertical")
   };
 }
-const Qe = "window", Ze = "barPosition";
-function _e(e) {
-  const t = e?.[Qe]?.[Ze];
-  return Je(t) ? t : null;
+const ft = "window", mt = "barPosition";
+function bt(e) {
+  const t = e?.[ft]?.[mt];
+  return dt(t) ? t : null;
 }
-function et(e = "top") {
-  const i = S(e);
+function vt(e = "top") {
+  const s = S(e);
   let t = null, a = !1;
-  async function s() {
+  async function o() {
     try {
-      const { readConfig: r } = await import("@vasakgroup/plugin-config-manager"), c = await r();
-      i.value = _e(c) ?? e;
+      const { readConfig: i } = await import("@vasakgroup/plugin-config-manager"), c = await i();
+      s.value = bt(c) ?? e;
     } catch {
     }
   }
-  return Y(async () => {
-    await s();
+  return Q(async () => {
+    await o();
     try {
-      const { listen: r } = await import("@tauri-apps/api/event"), c = await r("config-changed", () => {
-        s();
+      const { listen: i } = await import("@tauri-apps/api/event"), c = await i("config-changed", () => {
+        o();
       });
       if (a) {
         c();
@@ -337,11 +337,11 @@ function et(e = "top") {
       t = c;
     } catch {
     }
-  }), q(() => {
+  }), _(() => {
     a = !0, t?.(), t = null;
-  }), i;
+  }), s;
 }
-const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title", "aria-label"], G = "flex items-center justify-center rounded-corner border border-ui-border bg-ui-bg/80 p-1 transition-colors", oe = /* @__PURE__ */ w({
+const gt = ["title", "aria-label"], yt = ["title", "aria-label"], ht = ["title", "aria-label"], q = "flex items-center justify-center rounded-corner border border-ui-border bg-ui-bg/80 p-1 transition-colors", de = /* @__PURE__ */ L({
   __name: "WindowControls",
   props: {
     minimizeLabel: { default: "Minimize" },
@@ -349,61 +349,61 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     closeLabel: { default: "Close" }
   },
   setup(e) {
-    const { vertical: i } = R();
+    const { vertical: s } = G();
     function t() {
-      return $e();
+      return Pe();
     }
-    return (a, s) => (l(), o("div", {
-      class: m(["flex shrink-0 gap-1", V(i) ? "flex-col" : ""]),
+    return (a, o) => (l(), n("div", {
+      class: d(["flex shrink-0 gap-1", O(s) ? "flex-col" : ""]),
       "data-tauri-drag-region": ""
     }, [
       h("button", {
         type: "button",
-        class: m([G, "hover:bg-status-success"]),
+        class: d([q, "hover:bg-status-success"]),
         title: e.minimizeLabel,
         "aria-label": e.minimizeLabel,
-        onClick: s[0] || (s[0] = (r) => t().minimize())
+        onClick: o[0] || (o[0] = (i) => t().minimize())
       }, [
-        D(A, {
+        V(M, {
           name: "window-minimize",
           size: 24
         })
-      ], 10, tt),
+      ], 10, gt),
       h("button", {
         type: "button",
-        class: m([G, "hover:bg-status-warning"]),
+        class: d([q, "hover:bg-status-warning"]),
         title: e.maximizeLabel,
         "aria-label": e.maximizeLabel,
-        onClick: s[1] || (s[1] = (r) => t().toggleMaximize())
+        onClick: o[1] || (o[1] = (i) => t().toggleMaximize())
       }, [
-        D(A, {
+        V(M, {
           name: "window-maximize",
           size: 24
         })
-      ], 10, at),
+      ], 10, yt),
       h("button", {
         type: "button",
-        class: m([G, "hover:bg-status-error"]),
+        class: d([q, "hover:bg-status-error"]),
         title: e.closeLabel,
         "aria-label": e.closeLabel,
-        onClick: s[2] || (s[2] = (r) => t().close())
+        onClick: o[2] || (o[2] = (i) => t().close())
       }, [
-        D(A, {
+        V(M, {
           name: "window-close",
           size: 24
         })
-      ], 10, lt)
+      ], 10, ht)
     ], 2));
   }
-}), nt = {
+}), pt = {
   key: 0,
   class: "flex shrink-0 items-center",
   "data-tauri-drag-region": ""
-}, ot = {
+}, xt = {
   key: 1,
   class: "min-w-0 shrink truncate text-sm",
   "data-tauri-drag-region": ""
-}, se = /* @__PURE__ */ w({
+}, fe = /* @__PURE__ */ L({
   __name: "AppBar",
   props: {
     position: { default: null },
@@ -414,36 +414,36 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     hideControls: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const i = e, t = R(), a = y(() => i.position ?? t.posicion.value), s = y(() => a.value === "left" || a.value === "right");
-    return te(H, {
+    const s = e, t = G(), a = y(() => s.position ?? t.posicion.value), o = y(() => a.value === "left" || a.value === "right");
+    return ie(ee, {
       posicion: a,
-      orientacion: y(() => s.value ? "vertical" : "horizontal"),
-      vertical: s
-    }), (r, c) => (l(), o("div", {
-      class: m(["flex shrink-0 items-center gap-2 p-1 font-title", s.value ? "h-full flex-col" : "w-full"]),
+      orientacion: y(() => o.value ? "vertical" : "horizontal"),
+      vertical: o
+    }), (i, c) => (l(), n("div", {
+      class: d(["flex shrink-0 items-center gap-2 p-1 font-title", o.value ? "h-full flex-col" : "w-full"]),
       "data-tauri-drag-region": ""
     }, [
-      r.$slots.identidad ? (l(), o("div", nt, [
-        z(r.$slots, "identidad")
-      ])) : v("", !0),
-      (r.$slots.titulo || e.title) && !s.value ? (l(), o("p", ot, [
-        z(r.$slots, "titulo", {}, () => [
-          ye(k(e.title), 1)
+      i.$slots.identidad ? (l(), n("div", pt, [
+        T(i.$slots, "identidad")
+      ])) : f("", !0),
+      (i.$slots.titulo || e.title) && !o.value ? (l(), n("p", xt, [
+        T(i.$slots, "titulo", {}, () => [
+          De(w(e.title), 1)
         ])
-      ])) : v("", !0),
+      ])) : f("", !0),
       h("div", {
-        class: m(["flex min-h-0 min-w-0 flex-1 items-center gap-2 overflow-auto", s.value ? "flex-col" : ""]),
+        class: d(["flex min-h-0 min-w-0 flex-1 items-center gap-2 overflow-auto", o.value ? "flex-col" : ""]),
         "data-tauri-drag-region": ""
       }, [
-        z(r.$slots, "default")
+        T(i.$slots, "default")
       ], 2),
-      r.$slots.acciones ? (l(), o("div", {
+      i.$slots.acciones ? (l(), n("div", {
         key: 2,
-        class: m(["flex shrink-0 items-center gap-1", s.value ? "flex-col" : ""])
+        class: d(["flex shrink-0 items-center gap-1", o.value ? "flex-col" : ""])
       }, [
-        z(r.$slots, "acciones")
-      ], 2)) : v("", !0),
-      e.hideControls ? v("", !0) : (l(), P(oe, {
+        T(i.$slots, "acciones")
+      ], 2)) : f("", !0),
+      e.hideControls ? f("", !0) : (l(), F(de, {
         key: 3,
         "minimize-label": e.minimizeLabel,
         "maximize-label": e.maximizeLabel,
@@ -451,7 +451,7 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
       }, null, 8, ["minimize-label", "maximize-label", "close-label"]))
     ], 2));
   }
-}), st = { class: "flex min-h-0 min-w-0 flex-1" }, it = /* @__PURE__ */ w({
+}), kt = { class: "flex min-h-0 min-w-0 flex-1" }, $t = /* @__PURE__ */ L({
   __name: "WindowFrame",
   props: {
     position: { default: null },
@@ -463,18 +463,18 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     hideBar: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const i = e, t = et(), a = y(() => i.position ?? t.value), s = y(() => X(a.value)), r = y(() => s.value === "vertical");
-    te(H, { posicion: a, orientacion: s, vertical: r });
+    const s = e, t = vt(), a = y(() => s.position ?? t.value), o = y(() => J(a.value)), i = y(() => o.value === "vertical");
+    ie(ee, { posicion: a, orientacion: o, vertical: i });
     const c = {
       top: "flex-col",
       bottom: "flex-col-reverse",
       left: "flex-row",
       right: "flex-row-reverse"
     };
-    return (u, b) => (l(), o("div", {
-      class: m(["flex h-screen w-screen overflow-hidden rounded-corner-window border border-ui-border bg-ui-bg/80", c[a.value]])
+    return (u, m) => (l(), n("div", {
+      class: d(["flex h-screen w-screen overflow-hidden rounded-corner-window border border-ui-border bg-ui-bg/80", c[a.value]])
     }, [
-      e.hideBar ? v("", !0) : (l(), P(se, {
+      e.hideBar ? f("", !0) : (l(), F(fe, {
         key: 0,
         position: a.value,
         title: e.title,
@@ -482,44 +482,50 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
         "maximize-label": e.maximizeLabel,
         "close-label": e.closeLabel,
         "hide-controls": e.hideControls
-      }, xe({
-        default: N(() => [
-          z(u.$slots, "barra")
+      }, Ee({
+        default: W(() => [
+          T(u.$slots, "barra")
         ]),
         _: 2
       }, [
         u.$slots.identidad ? {
           name: "identidad",
-          fn: N(() => [
-            z(u.$slots, "identidad")
+          fn: W(() => [
+            T(u.$slots, "identidad")
           ]),
           key: "0"
         } : void 0,
         u.$slots.titulo ? {
           name: "titulo",
-          fn: N(() => [
-            z(u.$slots, "titulo")
+          fn: W(() => [
+            T(u.$slots, "titulo")
           ]),
           key: "1"
         } : void 0,
         u.$slots.acciones ? {
           name: "acciones",
-          fn: N(() => [
-            z(u.$slots, "acciones")
+          fn: W(() => [
+            T(u.$slots, "acciones")
           ]),
           key: "2"
         } : void 0
       ]), 1032, ["position", "title", "minimize-label", "maximize-label", "close-label", "hide-controls"])),
-      h("div", st, [
-        z(u.$slots, "default")
+      h("div", kt, [
+        T(u.$slots, "default")
       ])
     ], 2));
   }
-}), rt = ["aria-selected", "title", "aria-label", "tabindex"], ut = { class: "min-w-0 flex-1 truncate" }, ct = {
+}), wt = ["aria-selected", "title", "aria-label", "tabindex"], Ct = {
   key: 1,
+  "aria-hidden": "true"
+}, zt = {
+  key: 2,
+  class: "min-w-0 flex-1 truncate"
+}, Lt = ["title", "aria-label"], Bt = { class: "whitespace-nowrap" }, St = {
+  key: 0,
   class: "size-2 shrink-0 rounded-full bg-current",
   "aria-hidden": "true"
-}, dt = ["title", "aria-label"], ft = 500, ee = 8, ie = /* @__PURE__ */ w({
+}, At = ["title", "aria-label"], Tt = 500, oe = 8, se = 6, me = /* @__PURE__ */ L({
   __name: "TabItem",
   props: {
     tab: {},
@@ -529,90 +535,166 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     tabindex: { default: 0 }
   },
   emits: ["select", "close", "menu", "mover", "navegar"],
-  setup(e, { emit: i }) {
-    const t = e, a = i, { vertical: s } = R(), r = S(!1);
-    let c = null, u = null;
-    const b = y(() => t.tab.closable !== !1), g = y(() => t.tab.tooltip ?? t.tab.label), E = y(
+  setup(e, { emit: s }) {
+    const t = e, a = s, { vertical: o, posicion: i } = G(), c = S(null), u = S(null), m = S(!1), v = S(!1), I = S(!1), N = S({ top: 0, left: 0, right: 0 });
+    let A = null, E = null;
+    const P = y(() => t.tab.closable !== !1), k = y(() => t.tab.tooltip ?? t.tab.label), j = y(
       () => t.tab.dirty ? `${t.tab.label} · ${t.dirtyLabel}` : t.tab.label
-    ), O = y(() => !!t.tab.dirty && !(r.value && b.value)), L = y(
-      () => b.value && (r.value || t.active || !t.tab.dirty)
-    );
-    function T() {
-      c !== null && clearTimeout(c), c = null, u = null;
+    ), R = y(() => t.tab.label.trim().charAt(0).toUpperCase()), b = y(() => m.value || I.value), g = y(
+      () => !!t.tab.dirty && !(b.value && P.value)
+    ), p = y(
+      () => P.value && (b.value || t.active || !t.tab.dirty)
+    ), x = y(
+      () => o.value && (m.value || v.value || I.value)
+    ), B = y(() => {
+      const $ = { position: "fixed", top: `${N.value.top}px`, zIndex: 50 };
+      return i.value === "right" ? { ...$, right: `${N.value.right + se}px` } : { ...$, left: `${N.value.left + se}px` };
+    });
+    function te() {
+      const $ = c.value;
+      if (!$) return;
+      const r = $.getBoundingClientRect();
+      N.value = {
+        top: r.top,
+        left: r.right,
+        right: window.innerWidth - r.left
+      };
+    }
+    function be($) {
+      const r = $.relatedTarget;
+      r && u.value?.contains(r) || (I.value = !1);
+    }
+    function ve() {
+      m.value = !0, te();
+    }
+    function ge() {
+      v.value = !0, te();
+    }
+    function U() {
+      A !== null && clearTimeout(A), A = null, E = null;
     }
-    function j(d) {
-      d.button === 0 && (u = { x: d.clientX, y: d.clientY }, c = setTimeout(() => {
-        u && a("menu", u), T();
-      }, ft));
+    function ye($) {
+      $.button === 0 && (E = { x: $.clientX, y: $.clientY }, A = setTimeout(() => {
+        E && a("menu", E), U();
+      }, Tt));
     }
-    function x(d) {
-      if (!u) return;
-      (Math.abs(d.clientX - u.x) > ee || Math.abs(d.clientY - u.y) > ee) && T();
+    function he($) {
+      if (!E) return;
+      (Math.abs($.clientX - E.x) > oe || Math.abs($.clientY - E.y) > oe) && U();
     }
-    function M(d) {
-      d.button === 1 && b.value && (d.preventDefault(), a("close"));
+    function pe($) {
+      $.button === 1 && P.value && ($.preventDefault(), a("close"));
     }
-    function I(d) {
-      d.preventDefault(), a("menu", { x: d.clientX, y: d.clientY });
+    function xe($) {
+      $.preventDefault(), a("menu", { x: $.clientX, y: $.clientY });
     }
-    return q(T), (d, n) => (l(), o("div", {
-      class: m(["group relative flex shrink-0 cursor-pointer items-center gap-2 rounded-corner border border-ui-border px-3 py-1 text-sm transition-colors", [
+    return _(U), ($, r) => (l(), n("div", {
+      ref_key: "raiz",
+      ref: c,
+      class: d(["group relative flex shrink-0 cursor-pointer items-center gap-2 rounded-corner border border-ui-border transition-colors", [
         e.active ? "bg-primary font-bold text-tx-on-primary" : "bg-ui-bg/80 hover:bg-ui-surface/70",
-        V(s) ? "w-full justify-between" : "w-34 max-w-34"
+        O(o) ? "size-8 justify-center p-0 text-sm" : "w-34 max-w-34 px-3 py-1 text-sm"
       ]]),
       role: "tab",
       "aria-selected": e.active,
-      title: g.value,
-      "aria-label": E.value,
+      title: k.value,
+      "aria-label": j.value,
       tabindex: e.tabindex,
-      onClick: n[1] || (n[1] = $((f) => a("select"), ["stop"])),
+      onClick: r[5] || (r[5] = z((C) => a("select"), ["stop"])),
       onKeydown: [
-        n[2] || (n[2] = B($((f) => a("select"), ["stop"]), ["enter"])),
-        n[3] || (n[3] = B($((f) => a("select"), ["prevent", "stop"]), ["space"])),
-        n[4] || (n[4] = B($((f) => a("navegar", "anterior"), ["prevent", "stop"]), ["left"])),
-        n[5] || (n[5] = B($((f) => a("navegar", "anterior"), ["prevent", "stop"]), ["up"])),
-        n[6] || (n[6] = B($((f) => a("navegar", "siguiente"), ["prevent", "stop"]), ["right"])),
-        n[7] || (n[7] = B($((f) => a("navegar", "siguiente"), ["prevent", "stop"]), ["down"])),
-        n[8] || (n[8] = B($((f) => a("navegar", "primera"), ["prevent", "stop"]), ["home"])),
-        n[9] || (n[9] = B($((f) => a("navegar", "ultima"), ["prevent", "stop"]), ["end"])),
-        n[10] || (n[10] = B($((f) => a("mover", -1), ["alt", "prevent", "stop"]), ["left"])),
-        n[11] || (n[11] = B($((f) => a("mover", -1), ["alt", "prevent", "stop"]), ["up"])),
-        n[12] || (n[12] = B($((f) => a("mover", 1), ["alt", "prevent", "stop"]), ["right"])),
-        n[13] || (n[13] = B($((f) => a("mover", 1), ["alt", "prevent", "stop"]), ["down"]))
+        r[6] || (r[6] = D(z((C) => a("select"), ["stop"]), ["enter"])),
+        r[7] || (r[7] = D(z((C) => a("select"), ["prevent", "stop"]), ["space"])),
+        r[8] || (r[8] = D(z((C) => a("navegar", "anterior"), ["prevent", "stop"]), ["left"])),
+        r[9] || (r[9] = D(z((C) => a("navegar", "anterior"), ["prevent", "stop"]), ["up"])),
+        r[10] || (r[10] = D(z((C) => a("navegar", "siguiente"), ["prevent", "stop"]), ["right"])),
+        r[11] || (r[11] = D(z((C) => a("navegar", "siguiente"), ["prevent", "stop"]), ["down"])),
+        r[12] || (r[12] = D(z((C) => a("navegar", "primera"), ["prevent", "stop"]), ["home"])),
+        r[13] || (r[13] = D(z((C) => a("navegar", "ultima"), ["prevent", "stop"]), ["end"])),
+        r[14] || (r[14] = D(z((C) => a("mover", -1), ["alt", "prevent", "stop"]), ["left"])),
+        r[15] || (r[15] = D(z((C) => a("mover", -1), ["alt", "prevent", "stop"]), ["up"])),
+        r[16] || (r[16] = D(z((C) => a("mover", 1), ["alt", "prevent", "stop"]), ["right"])),
+        r[17] || (r[17] = D(z((C) => a("mover", 1), ["alt", "prevent", "stop"]), ["down"])),
+        r[18] || (r[18] = D(z((C) => P.value && a("close"), ["prevent", "stop"]), ["delete"]))
       ],
-      onAuxclick: $(M, ["stop"]),
-      onContextmenu: I,
-      onPointerdown: j,
-      onPointermove: x,
-      onPointerup: T,
-      onPointerleave: T,
-      onMouseenter: n[14] || (n[14] = (f) => r.value = !0),
-      onMouseleave: n[15] || (n[15] = (f) => r.value = !1)
+      onAuxclick: z(pe, ["stop"]),
+      onContextmenu: xe,
+      onPointerdown: ye,
+      onPointermove: he,
+      onPointerup: U,
+      onPointerleave: U,
+      onMouseenter: ve,
+      onMouseleave: r[19] || (r[19] = (C) => m.value = !1),
+      onFocus: ge,
+      onBlur: r[20] || (r[20] = (C) => v.value = !1)
     }, [
-      e.tab.icon ? (l(), P(A, {
+      e.tab.icon ? (l(), F(M, {
         key: 0,
         name: e.tab.icon,
         size: 16,
         class: "shrink-0"
-      }, null, 8, ["name"])) : v("", !0),
-      h("span", ut, k(e.tab.label), 1),
-      O.value ? (l(), o("span", ct)) : L.value ? (l(), o("button", {
-        key: 2,
+      }, null, 8, ["name"])) : O(o) ? (l(), n("span", Ct, w(R.value), 1)) : f("", !0),
+      O(o) ? f("", !0) : (l(), n("span", zt, w(e.tab.label), 1)),
+      g.value ? (l(), n("span", {
+        key: 3,
+        class: d(["size-2 shrink-0 rounded-full bg-current", O(o) ? "absolute right-0.5 top-0.5" : ""]),
+        "aria-hidden": "true"
+      }, null, 2)) : p.value && !O(o) ? (l(), n("button", {
+        key: 4,
         type: "button",
         class: "flex size-4 shrink-0 items-center justify-center rounded-corner-sm hover:bg-ui-surface",
         title: e.closeLabel,
-        "aria-label": `${e.closeLabel}: ${E.value}`,
-        onClick: n[0] || (n[0] = $((f) => a("close"), ["stop"]))
+        "aria-label": `${e.closeLabel}: ${j.value}`,
+        onClick: r[0] || (r[0] = z((C) => a("close"), ["stop"]))
       }, [
-        D(A, {
+        V(M, {
           name: "gtk-close",
           type: "symbol",
           size: 12
         })
-      ], 8, dt)) : v("", !0)
-    ], 42, rt));
+      ], 8, Lt)) : f("", !0),
+      (l(), F(Me, { to: "body" }, [
+        V(Ie, {
+          "enter-active-class": "transition duration-150 ease-out",
+          "enter-from-class": "opacity-0 scale-95",
+          "leave-active-class": "transition duration-100 ease-in",
+          "leave-to-class": "opacity-0 scale-95"
+        }, {
+          default: W(() => [
+            x.value ? (l(), n("div", {
+              key: 0,
+              class: d(["flex items-center gap-2 rounded-corner border border-ui-border bg-ui-surface/95 px-3 py-1 text-sm shadow-lg", e.active ? "font-bold" : ""]),
+              ref_key: "desplegadoRef",
+              ref: u,
+              style: H(B.value),
+              onMouseenter: r[2] || (r[2] = (C) => I.value = !0),
+              onMouseleave: r[3] || (r[3] = (C) => I.value = !1),
+              onFocusin: r[4] || (r[4] = (C) => I.value = !0),
+              onFocusout: be
+            }, [
+              h("span", Bt, w(e.tab.label), 1),
+              e.tab.dirty ? (l(), n("span", St)) : f("", !0),
+              P.value ? (l(), n("button", {
+                key: 1,
+                type: "button",
+                class: "flex size-4 shrink-0 items-center justify-center rounded-corner-sm hover:bg-ui-surface",
+                title: e.closeLabel,
+                "aria-label": `${e.closeLabel}: ${j.value}`,
+                onClick: r[1] || (r[1] = z((C) => a("close"), ["stop"]))
+              }, [
+                V(M, {
+                  name: "gtk-close",
+                  type: "symbol",
+                  size: 12
+                })
+              ], 8, At)) : f("", !0)
+            ], 38)) : f("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 42, wt));
   }
-}), mt = ["aria-orientation"], bt = ["draggable", "onDragstart", "onDragover", "onDrop"], vt = ["title", "aria-label"], gt = /* @__PURE__ */ w({
+}), Dt = ["aria-orientation"], Et = ["draggable", "onDragstart", "onDragover", "onDrop"], Mt = ["title", "aria-label"], It = /* @__PURE__ */ L({
   __name: "TabBar",
   props: {
     tabs: {},
@@ -623,102 +705,102 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     fixedOrder: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "select", "close", "new", "reorder", "menu"],
-  setup(e, { emit: i }) {
-    const t = e, a = i, { vertical: s } = R(), r = S(null), c = S(0), u = S(null), b = S(null);
-    function g(d) {
-      a("update:modelValue", d), a("select", d);
+  setup(e, { emit: s }) {
+    const t = e, a = s, { vertical: o } = G(), i = S(null), c = S(0), u = S(null), m = S(null);
+    function v(b) {
+      a("update:modelValue", b), a("select", b);
     }
-    async function E(d, n) {
-      const f = t.tabs.length - 1;
-      if (f < 0) return;
-      const p = n === "primera" ? 0 : n === "ultima" ? f : n === "anterior" ? (d - 1 + t.tabs.length) % t.tabs.length : (d + 1) % t.tabs.length;
-      c.value = p, await ae(), r.value?.querySelectorAll('[role="tab"]')?.[p]?.focus();
+    async function I(b, g) {
+      const p = t.tabs.length - 1;
+      if (p < 0) return;
+      const x = g === "primera" ? 0 : g === "ultima" ? p : g === "anterior" ? (b - 1 + t.tabs.length) % t.tabs.length : (b + 1) % t.tabs.length;
+      c.value = x, await re(), i.value?.querySelectorAll('[role="tab"]')?.[x]?.focus();
     }
-    function O(d, n) {
+    function N(b, g) {
       if (t.fixedOrder) return;
-      const f = d + n;
-      if (f < 0 || f >= t.tabs.length) return;
-      const p = [...t.tabs], [C] = p.splice(d, 1);
-      C && (p.splice(f, 0, C), c.value = f, a("reorder", p));
+      const p = b + g;
+      if (p < 0 || p >= t.tabs.length) return;
+      const x = [...t.tabs], [B] = x.splice(b, 1);
+      B && (x.splice(p, 0, B), c.value = p, a("reorder", x));
     }
-    function L(d) {
-      const n = r.value;
-      if (!n) return;
-      const f = d.deltaY || d.deltaX || 0, p = s.value ? n.scrollTop : n.scrollLeft;
-      s.value ? n.scrollTop += f : n.scrollLeft += f, (s.value ? n.scrollTop : n.scrollLeft) !== p && d.preventDefault();
+    function A(b) {
+      const g = i.value;
+      if (!g) return;
+      const p = b.deltaY || b.deltaX || 0, x = o.value ? g.scrollTop : g.scrollLeft;
+      o.value ? g.scrollTop += p : g.scrollLeft += p, (o.value ? g.scrollTop : g.scrollLeft) !== x && b.preventDefault();
     }
-    function T(d, n) {
-      t.fixedOrder || (u.value = d, n.dataTransfer?.setData("text/plain", String(d)), n.dataTransfer && (n.dataTransfer.effectAllowed = "move"));
+    function E(b, g) {
+      t.fixedOrder || (u.value = b, g.dataTransfer?.setData("text/plain", String(b)), g.dataTransfer && (g.dataTransfer.effectAllowed = "move"));
     }
-    function j(d, n) {
-      t.fixedOrder || u.value === null || (n.preventDefault(), b.value = d, n.dataTransfer && (n.dataTransfer.dropEffect = "move"));
+    function P(b, g) {
+      t.fixedOrder || u.value === null || (g.preventDefault(), m.value = b, g.dataTransfer && (g.dataTransfer.dropEffect = "move"));
     }
-    function x(d) {
-      const n = u.value;
-      if (M(), t.fixedOrder || n === null || n === d) return;
-      const f = [...t.tabs], [p] = f.splice(n, 1);
-      p && (f.splice(d, 0, p), a("reorder", f));
+    function k(b) {
+      const g = u.value;
+      if (j(), t.fixedOrder || g === null || g === b) return;
+      const p = [...t.tabs], [x] = p.splice(g, 1);
+      x && (p.splice(b, 0, x), a("reorder", p));
     }
-    function M() {
-      u.value = null, b.value = null;
+    function j() {
+      u.value = null, m.value = null;
     }
-    const I = y(
-      () => s.value ? "flex h-full w-full flex-col items-stretch gap-1 overflow-y-auto overflow-x-hidden" : "flex items-center gap-1 overflow-x-auto overflow-y-hidden"
+    const R = y(
+      () => o.value ? "flex h-full flex-col items-center gap-1 overflow-y-auto overflow-x-hidden" : "flex items-center gap-1 overflow-x-auto overflow-y-hidden"
     );
-    return (d, n) => (l(), o("div", {
-      class: m(["flex min-h-0 min-w-0 items-center gap-1", V(s) ? "w-full flex-col" : "h-full"]),
+    return (b, g) => (l(), n("div", {
+      class: d(["flex min-h-0 min-w-0 items-center gap-1", O(o) ? "w-full flex-col" : "h-full"]),
       role: "tablist",
-      "aria-orientation": V(s) ? "vertical" : "horizontal"
+      "aria-orientation": O(o) ? "vertical" : "horizontal"
     }, [
       h("div", {
         ref_key: "carril",
-        ref: r,
-        class: m(I.value),
-        onWheel: L
+        ref: i,
+        class: d(R.value),
+        onWheel: A
       }, [
-        (l(!0), o(F, null, W(e.tabs, (f, p) => (l(), o("div", {
-          key: f.id,
-          class: m(["transition-opacity", [
-            u.value === p ? "opacity-40" : "",
-            b.value === p && u.value !== p ? "ring-2 ring-secondary rounded-corner" : ""
+        (l(!0), n(X, null, Y(e.tabs, (p, x) => (l(), n("div", {
+          key: p.id,
+          class: d(["transition-opacity", [
+            u.value === x ? "opacity-40" : "",
+            m.value === x && u.value !== x ? "ring-2 ring-secondary rounded-corner" : ""
           ]]),
           draggable: !e.fixedOrder,
-          onDragstart: (C) => T(p, C),
-          onDragover: (C) => j(p, C),
-          onDrop: $((C) => x(p), ["prevent"]),
-          onDragend: M
+          onDragstart: (B) => E(x, B),
+          onDragover: (B) => P(x, B),
+          onDrop: z((B) => k(x), ["prevent"]),
+          onDragend: j
         }, [
-          D(ie, {
-            tab: f,
-            active: f.id === e.modelValue,
+          V(me, {
+            tab: p,
+            active: p.id === e.modelValue,
             "close-label": e.closeLabel,
             "dirty-label": e.dirtyLabel,
-            tabindex: p === c.value ? 0 : -1,
-            onSelect: (C) => g(f.id),
-            onClose: (C) => a("close", f.id),
-            onMenu: (C) => a("menu", { id: f.id, ...C }),
-            onNavegar: (C) => E(p, C),
-            onMover: (C) => O(p, C)
+            tabindex: x === c.value ? 0 : -1,
+            onSelect: (B) => v(p.id),
+            onClose: (B) => a("close", p.id),
+            onMenu: (B) => a("menu", { id: p.id, ...B }),
+            onNavegar: (B) => I(x, B),
+            onMover: (B) => N(x, B)
           }, null, 8, ["tab", "active", "close-label", "dirty-label", "tabindex", "onSelect", "onClose", "onMenu", "onNavegar", "onMover"])
-        ], 42, bt))), 128))
+        ], 42, Et))), 128))
       ], 34),
-      e.newLabel ? (l(), o("button", {
+      e.newLabel ? (l(), n("button", {
         key: 0,
         type: "button",
         class: "flex size-7 shrink-0 items-center justify-center rounded-corner border border-ui-border bg-ui-bg/80 hover:bg-ui-surface/70",
         title: e.newLabel,
         "aria-label": e.newLabel,
-        onClick: n[0] || (n[0] = (f) => a("new"))
+        onClick: g[0] || (g[0] = (p) => a("new"))
       }, [
-        D(A, {
+        V(M, {
           name: "gtk-add",
           type: "symbol",
           size: 14
         })
-      ], 8, vt)) : v("", !0)
-    ], 10, mt));
+      ], 8, Mt)) : f("", !0)
+    ], 10, Dt));
   }
-}), ht = { class: "relative flex shrink-0 items-center" }, yt = ["title", "aria-label", "aria-expanded"], xt = ["value", "placeholder", "aria-label"], pt = /* @__PURE__ */ w({
+}), Vt = { class: "relative flex shrink-0 items-center" }, jt = ["title", "aria-label", "aria-expanded"], Ot = ["value", "placeholder", "aria-label"], Pt = /* @__PURE__ */ L({
   __name: "BarSearch",
   props: {
     modelValue: { default: "" },
@@ -727,68 +809,68 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     collapsed: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "search", "open", "close"],
-  setup(e, { emit: i }) {
-    const t = e, a = i, { vertical: s, posicion: r } = R(), c = S(!1), u = S(null), b = y(() => s.value || t.collapsed), g = y(() => !b.value || c.value), E = y(() => {
-      if (!b.value) return "";
-      const x = "absolute z-40 w-64 rounded-corner border border-ui-border bg-ui-surface/95 p-1 shadow-lg";
-      return r.value === "left" ? `${x} left-full top-0 ml-1` : r.value === "right" ? `${x} right-full top-0 mr-1` : r.value === "bottom" ? `${x} bottom-full right-0 mb-1` : `${x} top-full right-0 mt-1`;
+  setup(e, { emit: s }) {
+    const t = e, a = s, { vertical: o, posicion: i } = G(), c = S(!1), u = S(null), m = y(() => o.value || t.collapsed), v = y(() => !m.value || c.value), I = y(() => {
+      if (!m.value) return "";
+      const k = "absolute z-40 w-64 rounded-corner border border-ui-border bg-ui-surface/95 p-1 shadow-lg";
+      return i.value === "left" ? `${k} left-full top-0 ml-1` : i.value === "right" ? `${k} right-full top-0 mr-1` : i.value === "bottom" ? `${k} bottom-full right-0 mb-1` : `${k} top-full right-0 mt-1`;
     });
-    async function O() {
-      c.value = !0, a("open"), await ae(), u.value?.focus();
+    async function N() {
+      c.value = !0, a("open"), await re(), u.value?.focus();
     }
-    function L() {
+    function A() {
       c.value && (c.value = !1, a("close"));
     }
-    function T(x) {
-      a("update:modelValue", x.target.value);
+    function E(k) {
+      a("update:modelValue", k.target.value);
     }
-    function j() {
+    function P() {
       a("search", t.modelValue);
     }
-    return (x, M) => (l(), o("div", ht, [
-      b.value ? (l(), o("button", {
+    return (k, j) => (l(), n("div", Vt, [
+      m.value ? (l(), n("button", {
         key: 0,
         type: "button",
         class: "flex size-7 items-center justify-center rounded-corner border border-ui-border bg-ui-bg/80 hover:bg-ui-surface/70",
         title: e.label,
         "aria-label": e.label,
         "aria-expanded": c.value,
-        onMousedown: M[0] || (M[0] = $(() => {
+        onMousedown: j[0] || (j[0] = z(() => {
         }, ["prevent"])),
-        onClick: M[1] || (M[1] = (I) => c.value ? L() : O())
+        onClick: j[1] || (j[1] = (R) => c.value ? A() : N())
       }, [
-        D(A, {
+        V(M, {
           name: "system-search",
           type: "symbol",
           size: 14
         })
-      ], 40, yt)) : v("", !0),
-      g.value ? (l(), o("div", {
+      ], 40, jt)) : f("", !0),
+      v.value ? (l(), n("div", {
         key: 1,
-        class: m(E.value)
+        class: d(I.value)
       }, [
         h("input", {
           ref_key: "campo",
           ref: u,
           type: "search",
-          class: m(["w-full rounded-corner border border-ui-border bg-ui-bg/80 px-2 py-1 text-sm outline-none focus:border-ui-border-strong", b.value ? "" : "w-48"]),
+          class: d(["w-full rounded-corner border border-ui-border bg-ui-bg/80 px-2 py-1 text-sm outline-none focus:border-ui-border-strong", m.value ? "" : "w-48"]),
           value: e.modelValue,
           placeholder: e.placeholder || e.label,
           "aria-label": e.label,
-          onInput: T,
+          onInput: E,
           onKeydown: [
-            B(j, ["enter"]),
-            B(L, ["esc"])
+            D(P, ["enter"]),
+            D(A, ["esc"])
           ],
-          onBlur: L
-        }, null, 42, xt)
-      ], 2)) : v("", !0)
+          onBlur: A
+        }, null, 42, Ot)
+      ], 2)) : f("", !0)
     ]));
   }
-}), kt = ["type", "disabled"], wt = {
+}), Nt = ["type", "disabled"], Rt = {
   key: 0,
   class: "w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"
-}, $t = ["src", "alt"], Ct = { key: 2 }, zt = ["src", "alt"], Lt = /* @__PURE__ */ w({
+}, Ft = ["src", "alt"], Wt = { key: 2 }, Ut = ["src", "alt"], Gt = /* @__PURE__ */ L({
   __name: "ActionButton",
   props: {
     label: {},
@@ -806,52 +888,52 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     preventDefault: { type: Boolean, default: !1 }
   },
   emits: ["click"],
-  setup(e, { emit: i }) {
-    const t = e, a = i, s = {
+  setup(e, { emit: s }) {
+    const t = e, a = s, o = {
       primary: "bg-primary dark:bg-primary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-primary/90 dark:hover:bg-primary-dark/90",
       secondary: "bg-secondary dark:bg-secondary-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-secondary/80 dark:hover:bg-secondary-dark/80",
       danger: "bg-status-error dark:bg-status-error-dark text-tx-on-primary dark:text-tx-on-primary-dark hover:bg-status-error/90 dark:hover:bg-status-error-dark/90"
-    }, r = {
+    }, i = {
       sm: "px-2 py-1 text-xs",
       md: "px-3 py-1 text-sm",
       lg: "px-4 py-2 text-base"
     }, c = (u) => {
       t.stopPropagation && u.stopPropagation(), t.preventDefault && u.preventDefault(), !t.disabled && !t.loading && a("click");
     };
-    return (u, b) => (l(), o("button", {
+    return (u, m) => (l(), n("button", {
       type: t.type,
       onClick: c,
-      class: m(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2", [
-        s[t.variant],
-        r[t.size],
+      class: d(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2", [
+        o[t.variant],
+        i[t.size],
         t.fullWidth ? "w-full" : "",
         t.iconSrc && !t.label ? "px-2 py-2" : "",
         e.customClass
       ]]),
       disabled: t.disabled || t.loading
     }, [
-      e.loading ? (l(), o("span", wt)) : v("", !0),
-      t.iconSrc && !t.iconRight ? (l(), o("img", {
+      e.loading ? (l(), n("span", Rt)) : f("", !0),
+      t.iconSrc && !t.iconRight ? (l(), n("img", {
         key: 1,
         src: t.iconSrc,
         alt: t.iconAlt || t.label,
         class: "w-4 h-4"
-      }, null, 8, $t)) : v("", !0),
-      t.label ? (l(), o("span", Ct, k(t.label), 1)) : v("", !0),
-      t.iconSrc && t.iconRight ? (l(), o("img", {
+      }, null, 8, Ft)) : f("", !0),
+      t.label ? (l(), n("span", Wt, w(t.label), 1)) : f("", !0),
+      t.iconSrc && t.iconRight ? (l(), n("img", {
         key: 3,
         src: t.iconSrc,
         alt: t.iconAlt || t.label,
         class: "w-4 h-4"
-      }, null, 8, zt)) : v("", !0)
-    ], 10, kt));
+      }, null, 8, Ut)) : f("", !0)
+    ], 10, Nt));
   }
-}), U = (e, i) => {
+}), K = (e, s) => {
   const t = e.__vccOpts || e;
-  for (const [a, s] of i)
-    t[a] = s;
+  for (const [a, o] of s)
+    t[a] = o;
   return t;
-}, Bt = /* @__PURE__ */ U(Lt, [["__scopeId", "data-v-2eaf6e27"]]), St = { class: "text-base font-semibold m-0 text-primary dark:text-primary-dark" }, At = /* @__PURE__ */ w({
+}, Xt = /* @__PURE__ */ K(Gt, [["__scopeId", "data-v-2eaf6e27"]]), Yt = { class: "text-base font-semibold m-0 text-primary dark:text-primary-dark" }, Kt = /* @__PURE__ */ L({
   __name: "ConfigSection",
   props: {
     title: {},
@@ -859,26 +941,26 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     customClass: { default: () => ({}) }
   },
   setup(e) {
-    return (i, t) => (l(), o("div", {
-      class: m(["flex flex-col gap-4 p-4 background rounded-corner", e.customClass])
+    return (s, t) => (l(), n("div", {
+      class: d(["flex flex-col gap-4 p-4 background rounded-corner", e.customClass])
     }, [
-      h("h3", St, k(e.icon ? `${e.icon} ${e.title}` : e.title), 1),
-      z(i.$slots, "default", {}, void 0, !0)
+      h("h3", Yt, w(e.icon ? `${e.icon} ${e.title}` : e.title), 1),
+      T(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Tt = /* @__PURE__ */ U(At, [["__scopeId", "data-v-45bd4eab"]]), Dt = { class: "flex items-center gap-3 flex-1 min-w-0" }, Mt = ["src", "alt"], Et = { class: "min-w-0" }, It = { class: "font-semibold truncate" }, Vt = {
+}), qt = /* @__PURE__ */ K(Kt, [["__scopeId", "data-v-45bd4eab"]]), Ht = { class: "flex items-center gap-3 flex-1 min-w-0" }, Jt = ["src", "alt"], Qt = { class: "min-w-0" }, Zt = { class: "font-semibold truncate" }, _t = {
   key: 0,
   class: "text-xs text-gray-400 truncate"
-}, Ot = {
+}, ea = {
   key: 1,
   class: "text-xs text-gray-400 truncate"
-}, jt = {
+}, ta = {
   key: 2,
   class: "text-xs text-gray-400 flex gap-2 mt-1"
-}, Pt = {
+}, aa = {
   key: 1,
   class: "w-2 h-2 rounded-full bg-green-500"
-}, Nt = /* @__PURE__ */ w({
+}, la = /* @__PURE__ */ L({
   __name: "DeviceCard",
   props: {
     icon: {},
@@ -894,40 +976,40 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     clickable: { type: Boolean, default: !1 }
   },
   emits: ["action", "click"],
-  setup(e, { emit: i }) {
-    const t = i, a = () => {
+  setup(e, { emit: s }) {
+    const t = s, a = () => {
       t("action");
-    }, s = () => {
+    }, o = () => {
       t("click");
     };
-    return (r, c) => (l(), o("div", {
-      class: m(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4", [{ "border-l-4 border-green-500": e.isConnected }, e.customClass]]),
-      onClick: s
+    return (i, c) => (l(), n("div", {
+      class: d(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4", [{ "border-l-4 border-green-500": e.isConnected }, e.customClass]]),
+      onClick: o
     }, [
-      h("div", Dt, [
+      h("div", Ht, [
         h("img", {
           src: e.icon,
           alt: e.title,
           class: "h-7 w-7 shrink-0"
-        }, null, 8, Mt),
-        h("div", Et, [
-          h("div", It, k(e.title), 1),
-          e.subtitle ? (l(), o("div", Vt, k(e.subtitle), 1)) : v("", !0),
-          e.metadata ? (l(), o("div", Ot, k(e.metadata), 1)) : v("", !0),
-          e.extraInfo && e.extraInfo.length > 0 ? (l(), o("div", jt, [
-            (l(!0), o(F, null, W(e.extraInfo, (u, b) => (l(), o("span", { key: b }, k(u), 1))), 128))
-          ])) : v("", !0)
+        }, null, 8, Jt),
+        h("div", Qt, [
+          h("div", Zt, w(e.title), 1),
+          e.subtitle ? (l(), n("div", _t, w(e.subtitle), 1)) : f("", !0),
+          e.metadata ? (l(), n("div", ea, w(e.metadata), 1)) : f("", !0),
+          e.extraInfo && e.extraInfo.length > 0 ? (l(), n("div", ta, [
+            (l(!0), n(X, null, Y(e.extraInfo, (u, m) => (l(), n("span", { key: m }, w(u), 1))), 128))
+          ])) : f("", !0)
         ])
       ]),
-      e.showActionButton ? (l(), o("button", {
+      e.showActionButton ? (l(), n("button", {
         key: 0,
         class: "bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",
-        onClick: $(a, ["stop"])
-      }, k(e.actionLabel), 1)) : v("", !0),
-      e.showStatusIndicator && e.isConnected ? (l(), o("div", Pt)) : v("", !0)
+        onClick: z(a, ["stop"])
+      }, w(e.actionLabel), 1)) : f("", !0),
+      e.showStatusIndicator && e.isConnected ? (l(), n("div", aa)) : f("", !0)
     ], 2));
   }
-}), Rt = ["for"], Ft = /* @__PURE__ */ w({
+}), na = ["for"], oa = /* @__PURE__ */ L({
   __name: "FormGroup",
   props: {
     label: {},
@@ -936,45 +1018,45 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     labelClass: { default: () => ({}) }
   },
   setup(e) {
-    return (i, t) => (l(), o("div", {
-      class: m(["flex flex-col gap-2", e.customClass])
+    return (s, t) => (l(), n("div", {
+      class: d(["flex flex-col gap-2", e.customClass])
     }, [
-      e.label ? (l(), o("label", {
+      e.label ? (l(), n("label", {
         key: 0,
         for: e.htmlFor,
-        class: m(["text-sm font-medium text-primary dark:text-primary-dark", e.labelClass])
-      }, k(e.label), 11, Rt)) : v("", !0),
-      z(i.$slots, "default", {}, void 0, !0)
+        class: d(["text-sm font-medium text-primary dark:text-primary-dark", e.labelClass])
+      }, w(e.label), 11, na)) : f("", !0),
+      T(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Wt = /* @__PURE__ */ U(Ft, [["__scopeId", "data-v-c0d9d9cb"]]), Ut = /* @__PURE__ */ w({
+}), sa = /* @__PURE__ */ K(oa, [["__scopeId", "data-v-c0d9d9cb"]]), ia = /* @__PURE__ */ L({
   __name: "ListCard",
   props: {
     clickable: { type: Boolean, default: !1 },
     customClass: { default: () => ({}) }
   },
   emits: ["click"],
-  setup(e, { emit: i }) {
-    const t = e, a = i, s = () => {
+  setup(e, { emit: s }) {
+    const t = e, a = s, o = () => {
       t.clickable && a("click");
     };
-    return (r, c) => (l(), o("div", {
-      class: m([
+    return (i, c) => (l(), n("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": t.clickable
         },
         e.customClass
       ]),
-      onClick: s
+      onClick: o
     }, [
-      z(r.$slots, "default", {}, void 0, !0)
+      T(i.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Gt = /* @__PURE__ */ U(Ut, [["__scopeId", "data-v-f86d47da"]]), Xt = { class: "background rounded-corner flex flex-row items-center gap-2 justify-between w-full h-auto p-4 transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80" }, Yt = ["src", "alt", "title"], Kt = {
+}), ra = /* @__PURE__ */ K(ia, [["__scopeId", "data-v-f86d47da"]]), ua = { class: "background rounded-corner flex flex-row items-center gap-2 justify-between w-full h-auto p-4 transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80" }, ca = ["src", "alt", "title"], da = {
   key: 1,
   class: "w-8 h-8 flex items-center justify-center"
-}, qt = ["src", "alt"], Ht = ["min", "max", "value"], Jt = /* @__PURE__ */ w({
+}, fa = ["src", "alt"], ma = ["min", "max", "value"], ba = /* @__PURE__ */ L({
   __name: "SliderControl",
   props: {
     icon: {},
@@ -988,19 +1070,19 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     getPercentageClass: { type: Function, default: () => "" }
   },
   emits: ["update:modelValue", "buttonClick"],
-  setup(e, { emit: i }) {
-    const t = e, a = i, s = y(() => {
+  setup(e, { emit: s }) {
+    const t = e, a = s, o = y(() => {
       if (t.max <= t.min) return 0;
-      const b = t.max - t.min, g = t.modelValue - t.min;
-      return Math.round(g / b * 100);
-    }), r = y(() => t.getPercentageClass ? t.getPercentageClass(s.value) : ""), c = (b) => {
-      const g = b.target;
-      a("update:modelValue", Number(g.value));
+      const m = t.max - t.min, v = t.modelValue - t.min;
+      return Math.round(v / m * 100);
+    }), i = y(() => t.getPercentageClass ? t.getPercentageClass(o.value) : ""), c = (m) => {
+      const v = m.target;
+      a("update:modelValue", Number(v.value));
     }, u = () => {
       a("buttonClick");
     };
-    return (b, g) => (l(), o("div", Xt, [
-      e.showButton ? (l(), o("button", {
+    return (m, v) => (l(), n("div", ua, [
+      e.showButton ? (l(), n("button", {
         key: 0,
         onClick: u,
         class: "w-8 h-8 flex items-center justify-center rounded-corner transition-all duration-200 hover:bg-ui-surface/80 dark:hover:bg-ui-surface-dark/80 hover:scale-110 active:scale-95"
@@ -1009,14 +1091,14 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
           src: e.icon,
           alt: e.alt,
           title: e.tooltip,
-          class: m(["w-6 h-6 transition-all duration-200", e.iconClass])
-        }, null, 10, Yt)
-      ])) : (l(), o("div", Kt, [
+          class: d(["w-6 h-6 transition-all duration-200", e.iconClass])
+        }, null, 10, ca)
+      ])) : (l(), n("div", da, [
         h("img", {
           src: e.icon,
           alt: e.alt,
           class: "w-6 h-6 transition-all duration-200"
-        }, null, 8, qt)
+        }, null, 8, fa)
       ])),
       h("input", {
         type: "range",
@@ -1025,13 +1107,13 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
         value: e.modelValue,
         onInput: c,
         class: "flex-1 transition-all duration-200 hover:scale-105"
-      }, null, 40, Ht),
+      }, null, 40, ma),
       h("span", {
-        class: m(["w-12 text-right transition-all duration-200 font-medium", r.value])
-      }, k(s.value) + "% ", 3)
+        class: d(["w-12 text-right transition-all duration-200 font-medium", i.value])
+      }, w(o.value) + "% ", 3)
     ]));
   }
-}), Qt = ["disabled"], Zt = /* @__PURE__ */ w({
+}), va = ["disabled"], ga = /* @__PURE__ */ L({
   __name: "SwitchToggle",
   props: {
     isOn: { type: Boolean },
@@ -1042,15 +1124,15 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     customClass: { default: "" }
   },
   emits: ["toggle"],
-  setup(e, { emit: i }) {
-    const t = e, a = i, s = () => {
+  setup(e, { emit: s }) {
+    const t = e, a = s, o = () => {
       a("toggle", !t.isOn);
     };
-    return (r, c) => (l(), o("button", {
+    return (i, c) => (l(), n("button", {
       type: "button",
-      onClick: s,
+      onClick: o,
       disabled: e.disabled,
-      class: m([
+      class: d([
         "relative inline-flex items-center rounded-full transition-colors",
         e.size === "small" ? "h-6 w-11" : "h-7 w-12",
         e.isOn ? e.activeClass : e.inactiveClass,
@@ -1059,15 +1141,15 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
       ])
     }, [
       h("span", {
-        class: m([
+        class: d([
           "inline-block transform rounded-full bg-white shadow transition-transform",
           e.size === "small" ? "h-4 w-4" : "h-6 w-6",
           e.isOn ? e.size === "small" ? "translate-x-6" : "translate-x-5" : "translate-x-1"
         ])
       }, null, 2)
-    ], 10, Qt));
+    ], 10, va));
   }
-}), _t = ["disabled"], ea = ["src", "alt", "title"], ta = /* @__PURE__ */ w({
+}), ya = ["disabled"], ha = ["src", "alt", "title"], pa = /* @__PURE__ */ L({
   __name: "ToggleControl",
   props: {
     icon: {},
@@ -1079,13 +1161,13 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     customClass: { default: () => ({}) }
   },
   emits: ["click"],
-  setup(e, { emit: i }) {
-    const t = i, a = () => {
+  setup(e, { emit: s }) {
+    const t = s, a = () => {
       t("click");
     };
-    return (s, r) => (l(), o("button", {
+    return (o, i) => (l(), n("button", {
       onClick: a,
-      class: m(["p-2 rounded-corner 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", {
+      class: d(["p-2 rounded-corner 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": e.isLoading,
         "ring-2 ring-primary dark:ring-primary-dark": e.isActive,
         "opacity-60": !e.isActive,
@@ -1097,19 +1179,19 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
         src: e.icon,
         alt: e.alt,
         title: e.tooltip,
-        class: m(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10", {
+        class: d(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10", {
           "animate-spin": e.isLoading,
           "filter brightness-75": !e.isActive,
           "drop-shadow-lg": e.isActive,
           ...e.iconClass
         }])
-      }, null, 10, ea)
-    ], 10, _t));
+      }, null, 10, ha)
+    ], 10, ya));
   }
-}), aa = ["title"], la = ["src", "alt"], na = {
+}), xa = ["title"], ka = ["src", "alt"], $a = {
   key: 0,
   class: "absolute bottom-1 right-1 bg-primary dark:bg-primary-dark text-white text-xs rounded-full w-4 h-4 flex items-center justify-center font-bold animate-bounce"
-}, oa = /* @__PURE__ */ w({
+}, wa = /* @__PURE__ */ L({
   __name: "TrayIconButton",
   props: {
     icon: {},
@@ -1123,91 +1205,91 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
     customTooltipText: { default: "" }
   },
   emits: ["click"],
-  setup(e, { emit: i }) {
-    const t = i, a = S(!1), s = () => {
+  setup(e, { emit: s }) {
+    const t = s, a = S(!1), o = () => {
       t("click");
     };
-    return (r, c) => (l(), o("div", {
-      class: m(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300", e.customClass]),
+    return (i, c) => (l(), n("div", {
+      class: d(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300", e.customClass]),
       title: e.tooltip,
-      onClick: s,
+      onClick: o,
       onMouseenter: c[0] || (c[0] = (u) => a.value = !0),
       onMouseleave: c[1] || (c[1] = (u) => a.value = !1)
     }, [
       h("img", {
         src: e.icon,
         alt: e.alt,
-        class: m(["m-auto h-5.5 w-auto transition-all duration-300", e.iconClass])
-      }, null, 10, la),
-      e.badge !== null && e.badge > 0 ? (l(), o("div", na, k(e.badge), 1)) : v("", !0),
-      e.showCustomTooltip && e.customTooltipText ? (l(), o("div", {
+        class: d(["m-auto h-5.5 w-auto transition-all duration-300", e.iconClass])
+      }, null, 10, ka),
+      e.badge !== null && e.badge > 0 ? (l(), n("div", $a, w(e.badge), 1)) : f("", !0),
+      e.showCustomTooltip && e.customTooltipText ? (l(), n("div", {
         key: 1,
-        class: m(["absolute top-1 left-1/2 transform -translate-x-1/2 text-xs font-semibold p-1 rounded-corner transition-all duration-300 pointer-events-none background", [
+        class: d(["absolute top-1 left-1/2 transform -translate-x-1/2 text-xs font-semibold p-1 rounded-corner transition-all duration-300 pointer-events-none background", [
           e.tooltipClass,
           {
             "opacity-0 -translate-y-2": !a.value,
             "opacity-100 translate-y-0": a.value
           }
         ]])
-      }, k(e.customTooltipText), 3)) : v("", !0),
-      z(r.$slots, "default")
-    ], 42, aa));
+      }, w(e.customTooltipText), 3)) : f("", !0),
+      T(i.$slots, "default")
+    ], 42, xa));
   }
-}), sa = [
-  Ue,
-  ne,
-  le,
-  qe,
-  A,
-  it,
-  se,
-  oe,
-  gt,
-  ie,
-  pt,
-  Bt,
-  Tt,
-  Nt,
-  Wt,
-  Gt,
-  Jt,
-  Zt,
-  ta,
-  oa
-], da = {
+}), Ca = [
+  nt,
+  ce,
+  ue,
+  ut,
+  M,
+  $t,
+  fe,
+  de,
+  It,
+  me,
+  Pt,
+  Xt,
+  qt,
+  la,
+  sa,
+  ra,
+  ba,
+  ga,
+  pa,
+  wa
+], Aa = {
   install(e) {
-    sa.forEach((i) => {
-      e.component(i.name, i);
+    Ca.forEach((s) => {
+      e.component(s.name, s);
     });
   }
 };
 export {
-  Bt as ActionButton,
-  se as AppBar,
-  pt as BarSearch,
-  H as CLAVE_DE_LA_BARRA,
-  Tt as ConfigSection,
-  Nt as DeviceCard,
-  Wt as FormGroup,
-  Gt as ListCard,
-  He as POSICIONES,
-  qe as SelectField,
-  Ue as SideBar,
-  ne as SideButton,
-  le as SideGroup,
-  Jt as SliderControl,
-  Zt as SwitchToggle,
-  gt as TabBar,
-  ie as TabItem,
-  A as ThemeIcon,
-  ta as ToggleControl,
-  oa as TrayIconButton,
-  oe as WindowControls,
-  it as WindowFrame,
-  da as default,
-  Je as esPosicion,
-  X as orientacionDe,
-  _e as posicionDe,
-  R as usarLaBarra,
-  et as usarLaPosicionDeLaBarra
+  Xt as ActionButton,
+  fe as AppBar,
+  Pt as BarSearch,
+  ee as CLAVE_DE_LA_BARRA,
+  qt as ConfigSection,
+  la as DeviceCard,
+  sa as FormGroup,
+  ra as ListCard,
+  ct as POSICIONES,
+  ut as SelectField,
+  nt as SideBar,
+  ce as SideButton,
+  ue as SideGroup,
+  ba as SliderControl,
+  ga as SwitchToggle,
+  It as TabBar,
+  me as TabItem,
+  M as ThemeIcon,
+  pa as ToggleControl,
+  wa as TrayIconButton,
+  de as WindowControls,
+  $t as WindowFrame,
+  Aa as default,
+  dt as esPosicion,
+  J as orientacionDe,
+  bt as posicionDe,
+  G as usarLaBarra,
+  vt as usarLaPosicionDeLaBarra
 };