@wuisdk/shell 0.1.10 → 0.1.12

package/dist/desktop/index.js

@@ -1,2 +1,2 @@
 import './index.css';
-import{i as e,n as t,o as n,r,t as i}from"../viewport-Db-Dt6Gj.js";var a=class extends e{sidebar;viewport;indicator=new i;layoutStore=new r;constructor(e={}){super(),this.sidebar=new n(e.sidebar),this.viewport=new t(this.layoutStore)}render(){}onShellMount(){this.sidebar.injectContext(this.ctx).mount(this.element),this.wuiShell.injectContext(this.ctx).mount(this.element),this.indicator.injectContext(this.ctx).mount(this.element),this.setupPrefState(),this.viewport.observe()}onShellDestroy(){this.sidebar.destroy(),this.viewport.disconnect()}setupPrefState(){let{storage:e}=this.ctx.config,t=localStorage.getItem(e.SIDEBAR);t&&[`expanded`,`collapsed`].includes(t)&&this.layoutStore.updateLayout({sidebarPref:t}),this.layoutStore.subscribe(e=>e.sidebarPref,t=>{t&&[`expanded`,`collapsed`].includes(t)&&localStorage.setItem(e.SIDEBAR,t)},{signal:this.signal})}};export{a as DesktopShell};
+import{i as e,n as t,o as n,r,t as i}from"../viewport-D8dF9Hel.js";var a=class extends e{sidebar;viewport;indicator=new i;layoutStore=new r;constructor(e={}){super(),this.sidebar=new n(e.sidebar),this.viewport=new t(this.layoutStore)}render(){}onShellMount(){this.sidebar.injectContext(this.ctx).mount(this.element),this.wuiShell.injectContext(this.ctx).mount(this.element),this.indicator.injectContext(this.ctx).mount(this.element),this.setupPrefState(),this.viewport.observe()}onShellDestroy(){this.sidebar.destroy(),this.viewport.disconnect()}setupPrefState(){let{storage:e}=this.ctx.config,t=localStorage.getItem(e.SIDEBAR);t&&[`expanded`,`collapsed`].includes(t)&&this.layoutStore.updateLayout({sidebarPref:t}),this.layoutStore.subscribe(e=>e.sidebarPref,t=>{t&&[`expanded`,`collapsed`].includes(t)&&localStorage.setItem(e.SIDEBAR,t)},{signal:this.signal})}};export{a as DesktopShell};

package/dist/index.css

