native-document 1.0.16 → 1.0.18

package/dist/native-document.min.js

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

package/package.json

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

package/src/data/observable-helpers/array.js

@@ -1,6 +1,5 @@
 import NativeDocumentError from "../../errors/NativeDocumentError";
 import {Observable} from "../Observable";
-import ObservableItem from "../ObservableItem";
 
 
 const methods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
@@ -30,6 +29,13 @@ Observable.array = function(target) {
         return true;
     };
 
+    observer.merge = function(values) {
+        observer.$value = [...observer.$value, ...values];
+    };
+
+    observer.populateAndRender = function(iteration, callback) {
+        observer.trigger({ action: 'populate', args: [observer.$value, iteration, callback] });
+    };
     observer.remove = function(index) {
         const deleted = observer.$value.splice(index, 1);
         if(deleted.length === 0) {

package/src/elements/anchor.js

@@ -1,18 +1,8 @@
 import Validator from "../utils/validator";
 import DebugManager from "../utils/debug-manager";
-import {createTextNode} from "../wrappers/HtmlElementWrapper";
+import {ElementCreator} from "../wrappers/ElementCreator";
 
 
-const getChildAsNode = (child) => {
-    if(Validator.isFunction(child)) {
-        return getChildAsNode(child());
-    }
-    if(Validator.isElement(child)) {
-        return child;
-    }
-    return createTextNode(child)
-}
-
 export default function Anchor(name) {
     const element = document.createDocumentFragment();
 
@@ -27,10 +17,10 @@ export default function Anchor(name) {
 
     const insertBefore = function(parent, child, target) {
         if(parent === element) {
-            parent.nativeInsertBefore(getChildAsNode(child), target);
+            parent.nativeInsertBefore(ElementCreator.getChild(child), target);
             return;
         }
-        parent.insertBefore(getChildAsNode(child), target);
+        parent.insertBefore(ElementCreator.getChild(child), target);
     };
 
     element.appendElement = function(child, before = null) {
@@ -51,7 +41,7 @@ export default function Anchor(name) {
         if(Validator.isArray(child)) {
             const fragment = document.createDocumentFragment();
             for(let i = 0, length = child.length; i < length; i++) {
-                fragment.appendChild(getChildAsNode(child[i]));
+                fragment.appendChild(ElementCreator.getChild(child[i]));
             }
             insertBefore(parent, fragment, before);
             return element;

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

@@ -1,9 +1,9 @@
 import Anchor from "../anchor";
 import {Observable} from "../../data/Observable";
 import Validator from "../../utils/validator";
-import {createTextNode} from "../../wrappers/HtmlElementWrapper";
 import DebugManager from "../../utils/debug-manager";
 import {getKey} from "../../utils/helpers";
+import { ElementCreator } from "../../wrappers/ElementCreator";
 
 export function ForEachArray(data, callback, key, configs = {}) {
     const element = new Anchor('ForEach Array');
@@ -87,10 +87,7 @@ export function ForEachArray(data, callback, key, configs = {}) {
 
         try {
             const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
-            let child = callback(item, indexObserver);
-            if(Validator.isStringOrObservable(child)) {
-                child = createTextNode(child);
-            }
+            let child = ElementCreator.getChild(callback(item, indexObserver));
             cache.set(keyId, {
                 keyId,
                 isNew: true,
@@ -178,15 +175,28 @@ export function ForEachArray(data, callback, key, configs = {}) {
             child = null;
         },
         clear,
+        merge(items) {
+            Actions.add(items, 0);
+        },
         push(items) {
             let delay = 0;
             if(configs.pushDelay) {
                 delay = configs.pushDelay(items) ?? 0;
-            } else {
-                delay = (items.length >= 1000) ? 10 : 0;
             }
+
             Actions.add(items, delay);
         },
+        populate([target, iteration, callback]) {
+            const fragment = document.createDocumentFragment();
+            for (let i = 0; i < iteration; i++) {
+                const data = callback(i);
+                target.push(data);
+                fragment.append(buildItem(data, i));
+                lastNumberOfItems++;
+            }
+            element.appendChild(fragment);
+            fragment.replaceChildren();
+        },
         unshift(values){
             element.insertBefore(Actions.toFragment(values), blockStart.nextSibling);
         },
@@ -251,23 +261,30 @@ export function ForEachArray(data, callback, key, configs = {}) {
     };
 
     const buildContent = (items, _, operations) => {
-        if(operations.action === 'clear' || !items.length) {
-            if(lastNumberOfItems === 0) {
-                return;
+        if(operations?.action === 'populate') {
+            Actions.populate(operations.args, operations.result);
+        } else  {
+            console.log(lastNumberOfItems);
+            if(operations.action === 'clear' || !items.length) {
+                if(lastNumberOfItems === 0) {
+                    return;
+                }
+                clear();
             }
-            clear();
-        }
 
-        if(!operations?.action) {
-            if(lastNumberOfItems === 0) {
-                Actions.add(items);
-                return;
+            if(!operations?.action) {
+                if(lastNumberOfItems === 0) {
+                    Actions.add(items);
+                    return;
+                }
+                Actions.replace(items);
+            }
+            else if(Actions[operations.action]) {
+                Actions[operations.action](operations.args, operations.result);
             }
-            Actions.replace(items);
-        }
-        else if(Actions[operations.action]) {
-            Actions[operations.action](operations.args, operations.result);
         }
+
+        console.log(items)
         updateIndexObservers(items, 0);
     };
 

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

@@ -1,10 +1,10 @@
 import ObservableItem from "../../data/ObservableItem";
 import {Observable} from "../../data/Observable";
-import {createTextNode} from "../../wrappers/HtmlElementWrapper";
 import Validator from "../../utils/validator";
 import Anchor from "../anchor";
 import DebugManager from "../../utils/debug-manager";
 import {getKey} from "../../utils/helpers";
+import { ElementCreator } from "../../wrappers/ElementCreator";
 
 /**
  *
@@ -59,10 +59,7 @@ export function ForEach(data, callback, key) {
 
         try {
             const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
-            let child = callback(item, indexObserver);
-            if(Validator.isStringOrObservable(child)) {
-                child = createTextNode(child);
-            }
+            let child = ElementCreator.getChild(callback(item, indexObserver))
             cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
         } catch (e) {
             DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);

package/src/elements/control/show-if.js

@@ -1,8 +1,8 @@
 import { Observable } from "../../data/Observable";
-import {createTextNode} from "../../wrappers/HtmlElementWrapper";
 import Validator from "../../utils/validator";
 import DebugManager from "../../utils/debug-manager.js";
 import Anchor from "../anchor";
+import {ElementCreator} from "../../wrappers/ElementCreator";
 
 /**
  * Show the element if the condition is true
@@ -23,15 +23,7 @@ export const ShowIf = function(condition, child, comment = null) {
         if(childElement) {
             return childElement;
         }
-        if(typeof child === 'function') {
-            childElement = child();
-        }
-        else {
-            childElement = child;
-        }
-        if(Validator.isStringOrObservable(childElement)) {
-            childElement = createTextNode(childElement);
-        }
+        childElement = ElementCreator.getChild(child);
         return childElement;
     };
 

package/src/elements/control/switch.js

@@ -1,7 +1,7 @@
 import NativeDocumentError from "../../errors/NativeDocumentError";
-import {createTextNode} from "../../wrappers/HtmlElementWrapper";
 import Validator from "../../utils/validator";
 import Anchor from "../anchor";
+import {ElementCreator} from "../../wrappers/ElementCreator";
 
 
 
@@ -9,9 +9,10 @@ import Anchor from "../anchor";
  *
  * @param {ObservableItem|ObservableChecker} $condition
  * @param {{[key]: *}} values
+ * @param {Boolean} shouldKeepInCache
  * @returns {DocumentFragment}
  */
-export const Match = function($condition, values) {
+export const Match = function($condition, values, shouldKeepInCache = true) {
 
     if(!Validator.isObservable($condition)) {
         throw new NativeDocumentError("Toggle : condition must be an Observable");
@@ -21,17 +22,15 @@ export const Match = function($condition, values) {
     const cache = new Map();
 
     const getItem = function(key) {
-        if(cache.has(key)) {
+        if(shouldKeepInCache && cache.has(key)) {
             return cache.get(key);
         }
         let item = values[key];
         if(!item) {
             return null;
         }
-        if(Validator.isFunction(item)) {
-            item = item();
-        }
-        cache.set(key, item);
+        item = ElementCreator.getChild(item);
+        shouldKeepInCache && cache.set(key, item);
         return item;
     }
 

package/src/utils/events.js

@@ -0,0 +1,65 @@
+export const EVENTS = [
+  "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"
+];

package/src/utils/prototypes.js

@@ -33,7 +33,7 @@ String.prototype.use = function(args) {
 
 String.prototype.resolveObservableTemplate = function() {
     if(!Validator.containsObservableReference(this)) {
-        return this;
+        return this.valueOf();
     }
     return this.split(/(\{\{#ObItem::\([0-9]+\)\}\})/g).filter(Boolean).map((value) => {
         if(!Validator.containsObservableReference(value)) {

package/src/utils/validator.js

@@ -2,6 +2,7 @@ import ObservableItem from "../data/ObservableItem";
 import DebugManager from "./debug-manager";
 import NativeDocumentError from "../errors/NativeDocumentError";
 import ObservableChecker from "../data/ObservableChecker";
+import {NDElement} from "../wrappers/NDElement";
 
 const Validator = {
     isObservable(value) {
@@ -46,13 +47,16 @@ const Validator = {
     isStringOrObservable(value) {
         return this.isString(value) || this.isObservable(value);
     },
-
     isValidChild(child) {
         return child === null ||
             this.isElement(child) ||
             this.isObservable(child) ||
+            this.isNDElement(child) ||
             ['string', 'number', 'boolean'].includes(typeof child);
     },
+    isNDElement(child) {
+        return child instanceof NDElement;
+    },
     isValidChildren(children) {
         if (!Array.isArray(children)) {
             children = [children];

package/src/wrappers/DocumentObserver.js

@@ -6,7 +6,7 @@ const DocumentObserver = {
     unmounted: new WeakMap(),
     unmountedSupposedSize: 0,
     observer: null,
-    checkMutation: debounce(function(mutationsList) {
+    checkMutation: function(mutationsList) {
         let i = 0;
         for(const mutation of mutationsList) {
             if(DocumentObserver.mountedSupposedSize > 0 ) {
@@ -35,7 +35,7 @@ const DocumentObserver = {
                 }
             }
         }
-    }, 16),
+    },
     /**
      *
      * @param {HTMLElement} element

package/src/wrappers/ElementCreator.js

@@ -64,31 +64,41 @@ export const ElementCreator = {
         const childrenArray = Array.isArray(children) ? children : [children];
 
         for(let i = 0, length = childrenArray.length; i < length; i++) {
-            let child = childrenArray[i];
+            let child = this.getChild(childrenArray[i]);
             if (child === null) continue;
-            if(Validator.isString(child) && Validator.isFunction(child.resolveObservableTemplate)) {
-                child = child.resolveObservableTemplate();
-            }
-            if(Validator.isFunction(child)) {
-                this.processChildren(child(), parent);
-                continue;
-            }
-            if(Validator.isArray(child)) {
-                this.processChildren(child, parent);
-                continue;
-            }
-            if (Validator.isElement(child)) {
-                parent.appendChild(child);
-                continue;
-            }
-            if (Validator.isObservable(child)) {
-                ElementCreator.createObservableNode(parent, child);
-                continue;
-            }
-            if (child) {
-                ElementCreator.createStaticTextNode(parent, child);
+            parent.appendChild(child);
+        }
+    },
+    getChild(child) {
+        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);
+        }
+        if (Validator.isObservable(child)) {
+            return ElementCreator.createObservableNode(null, child);
+        }
+        if(Validator.isArray(child)) {
+            const fragment = document.createDocumentFragment();
+            for(let i = 0, length = child.length; i < length; i++) {
+                fragment.appendChild(this.getChild(child[i]));
             }
+            return fragment;
+        }
+        if(Validator.isFunction(child)) {
+            return this.getChild(child());
+        }
+        if (Validator.isElement(child)) {
+            return child;
+        }
+        if(Validator.isNDElement(child)) {
+            return child.$element;
         }
+        return ElementCreator.createStaticTextNode(null, child);
     },
     /**
      *