@wsxjs/wsx-router 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=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,L=(e,t)=>(t=Symbol[e])?t:Symbol.for("Symbol."+e),P=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[L("metadata")])??null)],tt=["class","method","getter","setter","accessor","field","value","get","set"],O=e=>e!==void 0&&typeof e!="function"?P("Function expected"):e,et=(e,t,r,i,o)=>({kind:tt[e],name:t,metadata:i,addInitializer:n=>r._?P("Already initialized"):o.push(O(n||null))}),rt=(e,t)=>I(t,L("metadata"),e[3]),ot=(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},it=(e,t,r,i,o,n)=>{var s,h,c,a=t&7,d=!1,m=0,f=e[m]||(e[m]=[]),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,h={},e[3],f),s=(0,i[p])(o,c),h._=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 v=l.createLogger("WsxRouter");j=[l.autoRegister({tagName:"wsx-router"})];class y extends(N=l.WebComponent){constructor(){super({styles:G}),b(this,"views",new Map),b(this,"currentView",null),b(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))}else v.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 l.jsx("div",{class:"router-outlet"},l.jsx("slot",null))}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()}onDisconnected(){window.removeEventListener("popstate",this.handleRouteChange)}collectViews(){var o;const t=(o=this.shadowRoot)==null?void 0:o.querySelector("slot");if(!t){v.error("WsxRouter: No slot found");return}const i=t.assignedElements().filter(n=>n.tagName.toLowerCase()==="wsx-view");v.debug("WsxRouter found views:",i.length),i.forEach(n=>{const s=n.getAttribute("route")||"/";this.views.set(s,n),n.style.display="none",v.debug(`WsxRouter hiding view for route: ${s}`)})}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 h={};return i.forEach((a,d)=>{h[a]=s[d+1]}),h}navigate(t){window.history.pushState(null,"",t),this.handleRouteChange()}}E=Z(N);y=it(E,0,"WsxRouter",j,y);ot(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 st=Object.create,R=Object.defineProperty,at=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?R(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,ct=(e,t)=>R(e,"name",{value:t,configurable:!0}),lt=e=>[,,,st((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,h,c,a=t&7,d=!1,m=0,f=e[m]||(e[m]=[]),u=a&&(o=o.prototype,a<5&&(a>3||!d)&&at(o,r));ct(o,r);for(var p=i.length-1;p>=0;p--)c=dt(a,r,h={},e[3],f),s=(0,i[p])(o,c),h._=1,U(s)&&(o=s);return ut(e,o),u&&R(o,r,u),d?a^4?n:u:o},x=(e,t,r)=>F(e,typeof t!="symbol"?t+"":t,r),M,S,q;const k=l.createLogger("WsxView");M=[l.autoRegister({tagName:"wsx-view"})];class g extends(q=l.WebComponent){constructor(){super({styles:nt,styleName:"wsx-view"}),x(this,"component",null),x(this,"params",{}),x(this,"componentInstance",null)}render(){return l.jsx("div",{class:"route-view",part:"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){var o;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(([n,s])=>{this.componentInstance.setAttribute(n,s)});const i=(o=this.shadowRoot)==null?void 0:o.querySelector(".route-view");i?i.appendChild(this.componentInstance):k.error("Route view container not found")}onDisconnected(){this.componentInstance&&(this.componentInstance.remove(),this.componentInstance=null)}}S=lt(q);g=vt(S,0,"WsxView",M,g);x(g,"observedAttributes",["route","component","params"]);pt(S,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,V=(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[V("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,V("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,h,c,a=t&7,d=!1,m=0,f=e[m]||(e[m]=[]),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,h={},e[3],f),s=(0,i[p])(o,c),h._=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,W,B;const A=l.createLogger("WsxLink");J=[l.autoRegister({tagName:"wsx-link"})];class _ extends(B=l.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 l.jsx("a",{href:this.to,class:"wsx-link",onClick:this.handleClick,part:"link"},l.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}))}}W=_t(B);_=$t(W,0,"WsxLink",J,_);w(_,"observedAttributes",["to","replace","active-class","exact"]);kt(W,1,_);const Et=l.createLogger("RouterUtils");class Rt{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}$`),h=r.match(s);if(h&&o.length>0){const c={};return o.forEach((a,d)=>{c[a]=h[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=Rt;exports.WsxLink=_;exports.WsxRouter=y;exports.WsxView=g;
+"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;

package/dist/index.js

@@ -1,31 +1,34 @@
-import { createLogger as y, autoRegister as E, WebComponent as S, jsx as f } from "@wsxjs/wsx-core";
-const Y = ":host{display:block;width:100%;height:100%}.router-outlet{width:100%;height:100%}";
-var Z = Object.create, R = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, O = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), N = (e) => {
+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 ? R(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, et = (e, t) => R(e, "name", { value: t, configurable: !0 }), rt = (e) => [, , , Z((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, it = (e, t, r, i, o) => ({ kind: ot[e], name: t, metadata: i, addInitializer: (n) => r._ ? N("Already initialized") : o.push(z(n || null)) }), nt = (e, t) => j(t, O("metadata"), e[3]), st = (e, t, r, i) => {
+}, 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;
-}, at = (e, t, r, i, o, n) => {
-  var s, l, c, a = t & 7, h = !1, v = 0, w = e[v] || (e[v] = []), d = a && (o = o.prototype, a < 5 && (a > 3 || !h) && tt(o, r));
-  et(o, r);
+}, 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 = it(a, r, l = {}, e[3], w), s = (0, i[u])(o, c), l._ = 1, z(s) && (o = s);
-  return nt(e, o), d && R(o, r, d), h ? a ^ 4 ? n : d : o;
-}, g = (e, t, r) => j(e, typeof t != "symbol" ? t + "" : t, r), D, C, F;
-const p = y("WsxRouter");
+    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 = S) {
+class $ extends (F = I) {
   constructor() {
-    super({ styles: Y }), g(this, "views", /* @__PURE__ */ new Map()), g(this, "currentView", null), g(this, "handleRouteChange", () => {
+    super({
+      styles: Z,
+      styleName: "wsx-router"
+    }), f(this, "views", /* @__PURE__ */ new Map()), f(this, "currentView", null), f(this, "handleRouteChange", () => {
       const t = window.location.pathname;
-      p.debug(`Route changed to: ${t}`), this.currentView && (this.currentView.style.display = "none", p.debug("Hiding previous view"));
+      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, p.debug(`Showing view for route: ${r.getAttribute("route")}`);
+        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));
       } else
-        p.warn(`No view found for path: ${t}`);
+        v.warn(`No view found for path: ${t}`);
       this.dispatchEvent(
         new CustomEvent("route-changed", {
           detail: { path: t, view: r },
@@ -33,7 +36,7 @@ class $ extends (F = S) {
           composed: !0
         })
       );
-    }), g(this, "interceptLinks", (t) => {
+    }), f(this, "interceptLinks", (t) => {
       const r = t.target.closest("a");
       if (!r) return;
       const i = r.getAttribute("href");
@@ -41,25 +44,21 @@ class $ extends (F = S) {
     });
   }
   render() {
-    return /* @__PURE__ */ f("div", { class: "router-outlet" }, /* @__PURE__ */ f("slot", null));
+    return /* @__PURE__ */ _("div", { class: "router-outlet" });
   }
   onConnected() {
-    p.debug("WsxRouter connected to DOM"), this.collectViews(), p.debug("WsxRouter collected views:", this.views.size), window.addEventListener("popstate", this.handleRouteChange), this.addEventListener("click", this.interceptLinks), this.handleRouteChange();
+    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();
   }
   onDisconnected() {
     window.removeEventListener("popstate", this.handleRouteChange);
   }
   collectViews() {
-    var o;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot");
-    if (!t) {
-      p.error("WsxRouter: No slot found");
-      return;
-    }
-    const i = t.assignedElements().filter((n) => n.tagName.toLowerCase() === "wsx-view");
-    p.debug("WsxRouter found views:", i.length), i.forEach((n) => {
-      const s = n.getAttribute("route") || "/";
-      this.views.set(s, n), n.style.display = "none", p.debug(`WsxRouter hiding view for route: ${s}`);
+    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}`);
     });
   }
   matchRoute(t) {
@@ -90,33 +89,33 @@ class $ extends (F = S) {
     window.history.pushState(null, "", t), this.handleRouteChange();
   }
 }
-C = rt(F);
-$ = at(C, 0, "WsxRouter", D, $);
+C = it(F);
+$ = ct(C, 0, "WsxRouter", D, $);
 st(C, 1, $);
-const ct = ":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 lt = Object.create, A = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, U = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), M = (e) => {
+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);
-}, q = (e, t, r) => t in e ? A(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, dt = (e, t) => A(e, "name", { value: t, configurable: !0 }), ut = (e) => [, , , lt((e == null ? void 0 : e[U("metadata")]) ?? null)], pt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], V = (e) => e !== void 0 && typeof e != "function" ? M("Function expected") : e, vt = (e, t, r, i, o) => ({ kind: pt[e], name: t, metadata: i, addInitializer: (n) => r._ ? M("Already initialized") : o.push(V(n || null)) }), mt = (e, t) => q(t, U("metadata"), e[3]), wt = (e, t, r, i) => {
+}, 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;
-}, ft = (e, t, r, i, o, n) => {
-  var s, l, c, a = t & 7, h = !1, v = 0, w = e[v] || (e[v] = []), d = a && (o = o.prototype, a < 5 && (a > 3 || !h) && ht(o, r));
-  dt(o, r);
+}, 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 = vt(a, r, l = {}, e[3], w), s = (0, i[u])(o, c), l._ = 1, V(s) && (o = s);
-  return mt(e, o), d && A(o, r, d), h ? a ^ 4 ? n : d : o;
-}, _ = (e, t, r) => q(e, typeof t != "symbol" ? t + "" : t, r), Q, P, T;
+    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 = S) {
+class b extends (T = I) {
   constructor() {
     super({
-      styles: ct,
+      styles: lt,
       styleName: "wsx-view"
-    }), _(this, "component", null), _(this, "params", {}), _(this, "componentInstance", null);
+    }), g(this, "component", null), g(this, "params", {}), g(this, "componentInstance", null);
   }
   render() {
-    return /* @__PURE__ */ f("div", { class: "route-view", part: "view" });
+    return /* @__PURE__ */ _("div", { class: "route-view" });
   }
   onConnected() {
     const t = this.getAttribute("component");
@@ -135,55 +134,54 @@ class b extends (T = S) {
       }
   }
   async loadComponent(t) {
-    var o;
     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(([n, s]) => {
-      this.componentInstance.setAttribute(n, s);
+    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 = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".route-view");
+    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);
   }
 }
-P = ut(T);
-b = ft(P, 0, "WsxView", Q, b);
-_(b, "observedAttributes", ["route", "component", "params"]);
-wt(P, 1, b);
-const gt = ':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 _t = Object.create, L = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, H = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), J = (e) => {
+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 ? L(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, xt = (e, t) => L(e, "name", { value: t, configurable: !0 }), yt = (e) => [, , , _t((e == null ? void 0 : e[H("metadata")]) ?? null)], kt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], G = (e) => e !== void 0 && typeof e != "function" ? J("Function expected") : e, $t = (e, t, r, i, o) => ({ kind: kt[e], name: t, metadata: i, addInitializer: (n) => r._ ? J("Already initialized") : o.push(G(n || null)) }), Et = (e, t) => B(t, H("metadata"), e[3]), St = (e, t, r, i) => {
+}, 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, v = 0, w = e[v] || (e[v] = []), d = a && (o = o.prototype, a < 5 && (a > 3 || !h) && bt(o, r));
-  xt(o, r);
+  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 = $t(a, r, l = {}, e[3], w), s = (0, i[u])(o, c), l._ = 1, G(s) && (o = s);
-  return Et(e, o), d && L(o, r, d), h ? a ^ 4 ? n : d : o;
-}, m = (e, t, r) => B(e, typeof t != "symbol" ? t + "" : t, r), K, W, X;
-const I = y("WsxLink");
+    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 = S) {
+class x extends (X = Y) {
   constructor() {
     super({
-      styles: gt,
+      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) {
-        I.warn("No 'to' attribute specified");
+        W.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")), I.debug(`Navigated to: ${this.to}`);
+      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");
@@ -191,7 +189,7 @@ class x extends (X = S) {
     });
   }
   render() {
-    return /* @__PURE__ */ f("a", { href: this.to, class: "wsx-link", onClick: this.handleClick, part: "link" }, /* @__PURE__ */ f("slot", null));
+    return /* @__PURE__ */ _("a", { href: this.to, class: "wsx-link", onClick: this.handleClick, part: "link" }, /* @__PURE__ */ _("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");
@@ -232,17 +230,17 @@ class x extends (X = S) {
     );
   }
 }
-W = yt(X);
-x = Rt(W, 0, "WsxLink", K, x);
+L = kt(X);
+x = Rt(L, 0, "WsxLink", K, x);
 m(x, "observedAttributes", ["to", "replace", "active-class", "exact"]);
-St(W, 1, x);
-const Ct = y("RouterUtils");
-class Pt {
+Ct(L, 1, x);
+const At = y("RouterUtils");
+class Lt {
   /**
    * 编程式导航
    */
   static navigate(t, r = !1) {
-    r ? window.history.replaceState(null, "", t) : window.history.pushState(null, "", t), window.dispatchEvent(new PopStateEvent("popstate")), Ct.debug(`Navigated to: ${t} (replace: ${r})`);
+    r ? window.history.replaceState(null, "", t) : window.history.pushState(null, "", t), window.dispatchEvent(new PopStateEvent("popstate")), At.debug(`Navigated to: ${t} (replace: ${r})`);
   }
   /**
    * 获取当前路由信息
@@ -402,7 +400,7 @@ class Pt {
   }
 }
 export {
-  Pt as RouterUtils,
+  Lt as RouterUtils,
   x as WsxLink,
   $ as WsxRouter,
   b as WsxView

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/wsx-router",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "WSX Router - Native History API-based routing for WSX Framework",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -18,7 +18,7 @@
     "!**/test"
   ],
   "dependencies": {
-    "@wsxjs/wsx-core": "0.0.5"
+    "@wsxjs/wsx-core": "0.0.7"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^8.37.0",
@@ -30,8 +30,8 @@
     "typescript": "^5.0.0",
     "vite": "^5.4.19",
     "vitest": "^2.1.8",
-    "@wsxjs/wsx-vite-plugin": "0.0.5",
-    "@wsxjs/eslint-plugin-wsx": "0.0.5"
+    "@wsxjs/wsx-vite-plugin": "0.0.7",
+    "@wsxjs/eslint-plugin-wsx": "0.0.7"
   },
   "keywords": [
     "wsx",

package/src/WsxRouter.wsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @wsxjs/wsx-core */
-import { WebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
+import { LightComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
 import styles from "./WsxRouter.css?inline";
 
 const logger = createLogger("WsxRouter");
@@ -23,18 +23,21 @@ const logger = createLogger("WsxRouter");
  * ```
  */
 @autoRegister({ tagName: "wsx-router" })
-export default class WsxRouter extends WebComponent {
+export default class WsxRouter extends LightComponent {
     private views: Map<string, HTMLElement> = new Map();
     private currentView: HTMLElement | null = null;
 
     constructor() {
-        super({ styles });
+        super({
+            styles,
+            styleName: "wsx-router",
+        });
     }
 
     render() {
         return (
             <div class="router-outlet">
-                <slot></slot>
+                {/* In Light DOM, slot is just a placeholder - content is accessed via this.children */}
             </div>
         );
     }
@@ -61,18 +64,10 @@ export default class WsxRouter extends WebComponent {
     }
 
     private collectViews() {
-        // Get the slot element
-        const slot = this.shadowRoot?.querySelector("slot");
-        if (!slot) {
-            logger.error("WsxRouter: No slot found");
-            return;
-        }
-
-        // Get slotted elements (light DOM children)
-        const slottedElements = slot.assignedElements();
-
-        // Filter for wsx-view elements
-        const views = slottedElements.filter((el) => el.tagName.toLowerCase() === "wsx-view");
+        // In Light DOM, directly access child elements
+        const views = Array.from(this.children).filter(
+            (el) => el.tagName.toLowerCase() === "wsx-view"
+        );
         logger.debug("WsxRouter found views:", views.length);
 
         views.forEach((view) => {

package/src/WsxView.wsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @wsxjs/wsx-core */
-import { WebComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
+import { LightComponent, autoRegister, createLogger } from "@wsxjs/wsx-core";
 import styles from "./WsxView.css?inline";
 
 const logger = createLogger("WsxView");
@@ -18,7 +18,7 @@ const logger = createLogger("WsxView");
  * ```
  */
 @autoRegister({ tagName: "wsx-view" })
-export default class WsxView extends WebComponent {
+export default class WsxView extends LightComponent {
     static observedAttributes = ["route", "component", "params"];
 
     private component: string | null = null;
@@ -33,7 +33,11 @@ export default class WsxView extends WebComponent {
     }
 
     render() {
-        return <div class="route-view" part="view"></div>;
+        return (
+            <div class="route-view">
+                {/* Light DOM container for dynamically loaded components */}
+            </div>
+        );
     }
 
     protected onConnected() {
@@ -84,7 +88,7 @@ export default class WsxView extends WebComponent {
             });
         }
 
-        const container = this.shadowRoot?.querySelector(".route-view");
+        const container = this.querySelector(".route-view");
         if (container) {
             container.appendChild(this.componentInstance);
         } else {