@@ -1 +1 @@
-@layer layout{.wui{grid-template-columns:1fr;width:100%;height:100dvh;display:grid;overflow:hidden}.wui-shell{flex-direction:column;min-width:0;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.wui-content{flex:1;min-width:0;min-height:0;overflow:auto}.wui-viewport{transform-origin:0 0;color:var(--color-text-muted);z-index:var(--z-overlay-root);font-size:10px;line-height:1;position:fixed;bottom:0;left:0;transform:rotate(-90deg)}.wui[data-shell=dashboard]:not([data-sidebar=overlay],[data-sidebar=hidden]){grid-template-columns:auto 1fr}.wui[data-shell=dashboard]:not([data-sidebar=overlay],[data-sidebar=hidden]) .wui-content{margin:var(--spacing-md);border:1px solid var(--color-border-soft);border-radius:var(--radius-xl);background-color:var(--color-surface);margin-left:0;overflow:hidden}.wui[data-shell=dashboard]:is([data-sidebar=overlay],[data-sidebar=hidden]) .wui-content{background-color:var(--color-surface);overflow:hidden}.wui[data-shell=auth] .wui-content{background:linear-gradient(135deg,#f8fafd 0%,#eef2f8 45%,#e2e8f3 100%)}.wui[data-shell=auth] .wui-page,.wui[data-shell=auth] .wui-loader{justify-content:center;align-items:center}.wui:has(.error-page) .wui-tabbar{display:none}.wui-loader{padding:5.5rem var(--spacing-lg);transition:var(--fade-transition);z-index:var(--z-above);opacity:0;visibility:hidden;justify-content:center;display:flex;position:absolute;inset:0}.wui[data-loading=true] .wui-loader{opacity:1;visibility:visible}.wui-spinner{width:48px;height:48px;display:block;position:relative}.wui-spinner div{transform-origin:24px 24px;animation:1.2s linear infinite fade-out}.wui-spinner div:after{content:"";background-color:var(--color-primary);border-radius:2px;width:4px;height:11px;display:block;position:absolute;top:3px;left:22px}.wui-spinner div:first-child{animation-delay:-1.1s;transform:rotate(0)}.wui-spinner div:nth-child(2){animation-delay:-1s;transform:rotate(30deg)}.wui-spinner div:nth-child(3){animation-delay:-.9s;transform:rotate(60deg)}.wui-spinner div:nth-child(4){animation-delay:-.8s;transform:rotate(90deg)}.wui-spinner div:nth-child(5){animation-delay:-.7s;transform:rotate(120deg)}.wui-spinner div:nth-child(6){animation-delay:-.6s;transform:rotate(150deg)}.wui-spinner div:nth-child(7){animation-delay:-.5s;transform:rotate(180deg)}.wui-spinner div:nth-child(8){animation-delay:-.4s;transform:rotate(210deg)}.wui-spinner div:nth-child(9){animation-delay:-.3s;transform:rotate(240deg)}.wui-spinner div:nth-child(10){animation-delay:-.2s;transform:rotate(270deg)}.wui-spinner div:nth-child(11){animation-delay:-.1s;transform:rotate(300deg)}.wui-spinner div:nth-child(12){animation-delay:0s;transform:rotate(330deg)}:root{--sidebar-expanded-width:224px;--sidebar-collapsed-width:64px;--sidebar-bg:var(--color-bg)}.wui-sidebar{width:0;padding:var(--spacing-sm);background-color:var(--sidebar-bg);z-index:var(--z-sidebar);transition:width var(--transition-base), transform var(--transition-base);flex-direction:column;display:flex;position:fixed;inset:0 auto 0 0;overflow:hidden;transform:translate(-100%)}.sidebar__header{height:3rem;padding:0 var(--spacing-md);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.sidebar__logo{align-items:center;gap:var(--spacing-md);padding-left:var(--spacing-lg);font-size:var(--font-size-heading);color:var(--color-primary-text);display:flex}.sidebar__logo .app-icon{line-height:1;font-family:var(--font-icon);transform:translateY(-1px)}.sidebar__logo .app-icon:before{content:""}.sidebar__logo .app-name{font-family:var(--font-heading);white-space:nowrap;font-weight:600;overflow:hidden}.sidebar__toggle{width:32px;height:32px;font-size:var(--font-size-heading);border-radius:var(--radius-full);color:var(--color-primary-text);background-color:#0000;flex-shrink:0;margin-right:-8px;padding:0}.sidebar__toggle:before{content:"☰"}.sidebar__footer{height:3.5rem;padding:var(--spacing-sm);flex-shrink:0}.profile{justify-content:flex-start;gap:var(--spacing-md);width:100%;height:100%;padding:0 var(--spacing-md);background-color:#0000}.profile__avatar{width:2.25rem;height:2.25rem;padding:var(--spacing-xs);border-radius:var(--radius-full);background:#0000001a;flex-shrink:0;overflow:hidden}.profile__avatar img{border-radius:var(--radius-full);width:100%;height:100%;display:block}.profile__info{min-width:0;font-family:var(--font-body);text-align:left;white-space:nowrap;overflow:hidden}.profile__info :first-child{line-height:1.5;font-size:var(--font-sm);font-weight:500}.profile__info :last-child{line-height:1.25;font-size:var(--font-xs);color:var(--color-text-muted)}.wui[data-shell=dashboard][data-sidebar=collapsed] .wui-sidebar{width:var(--sidebar-collapsed-width);position:relative;transform:translate(0)}.wui[data-shell=dashboard][data-sidebar=expanded] .wui-sidebar{width:var(--sidebar-expanded-width);position:relative;transform:translate(0)}.wui[data-shell=dashboard][data-sidebar=overlay] .wui-sidebar{width:var(--sidebar-expanded-width);box-shadow:var(--shadow-lg);transform:translate(0)}.wui[data-sidebar=collapsed] .sidebar__logo,.wui[data-sidebar=collapsed] .profile__info{display:none}.wui[data-sidebar=collapsed] .sidebar__header,.wui[data-sidebar=collapsed] .profile{justify-content:center;padding:0}.wui[data-sidebar=collapsed] .sidebar__toggle{margin-right:0}@media (hover:hover) and (pointer:fine){.sidebar__toggle:hover{background-color:var(--nav-item-bg-hover)}.profile:hover{color:var(--nav-item-text-hover);background-color:var(--nav-item-bg-hover)}}:root{--nav-item-text:var(--color-slate-500);--nav-item-text-hover:var(--color-slate-600);--nav-item-text-active:var(--color-primary-text);--nav-item-bg-hover:#0000000a;--nav-item-bg-active:var(--color-primary-100);--nav-item-border-active:rgb(from var(--color-primary-200) r g b / 25%)}.sidebar__nav{padding:var(--spacing-md);white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;flex:1;overflow:hidden auto}.nav-item,.nav-subitem{justify-content:flex-start;align-items:center;gap:var(--spacing-md);padding:0 var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);user-select:none;color:var(--nav-item-text);background-color:#0000;border:1px solid #0000;min-width:0;height:2.5rem;text-decoration:none;display:flex}.nav-item[data-active],.nav-subitem[data-active]{color:var(--nav-item-text-active);background:var(--nav-item-bg-active);border-color:var(--nav-item-border-active)}.nav-item[data-active] .nav-icon,.nav-subitem[data-active] .nav-icon{font-weight:900}.nav-icon,.nav-caret{text-align:left;min-width:22px;line-height:1;font-family:var(--font-icon);font-size:var(--font-md);flex-shrink:0}.nav-label{text-align:left;line-height:1.5;font-family:var(--font-heading);font-size:var(--font-size-label);white-space:nowrap;flex:1;font-weight:500}.nav-group{flex-direction:column;display:flex}.nav-group[data-open=true]{margin-bottom:var(--spacing-sm)}.nav-caret{min-width:auto;transition:transform var(--transition-fast)}.nav-group[data-open=true] .nav-caret{transform:rotate(90deg)}.nav-group:has(.nav-subitem[data-active]) .nav-item.has-children .nav-icon{color:var(--nav-item-text-active);font-weight:900}.nav-children{visibility:hidden;opacity:0;grid-template-rows:0fr;transition:opacity .2s ease-out,grid-template-rows .2s ease-out;display:grid}.nav-group[data-open=true] .nav-children{visibility:visible;opacity:1;grid-template-rows:1fr}.nav-children>*{min-height:0}.nav-children__wrapper{border-left:2px solid #0000000a;padding:0 3px;overflow:hidden}.nav-subitem{height:32px;font-size:var(--font-sm);padding:0 6px}.nav-subitem:last-child{margin-bottom:0}.nav-subitem .nav-icon{text-align:right}.wui[data-sidebar=collapsed] .nav-item,.wui[data-sidebar=collapsed] .nav-subitem{justify-content:center;padding:0}.wui[data-sidebar=collapsed] .nav-label,.wui[data-sidebar=collapsed] .nav-caret{display:none}.wui[data-sidebar=collapsed] .nav-icon{min-width:auto;font-size:var(--font-lg)}@media (hover:hover) and (pointer:fine){.nav-item:hover:not([data-active]),.nav-subitem:hover:not([data-active]){color:var(--nav-item-text-hover);background-color:var(--nav-item-bg-hover)}}:root{--tabbar-height:56px}.wui-tabbar{padding:var(--spacing-md) var(--spacing-lg);padding-bottom:calc(var(--spacing-md) + env(safe-area-inset-bottom));z-index:var(--z-tabbar);pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.tabbar__list{width:100%;max-width:480px;height:var(--tabbar-height);padding:0 var(--spacing-md);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(16px);pointer-events:auto;background-color:#ffffffd1;border:1px solid #fff9;justify-content:space-between;align-items:center;display:flex;box-shadow:0 1px 2px #0000000d,0 8px 16px #0000000f,0 16px 32px #1018280a,0 0 0 1px #00000005}.tabbar__item{justify-content:center;align-items:center;gap:var(--spacing-sm);color:inherit;flex-direction:column;flex:1;height:100%;text-decoration:none;display:flex}.tabbar__icon{line-height:1;font-family:var(--font-icon);font-size:var(--font-xl);transition:font-weight .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}.tabbar__label{line-height:1;font-family:var(--font-heading);font-size:11px}.tabbar__item[data-active]{color:var(--color-primary)}.tabbar__item[data-active] .tabbar__icon{font-weight:900;transform:translateY(-2px)scale(1.1)}@media (hover:hover) and (pointer:fine){.tabbar__item:not([data-active]):hover{color:var(--color-slate-600)}}.wui-page{min-width:0;height:100%;min-height:0;transition:var(--fade-transition);opacity:0;visibility:hidden;flex-direction:column;display:flex;overflow:hidden}.wui[data-ready=true] .wui-page{opacity:1;visibility:visible}.page-header,.page-footer{justify-content:space-between;align-items:center;gap:var(--spacing-md);padding:0 var(--spacing-xl);z-index:var(--z-above);height:3rem;transition:box-shadow var(--transition-fast), background-color var(--transition-fast);display:flex}.page-body{min-width:0;min-height:0;padding:var(--spacing-xl);flex:1;overflow:auto}.page-header.has-shadow{background-color:var(--color-surface);box-shadow:0 4px 12px #0000000f,0 1px 2px #0000000a}.page-header__main,.page-header__actions{align-items:center;display:flex}.page-header__main{gap:var(--spacing-sm);font-size:var(--font-size-title);flex:1;min-width:0}.page-header__actions{gap:var(--spacing-md);flex-shrink:0}.page-title{padding:0 var(--spacing-sm);line-height:1.556;font-family:var(--font-heading);font-size:var(--font-size-title);white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:500;overflow:hidden}.page-header__actions .btn--square,.page-header__actions .btn--circle{font-size:var(--font-lg)!important}.page-scroll-sentinel{visibility:hidden;pointer-events:none;height:1px;margin-top:-1px}:has(.wui-tabbar) .page-body{padding-bottom:4.5rem}}
+@layer layout{.wui{grid-template-columns:1fr;width:100%;height:100dvh;display:grid;overflow:hidden}.wui-shell{flex-direction:column;min-width:0;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.wui-content{flex:1;min-width:0;min-height:0;overflow:auto}.wui-viewport{transform-origin:0 0;color:var(--color-text-muted);z-index:var(--z-overlay-root);font-size:10px;line-height:1;position:fixed;bottom:0;left:0;transform:rotate(-90deg)}.wui[data-shell=dashboard]:not([data-sidebar=overlay],[data-sidebar=hidden]){grid-template-columns:auto 1fr}.wui[data-shell=dashboard]:not([data-sidebar=overlay],[data-sidebar=hidden]) .wui-content{margin:var(--spacing-md);border:1px solid var(--color-border-soft);border-radius:var(--radius-xl);background-color:var(--color-surface);margin-left:0;overflow:hidden}.wui[data-shell=dashboard]:is([data-sidebar=overlay],[data-sidebar=hidden]) .wui-content{background-color:var(--color-surface);overflow:hidden}.wui[data-shell=auth] .wui-content{background:linear-gradient(135deg,#f8fafd 0%,#eef2f8 45%,#e2e8f3 100%)}.wui[data-shell=auth] .wui-page,.wui[data-shell=auth] .wui-loader{justify-content:center;align-items:center}.wui:has(.error-page) .wui-tabbar{display:none}.wui-loader{padding:5.5rem var(--spacing-lg);transition:var(--fade-transition);z-index:var(--z-above);opacity:0;visibility:hidden;justify-content:center;display:flex;position:absolute;inset:0}.wui[data-loading=true] .wui-loader{opacity:1;visibility:visible}.wui-spinner{width:48px;height:48px;display:block;position:relative}.wui-spinner div{transform-origin:24px 24px;animation:1.2s linear infinite fade-out}.wui-spinner div:after{content:"";background-color:var(--color-primary);border-radius:2px;width:4px;height:11px;display:block;position:absolute;top:3px;left:22px}.wui-spinner div:first-child{animation-delay:-1.1s;transform:rotate(0)}.wui-spinner div:nth-child(2){animation-delay:-1s;transform:rotate(30deg)}.wui-spinner div:nth-child(3){animation-delay:-.9s;transform:rotate(60deg)}.wui-spinner div:nth-child(4){animation-delay:-.8s;transform:rotate(90deg)}.wui-spinner div:nth-child(5){animation-delay:-.7s;transform:rotate(120deg)}.wui-spinner div:nth-child(6){animation-delay:-.6s;transform:rotate(150deg)}.wui-spinner div:nth-child(7){animation-delay:-.5s;transform:rotate(180deg)}.wui-spinner div:nth-child(8){animation-delay:-.4s;transform:rotate(210deg)}.wui-spinner div:nth-child(9){animation-delay:-.3s;transform:rotate(240deg)}.wui-spinner div:nth-child(10){animation-delay:-.2s;transform:rotate(270deg)}.wui-spinner div:nth-child(11){animation-delay:-.1s;transform:rotate(300deg)}.wui-spinner div:nth-child(12){animation-delay:0s;transform:rotate(330deg)}:root{--sidebar-expanded-width:224px;--sidebar-collapsed-width:64px;--sidebar-bg:var(--color-bg)}.wui-sidebar{width:0;padding:var(--spacing-sm);background-color:var(--sidebar-bg);z-index:var(--z-sidebar);transition:width var(--transition-base), transform var(--transition-base);flex-direction:column;display:flex;position:fixed;inset:0 auto 0 0;overflow:hidden;transform:translate(-100%)}.sidebar__header{height:3rem;padding:0 var(--spacing-md);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.sidebar__logo{align-items:center;gap:var(--spacing-md);padding-left:var(--spacing-lg);font-size:var(--font-size-heading);color:var(--color-primary-text);display:flex}.sidebar__logo .app-icon{line-height:1;font-family:var(--font-icon);transform:translateY(-1px)}.sidebar__logo .app-icon:before{content:""}.sidebar__logo .app-name{font-family:var(--font-heading);white-space:nowrap;font-weight:600;overflow:hidden}.sidebar__toggle{width:32px;height:32px;font-size:var(--font-size-heading);border-radius:var(--radius-full);color:var(--color-primary-text);background-color:#0000;flex-shrink:0;margin-right:-8px;padding:0}.sidebar__toggle:before{content:"☰"}.sidebar__footer{height:3.5rem;padding:var(--spacing-sm);flex-shrink:0}.profile{justify-content:flex-start;gap:var(--spacing-md);width:100%;height:100%;padding:0 var(--spacing-md);background-color:#0000}.profile__avatar{width:2.25rem;height:2.25rem;padding:var(--spacing-xs);border-radius:var(--radius-full);background:#0000001a;flex-shrink:0;overflow:hidden}.profile__avatar img{border-radius:var(--radius-full);width:100%;height:100%;display:block}.profile__info{min-width:0;font-family:var(--font-body);text-align:left;white-space:nowrap;overflow:hidden}.profile__info :first-child{line-height:1.5;font-size:var(--font-sm);font-weight:500}.profile__info :last-child{line-height:1.25;font-size:var(--font-xs);color:var(--color-text-muted)}.wui[data-shell=dashboard][data-sidebar=collapsed] .wui-sidebar{width:var(--sidebar-collapsed-width);position:relative;transform:translate(0)}.wui[data-shell=dashboard][data-sidebar=expanded] .wui-sidebar{width:var(--sidebar-expanded-width);position:relative;transform:translate(0)}.wui[data-shell=dashboard][data-sidebar=overlay] .wui-sidebar{width:var(--sidebar-expanded-width);box-shadow:var(--shadow-lg);transform:translate(0)}.wui[data-sidebar=collapsed] .sidebar__logo,.wui[data-sidebar=collapsed] .profile__info{display:none}.wui[data-sidebar=collapsed] .sidebar__header,.wui[data-sidebar=collapsed] .profile{justify-content:center;padding:0}.wui[data-sidebar=collapsed] .sidebar__toggle{margin-right:0}@media (hover:hover) and (pointer:fine){.sidebar__toggle:hover{background-color:var(--nav-item-bg-hover)}.profile:hover{color:var(--nav-item-text-hover);background-color:var(--nav-item-bg-hover)}}:root{--nav-item-text:var(--color-slate-600);--nav-item-text-hover:var(--color-slate-700);--nav-item-text-active:var(--color-primary-text);--nav-item-bg-hover:#0000000a;--nav-item-bg-active:var(--color-primary-100);--nav-item-border-active:rgb(from var(--color-primary-200) r g b / 25%)}.sidebar__nav{padding:var(--spacing-md);white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;flex:1;overflow:hidden auto}.nav-item,.nav-subitem{justify-content:flex-start;align-items:center;gap:var(--spacing-md);padding:0 var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);user-select:none;color:var(--nav-item-text);background-color:#0000;border:1px solid #0000;min-width:0;height:2.5rem;text-decoration:none;display:flex}.nav-item[data-active],.nav-subitem[data-active]{color:var(--nav-item-text-active);background:var(--nav-item-bg-active);border-color:var(--nav-item-border-active)}.nav-item[data-active] .nav-icon,.nav-subitem[data-active] .nav-icon{font-weight:900}.nav-icon,.nav-caret{text-align:left;min-width:22px;line-height:1;font-family:var(--font-icon);font-size:var(--font-md);flex-shrink:0}.nav-label{text-align:left;line-height:1.5;font-family:var(--font-heading);font-size:var(--font-size-label);white-space:nowrap;flex:1;font-weight:500}.nav-group{flex-direction:column;display:flex}.nav-group[data-open=true]{margin-bottom:var(--spacing-sm)}.nav-caret{min-width:auto;transition:transform var(--transition-fast)}.nav-group[data-open=true] .nav-caret{transform:rotate(90deg)}.nav-group:has(.nav-subitem[data-active]) .nav-item.has-children .nav-icon{color:var(--nav-item-text-active);font-weight:900}.nav-children{visibility:hidden;opacity:0;grid-template-rows:0fr;transition:opacity .2s ease-out,grid-template-rows .2s ease-out;display:grid}.nav-group[data-open=true] .nav-children{visibility:visible;opacity:1;grid-template-rows:1fr}.nav-children>*{min-height:0}.nav-children__wrapper{border-left:2px solid #0000000a;padding:0 3px;overflow:hidden}.nav-subitem{height:32px;font-size:var(--font-sm);padding:0 6px}.nav-subitem:last-child{margin-bottom:0}.nav-subitem .nav-icon{text-align:right}.wui[data-sidebar=collapsed] .nav-item,.wui[data-sidebar=collapsed] .nav-subitem{justify-content:center;padding:0}.wui[data-sidebar=collapsed] .nav-label,.wui[data-sidebar=collapsed] .nav-caret{display:none}.wui[data-sidebar=collapsed] .nav-icon{min-width:auto;font-size:var(--font-lg)}@media (hover:hover) and (pointer:fine){.nav-item:hover:not([data-active]),.nav-subitem:hover:not([data-active]){color:var(--nav-item-text-hover);background-color:var(--nav-item-bg-hover)}}:root{--tabbar-height:56px}.wui-tabbar{padding:var(--spacing-md) var(--spacing-lg);padding-bottom:calc(var(--spacing-md) + env(safe-area-inset-bottom));z-index:var(--z-tabbar);pointer-events:none;opacity:0;justify-content:center;align-items:center;transition:transform .25s ease-out,opacity .2s linear;display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.tabbar__list{width:100%;max-width:480px;height:var(--tabbar-height);padding:0 var(--spacing-md);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(16px);pointer-events:auto;background-color:#ffffffd1;border:1px solid #fff9;justify-content:space-between;align-items:center;display:flex;box-shadow:0 1px 2px #0000000d,0 8px 16px #0000000f,0 16px 32px #1018280a,0 0 0 1px #00000005}.tabbar__item{justify-content:center;align-items:center;gap:var(--spacing-sm);color:inherit;flex-direction:column;flex:1;height:100%;text-decoration:none;display:flex}.tabbar__icon{line-height:1;font-family:var(--font-icon);font-size:22px;transition:font-weight .2s}.tabbar__label{line-height:1.25;font-family:var(--font-heading);font-size:var(--font-xs);transition:font-weight .2s}.tabbar__item[data-active]{color:var(--color-primary-600)}.tabbar__item[data-active] .tabbar__icon{font-weight:900}.tabbar__item[data-active] .tabbar__label{font-weight:600}.wui-tabbar[data-visibility=hidden]{opacity:0;transform:translateY(100%)}.wui-tabbar[data-visibility=visible]{opacity:1;transform:translateY(0)}@media (hover:hover) and (pointer:fine){.tabbar__item:not([data-active]):hover{color:var(--color-slate-600)}}.wui-page{min-width:0;height:100%;min-height:0;transition:var(--fade-transition);opacity:0;visibility:hidden;flex-direction:column;display:flex;overflow:hidden}.wui[data-ready=true] .wui-page{opacity:1;visibility:visible}.page-header,.page-footer{justify-content:space-between;align-items:center;gap:var(--spacing-md);padding:0 var(--spacing-xl);z-index:var(--z-above);height:3rem;transition:box-shadow var(--transition-fast), background-color var(--transition-fast);display:flex}.page-body{min-width:0;min-height:0;padding:var(--spacing-xl);flex:1;overflow:auto}.page-header.has-shadow{background-color:var(--color-surface);box-shadow:0 4px 12px #0000000f,0 1px 2px #0000000a}.page-header__main,.page-header__actions{align-items:center;display:flex}.page-header__main{gap:var(--spacing-sm);font-size:var(--font-size-title);flex:1;min-width:0}.page-header__actions{gap:var(--spacing-md);flex-shrink:0}.page-title{padding:0 var(--spacing-sm);line-height:1.556;font-family:var(--font-heading);font-size:var(--font-size-title);white-space:nowrap;text-overflow:ellipsis;margin:0;font-weight:500;overflow:hidden}.page-header__actions .btn--square,.page-header__actions .btn--circle{font-size:var(--font-lg)!important}.page-scroll-sentinel{visibility:hidden;pointer-events:none;height:1px;margin-top:-1px}:has(.wui-tabbar) .page-body{padding-bottom:4.5rem}}

package/dist/index.js

@@ -1,2 +1,2 @@
 import './index.css';
-const e=()=>({version:`0.1.10`,name:`@wuisdk/shell`.split(`/`)[1]});export{e as info};
+const e=()=>({version:`0.1.12`,name:`@wuisdk/shell`.split(`/`)[1]});export{e as info};

package/dist/mobile/index.css

@@ -1 +1 @@
-@layer shell{.wui{grid-template-columns:1fr}.wui-shell{place-self:center;width:100%;max-width:480px}.wui-content{border-color:#0000;border-radius:0;margin:0}}
+@layer shell{.wui{grid-template-columns:1fr}.wui-shell{place-self:center;width:100%;max-width:480px}.wui-content{border-color:#0000;border-radius:0;margin:0}.page-header,.page-footer{height:2.75rem}.page-title{line-height:1.5;font-size:var(--font-size-body)}}

package/dist/mobile/index.js

@@ -1,2 +1,2 @@
 import './index.css';
-import{a as e,i as t,n,r}from"../viewport-Db-Dt6Gj.js";var i=class extends t{tabbar;viewport;layoutStore=new r;constructor(t={}){super(),this.tabbar=new e(t.tabbar),this.viewport=new n(this.layoutStore)}render(){}onShellMount(){this.wuiShell.injectContext(this.ctx).mount(this.element),this.tabbar.injectContext(this.ctx).mount(this.element),this.viewport.observe()}onShellDestroy(){this.tabbar.destroy(),this.viewport.disconnect()}};export{i as MobileShell};
+import{a as e,i as t,n,r}from"../viewport-D8dF9Hel.js";var i=class extends t{tabbar;viewport;layoutStore=new r;constructor(t={}){super(),this.tabbar=new e(t.tabbar),this.viewport=new n(this.layoutStore)}render(){}onShellMount(){this.wuiShell.injectContext(this.ctx).mount(this.element),this.tabbar.injectContext(this.ctx).mount(this.element),this.viewport.observe()}onShellDestroy(){this.tabbar.destroy(),this.viewport.disconnect()}};export{i as MobileShell};

package/dist/{viewport-Db-Dt6Gj.js → viewport-D8dF9Hel.js}

@@ -14,4 +14,4 @@ import{BaseComponent as e,Store as t}from"@wuisdk/core";import{dom as n}from"@wu
             <div class="unit">Department Name</div>
         </div>
     </button>
-</div>`,l=class extends e{config;navLink=[];profileAction=null;constructor(e={}){super(`aside`,{className:`wui-sidebar`}),this.config=e}render(){let e=n.renderTemplate(c);this.element.replaceChildren(e)}onMount(){this.setupNavMenu(),this.setProfileAction(),this.element.addEventListener(`click`,this.handleClick,{signal:this.signal}),this.ctx.events.on(`sys:route-changed`,e=>{this.setNavActive(e.path)},this.signal);let e=this.element.querySelector(`.app-name`);e&&(e.textContent=this.ctx.config.appName),this.ctx.stores.auth?.subscribe(e=>e.user,e=>this.setProfile(e),{signal:this.signal}),this.ctx.stores.fiber?.subscribe(e=>e.user,e=>this.setAccess(e),{signal:this.signal})}onUnmount(){this.profileAction?.destroy(),this.profileAction=null}setNavActive(e){this.navLink.forEach(t=>{let n=t.getAttribute(`href`),r=n===e||n===`/${e}`;if(t.toggleAttribute(`data-active`,r),r){let e=t.closest(`.nav-group`);for(;e;)e.dataset.open=`true`,e=e.parentElement?.closest(`.nav-group`)||null}})}setupNavMenu(){let e=this.element.querySelector(`nav`);e&&this.config.sidebarMenu&&(a(e,this.config.sidebarMenu),this.navLink=Array.from(e.querySelectorAll(`[data-wui-link]`)))}handleClick=e=>{let t=e.target;if(t.closest(`.sidebar__toggle`)){this.ctx.stores.layout.toggleSidebar();return}let n=t.closest(`.nav-item.has-children`);if(n){e.preventDefault();let t=n.closest(`.nav-group`);if(t){let e=t.dataset.open===`true`;t.dataset.open=String(!e)}}};setProfile(e){if(!e)return;let t=this.element.querySelector(`.profile__avatar`);if(t&&e.picture){let r=n.createElement(`img`,{attributes:{src:e.picture}});t.replaceChildren(r)}let r=this.element.querySelector(`.profile__info .name`),i=this.element.querySelector(`.profile__info .unit`);r&&(r.textContent=e.name),i&&(i.textContent=e.unit)}setAccess(e){if(!e)return;let t=this.element.querySelector(`.profile__avatar`);if(t){let e=n.createElement(`img`,{attributes:{src:`https://cdn.jsdelivr.net/gh/wkrdev/assets/img/icon/icon-03.png`}});t.replaceChildren(e)}let r=this.element.querySelector(`.profile__info .name`),i=this.element.querySelector(`.profile__info .unit`);r&&(r.textContent=e.full_name),i&&(i.textContent=e.sect?e.sect_name:e.dvsn_name)}setProfileAction(){let e=this.config.profileMenu;if(!e)return;let t=typeof e==`function`?e(this.ctx):e;if(t.length===0)return;let n=this.element.querySelector(`.profile`);n&&(this.profileAction=new r({target:n,items:t,placement:`top-start`,signal:this.signal}).injectContext(this.ctx))}},u=`<div class="tabbar__list"></div>`,d=class extends e{config;navLink=[];constructor(e={}){super(`nav`,{className:`wui-tabbar`}),this.config=e}render(){let e=n.renderTemplate(u);this.element.replaceChildren(e)}onMount(){this.setupTabMenu(),this.ctx.events.on(`sys:route-changed`,e=>{this.setNavActive(e.path)},this.signal)}setNavActive(e){this.navLink.forEach(t=>{let n=t.getAttribute(`href`),r=n===e||n===`/${e}`;t.toggleAttribute(`data-active`,r)})}setupTabMenu(){let e=this.element.querySelector(`.tabbar__list`);if(e&&this.config.tabbarMenu){let t=document.createDocumentFragment();this.config.tabbarMenu.forEach(e=>{if(e.type!==`item`)return;let r=n.createElement(`a`,{className:`tabbar__item`,attributes:{href:e.path,"data-wui-link":``}},n.createElement(`span`,{className:`tabbar__icon`},e.icon),n.createElement(`span`,{className:`tabbar__label`},e.label));t.appendChild(r)}),e.replaceChildren(t),this.navLink=Array.from(e.querySelectorAll(`[data-wui-link]`))}}},f=class extends e{wuiShell;constructor(){super(`div`,{className:`wui`}),this.wuiShell=new i}onMount(){this.ctx.registerStore(`layout`,this.layoutStore),this.setupLayoutStateListener(),this.setupSystemStateListener(),this.ctx.events.on(`sys:page-mounted`,e=>{this.layoutStore.updateLayout({shell:e.shell})}),this.onShellMount()}onDestroy(){this.wuiShell.destroy(),this.onShellDestroy()}get wuiRoot(){return this.element}get wuiContent(){return this.wuiShell.wuiContent}setupLayoutStateListener(){let e=this.layoutStore.state;Object.entries(e).forEach(([e,t])=>{e!==`sidebarPref`&&(this.element.dataset[e]=String(t))}),this.layoutStore.subscribe(e=>e,(e,t)=>{Object.entries(e).forEach(([e,n])=>{e!==`sidebarPref`&&(!t||t[e]!==n)&&(this.element.dataset[e]=String(n))})},{isEqual:(e,t)=>e===t?!0:!e||!t?!1:Object.keys(e).every(n=>e[n]===t[n]),signal:this.signal})}setupSystemStateListener(){let e=this.ctx.stores.sys,t=e.state;this.element.dataset.loading=String(t.loading),this.element.dataset.ready=String(t.ready),e.subscribe(e=>({loading:e.loading,ready:e.ready}),(e,t)=>{t.loading!==e.loading&&(this.element.dataset.loading=String(e.loading)),t.ready!==e.ready&&(this.element.dataset.ready=String(e.ready))},{isEqual:(e,t)=>e.loading===t.loading&&e.ready===t.ready,signal:this.signal})}},p=class{store=new t({theme:`system`,shell:`blank`,viewport:`sm`,sidebar:`hidden`});get state(){return this.store.getState()}subscribe(e,t,n){return this.store.subscribe(e,t,n)}updateLayout(e){this.store.setState(t=>{let n={...t,...e};return(e.shell!==void 0||e.viewport!==void 0)&&(n.sidebar=this.calcSidebarState(n.shell,n.viewport,n.sidebarPref)),n})}toggleSidebar(){this.store.setState(e=>{let{viewport:t,sidebar:n,shell:r,sidebarPref:i}=e;if(r!==`dashboard`)return{};let a,o=i;return t===`sm`?a=n===`hidden`?`overlay`:`hidden`:(a=n===`expanded`?`collapsed`:`expanded`,o=a),{sidebar:a,sidebarPref:o}})}calcSidebarState(e,t,n){return e!==`dashboard`||t===`sm`?`hidden`:n&&[`expanded`,`collapsed`].includes(n)?n:t===`md`?`collapsed`:`expanded`}},m=class{store;abortController=null;mediaQueries;constructor(e,t={md:`(min-width: 600px)`,lg:`(min-width: 800px)`}){this.store=e,this.mediaQueries={md:window.matchMedia(t.md),lg:window.matchMedia(t.lg)}}observe(){if(this.abortController)return;this.abortController=new AbortController;let{signal:e}=this.abortController,t=()=>{let e=`sm`;this.mediaQueries.lg.matches?e=`lg`:this.mediaQueries.md.matches&&(e=`md`),this.store.state.viewport!==e&&this.store.updateLayout({viewport:e})};Object.values(this.mediaQueries).forEach(n=>{n.addEventListener(`change`,t,{signal:e})}),t()}disconnect(){this.abortController&&=(this.abortController.abort(),null)}},h=class extends e{isTicking=!1;constructor(){super(`div`,{className:`wui-viewport`})}render(){this.updateDimensions()}onMount(){window.addEventListener(`resize`,this.handleResize,{signal:this.signal})}handleResize=()=>{this.isTicking||=(window.requestAnimationFrame(()=>{this.updateDimensions(),this.isTicking=!1}),!0)};updateDimensions(){let e=window.innerWidth,t=window.innerHeight;this.element.textContent=`${e}x${t}`}};export{d as a,f as i,m as n,l as o,p as r,h as t};
+</div>`,l=class extends e{config;navLink=[];profileAction=null;constructor(e={}){super(`aside`,{className:`wui-sidebar`}),this.config=e}render(){let e=n.renderTemplate(c);this.element.replaceChildren(e)}onMount(){this.setupNavMenu(),this.setProfileAction(),this.element.addEventListener(`click`,this.handleClick,{signal:this.signal}),this.ctx.events.on(`sys:route-changed`,e=>{this.setNavActive(e.path)},this.signal);let e=this.element.querySelector(`.app-name`);e&&(e.textContent=this.ctx.config.appName),this.ctx.stores.auth?.subscribe(e=>e.user,e=>this.setProfile(e),{signal:this.signal}),this.ctx.stores.fiber?.subscribe(e=>e.user,e=>this.setAccess(e),{signal:this.signal})}onUnmount(){this.profileAction?.destroy(),this.profileAction=null}setNavActive(e){this.navLink.forEach(t=>{let n=t.getAttribute(`href`),r=n===e||n===`/${e}`;if(t.toggleAttribute(`data-active`,r),r){let e=t.closest(`.nav-group`);for(;e;)e.dataset.open=`true`,e=e.parentElement?.closest(`.nav-group`)||null}})}setupNavMenu(){let e=this.element.querySelector(`nav`);e&&this.config.sidebarMenu&&(a(e,this.config.sidebarMenu),this.navLink=Array.from(e.querySelectorAll(`[data-wui-link]`)))}handleClick=e=>{let t=e.target;if(t.closest(`.sidebar__toggle`)){this.ctx.stores.layout.toggleSidebar();return}let n=t.closest(`.nav-item.has-children`);if(n){e.preventDefault();let t=n.closest(`.nav-group`);if(t){let e=t.dataset.open===`true`;t.dataset.open=String(!e)}}};setProfile(e){if(!e)return;let t=this.element.querySelector(`.profile__avatar`);if(t&&e.picture){let r=n.createElement(`img`,{attributes:{src:e.picture}});t.replaceChildren(r)}let r=this.element.querySelector(`.profile__info .name`),i=this.element.querySelector(`.profile__info .unit`);r&&(r.textContent=e.name),i&&(i.textContent=e.unit)}setAccess(e){if(!e)return;let t=this.element.querySelector(`.profile__avatar`);if(t){let e=n.createElement(`img`,{attributes:{src:`https://cdn.jsdelivr.net/gh/wkrdev/assets/img/icon/icon-03.png`}});t.replaceChildren(e)}let r=this.element.querySelector(`.profile__info .name`),i=this.element.querySelector(`.profile__info .unit`);r&&(r.textContent=e.full_name),i&&(i.textContent=e.sect?e.sect_name:e.dvsn_name)}setProfileAction(){let e=this.config.profileMenu;if(!e)return;let t=typeof e==`function`?e(this.ctx):e;if(t.length===0)return;let n=this.element.querySelector(`.profile`);n&&(this.profileAction=new r({target:n,items:t,placement:`top-start`,signal:this.signal}).injectContext(this.ctx))}},u=`<div class="tabbar__list"></div>`,d=class extends e{config;navLink=[];initialHeight=window.innerHeight;constructor(e={}){super(`nav`,{className:`wui-tabbar`}),this.config=e}render(){let e=n.renderTemplate(u);this.element.replaceChildren(e)}onMount(){this.setupTabMenu(),this.ctx.events.on(`sys:route-changed`,e=>{this.setNavActive(e.path)},this.signal),this.ctx.stores.layout.subscribe(e=>e.shell,e=>{e===`dashboard`?this.element.dataset.visibility=`visible`:this.element.dataset.visibility=`hidden`},{signal:this.signal}),window.visualViewport?.addEventListener(`resize`,this.handleVisibility,{signal:this.signal})}setNavActive(e){this.navLink.forEach(t=>{let n=t.getAttribute(`href`),r=n===e||n===`/${e}`;t.toggleAttribute(`data-active`,r)})}setupTabMenu(){let e=this.element.querySelector(`.tabbar__list`);if(e&&this.config.tabbarMenu){let t=document.createDocumentFragment();this.config.tabbarMenu.forEach(e=>{if(e.type!==`item`)return;let r=n.createElement(`a`,{className:`tabbar__item`,attributes:{href:e.path,"data-wui-link":``}},n.createElement(`span`,{className:`tabbar__icon`},e.icon),n.createElement(`span`,{className:`tabbar__label`},e.label));t.appendChild(r)}),e.replaceChildren(t),this.navLink=Array.from(e.querySelectorAll(`[data-wui-link]`))}}handleVisibility=()=>{let e=window.visualViewport;e&&(e.height<this.initialHeight*.85?this.element.dataset.visibility=`hidden`:this.element.dataset.visibility=`visible`)}},f=class extends e{wuiShell;constructor(){super(`div`,{className:`wui`}),this.wuiShell=new i}onMount(){this.ctx.registerStore(`layout`,this.layoutStore),this.setupLayoutStateListener(),this.setupSystemStateListener(),this.ctx.events.on(`sys:page-mounted`,e=>{this.layoutStore.updateLayout({shell:e.shell})}),this.onShellMount()}onDestroy(){this.wuiShell.destroy(),this.onShellDestroy()}get wuiRoot(){return this.element}get wuiContent(){return this.wuiShell.wuiContent}setupLayoutStateListener(){let e=this.layoutStore.state;Object.entries(e).forEach(([e,t])=>{e!==`sidebarPref`&&(this.element.dataset[e]=String(t))}),this.layoutStore.subscribe(e=>e,(e,t)=>{Object.entries(e).forEach(([e,n])=>{e!==`sidebarPref`&&(!t||t[e]!==n)&&(this.element.dataset[e]=String(n))})},{isEqual:(e,t)=>e===t?!0:!e||!t?!1:Object.keys(e).every(n=>e[n]===t[n]),signal:this.signal})}setupSystemStateListener(){let e=this.ctx.stores.sys,t=e.state;this.element.dataset.loading=String(t.loading),this.element.dataset.ready=String(t.ready),e.subscribe(e=>({loading:e.loading,ready:e.ready}),(e,t)=>{t.loading!==e.loading&&(this.element.dataset.loading=String(e.loading)),t.ready!==e.ready&&(this.element.dataset.ready=String(e.ready))},{isEqual:(e,t)=>e.loading===t.loading&&e.ready===t.ready,signal:this.signal})}},p=class{store=new t({theme:`system`,shell:`blank`,viewport:`sm`,sidebar:`hidden`});get state(){return this.store.getState()}subscribe(e,t,n){return this.store.subscribe(e,t,n)}updateLayout(e){this.store.setState(t=>{let n={...t,...e};return(e.shell!==void 0||e.viewport!==void 0)&&(n.sidebar=this.calcSidebarState(n.shell,n.viewport,n.sidebarPref)),n})}toggleSidebar(){this.store.setState(e=>{let{viewport:t,sidebar:n,shell:r,sidebarPref:i}=e;if(r!==`dashboard`)return{};let a,o=i;return t===`sm`?a=n===`hidden`?`overlay`:`hidden`:(a=n===`expanded`?`collapsed`:`expanded`,o=a),{sidebar:a,sidebarPref:o}})}calcSidebarState(e,t,n){return e!==`dashboard`||t===`sm`?`hidden`:n&&[`expanded`,`collapsed`].includes(n)?n:t===`md`?`collapsed`:`expanded`}},m=class{store;abortController=null;mediaQueries;constructor(e,t={md:`(min-width: 600px)`,lg:`(min-width: 800px)`}){this.store=e,this.mediaQueries={md:window.matchMedia(t.md),lg:window.matchMedia(t.lg)}}observe(){if(this.abortController)return;this.abortController=new AbortController;let{signal:e}=this.abortController,t=()=>{let e=`sm`;this.mediaQueries.lg.matches?e=`lg`:this.mediaQueries.md.matches&&(e=`md`),this.store.state.viewport!==e&&this.store.updateLayout({viewport:e})};Object.values(this.mediaQueries).forEach(n=>{n.addEventListener(`change`,t,{signal:e})}),t()}disconnect(){this.abortController&&=(this.abortController.abort(),null)}},h=class extends e{isTicking=!1;constructor(){super(`div`,{className:`wui-viewport`})}render(){this.updateDimensions()}onMount(){window.addEventListener(`resize`,this.handleResize,{signal:this.signal})}handleResize=()=>{this.isTicking||=(window.requestAnimationFrame(()=>{this.updateDimensions(),this.isTicking=!1}),!0)};updateDimensions(){let e=window.innerWidth,t=window.innerHeight;this.element.textContent=`${e}x${t}`}};export{d as a,f as i,m as n,l as o,p as r,h as t};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wuisdk/shell",
-    "version": "0.1.10",
+    "version": "0.1.12",
     "type": "module",
     "exports": {
         ".": {