@vasakgroup/vue-libvasak 0.2.2 → 0.3.0

package/dist/vue-libvasak.umd.js

@@ -1 +1 @@
-(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.VueLibVasak={},r.Vue))})(this,(function(r,n){"use strict";const y=(t,e)=>{const i=t.__vccOpts||t;for(const[l,s]of e)i[l]=s;return i},Q={},Y={class:"sidebar"};function K(t,e){return n.openBlock(),n.createElementBlock("div",Y,[n.renderSlot(t.$slots,"default")])}const z=y(Q,[["render",K]]),X={href:"#",class:"sidebar-button"},ee=["src","alt"],N=n.defineComponent({__name:"SideButton",props:{title:{type:String,default:"Link"},image:{type:String,default:""}},setup(t){return(e,i)=>(n.openBlock(),n.createElementBlock("a",X,[n.createElementVNode("img",{src:t.image,alt:t.title,class:"img-fluid"},null,8,ee)]))}});function te(t,e,i,l){if(typeof e=="function"?t!==e||!l:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return i==="m"?l:i==="a"?l.call(t):l?l.value:e.get(t)}function ne(t,e,i,l,s){if(typeof e=="function"?t!==e||!0:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return e.set(t,i),i}typeof SuppressedError=="function"&&SuppressedError;var k;const h="__TAURI_TO_IPC_KEY__";function ie(t,e=!1){return window.__TAURI_INTERNALS__.transformCallback(t,e)}async function a(t,e={},i){return window.__TAURI_INTERNALS__.invoke(t,e,i)}class le{get rid(){return te(this,k,"f")}constructor(e){k.set(this,void 0),ne(this,k,e)}async close(){return a("plugin:resources|close",{rid:this.rid})}}k=new WeakMap;class D{constructor(...e){this.type="Logical",e.length===1?"Logical"in e[0]?(this.width=e[0].Logical.width,this.height=e[0].Logical.height):(this.width=e[0].width,this.height=e[0].height):(this.width=e[0],this.height=e[1])}toPhysical(e){return new p(this.width*e,this.height*e)}[h](){return{width:this.width,height:this.height}}toJSON(){return this[h]()}}class p{constructor(...e){this.type="Physical",e.length===1?"Physical"in e[0]?(this.width=e[0].Physical.width,this.height=e[0].Physical.height):(this.width=e[0].width,this.height=e[0].height):(this.width=e[0],this.height=e[1])}toLogical(e){return new D(this.width/e,this.height/e)}[h](){return{width:this.width,height:this.height}}toJSON(){return this[h]()}}class w{constructor(e){this.size=e}toLogical(e){return this.size instanceof D?this.size:this.size.toLogical(e)}toPhysical(e){return this.size instanceof p?this.size:this.size.toPhysical(e)}[h](){return{[`${this.size.type}`]:{width:this.size.width,height:this.size.height}}}toJSON(){return this[h]()}}class I{constructor(...e){this.type="Logical",e.length===1?"Logical"in e[0]?(this.x=e[0].Logical.x,this.y=e[0].Logical.y):(this.x=e[0].x,this.y=e[0].y):(this.x=e[0],this.y=e[1])}toPhysical(e){return new b(this.x*e,this.y*e)}[h](){return{x:this.x,y:this.y}}toJSON(){return this[h]()}}class b{constructor(...e){this.type="Physical",e.length===1?"Physical"in e[0]?(this.x=e[0].Physical.x,this.y=e[0].Physical.y):(this.x=e[0].x,this.y=e[0].y):(this.x=e[0],this.y=e[1])}toLogical(e){return new I(this.x/e,this.y/e)}[h](){return{x:this.x,y:this.y}}toJSON(){return this[h]()}}class _{constructor(e){this.position=e}toLogical(e){return this.position instanceof I?this.position:this.position.toLogical(e)}toPhysical(e){return this.position instanceof b?this.position:this.position.toPhysical(e)}[h](){return{[`${this.position.type}`]:{x:this.position.x,y:this.position.y}}}toJSON(){return this[h]()}}var u;(function(t){t.WINDOW_RESIZED="tauri://resize",t.WINDOW_MOVED="tauri://move",t.WINDOW_CLOSE_REQUESTED="tauri://close-requested",t.WINDOW_DESTROYED="tauri://destroyed",t.WINDOW_FOCUS="tauri://focus",t.WINDOW_BLUR="tauri://blur",t.WINDOW_SCALE_FACTOR_CHANGED="tauri://scale-change",t.WINDOW_THEME_CHANGED="tauri://theme-changed",t.WINDOW_CREATED="tauri://window-created",t.WEBVIEW_CREATED="tauri://webview-created",t.DRAG_ENTER="tauri://drag-enter",t.DRAG_OVER="tauri://drag-over",t.DRAG_DROP="tauri://drag-drop",t.DRAG_LEAVE="tauri://drag-leave"})(u||(u={}));async function A(t,e){window.__TAURI_EVENT_PLUGIN_INTERNALS__.unregisterListener(t,e),await a("plugin:event|unlisten",{event:t,eventId:e})}async function $(t,e,i){var l;const s=typeof i?.target=="string"?{kind:"AnyLabel",label:i.target}:(l=i?.target)!==null&&l!==void 0?l:{kind:"Any"};return a("plugin:event|listen",{event:t,target:s,handler:ie(e)}).then(c=>async()=>A(t,c))}async function ae(t,e,i){return $(t,l=>{A(t,l.id),e(l)},i)}async function se(t,e){await a("plugin:event|emit",{event:t,payload:e})}async function oe(t,e,i){await a("plugin:event|emit_to",{target:typeof t=="string"?{kind:"AnyLabel",label:t}:t,event:e,payload:i})}class f extends le{constructor(e){super(e)}static async new(e,i,l){return a("plugin:image|new",{rgba:C(e),width:i,height:l}).then(s=>new f(s))}static async fromBytes(e){return a("plugin:image|from_bytes",{bytes:C(e)}).then(i=>new f(i))}static async fromPath(e){return a("plugin:image|from_path",{path:e}).then(i=>new f(i))}async rgba(){return a("plugin:image|rgba",{rid:this.rid}).then(e=>new Uint8Array(e))}async size(){return a("plugin:image|size",{rid:this.rid})}}function C(t){return t==null?null:typeof t=="string"?t:t instanceof f?t.rid:t}var x;(function(t){t[t.Critical=1]="Critical",t[t.Informational=2]="Informational"})(x||(x={}));class re{constructor(e){this._preventDefault=!1,this.event=e.event,this.id=e.id}preventDefault(){this._preventDefault=!0}isPreventDefault(){return this._preventDefault}}var W;(function(t){t.None="none",t.Normal="normal",t.Indeterminate="indeterminate",t.Paused="paused",t.Error="error"})(W||(W={}));function V(){return new L(window.__TAURI_INTERNALS__.metadata.currentWindow.label,{skip:!0})}async function B(){return a("plugin:window|get_all_windows").then(t=>t.map(e=>new L(e,{skip:!0})))}const E=["tauri://created","tauri://error"];class L{constructor(e,i={}){var l;this.label=e,this.listeners=Object.create(null),i?.skip||a("plugin:window|create",{options:{...i,parent:typeof i.parent=="string"?i.parent:(l=i.parent)===null||l===void 0?void 0:l.label,label:e}}).then(async()=>this.emit("tauri://created")).catch(async s=>this.emit("tauri://error",s))}static async getByLabel(e){var i;return(i=(await B()).find(l=>l.label===e))!==null&&i!==void 0?i:null}static getCurrent(){return V()}static async getAll(){return B()}static async getFocusedWindow(){for(const e of await B())if(await e.isFocused())return e;return null}async listen(e,i){return this._handleTauriEvent(e,i)?()=>{const l=this.listeners[e];l.splice(l.indexOf(i),1)}:$(e,i,{target:{kind:"Window",label:this.label}})}async once(e,i){return this._handleTauriEvent(e,i)?()=>{const l=this.listeners[e];l.splice(l.indexOf(i),1)}:ae(e,i,{target:{kind:"Window",label:this.label}})}async emit(e,i){if(E.includes(e)){for(const l of this.listeners[e]||[])l({event:e,id:-1,payload:i});return}return se(e,i)}async emitTo(e,i,l){if(E.includes(i)){for(const s of this.listeners[i]||[])s({event:i,id:-1,payload:l});return}return oe(e,i,l)}_handleTauriEvent(e,i){return E.includes(e)?(e in this.listeners?this.listeners[e].push(i):this.listeners[e]=[i],!0):!1}async scaleFactor(){return a("plugin:window|scale_factor",{label:this.label})}async innerPosition(){return a("plugin:window|inner_position",{label:this.label}).then(e=>new b(e))}async outerPosition(){return a("plugin:window|outer_position",{label:this.label}).then(e=>new b(e))}async innerSize(){return a("plugin:window|inner_size",{label:this.label}).then(e=>new p(e))}async outerSize(){return a("plugin:window|outer_size",{label:this.label}).then(e=>new p(e))}async isFullscreen(){return a("plugin:window|is_fullscreen",{label:this.label})}async isMinimized(){return a("plugin:window|is_minimized",{label:this.label})}async isMaximized(){return a("plugin:window|is_maximized",{label:this.label})}async isFocused(){return a("plugin:window|is_focused",{label:this.label})}async isDecorated(){return a("plugin:window|is_decorated",{label:this.label})}async isResizable(){return a("plugin:window|is_resizable",{label:this.label})}async isMaximizable(){return a("plugin:window|is_maximizable",{label:this.label})}async isMinimizable(){return a("plugin:window|is_minimizable",{label:this.label})}async isClosable(){return a("plugin:window|is_closable",{label:this.label})}async isVisible(){return a("plugin:window|is_visible",{label:this.label})}async title(){return a("plugin:window|title",{label:this.label})}async theme(){return a("plugin:window|theme",{label:this.label})}async isAlwaysOnTop(){return a("plugin:window|is_always_on_top",{label:this.label})}async center(){return a("plugin:window|center",{label:this.label})}async requestUserAttention(e){let i=null;return e&&(e===x.Critical?i={type:"Critical"}:i={type:"Informational"}),a("plugin:window|request_user_attention",{label:this.label,value:i})}async setResizable(e){return a("plugin:window|set_resizable",{label:this.label,value:e})}async setEnabled(e){return a("plugin:window|set_enabled",{label:this.label,value:e})}async isEnabled(){return a("plugin:window|is_enabled",{label:this.label})}async setMaximizable(e){return a("plugin:window|set_maximizable",{label:this.label,value:e})}async setMinimizable(e){return a("plugin:window|set_minimizable",{label:this.label,value:e})}async setClosable(e){return a("plugin:window|set_closable",{label:this.label,value:e})}async setTitle(e){return a("plugin:window|set_title",{label:this.label,value:e})}async maximize(){return a("plugin:window|maximize",{label:this.label})}async unmaximize(){return a("plugin:window|unmaximize",{label:this.label})}async toggleMaximize(){return a("plugin:window|toggle_maximize",{label:this.label})}async minimize(){return a("plugin:window|minimize",{label:this.label})}async unminimize(){return a("plugin:window|unminimize",{label:this.label})}async show(){return a("plugin:window|show",{label:this.label})}async hide(){return a("plugin:window|hide",{label:this.label})}async close(){return a("plugin:window|close",{label:this.label})}async destroy(){return a("plugin:window|destroy",{label:this.label})}async setDecorations(e){return a("plugin:window|set_decorations",{label:this.label,value:e})}async setShadow(e){return a("plugin:window|set_shadow",{label:this.label,value:e})}async setEffects(e){return a("plugin:window|set_effects",{label:this.label,value:e})}async clearEffects(){return a("plugin:window|set_effects",{label:this.label,value:null})}async setAlwaysOnTop(e){return a("plugin:window|set_always_on_top",{label:this.label,value:e})}async setAlwaysOnBottom(e){return a("plugin:window|set_always_on_bottom",{label:this.label,value:e})}async setContentProtected(e){return a("plugin:window|set_content_protected",{label:this.label,value:e})}async setSize(e){return a("plugin:window|set_size",{label:this.label,value:e instanceof w?e:new w(e)})}async setMinSize(e){return a("plugin:window|set_min_size",{label:this.label,value:e instanceof w?e:e?new w(e):null})}async setMaxSize(e){return a("plugin:window|set_max_size",{label:this.label,value:e instanceof w?e:e?new w(e):null})}async setSizeConstraints(e){function i(l){return l?{Logical:l}:null}return a("plugin:window|set_size_constraints",{label:this.label,value:{minWidth:i(e?.minWidth),minHeight:i(e?.minHeight),maxWidth:i(e?.maxWidth),maxHeight:i(e?.maxHeight)}})}async setPosition(e){return a("plugin:window|set_position",{label:this.label,value:e instanceof _?e:new _(e)})}async setFullscreen(e){return a("plugin:window|set_fullscreen",{label:this.label,value:e})}async setSimpleFullscreen(e){return a("plugin:window|set_simple_fullscreen",{label:this.label,value:e})}async setFocus(){return a("plugin:window|set_focus",{label:this.label})}async setFocusable(e){return a("plugin:window|set_focusable",{label:this.label,value:e})}async setIcon(e){return a("plugin:window|set_icon",{label:this.label,value:C(e)})}async setSkipTaskbar(e){return a("plugin:window|set_skip_taskbar",{label:this.label,value:e})}async setCursorGrab(e){return a("plugin:window|set_cursor_grab",{label:this.label,value:e})}async setCursorVisible(e){return a("plugin:window|set_cursor_visible",{label:this.label,value:e})}async setCursorIcon(e){return a("plugin:window|set_cursor_icon",{label:this.label,value:e})}async setBackgroundColor(e){return a("plugin:window|set_background_color",{color:e})}async setCursorPosition(e){return a("plugin:window|set_cursor_position",{label:this.label,value:e instanceof _?e:new _(e)})}async setIgnoreCursorEvents(e){return a("plugin:window|set_ignore_cursor_events",{label:this.label,value:e})}async startDragging(){return a("plugin:window|start_dragging",{label:this.label})}async startResizeDragging(e){return a("plugin:window|start_resize_dragging",{label:this.label,value:e})}async setBadgeCount(e){return a("plugin:window|set_badge_count",{label:this.label,value:e})}async setBadgeLabel(e){return a("plugin:window|set_badge_label",{label:this.label,value:e})}async setOverlayIcon(e){return a("plugin:window|set_overlay_icon",{label:this.label,value:e?C(e):void 0})}async setProgressBar(e){return a("plugin:window|set_progress_bar",{label:this.label,value:e})}async setVisibleOnAllWorkspaces(e){return a("plugin:window|set_visible_on_all_workspaces",{label:this.label,value:e})}async setTitleBarStyle(e){return a("plugin:window|set_title_bar_style",{label:this.label,value:e})}async setTheme(e){return a("plugin:window|set_theme",{label:this.label,value:e})}async onResized(e){return this.listen(u.WINDOW_RESIZED,i=>{i.payload=new p(i.payload),e(i)})}async onMoved(e){return this.listen(u.WINDOW_MOVED,i=>{i.payload=new b(i.payload),e(i)})}async onCloseRequested(e){return this.listen(u.WINDOW_CLOSE_REQUESTED,async i=>{const l=new re(i);await e(l),l.isPreventDefault()||await this.destroy()})}async onDragDropEvent(e){const i=await this.listen(u.DRAG_ENTER,o=>{e({...o,payload:{type:"enter",paths:o.payload.paths,position:new b(o.payload.position)}})}),l=await this.listen(u.DRAG_OVER,o=>{e({...o,payload:{type:"over",position:new b(o.payload.position)}})}),s=await this.listen(u.DRAG_DROP,o=>{e({...o,payload:{type:"drop",paths:o.payload.paths,position:new b(o.payload.position)}})}),c=await this.listen(u.DRAG_LEAVE,o=>{e({...o,payload:{type:"leave"}})});return()=>{i(),s(),l(),c()}}async onFocusChanged(e){const i=await this.listen(u.WINDOW_FOCUS,s=>{e({...s,payload:!0})}),l=await this.listen(u.WINDOW_BLUR,s=>{e({...s,payload:!1})});return()=>{i(),l()}}async onScaleChanged(e){return this.listen(u.WINDOW_SCALE_FACTOR_CHANGED,e)}async onThemeChanged(e){return this.listen(u.WINDOW_THEME_CHANGED,e)}}var O;(function(t){t.Disabled="disabled",t.Throttle="throttle",t.Suspend="suspend"})(O||(O={}));var T;(function(t){t.Default="default",t.FluentOverlay="fluentOverlay"})(T||(T={}));var R;(function(t){t.AppearanceBased="appearanceBased",t.Light="light",t.Dark="dark",t.MediumLight="mediumLight",t.UltraDark="ultraDark",t.Titlebar="titlebar",t.Selection="selection",t.Menu="menu",t.Popover="popover",t.Sidebar="sidebar",t.HeaderView="headerView",t.Sheet="sheet",t.WindowBackground="windowBackground",t.HudWindow="hudWindow",t.FullScreenUI="fullScreenUI",t.Tooltip="tooltip",t.ContentBackground="contentBackground",t.UnderWindowBackground="underWindowBackground",t.UnderPageBackground="underPageBackground",t.Mica="mica",t.Blur="blur",t.Acrylic="acrylic",t.Tabbed="tabbed",t.TabbedDark="tabbedDark",t.TabbedLight="tabbedLight"})(R||(R={}));var P;(function(t){t.FollowsWindowActiveState="followsWindowActiveState",t.Active="active",t.Inactive="inactive"})(P||(P={})),typeof SuppressedError=="function"&&SuppressedError;async function ce(t,e={},i){return window.__TAURI_INTERNALS__.invoke(t,e,i)}async function de(t){try{return await ce("plugin:vicons|get_icon",{name:t})}catch(e){console.error("[Icon Error] Error obteniendo icono:",e)}return""}function ue(t){try{const e=atob(t.substring(0,32)),i=new Uint8Array(e.length);for(let l=0;l<e.length;l++)i[l]=e.charCodeAt(l);return i[0]===137&&i[1]===80&&i[2]===78&&i[3]===71?"image/png":"image/svg+xml"}catch(e){return console.error("Error identificando tipo de imagen:",e),"image/png"}}async function S(t){try{const e=await de(t);return`data:${ue(e)};base64,${e}`}catch(e){return console.error("[Icon Error] Error obteniendo icono:",e),""}}const he={"data-tauri-drag-region":""},me=["src","alt"],be={"data-tauri-drag-region":""},ge={"data-tauri-drag-region":""},we=["src"],ye=["src"],pe=["src"],fe=n.defineComponent({__name:"TopBar",props:{title:String,image:String},setup(t){const e=n.ref(null),i=V(),l=n.ref(""),s=n.ref(""),c=n.ref(""),o=t;return n.onMounted(async()=>{l.value=await S("window-close"),s.value=await S("window-minimize"),c.value=await S("window-maximize")}),(m,d)=>(n.openBlock(),n.createElementBlock("div",{"data-tauri-drag-region":"",class:"flex h-8 px-4 py-1 bg-primary dark:bg-primary-dark rounded-t-corner-window justify-between align-center",ref_key:"bar",ref:e},[n.createElementVNode("div",he,[n.createElementVNode("img",{src:o.image,"data-tauri-drag-region":"",class:"h-6 w-auto",alt:o.title},null,8,me)]),n.createElementVNode("div",be,n.toDisplayString(o.title),1),n.createElementVNode("div",ge,[n.createElementVNode("span",{class:"win-button",onClick:d[0]||(d[0]=g=>n.unref(i).minimize())},[n.createElementVNode("img",{src:s.value,class:"h-6 w-6 inline-block",alt:"Minimize"},null,8,we)]),n.createElementVNode("span",{class:"win-button",onClick:d[1]||(d[1]=g=>n.unref(i).toggleMaximize())},[n.createElementVNode("img",{src:c.value,class:"h-6 w-6 inline-block",alt:"Maximize"},null,8,ye)]),n.createElementVNode("span",{class:"win-button",onClick:d[2]||(d[2]=g=>n.unref(i).close())},[n.createElementVNode("img",{src:l.value,class:"h-6 w-6 inline-block",alt:"Close"},null,8,pe)])])],512))}}),v=n.defineComponent({__name:"WindowFrame",props:{title:{type:String,default:"Vasak"},image:{type:String,default:""}},setup(t){const e=t;return(i,l)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(fe,{title:e.title,image:e.image},null,8,["title","image"]),n.renderSlot(i.$slots,"default")],64))}}),ke=["type","disabled"],_e={key:0,class:"w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"},Ce=["src","alt"],xe={key:2},Be=["src","alt"],M=y(n.defineComponent({__name:"ActionButton",props:{label:{},disabled:{type:Boolean,default:!1},variant:{default:"primary"},loading:{type:Boolean,default:!1},customClass:{default:()=>({})},size:{default:"md"},fullWidth:{type:Boolean,default:!1},iconSrc:{default:""},iconAlt:{default:""},iconRight:{type:Boolean,default:!1},type:{default:"button"},stopPropagation:{type:Boolean,default:!1},preventDefault:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:e}){const i=t,l=e,s={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"},c={sm:"px-2 py-1 text-xs",md:"px-3 py-1 text-sm",lg:"px-4 py-2 text-base"},o=m=>{i.stopPropagation&&m.stopPropagation(),i.preventDefault&&m.preventDefault(),!i.disabled&&!i.loading&&l("click")};return(m,d)=>(n.openBlock(),n.createElementBlock("button",{type:i.type,onClick:o,class:n.normalizeClass(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",[s[i.variant],c[i.size],i.fullWidth?"w-full":"",i.iconSrc&&!i.label?"px-2 py-2":"",t.customClass]]),disabled:i.disabled||i.loading},[t.loading?(n.openBlock(),n.createElementBlock("span",_e)):n.createCommentVNode("",!0),i.iconSrc&&!i.iconRight?(n.openBlock(),n.createElementBlock("img",{key:1,src:i.iconSrc,alt:i.iconAlt||i.label,class:"w-4 h-4"},null,8,Ce)):n.createCommentVNode("",!0),i.label?(n.openBlock(),n.createElementBlock("span",xe,n.toDisplayString(i.label),1)):n.createCommentVNode("",!0),i.iconSrc&&i.iconRight?(n.openBlock(),n.createElementBlock("img",{key:3,src:i.iconSrc,alt:i.iconAlt||i.label,class:"w-4 h-4"},null,8,Be)):n.createCommentVNode("",!0)],10,ke))}}),[["__scopeId","data-v-2eaf6e27"]]),Ee={class:"text-base font-semibold m-0 text-primary dark:text-primary-dark"},F=y(n.defineComponent({__name:"ConfigSection",props:{title:{},icon:{default:""},customClass:{default:()=>({})}},setup(t){return(e,i)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["flex flex-col gap-4 p-4 background rounded-corner",t.customClass])},[n.createElementVNode("h3",Ee,n.toDisplayString(t.icon?`${t.icon} ${t.title}`:t.title),1),n.renderSlot(e.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-45bd4eab"]]),Se={class:"flex items-center gap-3 flex-1 min-w-0"},ze=["src","alt"],Ne={class:"min-w-0"},De={class:"font-semibold truncate"},Ie={key:0,class:"text-xs text-gray-400 truncate"},Ae={key:1,class:"text-xs text-gray-400 truncate"},$e={key:2,class:"text-xs text-gray-400 flex gap-2 mt-1"},We={key:1,class:"w-2 h-2 rounded-full bg-green-500"},U=n.defineComponent({__name:"DeviceCard",props:{icon:{},title:{},subtitle:{default:""},metadata:{default:""},extraInfo:{default:()=>[]},isConnected:{type:Boolean,default:!1},showActionButton:{type:Boolean,default:!0},actionLabel:{default:"Conectar"},showStatusIndicator:{type:Boolean,default:!1},customClass:{default:""},clickable:{type:Boolean,default:!1}},emits:["action","click"],setup(t,{emit:e}){const i=e,l=()=>{i("action")},s=()=>{i("click")};return(c,o)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4",[{"border-l-4 border-green-500":t.isConnected},t.customClass]]),onClick:s},[n.createElementVNode("div",Se,[n.createElementVNode("img",{src:t.icon,alt:t.title,class:"h-7 w-7 shrink-0"},null,8,ze),n.createElementVNode("div",Ne,[n.createElementVNode("div",De,n.toDisplayString(t.title),1),t.subtitle?(n.openBlock(),n.createElementBlock("div",Ie,n.toDisplayString(t.subtitle),1)):n.createCommentVNode("",!0),t.metadata?(n.openBlock(),n.createElementBlock("div",Ae,n.toDisplayString(t.metadata),1)):n.createCommentVNode("",!0),t.extraInfo&&t.extraInfo.length>0?(n.openBlock(),n.createElementBlock("div",$e,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(t.extraInfo,(m,d)=>(n.openBlock(),n.createElementBlock("span",{key:d},n.toDisplayString(m),1))),128))])):n.createCommentVNode("",!0)])]),t.showActionButton?(n.openBlock(),n.createElementBlock("button",{key:0,class:"bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",onClick:n.withModifiers(l,["stop"])},n.toDisplayString(t.actionLabel),1)):n.createCommentVNode("",!0),t.showStatusIndicator&&t.isConnected?(n.openBlock(),n.createElementBlock("div",We)):n.createCommentVNode("",!0)],2))}}),Ve=["for"],G=y(n.defineComponent({__name:"FormGroup",props:{label:{},htmlFor:{default:""},customClass:{default:()=>({})},labelClass:{default:()=>({})}},setup(t){return(e,i)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["flex flex-col gap-2",t.customClass])},[t.label?(n.openBlock(),n.createElementBlock("label",{key:0,for:t.htmlFor,class:n.normalizeClass(["text-sm font-medium text-primary dark:text-primary-dark",t.labelClass])},n.toDisplayString(t.label),11,Ve)):n.createCommentVNode("",!0),n.renderSlot(e.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-c0d9d9cb"]]),j=y(n.defineComponent({__name:"ListCard",props:{clickable:{type:Boolean,default:!1},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:e}){const i=t,l=e,s=()=>{i.clickable&&l("click")};return(c,o)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["flex items-center justify-between background p-3 rounded-vsk border border-vsk-primary/70 transition-colors duration-200",{"hover:bg-vsk-primary/5 cursor-pointer":i.clickable},t.customClass]),onClick:s},[n.renderSlot(c.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-f86d47da"]]),Le={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"},Oe=["src","alt","title"],Te={key:1,class:"w-8 h-8 flex items-center justify-center"},Re=["src","alt"],Pe=["min","max","value"],H=n.defineComponent({__name:"SliderControl",props:{icon:{},alt:{default:""},tooltip:{default:""},modelValue:{},min:{default:0},max:{default:100},showButton:{type:Boolean,default:!1},iconClass:{default:()=>({})},getPercentageClass:{type:Function,default:()=>""}},emits:["update:modelValue","buttonClick"],setup(t,{emit:e}){const i=t,l=e,s=n.computed(()=>{if(i.max<=i.min)return 0;const d=i.max-i.min,g=i.modelValue-i.min;return Math.round(g/d*100)}),c=n.computed(()=>i.getPercentageClass?i.getPercentageClass(s.value):""),o=d=>{const g=d.target;l("update:modelValue",Number(g.value))},m=()=>{l("buttonClick")};return(d,g)=>(n.openBlock(),n.createElementBlock("div",Le,[t.showButton?(n.openBlock(),n.createElementBlock("button",{key:0,onClick:m,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"},[n.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:n.normalizeClass(["w-6 h-6 transition-all duration-200",t.iconClass])},null,10,Oe)])):(n.openBlock(),n.createElementBlock("div",Te,[n.createElementVNode("img",{src:t.icon,alt:t.alt,class:"w-6 h-6 transition-all duration-200"},null,8,Re)])),n.createElementVNode("input",{type:"range",min:t.min,max:t.max,value:t.modelValue,onInput:o,class:"flex-1 transition-all duration-200 hover:scale-105"},null,40,Pe),n.createElementVNode("span",{class:n.normalizeClass(["w-12 text-right transition-all duration-200 font-medium",c.value])},n.toDisplayString(s.value)+"% ",3)]))}}),ve=["disabled"],q=n.defineComponent({__name:"SwitchToggle",props:{isOn:{type:Boolean},disabled:{type:Boolean,default:!1},size:{default:"small"},activeClass:{default:"bg-primary dark:bg-primary-dark"},inactiveClass:{default:"background"},customClass:{default:""}},emits:["toggle"],setup(t,{emit:e}){const i=t,l=e,s=()=>{l("toggle",!i.isOn)};return(c,o)=>(n.openBlock(),n.createElementBlock("button",{type:"button",onClick:s,disabled:t.disabled,class:n.normalizeClass(["relative inline-flex items-center rounded-full transition-colors",t.size==="small"?"h-6 w-11":"h-7 w-12",t.isOn?t.activeClass:t.inactiveClass,t.disabled?"opacity-50 cursor-not-allowed":"cursor-pointer",t.customClass])},[n.createElementVNode("span",{class:n.normalizeClass(["inline-block transform rounded-full bg-white shadow transition-transform",t.size==="small"?"h-4 w-4":"h-6 w-6",t.isOn?t.size==="small"?"translate-x-6":"translate-x-5":"translate-x-1"])},null,2)],10,ve))}}),Me=["disabled"],Fe=["src","alt","title"],J=n.defineComponent({__name:"ToggleControl",props:{icon:{},alt:{default:""},tooltip:{default:""},isActive:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},iconClass:{default:()=>({})},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:e}){const i=e,l=()=>{i("click")};return(s,c)=>(n.openBlock(),n.createElementBlock("button",{onClick:l,class:n.normalizeClass(["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":t.isLoading,"ring-2 ring-primary dark:ring-primary-dark":t.isActive,"opacity-60":!t.isActive,...t.customClass}]),disabled:t.isLoading},[n.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:n.normalizeClass(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10",{"animate-spin":t.isLoading,"filter brightness-75":!t.isActive,"drop-shadow-lg":t.isActive,...t.iconClass}])},null,10,Fe)],10,Me))}}),Ue=["title"],Ge=["src","alt"],je={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"},Z=n.defineComponent({__name:"TrayIconButton",props:{icon:{},alt:{default:""},tooltip:{default:""},badge:{default:null},iconClass:{default:()=>({})},customClass:{default:""},tooltipClass:{default:""},showCustomTooltip:{type:Boolean,default:!1},customTooltipText:{default:""}},emits:["click"],setup(t,{emit:e}){const i=e,l=n.ref(!1),s=()=>{i("click")};return(c,o)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300",t.customClass]),title:t.tooltip,onClick:s,onMouseenter:o[0]||(o[0]=m=>l.value=!0),onMouseleave:o[1]||(o[1]=m=>l.value=!1)},[n.createElementVNode("img",{src:t.icon,alt:t.alt,class:n.normalizeClass(["m-auto h-5.5 w-auto transition-all duration-300",t.iconClass])},null,10,Ge),t.badge!==null&&t.badge>0?(n.openBlock(),n.createElementBlock("div",je,n.toDisplayString(t.badge),1)):n.createCommentVNode("",!0),t.showCustomTooltip&&t.customTooltipText?(n.openBlock(),n.createElementBlock("div",{key:1,class:n.normalizeClass(["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",[t.tooltipClass,{"opacity-0 -translate-y-2":!l.value,"opacity-100 translate-y-0":l.value}]])},n.toDisplayString(t.customTooltipText),3)):n.createCommentVNode("",!0),n.renderSlot(c.$slots,"default")],42,Ue))}}),He=[z,N,v,M,F,U,G,j,H,q,J,Z],qe={install(t){He.forEach(e=>{t.component(e.name,e)})}};r.ActionButton=M,r.ConfigSection=F,r.DeviceCard=U,r.FormGroup=G,r.ListCard=j,r.SideBar=z,r.SideButton=N,r.SliderControl=H,r.SwitchToggle=q,r.ToggleControl=J,r.TrayIconButton=Z,r.WindowFrame=v,r.default=qe,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vasakgroup/plugin-vicons"),require("@tauri-apps/api/event"),require("@tauri-apps/api/window")):typeof define=="function"&&define.amd?define(["exports","vue","@vasakgroup/plugin-vicons","@tauri-apps/api/event","@tauri-apps/api/window"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.VueLibVasak={},s.Vue,s.VasakVicons,s.TauriEvent,s.TauriWindow))})(this,(function(s,e,b,I,L){"use strict";const j={class:"flex flex-col gap-2"},A=["aria-expanded"],M={key:1,class:"flex flex-col gap-1"},g=e.defineComponent({__name:"SideGroup",props:{title:{},collapsed:{type:Boolean,default:!1},defaultOpen:{type:Boolean,default:!0}},setup(t){const n=t,a=e.ref(n.defaultOpen);return e.watch(()=>n.collapsed,l=>{l&&(a.value=!0)}),(l,i)=>(e.openBlock(),e.createElementBlock("section",j,[t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("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":a.value,onClick:i[0]||(i[0]=r=>a.value=!a.value)},[e.createElementVNode("span",null,e.toDisplayString(t.title),1),e.createElementVNode("span",{class:e.normalizeClass(["text-[10px] transition-transform duration-200",a.value?"rotate-180":""])}," v ",2)],8,A)),a.value||t.collapsed?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(l.$slots,"default")])):e.createCommentVNode("",!0)]))}}),F=["title","aria-label","disabled","aria-current"],O=["src"],P={key:1},W={key:0,class:"min-w-0 flex-1 truncate font-medium"},G={key:1,class:"rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs"},h=e.defineComponent({__name:"SideButton",props:{label:{},icon:{default:""},active:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},badge:{default:""}},emits:["click"],setup(t){const n=t,a=e.ref(""),l=e.toRef(n,"icon");let i=null,r=!1,c=0;async function d(){const o=++c,m=l.value;if(!m){a.value="";return}const k=await b.getIconSource(m);o===c&&(a.value=k)}return e.onMounted(async()=>{const o=await I.listen("vicons:theme-changed",d);if(r){o();return}i=o,await d()}),e.onUnmounted(()=>{r=!0,i?.()}),e.watch(l,d),(o,m)=>(e.openBlock(),e.createElementBlock("button",{type:"button",title:t.collapsed?t.label:void 0,"aria-label":t.collapsed?t.label:void 0,disabled:t.disabled,"aria-current":t.active?"page":void 0,class:e.normalizeClass(["group relative flex w-full items-center gap-3 rounded-corner border px-3 py-2 text-left text-sm transition-all duration-200",[t.active?"border-secondary bg-primary/15 text-tx-main shadow-sm":"border-transparent bg-ui-bg/30 hover:border-ui-border hover:bg-ui-surface/70",t.disabled?"cursor-not-allowed opacity-60":"cursor-pointer",t.collapsed?"justify-center px-2":""]]),onClick:m[0]||(m[0]=k=>o.$emit("click"))},[e.createElementVNode("span",{class:e.normalizeClass(["flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide",t.active?"border-secondary bg-primary/20":""]),"aria-hidden":"true"},[a.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:a.value,alt:"",class:"h-8 w-8 object-contain"},null,8,O)):(e.openBlock(),e.createElementBlock("span",P,e.toDisplayString(t.label.charAt(0).toUpperCase()),1))],2),t.collapsed?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",W,e.toDisplayString(t.label),1)),!t.collapsed&&t.badge!==""?(e.openBlock(),e.createElementBlock("span",G,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0)],10,F))}}),q={key:0,class:"flex flex-col gap-2 border-ui-border border-b p-2"},R={class:"flex items-center gap-2"},U=["aria-label","aria-expanded"],H={key:0,class:"min-w-0 flex-1"},J={key:0,class:"truncate font-semibold text-sm"},K={key:1,class:"truncate text-tx-muted text-xs"},Q={key:0},X={key:1,class:"flex justify-center border-ui-border border-b p-2"},Y=["aria-label","aria-expanded"],Z={class:"flex-1 space-y-3 overflow-y-auto p-2"},x=e.defineComponent({__name:"SideBar",props:{title:{default:""},subtitle:{default:""},categories:{default:()=>[]},modelValue:{default:""},collapsed:{type:Boolean,default:void 0},collapseLabel:{default:"Collapse"},expandLabel:{default:"Expand"}},emits:["update:modelValue","update:collapsed","change"],setup(t,{expose:n,emit:a}){const l=t,i=a,r=e.ref(l.collapsed??!1),c=e.ref(!1);let d=null;const o=e.computed(()=>c.value||r.value),m=e.computed(()=>!!(l.title||l.subtitle));e.computed(()=>l.categories.length>0);function k(){c.value=d?.matches??!1}function T(){r.value=!r.value,i("update:collapsed",r.value)}function Ae(u){i("update:modelValue",u),i("change",u)}return e.watch(()=>l.collapsed,u=>{u!==void 0&&(r.value=u)}),e.onMounted(()=>{d=window.matchMedia("(max-width: 767px)"),k(),d.addEventListener("change",k)}),e.onBeforeUnmount(()=>d?.removeEventListener("change",k)),n({collapsed:o}),(u,Pe)=>(e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-bg/80 transition-all duration-300",["w-[84px]",o.value?"md:w-[84px]":"md:w-72"]])},[m.value||u.$slots.header?(e.openBlock(),e.createElementBlock("header",q,[e.createElementVNode("div",R,[e.createElementVNode("button",{type:"button",class:"hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex","aria-label":o.value?t.expandLabel:t.collapseLabel,"aria-expanded":!o.value,onClick:T},e.toDisplayString(o.value?">":"<"),9,U),m.value&&!o.value?(e.openBlock(),e.createElementBlock("div",H,[t.title?(e.openBlock(),e.createElementBlock("p",J,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),t.subtitle?(e.openBlock(),e.createElementBlock("p",K,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),u.$slots.header&&!o.value?(e.openBlock(),e.createElementBlock("div",Q,[e.renderSlot(u.$slots,"header",{collapsed:o.value})])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("button",{type:"button",class:"hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex","aria-label":o.value?t.expandLabel:t.collapseLabel,"aria-expanded":!o.value,onClick:T},e.toDisplayString(o.value?">":"<"),9,Y)])),e.createElementVNode("div",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.categories,y=>(e.openBlock(),e.createBlock(g,{key:y.id,title:y.title,collapsed:o.value},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.items,f=>(e.openBlock(),e.createBlock(h,{key:f.id,label:f.label,icon:f.icon,badge:f.badge,disabled:f.disabled,collapsed:o.value,active:t.modelValue===f.id,onClick:We=>Ae(f.id)},null,8,["label","icon","badge","disabled","collapsed","active","onClick"]))),128))]),_:2},1032,["title","collapsed"]))),128)),e.renderSlot(u.$slots,"default",{collapsed:o.value})])],2))}}),_={"data-tauri-drag-region":""},v=["src","alt"],ee={"data-tauri-drag-region":""},te={"data-tauri-drag-region":""},ae=["src"],le=["src"],oe=["src"],ne=e.defineComponent({__name:"TopBar",props:{title:String,image:String},setup(t){const n=e.ref(null),a=L.getCurrentWindow(),l=e.ref(""),i=e.ref(""),r=e.ref(""),c=t;return e.onMounted(async()=>{l.value=await b.getIconSource("window-close"),i.value=await b.getIconSource("window-minimize"),r.value=await b.getIconSource("window-maximize")}),(d,o)=>(e.openBlock(),e.createElementBlock("div",{"data-tauri-drag-region":"",class:"flex h-8 px-4 py-1 bg-primary dark:bg-primary-dark rounded-t-corner-window justify-between align-center",ref_key:"bar",ref:n},[e.createElementVNode("div",_,[e.createElementVNode("img",{src:c.image,"data-tauri-drag-region":"",class:"h-6 w-auto",alt:c.title},null,8,v)]),e.createElementVNode("div",ee,e.toDisplayString(c.title),1),e.createElementVNode("div",te,[e.createElementVNode("span",{class:"win-button",onClick:o[0]||(o[0]=m=>e.unref(a).minimize())},[e.createElementVNode("img",{src:i.value,class:"h-6 w-6 inline-block",alt:"Minimize"},null,8,ae)]),e.createElementVNode("span",{class:"win-button",onClick:o[1]||(o[1]=m=>e.unref(a).toggleMaximize())},[e.createElementVNode("img",{src:r.value,class:"h-6 w-6 inline-block",alt:"Maximize"},null,8,le)]),e.createElementVNode("span",{class:"win-button",onClick:o[2]||(o[2]=m=>e.unref(a).close())},[e.createElementVNode("img",{src:l.value,class:"h-6 w-6 inline-block",alt:"Close"},null,8,oe)])])],512))}}),C=e.defineComponent({__name:"WindowFrame",props:{title:{default:"Vasak"},image:{default:""}},setup(t){const n=t;return(a,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(ne,{title:n.title,image:n.image},null,8,["title","image"]),e.renderSlot(a.$slots,"default")],64))}}),ie=["type","disabled"],se={key:0,class:"w-4 h-4 animate-spin rounded-full border-2 border-current border-t-transparent"},re=["src","alt"],ce={key:2},de=["src","alt"],me=e.defineComponent({__name:"ActionButton",props:{label:{},disabled:{type:Boolean,default:!1},variant:{default:"primary"},loading:{type:Boolean,default:!1},customClass:{default:()=>({})},size:{default:"md"},fullWidth:{type:Boolean,default:!1},iconSrc:{default:""},iconAlt:{default:""},iconRight:{type:Boolean,default:!1},type:{default:"button"},stopPropagation:{type:Boolean,default:!1},preventDefault:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:n}){const a=t,l=n,i={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={sm:"px-2 py-1 text-xs",md:"px-3 py-1 text-sm",lg:"px-4 py-2 text-base"},c=d=>{a.stopPropagation&&d.stopPropagation(),a.preventDefault&&d.preventDefault(),!a.disabled&&!a.loading&&l("click")};return(d,o)=>(e.openBlock(),e.createElementBlock("button",{type:a.type,onClick:c,class:e.normalizeClass(["rounded-corner transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",[i[a.variant],r[a.size],a.fullWidth?"w-full":"",a.iconSrc&&!a.label?"px-2 py-2":"",t.customClass]]),disabled:a.disabled||a.loading},[t.loading?(e.openBlock(),e.createElementBlock("span",se)):e.createCommentVNode("",!0),a.iconSrc&&!a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:1,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,re)):e.createCommentVNode("",!0),a.label?(e.openBlock(),e.createElementBlock("span",ce,e.toDisplayString(a.label),1)):e.createCommentVNode("",!0),a.iconSrc&&a.iconRight?(e.openBlock(),e.createElementBlock("img",{key:3,src:a.iconSrc,alt:a.iconAlt||a.label,class:"w-4 h-4"},null,8,de)):e.createCommentVNode("",!0)],10,ie))}}),p=(t,n)=>{const a=t.__vccOpts||t;for(const[l,i]of n)a[l]=i;return a},B=p(me,[["__scopeId","data-v-2eaf6e27"]]),ue={class:"text-base font-semibold m-0 text-primary dark:text-primary-dark"},w=p(e.defineComponent({__name:"ConfigSection",props:{title:{},icon:{default:""},customClass:{default:()=>({})}},setup(t){return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-4 p-4 background rounded-corner",t.customClass])},[e.createElementVNode("h3",ue,e.toDisplayString(t.icon?`${t.icon} ${t.title}`:t.title),1),e.renderSlot(n.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-45bd4eab"]]),fe={class:"flex items-center gap-3 flex-1 min-w-0"},ke=["src","alt"],be={class:"min-w-0"},pe={class:"font-semibold truncate"},ge={key:0,class:"text-xs text-gray-400 truncate"},he={key:1,class:"text-xs text-gray-400 truncate"},ye={key:2,class:"text-xs text-gray-400 flex gap-2 mt-1"},xe={key:1,class:"w-2 h-2 rounded-full bg-green-500"},E=e.defineComponent({__name:"DeviceCard",props:{icon:{},title:{},subtitle:{default:""},metadata:{default:""},extraInfo:{default:()=>[]},isConnected:{type:Boolean,default:!1},showActionButton:{type:Boolean,default:!0},actionLabel:{default:"Conectar"},showStatusIndicator:{type:Boolean,default:!1},customClass:{default:""},clickable:{type:Boolean,default:!1}},emits:["action","click"],setup(t,{emit:n}){const a=n,l=()=>{a("action")},i=()=>{a("click")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex items-center justify-between background rounded-vsk px-6 py-3 mb-4",[{"border-l-4 border-green-500":t.isConnected},t.customClass]]),onClick:i},[e.createElementVNode("div",fe,[e.createElementVNode("img",{src:t.icon,alt:t.title,class:"h-7 w-7 shrink-0"},null,8,ke),e.createElementVNode("div",be,[e.createElementVNode("div",pe,e.toDisplayString(t.title),1),t.subtitle?(e.openBlock(),e.createElementBlock("div",ge,e.toDisplayString(t.subtitle),1)):e.createCommentVNode("",!0),t.metadata?(e.openBlock(),e.createElementBlock("div",he,e.toDisplayString(t.metadata),1)):e.createCommentVNode("",!0),t.extraInfo&&t.extraInfo.length>0?(e.openBlock(),e.createElementBlock("div",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.extraInfo,(d,o)=>(e.openBlock(),e.createElementBlock("span",{key:o},e.toDisplayString(d),1))),128))])):e.createCommentVNode("",!0)])]),t.showActionButton?(e.openBlock(),e.createElementBlock("button",{key:0,class:"bg-vsk-primary rounded-vsk px-4 py-2 text-sm font-semibold cursor-pointer hover:opacity-70",onClick:e.withModifiers(l,["stop"])},e.toDisplayString(t.actionLabel),1)):e.createCommentVNode("",!0),t.showStatusIndicator&&t.isConnected?(e.openBlock(),e.createElementBlock("div",xe)):e.createCommentVNode("",!0)],2))}}),Ce=["for"],$=p(e.defineComponent({__name:"FormGroup",props:{label:{},htmlFor:{default:""},customClass:{default:()=>({})},labelClass:{default:()=>({})}},setup(t){return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-col gap-2",t.customClass])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:t.htmlFor,class:e.normalizeClass(["text-sm font-medium text-primary dark:text-primary-dark",t.labelClass])},e.toDisplayString(t.label),11,Ce)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-c0d9d9cb"]]),V=p(e.defineComponent({__name:"ListCard",props:{clickable:{type:Boolean,default:!1},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:n}){const a=t,l=n,i=()=>{a.clickable&&l("click")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["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":a.clickable},t.customClass]),onClick:i},[e.renderSlot(r.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-f86d47da"]]),Be={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"},we=["src","alt","title"],Ee={key:1,class:"w-8 h-8 flex items-center justify-center"},$e=["src","alt"],Ve=["min","max","value"],S=e.defineComponent({__name:"SliderControl",props:{icon:{},alt:{default:""},tooltip:{default:""},modelValue:{},min:{default:0},max:{default:100},showButton:{type:Boolean,default:!1},iconClass:{default:()=>({})},getPercentageClass:{type:Function,default:()=>""}},emits:["update:modelValue","buttonClick"],setup(t,{emit:n}){const a=t,l=n,i=e.computed(()=>{if(a.max<=a.min)return 0;const o=a.max-a.min,m=a.modelValue-a.min;return Math.round(m/o*100)}),r=e.computed(()=>a.getPercentageClass?a.getPercentageClass(i.value):""),c=o=>{const m=o.target;l("update:modelValue",Number(m.value))},d=()=>{l("buttonClick")};return(o,m)=>(e.openBlock(),e.createElementBlock("div",Be,[t.showButton?(e.openBlock(),e.createElementBlock("button",{key:0,onClick:d,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"},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["w-6 h-6 transition-all duration-200",t.iconClass])},null,10,we)])):(e.openBlock(),e.createElementBlock("div",Ee,[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:"w-6 h-6 transition-all duration-200"},null,8,$e)])),e.createElementVNode("input",{type:"range",min:t.min,max:t.max,value:t.modelValue,onInput:c,class:"flex-1 transition-all duration-200 hover:scale-105"},null,40,Ve),e.createElementVNode("span",{class:e.normalizeClass(["w-12 text-right transition-all duration-200 font-medium",r.value])},e.toDisplayString(i.value)+"% ",3)]))}}),Se=["disabled"],N=e.defineComponent({__name:"SwitchToggle",props:{isOn:{type:Boolean},disabled:{type:Boolean,default:!1},size:{default:"small"},activeClass:{default:"bg-primary dark:bg-primary-dark"},inactiveClass:{default:"background"},customClass:{default:""}},emits:["toggle"],setup(t,{emit:n}){const a=t,l=n,i=()=>{l("toggle",!a.isOn)};return(r,c)=>(e.openBlock(),e.createElementBlock("button",{type:"button",onClick:i,disabled:t.disabled,class:e.normalizeClass(["relative inline-flex items-center rounded-full transition-colors",t.size==="small"?"h-6 w-11":"h-7 w-12",t.isOn?t.activeClass:t.inactiveClass,t.disabled?"opacity-50 cursor-not-allowed":"cursor-pointer",t.customClass])},[e.createElementVNode("span",{class:e.normalizeClass(["inline-block transform rounded-full bg-white shadow transition-transform",t.size==="small"?"h-4 w-4":"h-6 w-6",t.isOn?t.size==="small"?"translate-x-6":"translate-x-5":"translate-x-1"])},null,2)],10,Se))}}),Ne=["disabled"],ze=["src","alt","title"],z=e.defineComponent({__name:"ToggleControl",props:{icon:{},alt:{default:""},tooltip:{default:""},isActive:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},iconClass:{default:()=>({})},customClass:{default:()=>({})}},emits:["click"],setup(t,{emit:n}){const a=n,l=()=>{a("click")};return(i,r)=>(e.openBlock(),e.createElementBlock("button",{onClick:l,class:e.normalizeClass(["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":t.isLoading,"ring-2 ring-primary dark:ring-primary-dark":t.isActive,"opacity-60":!t.isActive,...t.customClass}]),disabled:t.isLoading},[e.createElementVNode("img",{src:t.icon,alt:t.alt,title:t.tooltip,class:e.normalizeClass(["m-auto w-12.5 h-12.5 transition-all duration-300 group-hover:scale-110 relative z-10",{"animate-spin":t.isLoading,"filter brightness-75":!t.isActive,"drop-shadow-lg":t.isActive,...t.iconClass}])},null,10,ze)],10,Ne))}}),De=["title"],Te=["src","alt"],Ie={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"},D=e.defineComponent({__name:"TrayIconButton",props:{icon:{},alt:{default:""},tooltip:{default:""},badge:{default:null},iconClass:{default:()=>({})},customClass:{default:""},tooltipClass:{default:""},showCustomTooltip:{type:Boolean,default:!1},customTooltipText:{default:""}},emits:["click"],setup(t,{emit:n}){const a=n,l=e.ref(!1),i=()=>{a("click")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["p-1 rounded-corner relative hover:bg-primary dark:hover:bg-primary-dark group transition-all duration-300",t.customClass]),title:t.tooltip,onClick:i,onMouseenter:c[0]||(c[0]=d=>l.value=!0),onMouseleave:c[1]||(c[1]=d=>l.value=!1)},[e.createElementVNode("img",{src:t.icon,alt:t.alt,class:e.normalizeClass(["m-auto h-5.5 w-auto transition-all duration-300",t.iconClass])},null,10,Te),t.badge!==null&&t.badge>0?(e.openBlock(),e.createElementBlock("div",Ie,e.toDisplayString(t.badge),1)):e.createCommentVNode("",!0),t.showCustomTooltip&&t.customTooltipText?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["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",[t.tooltipClass,{"opacity-0 -translate-y-2":!l.value,"opacity-100 translate-y-0":l.value}]])},e.toDisplayString(t.customTooltipText),3)):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"default")],42,De))}}),Le=[x,h,g,C,B,w,E,$,V,S,N,z,D],je={install(t){Le.forEach(n=>{t.component(n.name,n)})}};s.ActionButton=B,s.ConfigSection=w,s.DeviceCard=E,s.FormGroup=$,s.ListCard=V,s.SideBar=x,s.SideButton=h,s.SideGroup=g,s.SliderControl=S,s.SwitchToggle=N,s.ToggleControl=z,s.TrayIconButton=D,s.WindowFrame=C,s.default=je,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vasakgroup/vue-libvasak",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Vue componenets for VSK Applications",
   "main": "./dist/vue-libvasak.umd.js",
   "module": "./dist/vue-libvasak.es.js",
@@ -11,9 +11,13 @@
   ],
   "exports": {
     ".": {
+      "types": "./src/types/vue-libvasak.d.ts",
       "import": "./dist/vue-libvasak.es.js",
-      "require": "./dist/vue-libvasak.umd.js"
-    }
+      "require": "./dist/vue-libvasak.umd.js",
+      "default": "./dist/vue-libvasak.es.js"
+    },
+    "./style.css": "./dist/vue-libvasak.css",
+    "./package.json": "./package.json"
   },
   "keywords": [
     "vue",
@@ -41,22 +45,30 @@
     "url": "https://joaquindecima.gitlab.io/"
   },
   "license": "GPLv3",
