@ryupold/vode 1.5.2 → 1.6.0

package/README.md

@@ -503,6 +503,10 @@ mergeClass('foo', ['baz', 'bar']);  // -> 'foo baz bar'
 mergeClass(['foo'], { bar: true, baz: false }); // -> 'foo bar'
 mergeClass({zig: true, zag: false}, 'foo', ['baz', 'bar']);  // -> 'zig foo baz bar'
 
+// Merge style props intelligently
+mergeStyle({ color: 'red' }, 'font-weight: bold;'); // -> 'color: red; font-weight: bold;'
+mergeStyle('color: white; background-color: blue;', { marginTop: '10px', color: 'green' }); // -> 'background-color: blue; margin-top: 10px; color: green;'
+
 const myVode = [DIV, { class: 'foo' }, [SPAN, 'hello'], [STRONG, 'world']];
 
 // access parts of a vode

package/dist/vode.js

@@ -236,6 +236,7 @@ var V = (() => {
     hydrate: () => hydrate,
     memo: () => memo,
     mergeClass: () => mergeClass,
+    mergeStyle: () => mergeStyle,
     props: () => props,
     tag: () => tag,
     vode: () => vode
@@ -263,6 +264,7 @@ var V = (() => {
     _vode.qSync = null;
     _vode.qAsync = null;
     _vode.stats = { lastSyncRenderTime: 0, lastAsyncRenderTime: 0, syncRenderCount: 0, asyncRenderCount: 0, liveEffectCount: 0, patchCount: 0, syncRenderPatchCount: 0, asyncRenderPatchCount: 0 };
+    const patchableState = state;
     Object.defineProperty(state, "patch", {
       enumerable: false,
       configurable: true,
@@ -278,28 +280,28 @@ var V = (() => {
             while (v.done === false) {
               _vode.stats.liveEffectCount++;
               try {
-                _vode.patch(v.value, isAsync);
+                patchableState.patch(v.value, isAsync);
                 v = await generator.next();
               } finally {
                 _vode.stats.liveEffectCount--;
               }
             }
-            _vode.patch(v.value, isAsync);
+            patchableState.patch(v.value, isAsync);
           } finally {
             _vode.stats.liveEffectCount--;
           }
         } else if (action.then) {
           _vode.stats.liveEffectCount++;
           try {
-            const nextState = await action;
-            _vode.patch(nextState, isAsync);
+            const resolvedPatch = await action;
+            patchableState.patch(resolvedPatch, isAsync);
           } finally {
             _vode.stats.liveEffectCount--;
           }
         } else if (Array.isArray(action)) {
           if (action.length > 0) {
             for (const p of action) {
-              _vode.patch(p, !document.hidden && !!_vode.asyncRenderer);
+              patchableState.patch(p, !document.hidden && !!_vode.asyncRenderer);
             }
           } else {
             _vode.qSync = mergeState(_vode.qSync || {}, _vode.qAsync, false);
@@ -312,7 +314,7 @@ var V = (() => {
             _vode.renderSync();
           }
         } else if (typeof action === "function") {
-          _vode.patch(action(_vode.state), isAsync);
+          patchableState.patch(action(_vode.state), isAsync);
         } else {
           if (isAsync) {
             _vode.stats.asyncRenderPatchCount++;
@@ -329,7 +331,7 @@ var V = (() => {
     function renderDom(isAsync) {
       const sw = Date.now();
       const vom = dom(_vode.state);
-      _vode.vode = render(_vode.state, _vode.patch, container.parentElement, 0, _vode.vode, vom);
+      _vode.vode = render(_vode.state, container.parentElement, 0, _vode.vode, vom);
       if (container.tagName.toUpperCase() !== vom[0].toUpperCase()) {
         container = _vode.vode.node;
         container._vode = _vode;
@@ -378,22 +380,20 @@ var V = (() => {
         if (_vode.qAsync) _vode.renderAsync();
       }
     });
-    _vode.patch = state.patch;
-    _vode.state = state;
+    _vode.state = patchableState;
     const root = container;
     root._vode = _vode;
     _vode.vode = render(
       state,
-      _vode.patch,
       container.parentElement,
       Array.from(container.parentElement.children).indexOf(container),
       hydrate(container, true),
       dom(state)
     );
     for (const effect of initialPatches) {
-      _vode.patch(effect);
+      patchableState.patch(effect);
     }
-    return _vode.patch;
+    return (action) => patchableState.patch(action);
   }
   function defuse(container) {
     if (container?._vode) {
@@ -536,7 +536,7 @@ var V = (() => {
     }
     return target;
   }
-  function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
+  function render(state, parent, childIndex, oldVode, newVode, xmlns) {
     try {
       newVode = remember(state, newVode, oldVode);
       const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
@@ -546,7 +546,7 @@ var V = (() => {
       const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
       const oldNode = oldIsText ? oldVode : oldVode?.node;
       if (isNoVode) {
-        oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
+        oldNode?.onUnmount && state.patch(oldNode.onUnmount(oldNode));
         oldNode?.remove();
         return void 0;
       }
@@ -569,7 +569,7 @@ var V = (() => {
       if (isText && (!oldNode || !oldIsText)) {
         const text = document.createTextNode(newVode);
         if (oldNode) {
-          oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+          oldNode.onUnmount && state.patch(oldNode.onUnmount(oldNode));
           oldNode.replaceWith(text);
         } else {
           if (parent.childNodes[childIndex]) {
@@ -589,13 +589,13 @@ var V = (() => {
         xmlns = properties?.xmlns || xmlns;
         const newNode = xmlns ? document.createElementNS(xmlns, newVode[0]) : document.createElement(newVode[0]);
         newVode.node = newNode;
-        patchProperties(state, patch, newNode, void 0, properties);
+        patchProperties(state, newNode, void 0, properties);
         if (!!properties && "catch" in properties) {
           newVode.node["catch"] = null;
           newVode.node.removeAttribute("catch");
         }
         if (oldNode) {
-          oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+          oldNode.onUnmount && state.patch(oldNode.onUnmount(oldNode));
           oldNode.replaceWith(newNode);
         } else {
           if (parent.childNodes[childIndex]) {
@@ -608,11 +608,11 @@ var V = (() => {
         if (newChildren) {
           for (let i = 0; i < newChildren.length; i++) {
             const child2 = newChildren[i];
-            const attached = render(state, patch, newNode, i, void 0, child2, xmlns);
+            const attached = render(state, newNode, i, void 0, child2, xmlns);
             newVode[properties ? i + 2 : i + 1] = attached;
           }
         }
-        newNode.onMount && patch(newNode.onMount(newNode));
+        newNode.onMount && state.patch(newNode.onMount(newNode));
         return newVode;
       }
       if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
@@ -626,10 +626,10 @@ var V = (() => {
           const prev = newvode[1];
           newvode[1] = remember(state, newvode[1], oldvode[1]);
           if (prev !== newvode[1]) {
-            patchProperties(state, patch, oldNode, oldProps, properties);
+            patchProperties(state, oldNode, oldProps, properties);
           }
         } else {
-          patchProperties(state, patch, oldNode, oldProps, properties);
+          patchProperties(state, oldNode, oldProps, properties);
         }
         if (!!properties?.catch && oldProps?.catch !== properties.catch) {
           newVode.node["catch"] = null;
@@ -641,7 +641,7 @@ var V = (() => {
           for (let i = 0; i < newKids.length; i++) {
             const child2 = newKids[i];
             const oldChild = oldKids && oldKids[i];
-            const attached = render(state, patch, oldNode, i, oldChild, child2, xmlns);
+            const attached = render(state, oldNode, i, oldChild, child2, xmlns);
             if (attached) {
               newVode[hasProps ? i + 2 : i + 1] = attached;
             }
@@ -650,7 +650,7 @@ var V = (() => {
         if (oldKids) {
           const newKidsCount = newKids ? newKids.length : 0;
           for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
-            render(state, patch, oldNode, i, oldKids[i], void 0, xmlns);
+            render(state, oldNode, i, oldKids[i], void 0, xmlns);
           }
         }
         return newVode;
@@ -661,7 +661,6 @@ var V = (() => {
         const handledVode = typeof catchVode === "function" ? catchVode(state, error) : catchVode;
         return render(
           state,
-          patch,
           parent,
           childIndex,
           hydrate(newVode?.node || oldVode?.node, true),
@@ -708,15 +707,15 @@ var V = (() => {
       return c;
     }
   }
-  function patchProperties(s, patch, node, oldProps, newProps) {
+  function patchProperties(s, node, oldProps, newProps) {
     if (!newProps && !oldProps) return;
     if (oldProps) {
       for (const key in oldProps) {
         const oldValue = oldProps[key];
         const newValue = newProps?.[key];
         if (oldValue !== newValue) {
-          if (newProps) newProps[key] = patchProperty(s, patch, node, key, oldValue, newValue);
-          else patchProperty(s, patch, node, key, oldValue, void 0);
+          if (newProps) newProps[key] = patchProperty(s, node, key, oldValue, newValue);
+          else patchProperty(s, node, key, oldValue, void 0);
         }
       }
     }
@@ -724,17 +723,17 @@ var V = (() => {
       for (const key in newProps) {
         if (!(key in oldProps)) {
           const newValue = newProps[key];
-          newProps[key] = patchProperty(s, patch, node, key, void 0, newValue);
+          newProps[key] = patchProperty(s, node, key, void 0, newValue);
         }
       }
     } else if (newProps) {
       for (const key in newProps) {
         const newValue = newProps[key];
-        newProps[key] = patchProperty(s, patch, node, key, void 0, newValue);
+        newProps[key] = patchProperty(s, node, key, void 0, newValue);
       }
     }
   }
-  function patchProperty(s, patch, node, key, oldValue, newValue) {
+  function patchProperty(s, node, key, oldValue, newValue) {
     if (key === "style") {
       if (!newValue) {
         node.style.cssText = "";
@@ -770,9 +769,9 @@ var V = (() => {
         let eventHandler = null;
         if (typeof newValue === "function") {
           const action = newValue;
-          eventHandler = (evt) => patch(action(s, evt));
+          eventHandler = (evt) => s.patch(action(s, evt));
         } else if (typeof newValue === "object") {
-          eventHandler = () => patch(newValue);
+          eventHandler = () => s.patch(newValue);
         }
         node[key] = eventHandler;
       } else {
@@ -1052,6 +1051,26 @@ var V = (() => {
     return finalClass;
   }
 
+  // src/merge-style.ts
+  var tempDivForStyling = document.createElement("div");
+  function mergeStyle(...props2) {
+    try {
+      const merged = tempDivForStyling.style;
+      for (const style of props2) {
+        if (typeof style === "object" && style !== null) {
+          for (const key in style) {
+            merged[key] = style[key];
+          }
+        } else if (typeof style === "string") {
+          merged.cssText += ";" + style;
+        }
+      }
+      return merged.cssText;
+    } finally {
+      tempDivForStyling.style.cssText = "";
+    }
+  }
+
   // src/state-context.ts
   var KeyStateContext = class {
     constructor(state, path) {

package/dist/vode.min.js

@@ -1 +1 @@
-"use strict";var V=(()=>{var D=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var B=(e,n)=>{for(var a in n)D(e,a,{get:n[a],enumerable:!0})},_=(e,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of G(n))!K.call(e,t)&&t!==a&&D(e,t,{get:()=>n[t],enumerable:!(s=U(n,t))||s.enumerable});return e};var q=e=>_(D({},"__esModule",{value:!0}),e);var qn={};B(qn,{A:()=>ot,ABBR:()=>nt,ADDRESS:()=>st,ANIMATE:()=>ro,ANIMATEMOTION:()=>co,ANIMATETRANSFORM:()=>io,ANNOTATION:()=>dn,ANNOTATION_XML:()=>un,AREA:()=>at,ARTICLE:()=>rt,ASIDE:()=>ct,AUDIO:()=>it,B:()=>pt,BASE:()=>lt,BDI:()=>St,BDO:()=>ft,BLOCKQUOTE:()=>dt,BODY:()=>ut,BR:()=>Tt,BUTTON:()=>yt,CANVAS:()=>gt,CAPTION:()=>xt,CIRCLE:()=>po,CITE:()=>ht,CLIPPATH:()=>lo,CODE:()=>mt,COL:()=>Et,COLGROUP:()=>bt,DATA:()=>At,DATALIST:()=>Pt,DD:()=>Ct,DEFS:()=>So,DEL:()=>Mt,DESC:()=>fo,DETAILS:()=>Nt,DFN:()=>Rt,DIALOG:()=>Ot,DIV:()=>Dt,DL:()=>vt,DT:()=>Lt,DelegateStateContext:()=>V,ELLIPSE:()=>uo,EM:()=>It,EMBED:()=>Vt,FEBLEND:()=>To,FECOLORMATRIX:()=>yo,FECOMPONENTTRANSFER:()=>go,FECOMPOSITE:()=>xo,FECONVOLVEMATRIX:()=>ho,FEDIFFUSELIGHTING:()=>mo,FEDISPLACEMENTMAP:()=>Eo,FEDISTANTLIGHT:()=>bo,FEDROPSHADOW:()=>Ao,FEFLOOD:()=>Po,FEFUNCA:()=>Co,FEFUNCB:()=>Mo,FEFUNCG:()=>No,FEFUNCR:()=>Ro,FEGAUSSIANBLUR:()=>Oo,FEIMAGE:()=>Do,FEMERGE:()=>vo,FEMERGENODE:()=>Lo,FEMORPHOLOGY:()=>Io,FEOFFSET:()=>Vo,FEPOINTLIGHT:()=>Fo,FESPECULARLIGHTING:()=>ko,FESPOTLIGHT:()=>jo,FETILE:()=>Ho,FETURBULENCE:()=>Uo,FIELDSET:()=>Ft,FIGCAPTION:()=>kt,FIGURE:()=>jt,FILTER:()=>Go,FOOTER:()=>Ht,FOREIGNOBJECT:()=>Ko,FORM:()=>Ut,G:()=>Bo,H1:()=>Gt,H2:()=>Kt,H3:()=>Bt,H4:()=>_t,H5:()=>qt,H6:()=>Xt,HEAD:()=>$t,HEADER:()=>wt,HGROUP:()=>Yt,HR:()=>Wt,HTML:()=>Jt,I:()=>Qt,IFRAME:()=>zt,IMAGE:()=>_o,IMG:()=>Zt,INPUT:()=>te,INS:()=>ee,KBD:()=>oe,KeyStateContext:()=>I,LABEL:()=>ne,LEGEND:()=>se,LI:()=>ae,LINE:()=>qo,LINEARGRADIENT:()=>Xo,LINK:()=>re,MACTION:()=>Tn,MAIN:()=>ce,MAP:()=>ie,MARK:()=>pe,MARKER:()=>$o,MASK:()=>wo,MATH:()=>yn,MENU:()=>le,MERROR:()=>gn,META:()=>Se,METADATA:()=>Yo,METER:()=>fe,MFRAC:()=>xn,MI:()=>hn,MMULTISCRIPTS:()=>mn,MN:()=>En,MO:()=>bn,MOVER:()=>An,MPADDED:()=>Pn,MPATH:()=>Wo,MPHANTOM:()=>Cn,MPRESCRIPTS:()=>Mn,MROOT:()=>Nn,MROW:()=>Rn,MS:()=>On,MSPACE:()=>Dn,MSQRT:()=>vn,MSTYLE:()=>Ln,MSUB:()=>In,MSUBSUP:()=>Vn,MSUP:()=>Fn,MTABLE:()=>kn,MTD:()=>jn,MTEXT:()=>Hn,MTR:()=>Un,MUNDER:()=>Gn,MUNDEROVER:()=>Kn,NAV:()=>de,NOSCRIPT:()=>ue,OBJECT:()=>Te,OL:()=>ye,OPTGROUP:()=>ge,OPTION:()=>xe,OUTPUT:()=>he,P:()=>me,PATH:()=>Jo,PATTERN:()=>Qo,PICTURE:()=>Ee,POLYGON:()=>zo,POLYLINE:()=>Zo,PRE:()=>be,PROGRESS:()=>Ae,Q:()=>Pe,RADIALGRADIENT:()=>tn,RECT:()=>en,RP:()=>Ce,RT:()=>Me,RUBY:()=>Ne,S:()=>Re,SAMP:()=>Oe,SCRIPT:()=>De,SEARCH:()=>ve,SECTION:()=>Le,SELECT:()=>Ie,SEMANTICS:()=>Bn,SET:()=>on,SLOT:()=>Ve,SMALL:()=>Fe,SOURCE:()=>ke,SPAN:()=>je,STOP:()=>nn,STRONG:()=>He,STYLE:()=>Ue,SUB:()=>Ge,SUMMARY:()=>Ke,SUP:()=>Be,SVG:()=>sn,SWITCH:()=>an,SYMBOL:()=>rn,TABLE:()=>_e,TBODY:()=>qe,TD:()=>Xe,TEMPLATE:()=>$e,TEXT:()=>cn,TEXTAREA:()=>we,TEXTPATH:()=>pn,TFOOT:()=>Ye,TH:()=>We,THEAD:()=>Je,TIME:()=>Qe,TITLE:()=>ze,TR:()=>Ze,TRACK:()=>to,TSPAN:()=>ln,U:()=>eo,UL:()=>oo,USE:()=>Sn,VAR:()=>no,VIDEO:()=>so,VIEW:()=>fn,WBR:()=>ao,app:()=>$,child:()=>Z,childCount:()=>z,children:()=>M,childrenStart:()=>O,createPatch:()=>J,createState:()=>W,defuse:()=>w,globals:()=>E,hydrate:()=>R,memo:()=>Y,mergeClass:()=>_n,props:()=>b,tag:()=>Q,vode:()=>X});var E={currentViewTransition:void 0,requestAnimationFrame:window.requestAnimationFrame?window.requestAnimationFrame.bind(window):(e=>e()),startViewTransition:document.startViewTransition?document.startViewTransition.bind(document):null};function X(e,n,...a){if(!e)throw new Error("first argument to vode() must be a tag name or a vode");return Array.isArray(e)?e:n?[e,n,...a]:[e,...a]}function $(e,n,a,...s){if(!e?.parentElement)throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!n||typeof n!="object")throw new Error("second argument to app() must be a state object");if(typeof a!="function")throw new Error("third argument to app() must be a function that returns a vode");let t={};t.syncRenderer=E.requestAnimationFrame,t.asyncRenderer=E.startViewTransition,t.qSync=null,t.qAsync=null,t.stats={lastSyncRenderTime:0,lastAsyncRenderTime:0,syncRenderCount:0,asyncRenderCount:0,liveEffectCount:0,patchCount:0,syncRenderPatchCount:0,asyncRenderPatchCount:0},Object.defineProperty(n,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(c,d)=>{if(!(!c||typeof c!="function"&&typeof c!="object"))if(t.stats.patchCount++,c?.next){let S=c;t.stats.liveEffectCount++;try{let g=await S.next();for(;g.done===!1;){t.stats.liveEffectCount++;try{t.patch(g.value,d),g=await S.next()}finally{t.stats.liveEffectCount--}}t.patch(g.value,d)}finally{t.stats.liveEffectCount--}}else if(c.then){t.stats.liveEffectCount++;try{let S=await c;t.patch(S,d)}finally{t.stats.liveEffectCount--}}else if(Array.isArray(c))if(c.length>0)for(let S of c)t.patch(S,!document.hidden&&!!t.asyncRenderer);else{t.qSync=y(t.qSync||{},t.qAsync,!1),t.qAsync=null;try{E.currentViewTransition?.skipTransition()}catch{}t.stats.syncRenderPatchCount++,t.renderSync()}else typeof c=="function"?t.patch(c(t.state),d):d?(t.stats.asyncRenderPatchCount++,t.qAsync=y(t.qAsync||{},c,!1),await t.renderAsync()):(t.stats.syncRenderPatchCount++,t.qSync=y(t.qSync||{},c,!1),t.renderSync())}});function o(c){let d=Date.now(),S=a(t.state);t.vode=P(t.state,t.patch,e.parentElement,0,t.vode,S),e.tagName.toUpperCase()!==S[0].toUpperCase()&&(e=t.vode.node,e._vode=t),c||(t.stats.lastSyncRenderTime=Date.now()-d,t.stats.syncRenderCount++,t.isRendering=!1,t.qSync&&t.renderSync())}let r=o.bind(null,!1),i=o.bind(null,!0);Object.defineProperty(t,"renderSync",{enumerable:!1,configurable:!0,writable:!1,value:()=>{t.isRendering||!t.qSync||(t.isRendering=!0,t.state=y(t.state,t.qSync,!0),t.qSync=null,t.syncRenderer(r))}}),Object.defineProperty(t,"renderAsync",{enumerable:!1,configurable:!0,writable:!1,value:async()=>{if(t.isAnimating||!t.qAsync||(await E.currentViewTransition?.updateCallbackDone,t.isAnimating||!t.qAsync||document.hidden))return;t.isAnimating=!0;let c=Date.now();try{t.state=y(t.state,t.qAsync,!0),t.qAsync=null,E.currentViewTransition=t.asyncRenderer(i),await E.currentViewTransition?.updateCallbackDone}finally{t.stats.lastAsyncRenderTime=Date.now()-c,t.stats.asyncRenderCount++,t.isAnimating=!1}t.qAsync&&t.renderAsync()}}),t.patch=n.patch,t.state=n;let p=e;p._vode=t,t.vode=P(n,t.patch,e.parentElement,Array.from(e.parentElement.children).indexOf(e),R(e,!0),a(n));for(let c of s)t.patch(c);return t.patch}function w(e){if(e?._vode){let a=function(t){if(!t?.node)return;let o=b(t);if(o){for(let i in o)i[0]==="o"&&i[1]==="n"&&(t.node[i]=null);t.node.catch=null}let r=M(t);if(r)for(let i of r)a(i)};var n=a;let s=e._vode;delete e._vode,Object.defineProperty(s.state,"patch",{value:void 0}),Object.defineProperty(s,"renderSync",{value:()=>{}}),Object.defineProperty(s,"renderAsync",{value:()=>{}}),a(s.vode)}}function R(e,n){if(e?.nodeType===Node.TEXT_NODE)return e.nodeValue?.trim()!==""?n?e:e.nodeValue:void 0;if(e.nodeType===Node.COMMENT_NODE)return;if(e.nodeType===Node.ELEMENT_NODE){let s=[e.tagName.toLowerCase()];if(n&&(s.node=e),e?.hasAttributes()){let t={},o=e.attributes;for(let r of o)t[r.name]=r.value;s.push(t)}if(e.hasChildNodes()){let t=[];for(let o of e.childNodes){let r=o&&R(o,n);r?s.push(r):o&&n&&t.push(o)}for(let o of t)o.remove()}return s}else return}function Y(e,n){if(!e||!Array.isArray(e))throw new Error("first argument to memo() must be an array of values to compare");if(typeof n!="function")throw new Error("second argument to memo() must be a function that returns a vode or props object");return n.__memo=e,n}function W(e){if(!e||typeof e!="object")throw new Error("createState() must be called with a state object");return e}function J(e){return e}function Q(e){return e?Array.isArray(e)?e[0]:typeof e=="string"||e.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function b(e){if(Array.isArray(e)&&e.length>1&&e[1]&&!Array.isArray(e[1])&&typeof e[1]=="object"&&e[1].nodeType!==Node.TEXT_NODE)return e[1]}function M(e){let n=O(e);return n>0?e.slice(n):null}function z(e){let n=O(e);return n<0?0:e.length-n}function Z(e,n){let a=O(e);if(a>0)return e[n+a]}function O(e){return b(e)?e.length>2?2:-1:Array.isArray(e)&&e.length>1?1:-1}function y(e,n,a){if(!n)return e;for(let s in n){let t=n[s];if(t&&typeof t=="object"){let o=e[s];o?Array.isArray(t)?e[s]=[...t]:t instanceof Date&&o!==t?e[s]=new Date(t):Array.isArray(o)?e[s]=y({},t,a):typeof o=="object"?y(e[s],t,a):e[s]=y({},t,a):Array.isArray(t)?e[s]=[...t]:t instanceof Date?e[s]=new Date(t):e[s]=y({},t,a)}else t===void 0&&a?delete e[s]:e[s]=t}return e}function P(e,n,a,s,t,o,r){try{o=v(e,o,t);let i=!o||typeof o=="number"||typeof o=="boolean";if(o===t||!t&&i)return t;let p=t?.nodeType===Node.TEXT_NODE,c=p?t:t?.node;if(i){c?.onUnmount&&n(c.onUnmount(c)),c?.remove();return}let d=!i&&et(o),S=!i&&tt(o),g=!!o&&typeof o!="string"&&!!(o?.node||o?.nodeType===Node.TEXT_NODE);if(!d&&!S&&!g&&!t)throw new Error("Invalid vode: "+typeof o+" "+JSON.stringify(o));if(g&&d?o=o.wholeText:g&&S&&(o=[...o]),p&&d)return c.nodeValue!==o&&(c.nodeValue=o),t;if(d&&(!c||!p)){let f=document.createTextNode(o);return c?(c.onUnmount&&n(c.onUnmount(c)),c.replaceWith(f)):a.childNodes[s]?a.insertBefore(f,a.childNodes[s]):a.appendChild(f),f}if(S&&(!c||p||t[0]!==o[0])){let f=o;1 in f&&(f[1]=v(e,f[1],void 0));let x=b(o);r=x?.xmlns||r;let l=r?document.createElementNS(r,o[0]):document.createElement(o[0]);o.node=l,L(e,n,l,void 0,x),x&&"catch"in x&&(o.node.catch=null,o.node.removeAttribute("catch")),c?(c.onUnmount&&n(c.onUnmount(c)),c.replaceWith(l)):a.childNodes[s]?a.insertBefore(l,a.childNodes[s]):a.appendChild(l);let C=M(o);if(C)for(let T=0;T<C.length;T++){let h=C[T],m=P(e,n,l,T,void 0,h,r);o[x?T+2:T+1]=m}return l.onMount&&n(l.onMount(l)),o}if(!p&&S&&t[0]===o[0]){o.node=c;let f=o,x=t,l=b(o),C=!!l,T=b(t);if(f[1]?.__memo){let u=f[1];f[1]=v(e,f[1],x[1]),u!==f[1]&&L(e,n,c,T,l)}else L(e,n,c,T,l);l?.catch&&T?.catch!==l.catch&&(o.node.catch=null,o.node.removeAttribute("catch"));let h=M(o),m=M(t);if(h)for(let u=0;u<h.length;u++){let A=h[u],H=m&&m[u],F=P(e,n,c,u,H,A,r);F&&(o[C?u+2:u+1]=F)}if(m){let u=h?h.length:0;for(let A=m.length-1;A>=u;A--)P(e,n,c,A,m[A],void 0,r)}return o}}catch(i){let p=b(o)?.catch;if(p){let c=typeof p=="function"?p(e,i):p;return P(e,n,a,s,R(o?.node||t?.node,!0),c,r)}else throw i}}function tt(e){return Array.isArray(e)&&e.length>0&&typeof e[0]=="string"}function et(e){return typeof e=="string"||e?.nodeType===Node.TEXT_NODE}function v(e,n,a){if(typeof n!="function")return n;let s=n?.__memo,t=a?.__memo;if(Array.isArray(s)&&Array.isArray(t)&&s.length===t.length){let r=!0;for(let i=0;i<s.length;i++)if(s[i]!==t[i]){r=!1;break}if(r)return a}let o=k(n,e);return typeof o=="object"&&(o.__memo=n?.__memo),o}function k(e,n){return typeof e=="function"?k(e(n),n):e}function L(e,n,a,s,t){if(!(!t&&!s)){if(s)for(let o in s){let r=s[o],i=t?.[o];r!==i&&(t?t[o]=N(e,n,a,o,r,i):N(e,n,a,o,r,void 0))}if(t&&s){for(let o in t)if(!(o in s)){let r=t[o];t[o]=N(e,n,a,o,void 0,r)}}else if(t)for(let o in t){let r=t[o];t[o]=N(e,n,a,o,void 0,r)}}}function N(e,n,a,s,t,o){if(s==="style")if(!o)a.style.cssText="";else if(typeof o=="string")t!==o&&(a.style.cssText=o);else if(t&&typeof t=="object"){for(let r in t)o[r]||(a.style[r]=null);for(let r in o){let i=t[r],p=o[r];i!==p&&(a.style[r]=p)}}else for(let r in o)a.style[r]=o[r];else if(s==="class")o?a.setAttribute("class",j(o)):a.removeAttribute("class");else if(s[0]==="o"&&s[1]==="n")if(o){let r=null;if(typeof o=="function"){let i=o;r=p=>n(i(e,p))}else typeof o=="object"&&(r=()=>n(o));a[s]=r}else a[s]=null;else a[s]=o,o==null||o===!1?a.removeAttribute(s):a.setAttribute(s,o);return o}function j(e){return typeof e=="string"?e:Array.isArray(e)?e.map(j).join(" "):typeof e=="object"?Object.keys(e).filter(n=>e[n]).join(" "):""}var ot="a",nt="abbr",st="address",at="area",rt="article",ct="aside",it="audio",pt="b",lt="base",St="bdi",ft="bdo",dt="blockquote",ut="body",Tt="br",yt="button",gt="canvas",xt="caption",ht="cite",mt="code",Et="col",bt="colgroup",At="data",Pt="datalist",Ct="dd",Mt="del",Nt="details",Rt="dfn",Ot="dialog",Dt="div",vt="dl",Lt="dt",It="em",Vt="embed",Ft="fieldset",kt="figcaption",jt="figure",Ht="footer",Ut="form",Gt="h1",Kt="h2",Bt="h3",_t="h4",qt="h5",Xt="h6",$t="head",wt="header",Yt="hgroup",Wt="hr",Jt="html",Qt="i",zt="iframe",Zt="img",te="input",ee="ins",oe="kbd",ne="label",se="legend",ae="li",re="link",ce="main",ie="map",pe="mark",le="menu",Se="meta",fe="meter",de="nav",ue="noscript",Te="object",ye="ol",ge="optgroup",xe="option",he="output",me="p",Ee="picture",be="pre",Ae="progress",Pe="q",Ce="rp",Me="rt",Ne="ruby",Re="s",Oe="samp",De="script",ve="search",Le="section",Ie="select",Ve="slot",Fe="small",ke="source",je="span",He="strong",Ue="style",Ge="sub",Ke="summary",Be="sup",_e="table",qe="tbody",Xe="td",$e="template",we="textarea",Ye="tfoot",We="th",Je="thead",Qe="time",ze="title",Ze="tr",to="track",eo="u",oo="ul",no="var",so="video",ao="wbr",ro="animate",co="animateMotion",io="animateTransform",po="circle",lo="clipPath",So="defs",fo="desc",uo="ellipse",To="feBlend",yo="feColorMatrix",go="feComponentTransfer",xo="feComposite",ho="feConvolveMatrix",mo="feDiffuseLighting",Eo="feDisplacementMap",bo="feDistantLight",Ao="feDropShadow",Po="feFlood",Co="feFuncA",Mo="feFuncB",No="feFuncG",Ro="feFuncR",Oo="feGaussianBlur",Do="feImage",vo="feMerge",Lo="feMergeNode",Io="feMorphology",Vo="feOffset",Fo="fePointLight",ko="feSpecularLighting",jo="feSpotLight",Ho="feTile",Uo="feTurbulence",Go="filter",Ko="foreignObject",Bo="g",_o="image",qo="line",Xo="linearGradient",$o="marker",wo="mask",Yo="metadata",Wo="mpath",Jo="path",Qo="pattern",zo="polygon",Zo="polyline",tn="radialGradient",en="rect",on="set",nn="stop",sn="svg",an="switch",rn="symbol",cn="text",pn="textPath",ln="tspan",Sn="use",fn="view",dn="annotation",un="annotation-xml",Tn="maction",yn="math",gn="merror",xn="mfrac",hn="mi",mn="mmultiscripts",En="mn",bn="mo",An="mover",Pn="mpadded",Cn="mphantom",Mn="mprescripts",Nn="mroot",Rn="mrow",On="ms",Dn="mspace",vn="msqrt",Ln="mstyle",In="msub",Vn="msubsup",Fn="msup",kn="mtable",jn="mtd",Hn="mtext",Un="mtr",Gn="munder",Kn="munderover",Bn="semantics";function _n(...e){if(!e||e.length===0)return null;if(e.length===1)return e[0];let n=e[0];for(let a=1;a<e.length;a++){let s=n,t=e[a];if(!s)n=t;else if(t)if(typeof s=="string"&&typeof t=="string"){let o=s.split(" "),r=t.split(" "),i=new Set([...o,...r]);n=Array.from(i).join(" ").trim()}else if(typeof s=="string"&&Array.isArray(t)){let o=new Set([...t,...s.split(" ")]);n=Array.from(o).join(" ").trim()}else if(Array.isArray(s)&&typeof t=="string"){let o=new Set([...s,...t.split(" ")]);n=Array.from(o).join(" ").trim()}else if(Array.isArray(s)&&Array.isArray(t)){let o=new Set([...s,...t]);n=Array.from(o).join(" ").trim()}else if(typeof s=="string"&&typeof t=="object")n={[s]:!0,...t};else if(typeof s=="object"&&typeof t=="string")n={...s,[t]:!0};else if(typeof s=="object"&&typeof t=="object")n={...s,...t};else if(typeof s=="object"&&Array.isArray(t)){let o={...s};for(let r of t)o[r]=!0;n=o}else if(Array.isArray(s)&&typeof t=="object"){let o={};for(let r of s)o[r]=!0;for(let r of Object.keys(t))o[r]=t[r];n=o}else throw new Error(`cannot merge classes of ${s} (${typeof s}) and ${t} (${typeof t})`);else continue}return n}var I=class{constructor(n,a){this.state=n;this.path=a;this.keys=a.split(".")}keys;get(){let n=this.keys,a=this.state?this.state[n[0]]:void 0;for(let s=1;s<n.length&&a;s++)a=a[n[s]];return a}put(n){this.putDeep(n,this.state)}patch(n){if(Array.isArray(n)){let a=[];for(let s of n)a.push(this.createPatch(s));this.state.patch(a)}else this.state.patch(this.createPatch(n))}createPatch(n){let a={};return this.putDeep(n,a),a}putDeep(n,a){let s=this.keys;if(s.length>1){let t=0,o=a[s[t]];for((typeof o!="object"||o===null)&&(a[s[t]]=o={}),t=1;t<s.length-1;t++){let r=o;o=o[s[t]],(typeof o!="object"||o===null)&&(r[s[t]]=o={})}o[s[t]]=n}else typeof a[s[0]]=="object"&&typeof n=="object"?Object.assign(a[s[0]],n):a[s[0]]=n}},V=class{constructor(n,a,s,t){this.state=n;this.get=a;this.put=s;this.patch=t}};return q(qn);})();
+"use strict";var V=(()=>{var O=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var B=(e,o)=>{for(var a in o)O(e,a,{get:o[a],enumerable:!0})},_=(e,o,a,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of G(o))!K.call(e,t)&&t!==a&&O(e,t,{get:()=>o[t],enumerable:!(n=U(o,t))||n.enumerable});return e};var q=e=>_(O({},"__esModule",{value:!0}),e);var Xn={};B(Xn,{A:()=>ot,ABBR:()=>nt,ADDRESS:()=>st,ANIMATE:()=>ro,ANIMATEMOTION:()=>co,ANIMATETRANSFORM:()=>io,ANNOTATION:()=>dn,ANNOTATION_XML:()=>un,AREA:()=>at,ARTICLE:()=>rt,ASIDE:()=>ct,AUDIO:()=>it,B:()=>pt,BASE:()=>lt,BDI:()=>St,BDO:()=>ft,BLOCKQUOTE:()=>dt,BODY:()=>ut,BR:()=>Tt,BUTTON:()=>yt,CANVAS:()=>gt,CAPTION:()=>xt,CIRCLE:()=>po,CITE:()=>ht,CLIPPATH:()=>lo,CODE:()=>mt,COL:()=>Et,COLGROUP:()=>bt,DATA:()=>Pt,DATALIST:()=>At,DD:()=>Ct,DEFS:()=>So,DEL:()=>Mt,DESC:()=>fo,DETAILS:()=>Nt,DFN:()=>Rt,DIALOG:()=>Ot,DIV:()=>Dt,DL:()=>vt,DT:()=>Lt,DelegateStateContext:()=>I,ELLIPSE:()=>uo,EM:()=>It,EMBED:()=>Vt,FEBLEND:()=>To,FECOLORMATRIX:()=>yo,FECOMPONENTTRANSFER:()=>go,FECOMPOSITE:()=>xo,FECONVOLVEMATRIX:()=>ho,FEDIFFUSELIGHTING:()=>mo,FEDISPLACEMENTMAP:()=>Eo,FEDISTANTLIGHT:()=>bo,FEDROPSHADOW:()=>Po,FEFLOOD:()=>Ao,FEFUNCA:()=>Co,FEFUNCB:()=>Mo,FEFUNCG:()=>No,FEFUNCR:()=>Ro,FEGAUSSIANBLUR:()=>Oo,FEIMAGE:()=>Do,FEMERGE:()=>vo,FEMERGENODE:()=>Lo,FEMORPHOLOGY:()=>Io,FEOFFSET:()=>Vo,FEPOINTLIGHT:()=>Fo,FESPECULARLIGHTING:()=>ko,FESPOTLIGHT:()=>jo,FETILE:()=>Ho,FETURBULENCE:()=>Uo,FIELDSET:()=>Ft,FIGCAPTION:()=>kt,FIGURE:()=>jt,FILTER:()=>Go,FOOTER:()=>Ht,FOREIGNOBJECT:()=>Ko,FORM:()=>Ut,G:()=>Bo,H1:()=>Gt,H2:()=>Kt,H3:()=>Bt,H4:()=>_t,H5:()=>qt,H6:()=>Xt,HEAD:()=>$t,HEADER:()=>wt,HGROUP:()=>Yt,HR:()=>Wt,HTML:()=>Jt,I:()=>Qt,IFRAME:()=>zt,IMAGE:()=>_o,IMG:()=>Zt,INPUT:()=>te,INS:()=>ee,KBD:()=>oe,KeyStateContext:()=>L,LABEL:()=>ne,LEGEND:()=>se,LI:()=>ae,LINE:()=>qo,LINEARGRADIENT:()=>Xo,LINK:()=>re,MACTION:()=>Tn,MAIN:()=>ce,MAP:()=>ie,MARK:()=>pe,MARKER:()=>$o,MASK:()=>wo,MATH:()=>yn,MENU:()=>le,MERROR:()=>gn,META:()=>Se,METADATA:()=>Yo,METER:()=>fe,MFRAC:()=>xn,MI:()=>hn,MMULTISCRIPTS:()=>mn,MN:()=>En,MO:()=>bn,MOVER:()=>Pn,MPADDED:()=>An,MPATH:()=>Wo,MPHANTOM:()=>Cn,MPRESCRIPTS:()=>Mn,MROOT:()=>Nn,MROW:()=>Rn,MS:()=>On,MSPACE:()=>Dn,MSQRT:()=>vn,MSTYLE:()=>Ln,MSUB:()=>In,MSUBSUP:()=>Vn,MSUP:()=>Fn,MTABLE:()=>kn,MTD:()=>jn,MTEXT:()=>Hn,MTR:()=>Un,MUNDER:()=>Gn,MUNDEROVER:()=>Kn,NAV:()=>de,NOSCRIPT:()=>ue,OBJECT:()=>Te,OL:()=>ye,OPTGROUP:()=>ge,OPTION:()=>xe,OUTPUT:()=>he,P:()=>me,PATH:()=>Jo,PATTERN:()=>Qo,PICTURE:()=>Ee,POLYGON:()=>zo,POLYLINE:()=>Zo,PRE:()=>be,PROGRESS:()=>Pe,Q:()=>Ae,RADIALGRADIENT:()=>tn,RECT:()=>en,RP:()=>Ce,RT:()=>Me,RUBY:()=>Ne,S:()=>Re,SAMP:()=>Oe,SCRIPT:()=>De,SEARCH:()=>ve,SECTION:()=>Le,SELECT:()=>Ie,SEMANTICS:()=>Bn,SET:()=>on,SLOT:()=>Ve,SMALL:()=>Fe,SOURCE:()=>ke,SPAN:()=>je,STOP:()=>nn,STRONG:()=>He,STYLE:()=>Ue,SUB:()=>Ge,SUMMARY:()=>Ke,SUP:()=>Be,SVG:()=>sn,SWITCH:()=>an,SYMBOL:()=>rn,TABLE:()=>_e,TBODY:()=>qe,TD:()=>Xe,TEMPLATE:()=>$e,TEXT:()=>cn,TEXTAREA:()=>we,TEXTPATH:()=>pn,TFOOT:()=>Ye,TH:()=>We,THEAD:()=>Je,TIME:()=>Qe,TITLE:()=>ze,TR:()=>Ze,TRACK:()=>to,TSPAN:()=>ln,U:()=>eo,UL:()=>oo,USE:()=>Sn,VAR:()=>no,VIDEO:()=>so,VIEW:()=>fn,WBR:()=>ao,app:()=>$,child:()=>Z,childCount:()=>z,children:()=>C,childrenStart:()=>R,createPatch:()=>J,createState:()=>W,defuse:()=>w,globals:()=>h,hydrate:()=>N,memo:()=>Y,mergeClass:()=>_n,mergeStyle:()=>qn,props:()=>m,tag:()=>Q,vode:()=>X});var h={currentViewTransition:void 0,requestAnimationFrame:window.requestAnimationFrame?window.requestAnimationFrame.bind(window):(e=>e()),startViewTransition:document.startViewTransition?document.startViewTransition.bind(document):null};function X(e,o,...a){if(!e)throw new Error("first argument to vode() must be a tag name or a vode");return Array.isArray(e)?e:o?[e,o,...a]:[e,...a]}function $(e,o,a,...n){if(!e?.parentElement)throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!o||typeof o!="object")throw new Error("second argument to app() must be a state object");if(typeof a!="function")throw new Error("third argument to app() must be a function that returns a vode");let t={};t.syncRenderer=h.requestAnimationFrame,t.asyncRenderer=h.startViewTransition,t.qSync=null,t.qAsync=null,t.stats={lastSyncRenderTime:0,lastAsyncRenderTime:0,syncRenderCount:0,asyncRenderCount:0,liveEffectCount:0,patchCount:0,syncRenderPatchCount:0,asyncRenderPatchCount:0};let s=o;Object.defineProperty(o,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(p,d)=>{if(!(!p||typeof p!="function"&&typeof p!="object"))if(t.stats.patchCount++,p?.next){let l=p;t.stats.liveEffectCount++;try{let f=await l.next();for(;f.done===!1;){t.stats.liveEffectCount++;try{s.patch(f.value,d),f=await l.next()}finally{t.stats.liveEffectCount--}}s.patch(f.value,d)}finally{t.stats.liveEffectCount--}}else if(p.then){t.stats.liveEffectCount++;try{let l=await p;s.patch(l,d)}finally{t.stats.liveEffectCount--}}else if(Array.isArray(p))if(p.length>0)for(let l of p)s.patch(l,!document.hidden&&!!t.asyncRenderer);else{t.qSync=y(t.qSync||{},t.qAsync,!1),t.qAsync=null;try{h.currentViewTransition?.skipTransition()}catch{}t.stats.syncRenderPatchCount++,t.renderSync()}else typeof p=="function"?s.patch(p(t.state),d):d?(t.stats.asyncRenderPatchCount++,t.qAsync=y(t.qAsync||{},p,!1),await t.renderAsync()):(t.stats.syncRenderPatchCount++,t.qSync=y(t.qSync||{},p,!1),t.renderSync())}});function r(p){let d=Date.now(),l=a(t.state);t.vode=P(t.state,e.parentElement,0,t.vode,l),e.tagName.toUpperCase()!==l[0].toUpperCase()&&(e=t.vode.node,e._vode=t),p||(t.stats.lastSyncRenderTime=Date.now()-d,t.stats.syncRenderCount++,t.isRendering=!1,t.qSync&&t.renderSync())}let c=r.bind(null,!1),i=r.bind(null,!0);Object.defineProperty(t,"renderSync",{enumerable:!1,configurable:!0,writable:!1,value:()=>{t.isRendering||!t.qSync||(t.isRendering=!0,t.state=y(t.state,t.qSync,!0),t.qSync=null,t.syncRenderer(c))}}),Object.defineProperty(t,"renderAsync",{enumerable:!1,configurable:!0,writable:!1,value:async()=>{if(t.isAnimating||!t.qAsync||(await h.currentViewTransition?.updateCallbackDone,t.isAnimating||!t.qAsync||document.hidden))return;t.isAnimating=!0;let p=Date.now();try{t.state=y(t.state,t.qAsync,!0),t.qAsync=null,h.currentViewTransition=t.asyncRenderer(i),await h.currentViewTransition?.updateCallbackDone}finally{t.stats.lastAsyncRenderTime=Date.now()-p,t.stats.asyncRenderCount++,t.isAnimating=!1}t.qAsync&&t.renderAsync()}}),t.state=s;let E=e;E._vode=t,t.vode=P(o,e.parentElement,Array.from(e.parentElement.children).indexOf(e),N(e,!0),a(o));for(let p of n)s.patch(p);return p=>s.patch(p)}function w(e){if(e?._vode){let a=function(t){if(!t?.node)return;let s=m(t);if(s){for(let c in s)c[0]==="o"&&c[1]==="n"&&(t.node[c]=null);t.node.catch=null}let r=C(t);if(r)for(let c of r)a(c)};var o=a;let n=e._vode;delete e._vode,Object.defineProperty(n.state,"patch",{value:void 0}),Object.defineProperty(n,"renderSync",{value:()=>{}}),Object.defineProperty(n,"renderAsync",{value:()=>{}}),a(n.vode)}}function N(e,o){if(e?.nodeType===Node.TEXT_NODE)return e.nodeValue?.trim()!==""?o?e:e.nodeValue:void 0;if(e.nodeType===Node.COMMENT_NODE)return;if(e.nodeType===Node.ELEMENT_NODE){let n=[e.tagName.toLowerCase()];if(o&&(n.node=e),e?.hasAttributes()){let t={},s=e.attributes;for(let r of s)t[r.name]=r.value;n.push(t)}if(e.hasChildNodes()){let t=[];for(let s of e.childNodes){let r=s&&N(s,o);r?n.push(r):s&&o&&t.push(s)}for(let s of t)s.remove()}return n}else return}function Y(e,o){if(!e||!Array.isArray(e))throw new Error("first argument to memo() must be an array of values to compare");if(typeof o!="function")throw new Error("second argument to memo() must be a function that returns a vode or props object");return o.__memo=e,o}function W(e){if(!e||typeof e!="object")throw new Error("createState() must be called with a state object");return e}function J(e){return e}function Q(e){return e?Array.isArray(e)?e[0]:typeof e=="string"||e.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function m(e){if(Array.isArray(e)&&e.length>1&&e[1]&&!Array.isArray(e[1])&&typeof e[1]=="object"&&e[1].nodeType!==Node.TEXT_NODE)return e[1]}function C(e){let o=R(e);return o>0?e.slice(o):null}function z(e){let o=R(e);return o<0?0:e.length-o}function Z(e,o){let a=R(e);if(a>0)return e[o+a]}function R(e){return m(e)?e.length>2?2:-1:Array.isArray(e)&&e.length>1?1:-1}function y(e,o,a){if(!o)return e;for(let n in o){let t=o[n];if(t&&typeof t=="object"){let s=e[n];s?Array.isArray(t)?e[n]=[...t]:t instanceof Date&&s!==t?e[n]=new Date(t):Array.isArray(s)?e[n]=y({},t,a):typeof s=="object"?y(e[n],t,a):e[n]=y({},t,a):Array.isArray(t)?e[n]=[...t]:t instanceof Date?e[n]=new Date(t):e[n]=y({},t,a)}else t===void 0&&a?delete e[n]:e[n]=t}return e}function P(e,o,a,n,t,s){try{t=D(e,t,n);let r=!t||typeof t=="number"||typeof t=="boolean";if(t===n||!n&&r)return n;let c=n?.nodeType===Node.TEXT_NODE,i=c?n:n?.node;if(r){i?.onUnmount&&e.patch(i.onUnmount(i)),i?.remove();return}let E=!r&&et(t),p=!r&&tt(t),d=!!t&&typeof t!="string"&&!!(t?.node||t?.nodeType===Node.TEXT_NODE);if(!E&&!p&&!d&&!n)throw new Error("Invalid vode: "+typeof t+" "+JSON.stringify(t));if(d&&E?t=t.wholeText:d&&p&&(t=[...t]),c&&E)return i.nodeValue!==t&&(i.nodeValue=t),n;if(E&&(!i||!c)){let l=document.createTextNode(t);return i?(i.onUnmount&&e.patch(i.onUnmount(i)),i.replaceWith(l)):o.childNodes[a]?o.insertBefore(l,o.childNodes[a]):o.appendChild(l),l}if(p&&(!i||c||n[0]!==t[0])){let l=t;1 in l&&(l[1]=D(e,l[1],void 0));let f=m(t);s=f?.xmlns||s;let S=s?document.createElementNS(s,t[0]):document.createElement(t[0]);t.node=S,v(e,S,void 0,f),f&&"catch"in f&&(t.node.catch=null,t.node.removeAttribute("catch")),i?(i.onUnmount&&e.patch(i.onUnmount(i)),i.replaceWith(S)):o.childNodes[a]?o.insertBefore(S,o.childNodes[a]):o.appendChild(S);let A=C(t);if(A)for(let T=0;T<A.length;T++){let g=A[T],x=P(e,S,T,void 0,g,s);t[f?T+2:T+1]=x}return S.onMount&&e.patch(S.onMount(S)),t}if(!c&&p&&n[0]===t[0]){t.node=i;let l=t,f=n,S=m(t),A=!!S,T=m(n);if(l[1]?.__memo){let u=l[1];l[1]=D(e,l[1],f[1]),u!==l[1]&&v(e,i,T,S)}else v(e,i,T,S);S?.catch&&T?.catch!==S.catch&&(t.node.catch=null,t.node.removeAttribute("catch"));let g=C(t),x=C(n);if(g)for(let u=0;u<g.length;u++){let b=g[u],H=x&&x[u],V=P(e,i,u,H,b,s);V&&(t[A?u+2:u+1]=V)}if(x){let u=g?g.length:0;for(let b=x.length-1;b>=u;b--)P(e,i,b,x[b],void 0,s)}return t}}catch(r){let c=m(t)?.catch;if(c){let i=typeof c=="function"?c(e,r):c;return P(e,o,a,N(t?.node||n?.node,!0),i,s)}else throw r}}function tt(e){return Array.isArray(e)&&e.length>0&&typeof e[0]=="string"}function et(e){return typeof e=="string"||e?.nodeType===Node.TEXT_NODE}function D(e,o,a){if(typeof o!="function")return o;let n=o?.__memo,t=a?.__memo;if(Array.isArray(n)&&Array.isArray(t)&&n.length===t.length){let r=!0;for(let c=0;c<n.length;c++)if(n[c]!==t[c]){r=!1;break}if(r)return a}let s=F(o,e);return typeof s=="object"&&(s.__memo=o?.__memo),s}function F(e,o){return typeof e=="function"?F(e(o),o):e}function v(e,o,a,n){if(!(!n&&!a)){if(a)for(let t in a){let s=a[t],r=n?.[t];s!==r&&(n?n[t]=M(e,o,t,s,r):M(e,o,t,s,void 0))}if(n&&a){for(let t in n)if(!(t in a)){let s=n[t];n[t]=M(e,o,t,void 0,s)}}else if(n)for(let t in n){let s=n[t];n[t]=M(e,o,t,void 0,s)}}}function M(e,o,a,n,t){if(a==="style")if(!t)o.style.cssText="";else if(typeof t=="string")n!==t&&(o.style.cssText=t);else if(n&&typeof n=="object"){for(let s in n)t[s]||(o.style[s]=null);for(let s in t){let r=n[s],c=t[s];r!==c&&(o.style[s]=c)}}else for(let s in t)o.style[s]=t[s];else if(a==="class")t?o.setAttribute("class",k(t)):o.removeAttribute("class");else if(a[0]==="o"&&a[1]==="n")if(t){let s=null;if(typeof t=="function"){let r=t;s=c=>e.patch(r(e,c))}else typeof t=="object"&&(s=()=>e.patch(t));o[a]=s}else o[a]=null;else o[a]=t,t==null||t===!1?o.removeAttribute(a):o.setAttribute(a,t);return t}function k(e){return typeof e=="string"?e:Array.isArray(e)?e.map(k).join(" "):typeof e=="object"?Object.keys(e).filter(o=>e[o]).join(" "):""}var ot="a",nt="abbr",st="address",at="area",rt="article",ct="aside",it="audio",pt="b",lt="base",St="bdi",ft="bdo",dt="blockquote",ut="body",Tt="br",yt="button",gt="canvas",xt="caption",ht="cite",mt="code",Et="col",bt="colgroup",Pt="data",At="datalist",Ct="dd",Mt="del",Nt="details",Rt="dfn",Ot="dialog",Dt="div",vt="dl",Lt="dt",It="em",Vt="embed",Ft="fieldset",kt="figcaption",jt="figure",Ht="footer",Ut="form",Gt="h1",Kt="h2",Bt="h3",_t="h4",qt="h5",Xt="h6",$t="head",wt="header",Yt="hgroup",Wt="hr",Jt="html",Qt="i",zt="iframe",Zt="img",te="input",ee="ins",oe="kbd",ne="label",se="legend",ae="li",re="link",ce="main",ie="map",pe="mark",le="menu",Se="meta",fe="meter",de="nav",ue="noscript",Te="object",ye="ol",ge="optgroup",xe="option",he="output",me="p",Ee="picture",be="pre",Pe="progress",Ae="q",Ce="rp",Me="rt",Ne="ruby",Re="s",Oe="samp",De="script",ve="search",Le="section",Ie="select",Ve="slot",Fe="small",ke="source",je="span",He="strong",Ue="style",Ge="sub",Ke="summary",Be="sup",_e="table",qe="tbody",Xe="td",$e="template",we="textarea",Ye="tfoot",We="th",Je="thead",Qe="time",ze="title",Ze="tr",to="track",eo="u",oo="ul",no="var",so="video",ao="wbr",ro="animate",co="animateMotion",io="animateTransform",po="circle",lo="clipPath",So="defs",fo="desc",uo="ellipse",To="feBlend",yo="feColorMatrix",go="feComponentTransfer",xo="feComposite",ho="feConvolveMatrix",mo="feDiffuseLighting",Eo="feDisplacementMap",bo="feDistantLight",Po="feDropShadow",Ao="feFlood",Co="feFuncA",Mo="feFuncB",No="feFuncG",Ro="feFuncR",Oo="feGaussianBlur",Do="feImage",vo="feMerge",Lo="feMergeNode",Io="feMorphology",Vo="feOffset",Fo="fePointLight",ko="feSpecularLighting",jo="feSpotLight",Ho="feTile",Uo="feTurbulence",Go="filter",Ko="foreignObject",Bo="g",_o="image",qo="line",Xo="linearGradient",$o="marker",wo="mask",Yo="metadata",Wo="mpath",Jo="path",Qo="pattern",zo="polygon",Zo="polyline",tn="radialGradient",en="rect",on="set",nn="stop",sn="svg",an="switch",rn="symbol",cn="text",pn="textPath",ln="tspan",Sn="use",fn="view",dn="annotation",un="annotation-xml",Tn="maction",yn="math",gn="merror",xn="mfrac",hn="mi",mn="mmultiscripts",En="mn",bn="mo",Pn="mover",An="mpadded",Cn="mphantom",Mn="mprescripts",Nn="mroot",Rn="mrow",On="ms",Dn="mspace",vn="msqrt",Ln="mstyle",In="msub",Vn="msubsup",Fn="msup",kn="mtable",jn="mtd",Hn="mtext",Un="mtr",Gn="munder",Kn="munderover",Bn="semantics";function _n(...e){if(!e||e.length===0)return null;if(e.length===1)return e[0];let o=e[0];for(let a=1;a<e.length;a++){let n=o,t=e[a];if(!n)o=t;else if(t)if(typeof n=="string"&&typeof t=="string"){let s=n.split(" "),r=t.split(" "),c=new Set([...s,...r]);o=Array.from(c).join(" ").trim()}else if(typeof n=="string"&&Array.isArray(t)){let s=new Set([...t,...n.split(" ")]);o=Array.from(s).join(" ").trim()}else if(Array.isArray(n)&&typeof t=="string"){let s=new Set([...n,...t.split(" ")]);o=Array.from(s).join(" ").trim()}else if(Array.isArray(n)&&Array.isArray(t)){let s=new Set([...n,...t]);o=Array.from(s).join(" ").trim()}else if(typeof n=="string"&&typeof t=="object")o={[n]:!0,...t};else if(typeof n=="object"&&typeof t=="string")o={...n,[t]:!0};else if(typeof n=="object"&&typeof t=="object")o={...n,...t};else if(typeof n=="object"&&Array.isArray(t)){let s={...n};for(let r of t)s[r]=!0;o=s}else if(Array.isArray(n)&&typeof t=="object"){let s={};for(let r of n)s[r]=!0;for(let r of Object.keys(t))s[r]=t[r];o=s}else throw new Error(`cannot merge classes of ${n} (${typeof n}) and ${t} (${typeof t})`);else continue}return o}var j=document.createElement("div");function qn(...e){try{let o=j.style;for(let a of e)if(typeof a=="object"&&a!==null)for(let n in a)o[n]=a[n];else typeof a=="string"&&(o.cssText+=";"+a);return o.cssText}finally{j.style.cssText=""}}var L=class{constructor(o,a){this.state=o;this.path=a;this.keys=a.split(".")}keys;get(){let o=this.keys,a=this.state?this.state[o[0]]:void 0;for(let n=1;n<o.length&&a;n++)a=a[o[n]];return a}put(o){this.putDeep(o,this.state)}patch(o){if(Array.isArray(o)){let a=[];for(let n of o)a.push(this.createPatch(n));this.state.patch(a)}else this.state.patch(this.createPatch(o))}createPatch(o){let a={};return this.putDeep(o,a),a}putDeep(o,a){let n=this.keys;if(n.length>1){let t=0,s=a[n[t]];for((typeof s!="object"||s===null)&&(a[n[t]]=s={}),t=1;t<n.length-1;t++){let r=s;s=s[n[t]],(typeof s!="object"||s===null)&&(r[n[t]]=s={})}s[n[t]]=o}else typeof a[n[0]]=="object"&&typeof o=="object"?Object.assign(a[n[0]],o):a[n[0]]=o}},I=class{constructor(o,a,n,t){this.state=o;this.get=a;this.put=n;this.patch=t}};return q(Xn);})();

package/dist/vode.min.mjs

@@ -1 +1 @@
-var b={currentViewTransition:void 0,requestAnimationFrame:window.requestAnimationFrame?window.requestAnimationFrame.bind(window):(e=>e()),startViewTransition:document.startViewTransition?document.startViewTransition.bind(document):null};function G(e,n,...a){if(!e)throw new Error("first argument to vode() must be a tag name or a vode");return Array.isArray(e)?e:n?[e,n,...a]:[e,...a]}function K(e,n,a,...s){if(!e?.parentElement)throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!n||typeof n!="object")throw new Error("second argument to app() must be a state object");if(typeof a!="function")throw new Error("third argument to app() must be a function that returns a vode");let t={};t.syncRenderer=b.requestAnimationFrame,t.asyncRenderer=b.startViewTransition,t.qSync=null,t.qAsync=null,t.stats={lastSyncRenderTime:0,lastAsyncRenderTime:0,syncRenderCount:0,asyncRenderCount:0,liveEffectCount:0,patchCount:0,syncRenderPatchCount:0,asyncRenderPatchCount:0},Object.defineProperty(n,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(c,d)=>{if(!(!c||typeof c!="function"&&typeof c!="object"))if(t.stats.patchCount++,c?.next){let S=c;t.stats.liveEffectCount++;try{let g=await S.next();for(;g.done===!1;){t.stats.liveEffectCount++;try{t.patch(g.value,d),g=await S.next()}finally{t.stats.liveEffectCount--}}t.patch(g.value,d)}finally{t.stats.liveEffectCount--}}else if(c.then){t.stats.liveEffectCount++;try{let S=await c;t.patch(S,d)}finally{t.stats.liveEffectCount--}}else if(Array.isArray(c))if(c.length>0)for(let S of c)t.patch(S,!document.hidden&&!!t.asyncRenderer);else{t.qSync=y(t.qSync||{},t.qAsync,!1),t.qAsync=null;try{b.currentViewTransition?.skipTransition()}catch{}t.stats.syncRenderPatchCount++,t.renderSync()}else typeof c=="function"?t.patch(c(t.state),d):d?(t.stats.asyncRenderPatchCount++,t.qAsync=y(t.qAsync||{},c,!1),await t.renderAsync()):(t.stats.syncRenderPatchCount++,t.qSync=y(t.qSync||{},c,!1),t.renderSync())}});function o(c){let d=Date.now(),S=a(t.state);t.vode=P(t.state,t.patch,e.parentElement,0,t.vode,S),e.tagName.toUpperCase()!==S[0].toUpperCase()&&(e=t.vode.node,e._vode=t),c||(t.stats.lastSyncRenderTime=Date.now()-d,t.stats.syncRenderCount++,t.isRendering=!1,t.qSync&&t.renderSync())}let r=o.bind(null,!1),i=o.bind(null,!0);Object.defineProperty(t,"renderSync",{enumerable:!1,configurable:!0,writable:!1,value:()=>{t.isRendering||!t.qSync||(t.isRendering=!0,t.state=y(t.state,t.qSync,!0),t.qSync=null,t.syncRenderer(r))}}),Object.defineProperty(t,"renderAsync",{enumerable:!1,configurable:!0,writable:!1,value:async()=>{if(t.isAnimating||!t.qAsync||(await b.currentViewTransition?.updateCallbackDone,t.isAnimating||!t.qAsync||document.hidden))return;t.isAnimating=!0;let c=Date.now();try{t.state=y(t.state,t.qAsync,!0),t.qAsync=null,b.currentViewTransition=t.asyncRenderer(i),await b.currentViewTransition?.updateCallbackDone}finally{t.stats.lastAsyncRenderTime=Date.now()-c,t.stats.asyncRenderCount++,t.isAnimating=!1}t.qAsync&&t.renderAsync()}}),t.patch=n.patch,t.state=n;let p=e;p._vode=t,t.vode=P(n,t.patch,e.parentElement,Array.from(e.parentElement.children).indexOf(e),D(e,!0),a(n));for(let c of s)t.patch(c);return t.patch}function B(e){if(e?._vode){let a=function(t){if(!t?.node)return;let o=A(t);if(o){for(let i in o)i[0]==="o"&&i[1]==="n"&&(t.node[i]=null);t.node.catch=null}let r=N(t);if(r)for(let i of r)a(i)};var n=a;let s=e._vode;delete e._vode,Object.defineProperty(s.state,"patch",{value:void 0}),Object.defineProperty(s,"renderSync",{value:()=>{}}),Object.defineProperty(s,"renderAsync",{value:()=>{}}),a(s.vode)}}function D(e,n){if(e?.nodeType===Node.TEXT_NODE)return e.nodeValue?.trim()!==""?n?e:e.nodeValue:void 0;if(e.nodeType===Node.COMMENT_NODE)return;if(e.nodeType===Node.ELEMENT_NODE){let s=[e.tagName.toLowerCase()];if(n&&(s.node=e),e?.hasAttributes()){let t={},o=e.attributes;for(let r of o)t[r.name]=r.value;s.push(t)}if(e.hasChildNodes()){let t=[];for(let o of e.childNodes){let r=o&&D(o,n);r?s.push(r):o&&n&&t.push(o)}for(let o of t)o.remove()}return s}else return}function _(e,n){if(!e||!Array.isArray(e))throw new Error("first argument to memo() must be an array of values to compare");if(typeof n!="function")throw new Error("second argument to memo() must be a function that returns a vode or props object");return n.__memo=e,n}function q(e){if(!e||typeof e!="object")throw new Error("createState() must be called with a state object");return e}function X(e){return e}function $(e){return e?Array.isArray(e)?e[0]:typeof e=="string"||e.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function A(e){if(Array.isArray(e)&&e.length>1&&e[1]&&!Array.isArray(e[1])&&typeof e[1]=="object"&&e[1].nodeType!==Node.TEXT_NODE)return e[1]}function N(e){let n=v(e);return n>0?e.slice(n):null}function w(e){let n=v(e);return n<0?0:e.length-n}function Y(e,n){let a=v(e);if(a>0)return e[n+a]}function v(e){return A(e)?e.length>2?2:-1:Array.isArray(e)&&e.length>1?1:-1}function y(e,n,a){if(!n)return e;for(let s in n){let t=n[s];if(t&&typeof t=="object"){let o=e[s];o?Array.isArray(t)?e[s]=[...t]:t instanceof Date&&o!==t?e[s]=new Date(t):Array.isArray(o)?e[s]=y({},t,a):typeof o=="object"?y(e[s],t,a):e[s]=y({},t,a):Array.isArray(t)?e[s]=[...t]:t instanceof Date?e[s]=new Date(t):e[s]=y({},t,a)}else t===void 0&&a?delete e[s]:e[s]=t}return e}function P(e,n,a,s,t,o,r){try{o=R(e,o,t);let i=!o||typeof o=="number"||typeof o=="boolean";if(o===t||!t&&i)return t;let p=t?.nodeType===Node.TEXT_NODE,c=p?t:t?.node;if(i){c?.onUnmount&&n(c.onUnmount(c)),c?.remove();return}let d=!i&&U(o),S=!i&&H(o),g=!!o&&typeof o!="string"&&!!(o?.node||o?.nodeType===Node.TEXT_NODE);if(!d&&!S&&!g&&!t)throw new Error("Invalid vode: "+typeof o+" "+JSON.stringify(o));if(g&&d?o=o.wholeText:g&&S&&(o=[...o]),p&&d)return c.nodeValue!==o&&(c.nodeValue=o),t;if(d&&(!c||!p)){let f=document.createTextNode(o);return c?(c.onUnmount&&n(c.onUnmount(c)),c.replaceWith(f)):a.childNodes[s]?a.insertBefore(f,a.childNodes[s]):a.appendChild(f),f}if(S&&(!c||p||t[0]!==o[0])){let f=o;1 in f&&(f[1]=R(e,f[1],void 0));let x=A(o);r=x?.xmlns||r;let l=r?document.createElementNS(r,o[0]):document.createElement(o[0]);o.node=l,O(e,n,l,void 0,x),x&&"catch"in x&&(o.node.catch=null,o.node.removeAttribute("catch")),c?(c.onUnmount&&n(c.onUnmount(c)),c.replaceWith(l)):a.childNodes[s]?a.insertBefore(l,a.childNodes[s]):a.appendChild(l);let C=N(o);if(C)for(let T=0;T<C.length;T++){let h=C[T],m=P(e,n,l,T,void 0,h,r);o[x?T+2:T+1]=m}return l.onMount&&n(l.onMount(l)),o}if(!p&&S&&t[0]===o[0]){o.node=c;let f=o,x=t,l=A(o),C=!!l,T=A(t);if(f[1]?.__memo){let u=f[1];f[1]=R(e,f[1],x[1]),u!==f[1]&&O(e,n,c,T,l)}else O(e,n,c,T,l);l?.catch&&T?.catch!==l.catch&&(o.node.catch=null,o.node.removeAttribute("catch"));let h=N(o),m=N(t);if(h)for(let u=0;u<h.length;u++){let E=h[u],j=m&&m[u],L=P(e,n,c,u,j,E,r);L&&(o[C?u+2:u+1]=L)}if(m){let u=h?h.length:0;for(let E=m.length-1;E>=u;E--)P(e,n,c,E,m[E],void 0,r)}return o}}catch(i){let p=A(o)?.catch;if(p){let c=typeof p=="function"?p(e,i):p;return P(e,n,a,s,D(o?.node||t?.node,!0),c,r)}else throw i}}function H(e){return Array.isArray(e)&&e.length>0&&typeof e[0]=="string"}function U(e){return typeof e=="string"||e?.nodeType===Node.TEXT_NODE}function R(e,n,a){if(typeof n!="function")return n;let s=n?.__memo,t=a?.__memo;if(Array.isArray(s)&&Array.isArray(t)&&s.length===t.length){let r=!0;for(let i=0;i<s.length;i++)if(s[i]!==t[i]){r=!1;break}if(r)return a}let o=I(n,e);return typeof o=="object"&&(o.__memo=n?.__memo),o}function I(e,n){return typeof e=="function"?I(e(n),n):e}function O(e,n,a,s,t){if(!(!t&&!s)){if(s)for(let o in s){let r=s[o],i=t?.[o];r!==i&&(t?t[o]=M(e,n,a,o,r,i):M(e,n,a,o,r,void 0))}if(t&&s){for(let o in t)if(!(o in s)){let r=t[o];t[o]=M(e,n,a,o,void 0,r)}}else if(t)for(let o in t){let r=t[o];t[o]=M(e,n,a,o,void 0,r)}}}function M(e,n,a,s,t,o){if(s==="style")if(!o)a.style.cssText="";else if(typeof o=="string")t!==o&&(a.style.cssText=o);else if(t&&typeof t=="object"){for(let r in t)o[r]||(a.style[r]=null);for(let r in o){let i=t[r],p=o[r];i!==p&&(a.style[r]=p)}}else for(let r in o)a.style[r]=o[r];else if(s==="class")o?a.setAttribute("class",V(o)):a.removeAttribute("class");else if(s[0]==="o"&&s[1]==="n")if(o){let r=null;if(typeof o=="function"){let i=o;r=p=>n(i(e,p))}else typeof o=="object"&&(r=()=>n(o));a[s]=r}else a[s]=null;else a[s]=o,o==null||o===!1?a.removeAttribute(s):a.setAttribute(s,o);return o}function V(e){return typeof e=="string"?e:Array.isArray(e)?e.map(V).join(" "):typeof e=="object"?Object.keys(e).filter(n=>e[n]).join(" "):""}var J="a",Q="abbr",z="address",Z="area",tt="article",et="aside",ot="audio",nt="b",st="base",at="bdi",rt="bdo",ct="blockquote",it="body",pt="br",lt="button",St="canvas",ft="caption",dt="cite",ut="code",Tt="col",yt="colgroup",gt="data",xt="datalist",ht="dd",mt="del",Et="details",bt="dfn",At="dialog",Pt="div",Ct="dl",Mt="dt",Nt="em",Rt="embed",Ot="fieldset",Dt="figcaption",vt="figure",Lt="footer",It="form",Vt="h1",Ft="h2",kt="h3",jt="h4",Ht="h5",Ut="h6",Gt="head",Kt="header",Bt="hgroup",_t="hr",qt="html",Xt="i",$t="iframe",wt="img",Yt="input",Wt="ins",Jt="kbd",Qt="label",zt="legend",Zt="li",te="link",ee="main",oe="map",ne="mark",se="menu",ae="meta",re="meter",ce="nav",ie="noscript",pe="object",le="ol",Se="optgroup",fe="option",de="output",ue="p",Te="picture",ye="pre",ge="progress",xe="q",he="rp",me="rt",Ee="ruby",be="s",Ae="samp",Pe="script",Ce="search",Me="section",Ne="select",Re="slot",Oe="small",De="source",ve="span",Le="strong",Ie="style",Ve="sub",Fe="summary",ke="sup",je="table",He="tbody",Ue="td",Ge="template",Ke="textarea",Be="tfoot",_e="th",qe="thead",Xe="time",$e="title",we="tr",Ye="track",We="u",Je="ul",Qe="var",ze="video",Ze="wbr",to="animate",eo="animateMotion",oo="animateTransform",no="circle",so="clipPath",ao="defs",ro="desc",co="ellipse",io="feBlend",po="feColorMatrix",lo="feComponentTransfer",So="feComposite",fo="feConvolveMatrix",uo="feDiffuseLighting",To="feDisplacementMap",yo="feDistantLight",go="feDropShadow",xo="feFlood",ho="feFuncA",mo="feFuncB",Eo="feFuncG",bo="feFuncR",Ao="feGaussianBlur",Po="feImage",Co="feMerge",Mo="feMergeNode",No="feMorphology",Ro="feOffset",Oo="fePointLight",Do="feSpecularLighting",vo="feSpotLight",Lo="feTile",Io="feTurbulence",Vo="filter",Fo="foreignObject",ko="g",jo="image",Ho="line",Uo="linearGradient",Go="marker",Ko="mask",Bo="metadata",_o="mpath",qo="path",Xo="pattern",$o="polygon",wo="polyline",Yo="radialGradient",Wo="rect",Jo="set",Qo="stop",zo="svg",Zo="switch",tn="symbol",en="text",on="textPath",nn="tspan",sn="use",an="view",rn="annotation",cn="annotation-xml",pn="maction",ln="math",Sn="merror",fn="mfrac",dn="mi",un="mmultiscripts",Tn="mn",yn="mo",gn="mover",xn="mpadded",hn="mphantom",mn="mprescripts",En="mroot",bn="mrow",An="ms",Pn="mspace",Cn="msqrt",Mn="mstyle",Nn="msub",Rn="msubsup",On="msup",Dn="mtable",vn="mtd",Ln="mtext",In="mtr",Vn="munder",Fn="munderover",kn="semantics";function Hn(...e){if(!e||e.length===0)return null;if(e.length===1)return e[0];let n=e[0];for(let a=1;a<e.length;a++){let s=n,t=e[a];if(!s)n=t;else if(t)if(typeof s=="string"&&typeof t=="string"){let o=s.split(" "),r=t.split(" "),i=new Set([...o,...r]);n=Array.from(i).join(" ").trim()}else if(typeof s=="string"&&Array.isArray(t)){let o=new Set([...t,...s.split(" ")]);n=Array.from(o).join(" ").trim()}else if(Array.isArray(s)&&typeof t=="string"){let o=new Set([...s,...t.split(" ")]);n=Array.from(o).join(" ").trim()}else if(Array.isArray(s)&&Array.isArray(t)){let o=new Set([...s,...t]);n=Array.from(o).join(" ").trim()}else if(typeof s=="string"&&typeof t=="object")n={[s]:!0,...t};else if(typeof s=="object"&&typeof t=="string")n={...s,[t]:!0};else if(typeof s=="object"&&typeof t=="object")n={...s,...t};else if(typeof s=="object"&&Array.isArray(t)){let o={...s};for(let r of t)o[r]=!0;n=o}else if(Array.isArray(s)&&typeof t=="object"){let o={};for(let r of s)o[r]=!0;for(let r of Object.keys(t))o[r]=t[r];n=o}else throw new Error(`cannot merge classes of ${s} (${typeof s}) and ${t} (${typeof t})`);else continue}return n}var F=class{constructor(n,a){this.state=n;this.path=a;this.keys=a.split(".")}keys;get(){let n=this.keys,a=this.state?this.state[n[0]]:void 0;for(let s=1;s<n.length&&a;s++)a=a[n[s]];return a}put(n){this.putDeep(n,this.state)}patch(n){if(Array.isArray(n)){let a=[];for(let s of n)a.push(this.createPatch(s));this.state.patch(a)}else this.state.patch(this.createPatch(n))}createPatch(n){let a={};return this.putDeep(n,a),a}putDeep(n,a){let s=this.keys;if(s.length>1){let t=0,o=a[s[t]];for((typeof o!="object"||o===null)&&(a[s[t]]=o={}),t=1;t<s.length-1;t++){let r=o;o=o[s[t]],(typeof o!="object"||o===null)&&(r[s[t]]=o={})}o[s[t]]=n}else typeof a[s[0]]=="object"&&typeof n=="object"?Object.assign(a[s[0]],n):a[s[0]]=n}},k=class{constructor(n,a,s,t){this.state=n;this.get=a;this.put=s;this.patch=t}};export{J as A,Q as ABBR,z as ADDRESS,to as ANIMATE,eo as ANIMATEMOTION,oo as ANIMATETRANSFORM,rn as ANNOTATION,cn as ANNOTATION_XML,Z as AREA,tt as ARTICLE,et as ASIDE,ot as AUDIO,nt as B,st as BASE,at as BDI,rt as BDO,ct as BLOCKQUOTE,it as BODY,pt as BR,lt as BUTTON,St as CANVAS,ft as CAPTION,no as CIRCLE,dt as CITE,so as CLIPPATH,ut as CODE,Tt as COL,yt as COLGROUP,gt as DATA,xt as DATALIST,ht as DD,ao as DEFS,mt as DEL,ro as DESC,Et as DETAILS,bt as DFN,At as DIALOG,Pt as DIV,Ct as DL,Mt as DT,k as DelegateStateContext,co as ELLIPSE,Nt as EM,Rt as EMBED,io as FEBLEND,po as FECOLORMATRIX,lo as FECOMPONENTTRANSFER,So as FECOMPOSITE,fo as FECONVOLVEMATRIX,uo as FEDIFFUSELIGHTING,To as FEDISPLACEMENTMAP,yo as FEDISTANTLIGHT,go as FEDROPSHADOW,xo as FEFLOOD,ho as FEFUNCA,mo as FEFUNCB,Eo as FEFUNCG,bo as FEFUNCR,Ao as FEGAUSSIANBLUR,Po as FEIMAGE,Co as FEMERGE,Mo as FEMERGENODE,No as FEMORPHOLOGY,Ro as FEOFFSET,Oo as FEPOINTLIGHT,Do as FESPECULARLIGHTING,vo as FESPOTLIGHT,Lo as FETILE,Io as FETURBULENCE,Ot as FIELDSET,Dt as FIGCAPTION,vt as FIGURE,Vo as FILTER,Lt as FOOTER,Fo as FOREIGNOBJECT,It as FORM,ko as G,Vt as H1,Ft as H2,kt as H3,jt as H4,Ht as H5,Ut as H6,Gt as HEAD,Kt as HEADER,Bt as HGROUP,_t as HR,qt as HTML,Xt as I,$t as IFRAME,jo as IMAGE,wt as IMG,Yt as INPUT,Wt as INS,Jt as KBD,F as KeyStateContext,Qt as LABEL,zt as LEGEND,Zt as LI,Ho as LINE,Uo as LINEARGRADIENT,te as LINK,pn as MACTION,ee as MAIN,oe as MAP,ne as MARK,Go as MARKER,Ko as MASK,ln as MATH,se as MENU,Sn as MERROR,ae as META,Bo as METADATA,re as METER,fn as MFRAC,dn as MI,un as MMULTISCRIPTS,Tn as MN,yn as MO,gn as MOVER,xn as MPADDED,_o as MPATH,hn as MPHANTOM,mn as MPRESCRIPTS,En as MROOT,bn as MROW,An as MS,Pn as MSPACE,Cn as MSQRT,Mn as MSTYLE,Nn as MSUB,Rn as MSUBSUP,On as MSUP,Dn as MTABLE,vn as MTD,Ln as MTEXT,In as MTR,Vn as MUNDER,Fn as MUNDEROVER,ce as NAV,ie as NOSCRIPT,pe as OBJECT,le as OL,Se as OPTGROUP,fe as OPTION,de as OUTPUT,ue as P,qo as PATH,Xo as PATTERN,Te as PICTURE,$o as POLYGON,wo as POLYLINE,ye as PRE,ge as PROGRESS,xe as Q,Yo as RADIALGRADIENT,Wo as RECT,he as RP,me as RT,Ee as RUBY,be as S,Ae as SAMP,Pe as SCRIPT,Ce as SEARCH,Me as SECTION,Ne as SELECT,kn as SEMANTICS,Jo as SET,Re as SLOT,Oe as SMALL,De as SOURCE,ve as SPAN,Qo as STOP,Le as STRONG,Ie as STYLE,Ve as SUB,Fe as SUMMARY,ke as SUP,zo as SVG,Zo as SWITCH,tn as SYMBOL,je as TABLE,He as TBODY,Ue as TD,Ge as TEMPLATE,en as TEXT,Ke as TEXTAREA,on as TEXTPATH,Be as TFOOT,_e as TH,qe as THEAD,Xe as TIME,$e as TITLE,we as TR,Ye as TRACK,nn as TSPAN,We as U,Je as UL,sn as USE,Qe as VAR,ze as VIDEO,an as VIEW,Ze as WBR,K as app,Y as child,w as childCount,N as children,v as childrenStart,X as createPatch,q as createState,B as defuse,b as globals,D as hydrate,_ as memo,Hn as mergeClass,A as props,$ as tag,G as vode};
+var E={currentViewTransition:void 0,requestAnimationFrame:window.requestAnimationFrame?window.requestAnimationFrame.bind(window):(e=>e()),startViewTransition:document.startViewTransition?document.startViewTransition.bind(document):null};function G(e,n,...a){if(!e)throw new Error("first argument to vode() must be a tag name or a vode");return Array.isArray(e)?e:n?[e,n,...a]:[e,...a]}function K(e,n,a,...o){if(!e?.parentElement)throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");if(!n||typeof n!="object")throw new Error("second argument to app() must be a state object");if(typeof a!="function")throw new Error("third argument to app() must be a function that returns a vode");let t={};t.syncRenderer=E.requestAnimationFrame,t.asyncRenderer=E.startViewTransition,t.qSync=null,t.qAsync=null,t.stats={lastSyncRenderTime:0,lastAsyncRenderTime:0,syncRenderCount:0,asyncRenderCount:0,liveEffectCount:0,patchCount:0,syncRenderPatchCount:0,asyncRenderPatchCount:0};let s=n;Object.defineProperty(n,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async(p,d)=>{if(!(!p||typeof p!="function"&&typeof p!="object"))if(t.stats.patchCount++,p?.next){let l=p;t.stats.liveEffectCount++;try{let f=await l.next();for(;f.done===!1;){t.stats.liveEffectCount++;try{s.patch(f.value,d),f=await l.next()}finally{t.stats.liveEffectCount--}}s.patch(f.value,d)}finally{t.stats.liveEffectCount--}}else if(p.then){t.stats.liveEffectCount++;try{let l=await p;s.patch(l,d)}finally{t.stats.liveEffectCount--}}else if(Array.isArray(p))if(p.length>0)for(let l of p)s.patch(l,!document.hidden&&!!t.asyncRenderer);else{t.qSync=y(t.qSync||{},t.qAsync,!1),t.qAsync=null;try{E.currentViewTransition?.skipTransition()}catch{}t.stats.syncRenderPatchCount++,t.renderSync()}else typeof p=="function"?s.patch(p(t.state),d):d?(t.stats.asyncRenderPatchCount++,t.qAsync=y(t.qAsync||{},p,!1),await t.renderAsync()):(t.stats.syncRenderPatchCount++,t.qSync=y(t.qSync||{},p,!1),t.renderSync())}});function r(p){let d=Date.now(),l=a(t.state);t.vode=P(t.state,e.parentElement,0,t.vode,l),e.tagName.toUpperCase()!==l[0].toUpperCase()&&(e=t.vode.node,e._vode=t),p||(t.stats.lastSyncRenderTime=Date.now()-d,t.stats.syncRenderCount++,t.isRendering=!1,t.qSync&&t.renderSync())}let c=r.bind(null,!1),i=r.bind(null,!0);Object.defineProperty(t,"renderSync",{enumerable:!1,configurable:!0,writable:!1,value:()=>{t.isRendering||!t.qSync||(t.isRendering=!0,t.state=y(t.state,t.qSync,!0),t.qSync=null,t.syncRenderer(c))}}),Object.defineProperty(t,"renderAsync",{enumerable:!1,configurable:!0,writable:!1,value:async()=>{if(t.isAnimating||!t.qAsync||(await E.currentViewTransition?.updateCallbackDone,t.isAnimating||!t.qAsync||document.hidden))return;t.isAnimating=!0;let p=Date.now();try{t.state=y(t.state,t.qAsync,!0),t.qAsync=null,E.currentViewTransition=t.asyncRenderer(i),await E.currentViewTransition?.updateCallbackDone}finally{t.stats.lastAsyncRenderTime=Date.now()-p,t.stats.asyncRenderCount++,t.isAnimating=!1}t.qAsync&&t.renderAsync()}}),t.state=s;let h=e;h._vode=t,t.vode=P(n,e.parentElement,Array.from(e.parentElement.children).indexOf(e),O(e,!0),a(n));for(let p of o)s.patch(p);return p=>s.patch(p)}function B(e){if(e?._vode){let a=function(t){if(!t?.node)return;let s=b(t);if(s){for(let c in s)c[0]==="o"&&c[1]==="n"&&(t.node[c]=null);t.node.catch=null}let r=M(t);if(r)for(let c of r)a(c)};var n=a;let o=e._vode;delete e._vode,Object.defineProperty(o.state,"patch",{value:void 0}),Object.defineProperty(o,"renderSync",{value:()=>{}}),Object.defineProperty(o,"renderAsync",{value:()=>{}}),a(o.vode)}}function O(e,n){if(e?.nodeType===Node.TEXT_NODE)return e.nodeValue?.trim()!==""?n?e:e.nodeValue:void 0;if(e.nodeType===Node.COMMENT_NODE)return;if(e.nodeType===Node.ELEMENT_NODE){let o=[e.tagName.toLowerCase()];if(n&&(o.node=e),e?.hasAttributes()){let t={},s=e.attributes;for(let r of s)t[r.name]=r.value;o.push(t)}if(e.hasChildNodes()){let t=[];for(let s of e.childNodes){let r=s&&O(s,n);r?o.push(r):s&&n&&t.push(s)}for(let s of t)s.remove()}return o}else return}function _(e,n){if(!e||!Array.isArray(e))throw new Error("first argument to memo() must be an array of values to compare");if(typeof n!="function")throw new Error("second argument to memo() must be a function that returns a vode or props object");return n.__memo=e,n}function q(e){if(!e||typeof e!="object")throw new Error("createState() must be called with a state object");return e}function X(e){return e}function $(e){return e?Array.isArray(e)?e[0]:typeof e=="string"||e.nodeType===Node.TEXT_NODE?"#text":void 0:void 0}function b(e){if(Array.isArray(e)&&e.length>1&&e[1]&&!Array.isArray(e[1])&&typeof e[1]=="object"&&e[1].nodeType!==Node.TEXT_NODE)return e[1]}function M(e){let n=D(e);return n>0?e.slice(n):null}function w(e){let n=D(e);return n<0?0:e.length-n}function Y(e,n){let a=D(e);if(a>0)return e[n+a]}function D(e){return b(e)?e.length>2?2:-1:Array.isArray(e)&&e.length>1?1:-1}function y(e,n,a){if(!n)return e;for(let o in n){let t=n[o];if(t&&typeof t=="object"){let s=e[o];s?Array.isArray(t)?e[o]=[...t]:t instanceof Date&&s!==t?e[o]=new Date(t):Array.isArray(s)?e[o]=y({},t,a):typeof s=="object"?y(e[o],t,a):e[o]=y({},t,a):Array.isArray(t)?e[o]=[...t]:t instanceof Date?e[o]=new Date(t):e[o]=y({},t,a)}else t===void 0&&a?delete e[o]:e[o]=t}return e}function P(e,n,a,o,t,s){try{t=N(e,t,o);let r=!t||typeof t=="number"||typeof t=="boolean";if(t===o||!o&&r)return o;let c=o?.nodeType===Node.TEXT_NODE,i=c?o:o?.node;if(r){i?.onUnmount&&e.patch(i.onUnmount(i)),i?.remove();return}let h=!r&&U(t),p=!r&&H(t),d=!!t&&typeof t!="string"&&!!(t?.node||t?.nodeType===Node.TEXT_NODE);if(!h&&!p&&!d&&!o)throw new Error("Invalid vode: "+typeof t+" "+JSON.stringify(t));if(d&&h?t=t.wholeText:d&&p&&(t=[...t]),c&&h)return i.nodeValue!==t&&(i.nodeValue=t),o;if(h&&(!i||!c)){let l=document.createTextNode(t);return i?(i.onUnmount&&e.patch(i.onUnmount(i)),i.replaceWith(l)):n.childNodes[a]?n.insertBefore(l,n.childNodes[a]):n.appendChild(l),l}if(p&&(!i||c||o[0]!==t[0])){let l=t;1 in l&&(l[1]=N(e,l[1],void 0));let f=b(t);s=f?.xmlns||s;let S=s?document.createElementNS(s,t[0]):document.createElement(t[0]);t.node=S,R(e,S,void 0,f),f&&"catch"in f&&(t.node.catch=null,t.node.removeAttribute("catch")),i?(i.onUnmount&&e.patch(i.onUnmount(i)),i.replaceWith(S)):n.childNodes[a]?n.insertBefore(S,n.childNodes[a]):n.appendChild(S);let A=M(t);if(A)for(let T=0;T<A.length;T++){let g=A[T],x=P(e,S,T,void 0,g,s);t[f?T+2:T+1]=x}return S.onMount&&e.patch(S.onMount(S)),t}if(!c&&p&&o[0]===t[0]){t.node=i;let l=t,f=o,S=b(t),A=!!S,T=b(o);if(l[1]?.__memo){let u=l[1];l[1]=N(e,l[1],f[1]),u!==l[1]&&R(e,i,T,S)}else R(e,i,T,S);S?.catch&&T?.catch!==S.catch&&(t.node.catch=null,t.node.removeAttribute("catch"));let g=M(t),x=M(o);if(g)for(let u=0;u<g.length;u++){let m=g[u],j=x&&x[u],v=P(e,i,u,j,m,s);v&&(t[A?u+2:u+1]=v)}if(x){let u=g?g.length:0;for(let m=x.length-1;m>=u;m--)P(e,i,m,x[m],void 0,s)}return t}}catch(r){let c=b(t)?.catch;if(c){let i=typeof c=="function"?c(e,r):c;return P(e,n,a,O(t?.node||o?.node,!0),i,s)}else throw r}}function H(e){return Array.isArray(e)&&e.length>0&&typeof e[0]=="string"}function U(e){return typeof e=="string"||e?.nodeType===Node.TEXT_NODE}function N(e,n,a){if(typeof n!="function")return n;let o=n?.__memo,t=a?.__memo;if(Array.isArray(o)&&Array.isArray(t)&&o.length===t.length){let r=!0;for(let c=0;c<o.length;c++)if(o[c]!==t[c]){r=!1;break}if(r)return a}let s=L(n,e);return typeof s=="object"&&(s.__memo=n?.__memo),s}function L(e,n){return typeof e=="function"?L(e(n),n):e}function R(e,n,a,o){if(!(!o&&!a)){if(a)for(let t in a){let s=a[t],r=o?.[t];s!==r&&(o?o[t]=C(e,n,t,s,r):C(e,n,t,s,void 0))}if(o&&a){for(let t in o)if(!(t in a)){let s=o[t];o[t]=C(e,n,t,void 0,s)}}else if(o)for(let t in o){let s=o[t];o[t]=C(e,n,t,void 0,s)}}}function C(e,n,a,o,t){if(a==="style")if(!t)n.style.cssText="";else if(typeof t=="string")o!==t&&(n.style.cssText=t);else if(o&&typeof o=="object"){for(let s in o)t[s]||(n.style[s]=null);for(let s in t){let r=o[s],c=t[s];r!==c&&(n.style[s]=c)}}else for(let s in t)n.style[s]=t[s];else if(a==="class")t?n.setAttribute("class",I(t)):n.removeAttribute("class");else if(a[0]==="o"&&a[1]==="n")if(t){let s=null;if(typeof t=="function"){let r=t;s=c=>e.patch(r(e,c))}else typeof t=="object"&&(s=()=>e.patch(t));n[a]=s}else n[a]=null;else n[a]=t,t==null||t===!1?n.removeAttribute(a):n.setAttribute(a,t);return t}function I(e){return typeof e=="string"?e:Array.isArray(e)?e.map(I).join(" "):typeof e=="object"?Object.keys(e).filter(n=>e[n]).join(" "):""}var J="a",Q="abbr",z="address",Z="area",tt="article",et="aside",ot="audio",nt="b",st="base",at="bdi",rt="bdo",ct="blockquote",it="body",pt="br",lt="button",St="canvas",ft="caption",dt="cite",ut="code",Tt="col",yt="colgroup",gt="data",xt="datalist",ht="dd",mt="del",Et="details",bt="dfn",Pt="dialog",At="div",Ct="dl",Mt="dt",Nt="em",Rt="embed",Ot="fieldset",Dt="figcaption",vt="figure",Lt="footer",It="form",Vt="h1",Ft="h2",kt="h3",jt="h4",Ht="h5",Ut="h6",Gt="head",Kt="header",Bt="hgroup",_t="hr",qt="html",Xt="i",$t="iframe",wt="img",Yt="input",Wt="ins",Jt="kbd",Qt="label",zt="legend",Zt="li",te="link",ee="main",oe="map",ne="mark",se="menu",ae="meta",re="meter",ce="nav",ie="noscript",pe="object",le="ol",Se="optgroup",fe="option",de="output",ue="p",Te="picture",ye="pre",ge="progress",xe="q",he="rp",me="rt",Ee="ruby",be="s",Pe="samp",Ae="script",Ce="search",Me="section",Ne="select",Re="slot",Oe="small",De="source",ve="span",Le="strong",Ie="style",Ve="sub",Fe="summary",ke="sup",je="table",He="tbody",Ue="td",Ge="template",Ke="textarea",Be="tfoot",_e="th",qe="thead",Xe="time",$e="title",we="tr",Ye="track",We="u",Je="ul",Qe="var",ze="video",Ze="wbr",to="animate",eo="animateMotion",oo="animateTransform",no="circle",so="clipPath",ao="defs",ro="desc",co="ellipse",io="feBlend",po="feColorMatrix",lo="feComponentTransfer",So="feComposite",fo="feConvolveMatrix",uo="feDiffuseLighting",To="feDisplacementMap",yo="feDistantLight",go="feDropShadow",xo="feFlood",ho="feFuncA",mo="feFuncB",Eo="feFuncG",bo="feFuncR",Po="feGaussianBlur",Ao="feImage",Co="feMerge",Mo="feMergeNode",No="feMorphology",Ro="feOffset",Oo="fePointLight",Do="feSpecularLighting",vo="feSpotLight",Lo="feTile",Io="feTurbulence",Vo="filter",Fo="foreignObject",ko="g",jo="image",Ho="line",Uo="linearGradient",Go="marker",Ko="mask",Bo="metadata",_o="mpath",qo="path",Xo="pattern",$o="polygon",wo="polyline",Yo="radialGradient",Wo="rect",Jo="set",Qo="stop",zo="svg",Zo="switch",tn="symbol",en="text",on="textPath",nn="tspan",sn="use",an="view",rn="annotation",cn="annotation-xml",pn="maction",ln="math",Sn="merror",fn="mfrac",dn="mi",un="mmultiscripts",Tn="mn",yn="mo",gn="mover",xn="mpadded",hn="mphantom",mn="mprescripts",En="mroot",bn="mrow",Pn="ms",An="mspace",Cn="msqrt",Mn="mstyle",Nn="msub",Rn="msubsup",On="msup",Dn="mtable",vn="mtd",Ln="mtext",In="mtr",Vn="munder",Fn="munderover",kn="semantics";function Hn(...e){if(!e||e.length===0)return null;if(e.length===1)return e[0];let n=e[0];for(let a=1;a<e.length;a++){let o=n,t=e[a];if(!o)n=t;else if(t)if(typeof o=="string"&&typeof t=="string"){let s=o.split(" "),r=t.split(" "),c=new Set([...s,...r]);n=Array.from(c).join(" ").trim()}else if(typeof o=="string"&&Array.isArray(t)){let s=new Set([...t,...o.split(" ")]);n=Array.from(s).join(" ").trim()}else if(Array.isArray(o)&&typeof t=="string"){let s=new Set([...o,...t.split(" ")]);n=Array.from(s).join(" ").trim()}else if(Array.isArray(o)&&Array.isArray(t)){let s=new Set([...o,...t]);n=Array.from(s).join(" ").trim()}else if(typeof o=="string"&&typeof t=="object")n={[o]:!0,...t};else if(typeof o=="object"&&typeof t=="string")n={...o,[t]:!0};else if(typeof o=="object"&&typeof t=="object")n={...o,...t};else if(typeof o=="object"&&Array.isArray(t)){let s={...o};for(let r of t)s[r]=!0;n=s}else if(Array.isArray(o)&&typeof t=="object"){let s={};for(let r of o)s[r]=!0;for(let r of Object.keys(t))s[r]=t[r];n=s}else throw new Error(`cannot merge classes of ${o} (${typeof o}) and ${t} (${typeof t})`);else continue}return n}var V=document.createElement("div");function Gn(...e){try{let n=V.style;for(let a of e)if(typeof a=="object"&&a!==null)for(let o in a)n[o]=a[o];else typeof a=="string"&&(n.cssText+=";"+a);return n.cssText}finally{V.style.cssText=""}}var F=class{constructor(n,a){this.state=n;this.path=a;this.keys=a.split(".")}keys;get(){let n=this.keys,a=this.state?this.state[n[0]]:void 0;for(let o=1;o<n.length&&a;o++)a=a[n[o]];return a}put(n){this.putDeep(n,this.state)}patch(n){if(Array.isArray(n)){let a=[];for(let o of n)a.push(this.createPatch(o));this.state.patch(a)}else this.state.patch(this.createPatch(n))}createPatch(n){let a={};return this.putDeep(n,a),a}putDeep(n,a){let o=this.keys;if(o.length>1){let t=0,s=a[o[t]];for((typeof s!="object"||s===null)&&(a[o[t]]=s={}),t=1;t<o.length-1;t++){let r=s;s=s[o[t]],(typeof s!="object"||s===null)&&(r[o[t]]=s={})}s[o[t]]=n}else typeof a[o[0]]=="object"&&typeof n=="object"?Object.assign(a[o[0]],n):a[o[0]]=n}},k=class{constructor(n,a,o,t){this.state=n;this.get=a;this.put=o;this.patch=t}};export{J as A,Q as ABBR,z as ADDRESS,to as ANIMATE,eo as ANIMATEMOTION,oo as ANIMATETRANSFORM,rn as ANNOTATION,cn as ANNOTATION_XML,Z as AREA,tt as ARTICLE,et as ASIDE,ot as AUDIO,nt as B,st as BASE,at as BDI,rt as BDO,ct as BLOCKQUOTE,it as BODY,pt as BR,lt as BUTTON,St as CANVAS,ft as CAPTION,no as CIRCLE,dt as CITE,so as CLIPPATH,ut as CODE,Tt as COL,yt as COLGROUP,gt as DATA,xt as DATALIST,ht as DD,ao as DEFS,mt as DEL,ro as DESC,Et as DETAILS,bt as DFN,Pt as DIALOG,At as DIV,Ct as DL,Mt as DT,k as DelegateStateContext,co as ELLIPSE,Nt as EM,Rt as EMBED,io as FEBLEND,po as FECOLORMATRIX,lo as FECOMPONENTTRANSFER,So as FECOMPOSITE,fo as FECONVOLVEMATRIX,uo as FEDIFFUSELIGHTING,To as FEDISPLACEMENTMAP,yo as FEDISTANTLIGHT,go as FEDROPSHADOW,xo as FEFLOOD,ho as FEFUNCA,mo as FEFUNCB,Eo as FEFUNCG,bo as FEFUNCR,Po as FEGAUSSIANBLUR,Ao as FEIMAGE,Co as FEMERGE,Mo as FEMERGENODE,No as FEMORPHOLOGY,Ro as FEOFFSET,Oo as FEPOINTLIGHT,Do as FESPECULARLIGHTING,vo as FESPOTLIGHT,Lo as FETILE,Io as FETURBULENCE,Ot as FIELDSET,Dt as FIGCAPTION,vt as FIGURE,Vo as FILTER,Lt as FOOTER,Fo as FOREIGNOBJECT,It as FORM,ko as G,Vt as H1,Ft as H2,kt as H3,jt as H4,Ht as H5,Ut as H6,Gt as HEAD,Kt as HEADER,Bt as HGROUP,_t as HR,qt as HTML,Xt as I,$t as IFRAME,jo as IMAGE,wt as IMG,Yt as INPUT,Wt as INS,Jt as KBD,F as KeyStateContext,Qt as LABEL,zt as LEGEND,Zt as LI,Ho as LINE,Uo as LINEARGRADIENT,te as LINK,pn as MACTION,ee as MAIN,oe as MAP,ne as MARK,Go as MARKER,Ko as MASK,ln as MATH,se as MENU,Sn as MERROR,ae as META,Bo as METADATA,re as METER,fn as MFRAC,dn as MI,un as MMULTISCRIPTS,Tn as MN,yn as MO,gn as MOVER,xn as MPADDED,_o as MPATH,hn as MPHANTOM,mn as MPRESCRIPTS,En as MROOT,bn as MROW,Pn as MS,An as MSPACE,Cn as MSQRT,Mn as MSTYLE,Nn as MSUB,Rn as MSUBSUP,On as MSUP,Dn as MTABLE,vn as MTD,Ln as MTEXT,In as MTR,Vn as MUNDER,Fn as MUNDEROVER,ce as NAV,ie as NOSCRIPT,pe as OBJECT,le as OL,Se as OPTGROUP,fe as OPTION,de as OUTPUT,ue as P,qo as PATH,Xo as PATTERN,Te as PICTURE,$o as POLYGON,wo as POLYLINE,ye as PRE,ge as PROGRESS,xe as Q,Yo as RADIALGRADIENT,Wo as RECT,he as RP,me as RT,Ee as RUBY,be as S,Pe as SAMP,Ae as SCRIPT,Ce as SEARCH,Me as SECTION,Ne as SELECT,kn as SEMANTICS,Jo as SET,Re as SLOT,Oe as SMALL,De as SOURCE,ve as SPAN,Qo as STOP,Le as STRONG,Ie as STYLE,Ve as SUB,Fe as SUMMARY,ke as SUP,zo as SVG,Zo as SWITCH,tn as SYMBOL,je as TABLE,He as TBODY,Ue as TD,Ge as TEMPLATE,en as TEXT,Ke as TEXTAREA,on as TEXTPATH,Be as TFOOT,_e as TH,qe as THEAD,Xe as TIME,$e as TITLE,we as TR,Ye as TRACK,nn as TSPAN,We as U,Je as UL,sn as USE,Qe as VAR,ze as VIDEO,an as VIEW,Ze as WBR,K as app,Y as child,w as childCount,M as children,D as childrenStart,X as createPatch,q as createState,B as defuse,E as globals,O as hydrate,_ as memo,Hn as mergeClass,Gn as mergeStyle,b as props,$ as tag,G as vode};

package/dist/vode.mjs

@@ -20,6 +20,7 @@ function app(container, state, dom, ...initialPatches) {
   _vode.qSync = null;
   _vode.qAsync = null;
   _vode.stats = { lastSyncRenderTime: 0, lastAsyncRenderTime: 0, syncRenderCount: 0, asyncRenderCount: 0, liveEffectCount: 0, patchCount: 0, syncRenderPatchCount: 0, asyncRenderPatchCount: 0 };
+  const patchableState = state;
   Object.defineProperty(state, "patch", {
     enumerable: false,
     configurable: true,
@@ -35,28 +36,28 @@ function app(container, state, dom, ...initialPatches) {
           while (v.done === false) {
             _vode.stats.liveEffectCount++;
             try {
-              _vode.patch(v.value, isAsync);
+              patchableState.patch(v.value, isAsync);
               v = await generator.next();
             } finally {
               _vode.stats.liveEffectCount--;
             }
           }
-          _vode.patch(v.value, isAsync);
+          patchableState.patch(v.value, isAsync);
         } finally {
           _vode.stats.liveEffectCount--;
         }
       } else if (action.then) {
         _vode.stats.liveEffectCount++;
         try {
-          const nextState = await action;
-          _vode.patch(nextState, isAsync);
+          const resolvedPatch = await action;
+          patchableState.patch(resolvedPatch, isAsync);
         } finally {
           _vode.stats.liveEffectCount--;
         }
       } else if (Array.isArray(action)) {
         if (action.length > 0) {
           for (const p of action) {
-            _vode.patch(p, !document.hidden && !!_vode.asyncRenderer);
+            patchableState.patch(p, !document.hidden && !!_vode.asyncRenderer);
           }
         } else {
           _vode.qSync = mergeState(_vode.qSync || {}, _vode.qAsync, false);
@@ -69,7 +70,7 @@ function app(container, state, dom, ...initialPatches) {
           _vode.renderSync();
         }
       } else if (typeof action === "function") {
-        _vode.patch(action(_vode.state), isAsync);
+        patchableState.patch(action(_vode.state), isAsync);
       } else {
         if (isAsync) {
           _vode.stats.asyncRenderPatchCount++;
@@ -86,7 +87,7 @@ function app(container, state, dom, ...initialPatches) {
   function renderDom(isAsync) {
     const sw = Date.now();
     const vom = dom(_vode.state);
-    _vode.vode = render(_vode.state, _vode.patch, container.parentElement, 0, _vode.vode, vom);
+    _vode.vode = render(_vode.state, container.parentElement, 0, _vode.vode, vom);
     if (container.tagName.toUpperCase() !== vom[0].toUpperCase()) {
       container = _vode.vode.node;
       container._vode = _vode;
@@ -135,22 +136,20 @@ function app(container, state, dom, ...initialPatches) {
       if (_vode.qAsync) _vode.renderAsync();
     }
   });
-  _vode.patch = state.patch;
-  _vode.state = state;
+  _vode.state = patchableState;
   const root = container;
   root._vode = _vode;
   _vode.vode = render(
     state,
-    _vode.patch,
     container.parentElement,
     Array.from(container.parentElement.children).indexOf(container),
     hydrate(container, true),
     dom(state)
   );
   for (const effect of initialPatches) {
-    _vode.patch(effect);
+    patchableState.patch(effect);
   }
-  return _vode.patch;
+  return (action) => patchableState.patch(action);
 }
 function defuse(container) {
   if (container?._vode) {
@@ -293,7 +292,7 @@ function mergeState(target, source, allowDeletion) {
   }
   return target;
 }
-function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
+function render(state, parent, childIndex, oldVode, newVode, xmlns) {
   try {
     newVode = remember(state, newVode, oldVode);
     const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
@@ -303,7 +302,7 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
     const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
     const oldNode = oldIsText ? oldVode : oldVode?.node;
     if (isNoVode) {
-      oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
+      oldNode?.onUnmount && state.patch(oldNode.onUnmount(oldNode));
       oldNode?.remove();
       return void 0;
     }
@@ -326,7 +325,7 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
     if (isText && (!oldNode || !oldIsText)) {
       const text = document.createTextNode(newVode);
       if (oldNode) {
-        oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+        oldNode.onUnmount && state.patch(oldNode.onUnmount(oldNode));
         oldNode.replaceWith(text);
       } else {
         if (parent.childNodes[childIndex]) {
@@ -346,13 +345,13 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
       xmlns = properties?.xmlns || xmlns;
       const newNode = xmlns ? document.createElementNS(xmlns, newVode[0]) : document.createElement(newVode[0]);
       newVode.node = newNode;
-      patchProperties(state, patch, newNode, void 0, properties);
+      patchProperties(state, newNode, void 0, properties);
       if (!!properties && "catch" in properties) {
         newVode.node["catch"] = null;
         newVode.node.removeAttribute("catch");
       }
       if (oldNode) {
-        oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
+        oldNode.onUnmount && state.patch(oldNode.onUnmount(oldNode));
         oldNode.replaceWith(newNode);
       } else {
         if (parent.childNodes[childIndex]) {
@@ -365,11 +364,11 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
       if (newChildren) {
         for (let i = 0; i < newChildren.length; i++) {
           const child2 = newChildren[i];
-          const attached = render(state, patch, newNode, i, void 0, child2, xmlns);
+          const attached = render(state, newNode, i, void 0, child2, xmlns);
           newVode[properties ? i + 2 : i + 1] = attached;
         }
       }
-      newNode.onMount && patch(newNode.onMount(newNode));
+      newNode.onMount && state.patch(newNode.onMount(newNode));
       return newVode;
     }
     if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
@@ -383,10 +382,10 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
         const prev = newvode[1];
         newvode[1] = remember(state, newvode[1], oldvode[1]);
         if (prev !== newvode[1]) {
-          patchProperties(state, patch, oldNode, oldProps, properties);
+          patchProperties(state, oldNode, oldProps, properties);
         }
       } else {
-        patchProperties(state, patch, oldNode, oldProps, properties);
+        patchProperties(state, oldNode, oldProps, properties);
       }
       if (!!properties?.catch && oldProps?.catch !== properties.catch) {
         newVode.node["catch"] = null;
@@ -398,7 +397,7 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
         for (let i = 0; i < newKids.length; i++) {
           const child2 = newKids[i];
           const oldChild = oldKids && oldKids[i];
-          const attached = render(state, patch, oldNode, i, oldChild, child2, xmlns);
+          const attached = render(state, oldNode, i, oldChild, child2, xmlns);
           if (attached) {
             newVode[hasProps ? i + 2 : i + 1] = attached;
           }
@@ -407,7 +406,7 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
       if (oldKids) {
         const newKidsCount = newKids ? newKids.length : 0;
         for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
-          render(state, patch, oldNode, i, oldKids[i], void 0, xmlns);
+          render(state, oldNode, i, oldKids[i], void 0, xmlns);
         }
       }
       return newVode;
@@ -418,7 +417,6 @@ function render(state, patch, parent, childIndex, oldVode, newVode, xmlns) {
       const handledVode = typeof catchVode === "function" ? catchVode(state, error) : catchVode;
       return render(
         state,
-        patch,
         parent,
         childIndex,
         hydrate(newVode?.node || oldVode?.node, true),
@@ -465,15 +463,15 @@ function unwrap(c, s) {
     return c;
   }
 }
-function patchProperties(s, patch, node, oldProps, newProps) {
+function patchProperties(s, node, oldProps, newProps) {
   if (!newProps && !oldProps) return;
   if (oldProps) {
     for (const key in oldProps) {
       const oldValue = oldProps[key];
       const newValue = newProps?.[key];
       if (oldValue !== newValue) {
-        if (newProps) newProps[key] = patchProperty(s, patch, node, key, oldValue, newValue);
-        else patchProperty(s, patch, node, key, oldValue, void 0);
+        if (newProps) newProps[key] = patchProperty(s, node, key, oldValue, newValue);
+        else patchProperty(s, node, key, oldValue, void 0);
       }
     }
   }
@@ -481,17 +479,17 @@ function patchProperties(s, patch, node, oldProps, newProps) {
     for (const key in newProps) {
       if (!(key in oldProps)) {
         const newValue = newProps[key];
-        newProps[key] = patchProperty(s, patch, node, key, void 0, newValue);
+        newProps[key] = patchProperty(s, node, key, void 0, newValue);
       }
     }
   } else if (newProps) {
     for (const key in newProps) {
       const newValue = newProps[key];
-      newProps[key] = patchProperty(s, patch, node, key, void 0, newValue);
+      newProps[key] = patchProperty(s, node, key, void 0, newValue);
     }
   }
 }
-function patchProperty(s, patch, node, key, oldValue, newValue) {
+function patchProperty(s, node, key, oldValue, newValue) {
   if (key === "style") {
     if (!newValue) {
       node.style.cssText = "";
@@ -527,9 +525,9 @@ function patchProperty(s, patch, node, key, oldValue, newValue) {
       let eventHandler = null;
       if (typeof newValue === "function") {
         const action = newValue;
-        eventHandler = (evt) => patch(action(s, evt));
+        eventHandler = (evt) => s.patch(action(s, evt));
       } else if (typeof newValue === "object") {
-        eventHandler = () => patch(newValue);
+        eventHandler = () => s.patch(newValue);
       }
       node[key] = eventHandler;
     } else {
@@ -809,6 +807,26 @@ function mergeClass(...classes) {
   return finalClass;
 }
 
+// src/merge-style.ts
+var tempDivForStyling = document.createElement("div");
+function mergeStyle(...props2) {
+  try {
+    const merged = tempDivForStyling.style;
+    for (const style of props2) {
+      if (typeof style === "object" && style !== null) {
+        for (const key in style) {
+          merged[key] = style[key];
+        }
+      } else if (typeof style === "string") {
+        merged.cssText += ";" + style;
+      }
+    }
+    return merged.cssText;
+  } finally {
+    tempDivForStyling.style.cssText = "";
+  }
+}
+
 // src/state-context.ts
 var KeyStateContext = class {
   constructor(state, path) {
@@ -1105,6 +1123,7 @@ export {
   hydrate,
   memo,
   mergeClass,
+  mergeStyle,
   props,
   tag,
   vode

package/index.ts

@@ -3,4 +3,5 @@ export * from "./src/vode.js";
 // utilities
 export * from "./src/vode-tags.js";
 export * from "./src/merge-class.js";
+export * from "./src/merge-style.js";
 export * from "./src/state-context.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "1.5.2",
+    "version": "1.6.0",
     "description": "a minimalist web framework",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",
@@ -36,7 +36,7 @@
         "watch": "tsc -b -w"
     },
     "devDependencies": {
-        "esbuild": "0.25.12",
+        "esbuild": "0.27.0",
         "typescript": "5.9.3"
     }
 }

package/src/merge-style.ts

@@ -0,0 +1,23 @@
+import { StyleProp } from "./vode.js";
+
+const tempDivForStyling = document.createElement('div');
+
+/** merge `StyleProps`s regardless of type 
+ * @returns {string} merged StyleProp */
+export function mergeStyle(...props: StyleProp[]): StyleProp {
+    try{
+        const merged = tempDivForStyling.style;
+        for (const style of props) {
+            if (typeof style === 'object' && style !== null) {
+                for (const key in style) {
+                    merged[key] = style[key];
+                }
+            } else if (typeof style === 'string') {
+                merged.cssText += ';' + style;
+            }
+        }
+        return merged.cssText;
+    } finally {
+        tempDivForStyling.style.cssText = '';
+    }
+}

package/src/vode.ts

@@ -86,7 +86,6 @@ export type ContainerNode<S = PatchableState> = HTMLElement & {
     _vode: {
         state: PatchableState<S>,
         vode: AttachedVode<S>,
-        patch: Dispatch<S>,
         renderSync: () => void,
         renderAsync: () => Promise<unknown>,
         syncRenderer: (cb: () => void) => void,
@@ -131,18 +130,25 @@ export function vode<S = PatchableState>(tag: Tag | Vode<S>, props?: Props<S> |
  * @param initialPatches variadic list of patches that are applied after the first render
  * @returns a patch function that can be used to update the state
  */
-export function app<S = PatchableState>(container: Element, state: Omit<S, "patch">, dom: (s: S) => Vode<S>, ...initialPatches: Patch<S>[]) {
+export function app<S extends PatchableState = PatchableState>(
+    container: Element,
+    state: Omit<S, "patch">,
+    dom: (s: S) => Vode<S>,
+    ...initialPatches: Patch<S>[]
+): Dispatch<S> {
     if (!container?.parentElement) throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");
     if (!state || typeof state !== "object") throw new Error("second argument to app() must be a state object");
     if (typeof dom !== "function") throw new Error("third argument to app() must be a function that returns a vode");
 
-    const _vode = {} as ContainerNode<S>["_vode"] & { patch: (action: Patch<S>, animate?: boolean) => void };
+    const _vode = {} as ContainerNode<S>["_vode"];
     _vode.syncRenderer = globals.requestAnimationFrame;
     _vode.asyncRenderer = globals.startViewTransition;
     _vode.qSync = null;
     _vode.qAsync = null;
     _vode.stats = { lastSyncRenderTime: 0, lastAsyncRenderTime: 0, syncRenderCount: 0, asyncRenderCount: 0, liveEffectCount: 0, patchCount: 0, syncRenderPatchCount: 0, asyncRenderPatchCount: 0 };
 
+    const patchableState = state as PatchableState<S> & { patch: (action: Patch<S>, animate?: boolean) => void };
+
     Object.defineProperty(state, "patch", {
         enumerable: false, configurable: true,
         writable: false, value: async (action: Patch<S>, isAsync?: boolean) => {
@@ -157,28 +163,28 @@ export function app<S = PatchableState>(container: Element, state: Omit<S, "patc
                     while (v.done === false) {
                         _vode.stats.liveEffectCount++;
                         try {
-                            _vode.patch!(v.value, isAsync);
+                            patchableState.patch(v.value, isAsync);
                             v = await generator.next();
                         } finally {
                             _vode.stats.liveEffectCount--;
                         }
                     }
-                    _vode.patch!(v.value as Patch<S>, isAsync);
+                    patchableState.patch(v.value as Patch<S>, isAsync);
                 } finally {
                     _vode.stats.liveEffectCount--;
                 }
             } else if ((action as Promise<S>).then) {
                 _vode.stats.liveEffectCount++;
                 try {
-                    const nextState = await (action as Promise<S>);
-                    _vode.patch!(<Patch<S>>nextState, isAsync);
+                    const resolvedPatch = await (action as Promise<S>);
+                    patchableState.patch(<Patch<S>>resolvedPatch, isAsync);
                 } finally {
                     _vode.stats.liveEffectCount--;
                 }
             } else if (Array.isArray(action)) {
                 if (action.length > 0) {
                     for (const p of action) {
-                        _vode.patch(p, !document.hidden && !!_vode.asyncRenderer);
+                        patchableState.patch(p, !document.hidden && !!_vode.asyncRenderer);
                     }
                 } else { //when [] is patched: 1. skip current animation 2. merge all queued async patches into synced queue
                     _vode.qSync = mergeState(_vode.qSync || {}, _vode.qAsync, false);
@@ -188,7 +194,7 @@ export function app<S = PatchableState>(container: Element, state: Omit<S, "patc
                     _vode.renderSync();
                 }
             } else if (typeof action === "function") {
-                _vode.patch!((<(s: S) => unknown>action)(_vode.state), isAsync);
+                patchableState.patch((<(s: S) => unknown>action)(_vode.state), isAsync);
             } else {
                 if (isAsync) {
                     _vode.stats.asyncRenderPatchCount++;
@@ -206,7 +212,7 @@ export function app<S = PatchableState>(container: Element, state: Omit<S, "patc
     function renderDom(isAsync: boolean) {
         const sw = Date.now();
         const vom = dom(_vode.state);
-        _vode.vode = render(_vode.state, _vode.patch, container.parentElement as Element, 0, _vode.vode, vom)!;
+        _vode.vode = render<S>(_vode.state, container.parentElement as Element, 0, _vode.vode, vom)!;
 
         if ((<ContainerNode<S>>container).tagName.toUpperCase() !== (vom[0] as Tag).toUpperCase()) { //the tag name was changed during render -> update reference to vode-app-root 
             container = _vode.vode.node as Element;
@@ -262,15 +268,13 @@ export function app<S = PatchableState>(container: Element, state: Omit<S, "patc
         }
     });
 
-    _vode.patch = (<PatchableState<S>>state).patch;
-    _vode.state = <PatchableState<S>>state;
+    _vode.state = patchableState;
 
     const root = container as ContainerNode<S>;
     root._vode = _vode;
 
     _vode.vode = render(
         <S>state,
-        _vode.patch!,
         container.parentElement,
         Array.from(container.parentElement.children).indexOf(container),
         hydrate<S>(container, true) as AttachedVode<S>,
@@ -278,10 +282,10 @@ export function app<S = PatchableState>(container: Element, state: Omit<S, "patc
     )!;
 
     for (const effect of initialPatches) {
-        _vode.patch!(effect);
+        patchableState.patch(effect);
     }
 
-    return _vode.patch;
+    return (action: Patch<S>) => patchableState.patch(action);
 }
 
 /** unregister vode app from container and free resources
@@ -467,7 +471,7 @@ function mergeState(target: any, source: any, allowDeletion: boolean) {
     return target;
 };
 
-function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: number, oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>, xmlns?: string): AttachedVode<S> | undefined {
+function render<S extends PatchableState>(state: S, parent: Element, childIndex: number, oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>, xmlns?: string): AttachedVode<S> | undefined {
     try {
         // unwrap component if it is memoized
         newVode = remember(state, newVode, oldVode) as ChildVode<S>;
@@ -482,7 +486,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
 
         // falsy|text|element(A) -> undefined 
         if (isNoVode) {
-            (<any>oldNode)?.onUnmount && patch((<any>oldNode).onUnmount(oldNode));
+            (<any>oldNode)?.onUnmount && state.patch((<any>oldNode).onUnmount(oldNode));
             oldNode?.remove();
             return undefined;
         }
@@ -512,7 +516,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
         if (isText && (!oldNode || !oldIsText)) {
             const text = document.createTextNode(newVode as string)
             if (oldNode) {
-                (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
+                (<any>oldNode).onUnmount && state.patch((<any>oldNode).onUnmount(oldNode));
                 oldNode.replaceWith(text);
             } else {
                 if (parent.childNodes[childIndex]) {
@@ -541,7 +545,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
                 : document.createElement((<Vode<S>>newVode)[0]);
             (<AttachedVode<S>>newVode).node = newNode;
 
-            patchProperties(state, patch, newNode, undefined, properties);
+            patchProperties(state, newNode, undefined, properties);
 
             if (!!properties && 'catch' in properties) {
                 (<any>newVode).node['catch'] = null;
@@ -549,7 +553,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
             }
 
             if (oldNode) {
-                (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
+                (<any>oldNode).onUnmount && state.patch((<any>oldNode).onUnmount(oldNode));
                 oldNode.replaceWith(newNode);
             } else {
                 if (parent.childNodes[childIndex]) {
@@ -563,12 +567,12 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
             if (newChildren) {
                 for (let i = 0; i < newChildren.length; i++) {
                     const child = newChildren[i];
-                    const attached = render(state, patch, newNode as Element, i, undefined, child, xmlns);
+                    const attached = render(state, newNode as Element, i, undefined, child, xmlns);
                     (<Vode<S>>newVode!)[properties ? i + 2 : i + 1] = <Vode<S>>attached;
                 }
             }
 
-            (<any>newNode).onMount && patch((<any>newNode).onMount(newNode));
+            (<any>newNode).onMount && state.patch((<any>newNode).onMount(newNode));
             return <AttachedVode<S>>newVode;
         }
 
@@ -587,11 +591,11 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
                 const prev = newvode[1] as any;
                 newvode[1] = remember(state, newvode[1], oldvode[1]) as Vode<S>;
                 if (prev !== newvode[1]) {
-                    patchProperties(state, patch, oldNode!, oldProps, properties);
+                    patchProperties(state, oldNode!, oldProps, properties);
                 }
             }
             else {
-                patchProperties(state, patch, oldNode!, oldProps, properties);
+                patchProperties(state, oldNode!, oldProps, properties);
             }
 
             if (!!properties?.catch && oldProps?.catch !== properties.catch) {
@@ -606,7 +610,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
                     const child = newKids[i];
                     const oldChild = oldKids && oldKids[i];
 
-                    const attached = render(state, patch, oldNode as Element, i, oldChild, child, xmlns);
+                    const attached = render(state, oldNode as Element, i, oldChild, child, xmlns);
                     if (attached) {
                         (<Vode<S>>newVode)[hasProps ? i + 2 : i + 1] = <Vode<S>>attached;
                     }
@@ -616,7 +620,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
             if (oldKids) {
                 const newKidsCount = newKids ? newKids.length : 0;
                 for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
-                    render(state, patch, oldNode as Element, i, oldKids[i], undefined, xmlns);
+                    render(state, oldNode as Element, i, oldKids[i], undefined, xmlns);
                 }
             }
 
@@ -629,7 +633,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
                 ? (<(s: S, error: any) => ChildVode<S>>catchVode)(state, error)
                 : catchVode;
 
-            return render(state, patch, parent, childIndex,
+            return render(state, parent, childIndex,
                 hydrate(((<AttachedVode<S>>newVode)?.node || oldVode?.node) as Element, true) as AttachedVode<S>,
                 handledVode,
                 xmlns);
@@ -684,7 +688,7 @@ function unwrap<S>(c: Component<S> | ChildVode<S>, s: S): ChildVode<S> {
     }
 }
 
-function patchProperties<S>(s: S, patch: Dispatch<S>, node: ChildNode, oldProps?: Props<S>, newProps?: Props<S>) {
+function patchProperties<S extends PatchableState>(s: S, node: ChildNode, oldProps?: Props<S>, newProps?: Props<S>) {
     if (!newProps && !oldProps) return;
 
     // match existing properties
@@ -694,8 +698,8 @@ function patchProperties<S>(s: S, patch: Dispatch<S>, node: ChildNode, oldProps?
             const newValue = newProps?.[key as keyof Props<S>] as PropertyValue<S>;
 
             if (oldValue !== newValue) {
-                if (newProps) newProps[key as keyof Props<S>] = patchProperty(s, patch, node, key, oldValue, newValue);
-                else patchProperty(s, patch, node, key, oldValue, undefined);
+                if (newProps) newProps[key as keyof Props<S>] = patchProperty(s, node, key, oldValue, newValue);
+                else patchProperty(s, node, key, oldValue, undefined);
             }
         }
     }
@@ -705,7 +709,7 @@ function patchProperties<S>(s: S, patch: Dispatch<S>, node: ChildNode, oldProps?
         for (const key in newProps) {
             if (!(key in oldProps)) {
                 const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
-                newProps[key as keyof Props<S>] = patchProperty(s, patch, <Element>node, key, undefined, newValue);
+                newProps[key as keyof Props<S>] = patchProperty(s, <Element>node, key, undefined, newValue);
             }
         }
     }
@@ -713,12 +717,12 @@ function patchProperties<S>(s: S, patch: Dispatch<S>, node: ChildNode, oldProps?
     else if (newProps) {
         for (const key in newProps) {
             const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
-            newProps[key as keyof Props<S>] = patchProperty(s, patch, <Element>node, key, undefined, newValue);
+            newProps[key as keyof Props<S>] = patchProperty(s, <Element>node, key, undefined, newValue);
         }
     }
 }
 
-function patchProperty<S>(s: S, patch: Dispatch<S>, node: ChildNode, key: string | keyof ElementEventMap, oldValue?: PropertyValue<S>, newValue?: PropertyValue<S>) {
+function patchProperty<S extends PatchableState>(s: S, node: ChildNode, key: string | keyof ElementEventMap, oldValue?: PropertyValue<S>, newValue?: PropertyValue<S>) {
     if (key === "style") {
         if (!newValue) {
             (node as HTMLElement).style.cssText = "";
@@ -754,9 +758,9 @@ function patchProperty<S>(s: S, patch: Dispatch<S>, node: ChildNode, key: string
             let eventHandler: Function | null = null;
             if (typeof newValue === "function") {
                 const action = newValue as EventFunction<S>;
-                eventHandler = (evt: Event) => patch(action(s, evt));
+                eventHandler = (evt: Event) => s.patch(action(s, evt));
             } else if (typeof newValue === "object") {
-                eventHandler = () => patch(newValue as Patch<S>);
+                eventHandler = () => s.patch(newValue as Patch<S>);
             }
 
             (<any>node)[key] = eventHandler;