@vanijs/vani 0.2.0 → 0.3.0

package/dist/lib/index.mjs

@@ -1 +1 @@
-function e(e){let t=e;return t.__vaniKeyed||=new Map,t.__vaniKeyed}function t(e){return t=>{let n,r,i=!1,a=t;if(t&&typeof t==`object`){let e=t;if(n=e.key,r=e.ref,i=e.clientOnly,`key`in e||`ref`in e){let{key:t,ref:n,clientOnly:r,...i}=e;a=i}}return{$$vani:`component`,component:e,props:a,key:n,ref:r,clientOnly:i}}}let n=`dom`;function r(e,t){let r=n;n=e;let i=t();return i&&typeof i.finally==`function`?i.finally(()=>{n=r}):(n=r,i)}function i(){return n}function a(e){return typeof e==`object`&&!!e&&`type`in e}function o(e){return a(e)&&e.type===`element`}function s(e){return a(e)&&e.type===`fragment`}const c=new Set([`svg`,`g`,`path`,`circle`,`rect`,`line`,`polyline`,`polygon`,`ellipse`,`defs`,`clipPath`,`mask`,`pattern`,`linearGradient`,`radialGradient`,`stop`,`use`]);function l(e){return n===`dom`?c.has(e)?document.createElementNS(`http://www.w3.org/2000/svg`,e):document.createElement(e):{type:`element`,tag:e,props:{},children:[]}}function u(e){return n===`dom`?document.createTextNode(e):{type:`text`,text:e}}function d(e,t){if(n===`dom`){e.appendChild(t);return}(o(e)||s(e))&&e.children.push(t)}function f(e,t){let n=e.nextSibling;for(;n&&n!==t;){let e=n.nextSibling,t=n;t.__vaniDomRef&&(t.__vaniDomRef.current=null),n.remove(),n=e}}function p(e){if(e==null||e===!1)return document.createComment(`vani:empty`);if(g(e)){let t=document.createDocumentFragment(),n=m(e.component,v(e),t);return e.ref&&(e.ref.current=n),t}if(typeof e==`string`||typeof e==`number`)return document.createTextNode(String(e));if(e instanceof Node)return e;throw Error(`[vani] render returned an unsupported node type in DOM mode`)}function m(e,t,n){let r=[],i=!1,a,o,s=t?.clientOnly===!0;if(O){let e=A;A+=1,a=M(n,e),o=N(a,e)}else a=document.createComment(`vani:start`),o=document.createComment(`vani:end`),n.appendChild(a),n.appendChild(o);let c,l={update(){i||(C?T.has(l)||(E.add(l),D()):(E.delete(l),T.add(l),oe()))},updateSync(){if(i)return;let e=a.parentNode;if(!e)return;f(a,o);let t=p(c());e.insertBefore(t,o)},onCleanup(e){r.push(e)},dispose(){if(!i){i=!0,T.delete(l),E.delete(l);for(let e of r)e();r.length=0,f(a,o),a.remove(),o.remove(),c=(()=>document.createComment(`disposed`))}},effect(e){let t=e();typeof t==`function`&&r.push(t)}};if(O&&!s){let n=!1;return c=()=>{if(!n){n=!0;let r=e(t,l);c=r instanceof Promise?()=>document.createComment(`async`):r}return c()},l}let u=e(t,l);return u instanceof Promise?(c=t?.fallback||(()=>document.createComment(`vani:async`)),(!O||s)&&l.update(),u.then(e=>{i||(c=e,l.update())}),l):(c=u,(!O||s)&&l.update(),l)}function h(e,t){if(!t)throw Error(`[vani] root element not found`);let n=[];for(let r of e){if(typeof r==`function`){let e=m(r,{},t);n.push(e);continue}let e=m(r.component,v(r),t);n.push(e)}return n}function g(e){let t=typeof Node<`u`&&e instanceof Node;if(typeof e!=`object`||t)return!1;let n=e;return n.$$vani===`component`&&typeof n.component==`function`}function _(e){let t=typeof Node<`u`&&e instanceof Node;return typeof e==`object`&&!!e&&!t&&!g(e)}function v(e){return e.clientOnly?{...e.props??{},clientOnly:!0}:e.props}function y(t,r){if(n===`ssr`){for(let e of r)if(!(e==null||e===!1||e===void 0)){if(g(e)){d(t,{type:`component`,instance:e});continue}if(typeof e==`string`||typeof e==`number`){d(t,u(String(e)));continue}if(a(e)){d(t,e);continue}}return}let i=t;for(let t of r)if(!(t==null||t===!1||t===void 0)){if(g(t)){if(t.key!=null){let n=e(i),r=i.__vaniUsedKeys??=new Set,a=n.get(t.key);if(!a){let e=document.createDocumentFragment(),r=m(t.component,v(t),e);t.ref&&(t.ref.current=r),a={fragment:e,handle:r,ref:t.ref},n.set(t.key,a),t.ref&&(t.ref.current=r)}r.add(t.key),i.appendChild(a.fragment);continue}let n=document.createDocumentFragment(),r=m(t.component,v(t),n);t.ref&&(t.ref.current=r),i.appendChild(n);continue}if(typeof t==`string`||typeof t==`number`){i.appendChild(document.createTextNode(String(t)));continue}i.appendChild(t)}let o=i.__vaniKeyed,s=i.__vaniUsedKeys;if(o&&s){for(let[e,t]of o)s.has(e)||(t.handle.dispose(),t.ref&&(t.ref.current=null),o.delete(e));s.clear()}}function ee(e){return typeof SVGElement<`u`&&e instanceof SVGElement}function te(e,t){return e.startsWith(`aria`)?`aria-`+e.replace(`aria-`,``).replace(`aria`,``).toLowerCase():e.toLowerCase()===`htmlfor`?`for`:t?e:e.toLowerCase()}function ne(e,t){let n=o(e)?c.has(e.tag):ee(e);for(let r in t){let i=t[r];if(![`key`,`ref`].includes(r)){if(r===`className`){let t=b(i);o(e)?e.props.class=t:n?e.setAttribute(`class`,t):e.className=t;continue}if(r.startsWith(`on`)&&typeof i==`function`)o(e)||(e[r.toLowerCase()]=i);else if(i===!0)o(e)?e.props[r]=!0:e.setAttribute(r,``);else if(i===!1||i==null)continue;else{let t=te(r,n);o(e)?e.props[t]=String(i):e.setAttribute(t,String(i))}}}}function b(...e){return e.map(e=>{if(!(e==null||e===``))return typeof e==`string`?e.trim():Array.isArray(e)?b(...e):Object.entries(e).filter(([e,t])=>t).map(([e])=>e.trim()).join(` `).trim()}).filter(Boolean).join(` `)}function x(e,t,...n){let r=l(e);return _(t)?(t.ref&&(o(r)?t.ref.current=null:(t.ref.current=r,r.__vaniDomRef=t.ref)),ne(r,t),y(r,n),r):(y(r,[t,...n]),r)}const re=(...e)=>{if(n===`ssr`){let t={type:`fragment`,children:[]};return y(t,e),t}let t=document.createDocumentFragment();return y(t,e),t};function ie(e,t){if(n===`ssr`)return{type:`component`,instance:{$$vani:`component`,component:e,props:t}};let r=document.createDocumentFragment();return m(e,t,r),r}let S=!1,C=!1,w=!1;const T=new Set,E=new Set;function ae(e){let t=C;C=!0;try{e()}finally{C=t,D()}}function D(){w||(w=!0,setTimeout(()=>{w=!1,se()},0))}function oe(){S||(S=!0,queueMicrotask(()=>{S=!1;for(let e of T)e.updateSync();T.clear()}))}function se(){for(let e of E)e.updateSync();E.clear(),E.size>0&&D()}let O=!1,k=null,A=0;function j(e){F()&&console.warn(`[vani] hydration warning: ${e}`)}function M(e,t){let n=k;(!n||!e.contains(n))&&(n=e.firstChild);let r=!1;for(;n;){if(n.nodeType===Node.COMMENT_NODE&&n.nodeValue===`vani:start`)return r&&j(`Found <!--vani:end--> before <!--vani:start--> for component #${t}. This usually means the server HTML anchor order is incorrect.`),n;n.nodeType===Node.COMMENT_NODE&&n.nodeValue===`vani:end`&&(r=!0),n=n.nextSibling}throw j(`Expected <!--vani:start--> for component #${t}, but none was found. This usually means the server HTML does not match the client component tree.`),Error(`[vani] hydration failed: start anchor not found`)}function N(e,t){let n=e.nextSibling,r=0;for(;n;){if(n.nodeType===Node.COMMENT_NODE){if(n.nodeValue===`vani:start`)r+=1;else if(n.nodeValue===`vani:end`){if(r===0)return k=n.nextSibling,n;--r}}n=n.nextSibling}throw j(`Expected <!--vani:end--> for component #${t}, but none was found. This usually means the server HTML does not match the client component tree.`),Error(`[vani] hydration failed: end anchor not found`)}function P(e,t){let n=[];O=!0,k=t.firstChild,A=0;try{n=h(e,t)}catch(e){console.error(`[vani] hydration failed:`,e)}finally{if(F()&&k){let e=k,t=!1;for(;e;){if(e.nodeType===Node.COMMENT_NODE){let n=e.nodeValue;if(n===`vani:start`||n===`vani:end`){t=!0;break}}e=e.nextSibling}t&&j(`Unused SSR anchors detected after hydration. Some server-rendered DOM was not claimed by the client runtime.`)}O=!1,k=null,A=0}return n}function F(){return`__vaniDevMode`in globalThis?globalThis.__vaniDevMode===!0:import.meta.env?import.meta.env.DEV:typeof process<`u`&&process.env!==void 0?process.env.NODE_ENV===`development`:!1}function I(e){return(t,...n)=>x(e,t,...n)}const L=I(`div`),R=I(`span`),z=I(`ul`),B=I(`li`),V=I(`ol`),H=I(`dl`),U=I(`dt`),W=I(`dd`),G=I(`main`),K=I(`header`),ce=I(`footer`),le=I(`section`),ue=I(`article`),de=I(`aside`),fe=I(`nav`),pe=I(`details`),me=I(`summary`),he=I(`a`),ge=I(`button`),_e=I(`input`),ve=I(`output`),ye=I(`textarea`),be=I(`select`),xe=I(`option`),Se=I(`optgroup`),Ce=I(`label`),we=I(`form`),Te=I(`progress`),Ee=I(`meter`),De=I(`fieldset`),Oe=I(`legend`),ke=I(`datalist`),Ae=I(`figure`),je=I(`figcaption`),Me=I(`img`),Ne=I(`picture`),Pe=I(`source`),Fe=I(`video`),Ie=I(`audio`),Le=I(`iframe`),Re=I(`embed`),ze=I(`time`),Be=I(`mark`),Ve=I(`p`),He=I(`h1`),Ue=I(`h2`),We=I(`h3`),Ge=I(`h4`),Ke=I(`h5`),qe=I(`h6`),Je=I(`code`),Ye=I(`pre`),Xe=I(`blockquote`),Ze=I(`var`),Qe=I(`kbd`),$e=I(`samp`),et=I(`cite`),tt=I(`dfn`),nt=I(`abbr`),rt=I(`small`),it=I(`strong`),at=I(`em`),ot=I(`br`),st=I(`hr`),ct=I(`table`),lt=I(`caption`),ut=I(`colgroup`),dt=I(`col`),ft=I(`tbody`),pt=I(`thead`),mt=I(`tfoot`),ht=I(`tr`),gt=I(`td`),_t=I(`th`),vt=I(`style`),yt=I(`script`),bt=I(`noscript`),xt=I(`template`),St=I(`slot`),Ct=I(`svg`),wt=I(`g`),Tt=I(`path`),Et=I(`circle`),Dt=I(`rect`),Ot=I(`line`),kt=I(`polyline`),At=I(`polygon`),jt=I(`ellipse`),Mt=I(`defs`),Nt=I(`clipPath`),Pt=I(`mask`),Ft=I(`pattern`),It=I(`linearGradient`),Lt=I(`radialGradient`),Rt=I(`stop`),zt=I(`use`),q=new Set([`area`,`base`,`br`,`col`,`embed`,`hr`,`img`,`input`,`link`,`meta`,`param`,`source`,`track`,`wbr`]);function Bt(){return{update(){},updateSync(){},dispose(){},onCleanup(){},effect(){}}}function Vt(e){return typeof e==`function`?{$$vani:`component`,component:e,props:{}}:e}function J(e){return e.replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`).replace(/'/g,`&#39;`)}function Ht(e){let t=[];for(let n of Object.keys(e)){let r=e[n];r==null||r===!1||n.startsWith(`on`)&&typeof r==`function`||(r===!0?t.push(n):t.push(`${n}="${J(String(r))}"`))}return t.length>0?` ${t.join(` `)}`:``}function Y(e){if(e==null||e===!1)return{type:`fragment`,children:[]};if(typeof e==`string`||typeof e==`number`)return{type:`text`,text:String(e)};if(g(e))return{type:`component`,instance:e};if(typeof e==`object`&&`type`in e)return e;throw Error(`[vani] SSR received a DOM node. This is not supported.`)}async function Ut(e){let t=`<!--vani:start-->`,n=`<!--vani:end-->`;if(e.clientOnly){let r=e.props?.fallback;return r?`${t}${await X(Y(r()))}${n}`:`${t}${n}`}let r=e.component(e.props,Bt());return`${t}${await X(Y((r instanceof Promise?await r:r)()))}${n}`}async function X(e){switch(e.type){case`text`:return J(e.text);case`comment`:return`<!--${e.text}-->`;case`fragment`:return(await Promise.all(e.children.map(X))).join(``);case`component`:return Ut(e.instance);case`element`:{let t=Ht(e.props);if(q.has(e.tag))return`<${e.tag}${t}>`;let n=(await Promise.all(e.children.map(X))).join(``);return`<${e.tag}${t}>${n}</${e.tag}>`}}}async function Wt(e){return r(`ssr`,async()=>{if(i()!==`ssr`)throw Error(`[vani] renderToString failed to set SSR render mode.`);let t=e.map(e=>({type:`component`,instance:Vt(e)}));return(await Promise.all(t.map(X))).join(``)})}const Z=new Map,Q=(e,t)=>{if(!t)return e;let n=`${e??``} ${t}`.trim();return n.length>0?n:void 0},Gt=(e,t)=>{if(!t)return;let n=t.size;if(n!=null&&(e.setAttribute(`width`,String(n)),e.setAttribute(`height`,String(n))),t.className){let n=Q(e.getAttribute(`class`)??void 0,t.className);n&&e.setAttribute(`class`,n)}if(t.attributes){for(let[n,r]of Object.entries(t.attributes))if(!(r==null||r===!1)){if(r===!0){e.setAttribute(n,``);continue}e.setAttribute(n,String(r))}}},Kt=e=>{let t={},n=/([^\s=]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?/g,r;for(;r=n.exec(e);){let e=r[1],n=r[2]??r[3]??r[4];t[e]=n===void 0?!0:n}return t},qt=e=>{let t=e.replace(/<!--[\s\S]*?-->/g,``).trim(),n=/<\/?[^>]+>/g,r=[],i=null,a=0,o,s=e=>{let t=r[r.length-1];t&&(t.type===`element`||t.type===`fragment`)&&t.children.push(e)};for(;o=n.exec(t);){let e=t.slice(a,o.index);e.trim().length>0&&s({type:`text`,text:e});let c=o[0];if(c.startsWith(`</`))r.pop();else{let e=c.endsWith(`/>`),t=c.slice(1,e?-2:-1).trim(),n=t.search(/\s/),a={type:`element`,tag:n===-1?t:t.slice(0,n),props:Kt(n===-1?``:t.slice(n+1)),children:[]};i?s(a):i=a,e||r.push(a)}a=n.lastIndex}return i??{type:`fragment`,children:[]}},$=e=>e.type===`text`?{type:`text`,text:e.text}:e.type===`comment`?{type:`comment`,text:e.text}:e.type===`fragment`?{type:`fragment`,children:e.children.map($)}:e.type===`component`?{type:`component`,instance:e.instance}:{type:`element`,tag:e.tag,props:{...e.props},children:e.children.map($)},Jt=(e,t)=>{if(!t||e.type!==`element`||e.tag!==`svg`)return;let n=e.props;if(t.size!=null&&(n.width=String(t.size),n.height=String(t.size)),t.className){let e=Q(n.class,t.className);e&&(n.class=e)}if(t.attributes){for(let[e,r]of Object.entries(t.attributes))if(!(r==null||r===!1)){if(r===!0){n[e]=!0;continue}n[e]=String(r)}}},Yt=(e,t)=>{if(i()===`ssr`){let n=$(qt(e));return Jt(n,t),n}let n=Z.get(e);n||(n=new DOMParser().parseFromString(e,`image/svg+xml`).documentElement,Z.set(e,n));let r=n.cloneNode(!0);return Gt(r,t),r};export{he as a,nt as abbr,ue as article,de as aside,Ie as audio,Xe as blockquote,ot as br,ge as button,lt as caption,Et as circle,et as cite,b as classNames,Nt as clipPath,Je as code,dt as col,ut as colgroup,t as component,ke as datalist,W as dd,Mt as defs,pe as details,tt as dfn,L as div,H as dl,U as dt,x as el,jt as ellipse,at as em,Re as embed,De as fieldset,je as figcaption,Ae as figure,ce as footer,we as form,re as fragment,wt as g,i as getRenderMode,He as h1,Ue as h2,We as h3,Ge as h4,Ke as h5,qe as h6,K as header,st as hr,P as hydrateToDOM,Le as iframe,Me as img,_e as input,g as isComponentInstance,F as isDevMode,Qe as kbd,Ce as label,Oe as legend,B as li,Ot as line,It as linearGradient,G as main,Be as mark,Pt as mask,Ee as meter,ie as mount,fe as nav,bt as noscript,V as ol,Se as optgroup,xe as option,ve as output,Ve as p,Tt as path,Ft as pattern,Ne as picture,At as polygon,kt as polyline,Ye as pre,Te as progress,Lt as radialGradient,Dt as rect,Yt as renderSvgString,h as renderToDOM,Wt as renderToString,$e as samp,yt as script,le as section,be as select,St as slot,rt as small,Pe as source,R as span,ae as startTransition,Rt as stop,it as strong,vt as style,me as summary,Ct as svg,ct as table,ft as tbody,gt as td,xt as template,ye as textarea,mt as tfoot,_t as th,pt as thead,ze as time,ht as tr,z as ul,zt as use,Ze as var_,Fe as video,r as withRenderMode};
+import{a as e,c as t,d as n,f as r,i,l as a,n as o,o as s,r as c,s as l,t as ee,u as te}from"./runtime-BIk4OH1t.mjs";function u(e){return(t,...n)=>c(e,t,...n)}const ne=u(`div`),re=u(`span`),ie=u(`ul`),ae=u(`li`),oe=u(`ol`),se=u(`dl`),d=u(`dt`),f=u(`dd`),p=u(`main`),m=u(`header`),h=u(`footer`),g=u(`section`),_=u(`article`),v=u(`aside`),y=u(`nav`),b=u(`details`),x=u(`summary`),S=u(`a`),C=u(`button`),w=u(`input`),T=u(`output`),E=u(`textarea`),D=u(`select`),O=u(`option`),k=u(`optgroup`),A=u(`label`),j=u(`form`),M=u(`progress`),N=u(`meter`),P=u(`fieldset`),F=u(`legend`),I=u(`datalist`),L=u(`figure`),R=u(`figcaption`),z=u(`img`),B=u(`picture`),V=u(`source`),H=u(`video`),U=u(`audio`),W=u(`iframe`),G=u(`embed`),K=u(`time`),ce=u(`mark`),le=u(`p`),ue=u(`h1`),de=u(`h2`),fe=u(`h3`),pe=u(`h4`),me=u(`h5`),he=u(`h6`),ge=u(`code`),_e=u(`pre`),ve=u(`blockquote`),ye=u(`var`),be=u(`kbd`),xe=u(`samp`),Se=u(`cite`),Ce=u(`dfn`),we=u(`abbr`),Te=u(`small`),Ee=u(`strong`),De=u(`em`),Oe=u(`br`),ke=u(`hr`),Ae=u(`table`),je=u(`caption`),Me=u(`colgroup`),Ne=u(`col`),Pe=u(`tbody`),Fe=u(`thead`),Ie=u(`tfoot`),Le=u(`tr`),Re=u(`td`),ze=u(`th`),Be=u(`style`),Ve=u(`script`),He=u(`noscript`),Ue=u(`template`),We=u(`slot`),Ge=u(`svg`),Ke=u(`g`),qe=u(`path`),Je=u(`circle`),Ye=u(`rect`),Xe=u(`line`),Ze=u(`polyline`),Qe=u(`polygon`),$e=u(`ellipse`),et=u(`defs`),tt=u(`clipPath`),nt=u(`mask`),rt=u(`pattern`),it=u(`linearGradient`),at=u(`radialGradient`),ot=u(`stop`),st=u(`use`),q=new Set([`area`,`base`,`br`,`col`,`embed`,`hr`,`img`,`input`,`link`,`meta`,`param`,`source`,`track`,`wbr`]);function ct(){return{update(){},updateSync(){},dispose(){},onCleanup(){},effect(){}}}function lt(e){return typeof e==`function`?{$$vani:`component`,component:e,props:{}}:e}function J(e){return e.replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`).replace(/'/g,`&#39;`)}function ut(e){let t=[];for(let n of Object.keys(e)){let r=e[n];r==null||r===!1||n.startsWith(`on`)&&typeof r==`function`||(r===!0?t.push(n):t.push(`${n}="${J(String(r))}"`))}return t.length>0?` ${t.join(` `)}`:``}function Y(e){if(e==null||e===!1)return{type:`fragment`,children:[]};if(typeof e==`string`||typeof e==`number`)return{type:`text`,text:String(e)};if(l(e))return{type:`component`,instance:e};if(typeof e==`object`&&`type`in e)return e;throw Error(`[vani] SSR received a DOM node. This is not supported.`)}async function dt(e){let t=`<!--vani:start-->`,n=`<!--vani:end-->`;if(e.clientOnly){let r=e.props?.fallback;return r?`${t}${await X(Y(r()))}${n}`:`${t}${n}`}let r=e.component(e.props,ct());return`${t}${await X(Y((r instanceof Promise?await r:r)()))}${n}`}async function X(e){switch(e.type){case`text`:return J(e.text);case`comment`:return`<!--${e.text}-->`;case`fragment`:return(await Promise.all(e.children.map(X))).join(``);case`component`:return dt(e.instance);case`element`:{let t=ut(e.props);if(q.has(e.tag))return`<${e.tag}${t}>`;let n=(await Promise.all(e.children.map(X))).join(``);return`<${e.tag}${t}>${n}</${e.tag}>`}}}async function ft(t){return r(`ssr`,async()=>{if(e()!==`ssr`)throw Error(`[vani] renderToString failed to set SSR render mode.`);let n=t.map(e=>({type:`component`,instance:lt(e)}));return(await Promise.all(n.map(X))).join(``)})}const Z=new Map,Q=(e,t)=>{if(!t)return e;let n=`${e??``} ${t}`.trim();return n.length>0?n:void 0},pt=(e,t)=>{if(!t)return;let n=t.size;if(n!=null&&(e.setAttribute(`width`,String(n)),e.setAttribute(`height`,String(n))),t.className){let n=Q(e.getAttribute(`class`)??void 0,t.className);n&&e.setAttribute(`class`,n)}if(t.attributes){for(let[n,r]of Object.entries(t.attributes))if(!(r==null||r===!1)){if(r===!0){e.setAttribute(n,``);continue}e.setAttribute(n,String(r))}}},mt=e=>{let t={},n=/([^\s=]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?/g,r;for(;r=n.exec(e);){let e=r[1],n=r[2]??r[3]??r[4];t[e]=n===void 0?!0:n}return t},ht=e=>{let t=e.replace(/<!--[\s\S]*?-->/g,``).trim(),n=/<\/?[^>]+>/g,r=[],i=null,a=0,o,s=e=>{let t=r[r.length-1];t&&(t.type===`element`||t.type===`fragment`)&&t.children.push(e)};for(;o=n.exec(t);){let e=t.slice(a,o.index);e.trim().length>0&&s({type:`text`,text:e});let c=o[0];if(c.startsWith(`</`))r.pop();else{let e=c.endsWith(`/>`),t=c.slice(1,e?-2:-1).trim(),n=t.search(/\s/),a={type:`element`,tag:n===-1?t:t.slice(0,n),props:mt(n===-1?``:t.slice(n+1)),children:[]};i?s(a):i=a,e||r.push(a)}a=n.lastIndex}return i??{type:`fragment`,children:[]}},$=e=>e.type===`text`?{type:`text`,text:e.text}:e.type===`comment`?{type:`comment`,text:e.text}:e.type===`fragment`?{type:`fragment`,children:e.children.map($)}:e.type===`component`?{type:`component`,instance:e.instance}:{type:`element`,tag:e.tag,props:{...e.props},children:e.children.map($)},gt=(e,t)=>{if(!t||e.type!==`element`||e.tag!==`svg`)return;let n=e.props;if(t.size!=null&&(n.width=String(t.size),n.height=String(t.size)),t.className){let e=Q(n.class,t.className);e&&(n.class=e)}if(t.attributes){for(let[e,r]of Object.entries(t.attributes))if(!(r==null||r===!1)){if(r===!0){n[e]=!0;continue}n[e]=String(r)}}},_t=(t,n)=>{if(e()===`ssr`){let e=$(ht(t));return gt(e,n),e}let r=Z.get(t);r||(r=new DOMParser().parseFromString(t,`image/svg+xml`).documentElement,Z.set(t,r));let i=r.cloneNode(!0);return pt(i,n),i};export{S as a,we as abbr,_ as article,v as aside,U as audio,ve as blockquote,Oe as br,C as button,je as caption,Je as circle,Se as cite,ee as classNames,tt as clipPath,ge as code,Ne as col,Me as colgroup,o as component,I as datalist,f as dd,et as defs,b as details,Ce as dfn,ne as div,se as dl,d as dt,c as el,$e as ellipse,De as em,G as embed,P as fieldset,R as figcaption,L as figure,h as footer,j as form,i as fragment,Ke as g,e as getRenderMode,ue as h1,de as h2,fe as h3,pe as h4,me as h5,he as h6,m as header,ke as hr,s as hydrateToDOM,W as iframe,z as img,w as input,l as isComponentInstance,t as isDevMode,be as kbd,A as label,F as legend,ae as li,Xe as line,it as linearGradient,p as main,ce as mark,nt as mask,N as meter,a as mount,y as nav,He as noscript,oe as ol,k as optgroup,O as option,T as output,le as p,qe as path,rt as pattern,B as picture,Qe as polygon,Ze as polyline,_e as pre,M as progress,at as radialGradient,Ye as rect,_t as renderSvgString,te as renderToDOM,ft as renderToString,xe as samp,Ve as script,g as section,D as select,We as slot,Te as small,V as source,re as span,n as startTransition,ot as stop,Ee as strong,Be as style,x as summary,Ge as svg,Ae as table,Pe as tbody,Re as td,Ue as template,E as textarea,Ie as tfoot,ze as th,Fe as thead,K as time,Le as tr,ie as ul,st as use,ye as var_,H as video,r as withRenderMode};

package/dist/lib/jsx-dev-runtime.d.mts

@@ -0,0 +1,2 @@
+import { Fragment, jsx, jsxDEV, jsxs } from "./jsx-runtime.mjs";
+export { Fragment, jsx, jsxDEV, jsxs };

package/dist/lib/jsx-dev-runtime.mjs

@@ -0,0 +1 @@
+import{Fragment as e,jsx as t,jsxDEV as n,jsxs as r}from"./jsx-runtime.mjs";export{e as Fragment,t as jsx,n as jsxDEV,r as jsxs};

package/dist/lib/jsx-runtime.d.mts

@@ -0,0 +1,27 @@
+import { a as ComponentRef, c as ElementProps, h as VNode, i as ComponentInstance, m as VChild, n as Component, s as DomRef } from "./runtime-Dp-nlil7.mjs";
+
+//#region src/vani/jsx-runtime.d.ts
+type ElementTagName = Extract<keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap, string>;
+type IntrinsicElementProps<Tag extends ElementTagName> = ElementProps<Tag> & {
+  children?: VChild | VChild[];
+};
+type Key = string | number | null | undefined;
+declare const Fragment: unique symbol;
+type JsxElementType = string | Component<any> | typeof Fragment;
+declare function jsx(type: JsxElementType, props: Record<string, any> | null, key?: Key): VNode | ComponentInstance<void>;
+declare const jsxs: typeof jsx;
+declare function jsxDEV(type: JsxElementType, props: Record<string, any> | null, key?: Key, _isStaticChildren?: boolean, _source?: unknown, _self?: unknown): VNode | ComponentInstance<void>;
+declare namespace JSX {
+  type Element = VNode | ComponentInstance<any>;
+  type ElementType = JsxElementType;
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+  interface IntrinsicAttributes {
+    key?: string | number;
+    ref?: DomRef<globalThis.Element> | ComponentRef;
+  }
+  type IntrinsicElements = { [K in ElementTagName]: IntrinsicElementProps<K> };
+}
+//#endregion
+export { Fragment, JSX, jsx, jsxDEV, jsxs };

package/dist/lib/jsx-runtime.mjs

@@ -0,0 +1 @@
+import{i as e,n as t,r as n}from"./runtime-BIk4OH1t.mjs";const r=Symbol.for(`vani.fragment`);function i(e){return e==null||e===!1?[]:Array.isArray(e)?e:[e]}function a(e,t){if(!e||typeof e!=`object`)return{props:null,children:[],key:t,ref:void 0,hasChildrenProp:!1};let n=Object.prototype.hasOwnProperty.call(e,`children`),r=n?i(e.children):[],a=t??e.key,o=e.ref,{key:s,ref:c,children:l,...u}=e;return{props:Object.keys(u).length>0?u:null,children:r,key:a,ref:o,hasChildrenProp:n}}function o(i,o,s){let{props:c,children:l,key:u,ref:d,hasChildrenProp:f}=a(o,s);if(i===r)return e(...l);if(typeof i==`string`)return c?n(i,c,...l):n(i,null,...l);if(typeof i==`function`){let e={...c??{}};return(l.length>0||f)&&(e.children=l.length<=1?l[0]:l),u!=null&&(e.key=u),d&&(e.ref=d),t(i)(e)}throw Error(`[vani] jsx runtime received an unsupported element type.`)}const s=o;function c(e,t,n,r,i,a){return o(e,t,n)}export{r as Fragment,o as jsx,c as jsxDEV,s as jsxs};

package/dist/lib/runtime-BIk4OH1t.mjs

@@ -0,0 +1 @@
+function e(e){let t=e;return t.__vaniKeyed||=new Map,t.__vaniKeyed}function t(e){return t=>{let n,r,i=!1,a=t;if(t&&typeof t==`object`){let e=t;if(n=e.key,r=e.ref,i=e.clientOnly,`key`in e||`ref`in e){let{key:t,ref:n,clientOnly:r,...i}=e;a=i}}return{$$vani:`component`,component:e,props:a,key:n,ref:r,clientOnly:i}}}let n=`dom`;function r(e,t){let r=n;n=e;let i=t();return i&&typeof i.finally==`function`?i.finally(()=>{n=r}):(n=r,i)}function i(){return n}function a(e){if(typeof e!=`object`||!e||!(`type`in e))return!1;let t=e;switch(t.type){case`element`:return typeof t.tag==`string`&&typeof t.props==`object`&&Array.isArray(t.children);case`text`:case`comment`:return typeof t.text==`string`;case`fragment`:return Array.isArray(t.children);case`component`:return typeof t.instance==`object`&&t.instance!=null;default:return!1}}function o(e){return a(e)&&e.type===`element`}function s(e){return a(e)&&e.type===`fragment`}const c=new Set([`svg`,`g`,`path`,`circle`,`rect`,`line`,`polyline`,`polygon`,`ellipse`,`defs`,`clipPath`,`mask`,`pattern`,`linearGradient`,`radialGradient`,`stop`,`use`]);function l(e){return n===`dom`?c.has(e)?document.createElementNS(`http://www.w3.org/2000/svg`,e):document.createElement(e):{type:`element`,tag:e,props:{},children:[]}}function u(e){return n===`dom`?document.createTextNode(e):{type:`text`,text:e}}function d(e,t){if(n===`dom`){e.appendChild(t);return}(o(e)||s(e))&&e.children.push(t)}function f(e,t){let n=e.nextSibling;for(;n&&n!==t;){let e=n.nextSibling,t=n;t.__vaniDomRef&&(t.__vaniDomRef.current=null),n.remove(),n=e}}function p(e){if(e==null||e===!1)return document.createComment(`vani:empty`);if(g(e)){let t=document.createDocumentFragment(),n=m(e.component,v(e),t);return e.ref&&(e.ref.current=n),t}if(typeof e==`string`||typeof e==`number`)return document.createTextNode(String(e));if(e instanceof Node)return e;throw Error(`[vani] render returned an unsupported node type in DOM mode`)}function m(e,t,n){let r=[],i=!1,a,o,s=t?.clientOnly===!0;if(I){let e=R;R+=1,a=B(n,e),o=V(a,e)}else a=document.createComment(`vani:start`),o=document.createComment(`vani:end`),n.appendChild(a),n.appendChild(o);let c,l={update(){i||(O?A.has(l)||(j.add(l),N()):(j.delete(l),A.add(l),P()))},updateSync(){if(i)return;let e=a.parentNode;if(!e)return;f(a,o);let t=p(c());e.insertBefore(t,o)},onCleanup(e){r.push(e)},dispose(){if(!i){i=!0,A.delete(l),j.delete(l);for(let e of r)e();r.length=0,f(a,o),a.remove(),o.remove(),c=(()=>document.createComment(`disposed`))}},effect(e){let t=e();typeof t==`function`&&r.push(t)}};if(I&&!s){let n=!1;return c=()=>{if(!n){n=!0;let r=e(t,l);c=r instanceof Promise?()=>document.createComment(`async`):r}return c()},l}let u=e(t,l);return u instanceof Promise?(c=t?.fallback||(()=>document.createComment(`vani:async`)),(!I||s)&&l.update(),u.then(e=>{i||(c=e,l.update())}),l):(c=u,(!I||s)&&l.update(),l)}function h(e,t){if(!t)throw Error(`[vani] root element not found`);let n=[];for(let r of e){if(typeof r==`function`){let e=m(r,{},t);n.push(e);continue}let e=m(r.component,v(r),t);n.push(e)}return n}function g(e){let t=typeof Node<`u`&&e instanceof Node;if(typeof e!=`object`||t)return!1;let n=e;return n.$$vani===`component`&&typeof n.component==`function`}function _(e){let t=typeof Node<`u`&&e instanceof Node;return typeof e==`object`&&!!e&&!t&&!g(e)&&!a(e)}function v(e){return e.clientOnly?{...e.props??{},clientOnly:!0}:e.props}function y(t,r){if(n===`ssr`){for(let e of r)if(!(e==null||e===!1||e===void 0)){if(g(e)){d(t,{type:`component`,instance:e});continue}if(typeof e==`string`||typeof e==`number`){d(t,u(String(e)));continue}if(a(e)){d(t,e);continue}}return}let i=t;for(let t of r)if(!(t==null||t===!1||t===void 0)){if(g(t)){if(t.key!=null){let n=e(i),r=i.__vaniUsedKeys??=new Set,a=n.get(t.key);if(!a){let e=document.createDocumentFragment(),r=m(t.component,v(t),e);t.ref&&(t.ref.current=r),a={fragment:e,handle:r,ref:t.ref},n.set(t.key,a),t.ref&&(t.ref.current=r)}r.add(t.key),i.appendChild(a.fragment);continue}let n=document.createDocumentFragment(),r=m(t.component,v(t),n);t.ref&&(t.ref.current=r),i.appendChild(n);continue}if(typeof t==`string`||typeof t==`number`){i.appendChild(document.createTextNode(String(t)));continue}i.appendChild(t)}let o=i.__vaniKeyed,s=i.__vaniUsedKeys;if(o&&s){for(let[e,t]of o)s.has(e)||(t.handle.dispose(),t.ref&&(t.ref.current=null),o.delete(e));s.clear()}}function b(e){return typeof SVGElement<`u`&&e instanceof SVGElement}function x(e,t){return e.startsWith(`aria`)?`aria-`+e.replace(`aria-`,``).replace(`aria`,``).toLowerCase():e.startsWith(`data`)?`data-`+e.replace(`data-`,``).replace(`data`,``):e.toLowerCase()===`htmlfor`?`for`:t?e:e.toLowerCase()}function S(e,t){let n=o(e)?c.has(e.tag):b(e);for(let r in t){let i=t[r];if(![`key`,`ref`].includes(r)){if(r===`className`){let t=C(i);o(e)?e.props.class=t:n?e.setAttribute(`class`,t):e.className=t;continue}if(r.startsWith(`on`)&&typeof i==`function`)o(e)||(e[r.toLowerCase()]=i);else if(i===!0)o(e)?e.props[r]=!0:e.setAttribute(r,``);else if(i===!1||i==null)continue;else{let t=x(r,n);o(e)?e.props[t]=String(i):e.setAttribute(t,String(i))}}}}function C(...e){return e.map(e=>{if(!(e==null||e===``))return typeof e==`string`?e.trim():Array.isArray(e)?C(...e):Object.entries(e).filter(([e,t])=>t).map(([e])=>e.trim()).join(` `).trim()}).filter(Boolean).join(` `)}function w(e,t,...n){let r=l(e);return _(t)?(t.ref&&(o(r)?t.ref.current=null:(t.ref.current=r,r.__vaniDomRef=t.ref)),S(r,t),y(r,n),r):(y(r,[t,...n]),r)}const T=(...e)=>{if(n===`ssr`){let t={type:`fragment`,children:[]};return y(t,e),t}let t=document.createDocumentFragment();return y(t,e),t};function E(e,t){if(n===`ssr`)return{type:`component`,instance:{$$vani:`component`,component:e,props:t}};let r=document.createDocumentFragment();return m(e,t,r),r}let D=!1,O=!1,k=!1;const A=new Set,j=new Set;function M(e){let t=O;O=!0;try{e()}finally{O=t,N()}}function N(){k||(k=!0,setTimeout(()=>{k=!1,F()},0))}function P(){D||(D=!0,queueMicrotask(()=>{D=!1;for(let e of A)e.updateSync();A.clear()}))}function F(){for(let e of j)e.updateSync();j.clear(),j.size>0&&N()}let I=!1,L=null,R=0;function z(e){U()&&console.warn(`[vani] hydration warning: ${e}`)}function B(e,t){let n=L;(!n||!e.contains(n))&&(n=e.firstChild);let r=!1;for(;n;){if(n.nodeType===Node.COMMENT_NODE&&n.nodeValue===`vani:start`)return r&&z(`Found <!--vani:end--> before <!--vani:start--> for component #${t}. This usually means the server HTML anchor order is incorrect.`),n;n.nodeType===Node.COMMENT_NODE&&n.nodeValue===`vani:end`&&(r=!0),n=n.nextSibling}throw z(`Expected <!--vani:start--> for component #${t}, but none was found. This usually means the server HTML does not match the client component tree.`),Error(`[vani] hydration failed: start anchor not found`)}function V(e,t){let n=e.nextSibling,r=0;for(;n;){if(n.nodeType===Node.COMMENT_NODE){if(n.nodeValue===`vani:start`)r+=1;else if(n.nodeValue===`vani:end`){if(r===0)return L=n.nextSibling,n;--r}}n=n.nextSibling}throw z(`Expected <!--vani:end--> for component #${t}, but none was found. This usually means the server HTML does not match the client component tree.`),Error(`[vani] hydration failed: end anchor not found`)}function H(e,t){let n=[];I=!0,L=t.firstChild,R=0;try{n=h(e,t)}catch(e){console.error(`[vani] hydration failed:`,e)}finally{if(U()&&L){let e=L,t=!1;for(;e;){if(e.nodeType===Node.COMMENT_NODE){let n=e.nodeValue;if(n===`vani:start`||n===`vani:end`){t=!0;break}}e=e.nextSibling}t&&z(`Unused SSR anchors detected after hydration. Some server-rendered DOM was not claimed by the client runtime.`)}I=!1,L=null,R=0}return n}function U(){return`__vaniDevMode`in globalThis?globalThis.__vaniDevMode===!0:import.meta.env?import.meta.env.DEV:typeof process<`u`&&process.env!==void 0?process.env.NODE_ENV===`development`:!1}export{i as a,U as c,M as d,r as f,T as i,E as l,t as n,H as o,w as r,g as s,C as t,h as u};

package/dist/lib/runtime-Dp-nlil7.d.mts

@@ -0,0 +1,166 @@
+//#region src/vani/runtime.d.ts
+type SSRNode = {
+  type: 'element';
+  tag: string;
+  props: Record<string, any>;
+  children: SSRNode[];
+} | {
+  type: 'text';
+  text: string;
+} | {
+  type: 'comment';
+  text: string;
+} | {
+  type: 'fragment';
+  children: SSRNode[];
+} | {
+  type: 'component';
+  instance: ComponentInstance<any>;
+};
+type VNode = Node | SSRNode;
+interface Handle {
+  /**
+   * Schedules a render for the component.
+   * This triggers a re-render on the next microtask.
+   */
+  update(): void;
+  /**
+   * Flushes the component render.
+   * This triggers a re-render immediately.
+   */
+  updateSync(): void;
+  /**
+   * Disposes the component: removes the component from the DOM and runs all cleanup functions.
+   */
+  dispose(): void;
+  /**
+   * Adds a cleanup function that is called when the component is disposed.
+   */
+  onCleanup(fn: () => void): void;
+  /**
+   * This is purely syntatic sugar, as it is basically the same as running the function
+   * on the setup phase and calling onCleanup to add a cleanup function.
+   *
+   * Using effects is necessary in SSR mode, for side effects to not run on the server
+   * (e.g. timers, subscriptions, DOM usage, etc.)
+   *
+   * Runs a side effect function when the component is mounted.
+   * The returning function may be a cleanup function that is called when the component is disposed.
+   *
+   */
+  effect(fn: () => void | (() => void)): void;
+}
+type RenderFn = () => VChild;
+type Component<Props = any> = (props: Props, handle: Handle) => RenderFn | Promise<RenderFn>;
+type ComponentInstance<Props = any> = {
+  $$vani: 'component';
+  component: Component<Props>;
+  props: Props;
+  /**
+   * A key is used to identify the component when it is re-rendered.
+   * If a key is provided, the component will be re-rendered only if the key changes.
+   */
+  key?: string | number;
+  /**
+   * A ref is used to get a reference to the component instance.
+   * The ref is set to the component instance when the component is mounted.
+   * The ref is set to null when the component is disposed.
+   */
+  ref?: ComponentRef;
+  clientOnly?: boolean;
+};
+type ComponentInput<Props> = Props & {
+  key?: string | number;
+  ref?: ComponentRef;
+};
+type ComponentMetaProps = {
+  key?: string | number;
+  ref?: ComponentRef;
+  fallback?: RenderFn;
+  clientOnly?: boolean;
+};
+type VChild = VNode | ComponentInstance<any> | string | number | null | undefined | false;
+type DataAttribute = `data-${string}` | `data${Capitalize<string>}`;
+type HtmlTagName = keyof HTMLElementTagNameMap;
+type SvgTagName = keyof SVGElementTagNameMap;
+type ElementTagName = HtmlTagName | SvgTagName;
+type ElementByTag<T extends ElementTagName> = T extends HtmlTagName ? HTMLElementTagNameMap[T] : T extends SvgTagName ? SVGElementTagNameMap[T] : Element;
+type SvgProps<T extends SvgTagName = SvgTagName> = BaseProps<T> & {
+  [key: string]: string | number | boolean | undefined | null | ((...args: any[]) => any);
+};
+type BaseProps<T extends ElementTagName> = {
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<ElementByTag<T>>;
+} & {
+  [key: DataAttribute]: string | number | boolean | undefined | null;
+};
+type HtmlProps<T extends HtmlTagName = HtmlTagName> = BaseProps<T> & Partial<Omit<ElementByTag<T>, 'children' | 'className' | 'style'>>;
+type ElementProps<T extends ElementTagName> = T extends SvgTagName ? SvgProps<T> : HtmlProps<Extract<T, HtmlTagName>>;
+type ClassName = string | undefined | null | {
+  [key: string]: boolean | undefined | null;
+} | ClassName[];
+type ComponentRef = {
+  current: Handle | null;
+};
+type DomRef<T extends Element = Element> = {
+  current: T | null;
+};
+type RenderMode = 'dom' | 'ssr';
+declare function component(fn: Component<void>): (props?: ComponentMetaProps) => ComponentInstance<void>;
+declare function component<Props>(fn: Component<Props>): (props: Props & ComponentMetaProps) => ComponentInstance<Props>;
+declare function withRenderMode<T>(mode: RenderMode, fn: () => T): T;
+declare function getRenderMode(): RenderMode;
+declare function renderToDOM(components: Array<Component<any> | ComponentInstance<any>>, root: HTMLElement): Handle[];
+declare function isComponentInstance(child: VChild): child is ComponentInstance<any>;
+declare function classNames(...classes: ClassName[]): string;
+declare function el<E extends ElementTagName>(tag: E, props?: ElementProps<E> | VChild | null, ...children: VChild[]): VNode;
+declare const fragment: (...children: VChild[]) => {
+  type: "fragment";
+  children: SSRNode[];
+} | DocumentFragment;
+declare function mount<Props>(component: Component<Props>, props: Props): VNode;
+/**
+ * Marks all updates triggered inside the callback as a "transition".
+ *
+ * A transition represents non-urgent UI work that can be deferred
+ * to keep the application responsive.
+ *
+ * Updates scheduled inside `startTransition`:
+ * - do NOT block user interactions
+ * - are batched separately from urgent updates
+ * - may be flushed later (e.g. after the current event or during idle time)
+ *
+ * Transitions are NOT animations.
+ * They do not control how updates look, only *when* they are applied.
+ *
+ * Typical use cases:
+ * - Filtering or sorting large lists
+ * - Rendering expensive subtrees
+ * - Applying async results that are not immediately visible
+ *
+ * Example:
+ * ```ts
+ * button({
+ *   onclick: () => {
+ *     // urgent update
+ *     setOpen(true)
+ *     handle.update()
+ *
+ *     // non-urgent update
+ *     startTransition(() => {
+ *       setItems(filter(items))
+ *       handle.update()
+ *     })
+ *   },
+ * })
+ * ```
+ *
+ * If multiple transitions are triggered, they are automatically batched.
+ * Transition updates never interrupt urgent updates.
+ */
+declare function startTransition(fn: () => void): void;
+declare function hydrateToDOM(components: Array<Component<any> | ComponentInstance<any>>, root: HTMLElement): Handle[];
+declare function isDevMode(): boolean;
+//#endregion
+export { isDevMode as C, withRenderMode as D, startTransition as E, isComponentInstance as S, renderToDOM as T, component as _, ComponentRef as a, getRenderMode as b, ElementProps as c, RenderFn as d, SSRNode as f, classNames as g, VNode as h, ComponentInstance as i, Handle as l, VChild as m, Component as n, DataAttribute as o, SvgProps as p, ComponentInput as r, DomRef as s, ClassName as t, HtmlProps as u, el as v, mount as w, hydrateToDOM as x, fragment as y };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vanijs/vani",
-  "version": "0.2.0",
-  "description": "Web-standards-first UI runtime with explicit updates, fine-grained DOM ownership, and zero dependencies. No Virtual DOM, no JSX, no compiler. Built for SPA, SSR, and SSG.",
+  "version": "0.3.0",
+  "description": "Web-standards-first UI runtime with explicit updates, fine-grained DOM ownership, and zero dependencies. JS-first, transpiler-free, with an optional JSX adapter. Built for SPA, SSR, and SSG.",
   "keywords": [
     "ui",
     "frontend",
@@ -11,7 +11,8 @@
     "fine-grained",
     "explicit-rendering",
     "no-virtual-dom",
-    "no-jsx",
+    "js-first",
+    "jsx-adapter",
     "no-compiler",
     "ssr",
     "ssg",
@@ -34,8 +35,22 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/lib/index.d.mts",
-      "default": "./dist/lib/index.mjs"
+      "import": {
+        "types": "./dist/lib/index.d.mts",
+        "default": "./dist/lib/index.mjs"
+      }
+    },
+    "./jsx-runtime": {
+      "import": {
+        "types": "./dist/lib/jsx-runtime.d.mts",
+        "default": "./dist/lib/jsx-runtime.mjs"
+      }
+    },
+    "./jsx-dev-runtime": {
+      "import": {
+        "types": "./dist/lib/jsx-dev-runtime.d.mts",
+        "default": "./dist/lib/jsx-dev-runtime.mjs"
+      }
     }
   },
   "module": "./dist/lib/index.mjs",
@@ -48,14 +63,34 @@
     "README.md",
     "LICENSE"
   ],
