zero-query 1.0.9 → 1.1.1

package/dist/zquery.min.js

@@ -1,5 +1,5 @@
 /**
- * zQuery (zeroQuery) v1.0.9
+ * zQuery (zeroQuery) v1.1.1
  * Lightweight Frontend Library
  * https://github.com/tonywied17/zero-query
  * (c) 2026 Anthony Wiedman - MIT License
@@ -37,10 +37,11 @@ Signal._activeEffect=execute;try{fn();}
 catch(err){reportError(ErrorCode.EFFECT_EXEC,'Effect function threw',{},err);}
 finally{Signal._activeEffect=null;}};execute._deps=new Set();execute();return()=>{if(execute._deps){for(const sig of execute._deps){sig._subscribers.delete(execute);}
 execute._deps.clear();}};}
-function batch(fn){if(Signal._batching){fn();return;}
-Signal._batching=true;Signal._batchQueue.clear();try{fn();}finally{Signal._batching=false;const subs=new Set();for(const sig of Signal._batchQueue){for(const sub of sig._subscribers){subs.add(sub);}}
+function batch(fn){if(Signal._batching){return fn();}
+Signal._batching=true;Signal._batchQueue.clear();let result;try{result=fn();}finally{Signal._batching=false;const subs=new Set();for(const sig of Signal._batchQueue){for(const sub of sig._subscribers){subs.add(sub);}}
 Signal._batchQueue.clear();for(const sub of subs){try{sub();}
-catch(err){reportError(ErrorCode.SIGNAL_CALLBACK,'Signal subscriber threw',{},err);}}}}
+catch(err){reportError(ErrorCode.SIGNAL_CALLBACK,'Signal subscriber threw',{},err);}}}
+return result;}
 function untracked(fn){const prev=Signal._activeEffect;Signal._activeEffect=null;try{return fn();}finally{Signal._activeEffect=prev;}}
 let _tpl=null;function _getTemplate(){if(!_tpl)_tpl=document.createElement('template');return _tpl;}
 function morph(rootEl,newHTML){const start=typeof window!=='undefined'&&window.__zqMorphHook?performance.now():0;const tpl=_getTemplate();tpl.innerHTML=newHTML;const newRoot=tpl.content;const tempDiv=document.createElement('div');while(newRoot.firstChild)tempDiv.appendChild(newRoot.firstChild);_morphChildren(rootEl,tempDiv);if(start)window.__zqMorphHook(rootEl,performance.now()-start);}
@@ -329,13 +330,23 @@ return undefined;}
 function _getPath(obj,path){return path.split('.').reduce((o,k)=>o?.[k],obj);}
 function _setPath(obj,path,value){const keys=path.split('.');const last=keys.pop();const target=keys.reduce((o,k)=>(o&&typeof o==='object')?o[k]:undefined,obj);if(target&&typeof target==='object')target[last]=value;}
 class Component{constructor(el,definition,props={}){this._uid=++_uid;this._el=el;this._def=definition;this._mounted=false;this._destroyed=false;this._updateQueued=false;this._listeners=[];this._watchCleanups=[];this.refs={};this._slotContent={};const defaultSlotNodes=[];[...el.childNodes].forEach(node=>{if(node.nodeType===1&&node.hasAttribute('slot')){const slotName=node.getAttribute('slot')||'default';if(!this._slotContent[slotName])this._slotContent[slotName]='';this._slotContent[slotName]+=node.outerHTML;}else if(node.nodeType===1||(node.nodeType===3&&node.textContent.trim())){defaultSlotNodes.push(node.nodeType===1?node.outerHTML:node.textContent);}});if(defaultSlotNodes.length){this._slotContent['default']=defaultSlotNodes.join('');}
-this.props=Object.freeze({...props});const initialState=typeof definition.state==='function'?definition.state():{...(definition.state||{})};this.state=reactive(initialState,(key,value,old)=>{if(!this._destroyed){this._runWatchers(key,value,old);this._scheduleUpdate();}});this.computed={};if(definition.computed){for(const[name,fn]of Object.entries(definition.computed)){Object.defineProperty(this.computed,name,{get:()=>fn.call(this,this.state.__raw||this.state),enumerable:true});}}
+if(definition.props&&typeof definition.props==='object'&&!Array.isArray(definition.props)){this.props=this._resolveReactiveProps(definition.props,props);this._propObserver=new MutationObserver((mutations)=>{if(this._destroyed)return;let changed=false;for(const mut of mutations){if(mut.type==='attributes'){const attrName=mut.attributeName;if(attrName.startsWith('z-')||attrName.startsWith('@')||attrName.startsWith(':')||attrName.startsWith('data-zq'))continue;const propName=attrName.startsWith(':')?attrName.slice(1):attrName;if(propName in definition.props){changed=true;}}}
+if(changed){this.props=this._resolveReactiveProps(definition.props,{});this._scheduleUpdate();}});this._propObserver.observe(el,{attributes:true});}else{this.props=Object.freeze({...props});}
+this._storeCleanups=[];this.stores={};if(definition.stores&&typeof definition.stores==='object'){for(const[alias,connector]of Object.entries(definition.stores)){if(!connector||!connector._zqConnector)continue;const{store,keys}=connector;const snap={};for(const key of keys){snap[key]=store.state[key];}
+this.stores[alias]=snap;const unsub=store.subscribe(keys,(key,value)=>{this.stores[alias][key]=value;if(!this._destroyed)this._scheduleUpdate();});this._storeCleanups.push(unsub);}}
+const initialState=typeof definition.state==='function'?definition.state():{...(definition.state||{})};this.state=reactive(initialState,(key,value,old)=>{if(!this._destroyed){this._runWatchers(key,value,old);this._scheduleUpdate();}});this.computed={};if(definition.computed){for(const[name,fn]of Object.entries(definition.computed)){Object.defineProperty(this.computed,name,{get:()=>fn.call(this,this.state.__raw||this.state),enumerable:true});}}
 for(const[key,val]of Object.entries(definition)){if(typeof val==='function'&&!_reservedKeys.has(key)){this[key]=val.bind(this);}}
 if(definition.init){try{definition.init.call(this);}
 catch(err){reportError(ErrorCode.COMP_LIFECYCLE,`Component "${definition._name}" init() threw`,{component:definition._name},err);}}
 if(definition.watch){this._prevWatchValues={};for(const key of Object.keys(definition.watch)){this._prevWatchValues[key]=_getPath(this.state.__raw||this.state,key);}}}
 _runWatchers(changedKey,value,old){const watchers=this._def.watch;if(!watchers)return;for(const[key,handler]of Object.entries(watchers)){if(changedKey===key||key.startsWith(changedKey+'.')||changedKey.startsWith(key+'.')){const currentVal=_getPath(this.state.__raw||this.state,key);const prevVal=this._prevWatchValues?.[key];if(currentVal!==prevVal){const fn=typeof handler==='function'?handler:handler.handler;if(typeof fn==='function')fn.call(this,currentVal,prevVal);if(this._prevWatchValues)this._prevWatchValues[key]=currentVal;}}}}
 _scheduleUpdate(){if(this._updateQueued)return;this._updateQueued=true;queueMicrotask(()=>{try{if(!this._destroyed)this._render();}finally{this._updateQueued=false;}});}
+_resolveReactiveProps(propDefs,passedProps){const resolved={};for(const[name,schema]of Object.entries(propDefs)){const def=typeof schema==='object'&&schema!==null?schema:{type:schema};const type=def.type;const defaultVal=def.default;if(name in passedProps){resolved[name]=passedProps[name];continue;}
+let rawAttr=this._el.getAttribute(':'+name);let hasAttr=rawAttr!==null;if(!hasAttr){rawAttr=this._el.getAttribute(name);hasAttr=rawAttr!==null;}
+if(hasAttr&&rawAttr!==null){resolved[name]=this._coercePropValue(rawAttr,type);}else if(defaultVal!==undefined){resolved[name]=typeof defaultVal==='function'?defaultVal():defaultVal;}else{resolved[name]=undefined;}}
+return Object.freeze(resolved);}
+_coercePropValue(raw,type){if(type===Number)return Number(raw);if(type===Boolean)return raw!=='false'&&raw!=='0'&&raw!=='';if(type===Object||type===Array){try{return JSON.parse(raw);}catch{return raw;}}
+return raw;}
 async _loadExternals(){const def=this._def;const base=def._base;if(def.templateUrl&&!def._templateLoaded){const tu=def.templateUrl;if(typeof tu==='string'){def._externalTemplate=await _fetchResource(_resolveUrl(tu,base));}else if(Array.isArray(tu)){const urls=tu.map(u=>_resolveUrl(u,base));const results=await Promise.all(urls.map(u=>_fetchResource(u)));def._externalTemplates={};results.forEach((html,i)=>{def._externalTemplates[i]=html;});}else if(typeof tu==='object'){const entries=Object.entries(tu);const results=await Promise.all(entries.map(([,url])=>_fetchResource(_resolveUrl(url,base))));def._externalTemplates={};entries.forEach(([key],i)=>{def._externalTemplates[key]=results[i];});}
 def._templateLoaded=true;}
 if(def.styleUrl&&!def._styleLoaded){const su=def.styleUrl;if(typeof su==='string'){const resolved=_resolveUrl(su,base);def._externalStyles=await _fetchResource(resolved);def._resolvedStyleUrls=[resolved];}else if(Array.isArray(su)){const urls=su.map(u=>_resolveUrl(u,base));const results=await Promise.all(urls.map(u=>_fetchResource(u)));def._externalStyles=results.join('\n');def._resolvedStyleUrls=urls;}
@@ -389,19 +400,27 @@ parent.replaceChild(fragment,el);}
 if(root.querySelector('[z-for]'))_recurse(root);};_recurse(temp);return temp.innerHTML;}
 _expandContentDirectives(html){if(!html.includes('z-html')&&!html.includes('z-text'))return html;const temp=document.createElement('div');temp.innerHTML=html;temp.querySelectorAll('[z-html]').forEach(el=>{if(el.closest('[z-pre]'))return;const val=this._evalExpr(el.getAttribute('z-html'));el.innerHTML=val!=null?String(val):'';el.removeAttribute('z-html');});temp.querySelectorAll('[z-text]').forEach(el=>{if(el.closest('[z-pre]'))return;const val=this._evalExpr(el.getAttribute('z-text'));el.textContent=val!=null?String(val):'';el.removeAttribute('z-text');});return temp.innerHTML;}
 _processDirectives(){const ifEls=[...this._el.querySelectorAll('[z-if]')];for(const el of ifEls){if(!el.parentNode||el.closest('[z-pre]'))continue;const show=!!this._evalExpr(el.getAttribute('z-if'));const chain=[{el,show}];let sib=el.nextElementSibling;while(sib){if(sib.hasAttribute('z-else-if')){chain.push({el:sib,show:!!this._evalExpr(sib.getAttribute('z-else-if'))});sib=sib.nextElementSibling;}else if(sib.hasAttribute('z-else')){chain.push({el:sib,show:true});break;}else{break;}}
-let found=false;for(const item of chain){if(!found&&item.show){found=true;item.el.removeAttribute('z-if');item.el.removeAttribute('z-else-if');item.el.removeAttribute('z-else');}else{item.el.remove();}}}
-this._el.querySelectorAll('[z-show]').forEach(el=>{if(el.closest('[z-pre]'))return;const show=!!this._evalExpr(el.getAttribute('z-show'));el.style.display=show?'':'none';el.removeAttribute('z-show');});const walker=document.createTreeWalker(this._el,NodeFilter.SHOW_ELEMENT,{acceptNode(n){return n.hasAttribute('z-pre')?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT;}});let node;while((node=walker.nextNode())){const attrs=node.attributes;for(let i=attrs.length-1;i>=0;i--){const attr=attrs[i];let attrName;if(attr.name.startsWith('z-bind:'))attrName=attr.name.slice(7);else if(attr.name.charCodeAt(0)===58&&attr.name.charCodeAt(1)!==58)attrName=attr.name.slice(1);else continue;const val=this._evalExpr(attr.value);node.removeAttribute(attr.name);if(val===false||val===null||val===undefined){node.removeAttribute(attrName);}else if(val===true){node.setAttribute(attrName,'');}else{node.setAttribute(attrName,String(val));}}}
+let found=false;for(const item of chain){if(!found&&item.show){found=true;item.el.removeAttribute('z-if');item.el.removeAttribute('z-else-if');item.el.removeAttribute('z-else');const transName=item.el.getAttribute('z-transition');if(transName){item.el.removeAttribute('z-transition');this._transitionEnter(item.el,transName);}}else{const transName=item.el.getAttribute('z-transition');if(transName){this._transitionLeave(item.el,transName,()=>item.el.remove());}else{item.el.remove();}}}}
+this._el.querySelectorAll('[z-show]').forEach(el=>{if(el.closest('[z-pre]'))return;const show=!!this._evalExpr(el.getAttribute('z-show'));const transName=el.getAttribute('z-transition');const wasHidden=el.style.display==='none'||el.hasAttribute('data-zq-hidden');if(transName){el.removeAttribute('z-show');if(show&&wasHidden){el.style.display='';el.removeAttribute('data-zq-hidden');this._transitionEnter(el,transName);}else if(!show&&!wasHidden){el.setAttribute('data-zq-hidden','');this._transitionLeave(el,transName,()=>{el.style.display='none';});}else{el.style.display=show?'':'none';if(!show)el.setAttribute('data-zq-hidden','');else el.removeAttribute('data-zq-hidden');}}else{el.style.display=show?'':'none';el.removeAttribute('z-show');}});const walker=document.createTreeWalker(this._el,NodeFilter.SHOW_ELEMENT,{acceptNode(n){return n.hasAttribute('z-pre')?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT;}});let node;while((node=walker.nextNode())){const attrs=node.attributes;for(let i=attrs.length-1;i>=0;i--){const attr=attrs[i];let attrName;if(attr.name.startsWith('z-bind:'))attrName=attr.name.slice(7);else if(attr.name.charCodeAt(0)===58&&attr.name.charCodeAt(1)!==58)attrName=attr.name.slice(1);else continue;const val=this._evalExpr(attr.value);node.removeAttribute(attr.name);if(val===false||val===null||val===undefined){node.removeAttribute(attrName);}else if(val===true){node.setAttribute(attrName,'');}else{node.setAttribute(attrName,String(val));}}}
 this._el.querySelectorAll('[z-class]').forEach(el=>{if(el.closest('[z-pre]'))return;const val=this._evalExpr(el.getAttribute('z-class'));if(typeof val==='string'){val.split(/\s+/).filter(Boolean).forEach(c=>el.classList.add(c));}else if(Array.isArray(val)){val.filter(Boolean).forEach(c=>el.classList.add(String(c)));}else if(val&&typeof val==='object'){for(const[cls,active]of Object.entries(val)){el.classList.toggle(cls,!!active);}}
 el.removeAttribute('z-class');});this._el.querySelectorAll('[z-style]').forEach(el=>{if(el.closest('[z-pre]'))return;const val=this._evalExpr(el.getAttribute('z-style'));if(typeof val==='string'){el.style.cssText+=';'+val;}else if(val&&typeof val==='object'){for(const[prop,v]of Object.entries(val)){el.style[prop]=v;}}
 el.removeAttribute('z-style');});this._el.querySelectorAll('[z-cloak]').forEach(el=>{el.removeAttribute('z-cloak');});}
+_transitionEnter(el,name){const cfg=this._def.transition;if(cfg&&cfg.enter){el.classList.add(cfg.enter);const duration=cfg.duration||0;const cleanup=()=>el.classList.remove(cfg.enter);if(duration>0){setTimeout(cleanup,duration);}else{el.addEventListener('transitionend',cleanup,{once:true});el.addEventListener('animationend',cleanup,{once:true});}
+return;}
+el.classList.add(`${name}-enter-from`,`${name}-enter-active`);void el.offsetHeight;requestAnimationFrame(()=>{el.classList.remove(`${name}-enter-from`);el.classList.add(`${name}-enter-to`);const onEnd=()=>{el.classList.remove(`${name}-enter-active`,`${name}-enter-to`);};el.addEventListener('transitionend',onEnd,{once:true});el.addEventListener('animationend',onEnd,{once:true});});}
+_transitionLeave(el,name,done){const cfg=this._def.transition;if(cfg&&cfg.leave){el.classList.add(cfg.leave);const duration=cfg.duration||0;const cleanup=()=>{el.classList.remove(cfg.leave);done();};if(duration>0){setTimeout(cleanup,duration);}else{el.addEventListener('transitionend',cleanup,{once:true});el.addEventListener('animationend',cleanup,{once:true});}
+return;}
+el.classList.add(`${name}-leave-from`,`${name}-leave-active`);void el.offsetHeight;requestAnimationFrame(()=>{el.classList.remove(`${name}-leave-from`);el.classList.add(`${name}-leave-to`);const onEnd=()=>{el.classList.remove(`${name}-leave-active`,`${name}-leave-to`);done();};el.addEventListener('transitionend',onEnd,{once:true});el.addEventListener('animationend',onEnd,{once:true});});}
 setState(partial){if(partial&&Object.keys(partial).length>0){Object.assign(this.state,partial);}else{this._scheduleUpdate();}}
 emit(name,detail){this._el.dispatchEvent(new CustomEvent(name,{detail,bubbles:true,cancelable:true}));}
 destroy(){if(this._destroyed)return;this._destroyed=true;if(this._def.destroyed){try{this._def.destroyed.call(this);}
 catch(err){reportError(ErrorCode.COMP_LIFECYCLE,`Component "${this._def._name}" destroyed() threw`,{component:this._def._name},err);}}
+if(this._propObserver){this._propObserver.disconnect();this._propObserver=null;}
+if(this._storeCleanups){this._storeCleanups.forEach(fn=>fn());this._storeCleanups=[];}
 this._listeners.forEach(({event,handler})=>this._el.removeEventListener(event,handler));this._listeners=[];if(this._outsideListeners){this._outsideListeners.forEach(({event,handler})=>document.removeEventListener(event,handler,true));this._outsideListeners=[];}
 this._delegatedEvents=null;this._eventBindings=null;const allEls=this._el.querySelectorAll('*');allEls.forEach(child=>{const dTimers=_debounceTimers.get(child);if(dTimers){for(const key in dTimers)clearTimeout(dTimers[key]);_debounceTimers.delete(child);}
 const tTimers=_throttleTimers.get(child);if(tTimers){for(const key in tTimers)clearTimeout(tTimers[key]);_throttleTimers.delete(child);}});if(this._styleEl)this._styleEl.remove();_instances.delete(this._el);this._el.innerHTML='';}}
-const _reservedKeys=new Set(['state','render','styles','init','mounted','updated','destroyed','props','templateUrl','styleUrl','templates','base','computed','watch']);function component(name,definition){if(!name||typeof name!=='string'){throw new ZQueryError(ErrorCode.COMP_INVALID_NAME,'Component name must be a non-empty string');}
+const _reservedKeys=new Set(['state','render','styles','init','mounted','updated','destroyed','props','templateUrl','styleUrl','templates','base','computed','watch','stores','transition','activated','deactivated']);function component(name,definition){if(!name||typeof name!=='string'){throw new ZQueryError(ErrorCode.COMP_INVALID_NAME,'Component name must be a non-empty string');}
 if(!name.includes('-')){throw new ZQueryError(ErrorCode.COMP_INVALID_NAME,`Component name "${name}" must contain a hyphen (Web Component convention)`);}
 definition._name=name;if(definition.base!==undefined){definition._base=definition.base;}else{definition._base=_detectCallerBase();}
 _registry.set(name,definition);}
@@ -423,7 +442,7 @@ const link=document.createElement('link');link.rel='stylesheet';link.href=url;li
 const ready=Promise.all(loadPromises).then(()=>{if(_criticalStyle){_criticalStyle.remove();}});return{ready,remove(){for(const el of elements){el.remove();for(const[k,v]of _globalStyles){if(v===el){_globalStyles.delete(k);break;}}}}};}
 const _ZQ_STATE_KEY='__zq';function _shallowEqual(a,b){if(a===b)return true;if(!a||!b)return false;const keysA=Object.keys(a);const keysB=Object.keys(b);if(keysA.length!==keysB.length)return false;for(let i=0;i<keysA.length;i++){const k=keysA[i];if(a[k]!==b[k])return false;}
 return true;}
-class Router{constructor(config={}){this._el=null;const isFile=typeof location!=='undefined'&&location.protocol==='file:';this._mode=isFile?'hash':(config.mode||'history');let rawBase=config.base;if(rawBase==null){rawBase=(typeof window!=='undefined'&&window.__ZQ_BASE)||'';if(!rawBase&&typeof document!=='undefined'){const baseEl=document.querySelector('base');if(baseEl){try{rawBase=new URL(baseEl.href).pathname;}
+class Router{constructor(config={}){this._el=null;const isFile=typeof location!=='undefined'&&location.protocol==='file:';this._mode=isFile?'hash':(config.mode||'history');this._keepAliveCache=new Map();let rawBase=config.base;if(rawBase==null){rawBase=(typeof window!=='undefined'&&window.__ZQ_BASE)||'';if(!rawBase&&typeof document!=='undefined'){const baseEl=document.querySelector('base');if(baseEl){try{rawBase=new URL(baseEl.href).pathname;}
 catch{rawBase=baseEl.getAttribute('href')||'';}
 if(rawBase==='/')rawBase='';}}}
 this._base=String(rawBase).replace(/\/+$/,'');if(this._base&&!this._base.startsWith('/'))this._base='/'+this._base;this._routes=[];this._fallback=config.fallback||null;this._current=null;this._guards={before:[],after:[]};this._listeners=new Set();this._instance=null;this._resolving=false;this._substateListeners=[];this._inSubstate=false;if(config.el){this._el=typeof config.el==='string'?document.querySelector(config.el):config.el;}else if(typeof document!=='undefined'){const outlet=document.querySelector('z-outlet');if(outlet){this._el=outlet;if(!config.fallback&&outlet.getAttribute('fallback')){this._fallback=outlet.getAttribute('fallback');}
@@ -481,17 +500,25 @@ return this.__resolve();}}catch(err){reportError(ErrorCode.ROUTER_GUARD,'Before-
 if(matched.load){try{await matched.load();}
 catch(err){reportError(ErrorCode.ROUTER_LOAD,`Failed to load module for route "${matched.path}"`,{path:matched.path},err);return;}}
 this._current=to;if(this._el&&matched.component){if(typeof matched.component==='string'){await prefetch(matched.component);}
-if(this._instance){this._instance.destroy();this._instance=null;}
-const _routeStart=typeof window!=='undefined'&&window.__zqRenderHook?performance.now():0;this._el.innerHTML='';const props={...params,$route:to,$query:query,$params:params};if(typeof matched.component==='string'){const container=document.createElement(matched.component);this._el.appendChild(container);try{this._instance=mount(container,matched.component,props);}catch(err){reportError(ErrorCode.COMP_NOT_FOUND,`Failed to mount component for route "${matched.path}"`,{component:matched.component,path:matched.path},err);return;}
-if(_routeStart)window.__zqRenderHook(this._el,performance.now()-_routeStart,'route',matched.component);}
-else if(typeof matched.component==='function'){this._el.innerHTML=matched.component(to);if(_routeStart)window.__zqRenderHook(this._el,performance.now()-_routeStart,'route',to);}}
+const isKeepAlive=!!matched.keepAlive;const componentName=typeof matched.component==='string'?matched.component:null;if(this._instance&&this._currentKeepAlive&&this._currentComponentName){const cached=this._keepAliveCache.get(this._currentComponentName);if(cached){cached.container.style.display='none';if(cached.instance._def.deactivated){try{cached.instance._def.deactivated.call(cached.instance);}
+catch(err){reportError(ErrorCode.COMP_LIFECYCLE,`Component "${this._currentComponentName}" deactivated() threw`,{component:this._currentComponentName},err);}}}
+this._instance=null;}else if(this._instance){this._instance.destroy();this._instance=null;}
+const _routeStart=typeof window!=='undefined'&&window.__zqRenderHook?performance.now():0;const props={...params,$route:to,$query:query,$params:params};if(isKeepAlive&&componentName&&this._keepAliveCache.has(componentName)){const cached=this._keepAliveCache.get(componentName);[...this._el.children].forEach(c=>{c.style.display='none';});cached.container.style.display='';this._instance=cached.instance;this._currentKeepAlive=true;this._currentComponentName=componentName;if(cached.instance._def.activated){try{cached.instance._def.activated.call(cached.instance);}
+catch(err){reportError(ErrorCode.COMP_LIFECYCLE,`Component "${componentName}" activated() threw`,{component:componentName},err);}}
+if(_routeStart)window.__zqRenderHook(this._el,performance.now()-_routeStart,'route',componentName);}
+else if(componentName){[...this._el.children].forEach(c=>{if(c.dataset.zqKeepAlive){c.style.display='none';}});[...this._el.children].forEach(c=>{if(!c.dataset.zqKeepAlive)c.remove();});const container=document.createElement(componentName);if(isKeepAlive)container.dataset.zqKeepAlive=componentName;this._el.appendChild(container);try{this._instance=mount(container,componentName,props);}catch(err){reportError(ErrorCode.COMP_NOT_FOUND,`Failed to mount component for route "${matched.path}"`,{component:matched.component,path:matched.path},err);return;}
+if(isKeepAlive){this._keepAliveCache.set(componentName,{container,instance:this._instance});if(this._instance._def.activated){try{this._instance._def.activated.call(this._instance);}
+catch(err){reportError(ErrorCode.COMP_LIFECYCLE,`Component "${componentName}" activated() threw`,{component:componentName},err);}}}
+this._currentKeepAlive=isKeepAlive;this._currentComponentName=componentName;if(_routeStart)window.__zqRenderHook(this._el,performance.now()-_routeStart,'route',componentName);}
+else if(typeof matched.component==='function'){[...this._el.children].forEach(c=>{if(c.dataset.zqKeepAlive)c.style.display='none';else c.remove();});const wrapper=document.createElement('div');wrapper.innerHTML=matched.component(to);while(wrapper.firstChild)this._el.appendChild(wrapper.firstChild);this._currentKeepAlive=false;this._currentComponentName=null;if(_routeStart)window.__zqRenderHook(this._el,performance.now()-_routeStart,'route',to);}}
 this._updateActiveRoutes(path);for(const guard of this._guards.after){await guard(to,from);}
 this._listeners.forEach(fn=>fn(to,from));}
 _updateActiveRoutes(currentPath){if(typeof document==='undefined')return;const els=document.querySelectorAll('[z-active-route]');for(let i=0;i<els.length;i++){const el=els[i];const route=el.getAttribute('z-active-route');const cls=el.getAttribute('z-active-class')||'active';const exact=el.hasAttribute('z-active-exact');const isActive=exact?currentPath===route:(route==='/'?currentPath==='/':currentPath.startsWith(route));el.classList.toggle(cls,isActive);}}
 destroy(){if(this._onNavEvent){window.removeEventListener(this._mode==='hash'?'hashchange':'popstate',this._onNavEvent);this._onNavEvent=null;}
 if(this._onPopState){window.removeEventListener('popstate',this._onPopState);this._onPopState=null;}
 if(this._onLinkClick){document.removeEventListener('click',this._onLinkClick);this._onLinkClick=null;}
-if(this._instance)this._instance.destroy();this._listeners.clear();this._substateListeners=[];this._inSubstate=false;this._routes=[];this._guards={before:[],after:[]};}}
+for(const[,cached]of this._keepAliveCache){cached.instance.destroy();}
+this._keepAliveCache.clear();if(this._instance)this._instance.destroy();this._listeners.clear();this._substateListeners=[];this._inSubstate=false;this._routes=[];this._guards={before:[],after:[]};}}
 function compilePath(path){const keys=[];const pattern=path.replace(/:(\w+)/g,(_,key)=>{keys.push(key);return'([^/]+)';}).replace(/\*/g,'(.*)');return{regex:new RegExp(`^${pattern}$`),keys};}
 function matchRoute(routes,pathname,fallback='not-found'){for(const route of routes){const{regex,keys}=compilePath(route.path);const m=pathname.match(regex);if(m){const params={};keys.forEach((key,i)=>{params[key]=m[i+1];});return{component:route.component,params};}
 if(route.fallback){const fb=compilePath(route.fallback);const fbm=pathname.match(fb.regex);if(fbm){const params={};fb.keys.forEach((key,i)=>{params[key]=fbm[i+1];});return{component:route.component,params};}}}
@@ -503,8 +530,9 @@ this._notifySubscribers(key,value,old);});this.getters={};for(const[name,fn]of O
 _notifySubscribers(key,value,old){const subs=this._subscribers.get(key);if(subs)subs.forEach(fn=>{try{fn(key,value,old);}
 catch(err){reportError(ErrorCode.STORE_SUBSCRIBE,`Subscriber for "${key}" threw`,{key},err);}});this._wildcards.forEach(fn=>{try{fn(key,value,old);}
 catch(err){reportError(ErrorCode.STORE_SUBSCRIBE,'Wildcard subscriber threw',{key},err);}});}
-batch(fn){this._batching=true;this._batchQueue=[];try{fn(this.state);}finally{this._batching=false;const last=new Map();for(const entry of this._batchQueue){last.set(entry.key,entry);}
-this._batchQueue=[];for(const{key,value,old}of last.values()){this._notifySubscribers(key,value,old);}}}
+batch(fn){this._batching=true;this._batchQueue=[];let result;try{result=fn(this.state);}finally{this._batching=false;const last=new Map();for(const entry of this._batchQueue){last.set(entry.key,entry);}
+this._batchQueue=[];for(const{key,value,old}of last.values()){this._notifySubscribers(key,value,old);}}
+return result;}
 checkpoint(){const snap=JSON.parse(JSON.stringify(this.state.__raw||this.state));this._undoStack.push(snap);if(this._undoStack.length>this._maxUndo){this._undoStack.splice(0,this._undoStack.length-this._maxUndo);}
 this._redoStack=[];}
 undo(){if(this._undoStack.length===0)return false;const current=JSON.parse(JSON.stringify(this.state.__raw||this.state));this._redoStack.push(current);const prev=this._undoStack.pop();this.replaceState(prev);return true;}
@@ -517,6 +545,7 @@ if(this._debug){console.log(`%c[Store] ${name}`,'color: #4CAF50; font-weight: bo
 try{const result=action(this.state,...args);this._history.push({action:name,args,timestamp:Date.now()});if(this._history.length>this._maxHistory){this._history.splice(0,this._history.length-this._maxHistory);}
 return result;}catch(err){reportError(ErrorCode.STORE_ACTION,`Action "${name}" threw`,{action:name,args},err);}}
 subscribe(keyOrFn,fn){if(typeof keyOrFn==='function'){this._wildcards.add(keyOrFn);return()=>this._wildcards.delete(keyOrFn);}
+if(Array.isArray(keyOrFn)){const keys=keyOrFn;const handler=(key,value,old)=>{if(keys.includes(key))fn(key,value,old);};this._wildcards.add(handler);return()=>this._wildcards.delete(handler);}
 if(!this._subscribers.has(keyOrFn)){this._subscribers.set(keyOrFn,new Set());}
 this._subscribers.get(keyOrFn).add(fn);return()=>this._subscribers.get(keyOrFn)?.delete(fn);}
 snapshot(){return JSON.parse(JSON.stringify(this.state.__raw||this.state));}
@@ -528,6 +557,7 @@ reset(initialState){this.replaceState(initialState||JSON.parse(JSON.stringify(th
 let _stores=new Map();function createStore(name,config){if(typeof name==='object'){config=name;name='default';}
 const store=new Store(config);_stores.set(name,store);return store;}
 function getStore(name='default'){return _stores.get(name)||null;}
+function connectStore(store,keys){return{_zqConnector:true,store,keys};}
 const _config={baseURL:'',headers:{'Content-Type':'application/json'},timeout:30000,};const _interceptors={request:[],response:[],};async function request(method,url,data,options={}){if(!url||typeof url!=='string'){throw new Error(`HTTP request requires a URL string, got ${typeof url}`);}
 let fullURL=url.startsWith('http')?url:_config.baseURL+url;let headers={..._config.headers,...options.headers};let body=undefined;const fetchOpts={method:method.toUpperCase(),headers,...options,};if(data!==undefined&&method!=='GET'&&method!=='HEAD'){if(data instanceof FormData){body=data;delete fetchOpts.headers['Content-Type'];}else if(typeof data==='object'){body=JSON.stringify(data);}else{body=data;}
 fetchOpts.body=body;}
@@ -601,6 +631,6 @@ function retry(fn,opts={}){const{attempts=3,delay=1000,backoff=1}=opts;return ne
 function timeout(promise,ms,message){let timer;const race=Promise.race([promise,new Promise((_,reject)=>{timer=setTimeout(()=>reject(new Error(message||`Timed out after ${ms}ms`)),ms);})]);return race.finally(()=>clearTimeout(timer));}
 function $(selector,context){if(typeof selector==='function'){query.ready(selector);return;}
 return query(selector,context);}
-$.id=query.id;$.class=query.class;$.classes=query.classes;$.tag=query.tag;Object.defineProperty($,'name',{value:query.name,writable:true,configurable:true});$.children=query.children;$.qs=query.qs;$.qsa=query.qsa;$.all=function(selector,context){return queryAll(selector,context);};$.create=query.create;$.ready=query.ready;$.on=query.on;$.off=query.off;$.fn=query.fn;$.reactive=reactive;$.Signal=Signal;$.signal=signal;$.computed=computed;$.effect=effect;$.batch=batch;$.untracked=untracked;$.component=component;$.mount=mount;$.mountAll=mountAll;$.getInstance=getInstance;$.destroy=destroy;$.components=getRegistry;$.prefetch=prefetch;$.style=style;$.morph=morph;$.morphElement=morphElement;$.safeEval=safeEval;$.router=createRouter;$.getRouter=getRouter;$.matchRoute=matchRoute;$.store=createStore;$.getStore=getStore;$.http=http;$.get=http.get;$.post=http.post;$.put=http.put;$.patch=http.patch;$.delete=http.delete;$.head=http.head;$.debounce=debounce;$.throttle=throttle;$.pipe=pipe;$.once=once;$.sleep=sleep;$.escapeHtml=escapeHtml;$.stripHtml=stripHtml;$.html=html;$.trust=trust;$.TrustedHTML=TrustedHTML;$.uuid=uuid;$.camelCase=camelCase;$.kebabCase=kebabCase;$.deepClone=deepClone;$.deepMerge=deepMerge;$.isEqual=isEqual;$.param=param;$.parseQuery=parseQuery;$.storage=storage;$.session=session;$.EventBus=EventBus;$.bus=bus;$.range=range;$.unique=unique;$.chunk=chunk;$.groupBy=groupBy;$.pick=pick;$.omit=omit;$.getPath=getPath;$.setPath=setPath;$.isEmpty=isEmpty;$.capitalize=capitalize;$.truncate=truncate;$.clamp=clamp;$.memoize=memoize;$.retry=retry;$.timeout=timeout;$.onError=onError;$.ZQueryError=ZQueryError;$.ErrorCode=ErrorCode;$.guardCallback=guardCallback;$.guardAsync=guardAsync;$.validate=validate;$.formatError=formatError;$.version='1.0.9';$.libSize='~108 KB';$.unitTests={"passed":1965,"failed":0,"total":1965,"suites":525,"duration":3752,"ok":true};$.meta={};$.noConflict=()=>{if(typeof window!=='undefined'&&window.$===$){delete window.$;}
+$.id=query.id;$.class=query.class;$.classes=query.classes;$.tag=query.tag;Object.defineProperty($,'name',{value:query.name,writable:true,configurable:true});$.children=query.children;$.qs=query.qs;$.qsa=query.qsa;$.all=function(selector,context){return queryAll(selector,context);};$.create=query.create;$.ready=query.ready;$.on=query.on;$.off=query.off;$.fn=query.fn;$.reactive=reactive;$.Signal=Signal;$.signal=signal;$.computed=computed;$.effect=effect;$.batch=batch;$.untracked=untracked;$.component=component;$.mount=mount;$.mountAll=mountAll;$.getInstance=getInstance;$.destroy=destroy;$.components=getRegistry;$.prefetch=prefetch;$.style=style;$.morph=morph;$.morphElement=morphElement;$.safeEval=safeEval;$.router=createRouter;$.getRouter=getRouter;$.matchRoute=matchRoute;$.store=createStore;$.getStore=getStore;$.connectStore=connectStore;$.http=http;$.get=http.get;$.post=http.post;$.put=http.put;$.patch=http.patch;$.delete=http.delete;$.head=http.head;$.debounce=debounce;$.throttle=throttle;$.pipe=pipe;$.once=once;$.sleep=sleep;$.escapeHtml=escapeHtml;$.stripHtml=stripHtml;$.html=html;$.trust=trust;$.TrustedHTML=TrustedHTML;$.uuid=uuid;$.camelCase=camelCase;$.kebabCase=kebabCase;$.deepClone=deepClone;$.deepMerge=deepMerge;$.isEqual=isEqual;$.param=param;$.parseQuery=parseQuery;$.storage=storage;$.session=session;$.EventBus=EventBus;$.bus=bus;$.range=range;$.unique=unique;$.chunk=chunk;$.groupBy=groupBy;$.pick=pick;$.omit=omit;$.getPath=getPath;$.setPath=setPath;$.isEmpty=isEmpty;$.capitalize=capitalize;$.truncate=truncate;$.clamp=clamp;$.memoize=memoize;$.retry=retry;$.timeout=timeout;$.onError=onError;$.ZQueryError=ZQueryError;$.ErrorCode=ErrorCode;$.guardCallback=guardCallback;$.guardAsync=guardAsync;$.validate=validate;$.formatError=formatError;$.version='1.1.1';$.libSize='~115 KB';$.unitTests={"passed":2281,"failed":0,"total":2281,"suites":565,"duration":6929,"ok":true};$.meta={};$.isElectron=typeof navigator!=='undefined'&&/Electron/i.test(navigator.userAgent)||typeof process!=='undefined'&&process.versions!=null&&!!process.versions.electron;$.platform=$.isElectron?'electron':typeof window!=='undefined'?'browser':'node';$.noConflict=()=>{if(typeof window!=='undefined'&&window.$===$){delete window.$;}
 return $;};if(typeof window!=='undefined'){window.$=$;window.zQuery=$;}
 $;})(typeof window!=='undefined'?window:globalThis);

package/index.d.ts

@@ -4,7 +4,7 @@
  * Lightweight modern frontend library - jQuery-like selectors, reactive
  * components, SPA router, state management, HTTP client & utilities.
  *
- * @version 1.0.9
+ * @version 1.1.0
  * @license MIT
  * @see https://z-query.com/docs
  */
@@ -153,7 +153,7 @@ import type { createStore, getStore } from './types/store';
 import type { HttpClient } from './types/http';
 import type {
   debounce, throttle, pipe, once, sleep,
-  escapeHtml, stripHtml, html, trust, uuid, camelCase, kebabCase,
+  escapeHtml, stripHtml, html, trust, TrustedHTML, uuid, camelCase, kebabCase,
   deepClone, deepMerge, isEqual, param, parseQuery,
   StorageWrapper, EventBus,
   range, unique, chunk, groupBy,
@@ -161,7 +161,7 @@ import type {
   capitalize, truncate, clamp,
   MemoizedFunction, memoize, RetryOptions, retry, timeout,
 } from './types/utils';
-import type { onError, ZQueryError, ErrorCode, guardCallback, validate } from './types/errors';
+import type { onError, ZQueryError, ErrorCode, guardCallback, guardAsync, validate, formatError } from './types/errors';
 import type { morph, morphElement, safeEval } from './types/misc';
 
 /**
@@ -279,6 +279,7 @@ interface ZQueryStatic {
   put: HttpClient['put'];
   patch: HttpClient['patch'];
   delete: HttpClient['delete'];
+  head: HttpClient['head'];
 
   // -- Error Handling ------------------------------------------------------
   /** Register a global error handler (or pass `null` to remove). */
@@ -289,8 +290,12 @@ interface ZQueryStatic {
   ErrorCode: typeof ErrorCode;
   /** Wrap a callback so thrown errors are caught and reported via the global handler. */
   guardCallback: typeof guardCallback;
+  /** Wrap an async function so thrown errors are caught and reported via the global handler. */
+  guardAsync: typeof guardAsync;
   /** Validate a required value is defined and of the expected type. */
   validate: typeof validate;
+  /** Format a ZQueryError into a structured plain object. */
+  formatError: typeof formatError;
 
   // -- Utilities -----------------------------------------------------------
   debounce: typeof debounce;
@@ -303,6 +308,7 @@ interface ZQueryStatic {
   stripHtml: typeof stripHtml;
   html: typeof html;
   trust: typeof trust;
+  TrustedHTML: typeof TrustedHTML;
   uuid: typeof uuid;
   camelCase: typeof camelCase;
   kebabCase: typeof kebabCase;

package/index.js

@@ -13,7 +13,7 @@ import { query, queryAll, ZQueryCollection } from './src/core.js';
 import { reactive, Signal, signal, computed, effect, batch, untracked } from './src/reactive.js';
 import { component, mount, mountAll, getInstance, destroy, getRegistry, prefetch, style } from './src/component.js';
 import { createRouter, getRouter, matchRoute } from './src/router.js';
-import { createStore, getStore } from './src/store.js';
+import { createStore, getStore, connectStore } from './src/store.js';
 import { http } from './src/http.js';
 import { morph, morphElement } from './src/diff.js';
 import { safeEval } from './src/expression.js';
@@ -122,6 +122,7 @@ $.matchRoute = matchRoute;
 // --- Store -----------------------------------------------------------------
 $.store    = createStore;
 $.getStore = getStore;
+$.connectStore = connectStore;
 
 // --- HTTP ------------------------------------------------------------------
 $.http   = http;
@@ -186,6 +187,13 @@ $.libSize   = '__LIB_SIZE__';
 $.unitTests = '__UNIT_TESTS__';
 $.meta      = {};              // populated at build time by CLI bundler
 
+// --- Environment detection -------------------------------------------------
+$.isElectron = typeof navigator !== 'undefined' && /Electron/i.test(navigator.userAgent)
+  || typeof process !== 'undefined' && process.versions != null && !!process.versions.electron;
+$.platform = $.isElectron ? 'electron'
+  : typeof window !== 'undefined' ? 'browser'
+  : 'node';
+
 $.noConflict = () => {
   if (typeof window !== 'undefined' && window.$ === $) {
     delete window.$;
@@ -216,7 +224,7 @@ export {
   morph, morphElement,
   safeEval,
   createRouter, getRouter, matchRoute,
-  createStore, getStore,
+  createStore, getStore, connectStore,
   http,
   ZQueryError, ErrorCode, onError, reportError, guardCallback, guardAsync, validate, formatError,
   debounce, throttle, pipe, once, sleep,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zero-query",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "description": "Lightweight modern frontend library - jQuery-like selectors, reactive components, SPA router, and state management with zero dependencies.",
   "main": "index.js",
   "types": "index.d.ts",
@@ -30,6 +30,7 @@
     "dev-lib": "node cli/index.js build --watch",
     "bundle": "node cli/index.js bundle",
     "bundle:app": "node cli/index.js bundle zquery-website",
+    "build:api": "node cli/commands/build-api.js",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:ssr": "node tests/test-ssr.js"

package/src/component.js

@@ -210,8 +210,58 @@ class Component {
       this._slotContent['default'] = defaultSlotNodes.join('');
     }
 
-    // Props (read-only from parent)
-    this.props = Object.freeze({ ...props });
+    // Props - reactive when definition.props is defined, frozen otherwise
+    if (definition.props && typeof definition.props === 'object' && !Array.isArray(definition.props)) {
+      // Reactive props with type coercion and defaults
+      this.props = this._resolveReactiveProps(definition.props, props);
+      // MutationObserver to re-read props when parent re-renders and changes attributes
+      this._propObserver = new MutationObserver((mutations) => {
+        if (this._destroyed) return;
+        let changed = false;
+        for (const mut of mutations) {
+          if (mut.type === 'attributes') {
+            const attrName = mut.attributeName;
+            // Skip internal attributes
+            if (attrName.startsWith('z-') || attrName.startsWith('@') || attrName.startsWith(':') || attrName.startsWith('data-zq')) continue;
+            // Check if this is a defined prop (attribute names are lowercase)
+            const propName = attrName.startsWith(':') ? attrName.slice(1) : attrName;
+            if (propName in definition.props) {
+              changed = true;
+            }
+          }
+        }
+        if (changed) {
+          this.props = this._resolveReactiveProps(definition.props, {});
+          this._scheduleUpdate();
+        }
+      });
+      this._propObserver.observe(el, { attributes: true });
+    } else {
+      // Legacy: frozen props from parent
+      this.props = Object.freeze({ ...props });
+    }
+
+    // Store connectors - auto-subscribe to store keys
+    this._storeCleanups = [];
+    this.stores = {};
+    if (definition.stores && typeof definition.stores === 'object') {
+      for (const [alias, connector] of Object.entries(definition.stores)) {
+        if (!connector || !connector._zqConnector) continue;
+        const { store, keys } = connector;
+        // Initialize snapshot
+        const snap = {};
+        for (const key of keys) {
+          snap[key] = store.state[key];
+        }
+        this.stores[alias] = snap;
+        // Subscribe to changes
+        const unsub = store.subscribe(keys, (key, value) => {
+          this.stores[alias][key] = value;
+          if (!this._destroyed) this._scheduleUpdate();
+        });
+        this._storeCleanups.push(unsub);
+      }
+    }
 
     // Reactive state
     const initialState = typeof definition.state === 'function'
@@ -290,6 +340,61 @@ class Component {
     });
   }
 
+  /**
+   * Resolve reactive props from the definition's prop schema.
+   * Reads from element attributes, applies type coercion and defaults.
+   * Passed props (from mount) override attributes.
+   * @param {object} propDefs - { propName: { type, default } }
+   * @param {object} passedProps - props passed programmatically from mount()
+   * @returns {object} resolved props (frozen)
+   */
+  _resolveReactiveProps(propDefs, passedProps) {
+    const resolved = {};
+    for (const [name, schema] of Object.entries(propDefs)) {
+      const def = typeof schema === 'object' && schema !== null ? schema : { type: schema };
+      const type = def.type;
+      const defaultVal = def.default;
+
+      // Priority: passed props > dynamic :prop attribute > static attribute > default
+      if (name in passedProps) {
+        resolved[name] = passedProps[name];
+        continue;
+      }
+
+      // Check for dynamic :prop attribute (already evaluated by parent mount)
+      let rawAttr = this._el.getAttribute(':' + name);
+      let hasAttr = rawAttr !== null;
+      if (!hasAttr) {
+        rawAttr = this._el.getAttribute(name);
+        hasAttr = rawAttr !== null;
+      }
+
+      if (hasAttr && rawAttr !== null) {
+        resolved[name] = this._coercePropValue(rawAttr, type);
+      } else if (defaultVal !== undefined) {
+        resolved[name] = typeof defaultVal === 'function' ? defaultVal() : defaultVal;
+      } else {
+        resolved[name] = undefined;
+      }
+    }
+    return Object.freeze(resolved);
+  }
+
+  /**
+   * Coerce a raw attribute string to the specified type.
+   * @param {string} raw - attribute value string
+   * @param {Function} type - String, Number, Boolean, Object, or Array
+   * @returns {*}
+   */
+  _coercePropValue(raw, type) {
+    if (type === Number) return Number(raw);
+    if (type === Boolean) return raw !== 'false' && raw !== '0' && raw !== '';
+    if (type === Object || type === Array) {
+      try { return JSON.parse(raw); } catch { return raw; }
+    }
+    return raw; // String or unspecified
+  }
+
   // Load external templateUrl / styleUrl if specified (once per definition)
   //
   // Relative paths are resolved automatically against the component file's
@@ -1052,8 +1157,20 @@ class Component {
           item.el.removeAttribute('z-if');
           item.el.removeAttribute('z-else-if');
           item.el.removeAttribute('z-else');
+          // Transition enter for z-if elements becoming visible
+          const transName = item.el.getAttribute('z-transition');
+          if (transName) {
+            item.el.removeAttribute('z-transition');
+            this._transitionEnter(item.el, transName);
+          }
         } else {
-          item.el.remove();
+          // Transition leave for z-if elements being removed
+          const transName = item.el.getAttribute('z-transition');
+          if (transName) {
+            this._transitionLeave(item.el, transName, () => item.el.remove());
+          } else {
+            item.el.remove();
+          }
         }
       }
     }
@@ -1062,8 +1179,31 @@ class Component {
     this._el.querySelectorAll('[z-show]').forEach(el => {
       if (el.closest('[z-pre]')) return;
       const show = !!this._evalExpr(el.getAttribute('z-show'));
-      el.style.display = show ? '' : 'none';
-      el.removeAttribute('z-show');
+      const transName = el.getAttribute('z-transition');
+      const wasHidden = el.style.display === 'none' || el.hasAttribute('data-zq-hidden');
+
+      if (transName) {
+        el.removeAttribute('z-show');
+        if (show && wasHidden) {
+          // Entering: was hidden, now showing
+          el.style.display = '';
+          el.removeAttribute('data-zq-hidden');
+          this._transitionEnter(el, transName);
+        } else if (!show && !wasHidden) {
+          // Leaving: was visible, now hiding
+          el.setAttribute('data-zq-hidden', '');
+          this._transitionLeave(el, transName, () => {
+            el.style.display = 'none';
+          });
+        } else {
+          el.style.display = show ? '' : 'none';
+          if (!show) el.setAttribute('data-zq-hidden', '');
+          else el.removeAttribute('data-zq-hidden');
+        }
+      } else {
+        el.style.display = show ? '' : 'none';
+        el.removeAttribute('z-show');
+      }
     });
 
     // -- z-bind:attr / :attr (dynamic attribute binding) -----------
@@ -1138,6 +1278,93 @@ class Component {
     });
   }
 
+  // ---------------------------------------------------------------------------
+  // Transition helpers - CSS class-based enter/leave animations
+  //
+  //   z-transition="fade" generates:
+  //     Enter: .fade-enter-from → .fade-enter-active + .fade-enter-to
+  //     Leave: .fade-leave-from → .fade-leave-active + .fade-leave-to
+  //
+  //   Or component-level transition config:
+  //     transition: { enter: 'animate-in', leave: 'animate-out', duration: 200 }
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Run an enter transition on an element.
+   * @param {Element} el - target element
+   * @param {string} name - transition name (e.g. 'fade')
+   */
+  _transitionEnter(el, name) {
+    // Check for component-level transition config
+    const cfg = this._def.transition;
+    if (cfg && cfg.enter) {
+      el.classList.add(cfg.enter);
+      const duration = cfg.duration || 0;
+      const cleanup = () => el.classList.remove(cfg.enter);
+      if (duration > 0) {
+        setTimeout(cleanup, duration);
+      } else {
+        el.addEventListener('transitionend', cleanup, { once: true });
+        el.addEventListener('animationend', cleanup, { once: true });
+      }
+      return;
+    }
+
+    // CSS class-based transition pattern
+    el.classList.add(`${name}-enter-from`, `${name}-enter-active`);
+    // Force reflow so the browser registers the initial state
+    void el.offsetHeight;
+    requestAnimationFrame(() => {
+      el.classList.remove(`${name}-enter-from`);
+      el.classList.add(`${name}-enter-to`);
+      const onEnd = () => {
+        el.classList.remove(`${name}-enter-active`, `${name}-enter-to`);
+      };
+      el.addEventListener('transitionend', onEnd, { once: true });
+      el.addEventListener('animationend', onEnd, { once: true });
+    });
+  }
+
+  /**
+   * Run a leave transition on an element, then call done().
+   * @param {Element} el - target element
+   * @param {string} name - transition name (e.g. 'fade')
+   * @param {Function} done - callback when transition completes
+   */
+  _transitionLeave(el, name, done) {
+    // Check for component-level transition config
+    const cfg = this._def.transition;
+    if (cfg && cfg.leave) {
+      el.classList.add(cfg.leave);
+      const duration = cfg.duration || 0;
+      const cleanup = () => {
+        el.classList.remove(cfg.leave);
+        done();
+      };
+      if (duration > 0) {
+        setTimeout(cleanup, duration);
+      } else {
+        el.addEventListener('transitionend', cleanup, { once: true });
+        el.addEventListener('animationend', cleanup, { once: true });
+      }
+      return;
+    }
+
+    // CSS class-based transition pattern
+    el.classList.add(`${name}-leave-from`, `${name}-leave-active`);
+    void el.offsetHeight;
+    requestAnimationFrame(() => {
+      el.classList.remove(`${name}-leave-from`);
+      el.classList.add(`${name}-leave-to`);
+      const onEnd = () => {
+        el.classList.remove(`${name}-leave-active`, `${name}-leave-to`);
+        done();
+      };
+      el.addEventListener('transitionend', onEnd, { once: true });
+      el.addEventListener('animationend', onEnd, { once: true });
+    });
+  }
+
   // Programmatic state update (batch-friendly)
   // Passing an empty object forces a re-render (useful for external state changes).
   setState(partial) {
@@ -1161,6 +1388,16 @@ class Component {
       try { this._def.destroyed.call(this); }
       catch (err) { reportError(ErrorCode.COMP_LIFECYCLE, `Component "${this._def._name}" destroyed() threw`, { component: this._def._name }, err); }
     }
+    // Clean up prop observer
+    if (this._propObserver) {
+      this._propObserver.disconnect();
+      this._propObserver = null;
+    }
+    // Clean up store connectors
+    if (this._storeCleanups) {
+      this._storeCleanups.forEach(fn => fn());
+      this._storeCleanups = [];
+    }
     this._listeners.forEach(({ event, handler }) => this._el.removeEventListener(event, handler));
     this._listeners = [];
     if (this._outsideListeners) {
@@ -1195,7 +1432,7 @@ class Component {
 const _reservedKeys = new Set([
   'state', 'render', 'styles', 'init', 'mounted', 'updated', 'destroyed', 'props',
   'templateUrl', 'styleUrl', 'templates', 'base',
-  'computed', 'watch'
+  'computed', 'watch', 'stores', 'transition', 'activated', 'deactivated'
 ]);
 
 

package/src/reactive.js

@@ -206,13 +206,13 @@ export function effect(fn) {
 export function batch(fn) {
   if (Signal._batching) {
     // Already inside a batch, just run
-    fn();
-    return;
+    return fn();
   }
   Signal._batching = true;
   Signal._batchQueue.clear();
+  let result;
   try {
-    fn();
+    result = fn();
   } finally {
     Signal._batching = false;
     // Collect all unique subscribers across all queued signals
@@ -231,6 +231,7 @@ export function batch(fn) {
       }
     }
   }
+  return result;
 }