native-document 1.0.22 → 1.0.24

package/dist/native-document.min.js

@@ -1 +1 @@
-var NativeDocument=function(t){"use strict";let n={};n={log(){},warn(){},error(){},disable(){}};var r=n;const o=function(){let e=0;const t=new Map;return{register(n){const r=++e;return t.set(r,new WeakRef(n)),r},unregister(e){t.delete(e)},getObservableById:e=>t.get(e)?.deref(),cleanup(){for(const[e,n]of t){const e=n.deref();e&&e.cleanup()}t.clear()},cleanObservables(e){if(t.size<e)return;let n=0;for(const[e,r]of t)r.deref()||(t.delete(e),n++);n>0&&r.log("Memory Auto Clean",`🧹 Cleaned ${n} orphaned observables`)}}}();class i extends Error{constructor(e,t={}){super(e),this.name="NativeDocumentError",this.context=t,this.timestamp=(new Date).toISOString()}}function s(e,t){this.observable=e,this.checker=t,this.unSubscriptions=[]}function a(e){if(void 0===e)throw new i("ObservableItem requires an initial value");if(e instanceof a)throw new i("ObservableItem cannot be an Observable");this.$previousValue=e,this.$currentValue=e,this.$isCleanedUp=!1,this.$listeners=null,this.$watchers=null,this.$memoryId=o.register(this)}s.prototype.subscribe=function(e){const t=this.observable.subscribe(t=>{e&&e(this.checker(t))});return this.unSubscriptions.push(t),t},s.prototype.check=function(e){return this.observable.check(()=>e(this.val()))},s.prototype.val=function(){return this.checker&&this.checker(this.observable.val())},s.prototype.set=function(e){return this.observable.set(e)},s.prototype.trigger=function(){return this.observable.trigger()},s.prototype.cleanup=function(){return this.observable.cleanup()},Object.defineProperty(a.prototype,"$value",{get(){return this.$currentValue},set(e){this.set(e)},configurable:!0}),a.prototype.triggerListeners=function(e){const t=this.$listeners,n=this.$previousValue,r=this.$currentValue;if(e=e||{},t?.length)for(let o=0,i=t.length;o<i;o++)t[o](r,n,e)},a.prototype.triggerWatchers=function(){if(!this.$watchers)return;const e=this.$watchers,t=this.$previousValue,n=this.$currentValue;if(e.has(n)){e.get(n).forEach(e=>{e.ifTrue.called||(e.ifTrue.callback(),e.else.called=!1)})}if(e.has(t)){e.get(t).forEach(e=>{e.else.called||(e.else.callback(),e.ifTrue.called=!1)})}},a.prototype.trigger=function(e){this.triggerListeners(e),this.triggerWatchers()},a.prototype.set=function(e){const t="function"==typeof e?e(this.$currentValue):e;this.$currentValue!==t&&(this.$previousValue=this.$currentValue,this.$currentValue=t,this.trigger())},a.prototype.val=function(){return this.$currentValue},a.prototype.disconnectAll=function(){if(this.$listeners?.splice(0),this.$previousValue=null,this.$currentValue=null,this.$watchers)for(const[e,t]of this.$watchers){for(const e of t)e.ifTrue.callback=null,e.else.callback=null;t.clear()}this.$watchers?.clear(),this.$listeners=null,this.$watchers=null},a.prototype.cleanup=function(){o.unregister(this.$memoryId),this.disconnectAll(),this.$isCleanedUp=!0,delete this.$value},a.prototype.subscribe=function(e){if(this.$listeners=this.$listeners??[],this.$isCleanedUp)return r.warn("Observable subscription","⚠️ Attempted to subscribe to a cleaned up observable."),()=>{};if("function"!=typeof e)throw new i("Callback must be a function");return this.$listeners.push(e),()=>this.unsubscribe(e)},a.prototype.on=function(e,t,n){this.$watchers=this.$watchers??new Map;let r=this.$watchers.get(e);r||(r=new Set,this.$watchers.set(e,r));let o={ifTrue:{callback:t,called:!1},else:{callback:n,called:!1}};return r.add(o),()=>{r?.delete(o),0===r.size&&this.$watchers?.delete(e),r=null,o=null}},a.prototype.unsubscribe=function(e){const t=this.$listeners.indexOf(e);t>-1&&this.$listeners.splice(t,1)},a.prototype.check=function(e){return new s(this,e)},a.prototype.get=a.prototype.check,a.prototype.toString=function(){return"{{#ObItem::("+this.$memoryId+")}}"};const u=(e,t,n)=>{if(p.isFunction(n))return n(e,t);if(p.isObservable(e)){const r=e.val();return r&&n?r[n]:t}return p.isObject(e)?e[n]??t:e},l=function(e,t){return e.replace(new RegExp(`^[${t}]+|[${t}]+$`,"g"),"")},c={mounted:new WeakMap,mountedSupposedSize:0,unmounted:new WeakMap,unmountedSupposedSize:0,observer:null,checkMutation:function(e){for(const t of e){if(c.mountedSupposedSize>0)for(const e of t.addedNodes){const t=c.mounted.get(e);t&&(t.inDom=!0,t.mounted&&t.mounted(e))}if(c.unmountedSupposedSize>0)for(const e of t.removedNodes){const t=c.unmounted.get(e);t&&(t.inDom=!1,t.unmounted&&!0===t.unmounted(e)&&(t.disconnect(),e.nd?.remove()))}}},watch:function(e,t=!1){let n={inDom:t,mounted:null,unmounted:null,disconnect:()=>{c.mounted.delete(e),c.unmounted.delete(e),c.mountedSupposedSize--,c.unmountedSupposedSize--,n=null}};return{disconnect:n.disconnect,mounted:t=>{n.mounted=t,c.mounted.set(e,n),c.mountedSupposedSize++},unmounted:t=>{n.unmounted=t,c.unmounted.set(e,n),c.unmountedSupposedSize++}}}};c.observer=new MutationObserver(c.checkMutation),c.observer.observe(document.body,{childList:!0,subtree:!0});const d=["Click","DblClick","MouseDown","MouseEnter","MouseLeave","MouseMove","MouseOut","MouseOver","MouseUp","Wheel","KeyDown","KeyPress","KeyUp","Blur","Change","Focus","Input","Invalid","Reset","Search","Select","Submit","Drag","DragEnd","DragEnter","DragLeave","DragOver","DragStart","Drop","AfterPrint","BeforePrint","BeforeUnload","Error","HashChange","Load","Offline","Online","PageHide","PageShow","Resize","Scroll","Unload","Abort","CanPlay","CanPlayThrough","DurationChange","Emptied","Ended","LoadedData","LoadedMetadata","LoadStart","Pause","Play","Playing","Progress","RateChange","Seeked","Seeking","Stalled","Suspend","TimeUpdate","VolumeChange","Waiting"];function h(e){this.$element=e,this.$observer=null}for(const e of d){const t=e.toLowerCase();h.prototype["on"+e]=function(e){return this.$element.addEventListener(t,e),this},h.prototype["onPrevent"+e]=function(e){return this.$element.addEventListener(t,function(t){t.preventDefault(),e(t)}),this},h.prototype["onStop"+e]=function(e){return this.$element.addEventListener(t,function(t){t.stopPropagation(),e(t)}),this},h.prototype["onPreventStop"+e]=function(e){return this.$element.addEventListener(t,function(t){t.stopPropagation(),t.preventDefault(),e(t)}),this}}h.prototype.ref=function(e,t){return e[t]=element,this},h.prototype.unmountChildren=function(){let e=this.$element;for(let t=0,n=e.children.length;t<n;t++){let n=e.children[t];n.$ndProx||n.nd?.remove(),n=null}return e=null,this},h.prototype.remove=function(){let e=this.$element;return e.nd.unmountChildren(),e.$ndProx=null,delete e.nd?.on?.prevent,delete e.nd?.on,delete e.nd,e=null,this},h.prototype.lifecycle=function(e){return this.$observer=this.$observer||c.watch(this.$element),e.mounted&&this.$observer.mounted(e.mounted),e.unmounted&&this.$observer.unmounted(e.unmounted),this},h.prototype.mounted=function(e){return this.lifecycle({mounted:e})},h.prototype.mounted=function(e){return this.lifecycle({unmounted:e})},h.prototype.htmlElement=function(){return this.$element},h.prototype.node=h.prototype.htmlElement;const p={isObservable:e=>e instanceof a||e instanceof s,isProxy:e=>e?.__isProxy__,isObservableChecker:e=>e instanceof s,isArray:e=>Array.isArray(e),isString:e=>"string"==typeof e,isNumber:e=>"number"==typeof e,isBoolean:e=>"boolean"==typeof e,isFunction:e=>"function"==typeof e,isAsyncFunction:e=>"function"==typeof e&&"AsyncFunction"===e.constructor.name,isObject:e=>"object"==typeof e,isJson:e=>"object"==typeof e&&null!==e&&"Object"===e.constructor.name&&!Array.isArray(e),isElement:e=>e instanceof HTMLElement||e instanceof DocumentFragment||e instanceof Text,isFragment:e=>e instanceof DocumentFragment,isStringOrObservable(e){return this.isString(e)||this.isObservable(e)},isValidChild(e){return null===e||this.isElement(e)||this.isObservable(e)||this.isNDElement(e)||["string","number","boolean"].includes(typeof e)},isNDElement:e=>e instanceof h,isValidChildren(e){Array.isArray(e)||(e=[e]);return 0===e.filter(e=>!this.isValidChild(e)).length},validateChildren(e){Array.isArray(e)||(e=[e]);const t=e.filter(e=>!this.isValidChild(e));if(t.length>0)throw new i(`Invalid children detected: ${t.map(e=>typeof e).join(", ")}`);return e},containsObservables:e=>!!e&&(p.isObject(e)&&Object.values(e).some(e=>p.isObservable(e))),containsObservableReference:e=>!(!e||"string"!=typeof e)&&/\{\{#ObItem::\([0-9]+\)\}\}/.test(e),validateAttributes(e){if(!e||"object"!=typeof e)return e;const t=[],n=Object.keys(e).filter(e=>t.includes(e));return n.length>0&&r.warn("Validator",`Reserved attributes found: ${n.join(", ")}`),e},validateEventCallback(e){if("function"!=typeof e)throw new i("Event callback must be a function")}};function f(e){const t=document.createDocumentFragment(),n=document.createComment("Anchor Start : "+e),o=document.createComment("/ Anchor End "+e);t.appendChild(n),t.appendChild(o),t.nativeInsertBefore=t.insertBefore,t.nativeAppendChild=t.appendChild;const i=function(e,n,r){e!==t?e.insertBefore(O.getChild(n),r):e.nativeInsertBefore(O.getChild(n),r)};return t.appendElement=function(e,n=null){o.parentNode!==t?o.parentNode?.insertBefore(e,n||o):o.parentNode.nativeInsertBefore(e,n||o)},t.appendChild=function(e,n=null){const s=o.parentNode;if(s){if(n=n??o,p.isArray(e)){const r=document.createDocumentFragment();for(let t=0,n=e.length;t<n;t++)r.appendChild(O.getChild(e[t]));return i(s,r,n),t}i(s,e,n)}else r.error("Anchor","Anchor : parent not found",e)},t.removeChildren=function(){const e=o.parentNode;if(e===t)return;if(e.firstChild===n&&e.lastChild===o)return void e.replaceChildren(n,o);let r,i=n.nextSibling;const s=document.createDocumentFragment();for(;i&&i!==o;)r=i.nextSibling,s.append(i),i=r;s.replaceChildren()},t.remove=function(){if(o.parentNode===t)return;let e,r=n.nextSibling;for(;r!==o;)e=r.nextSibling,t.nativeAppendChild(r),r=e},t.removeWithAnchors=function(){t.removeChildren(),n.remove(),o.remove()},t.replaceContent=function(e){const r=o.parentNode;r&&(r.firstChild!==n||r.lastChild!==o?(t.removeChildren(),r.insertBefore(e,o)):r.replaceChildren(n,e,o))},t.insertBefore=function(e,n=null){t.appendChild(e,n)},t.clear=function(){t.remove()},t.endElement=function(){return o},t.startElement=function(){return n},t}const m=["checked","selected","disabled","readonly","required","autofocus","multiple","autocomplete","hidden","contenteditable","spellcheck","translate","draggable","async","defer","autoplay","controls","loop","muted","download","reversed","open","default","formnovalidate","novalidate","scoped","itemscope","allowfullscreen","allowpaymentrequest","playsinline"];function b(e){return new a(e)}function g(e,t){for(let n in t){const r=t[n];p.isObservable(r)?(e.classList.toggle(n,r.val()),r.subscribe(t=>e.classList.toggle(n,t))):e.classList.toggle(n,r)}}function v(e,t){for(let n in t){const r=t[n];p.isObservable(r)?(e.style[n]=r.val(),r.subscribe(t=>{e.style[n]=t})):e.style[n]=r}}function y(e,t,n){const r=p.isObservable(n)?n.val():n;p.isBoolean(r)?e[t]=r:e[t]=r===e.value,p.isObservable(n)&&(["checked"].includes(t)&&e.addEventListener("input",()=>{p.isBoolean(r)?n.set(e[t]):n.set(e.value)}),n.subscribe(n=>{p.isBoolean(n)?e[t]=n:e[t]=n===e.value}))}function w(e,t,n){const r=n=>{"value"!==t?e.setAttribute(t,n):e.value=n};r(n.val()),n.subscribe(r),"value"===t&&e.addEventListener("input",()=>n.set(e.value))}b.getById=function(e){const t=o.getObservableById(parseInt(e));if(!t)throw new i("Observable.getById : No observable found with id "+e);return t},b.cleanup=function(e){e.cleanup()},b.autoCleanup=function(e=!1,t={}){if(!e)return;const{interval:n=6e4,threshold:r=100}=t;window.addEventListener("beforeunload",()=>{o.cleanup()}),setInterval(()=>o.cleanObservables(r),n)};const $=new Map;let C=null;const O={createTextNode:()=>(C||(C=document.createTextNode("")),C.cloneNode()),createObservableNode(e,t){const n=O.createTextNode();return t.subscribe(e=>n.nodeValue=String(e)),n.nodeValue=t.val(),e&&e.appendChild(n),n},createStaticTextNode(e,t){let n=O.createTextNode();return n.nodeValue=String(t),e&&e.appendChild(n),n},createElement(e){if(e){if($.has(e))return $.get(e).cloneNode();const t=document.createElement(e);return $.set(e,t),t.cloneNode()}return new f("Fragment")},processChildren(e,t){if(null===e)return;const n=Array.isArray(e)?e:[e];for(let e=0,r=n.length;e<r;e++){let r=this.getChild(n[e]);null!==r&&t.appendChild(r)}},getChild(e){if(null===e)return null;if(p.isString(e)&&p.isFunction(e.resolveObservableTemplate)&&(e=e.resolveObservableTemplate()),p.isString(e))return O.createStaticTextNode(null,e);if(p.isObservable(e))return O.createObservableNode(null,e);if(p.isArray(e)){const t=document.createDocumentFragment();for(let n=0,r=e.length;n<r;n++)t.appendChild(this.getChild(e[n]));return t}return p.isFunction(e)?this.getChild(e()):p.isElement(e)?e:p.isNDElement(e)?e.$element:O.createStaticTextNode(null,e)},processAttributes(e,t){p.isFragment(e)||t&&function(e,t){if(p.validateAttributes(t),!p.isObject(t))throw new i("Attributes must be an object");for(let n in t){const r=n.toLowerCase();let o=t[r];if(p.isString(o)&&p.isFunction(o.resolveObservableTemplate)&&(o=o.resolveObservableTemplate(),p.isArray(o))){const e=o.filter(e=>p.isObservable(e));o=b.computed(()=>o.map(e=>p.isObservable(e)?e.val():e).join(" ")||" ",e)}m.includes(r)?y(e,r,o):p.isObservable(o)?w(e,r,o):"class"===r&&p.isJson(o)?g(e,o):"style"===r&&p.isJson(o)?v(e,o):e.setAttribute(r,o)}}(e,t)},setup:(e,t,n)=>e};function S(e,t){const n=e.toLowerCase();return function(e,o=null){try{if(!p.isJson(e)){const t=o;o=e,e=t}const r=O.createElement(n),i="function"==typeof t?t(r):r;return O.processAttributes(i,e),O.processChildren(o,i),O.setup(i,e,t)}catch(e){r.error("ElementCreation",`Error creating ${n}`,e)}}}Object.defineProperty(HTMLElement.prototype,"nd",{get(){return this.$nd||(this.$nd=new h(this),this.$nd.nd=this.$nd),this.$nd}});class E extends Error{constructor(e,t){super(`${e}\n\n${t.join("\n")}\n\n`)}}const k={string:e=>({name:e,type:"string",validate:e=>p.isString(e)}),number:e=>({name:e,type:"number",validate:e=>p.isNumber(e)}),boolean:e=>({name:e,type:"boolean",validate:e=>p.isBoolean(e)}),observable:e=>({name:e,type:"observable",validate:e=>p.isObservable(e)}),element:e=>({name:e,type:"element",validate:e=>p.isElement(e)}),function:e=>({name:e,type:"function",validate:e=>p.isFunction(e)}),object:e=>({name:e,type:"object",validate:e=>p.isObject(e)}),objectNotNull:e=>({name:e,type:"object",validate:e=>p.isObject(e)&&null!==e}),children:e=>({name:e,type:"children",validate:e=>p.validateChildren(e)}),attributes:e=>({name:e,type:"attributes",validate:e=>p.validateAttributes(e)}),optional:e=>({...e,optional:!0}),oneOf:(e,...t)=>({name:e,type:"oneOf",types:t,validate:e=>t.some(t=>t.validate(e))})},A=(e,t,n="Function")=>{if(!p.isArray(t))throw new i("withValidation : argSchema must be an array");return function(...r){return((e,t,n="Function")=>{if(!t)return;const r=[],o=t.filter(e=>!e.optional).length;if(e.length<o&&r.push(`${n}: Expected at least ${o} arguments, got ${e.length}`),t.forEach((t,o)=>{const i=o+1,s=e[o];if(void 0!==s){if(!t.validate(s)){const e=s?.constructor?.name||typeof s;r.push(`${n}: Invalid argument '${t.name}' at position ${i}, expected ${t.type}, got ${e}`)}}else t.optional||r.push(`${n}: Missing required argument '${t.name}' at position ${i}`)}),r.length>0)throw new E("Argument validation failed",r)})(r,t,e.name||n),e.apply(this,r)}};Function.prototype.args=function(...e){return A(this,e)},Function.prototype.errorBoundary=function(e){return(...t)=>{try{return this.apply(this,t)}catch(t){return e(t)}}},String.prototype.use=function(e){const t=this;return b.computed(()=>t.replace(/\$\{(.*?)}/g,(t,n)=>{const r=e[n];return p.isObservable(r)?r.val():r}),Object.values(e))},String.prototype.resolveObservableTemplate=function(){return p.containsObservableReference(this)?this.split(/(\{\{#ObItem::\([0-9]+\)\}\})/g).filter(Boolean).map(e=>{if(!p.containsObservableReference(e))return e;const[t,n]=e.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);return b.getById(n)}):this.valueOf()};const I=["push","pop","shift","unshift","reverse","sort","splice"];b.array=function(e){if(!Array.isArray(e))throw new i("Observable.array : target must be an array");const t=b(e);I.forEach(e=>{t[e]=function(...n){const r=t.val()[e](...n);return t.trigger({action:e,args:n,result:r}),r}}),t.clear=function(){return t.$value.length=0,t.trigger({action:"clear"}),!0},t.merge=function(e){t.$value=[...t.$value,...e]},t.populateAndRender=function(e,n){t.trigger({action:"populate",args:[t.$value,e,n]})},t.remove=function(e){const n=t.$value.splice(e,1);return 0===n.length?[]:(t.trigger({action:"remove",args:[e],result:n[0]}),n)},t.swap=function(e,n){const r=t.$value,o=r.length;if(o<e||o<n)return!1;if(n<e){const t=e;e=n,n=t}const i=r[e],s=r[n];return r[e]=s,r[n]=i,t.trigger({action:"swap",args:[e,n],result:[i,s]}),!0},t.length=function(){return t.$value.length};return["map","filter","reduce","some","every","find","findIndex","concat"].forEach(e=>{t[e]=function(...n){return t.val()[e](...n)}}),t},b.batch=function(e){const t=b(0),n=function(){if(p.isAsyncFunction(e))return e(...arguments).then(()=>{t.trigger()}).catch(e=>{throw e});e(...arguments),t.trigger()};return n.$observer=t,n},b.init=function(e){const t={};for(const n in e){const r=e[n];p.isJson(r)?t[n]=b.init(r):p.isArray(r)?t[n]=b.array(r):t[n]=b(r)}const n=function(){};return new Proxy(t,{get:(e,r)=>"__isProxy__"===r||("$value"===r?function(){const e={};for(const n in t){const r=t[n];p.isObservable(r)?e[n]=r.val():p.isProxy(r)?e[n]=r.$value:e[n]=r}return e}():"$clone"===r?n:void 0!==e[r]?e[r]:void 0),set(e,t,n){void 0!==e[t]&&e[t].set(n)}})},b.value=function(e){if(p.isObservable(e))return e.val();if(p.isProxy(e))return e.$value;if(p.isArray(e)){const t=[];return e.forEach(e=>{t.push(b.value(e))}),t}return e},b.update=function(e,t){for(const n in t){const r=e[n],o=t[n];if(p.isObservable(r)){if(p.isArray(o)){b.update(r,o);continue}r.set(o)}else p.isProxy(r)?b.update(r,o):e[n]=o}},b.object=b.init,b.json=b.init,b.computed=function(e,t=[]){const n=new a(e()),r=()=>n.set(e());if(p.isFunction(t)){if(!p.isObservable(t.$observer))throw new i("Observable.computed : dependencies must be valid batch function");return t.$observer.subscribe(r),n}return t.forEach(e=>e.subscribe(r)),n};const F=function(){const e=new Map;return{use(t){const{observer:n,subscribers:r}=e.get(t),o=b(n.val()),i=n.subscribe(e=>o.set(e)),s=o.subscribe(e=>n.set(e));return o.destroy=()=>{i(),s(),o.cleanup()},r.add(o),o},follow(e){return this.use(e)},create(t,n){const r=b(n);return e.set(t,{observer:r,subscribers:new Set}),r},get(t){const n=e.get(t);return n?n.observer:null},getWithSubscribers:t=>e.get(t),delete(t){const n=e.get(t);n&&(n.observer.cleanup(),n.subscribers.forEach(e=>e.destroy()),n.observer.clear())}}}();const x=function(e,t,n=null){if(!p.isObservable(e))return r.warn("ShowIf","ShowIf : condition must be an Observable / "+n,e);const o=new f("Show if : "+(n||""));let i=null;const s=()=>i||(i=O.getChild(t),i);return e.val()&&o.appendChild(s()),e.subscribe(e=>{e?o.appendChild(s()):o.remove()}),o},D=function(e,t,n=!0){if(!p.isObservable(e))throw new i("Toggle : condition must be an Observable");const r=new f,o=new Map,s=function(e){if(n&&o.has(e))return o.get(e);let r=t[e];return r?(r=O.getChild(r),n&&o.set(e,r),r):null},a=e.val(),u=s(a);return u&&r.appendChild(u),e.subscribe(e=>{const t=s(e);r.remove(),t&&r.appendChild(t)}),r},R=function(e,t,n){if(!p.isObservable(e))throw new i("Toggle : condition must be an Observable");return D(e,{true:t,false:n})},T=S("div"),N=S("span"),L=S("label"),P=S("p"),q=P,B=S("strong"),M=S("h1"),j=S("h2"),V=S("h3"),H=S("h4"),W=S("h5"),z=S("h6"),_=S("br"),U=S("a"),J=S("pre"),K=S("code"),Q=S("blockquote"),G=S("hr"),X=S("em"),Y=S("small"),Z=S("mark"),ee=S("del"),te=S("ins"),ne=S("sub"),re=S("sup"),oe=S("abbr"),ie=S("cite"),se=S("q"),ae=S("dl"),ue=S("dt"),le=S("dd"),ce=S("form",function(e){return e.submit=function(t){return"function"==typeof t?(e.onSubmit(e=>{e.preventDefault(),t(e)}),e):(this.setAttribute("action",t),e)},e.multipartFormData=function(){return this.setAttribute("enctype","multipart/form-data"),e},e.post=function(t){return this.setAttribute("method","post"),this.setAttribute("action",t),e},e.get=function(e){this.setAttribute("method","get"),this.setAttribute("action",e)},e}),de=S("input"),he=S("textarea"),pe=he,fe=S("select"),me=S("fieldset"),be=S("option"),ge=S("legend"),ve=S("datalist"),ye=S("output"),we=S("progress"),$e=S("meter"),Ce=S("button"),Oe=S("main"),Se=S("section"),Ee=S("article"),ke=S("aside"),Ae=S("nav"),Ie=S("figure"),Fe=S("figcaption"),xe=S("header"),De=S("footer"),Re=S("img"),Te=function(e,t){return Re({src:e,...t})},Ne=S("details"),Le=S("summary"),Pe=S("dialog"),qe=S("menu"),Be=S("ol"),Me=S("ul"),je=S("li"),Ve=je,He=Be,We=Me,ze=S("audio"),_e=S("video"),Ue=S("source"),Je=S("track"),Ke=S("canvas"),Qe=S("svg"),Ge=S("time"),Xe=S("data"),Ye=S("address"),Ze=S("kbd"),et=S("samp"),tt=S("var"),nt=S("wbr"),rt=S("caption"),ot=S("table"),it=S("thead"),st=S("tfoot"),at=S("tbody"),ut=S("tr"),lt=ut,ct=S("th"),dt=ct,ht=ct,pt=S("td"),ft=pt,mt=S("");var bt=Object.freeze({__proto__:null,Abbr:oe,Address:Ye,Anchor:f,Article:Ee,Aside:ke,AsyncImg:function(e,t,n,r){const o=Te(t||e,n),s=new Image;return s.onload=()=>{p.isFunction(r)&&r(null,o),o.src=e},s.onerror=()=>{p.isFunction(r)&&r(new i("Image not found"))},p.isObservable(e)&&e.subscribe(e=>{s.src=e}),s.src=e,o},Audio:ze,BaseImage:Re,Blockquote:Q,Br:_,Button:Ce,Canvas:Ke,Caption:rt,Checkbox:e=>de({type:"checkbox",...e}),Cite:ie,Code:K,ColorInput:e=>de({type:"color",...e}),Data:Xe,Datalist:ve,DateInput:e=>de({type:"date",...e}),DateTimeInput:e=>de({type:"datetime-local",...e}),Dd:le,Del:ee,Details:Ne,Dialog:Pe,Div:T,Dl:ae,Dt:ue,Em:X,EmailInput:e=>de({type:"email",...e}),FieldSet:me,FigCaption:Fe,Figure:Ie,FileInput:e=>de({type:"file",...e}),Footer:De,ForEach:function(e,t,n){const o=new f("ForEach"),i=o.endElement();o.startElement();let s=new Map,a=null;const l=new Set,c=e=>{for(const[t,n]of s.entries()){if(l.has(t))continue;const r=n.child?.deref();e&&r&&e.removeChild(r),n.indexObserver?.cleanup(),n.child=null,n.indexObserver=null,s.delete(n.keyId),a&&a.delete(n.keyId)}},d=(e,o)=>{const i=u(e,o,n);if(s.has(i)){const e=s.get(i);if(e.indexObserver?.set(o),e.isNew=!1,e.child?.deref())return i;s.delete(i)}try{const n=t.length>=2?b(o):null;let r=O.getChild(t(e,n));s.set(i,{keyId:i,isNew:!0,child:new WeakRef(r),indexObserver:n})}catch(e){throw r.error("ForEach",`Error creating element for key ${i}`,e),e}return i},h=()=>{const t=i.parentNode;if(!t)return;const n=p.isObservable(e)?e.val():e;if(l.clear(),Array.isArray(n))for(let e=0,t=n.length;e<t;e++){const t=d(n[e],e);l.add(t)}else for(const e in n){const t=d(n[e],e);l.add(t)}if(0===l.size)return o.removeChildren(),c(),void a?.clear();c(t),a&&0!==a.size?(()=>{let e=document.createDocumentFragment();const t=Array.from(l);Array.from(a);for(const n in t){const r=t[n],o=s.get(r);if(!o)continue;const i=o.child.deref();i&&e.appendChild(i)}o.replaceContent(e)})():(e=>{const t=document.createDocumentFragment();for(const e of l){const n=s.get(e);if(!n)continue;const r=n.child?.deref();r&&t.appendChild(r)}e.insertBefore(t,i)})(t),a?.clear(),a=new Set([...l])};return h(),p.isObservable(e)&&e.subscribe(h),o},ForEachArray:function(e,t,n,o={}){const i=new f("ForEach Array"),s=i.endElement(),a=i.startElement();let l=new Map,c=new WeakMap,d=0;const h=new WeakMap,m=()=>{i.removeChildren(),y(),d=0},g=(e,t)=>h.has(e)?h.get(e):u(e,t,n),v=(e,t=!0)=>{if(!e)return;const n=e.child?.deref();e.indexObserver?.deref()?.cleanup(),e.child=null,e.indexObserver=null,c.delete(e.item),h.delete(e.item),e.item=null,t&&(n?.remove(),l.delete(e.keyId))},y=()=>{for(const[e,t]of l.entries())v(t,!1);l.clear()},w=(e,n)=>{const o=g(e,n);if(l.has(o)){const e=l.get(o);e.indexObserver?.deref()?.set(n),e.isNew=!1;const t=e.child?.deref();if(t)return t;l.delete(o)}try{const r=t.length>=2?b(n):null;let i=O.getChild(t(e,r));return l.set(o,{keyId:o,isNew:!0,item:e,child:new WeakRef(i),indexObserver:r?new WeakRef(r):null}),h.set(e,o),p.isObject(e)&&c.set(e,i),i}catch(e){throw r.error("ForEach",`Error creating element for key ${o}`,e),e}},$=function(e,t){const n=l.get(e);if(!n)return null;const r=n.child?.deref();if(!r)return null;t?t.appendChild(r):r.remove()},C={toFragment(e,t=0){const n=document.createDocumentFragment();for(let t=0,r=e.length;t<r;t++)n.append(w(e[t],d)),d++;return n},add(e,t=0){setTimeout(()=>{i.appendElement(C.toFragment(e))},t)},replace(e){m(),C.add(e)},reOrder(e){let t=null;const n=document.createDocumentFragment();for(const r of e)t=c.get(r),t&&n.appendChild(t);t=null,i.appendElement(n,s)},removeOne(e,t){let n=c.get(e);n&&(n.remove(),c.delete(e),((e,t=!0)=>{v(l.get(e),t)})(g(e,t))),n=null},clear:m,merge(e){C.add(e,0)},push(e){let t=0;o.pushDelay&&(t=o.pushDelay(e)??0),C.add(e,t)},populate([e,t,n]){const r=document.createDocumentFragment();for(let o=0;o<t;o++){const t=n(o);e.push(t),r.append(w(t,o)),d++}i.appendChild(r),r.replaceChildren()},unshift(e){i.insertBefore(C.toFragment(e),a.nextSibling)},splice(e,t){const[n,r,...o]=e;let a=null;const u=document.createDocumentFragment();if(t.length>0){let e=g(t[0],n);if(1===t.length)$(e,u);else if(t.length>1){const r=function(e){const t=l.get(e);if(!t)return null;const n=t.child?.deref();return n||(v(t,!1),null)}(e);a=r?.previousSibling;for(let e=0;e<t.length;e++){const r=g(t[e],n+e);$(r,u)}}}else a=s;u.replaceChildren(),o&&o.length&&a&&i.insertBefore(C.toFragment(o),a.nextSibling)},reverse(e,t){C.reOrder(t)},sort(e,t){C.reOrder(t)},remove(e,t){C.removeOne(t)},pop(e,t){C.removeOne(t)},shift(e,t){C.removeOne(t)},swap(e,t){const n=s.parentNode;let r=c.get(t[0]),o=c.get(t[1]);if(!r||!o)return;const i=o.nextSibling;n.insertBefore(o,r),n.insertBefore(r,i),r=null,o=null}},S=(e,n,r)=>{if("populate"===r?.action)C.populate(r.args,r.result);else{if(console.log(d),"clear"===r.action||!e.length){if(0===d)return;m()}if(r?.action)C[r.action]&&C[r.action](r.args,r.result);else{if(0===d)return void C.add(e);C.replace(e)}}console.log(e),((e,n=0)=>{if(t.length<2)return;let r=n;for(let t=n,o=e?.length;t<o;t++){const n=l.get(g(e[t],t));n&&(n.indexObserver?.deref()?.set(r),r++)}})(e,0)};return S(e.val(),0,{action:null}),p.isObservable(e)&&e.subscribe(S),i},Form:ce,Fragment:mt,H1:M,H2:j,H3:V,H4:H,H5:W,H6:z,Header:xe,HiddenInput:e=>de({type:"hidden",...e}),HideIf:function(e,t,n){const r=b(!e.val());return e.subscribe(e=>r.set(!e)),x(r,t,n)},HideIfNot:function(e,t,n){return x(e,t,n)},Hr:G,Img:Te,Input:de,Ins:te,Kbd:Ze,Label:L,LazyImg:function(e,t){return Te(e,{...t,loading:"lazy"})},Legend:ge,Li:Ve,Link:U,ListItem:je,Main:Oe,Mark:Z,Match:D,Menu:qe,Meter:$e,MonthInput:e=>de({type:"month",...e}),NativeDocumentFragment:f,Nav:Ae,NumberInput:e=>de({type:"number",...e}),Ol:He,Option:be,OrderedList:Be,Output:ye,P:P,Paragraph:q,PasswordInput:e=>de({type:"password",...e}),Pre:J,Progress:we,Quote:se,Radio:e=>de({type:"radio",...e}),RangeInput:e=>de({type:"range",...e}),ReadonlyInput:e=>de({readonly:!0,...e}),Samp:et,SearchInput:e=>de({type:"search",...e}),Section:Se,Select:fe,ShowIf:x,SimpleButton:(e,t)=>Ce(e,{type:"button",...t}),Small:Y,Source:Ue,Span:N,Strong:B,Sub:ne,SubmitButton:(e,t)=>Ce(e,{type:"submit",...t}),Summary:Le,Sup:re,Svg:Qe,Switch:R,TBody:at,TBodyCell:ft,TFoot:st,TFootCell:ht,THead:it,THeadCell:dt,TRow:lt,Table:ot,Td:pt,TelInput:e=>de({type:"tel",...e}),TextArea:he,TextInput:pe,Th:ct,Time:Ge,TimeInput:e=>de({type:"time",...e}),Tr:ut,Track:Je,Ul:We,UnorderedList:Me,UrlInput:e=>de({type:"url",...e}),Var:tt,Video:_e,Wbr:nt,WeekInput:e=>de({type:"week",...e}),When:function(e){if(!p.isObservable(e))throw new i("When : condition must be an Observable");let t=null,n=null;return{show(e){return t=e,this},otherwise:r=>(n=r,R(e,t,n))}}});const gt={};function vt(e,t,n={}){e="/"+l(e,"/");let r=null,o=n.name||null;const i=n.middlewares||[],s=n.shouldRebuild||!1,a=n.with||{},u={},c=[],d=e=>{if(!e)return null;const[t,n]=e.split(":");let r=a[t];return!r&&n&&(r=gt[n]),r||(r="[^/]+"),r=r.replace("(","(?:"),{name:t,pattern:`(${r})`}},h=()=>{if(r)return r;const t=e.replace(/\{(.*?)}/gi,(e,t)=>{const n=d(t);return n&&n.pattern?(u[n.name]=n.pattern,c.push(n.name),n.pattern):e});return r=new RegExp("^"+t+"$"),r};this.name=()=>o,this.component=()=>t,this.middlewares=()=>i,this.shouldRebuild=()=>s,this.path=()=>e,this.match=function(e){e="/"+l(e,"/");if(!h().exec(e))return!1;const t={};return h().exec(e).forEach((e,n)=>{if(n<1)return;const r=c[n-1];t[r]=e}),t},this.url=function(t){const n=e.replace(/\{(.*?)}/gi,(e,n)=>{const r=d(n);if(t.params&&t.params[r.name])return t.params[r.name];throw new Error(`Missing parameter '${r.name}'`)}),r="object"==typeof t.query?new URLSearchParams(t.query).toString():null;return(t.basePath?t.basePath:"")+(r?`${n}?${r}`:n)}}class yt extends Error{constructor(e,t){super(e),this.context=t}}const wt=(e,t)=>{const n=[];return e.forEach(e=>{n.push(l(e.suffix,"/"))}),n.push(l(t,"/")),n.join("/")},$t=(e,t)=>{const n=[];return e.forEach(e=>{e.options.middlewares&&n.push(...e.options.middlewares)}),t&&n.push(...t),n},Ct=(e,t)=>{const n=[];return e.forEach(e=>{e.options?.name&&n.push(e.options.name)}),t&&n.push(t),n.join(".")};function Ot(){const e=[];let t=0;const n=n=>{const o=t+n;if(!e[o])return;t=o;const{route:i,params:s,query:a,path:u}=e[o];r(u)},r=e=>{window.location.replace(`${window.location.pathname}${window.location.search}#${e}`)},o=()=>window.location.hash.slice(1);this.push=function(n){const{route:i,params:s,query:a,path:u}=this.resolve(n);u!==o()&&(e.splice(t+1),e.push({route:i,params:s,query:a,path:u}),t++,r(u))},this.replace=function(n){const{route:r,params:i,query:s,path:a}=this.resolve(n);a!==o()&&(e[t]={route:r,params:i,query:s,path:a})},this.forward=function(){return t<e.length-1&&n(1)},this.back=function(){return t>0&&n(-1)},this.init=function(n){window.addEventListener("hashchange",()=>{const{route:e,params:t,query:n,path:r}=this.resolve(o());this.handleRouteChange(e,t,n,r)});const{route:r,params:i,query:s,path:a}=this.resolve(n||o());e.push({route:r,params:i,query:s,path:a}),t=0,this.handleRouteChange(r,i,s,a)}}function St(){this.push=function(e){try{const{route:t,path:n,params:r,query:o}=this.resolve(e);if(window.history.state&&window.history.state.path===n)return;window.history.pushState({name:t.name(),params:r,path:n},t.name()||n,n),this.handleRouteChange(t,r,o,n)}catch(e){r.error("HistoryRouter","Error in pushState",e)}},this.replace=function(e){const{route:t,path:n,params:o}=this.resolve(e);try{window.history.replaceState({name:t.name(),params:o,path:n},t.name()||n,n),this.handleRouteChange(t,o,{},n)}catch(e){r.error("HistoryRouter","Error in replaceState",e)}},this.forward=function(){window.history.forward()},this.back=function(){window.history.back()},this.init=function(e){window.addEventListener("popstate",e=>{try{if(!e.state||!e.state.path)return;const t=e.state.path,{route:n,params:r,query:o,path:i}=this.resolve(t);if(!n)return;this.handleRouteChange(n,r,o,i)}catch(e){r.error("HistoryRouter","Error in popstate event",e)}});const{route:t,params:n,query:o,path:i}=this.resolve(e||window.location.pathname+window.location.search);this.handleRouteChange(t,n,o,i)}}function Et(){const e=[];let t=0;const n=n=>{const r=t+n;if(!e[r])return;t=r;const{route:o,params:i,query:s,path:a}=e[r];this.handleRouteChange(o,i,s,a)};this.push=function(n){const{route:r,params:o,query:i,path:s}=this.resolve(n);e[t]&&e[t].path===s||(e.splice(t+1),e.push({route:r,params:o,query:i,path:s}),t++,this.handleRouteChange(r,o,i,s))},this.replace=function(n){const{route:r,params:o,query:i,path:s}=this.resolve(n);e[t]={route:r,params:o,query:i,path:s},this.handleRouteChange(r,o,i,s)},this.forward=function(){return t<e.length-1&&n(1)},this.back=function(){return t>0&&n(-1)},this.init=function(n){const r=n||window.location.pathname+window.location.search,{route:o,params:i,query:s,path:a}=this.resolve(r);e.push({route:o,params:i,query:s,path:a}),t=0,this.handleRouteChange(o,i,s,a)}}const kt="default";function At(e={}){const t=[],n={},o=[],i=[],s={route:null,params:null,query:null,path:null,hash:null};if("hash"===e.mode)Ot.apply(this,[]);else if("history"===e.mode)St.apply(this,[]);else{if("memory"!==e.mode)throw new yt("Invalid router mode "+e.mode);Et.apply(this,[])}const a=function(e,t){for(const n of i)try{n(e),t&&t(e)}catch(e){r.warn("Route Listener","Error in listener:",e)}};this.routes=()=>[...t],this.currentState=()=>({...s}),this.add=function(e,r,i){const s=new vt(wt(o,e),r,{...i,middlewares:$t(o,i?.middlewares||[]),name:i?.name?Ct(o,i.name):null});return t.push(s),s.name()&&(n[s.name()]=s),this},this.group=function(e,t,n){if(!p.isFunction(n))throw new yt("Callback must be a function");return o.push({suffix:e,options:t}),n(),o.pop(),this},this.generateUrl=function(e,t={},r={}){const o=n[e];if(!o)throw new yt(`Route not found for name: ${e}`);return o.url({params:t,query:r})},this.resolve=function(e){if(p.isJson(e)){const t=n[e.name];if(!t)throw new yt(`Route not found for name: ${e.name}`);return{route:t,params:e.params,query:e.query,path:t.url({...e})}}const[r,o]=e.split("?"),i="/"+l(r,"/");let s,a=null;for(const e of t)if(s=e.match(i),s){a=e;break}if(!a)throw new yt(`Route not found for url: ${r}`);const u={};if(o){const e=new URLSearchParams(o).entries();for(const[t,n]of e)u[t]=n}return{route:a,params:s,query:u,path:e}},this.subscribe=function(e){if(!p.isFunction(e))throw new yt("Listener must be a function");return i.push(e),()=>{i.splice(i.indexOf(e),1)}},this.handleRouteChange=function(e,t,n,r){s.route=e,s.params=t,s.query=n,s.path=r;const o=[...e.middlewares(),a];let i=0;const u={...s},l=e=>{if(i++,!(i>=o.length))return o[i](e||u,l)};return o[i](u,l)}}function It(e,t){const{to:n,href:r,...o}=e,i=n||r;if(p.isString(i)){const e=At.get();return U({...o,href:i},t).nd.onPreventClick(()=>{e.push(i)})}const s=i.router||kt,a=At.get(s);if(console.log(s),!a)throw new yt('Router not found "'+s+'" for link "'+i.name+'"');const u=a.generateUrl(i.name,i.params,i.query);return U({...o,href:u},t).nd.onPreventClick(()=>{a.push(u)})}At.routers={},At.create=function(t,n){if(!p.isFunction(n))throw r.error("Router","Callback must be a function",e),new yt("Callback must be a function");const o=new At(t);return At.routers[t.name||kt]=o,n(o),o.init(t.entry),o.mount=function(e){if(p.isString(e)){const t=document.querySelector(e);if(!t)throw new yt(`Container not found for selector: ${e}`);e=t}else if(!p.isElement(e))throw new yt("Container must be a string or an Element");return function(e,t){const n=new Map,r=function(e){t.innerHTML="",t.appendChild(e)},o=function(e){if(!e.route)return;const{route:t,params:o,query:i,path:s}=e;if(n.has(s)){const e=n.get(s);return void r(e)}const a=t.component()({params:o,query:i});n.set(s,a),r(a)};return e.subscribe(o),o(e.currentState()),t}(o,e)},o},At.get=function(e){const t=At.routers[e||kt];if(!t)throw new yt(`Router not found for name: ${e}`);return t},At.push=function(e,t=null){return At.get(t).push(e)},At.replace=function(e,t=null){return At.get(t).replace(e)},At.forward=function(e=null){return At.get(e).forward()},At.back=function(e=null){return At.get(e).back()},It.blank=function(e,t){return U({...e,target:"_blank"},t)};var Ft=Object.freeze({__proto__:null,Link:It,RouteParamPatterns:gt,Router:At});return t.ArgTypes=k,t.ElementCreator=O,t.HtmlElementWrapper=S,t.NDElement=h,t.Observable=b,t.Store=F,t.elements=bt,t.router=Ft,t.withValidation=A,t}({});
+var NativeDocument=function(t){"use strict";let n={};n={log(){},warn(){},error(){},disable(){}};var r=n;const o=function(){let e=0;const t=new Map;return{register(n){const r=++e;return t.set(r,new WeakRef(n)),r},unregister(e){t.delete(e)},getObservableById:e=>t.get(e)?.deref(),cleanup(){for(const[e,n]of t){const e=n.deref();e&&e.cleanup()}t.clear()},cleanObservables(e){if(t.size<e)return;let n=0;for(const[e,r]of t)r.deref()||(t.delete(e),n++);n>0&&r.log("Memory Auto Clean",`🧹 Cleaned ${n} orphaned observables`)}}}();class i extends Error{constructor(e,t={}){super(e),this.name="NativeDocumentError",this.context=t,this.timestamp=(new Date).toISOString()}}function s(e,t){this.observable=e,this.checker=t,this.unSubscriptions=[]}function a(e){this.$previousValue=e,this.$currentValue=e,this.$isCleanedUp=!1,this.$listeners=null,this.$watchers=null,this.$memoryId=null}s.prototype.__$isObservableChecker=!0,s.prototype.subscribe=function(e){const t=this.observable.subscribe(t=>{e&&e(this.checker(t))});return this.unSubscriptions.push(t),t},s.prototype.check=function(e){return this.observable.check(()=>e(this.val()))},s.prototype.val=function(){return this.checker&&this.checker(this.observable.val())},s.prototype.set=function(e){return this.observable.set(e)},s.prototype.trigger=function(){return this.observable.trigger()},s.prototype.cleanup=function(){return this.observable.cleanup()},Object.defineProperty(a.prototype,"$value",{get(){return this.$currentValue},set(e){this.set(e)},configurable:!0}),a.prototype.__$isObservable=!0;const u=function(){};a.prototype.triggerListeners=function(e){const t=this.$listeners,n=this.$previousValue,r=this.$currentValue;if(e=e||{},t?.length)for(let o=0,i=t.length;o<i;o++)t[o](r,n,e)},a.prototype.triggerWatchers=function(){if(!this.$watchers)return;const e=this.$watchers,t=this.$previousValue,n=this.$currentValue;e.has(n)&&e.get(n).forEach(e=>{e.set?e.set(!0):e(!0)}),e.has(t)&&e.get(t).forEach(e=>{e.set?e.set(!1):e(!1)})},a.prototype.triggerAll=function(e){this.triggerListeners(e),this.triggerWatchers()},a.prototype.assocTrigger=function(){this.$watchers?.size&&this.$listeners?.length?this.trigger=this.triggerAll:this.$listeners?.length?this.trigger=this.triggerListeners:this.$watchers?.size?this.trigger=this.triggerWatchers:this.trigger=u},a.prototype.trigger=u,a.prototype.set=function(e){const t="function"==typeof e?e(this.$currentValue):e;this.$currentValue!==t&&(this.$previousValue=this.$currentValue,this.$currentValue=t,this.trigger())},a.prototype.val=function(){return this.$currentValue},a.prototype.disconnectAll=function(){if(this.$listeners?.splice(0),this.$previousValue=null,this.$currentValue=null,this.$watchers)for(const[e,t]of this.$watchers)t.splice(0);this.$watchers?.clear(),this.$listeners=null,this.$watchers=null,this.trigger=u},a.prototype.cleanup=function(){o.unregister(this.$memoryId),this.disconnectAll(),this.$isCleanedUp=!0,delete this.$value},a.prototype.subscribe=function(e){if(this.$listeners=this.$listeners??[],this.$isCleanedUp)return r.warn("Observable subscription","⚠️ Attempted to subscribe to a cleaned up observable."),()=>{};if("function"!=typeof e)throw new i("Callback must be a function");return this.$listeners.push(e),this.assocTrigger(),()=>{this.unsubscribe(e),this.assocTrigger()}},a.prototype.on=function(e,t){this.$watchers=this.$watchers??new Map;let n=this.$watchers.get(e);return n||(n=[],this.$watchers.set(e,n)),n.push(t),this.assocTrigger(),()=>{const r=n.indexOf(t);n?.splice(r,1),0===n.size&&(this.$watchers?.delete(e),n=null),this.assocTrigger()}},a.prototype.unsubscribe=function(e){const t=this.$listeners.indexOf(e);t>-1&&this.$listeners.splice(t,1),this.assocTrigger()},a.prototype.check=function(e){return new s(this,e)},a.prototype.get=a.prototype.check,a.prototype.toString=function(){return this.$memoryId||o.register(this),"{{#ObItem::("+this.$memoryId+")}}"};const l=(e,t,n)=>{if(f.isFunction(n))return n(e,t);if(f.isObservable(e)){const r=e.val();return r&&n?r[n]:t}return f.isObject(e)?e[n]??t:e},c=function(e,t){return e.replace(new RegExp(`^[${t}]+|[${t}]+$`,"g"),"")},h={mounted:new WeakMap,mountedSupposedSize:0,unmounted:new WeakMap,unmountedSupposedSize:0,observer:null,checkMutation:function(e){for(const t of e){if(h.mountedSupposedSize>0)for(const e of t.addedNodes){const t=h.mounted.get(e);t&&(t.inDom=!0,t.mounted&&t.mounted(e))}if(h.unmountedSupposedSize>0)for(const e of t.removedNodes){const t=h.unmounted.get(e);t&&(t.inDom=!1,t.unmounted&&!0===t.unmounted(e)&&(t.disconnect(),e.nd?.remove()))}}},watch:function(e,t=!1){let n={inDom:t,mounted:null,unmounted:null,disconnect:()=>{h.mounted.delete(e),h.unmounted.delete(e),h.mountedSupposedSize--,h.unmountedSupposedSize--,n=null}};return{disconnect:n.disconnect,mounted:t=>{n.mounted=t,h.mounted.set(e,n),h.mountedSupposedSize++},unmounted:t=>{n.unmounted=t,h.unmounted.set(e,n),h.unmountedSupposedSize++}}}};h.observer=new MutationObserver(h.checkMutation),h.observer.observe(document.body,{childList:!0,subtree:!0});const d=["Click","DblClick","MouseDown","MouseEnter","MouseLeave","MouseMove","MouseOut","MouseOver","MouseUp","Wheel","KeyDown","KeyPress","KeyUp","Blur","Change","Focus","Input","Invalid","Reset","Search","Select","Submit","Drag","DragEnd","DragEnter","DragLeave","DragOver","DragStart","Drop","AfterPrint","BeforePrint","BeforeUnload","Error","HashChange","Load","Offline","Online","PageHide","PageShow","Resize","Scroll","Unload","Abort","CanPlay","CanPlayThrough","DurationChange","Emptied","Ended","LoadedData","LoadedMetadata","LoadStart","Pause","Play","Playing","Progress","RateChange","Seeked","Seeking","Stalled","Suspend","TimeUpdate","VolumeChange","Waiting"];function p(e){this.$element=e,this.$observer=null}p.prototype.__$isNDElement=!0;for(const e of d){const t=e.toLowerCase();p.prototype["on"+e]=function(e){return this.$element.addEventListener(t,e),this},p.prototype["onPrevent"+e]=function(e){return this.$element.addEventListener(t,function(t){t.preventDefault(),e(t)}),this},p.prototype["onStop"+e]=function(e){return this.$element.addEventListener(t,function(t){t.stopPropagation(),e(t)}),this},p.prototype["onPreventStop"+e]=function(e){return this.$element.addEventListener(t,function(t){t.stopPropagation(),t.preventDefault(),e(t)}),this}}p.prototype.ref=function(e,t){return e[t]=this.$element,this},p.prototype.unmountChildren=function(){let e=this.$element;for(let t=0,n=e.children.length;t<n;t++){let n=e.children[t];n.$ndProx||n.nd?.remove(),n=null}return e=null,this},p.prototype.remove=function(){let e=this.$element;return e.nd.unmountChildren(),e.$ndProx=null,delete e.nd?.on?.prevent,delete e.nd?.on,delete e.nd,e=null,this},p.prototype.lifecycle=function(e){return this.$observer=this.$observer||h.watch(this.$element),e.mounted&&this.$observer.mounted(e.mounted),e.unmounted&&this.$observer.unmounted(e.unmounted),this},p.prototype.mounted=function(e){return this.lifecycle({mounted:e})},p.prototype.unmounted=function(e){return this.lifecycle({unmounted:e})},p.prototype.htmlElement=function(){return this.$element},p.prototype.node=p.prototype.htmlElement;const f={isObservable:e=>e instanceof a||e instanceof s||e?.__$isObservable,isProxy:e=>e?.__isProxy__,isObservableChecker:e=>e instanceof s||e?.__$isObservableChecker,isArray:e=>Array.isArray(e),isString:e=>"string"==typeof e,isNumber:e=>"number"==typeof e,isBoolean:e=>"boolean"==typeof e,isFunction:e=>"function"==typeof e,isAsyncFunction:e=>"function"==typeof e&&"AsyncFunction"===e.constructor.name,isObject:e=>"object"==typeof e,isJson:e=>"object"==typeof e&&null!==e&&"Object"===e.constructor.name&&!Array.isArray(e),isElement:e=>e instanceof HTMLElement||e instanceof DocumentFragment||e instanceof Text,isFragment:e=>e instanceof DocumentFragment,isStringOrObservable(e){return this.isString(e)||this.isObservable(e)},isValidChild(e){return null===e||this.isElement(e)||this.isObservable(e)||this.isNDElement(e)||["string","number","boolean"].includes(typeof e)},isNDElement:e=>e instanceof p||e?.constructor?.__$isNDElement,isValidChildren(e){Array.isArray(e)||(e=[e]);return 0===e.filter(e=>!this.isValidChild(e)).length},validateChildren(e){Array.isArray(e)||(e=[e]);const t=e.filter(e=>!this.isValidChild(e));if(t.length>0)throw new i(`Invalid children detected: ${t.map(e=>typeof e).join(", ")}`);return e},containsObservables:e=>!!e&&(f.isObject(e)&&Object.values(e).some(e=>f.isObservable(e))),containsObservableReference:e=>!(!e||"string"!=typeof e)&&/\{\{#ObItem::\([0-9]+\)\}\}/.test(e),validateAttributes(e){if(!e||"object"!=typeof e)return e;const t=[],n=Object.keys(e).filter(e=>t.includes(e));return n.length>0&&r.warn("Validator",`Reserved attributes found: ${n.join(", ")}`),e},validateEventCallback(e){if("function"!=typeof e)throw new i("Event callback must be a function")}};function m(e){const t=document.createDocumentFragment(),n=document.createComment("Anchor Start : "+e),o=document.createComment("/ Anchor End "+e);t.appendChild(n),t.appendChild(o),t.nativeInsertBefore=t.insertBefore,t.nativeAppendChild=t.appendChild;const i=function(e,n,r){e!==t?e.insertBefore(S.getChild(n),r):e.nativeInsertBefore(S.getChild(n),r)};return t.appendElement=function(e,n=null){o.parentNode!==t?o.parentNode?.insertBefore(e,n||o):o.parentNode.nativeInsertBefore(e,n||o)},t.appendChild=function(e,n=null){const s=o.parentNode;if(s){if(n=n??o,f.isArray(e)){const r=document.createDocumentFragment();for(let t=0,n=e.length;t<n;t++)r.appendChild(S.getChild(e[t]));return i(s,r,n),t}i(s,e,n)}else r.error("Anchor","Anchor : parent not found",e)},t.removeChildren=function(){const e=o.parentNode;if(e===t)return;if(e.firstChild===n&&e.lastChild===o)return void e.replaceChildren(n,o);let r,i=n.nextSibling;const s=document.createDocumentFragment();for(;i&&i!==o;)r=i.nextSibling,s.append(i),i=r;s.replaceChildren()},t.remove=function(){if(o.parentNode===t)return;let e,r=n.nextSibling;for(;r!==o;)e=r.nextSibling,t.nativeAppendChild(r),r=e},t.removeWithAnchors=function(){t.removeChildren(),n.remove(),o.remove()},t.replaceContent=function(e){const r=o.parentNode;r&&(r.firstChild!==n||r.lastChild!==o?(t.removeChildren(),r.insertBefore(e,o)):r.replaceChildren(n,e,o))},t.insertBefore=function(e,n=null){t.appendChild(e,n)},t.clear=function(){t.remove()},t.endElement=function(){return o},t.startElement=function(){return n},t}const b=["checked","selected","disabled","readonly","required","autofocus","multiple","autocomplete","hidden","contenteditable","spellcheck","translate","draggable","async","defer","autoplay","controls","loop","muted","download","reversed","open","default","formnovalidate","novalidate","scoped","itemscope","allowfullscreen","allowpaymentrequest","playsinline"];function g(e){return new a(e)}function v(e,t){for(let n in t){const r=t[n];f.isObservable(r)?(e.classList.toggle(n,r.val()),r.subscribe(t=>e.classList.toggle(n,t))):e.classList.toggle(n,r)}}function y(e,t){for(let n in t){const r=t[n];f.isObservable(r)?(e.style[n]=r.val(),r.subscribe(t=>{e.style[n]=t})):e.style[n]=r}}function w(e,t,n){const r=f.isObservable(n)?n.val():n;f.isBoolean(r)?e[t]=r:e[t]=r===e.value,f.isObservable(n)&&(["checked"].includes(t)&&e.addEventListener("input",()=>{f.isBoolean(r)?n.set(e[t]):n.set(e.value)}),n.subscribe(n=>{f.isBoolean(n)?e[t]=n:e[t]=n===e.value}))}function $(e,t,n){const r=n=>{"value"!==t?e.setAttribute(t,n):e.value=n};r(n.val()),n.subscribe(r),"value"===t&&e.addEventListener("input",()=>n.set(e.value))}g.getById=function(e){const t=o.getObservableById(parseInt(e));if(!t)throw new i("Observable.getById : No observable found with id "+e);return t},g.cleanup=function(e){e.cleanup()},g.autoCleanup=function(e=!1,t={}){if(!e)return;const{interval:n=6e4,threshold:r=100}=t;window.addEventListener("beforeunload",()=>{o.cleanup()}),setInterval(()=>o.cleanObservables(r),n)};const C=new Map;let O=null;const S={createTextNode:()=>(O||(O=document.createTextNode("")),O.cloneNode()),createObservableNode(e,t){const n=S.createTextNode();return t.subscribe(e=>n.nodeValue=String(e)),n.nodeValue=t.val(),e&&e.appendChild(n),n},createStaticTextNode(e,t){let n=S.createTextNode();return n.nodeValue=String(t),e&&e.appendChild(n),n},createElement(e){if(e){if(C.has(e))return C.get(e).cloneNode();const t=document.createElement(e);return C.set(e,t),t.cloneNode()}return new m("Fragment")},processChildren(e,t){if(null===e)return;const n=Array.isArray(e)?e:[e];for(let e=0,r=n.length;e<r;e++){let r=this.getChild(n[e]);null!==r&&t.appendChild(r)}},getChild(e){if(null===e)return null;if(f.isString(e)&&f.isFunction(e.resolveObservableTemplate)&&(e=e.resolveObservableTemplate()),f.isString(e))return S.createStaticTextNode(null,e);if(f.isObservable(e))return S.createObservableNode(null,e);if(f.isArray(e)){const t=document.createDocumentFragment();for(let n=0,r=e.length;n<r;n++)t.appendChild(this.getChild(e[n]));return t}return f.isFunction(e)?this.getChild(e()):f.isElement(e)?e:f.isNDElement(e)?e.$element??e.$build?.()??null:S.createStaticTextNode(null,e)},processAttributes(e,t){f.isFragment(e)||t&&function(e,t){if(f.validateAttributes(t),!f.isObject(t))throw new i("Attributes must be an object");for(let n in t){const r=n.toLowerCase();let o=t[r];if(f.isString(o)&&f.isFunction(o.resolveObservableTemplate)){if(o=o.resolveObservableTemplate(),f.isString(o)){e.setAttribute(r,o);continue}const t=o.filter(e=>f.isObservable(e));o=g.computed(()=>o.map(e=>f.isObservable(e)?e.val():e).join(" ")||" ",t)}"class"===r&&f.isJson(o)?v(e,o):"style"===r&&f.isJson(o)?y(e,o):b.includes(r)?w(e,r,o):f.isObservable(o)?$(e,r,o):e.setAttribute(r,o)}}(e,t)},setup:(e,t,n)=>e};function E(e,t){const n=e.toLowerCase();return function(e,o=null){try{if(!f.isJson(e)){const t=o;o=e,e=t}const r=S.createElement(n),i="function"==typeof t?t(r):r;return S.processAttributes(i,e),S.processChildren(o,i),S.setup(i,e,t)}catch(e){r.error("ElementCreation",`Error creating ${n}`,e)}}}Object.defineProperty(HTMLElement.prototype,"nd",{configurable:!0,get(){return this.$nd||(this.$nd=new p(this),this.$nd.nd=this.$nd),this.$nd}});class A extends Error{constructor(e,t){super(`${e}\n\n${t.join("\n")}\n\n`)}}const k={string:e=>({name:e,type:"string",validate:e=>f.isString(e)}),number:e=>({name:e,type:"number",validate:e=>f.isNumber(e)}),boolean:e=>({name:e,type:"boolean",validate:e=>f.isBoolean(e)}),observable:e=>({name:e,type:"observable",validate:e=>f.isObservable(e)}),element:e=>({name:e,type:"element",validate:e=>f.isElement(e)}),function:e=>({name:e,type:"function",validate:e=>f.isFunction(e)}),object:e=>({name:e,type:"object",validate:e=>f.isObject(e)}),objectNotNull:e=>({name:e,type:"object",validate:e=>f.isObject(e)&&null!==e}),children:e=>({name:e,type:"children",validate:e=>f.validateChildren(e)}),attributes:e=>({name:e,type:"attributes",validate:e=>f.validateAttributes(e)}),optional:e=>({...e,optional:!0}),oneOf:(e,...t)=>({name:e,type:"oneOf",types:t,validate:e=>t.some(t=>t.validate(e))})},I=(e,t,n="Function")=>{if(!f.isArray(t))throw new i("withValidation : argSchema must be an array");return function(...r){return((e,t,n="Function")=>{if(!t)return;const r=[],o=t.filter(e=>!e.optional).length;if(e.length<o&&r.push(`${n}: Expected at least ${o} arguments, got ${e.length}`),t.forEach((t,o)=>{const i=o+1,s=e[o];if(void 0!==s){if(!t.validate(s)){const e=s?.constructor?.name||typeof s;r.push(`${n}: Invalid argument '${t.name}' at position ${i}, expected ${t.type}, got ${e}`)}}else t.optional||r.push(`${n}: Missing required argument '${t.name}' at position ${i}`)}),r.length>0)throw new A("Argument validation failed",r)})(r,t,e.name||n),e.apply(this,r)}};Function.prototype.args=function(...e){return I(this,e)},Function.prototype.errorBoundary=function(e){return(...t)=>{try{return this.apply(this,t)}catch(t){return e(t)}}},String.prototype.use=function(e){const t=this;return g.computed(()=>t.replace(/\$\{(.*?)}/g,(t,n)=>{const r=e[n];return f.isObservable(r)?r.val():r}),Object.values(e))},String.prototype.resolveObservableTemplate=function(){return f.containsObservableReference(this)?this.split(/(\{\{#ObItem::\([0-9]+\)\}\})/g).filter(Boolean).map(e=>{if(!f.containsObservableReference(e))return e;const[t,n]=e.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);return g.getById(n)}):this.valueOf()};const F=["push","pop","shift","unshift","reverse","sort","splice"];g.array=function(e){if(!Array.isArray(e))throw new i("Observable.array : target must be an array");const t=g(e);F.forEach(e=>{t[e]=function(...n){const r=t.val()[e](...n);return t.trigger({action:e,args:n,result:r}),r}}),t.clear=function(){return t.val().length=0,t.trigger({action:"clear"}),!0},t.merge=function(e){t.set([...t.val(),...e])},t.populateAndRender=function(e,n){t.trigger({action:"populate",args:[t.val(),e,n]})},t.remove=function(e){const n=t.val().splice(e,1);return 0===n.length?[]:(t.trigger({action:"remove",args:[e],result:n[0]}),n)},t.swap=function(e,n){const r=t.val(),o=r.length;if(o<e||o<n)return!1;if(n<e){const t=e;e=n,n=t}const i=r[e],s=r[n];return r[e]=s,r[n]=i,t.trigger({action:"swap",args:[e,n],result:[i,s]}),!0},t.length=function(){return t.val().length};return["map","filter","reduce","some","every","find","findIndex","concat"].forEach(e=>{t[e]=function(...n){return t.val()[e](...n)}}),t},g.batch=function(e){const t=g(0),n=function(){if(f.isAsyncFunction(e))return e(...arguments).then(()=>{t.trigger()}).catch(e=>{throw e});e(...arguments),t.trigger()};return n.$observer=t,n},g.init=function(e){const t={};for(const n in e){const r=e[n];f.isJson(r)?t[n]=g.init(r):f.isArray(r)?t[n]=g.array(r):t[n]=g(r)}const n=function(){};return new Proxy(t,{get:(e,r)=>"__isProxy__"===r||("$value"===r?function(){const e={};for(const n in t){const r=t[n];f.isObservable(r)?e[n]=r.val():f.isProxy(r)?e[n]=r.$value:e[n]=r}return e}():"$clone"===r?n:void 0!==e[r]?e[r]:void 0),set(e,t,n){void 0!==e[t]&&e[t].set(n)}})},g.value=function(e){if(f.isObservable(e))return e.val();if(f.isProxy(e))return e.$value;if(f.isArray(e)){const t=[];for(let n=0,r=e.length;n<r;n++){const r=e[n];t.push(g.value(r))}return t}return e},g.update=function(e,t){for(const n in t){const r=e[n],o=t[n];if(f.isObservable(r)){if(f.isArray(o)){g.update(r,o);continue}r.set(o)}else f.isProxy(r)?g.update(r,o):e[n]=o}},g.object=g.init,g.json=g.init,g.computed=function(e,t=[]){const n=new a(e()),r=()=>n.set(e());if(f.isFunction(t)){if(!f.isObservable(t.$observer))throw new i("Observable.computed : dependencies must be valid batch function");return t.$observer.subscribe(r),n}return t.forEach(e=>e.subscribe(r)),n};const x=function(){const e=new Map;return{use(t){const{observer:n,subscribers:r}=e.get(t),o=g(n.val()),i=n.subscribe(e=>o.set(e)),s=o.subscribe(e=>n.set(e));return o.destroy=()=>{i(),s(),o.cleanup()},r.add(o),o},follow(e){return this.use(e)},create(t,n){const r=g(n);return e.set(t,{observer:r,subscribers:new Set}),r},get(t){const n=e.get(t);return n?n.observer:null},getWithSubscribers:t=>e.get(t),delete(t){const n=e.get(t);n&&(n.observer.cleanup(),n.subscribers.forEach(e=>e.destroy()),n.observer.clear())}}}();const D=function(e,t,n=null){if(!f.isObservable(e))return r.warn("ShowIf","ShowIf : condition must be an Observable / "+n,e);const o=new m("Show if : "+(n||""));let i=null;const s=()=>i||(i=S.getChild(t),i);return e.val()&&o.appendChild(s()),e.subscribe(e=>{e?o.appendChild(s()):o.remove()}),o},T=function(e,t,n=!0){if(!f.isObservable(e))throw new i("Toggle : condition must be an Observable");const r=new m,o=new Map,s=function(e){if(n&&o.has(e))return o.get(e);let r=t[e];return r?(r=S.getChild(r),n&&o.set(e,r),r):null},a=e.val(),u=s(a);return u&&r.appendChild(u),e.subscribe(e=>{const t=s(e);r.remove(),t&&r.appendChild(t)}),r},R=function(e,t,n){if(!f.isObservable(e))throw new i("Toggle : condition must be an Observable");return T(e,{true:t,false:n})},N=E("div"),L=E("span"),P=E("label"),q=E("p"),B=q,M=E("strong"),j=E("h1"),_=E("h2"),V=E("h3"),H=E("h4"),z=E("h5"),W=E("h6"),U=E("br"),J=E("a"),K=E("pre"),Q=E("code"),G=E("blockquote"),X=E("hr"),Y=E("em"),Z=E("small"),ee=E("mark"),te=E("del"),ne=E("ins"),re=E("sub"),oe=E("sup"),ie=E("abbr"),se=E("cite"),ae=E("q"),ue=E("dl"),le=E("dt"),ce=E("dd"),he=E("form",function(e){return e.submit=function(t){return"function"==typeof t?(e.onSubmit(e=>{e.preventDefault(),t(e)}),e):(this.setAttribute("action",t),e)},e.multipartFormData=function(){return this.setAttribute("enctype","multipart/form-data"),e},e.post=function(t){return this.setAttribute("method","post"),this.setAttribute("action",t),e},e.get=function(e){this.setAttribute("method","get"),this.setAttribute("action",e)},e}),de=E("input"),pe=E("textarea"),fe=pe,me=E("select"),be=E("fieldset"),ge=E("option"),ve=E("legend"),ye=E("datalist"),we=E("output"),$e=E("progress"),Ce=E("meter"),Oe=E("button"),Se=E("main"),Ee=E("section"),Ae=E("article"),ke=E("aside"),Ie=E("nav"),Fe=E("figure"),xe=E("figcaption"),De=E("header"),Te=E("footer"),Re=E("img"),Ne=function(e,t){return Re({src:e,...t})},Le=E("details"),Pe=E("summary"),qe=E("dialog"),Be=E("menu"),Me=E("ol"),je=E("ul"),_e=E("li"),Ve=_e,He=Me,ze=je,We=E("audio"),Ue=E("video"),Je=E("source"),Ke=E("track"),Qe=E("canvas"),Ge=E("svg"),Xe=E("time"),Ye=E("data"),Ze=E("address"),et=E("kbd"),tt=E("samp"),nt=E("var"),rt=E("wbr"),ot=E("caption"),it=E("table"),st=E("thead"),at=E("tfoot"),ut=E("tbody"),lt=E("tr"),ct=lt,ht=E("th"),dt=ht,pt=ht,ft=E("td"),mt=ft,bt=E("");var gt=Object.freeze({__proto__:null,Abbr:ie,Address:Ze,Anchor:m,Article:Ae,Aside:ke,AsyncImg:function(e,t,n,r){const o=Ne(t||e,n),s=new Image;return s.onload=()=>{f.isFunction(r)&&r(null,o),o.src=e},s.onerror=()=>{f.isFunction(r)&&r(new i("Image not found"))},f.isObservable(e)&&e.subscribe(e=>{s.src=e}),s.src=e,o},Audio:We,BaseImage:Re,Blockquote:G,Br:U,Button:Oe,Canvas:Qe,Caption:ot,Checkbox:e=>de({type:"checkbox",...e}),Cite:se,Code:Q,ColorInput:e=>de({type:"color",...e}),Data:Ye,Datalist:ye,DateInput:e=>de({type:"date",...e}),DateTimeInput:e=>de({type:"datetime-local",...e}),Dd:ce,Del:te,Details:Le,Dialog:qe,Div:N,Dl:ue,Dt:le,Em:Y,EmailInput:e=>de({type:"email",...e}),FieldSet:be,FigCaption:xe,Figure:Fe,FileInput:e=>de({type:"file",...e}),Footer:Te,ForEach:function(e,t,n){const o=new m("ForEach"),i=o.endElement();o.startElement();let s=new Map,a=null;const u=new Set,c=e=>{for(const[t,n]of s.entries()){if(u.has(t))continue;const r=n.child?.deref();e&&r&&e.removeChild(r),n.indexObserver?.cleanup(),n.child=null,n.indexObserver=null,s.delete(n.keyId),a&&a.delete(n.keyId)}},h=(e,o)=>{const i=l(e,o,n);if(s.has(i)){const e=s.get(i);if(e.indexObserver?.set(o),e.isNew=!1,e.child?.deref())return i;s.delete(i)}try{const n=t.length>=2?g(o):null;let r=S.getChild(t(e,n));s.set(i,{keyId:i,isNew:!0,child:new WeakRef(r),indexObserver:n})}catch(e){throw r.error("ForEach",`Error creating element for key ${i}`,e),e}return i},d=()=>{const t=i.parentNode;if(!t)return;const n=f.isObservable(e)?e.val():e;if(u.clear(),Array.isArray(n))for(let e=0,t=n.length;e<t;e++){const t=h(n[e],e);u.add(t)}else for(const e in n){const t=h(n[e],e);u.add(t)}if(0===u.size)return o.removeChildren(),c(),void a?.clear();c(t),a&&0!==a.size?(()=>{let e=document.createDocumentFragment();const t=Array.from(u);Array.from(a);for(const n in t){const r=t[n],o=s.get(r);if(!o)continue;const i=o.child.deref();i&&e.appendChild(i)}o.replaceContent(e)})():(e=>{const t=document.createDocumentFragment();for(const e of u){const n=s.get(e);if(!n)continue;const r=n.child?.deref();r&&t.appendChild(r)}e.insertBefore(t,i)})(t),a?.clear(),a=new Set([...u])};return d(),f.isObservable(e)&&e.subscribe(d),o},ForEachArray:function(e,t,n,o={}){const i=new m("ForEach Array"),s=i.endElement(),a=i.startElement();let u=new Map,c=0;const h=t.length>=2,d=new WeakMap,p=()=>{i.removeChildren(),w(),c=0},b=(e,t)=>d.has(e)?d.get(e):l(e,t,n),v=e=>C(b(e)),y=(e,t=!0)=>{if(!e)return;const n=e.child;e.indexObserver?.deref()?.cleanup(),e.child=null,e.indexObserver=null,t&&(n?.remove(),u.delete(e.keyId))},w=()=>{for(const[e,t]of u.entries())y(t,!1);u.clear()},$=(e,n)=>{const o=b(e,n);if(u.has(o)){const e=u.get(o);e.indexObserver?.deref()?.set(n);const t=e.child;if(t)return t;u.delete(o)}try{const r=h?g(n):null;let i=S.getChild(t(e,r));return u.set(o,{keyId:o,child:i,indexObserver:r?new WeakRef(r):null}),d.set(e,o),i}catch(e){throw r.error("ForEach",`Error creating element for key ${o}`,e),e}},C=function(e){const t=u.get(e);if(!t)return null;const n=t.child;return n||(y(t,!1),null)},O=function(e,t){const n=u.get(e);if(!n)return null;const r=n.child;if(!r)return null;t?t.appendChild(r):r.remove()},E={toFragment(e,t=0){const n=document.createDocumentFragment();for(let t=0,r=e.length;t<r;t++)n.append($(e[t],c)),c++;return n},add(e,t=0){setTimeout(()=>{i.appendElement(E.toFragment(e))},t)},replace(e){p(),E.add(e)},reOrder(e){let t=null;const n=document.createDocumentFragment();for(const r of e)t=v(r),t&&n.appendChild(t);t=null,i.appendElement(n,s)},removeOne(e,t){let n=v(e);n&&((e,t=!0)=>{y(u.get(e),t)})(b(e,t),!0),n=null},clear:p,merge(e){E.add(e,0)},push(e){let t=0;o.pushDelay&&(t=o.pushDelay(e)??0),E.add(e,t)},populate([e,t,n]){const r=document.createDocumentFragment();for(let o=0;o<t;o++){const t=n(o);e.push(t),r.append($(t,o)),c++}i.appendChild(r),r.replaceChildren()},unshift(e){i.insertBefore(E.toFragment(e),a.nextSibling)},splice(e,t){const[n,r,...o]=e;let a=null;const u=document.createDocumentFragment();if(t.length>0){let e=b(t[0],n);if(1===t.length)O(e,u);else if(t.length>1){const r=C(e);a=r?.previousSibling;for(let e=0;e<t.length;e++){const r=b(t[e],n+e);O(r,u)}}}else a=s;u.replaceChildren(),o&&o.length&&a&&i.insertBefore(E.toFragment(o),a.nextSibling)},reverse(e,t){E.reOrder(t)},sort(e,t){E.reOrder(t)},remove(e,t){E.removeOne(t)},pop(e,t){E.removeOne(t)},shift(e,t){E.removeOne(t)},swap(e,t){const n=s.parentNode;let r=v(t[0]),o=v(t[1]);if(!r||!o)return;const i=o.nextSibling;n.insertBefore(o,r),n.insertBefore(r,i),r=null,o=null}},A=(e,t,n)=>{if("populate"===n?.action)E.populate(n.args,n.result);else{if("clear"===n.action||!e.length){if(0===c)return;p()}if(n?.action)E[n.action]&&E[n.action](n.args,n.result);else{if(0===c)return void E.add(e);E.replace(e)}}((e,t=0)=>{if(!h)return;let n=t;for(let r=t,o=e?.length;r<o;r++){const t=u.get(b(e[r],r));t&&(t.indexObserver?.deref()?.set(n),n++)}})(e,0)};return A(e.val(),0,{action:null}),f.isObservable(e)&&e.subscribe(A),i},Form:he,Fragment:bt,H1:j,H2:_,H3:V,H4:H,H5:z,H6:W,Header:De,HiddenInput:e=>de({type:"hidden",...e}),HideIf:function(e,t,n){const r=g(!e.val());return e.subscribe(e=>r.set(!e)),D(r,t,n)},HideIfNot:function(e,t,n){return D(e,t,n)},Hr:X,Img:Ne,Input:de,Ins:ne,Kbd:et,Label:P,LazyImg:function(e,t){return Ne(e,{...t,loading:"lazy"})},Legend:ve,Li:Ve,Link:J,ListItem:_e,Main:Se,Mark:ee,Match:T,Menu:Be,Meter:Ce,MonthInput:e=>de({type:"month",...e}),NativeDocumentFragment:m,Nav:Ie,NumberInput:e=>de({type:"number",...e}),Ol:He,Option:ge,OrderedList:Me,Output:we,P:q,Paragraph:B,PasswordInput:e=>de({type:"password",...e}),Pre:K,Progress:$e,Quote:ae,Radio:e=>de({type:"radio",...e}),RangeInput:e=>de({type:"range",...e}),ReadonlyInput:e=>de({readonly:!0,...e}),Samp:tt,SearchInput:e=>de({type:"search",...e}),Section:Ee,Select:me,ShowIf:D,SimpleButton:(e,t)=>Oe(e,{type:"button",...t}),Small:Z,Source:Je,Span:L,Strong:M,Sub:re,SubmitButton:(e,t)=>Oe(e,{type:"submit",...t}),Summary:Pe,Sup:oe,Svg:Ge,Switch:R,TBody:ut,TBodyCell:mt,TFoot:at,TFootCell:pt,THead:st,THeadCell:dt,TRow:ct,Table:it,Td:ft,TelInput:e=>de({type:"tel",...e}),TextArea:pe,TextInput:fe,Th:ht,Time:Xe,TimeInput:e=>de({type:"time",...e}),Tr:lt,Track:Ke,Ul:ze,UnorderedList:je,UrlInput:e=>de({type:"url",...e}),Var:nt,Video:Ue,Wbr:rt,WeekInput:e=>de({type:"week",...e}),When:function(e){if(!f.isObservable(e))throw new i("When : condition must be an Observable");let t=null,n=null;return{show(e){return t=e,this},otherwise:r=>(n=r,R(e,t,n))}}});const vt={};function yt(e,t,n={}){e="/"+c(e,"/");let r=null,o=n.name||null;const i=n.middlewares||[],s=n.shouldRebuild||!1,a=n.with||{},u={},l=[],h=e=>{if(!e)return null;const[t,n]=e.split(":");let r=a[t];return!r&&n&&(r=vt[n]),r||(r="[^/]+"),r=r.replace("(","(?:"),{name:t,pattern:`(${r})`}},d=()=>{if(r)return r;const t=e.replace(/\{(.*?)}/gi,(e,t)=>{const n=h(t);return n&&n.pattern?(u[n.name]=n.pattern,l.push(n.name),n.pattern):e});return r=new RegExp("^"+t+"$"),r};this.name=()=>o,this.component=()=>t,this.middlewares=()=>i,this.shouldRebuild=()=>s,this.path=()=>e,this.match=function(e){e="/"+c(e,"/");if(!d().exec(e))return!1;const t={};return d().exec(e).forEach((e,n)=>{if(n<1)return;const r=l[n-1];t[r]=e}),t},this.url=function(t){const n=e.replace(/\{(.*?)}/gi,(e,n)=>{const r=h(n);if(t.params&&t.params[r.name])return t.params[r.name];throw new Error(`Missing parameter '${r.name}'`)}),r="object"==typeof t.query?new URLSearchParams(t.query).toString():null;return(t.basePath?t.basePath:"")+(r?`${n}?${r}`:n)}}class wt extends Error{constructor(e,t){super(e),this.context=t}}const $t=(e,t)=>{const n=[];return e.forEach(e=>{n.push(c(e.suffix,"/"))}),n.push(c(t,"/")),n.join("/")},Ct=(e,t)=>{const n=[];return e.forEach(e=>{e.options.middlewares&&n.push(...e.options.middlewares)}),t&&n.push(...t),n},Ot=(e,t)=>{const n=[];return e.forEach(e=>{e.options?.name&&n.push(e.options.name)}),t&&n.push(t),n.join(".")};function St(){const e=[];let t=0;const n=n=>{const o=t+n;if(!e[o])return;t=o;const{route:i,params:s,query:a,path:u}=e[o];r(u)},r=e=>{window.location.replace(`${window.location.pathname}${window.location.search}#${e}`)},o=()=>window.location.hash.slice(1);this.push=function(n){const{route:i,params:s,query:a,path:u}=this.resolve(n);u!==o()&&(e.splice(t+1),e.push({route:i,params:s,query:a,path:u}),t++,r(u))},this.replace=function(n){const{route:r,params:i,query:s,path:a}=this.resolve(n);a!==o()&&(e[t]={route:r,params:i,query:s,path:a})},this.forward=function(){return t<e.length-1&&n(1)},this.back=function(){return t>0&&n(-1)},this.init=function(n){window.addEventListener("hashchange",()=>{const{route:e,params:t,query:n,path:r}=this.resolve(o());this.handleRouteChange(e,t,n,r)});const{route:r,params:i,query:s,path:a}=this.resolve(n||o());e.push({route:r,params:i,query:s,path:a}),t=0,this.handleRouteChange(r,i,s,a)}}function Et(){this.push=function(e){try{const{route:t,path:n,params:r,query:o}=this.resolve(e);if(window.history.state&&window.history.state.path===n)return;window.history.pushState({name:t.name(),params:r,path:n},t.name()||n,n),this.handleRouteChange(t,r,o,n)}catch(e){r.error("HistoryRouter","Error in pushState",e)}},this.replace=function(e){const{route:t,path:n,params:o}=this.resolve(e);try{window.history.replaceState({name:t.name(),params:o,path:n},t.name()||n,n),this.handleRouteChange(t,o,{},n)}catch(e){r.error("HistoryRouter","Error in replaceState",e)}},this.forward=function(){window.history.forward()},this.back=function(){window.history.back()},this.init=function(e){window.addEventListener("popstate",e=>{try{if(!e.state||!e.state.path)return;const t=e.state.path,{route:n,params:r,query:o,path:i}=this.resolve(t);if(!n)return;this.handleRouteChange(n,r,o,i)}catch(e){r.error("HistoryRouter","Error in popstate event",e)}});const{route:t,params:n,query:o,path:i}=this.resolve(e||window.location.pathname+window.location.search);this.handleRouteChange(t,n,o,i)}}function At(){const e=[];let t=0;const n=n=>{const r=t+n;if(!e[r])return;t=r;const{route:o,params:i,query:s,path:a}=e[r];this.handleRouteChange(o,i,s,a)};this.push=function(n){const{route:r,params:o,query:i,path:s}=this.resolve(n);e[t]&&e[t].path===s||(e.splice(t+1),e.push({route:r,params:o,query:i,path:s}),t++,this.handleRouteChange(r,o,i,s))},this.replace=function(n){const{route:r,params:o,query:i,path:s}=this.resolve(n);e[t]={route:r,params:o,query:i,path:s},this.handleRouteChange(r,o,i,s)},this.forward=function(){return t<e.length-1&&n(1)},this.back=function(){return t>0&&n(-1)},this.init=function(n){const r=n||window.location.pathname+window.location.search,{route:o,params:i,query:s,path:a}=this.resolve(r);e.push({route:o,params:i,query:s,path:a}),t=0,this.handleRouteChange(o,i,s,a)}}const kt="default";function It(e={}){const t=[],n={},o=[],i=[],s={route:null,params:null,query:null,path:null,hash:null};if("hash"===e.mode)St.apply(this,[]);else if("history"===e.mode)Et.apply(this,[]);else{if("memory"!==e.mode)throw new wt("Invalid router mode "+e.mode);At.apply(this,[])}const a=function(e,t){for(const n of i)try{n(e),t&&t(e)}catch(e){r.warn("Route Listener","Error in listener:",e)}};this.routes=()=>[...t],this.currentState=()=>({...s}),this.add=function(e,r,i){const s=new yt($t(o,e),r,{...i,middlewares:Ct(o,i?.middlewares||[]),name:i?.name?Ot(o,i.name):null});return t.push(s),s.name()&&(n[s.name()]=s),this},this.group=function(e,t,n){if(!f.isFunction(n))throw new wt("Callback must be a function");return o.push({suffix:e,options:t}),n(),o.pop(),this},this.generateUrl=function(e,t={},r={}){const o=n[e];if(!o)throw new wt(`Route not found for name: ${e}`);return o.url({params:t,query:r})},this.resolve=function(e){if(f.isJson(e)){const t=n[e.name];if(!t)throw new wt(`Route not found for name: ${e.name}`);return{route:t,params:e.params,query:e.query,path:t.url({...e})}}const[r,o]=e.split("?"),i="/"+c(r,"/");let s,a=null;for(const e of t)if(s=e.match(i),s){a=e;break}if(!a)throw new wt(`Route not found for url: ${r}`);const u={};if(o){const e=new URLSearchParams(o).entries();for(const[t,n]of e)u[t]=n}return{route:a,params:s,query:u,path:e}},this.subscribe=function(e){if(!f.isFunction(e))throw new wt("Listener must be a function");return i.push(e),()=>{i.splice(i.indexOf(e),1)}},this.handleRouteChange=function(e,t,n,r){s.route=e,s.params=t,s.query=n,s.path=r;const o=[...e.middlewares(),a];let i=0;const u={...s},l=e=>{if(i++,!(i>=o.length))return o[i](e||u,l)};return o[i](u,l)}}function Ft(e,t){const{to:n,href:r,...o}=e,i=n||r;if(f.isString(i)){const e=It.get();return J({...o,href:i},t).nd.onPreventClick(()=>{e.push(i)})}const s=i.router||kt,a=It.get(s);if(!a)throw new wt('Router not found "'+s+'" for link "'+i.name+'"');const u=a.generateUrl(i.name,i.params,i.query);return J({...o,href:u},t).nd.onPreventClick(()=>{a.push(u)})}It.routers={},It.create=function(t,n){if(!f.isFunction(n))throw r.error("Router","Callback must be a function",e),new wt("Callback must be a function");const o=new It(t);return It.routers[t.name||kt]=o,n(o),o.init(t.entry),o.mount=function(e){if(f.isString(e)){const t=document.querySelector(e);if(!t)throw new wt(`Container not found for selector: ${e}`);e=t}else if(!f.isElement(e))throw new wt("Container must be a string or an Element");return function(e,t){const n=new Map,r=function(e){t.innerHTML="",t.appendChild(e)},o=function(e){if(!e.route)return;const{route:t,params:o,query:i,path:s}=e;if(n.has(s)){const e=n.get(s);return void r(e)}const a=t.component()({params:o,query:i});n.set(s,a),r(a)};return e.subscribe(o),o(e.currentState()),t}(o,e)},o},It.get=function(e){const t=It.routers[e||kt];if(!t)throw new wt(`Router not found for name: ${e}`);return t},It.push=function(e,t=null){return It.get(t).push(e)},It.replace=function(e,t=null){return It.get(t).replace(e)},It.forward=function(e=null){return It.get(e).forward()},It.back=function(e=null){return It.get(e).back()},Ft.blank=function(e,t){return J({...e,target:"_blank"},t)};var xt=Object.freeze({__proto__:null,Link:Ft,RouteParamPatterns:vt,Router:It});return t.ArgTypes=k,t.ElementCreator=S,t.HtmlElementWrapper=E,t.NDElement=p,t.Observable=g,t.Store=x,t.elements=gt,t.router=xt,t.withValidation=I,t}({});

package/docs/observables.md

@@ -36,6 +36,7 @@ console.log(name.val()); // "BOB"
 ```
 
 ## Listening to Changes
+The `.subscribe()` method allows you to listen to every change in an observable. The callback receives both the new value and the previous value.
 
 ```javascript
 const counter = Observable(0);
@@ -50,6 +51,72 @@ counter.set(1); // Logs: "Counter is now: 1"
 counter.set(2); // Logs: "Counter is now: 2"
 ```
 
+## Value-Specific Watchers with .on()
+
+The `.on()` method allows you to watch for specific values in an observable. The callback is triggered twice: once with `true` when the value is reached, and once with `false` when the value changes to something else.
+
+```javascript
+const status = Observable("idle");
+
+// Watch for specific value - callback called twice:
+// - once with true when value is reached
+// - once with false when value changes away
+status.on("loading", (isActive) => {
+  console.log(`Loading state: ${isActive}`);
+});
+
+status.on("success", (isActive) => {
+  console.log(`Success state: ${isActive}`);
+});
+
+// Test the watchers
+status.set("loading"); // Logs: "Loading state: true"
+status.set("success"); // Logs: "Loading state: false", "Success state: true"
+status.set("idle");    // Logs: "Success state: false"
+```
+
+**Key Features:**
+- Works with all value types (string, number, boolean...)
+- Can use an observable as callback (will be set to true/false automatically)
+- Returns an unsubscribe function for cleanup
+- More efficient than `.subscribe()` when only watching specific values
+
+**Comparison with .subscribe():**
+- `.subscribe()`: called on EVERY change with old/new values
+- `.on()`: called when **entering** a specific value (true) and when **leaving** it (false)
+
+## .on() vs .subscribe() Comparison
+
+| Aspect | `.on(value, callback)` | `.subscribe(callback)` |
+|--------|------------------------|------------------------|
+| **When Called** | Only when entering/leaving specific values | On every value change |
+| **Callback Signature** | `(isActive: boolean) => void` | `(newValue, oldValue) => void` |
+| **Performance** | ✅ Efficient with many watchers | ❌ Slow with many subscribers |
+| **Use Case** | Watching specific states/values | General change detection |
+| **Example** | `status.on("loading", show => ...)` | `status.subscribe((new, old) => ...)` |
+
+### Performance Impact Example
+
+```javascript
+const status = Observable("idle");
+
+// Scenario: 1000 components, each watching different states
+
+// ❌ .subscribe() - ALL 1000 callbacks run on EVERY change
+for (let i = 0; i < 1000; i++) {
+  status.subscribe(value => {
+    if (value === `state-${i}`) updateComponent(i); // Only 1 cares, all 1000 run
+  });
+}
+
+// ✅ .on() - Only relevant callback runs
+for (let i = 0; i < 1000; i++) {
+  status.on(`state-${i}`, (isActive) => {
+    if (isActive) updateComponent(i); // Only this one runs
+  });
+}
+```
+
 ## Observable Objects vs Simple Objects
 
 **Important distinction:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "main": "index.js",
   "type": "module",
   "scripts": {

package/src/data/ObservableItem.js

@@ -194,6 +194,10 @@ ObservableItem.prototype.check = function(callback) {
 };
 ObservableItem.prototype.get = ObservableItem.prototype.check;
 
+ObservableItem.prototype.is = function(value) {
+    return {$target: value, $observer: this};
+};
+
 ObservableItem.prototype.toString = function() {
     if(!this.$memoryId) {
         MemoryManager.register(this);

package/src/elements/control/for-each-array.js

@@ -12,6 +12,7 @@ export function ForEachArray(data, callback, key, configs = {}) {
 
     let cache = new Map();
     let lastNumberOfItems = 0;
+    const isIndexRequired = callback.length >= 2;
 
     const keysCache = new WeakMap();
 
@@ -31,7 +32,7 @@ export function ForEachArray(data, callback, key, configs = {}) {
     };
 
     const updateIndexObservers = (items, startFrom = 0) => {
-        if(callback.length < 2) {
+        if(!isIndexRequired) {
             return;
         }
         let index = startFrom;
@@ -84,7 +85,7 @@ export function ForEachArray(data, callback, key, configs = {}) {
         }
 
         try {
-            const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
+            const indexObserver = isIndexRequired ? Observable(indexKey) : null;
             let child = ElementCreator.getChild(callback(item, indexObserver));
             cache.set(keyId, {
                 keyId,

package/src/wrappers/AttributesWrapper.js

@@ -16,6 +16,13 @@ function bindClassAttribute(element, data) {
             value.subscribe(newValue => element.classList.toggle(className, newValue));
             continue;
         }
+        if(value.$observer) {
+            element.classList.toggle(className, value.$observer.val());
+            value.$observer.on(value.$target, function(isTargetValue) {
+                element.classList.toggle(className, isTargetValue)
+            });
+            continue;
+        }
         element.classList.toggle(className, value)
     }
 }
@@ -112,22 +119,16 @@ export default function AttributesWrapper(element, attributes) {
     for(let key in attributes) {
         const attributeName = key.toLowerCase();
         let value = attributes[attributeName];
-        if(Validator.isString(value) && Validator.isFunction(value.resolveObservableTemplate)) {
-            value = value.resolveObservableTemplate();
-            if(Validator.isArray(value)) {
-                const observables = value.filter(item => Validator.isObservable(item));
-                value = Observable.computed(() => {
-                    return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
-                }, observables);
+        if(Validator.isString(value)) {
+            value = value.resolveObservableTemplate ? value.resolveObservableTemplate() : value;
+            if(Validator.isString(value)) {
+                element.setAttribute(attributeName, value);
+                continue;
             }
-        }
-        if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
-            bindBooleanAttribute(element, attributeName, value);
-            continue;
-        }
-        if(Validator.isObservable(value)) {
-            bindAttributeWithObservable(element, attributeName, value);
-            continue;
+            const observables = value.filter(item => Validator.isObservable(item));
+            value = Observable.computed(() => {
+                return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
+            }, observables);
         }
         if(attributeName === 'class' && Validator.isJson(value)) {
             bindClassAttribute(element, value);
@@ -137,6 +138,14 @@ export default function AttributesWrapper(element, attributes) {
             bindStyleAttribute(element, value);
             continue;
         }
+        if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
+            bindBooleanAttribute(element, attributeName, value);
+            continue;
+        }
+        if(Validator.isObservable(value)) {
+            bindAttributeWithObservable(element, attributeName, value);
+            continue;
+        }
         element.setAttribute(attributeName, value);
 
     }

package/src/wrappers/ElementCreator.js

@@ -73,15 +73,21 @@ export const ElementCreator = {
         if(child === null) {
             return null;
         }
-        if(Validator.isString(child) && Validator.isFunction(child.resolveObservableTemplate)) {
-            child = child.resolveObservableTemplate();
-        }
         if(Validator.isString(child)) {
-            return ElementCreator.createStaticTextNode(null, child);
+            child = child.resolveObservableTemplate ? child.resolveObservableTemplate() : child;
+            if(Validator.isString(child)) {
+                return ElementCreator.createStaticTextNode(null, child);
+            }
+        }
+        if (Validator.isElement(child)) {
+            return child;
         }
         if (Validator.isObservable(child)) {
             return ElementCreator.createObservableNode(null, child);
         }
+        if(Validator.isNDElement(child)) {
+            return child.$element ?? child.$build?.() ?? null;
+        }
         if(Validator.isArray(child)) {
             const fragment = document.createDocumentFragment();
             for(let i = 0, length = child.length; i < length; i++) {
@@ -92,12 +98,6 @@ export const ElementCreator = {
         if(Validator.isFunction(child)) {
             return this.getChild(child());
         }
-        if (Validator.isElement(child)) {
-            return child;
-        }
-        if(Validator.isNDElement(child)) {
-            return child.$element ?? child.$build?.() ?? null;
-        }
         return ElementCreator.createStaticTextNode(null, child);
     },
     /**