+  "scripts": {
+    "build": "rm -rf dist && vite build && pnpm run build:lib",
+    "build:lib": "pnpm tsdown src/vani/index.ts src/vani/jsx-runtime.ts src/vani/jsx-dev-runtime.ts --minify --out-dir dist/lib --dts",
+    "dev": "vite",
+    "dev:debug": "open http://localhost:4555 && PORT=4555 bun run --watch src/debug/*.html",
+    "format": "prettier --write . && pnpm dlx sort-package-json",
+    "lint": "pnpm run typecheck && pnpm run lint:eslint && pnpm run lint:circular",
+    "lint:circular": "pnpm dlx madge --circular --extensions ts src/",
+    "lint:eslint": "eslint .",
+    "lint:unused": "pnpm dlx knip --exclude exports",
+    "prepublishOnly": "pnpm format && pnpm lint && pnpm run build:lib && pnpm publint",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
   "dependencies": {},
   "devDependencies": {
+    "@babel/runtime": "^7.28.6",
+    "@codemirror/commands": "^6.10.1",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.11",
     "@eslint/js": "^9.39.2",
     "@shikijs/langs": "^3.21.0",
     "@shikijs/themes": "^3.21.0",
     "@tailwindcss/vite": "^4.1.18",
     "@types/bun": "^1.3.6",
     "@types/node": "^25.0.9",
+    "@uiw/codemirror-theme-vscode": "^4.25.4",
     "eslint": "^9.39.2",
     "globals": "^17.0.0",
     "lucide-static": "^0.562.0",
@@ -72,19 +107,25 @@
     "vite": "npm:rolldown-vite@7.3.1"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/lib/index.d.mts",
+        "default": "./dist/lib/index.mjs"
+      },
+      "./jsx-runtime": {
+        "types": "./dist/lib/jsx-runtime.d.mts",
+        "default": "./dist/lib/jsx-runtime.mjs"
+      },
+      "./jsx-dev-runtime": {
+        "types": "./dist/lib/jsx-dev-runtime.d.mts",
+        "default": "./dist/lib/jsx-dev-runtime.mjs"
+      }
+    }
   },
-  "scripts": {
-    "build": "rm -rf dist && vite build && pnpm run build:lib",
-    "build:lib": "pnpm tsdown src/vani/index.ts --minify --out-dir dist/lib --dts",
-    "dev": "vite",
-    "dev:debug": "open http://localhost:4555 && PORT=4555 bun run --watch src/debug/*.html",
-    "format": "prettier --write . && pnpm dlx sort-package-json",
-    "lint": "pnpm run typecheck && pnpm run lint:eslint && pnpm run lint:circular",
-    "lint:circular": "pnpm dlx madge --circular --extensions ts src/",
-    "lint:eslint": "eslint .",
-    "lint:unused": "pnpm dlx knip --exclude exports",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.3.1"
+    }
   }
-}
+}