native-document 1.0.13 → 1.0.15

package/dist/native-document.min.js

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

package/docs/anchor.md

@@ -6,13 +6,13 @@ Anchors are a NativeDocument class that enables dynamic DOM manipulation without
 
 Anchors are instances of the Anchor class that use two comment nodes as invisible markers:
 
- `NativeDocumentFragment is Anchor alias`
+`NativeDocumentFragment is an Anchor alias`
 
 ```javascript
 // Create an anchor instance
 const anchor = new Anchor("My Content");
-// Or
-// const anchor = new NativeDocumentFragment("My Content");
+// Or using the alias
+const anchor = new NativeDocumentFragment("My Content");
 
 // In the DOM, this creates:
 // <!-- Anchor Start : My Content -->
@@ -43,7 +43,7 @@ const anchor = new Anchor("Dynamic Area");
 anchor.appendChild(Div("Dynamic content")); // Uses comment markers system
 ```
 
-## Dynamic Content Insertion
+## Creating and Using Anchors
 
 ### Creating Anchors
 
@@ -77,51 +77,107 @@ anchor.appendChild(Div("Dynamic content 2"));
 // </div>
 ```
 
-### remove() - Clear Content Between Markers
+### insertBefore() - Positioned Insertion
 
 ```javascript
-// Remove all content between markers (markers remain)
-anchor.remove(); // Content cleared, anchor can be reused
+const anchor = new Anchor("Ordered Content");
+const element1 = Div("First");
+const element2 = Div("Second");
 
-// Remove markers and all content permanently  
-anchor.remove(true); // Destroys the entire anchor system
+anchor.appendChild(element1);
+anchor.insertBefore(element2, element1); // Inserts before element1
+// Result: element2, element1
 ```
 
-### clear() - Empty Content
+### replaceContent() - Replace All Content
 
 ```javascript
-// Alias for remove() - clears content but keeps anchor
-anchor.clear();
+const anchor = new Anchor("Replaceable");
+anchor.appendChild(Div("Old content"));
+
+// Replace all content between markers with new content
+anchor.replaceContent(Div("New content"));
 ```
 
-## Anchor Methods
+## Content Management Methods
 
-### insertBefore() - Positioned Insertion
+### remove() vs removeChildren() vs clear()
 
 ```javascript
-const anchor = Fragment();
-const element1 = Div("First");
-const element2 = Div("Second");
+const anchor = new Anchor("Content Management");
 
-anchor.appendChild(element1);
-anchor.insertBefore(element2, element1); // Inserts before element1
-// Result: element2, element1
+// Remove all content between markers (markers remain)
+anchor.remove(); // Content cleared, anchor can be reused
+anchor.removeChildren(); // Same as remove() - more explicit name
+
+// Alias for remove() - clears content but keeps anchor
+anchor.clear();
 ```
 
+### removeWithAnchors() - Complete Removal
+
+```javascript
+// Remove markers AND all content permanently  
+anchor.removeWithAnchors(); // Destroys the entire anchor system
+```
+
+## Anchor Access Methods
+
 ### Access Markers
 
 ```javascript
-const anchor = Fragment();
+const anchor = new Anchor("My Anchor");
 
 // Get the start and end comment nodes
 const start = anchor.startElement();
 const end = anchor.endElement();
 
-console.log(start.textContent); // "Anchor Start : Fragment"
-console.log(end.textContent);   // "/ Anchor End Fragment"
+console.log(start.textContent); // "Anchor Start : My Anchor"
+console.log(end.textContent);   // "/ Anchor End My Anchor"
 ```
 
-## Practical Usage with Conditionals
+## Practical Usage Examples
+
+### Working with Arrays of Content
+
+```javascript
+const anchor = new Anchor("Multi Content");
+const container = Div();
+container.appendChild(anchor);
+
+// Insert multiple elements without a containing wrapper
+anchor.appendChild([
+    H1("Title"),
+    P("Paragraph"),
+    Button("Action")
+]);
+
+// DOM: No wrapper element, just the three elements between markers
+```
+
+### Dynamic Content Updates
+
+```javascript
+const contentAnchor = new Anchor("Dynamic Updates");
+const isLoading = Observable(true);
+const data = Observable(null);
+
+// Initial loading state
+contentAnchor.appendChild(Div("Loading..."));
+
+// Update content based on state changes
+isLoading.subscribe(loading => {
+    if (loading) {
+        contentAnchor.replaceContent(Div("Loading..."));
+    } else if (data.val()) {
+        contentAnchor.replaceContent(
+            Div(`Data: ${data.val()}`)
+        );
+    }
+});
+```
+
+## Built-in Components Using Anchors
 
 ### ShowIf with Anchors
 
@@ -152,36 +208,43 @@ const list = ForEach(items, (item) =>
 items.push("Item 3"); // New div inserted at anchor position
 items.splice(0, 1);   // First div removed, others shift within markers
 ```
-:m
-### Multiple Elements Without Wrapper
+
+### Match/Switch Components
 
 ```javascript
-const anchor = new Anchor("Multi Content");
-const container = Div();
-container.appendChild(anchor);
+const currentView = Observable('loading');
 
-// Insert multiple elements without a containing wrapper
-anchor.appendChild([
-    H1("Title"),
-    P("Paragraph"),
-    Button("Action")
-]);
+// Match returns an anchor managing different content states
+const content = Match(currentView, {
+    loading: () => Div("Loading..."),
+    success: () => Div("Data loaded!"),
+    error: () => Div("Error occurred")
+});
 
-// DOM: No wrapper element, just the three elements between markers
+currentView.set('success'); // Content switches without wrapper changes
 ```
 
-## Why Use Anchors vs Fragment?
+## When to Use Fragment vs Anchor
 
