@wsxjs/wsx-router 0.0.6 → 0.0.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 WSX Framework Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("@wsxjs/wsx-core"),G=":host{display:block;width:100%;height:100%}.router-outlet{width:100%;height:100%}";var K=Object.create,$=Object.defineProperty,X=Object.getOwnPropertyDescriptor,P=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),W=e=>{throw TypeError(e)},I=(e,t,r)=>t in e?$(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,Y=(e,t)=>$(e,"name",{value:t,configurable:!0}),Z=e=>[,,,K((e==null?void 0:e[P("metadata")])??null)],tt=["class","method","getter","setter","accessor","field","value","get","set"],O=e=>e!==void 0&&typeof e!="function"?W("Function expected"):e,et=(e,t,r,i,o)=>({kind:tt[e],name:t,metadata:i,addInitializer:n=>r._?W("Already initialized"):o.push(O(n||null))}),rt=(e,t)=>I(t,P("metadata"),e[3]),it=(e,t,r,i)=>{for(var o=0,n=e[t>>1],s=n&&n.length;o<s;o++)n[o].call(r);return i},ot=(e,t,r,i,o,n)=>{var s,l,c,a=t&7,d=!1,v=0,f=e[v]||(e[v]=[]),u=a&&(o=o.prototype,a<5&&(a>3||!d)&&X(o,r));Y(o,r);for(var p=i.length-1;p>=0;p--)c=et(a,r,l={},e[3],f),s=(0,i[p])(o,c),l._=1,O(s)&&(o=s);return rt(e,o),u&&$(o,r,u),d?a^4?n:u:o},b=(e,t,r)=>I(e,typeof t!="symbol"?t+"":t,r),j,E,N;const m=h.createLogger("WsxRouter");j=[h.autoRegister({tagName:"wsx-router"})];class y extends(N=h.LightComponent){constructor(){super({styles:G,styleName:"wsx-router"}),b(this,"views",new Map),b(this,"currentView",null),b(this,"handleRouteChange",()=>{const t=window.location.pathname;m.debug(`Route changed to: ${t}`),this.currentView&&(this.currentView.style.display="none",m.debug("Hiding previous view"));const r=this.matchRoute(t);if(r){r.style.display="block",this.currentView=r,m.debug(`Showing view for route: ${r.getAttribute("route")}`);const i=this.extractParams(r.getAttribute("route")||"/",t);i&&r.setAttribute("params",JSON.stringify(i))}else m.warn(`No view found for path: ${t}`);this.dispatchEvent(new CustomEvent("route-changed",{detail:{path:t,view:r},bubbles:!0,composed:!0}))}),b(this,"interceptLinks",t=>{const r=t.target.closest("a");if(!r)return;const i=r.getAttribute("href");!i||i.startsWith("http")||i.startsWith("#")||(t.preventDefault(),this.navigate(i))})}render(){return h.jsx("div",{class:"router-outlet"})}onConnected(){m.debug("WsxRouter connected to DOM"),this.collectViews(),m.debug("WsxRouter collected views:",this.views.size),window.addEventListener("popstate",this.handleRouteChange),this.addEventListener("click",this.interceptLinks),this.handleRouteChange()}onDisconnected(){window.removeEventListener("popstate",this.handleRouteChange)}collectViews(){const t=Array.from(this.children).filter(r=>r.tagName.toLowerCase()==="wsx-view");m.debug("WsxRouter found views:",t.length),t.forEach(r=>{const i=r.getAttribute("route")||"/";this.views.set(i,r),r.style.display="none",m.debug(`WsxRouter hiding view for route: ${i}`)})}matchRoute(t){if(this.views.has(t))return this.views.get(t);for(const[r,i]of this.views)if(r.includes(":")){const o=r.replace(/:[^/]+/g,"([^/]+)");if(new RegExp(`^${o}$`).test(t))return i}return this.views.get("*")||null}extractParams(t,r){var c;if(!t.includes(":"))return null;const i=((c=t.match(/:([^/]+)/g))==null?void 0:c.map(a=>a.slice(1)))||[],o=t.replace(/:[^/]+/g,"([^/]+)"),n=new RegExp(`^${o}$`),s=r.match(n);if(!s||!i.length)return null;const l={};return i.forEach((a,d)=>{l[a]=s[d+1]}),l}navigate(t){window.history.pushState(null,"",t),this.handleRouteChange()}}E=Z(N);y=ot(E,0,"WsxRouter",j,y);it(E,1,y);const nt=":host{display:block;width:100%;height:100%}.route-view{width:100%;height:100%;position:relative}:host([loading]) .route-view{opacity:.5;transition:opacity .3s ease}:host([error]) .route-view{border:1px solid var(--error-color, #ff0000);padding:1rem}.route-view.entering{animation:fadeIn .3s ease-out}.route-view.leaving{animation:fadeOut .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}";var at=Object.create,S=Object.defineProperty,st=Object.getOwnPropertyDescriptor,z=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),D=e=>{throw TypeError(e)},F=(e,t,r)=>t in e?S(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,ct=(e,t)=>S(e,"name",{value:t,configurable:!0}),lt=e=>[,,,at((e==null?void 0:e[z("metadata")])??null)],ht=["class","method","getter","setter","accessor","field","value","get","set"],U=e=>e!==void 0&&typeof e!="function"?D("Function expected"):e,dt=(e,t,r,i,o)=>({kind:ht[e],name:t,metadata:i,addInitializer:n=>r._?D("Already initialized"):o.push(U(n||null))}),ut=(e,t)=>F(t,z("metadata"),e[3]),pt=(e,t,r,i)=>{for(var o=0,n=e[t>>1],s=n&&n.length;o<s;o++)n[o].call(r);return i},vt=(e,t,r,i,o,n)=>{var s,l,c,a=t&7,d=!1,v=0,f=e[v]||(e[v]=[]),u=a&&(o=o.prototype,a<5&&(a>3||!d)&&st(o,r));ct(o,r);for(var p=i.length-1;p>=0;p--)c=dt(a,r,l={},e[3],f),s=(0,i[p])(o,c),l._=1,U(s)&&(o=s);return ut(e,o),u&&S(o,r,u),d?a^4?n:u:o},x=(e,t,r)=>F(e,typeof t!="symbol"?t+"":t,r),M,R,V;const k=h.createLogger("WsxView");M=[h.autoRegister({tagName:"wsx-view"})];class g extends(V=h.LightComponent){constructor(){super({styles:nt,styleName:"wsx-view"}),x(this,"component",null),x(this,"params",{}),x(this,"componentInstance",null)}render(){return h.jsx("div",{class:"route-view"})}onConnected(){const t=this.getAttribute("component");t&&!this.componentInstance&&this.loadComponent(t)}onAttributeChanged(t,r,i){if(t==="component"&&i&&!this.componentInstance)this.loadComponent(i);else if(t==="params"&&this.componentInstance)try{this.params=JSON.parse(i),Object.entries(this.params).forEach(([o,n])=>{this.componentInstance.setAttribute(o,n)})}catch(o){k.error("Failed to parse params:",o)}}async loadComponent(t){if(this.componentInstance&&(this.componentInstance.remove(),this.componentInstance=null),!customElements.get(t)){k.warn(`Component ${t} not found in customElements registry`);return}this.componentInstance=document.createElement(t),Object.keys(this.params).length>0&&Object.entries(this.params).forEach(([o,n])=>{this.componentInstance.setAttribute(o,n)});const i=this.querySelector(".route-view");i?i.appendChild(this.componentInstance):k.error("Route view container not found")}onDisconnected(){this.componentInstance&&(this.componentInstance.remove(),this.componentInstance=null)}}R=lt(V);g=vt(R,0,"WsxView",M,g);x(g,"observedAttributes",["route","component","params"]);pt(R,1,g);const mt=':host{display:inline-block;min-width:fit-content;min-height:fit-content;width:auto;height:auto}.wsx-link{color:var(--link-color, #007bff);text-decoration:var(--link-decoration, underline);cursor:pointer;transition:color .2s ease;display:inline-block;min-height:1.2em;line-height:1.2}.wsx-link:hover{color:var(--link-hover-color, #0056b3);text-decoration:var(--link-hover-decoration, underline)}.wsx-link:focus{outline:2px solid var(--link-focus-color, #007bff);outline-offset:2px}.wsx-link.active{color:var(--link-active-color, #6c757d);font-weight:var(--link-active-weight, bold)}:host([disabled]) .wsx-link{color:var(--link-disabled-color, #6c757d);cursor:not-allowed;pointer-events:none}:host([external]) .wsx-link:after{content:"↗";font-size:.8em;margin-left:.2em;opacity:.7}:host([variant="button"]) .wsx-link{background-color:var(--button-bg, #007bff);color:var(--button-color, white);padding:.5rem 1rem;border-radius:.25rem;text-decoration:none;display:inline-block}:host([variant="button"]) .wsx-link:hover{background-color:var(--button-hover-bg, #0056b3);color:var(--button-hover-color, white)}:host([variant="tab"]) .wsx-link{padding:.5rem 1rem;border-bottom:2px solid transparent;text-decoration:none}:host([variant="tab"]) .wsx-link.active{border-bottom-color:var(--tab-active-border, #007bff)}';var wt=Object.create,C=Object.defineProperty,ft=Object.getOwnPropertyDescriptor,q=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),T=e=>{throw TypeError(e)},Q=(e,t,r)=>t in e?C(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,gt=(e,t)=>C(e,"name",{value:t,configurable:!0}),_t=e=>[,,,wt((e==null?void 0:e[q("metadata")])??null)],bt=["class","method","getter","setter","accessor","field","value","get","set"],H=e=>e!==void 0&&typeof e!="function"?T("Function expected"):e,xt=(e,t,r,i,o)=>({kind:bt[e],name:t,metadata:i,addInitializer:n=>r._?T("Already initialized"):o.push(H(n||null))}),yt=(e,t)=>Q(t,q("metadata"),e[3]),kt=(e,t,r,i)=>{for(var o=0,n=e[t>>1],s=n&&n.length;o<s;o++)n[o].call(r);return i},$t=(e,t,r,i,o,n)=>{var s,l,c,a=t&7,d=!1,v=0,f=e[v]||(e[v]=[]),u=a&&(o=o.prototype,a<5&&(a>3||!d)&&ft(o,r));gt(o,r);for(var p=i.length-1;p>=0;p--)c=xt(a,r,l={},e[3],f),s=(0,i[p])(o,c),l._=1,H(s)&&(o=s);return yt(e,o),u&&C(o,r,u),d?a^4?n:u:o},w=(e,t,r)=>Q(e,typeof t!="symbol"?t+"":t,r),J,L,B;const A=h.createLogger("WsxLink");J=[h.autoRegister({tagName:"wsx-link"})];class _ extends(B=h.WebComponent){constructor(){super({styles:mt,styleName:"wsx-link"}),w(this,"to",""),w(this,"replace",!1),w(this,"activeClass","active"),w(this,"exact",!1),w(this,"handleClick",t=>{if(t.preventDefault(),!this.to){A.warn("No 'to' attribute specified");return}if(this.isExternalLink(this.to)){window.open(this.to,"_blank");return}this.replace?window.history.replaceState(null,"",this.to):window.history.pushState(null,"",this.to),window.dispatchEvent(new PopStateEvent("popstate")),A.debug(`Navigated to: ${this.to}`)}),w(this,"updateActiveState",()=>{var o;const t=window.location.pathname,r=this.exact?t===this.to:t.startsWith(this.to)&&this.to!=="/",i=(o=this.shadowRoot)==null?void 0:o.querySelector("a");i&&(r?(i.classList.add(this.activeClass),this.setAttribute("active","")):(i.classList.remove(this.activeClass),this.removeAttribute("active")))})}render(){return h.jsx("a",{href:this.to,class:"wsx-link",onClick:this.handleClick,part:"link"},h.jsx("slot",null))}onConnected(){this.to=this.getAttribute("to")||"",this.replace=this.hasAttribute("replace"),this.activeClass=this.getAttribute("active-class")||"active",this.exact=this.hasAttribute("exact");const t=this.shadowRoot.querySelector(".wsx-link");t&&(t.href=this.to),window.addEventListener("popstate",this.updateActiveState),document.addEventListener("route-changed",this.updateActiveState),this.updateActiveState()}onDisconnected(){window.removeEventListener("popstate",this.updateActiveState),document.removeEventListener("route-changed",this.updateActiveState)}onAttributeChanged(t,r,i){switch(t){case"to":this.to=i||"",this.rerender(),this.updateActiveState();break;case"replace":this.replace=i!==null&&i!=="false";break;case"active-class":this.activeClass=i||"active",this.updateActiveState();break;case"exact":this.exact=i!==null&&i!=="false",this.updateActiveState();break}}isExternalLink(t){return t.startsWith("http://")||t.startsWith("https://")||t.startsWith("mailto:")||t.startsWith("tel:")}navigate(){this.to&&this.handleClick(new MouseEvent("click",{bubbles:!0,cancelable:!0}))}}L=_t(B);_=$t(L,0,"WsxLink",J,_);w(_,"observedAttributes",["to","replace","active-class","exact"]);kt(L,1,_);const Et=h.createLogger("RouterUtils");class St{static navigate(t,r=!1){r?window.history.replaceState(null,"",t):window.history.pushState(null,"",t),window.dispatchEvent(new PopStateEvent("popstate")),Et.debug(`Navigated to: ${t} (replace: ${r})`)}static getCurrentRoute(){const t=new URL(window.location.href);return{path:t.pathname,params:{},query:Object.fromEntries(t.searchParams.entries()),hash:t.hash.slice(1)}}static parseRoute(t,r){var i;if(t===r)return{route:t,params:{},exact:!0};if(t==="*")return{route:t,params:{},exact:!1};if(t.includes(":")){const o=((i=t.match(/:([^/]+)/g))==null?void 0:i.map(c=>c.slice(1)))||[],n=t.replace(/:[^/]+/g,"([^/]+)"),s=new RegExp(`^${n}$`),l=r.match(s);if(l&&o.length>0){const c={};return o.forEach((a,d)=>{c[a]=l[d+1]}),{route:t,params:c,exact:!0}}}if(t.endsWith("/*")){const o=t.slice(0,-2);if(r.startsWith(o))return{route:t,params:{},exact:!1}}return null}static buildPath(t,r={}){let i=t;return Object.entries(r).forEach(([o,n])=>{i=i.replace(`:${o}`,encodeURIComponent(n))}),i}static isRouteActive(t,r=!1){const i=window.location.pathname;return r?i===t:t==="/"?i==="/":i.startsWith(t)}static getRouteDepth(t){return t.split("/").filter(r=>r.length>0).length}static getParentRoute(t){const r=t.split("/").filter(i=>i.length>0);return r.length<=1?"/":(r.pop(),"/"+r.join("/"))}static joinPaths(...t){return t.map(r=>r.replace(/^\/+|\/+$/g,"")).filter(r=>r.length>0).join("/").replace(/^/,"/")}static isExternalUrl(t){return/^https?:\/\//.test(t)||/^mailto:/.test(t)||/^tel:/.test(t)}static getQueryParam(t){return new URL(window.location.href).searchParams.get(t)}static setQueryParam(t,r,i=!1){const o=new URL(window.location.href);o.searchParams.set(t,r);const n=o.pathname+o.search+o.hash;this.navigate(n,i)}static removeQueryParam(t,r=!1){const i=new URL(window.location.href);i.searchParams.delete(t);const o=i.pathname+i.search+i.hash;this.navigate(o,r)}static goBack(){window.history.back()}static goForward(){window.history.forward()}static replace(t){this.navigate(t,!0)}static getHistoryLength(){return window.history.length}static onRouteChange(t){const r=()=>{const i=this.getCurrentRoute();t(i)};return window.addEventListener("popstate",r),document.addEventListener("route-changed",r),()=>{window.removeEventListener("popstate",r),document.removeEventListener("route-changed",r)}}}exports.RouterUtils=St;exports.WsxLink=_;exports.WsxRouter=y;exports.WsxView=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("@wsxjs/wsx-core"),nt=":host{display:block;width:100%;height:100%}.router-outlet{width:100%;height:100%}";var ft;let pt,vt;function Y(r,t,e){return(t=mt(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}function xt(r,t,e,n,g,R){function C(i,c,u){return function(s,a){return u&&u(s),i[c].call(s,a)}}function O(i,c){for(var u=0;u<i.length;u++)i[u].call(c);return c}function b(i,c,u,s){if(typeof i!="function"&&(s||i!==void 0))throw new TypeError(c+" must "+(u||"be")+" a function"+(s?"":" or undefined"));return i}function T(i,c,u,s,a,$,L,j,N,y,m,f,p){function w(l){if(!p(l))throw new TypeError("Attempted to access private element on non-instance")}var h,x=c[0],k=c[3],_=!j;if(!_){u||Array.isArray(x)||(x=[x]);var o={},E=[],v=a===3?"get":a===4||f?"set":"value";y?(m||f?o={get:it(function(){return k(this)},s,"get"),set:function(l){c[4](this,l)}}:o[v]=k,m||it(o[v],s,a===2?"":v)):m||(o=Object.getOwnPropertyDescriptor(i,s))}for(var d=i,P=x.length-1;P>=0;P-=u?2:1){var H=x[P],K=u?x[P-1]:void 0,Q={},W={kind:["field","accessor","method","getter","setter","class"][a],name:s,metadata:$,addInitializer:(function(l,S){if(l.v)throw Error("attempted to call addInitializer after decoration was finished");b(S,"An initializer","be",!0),L.push(S)}).bind(null,Q)};try{if(_)(h=b(H.call(K,d,W),"class decorators","return"))&&(d=h);else{var A,z;W.static=N,W.private=y,y?a===2?A=function(l){return w(l),o.value}:(a<4&&(A=C(o,"get",w)),a!==3&&(z=C(o,"set",w))):(A=function(l){return l[s]},(a<2||a===4)&&(z=function(l,S){l[s]=S}));var J=W.access={has:y?p.bind():function(l){return s in l}};if(A&&(J.get=A),z&&(J.set=z),d=H.call(K,f?{get:o.get,set:o.set}:o[v],W),f){if(typeof d=="object"&&d)(h=b(d.get,"accessor.get"))&&(o.get=h),(h=b(d.set,"accessor.set"))&&(o.set=h),(h=b(d.init,"accessor.init"))&&E.push(h);else if(d!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0")}else b(d,(m?"field":"method")+" decorators","return")&&(m?E.push(d):o[v]=d)}}finally{Q.v=!0}}return(m||f)&&j.push(function(l,S){for(var V=E.length-1;V>=0;V--)S=E[V].call(l,S);return S}),m||_||(y?f?j.push(C(o,"get"),C(o,"set")):j.push(a===2?o[v]:C.call.bind(o[v])):Object.defineProperty(i,s,o)),d}function U(i,c){return Object.defineProperty(i,Symbol.metadata||Symbol.for("Symbol.metadata"),{configurable:!0,enumerable:!0,value:c})}if(arguments.length>=6)var q=R[Symbol.metadata||Symbol.for("Symbol.metadata")];var D=Object.create(q??null),X=function(i,c,u,s){var a,$,L=[],j=function(v){return Et(v)===i},N=new Map;function y(v){v&&L.push(O.bind(null,v))}for(var m=0;m<c.length;m++){var f=c[m];if(Array.isArray(f)){var p=f[1],w=f[2],h=f.length>3,x=16&p,k=!!(8&p),_=(p&=7)==0,o=w+"/"+k;if(!_&&!h){var E=N.get(o);if(E===!0||E===3&&p!==4||E===4&&p!==3)throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: "+w);N.set(o,!(p>2)||p)}T(k?i:i.prototype,f,x,h?"#"+w:mt(w),p,s,k?$=$||[]:a=a||[],L,k,h,_,p===1,k&&h?j:u)}}return y(a),y($),L}(r,t,g,D);return e.length||U(r,D),{e:X,get c(){var i=[];return e.length&&[U(T(r,[e],n,r.name,5,D,i),D),O.bind(null,i,r)]}}}function mt(r){var t=kt(r,"string");return typeof t=="symbol"?t:t+""}function kt(r,t){if(typeof r!="object"||!r)return r;var e=r[Symbol.toPrimitive];if(e!==void 0){var n=e.call(r,t);if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}function it(r,t,e){typeof t=="symbol"&&(t=(t=t.description)?"["+t+"]":"");try{Object.defineProperty(r,"name",{configurable:!0,value:e?e+" "+t:t})}catch{}return r}function Et(r){if(Object(r)!==r)throw TypeError("right-hand side of 'in' should be an object, got "+(r!==null?typeof r:"null"));return r}const B=I.createLogger("WsxRouter");vt=[I.autoRegister({tagName:"wsx-router"})];exports.WsxRouter=void 0;class St extends I.LightComponent{constructor(){super({styles:nt,styleName:"wsx-router"}),Y(this,"_autoStyles",nt),Y(this,"views",new Map),Y(this,"currentView",null),Y(this,"handleRouteChange",()=>{const t=window.location.pathname;B.debug(`Route changed to: ${t}`),this.currentView&&(this.currentView.style.display="none",B.debug("Hiding previous view"));const e=this.matchRoute(t);if(e){e.style.display="block",this.currentView=e,B.debug(`Showing view for route: ${e.getAttribute("route")}`);const n=this.extractParams(e.getAttribute("route")||"/",t);n&&e.setAttribute("params",JSON.stringify(n))}else B.warn(`No view found for path: ${t}`);this.dispatchEvent(new CustomEvent("route-changed",{detail:{path:t,view:e},bubbles:!0,composed:!0}))}),Y(this,"interceptLinks",t=>{const e=t.target.closest("a");if(!e)return;const n=e.getAttribute("href");!n||n.startsWith("http")||n.startsWith("#")||(t.preventDefault(),this.navigate(n))})}render(){return I.jsx("div",{class:"router-outlet"})}onConnected(){B.debug("WsxRouter connected to DOM"),this.collectViews(),B.debug("WsxRouter collected views:",this.views.size),window.addEventListener("popstate",this.handleRouteChange),this.addEventListener("click",this.interceptLinks),this.handleRouteChange()}onDisconnected(){window.removeEventListener("popstate",this.handleRouteChange)}collectViews(){const t=Array.from(this.children).filter(e=>e.tagName.toLowerCase()==="wsx-view");B.debug("WsxRouter found views:",t.length),t.forEach(e=>{const n=e.getAttribute("route")||"/";this.views.set(n,e),e.style.display="none",B.debug(`WsxRouter hiding view for route: ${n}`)})}matchRoute(t){if(this.views.has(t))return this.views.get(t);for(const[e,n]of this.views)if(e.includes(":")){const g=e.replace(/:[^/]+/g,"([^/]+)");if(new RegExp(`^${g}$`).test(t))return n}return this.views.get("*")||null}extractParams(t,e){var b;if(!t.includes(":"))return null;const n=((b=t.match(/:([^/]+)/g))==null?void 0:b.map(T=>T.slice(1)))||[],g=t.replace(/:[^/]+/g,"([^/]+)"),R=new RegExp(`^${g}$`),C=e.match(R);if(!C||!n.length)return null;const O={};return n.forEach((T,U)=>{O[T]=C[U+1]}),O}navigate(t){window.history.pushState(null,"",t),this.handleRouteChange()}}ft=St;[exports.WsxRouter,pt]=xt(ft,[],vt,0,void 0,I.LightComponent).c;pt();const ot=":host{display:block;width:100%;height:100%}.route-view{width:100%;height:100%;position:relative}:host([loading]) .route-view{opacity:.5;transition:opacity .3s ease}:host([error]) .route-view{border:1px solid var(--error-color, #ff0000);padding:1rem}.route-view.entering{animation:fadeIn .3s ease-out}.route-view.leaving{animation:fadeOut .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}";var Z,F;let st,gt,at;function G(r,t,e){return(t=bt(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}function Ct(r,t,e,n,g,R){function C(i,c,u){return function(s,a){return u&&u(s),i[c].call(s,a)}}function O(i,c){for(var u=0;u<i.length;u++)i[u].call(c);return c}function b(i,c,u,s){if(typeof i!="function"&&(s||i!==void 0))throw new TypeError(c+" must "+(u||"be")+" a function"+(s?"":" or undefined"));return i}function T(i,c,u,s,a,$,L,j,N,y,m,f,p){function w(l){if(!p(l))throw new TypeError("Attempted to access private element on non-instance")}var h,x=c[0],k=c[3],_=!j;if(!_){u||Array.isArray(x)||(x=[x]);var o={},E=[],v=a===3?"get":a===4||f?"set":"value";y?(m||f?o={get:ct(function(){return k(this)},s,"get"),set:function(l){c[4](this,l)}}:o[v]=k,m||ct(o[v],s,a===2?"":v)):m||(o=Object.getOwnPropertyDescriptor(i,s))}for(var d=i,P=x.length-1;P>=0;P-=u?2:1){var H=x[P],K=u?x[P-1]:void 0,Q={},W={kind:["field","accessor","method","getter","setter","class"][a],name:s,metadata:$,addInitializer:(function(l,S){if(l.v)throw Error("attempted to call addInitializer after decoration was finished");b(S,"An initializer","be",!0),L.push(S)}).bind(null,Q)};try{if(_)(h=b(H.call(K,d,W),"class decorators","return"))&&(d=h);else{var A,z;W.static=N,W.private=y,y?a===2?A=function(l){return w(l),o.value}:(a<4&&(A=C(o,"get",w)),a!==3&&(z=C(o,"set",w))):(A=function(l){return l[s]},(a<2||a===4)&&(z=function(l,S){l[s]=S}));var J=W.access={has:y?p.bind():function(l){return s in l}};if(A&&(J.get=A),z&&(J.set=z),d=H.call(K,f?{get:o.get,set:o.set}:o[v],W),f){if(typeof d=="object"&&d)(h=b(d.get,"accessor.get"))&&(o.get=h),(h=b(d.set,"accessor.set"))&&(o.set=h),(h=b(d.init,"accessor.init"))&&E.push(h);else if(d!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0")}else b(d,(m?"field":"method")+" decorators","return")&&(m?E.push(d):o[v]=d)}}finally{Q.v=!0}}return(m||f)&&j.push(function(l,S){for(var V=E.length-1;V>=0;V--)S=E[V].call(l,S);return S}),m||_||(y?f?j.push(C(o,"get"),C(o,"set")):j.push(a===2?o[v]:C.call.bind(o[v])):Object.defineProperty(i,s,o)),d}function U(i,c){return Object.defineProperty(i,Symbol.metadata||Symbol.for("Symbol.metadata"),{configurable:!0,enumerable:!0,value:c})}if(arguments.length>=6)var q=R[Symbol.metadata||Symbol.for("Symbol.metadata")];var D=Object.create(q??null),X=function(i,c,u,s){var a,$,L=[],j=function(v){return jt(v)===i},N=new Map;function y(v){v&&L.push(O.bind(null,v))}for(var m=0;m<c.length;m++){var f=c[m];if(Array.isArray(f)){var p=f[1],w=f[2],h=f.length>3,x=16&p,k=!!(8&p),_=(p&=7)==0,o=w+"/"+k;if(!_&&!h){var E=N.get(o);if(E===!0||E===3&&p!==4||E===4&&p!==3)throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: "+w);N.set(o,!(p>2)||p)}T(k?i:i.prototype,f,x,h?"#"+w:bt(w),p,s,k?$=$||[]:a=a||[],L,k,h,_,p===1,k&&h?j:u)}}return y(a),y($),L}(r,t,g,D);return e.length||U(r,D),{e:X,get c(){var i=[];return e.length&&[U(T(r,[e],n,r.name,5,D,i),D),O.bind(null,i,r)]}}}function bt(r){var t=Rt(r,"string");return typeof t=="symbol"?t:t+""}function Rt(r,t){if(typeof r!="object"||!r)return r;var e=r[Symbol.toPrimitive];if(e!==void 0){var n=e.call(r,t);if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(r)}function ct(r,t,e){typeof t=="symbol"&&(t=(t=t.description)?"["+t+"]":"");try{Object.defineProperty(r,"name",{configurable:!0,value:e?e+" "+t:t})}catch{}return r}function jt(r){if(Object(r)!==r)throw TypeError("right-hand side of 'in' should be an object, got "+(r!==null?typeof r:"null"));return r}function _t(r){return r}const tt=I.createLogger("WsxView");gt=[I.autoRegister({tagName:"wsx-view"})];exports.WsxView=void 0;new(at=(F=class extends I.LightComponent{constructor(){super({styles:ot,styleName:"wsx-view"}),G(this,"_autoStyles",ot),G(this,"component",null),G(this,"params",{}),G(this,"componentInstance",null)}render(){return I.jsx("div",{class:"route-view"})}onConnected(){const t=this.getAttribute("component");t&&!this.componentInstance&&this.loadComponent(t)}onAttributeChanged(t,e,n){if(t==="component"&&n&&!this.componentInstance)this.loadComponent(n);else if(t==="params"&&this.componentInstance)try{this.params=JSON.parse(n),Object.entries(this.params).forEach(([g,R])=>{this.componentInstance.setAttribute(g,R)})}catch(g){tt.error("Failed to parse params:",g)}}async loadComponent(t){if(this.componentInstance&&(this.componentInstance.remove(),this.componentInstance=null),!customElements.get(t)){tt.warn(`Component ${t} not found in customElements registry`);return}this.componentInstance=document.createElement(t),Object.keys(this.params).length>0&&Object.entries(this.params).forEach(([g,R])=>{this.componentInstance.setAttribute(g,R)});const n=this.querySelector(".route-view");n?n.appendChild(this.componentInstance):tt.error("Route view container not found")}onDisconnected(){this.componentInstance&&(this.componentInstance.remove(),this.componentInstance=null)}},[exports.WsxView,st]=Ct(F,[],gt,0,void 0,I.LightComponent).c,F),Z=class extends _t{constructor(){super(exports.WsxView),G(this,"observedAttributes",["route","component","params"]),st()}},G(Z,at,void 0),Z);const $t=':host{display:inline-block;min-width:fit-content;min-height:fit-content;width:auto;height:auto}.wsx-link{color:var(--link-color, #007bff);text-decoration:var(--link-decoration, underline);cursor:pointer;transition:color .2s ease;display:inline-block;min-height:1.2em;line-height:1.2}.wsx-link:hover{color:var(--link-hover-color, #0056b3);text-decoration:var(--link-hover-decoration, underline)}.wsx-link:focus{outline:2px solid var(--link-focus-color, #007bff);outline-offset:2px}.wsx-link.active{color:var(--link-active-color, #6c757d);font-weight:var(--link-active-weight, bold)}:host([disabled]) .wsx-link{color:var(--link-disabled-color, #6c757d);cursor:not-allowed;pointer-events:none}:host([external]) .wsx-link:after{content:"↗";font-size:.8em;margin-left:.2em;opacity:.7}:host([variant="button"]) .wsx-link{background-color:var(--button-bg, #007bff);color:var(--button-color, white);padding:.5rem 1rem;border-radius:.25rem;text-decoration:none;display:inline-block}:host([variant="button"]) .wsx-link:hover{background-color:var(--button-hover-bg, #0056b3);color:var(--button-hover-color, white)}:host([variant="tab"]) .wsx-link{padding:.5rem 1rem;border-bottom:2px solid transparent;text-decoration:none}:host([variant="tab"]) .wsx-link.active{border-bottom-color:var(--tab-active-border, #007bff)}';var et,rt;let lt,yt,ut;function M(r,t,e){return(t=wt(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}function Lt(r,t,e,n,g,R){function C(i,c,u){return function(s,a){return u&&u(s),i[c].call(s,a)}}function O(i,c){for(var u=0;u<i.length;u++)i[u].call(c);return c}function b(i,c,u,s){if(typeof i!="function"&&(s||i!==void 0))throw new TypeError(c+" must "+(u||"be")+" a function"+(s?"":" or undefined"));return i}function T(i,c,u,s,a,$,L,j,N,y,m,f,p){function w(l){if(!p(l))throw new TypeError("Attempted to access private element on non-instance")}var h,x=c[0],k=c[3],_=!j;if(!_){u||Array.isArray(x)||(x=[x]);var o={},E=[],v=a===3?"get":a===4||f?"set":"value";y?(m||f?o={get:ht(function(){return k(this)},s,"get"),set:function(l){c[4](this,l)}}:o[v]=k,m||ht(o[v],s,a===2?"":v)):m||(o=Object.getOwnPropertyDescriptor(i,s))}for(var d=i,P=x.length-1;P>=0;P-=u?2:1){var H=x[P],K=u?x[P-1]:void 0,Q={},W={kind:["field","accessor","method","getter","setter","class"][a],name:s,metadata:$,addInitializer:(function(l,S){if(l.v)throw Error("attempted to call addInitializer after decoration was finished");b(S,"An initializer","be",!0),L.push(S)}).bind(null,Q)};try{if(_)(h=b(H.call(K,d,W),"class decorators","return"))&&(d=h);else{var A,z;W.static=N,W.private=y,y?a===2?A=function(l){return w(l),o.value}:(a<4&&(A=C(o,"get",w)),a!==3&&(z=C(o,"set",w))):(A=function(l){return l[s]},(a<2||a===4)&&(z=function(l,S){l[s]=S}));var J=W.access={has:y?p.bind():function(l){return s in l}};if(A&&(J.get=A),z&&(J.set=z),d=H.call(K,f?{get:o.get,set:o.set}:o[v],W),f){if(typeof d=="object"&&d)(h=b(d.get,"accessor.get"))&&(o.get=h),(h=b(d.set,"accessor.set"))&&(o.set=h),(h=b(d.init,"accessor.init"))&&E.push(h);else if(d!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0")}else b(d,(m?"field":"method")+" decorators","return")&&(m?E.push(d):o[v]=d)}}finally{Q.v=!0}}return(m||f)&&j.push(function(l,S){for(var V=E.length-1;V>=0;V--)S=E[V].call(l,S);return S}),m||_||(y?f?j.push(C(o,"get"),C(o,"set")):j.push(a===2?o[v]:C.call.bind(o[v])):Object.defineProperty(i,s,o)),d}function U(i,c){return Object.defineProperty(i,Symbol.metadata||Symbol.for("Symbol.metadata"),{configurable:!0,enumerable:!0,value:c})}if(arguments.length>=6)var q=R[Symbol.metadata||Symbol.for("Symbol.metadata")];var D=Object.create(q??null),X=function(i,c,u,s){var a,$,L=[],j=function(v){return At(v)===i},N=new Map;function y(v){v&&L.push(O.bind(null,v))}for(var m=0;m<c.length;m++){var f=c[m];if(Array.isArray(f)){var p=f[1],w=f[2],h=f.length>3,x=16&p,k=!!(8&p),_=(p&=7)==0,o=w+"/"+k;if(!_&&!h){var E=N.get(o);if(E===!0||E===3&&p!==4||E===4&&p!==3)throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: "+w);N.set(o,!(p>2)||p)}T(k?i:i.prototype,f,x,h?"#"+w:wt(w),p,s,k?$=$||[]:a=a||[],L,k,h,_,p===1,k&&h?j:u)}}return y(a),y($),L}(r,t,g,D);return e.length||U(r,D),{e:X,get c(){var i=[];return e.length&&[U(T(r,[e],n,r.name,5,D,i),D),O.bind(null,i,r)]}}}function wt(r){var t=Wt(r,"string");return typeof t=="symbol"?t:t+""}function Wt(r,t){if(typeof r!="object"||!r)return r;var e=r[Symbol.toPrimitive];if(e!==void 0){var n=e.call(r,t);if(typeof n!="object")return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return(t==="string"?String:Number)(r)}function ht(r,t,e){typeof t=="symbol"&&(t=(t=t.description)?"["+t+"]":"");try{Object.defineProperty(r,"name",{configurable:!0,value:e?e+" "+t:t})}catch{}return r}function At(r){if(Object(r)!==r)throw TypeError("right-hand side of 'in' should be an object, got "+(r!==null?typeof r:"null"));return r}function It(r){return r}const dt=I.createLogger("WsxLink");yt=[I.autoRegister({tagName:"wsx-link"})];exports.WsxLink=void 0;new(ut=(rt=class extends I.WebComponent{constructor(...t){super(...t),M(this,"_autoStyles",$t),M(this,"to",""),M(this,"replace",!1),M(this,"activeClass","active"),M(this,"exact",!1),M(this,"handleClick",e=>{if(e.preventDefault(),!this.to){dt.warn("No 'to' attribute specified");return}if(this.isExternalLink(this.to)){window.open(this.to,"_blank");return}this.replace?window.history.replaceState(null,"",this.to):window.history.pushState(null,"",this.to),window.dispatchEvent(new PopStateEvent("popstate")),dt.debug(`Navigated to: ${this.to}`)}),M(this,"updateActiveState",()=>{var R;const e=window.location.pathname,n=this.exact?e===this.to:e.startsWith(this.to)&&this.to!=="/",g=(R=this.shadowRoot)==null?void 0:R.querySelector("a");g&&(n?(g.classList.add(this.activeClass),this.setAttribute("active","")):(g.classList.remove(this.activeClass),this.removeAttribute("active")))})}render(){return I.jsx("a",{href:this.to,class:"wsx-link",onClick:this.handleClick,part:"link"},I.jsx("slot",null))}onConnected(){this.to=this.getAttribute("to")||"",this.replace=this.hasAttribute("replace"),this.activeClass=this.getAttribute("active-class")||"active",this.exact=this.hasAttribute("exact");const t=this.shadowRoot.querySelector(".wsx-link");t&&(t.href=this.to),window.addEventListener("popstate",this.updateActiveState),document.addEventListener("route-changed",this.updateActiveState),this.updateActiveState()}onDisconnected(){window.removeEventListener("popstate",this.updateActiveState),document.removeEventListener("route-changed",this.updateActiveState)}onAttributeChanged(t,e,n){switch(t){case"to":this.to=n||"",this.rerender(),this.updateActiveState();break;case"replace":this.replace=n!==null&&n!=="false";break;case"active-class":this.activeClass=n||"active",this.updateActiveState();break;case"exact":this.exact=n!==null&&n!=="false",this.updateActiveState();break}}isExternalLink(t){return t.startsWith("http://")||t.startsWith("https://")||t.startsWith("mailto:")||t.startsWith("tel:")}navigate(){this.to&&this.handleClick(new MouseEvent("click",{bubbles:!0,cancelable:!0}))}},[exports.WsxLink,lt]=Lt(rt,[],yt,0,void 0,I.WebComponent).c,rt),et=class extends It{constructor(){super(exports.WsxLink),M(this,"observedAttributes",["to","replace","active-class","exact"]),lt()}},M(et,ut,void 0),et);const Ot=I.createLogger("RouterUtils");class Tt{static navigate(t,e=!1){e?window.history.replaceState(null,"",t):window.history.pushState(null,"",t),window.dispatchEvent(new PopStateEvent("popstate")),Ot.debug(`Navigated to: ${t} (replace: ${e})`)}static getCurrentRoute(){const t=new URL(window.location.href);return{path:t.pathname,params:{},query:Object.fromEntries(t.searchParams.entries()),hash:t.hash.slice(1)}}static parseRoute(t,e){var n;if(t===e)return{route:t,params:{},exact:!0};if(t==="*")return{route:t,params:{},exact:!1};if(t.includes(":")){const g=((n=t.match(/:([^/]+)/g))==null?void 0:n.map(b=>b.slice(1)))||[],R=t.replace(/:[^/]+/g,"([^/]+)"),C=new RegExp(`^${R}$`),O=e.match(C);if(O&&g.length>0){const b={};return g.forEach((T,U)=>{b[T]=O[U+1]}),{route:t,params:b,exact:!0}}}if(t.endsWith("/*")){const g=t.slice(0,-2);if(e.startsWith(g))return{route:t,params:{},exact:!1}}return null}static buildPath(t,e={}){let n=t;return Object.entries(e).forEach(([g,R])=>{n=n.replace(`:${g}`,encodeURIComponent(R))}),n}static isRouteActive(t,e=!1){const n=window.location.pathname;return e?n===t:t==="/"?n==="/":n.startsWith(t)}static getRouteDepth(t){return t.split("/").filter(e=>e.length>0).length}static getParentRoute(t){const e=t.split("/").filter(n=>n.length>0);return e.length<=1?"/":(e.pop(),"/"+e.join("/"))}static joinPaths(...t){return t.map(e=>e.replace(/^\/+|\/+$/g,"")).filter(e=>e.length>0).join("/").replace(/^/,"/")}static isExternalUrl(t){return/^https?:\/\//.test(t)||/^mailto:/.test(t)||/^tel:/.test(t)}static getQueryParam(t){return new URL(window.location.href).searchParams.get(t)}static setQueryParam(t,e,n=!1){const g=new URL(window.location.href);g.searchParams.set(t,e);const R=g.pathname+g.search+g.hash;this.navigate(R,n)}static removeQueryParam(t,e=!1){const n=new URL(window.location.href);n.searchParams.delete(t);const g=n.pathname+n.search+n.hash;this.navigate(g,e)}static goBack(){window.history.back()}static goForward(){window.history.forward()}static replace(t){this.navigate(t,!0)}static getHistoryLength(){return window.history.length}static onRouteChange(t){const e=()=>{const n=this.getCurrentRoute();t(n)};return window.addEventListener("popstate",e),document.addEventListener("route-changed",e),()=>{window.removeEventListener("popstate",e),document.removeEventListener("route-changed",e)}}}exports.RouterUtils=Tt;

package/dist/index.js

@@ -1,86 +1,198 @@
-import { createLogger as y, autoRegister as E, LightComponent as I, jsx as _, WebComponent as Y } from "@wsxjs/wsx-core";
-const Z = ":host{display:block;width:100%;height:100%}.router-outlet{width:100%;height:100%}";
-var tt = Object.create, S = Object.defineProperty, et = Object.getOwnPropertyDescriptor, O = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), N = (e) => {
-  throw TypeError(e);
-}, j = (e, t, r) => t in e ? S(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, rt = (e, t) => S(e, "name", { value: t, configurable: !0 }), it = (e) => [, , , tt((e == null ? void 0 : e[O("metadata")]) ?? null)], ot = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], z = (e) => e !== void 0 && typeof e != "function" ? N("Function expected") : e, nt = (e, t, r, i, o) => ({ kind: ot[e], name: t, metadata: i, addInitializer: (n) => r._ ? N("Already initialized") : o.push(z(n || null)) }), at = (e, t) => j(t, O("metadata"), e[3]), st = (e, t, r, i) => {
-  for (var o = 0, n = e[t >> 1], s = n && n.length; o < s; o++) n[o].call(r);
-  return i;
-}, ct = (e, t, r, i, o, n) => {
-  var s, l, c, a = t & 7, h = !1, p = 0, w = e[p] || (e[p] = []), d = a && (o = o.prototype, a < 5 && (a > 3 || !h) && et(o, r));
-  rt(o, r);
-  for (var u = i.length - 1; u >= 0; u--)
-    c = nt(a, r, l = {}, e[3], w), s = (0, i[u])(o, c), l._ = 1, z(s) && (o = s);
-  return at(e, o), d && S(o, r, d), h ? a ^ 4 ? n : d : o;
-}, f = (e, t, r) => j(e, typeof t != "symbol" ? t + "" : t, r), D, C, F;
-const v = y("WsxRouter");
-D = [E({ tagName: "wsx-router" })];
-class $ extends (F = I) {
+import { createLogger as F, autoRegister as ot, LightComponent as Y, jsx as Z, WebComponent as st } from "@wsxjs/wsx-core";
+const at = ":host{display:block;width:100%;height:100%}.router-outlet{width:100%;height:100%}";
+var yt;
+let wt, xt;
+function X(r, t, e) {
+  return (t = kt(t)) in r ? Object.defineProperty(r, t, { value: e, enumerable: !0, configurable: !0, writable: !0 }) : r[t] = e, r;
+}
+function Ct(r, t, e, n, g, R) {
+  function _(i, c, u) {
+    return function(s, a) {
+      return u && u(s), i[c].call(s, a);
+    };
+  }
+  function I(i, c) {
+    for (var u = 0; u < i.length; u++) i[u].call(c);
+    return c;
+  }
+  function b(i, c, u, s) {
+    if (typeof i != "function" && (s || i !== void 0)) throw new TypeError(c + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return i;
+  }
+  function O(i, c, u, s, a, j, A, C, D, y, m, d, p) {
+    function w(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var h, x = c[0], k = c[3], $ = !C;
+    if (!$) {
+      u || Array.isArray(x) || (x = [x]);
+      var o = {}, E = [], v = a === 3 ? "get" : a === 4 || d ? "set" : "value";
+      y ? (m || d ? o = { get: ct(function() {
+        return k(this);
+      }, s, "get"), set: function(l) {
+        c[4](this, l);
+      } } : o[v] = k, m || ct(o[v], s, a === 2 ? "" : v)) : m || (o = Object.getOwnPropertyDescriptor(i, s));
+    }
+    for (var f = i, N = x.length - 1; N >= 0; N -= u ? 2 : 1) {
+      var H = x[N], q = u ? x[N - 1] : void 0, K = {}, W = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(l, S) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        b(S, "An initializer", "be", !0), A.push(S);
+      }).bind(null, K) };
+      try {
+        if ($) (h = b(H.call(q, f, W), "class decorators", "return")) && (f = h);
+        else {
+          var L, P;
+          W.static = D, W.private = y, y ? a === 2 ? L = function(l) {
+            return w(l), o.value;
+          } : (a < 4 && (L = _(o, "get", w)), a !== 3 && (P = _(o, "set", w))) : (L = function(l) {
+            return l[s];
+          }, (a < 2 || a === 4) && (P = function(l, S) {
+            l[s] = S;
+          }));
+          var Q = W.access = { has: y ? p.bind() : function(l) {
+            return s in l;
+          } };
+          if (L && (Q.get = L), P && (Q.set = P), f = H.call(q, d ? { get: o.get, set: o.set } : o[v], W), d) {
+            if (typeof f == "object" && f) (h = b(f.get, "accessor.get")) && (o.get = h), (h = b(f.set, "accessor.set")) && (o.set = h), (h = b(f.init, "accessor.init")) && E.push(h);
+            else if (f !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else b(f, (m ? "field" : "method") + " decorators", "return") && (m ? E.push(f) : o[v] = f);
+        }
+      } finally {
+        K.v = !0;
+      }
+    }
+    return (m || d) && C.push(function(l, S) {
+      for (var U = E.length - 1; U >= 0; U--) S = E[U].call(l, S);
+      return S;
+    }), m || $ || (y ? d ? C.push(_(o, "get"), _(o, "set")) : C.push(a === 2 ? o[v] : _.call.bind(o[v])) : Object.defineProperty(i, s, o)), f;
+  }
+  function z(i, c) {
+    return Object.defineProperty(i, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: c });
+  }
+  if (arguments.length >= 6) var M = R[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var T = Object.create(M ?? null), G = function(i, c, u, s) {
+    var a, j, A = [], C = function(v) {
+      return jt(v) === i;
+    }, D = /* @__PURE__ */ new Map();
+    function y(v) {
+      v && A.push(I.bind(null, v));
+    }
+    for (var m = 0; m < c.length; m++) {
+      var d = c[m];
+      if (Array.isArray(d)) {
+        var p = d[1], w = d[2], h = d.length > 3, x = 16 & p, k = !!(8 & p), $ = (p &= 7) == 0, o = w + "/" + k;
+        if (!$ && !h) {
+          var E = D.get(o);
+          if (E === !0 || E === 3 && p !== 4 || E === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + w);
+          D.set(o, !(p > 2) || p);
+        }
+        O(k ? i : i.prototype, d, x, h ? "#" + w : kt(w), p, s, k ? j = j || [] : a = a || [], A, k, h, $, p === 1, k && h ? C : u);
+      }
+    }
+    return y(a), y(j), A;
+  }(r, t, g, T);
+  return e.length || z(r, T), { e: G, get c() {
+    var i = [];
+    return e.length && [z(O(r, [e], n, r.name, 5, T, i), T), I.bind(null, i, r)];
+  } };
+}
+function kt(r) {
+  var t = $t(r, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function $t(r, t) {
+  if (typeof r != "object" || !r) return r;
+  var e = r[Symbol.toPrimitive];
+  if (e !== void 0) {
+    var n = e.call(r, t);
+    if (typeof n != "object") return n;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(r);
+}
+function ct(r, t, e) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(r, "name", { configurable: !0, value: e ? e + " " + t : t });
+  } catch {
+  }
+  return r;
+}
+function jt(r) {
+  if (Object(r) !== r) throw TypeError("right-hand side of 'in' should be an object, got " + (r !== null ? typeof r : "null"));
+  return r;
+}
+const J = F("WsxRouter");
+xt = [ot({
+  tagName: "wsx-router"
+})];
+let At;
+class Wt extends Y {
   constructor() {
     super({
-      styles: Z,
+      styles: at,
       styleName: "wsx-router"
-    }), f(this, "views", /* @__PURE__ */ new Map()), f(this, "currentView", null), f(this, "handleRouteChange", () => {
+    }), X(this, "_autoStyles", at), X(this, "views", /* @__PURE__ */ new Map()), X(this, "currentView", null), X(this, "handleRouteChange", () => {
       const t = window.location.pathname;
-      v.debug(`Route changed to: ${t}`), this.currentView && (this.currentView.style.display = "none", v.debug("Hiding previous view"));
-      const r = this.matchRoute(t);
-      if (r) {
-        r.style.display = "block", this.currentView = r, v.debug(`Showing view for route: ${r.getAttribute("route")}`);
-        const i = this.extractParams(r.getAttribute("route") || "/", t);
-        i && r.setAttribute("params", JSON.stringify(i));
+      J.debug(`Route changed to: ${t}`), this.currentView && (this.currentView.style.display = "none", J.debug("Hiding previous view"));
+      const e = this.matchRoute(t);
+      if (e) {
+        e.style.display = "block", this.currentView = e, J.debug(`Showing view for route: ${e.getAttribute("route")}`);
+        const n = this.extractParams(e.getAttribute("route") || "/", t);
+        n && e.setAttribute("params", JSON.stringify(n));
       } else
-        v.warn(`No view found for path: ${t}`);
-      this.dispatchEvent(
-        new CustomEvent("route-changed", {
-          detail: { path: t, view: r },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }), f(this, "interceptLinks", (t) => {
-      const r = t.target.closest("a");
-      if (!r) return;
-      const i = r.getAttribute("href");
-      !i || i.startsWith("http") || i.startsWith("#") || (t.preventDefault(), this.navigate(i));
+        J.warn(`No view found for path: ${t}`);
+      this.dispatchEvent(new CustomEvent("route-changed", {
+        detail: {
+          path: t,
+          view: e
+        },
+        bubbles: !0,
+        composed: !0
+      }));
+    }), X(this, "interceptLinks", (t) => {
+      const e = t.target.closest("a");
+      if (!e) return;
+      const n = e.getAttribute("href");
+      !n || n.startsWith("http") || n.startsWith("#") || (t.preventDefault(), this.navigate(n));
     });
   }
   render() {
-    return /* @__PURE__ */ _("div", { class: "router-outlet" });
+    return /* @__PURE__ */ Z("div", { class: "router-outlet" });
   }
   onConnected() {
-    v.debug("WsxRouter connected to DOM"), this.collectViews(), v.debug("WsxRouter collected views:", this.views.size), window.addEventListener("popstate", this.handleRouteChange), this.addEventListener("click", this.interceptLinks), this.handleRouteChange();
+    J.debug("WsxRouter connected to DOM"), this.collectViews(), J.debug("WsxRouter collected views:", this.views.size), window.addEventListener("popstate", this.handleRouteChange), this.addEventListener("click", this.interceptLinks), this.handleRouteChange();
   }
   onDisconnected() {
     window.removeEventListener("popstate", this.handleRouteChange);
   }
   collectViews() {
-    const t = Array.from(this.children).filter(
-      (r) => r.tagName.toLowerCase() === "wsx-view"
-    );
-    v.debug("WsxRouter found views:", t.length), t.forEach((r) => {
-      const i = r.getAttribute("route") || "/";
-      this.views.set(i, r), r.style.display = "none", v.debug(`WsxRouter hiding view for route: ${i}`);
+    const t = Array.from(this.children).filter((e) => e.tagName.toLowerCase() === "wsx-view");
+    J.debug("WsxRouter found views:", t.length), t.forEach((e) => {
+      const n = e.getAttribute("route") || "/";
+      this.views.set(n, e), e.style.display = "none", J.debug(`WsxRouter hiding view for route: ${n}`);
     });
   }
   matchRoute(t) {
     if (this.views.has(t))
       return this.views.get(t);
-    for (const [r, i] of this.views)
-      if (r.includes(":")) {
-        const o = r.replace(/:[^/]+/g, "([^/]+)");
-        if (new RegExp(`^${o}$`).test(t))
-          return i;
+    for (const [e, n] of this.views)
+      if (e.includes(":")) {
+        const g = e.replace(/:[^/]+/g, "([^/]+)");
+        if (new RegExp(`^${g}$`).test(t))
+          return n;
       }
     return this.views.get("*") || null;
   }
-  extractParams(t, r) {
-    var c;
+  extractParams(t, e) {
+    var b;
     if (!t.includes(":")) return null;
-    const i = ((c = t.match(/:([^/]+)/g)) == null ? void 0 : c.map((a) => a.slice(1))) || [], o = t.replace(/:[^/]+/g, "([^/]+)"), n = new RegExp(`^${o}$`), s = r.match(n);
-    if (!s || !i.length) return null;
-    const l = {};
-    return i.forEach((a, h) => {
-      l[a] = s[h + 1];
-    }), l;
+    const n = ((b = t.match(/:([^/]+)/g)) == null ? void 0 : b.map((O) => O.slice(1))) || [], g = t.replace(/:[^/]+/g, "([^/]+)"), R = new RegExp(`^${g}$`), _ = e.match(R);
+    if (!_ || !n.length) return null;
+    const I = {};
+    return n.forEach((O, z) => {
+      I[O] = _[z + 1];
+    }), I;
   }
   /**
    * 编程式导航 - 使用原生 History API
@@ -89,107 +201,336 @@ class $ extends (F = I) {
     window.history.pushState(null, "", t), this.handleRouteChange();
   }
 }
-C = it(F);
-$ = ct(C, 0, "WsxRouter", D, $);
-st(C, 1, $);
+yt = Wt;
+[At, wt] = Ct(yt, [], xt, 0, void 0, Y).c;
+wt();
 const lt = ":host{display:block;width:100%;height:100%}.route-view{width:100%;height:100%;position:relative}:host([loading]) .route-view{opacity:.5;transition:opacity .3s ease}:host([error]) .route-view{border:1px solid var(--error-color, #ff0000);padding:1rem}.route-view.entering{animation:fadeIn .3s ease-out}.route-view.leaving{animation:fadeOut .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}";
-var ht = Object.create, R = Object.defineProperty, dt = Object.getOwnPropertyDescriptor, U = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), M = (e) => {
-  throw TypeError(e);
-}, V = (e, t, r) => t in e ? R(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, ut = (e, t) => R(e, "name", { value: t, configurable: !0 }), pt = (e) => [, , , ht((e == null ? void 0 : e[U("metadata")]) ?? null)], vt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], q = (e) => e !== void 0 && typeof e != "function" ? M("Function expected") : e, mt = (e, t, r, i, o) => ({ kind: vt[e], name: t, metadata: i, addInitializer: (n) => r._ ? M("Already initialized") : o.push(q(n || null)) }), wt = (e, t) => V(t, U("metadata"), e[3]), ft = (e, t, r, i) => {
-  for (var o = 0, n = e[t >> 1], s = n && n.length; o < s; o++) n[o].call(r);
-  return i;
-}, gt = (e, t, r, i, o, n) => {
-  var s, l, c, a = t & 7, h = !1, p = 0, w = e[p] || (e[p] = []), d = a && (o = o.prototype, a < 5 && (a > 3 || !h) && dt(o, r));
-  ut(o, r);
-  for (var u = i.length - 1; u >= 0; u--)
-    c = mt(a, r, l = {}, e[3], w), s = (0, i[u])(o, c), l._ = 1, q(s) && (o = s);
-  return wt(e, o), d && R(o, r, d), h ? a ^ 4 ? n : d : o;
-}, g = (e, t, r) => V(e, typeof t != "symbol" ? t + "" : t, r), Q, A, T;
-const k = y("WsxView");
-Q = [E({ tagName: "wsx-view" })];
-class b extends (T = I) {
+var tt, et;
+let ut, Et, ht;
+function B(r, t, e) {
+  return (t = St(t)) in r ? Object.defineProperty(r, t, { value: e, enumerable: !0, configurable: !0, writable: !0 }) : r[t] = e, r;
+}
+function Lt(r, t, e, n, g, R) {
+  function _(i, c, u) {
+    return function(s, a) {
+      return u && u(s), i[c].call(s, a);
+    };
+  }
+  function I(i, c) {
+    for (var u = 0; u < i.length; u++) i[u].call(c);
+    return c;
+  }
+  function b(i, c, u, s) {
+    if (typeof i != "function" && (s || i !== void 0)) throw new TypeError(c + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return i;
+  }
+  function O(i, c, u, s, a, j, A, C, D, y, m, d, p) {
+    function w(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var h, x = c[0], k = c[3], $ = !C;
+    if (!$) {
+      u || Array.isArray(x) || (x = [x]);
+      var o = {}, E = [], v = a === 3 ? "get" : a === 4 || d ? "set" : "value";
+      y ? (m || d ? o = { get: ft(function() {
+        return k(this);
+      }, s, "get"), set: function(l) {
+        c[4](this, l);
+      } } : o[v] = k, m || ft(o[v], s, a === 2 ? "" : v)) : m || (o = Object.getOwnPropertyDescriptor(i, s));
+    }
+    for (var f = i, N = x.length - 1; N >= 0; N -= u ? 2 : 1) {
+      var H = x[N], q = u ? x[N - 1] : void 0, K = {}, W = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(l, S) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        b(S, "An initializer", "be", !0), A.push(S);
+      }).bind(null, K) };
+      try {
+        if ($) (h = b(H.call(q, f, W), "class decorators", "return")) && (f = h);
+        else {
+          var L, P;
+          W.static = D, W.private = y, y ? a === 2 ? L = function(l) {
+            return w(l), o.value;
+          } : (a < 4 && (L = _(o, "get", w)), a !== 3 && (P = _(o, "set", w))) : (L = function(l) {
+            return l[s];
+          }, (a < 2 || a === 4) && (P = function(l, S) {
+            l[s] = S;
+          }));
+          var Q = W.access = { has: y ? p.bind() : function(l) {
+            return s in l;
+          } };
+          if (L && (Q.get = L), P && (Q.set = P), f = H.call(q, d ? { get: o.get, set: o.set } : o[v], W), d) {
+            if (typeof f == "object" && f) (h = b(f.get, "accessor.get")) && (o.get = h), (h = b(f.set, "accessor.set")) && (o.set = h), (h = b(f.init, "accessor.init")) && E.push(h);
+            else if (f !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else b(f, (m ? "field" : "method") + " decorators", "return") && (m ? E.push(f) : o[v] = f);
+        }
+      } finally {
+        K.v = !0;
+      }
+    }
+    return (m || d) && C.push(function(l, S) {
+      for (var U = E.length - 1; U >= 0; U--) S = E[U].call(l, S);
+      return S;
+    }), m || $ || (y ? d ? C.push(_(o, "get"), _(o, "set")) : C.push(a === 2 ? o[v] : _.call.bind(o[v])) : Object.defineProperty(i, s, o)), f;
+  }
+  function z(i, c) {
+    return Object.defineProperty(i, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: c });
+  }
+  if (arguments.length >= 6) var M = R[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var T = Object.create(M ?? null), G = function(i, c, u, s) {
+    var a, j, A = [], C = function(v) {
+      return Ot(v) === i;
+    }, D = /* @__PURE__ */ new Map();
+    function y(v) {
+      v && A.push(I.bind(null, v));
+    }
+    for (var m = 0; m < c.length; m++) {
+      var d = c[m];
+      if (Array.isArray(d)) {
+        var p = d[1], w = d[2], h = d.length > 3, x = 16 & p, k = !!(8 & p), $ = (p &= 7) == 0, o = w + "/" + k;
+        if (!$ && !h) {
+          var E = D.get(o);
+          if (E === !0 || E === 3 && p !== 4 || E === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + w);
+          D.set(o, !(p > 2) || p);
+        }
+        O(k ? i : i.prototype, d, x, h ? "#" + w : St(w), p, s, k ? j = j || [] : a = a || [], A, k, h, $, p === 1, k && h ? C : u);
+      }
+    }
+    return y(a), y(j), A;
+  }(r, t, g, T);
+  return e.length || z(r, T), { e: G, get c() {
+    var i = [];
+    return e.length && [z(O(r, [e], n, r.name, 5, T, i), T), I.bind(null, i, r)];
+  } };
+}
+function St(r) {
+  var t = It(r, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function It(r, t) {
+  if (typeof r != "object" || !r) return r;
+  var e = r[Symbol.toPrimitive];
+  if (e !== void 0) {
+    var n = e.call(r, t);
+    if (typeof n != "object") return n;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (t === "string" ? String : Number)(r);
+}
+function ft(r, t, e) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(r, "name", { configurable: !0, value: e ? e + " " + t : t });
+  } catch {
+  }
+  return r;
+}
+function Ot(r) {
+  if (Object(r) !== r) throw TypeError("right-hand side of 'in' should be an object, got " + (r !== null ? typeof r : "null"));
+  return r;
+}
+function Tt(r) {
+  return r;
+}
+const rt = F("WsxView");
+Et = [ot({
+  tagName: "wsx-view"
+})];
+let dt;
+new (ht = (et = class extends Y {
   constructor() {
     super({
       styles: lt,
       styleName: "wsx-view"
-    }), g(this, "component", null), g(this, "params", {}), g(this, "componentInstance", null);
+    }), B(this, "_autoStyles", lt), B(this, "component", null), B(this, "params", {}), B(this, "componentInstance", null);
   }
   render() {
-    return /* @__PURE__ */ _("div", { class: "route-view" });
+    return /* @__PURE__ */ Z("div", { class: "route-view" });
   }
   onConnected() {
     const t = this.getAttribute("component");
     t && !this.componentInstance && this.loadComponent(t);
   }
-  onAttributeChanged(t, r, i) {
-    if (t === "component" && i && !this.componentInstance)
-      this.loadComponent(i);
+  onAttributeChanged(t, e, n) {
+    if (t === "component" && n && !this.componentInstance)
+      this.loadComponent(n);
     else if (t === "params" && this.componentInstance)
       try {
-        this.params = JSON.parse(i), Object.entries(this.params).forEach(([o, n]) => {
-          this.componentInstance.setAttribute(o, n);
+        this.params = JSON.parse(n), Object.entries(this.params).forEach(([g, R]) => {
+          this.componentInstance.setAttribute(g, R);
         });
-      } catch (o) {
-        k.error("Failed to parse params:", o);
+      } catch (g) {
+        rt.error("Failed to parse params:", g);
       }
   }
   async loadComponent(t) {
     if (this.componentInstance && (this.componentInstance.remove(), this.componentInstance = null), !customElements.get(t)) {
-      k.warn(`Component ${t} not found in customElements registry`);
+      rt.warn(`Component ${t} not found in customElements registry`);
       return;
     }
-    this.componentInstance = document.createElement(t), Object.keys(this.params).length > 0 && Object.entries(this.params).forEach(([o, n]) => {
-      this.componentInstance.setAttribute(o, n);
+    this.componentInstance = document.createElement(t), Object.keys(this.params).length > 0 && Object.entries(this.params).forEach(([g, R]) => {
+      this.componentInstance.setAttribute(g, R);
     });
-    const i = this.querySelector(".route-view");
-    i ? i.appendChild(this.componentInstance) : k.error("Route view container not found");
+    const n = this.querySelector(".route-view");
+    n ? n.appendChild(this.componentInstance) : rt.error("Route view container not found");
   }
   onDisconnected() {
     this.componentInstance && (this.componentInstance.remove(), this.componentInstance = null);
   }
-}
-A = pt(T);
-b = gt(A, 0, "WsxView", Q, b);
-g(b, "observedAttributes", ["route", "component", "params"]);
-ft(A, 1, b);
-const _t = ':host{display:inline-block;min-width:fit-content;min-height:fit-content;width:auto;height:auto}.wsx-link{color:var(--link-color, #007bff);text-decoration:var(--link-decoration, underline);cursor:pointer;transition:color .2s ease;display:inline-block;min-height:1.2em;line-height:1.2}.wsx-link:hover{color:var(--link-hover-color, #0056b3);text-decoration:var(--link-hover-decoration, underline)}.wsx-link:focus{outline:2px solid var(--link-focus-color, #007bff);outline-offset:2px}.wsx-link.active{color:var(--link-active-color, #6c757d);font-weight:var(--link-active-weight, bold)}:host([disabled]) .wsx-link{color:var(--link-disabled-color, #6c757d);cursor:not-allowed;pointer-events:none}:host([external]) .wsx-link:after{content:"↗";font-size:.8em;margin-left:.2em;opacity:.7}:host([variant="button"]) .wsx-link{background-color:var(--button-bg, #007bff);color:var(--button-color, white);padding:.5rem 1rem;border-radius:.25rem;text-decoration:none;display:inline-block}:host([variant="button"]) .wsx-link:hover{background-color:var(--button-hover-bg, #0056b3);color:var(--button-hover-color, white)}:host([variant="tab"]) .wsx-link{padding:.5rem 1rem;border-bottom:2px solid transparent;text-decoration:none}:host([variant="tab"]) .wsx-link.active{border-bottom-color:var(--tab-active-border, #007bff)}';
-var bt = Object.create, P = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, H = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), J = (e) => {
-  throw TypeError(e);
-}, B = (e, t, r) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, yt = (e, t) => P(e, "name", { value: t, configurable: !0 }), kt = (e) => [, , , bt((e == null ? void 0 : e[H("metadata")]) ?? null)], $t = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], G = (e) => e !== void 0 && typeof e != "function" ? J("Function expected") : e, Et = (e, t, r, i, o) => ({ kind: $t[e], name: t, metadata: i, addInitializer: (n) => r._ ? J("Already initialized") : o.push(G(n || null)) }), St = (e, t) => B(t, H("metadata"), e[3]), Ct = (e, t, r, i) => {
-  for (var o = 0, n = e[t >> 1], s = n && n.length; o < s; o++) n[o].call(r);
-  return i;
-}, Rt = (e, t, r, i, o, n) => {
-  var s, l, c, a = t & 7, h = !1, p = 0, w = e[p] || (e[p] = []), d = a && (o = o.prototype, a < 5 && (a > 3 || !h) && xt(o, r));
-  yt(o, r);
-  for (var u = i.length - 1; u >= 0; u--)
-    c = Et(a, r, l = {}, e[3], w), s = (0, i[u])(o, c), l._ = 1, G(s) && (o = s);
-  return St(e, o), d && P(o, r, d), h ? a ^ 4 ? n : d : o;
-}, m = (e, t, r) => B(e, typeof t != "symbol" ? t + "" : t, r), K, L, X;
-const W = y("WsxLink");
-K = [E({ tagName: "wsx-link" })];
-class x extends (X = Y) {
+}, [dt, ut] = Lt(et, [], Et, 0, void 0, Y).c, et), tt = class extends Tt {
   constructor() {
-    super({
-      styles: _t,
-      styleName: "wsx-link"
-    }), m(this, "to", ""), m(this, "replace", !1), m(this, "activeClass", "active"), m(this, "exact", !1), m(this, "handleClick", (t) => {
-      if (t.preventDefault(), !this.to) {
-        W.warn("No 'to' attribute specified");
+    super(dt), B(this, "observedAttributes", ["route", "component", "params"]), ut();
+  }
+}, B(tt, ht, void 0), tt)();
+const Dt = ':host{display:inline-block;min-width:fit-content;min-height:fit-content;width:auto;height:auto}.wsx-link{color:var(--link-color, #007bff);text-decoration:var(--link-decoration, underline);cursor:pointer;transition:color .2s ease;display:inline-block;min-height:1.2em;line-height:1.2}.wsx-link:hover{color:var(--link-hover-color, #0056b3);text-decoration:var(--link-hover-decoration, underline)}.wsx-link:focus{outline:2px solid var(--link-focus-color, #007bff);outline-offset:2px}.wsx-link.active{color:var(--link-active-color, #6c757d);font-weight:var(--link-active-weight, bold)}:host([disabled]) .wsx-link{color:var(--link-disabled-color, #6c757d);cursor:not-allowed;pointer-events:none}:host([external]) .wsx-link:after{content:"↗";font-size:.8em;margin-left:.2em;opacity:.7}:host([variant="button"]) .wsx-link{background-color:var(--button-bg, #007bff);color:var(--button-color, white);padding:.5rem 1rem;border-radius:.25rem;text-decoration:none;display:inline-block}:host([variant="button"]) .wsx-link:hover{background-color:var(--button-hover-bg, #0056b3);color:var(--button-hover-color, white)}:host([variant="tab"]) .wsx-link{padding:.5rem 1rem;border-bottom:2px solid transparent;text-decoration:none}:host([variant="tab"]) .wsx-link.active{border-bottom-color:var(--tab-active-border, #007bff)}';
+var nt, it;
+let pt, _t, vt;
+function V(r, t, e) {
+  return (t = Rt(t)) in r ? Object.defineProperty(r, t, { value: e, enumerable: !0, configurable: !0, writable: !0 }) : r[t] = e, r;
+}
+function Nt(r, t, e, n, g, R) {
+  function _(i, c, u) {
+    return function(s, a) {
+      return u && u(s), i[c].call(s, a);
+    };
+  }
+  function I(i, c) {
+    for (var u = 0; u < i.length; u++) i[u].call(c);
+    return c;
+  }
+  function b(i, c, u, s) {
+    if (typeof i != "function" && (s || i !== void 0)) throw new TypeError(c + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return i;
+  }
+  function O(i, c, u, s, a, j, A, C, D, y, m, d, p) {
+    function w(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var h, x = c[0], k = c[3], $ = !C;
+    if (!$) {
+      u || Array.isArray(x) || (x = [x]);
+      var o = {}, E = [], v = a === 3 ? "get" : a === 4 || d ? "set" : "value";
+      y ? (m || d ? o = { get: mt(function() {
+        return k(this);
+      }, s, "get"), set: function(l) {
+        c[4](this, l);
+      } } : o[v] = k, m || mt(o[v], s, a === 2 ? "" : v)) : m || (o = Object.getOwnPropertyDescriptor(i, s));
+    }
+    for (var f = i, N = x.length - 1; N >= 0; N -= u ? 2 : 1) {
+      var H = x[N], q = u ? x[N - 1] : void 0, K = {}, W = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(l, S) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        b(S, "An initializer", "be", !0), A.push(S);
+      }).bind(null, K) };
+      try {
+        if ($) (h = b(H.call(q, f, W), "class decorators", "return")) && (f = h);
+        else {
+          var L, P;
+          W.static = D, W.private = y, y ? a === 2 ? L = function(l) {
+            return w(l), o.value;
+          } : (a < 4 && (L = _(o, "get", w)), a !== 3 && (P = _(o, "set", w))) : (L = function(l) {
+            return l[s];
+          }, (a < 2 || a === 4) && (P = function(l, S) {
+            l[s] = S;
+          }));
+          var Q = W.access = { has: y ? p.bind() : function(l) {
+            return s in l;
+          } };
+          if (L && (Q.get = L), P && (Q.set = P), f = H.call(q, d ? { get: o.get, set: o.set } : o[v], W), d) {
+            if (typeof f == "object" && f) (h = b(f.get, "accessor.get")) && (o.get = h), (h = b(f.set, "accessor.set")) && (o.set = h), (h = b(f.init, "accessor.init")) && E.push(h);
+            else if (f !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else b(f, (m ? "field" : "method") + " decorators", "return") && (m ? E.push(f) : o[v] = f);
+        }
+      } finally {
+        K.v = !0;
+      }
+    }
+    return (m || d) && C.push(function(l, S) {
+      for (var U = E.length - 1; U >= 0; U--) S = E[U].call(l, S);
+      return S;
+    }), m || $ || (y ? d ? C.push(_(o, "get"), _(o, "set")) : C.push(a === 2 ? o[v] : _.call.bind(o[v])) : Object.defineProperty(i, s, o)), f;
+  }
+  function z(i, c) {
+    return Object.defineProperty(i, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: c });
+  }
+  if (arguments.length >= 6) var M = R[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var T = Object.create(M ?? null), G = function(i, c, u, s) {
+    var a, j, A = [], C = function(v) {
+      return zt(v) === i;
+    }, D = /* @__PURE__ */ new Map();
+    function y(v) {
+      v && A.push(I.bind(null, v));
+    }
+    for (var m = 0; m < c.length; m++) {
+      var d = c[m];
+      if (Array.isArray(d)) {
+        var p = d[1], w = d[2], h = d.length > 3, x = 16 & p, k = !!(8 & p), $ = (p &= 7) == 0, o = w + "/" + k;
+        if (!$ && !h) {
+          var E = D.get(o);
+          if (E === !0 || E === 3 && p !== 4 || E === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + w);
+          D.set(o, !(p > 2) || p);
+        }
+        O(k ? i : i.prototype, d, x, h ? "#" + w : Rt(w), p, s, k ? j = j || [] : a = a || [], A, k, h, $, p === 1, k && h ? C : u);
+      }
+    }
+    return y(a), y(j), A;
+  }(r, t, g, T);
+  return e.length || z(r, T), { e: G, get c() {
+    var i = [];
+    return e.length && [z(O(r, [e], n, r.name, 5, T, i), T), I.bind(null, i, r)];
+  } };
+}
+function Rt(r) {
+  var t = Pt(r, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function Pt(r, t) {
+  if (typeof r != "object" || !r) return r;
+  var e = r[Symbol.toPrimitive];
+  if (e !== void 0) {
+    var n = e.call(r, t);
+    if (typeof n != "object") return n;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (t === "string" ? String : Number)(r);
+}
+function mt(r, t, e) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(r, "name", { configurable: !0, value: e ? e + " " + t : t });
+  } catch {
+  }
+  return r;
+}
+function zt(r) {
+  if (Object(r) !== r) throw TypeError("right-hand side of 'in' should be an object, got " + (r !== null ? typeof r : "null"));
+  return r;
+}
+function Ut(r) {
+  return r;
+}
+const gt = F("WsxLink");
+_t = [ot({
+  tagName: "wsx-link"
+})];
+let bt;
+new (vt = (it = class extends st {
+  constructor(...t) {
+    super(...t), V(this, "_autoStyles", Dt), V(this, "to", ""), V(this, "replace", !1), V(this, "activeClass", "active"), V(this, "exact", !1), V(this, "handleClick", (e) => {
+      if (e.preventDefault(), !this.to) {
+        gt.warn("No 'to' attribute specified");
         return;
       }
       if (this.isExternalLink(this.to)) {
         window.open(this.to, "_blank");
         return;
       }
-      this.replace ? window.history.replaceState(null, "", this.to) : window.history.pushState(null, "", this.to), window.dispatchEvent(new PopStateEvent("popstate")), W.debug(`Navigated to: ${this.to}`);
-    }), m(this, "updateActiveState", () => {
-      var o;
-      const t = window.location.pathname, r = this.exact ? t === this.to : t.startsWith(this.to) && this.to !== "/", i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("a");
-      i && (r ? (i.classList.add(this.activeClass), this.setAttribute("active", "")) : (i.classList.remove(this.activeClass), this.removeAttribute("active")));
+      this.replace ? window.history.replaceState(null, "", this.to) : window.history.pushState(null, "", this.to), window.dispatchEvent(new PopStateEvent("popstate")), gt.debug(`Navigated to: ${this.to}`);
+    }), V(this, "updateActiveState", () => {
+      var R;
+      const e = window.location.pathname, n = this.exact ? e === this.to : e.startsWith(this.to) && this.to !== "/", g = (R = this.shadowRoot) == null ? void 0 : R.querySelector("a");
+      g && (n ? (g.classList.add(this.activeClass), this.setAttribute("active", "")) : (g.classList.remove(this.activeClass), this.removeAttribute("active")));
     });
   }
   render() {
-    return /* @__PURE__ */ _("a", { href: this.to, class: "wsx-link", onClick: this.handleClick, part: "link" }, /* @__PURE__ */ _("slot", null));
+    return /* @__PURE__ */ Z("a", { href: this.to, class: "wsx-link", onClick: this.handleClick, part: "link" }, /* @__PURE__ */ Z("slot", null));
   }
   onConnected() {
     this.to = this.getAttribute("to") || "", this.replace = this.hasAttribute("replace"), this.activeClass = this.getAttribute("active-class") || "active", this.exact = this.hasAttribute("exact");
@@ -199,19 +540,19 @@ class x extends (X = Y) {
   onDisconnected() {
     window.removeEventListener("popstate", this.updateActiveState), document.removeEventListener("route-changed", this.updateActiveState);
   }
-  onAttributeChanged(t, r, i) {
+  onAttributeChanged(t, e, n) {
     switch (t) {
       case "to":
-        this.to = i || "", this.rerender(), this.updateActiveState();
+        this.to = n || "", this.rerender(), this.updateActiveState();
         break;
       case "replace":
-        this.replace = i !== null && i !== "false";
+        this.replace = n !== null && n !== "false";
         break;
       case "active-class":
-        this.activeClass = i || "active", this.updateActiveState();
+        this.activeClass = n || "active", this.updateActiveState();
         break;
       case "exact":
-        this.exact = i !== null && i !== "false", this.updateActiveState();
+        this.exact = n !== null && n !== "false", this.updateActiveState();
         break;
     }
   }
@@ -222,25 +563,23 @@ class x extends (X = Y) {
    * 编程式导航
    */
   navigate() {
-    this.to && this.handleClick(
-      new MouseEvent("click", {
-        bubbles: !0,
-        cancelable: !0
-      })
-    );
+    this.to && this.handleClick(new MouseEvent("click", {
+      bubbles: !0,
+      cancelable: !0
+    }));
   }
-}
-L = kt(X);
-x = Rt(L, 0, "WsxLink", K, x);
-m(x, "observedAttributes", ["to", "replace", "active-class", "exact"]);
-Ct(L, 1, x);
-const At = y("RouterUtils");
-class Lt {
+}, [bt, pt] = Nt(it, [], _t, 0, void 0, st).c, it), nt = class extends Ut {
+  constructor() {
+    super(bt), V(this, "observedAttributes", ["to", "replace", "active-class", "exact"]), pt();
+  }
+}, V(nt, vt, void 0), nt)();
+const Vt = F("RouterUtils");
+class Kt {
   /**
    * 编程式导航
    */
-  static navigate(t, r = !1) {
-    r ? window.history.replaceState(null, "", t) : window.history.pushState(null, "", t), window.dispatchEvent(new PopStateEvent("popstate")), At.debug(`Navigated to: ${t} (replace: ${r})`);
+  static navigate(t, e = !1) {
+    e ? window.history.replaceState(null, "", t) : window.history.pushState(null, "", t), window.dispatchEvent(new PopStateEvent("popstate")), Vt.debug(`Navigated to: ${t} (replace: ${e})`);
   }
   /**
    * 获取当前路由信息
@@ -259,9 +598,9 @@ class Lt {
   /**
    * 解析路由路径，提取参数
    */
-  static parseRoute(t, r) {
-    var i;
-    if (t === r)
+  static parseRoute(t, e) {
+    var n;
+    if (t === e)
       return {
         route: t,
         params: {},
@@ -274,21 +613,21 @@ class Lt {
         exact: !1
       };
     if (t.includes(":")) {
-      const o = ((i = t.match(/:([^/]+)/g)) == null ? void 0 : i.map((c) => c.slice(1))) || [], n = t.replace(/:[^/]+/g, "([^/]+)"), s = new RegExp(`^${n}$`), l = r.match(s);
-      if (l && o.length > 0) {
-        const c = {};
-        return o.forEach((a, h) => {
-          c[a] = l[h + 1];
+      const g = ((n = t.match(/:([^/]+)/g)) == null ? void 0 : n.map((b) => b.slice(1))) || [], R = t.replace(/:[^/]+/g, "([^/]+)"), _ = new RegExp(`^${R}$`), I = e.match(_);
+      if (I && g.length > 0) {
+        const b = {};
+        return g.forEach((O, z) => {
+          b[O] = I[z + 1];
         }), {
           route: t,
-          params: c,
+          params: b,
           exact: !0
         };
       }
     }
     if (t.endsWith("/*")) {
-      const o = t.slice(0, -2);
-      if (r.startsWith(o))
+      const g = t.slice(0, -2);
+      if (e.startsWith(g))
         return {
           route: t,
           params: {},
@@ -300,37 +639,37 @@ class Lt {
   /**
    * 构建路由路径，替换参数
    */
-  static buildPath(t, r = {}) {
-    let i = t;
-    return Object.entries(r).forEach(([o, n]) => {
-      i = i.replace(`:${o}`, encodeURIComponent(n));
-    }), i;
+  static buildPath(t, e = {}) {
+    let n = t;
+    return Object.entries(e).forEach(([g, R]) => {
+      n = n.replace(`:${g}`, encodeURIComponent(R));
+    }), n;
   }
   /**
    * 检查路由是否匹配当前路径
    */
-  static isRouteActive(t, r = !1) {
-    const i = window.location.pathname;
-    return r ? i === t : t === "/" ? i === "/" : i.startsWith(t);
+  static isRouteActive(t, e = !1) {
+    const n = window.location.pathname;
+    return e ? n === t : t === "/" ? n === "/" : n.startsWith(t);
   }
   /**
    * 获取路由层级
    */
   static getRouteDepth(t) {
-    return t.split("/").filter((r) => r.length > 0).length;
+    return t.split("/").filter((e) => e.length > 0).length;
   }
   /**
    * 获取父级路由
    */
   static getParentRoute(t) {
-    const r = t.split("/").filter((i) => i.length > 0);
-    return r.length <= 1 ? "/" : (r.pop(), "/" + r.join("/"));
+    const e = t.split("/").filter((n) => n.length > 0);
+    return e.length <= 1 ? "/" : (e.pop(), "/" + e.join("/"));
   }
   /**
    * 合并路由路径
    */
   static joinPaths(...t) {
-    return t.map((r) => r.replace(/^\/+|\/+$/g, "")).filter((r) => r.length > 0).join("/").replace(/^/, "/");
+    return t.map((e) => e.replace(/^\/+|\/+$/g, "")).filter((e) => e.length > 0).join("/").replace(/^/, "/");
   }
   /**
    * 检查是否为外部链接
@@ -347,20 +686,20 @@ class Lt {
   /**
    * 设置查询参数
    */
-  static setQueryParam(t, r, i = !1) {
-    const o = new URL(window.location.href);
-    o.searchParams.set(t, r);
-    const n = o.pathname + o.search + o.hash;
-    this.navigate(n, i);
+  static setQueryParam(t, e, n = !1) {
+    const g = new URL(window.location.href);
+    g.searchParams.set(t, e);
+    const R = g.pathname + g.search + g.hash;
+    this.navigate(R, n);
   }
   /**
    * 删除查询参数
    */
-  static removeQueryParam(t, r = !1) {
-    const i = new URL(window.location.href);
-    i.searchParams.delete(t);
-    const o = i.pathname + i.search + i.hash;
-    this.navigate(o, r);
+  static removeQueryParam(t, e = !1) {
+    const n = new URL(window.location.href);
+    n.searchParams.delete(t);
+    const g = n.pathname + n.search + n.hash;
+    this.navigate(g, e);
   }
   /**
    * 返回上一页
@@ -390,18 +729,18 @@ class Lt {
    * 监听路由变化
    */
   static onRouteChange(t) {
-    const r = () => {
-      const i = this.getCurrentRoute();
-      t(i);
+    const e = () => {
+      const n = this.getCurrentRoute();
+      t(n);
     };
-    return window.addEventListener("popstate", r), document.addEventListener("route-changed", r), () => {
-      window.removeEventListener("popstate", r), document.removeEventListener("route-changed", r);
+    return window.addEventListener("popstate", e), document.addEventListener("route-changed", e), () => {
+      window.removeEventListener("popstate", e), document.removeEventListener("route-changed", e);
     };
   }
 }
 export {
-  Lt as RouterUtils,
-  x as WsxLink,
-  $ as WsxRouter,
-  b as WsxView
+  Kt as RouterUtils,
+  bt as WsxLink,
+  At as WsxRouter,
+  dt as WsxView
 };

package/package.json

@@ -1,63 +1,63 @@
 {
-    "name": "@wsxjs/wsx-router",
-    "version": "0.0.6",
-    "description": "WSX Router - Native History API-based routing for WSX Framework",
-    "type": "module",
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.js",
-    "exports": {
-        ".": {
-            "import": "./dist/index.js",
-            "require": "./dist/index.cjs"
-        }
-    },
-    "files": [
-        "dist",
-        "src",
-        "!**/__tests__",
-        "!**/test"
-    ],
-    "scripts": {
-        "build": "vite build",
-        "build:dev": "NODE_ENV=development vite build",
-        "dev": "NODE_ENV=development vite build --watch",
-        "clean": "rm -rf dist",
-        "test": "vitest",
-        "test:ui": "vitest --ui",
-        "test:coverage": "vitest --coverage",
-        "typecheck": "tsc --noEmit",
-        "lint": "eslint .",
-        "lint:fix": "eslint . --fix"
-    },
-    "dependencies": {
-        "@wsxjs/wsx-core": "workspace:*"
-    },
-    "devDependencies": {
-        "@wsxjs/eslint-plugin-wsx": "workspace:*",
-        "@wsxjs/wsx-vite-plugin": "workspace:*",
-        "@typescript-eslint/eslint-plugin": "^8.37.0",
-        "@typescript-eslint/parser": "^8.37.0",
-        "@vitest/ui": "^2.1.8",
-        "@vitest/coverage-v8": "^2.1.8",
-        "eslint": "^9.31.0",
-        "jsdom": "^26.0.0",
-        "typescript": "^5.0.0",
-        "vite": "^5.4.19",
-        "vitest": "^2.1.8"
-    },
-    "keywords": [
-        "wsx",
-        "router",
-        "web-components",
-        "history-api",
-        "navigation",
-        "spa"
-    ],
-    "author": "WSX Framework Team",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/wsxjs/wsxjs.git",
-        "directory": "packages/wsx-router"
+  "name": "@wsxjs/wsx-router",
+  "version": "0.0.8",
+  "description": "WSX Router - Native History API-based routing for WSX Framework",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
-}
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__",
+    "!**/test"
+  ],
+  "dependencies": {
+    "@wsxjs/wsx-core": "0.0.8"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "@vitest/ui": "^2.1.8",
+    "@vitest/coverage-v8": "^2.1.8",
+    "eslint": "^9.31.0",
+    "jsdom": "^26.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.19",
+    "vitest": "^2.1.8",
+    "@wsxjs/wsx-vite-plugin": "0.0.8",
+    "@wsxjs/eslint-plugin-wsx": "0.0.8"
+  },
+  "keywords": [
+    "wsx",
+    "router",
+    "web-components",
+    "history-api",
+    "navigation",
+    "spa"
+  ],
+  "author": "WSX Framework Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wsxjs/wsxjs.git",
+    "directory": "packages/wsx-router"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "clean": "rm -rf dist",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  }
+}

package/src/WsxLink.wsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource @wsxjs/wsx-core */
 import { WebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
-import styles from "./WsxLink.css?inline";
 
 const logger = createLogger("WsxLink");
 
@@ -29,13 +28,6 @@ export default class WsxLink extends WebComponent {
     private activeClass: string = "active";
     private exact: boolean = false;
 
-    constructor() {
-        super({
-            styles,
-            styleName: "wsx-link",
-        });
-    }
-
     render() {
         return (
             <a href={this.to} class="wsx-link" onClick={this.handleClick} part="link">