@vasakgroup/vue-libvasak 0.4.0 → 0.5.0

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) {
-  const t = S("");
-  let a = null, s = !1, r = 0;
-  async function c() {
-    const u = ++r, b = e.value;
-    if (!b) {
+import { ref as w, onMounted as W, onUnmounted as Me, watch as K, defineComponent as L, toRef as oe, computed as k, createElementBlock as s, unref as P, openBlock as n, normalizeStyle as _, createCommentVNode as g, createElementVNode as $, createVNode as F, toDisplayString as M, normalizeClass as p, renderSlot as S, createBlock as R, onBeforeUnmount as G, Fragment as U, renderList as Y, withCtx as q, mergeModels as Se, useAttrs as Te, useId as Ie, useModel as Oe, withDirectives as de, mergeProps as fe, isRef as Ve, vModelSelect as je, inject as me, provide as te, createTextVNode as Pe, createSlots as Fe, withModifiers as A, withKeys as j, Teleport as be, Transition as ve, nextTick as ae, vShow as Ne, cloneVNode as Re, h as qe, Comment as He, Text as Ue } from "vue";
+import { listen as We } from "@tauri-apps/api/event";
+import { getSymbolSource as Ke, getIconSource as Ge } from "@vasakgroup/plugin-vicons";
+import { getCurrentWindow as Xe } from "@tauri-apps/api/window";
+function Ye(e, l) {
+  const t = w("");
+  let a = null, o = !1, i = 0;
+  async function u() {
+    const r = ++i, f = e.value;
+    if (!f) {
       t.value = "";
       return;
     }
-    const g = i.value === "symbol" ? await ke(b) : await we(b);
-    u === r && (t.value = g);
+    const b = l.value === "symbol" ? await Ke(f) : await Ge(f);
+    r === i && (t.value = b);
   }
-  return Y(async () => {
-    const u = await pe("vicons:theme-changed", c);
-    if (s) {
-      u();
+  return W(async () => {
+    const r = await We("vicons:theme-changed", u);
+    if (o) {
+      r();
       return;
     }
-    a = u, await c();
-  }), re(() => {
-    s = !0, a?.();
-  }), K(e, c), t;
+    a = r, await u();
+  }), Me(() => {
+    o = !0, a?.();
+  }), K(e, u), t;
 }
-const ze = ["src", "alt"], A = /* @__PURE__ */ w({
+const Je = ["src", "alt"], N = /* @__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 l = e, t = Ye(oe(l, "name"), oe(l, "type")), a = k(() => `${l.size}px`);
+    return (o, i) => P(t) ? (n(), s("img", {
       key: 0,
-      src: V(t),
+      src: P(t),
       alt: e.alt,
-      style: Q({ width: a.value, height: a.value }),
+      style: _({ width: a.value, height: a.value }),
       class: "shrink-0 object-contain"
-    }, null, 12, ze)) : (l(), o("span", {
+    }, null, 12, Je)) : (n(), s("span", {
       key: 1,
-      style: Q({ width: a.value, height: a.value }),
+      style: _({ width: a.value, height: a.value }),
       class: "shrink-0"
     }, null, 4));
   }
-}), Le = { class: "flex flex-col gap-2" }, Be = ["aria-expanded"], Se = {
+}), Qe = { class: "flex flex-col gap-2" }, Ze = ["aria-expanded"], _e = {
   key: 1,
   class: "flex flex-col gap-1"
-}, le = /* @__PURE__ */ w({
+}, pe = /* @__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);
+    const l = e, t = w(l.defaultOpen);
     return K(
-      () => i.collapsed,
+      () => l.collapsed,
       (a) => {
         a && (t.value = !0);
       }
-    ), (a, s) => (l(), o("section", Le, [
-      e.collapsed ? v("", !0) : (l(), o("button", {
+    ), (a, o) => (n(), s("section", Qe, [
+      e.collapsed ? g("", !0) : (n(), s("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, {
+        $("span", null, M(e.title), 1),
+        F(N, {
           name: "pan-down-symbolic",
           type: "symbol",
           size: 12,
-          class: m(["transition-transform duration-200", t.value ? "" : "-rotate-90"])
+          class: p(["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, Ze)),
+      t.value || e.collapsed ? (n(), s("div", _e, [
+        S(a.$slots, "default")
+      ])) : g("", !0)
     ]));
   }
-}), Ae = ["title", "aria-label", "disabled", "aria-current"], Te = { key: 1 }, De = {
+}), et = ["title", "aria-label", "disabled", "aria-current"], tt = { key: 1 }, at = {
   key: 0,
   class: "min-w-0 flex-1 truncate font-medium"
-}, Me = {
+}, lt = {
   key: 1,
   class: "rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs"
-}, ne = /* @__PURE__ */ w({
+}, ge = /* @__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 (l, t) => (n(), s("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: p(["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) => l.$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" : ""]),
+      $("span", {
+        class: p(["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 ? (n(), R(N, {
           key: 0,
           name: e.icon,
           size: 20
-        }, null, 8, ["name"])) : (l(), o("span", Te, k(e.label.charAt(0).toUpperCase()), 1))
+        }, null, 8, ["name"])) : (n(), s("span", tt, M(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 ? g("", !0) : (n(), s("span", at, M(e.label), 1)),
+      !e.collapsed && e.badge !== "" ? (n(), s("span", lt, M(e.badge), 1)) : g("", !0)
+    ], 10, et));
   }
-}), Ee = {
+}), nt = {
   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 = {
+}, ot = { class: "flex items-center gap-2" }, it = ["aria-label", "aria-expanded"], st = {
   key: 0,
   class: "min-w-0 flex-1"
-}, je = {
+}, rt = {
   key: 0,
   class: "truncate font-semibold text-sm"
-}, Pe = {
+}, ut = {
   key: 1,
   class: "truncate text-tx-muted text-xs"
-}, Ne = { key: 0 }, Re = {
+}, ct = { key: 0 }, dt = {
   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({
+}, ft = ["aria-label", "aria-expanded"], mt = { class: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-2" }, ie = "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", se = 767, bt = /* @__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));
-    y(() => a.categories.length > 0);
-    function O() {
+  setup(e, { expose: l, emit: t }) {
+    const a = e, o = t, i = w(a.collapsed ?? !1), u = w(!1);
+    let r = null, f = null;
+    const b = k(() => u.value || i.value), C = k(() => !!(a.title || a.subtitle));
+    k(() => a.categories.length > 0);
+    function T() {
       return document.documentElement?.clientWidth || window.innerWidth;
     }
-    function L() {
-      c.value = O() <= _;
+    function E() {
+      u.value = T() <= se;
     }
-    function T() {
-      r.value = !r.value, s("update:collapsed", r.value);
+    function V() {
+      i.value = !i.value, o("update:collapsed", i.value);
     }
-    function j(x) {
-      s("update:modelValue", x), s("change", x);
+    function y(h) {
+      o("update:modelValue", h), o("change", h);
     }
     return K(
       () => a.collapsed,
-      (x) => {
-        x !== void 0 && (r.value = x);
+      (h) => {
+        h !== void 0 && (i.value = h);
       }
-    ), 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"]])
+    ), W(() => {
+      r = window.matchMedia(`(max-width: ${se}px)`), E(), r.addEventListener("change", E), window.addEventListener("resize", E), typeof ResizeObserver < "u" && document.documentElement && (f = new ResizeObserver(E), f.observe(document.documentElement));
+    }), G(() => {
+      r?.removeEventListener("change", E), window.removeEventListener("resize", E), f?.disconnect(), f = null;
+    }), l({ collapsed: b }), (h, m) => (n(), s("aside", {
+      class: p(["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]", b.value ? "md:w-[84px]" : "md:w-72"]])
     }, [
-      E.value || x.$slots.header ? (l(), o("header", Ee, [
-        h("div", Ie, [
-          h("button", {
+      C.value || h.$slots.header ? (n(), s("header", nt, [
+        $("div", ot, [
+          $("button", {
             type: "button",
-            class: m(Z),
-            "aria-label": g.value ? e.expandLabel : e.collapseLabel,
-            "aria-expanded": !g.value,
-            onClick: T
+            class: p(ie),
+            "aria-label": b.value ? e.expandLabel : e.collapseLabel,
+            "aria-expanded": !b.value,
+            onClick: V
           }, [
-            D(A, {
-              name: g.value ? "pan-end-symbolic" : "pan-start-symbolic",
+            F(N, {
+              name: b.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, it),
+          C.value && !b.value ? (n(), s("div", st, [
+            e.title ? (n(), s("p", rt, M(e.title), 1)) : g("", !0),
+            e.subtitle ? (n(), s("p", ut, M(e.subtitle), 1)) : g("", !0)
+          ])) : g("", !0)
         ]),
-        x.$slots.header && !g.value ? (l(), o("div", Ne, [
-          z(x.$slots, "header", { collapsed: g.value })
-        ])) : v("", !0)
-      ])) : (l(), o("div", Re, [
-        h("button", {
+        h.$slots.header && !b.value ? (n(), s("div", ct, [
+          S(h.$slots, "header", { collapsed: b.value })
+        ])) : g("", !0)
+      ])) : (n(), s("div", dt, [
+        $("button", {
           type: "button",
-          class: m(Z),
-          "aria-label": g.value ? e.expandLabel : e.collapseLabel,
-          "aria-expanded": !g.value,
-          onClick: T
+          class: p(ie),
+          "aria-label": b.value ? e.expandLabel : e.collapseLabel,
+          "aria-expanded": !b.value,
+          onClick: V
         }, [
-          D(A, {
-            name: g.value ? "pan-end-symbolic" : "pan-start-symbolic",
+          F(N, {
+            name: b.value ? "pan-end-symbolic" : "pan-start-symbolic",
             type: "symbol",
             size: 16
           }, null, 8, ["name"])
-        ], 8, Fe)
+        ], 8, ft)
       ])),
-      h("div", We, [
-        (l(!0), o(F, null, W(e.categories, (I) => (l(), P(le, {
-          key: I.id,
-          title: I.title,
-          collapsed: g.value
+      $("div", mt, [
+        (n(!0), s(U, null, Y(e.categories, (x) => (n(), R(pe, {
+          key: x.id,
+          title: x.title,
+          collapsed: b.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: q(() => [
+            (n(!0), s(U, null, Y(x.items, (c) => (n(), R(ge, {
+              key: c.id,
+              label: c.label,
+              icon: c.icon,
+              badge: c.badge,
+              disabled: c.disabled,
+              collapsed: b.value,
+              active: e.modelValue === c.id,
+              onClick: (v) => y(c.id)
             }, null, 8, ["label", "icon", "badge", "disabled", "collapsed", "active", "onClick"]))), 128))
           ]),
           _: 2
         }, 1032, ["title", "collapsed"]))), 128)),
-        z(x.$slots, "default", { collapsed: g.value })
+        S(h.$slots, "default", { collapsed: b.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({
+}), vt = { class: "flex min-w-0 flex-col gap-1" }, pt = ["for"], gt = { class: "relative flex min-w-0 items-center" }, yt = ["id"], ht = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "SelectField",
-  props: /* @__PURE__ */ ue({
+  props: /* @__PURE__ */ Se({
     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", {
-      set(u) {
-        return c.number ? Number(u) : u;
+    const l = e, t = Te(), a = Ie(), o = k(() => t.id ?? a), [i, u] = Oe(e, "modelValue", {
+      set(r) {
+        return u.number ? Number(r) : r;
       }
     });
-    return (u, b) => (l(), o("div", Ge, [
-      i.label ? (l(), o("label", {
+    return (r, f) => (n(), s("div", vt, [
+      l.label ? (n(), s("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),
+      }, M(l.label), 9, pt)) : g("", !0),
+      $("div", gt, [
+        de($("select", fe({
+          id: o.value,
+          "onUpdate:modelValue": f[0] || (f[0] = (b) => Ve(i) ? i.value = b : 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)]
+        }, P(t)), [
+          S(r.$slots, "default")
+        ], 16, yt), [
+          [je, P(i)]
         ]),
-        D(A, {
+        F(N, {
           name: "pan-down-symbolic",
           type: "symbol",
           size: 14,
@@ -291,57 +291,57 @@ const ze = ["src", "alt"], A = /* @__PURE__ */ w({
       ])
     ]));
   }
-}), H = /* @__PURE__ */ Symbol("barra de vasak");
-function X(e) {
+}), le = /* @__PURE__ */ Symbol("barra de vasak");
+function ee(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 xt = ["top", "bottom", "left", "right"];
+function kt(e) {
+  return typeof e == "string" && xt.includes(e);
 }
-function R() {
-  const e = he(H, null);
+function X() {
+  const e = me(le, null);
   if (e) return e;
-  const i = S("top");
+  const l = w("top");
   return {
-    posicion: i,
-    orientacion: y(() => X(i.value)),
-    vertical: y(() => X(i.value) === "vertical")
+    posicion: l,
+    orientacion: k(() => ee(l.value)),
+    vertical: k(() => ee(l.value) === "vertical")
   };
 }
-const Qe = "window", Ze = "barPosition";
-function _e(e) {
-  const t = e?.[Qe]?.[Ze];
-  return Je(t) ? t : null;
+const wt = "window", $t = "barPosition";
+function Ct(e) {
+  const t = e?.[wt]?.[$t];
+  return kt(t) ? t : null;
 }
-function et(e = "top") {
-  const i = S(e);
+function Lt(e = "top") {
+  const l = w(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"), u = await i();
+      l.value = Ct(u) ?? e;
     } catch {
     }
   }
-  return Y(async () => {
-    await s();
+  return W(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"), u = await i("config-changed", () => {
+        o();
       });
       if (a) {
-        c();
+        u();
         return;
       }
-      t = c;
+      t = u;
     } catch {
     }
-  }), q(() => {
+  }), G(() => {
     a = !0, t?.(), t = null;
-  }), i;
+  }), l;
 }
-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 zt = ["title", "aria-label"], Dt = ["title", "aria-label"], Et = ["title", "aria-label"], Z = "flex items-center justify-center rounded-corner border border-ui-border bg-ui-bg/80 p-1 transition-colors", ye = /* @__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: l } = X();
     function t() {
-      return $e();
+      return Xe();
     }
-    return (a, s) => (l(), o("div", {
-      class: m(["flex shrink-0 gap-1", V(i) ? "flex-col" : ""]),
+    return (a, o) => (n(), s("div", {
+      class: p(["flex shrink-0 gap-1", P(l) ? "flex-col" : ""]),
       "data-tauri-drag-region": ""
     }, [
-      h("button", {
+      $("button", {
         type: "button",
-        class: m([G, "hover:bg-status-success"]),
+        class: p([Z, "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, {
+        F(N, {
           name: "window-minimize",
           size: 24
         })
-      ], 10, tt),
-      h("button", {
+      ], 10, zt),
+      $("button", {
         type: "button",
-        class: m([G, "hover:bg-status-warning"]),
+        class: p([Z, "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, {
+        F(N, {
           name: "window-maximize",
           size: 24
         })
-      ], 10, at),
-      h("button", {
+      ], 10, Dt),
+      $("button", {
         type: "button",
-        class: m([G, "hover:bg-status-error"]),
+        class: p([Z, "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, {
+        F(N, {
           name: "window-close",
           size: 24
         })
-      ], 10, lt)
+      ], 10, Et)
     ], 2));
   }
-}), nt = {
+}), Bt = {
   key: 0,
   class: "flex shrink-0 items-center",
   "data-tauri-drag-region": ""
-}, ot = {
+}, At = {
   key: 1,
   class: "min-w-0 shrink truncate text-sm",
   "data-tauri-drag-region": ""
-}, se = /* @__PURE__ */ w({
+}, he = /* @__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 l = e, t = X(), a = k(() => l.position ?? t.posicion.value), o = k(() => a.value === "left" || a.value === "right");
+    return te(le, {
       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: k(() => o.value ? "vertical" : "horizontal"),
+      vertical: o
+    }), (i, u) => (n(), s("div", {
+      class: p(["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 ? (n(), s("div", Bt, [
+        S(i.$slots, "identidad")
+      ])) : g("", !0),
+      (i.$slots.titulo || e.title) && !o.value ? (n(), s("p", At, [
+        S(i.$slots, "titulo", {}, () => [
+          Pe(M(e.title), 1)
         ])
-      ])) : v("", !0),
-      h("div", {
-        class: m(["flex min-h-0 min-w-0 flex-1 items-center gap-2 overflow-auto", s.value ? "flex-col" : ""]),
+      ])) : g("", !0),
+      $("div", {
+        class: p(["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")
+        S(i.$slots, "default")
       ], 2),
-      r.$slots.acciones ? (l(), o("div", {
+      i.$slots.acciones ? (n(), s("div", {
         key: 2,
-        class: m(["flex shrink-0 items-center gap-1", s.value ? "flex-col" : ""])
+        class: p(["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, {
+        S(i.$slots, "acciones")
+      ], 2)) : g("", !0),
+      e.hideControls ? g("", !0) : (n(), R(ye, {
         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({
+}), Mt = { class: "flex min-h-0 min-w-0 flex-1" }, St = /* @__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 c = {
+    const l = e, t = Lt(), a = k(() => l.position ?? t.value), o = k(() => ee(a.value)), i = k(() => o.value === "vertical");
+    te(le, { posicion: a, orientacion: o, vertical: i });
+    const u = {
       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 (r, f) => (n(), s("div", {
+      class: p(["flex h-screen w-screen overflow-hidden rounded-corner-window border border-ui-border bg-ui-bg/80", u[a.value]])
     }, [
-      e.hideBar ? v("", !0) : (l(), P(se, {
+      e.hideBar ? g("", !0) : (n(), R(he, {
         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")
+      }, Fe({
+        default: q(() => [
+          S(r.$slots, "barra")
         ]),
         _: 2
       }, [
-        u.$slots.identidad ? {
+        r.$slots.identidad ? {
           name: "identidad",
-          fn: N(() => [
-            z(u.$slots, "identidad")
+          fn: q(() => [
+            S(r.$slots, "identidad")
           ]),
           key: "0"
         } : void 0,
-        u.$slots.titulo ? {
+        r.$slots.titulo ? {
           name: "titulo",
-          fn: N(() => [
-            z(u.$slots, "titulo")
+          fn: q(() => [
+            S(r.$slots, "titulo")
           ]),
           key: "1"
         } : void 0,
-        u.$slots.acciones ? {
+        r.$slots.acciones ? {
           name: "acciones",
-          fn: N(() => [
-            z(u.$slots, "acciones")
+          fn: q(() => [
+            S(r.$slots, "acciones")
           ]),
           key: "2"
         } : void 0
       ]), 1032, ["position", "title", "minimize-label", "maximize-label", "close-label", "hide-controls"])),
-      h("div", st, [
-        z(u.$slots, "default")
+      $("div", Mt, [
+        S(r.$slots, "default")
       ])
     ], 2));
   }
-}), rt = ["aria-selected", "title", "aria-label", "tabindex"], ut = { class: "min-w-0 flex-1 truncate" }, ct = {
+}), Tt = ["aria-selected", "title", "aria-label", "tabindex"], It = {
   key: 1,
+  "aria-hidden": "true"
+}, Ot = {
+  key: 2,
+  class: "min-w-0 flex-1 truncate"
+}, Vt = ["title", "aria-label"], jt = { class: "whitespace-nowrap" }, Pt = {
+  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({
+}, Ft = ["title", "aria-label"], Nt = 500, re = 8, ue = 6, xe = /* @__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: l }) {
+    const t = e, a = l, { vertical: o, posicion: i } = X(), u = w(null), r = w(null), f = w(!1), b = w(!1), C = w(!1), T = w({ top: 0, left: 0, right: 0 });
+    let E = null, V = null;
+    const y = k(() => t.tab.closable !== !1), h = k(() => t.tab.tooltip ?? t.tab.label), m = k(
       () => 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;
+    ), x = k(() => t.tab.label.trim().charAt(0).toUpperCase()), c = k(() => f.value || C.value), v = k(
+      () => !!t.tab.dirty && !(c.value && y.value)
+    ), z = k(
+      () => y.value && (c.value || t.active || !t.tab.dirty)
+    ), D = k(
+      () => o.value && (f.value || b.value || C.value)
+    ), O = k(() => {
+      const B = { position: "fixed", top: `${T.value.top}px`, zIndex: 50 };
+      return i.value === "right" ? { ...B, right: `${T.value.right + ue}px` } : { ...B, left: `${T.value.left + ue}px` };
+    });
+    function ne() {
+      const B = u.value;
+      if (!B) return;
+      const d = B.getBoundingClientRect();
+      T.value = {
+        top: d.top,
+        left: d.right,
+        right: window.innerWidth - d.left
+      };
+    }
+    function Ce(B) {
+      const d = B.relatedTarget;
+      d && r.value?.contains(d) || (C.value = !1);
     }
-    function j(d) {
-      d.button === 0 && (u = { x: d.clientX, y: d.clientY }, c = setTimeout(() => {
-        u && a("menu", u), T();
-      }, ft));
+    function Le() {
+      f.value = !0, ne();
     }
-    function x(d) {
-      if (!u) return;
-      (Math.abs(d.clientX - u.x) > ee || Math.abs(d.clientY - u.y) > ee) && T();
+    function ze() {
+      b.value = !0, ne();
     }
-    function M(d) {
-      d.button === 1 && b.value && (d.preventDefault(), a("close"));
+    function H() {
+      E !== null && clearTimeout(E), E = null, V = null;
     }
-    function I(d) {
-      d.preventDefault(), a("menu", { x: d.clientX, y: d.clientY });
+    function De(B) {
+      B.button === 0 && (V = { x: B.clientX, y: B.clientY }, E = setTimeout(() => {
+        V && a("menu", V), H();
+      }, Nt));
     }
-    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", [
+    function Ee(B) {
+      if (!V) return;
+      (Math.abs(B.clientX - V.x) > re || Math.abs(B.clientY - V.y) > re) && H();
+    }
+    function Be(B) {
+      B.button === 1 && y.value && (B.preventDefault(), a("close"));
+    }
+    function Ae(B) {
+      B.preventDefault(), a("menu", { x: B.clientX, y: B.clientY });
+    }
+    return G(H), (B, d) => (n(), s("div", {
+      ref_key: "raiz",
+      ref: u,
+      class: p(["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"
+        P(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: h.value,
+      "aria-label": m.value,
       tabindex: e.tabindex,
-      onClick: n[1] || (n[1] = $((f) => a("select"), ["stop"])),
+      onClick: d[5] || (d[5] = A((I) => 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"]))
+        d[6] || (d[6] = j(A((I) => a("select"), ["stop"]), ["enter"])),
+        d[7] || (d[7] = j(A((I) => a("select"), ["prevent", "stop"]), ["space"])),
+        d[8] || (d[8] = j(A((I) => a("navegar", "anterior"), ["prevent", "stop"]), ["left"])),
+        d[9] || (d[9] = j(A((I) => a("navegar", "anterior"), ["prevent", "stop"]), ["up"])),
+        d[10] || (d[10] = j(A((I) => a("navegar", "siguiente"), ["prevent", "stop"]), ["right"])),
+        d[11] || (d[11] = j(A((I) => a("navegar", "siguiente"), ["prevent", "stop"]), ["down"])),
+        d[12] || (d[12] = j(A((I) => a("navegar", "primera"), ["prevent", "stop"]), ["home"])),
+        d[13] || (d[13] = j(A((I) => a("navegar", "ultima"), ["prevent", "stop"]), ["end"])),
+        d[14] || (d[14] = j(A((I) => a("mover", -1), ["alt", "prevent", "stop"]), ["left"])),
+        d[15] || (d[15] = j(A((I) => a("mover", -1), ["alt", "prevent", "stop"]), ["up"])),
+        d[16] || (d[16] = j(A((I) => a("mover", 1), ["alt", "prevent", "stop"]), ["right"])),
+        d[17] || (d[17] = j(A((I) => a("mover", 1), ["alt", "prevent", "stop"]), ["down"])),
+        d[18] || (d[18] = j(A((I) => y.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: A(Be, ["stop"]),
+      onContextmenu: Ae,
+      onPointerdown: De,
+      onPointermove: Ee,
+      onPointerup: H,
+      onPointerleave: H,
+      onMouseenter: Le,
+      onMouseleave: d[19] || (d[19] = (I) => f.value = !1),
+      onFocus: ze,
+      onBlur: d[20] || (d[20] = (I) => b.value = !1)
     }, [
-      e.tab.icon ? (l(), P(A, {
+      e.tab.icon ? (n(), R(N, {
         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"])) : P(o) ? (n(), s("span", It, M(x.value), 1)) : g("", !0),
+      P(o) ? g("", !0) : (n(), s("span", Ot, M(e.tab.label), 1)),
+      v.value ? (n(), s("span", {
+        key: 3,
+        class: p(["size-2 shrink-0 rounded-full bg-current", P(o) ? "absolute right-0.5 top-0.5" : ""]),
+        "aria-hidden": "true"
+      }, null, 2)) : z.value && !P(o) ? (n(), s("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}: ${m.value}`,
+        onClick: d[0] || (d[0] = A((I) => a("close"), ["stop"]))
       }, [
-        D(A, {
+        F(N, {
           name: "gtk-close",
           type: "symbol",
           size: 12
         })
-      ], 8, dt)) : v("", !0)
-    ], 42, rt));
+      ], 8, Vt)) : g("", !0),
+      (n(), R(be, { to: "body" }, [
+        F(ve, {
+          "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: q(() => [
+            D.value ? (n(), s("div", {
+              key: 0,
+              class: p(["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: r,
+              style: _(O.value),
+              onMouseenter: d[2] || (d[2] = (I) => C.value = !0),
+              onMouseleave: d[3] || (d[3] = (I) => C.value = !1),
+              onFocusin: d[4] || (d[4] = (I) => C.value = !0),
+              onFocusout: Ce
+            }, [
+              $("span", jt, M(e.tab.label), 1),
+              e.tab.dirty ? (n(), s("span", Pt)) : g("", !0),
+              y.value ? (n(), s("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}: ${m.value}`,
+                onClick: d[1] || (d[1] = A((I) => a("close"), ["stop"]))
+              }, [
+                F(N, {
+                  name: "gtk-close",
+                  type: "symbol",
+                  size: 12
+                })
+              ], 8, Ft)) : g("", !0)
+            ], 38)) : g("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 42, Tt));
   }
-}), mt = ["aria-orientation"], bt = ["draggable", "onDragstart", "onDragover", "onDrop"], vt = ["title", "aria-label"], gt = /* @__PURE__ */ w({
+}), Rt = ["aria-orientation"], qt = ["draggable", "onDragstart", "onDragover", "onDrop"], Ht = ["title", "aria-label"], Ut = /* @__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: l }) {
+    const t = e, a = l, { vertical: o } = X(), i = w(null), u = w(0), r = w(null), f = w(null);
+    function b(c) {
+      a("update:modelValue", c), a("select", c);
     }
-    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 C(c, v) {
+      const z = t.tabs.length - 1;
+      if (z < 0) return;
+      const D = v === "primera" ? 0 : v === "ultima" ? z : v === "anterior" ? (c - 1 + t.tabs.length) % t.tabs.length : (c + 1) % t.tabs.length;
+      u.value = D, await ae(), i.value?.querySelectorAll('[role="tab"]')?.[D]?.focus();
     }
-    function O(d, n) {
+    function T(c, v) {
       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 z = c + v;
+      if (z < 0 || z >= t.tabs.length) return;
+      const D = [...t.tabs], [O] = D.splice(c, 1);
+      O && (D.splice(z, 0, O), u.value = z, a("reorder", D));
     }
-    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 E(c) {
+      const v = i.value;
+      if (!v) return;
+      const z = c.deltaY || c.deltaX || 0, D = o.value ? v.scrollTop : v.scrollLeft;
+      o.value ? v.scrollTop += z : v.scrollLeft += z, (o.value ? v.scrollTop : v.scrollLeft) !== D && c.preventDefault();
     }
-    function T(d, n) {
-      t.fixedOrder || (u.value = d, n.dataTransfer?.setData("text/plain", String(d)), n.dataTransfer && (n.dataTransfer.effectAllowed = "move"));
+    function V(c, v) {
+      t.fixedOrder || (r.value = c, v.dataTransfer?.setData("text/plain", String(c)), v.dataTransfer && (v.dataTransfer.effectAllowed = "move"));
     }
-    function j(d, n) {
-      t.fixedOrder || u.value === null || (n.preventDefault(), b.value = d, n.dataTransfer && (n.dataTransfer.dropEffect = "move"));
+    function y(c, v) {
+      t.fixedOrder || r.value === null || (v.preventDefault(), f.value = c, v.dataTransfer && (v.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 h(c) {
+      const v = r.value;
+      if (m(), t.fixedOrder || v === null || v === c) return;
+      const z = [...t.tabs], [D] = z.splice(v, 1);
+      D && (z.splice(c, 0, D), a("reorder", z));
     }
-    function M() {
-      u.value = null, b.value = null;
+    function m() {
+      r.value = null, f.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 x = k(
+      () => 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 (c, v) => (n(), s("div", {
+      class: p(["flex min-h-0 min-w-0 items-center gap-1", P(o) ? "w-full flex-col" : "h-full"]),
       role: "tablist",
-      "aria-orientation": V(s) ? "vertical" : "horizontal"
+      "aria-orientation": P(o) ? "vertical" : "horizontal"
     }, [
-      h("div", {
+      $("div", {
         ref_key: "carril",
-        ref: r,
-        class: m(I.value),
-        onWheel: L
+        ref: i,
+        class: p(x.value),
+        onWheel: E
       }, [
-        (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" : ""
+        (n(!0), s(U, null, Y(e.tabs, (z, D) => (n(), s("div", {
+          key: z.id,
+          class: p(["transition-opacity", [
+            r.value === D ? "opacity-40" : "",
+            f.value === D && r.value !== D ? "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: (O) => V(D, O),
+          onDragover: (O) => y(D, O),
+          onDrop: A((O) => h(D), ["prevent"]),
+          onDragend: m
         }, [
-          D(ie, {
-            tab: f,
-            active: f.id === e.modelValue,
+          F(xe, {
+            tab: z,
+            active: z.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: D === u.value ? 0 : -1,
+            onSelect: (O) => b(z.id),
+            onClose: (O) => a("close", z.id),
+            onMenu: (O) => a("menu", { id: z.id, ...O }),
+            onNavegar: (O) => C(D, O),
+            onMover: (O) => T(D, O)
           }, null, 8, ["tab", "active", "close-label", "dirty-label", "tabindex", "onSelect", "onClose", "onMenu", "onNavegar", "onMover"])
-        ], 42, bt))), 128))
+        ], 42, qt))), 128))
       ], 34),
-      e.newLabel ? (l(), o("button", {
+      e.newLabel ? (n(), s("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: v[0] || (v[0] = (z) => a("new"))
       }, [
-        D(A, {
+        F(N, {
           name: "gtk-add",
           type: "symbol",
           size: 14
         })
-      ], 8, vt)) : v("", !0)
-    ], 10, mt));
+      ], 8, Ht)) : g("", !0)
+    ], 10, Rt));
   }
-}), ht = { class: "relative flex shrink-0 items-center" }, yt = ["title", "aria-label", "aria-expanded"], xt = ["value", "placeholder", "aria-label"], pt = /* @__PURE__ */ w({
+}), Wt = { class: "relative flex shrink-0 items-center" }, Kt = ["title", "aria-label", "aria-expanded"], Gt = ["value", "placeholder", "aria-label"], Xt = /* @__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: l }) {
+    const t = e, a = l, { vertical: o, posicion: i } = X(), u = w(!1), r = w(null), f = k(() => o.value || t.collapsed), b = k(() => !f.value || u.value), C = k(() => {
+      if (!f.value) return "";
+      const h = "absolute z-40 w-64 rounded-corner border border-ui-border bg-ui-surface/95 p-1 shadow-lg";
+      return i.value === "left" ? `${h} left-full top-0 ml-1` : i.value === "right" ? `${h} right-full top-0 mr-1` : i.value === "bottom" ? `${h} bottom-full right-0 mb-1` : `${h} top-full right-0 mt-1`;
     });
-    async function O() {
-      c.value = !0, a("open"), await ae(), u.value?.focus();
+    async function T() {
+      u.value = !0, a("open"), await ae(), r.value?.focus();
     }
-    function L() {
-      c.value && (c.value = !1, a("close"));
+    function E() {
+      u.value && (u.value = !1, a("close"));
     }
-    function T(x) {
-      a("update:modelValue", x.target.value);
+    function V(h) {
+      a("update:modelValue", h.target.value);
     }
-    function j() {
+    function y() {
       a("search", t.modelValue);
     }
-    return (x, M) => (l(), o("div", ht, [
-      b.value ? (l(), o("button", {
+    return (h, m) => (n(), s("div", Wt, [
+      f.value ? (n(), s("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] = $(() => {
+        "aria-expanded": u.value,
+        onMousedown: m[0] || (m[0] = A(() => {
         }, ["prevent"])),
-        onClick: M[1] || (M[1] = (I) => c.value ? L() : O())
+        onClick: m[1] || (m[1] = (x) => u.value ? E() : T())
       }, [
-        D(A, {
+        F(N, {
           name: "system-search",
           type: "symbol",
           size: 14
         })
-      ], 40, yt)) : v("", !0),
-      g.value ? (l(), o("div", {
+      ], 40, Kt)) : g("", !0),
+      b.value ? (n(), s("div", {
         key: 1,
-        class: m(E.value)
+        class: p(C.value)
       }, [
-        h("input", {
+        $("input", {
           ref_key: "campo",
-          ref: u,
+          ref: r,
           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: p(["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", f.value ? "" : "w-48"]),
           value: e.modelValue,
           placeholder: e.placeholder || e.label,
           "aria-label": e.label,
-          onInput: T,
+          onInput: V,
           onKeydown: [
-            B(j, ["enter"]),
-            B(L, ["esc"])
+            j(y, ["enter"]),
+            j(E, ["esc"])
           ],
-          onBlur: L
-        }, null, 42, xt)
-      ], 2)) : v("", !0)
+          onBlur: E
+        }, null, 42, Gt)
+      ], 2)) : g("", !0)
     ]));
   }
-}), kt = ["type", "disabled"], wt = {
+}), Yt = ["type", "disabled"], Jt = {
   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({
+}, Qt = ["src", "alt"], Zt = { key: 2 }, _t = ["src", "alt"], ea = /* @__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: l }) {
+    const t = e, a = l, 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");
+    }, u = (r) => {
+      t.stopPropagation && r.stopPropagation(), t.preventDefault && r.preventDefault(), !t.disabled && !t.loading && a("click");
     };
-    return (u, b) => (l(), o("button", {
+    return (r, f) => (n(), s("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],
+      onClick: u,
+      class: p(["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 ? (n(), s("span", Jt)) : g("", !0),
+      t.iconSrc && !t.iconRight ? (n(), s("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, Qt)) : g("", !0),
+      t.label ? (n(), s("span", Zt, M(t.label), 1)) : g("", !0),
+      t.iconSrc && t.iconRight ? (n(), s("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, _t)) : g("", !0)
+    ], 10, Yt));
   }
-}), U = (e, i) => {
+}), J = (e, l) => {
   const t = e.__vccOpts || e;
-  for (const [a, s] of i)
-    t[a] = s;
+  for (const [a, o] of l)
+    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({
+}, ta = /* @__PURE__ */ J(ea, [["__scopeId", "data-v-2eaf6e27"]]), aa = { class: "text-base font-semibold m-0 text-primary dark:text-primary-dark" }, la = /* @__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 (l, t) => (n(), s("div", {
+      class: p(["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)
+      $("h3", aa, M(e.icon ? `${e.icon} ${e.title}` : e.title), 1),
+      S(l.$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 = {
+}), na = /* @__PURE__ */ J(la, [["__scopeId", "data-v-45bd4eab"]]), oa = { class: "flex items-center gap-3 flex-1 min-w-0" }, ia = ["src", "alt"], sa = { class: "min-w-0" }, ra = { class: "font-semibold truncate" }, ua = {
   key: 0,
   class: "text-xs text-gray-400 truncate"
-}, Ot = {
+}, ca = {
   key: 1,
   class: "text-xs text-gray-400 truncate"
-}, jt = {
+}, da = {
   key: 2,
   class: "text-xs text-gray-400 flex gap-2 mt-1"
-}, Pt = {
+}, fa = {
   key: 1,
   class: "w-2 h-2 rounded-full bg-green-500"
-}, Nt = /* @__PURE__ */ w({
+}, ma = /* @__PURE__ */ L({
   __name: "DeviceCard",
   props: {
     icon: {},
@@ -894,40 +976,402 @@ 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: l }) {
+    const t = l, 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, u) => (n(), s("div", {
+      class: p(["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("img", {
+      $("div", oa, [
+        $("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, ia),
+        $("div", sa, [
+          $("div", ra, M(e.title), 1),
+          e.subtitle ? (n(), s("div", ua, M(e.subtitle), 1)) : g("", !0),
+          e.metadata ? (n(), s("div", ca, M(e.metadata), 1)) : g("", !0),
+          e.extraInfo && e.extraInfo.length > 0 ? (n(), s("div", da, [
+            (n(!0), s(U, null, Y(e.extraInfo, (r, f) => (n(), s("span", { key: f }, M(r), 1))), 128))
+          ])) : g("", !0)
         ])
       ]),
-      e.showActionButton ? (l(), o("button", {
+      e.showActionButton ? (n(), s("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: A(a, ["stop"])
+      }, M(e.actionLabel), 1)) : g("", !0),
+      e.showStatusIndicator && e.isConnected ? (n(), s("div", fa)) : g("", !0)
     ], 2));
   }
-}), Rt = ["for"], Ft = /* @__PURE__ */ w({
+}), ke = /* @__PURE__ */ Symbol("menú de vasak");
+function Q() {
+  const e = me(ke, null);
+  if (e) return e;
+  const l = w(!1);
+  return {
+    abierto: l,
+    idDelMenu: "vsk-menu-suelto",
+    idDeLaEtiqueta: w(null),
+    ponerLaEtiqueta: () => {
+    },
+    disparador: w(null),
+    ponerElDisparador: () => {
+    },
+    focoAlAbrir: w("ninguno"),
+    abrir: () => {
+      l.value = !0;
+    },
+    cerrar: () => {
+      l.value = !1;
+    },
+    alternar: () => {
+      l.value = !l.value;
+    }
+  };
+}
+let ce = 0;
+function we() {
+  return ce += 1, `vsk-menu-${ce}`;
+}
+const ba = { class: "relative inline-block" }, va = /* @__PURE__ */ L({
+  __name: "DropdownMenu",
+  props: {
+    open: { type: Boolean, default: void 0 }
+  },
+  emits: ["update:open"],
+  setup(e, { emit: l }) {
+    const t = e, a = l, o = w(!1), i = w(null), u = w(null), r = w("ninguno"), f = we();
+    let b = null;
+    const C = k({
+      get: () => t.open ?? o.value,
+      set: (y) => {
+        t.open === void 0 && (o.value = y), a("update:open", y);
+      }
+    });
+    K(C, (y) => {
+      if (y) {
+        const h = document.activeElement;
+        b = h instanceof HTMLElement ? h : null;
+      } else
+        r.value = "ninguno";
+    });
+    function T(y = "ninguno") {
+      r.value = y, C.value = !0;
+    }
+    function E(y = {}) {
+      if (C.value = !1, !y.devolverElFoco) return;
+      const h = b ?? i.value;
+      h?.isConnected && h.focus();
+    }
+    function V(y = "ninguno") {
+      if (C.value) {
+        E({ devolverElFoco: !0 });
+        return;
+      }
+      T(y);
+    }
+    return te(ke, {
+      abierto: C,
+      idDelMenu: f,
+      idDeLaEtiqueta: u,
+      ponerLaEtiqueta: (y) => {
+        u.value = y;
+      },
+      disparador: i,
+      ponerElDisparador: (y) => {
+        i.value = y;
+      },
+      focoAlAbrir: r,
+      abrir: T,
+      cerrar: E,
+      alternar: V
+    }), (y, h) => (n(), s("div", ba, [
+      S(y.$slots, "default")
+    ]));
+  }
+}), pa = ["id", "aria-labelledby", "inert"], ga = {
+  role: "none",
+  class: "py-1"
+}, ya = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "DropdownMenuContent",
+  props: {
+    side: { default: "bottom" },
+    align: { default: "start" },
+    sideOffset: { default: 4 }
+  },
+  setup(e) {
+    const l = e, t = Q(), { idDelMenu: a, idDeLaEtiqueta: o } = t, i = k(() => t.disparador.value), u = k(() => t.abierto.value), r = w(null), f = w({ top: 0, left: 0 });
+    function b() {
+      if (!i.value || !r.value) return;
+      const m = i.value.getBoundingClientRect(), x = r.value.getBoundingClientRect();
+      let c = 0, v = 0;
+      switch (l.side) {
+        case "bottom":
+          c = m.bottom + l.sideOffset;
+          break;
+        case "top":
+          c = m.top - x.height - l.sideOffset;
+          break;
+        case "left":
+          v = m.left - x.width - l.sideOffset, c = m.top;
+          break;
+        case "right":
+          v = m.right + l.sideOffset, c = m.top;
+          break;
+      }
+      switch (l.align) {
+        case "start":
+          (l.side === "bottom" || l.side === "top") && (v = m.left);
+          break;
+        case "center":
+          (l.side === "bottom" || l.side === "top") && (v = m.left + m.width / 2 - x.width / 2);
+          break;
+        case "end":
+          (l.side === "bottom" || l.side === "top") && (v = m.right - x.width);
+          break;
+      }
+      f.value = { top: c, left: v };
+    }
+    function C() {
+      return r.value ? Array.from(r.value.querySelectorAll('[role="menuitem"]')) : [];
+    }
+    function T(m) {
+      const x = C();
+      if (!x.length) return;
+      const c = x.length;
+      x[(m % c + c) % c]?.focus();
+    }
+    function E() {
+      const m = document.activeElement;
+      return m instanceof HTMLElement ? C().indexOf(m) : -1;
+    }
+    function V(m) {
+      const x = E();
+      switch (m.key) {
+        case "ArrowDown":
+          m.preventDefault(), T(x + 1);
+          break;
+        case "ArrowUp":
+          m.preventDefault(), T(x <= 0 ? -1 : x - 1);
+          break;
+        case "Home":
+          m.preventDefault(), T(0);
+          break;
+        case "End":
+          m.preventDefault(), T(-1);
+          break;
+        case "Escape":
+          m.preventDefault(), m.stopPropagation(), t.cerrar({ devolverElFoco: !0 });
+          break;
+        case "Tab":
+          m.preventDefault(), t.cerrar({ devolverElFoco: !0 });
+          break;
+      }
+    }
+    K(u, async (m) => {
+      if (m)
+        switch (await ae(), requestAnimationFrame(() => {
+          b();
+        }), t.focoAlAbrir.value) {
+          case "primero":
+            T(0);
+            break;
+          case "ultimo":
+            T(-1);
+            break;
+          // Abierto con el ratón: el foco va al menú y no a un ítem —no hay
+          // ninguno elegido todavía—, que es lo que deja andar las flechas y el
+          // Escape sin haber tocado nada.
+          default:
+            r.value?.focus();
+        }
+    });
+    function y() {
+      u.value && b();
+    }
+    function h(m) {
+      const x = m.target, c = !!x.closest("[dropdown-content]"), v = !!i.value?.contains(x);
+      !c && !v && t.cerrar();
+    }
+    return W(() => {
+      document.addEventListener("click", h), window.addEventListener("resize", y), window.addEventListener("scroll", y, !0);
+    }), G(() => {
+      document.removeEventListener("click", h), window.removeEventListener("resize", y), window.removeEventListener("scroll", y, !0);
+    }), (m, x) => (n(), R(be, { to: "body" }, [
+      F(ve, {
+        "enter-active-class": "transition-all duration-150 ease-in-out",
+        "leave-active-class": "transition-all duration-150 ease-in-out",
+        "enter-from-class": "opacity-0 scale-95",
+        "leave-to-class": "opacity-0 scale-95",
+        onEnter: x[1] || (x[1] = (c) => c.offsetHeight),
+        onLeave: x[2] || (x[2] = (c) => c.offsetHeight)
+      }, {
+        default: q(() => [
+          de($("div", fe({
+            ref_key: "contenido",
+            ref: r
+          }, m.$attrs, {
+            id: P(a),
+            role: "menu",
+            tabindex: "-1",
+            "aria-orientation": "vertical",
+            "aria-labelledby": P(o) ?? void 0,
+            inert: !u.value,
+            style: { position: "fixed", top: `${f.value.top}px`, left: `${f.value.left}px`, zIndex: 50 },
+            "dropdown-content": "",
+            class: "min-w-30 rounded-corner border border-primary bg-ui-bg/80 shadow-lg focus:outline-none",
+            onClick: x[0] || (x[0] = (c) => c.stopPropagation()),
+            onKeydown: V
+          }), [
+            $("div", ga, [
+              S(m.$slots, "default")
+            ])
+          ], 16, pa), [
+            [Ne, u.value]
+          ])
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), ha = ["aria-disabled", "onKeydown"], xa = /* @__PURE__ */ L({
+  __name: "DropdownMenuItem",
+  props: {
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "click"],
+  setup(e, { emit: l }) {
+    const t = e, a = l, o = Q();
+    function i(u) {
+      t.disabled || (a("select"), a("click", u), o.cerrar({ devolverElFoco: !0 }));
+    }
+    return (u, r) => (n(), s("div", {
+      role: "menuitem",
+      tabindex: "0",
+      "aria-disabled": e.disabled || void 0,
+      class: p([
+        "px-3 py-2 text-sm transition-colors outline-none",
+        {
+          "opacity-50 cursor-not-allowed": e.disabled,
+          "cursor-pointer hover:bg-primary hover:text-tx-on-primary focus-visible:bg-primary focus-visible:text-tx-on-primary": !e.disabled
+        }
+      ]),
+      onClick: i,
+      onKeydown: [
+        j(A(i, ["prevent"]), ["enter"]),
+        j(A(i, ["prevent"]), ["space"])
+      ]
+    }, [
+      S(u.$slots, "default")
+    ], 42, ha));
+  }
+}), ka = /* @__PURE__ */ L({
+  __name: "DropdownMenuLabel",
+  setup(e) {
+    const l = Q(), t = `${we()}-titulo`;
+    return W(() => {
+      l.ponerLaEtiqueta(t);
+    }), G(() => {
+      l.ponerLaEtiqueta(null);
+    }), (a, o) => (n(), s("div", {
+      id: t,
+      role: "presentation",
+      class: "px-3 py-2 text-sm font-semibold text-tx-main"
+    }, [
+      S(a.$slots, "default")
+    ]));
+  }
+}), wa = {
+  role: "separator",
+  "aria-orientation": "horizontal",
+  class: "bg-ui-bg/80 my-4 h-0.5"
+}, $a = /* @__PURE__ */ L({
+  __name: "DropdownMenuSeparator",
+  setup(e) {
+    return (l, t) => (n(), s("div", wa));
+  }
+});
+function $e(e) {
+  const l = e.filter(
+    (a) => a.type !== He && !(a.type === Ue && typeof a.children == "string" && !a.children.trim())
+  );
+  if (l.length !== 1) return null;
+  const t = l[0];
+  return t.type === U && Array.isArray(t.children) ? $e(t.children) : t;
+}
+function Ca(e) {
+  if (e instanceof HTMLElement) return e;
+  const l = e?.$el;
+  return l instanceof HTMLElement ? l : null;
+}
+const La = L({
+  name: "DropdownMenuTrigger",
+  inheritAttrs: !1,
+  props: {
+    /** Sin envoltorio: los atributos van sobre el hijo que se le pasó. */
+    asChild: { type: Boolean, default: !1 },
+    /** El disparador no abre nada; lo abre la aplicación por su cuenta. */
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(e, { slots: l, attrs: t }) {
+    const a = Q(), o = w(null);
+    function i() {
+      a.ponerElDisparador(Ca(o.value));
+    }
+    function u() {
+      e.disabled || (i(), a.alternar());
+    }
+    function r(f) {
+      if (!e.disabled)
+        switch (f.key) {
+          case "Enter":
+          case " ":
+            f.preventDefault(), i(), a.alternar("primero");
+            break;
+          case "ArrowDown":
+            f.preventDefault(), i(), a.abrir("primero");
+            break;
+          case "ArrowUp":
+            f.preventDefault(), i(), a.abrir("ultimo");
+            break;
+          case "Escape":
+            a.abierto.value && (f.preventDefault(), a.cerrar({ devolverElFoco: !0 }));
+            break;
+        }
+    }
+    return () => {
+      const f = {
+        ref: (C) => {
+          o.value = C, i();
+        },
+        "aria-haspopup": "menu",
+        "aria-expanded": a.abierto.value ? "true" : "false",
+        // Sólo cuando hay algo que controlar: `aria-controls` apuntando
+        // a un elemento que el lector no expone —el menú cerrado está
+        // `inert`— es una referencia rota.
+        "aria-controls": a.abierto.value ? a.idDelMenu : void 0,
+        onClick: u,
+        onKeydown: r
+      }, b = l.default?.() ?? [];
+      if (e.asChild) {
+        const C = $e(b);
+        if (C) return Re(C, { ...t, ...f });
+      }
+      return qe(
+        "div",
+        { ...t, class: ["dropdown-menu-trigger inline-block", t.class], ...f },
+        b
+      );
+    };
+  }
+}), za = ["for"], Da = /* @__PURE__ */ L({
   __name: "FormGroup",
   props: {
     label: {},
@@ -936,45 +1380,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 (l, t) => (n(), s("div", {
+      class: p(["flex flex-col gap-2", e.customClass])
     }, [
-      e.label ? (l(), o("label", {
+      e.label ? (n(), s("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: p(["text-sm font-medium text-primary dark:text-primary-dark", e.labelClass])
+      }, M(e.label), 11, za)) : g("", !0),
+      S(l.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Wt = /* @__PURE__ */ U(Ft, [["__scopeId", "data-v-c0d9d9cb"]]), Ut = /* @__PURE__ */ w({
+}), Ea = /* @__PURE__ */ J(Da, [["__scopeId", "data-v-c0d9d9cb"]]), Ba = /* @__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: l }) {
+    const t = e, a = l, o = () => {
       t.clickable && a("click");
     };
-    return (r, c) => (l(), o("div", {
-      class: m([
+    return (i, u) => (n(), s("div", {
+      class: p([
         "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)
+      S(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 = {
+}), Aa = /* @__PURE__ */ J(Ba, [["__scopeId", "data-v-f86d47da"]]), Ma = { 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" }, Sa = ["src", "alt", "title"], Ta = {
   key: 1,
   class: "w-8 h-8 flex items-center justify-center"
-}, qt = ["src", "alt"], Ht = ["min", "max", "value"], Jt = /* @__PURE__ */ w({
+}, Ia = ["src", "alt"], Oa = ["min", "max", "value"], Va = /* @__PURE__ */ L({
   __name: "SliderControl",
   props: {
     icon: {},
@@ -988,50 +1432,50 @@ 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: l }) {
+    const t = e, a = l, o = k(() => {
       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));
-    }, u = () => {
+      const f = t.max - t.min, b = t.modelValue - t.min;
+      return Math.round(b / f * 100);
+    }), i = k(() => t.getPercentageClass ? t.getPercentageClass(o.value) : ""), u = (f) => {
+      const b = f.target;
+      a("update:modelValue", Number(b.value));
+    }, r = () => {
       a("buttonClick");
     };
-    return (b, g) => (l(), o("div", Xt, [
-      e.showButton ? (l(), o("button", {
+    return (f, b) => (n(), s("div", Ma, [
+      e.showButton ? (n(), s("button", {
         key: 0,
-        onClick: u,
+        onClick: r,
         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"
       }, [
-        h("img", {
+        $("img", {
           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, [
-        h("img", {
+          class: p(["w-6 h-6 transition-all duration-200", e.iconClass])
+        }, null, 10, Sa)
+      ])) : (n(), s("div", Ta, [
+        $("img", {
           src: e.icon,
           alt: e.alt,
           class: "w-6 h-6 transition-all duration-200"
-        }, null, 8, qt)
+        }, null, 8, Ia)
       ])),
-      h("input", {
+      $("input", {
         type: "range",
         min: e.min,
         max: e.max,
         value: e.modelValue,
-        onInput: c,
+        onInput: u,
         class: "flex-1 transition-all duration-200 hover:scale-105"
-      }, null, 40, Ht),
-      h("span", {
-        class: m(["w-12 text-right transition-all duration-200 font-medium", r.value])
-      }, k(s.value) + "% ", 3)
+      }, null, 40, Oa),
+      $("span", {
+        class: p(["w-12 text-right transition-all duration-200 font-medium", i.value])
+      }, M(o.value) + "% ", 3)
     ]));
   }
-}), Qt = ["disabled"], Zt = /* @__PURE__ */ w({
+}), ja = ["disabled"], Pa = /* @__PURE__ */ L({
   __name: "SwitchToggle",
   props: {
     isOn: { type: Boolean },
@@ -1042,15 +1486,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: l }) {
+    const t = e, a = l, o = () => {
       a("toggle", !t.isOn);
     };
-    return (r, c) => (l(), o("button", {
+    return (i, u) => (n(), s("button", {
       type: "button",
-      onClick: s,
+      onClick: o,
       disabled: e.disabled,
-      class: m([
+      class: p([
         "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,
@@ -1058,16 +1502,16 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
         e.customClass
       ])
     }, [
-      h("span", {
-        class: m([
+      $("span", {
+        class: p([
           "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, ja));
   }
-}), _t = ["disabled"], ea = ["src", "alt", "title"], ta = /* @__PURE__ */ w({
+}), Fa = ["disabled"], Na = ["src", "alt", "title"], Ra = /* @__PURE__ */ L({
   __name: "ToggleControl",
   props: {
     icon: {},
@@ -1079,13 +1523,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: l }) {
+    const t = l, a = () => {
       t("click");
     };
-    return (s, r) => (l(), o("button", {
+    return (o, i) => (n(), s("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: p(["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,
@@ -1093,23 +1537,23 @@ const tt = ["title", "aria-label"], at = ["title", "aria-label"], lt = ["title",
       }]),
       disabled: e.isLoading
     }, [
-      h("img", {
+      $("img", {
         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: p(["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, Na)
+    ], 10, Fa));
   }
-}), aa = ["title"], la = ["src", "alt"], na = {
+}), qa = ["title"], Ha = ["src", "alt"], Ua = {
   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 +1567,105 @@ 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: l }) {
+    const t = l, a = w(!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, u) => (n(), s("div", {
+      class: p(["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,
-      onMouseenter: c[0] || (c[0] = (u) => a.value = !0),
-      onMouseleave: c[1] || (c[1] = (u) => a.value = !1)
+      onClick: o,
+      onMouseenter: u[0] || (u[0] = (r) => a.value = !0),
+      onMouseleave: u[1] || (u[1] = (r) => a.value = !1)
     }, [
-      h("img", {
+      $("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: p(["m-auto h-5.5 w-auto transition-all duration-300", e.iconClass])
+      }, null, 10, Ha),
+      e.badge !== null && e.badge > 0 ? (n(), s("div", Ua, M(e.badge), 1)) : g("", !0),
+      e.showCustomTooltip && e.customTooltipText ? (n(), s("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: p(["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));
+      }, M(e.customTooltipText), 3)) : g("", !0),
+      S(i.$slots, "default")
+    ], 42, qa));
   }
-}), sa = [
-  Ue,
-  ne,
-  le,
-  qe,
-  A,
-  it,
-  se,
-  oe,
-  gt,
-  ie,
-  pt,
-  Bt,
-  Tt,
-  Nt,
-  Wt,
-  Gt,
-  Jt,
-  Zt,
+}), Ka = [
+  bt,
+  ge,
+  pe,
+  ht,
+  N,
+  St,
+  he,
+  ye,
+  Ut,
+  xe,
+  Xt,
   ta,
-  oa
-], da = {
+  na,
+  ma,
+  va,
+  ya,
+  xa,
+  ka,
+  $a,
+  La,
+  Ea,
+  Aa,
+  Va,
+  Pa,
+  Ra,
+  Wa
+], Qa = {
   install(e) {
-    sa.forEach((i) => {
-      e.component(i.name, i);
+    Ka.forEach((l) => {
+      e.component(l.name, l);
     });
   }
 };
 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
+  ta as ActionButton,
+  he as AppBar,
+  Xt as BarSearch,
+  ke as CLAVE_DEL_MENU,
+  le as CLAVE_DE_LA_BARRA,
+  na as ConfigSection,
+  ma as DeviceCard,
+  va as DropdownMenu,
+  ya as DropdownMenuContent,
+  xa as DropdownMenuItem,
+  ka as DropdownMenuLabel,
+  $a as DropdownMenuSeparator,
+  La as DropdownMenuTrigger,
+  Ea as FormGroup,
+  Aa as ListCard,
+  xt as POSICIONES,
+  ht as SelectField,
+  bt as SideBar,
+  ge as SideButton,
+  pe as SideGroup,
+  Va as SliderControl,
+  Pa as SwitchToggle,
+  Ut as TabBar,
+  xe as TabItem,
+  N as ThemeIcon,
+  Ra as ToggleControl,
+  Wa as TrayIconButton,
+  ye as WindowControls,
+  St as WindowFrame,
+  Qa as default,
+  kt as esPosicion,
+  ee as orientacionDe,
+  Ct as posicionDe,
+  Q as usarElMenu,
+  X as usarLaBarra,
+  Lt as usarLaPosicionDeLaBarra
 };