-  "dependencies": {
-    "@tauri-apps/api": "^2.10.1",
-    "@vasakgroup/plugin-vicons": "^2.0.0",
-    "vue": "^3.5.28",
-    "vue-router": "^5.0.3"
-  },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "@tauri-apps/api": "^2.0.0",
+    "@vasakgroup/plugin-vicons": "^2.0.0"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^20.14.5",
+    "@tauri-apps/api": "^2.10.1",
+    "@types/bun": "^1.4.2",
+    "@vasakgroup/plugin-vicons": "^2.0.0",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.5.1",
+    "happy-dom": "^20.14.5",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "@vitejs/plugin-vue": "^6.0.4"
+    "vue": "^3.5.28",
+    "vue-router": "^5.0.3",
+    "vue-tsc": "^3.3.11"
   },
   "scripts": {
-    "build": "vite build",
-    "dev": "vite"
+    "build": "bunx vue-tsc --noEmit && bunx --bun vite build",
+    "dev": "bunx --bun vite",
+    "prepare": "bun run build",
+    "typecheck": "bunx vue-tsc --noEmit",
+    "test": "bun test"
   }
 }

package/readme.md

@@ -0,0 +1,58 @@
+# vue-libvasak
+
+A simple vue components for VSK Applications used in VasakOS. This library is used in [application-template](https://github.com/Vasak-OS/application-template). **Don't work in browser.**
+
+## Installation
+
+```bash
+yarn add @vasakgroup/vue-libvasak
+```
+
+## Use
+
+We can use the components in our application as follows:
+
+### WindowFrame
+
+```vue
+<script lang="ts">
+import { defineComponent } from "vue";
+import { WindowFrame } from "@vasakgroup/vue-libvasak";
+</script>
+
+<template>
+  <WindowFrame title="Hello World" img="file:///home/pato/image.svg">
+    <p>Hello World</p>
+  </WindowFrame>
+</template>
+```
+
+### SideBar
+
+```vue
+<script lang="ts">
+import { defineComponent } from "vue";
+import {
+  SideBar,
+  WindowFrame,
+  SideButton,
+} from "@vasakgroup/vue-libvasak";
+</script>
+
+<template>
+  <WindowFrame title="Hello World">
+    <SideBar>
+      <SideButton url="/" title="Home" image="./home.webp" />
+      <SideButton url="/about" title="About" image="./about.webp" />
+    </SideBar>
+  </WindowFrame>
+</template>
+```
+
+## Contributors
+
+<center>
+  <a href="https://github.com/Vasak-OS/vue-libvasak/graphs/contributors">
+    <img src="https://contrib.rocks/image?repo=Vasak-OS/vue-libvasak" />
+  </a>
+</center>

package/src/index.ts

@@ -1,5 +1,6 @@
 import SideBar from "./sidebar/SideBar.vue";
 import SideButton from "./sidebar/SideButton.vue";
+import SideGroup from "./sidebar/SideGroup.vue";
 import WindowFrame from "./window/WindowFrame.vue";
 import ActionButton from "./controls/ActionButton.vue";
 import ConfigSection from "./layout/ConfigSection.vue";
@@ -15,6 +16,7 @@ import type { App } from "vue";
 const components = [
   SideBar,
   SideButton,
+  SideGroup,
   WindowFrame,
   ActionButton,
   ConfigSection,
@@ -38,6 +40,7 @@ export default {
 export {
   SideBar,
   SideButton,
+  SideGroup,
   WindowFrame,
   ActionButton,
   ConfigSection,
@@ -49,3 +52,5 @@ export {
   ToggleControl,
   TrayIconButton,
 };
+
+export type { SidebarCategory, SidebarItem } from "./sidebar/tipos";

package/src/shims-vue.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Que TypeScript entienda los `.vue`.
+ *
+ * Acá había un `declare module '*'`, que no es un shim: es apagar el chequeo de
+ * **todos** los imports del proyecto y dejarlos en `any`. Con eso, los tipos que
+ * esta librería publica no los comprobaba nadie —ni siquiera contra sus propios
+ * componentes—, que para un paquete cuya razón de ser es que otras seis
+ * aplicaciones lo usen es justo lo que no puede pasar.
+ */
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+
+	const componente: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+	export default componente;
+}

package/src/sidebar/SideBar.vue

@@ -1,7 +1,183 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+/**
+ * La barra lateral de las aplicaciones de VasakOS.
+ *
+ * Es la de Configuración, que es la que todas las demás venían copiando: mismo
+ * `aside` con borde y esquina redondeada, mismo plegado a 84 píxeles, mismos
+ * grupos con título. Que estén acá y no copiadas en cada repositorio es lo que
+ * hace que las ventanas se lean como partes del mismo escritorio en vez de
+ * parecerse por casualidad.
+ *
+ * # Los dos caminos
+ *
+ * Con `categories` se arma sola: cada categoría es un grupo plegable y cada
+ * elemento un botón, con el activo marcado contra `modelValue`. Es el camino de
+ * Configuración y del monitor, donde la barra **es** la navegación.
+ *
+ * Con la ranura por omisión se pone cualquier cosa adentro —discos, pasos de un
+ * asistente, una línea de tiempo— y la barra aporta nada más que el marco y el
+ * plegado. La ranura recibe `collapsed`, porque lo que se dibuja adentro casi
+ * siempre tiene que saberlo.
+ *
+ * Los dos caminos conviven: lo declarativo va primero y la ranura después.
+ *
+ * # Por qué no hay traducciones acá
+ *
+ * Una librería de componentes que traduce obliga a todas las aplicaciones a
+ * compartir sus claves. Los textos entran por propiedades; el `aria-label` del
+ * botón de plegar también, que es el único que no se ve pero se oye.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import SideGroup from './SideGroup.vue';
+import SideButton from './SideButton.vue';
+import type { SidebarCategory } from './tipos';
+
+const props = withDefaults(
+	defineProps<{
+		/** El nombre de la ventana. Sin él y sin `subtitle` no hay área de título. */
+		title?: string;
+		subtitle?: string;
+		categories?: SidebarCategory[];
+		/** El identificador del elemento activo. */
+		modelValue?: string;
+		/** Plegada desde afuera. Sin esto, la barra se maneja sola. */
+		collapsed?: boolean;
+		/** Lo que oye un lector de pantalla en el botón de plegar. */
+		collapseLabel?: string;
+		expandLabel?: string;
+	}>(),
+	{
+		title: '',
+		subtitle: '',
+		categories: () => [],
+		modelValue: '',
+		collapsed: undefined,
+		collapseLabel: 'Collapse',
+		expandLabel: 'Expand',
+	}
+);
+
+const emit = defineEmits<{
+	'update:modelValue': [value: string];
+	'update:collapsed': [value: boolean];
+	change: [value: string];
+}>();
+
+const plegadaAMano = ref(props.collapsed ?? false);
+const esAngosta = ref(false);
+let consulta: MediaQueryList | null = null;
+
+/**
+ * Plegada por decisión o por ancho.
+ *
+ * Por debajo de 768 píxeles no hay lugar para el texto de los botones, así que
+ * la barra se pliega sola y el botón de plegar no se muestra: ofrecer
+ * desplegarla ahí sería ofrecer algo que no entra.
+ */
+const plegada = computed(() => esAngosta.value || plegadaAMano.value);
+const hayTitulo = computed(() => Boolean(props.title || props.subtitle));
+const hayCategorias = computed(() => props.categories.length > 0);
+
+function revisar() {
+	esAngosta.value = consulta?.matches ?? false;
+}
+
+function alternar() {
+	plegadaAMano.value = !plegadaAMano.value;
+	emit('update:collapsed', plegadaAMano.value);
+}
+
+function elegir(id: string) {
+	emit('update:modelValue', id);
+	emit('change', id);
+}
+
+// Controlada desde afuera cuando la aplicación pasa `collapsed`: así dos
+// ventanas de la misma aplicación pueden recordar cómo la dejó la persona.
+watch(
+	() => props.collapsed,
+	(valor) => {
+		if (valor !== undefined) {
+			plegadaAMano.value = valor;
+		}
+	}
+);
+
+onMounted(() => {
+	consulta = window.matchMedia('(max-width: 767px)');
+	revisar();
+	consulta.addEventListener('change', revisar);
+});
+
+onBeforeUnmount(() => consulta?.removeEventListener('change', revisar));
+
+defineExpose({ collapsed: plegada });
+</script>
 
 <template>
-  <div class="sidebar">
-    <slot />
-  </div>
+  <aside
+    class="relative z-30 flex h-full shrink-0 flex-col rounded-corner border border-ui-border bg-ui-bg/80 transition-all duration-300"
+    :class="['w-[84px]', plegada ? 'md:w-[84px]' : 'md:w-72']">
+    <header
+      v-if="hayTitulo || $slots.header"
+      class="flex flex-col gap-2 border-ui-border border-b p-2">
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex"
+          :aria-label="plegada ? expandLabel : collapseLabel"
+          :aria-expanded="!plegada"
+          @click="alternar">
+          {{ plegada ? '&gt;' : '&lt;' }}
+        </button>
+        <!-- El área de título es opcional: hay ventanas donde el nombre ya está
+             en la barra superior y repetirlo acá gasta la mitad del alto. -->
+        <div v-if="hayTitulo && !plegada" class="min-w-0 flex-1">
+          <p v-if="title" class="truncate font-semibold text-sm">{{ title }}</p>
+          <p v-if="subtitle" class="truncate text-tx-muted text-xs">{{ subtitle }}</p>
+        </div>
+      </div>
+
+      <!-- Lo que va antes que cualquier categoría: la búsqueda de la tienda,
+           por ejemplo. Plegada no entra un campo de texto —84 píxeles es el
+           ancho del icono— así que se esconde en vez de quedar ilegible. -->
+      <div v-if="$slots.header && !plegada">
+        <slot name="header" :collapsed="plegada" />
+      </div>
+    </header>
+
+    <!-- Sin área de título el botón de plegar necesita su propio lugar, o la
+         barra deja de poder plegarse. -->
+    <div v-else class="flex justify-center border-ui-border border-b p-2">
+      <button
+        type="button"
+        class="hidden h-10 w-10 items-center justify-center rounded-corner border border-ui-border bg-ui-surface/70 font-semibold text-sm md:inline-flex"
+        :aria-label="plegada ? expandLabel : collapseLabel"
+        :aria-expanded="!plegada"
+        @click="alternar">
+        {{ plegada ? '&gt;' : '&lt;' }}
+      </button>
+    </div>
+
+    <div class="flex-1 space-y-3 overflow-y-auto p-2">
+      <SideGroup
+        v-for="category in categories"
+        :key="category.id"
+        :title="category.title"
+        :collapsed="plegada">
+        <SideButton
+          v-for="item in category.items"
+          :key="item.id"
+          :label="item.label"
+          :icon="item.icon"
+          :badge="item.badge"
+          :disabled="item.disabled"
+          :collapsed="plegada"
+          :active="modelValue === item.id"
+          @click="elegir(item.id)" />
+      </SideGroup>
+
+      <slot :collapsed="plegada" />
+    </div>
+  </aside>
 </template>

package/src/sidebar/SideButton.vue

@@ -1,18 +1,115 @@
 <script lang="ts" setup>
-const props = defineProps({
-  title: {
-    type: String,
-    default: "Link",
-  },
-  image: {
-    type: String,
-    default: "",
-  },
+/**
+ * Un elemento de la barra lateral.
+ *
+ * El icono sale del tema del escritorio y se vuelve a resolver cuando la
+ * persona cambia de tema: por eso no se recibe una ruta sino un nombre. Plegado
+ * queda sólo el icono, y el nombre pasa al `title` para que el globo lo diga —
+ * sin eso, una barra plegada es una columna de dibujos sin explicación.
+ */
+import { getIconSource } from '@vasakgroup/plugin-vicons';
+import { listen, type UnlistenFn } from '@tauri-apps/api/event';
+import { onMounted, onUnmounted, ref, toRef, watch } from 'vue';
+
+const props = withDefaults(
+	defineProps<{
+		label: string;
+		icon?: string;
+		active?: boolean;
+		collapsed?: boolean;
+		disabled?: boolean;
+		badge?: string | number;
+	}>(),
+	{ icon: '', active: false, collapsed: false, disabled: false, badge: '' }
+);
+
+defineEmits<{ click: [] }>();
+
+const fuente = ref('');
+const icono = toRef(props, 'icon');
+let soltar: UnlistenFn | null = null;
+let desmontado = false;
+
+/** Cuántas resoluciones se pidieron. De las que estén en vuelo, sólo vale la última. */
+let ultimoPedido = 0;
+
+async function resolver() {
+	const mio = ++ultimoPedido;
+	const nombre = icono.value;
+	if (!nombre) {
+		fuente.value = '';
+		return;
+	}
+	const resuelto = await getIconSource(nombre);
+	// Cambiar de icono y cambiar de tema resuelven en paralelo, y el tema tarda
+	// lo que tarde el backend. Sin el testigo, la respuesta vieja llega última y
+	// deja puesto el icono anterior — que es el mismo síntoma que se venía a
+	// evitar, pero intermitente y según cuál tarde más.
+	if (mio === ultimoPedido) {
+		fuente.value = resuelto;
+	}
+}
+
+onMounted(async () => {
+	// El oyente **antes** de la primera resolución. El tema de iconos cambia en
+	// caliente, y resolver el primero tarda: un cambio de tema durante esa
+	// espera no lo escuchaba nadie, y el botón se quedaba con el icono del tema
+	// anterior hasta el cambio siguiente.
+	const dejarDeEscuchar = await listen('vicons:theme-changed', resolver);
+	// Registrarse tarda, y en una lista que se desplaza un botón puede irse
+	// antes de que termine. Ahí `onUnmounted` ya pasó y no vio nada que soltar:
+	// el oyente quedaba registrado para siempre sobre un componente muerto.
+	if (desmontado) {
+		dejarDeEscuchar();
+		return;
+	}
+	soltar = dejarDeEscuchar;
+
+	// Las dos resoluciones pueden cruzarse —ésta y la que dispare un cambio de
+	// tema—, y de eso se encarga el testigo de `resolver`.
+	await resolver();
+});
+
+onUnmounted(() => {
+	desmontado = true;
+	soltar?.();
 });
+
+watch(icono, resolver);
 </script>
 
 <template>
-  <a href="#" class="sidebar-button">
-    <img :src="image" :alt="title" class="img-fluid" />
-  </a>
+  <button
+    type="button"
+    :title="collapsed ? label : undefined"
+    :aria-label="collapsed ? label : undefined"
+    :disabled="disabled"
+    :aria-current="active ? 'page' : undefined"
+    class="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="[
+      active
+        ? 'border-secondary bg-primary/15 text-tx-main shadow-sm'
+        : 'border-transparent bg-ui-bg/30 hover:border-ui-border hover:bg-ui-surface/70',
+      disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+      collapsed ? 'justify-center px-2' : '',
+    ]"
+    @click="$emit('click')">
+    <span
+      class="flex h-8 w-8 shrink-0 items-center justify-center rounded-corner font-semibold text-xs uppercase tracking-wide"
+      :class="active ? 'border-secondary bg-primary/20' : ''"
+      aria-hidden="true">
+      <img v-if="fuente" :src="fuente" alt="" class="h-8 w-8 object-contain">
+      <!-- Sin icono, la inicial: un hueco vacío del mismo tamaño deja la fila
+           desalineada contra las que sí lo tienen. -->
+      <span v-else>{{ label.charAt(0).toUpperCase() }}</span>
+    </span>
+
+    <span v-if="!collapsed" class="min-w-0 flex-1 truncate font-medium">{{ label }}</span>
+
+    <span
+      v-if="!collapsed && badge !== ''"
+      class="rounded-corner bg-ui-surface px-2 py-0.5 font-semibold text-tx-muted text-xs">
+      {{ badge }}
+    </span>
+  </button>
 </template>