-**Use Fragment** for standard DOM operations:
+### Use Fragment for:
+- **One-time content creation** that won't change
+- **Standard DOM operations** following web standards
+- **Static content grouping** before insertion
 
 ```javascript
 // Standard DocumentFragment behavior
-const fragment = Fragment();
-fragment.appendChild(Div("Content"));
+const fragment = Fragment(
+    H1("Static Title"),
+    P("Static content")
+);
 // Gets replaced entirely when appended to parent
 ```
 
-**Use Anchor (NativeDocumentFragment)** for dynamic content management:
+### Use Anchor for:
+- **Dynamic content management** that updates frequently
+- **Conditional rendering** systems
+- **List management** with add/remove operations
+- **Custom rendering patterns**
 
 ```javascript
 // Dynamic content area that can be updated multiple times
@@ -191,22 +254,122 @@ anchor.remove(); // Clear content
 anchor.appendChild(Div("New content")); // Add different content - markers remain
 ```
 
+## Performance Considerations
+
+### Memory Management
+```javascript
+// Anchors are automatically cleaned up when removed from DOM
+const anchor = new Anchor("Temporary");
+
+// Manual cleanup if needed
+anchor.removeWithAnchors(); // Fully destroys anchor and frees memory
+```
+
+### Batch Operations
+```javascript
+// Efficient: batch multiple updates
+const fragment = document.createDocumentFragment();
+fragment.appendChild(Div("Item 1"));
+fragment.appendChild(Div("Item 2"));
+anchor.appendChild(fragment);
+
+// Less efficient: individual appendChild calls
+anchor.appendChild(Div("Item 1"));
+anchor.appendChild(Div("Item 2"));
+```
+
+## Advanced Patterns
+
+### Creating Custom Anchor-Based Components
+
+```javascript
+
+function ConditionalList(condition, items) {
+    const anchor = new Anchor("ConditionalList");
+
+    const updateContent = (value) => {
+        console.log(value);
+        if (value) {
+            const listItems = items.val().map(item => Li(item));
+            anchor.replaceContent(Ul(listItems));
+        } else {
+            anchor.remove();
+        }
+    };
+
+    condition.subscribe(updateContent);
+    items.subscribe(updateContent);
+    updateContent(condition.val()); // Initial render
+
+    return anchor;
+}
+
+// use ConditionalList
+const condition = new Observable(true);
+let id = 0;
+const items = new Observable.array([]);
+
+document.body.appendChild(Div([
+    ConditionalList(condition, items),
+    Button("Toggle").nd.onClick(() => condition.set(!condition.val())),
+    Button("Add").nd.onClick(() => items.push('Item '+(++id))),
+]));
+```
+
+### Anchor-Based Layout Manager
+
+```javascript
+function LayoutManager() {
+    const header = new Anchor("Header");
+    const content = new Anchor("Content");
+    const footer = new Anchor("Footer");
+    
+    return {
+        setHeader: (component) => header.replaceContent(component),
+        setContent: (component) => content.replaceContent(component),
+        setFooter: (component) => footer.replaceContent(component),
+        render: () => Div([header, content, footer])
+    };
+}
+```
+
 ## Best Practices
 
-1. **Use anchors for custom rendering systems** - Build optimized conditional logic
+1. **Use descriptive anchor names** for easier debugging
 2. **Anchors are reusable** - Content can be added/removed multiple times
-3. **Use remove(true)** only when permanently destroying the anchor
+3. **Use `removeWithAnchors()` only when permanently destroying** the anchor
 4. **Anchors are invisible** - They don't affect layout or styling
-5. **Create your own patterns** - Anchors enable custom rendering solutions that can outperform built-in functions
+5. **Prefer `replaceContent()` over `remove()` + `appendChild()`** for better performance
+6. **Create custom patterns** - Anchors enable custom rendering solutions
+7. **Consider memory implications** when creating many anchors
+8. **Use batch operations** for multiple content updates
+
+## Common Pitfalls
+
+❌ **Don't do this:**
+```javascript
+// Inefficient - creates unnecessary DOM manipulations
+anchor.remove();
+anchor.appendChild(content1);
+anchor.remove();
+anchor.appendChild(content2);
+```
+
+✅ **Do this instead:**
+```javascript
+// Efficient - direct replacement
+anchor.replaceContent(content1);
+anchor.replaceContent(content2);
+```
 
 ## Next Steps
 
-- **[Getting Started](docs/getting-started.md)** - Installation and first steps
-- **[Core Concepts](docs/core-concepts.md)** - Understanding the fundamentals
-- **[Observables](docs/observables.md)** - Reactive state management
-- **[Elements](docs/elements.md)** - Creating and composing UI
-- **[Conditional Rendering](docs/conditional-rendering.md)** - Dynamic content
-- **[Routing](docs/routing.md)** - Navigation and URL management
-- **[State Management](docs/state-management.md)** - Global state patterns
-- **[Lifecycle Events](docs/lifecycle-events.md)** - Lifecycle events
-- **[Memory Management](docs/memory-management.md)** - Memory management
+- **[Getting Started](getting-started.md)** - Installation and first steps
+- **[Core Concepts](core-concepts.md)** - Understanding the fundamentals
+- **[Observables](observables.md)** - Reactive state management
+- **[Elements](elements.md)** - Creating and composing UI
+- **[Conditional Rendering](conditional-rendering.md)** - Dynamic content
+- **[List Rendering](list-rendering.md)** - (ForEach | ForEachArray) and dynamic lists
+- **[Routing](routing.md)** - Navigation and URL management
+- **[State Management](state-management.md)** - Global state patterns
+- **[Memory Management](memory-management.md)** - Memory management