native-document 1.0.14 → 1.0.16

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;const n=[];this.subscribe=function(r){const o=e.subscribe(e=>{r&&r(t(e))});return n.push(o),o},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(){n.forEach(e=>e())}}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 h=this;Object.defineProperty(h,"$value",{get:()=>h.val(),set:e=>(h.set(e),h)}),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){return e.replace(new RegExp(`^[${t}]+|[${t}]+$`,"g"),"")};function d(e){return new a(e)}d.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},d.batch=function(e){const t=d(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},d.getById=function(e){const t=o.getObservableById(parseInt(e));if(!t)throw new s("Observable.getById : No observable found with id "+e);return t},d.cleanup=function(e){e.cleanup()},d.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(d.value(e))}),t}return e},d.init=function(e){const t={};for(const n in e){const r=e[n];u.isJson(r)?t[n]=d.init(r):u.isArray(r)?t[n]=d.array(r):t[n]=d(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)}})},d.object=d.init,d.json=d.init,d.update=function(e,t){for(const n in t){const r=e[n],o=t[n];if(u.isObservable(r)){if(u.isArray(o)){d.update(r,o);continue}r.set(o)}else u.isProxy(r)?d.update(r,o):e[n]=o}},d.array=function(e){if(!Array.isArray(e))throw new s("Observable.array : target must be an array");const t=d(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","findIndex"].forEach(e=>{t[e]=function(n){return t.val()[e](n)}}),t},d.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 p(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 f(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 b(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 m(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 v={elements:new Map,observer:null,checkMutation: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)))}}(function(){for(const[e,t]of v.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(v.elements.has(e))t=v.elements.get(e);else{const n=document.body.contains(e);t={inDom:n,mounted:new Set,unmounted:new Set},v.elements.set(e,t)}return{watch:()=>v.elements.set(e,t),disconnect:()=>v.elements.delete(e),mounted:e=>t.mounted.add(e),unmounted:e=>t.unmounted.add(e)}}};v.observer=new MutationObserver(v.checkMutation),v.observer.observe(document.body,{childList:!0,subtree:!0});const y=e=>u.isFunction(e)?y(e()):u.isElement(e)?e:E(e);function g(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(y(n),r):e.nativeInsertBefore(y(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 w=function(){const e=[];return{list:()=>e,add:t=>e.push(t)}}(),O=function(e,t){const n=document.createTextNode("");return t.subscribe(e=>n.textContent=String(e)),n.textContent=t.val(),e&&e.appendChild(n),n},C=function(e,t){const n=document.createTextNode("");return n.textContent=String(t),e&&e.appendChild(n),n},E=function(e){return u.isObservable(e)?O(null,e):C(null,e)},S={createElement:e=>e?document.createElement(e):new g("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)?O(t,e):e&&C(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=d.computed(()=>o.map(e=>u.isObservable(e)?e.val():e).join(" ")||" ",e)}c.includes(r)?b(e,r,o):u.isObservable(o)?m(e,r,o):"class"===r&&u.isJson(o)?p(e,o):"style"===r&&u.isJson(o)?f(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)?S.processChildren(t,e):(u.isFunction(t)&&(t=t(),S.processChildren(t(),e)),u.isElement(t)&&S.processChildren(t,e))},e.nd.lifecycle=function(n){return t=t||v.watch(e),n.mounted&&t.mounted(n.mounted),n.unmounted&&t.unmounted(n.unmounted),e},e.nd.mounted=n=>(t=t||v.watch(e),t.mounted(n),e),e.nd.unmounted=n=>(t=t||v.watch(e),t.unmounted(n),e)}(o),w.list().forEach(e=>{e?.element?.setup&&e.element.setup(o,t)}),o}};function A(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=S.createElement(n);return S.processAttributes(r,e),S.processChildren(o,r),S.setup(r,e,t)}catch(e){r.error("ElementCreation",`Error creating ${n}`,e)}};return o.hold=(e,t)=>()=>o(e,t),o}class I extends Error{constructor(e,t){super(`${e}\n\n${t.join("\n")}\n\n`)}}const k={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))})},$=(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 I("Argument validation failed",r)})(r,t,e.name||n),e.apply(this,r)}};Function.prototype.args=function(...e){return $(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 d.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 d.getById(n)}):this};const F=function(){const e=new Map;return{use(t){const{observer:n,subscribers:r}=e.get(t),o=d(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=d(n);return e.set(t,{observer:r,subscribers:new Set}),r},get(t){const n=e.get(t);return n?n.observer:null},getWithSubscribers:t=>e.get(t),delete(t){const n=e.get(t);n&&(n.observer.cleanup(),n.subscribers.forEach(e=>e.destroy()),n.observer.clear())}}}();const x=function(e,t,n=null){if(!u.isObservable(e))return r.warn("ShowIf","ShowIf : condition must be an Observable / "+n,e);const o=new g("Show if : "+(n||""));let s=null;const i=()=>s||(s="function"==typeof t?t():t,u.isStringOrObservable(s)&&(s=E(s)),s);return e.val()&&o.appendChild(i()),e.subscribe(e=>{e?o.appendChild(i()):o.remove()}),o},R=function(e,t){if(!u.isObservable(e))throw new s("Toggle : condition must be an Observable");const n=new g,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},q=function(e,t,n){if(!u.isObservable(e))throw new s("Toggle : condition must be an Observable");return R(e,{true:t,false:n})},T=A("div"),D=A("span"),j=A("label"),L=A("p"),B=L,M=A("strong"),N=A("h1"),H=A("h2"),P=A("h3"),_=A("h4"),V=A("h5"),U=A("h6"),z=A("br"),J=A("a"),W=A("pre"),K=A("code"),Q=A("blockquote"),G=A("hr"),X=A("em"),Y=A("small"),Z=A("mark"),ee=A("del"),te=A("ins"),ne=A("sub"),re=A("sup"),oe=A("abbr"),se=A("cite"),ie=A("q"),ae=A("dl"),ue=A("dt"),ce=A("dd"),le=A("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}),de=A("input"),he=A("textarea"),pe=he,fe=A("select"),be=A("fieldset"),me=A("option"),ve=A("legend"),ye=A("datalist"),ge=A("output"),we=A("progress"),Oe=A("meter"),Ce=A("button"),Ee=A("main"),Se=A("section"),Ae=A("article"),Ie=A("aside"),ke=A("nav"),$e=A("figure"),Fe=A("figcaption"),xe=A("header"),Re=A("footer"),qe=A("img"),Te=function(e,t){return qe({src:e,...t})},De=A("details"),je=A("summary"),Le=A("dialog"),Be=A("menu"),Me=A("ol"),Ne=A("ul"),He=A("li"),Pe=A("audio"),_e=A("video"),Ve=A("source"),Ue=A("track"),ze=A("canvas"),Je=A("svg"),We=A("time"),Ke=A("data"),Qe=A("address"),Ge=A("kbd"),Xe=A("samp"),Ye=A("var"),Ze=A("wbr"),et=A("caption"),tt=A("table"),nt=A("thead"),rt=A("tfoot"),ot=A("tbody"),st=A("tr"),it=st,at=A("th"),ut=at,ct=at,lt=A("td"),dt=lt,ht=A("");var pt=Object.freeze({__proto__:null,Abbr:oe,Address:Qe,Anchor:g,Article:Ae,Aside:Ie,AsyncImg:function(e,t,n,r){const o=Te(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:Pe,BaseImage:qe,Blockquote:Q,Br:z,Button:Ce,Canvas:ze,Caption:et,Checkbox:e=>de({type:"checkbox",...e}),Cite:se,Code:K,ColorInput:e=>de({type:"color",...e}),Data:Ke,Datalist:ye,DateInput:e=>de({type:"date",...e}),DateTimeInput:e=>de({type:"datetime-local",...e}),Dd:ce,Del:ee,Details:De,Dialog:Le,Div:T,Dl:ae,Dt:ue,Em:X,EmailInput:e=>de({type:"email",...e}),FieldSet:be,FigCaption:Fe,Figure:$e,FileInput:e=>de({type:"file",...e}),Footer:Re,ForEach:function(e,t,n){const o=new g("ForEach"),s=o.endElement(),i=o.startElement();let a=new Map;const c=new Set,l=(e,o)=>{const s=((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,o,n);if(a.has(s)){const e=a.get(s);e.indexObserver.set(o),e.isNew=!1}else try{const n=d(o);let r=t(e,n);u.isStringOrObservable(r)&&(r=E(r)),a.set(s,{isNew:!0,child:r,indexObserver:n})}catch(e){throw r.error("ForEach",`Error creating element for key ${s}`,e),e}return s},h=()=>{const t=u.isObservable(e)?e.val():e;if(c.clear(),Array.isArray(t))t.forEach((e,t)=>c.add(l(e,t)));else for(const e in t)c.add(l(t[e],e));((e,t)=>{const n=[];for(const[r,o]of e.entries())t.has(r)||n.push({key:r,cacheItem:o});0!==n.length&&n.forEach(({key:t,cacheItem:n})=>{n.child.remove(),n.indexObserver.cleanup(),e.delete(t)})})(a,c),(()=>{const e=s.parentNode;if(!e)return;let t=i;const n=[],r=[];let u=null,l=e=>{u&&(n.push({child:u,before:e}),u=null)};const d=Array.from(c);for(let e=0;e<d.length;e++){const n=d[e],o=a.get(n);if(!o)continue;if(t&&t.nextSibling===o.child){t=o.child,l(o.child);continue}if(o.isNew){u=u||document.createDocumentFragment(),u.append(o.child),o.isNew=!1;continue}l(o.child);const s=a.get(d[e+1])?.child;s&&o.child.nextSibling!==s&&r.push({child:o.child,before:s}),t=o.child}l(s),n.forEach(({child:t,before:n})=>{n?e.insertBefore(t,n):o.appendChild(t)}),r.forEach(({child:t,before:n})=>{e.insertBefore(t,n)}),l=null})()};return h(),u.isObservable(e)&&e.subscribe(h),o},Form:le,Fragment:ht,H1:N,H2:H,H3:P,H4:_,H5:V,H6:U,Header:xe,HiddenInput:e=>de({type:"hidden",...e}),HideIf:function(e,t,n){const r=d(!e.val());return e.subscribe(e=>r.set(!e)),x(r,t,n)},HideIfNot:function(e,t,n){return x(e,t,n)},Hr:G,Img:Te,Input:de,Ins:te,Kbd:Ge,Label:j,LazyImg:function(e,t){return Te(e,{...t,loading:"lazy"})},Legend:ve,Link:J,ListItem:He,Main:Ee,Mark:Z,Match:R,Menu:Be,Meter:Oe,MonthInput:e=>de({type:"month",...e}),NativeDocumentFragment:g,Nav:ke,NumberInput:e=>de({type:"number",...e}),Option:me,OrderedList:Me,Output:ge,P:L,Paragraph:B,PasswordInput:e=>de({type:"password",...e}),Pre:W,Progress:we,Quote:ie,Radio:e=>de({type:"radio",...e}),RangeInput:e=>de({type:"range",...e}),ReadonlyInput:e=>de({readonly:!0,...e}),Samp:Xe,SearchInput:e=>de({type:"search",...e}),Section:Se,Select:fe,ShowIf:x,SimpleButton:(e,t)=>Ce(e,{type:"button",...t}),Small:Y,Source:Ve,Span:D,Strong:M,Sub:ne,SubmitButton:(e,t)=>Ce(e,{type:"submit",...t}),Summary:je,Sup:re,Svg:Je,Switch:q,TBody:ot,TBodyCell:dt,TFoot:rt,TFootCell:ct,THead:nt,THeadCell:ut,TRow:it,Table:tt,Td:lt,TelInput:e=>de({type:"tel",...e}),TextArea:he,TextInput:pe,Th:at,Time:We,TimeInput:e=>de({type:"time",...e}),Tr:st,Track:Ue,UnorderedList:Ne,UrlInput:e=>de({type:"url",...e}),Var:Ye,Video:_e,Wbr:Ze,WeekInput:e=>de({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,q(e,t,n))}}});const ft={};function bt(e,t,n={}){e="/"+l(e,"/");let r=null,o=n.name||null;const s=n.middlewares||[],i=n.shouldRebuild||!1,a=n.with||{},u={},c=[],d=e=>{if(!e)return null;const[t,n]=e.split(":");let r=a[t];return!r&&n&&(r=ft[n]),r||(r="[^/]+"),r=r.replace("(","(?:"),{name:t,pattern:`(${r})`}},h=()=>{if(r)return r;const t=e.replace(/\{(.*?)}/gi,(e,t)=>{const n=d(t);return n&&n.pattern?(u[n.name]=n.pattern,c.push(n.name),n.pattern):e});return r=new RegExp("^"+t+"$"),r};this.name=()=>o,this.component=()=>t,this.middlewares=()=>s,this.shouldRebuild=()=>i,this.path=()=>e,this.match=function(e){e="/"+l(e,"/");if(!h().exec(e))return!1;const t={};return h().exec(e).forEach((e,n)=>{if(n<1)return;const r=c[n-1];t[r]=e}),t},this.url=function(t){const n=e.replace(/\{(.*?)}/gi,(e,n)=>{const r=d(n);if(t.params&&t.params[r.name])return t.params[r.name];throw new Error(`Missing parameter '${r.name}'`)}),r="object"==typeof t.query?new URLSearchParams(t.query).toString():null;return(t.basePath?t.basePath:"")+(r?`${n}?${r}`:n)}}class mt extends Error{constructor(e,t){super(e),this.context=t}}const vt=(e,t)=>{const n=[];return e.forEach(e=>{n.push(l(e.suffix,"/"))}),n.push(l(t,"/")),n.join("/")},yt=(e,t)=>{const n=[];return e.forEach(e=>{e.options.middlewares&&n.push(...e.options.middlewares)}),t&&n.push(...t),n},gt=(e,t)=>{const n=[];return e.forEach(e=>{e.options?.name&&n.push(e.options.name)}),t&&n.push(t),n.join(".")};function wt(){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 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){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 Ct(){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 St(e={}){const t=[],n={},o=[],s=[],i={route:null,params:null,query:null,path:null,hash:null};if("hash"===e.mode)wt.apply(this,[]);else if("history"===e.mode)Ot.apply(this,[]);else{if("memory"!==e.mode)throw new mt("Invalid router mode "+e.mode);Ct.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 bt(vt(o,e),r,{...s,middlewares:yt(o,s?.middlewares||[]),name:s?.name?gt(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 mt("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 mt(`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 mt(`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="/"+l(r,"/");let i,a=null;for(const e of t)if(i=e.match(s),i){a=e;break}if(!a)throw new mt(`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 mt("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 At(e,t){const{to:n,href:r,...o}=e,s=n||r;if(u.isString(s)){const e=St.get();return J({...o,href:s},t).nd.on.prevent.click(()=>{e.push(s)})}const i=s.router||Et,a=St.get(i);if(console.log(i),!a)throw new mt('Router not found "'+i+'" for link "'+s.name+'"');const c=a.generateUrl(s.name,s.params,s.query);return J({...o,href:c},t).nd.on.prevent.click(()=>{a.push(c)})}St.routers={},St.create=function(t,n){if(!u.isFunction(n))throw r.error("Router","Callback must be a function",e),new mt("Callback must be a function");const o=new St(t);return St.routers[t.name||Et]=o,n(o),o.init(t.entry),o.mount=function(e){if(u.isString(e)){const t=document.querySelector(e);if(!t)throw new mt(`Container not found for selector: ${e}`);e=t}else if(!u.isElement(e))throw new mt("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},St.get=function(e){const t=St.routers[e||Et];if(!t)throw new mt(`Router not found for name: ${e}`);return t},St.push=function(e,t=null){return St.get(t).push(e)},St.replace=function(e,t=null){return St.get(t).replace(e)},St.forward=function(e=null){return St.get(e).forward()},St.back=function(e=null){return St.get(e).back()},At.blank=function(e,t){return J({...e,target:"_blank"},t)};var It=Object.freeze({__proto__:null,Link:At,RouteParamPatterns:ft,Router:St});return t.ArgTypes=k,t.ElementCreator=S,t.HtmlElementWrapper=A,t.Observable=d,t.Store=F,t.elements=pt,t.router=It,t.withValidation=$,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={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}({});

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