diff --git a/dist/assets/index-BILrXVKr.js b/dist/assets/index-BILrXVKr.js
deleted file mode 100644
index 944452f..0000000
--- a/dist/assets/index-BILrXVKr.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))r(i);new MutationObserver(i=>{for(const o of i)if(o.type==="childList")for(const a of o.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&r(a)}).observe(document,{childList:!0,subtree:!0});function n(i){const o={};return i.integrity&&(o.integrity=i.integrity),i.referrerPolicy&&(o.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?o.credentials="include":i.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(i){if(i.ep)return;i.ep=!0;const o=n(i);fetch(i.href,o)}})();const at=!1,ct=(e,t)=>e===t,me=Symbol("solid-proxy"),st=typeof Proxy=="function",lt=Symbol("solid-track"),ae={equals:ct};let Ve=We;const j=1,ce=2,qe={owned:null,cleanups:null,context:null,owner:null};var _=null;let ge=null,dt=null,x=null,k=null,B=null,ue=0;function ie(e,t){const n=x,r=_,i=e.length===0,o=t===void 0?r:t,a=i?qe:{owned:null,cleanups:null,context:o?o.context:null,owner:o},c=i?e:()=>e(()=>D(()=>X(a)));_=a,x=null;try{return te(c,!0)}finally{x=n,_=r}}function p(e,t){t=t?Object.assign({},ae,t):ae;const n={value:e,observers:null,observerSlots:null,comparator:t.equals||void 0},r=i=>(typeof i=="function"&&(i=i(n.value)),Ke(n,i));return[Ge.bind(n),r]}function v(e,t,n){const r=Ce(e,t,!1,j);ee(r)}function S(e,t,n){Ve=mt;const r=Ce(e,t,!1,j);r.user=!0,B?B.push(r):ee(r)}function m(e,t,n){n=n?Object.assign({},ae,n):ae;const r=Ce(e,t,!0,0);return r.observers=null,r.observerSlots=null,r.comparator=n.equals||void 0,ee(r),Ge.bind(r)}function D(e){if(x===null)return e();const t=x;x=null;try{return e()}finally{x=t}}function Q(e){S(()=>D(e))}function G(e){return _===null||(_.cleanups===null?_.cleanups=[e]:_.cleanups.push(e)),e}function ut(e,t){const n=Symbol("context");return{id:n,Provider:vt(n),defaultValue:e}}function ft(e){let t;return _&&_.context&&(t=_.context[e.id])!==void 0?t:e.defaultValue}function ht(e){const t=m(e),n=m(()=>pe(t()));return n.toArray=()=>{const r=n();return Array.isArray(r)?r:r!=null?[r]:[]},n}function Ge(){if(this.sources&&this.state)if(this.state===j)ee(this);else{const e=k;k=null,te(()=>le(this),!1),k=e}if(x){const e=this.observers?this.observers.length:0;x.sources?(x.sources.push(this),x.sourceSlots.push(e)):(x.sources=[this],x.sourceSlots=[e]),this.observers?(this.observers.push(x),this.observerSlots.push(x.sources.length-1)):(this.observers=[x],this.observerSlots=[x.sources.length-1])}return this.value}function Ke(e,t,n){let r=e.value;return(!e.comparator||!e.comparator(r,t))&&(e.value=t,e.observers&&e.observers.length&&te(()=>{for(let i=0;i<e.observers.length;i+=1){const o=e.observers[i],a=ge&&ge.running;a&&ge.disposed.has(o),(a?!o.tState:!o.state)&&(o.pure?k.push(o):B.push(o),o.observers&&Ze(o)),a||(o.state=j)}if(k.length>1e6)throw k=[],new Error},!1)),t}function ee(e){if(!e.fn)return;X(e);const t=ue;gt(e,e.value,t)}function gt(e,t,n){let r;const i=_,o=x;x=_=e;try{r=e.fn(t)}catch(a){return e.pure&&(e.state=j,e.owned&&e.owned.forEach(X),e.owned=null),e.updatedAt=n+1,Xe(a)}finally{x=o,_=i}(!e.updatedAt||e.updatedAt<=n)&&(e.updatedAt!=null&&"observers"in e?Ke(e,r):e.value=r,e.updatedAt=n)}function Ce(e,t,n,r=j,i){const o={fn:e,state:r,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:t,owner:_,context:_?_.context:null,pure:n};return _===null||_!==qe&&(_.owned?_.owned.push(o):_.owned=[o]),o}function se(e){if(e.state===0)return;if(e.state===ce)return le(e);if(e.suspense&&D(e.suspense.inFallback))return e.suspense.effects.push(e);const t=[e];for(;(e=e.owner)&&(!e.updatedAt||e.updatedAt<ue);)e.state&&t.push(e);for(let n=t.length-1;n>=0;n--)if(e=t[n],e.state===j)ee(e);else if(e.state===ce){const r=k;k=null,te(()=>le(e,t[0]),!1),k=r}}function te(e,t){if(k)return e();let n=!1;t||(k=[]),B?n=!0:B=[],ue++;try{const r=e();return bt(n),r}catch(r){n||(B=null),k=null,Xe(r)}}function bt(e){if(k&&(We(k),k=null),e)return;const t=B;B=null,t.length&&te(()=>Ve(t),!1)}function We(e){for(let t=0;t<e.length;t++)se(e[t])}function mt(e){let t,n=0;for(t=0;t<e.length;t++){const r=e[t];r.user?e[n++]=r:se(r)}for(t=0;t<n;t++)se(e[t])}function le(e,t){e.state=0;for(let n=0;n<e.sources.length;n+=1){const r=e.sources[n];if(r.sources){const i=r.state;i===j?r!==t&&(!r.updatedAt||r.updatedAt<ue)&&se(r):i===ce&&le(r,t)}}}function Ze(e){for(let t=0;t<e.observers.length;t+=1){const n=e.observers[t];n.state||(n.state=ce,n.pure?k.push(n):B.push(n),n.observers&&Ze(n))}}function X(e){let t;if(e.sources)for(;e.sources.length;){const n=e.sources.pop(),r=e.sourceSlots.pop(),i=n.observers;if(i&&i.length){const o=i.pop(),a=n.observerSlots.pop();r<i.length&&(o.sourceSlots[a]=r,i[r]=o,n.observerSlots[r]=a)}}if(e.tOwned){for(t=e.tOwned.length-1;t>=0;t--)X(e.tOwned[t]);delete e.tOwned}if(e.owned){for(t=e.owned.length-1;t>=0;t--)X(e.owned[t]);e.owned=null}if(e.cleanups){for(t=e.cleanups.length-1;t>=0;t--)e.cleanups[t]();e.cleanups=null}e.state=0}function pt(e){return e instanceof Error?e:new Error(typeof e=="string"?e:"Unknown error",{cause:e})}function Xe(e,t=_){throw pt(e)}function pe(e){if(typeof e=="function"&&!e.length)return pe(e());if(Array.isArray(e)){const t=[];for(let n=0;n<e.length;n++){const r=pe(e[n]);Array.isArray(r)?t.push.apply(t,r):t.push(r)}return t}return e}function vt(e,t){return function(r){let i;return v(()=>i=D(()=>(_.context={..._.context,[e]:r.value},ht(()=>r.children))),void 0),i}}const yt=Symbol("fallback");function Ee(e){for(let t=0;t<e.length;t++)e[t]()}function _t(e,t,n={}){let r=[],i=[],o=[],a=0,c=t.length>1?[]:null;return G(()=>Ee(o)),()=>{let s=e()||[],l=s.length,f,d;return s[lt],D(()=>{let y,w,L,A,M,P,C,I,F;if(l===0)a!==0&&(Ee(o),o=[],r=[],i=[],a=0,c&&(c=[])),n.fallback&&(r=[yt],i[0]=ie(ot=>(o[0]=ot,n.fallback())),a=1);else if(a===0){for(i=new Array(l),d=0;d<l;d++)r[d]=s[d],i[d]=ie(b);a=l}else{for(L=new Array(l),A=new Array(l),c&&(M=new Array(l)),P=0,C=Math.min(a,l);P<C&&r[P]===s[P];P++);for(C=a-1,I=l-1;C>=P&&I>=P&&r[C]===s[I];C--,I--)L[I]=i[C],A[I]=o[C],c&&(M[I]=c[C]);for(y=new Map,w=new Array(I+1),d=I;d>=P;d--)F=s[d],f=y.get(F),w[d]=f===void 0?-1:f,y.set(F,d);for(f=P;f<=C;f++)F=r[f],d=y.get(F),d!==void 0&&d!==-1?(L[d]=i[f],A[d]=o[f],c&&(M[d]=c[f]),d=w[d],y.set(F,d)):o[f]();for(d=P;d<l;d++)d in L?(i[d]=L[d],o[d]=A[d],c&&(c[d]=M[d],c[d](d))):i[d]=ie(b);i=i.slice(0,a=l),r=s.slice(0)}return i});function b(y){if(o[d]=y,c){const[w,L]=p(d);return c[d]=L,t(s[d],w)}return t(s[d])}}}function g(e,t){return D(()=>e(t||{}))}function ne(){return!0}const Le={get(e,t,n){return t===me?n:e.get(t)},has(e,t){return t===me?!0:e.has(t)},set:ne,deleteProperty:ne,getOwnPropertyDescriptor(e,t){return{configurable:!0,enumerable:!0,get(){return e.get(t)},set:ne,deleteProperty:ne}},ownKeys(e){return e.keys()}};function $t(e,...t){const n=t.length;if(st&&me in e){const i=n>1?t.flat():t[0],o=t.map(a=>new Proxy({get(c){return a.includes(c)?e[c]:void 0},has(c){return a.includes(c)&&c in e},keys(){return a.filter(c=>c in e)}},Le));return o.push(new Proxy({get(a){return i.includes(a)?void 0:e[a]},has(a){return i.includes(a)?!1:a in e},keys(){return Object.keys(e).filter(a=>!i.includes(a))}},Le)),o}const r=[];for(let i=0;i<=n;i++)r[i]={};for(const i of Object.getOwnPropertyNames(e)){let o=n;for(let s=0;s<t.length;s++)if(t[s].includes(i)){o=s;break}const a=Object.getOwnPropertyDescriptor(e,i);!a.get&&!a.set&&a.enumerable&&a.writable&&a.configurable?r[o][i]=a.value:Object.defineProperty(r[o],i,a)}return r}const xt=e=>`Stale read from <${e}>.`;function T(e){const t="fallback"in e&&{fallback:()=>e.fallback};return m(_t(()=>e.each,e.children,t||void 0))}function N(e){const t=e.keyed,n=m(()=>e.when,void 0,void 0),r=t?n:m(n,void 0,{equals:(i,o)=>!i==!o});return m(()=>{const i=r();if(i){const o=e.children;return typeof o=="function"&&o.length>0?D(()=>o(t?i:()=>{if(!D(r))throw xt("Show");return n()})):o}return e.fallback},void 0,void 0)}const wt=["allowfullscreen","async","alpha","autofocus","autoplay","checked","controls","default","disabled","formnovalidate","hidden","indeterminate","inert","ismap","loop","multiple","muted","nomodule","novalidate","open","playsinline","readonly","required","reversed","seamless","selected","adauctionheaders","browsingtopics","credentialless","defaultchecked","defaultmuted","defaultselected","defer","disablepictureinpicture","disableremoteplayback","preservespitch","shadowrootclonable","shadowrootcustomelementregistry","shadowrootdelegatesfocus","shadowrootserializable","sharedstoragewritable"],St=new Set(["className","value","readOnly","noValidate","formNoValidate","isMap","noModule","playsInline","adAuctionHeaders","allowFullscreen","browsingTopics","defaultChecked","defaultMuted","defaultSelected","disablePictureInPicture","disableRemotePlayback","preservesPitch","shadowRootClonable","shadowRootCustomElementRegistry","shadowRootDelegatesFocus","shadowRootSerializable","sharedStorageWritable",...wt]),Ct=new Set(["innerHTML","textContent","innerText","children"]),kt=Object.assign(Object.create(null),{className:"class",htmlFor:"for"}),Et=Object.assign(Object.create(null),{class:"className",novalidate:{$:"noValidate",FORM:1},formnovalidate:{$:"formNoValidate",BUTTON:1,INPUT:1},ismap:{$:"isMap",IMG:1},nomodule:{$:"noModule",SCRIPT:1},playsinline:{$:"playsInline",VIDEO:1},readonly:{$:"readOnly",INPUT:1,TEXTAREA:1},adauctionheaders:{$:"adAuctionHeaders",IFRAME:1},allowfullscreen:{$:"allowFullscreen",IFRAME:1},browsingtopics:{$:"browsingTopics",IMG:1},defaultchecked:{$:"defaultChecked",INPUT:1},defaultmuted:{$:"defaultMuted",AUDIO:1,VIDEO:1},defaultselected:{$:"defaultSelected",OPTION:1},disablepictureinpicture:{$:"disablePictureInPicture",VIDEO:1},disableremoteplayback:{$:"disableRemotePlayback",AUDIO:1,VIDEO:1},preservespitch:{$:"preservesPitch",AUDIO:1,VIDEO:1},shadowrootclonable:{$:"shadowRootClonable",TEMPLATE:1},shadowrootdelegatesfocus:{$:"shadowRootDelegatesFocus",TEMPLATE:1},shadowrootserializable:{$:"shadowRootSerializable",TEMPLATE:1},sharedstoragewritable:{$:"sharedStorageWritable",IFRAME:1,IMG:1}});function Lt(e,t){const n=Et[e];return typeof n=="object"?n[t]?n.$:void 0:n}const Mt=new Set(["beforeinput","click","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"]),Pt=new Set(["altGlyph","altGlyphDef","altGlyphItem","animate","animateColor","animateMotion","animateTransform","circle","clipPath","color-profile","cursor","defs","desc","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","font","font-face","font-face-format","font-face-name","font-face-src","font-face-uri","foreignObject","g","glyph","glyphRef","hkern","image","line","linearGradient","marker","mask","metadata","missing-glyph","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","svg","switch","symbol","text","textPath","tref","tspan","use","view","vkern"]),At={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"},Nt=e=>m(()=>e());function Tt(e,t,n){let r=n.length,i=t.length,o=r,a=0,c=0,s=t[i-1].nextSibling,l=null;for(;a<i||c<o;){if(t[a]===n[c]){a++,c++;continue}for(;t[i-1]===n[o-1];)i--,o--;if(i===a){const f=o<r?c?n[c-1].nextSibling:n[o-c]:s;for(;c<o;)e.insertBefore(n[c++],f)}else if(o===c)for(;a<i;)(!l||!l.has(t[a]))&&t[a].remove(),a++;else if(t[a]===n[o-1]&&n[c]===t[i-1]){const f=t[--i].nextSibling;e.insertBefore(n[c++],t[a++].nextSibling),e.insertBefore(n[--o],f),t[i]=n[o]}else{if(!l){l=new Map;let d=c;for(;d<o;)l.set(n[d],d++)}const f=l.get(t[a]);if(f!=null)if(c<f&&f<o){let d=a,b=1,y;for(;++d<i&&d<o&&!((y=l.get(t[d]))==null||y!==f+b);)b++;if(b>f-c){const w=t[a];for(;c<f;)e.insertBefore(n[c++],w)}else e.replaceChild(n[c++],t[a++])}else a++;else t[a++].remove()}}}const Me="_$DX_DELEGATE";function It(e,t,n,r={}){let i;return ie(o=>{i=o,t===document?e():u(t,e(),t.firstChild?null:void 0,n)},r.owner),()=>{i(),t.textContent=""}}function h(e,t,n,r){let i;const o=()=>{const c=r?document.createElementNS("http://www.w3.org/1998/Math/MathML","template"):document.createElement("template");return c.innerHTML=e,n?c.content.firstChild.firstChild:r?c.firstChild:c.content.firstChild},a=t?()=>D(()=>document.importNode(i||(i=o()),!0)):()=>(i||(i=o())).cloneNode(!0);return a.cloneNode=a,a}function E(e,t=window.document){const n=t[Me]||(t[Me]=new Set);for(let r=0,i=e.length;r<i;r++){const o=e[r];n.has(o)||(n.add(o),t.addEventListener(o,jt))}}function O(e,t,n){n==null?e.removeAttribute(t):e.setAttribute(t,n)}function Ot(e,t,n,r){r==null?e.removeAttributeNS(t,n):e.setAttributeNS(t,n,r)}function Dt(e,t,n){n?e.setAttribute(t,""):e.removeAttribute(t)}function U(e,t){t==null?e.removeAttribute("class"):e.className=t}function fe(e,t,n,r){if(r)Array.isArray(n)?(e[`$$${t}`]=n[0],e[`$$${t}Data`]=n[1]):e[`$$${t}`]=n;else if(Array.isArray(n)){const i=n[0];e.addEventListener(t,n[0]=o=>i.call(e,n[1],o))}else e.addEventListener(t,n,typeof n!="function"&&n)}function Rt(e,t,n={}){const r=Object.keys(t||{}),i=Object.keys(n);let o,a;for(o=0,a=i.length;o<a;o++){const c=i[o];!c||c==="undefined"||t[c]||(Pe(e,c,!1),delete n[c])}for(o=0,a=r.length;o<a;o++){const c=r[o],s=!!t[c];!c||c==="undefined"||n[c]===s||!s||(Pe(e,c,!0),n[c]=s)}return n}function z(e,t,n){if(!t)return n?O(e,"style"):t;const r=e.style;if(typeof t=="string")return r.cssText=t;typeof n=="string"&&(r.cssText=n=void 0),n||(n={}),t||(t={});let i,o;for(o in n)t[o]==null&&r.removeProperty(o),delete n[o];for(o in t)i=t[o],i!==n[o]&&(r.setProperty(o,i),n[o]=i);return n}function Bt(e,t={},n,r){const i={};return v(()=>i.children=Y(e,t.children,i.children)),v(()=>typeof t.ref=="function"&&he(t.ref,e)),v(()=>Ut(e,t,n,!0,i,!0)),i}function he(e,t,n){return D(()=>e(t,n))}function u(e,t,n,r){if(n!==void 0&&!r&&(r=[]),typeof t!="function")return Y(e,t,r,n);v(i=>Y(e,t(),i,n),r)}function Ut(e,t,n,r,i={},o=!1){t||(t={});for(const a in i)if(!(a in t)){if(a==="children")continue;i[a]=Ae(e,a,null,i[a],n,o,t)}for(const a in t){if(a==="children")continue;const c=t[a];i[a]=Ae(e,a,c,i[a],n,o,t)}}function Ft(e){return e.toLowerCase().replace(/-([a-z])/g,(t,n)=>n.toUpperCase())}function Pe(e,t,n){const r=t.trim().split(/\s+/);for(let i=0,o=r.length;i<o;i++)e.classList.toggle(r[i],n)}function Ae(e,t,n,r,i,o,a){let c,s,l,f,d;if(t==="style")return z(e,n,r);if(t==="classList")return Rt(e,n,r);if(n===r)return r;if(t==="ref")o||n(e);else if(t.slice(0,3)==="on:"){const b=t.slice(3);r&&e.removeEventListener(b,r,typeof r!="function"&&r),n&&e.addEventListener(b,n,typeof n!="function"&&n)}else if(t.slice(0,10)==="oncapture:"){const b=t.slice(10);r&&e.removeEventListener(b,r,!0),n&&e.addEventListener(b,n,!0)}else if(t.slice(0,2)==="on"){const b=t.slice(2).toLowerCase(),y=Mt.has(b);if(!y&&r){const w=Array.isArray(r)?r[0]:r;e.removeEventListener(b,w)}(y||n)&&(fe(e,b,n,y),y&&E([b]))}else if(t.slice(0,5)==="attr:")O(e,t.slice(5),n);else if(t.slice(0,5)==="bool:")Dt(e,t.slice(5),n);else if((d=t.slice(0,5)==="prop:")||(l=Ct.has(t))||!i&&((f=Lt(t,e.tagName))||(s=St.has(t)))||(c=e.nodeName.includes("-")||"is"in a))d&&(t=t.slice(5),s=!0),t==="class"||t==="className"?U(e,n):c&&!s&&!l?e[Ft(t)]=n:e[f||t]=n;else{const b=i&&t.indexOf(":")>-1&&At[t.split(":")[0]];b?Ot(e,b,t,n):O(e,kt[t]||t,n)}return n}function jt(e){let t=e.target;const n=`$$${e.type}`,r=e.target,i=e.currentTarget,o=s=>Object.defineProperty(e,"target",{configurable:!0,value:s}),a=()=>{const s=t[n];if(s&&!t.disabled){const l=t[`${n}Data`];if(l!==void 0?s.call(t,l,e):s.call(t,e),e.cancelBubble)return}return t.host&&typeof t.host!="string"&&!t.host._$host&&t.contains(e.target)&&o(t.host),!0},c=()=>{for(;a()&&(t=t._$host||t.parentNode||t.host););};if(Object.defineProperty(e,"currentTarget",{configurable:!0,get(){return t||document}}),e.composedPath){const s=e.composedPath();o(s[0]);for(let l=0;l<s.length-2&&(t=s[l],!!a());l++){if(t._$host){t=t._$host,c();break}if(t.parentNode===i)break}}else c();o(r)}function Y(e,t,n,r,i){for(;typeof n=="function";)n=n();if(t===n)return n;const o=typeof t,a=r!==void 0;if(e=a&&n[0]&&n[0].parentNode||e,o==="string"||o==="number"){if(o==="number"&&(t=t.toString(),t===n))return n;if(a){let c=n[0];c&&c.nodeType===3?c.data!==t&&(c.data=t):c=document.createTextNode(t),n=H(e,n,r,c)}else n!==""&&typeof n=="string"?n=e.firstChild.data=t:n=e.textContent=t}else if(t==null||o==="boolean")n=H(e,n,r);else{if(o==="function")return v(()=>{let c=t();for(;typeof c=="function";)c=c();n=Y(e,c,n,r)}),()=>n;if(Array.isArray(t)){const c=[],s=n&&Array.isArray(n);if(ve(c,t,n,i))return v(()=>n=Y(e,c,n,r,!0)),()=>n;if(c.length===0){if(n=H(e,n,r),a)return n}else s?n.length===0?Ne(e,c,r):Tt(e,n,c):(n&&H(e),Ne(e,c));n=c}else if(t.nodeType){if(Array.isArray(n)){if(a)return n=H(e,n,r,t);H(e,n,null,t)}else n==null||n===""||!e.firstChild?e.appendChild(t):e.replaceChild(t,e.firstChild);n=t}}return n}function ve(e,t,n,r){let i=!1;for(let o=0,a=t.length;o<a;o++){let c=t[o],s=n&&n[e.length],l;if(!(c==null||c===!0||c===!1))if((l=typeof c)=="object"&&c.nodeType)e.push(c);else if(Array.isArray(c))i=ve(e,c,s)||i;else if(l==="function")if(r){for(;typeof c=="function";)c=c();i=ve(e,Array.isArray(c)?c:[c],Array.isArray(s)?s:[s])||i}else e.push(c),i=!0;else{const f=String(c);s&&s.nodeType===3&&s.data===f?e.push(s):e.push(document.createTextNode(f))}}return i}function Ne(e,t,n=null){for(let r=0,i=t.length;r<i;r++)e.insertBefore(t[r],n)}function H(e,t,n,r){if(n===void 0)return e.textContent="";const i=r||document.createTextNode("");if(t.length){let o=!1;for(let a=t.length-1;a>=0;a--){const c=t[a];if(i!==c){const s=c.parentNode===e;!o&&!a?s?e.replaceChild(i,c):e.insertBefore(i,n):s&&c.remove()}else o=!0}}else e.insertBefore(i,n);return[i]}const zt="http://www.w3.org/2000/svg";function Ht(e,t=!1,n=void 0){return t?document.createElementNS(zt,e):document.createElement(e,{is:n})}function Vt(e,t){const n=m(e);return m(()=>{const r=n();switch(typeof r){case"function":return D(()=>r(t));case"string":const i=Pt.has(r),o=Ht(r,i,D(()=>t.is));return Bt(o,t,i),o}})}function qt(e){const[,t]=$t(e,["component"]);return Vt(()=>e.component,t)}const Gt="modulepreload",Kt=function(e){return"/"+e},Te={},Wt=function(t,n,r){let i=Promise.resolve();if(n&&n.length>0){let s=function(l){return Promise.all(l.map(f=>Promise.resolve(f).then(d=>({status:"fulfilled",value:d}),d=>({status:"rejected",reason:d}))))};document.getElementsByTagName("link");const a=document.querySelector("meta[property=csp-nonce]"),c=a?.nonce||a?.getAttribute("nonce");i=s(n.map(l=>{if(l=Kt(l),l in Te)return;Te[l]=!0;const f=l.endsWith(".css"),d=f?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${l}"]${d}`))return;const b=document.createElement("link");if(b.rel=f?"stylesheet":Gt,f||(b.as="script"),b.crossOrigin="",b.href=l,c&&b.setAttribute("nonce",c),document.head.appendChild(b),f)return new Promise((y,w)=>{b.addEventListener("load",y),b.addEventListener("error",()=>w(new Error(`Unable to preload CSS for ${l}`)))})}))}function o(a){const c=new Event("vite:preloadError",{cancelable:!0});if(c.payload=a,window.dispatchEvent(c),!c.defaultPrevented)throw a}return i.then(a=>{for(const c of a||[])c.status==="rejected"&&o(c.reason);return t().catch(o)})};var Ye="s:id",Je="s\\:id",de=new Set,K=new Map;{let e=document.head.querySelectorAll(`style[${Je}]`);for(let t=0,n=e.length;t<n;t++)de.add(e[t].getAttribute(Ye))}function Zt(e,t){var n;if(!de.has(e)){de.add(e);let r=document.createElement("style");r.setAttribute(Ye,e),r.innerHTML=t,document.head.appendChild(r)}K.set(e,((n=K.get(e))!=null?n:0)+1)}function Xt(e){var t;let n=(t=K.get(e))!=null?t:0;if(n>1)K.set(e,n-1);else{K.set(e,0);let r=document.head.querySelector(`style[${Je}="${e}"]`);r&&document.head.removeChild(r),de.delete(e)}}var Yt=Zt,Jt=Xt,Qt=ut();function en(e,t,n){var r;let i=(r=ft(Qt))!=null?r:{insert:Yt,remove:Jt},o=`${e}-${t}`;i.insert(o,n),G(()=>{i.remove(o)})}var $=en;function Ie(e,t){const n=self.crypto.randomUUID();return e.postMessage({...t,id:n}),new Promise(r=>{const i=o=>{o.data.id===n&&(r(o.data.payload),e.removeEventListener("message",i))};e.addEventListener("message",i)})}const Qe=["Cased_Letter","Close_Punctuation","Connector_Punctuation","Control","Currency_Symbol","Dash_Punctuation","Decimal_Number","Enclosing_Mark","Final_Punctuation","Format","Initial_Punctuation","Letter","Letter_Number","Line_Separator","Lowercase_Letter","Mark","Math_Symbol","Modifier_Letter","Modifier_Symbol","Nonspacing_Mark","Number","Open_Punctuation","Other","Other_Letter","Other_Number","Other_Punctuation","Other_Symbol","Paragraph_Separator","Private_Use","Punctuation","Separator","Space_Separator","Spacing_Mark","Surrogate","Symbol","Titlecase_Letter","Unassigned","Uppercase_Letter"],tn=["Adlam","Ahom","Anatolian_Hieroglyphs","Arabic","Armenian","Avestan","Balinese","Bamum","Bassa_Vah","Batak","Bengali","Bhaiksuki","Bopomofo","Brahmi","Braille","Buginese","Buhid","Canadian_Aboriginal","Carian","Caucasian_Albanian","Chakma","Cham","Chorasmian","Cherokee","Common","Coptic","Cuneiform","Cypriot","Cyrillic","Deseret","Devanagari","Dives_Akuru","Dogra","Duployan","Egyptian_Hieroglyphs","Elbasan","Elymaic","Ethiopic","Georgian","Glagolitic","Gothic","Grantha","Greek","Gujarati","Gunjala_Gondi","Gurmukhi","Han","Hangul","Hanifi_Rohingya","Hanunoo","Hatran","Hebrew","Hiragana","Imperial_Aramaic","Inherited","Inscriptional_Pahlavi","Inscriptional_Parthian","Javanese","Kaithi","Kannada","Katakana","Kayah_Li","Kharoshthi","Khitan_Small_Script","Khmer","Khojki","Khudawadi","Lao","Latin","Lepcha","Limbu","Linear_A","Linear_B","Lisu","Lycian","Lydian","Mahajani","Makasar","Malayalam","Mandaic","Manichaean","Marchen","Medefaidrin","Masaram_Gondi","Meetei_Mayek","Mende_Kikakui","Meroitic_Cursive","Meroitic_Hieroglyphs","Miao","Modi","Mongolian","Mro","Multani","Myanmar","Nabataean","Nandinagari","New_Tai_Lue","Newa","Nko","Nushu","Nyiakeng_Puachue_Hmong","Ogham","Ol_Chiki","Old_Hungarian","Old_Italic","Old_North_Arabian","Old_Permic","Old_Persian","Old_Sogdian","Old_South_Arabian","Old_Turkic","Oriya","Osage","Osmanya","Pahawh_Hmong","Palmyrene","Pau_Cin_Hau","Phags_Pa","Phoenician","Psalter_Pahlavi","Rejang","Runic","Samaritan","Saurashtra","Sharada","Shavian","Siddham","SignWriting","Sinhala","Sogdian","Sora_Sompeng","Soyombo","Sundanese","Syloti_Nagri","Syriac","Tagalog","Tagbanwa","Tai_Le","Tai_Tham","Tai_Viet","Takri","Tamil","Tangut","Telugu","Thaana","Thai","Tibetan","Tifinagh","Tirhuta","Ugaritic","Vai","Wancho","Warang_Citi","Yezidi","Yi","Zanabazar_Square"],et=["ASCII","ASCII_Hex_Digit","Alphabetic","Any","Assigned","Bidi_Control","Bidi_Mirrored","Case_Ignorable","Cased","Changes_When_Casefolded","Changes_When_Casemapped","Changes_When_Lowercased","Changes_When_NFKC_Casefolded","Changes_When_Titlecased","Changes_When_Uppercased","Dash","Default_Ignorable_Code_Point","Deprecated","Diacritic","Emoji","Emoji_Component","Emoji_Modifier","Emoji_Modifier_Base","Emoji_Presentation","Extended_Pictographic","Extender","Grapheme_Base","Grapheme_Extend","Hex_Digit","IDS_Binary_Operator","IDS_Trinary_Operator","ID_Continue","ID_Start","Ideographic","Join_Control","Logical_Order_Exception","Lowercase","Math","Noncharacter_Code_Point","Pattern_Syntax","Pattern_White_Space","Quotation_Mark","Radical","Regional_Indicator","Sentence_Terminal","Soft_Dotted","Terminal_Punctuation","Unified_Ideograph","Uppercase","Variation_Selector","White_Space","XID_Continue","XID_Start"],ye=tn.filter(e=>{const t=String.raw`^\p{Script=${e}}$`;try{new RegExp(t,"u")}catch{return!1}return!0}),Oe=[...Qe,...et,"Script"].sort(),nn=[...Qe,...et,...ye.map(e=>`Script=${e}`)].map(e=>{const t=String.raw`^\p{${e}}$`,n=new RegExp(t,"u");return[e,n]});function rn(e){if([...e].length>1)throw new Error("Cannot match on string with length over 1");return nn.filter(([,t])=>t.test(e)).map(([t])=>t)}const oe=2**16,_e=new Map([[0,"Basic Multilingual Plane"],[1,"Supplementary Multilingual Plane"],[2,"Supplementary Ideographic Plane"],[3,"Tertiary Ideographic Plane"],[14,"Supplementary Special-purpose Plane"],[15,"Supplementary Private Use Area Plane"],[16,"Supplementary Private Use Area Plane"]]);function on(e){const t=Math.floor(e/oe);return _e.has(t)?{number:t,name:_e.get(t)}:{number:t}}function eo(e){return e.split(`
-`).map(t=>{const[n,r]=t.split(",");return{range:n.split("..").map(o=>parseInt(o.slice(2),16)),name:r}})}function an(e,t){for(const n of e){const{range:r,name:i}=n;if(!(t>r[1]))return{range:[...r],name:i}}throw new Error("codepoint does not match any block")}function cn(e){const t=e.match(/<([a-zA-Z]+)> ([A-Z0-9 ]+)/);if(!t)return null;const{1:n,2:r}=t,i=r.split(" ").map(o=>parseInt(o.trim(),16));return{type:n,codepoints:i}}const sn={Lu:"Uppercase_Letter",Ll:"Lowercase_Letter",Lt:"Titlecase_Letter",LC:"Cased_Letter",Lm:"Modifier_Letter",Lo:"Other_Letter",Mn:"Nonspacing_Mark",Mc:"Spacing_Mark",Me:"Enclosing_Mark",Nd:"Decimal_Number",Nl:"Letter_Number",No:"Other_Number",Pc:"Connector_Punctuation",Pd:"Dash_Punctuation",Ps:"Open_Punctuation",Pe:"Close_Punctuation",Pi:"Initial_Punctuation",Pf:"Final_Punctuation",Po:"Other_Punctuation",Sm:"Math_Symbol",Sc:"Currency_Symbol",Sk:"Modifier_Symbol",So:"Other_Symbol",Zs:"Space_Separator",Zl:"Line_Separator",Zp:"Paragraph_Separator",Cc:"Control",Cf:"Format",Cs:"Surrogate",Co:"Private_Use",Cn:"Unassigned"},tt=new Map([["L","Left-to-Right"],["R","Right-to-Left"],["AL","Arabic Letter"],["EN","European Number"],["ES","European Separator"],["ET","European Number Terminator"],["AN","Arabic Number"],["CS","Common Number Separator"],["NSM","Nonspacing Mark"],["BN","Boundary Neutral"],["B","Paragraph Separator"],["S","Segment Separator"],["WS","Whitespace"],["ON","Other Neutrals"],["LRE","Left-to-Right Embedding"],["LRO","Left-to-Right Override"],["RLE","Right-to-Left Embedding"],["RLO","Right-to-Left Override"],["PDF","Pop Directional Format"],["LRI","Left-to-Right Isolate"],["RLI","Right-to-Left Isolate"],["FSI","First Strong Isolate"],["PDI","Pop Directional Isolate"]]),$e=()=>({name:"Codepoint Range",data:{from:0,to:65535},matchType:"Require"}),ln=e=>{const t=ke();return e.filter(r=>r.data).map(r=>{const i=r.matchType==="Exclude",{name:o,data:a}=r;if(o==="Codepoint Range")return{type:"range",negated:i,value:[a.from,a.to]};if(o==="Name Includes")return{type:"name",negated:i,value:a.toUpperCase()};if(o==="Regex Match")return a.matchOn==="Character"?{type:"character",negated:i,value:a.regex.toString()}:{type:"name",negated:i,value:a.regex.toString()};if(o==="Bidi Class")return{type:"bidi",negated:i,value:a};if(o==="Unicode Property")return{type:"character",negated:i,value:`/\\p{${a}}/`};if(o==="Unicode Block"){if(!t)return;const c=t.find(s=>s.name===a)?.range;return c?{type:"range",negated:i,value:c}:void 0}if(o==="Unicode Plane")return{type:"range",negated:i,value:[oe*a,oe*a+oe]}}).filter(Boolean)},[xe,re]=p([$e()]),[dn,to]=p(null),[un,no]=p(!1),[we,De]=p(!1),[W,fn]=p("simple"),[Se,hn]=p(""),gn=m(()=>ln(xe())),[R,Re]=p([]);S(()=>{const e=Se(),t=gn(),n=un(),r=dn(),i=W();!n||!r||(i==="simple"?Ie(r,{name:"simple-query",payload:e}).then(o=>{we()||De(!0),Re(o)}):Ie(r,{name:"advanced-query",payload:t}).then(o=>{we()||De(!0),Re(o)}))});p([]);const[J,Z]=p(-1);S(()=>{R(),Z(-1)});const V=m(()=>{const e=J();return R()?.[e]?.[1]}),[ke,ro]=p([]),[be,bn]=p("hex"),[mn,io]=p(new Map);var pn=h('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 250 250"s:unicode-b6c5416e-0><a target=_blank rel="noopener noreferrer"aria-label="GitHub repository"s:unicode-b6c5416e-0><path d="M0 0l115 115h15l12 27 108 108V0z"fill=#868e96 s:unicode-b6c5416e-0></path><path class=octo-arm d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"fill=#ffffff s:unicode-b6c5416e-0 style="transform-origin:130px 106px"></path><path class=octo-body d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"fill=#ffffff s:unicode-b6c5416e-0>');const vn="unicode-b6c5416e-0",yn="svg[s\\:unicode-b6c5416e-0]{position:absolute;top:0;right:0}";function _n(e){return $(vn,1,yn),(()=>{var t=pn(),n=t.firstChild;return v(r=>{var i=e.size??60,o=e.size??60,a=e.href;return i!==r.e&&O(t,"width",r.e=i),o!==r.t&&O(t,"height",r.t=o),a!==r.a&&O(n,"href",r.a=a),r},{e:void 0,t:void 0,a:void 0}),t})()}function $n(e){return`U+${e.toString(16).toLowerCase().padStart(4,"0")}`}function xn(e){const t=String.fromCodePoint(e),n=e>65535?new Uint16Array(2).map((i,o)=>t.charCodeAt(o)):Uint16Array.from([e]),r=n.map(i=>(i&255)<<8|i>>8&255);return{utf8:new TextEncoder().encode(t),utf16BE:n,utf16LE:r}}var wn=h("<button tabindex=0 s:unicode-6be4b367-0><div class=content s:unicode-6be4b367-0><div class=symbol s:unicode-6be4b367-0><span s:unicode-6be4b367-0></span></div><div class=name s:unicode-6be4b367-0><span s:unicode-6be4b367-0>");const Sn="unicode-6be4b367-0",Cn='.row[s\\:unicode-6be4b367-0]{background-color:var(--bg-offset);border:1px solid transparent;width:100%;position:relative}.row[s\\:unicode-6be4b367-0]:after{content:attr(data-codepoint);opacity:.5;padding:.5rem;font-size:.8rem;display:block;position:absolute;bottom:0;right:0}.row[s\\:unicode-6be4b367-0].active{border:1px solid #00f}.content[s\\:unicode-6be4b367-0]{grid-template-columns:auto 1fr;gap:1rem;width:100%;padding:.5rem;display:grid}.symbol[s\\:unicode-6be4b367-0]{text-align:center;width:2rem}.symbol[s\\:unicode-6be4b367-0]:before,.symbol[s\\:unicode-6be4b367-0]:after{content:"\\""}.name[s\\:unicode-6be4b367-0]{text-align:left;opacity:.75}';function kn(e){let t;return S(()=>{J()===e.index&&t?.focus()}),$(Sn,1,Cn),(()=>{var n=wn(),r=n.firstChild,i=r.firstChild,o=i.firstChild,a=i.nextSibling,c=a.firstChild;n.$$contextmenu=l=>{l.preventDefault(),navigator.clipboard.writeText(String.fromCodePoint(e.codepoint)),t?.animate([{transform:"scale(1)"},{transform:"scale(0.95)"},{transform:"scale(1.02)"},{transform:"scale(1)"}],{duration:400,iterations:1,easing:"ease-out"})},n.$$click=()=>{Z(e.index)};var s=t;return typeof s=="function"?he(s,n):t=n,u(o,()=>String.fromCodePoint(e.codepoint)),u(c,()=>e.info.label.toLowerCase()),v(l=>{var f=`row ${J()===e.index?"active":""}`,d=$n(e.codepoint);return f!==l.e&&U(n,l.e=f),d!==l.t&&O(n,"data-codepoint",l.t=d),l},{e:void 0,t:void 0}),n})()}E(["click","contextmenu"]);var En=h("<p s:unicode-1d33c8bb-0> result"),Ln=h("<div class=table role=table s:unicode-1d33c8bb-0><div class=intersection-observer s:unicode-1d33c8bb-0>");const Mn="unicode-1d33c8bb-0",Pn=".table[s\\:unicode-1d33c8bb-0]{text-align:left}p[s\\:unicode-1d33c8bb-0]{text-align:left;opacity:.7;margin:0;font-size:.8rem}.intersection-observer[s\\:unicode-1d33c8bb-0]{height:5rem}";function An(){const[e,t]=p(50);let n;S(()=>{R(),t(50)}),S(()=>{if(!n)return;const a=new IntersectionObserver(c=>{c[0]?.isIntersecting&&R().length>e()&&t(l=>l+50)},{rootMargin:"0px",threshold:.8});a.observe(n),G(()=>a.disconnect())});const r=m(()=>R().slice(0,e()));function i(a){const c=a.target.querySelector("img")?.dataset.index;c&&Z(Number(c))}function o(a){a.key==="ArrowDown"&&J()<R().length-1?Z(c=>c+1):a.key==="ArrowUp"&&J()>=0&&Z(c=>c-1)}return $(Mn,1,Pn),[(()=>{var a=En(),c=a.firstChild;return u(a,()=>R().length,c),u(a,()=>R().length>1?"s":"",null),a})(),(()=>{var a=Ln(),c=a.firstChild;a.$$keydown=o,a.$$focusin=i,u(a,g(T,{get each(){return r()},children:([l,f],d)=>g(kn,{get index(){return d()},codepoint:l,info:f})}),c);var s=n;return typeof s=="function"?he(s,c):n=c,a})()]}E(["focusin","keydown"]);function Nn(e,t){let n;return function(...i){clearTimeout(n),n=setTimeout(e,t,...i)}}var Tn=h("<br s:unicode-dccdd2a2-0>"),In=h("<span s:unicode-dccdd2a2-0 style=color:red>"),On=h("<form s:unicode-dccdd2a2-0><input type=text placeholder=Search... s:unicode-dccdd2a2-0>");const Dn="unicode-dccdd2a2-0",Rn="input[s\\:unicode-dccdd2a2-0]{border:1px solid transparent;width:90%;margin:0 auto;box-shadow:-3px 4px 2px rgba(0,0,0,.06)}:root[data-theme=dark] input[s\\:unicode-dccdd2a2-0]{color:#fff;background-color:#151515;border:1px solid #6b6b6b;box-shadow:1px 1px 1px 2px rgba(0,0,0,.43)}input[s\\:unicode-dccdd2a2-0]::-webkit-input-placeholder{opacity:.5}input[s\\:unicode-dccdd2a2-0]:focus{outline:1px solid #a5b5ff;box-shadow:-3px 4px 2px rgba(137,74,255,.06)}";function Bn(e){const[t,n]=p("");let r;const i=Nn(()=>e.onSearch?.(),100);function o(s){const l=s.match(/\/(.+?)\/([a-z]+)?/);if(!l)return!1;const[,f,d]=l;try{return new RegExp(f,d),!1}catch{return!0}}function a(){if(o(Se())){n("Regex Error. Please verify search text.");return}n(""),i()}function c(s){if(document.activeElement!==r&&!(s.key.length>1||new RegExp("\\p{C}","u").test(s.key))&&!(s.ctrlKey||s.altKey||s.metaKey)){if(s.key===" "){s.preventDefault();return}r?.focus()}}return Q(()=>{window.addEventListener("keydown",c),G(()=>window.removeEventListener("keydown",c))}),$(Dn,1,Rn),(()=>{var s=On(),l=s.firstChild;s.addEventListener("submit",d=>{d.preventDefault(),a()}),l.$$input=d=>{hn(d.currentTarget.value),a()};var f=r;return typeof f=="function"?he(f,l):r=l,u(s,g(N,{get when(){return t()},get children(){return[Tn(),(()=>{var d=In();return u(d,t),d})()]}}),null),v(()=>l.value=Se()),s})()}E(["input"]);var Un=h('<svg width=17 height=15 viewBox="0 0 17 15"fill=none xmlns=http://www.w3.org/2000/svg><path d="M0.5 0.891388V0.5H16.5V0.908211L10.4714 6.92685C10.2988 7.08292 10.1883 7.29742 10.1639 7.53108L10.1612 7.55697V7.583V14.4671L6.94945 13.3431V7.65808H6.9495L6.9494 7.65082C6.94586 7.4073 6.8449 7.177 6.67159 7.00879L0.5 0.891388ZM10.2355 14.5683L10.2359 14.5689L10.2355 14.5683ZM6.94945 13.4068V13.4058C6.94945 13.4062 6.94945 13.4065 6.94945 13.4068Z">');function Fn(e){const t=()=>e.active?"var(--hsl-bg)":"var(--hsl)";return(()=>{var n=Un(),r=n.firstChild;return v(i=>{var o=t(),a=t();return o!==i.e&&O(r,"fill",i.e=o),a!==i.t&&O(r,"stroke",i.t=a),i},{e:void 0,t:void 0}),n})()}var jn=h('<svg xmlns=http://www.w3.org/2000/svg enable-background="new 0 0 24 24"height=24px viewBox="0 0 24 24"width=24px class=theme-sun s:unicode-c72a352f-0><rect fill=none height=24 width=24 s:unicode-c72a352f-0></rect><path d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"s:unicode-c72a352f-0>');const zn="unicode-c72a352f-0",Hn=":root[data-theme=dark] svg[s\\:unicode-c72a352f-0].theme-sun{fill:#fff}:root[data-theme=light] svg[s\\:unicode-c72a352f-0].theme-sun{fill:#000}";function Vn(){return $(zn,1,Hn),jn()}var qn=h("<button s:unicode-a5faa322-0>");const Gn="unicode-a5faa322-0",Kn="button[s\\:unicode-a5faa322-0]{cursor:pointer;opacity:.6;background:0 0;border:none;margin:0;padding:0 10px}button[s\\:unicode-a5faa322-0]:active{transform:scale(.9)}";function Wn(){const[e,t]=p(!1),n=o=>{const a=o?"dark":"light";document.documentElement.dataset.theme=a,localStorage.setItem("color-scheme",a)},r=()=>localStorage.getItem("color-scheme");Q(()=>{const o=window.matchMedia("(prefers-color-scheme: dark)"),a=s=>{r()||t(s.matches)};o.addEventListener("change",a);const c=r();if(c)t(c==="dark");else{const s=window.matchMedia("(prefers-color-scheme: dark)").matches;t(s)}n(e()),G(()=>o.removeEventListener("change",a))});const i=()=>{const o=!e();t(o),n(o)};return $(Gn,1,Kn),(()=>{var o=qn();return o.$$click=i,u(o,g(Vn,{})),o})()}E(["click"]);var Zn=h("<h3 s:unicode-29142cf7-0>Simple Search"),Xn=h("<header s:unicode-29142cf7-0><div class=text s:unicode-29142cf7-0><h1 s:unicode-29142cf7-0>Unicode Lookup</h1></div><div class=buttons s:unicode-29142cf7-0><button s:unicode-29142cf7-0>"),Yn=h("<h3 s:unicode-29142cf7-0>Advanced Search");const Jn="unicode-29142cf7-0",Qn="header[s\\:unicode-29142cf7-0]{justify-content:space-between;align-items:center;max-width:600px;margin:20px auto;display:flex}h1[s\\:unicode-29142cf7-0]{font-size:1.7em}.buttons[s\\:unicode-29142cf7-0]{display:flex}button[s\\:unicode-29142cf7-0]{cursor:pointer;z-index:2;margin:0;padding:10px 20px}.active[s\\:unicode-29142cf7-0]{color:var(--hsl-bg);background:var(--hsl);transition:all .25s}button[s\\:unicode-29142cf7-0]:focus{border:1px solid var(--hsl)}";function er(){function e(){fn(t=>t==="advanced"?"simple":"advanced")}return $(Jn,1,Qn),(()=>{var t=Xn(),n=t.firstChild;n.firstChild;var r=n.nextSibling,i=r.firstChild;return u(n,g(N,{get when(){return W()==="simple"},get fallback(){return Yn()},get children(){return Zn()}}),null),u(r,g(Wn,{}),i),i.$$click=e,u(i,g(Fn,{get active(){return W()==="advanced"}})),v(()=>U(i,`styled ${W()==="advanced"?"active":""}`)),t})()}E(["click"]);var tr=h("<span class=btn__spinner s:unicode-dcb7f13a-0>"),nr=h("<button s:unicode-dcb7f13a-0><span s:unicode-dcb7f13a-0>");const rr="unicode-dcb7f13a-0",ir=".btn[s\\:unicode-dcb7f13a-0]{padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);cursor:pointer;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);transition:var(--transition-colors),var(--transition-transform);justify-content:center;align-items:center;gap:var(--space-2);border:var(--border-width-1) solid transparent;margin:0;display:inline-flex;position:relative}.btn[s\\:unicode-dcb7f13a-0]:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.btn--primary[s\\:unicode-dcb7f13a-0]{color:var(--color-primary);background:var(--color-primary-bg);border-color:var(--color-primary)}.btn--primary[s\\:unicode-dcb7f13a-0]:hover:not([s\\:unicode-dcb7f13a-0]:disabled){background:var(--color-primary-hover);filter:brightness(.95)}.btn--primary[s\\:unicode-dcb7f13a-0]:active:not([s\\:unicode-dcb7f13a-0]:disabled){transform:scale(.98)}.btn--secondary[s\\:unicode-dcb7f13a-0]{color:var(--color-text);background:var(--color-bg-offset);border-color:var(--color-border)}.btn--secondary[s\\:unicode-dcb7f13a-0]:hover:not([s\\:unicode-dcb7f13a-0]:disabled){background:var(--color-bg-elevated);border-color:var(--color-text-secondary)}.btn--secondary[s\\:unicode-dcb7f13a-0]:active:not([s\\:unicode-dcb7f13a-0]:disabled){transform:scale(.98)}.btn--ghost[s\\:unicode-dcb7f13a-0]{color:var(--color-text-primary);box-shadow:none;background:0 0;border-color:transparent}.btn--ghost[s\\:unicode-dcb7f13a-0]:hover:not([s\\:unicode-dcb7f13a-0]:disabled){background:var(--color-bg-offset)}.btn--ghost[s\\:unicode-dcb7f13a-0]:active:not([s\\:unicode-dcb7f13a-0]:disabled){transform:scale(.98)}.btn--outline[s\\:unicode-dcb7f13a-0]{color:var(--color-primary);border-color:var(--color-primary);box-shadow:none;background:0 0}.btn--outline[s\\:unicode-dcb7f13a-0]:hover:not([s\\:unicode-dcb7f13a-0]:disabled){background:var(--color-primary-bg)}.btn--outline[s\\:unicode-dcb7f13a-0]:active:not([s\\:unicode-dcb7f13a-0]:disabled){transform:scale(.98)}.btn--danger[s\\:unicode-dcb7f13a-0]{color:#fff;background:var(--color-error);border-color:var(--color-error)}.btn--danger[s\\:unicode-dcb7f13a-0]:hover:not([s\\:unicode-dcb7f13a-0]:disabled){filter:brightness(1.1)}.btn--danger[s\\:unicode-dcb7f13a-0]:active:not([s\\:unicode-dcb7f13a-0]:disabled){transform:scale(.98)}.btn--sm[s\\:unicode-dcb7f13a-0]{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.btn--lg[s\\:unicode-dcb7f13a-0]{padding:var(--space-3) var(--space-6);font-size:var(--font-size-lg)}.btn--full-width[s\\:unicode-dcb7f13a-0]{width:100%}.btn[s\\:unicode-dcb7f13a-0]:disabled,.btn--disabled[s\\:unicode-dcb7f13a-0]{opacity:.5;cursor:not-allowed}.btn__spinner[s\\:unicode-dcb7f13a-0]{border:2px solid;border-right-color:transparent;border-radius:50%;width:1em;height:1em;animation:.6s linear infinite unicode-dcb7f13a-0-spin}@keyframes unicode-dcb7f13a-0-spin{to{transform:rotate(360deg)}}.btn__content--loading[s\\:unicode-dcb7f13a-0]{opacity:.7}.btn[s\\:unicode-dcb7f13a-0].styled{color:var(--hsl);background:var(--hsl-bg);border-color:var(--hsl)}.btn[s\\:unicode-dcb7f13a-0].styled:hover:not([s\\:unicode-dcb7f13a-0]:disabled){filter:brightness(.95)}.btn[s\\:unicode-dcb7f13a-0].styled:active:not([s\\:unicode-dcb7f13a-0]:disabled){transform:scale(.98)}";function or(e){const t=m(()=>["btn",e.hue!==void 0?"styled":`btn--${e.variant??"primary"}`,`btn--${e.size??"base"}`,e.fullWidth&&"btn--full-width",(e.disabled||e.loading)&&"btn--disabled"].filter(Boolean).join(" ")),n=m(()=>e.hue!==void 0?`--hue: ${e.hue}`:void 0);return $(rr,1,ir),(()=>{var r=nr(),i=r.firstChild;return fe(r,"click",e.onClick,!0),u(r,g(N,{get when(){return e.loading},get children(){return tr()}}),i),u(i,()=>e.children),v(o=>{var a=t(),c=n(),s=e.type??"button",l=e.disabled||e.loading,f=e.loading?"btn__content btn__content--loading":"btn__content";return a!==o.e&&U(r,o.e=a),o.t=z(r,c,o.t),s!==o.a&&O(r,"type",o.a=s),l!==o.o&&(r.disabled=o.o=l),f!==o.i&&U(i,o.i=f),o},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),r})()}E(["click"]);E(["input"]);var ar=h("<option value disabled s:unicode-ec0a63d-0>"),cr=h("<span class=select-error s:unicode-ec0a63d-0>"),sr=h("<div class=select-wrapper s:unicode-ec0a63d-0><select s:unicode-ec0a63d-0>"),lr=h("<option s:unicode-ec0a63d-0>");const dr="unicode-ec0a63d-0",ur=".select-wrapper[s\\:unicode-ec0a63d-0]{gap:var(--space-1);flex-direction:column;width:auto;display:inline-flex}.select[s\\:unicode-ec0a63d-0]{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:var(--border-width-1) solid var(--color-border);background:var(--color-bg-input);color:var(--color-text);font-family:var(--font-family-base);transition:var(--transition-colors);box-sizing:border-box;cursor:pointer;margin:0}.select[s\\:unicode-ec0a63d-0]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-input-focus);outline:none}.select--default[s\\:unicode-ec0a63d-0]:hover:not([s\\:unicode-ec0a63d-0]:disabled):not([s\\:unicode-ec0a63d-0]:focus){border-color:var(--color-text-secondary)}.select--sm[s\\:unicode-ec0a63d-0]{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm);height:var(--size-input-height-sm)}.select--base[s\\:unicode-ec0a63d-0]{height:var(--size-input-height-base)}.select--lg[s\\:unicode-ec0a63d-0]{padding:var(--space-3) var(--space-5);font-size:var(--font-size-lg);height:var(--size-input-height-lg)}.select--error[s\\:unicode-ec0a63d-0]{border-color:var(--color-error-border)}.select--error[s\\:unicode-ec0a63d-0]:focus{border-color:var(--color-error)}.select-error[s\\:unicode-ec0a63d-0]{font-size:var(--font-size-sm);color:var(--color-error);margin-top:var(--space-1)}.select--full-width[s\\:unicode-ec0a63d-0]{width:100%}.select[s\\:unicode-ec0a63d-0]:disabled,.select--disabled[s\\:unicode-ec0a63d-0]{opacity:.6;cursor:not-allowed;background:var(--color-bg-offset)}.select[s\\:unicode-ec0a63d-0].styled{color:var(--hsl);background:var(--hsl-bg);border-color:var(--hsl)}.select[s\\:unicode-ec0a63d-0].styled:focus{border-color:var(--hsl);box-shadow:var(--shadow-input-focus)}option[s\\:unicode-ec0a63d-0]{background:var(--color-bg-input);color:var(--color-text)}";function fr(e){const t=m(()=>e.options.map(a=>typeof a=="object"&&"value"in a&&"label"in a?a:{value:a,label:String(a)})),n=m(()=>typeof e.error=="string"?!!e.error:e.error),r=m(()=>["select",e.hue!==void 0?"styled":"select--default",`select--${e.size??"base"}`,n()&&"select--error",e.fullWidth&&"select--full-width",e.disabled&&"select--disabled"].filter(Boolean).join(" ")),i=m(()=>e.hue!==void 0?`--hue: ${e.hue}`:void 0);function o(a){const s=a.target.value;e.options.length>0&&typeof e.options[0]=="number"?e.onChange?.(Number(s)):e.onChange?.(s)}return $(dr,1,ur),(()=>{var a=sr(),c=a.firstChild;return c.addEventListener("change",o),u(c,g(N,{get when(){return e.placeholder},get children(){var s=ar();return u(s,()=>e.placeholder),v(()=>s.selected=e.value===""),s}}),null),u(c,g(T,{get each(){return t()},children:s=>(()=>{var l=lr();return u(l,()=>s.label),v(()=>l.value=s.value),l})()}),null),u(a,g(N,{get when(){return Nt(()=>typeof e.error=="string")()&&e.error},get children(){var s=cr();return u(s,()=>e.error),s}}),null),v(s=>{var l=r(),f=i(),d=e.disabled,b=n();return l!==s.e&&U(c,s.e=l),s.t=z(c,f,s.t),d!==s.a&&(c.disabled=s.a=d),b!==s.o&&O(c,"aria-invalid",s.o=b),s},{e:void 0,t:void 0,a:void 0,o:void 0}),v(()=>c.value=e.value),a})()}E(["input"]);E(["click"]);var hr=h('<svg width=15 height=15 viewBox="0 0 8 8"fill=none xmlns=http://www.w3.org/2000/svg><path d="M7.75 1.325L6.675 0.25L4 2.925L1.325 0.25L0.25 1.325L2.925 4L0.25 6.675L1.325 7.75L4 5.075L6.675 7.75L7.75 6.675L5.075 4L7.75 1.325Z"fill="hsl(var(--hue), 66%, 39%)">');function gr(){return hr()}var br=h("<select class=styled s:unicode-f70bbe3c-0>"),mr=h("<option s:unicode-f70bbe3c-0>");const pr="unicode-f70bbe3c-0",vr="select[s\\:unicode-f70bbe3c-0]{cursor:pointer;box-shadow:0 4px 3px rgba(0,0,0,.09)}select[s\\:unicode-f70bbe3c-0]:focus{outline:none}select[s\\:unicode-f70bbe3c-0]:disabled{opacity:1;filter:brightness(95%);cursor:auto}";function q(e){return $(pr,1,vr),(()=>{var t=br();return t.addEventListener("change",n=>e.onChange?.(n.currentTarget.value)),u(t,g(T,{get each(){return e.options??["Dropdown"]},children:n=>(()=>{var r=mr();return u(r,n),r})()})),v(n=>{var r=e.disabled,i=`--hue: ${e.hue??111}`;return r!==n.e&&(t.disabled=n.e=r),n.t=z(t,i,n.t),n},{e:void 0,t:void 0}),v(()=>t.value=e.value),t})()}const nt=new Map([...tt.entries()].map(([e,t])=>[`${e} (${t})`,e])),Be=[...nt.keys()];function yr(e){const[t,n]=p(Be[0]);return S(()=>{const r=nt.get(t());r&&e.onDataChange?.(r)}),g(q,{options:Be,hue:35,get value(){return t()},onChange:n})}var _r=h("<div s:unicode-78e15991-0><input class=styled type=text s:unicode-78e15991-0 style=--hue:35><button class=styled s:unicode-78e15991-0 style=--hue:35>"),$r=h("<p s:unicode-78e15991-0>");function xr(e){return/^[A-Fa-f0-9]+$/.test(e)?parseInt(e,16):NaN}function wr(e){return/^[01]+$/.test(e)?parseInt(e,2):NaN}function Ue(e,t){return e==="hex"?xr(String(t)):e==="bin"?wr(String(t)):Number(t)}function Sr(e,t){return e==="hex"?t.toString(16):e==="bin"?t.toString(2):String(t)}function*Cr(e){for(;;)yield*e}const kr="unicode-78e15991-0",Er="p[s\\:unicode-78e15991-0]{color:red;margin:0}";function Fe(e){const[t,n]=p(e.value??0),[r,i]=p(""),[o,a]=p(e.type??"dec"),c=Cr(["hex","bin","dec"]);S(()=>{const l=Ue(o(),t());Number.isNaN(l)?i("Invalid input"):(i(""),e.onChange?.(l))});function s(){const l=c.next().value;if(l){a(l);const f=Ue(o(),t());Number.isNaN(f)||n(Sr(l,f))}}return $(kr,1,Er),[(()=>{var l=_r(),f=l.firstChild,d=f.nextSibling;return f.$$input=b=>n(b.currentTarget.value),d.$$click=s,u(d,o),v(()=>f.value=t()),l})(),(()=>{var l=$r();return u(l,r),l})()]}E(["input","click"]);var Lr=h("<div><span>From</span><span>To");function Mr(e){const[t,n]=p(e.data?.from??0),[r,i]=p(e.data?.to??65535);return S(()=>{e.onDataChange?.({from:t(),to:r()})}),(()=>{var o=Lr(),a=o.firstChild,c=a.nextSibling;return u(o,g(Fe,{get value(){return t()},onChange:n}),c),u(o,g(Fe,{get value(){return r()},onChange:i}),null),o})()}var Pr=h("<input class=styled type=text autocorrect=off s:unicode-fc35fcb1-0>"),Ar=h("<p s:unicode-fc35fcb1-0>");const Nr="unicode-fc35fcb1-0",Tr="p[s\\:unicode-fc35fcb1-0]{color:red}";function rt(e){const[t,n]=p(e.value??""),[r,i]=p("");return S(()=>{const o=e.mutator??(l=>l),a=e.validator??(()=>!0),c=o(t()),s=a(t(),c);s===!0?(e.onChange?.(c),i("")):i(s)}),$(Nr,1,Tr),[(()=>{var o=Pr();return o.$$input=a=>n(a.currentTarget.value),v(a=>{var c=`--hue: ${e.hue??35}`,s=e.placeholder;return a.e=z(o,c,a.e),s!==a.t&&O(o,"placeholder",a.t=s),a},{e:void 0,t:void 0}),v(()=>o.value=t()),o})(),(()=>{var o=Ar();return u(o,r),o})()]}E(["input"]);function Ir(e){const[t,n]=p(e.data??"symbol");S(()=>{e.onDataChange?.(t())});function r(i){return/^[A-Za-z0-9 ()<>,-]+$/.test(i)?!0:"Impossible name"}return g(rt,{placeholder:"text",validator:r,get value(){return t()},onChange:n})}var Or=h("<span>Regex"),Dr=h("<span>Match On");function je(e){const t=e.match(/^\/(.+)\/([A-Za-z]*)$/);if(!t)return null;const[,n,r]=t;try{return new RegExp(n,r)}catch{return null}}function Rr(e){const[t,n]=p("/[A-Za-z]/u"),[r,i]=p("Character");S(()=>{const a=je(t());a&&e.onDataChange?.({regex:a,matchOn:r()})});function o(a){return je(a)?!0:"invalid regex"}return[Or(),g(rt,{placeholder:"regular expression",validator:o,get value(){return t()},onChange:n}),Dr(),g(q,{options:["Character","Name"],hue:35,get value(){return r()},onChange:a=>i(a)})]}var Br=h("<label><span>Sort Blocks Alphabetically</span><input type=checkbox>");function Ur(e){const t=m(()=>ke().map(c=>c.name)),[n,r]=p(!0),[i,o]=p(""),a=m(()=>n()?[...t()].sort():t());return S(()=>{const c=t();c.length>0&&!i()&&o(c[0])}),S(()=>{i()&&e.onDataChange?.(i())}),[g(q,{get options(){return a()},hue:35,get value(){return i()},onChange:o}),(()=>{var c=Br(),s=c.firstChild,l=s.nextSibling;return l.addEventListener("change",f=>r(f.currentTarget.checked)),v(()=>l.checked=n()),c})()]}const it=new Map(Array.from({length:17}).map((e,t)=>{const n=_e.get(t)||"Unassigned";return[`(${t}) ${n}`,t]})),ze=[...it.keys()];function Fr(e){const[t,n]=p(ze[0]);return S(()=>{const r=it.get(t());r!==void 0&&e.onDataChange?.(r)}),g(q,{options:ze,hue:35,get value(){return t()},onChange:n})}function jr(e){const[t,n]=p(Oe[0]),[r,i]=p(ye[0]);return S(()=>{t()==="Script"?e.onDataChange?.(`Script=${r()}`):e.onDataChange?.(t())}),[g(q,{options:Oe,hue:35,get value(){return t()},onChange:n}),g(N,{get when(){return t()==="Script"},get children(){return g(q,{options:ye,hue:35,get value(){return r()},onChange:i})}})]}const zr=[["Codepoint Range",Mr],["Name Includes",Ir],["Regex Match",Rr],["Unicode Property",jr],["Unicode Plane",Fr],["Unicode Block",Ur],["Bidi Class",yr]],He=new Map(zr);var Hr=h('<div class="content styled"s:unicode-4cb7e0c1-0><button s:unicode-4cb7e0c1-0></button><hr s:unicode-4cb7e0c1-0>');const Vr="unicode-4cb7e0c1-0",qr=".content[s\\:unicode-4cb7e0c1-0]{justify-content:center;margin-top:-1px;padding:40px;display:grid;position:relative}button[s\\:unicode-4cb7e0c1-0]{z-index:2;cursor:pointer;background:0 0;border:none;margin:0;padding:3px;font-size:2em;line-height:.8em;position:absolute;top:5px;right:10px}hr[s\\:unicode-4cb7e0c1-0]{opacity:.4;margin:10px -40px}";function Gr(e){const[t,n]=p(e.name),r=m(()=>[...He.keys()]),i=m(()=>He.get(t()));return S(()=>{e.onNameChange?.(t()),e.onDataChange?.(void 0)}),$(Vr,1,qr),(()=>{var o=Hr(),a=o.firstChild,c=a.nextSibling;return fe(a,"click",e.onClose,!0),u(a,g(gr,{})),u(o,g(fr,{get options(){return r()},get value(){return t()},onChange:s=>n(String(s)),hue:35}),c),u(o,g(qt,{get component(){return i()},get data(){return e.data},get onDataChange(){return e.onDataChange}}),null),v(s=>z(o,`--hue: ${e.hue??200}`,s)),o})()}E(["click"]);var Kr=h("<div class=box s:unicode-b26becac-0><div class=dropdown-container s:unicode-b26becac-0>");const Wr="unicode-b26becac-0",Zr=".box[s\\:unicode-b26becac-0]{margin-bottom:20px;padding:20px 0;display:grid}.dropdown-container[s\\:unicode-b26becac-0]{z-index:2;justify-content:center;margin:-25px;display:flex}";function Xr(e){const t=m(()=>e.box.matchType==="Require"?111:0),n=()=>{e.onBoxChange?.({...e.box,matchType:e.box.matchType==="Require"?"Exclude":"Require"})};return $(Wr,1,Zr),(()=>{var r=Kr(),i=r.firstChild;return u(i,g(or,{onClick:n,get hue(){return t()},get children(){return e.box.matchType}})),u(r,g(Gr,{get name(){return e.box.name},get data(){return e.box.data},get hue(){return t()},get onClose(){return e.onClose},onNameChange:o=>e.onBoxChange?.({...e.box,name:o}),onDataChange:o=>e.onBoxChange?.({...e.box,data:o})}),null),r})()}var Yr=h("<button s:unicode-af6cf2bd-0>");const Jr="unicode-af6cf2bd-0",Qr="button[s\\:unicode-af6cf2bd-0]{cursor:pointer;border-radius:4px;margin:0;padding:5px 15px;box-shadow:0 4px 3px rgba(0,0,0,.09)}button[s\\:unicode-af6cf2bd-0]:focus,button[s\\:unicode-af6cf2bd-0]:active{color:var(--hsl);border:1px solid var(--hsl);background:hsl(var(--hue),100%,95%)}button[s\\:unicode-af6cf2bd-0]:active{background:hsl(var(--hue),70%,95%);transform:scale(.95)}.disabled[s\\:unicode-af6cf2bd-0]{border:1px solid hsl(var(--hue),40%,75%);color:hsl(var(--hue),40%,75%);cursor:auto}";function ei(e){return $(Jr,1,Qr),(()=>{var t=Yr();return fe(t,"click",e.onClick,!0),u(t,()=>e.children),v(n=>{var r=`styled ${e.disabled?"disabled":""}`,i=`--hue: ${e.hue??170}`,o=e.disabled;return r!==n.e&&U(t,n.e=r),n.t=z(t,i,n.t),o!==n.a&&(t.disabled=n.a=o),n},{e:void 0,t:void 0,a:void 0}),t})()}E(["click"]);var ti=h("<form s:unicode-f391a8cf-0>"),ni=h("<div class=buttons s:unicode-f391a8cf-0>");const ri="unicode-f391a8cf-0",ii=".buttons[s\\:unicode-f391a8cf-0]{justify-content:flex-end;display:flex}.buttons[s\\:unicode-f391a8cf-0] *{margin:5px}";function oi(e){const t=r=>()=>{re(i=>[...i.slice(0,r),...i.slice(r+1)])},n=r=>i=>{re(o=>[...o.slice(0,r),i,...o.slice(r+1)])};return Q(()=>{xe().length===0&&re([$e()])}),$(ri,1,ii),[(()=>{var r=ti();return r.addEventListener("submit",i=>i.preventDefault()),u(r,g(T,{get each(){return xe()},children:(i,o)=>g(Xr,{box:i,get onBoxChange(){return n(o())},get onClose(){return t(o())}})})),r})(),(()=>{var r=ni();return u(r,g(ei,{onClick:()=>re(i=>[...i,$e()]),children:"Add Rule"})),r})()]}var ai=h("<section s:unicode-20b1561-0><h2 s:unicode-20b1561-0>Fetching Data</h2><br s:unicode-20b1561-0><div class=chars s:unicode-20b1561-0>"),ci=h("<span s:unicode-20b1561-0>");const si="unicode-20b1561-0",li="section[s\\:unicode-20b1561-0]{text-align:center;padding-top:50px}.chars[s\\:unicode-20b1561-0] span[s\\:unicode-20b1561-0]{text-align:center;width:25px;line-height:1em;display:inline-block}";function di(){const[e,t]=p("xxxxxx");return Q(()=>{const n=setInterval(()=>{const r=Math.floor(Math.random()*4095),i=String.fromCodePoint(r),o=Math.floor(Math.random()*e().length);t(a=>a.slice(0,o)+i+a.slice(o+1))},50);G(()=>clearInterval(n))}),$(si,1,li),(()=>{var n=ai(),r=n.firstChild,i=r.nextSibling,o=i.nextSibling;return u(o,g(T,{get each(){return Array.from(e())},children:a=>(()=>{var c=ci();return u(c,a),c})()})),n})()}var ui=h("<br>"),fi=h("<table><thead><tr><th class=title colspan=2>Case Mapping</th></tr></thead><tbody>"),hi=h("<tr><td></td><td>");function gi(e){const t=m(()=>Object.entries({titlecaseMapping:e.titlecaseMapping,uppercaseMapping:e.uppercaseMapping,lowercaseMapping:e.lowercaseMapping}).filter(([,n])=>n));return g(N,{get when(){return t().length},get children(){return[ui(),(()=>{var n=fi(),r=n.firstChild,i=r.nextSibling;return u(i,g(T,{get each(){return t()},children:([o,a])=>(()=>{var c=hi(),s=c.firstChild,l=s.nextSibling;return u(s,o),u(l,()=>String.fromCodePoint(a)),c})()})),n})()]}})}var bi=h("<br s:unicode-212bd5bf-0>"),mi=h("<table class=encoding-table s:unicode-212bd5bf-0><thead s:unicode-212bd5bf-0><tr s:unicode-212bd5bf-0><th class=title s:unicode-212bd5bf-0>Encoding</th><th s:unicode-212bd5bf-0><div class=encoding-type s:unicode-212bd5bf-0></div></th></tr></thead><tbody s:unicode-212bd5bf-0>"),pi=h("<button s:unicode-212bd5bf-0>"),vi=h("<tr s:unicode-212bd5bf-0><td s:unicode-212bd5bf-0></td><td class=bit-sets s:unicode-212bd5bf-0>"),yi=h("<span s:unicode-212bd5bf-0>");const _i=["hex","bin","dec"];function $i(e,t,n){return t==="hex"?`0x<b>${e.toString(16).padStart(n/4,"0")}</b>`:t==="bin"?`0b<b>${e.toString(2).padStart(n,"0")}</b>`:`<b>${String(e)}</b>`}const xi="unicode-212bd5bf-0",wi=".bit-sets[s\\:unicode-212bd5bf-0] span[s\\:unicode-212bd5bf-0]{padding:0 3px}.title[s\\:unicode-212bd5bf-0]{color:var(--label-col);font-weight:700}td[s\\:unicode-212bd5bf-0]{padding:5px}th[s\\:unicode-212bd5bf-0]:first-child{color:var(--primary-text);padding-right:1rem;font-weight:400}tbody[s\\:unicode-212bd5bf-0] tr[s\\:unicode-212bd5bf-0]:nth-child(odd){background-color:var(--bg-offset)}.encoding-type[s\\:unicode-212bd5bf-0]{display:flex}.encoding-type[s\\:unicode-212bd5bf-0] button[s\\:unicode-212bd5bf-0]{opacity:.6;cursor:pointer;background:0;border:none;margin:0;padding:6px;font-weight:600}.encoding-type[s\\:unicode-212bd5bf-0] button[s\\:unicode-212bd5bf-0]:focus{outline:1px solid rgba(0,0,255,.443)}.encoding-type[s\\:unicode-212bd5bf-0] .active[s\\:unicode-212bd5bf-0]{opacity:.95;background-color:rgba(128,128,128,.098)}";function Si(e){const t=m(()=>xn(e.codepoint)),n=m(()=>be()==="dec"?[["UTF-8",t().utf8,8],["UTF-16",t().utf16BE,16]]:[["UTF-8",t().utf8,8],["UTF-16 BE",t().utf16BE,16],["UTF-16 LE",t().utf16LE,16]]);return $(xi,1,wi),[bi(),(()=>{var r=mi(),i=r.firstChild,o=i.firstChild,a=o.firstChild,c=a.nextSibling,s=c.firstChild,l=i.nextSibling;return u(s,g(T,{each:_i,children:f=>(()=>{var d=pi();return d.$$click=()=>bn(f),u(d,f),v(()=>U(d,be()===f?"active":"")),d})()})),u(l,g(T,{get each(){return n()},children:([f,d,b])=>(()=>{var y=vi(),w=y.firstChild,L=w.nextSibling;return u(w,f),u(L,g(T,{get each(){return Array.from(d)},children:A=>(()=>{var M=yi();return v(()=>M.innerHTML=$i(A,be(),b)),M})()})),y})()})),r})()]}E(["click"]);var Ci=h("<br>"),ki=h("<table><thead><tr><th class=title colspan=2>Number Equivalent</th></tr></thead><tbody>"),Ei=h("<tr><td></td><td>");function Li(e){const t=m(()=>Object.entries({digitEquiv:e.digitEquiv,numericEquiv:e.numericEquiv,decimalEquiv:e.decimalEquiv}).filter(([,n])=>n));return g(N,{get when(){return t().length},get children(){return[Ci(),(()=>{var n=ki(),r=n.firstChild,i=r.nextSibling;return u(i,g(T,{get each(){return t()},children:([o,a])=>(()=>{var c=Ei(),s=c.firstChild,l=s.nextSibling;return u(s,o),u(l,a),c})()})),n})()]}})}var Mi=h("<br s:unicode-acfcee80-0>"),Pi=h("<table s:unicode-acfcee80-0><thead s:unicode-acfcee80-0><tr s:unicode-acfcee80-0><th class=title colspan=2 s:unicode-acfcee80-0>Html Entities</th></tr></thead><tbody s:unicode-acfcee80-0><tr s:unicode-acfcee80-0><td s:unicode-acfcee80-0>Hex</td><td s:unicode-acfcee80-0>&#x<!>;</td></tr><tr s:unicode-acfcee80-0><td s:unicode-acfcee80-0>Dec</td><td s:unicode-acfcee80-0>&#<!>;"),Ai=h("<tr s:unicode-acfcee80-0><td s:unicode-acfcee80-0>Named</td><td s:unicode-acfcee80-0>&<!>;");const Ni="unicode-acfcee80-0",Ti="th[s\\:unicode-acfcee80-0]{text-align:left;color:var(--primary-text);padding-bottom:6px;font-weight:400}tbody[s\\:unicode-acfcee80-0] tr[s\\:unicode-acfcee80-0]:nth-child(odd){background-color:var(--bg-offset)}td[s\\:unicode-acfcee80-0]{padding:6px}td[s\\:unicode-acfcee80-0]:first-child{padding-right:30px}";function Ii(e){return $(Ni,1,Ti),[Mi(),(()=>{var t=Pi(),n=t.firstChild,r=n.nextSibling,i=r.firstChild,o=i.firstChild,a=o.nextSibling,c=a.firstChild,s=c.nextSibling;s.nextSibling;var l=i.nextSibling,f=l.firstChild,d=f.nextSibling,b=d.firstChild,y=b.nextSibling;return y.nextSibling,u(r,g(T,{get each(){return e.names},children:w=>(()=>{var L=Ai(),A=L.firstChild,M=A.nextSibling,P=M.firstChild,C=P.nextSibling;return C.nextSibling,u(M,w,C),L})()}),i),u(a,()=>e.codepoint.toString(16).padStart(5,"0"),s),u(d,()=>e.codepoint,y),t})()]}var Oi=h("<h3 s:unicode-2d80b4ef-0>Properties"),Di=h("<div class=properties s:unicode-2d80b4ef-0>"),Ri=h("<span s:unicode-2d80b4ef-0>");const Bi="unicode-2d80b4ef-0",Ui="h3[s\\:unicode-2d80b4ef-0]{color:var(--primary-text);padding-bottom:6px;font-size:1rem;font-weight:400}.properties[s\\:unicode-2d80b4ef-0]{text-align:left;flex-wrap:wrap;gap:5px;width:100%;display:flex}.properties[s\\:unicode-2d80b4ef-0] span[s\\:unicode-2d80b4ef-0]{background:var(--bg-offset);border-radius:4px;padding:2px 8px}";function Fi(e){return $(Bi,1,Ui),[Oi(),(()=>{var t=Di();return u(t,g(T,{get each(){return e.properties},children:n=>(()=>{var r=Ri();return u(r,n),r})()})),t})()]}var ji=h("<div class=container s:unicode-53b461cc-0><header s:unicode-53b461cc-0><h1 s:unicode-53b461cc-0></h1><div class=display-box s:unicode-53b461cc-0><span s:unicode-53b461cc-0></span></div></header><table class=basic-info s:unicode-53b461cc-0><tbody s:unicode-53b461cc-0></tbody></table><br s:unicode-53b461cc-0>"),zi=h("<tr s:unicode-53b461cc-0><td s:unicode-53b461cc-0></td><td s:unicode-53b461cc-0>");const Hi="unicode-53b461cc-0",Vi="div[s\\:unicode-53b461cc-0].container{border-radius:8px;padding:20px}.basic-info[s\\:unicode-53b461cc-0]{display:grid}td[s\\:unicode-53b461cc-0]{padding:5px}td[s\\:unicode-53b461cc-0]:first-child{font-weight:700}tr[s\\:unicode-53b461cc-0]:nth-child(odd){background-color:var(--bg-offset)}h1[s\\:unicode-53b461cc-0]{text-align:center}.display-box[s\\:unicode-53b461cc-0]{background-color:var(--bg-offset);border:1px solid gray;justify-content:center;align-items:center;width:64px;height:64px;margin:12px 0;font-size:3em;display:flex}header[s\\:unicode-53b461cc-0]{flex-direction:column;align-items:center;display:flex}";function qi(e){const t=m(()=>`${e.info.category} (${sn[e.info.category]})`),n=m(()=>an(ke(),e.codepoint)),r=m(()=>on(e.codepoint)),i=m(()=>e.info.decompositionStr?cn(e.info.decompositionStr):null),o=m(()=>i()!=null?`<${i().type}> ${i().codepoints.join(" ")}`:""),a=m(()=>[["Bidi Class",`${e.info.bidiClass} (${tt.get(e.info.bidiClass)})`],!!e.info.oldName&&e.info.oldName!==e.name&&["Old Name",e.info.oldName],["Codepoint",e.codepoint],["Category",t()],!!o()&&["Decomposition",o()],["Plane",r().name?`${r().name} (Plane ${r().number}) `:`Plane ${r().number}`],["Block",`${n().name} (Range ${n().range[0]}-${n().range[1]}) `]].filter(Boolean)),c=m(()=>rn(String.fromCodePoint(e.codepoint))),s=m(()=>mn().get(e.codepoint)??[]);return $(Hi,1,Vi),(()=>{var l=ji(),f=l.firstChild,d=f.firstChild,b=d.nextSibling,y=b.firstChild,w=f.nextSibling,L=w.firstChild,A=w.nextSibling;return u(d,()=>e.name),u(y,()=>String.fromCodePoint(e.codepoint)),u(L,g(T,{get each(){return a()},children:([M,P])=>(()=>{var C=zi(),I=C.firstChild,F=I.nextSibling;return u(I,M),u(F,P),C})()})),u(l,g(Ii,{get codepoint(){return e.codepoint},get names(){return s()}}),A),u(l,g(gi,{get lowercaseMapping(){return e.info.lowercaseMapping},get titlecaseMapping(){return e.info.titlecaseMapping},get uppercaseMapping(){return e.info.uppercaseMapping}}),A),u(l,g(Li,{get digitEquiv(){return e.info.digitEquiv},get numericEquiv(){return e.info.numericEquiv},get decimalEquiv(){return e.info.decimalEquiv}}),A),u(l,g(Si,{get codepoint(){return e.codepoint}}),A),u(l,g(Fi,{get properties(){return c()}}),null),v(M=>z(l,`--item-num: ${Math.ceil(c().length/2)}`,M)),l})()}var Gi=h("<aside s:unicode-58c7dde3-0><div s:unicode-58c7dde3-0>"),Ki=h("<aside s:unicode-58c7dde3-0>"),Wi=h("<div s:unicode-58c7dde3-0><div s:unicode-58c7dde3-0><main s:unicode-58c7dde3-0><div class=searchbox s:unicode-58c7dde3-0></div><br s:unicode-58c7dde3-0>"),Zi=h("<br s:unicode-58c7dde3-0>"),Xi=h("<p s:unicode-58c7dde3-0>No results fit that query :/");const Yi="unicode-58c7dde3-0",Ji="body{overflow-y:scroll}main[s\\:unicode-58c7dde3-0]{text-align:center;width:600px;max-width:100%;margin:0 auto}@media (width>=640px){main[s\\:unicode-58c7dde3-0]{max-width:none}}.content[s\\:unicode-58c7dde3-0].middle{grid-template-columns:minmax(500px,auto) 600px 500px;justify-content:center;display:grid}@media (width<=1600px){.content[s\\:unicode-58c7dde3-0].middle{grid-template-columns:minmax(500px,auto) 600px;display:grid}}aside[s\\:unicode-58c7dde3-0] div[s\\:unicode-58c7dde3-0]{width:400px;height:100vh;position:fixed;overflow-y:auto}";function Qi(){return Q(()=>{Wt(()=>import("./queryProxy-BiNkDmOk.js"),[])}),$(Yi,1,Ji),(()=>{var e=Wi(),t=e.firstChild,n=t.firstChild,r=n.firstChild;return r.nextSibling,u(e,g(N,{get when(){return V()},get children(){var i=Gi(),o=i.firstChild;return u(o,g(qi,{get codepoint(){return V().codepoint},get info(){return V()},get name(){return V().label}})),i}}),t),u(t,g(er,{}),n),u(t,g(_n,{href:"https://github.com/EmNudge/unicode-lookup"}),n),u(r,g(N,{get when(){return W()==="simple"},get fallback(){return g(oi,{})},get children(){return g(Bn,{})}})),u(n,g(N,{get when(){return we()},get fallback(){return g(di,{})},get children(){return g(N,{get when(){return R().length},get fallback(){return[Zi(),Xi()]},get children(){return g(An,{})}})}}),null),u(e,g(N,{get when(){return V()},get children(){return Ki()}}),null),v(()=>U(e,`content ${V()?"middle":""}`)),e})()}It(()=>g(Qi,{}),document.getElementById("app"));export{Ie as a,De as b,no as c,ro as d,io as e,eo as p,to as s};
diff --git a/dist/assets/index-BssihU6-.js b/dist/assets/index-BssihU6-.js
deleted file mode 100644
index f8f400e..0000000
--- a/dist/assets/index-BssihU6-.js
+++ /dev/null
@@ -1,4 +0,0 @@
-(function(){"use strict";function w(n,r){r=r.map(e=>{if(e.type!=="name"&&e.type!=="character")return e;const t=e.value?.match(/^\/(.+)\/[a-z]*$/);if(!t)return e;const o=new RegExp(t[1],"ui");return{...e,value:o}});let a=[...n.unicodeData.values()];for(const e of r)a=a.filter(t=>{if(e.type==="name")return typeof e.value=="string"?e.negated?!t.label.includes(e.value):t.label.includes(e.value):e.negated?!e.value.test(t.label):e.value.test(t.label);if(e.type==="character"){const o=String.fromCodePoint(t.codepoint);return e.negated?!e.value.test(o):e.value.test(o)}if(e.type==="range"){const[o,i]=e.value;return e.negated?!(t.codepoint>=o&&t.codepoint<=i):t.codepoint>=o&&t.codepoint<=i}if(e.type==="bidi")return e.negated?t.bidiClass!==e.value:t.bidiClass===e.value;throw new Error(`Unknown filter type: ${e.type}`)});return a}function M(n){const r=n.split(`
-`).map(a=>{const[e,t,o,i,s,d,u,f,q,R,k,U,g,y,b]=a.split(";"),v=parseInt(e,16),x={codepoint:v,label:t.toLowerCase(),category:o,combiningClass:parseInt(i),bidiClass:s,decompositionStr:d||null,decimalEquiv:u?parseInt(u):null,digitEquiv:f?parseInt(f):null,numericEquiv:q||null,isBidiMirrored:R==="Y",oldName:k||null,uppercaseMapping:g?parseInt(g,16):null,lowercaseMapping:y?parseInt(y,16):null,titlecaseMapping:b?parseInt(b,16):null};return[v,x]});return new Map(r)}function h(n){const r=n.split(`
-`).map(a=>{const[e,t]=a.split("; "),[o,i]=e.split(".."),s={name:t,range:[parseInt(o,16),parseInt(i,16)]};return[t,s]});return new Map(r)}function I(n){const r=n.split(`
-`).map(a=>{const[e,t]=a.split(";");return[parseInt(e,16),t.split(",")]});return new Map(r)}function S({blocks:n,unicodeData:r,symbolHtmlNames:a}){return{unicodeBlocks:h(n),unicodeData:M(r),symbolHtmlNames:I(a)}}function l(n){return/^[0-9]+$/.test(n)?Number(n):/^(?:0x|U\+)[0-9a-f]+$/i.test(n)?parseInt(n.slice(2),16):/^0b[10]+$/.test(n)?parseInt(n.slice(2),2):null}function E(n){const r=n.split("-");if(r.length!==2)return null;const a=l(r[0].trim());if(!a)return null;const e=l(r[1].trim());return e?[a,e]:null}function C(n){if(!n.includes("*")||!/^[a-zA-Z-* ]+$/.test(n))return null;const r=n.replace(/\*/g,".*");return new RegExp(r,"i")}var m=(n,r)=>[...n.unicodeData.values()].find(a=>a.codepoint===r);function D(n,r){const a=l(r);if(a!==null){const i=m(n,a);return i?[i]:[]}if([...r].length===1){const i=m(n,r.codePointAt(0));return i?[i]:[]}const e=E(r);if(e)return[...n.unicodeData.values()].filter(({codepoint:i})=>i>=e[0]&&i<=e[1]);const t=C(r.trim());if(t)return[...n.unicodeData.values()].filter(({label:i})=>t.test(i));const o=r.match(/\/(.+?)\/([a-z]+)?/);if(o){const{1:i,2:s}=o,d=new RegExp(i,/i/i.test(s)?"ui":"u");return[...n.unicodeData.values()].filter(({codepoint:u})=>d.test(String.fromCodePoint(u)))}return[...n.unicodeData.values()].filter(({label:i})=>i.includes(r))}let c=null;async function p(){if(!c){const[n,r,a]=await Promise.all(["/UnicodeBlocks.txt","/UnicodeData.txt","/SymbolHtmlNames.txt"].map(e=>fetch(e).then(t=>t.text())));c=S({blocks:n,unicodeData:r,symbolHtmlNames:a})}return c}const N=async n=>{const{name:r}=n;if(n.name==="load-table")return await p();if(n.name==="simple-query"){const a=await p(),{payload:e}=n;return D(a,e).map(t=>[t.codepoint,t])}if(r==="advanced-query"){const a=await p(),{payload:e}=n;return w(a,e).map(t=>[t.codepoint,t])}};addEventListener("message",async n=>{self.postMessage({id:n.data.id,payload:await N(n.data)})})})();
diff --git a/dist/assets/index-rClAvo4-.css b/dist/assets/index-rClAvo4-.css
deleted file mode 100644
index ddf6630..0000000
--- a/dist/assets/index-rClAvo4-.css
+++ /dev/null
@@ -1 +0,0 @@
-:root{--hue: 200;--hsl-lightness: 39%;--hsl-bg-lightness: 95%;--color-primary: hsl(var(--hue), 66%, var(--hsl-lightness));--color-primary-bg: hsl(var(--hue), 100%, var(--hsl-bg-lightness));--color-primary-hover: hsl(var(--hue), 70%, calc(var(--hsl-lightness) - 5%));--color-primary-active: hsl(var(--hue), 75%, calc(var(--hsl-lightness) - 10%));--hsl: var(--color-primary);--hsl-bg: var(--color-primary-bg);--primary-text: #584ca4;--color-bg: #e0e9f8;--color-bg-offset: white;--color-bg-elevated: white;--color-bg-input: white;--color-text: #30354b;--color-text-secondary: #4b558c;--color-text-tertiary: #6b7099;--color-text-primary: #584ca4;--bg-col: var(--color-bg);--color: var(--color-text);--label-color: var(--color-text-secondary);--bg-offset: var(--color-bg-offset);--color-success: hsl(140, 60%, 45%);--color-success-bg: hsl(140, 60%, 95%);--color-success-border: hsl(140, 60%, 40%);--color-warning: hsl(40, 90%, 50%);--color-warning-bg: hsl(40, 90%, 95%);--color-warning-border: hsl(40, 90%, 45%);--color-error: hsl(0, 70%, 50%);--color-error-bg: hsl(0, 70%, 95%);--color-error-border: hsl(0, 70%, 45%);--color-info: hsl(210, 80%, 55%);--color-info-bg: hsl(210, 80%, 95%);--color-info-border: hsl(210, 80%, 50%);--color-border: #ccc;--color-border-focus: #a5b5ff;--color-border-error: var(--color-error);--color-shadow: rgba(0, 0, 0, .09);--color-shadow-elevated: rgba(0, 0, 0, .12);--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--line-height-loose: 2;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--border-width-0: 0;--border-width-1: 1px;--border-width-2: 2px;--border-width-4: 4px;--radius-none: 0;--radius-sm: 2px;--radius-base: 3px;--radius-md: 4px;--radius-lg: 6px;--radius-xl: 8px;--radius-2xl: 12px;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 var(--color-shadow);--shadow-sm: 0px 4px 3px 0px var(--color-shadow);--shadow-base: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-md: 0 10px 15px -3px var(--color-shadow), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 20px 25px -5px var(--color-shadow), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-xl: 0 25px 50px -12px var(--color-shadow);--shadow-input-focus: -3px 4px 2px rgba(137, 74, 255, .06);--duration-fast: .1s;--duration-base: .15s;--duration-medium: .25s;--duration-slow: .35s;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--transition-colors: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);--transition-transform: transform var(--duration-base) var(--ease-out);--transition-all: all var(--duration-base) var(--ease-out);--z-base: 0;--z-dropdown: 10;--z-sticky: 20;--z-fixed: 30;--z-modal-backdrop: 40;--z-modal: 50;--z-popover: 60;--z-tooltip: 70;--z-notification: 80;--size-input-height-sm: 2rem;--size-input-height-base: 2.5rem;--size-input-height-lg: 3rem;--size-button-height-sm: 2rem;--size-button-height-base: 2.5rem;--size-button-height-lg: 3rem;--container-sm: 640px;--container-md: 768px;--container-lg: 1024px;--container-xl: 1280px}:root[data-theme=light]{--color-bg: #e0e9f8;--color-bg-offset: white;--color-bg-elevated: white;--color-bg-input: white;--color-text: #30354b;--color-text-secondary: #4b558c;--color-text-tertiary: #6b7099;--color-text-primary: #584ca4;--hsl-lightness: 39%;--hsl-bg-lightness: 95%;--primary-text: #584ca4;--color-border: #ccc;--color-shadow: rgba(0, 0, 0, .09);--color-shadow-elevated: rgba(0, 0, 0, .12);--bg-col: #e0e9f8;--color: #30354b;--label-color: #4b558c;--bg-offset: white}:root[data-theme=dark]{--color-bg: #19191c;--color-bg-offset: #363343;--color-bg-elevated: #2a2a2e;--color-bg-input: #151515;--color-text: #d3d6e3;--color-text-secondary: #9da6dd;--color-text-tertiary: #7b84b3;--color-text-primary: #a89ee6;--hsl-lightness: 50%;--hsl-bg-lightness: 5%;--primary-text: #a89ee6;--color-border: #6b6b6b;--color-border-focus: #8a9aff;--color-shadow: rgba(0, 0, 0, .43);--color-shadow-elevated: rgba(0, 0, 0, .6);--color-success: hsl(140, 50%, 55%);--color-success-bg: hsl(140, 40%, 20%);--color-success-border: hsl(140, 50%, 50%);--color-warning: hsl(40, 85%, 60%);--color-warning-bg: hsl(40, 60%, 25%);--color-warning-border: hsl(40, 85%, 55%);--color-error: hsl(0, 65%, 60%);--color-error-bg: hsl(0, 50%, 25%);--color-error-border: hsl(0, 65%, 55%);--color-info: hsl(210, 75%, 65%);--color-info-bg: hsl(210, 60%, 25%);--color-info-border: hsl(210, 75%, 60%);--bg-col: #19191c;--color: #d3d6e3;--label-color: #9da6dd;--bg-offset: #363343}@media(prefers-color-scheme:dark){:root{--color-bg: #19191c;--color-bg-offset: #363343;--color-bg-elevated: #2a2a2e;--color-bg-input: #151515;--color-text: #d3d6e3;--color-text-secondary: #9da6dd;--color-text-tertiary: #7b84b3;--color-text-primary: #a89ee6;--hsl-lightness: 50%;--hsl-bg-lightness: 5%;--primary-text: #a89ee6;--color-border: #6b6b6b;--color-border-focus: #8a9aff;--color-shadow: rgba(0, 0, 0, .43);--color-shadow-elevated: rgba(0, 0, 0, .6);--color-success: hsl(140, 50%, 55%);--color-success-bg: hsl(140, 40%, 20%);--color-success-border: hsl(140, 50%, 50%);--color-warning: hsl(40, 85%, 60%);--color-warning-bg: hsl(40, 60%, 25%);--color-warning-border: hsl(40, 85%, 55%);--color-error: hsl(0, 65%, 60%);--color-error-bg: hsl(0, 50%, 25%);--color-error-border: hsl(0, 65%, 55%);--color-info: hsl(210, 75%, 65%);--color-info-bg: hsl(210, 60%, 25%);--color-info-border: hsl(210, 75%, 60%);--bg-col: #19191c;--color: #d3d6e3;--label-color: #9da6dd;--bg-offset: #363343}}html,body{position:relative;width:100%;height:100%}body{color:var(--color-text);background:var(--color-bg);transition:background var(--duration-base),color var(--duration-fast);margin:0;padding:var(--space-2);box-sizing:border-box;font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-normal);overflow-y:scroll}*{margin:0}a{color:#0064c8;text-decoration:none;transition:var(--transition-colors)}a:hover{text-decoration:underline}a:visited{color:#0050a0}label{display:block;color:var(--color-text-secondary)}input,button,select,textarea{font-family:inherit;font-size:inherit;padding:.4em 1em;margin:0 0 .5em;box-sizing:border-box;border:var(--border-width-1) solid var(--color-border);border-radius:var(--radius-sm);transition:var(--transition-colors)}input::placeholder{color:inherit;opacity:.5}input:disabled{color:#ccc;opacity:.6}input[type=range]{height:0}button{color:var(--color-text);background-color:#f4f4f4;outline:none;cursor:pointer}button:disabled{color:#999;cursor:not-allowed;opacity:.6}button:not(:disabled):active{background-color:#ddd}button:focus{border-color:#666}button.underline-btn{border:none;padding:0;margin:0;background:0;text-decoration:underline;cursor:pointer}.styled{--hsl: hsl(var(--hue), 66%, var(--hsl-lightness));--hsl-bg: hsl(var(--hue), 100%, var(--hsl-bg-lightness));color:var(--hsl);background:var(--hsl-bg);transition:background var(--duration-medium),color var(--duration-fast);border:var(--border-width-1) solid var(--hsl);border-radius:var(--radius-base)}.styled:hover:not(:disabled){filter:brightness(.95)}.styled:active:not(:disabled){transform:scale(.98)}
diff --git a/dist/assets/queryProxy-BiNkDmOk.js b/dist/assets/queryProxy-BiNkDmOk.js
deleted file mode 100644
index b619a40..0000000
--- a/dist/assets/queryProxy-BiNkDmOk.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{s as r,a as c,b as i,c as m,p as l,d as p,e as k}from"./index-BILrXVKr.js";function u(e){return new Worker("/assets/index-BssihU6-.js",{name:e?.name})}async function S(){const s=await(await fetch("/UnicodeBlocks.txt")).text(),t=l(s);p(t)}S();async function d(){const s=(await fetch("/SymbolHtmlNames.txt").then(t=>t.text())).split(`
-`).map(t=>{const[n,o]=t.split(";");return[parseInt(n,16),o.split(",")]});k(new Map(s))}d();const a=new u;r(a);c(a,{name:"loadTable"}).then(()=>{i(!0),m(!0)});
diff --git a/dist/index.html b/dist/index.html
index 56ac70a..7f24ac7 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="manifest" href="/manifest.json" />
     <title>Unicode Lookup</title>
-    <script type="module" crossorigin src="/assets/index-BILrXVKr.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-rClAvo4-.css">
+    <script type="module" crossorigin src="/assets/index-BW8to3cp.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CtjIMKUN.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/index.html b/index.html
index 0ee1229..46d5de7 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index a80a459..82ee390 100644
--- a/package.json
+++ b/package.json
@@ -7,23 +7,21 @@
 		"dev": "vite",
 		"build": "vite build",
 		"preview": "vite preview",
-		"typecheck": "tsc --noEmit",
+		"typecheck": "vue-tsc --noEmit",
 		"format": "oxfmt --write src",
 		"lint": "oxfmt --check src && oxlint src"
 	},
 	"dependencies": {
 		"@emnudge/unicode-query": "^0.0.1",
-		"solid-js": "^1.9.5",
-		"solid-styled": "^0.12.0",
-		"solid-icons": "^1.1.0"
+		"vue": "^3.5.0"
 	},
 	"devDependencies": {
+		"@vitejs/plugin-vue": "^5.0.0",
 		"oxfmt": "^0.28.0",
 		"oxlint": "^0.16.0",
 		"typescript": "^5.0.0",
-		"unplugin-solid-styled": "^0.12.0",
-		"vite": "^7.3.0",
-		"vite-plugin-solid": "^2.11.2"
+		"rolldown-vite": "^7.3.0",
+		"vue-tsc": "^2.0.0"
 	},
 	"pnpm": {
 		"onlyBuiltDependencies": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da33030..534b495 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,79 +11,31 @@ importers:
       '@emnudge/unicode-query':
         specifier: ^0.0.1
         version: 0.0.1
-      solid-icons:
-        specifier: ^1.1.0
-        version: 1.2.0(solid-js@1.9.11)
-      solid-js:
-        specifier: ^1.9.5
-        version: 1.9.11
-      solid-styled:
-        specifier: ^0.12.0
-        version: 0.12.0(solid-js@1.9.11)
+      vue:
+        specifier: ^3.5.0
+        version: 3.5.27(typescript@5.9.3)
     devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: ^5.0.0
+        version: 5.2.4(vite@7.3.0(lightningcss@1.31.1))(vue@3.5.27(typescript@5.9.3))
       oxfmt:
         specifier: ^0.28.0
         version: 0.28.0
       oxlint:
         specifier: ^0.16.0
         version: 0.16.12
+      rolldown-vite:
+        specifier: ^7.3.0
+        version: 7.3.1(esbuild@0.27.2)
       typescript:
         specifier: ^5.0.0
         version: 5.9.3
-      unplugin-solid-styled:
-        specifier: ^0.12.0
-        version: 0.12.0(rollup@4.54.0)(solid-styled@0.12.0(solid-js@1.9.11))(vite@7.3.0(lightningcss@1.31.1))
-      vite:
-        specifier: ^7.3.0
-        version: 7.3.0(lightningcss@1.31.1)
-      vite-plugin-solid:
-        specifier: ^2.11.2
-        version: 2.11.10(solid-js@1.9.11)(vite@7.3.0(lightningcss@1.31.1))
+      vue-tsc:
+        specifier: ^2.0.0
+        version: 2.2.12(typescript@5.9.3)
 
 packages:
 
-  '@babel/code-frame@7.29.0':
-    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/compat-data@7.29.0':
-    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/core@7.29.0':
-    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/generator@7.29.0':
-    resolution: {integrity: sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-compilation-targets@7.28.6':
-    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.18.6':
-    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.28.6':
-    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-transforms@7.28.6':
-    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
-  '@babel/helper-plugin-utils@7.28.6':
-    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -92,36 +44,23 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.27.1':
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helpers@7.28.6':
-    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/parser@7.29.0':
     resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-syntax-jsx@7.28.6':
-    resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
 
-  '@babel/template@7.28.6':
-    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/core@1.8.1':
+    resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
 
-  '@babel/traverse@7.29.0':
-    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/runtime@1.8.1':
+    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
 
-  '@babel/types@7.29.0':
-    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
-    engines: {node: '>=6.9.0'}
+  '@emnapi/wasi-threads@1.1.0':
+    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
   '@emnudge/unicode-query@0.0.1':
     resolution: {integrity: sha512-CHsoZCtQE+FsGJkpSoaMU554Q/EZXctQe/sf05AC4afMCr52ppFzUXLcjj1ceOJwGyAiUsHJicuqNZFKPWHOZA==}
@@ -282,21 +221,18 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@jridgewell/gen-mapping@0.3.13':
-    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
-
-  '@jridgewell/remapping@2.3.5':
-    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
-
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@jridgewell/trace-mapping@0.3.31':
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+  '@napi-rs/wasm-runtime@1.1.1':
+    resolution: {integrity: sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==}
+
+  '@oxc-project/runtime@0.101.0':
+    resolution: {integrity: sha512-t3qpfVZIqSiLQ5Kqt/MC4Ge/WCOGrrcagAdzTcDaggupjiGxUx4nJF2v6wUCXWSzWHn5Ns7XLv13fCJEwCOERQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  '@oxc-project/types@0.101.0':
+    resolution: {integrity: sha512-nuFhqlUzJX+gVIPPfuE6xurd4lST3mdcWOhyK/rZO0B9XWMKm79SuszIQEnSMmmDhq1DC8WWVYGVd+6F93o1gQ==}
 
   '@oxfmt/darwin-arm64@0.28.0':
     resolution: {integrity: sha512-jmUfF7cNJPw57bEK7sMIqrYRgn4LH428tSgtgLTCtjuGuu1ShREyrkeB7y8HtkXRfhBs4lVY+HMLhqElJvZ6ww==}
@@ -378,14 +314,85 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rollup/pluginutils@5.3.0':
-    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+  '@rolldown/binding-android-arm64@1.0.0-beta.53':
+    resolution: {integrity: sha512-Ok9V8o7o6YfSdTTYA/uHH30r3YtOxLD6G3wih/U9DO0ucBBFq8WPt/DslU53OgfteLRHITZny9N/qCUxMf9kjQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.53':
+    resolution: {integrity: sha512-yIsKqMz0CtRnVa6x3Pa+mzTihr4Ty+Z6HfPbZ7RVbk1Uxnco4+CUn7Qbm/5SBol1JD/7nvY8rphAgyAi7Lj6Vg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.0-beta.53':
+    resolution: {integrity: sha512-GTXe+mxsCGUnJOFMhfGWmefP7Q9TpYUseHvhAhr21nCTgdS8jPsvirb0tJwM3lN0/u/cg7bpFNa16fQrjKrCjQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.53':
+    resolution: {integrity: sha512-9Tmp7bBvKqyDkMcL4e089pH3RsjD3SUungjmqWtyhNOxoQMh0fSmINTyYV8KXtE+JkxYMPWvnEt+/mfpVCkk8w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.53':
+    resolution: {integrity: sha512-a1y5fiB0iovuzdbjUxa7+Zcvgv+mTmlGGC4XydVIsyl48eoxgaYkA3l9079hyTyhECsPq+mbr0gVQsFU11OJAQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.53':
+    resolution: {integrity: sha512-bpIGX+ov9PhJYV+wHNXl9rzq4F0QvILiURn0y0oepbQx+7stmQsKA0DhPGwmhfvF856wq+gbM8L92SAa/CBcLg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.53':
+    resolution: {integrity: sha512-bGe5EBB8FVjHBR1mOLOPEFg1Lp3//7geqWkU5NIhxe+yH0W8FVrQ6WRYOap4SUTKdklD/dC4qPLREkMMQ855FA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.53':
+    resolution: {integrity: sha512-qL+63WKVQs1CMvFedlPt0U9PiEKJOAL/bsHMKUDS6Vp2Q+YAv/QLPu8rcvkfIMvQ0FPU2WL0aX4eWwF6e/GAnA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.53':
+    resolution: {integrity: sha512-VGl9JIGjoJh3H8Mb+7xnVqODajBmrdOOb9lxWXdcmxyI+zjB2sux69br0hZJDTyLJfvBoYm439zPACYbCjGRmw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.53':
+    resolution: {integrity: sha512-B4iIserJXuSnNzA5xBLFUIjTfhNy7d9sq4FUMQY3GhQWGVhS2RWWzzDnkSU6MUt7/aHUrep0CdQfXUJI9D3W7A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.53':
+    resolution: {integrity: sha512-BUjAEgpABEJXilGq/BPh7jeU3WAJ5o15c1ZEgHaDWSz3LB881LQZnbNJHmUiM4d1JQWMYYyR1Y490IBHi2FPJg==}
     engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.53':
+    resolution: {integrity: sha512-s27uU7tpCWSjHBnxyVXHt3rMrQdJq5MHNv3BzsewCIroIw3DJFjMH1dzCPPMUFxnh1r52Nf9IJ/eWp6LDoyGcw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.53':
+    resolution: {integrity: sha512-cjWL/USPJ1g0en2htb4ssMjIycc36RvdQAx1WlXnS6DpULswiUTVXPDesTifSKYSyvx24E0YqQkEm0K/M2Z/AA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.0-beta.53':
+    resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
 
   '@rollup/rollup-android-arm-eabi@4.54.0':
     resolution: {integrity: sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==}
@@ -497,83 +504,89 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@types/babel__core@7.20.5':
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
-  '@types/babel__generator@7.27.0':
-    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  '@types/babel__template@7.4.4':
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+  '@vitejs/plugin-vue@5.2.4':
+    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.2.25
 
-  '@types/babel__traverse@7.28.0':
-    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+  '@volar/language-core@2.4.15':
+    resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
 
-  '@types/css-tree@2.3.11':
-    resolution: {integrity: sha512-aEokibJOI77uIlqoBOkVbaQGC9zII0A+JH1kcTNKW2CwyYWD8KM6qdo+4c77wD3wZOQfJuNWAr9M4hdk+YhDIg==}
+  '@volar/source-map@2.4.15':
+    resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
 
-  '@types/estree@1.0.8':
-    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+  '@volar/typescript@2.4.15':
+    resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
 
-  acorn@8.15.0:
-    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
+  '@vue/compiler-core@3.5.27':
+    resolution: {integrity: sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==}
 
-  babel-plugin-jsx-dom-expressions@0.40.3:
-    resolution: {integrity: sha512-5HOwwt0BYiv/zxl7j8Pf2bGL6rDXfV6nUhLs8ygBX+EFJXzBPHM/euj9j/6deMZ6wa52Wb2PBaAV5U/jKwIY1w==}
-    peerDependencies:
-      '@babel/core': ^7.20.12
+  '@vue/compiler-dom@3.5.27':
+    resolution: {integrity: sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==}
+
+  '@vue/compiler-sfc@3.5.27':
+    resolution: {integrity: sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==}
 
-  babel-preset-solid@1.9.10:
-    resolution: {integrity: sha512-HCelrgua/Y+kqO8RyL04JBWS/cVdrtUv/h45GntgQY+cJl4eBcKkCDV3TdMjtKx1nXwRaR9QXslM/Npm1dxdZQ==}
+  '@vue/compiler-ssr@3.5.27':
+    resolution: {integrity: sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==}
+
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
+  '@vue/language-core@2.2.12':
+    resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==}
     peerDependencies:
-      '@babel/core': ^7.0.0
-      solid-js: ^1.9.10
+      typescript: '*'
     peerDependenciesMeta:
-      solid-js:
+      typescript:
         optional: true
 
-  baseline-browser-mapping@2.9.19:
-    resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
-    hasBin: true
+  '@vue/reactivity@3.5.27':
+    resolution: {integrity: sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==}
 
-  browserslist@4.28.1:
-    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
+  '@vue/runtime-core@3.5.27':
+    resolution: {integrity: sha512-fxVuX/fzgzeMPn/CLQecWeDIFNt3gQVhxM0rW02Tvp/YmZfXQgcTXlakq7IMutuZ/+Ogbn+K0oct9J3JZfyk3A==}
+
+  '@vue/runtime-dom@3.5.27':
+    resolution: {integrity: sha512-/QnLslQgYqSJ5aUmb5F0z0caZPGHRB8LEAQ1s81vHFM5CBfnun63rxhvE/scVb/j3TbBuoZwkJyiLCkBluMpeg==}
+
+  '@vue/server-renderer@3.5.27':
+    resolution: {integrity: sha512-qOz/5thjeP1vAFc4+BY3Nr6wxyLhpeQgAE/8dDtKo6a6xdk+L4W46HDZgNmLOBUDEkFXV3G7pRiUqxjX0/2zWA==}
+    peerDependencies:
+      vue: 3.5.27
+
+  '@vue/shared@3.5.27':
+    resolution: {integrity: sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==}
 
-  caniuse-lite@1.0.30001767:
-    resolution: {integrity: sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==}
+  alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
 
-  convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  css-tree@3.1.0:
-    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
 
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
-  debug@4.4.3:
-    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
-  electron-to-chromium@1.5.283:
-    resolution: {integrity: sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w==}
-
-  entities@6.0.1:
-    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
 
   esbuild@0.27.2:
@@ -581,10 +594,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
-
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -602,28 +611,8 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
-  gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-
-  html-entities@2.3.3:
-    resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
-
-  is-what@4.1.16:
-    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
-    engines: {node: '>=12.13'}
-
-  js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-
-  jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
-    hasBin: true
-
-  json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
   lightningcss-android-arm64@1.31.1:
@@ -696,27 +685,21 @@ packages:
     resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
     engines: {node: '>= 12.0.0'}
 
-  lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
-  mdn-data@2.12.2:
-    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
-  merge-anything@5.1.7:
-    resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
-    engines: {node: '>=12.13'}
-
-  ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  node-releases@2.0.27:
-    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
-
   oxfmt@0.28.0:
     resolution: {integrity: sha512-3+hhBqPE6Kp22KfJmnstrZbl+KdOVSEu1V0ABaFIg1rYLtrMgrupx9znnHgHLqKxAVHebjTdiCJDk30CXOt6cw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -727,8 +710,8 @@ packages:
     engines: {node: '>=8.*'}
     hasBin: true
 
-  parse5@7.3.0:
-    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
@@ -741,43 +724,55 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  rollup@4.54.0:
-    resolution: {integrity: sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==}
-    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
-    hasBin: true
-
-  semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+  rolldown-vite@7.3.1:
+    resolution: {integrity: sha512-LYzdNAjRHhF2yA4JUQm/QyARyi216N2rpJ0lJZb8E9FU2y5v6Vk+xq/U4XBOxMefpWixT5H3TslmAHm1rqIq2w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
-
-  seroval-plugins@1.5.0:
-    resolution: {integrity: sha512-EAHqADIQondwRZIdeW2I636zgsODzoBDwb3PT/+7TLDWyw1Dy/Xv7iGUIEXXav7usHDE9HVhOU61irI3EnyyHA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      seroval: ^1.0
-
-  seroval@1.5.0:
-    resolution: {integrity: sha512-OE4cvmJ1uSPrKorFIH9/w/Qwuvi/IMcGbv5RKgcJ/zjA/IohDLU6SVaxFN9FwajbP7nsX0dQqMDes1whk3y+yw==}
-    engines: {node: '>=10'}
-
-  solid-icons@1.2.0:
-    resolution: {integrity: sha512-yjQxWQMi9l19P5Af9vjsvalTMDFPDL4XD6etrUdNxNVhFp1bMYF0SFwUa5VYDfJ7u0SF3Qkz/F7BZxqcLUwklw==}
     peerDependencies:
-      solid-js: '*'
-
-  solid-js@1.9.11:
-    resolution: {integrity: sha512-WEJtcc5mkh/BnHA6Yrg4whlF8g6QwpmXXRg4P2ztPmcKeHHlH4+djYecBLhSpecZY2RRECXYUwIc/C2r3yzQ4Q==}
+      '@types/node': ^20.19.0 || >=22.12.0
+      esbuild: ^0.27.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
 
-  solid-refresh@0.6.3:
-    resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==}
-    peerDependencies:
-      solid-js: ^1.3
+  rolldown@1.0.0-beta.53:
+    resolution: {integrity: sha512-Qd9c2p0XKZdgT5AYd+KgAMggJ8ZmCs3JnS9PTMWkyUfteKlfmKtxJbWTHkVakxwXs1Ub7jrRYVeFeF7N0sQxyw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
 
-  solid-styled@0.12.0:
-    resolution: {integrity: sha512-eoQlDScKmd1xCSf/3Lhz44kScI2lnumwa0YLCkrMbJmm3gZbHALK/0B4ZBD148VjUyjzs3r0cDfZ3QLcyeWT1A==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      solid-js: ^1
+  rollup@4.54.0:
+    resolution: {integrity: sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
 
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
@@ -791,41 +786,14 @@ packages:
     resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
     engines: {node: ^20.0.0 || >=22.0.0}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  unplugin-solid-styled@0.12.0:
-    resolution: {integrity: sha512-CRUMVL+Jjh5/aBCQU7IvA9e6MYWJJzbcmca2VRgY5XY9XTjk1shVSgRwAeEHXr7mTekQz6zuwd4fjE8YxB9o+Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      solid-styled: '>=0.9'
-      vite: '>=3'
-    peerDependenciesMeta:
-      vite:
-        optional: true
-
-  unplugin@2.3.11:
-    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
-    engines: {node: '>=18.12.0'}
-
-  update-browserslist-db@1.2.3:
-    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
-  vite-plugin-solid@2.11.10:
-    resolution: {integrity: sha512-Yr1dQybmtDtDAHkii6hXuc1oVH9CPcS/Zb2jN/P36qqcrkNnVPsMTzQ06jyzFPFjj3U1IYKMVt/9ZqcwGCEbjw==}
-    peerDependencies:
-      '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.*
-      solid-js: ^1.7.2
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
-    peerDependenciesMeta:
-      '@testing-library/jest-dom':
-        optional: true
-
   vite@7.3.0:
     resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -866,132 +834,53 @@ packages:
       yaml:
         optional: true
 
-  vitefu@1.1.1:
-    resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==}
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-tsc@2.2.12:
+    resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue@3.5.27:
+    resolution: {integrity: sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0
+      typescript: '*'
     peerDependenciesMeta:
-      vite:
+      typescript:
         optional: true
 
-  webpack-virtual-modules@0.6.2:
-    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
-
-  yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-
 snapshots:
 
-  '@babel/code-frame@7.29.0':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-
-  '@babel/compat-data@7.29.0': {}
-
-  '@babel/core@7.29.0':
-    dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.0
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helpers': 7.28.6
-      '@babel/parser': 7.29.0
-      '@babel/template': 7.28.6
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-      '@jridgewell/remapping': 2.3.5
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/generator@7.29.0':
-    dependencies:
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.1.0
-
-  '@babel/helper-compilation-targets@7.28.6':
-    dependencies:
-      '@babel/compat-data': 7.29.0
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.1
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
-  '@babel/helper-globals@7.28.0': {}
-
-  '@babel/helper-module-imports@7.18.6':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/helper-module-imports@7.28.6':
-    dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.29.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/helper-plugin-utils@7.28.6': {}
-
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
-  '@babel/helper-validator-option@7.27.1': {}
-
-  '@babel/helpers@7.28.6':
-    dependencies:
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-
   '@babel/parser@7.29.0':
     dependencies:
       '@babel/types': 7.29.0
 
-  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
+  '@babel/types@7.29.0':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
 
-  '@babel/template@7.28.6':
+  '@emnapi/core@1.8.1':
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    optional: true
 
-  '@babel/traverse@7.29.0':
+  '@emnapi/runtime@1.8.1':
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.0
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.29.0
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
+      tslib: 2.8.1
+    optional: true
 
-  '@babel/types@7.29.0':
+  '@emnapi/wasi-threads@1.1.0':
     dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
+      tslib: 2.8.1
+    optional: true
 
   '@emnudge/unicode-query@0.0.1': {}
 
@@ -1073,24 +962,18 @@ snapshots:
   '@esbuild/win32-x64@0.27.2':
     optional: true
 
-  '@jridgewell/gen-mapping@0.3.13':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
+  '@jridgewell/sourcemap-codec@1.5.5': {}
 
-  '@jridgewell/remapping@2.3.5':
+  '@napi-rs/wasm-runtime@1.1.1':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
+      '@emnapi/core': 1.8.1
+      '@emnapi/runtime': 1.8.1
+      '@tybys/wasm-util': 0.10.1
+    optional: true
 
-  '@jridgewell/resolve-uri@3.1.2': {}
+  '@oxc-project/runtime@0.101.0': {}
 
-  '@jridgewell/sourcemap-codec@1.5.5': {}
-
-  '@jridgewell/trace-mapping@0.3.31':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
+  '@oxc-project/types@0.101.0': {}
 
   '@oxfmt/darwin-arm64@0.28.0':
     optional: true
@@ -1140,13 +1023,48 @@ snapshots:
   '@oxlint/win32-x64@0.16.12':
     optional: true
 
-  '@rollup/pluginutils@5.3.0(rollup@4.54.0)':
+  '@rolldown/binding-android-arm64@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.53':
     dependencies:
-      '@types/estree': 1.0.8
-      estree-walker: 2.0.2
-      picomatch: 4.0.3
-    optionalDependencies:
-      rollup: 4.54.0
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.53':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.0-beta.53': {}
 
   '@rollup/rollup-android-arm-eabi@4.54.0':
     optional: true
@@ -1214,79 +1132,117 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.54.0':
     optional: true
 
-  '@types/babel__core@7.20.5':
+  '@tybys/wasm-util@0.10.1':
     dependencies:
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
-      '@types/babel__generator': 7.27.0
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.28.0
+      tslib: 2.8.1
+    optional: true
+
+  '@types/estree@1.0.8': {}
 
-  '@types/babel__generator@7.27.0':
+  '@vitejs/plugin-vue@5.2.4(vite@7.3.0(lightningcss@1.31.1))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
-      '@babel/types': 7.29.0
+      vite: 7.3.0(lightningcss@1.31.1)
+      vue: 3.5.27(typescript@5.9.3)
 
-  '@types/babel__template@7.4.4':
+  '@volar/language-core@2.4.15':
     dependencies:
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
+      '@volar/source-map': 2.4.15
+
+  '@volar/source-map@2.4.15': {}
 
-  '@types/babel__traverse@7.28.0':
+  '@volar/typescript@2.4.15':
     dependencies:
-      '@babel/types': 7.29.0
+      '@volar/language-core': 2.4.15
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue/compiler-core@3.5.27':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@vue/shared': 3.5.27
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
 
-  '@types/css-tree@2.3.11': {}
+  '@vue/compiler-dom@3.5.27':
+    dependencies:
+      '@vue/compiler-core': 3.5.27
+      '@vue/shared': 3.5.27
 
-  '@types/estree@1.0.8': {}
+  '@vue/compiler-sfc@3.5.27':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@vue/compiler-core': 3.5.27
+      '@vue/compiler-dom': 3.5.27
+      '@vue/compiler-ssr': 3.5.27
+      '@vue/shared': 3.5.27
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.6
+      source-map-js: 1.2.1
 
-  acorn@8.15.0: {}
+  '@vue/compiler-ssr@3.5.27':
+    dependencies:
+      '@vue/compiler-dom': 3.5.27
+      '@vue/shared': 3.5.27
 
-  babel-plugin-jsx-dom-expressions@0.40.3(@babel/core@7.29.0):
+  '@vue/compiler-vue2@2.7.16':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-imports': 7.18.6
-      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
-      '@babel/types': 7.29.0
-      html-entities: 2.3.3
-      parse5: 7.3.0
+      de-indent: 1.0.2
+      he: 1.2.0
 
-  babel-preset-solid@1.9.10(@babel/core@7.29.0)(solid-js@1.9.11):
+  '@vue/language-core@2.2.12(typescript@5.9.3)':
     dependencies:
-      '@babel/core': 7.29.0
-      babel-plugin-jsx-dom-expressions: 0.40.3(@babel/core@7.29.0)
+      '@volar/language-core': 2.4.15
+      '@vue/compiler-dom': 3.5.27
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.27
+      alien-signals: 1.0.13
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
     optionalDependencies:
-      solid-js: 1.9.11
+      typescript: 5.9.3
 
-  baseline-browser-mapping@2.9.19: {}
+  '@vue/reactivity@3.5.27':
+    dependencies:
+      '@vue/shared': 3.5.27
+
+  '@vue/runtime-core@3.5.27':
+    dependencies:
+      '@vue/reactivity': 3.5.27
+      '@vue/shared': 3.5.27
+
+  '@vue/runtime-dom@3.5.27':
+    dependencies:
+      '@vue/reactivity': 3.5.27
+      '@vue/runtime-core': 3.5.27
+      '@vue/shared': 3.5.27
+      csstype: 3.2.3
 
-  browserslist@4.28.1:
+  '@vue/server-renderer@3.5.27(vue@3.5.27(typescript@5.9.3))':
     dependencies:
-      baseline-browser-mapping: 2.9.19
-      caniuse-lite: 1.0.30001767
-      electron-to-chromium: 1.5.283
-      node-releases: 2.0.27
-      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+      '@vue/compiler-ssr': 3.5.27
+      '@vue/shared': 3.5.27
+      vue: 3.5.27(typescript@5.9.3)
 
-  caniuse-lite@1.0.30001767: {}
+  '@vue/shared@3.5.27': {}
 
-  convert-source-map@2.0.0: {}
+  alien-signals@1.0.13: {}
 
-  css-tree@3.1.0:
+  balanced-match@1.0.2: {}
+
+  brace-expansion@2.0.2:
     dependencies:
-      mdn-data: 2.12.2
-      source-map-js: 1.2.1
+      balanced-match: 1.0.2
 
   csstype@3.2.3: {}
 
-  debug@4.4.3:
-    dependencies:
-      ms: 2.1.3
+  de-indent@1.0.2: {}
 
   detect-libc@2.1.2: {}
 
-  electron-to-chromium@1.5.283: {}
-
-  entities@6.0.1: {}
+  entities@7.0.1: {}
 
   esbuild@0.27.2:
     optionalDependencies:
@@ -1317,8 +1273,6 @@ snapshots:
       '@esbuild/win32-ia32': 0.27.2
       '@esbuild/win32-x64': 0.27.2
 
-  escalade@3.2.0: {}
-
   estree-walker@2.0.2: {}
 
   fdir@6.5.0(picomatch@4.0.3):
@@ -1328,17 +1282,7 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
-  gensync@1.0.0-beta.2: {}
-
-  html-entities@2.3.3: {}
-
-  is-what@4.1.16: {}
-
-  js-tokens@4.0.0: {}
-
-  jsesc@3.1.0: {}
-
-  json5@2.2.3: {}
+  he@1.2.0: {}
 
   lightningcss-android-arm64@1.31.1:
     optional: true
@@ -1389,22 +1333,18 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.31.1
       lightningcss-win32-x64-msvc: 1.31.1
 
-  lru-cache@5.1.1:
+  magic-string@0.30.21:
     dependencies:
-      yallist: 3.1.1
-
-  mdn-data@2.12.2: {}
+      '@jridgewell/sourcemap-codec': 1.5.5
 
-  merge-anything@5.1.7:
+  minimatch@9.0.5:
     dependencies:
-      is-what: 4.1.16
+      brace-expansion: 2.0.2
 
-  ms@2.1.3: {}
+  muggle-string@0.4.1: {}
 
   nanoid@3.3.11: {}
 
-  node-releases@2.0.27: {}
-
   oxfmt@0.28.0:
     dependencies:
       tinypool: 2.1.0
@@ -1429,9 +1369,7 @@ snapshots:
       '@oxlint/win32-arm64': 0.16.12
       '@oxlint/win32-x64': 0.16.12
 
-  parse5@7.3.0:
-    dependencies:
-      entities: 6.0.1
+  path-browserify@1.0.1: {}
 
   picocolors@1.1.1: {}
 
@@ -1443,6 +1381,38 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  rolldown-vite@7.3.1(esbuild@0.27.2):
+    dependencies:
+      '@oxc-project/runtime': 0.101.0
+      fdir: 6.5.0(picomatch@4.0.3)
+      lightningcss: 1.31.1
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rolldown: 1.0.0-beta.53
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      esbuild: 0.27.2
+      fsevents: 2.3.3
+
+  rolldown@1.0.0-beta.53:
+    dependencies:
+      '@oxc-project/types': 0.101.0
+      '@rolldown/pluginutils': 1.0.0-beta.53
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-beta.53
+      '@rolldown/binding-darwin-arm64': 1.0.0-beta.53
+      '@rolldown/binding-darwin-x64': 1.0.0-beta.53
+      '@rolldown/binding-freebsd-x64': 1.0.0-beta.53
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.53
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.53
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.53
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.53
+      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.53
+      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.53
+      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.53
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.53
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.53
+
   rollup@4.54.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -1471,46 +1441,6 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.54.0
       fsevents: 2.3.3
 
-  semver@6.3.1: {}
-
-  seroval-plugins@1.5.0(seroval@1.5.0):
-    dependencies:
-      seroval: 1.5.0
-
-  seroval@1.5.0: {}
-
-  solid-icons@1.2.0(solid-js@1.9.11):
-    dependencies:
-      solid-js: 1.9.11
-
-  solid-js@1.9.11:
-    dependencies:
-      csstype: 3.2.3
-      seroval: 1.5.0
-      seroval-plugins: 1.5.0(seroval@1.5.0)
-
-  solid-refresh@0.6.3(solid-js@1.9.11):
-    dependencies:
-      '@babel/generator': 7.29.0
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/types': 7.29.0
-      solid-js: 1.9.11
-    transitivePeerDependencies:
-      - supports-color
-
-  solid-styled@0.12.0(solid-js@1.9.11):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
-      '@types/css-tree': 2.3.11
-      browserslist: 4.28.1
-      css-tree: 3.1.0
-      lightningcss: 1.31.1
-      solid-js: 1.9.11
-    transitivePeerDependencies:
-      - supports-color
-
   source-map-js@1.2.1: {}
 
   tinyglobby@0.2.15:
@@ -1520,43 +1450,10 @@ snapshots:
 
   tinypool@2.1.0: {}
 
-  typescript@5.9.3: {}
-
-  unplugin-solid-styled@0.12.0(rollup@4.54.0)(solid-styled@0.12.0(solid-js@1.9.11))(vite@7.3.0(lightningcss@1.31.1)):
-    dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
-      solid-styled: 0.12.0(solid-js@1.9.11)
-      unplugin: 2.3.11
-    optionalDependencies:
-      vite: 7.3.0(lightningcss@1.31.1)
-    transitivePeerDependencies:
-      - rollup
-
-  unplugin@2.3.11:
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      acorn: 8.15.0
-      picomatch: 4.0.3
-      webpack-virtual-modules: 0.6.2
-
-  update-browserslist-db@1.2.3(browserslist@4.28.1):
-    dependencies:
-      browserslist: 4.28.1
-      escalade: 3.2.0
-      picocolors: 1.1.1
+  tslib@2.8.1:
+    optional: true
 
-  vite-plugin-solid@2.11.10(solid-js@1.9.11)(vite@7.3.0(lightningcss@1.31.1)):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@types/babel__core': 7.20.5
-      babel-preset-solid: 1.9.10(@babel/core@7.29.0)(solid-js@1.9.11)
-      merge-anything: 5.1.7
-      solid-js: 1.9.11
-      solid-refresh: 0.6.3(solid-js@1.9.11)
-      vite: 7.3.0(lightningcss@1.31.1)
-      vitefu: 1.1.1(vite@7.3.0(lightningcss@1.31.1))
-    transitivePeerDependencies:
-      - supports-color
+  typescript@5.9.3: {}
 
   vite@7.3.0(lightningcss@1.31.1):
     dependencies:
@@ -1570,10 +1467,20 @@ snapshots:
       fsevents: 2.3.3
       lightningcss: 1.31.1
 
-  vitefu@1.1.1(vite@7.3.0(lightningcss@1.31.1)):
-    optionalDependencies:
-      vite: 7.3.0(lightningcss@1.31.1)
+  vscode-uri@3.1.0: {}
 
-  webpack-virtual-modules@0.6.2: {}
+  vue-tsc@2.2.12(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.15
+      '@vue/language-core': 2.2.12(typescript@5.9.3)
+      typescript: 5.9.3
 
-  yallist@3.1.1: {}
+  vue@3.5.27(typescript@5.9.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.27
+      '@vue/compiler-sfc': 3.5.27
+      '@vue/runtime-dom': 3.5.27
+      '@vue/server-renderer': 3.5.27(vue@3.5.27(typescript@5.9.3))
+      '@vue/shared': 3.5.27
+    optionalDependencies:
+      typescript: 5.9.3
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 8ff90b5..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { onMount, Show } from "solid-js";
-import { css } from "solid-styled";
-import { hasFirstLoadedSig, selectedCodepointSig, searchModeSig, resultsSig } from "$stores";
-
-import { GitHubIcon } from "$icons/github";
-import { ResultsContainer } from "$components/table-container/ResultsContainer";
-import { EasySearch } from "$components/EasySearch";
-import { Header } from "$components/Header";
-import { AdvancedSearch } from "$components/advanced-search/AdvancedSearch";
-import { Loader } from "$components/Loader";
-import { InfoContainer } from "$components/table-container/InfoContainer";
-
-export default function App() {
-  onMount(() => {
-    import("./queryProxy");
-  });
-
-  css`
-    :global(body) {
-      overflow-y: scroll;
-    }
-    main {
-      text-align: center;
-      margin: 0 auto;
-      width: 600px;
-      max-width: 100%;
-    }
-    @media (min-width: 640px) {
-      main {
-        max-width: none;
-      }
-    }
-    .content.middle {
-      display: grid;
-      grid-template-columns: minmax(500px, auto) 600px 500px;
-      justify-content: center;
-    }
-    @media (max-width: 1600px) {
-      .content.middle {
-        display: grid;
-        grid-template-columns: minmax(500px, auto) 600px;
-      }
-    }
-    aside div {
-      position: fixed;
-      width: 400px;
-      overflow-y: auto;
-      height: 100vh;
-    }
-  `;
-
-  return (
-    <>
-      <div class={`content ${selectedCodepointSig() ? "middle" : ""}`}>
-        <Show when={selectedCodepointSig()}>
-          <aside>
-            <div>
-              <InfoContainer
-                codepoint={selectedCodepointSig()!.codepoint}
-                info={selectedCodepointSig()!}
-                name={selectedCodepointSig()!.label}
-              />
-            </div>
-          </aside>
-        </Show>
-        <div>
-          <Header />
-          <GitHubIcon href="https://github.com/EmNudge/unicode-lookup" />
-
-          <main>
-            <div class="searchbox">
-              <Show when={searchModeSig() === "simple"} fallback={<AdvancedSearch />}>
-                <EasySearch />
-              </Show>
-            </div>
-
-            <br />
-
-            <Show when={hasFirstLoadedSig()} fallback={<Loader />}>
-              <Show
-                when={resultsSig().length}
-                fallback={
-                  <>
-                    <br />
-                    <p>No results fit that query :/</p>
-                  </>
-                }
-              >
-                <ResultsContainer />
-              </Show>
-            </Show>
-          </main>
-        </div>
-        <Show when={selectedCodepointSig()}>
-          <aside />
-        </Show>
-      </div>
-    </>
-  );
-}
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..1c973e5
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { hasFirstLoaded, selectedCodepoint, searchMode, results } from "$stores";
+
+import GitHubIcon from "$icons/GitHubIcon.vue";
+import ResultsContainer from "$components/table-container/ResultsContainer.vue";
+import EasySearch from "$components/EasySearch.vue";
+import Header from "$components/Header.vue";
+import AdvancedSearch from "$components/advanced-search/AdvancedSearch.vue";
+import Loader from "$components/Loader.vue";
+import InfoContainer from "$components/table-container/InfoContainer.vue";
+
+onMounted(() => {
+  import("./queryProxy");
+});
+</script>
+
+<template>
+  <div :class="['content', selectedCodepoint && 'middle']">
+    <aside v-if="selectedCodepoint">
+      <div>
+        <InfoContainer
+          :codepoint="selectedCodepoint.codepoint"
+          :info="selectedCodepoint"
+          :name="selectedCodepoint.label"
+        />
+      </div>
+    </aside>
+    <div>
+      <Header />
+      <GitHubIcon href="https://github.com/EmNudge/unicode-lookup" />
+
+      <main>
+        <div class="searchbox">
+          <EasySearch v-if="searchMode === 'simple'" />
+          <AdvancedSearch v-else />
+        </div>
+
+        <br />
+
+        <template v-if="hasFirstLoaded">
+          <ResultsContainer v-if="results.length" />
+          <template v-else>
+            <br />
+            <p>No results fit that query :/</p>
+          </template>
+        </template>
+        <Loader v-else />
+      </main>
+    </div>
+    <aside v-if="selectedCodepoint" />
+  </div>
+</template>
+
+<style>
+body {
+  overflow-y: scroll;
+}
+</style>
+
+<style scoped>
+main {
+  text-align: center;
+  margin: 0 auto;
+  width: 600px;
+  max-width: 100%;
+}
+@media (min-width: 640px) {
+  main {
+    max-width: none;
+  }
+}
+.content.middle {
+  display: grid;
+  grid-template-columns: minmax(500px, auto) 600px 500px;
+  justify-content: center;
+}
+@media (max-width: 1600px) {
+  .content.middle {
+    display: grid;
+    grid-template-columns: minmax(500px, auto) 600px;
+  }
+}
+aside div {
+  position: fixed;
+  width: 400px;
+  overflow-y: auto;
+  height: 100vh;
+}
+</style>
diff --git a/src/components/EasySearch.tsx b/src/components/EasySearch.tsx
deleted file mode 100644
index 2e2dcb8..0000000
--- a/src/components/EasySearch.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { createSignal, onMount, onCleanup, Show } from "solid-js";
-import { css } from "solid-styled";
-import { easySearchSig, setEasySearchSig } from "$stores";
-import { debounce } from "$utils/debounce";
-
-interface EasySearchProps {
-  onSearch?: () => void;
-}
-
-export function EasySearch(props: EasySearchProps) {
-  const [error, setError] = createSignal("");
-  let inputEl: HTMLInputElement | undefined;
-
-  const search = debounce(() => props.onSearch?.(), 100);
-
-  function hasRegexError(text: string) {
-    const regexRes = text.match(/\/(.+?)\/([a-z]+)?/);
-    if (!regexRes) return false;
-
-    const [, regStr, flags] = regexRes;
-
-    try {
-      new RegExp(regStr!, flags);
-      return false;
-    } catch {
-      return true;
-    }
-  }
-
-  function trySearch() {
-    if (hasRegexError(easySearchSig())) {
-      setError("Regex Error. Please verify search text.");
-      return;
-    }
-    setError("");
-    search();
-  }
-
-  function handleKeyDown(e: KeyboardEvent) {
-    const inputIsFocused = document.activeElement === inputEl;
-    if (inputIsFocused) return;
-
-    if (e.key.length > 1 || /\p{C}/u.test(e.key)) return;
-    if (e.ctrlKey || e.altKey || e.metaKey) return;
-
-    if (e.key === " ") {
-      e.preventDefault();
-      return;
-    }
-
-    inputEl?.focus();
-  }
-
-  onMount(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
-  });
-
-  css`
-    input {
-      width: 90%;
-      margin: 0 auto;
-      border: 1px solid transparent;
-      box-shadow: -3px 4px 2px #0000000f;
-    }
-    :global(:root[data-theme="dark"]) input {
-      background-color: #151515;
-      color: white;
-      border: 1px solid #6b6b6b;
-      box-shadow: 1px 1px 1px 2px #0000006e;
-    }
-    input::-webkit-input-placeholder {
-      opacity: 0.5;
-    }
-    input:focus {
-      outline: 1px solid #a5b5ff;
-      box-shadow: -3px 4px 2px #894aff0f;
-    }
-  `;
-
-  return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        trySearch();
-      }}
-    >
-      <input
-        ref={inputEl}
-        type="text"
-        placeholder="Search..."
-        value={easySearchSig()}
-        onInput={(e) => {
-          setEasySearchSig(e.currentTarget.value);
-          trySearch();
-        }}
-      />
-
-      <Show when={error()}>
-        <br />
-        <span style="color: red">{error()}</span>
-      </Show>
-    </form>
-  );
-}
diff --git a/src/components/EasySearch.vue b/src/components/EasySearch.vue
new file mode 100644
index 0000000..be95f4c
--- /dev/null
+++ b/src/components/EasySearch.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { easySearch } from "$stores";
+import { debounce } from "$utils/debounce";
+
+interface Props {
+  onSearch?: () => void;
+}
+
+const props = defineProps<Props>();
+
+const error = ref("");
+const inputEl = ref<HTMLInputElement | null>(null);
+
+const search = debounce(() => props.onSearch?.(), 100);
+
+function hasRegexError(text: string) {
+  const regexRes = text.match(/\/(.+?)\/([a-z]+)?/);
+  if (!regexRes) return false;
+
+  const [, regStr, flags] = regexRes;
+
+  try {
+    new RegExp(regStr!, flags);
+    return false;
+  } catch {
+    return true;
+  }
+}
+
+function trySearch() {
+  if (hasRegexError(easySearch.value)) {
+    error.value = "Regex Error. Please verify search text.";
+    return;
+  }
+  error.value = "";
+  search();
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  const inputIsFocused = document.activeElement === inputEl.value;
+  if (inputIsFocused) return;
+
+  if (e.key.length > 1 || /\p{C}/u.test(e.key)) return;
+  if (e.ctrlKey || e.altKey || e.metaKey) return;
+
+  if (e.key === " ") {
+    e.preventDefault();
+    return;
+  }
+
+  inputEl.value?.focus();
+}
+
+onMounted(() => {
+  window.addEventListener("keydown", handleKeyDown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleKeyDown);
+});
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  easySearch.value = target.value;
+  trySearch();
+}
+
+function handleSubmit(e: Event) {
+  e.preventDefault();
+  trySearch();
+}
+</script>
+
+<template>
+  <form @submit="handleSubmit">
+    <input
+      ref="inputEl"
+      type="text"
+      placeholder="Search..."
+      :value="easySearch"
+      @input="handleInput"
+    />
+
+    <template v-if="error">
+      <br />
+      <span style="color: red">{{ error }}</span>
+    </template>
+  </form>
+</template>
+
+<style scoped>
+input {
+  width: 90%;
+  margin: 0 auto;
+  border: 1px solid transparent;
+  box-shadow: -3px 4px 2px #0000000f;
+}
+:root[data-theme="dark"] input {
+  background-color: #151515;
+  color: white;
+  border: 1px solid #6b6b6b;
+  box-shadow: 1px 1px 1px 2px #0000006e;
+}
+input::-webkit-input-placeholder {
+  opacity: 0.5;
+}
+input:focus {
+  outline: 1px solid #a5b5ff;
+  box-shadow: -3px 4px 2px #894aff0f;
+}
+</style>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index f5c600d..0000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Show } from "solid-js";
-import { css } from "solid-styled";
-import { searchModeSig, setSearchModeSig } from "$stores";
-import { FilterIcon } from "$icons/filter";
-import { ThemeSwitcher } from "./ThemeSwitcher";
-
-export function Header() {
-  function toggleSearchMode() {
-    setSearchModeSig((mode: "simple" | "advanced") =>
-      mode === "advanced" ? "simple" : "advanced",
-    );
-  }
-
-  css`
-    header {
-      display: flex;
-      justify-content: space-between;
-      max-width: 600px;
-      margin: 20px auto;
-      display: flex;
-      align-items: center;
-    }
-    h1 {
-      font-size: 1.7em;
-    }
-    .buttons {
-      display: flex;
-    }
-    button {
-      cursor: pointer;
-      margin: 0;
-      z-index: 2;
-      padding: 10px 20px;
-    }
-    .active {
-      color: var(--hsl-bg);
-      background: var(--hsl);
-      transition: 0.25s;
-    }
-    button:focus {
-      border: 1px solid var(--hsl);
-    }
-  `;
-
-  return (
-    <header>
-      <div class="text">
-        <h1>Unicode Lookup</h1>
-        <Show when={searchModeSig() === "simple"} fallback={<h3>Advanced Search</h3>}>
-          <h3>Simple Search</h3>
-        </Show>
-      </div>
-
-      <div class="buttons">
-        <ThemeSwitcher />
-        <button
-          class={`styled ${searchModeSig() === "advanced" ? "active" : ""}`}
-          onClick={toggleSearchMode}
-        >
-          <FilterIcon active={searchModeSig() === "advanced"} />
-        </button>
-      </div>
-    </header>
-  );
-}
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..7d343c5
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { searchMode } from "$stores";
+import FilterIcon from "$icons/FilterIcon.vue";
+import ThemeSwitcher from "./ThemeSwitcher.vue";
+
+function toggleSearchMode() {
+  searchMode.value = searchMode.value === "advanced" ? "simple" : "advanced";
+}
+</script>
+
+<template>
+  <header>
+    <div class="text">
+      <h1>Unicode Lookup</h1>
+      <h3 v-if="searchMode === 'simple'">Simple Search</h3>
+      <h3 v-else>Advanced Search</h3>
+    </div>
+
+    <div class="buttons">
+      <ThemeSwitcher />
+      <button :class="['styled', searchMode === 'advanced' && 'active']" @click="toggleSearchMode">
+        <FilterIcon :active="searchMode === 'advanced'" />
+      </button>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+header {
+  display: flex;
+  justify-content: space-between;
+  max-width: 600px;
+  margin: 20px auto;
+  display: flex;
+  align-items: center;
+}
+h1 {
+  font-size: 1.7em;
+}
+.buttons {
+  display: flex;
+}
+button {
+  cursor: pointer;
+  margin: 0;
+  z-index: 2;
+  padding: 10px 20px;
+}
+.active {
+  color: var(--hsl-bg);
+  background: var(--hsl);
+  transition: 0.25s;
+}
+button:focus {
+  border: 1px solid var(--hsl);
+}
+</style>
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
deleted file mode 100644
index 1ff9a6a..0000000
--- a/src/components/Loader.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { createSignal, onMount, onCleanup, For } from "solid-js";
-import { css } from "solid-styled";
-
-export function Loader() {
-  const [str, setStr] = createSignal("xxxxxx");
-
-  onMount(() => {
-    const id = setInterval(() => {
-      const codepoint = Math.floor(Math.random() * 0xfff);
-      const char = String.fromCodePoint(codepoint);
-
-      const index = Math.floor(Math.random() * str().length);
-      setStr((s) => s.slice(0, index) + char + s.slice(index + 1));
-    }, 50);
-
-    onCleanup(() => clearInterval(id));
-  });
-
-  css`
-    section {
-      text-align: center;
-      padding-top: 50px;
-    }
-    .chars span {
-      display: inline-block;
-      width: 25px;
-      text-align: center;
-      line-height: 1em;
-    }
-  `;
-
-  return (
-    <section>
-      <h2>Fetching Data</h2>
-      <br />
-      <div class="chars">
-        <For each={Array.from(str())}>{(char) => <span>{char}</span>}</For>
-      </div>
-    </section>
-  );
-}
diff --git a/src/components/Loader.vue b/src/components/Loader.vue
new file mode 100644
index 0000000..4765865
--- /dev/null
+++ b/src/components/Loader.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from "vue";
+
+const str = ref("xxxxxx");
+let intervalId: ReturnType<typeof setInterval> | undefined;
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    const codepoint = Math.floor(Math.random() * 0xfff);
+    const char = String.fromCodePoint(codepoint);
+
+    const index = Math.floor(Math.random() * str.value.length);
+    str.value = str.value.slice(0, index) + char + str.value.slice(index + 1);
+  }, 50);
+});
+
+onUnmounted(() => {
+  if (intervalId) clearInterval(intervalId);
+});
+
+const chars = computed(() => Array.from(str.value));
+</script>
+
+<template>
+  <section>
+    <h2>Fetching Data</h2>
+    <br />
+    <div class="chars">
+      <span v-for="(char, i) in chars" :key="i">{{ char }}</span>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+section {
+  text-align: center;
+  padding-top: 50px;
+}
+.chars span {
+  display: inline-block;
+  width: 25px;
+  text-align: center;
+  line-height: 1em;
+}
+</style>
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
deleted file mode 100644
index e0eba52..0000000
--- a/src/components/ThemeSwitcher.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { createSignal, onMount, onCleanup } from "solid-js";
-import { css } from "solid-styled";
-import { SunIcon } from "$icons/sun";
-
-export function ThemeSwitcher() {
-  const [isDarkTheme, setIsDarkTheme] = createSignal(false);
-
-  const updateTheme = (darkTheme: boolean) => {
-    const newTheme = darkTheme ? "dark" : "light";
-    document.documentElement.dataset.theme = newTheme;
-    localStorage.setItem("color-scheme", newTheme);
-  };
-
-  const getColorSchemeLS = () => localStorage.getItem("color-scheme") as "dark" | "light" | null;
-
-  onMount(() => {
-    const colorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
-    const onColorSchemeChange = (e: MediaQueryListEvent) => {
-      if (getColorSchemeLS()) return;
-      setIsDarkTheme(e.matches);
-    };
-    colorSchemeMedia.addEventListener("change", onColorSchemeChange);
-
-    const colorSchemeLS = getColorSchemeLS();
-    if (colorSchemeLS) {
-      setIsDarkTheme(colorSchemeLS === "dark");
-    } else {
-      const isSystemDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      setIsDarkTheme(isSystemDarkTheme);
-    }
-
-    updateTheme(isDarkTheme());
-
-    onCleanup(() => colorSchemeMedia.removeEventListener("change", onColorSchemeChange));
-  });
-
-  const toggleTheme = () => {
-    const newValue = !isDarkTheme();
-    setIsDarkTheme(newValue);
-    updateTheme(newValue);
-  };
-
-  css`
-    button {
-      cursor: pointer;
-      margin: 0;
-      background: none;
-      border: none;
-      padding: 0 10px;
-      opacity: 0.6;
-    }
-    button:active {
-      transform: scale(0.9);
-    }
-  `;
-
-  return (
-    <button onClick={toggleTheme}>
-      <SunIcon />
-    </button>
-  );
-}
diff --git a/src/components/ThemeSwitcher.vue b/src/components/ThemeSwitcher.vue
new file mode 100644
index 0000000..eeb34e7
--- /dev/null
+++ b/src/components/ThemeSwitcher.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import SunIcon from "$icons/SunIcon.vue";
+
+const isDarkTheme = ref(false);
+
+const updateTheme = (darkTheme: boolean) => {
+  const newTheme = darkTheme ? "dark" : "light";
+  document.documentElement.dataset.theme = newTheme;
+  localStorage.setItem("color-scheme", newTheme);
+};
+
+const getColorSchemeLS = () => localStorage.getItem("color-scheme") as "dark" | "light" | null;
+
+let colorSchemeMedia: MediaQueryList | null = null;
+const onColorSchemeChange = (e: MediaQueryListEvent) => {
+  if (getColorSchemeLS()) return;
+  isDarkTheme.value = e.matches;
+};
+
+onMounted(() => {
+  colorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
+  colorSchemeMedia.addEventListener("change", onColorSchemeChange);
+
+  const colorSchemeLS = getColorSchemeLS();
+  if (colorSchemeLS) {
+    isDarkTheme.value = colorSchemeLS === "dark";
+  } else {
+    const isSystemDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    isDarkTheme.value = isSystemDarkTheme;
+  }
+
+  updateTheme(isDarkTheme.value);
+});
+
+onUnmounted(() => {
+  colorSchemeMedia?.removeEventListener("change", onColorSchemeChange);
+});
+
+const toggleTheme = () => {
+  const newValue = !isDarkTheme.value;
+  isDarkTheme.value = newValue;
+  updateTheme(newValue);
+};
+</script>
+
+<template>
+  <button @click="toggleTheme">
+    <SunIcon />
+  </button>
+</template>
+
+<style scoped>
+button {
+  cursor: pointer;
+  margin: 0;
+  background: none;
+  border: none;
+  padding: 0 10px;
+  opacity: 0.6;
+}
+button:active {
+  transform: scale(0.9);
+}
+</style>
diff --git a/src/components/advanced-search/AdvancedSearch.tsx b/src/components/advanced-search/AdvancedSearch.tsx
deleted file mode 100644
index b4361b1..0000000
--- a/src/components/advanced-search/AdvancedSearch.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { onMount, For } from "solid-js";
-import { css } from "solid-styled";
-import { BoxSet } from "./BoxSet";
-import { Button } from "./Button";
-import { boxesSig, setBoxesSig, getNewBox, type Box } from "$stores";
-
-interface AdvancedSearchProps {
-  onSearch?: () => void;
-}
-
-export function AdvancedSearch(_props: AdvancedSearchProps) {
-  const onClose = (index: number) => () => {
-    setBoxesSig((boxes: Box[]) => [...boxes.slice(0, index), ...boxes.slice(index + 1)]);
-  };
-
-  const updateBox = (index: number) => (box: Box) => {
-    setBoxesSig((boxes: Box[]) => [...boxes.slice(0, index), box, ...boxes.slice(index + 1)]);
-  };
-
-  onMount(() => {
-    if (boxesSig().length === 0) {
-      setBoxesSig([getNewBox()]);
-    }
-  });
-
-  css`
-    .buttons {
-      display: flex;
-      justify-content: flex-end;
-    }
-    .buttons :global(*) {
-      margin: 5px;
-    }
-  `;
-
-  return (
-    <>
-      <form onSubmit={(e) => e.preventDefault()}>
-        <For each={boxesSig()}>
-          {(box, i) => <BoxSet box={box} onBoxChange={updateBox(i())} onClose={onClose(i())} />}
-        </For>
-      </form>
-
-      <div class="buttons">
-        <Button onClick={() => setBoxesSig((boxes: Box[]) => [...boxes, getNewBox()])}>
-          Add Rule
-        </Button>
-      </div>
-    </>
-  );
-}
diff --git a/src/components/advanced-search/AdvancedSearch.vue b/src/components/advanced-search/AdvancedSearch.vue
new file mode 100644
index 0000000..0658245
--- /dev/null
+++ b/src/components/advanced-search/AdvancedSearch.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import BoxSet from "./BoxSet.vue";
+import Button from "./Button.vue";
+import { boxes, getNewBox, type Box } from "$stores";
+
+interface Props {
+  onSearch?: () => void;
+}
+
+defineProps<Props>();
+
+const onClose = (index: number) => () => {
+  boxes.value = [...boxes.value.slice(0, index), ...boxes.value.slice(index + 1)];
+};
+
+const updateBox = (index: number) => (box: Box) => {
+  boxes.value = [...boxes.value.slice(0, index), box, ...boxes.value.slice(index + 1)];
+};
+
+onMounted(() => {
+  if (boxes.value.length === 0) {
+    boxes.value = [getNewBox()];
+  }
+});
+
+function addRule() {
+  boxes.value = [...boxes.value, getNewBox()];
+}
+</script>
+
+<template>
+  <div>
+    <form @submit.prevent>
+      <BoxSet
+        v-for="(box, i) in boxes"
+        :key="i"
+        :box="box"
+        @box-change="updateBox(i)"
+        @close="onClose(i)"
+      />
+    </form>
+
+    <div class="buttons">
+      <Button @click="addRule">Add Rule</Button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+.buttons :deep(*) {
+  margin: 5px;
+}
+</style>
diff --git a/src/components/advanced-search/BoxContent.tsx b/src/components/advanced-search/BoxContent.tsx
deleted file mode 100644
index fb9a083..0000000
--- a/src/components/advanced-search/BoxContent.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { createSignal, createEffect, createMemo } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { css } from "solid-styled";
-import { CloseIcon } from "$icons/close";
-import { Select } from "$lib/components";
-import { boxTypeMap } from "./box-types";
-
-interface BoxContentProps {
-  name: string;
-  data: any;
-  hue?: number;
-  onClose?: () => void;
-  onNameChange?: (name: string) => void;
-  onDataChange?: (data: any) => void;
-}
-
-export function BoxContent(props: BoxContentProps) {
-  const [localName, setLocalName] = createSignal(props.name);
-
-  const componentNames = createMemo(() => [...boxTypeMap.keys()]);
-  const component = createMemo(() => boxTypeMap.get(localName()));
-
-  createEffect(() => {
-    props.onNameChange?.(localName());
-    props.onDataChange?.(undefined);
-  });
-
-  css`
-    .content {
-      padding: 40px;
-      display: grid;
-      justify-content: center;
-      margin-top: -1px;
-      position: relative;
-    }
-    button {
-      position: absolute;
-      top: 5px;
-      right: 10px;
-      background: none;
-      border: none;
-      font-size: 2em;
-      padding: 3px;
-      line-height: 0.8em;
-      margin: 0;
-      z-index: 2;
-      cursor: pointer;
-    }
-    hr {
-      margin: 10px -40px;
-      opacity: 0.4;
-    }
-  `;
-
-  return (
-    <div class="content styled" style={`--hue: ${props.hue ?? 200}`}>
-      <button onClick={props.onClose}>
-        <CloseIcon />
-      </button>
-
-      <Select
-        options={componentNames()}
-        value={localName()}
-        onChange={(v) => setLocalName(String(v))}
-        hue={35}
-      />
-
-      <hr />
-
-      <Dynamic component={component()} data={props.data} onDataChange={props.onDataChange} />
-    </div>
-  );
-}
diff --git a/src/components/advanced-search/BoxContent.vue b/src/components/advanced-search/BoxContent.vue
new file mode 100644
index 0000000..cf1b4de
--- /dev/null
+++ b/src/components/advanced-search/BoxContent.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import CloseIcon from "$icons/CloseIcon.vue";
+import { Select } from "$lib/components";
+import { boxTypeMap } from "./box-types";
+
+interface Props {
+  name: string;
+  data: any;
+  hue?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hue: 200,
+});
+
+const emit = defineEmits<{
+  close: [];
+  nameChange: [name: string];
+  dataChange: [data: any];
+}>();
+
+const localName = ref(props.name);
+
+const componentNames = computed(() => [...boxTypeMap.keys()]);
+const component = computed(() => boxTypeMap.get(localName.value));
+
+watch(localName, (name) => {
+  emit("nameChange", name);
+  emit("dataChange", undefined);
+});
+
+function handleSelectChange(value: string | number) {
+  localName.value = String(value);
+}
+
+function handleDataChange(data: any) {
+  emit("dataChange", data);
+}
+</script>
+
+<template>
+  <div class="content styled" :style="`--hue: ${props.hue}`">
+    <button @click="emit('close')">
+      <CloseIcon />
+    </button>
+
+    <Select
+      :options="componentNames"
+      :model-value="localName"
+      @update:model-value="handleSelectChange"
+      :hue="35"
+    />
+
+    <hr />
+
+    <component :is="component" :data="props.data" @data-change="handleDataChange" />
+  </div>
+</template>
+
+<style scoped>
+.content {
+  padding: 40px;
+  display: grid;
+  justify-content: center;
+  margin-top: -1px;
+  position: relative;
+}
+button {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 2em;
+  padding: 3px;
+  line-height: 0.8em;
+  margin: 0;
+  z-index: 2;
+  cursor: pointer;
+}
+hr {
+  margin: 10px -40px;
+  opacity: 0.4;
+}
+</style>
diff --git a/src/components/advanced-search/BoxSet.tsx b/src/components/advanced-search/BoxSet.tsx
deleted file mode 100644
index 214b198..0000000
--- a/src/components/advanced-search/BoxSet.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { createMemo } from "solid-js";
-import { css } from "solid-styled";
-import { Button } from "$lib/components";
-import { BoxContent } from "./BoxContent";
-import type { Box } from "$stores";
-
-interface BoxSetProps {
-  box: Box;
-  onBoxChange?: (box: Box) => void;
-  onClose?: () => void;
-}
-
-export function BoxSet(props: BoxSetProps) {
-  const dropdownColor = createMemo(() => (props.box.matchType === "Require" ? 111 : 0));
-
-  const flipType = () => {
-    props.onBoxChange?.({
-      ...props.box,
-      matchType: props.box.matchType === "Require" ? "Exclude" : "Require",
-    });
-  };
-
-  css`
-    .box {
-      display: grid;
-      padding: 20px 0;
-      margin-bottom: 20px;
-    }
-    .dropdown-container {
-      display: flex;
-      justify-content: center;
-      margin: -25px;
-      z-index: 2;
-    }
-  `;
-
-  return (
-    <div class="box">
-      <div class="dropdown-container">
-        <Button onClick={flipType} hue={dropdownColor()}>
-          {props.box.matchType}
-        </Button>
-      </div>
-
-      <BoxContent
-        name={props.box.name}
-        data={props.box.data}
-        hue={dropdownColor()}
-        onClose={props.onClose}
-        onNameChange={(name) => props.onBoxChange?.({ ...props.box, name } as Box)}
-        onDataChange={(data) => props.onBoxChange?.({ ...props.box, data } as Box)}
-      />
-    </div>
-  );
-}
diff --git a/src/components/advanced-search/BoxSet.vue b/src/components/advanced-search/BoxSet.vue
new file mode 100644
index 0000000..6647ccf
--- /dev/null
+++ b/src/components/advanced-search/BoxSet.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Button } from "$lib/components";
+import BoxContent from "./BoxContent.vue";
+import type { Box } from "$stores";
+
+interface Props {
+  box: Box;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  boxChange: [box: Box];
+  close: [];
+}>();
+
+const dropdownColor = computed(() => (props.box.matchType === "Require" ? 111 : 0));
+
+const flipType = () => {
+  emit("boxChange", {
+    ...props.box,
+    matchType: props.box.matchType === "Require" ? "Exclude" : "Require",
+  });
+};
+
+function handleNameChange(name: string) {
+  emit("boxChange", { ...props.box, name } as Box);
+}
+
+function handleDataChange(data: any) {
+  emit("boxChange", { ...props.box, data } as Box);
+}
+</script>
+
+<template>
+  <div class="box">
+    <div class="dropdown-container">
+      <Button @click="flipType" :hue="dropdownColor">
+        {{ props.box.matchType }}
+      </Button>
+    </div>
+
+    <BoxContent
+      :name="props.box.name"
+      :data="props.box.data"
+      :hue="dropdownColor"
+      @close="emit('close')"
+      @name-change="handleNameChange"
+      @data-change="handleDataChange"
+    />
+  </div>
+</template>
+
+<style scoped>
+.box {
+  display: grid;
+  padding: 20px 0;
+  margin-bottom: 20px;
+}
+.dropdown-container {
+  display: flex;
+  justify-content: center;
+  margin: -25px;
+  z-index: 2;
+}
+</style>
diff --git a/src/components/advanced-search/Button.tsx b/src/components/advanced-search/Button.tsx
deleted file mode 100644
index 9bc4112..0000000
--- a/src/components/advanced-search/Button.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { type JSX } from "solid-js";
-import { css } from "solid-styled";
-
-interface ButtonProps {
-  hue?: number;
-  disabled?: boolean;
-  onClick?: () => void;
-  children?: JSX.Element;
-}
-
-export function Button(props: ButtonProps) {
-  css`
-    button {
-      margin: 0;
-      padding: 5px 15px;
-      border-radius: 4px;
-      box-shadow: 0px 4px 3px 0px #00000017;
-      cursor: pointer;
-    }
-    button:focus,
-    button:active {
-      color: var(--hsl);
-      border: 1px solid var(--hsl);
-      background: hsl(var(--hue), 100%, 95%);
-    }
-    button:active {
-      background: hsl(var(--hue), 70%, 95%);
-      transform: scale(0.95);
-    }
-    .disabled {
-      border: 1px solid hsl(var(--hue), 40%, 75%);
-      color: hsl(var(--hue), 40%, 75%);
-      cursor: auto;
-    }
-  `;
-
-  return (
-    <button
-      onClick={props.onClick}
-      class={`styled ${props.disabled ? "disabled" : ""}`}
-      style={`--hue: ${props.hue ?? 170}`}
-      disabled={props.disabled}
-    >
-      {props.children}
-    </button>
-  );
-}
diff --git a/src/components/advanced-search/Button.vue b/src/components/advanced-search/Button.vue
new file mode 100644
index 0000000..7321e24
--- /dev/null
+++ b/src/components/advanced-search/Button.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  hue?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hue: 170,
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+const style = computed(() => `--hue: ${props.hue}`);
+const btnClass = computed(() => ["styled", props.disabled && "disabled"].filter(Boolean).join(" "));
+</script>
+
+<template>
+  <button :class="btnClass" :style="style" :disabled="props.disabled" @click="emit('click')">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+button {
+  margin: 0;
+  padding: 5px 15px;
+  border-radius: 4px;
+  box-shadow: 0px 4px 3px 0px #00000017;
+  cursor: pointer;
+}
+button:focus,
+button:active {
+  color: var(--hsl);
+  border: 1px solid var(--hsl);
+  background: hsl(var(--hue), 100%, 95%);
+}
+button:active {
+  background: hsl(var(--hue), 70%, 95%);
+  transform: scale(0.95);
+}
+.disabled {
+  border: 1px solid hsl(var(--hue), 40%, 75%);
+  color: hsl(var(--hue), 40%, 75%);
+  cursor: auto;
+}
+</style>
diff --git a/src/components/advanced-search/Dropdown.tsx b/src/components/advanced-search/Dropdown.tsx
deleted file mode 100644
index 323075e..0000000
--- a/src/components/advanced-search/Dropdown.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { For } from "solid-js";
-import { css } from "solid-styled";
-
-interface DropdownProps {
-  hue?: number;
-  options?: string[];
-  value?: string;
-  disabled?: boolean;
-  onChange?: (value: string) => void;
-}
-
-export function Dropdown(props: DropdownProps) {
-  css`
-    select {
-      box-shadow: 0px 4px 3px 0px #00000017;
-      cursor: pointer;
-    }
-    select:focus {
-      outline: none;
-    }
-    select:disabled {
-      opacity: 1;
-      filter: brightness(95%);
-      cursor: auto;
-    }
-  `;
-
-  return (
-    <select
-      disabled={props.disabled}
-      class="styled"
-      style={`--hue: ${props.hue ?? 111}`}
-      value={props.value}
-      onChange={(e) => props.onChange?.(e.currentTarget.value)}
-    >
-      <For each={props.options ?? ["Dropdown"]}>{(option) => <option>{option}</option>}</For>
-    </select>
-  );
-}
diff --git a/src/components/advanced-search/Dropdown.vue b/src/components/advanced-search/Dropdown.vue
new file mode 100644
index 0000000..138992f
--- /dev/null
+++ b/src/components/advanced-search/Dropdown.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  hue?: number;
+  options?: string[];
+  modelValue?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hue: 111,
+  options: () => ["Dropdown"],
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const style = computed(() => `--hue: ${props.hue}`);
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLSelectElement;
+  emit("update:modelValue", target.value);
+}
+</script>
+
+<template>
+  <select
+    :disabled="props.disabled"
+    class="styled"
+    :style="style"
+    :value="props.modelValue"
+    @change="handleChange"
+  >
+    <option v-for="option in props.options" :key="option" :value="option">
+      {{ option }}
+    </option>
+  </select>
+</template>
+
+<style scoped>
+select {
+  box-shadow: 0px 4px 3px 0px #00000017;
+  cursor: pointer;
+}
+select:focus {
+  outline: none;
+}
+select:disabled {
+  opacity: 1;
+  filter: brightness(95%);
+  cursor: auto;
+}
+</style>
diff --git a/src/components/advanced-search/Input.tsx b/src/components/advanced-search/Input.tsx
deleted file mode 100644
index bdf9856..0000000
--- a/src/components/advanced-search/Input.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { createSignal, createEffect } from "solid-js";
-import { css } from "solid-styled";
-
-type Mutator = (text: string) => any;
-type Validator = (text: string, mutatedValue: any) => string | true;
-
-interface InputProps {
-  value?: any;
-  mutator?: Mutator;
-  validator?: Validator;
-  hue?: number;
-  placeholder?: string;
-  onChange?: (value: any) => void;
-}
-
-export function Input(props: InputProps) {
-  const [text, setText] = createSignal(props.value ?? "");
-  const [errText, setErrText] = createSignal("");
-
-  createEffect(() => {
-    const mutator = props.mutator ?? ((t: any) => t);
-    const validator = props.validator ?? (() => true);
-
-    const newValue = mutator(text());
-    const isValid = validator(text(), newValue);
-
-    if (isValid === true) {
-      props.onChange?.(newValue);
-      setErrText("");
-    } else {
-      setErrText(isValid);
-    }
-  });
-
-  css`
-    p {
-      color: red;
-    }
-  `;
-
-  return (
-    <>
-      <input
-        class="styled"
-        style={`--hue: ${props.hue ?? 35}`}
-        type="text"
-        autocorrect="off"
-        placeholder={props.placeholder}
-        value={text()}
-        onInput={(e) => setText(e.currentTarget.value)}
-      />
-      <p>{errText()}</p>
-    </>
-  );
-}
diff --git a/src/components/advanced-search/Input.vue b/src/components/advanced-search/Input.vue
new file mode 100644
index 0000000..6709804
--- /dev/null
+++ b/src/components/advanced-search/Input.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+
+type Mutator = (text: string) => any;
+type Validator = (text: string, mutatedValue: any) => string | true;
+
+interface Props {
+  modelValue?: any;
+  mutator?: Mutator;
+  validator?: Validator;
+  hue?: number;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  hue: 35,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: any];
+}>();
+
+const text = ref(props.modelValue ?? "");
+const errText = ref("");
+
+const style = computed(() => `--hue: ${props.hue}`);
+
+watch(
+  text,
+  (newText) => {
+    const mutator = props.mutator ?? ((t: any) => t);
+    const validator = props.validator ?? (() => true);
+
+    const newValue = mutator(newText);
+    const isValid = validator(newText, newValue);
+
+    if (isValid === true) {
+      emit("update:modelValue", newValue);
+      errText.value = "";
+    } else {
+      errText.value = isValid;
+    }
+  },
+  { immediate: true },
+);
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  text.value = target.value;
+}
+</script>
+
+<template>
+  <div>
+    <input
+      class="styled"
+      :style="style"
+      type="text"
+      autocorrect="off"
+      :placeholder="props.placeholder"
+      :value="text"
+      @input="handleInput"
+    />
+    <p>{{ errText }}</p>
+  </div>
+</template>
+
+<style scoped>
+p {
+  color: red;
+}
+</style>
diff --git a/src/components/advanced-search/NumberInput.tsx b/src/components/advanced-search/NumberInput.tsx
deleted file mode 100644
index fde55c6..0000000
--- a/src/components/advanced-search/NumberInput.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { createSignal, createEffect } from "solid-js";
-import { css } from "solid-styled";
-
-interface NumberInputProps {
-  value?: number;
-  type?: "dec" | "hex" | "bin";
-  onChange?: (value: number) => void;
-}
-
-function parseHex(hex: string) {
-  if (!/^[A-Fa-f0-9]+$/.test(hex)) return NaN;
-  return parseInt(hex, 16);
-}
-
-function parseBin(bin: string) {
-  if (!/^[01]+$/.test(bin)) return NaN;
-  return parseInt(bin, 2);
-}
-
-function getValue(type: string | undefined, text: string | number) {
-  if (type === "hex") return parseHex(String(text));
-  if (type === "bin") return parseBin(String(text));
-  return Number(text);
-}
-
-function getText(type: string | undefined, value: number) {
-  if (type === "hex") return value.toString(16);
-  if (type === "bin") return value.toString(2);
-  return String(value);
-}
-
-function* cycle<T>(arr: T[]) {
-  while (true) {
-    yield* arr;
-  }
-}
-
-export function NumberInput(props: NumberInputProps) {
-  const [currText, setCurrText] = createSignal<string | number>(props.value ?? 0);
-  const [errText, setErrText] = createSignal("");
-  const [type, setType] = createSignal<"dec" | "hex" | "bin">(props.type ?? "dec");
-
-  const typeIter = cycle(["hex", "bin", "dec"] as const);
-
-  createEffect(() => {
-    const newVal = getValue(type(), currText());
-    if (Number.isNaN(newVal)) {
-      setErrText("Invalid input");
-    } else {
-      setErrText("");
-      props.onChange?.(newVal);
-    }
-  });
-
-  function changeType() {
-    const nextType = typeIter.next().value;
-    if (nextType) {
-      setType(nextType);
-      const currentVal = getValue(type(), currText());
-      if (!Number.isNaN(currentVal)) {
-        setCurrText(getText(nextType, currentVal));
-      }
-    }
-  }
-
-  css`
-    p {
-      margin: 0;
-      color: red;
-    }
-  `;
-
-  return (
-    <>
-      <div>
-        <input
-          class="styled"
-          style="--hue: 35"
-          type="text"
-          value={currText()}
-          onInput={(e) => setCurrText(e.currentTarget.value)}
-        />
-        <button class="styled" style="--hue: 35" onClick={changeType}>
-          {type()}
-        </button>
-      </div>
-      <p>{errText()}</p>
-    </>
-  );
-}
diff --git a/src/components/advanced-search/NumberInput.vue b/src/components/advanced-search/NumberInput.vue
new file mode 100644
index 0000000..71be22d
--- /dev/null
+++ b/src/components/advanced-search/NumberInput.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+interface Props {
+  modelValue?: number;
+  type?: "dec" | "hex" | "bin";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  type: "dec",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: number];
+}>();
+
+function parseHex(hex: string) {
+  if (!/^[A-Fa-f0-9]+$/.test(hex)) return NaN;
+  return parseInt(hex, 16);
+}
+
+function parseBin(bin: string) {
+  if (!/^[01]+$/.test(bin)) return NaN;
+  return parseInt(bin, 2);
+}
+
+function getValue(t: string, text: string | number) {
+  if (t === "hex") return parseHex(String(text));
+  if (t === "bin") return parseBin(String(text));
+  return Number(text);
+}
+
+function getText(t: string, value: number) {
+  if (t === "hex") return value.toString(16);
+  if (t === "bin") return value.toString(2);
+  return String(value);
+}
+
+function* cycle<T>(arr: T[]) {
+  while (true) {
+    yield* arr;
+  }
+}
+
+const currText = ref<string | number>(props.modelValue ?? 0);
+const errText = ref("");
+const type = ref<"dec" | "hex" | "bin">(props.type ?? "dec");
+
+const typeIter = cycle(["hex", "bin", "dec"] as const);
+
+watch(
+  [currText, type],
+  ([text, t]) => {
+    const newVal = getValue(t, text);
+    if (Number.isNaN(newVal)) {
+      errText.value = "Invalid input";
+    } else {
+      errText.value = "";
+      emit("update:modelValue", newVal);
+    }
+  },
+  { immediate: true },
+);
+
+function changeType() {
+  const nextType = typeIter.next().value;
+  if (nextType) {
+    const currentVal = getValue(type.value, currText.value);
+    type.value = nextType;
+    if (!Number.isNaN(currentVal)) {
+      currText.value = getText(nextType, currentVal);
+    }
+  }
+}
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  currText.value = target.value;
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <input class="styled" style="--hue: 35" type="text" :value="currText" @input="handleInput" />
+      <button class="styled" style="--hue: 35" @click="changeType">
+        {{ type }}
+      </button>
+    </div>
+    <p>{{ errText }}</p>
+  </div>
+</template>
+
+<style scoped>
+p {
+  margin: 0;
+  color: red;
+}
+</style>
diff --git a/src/components/advanced-search/box-types/BidiClass.tsx b/src/components/advanced-search/box-types/BidiClass.tsx
deleted file mode 100644
index d1dc535..0000000
--- a/src/components/advanced-search/box-types/BidiClass.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createSignal, createEffect } from "solid-js";
-import { BidiClassMap } from "$utils/unicode";
-import { Dropdown } from "../Dropdown";
-
-interface BidiClassProps {
-  data?: string;
-  onDataChange?: (data: string) => void;
-}
-
-const displayToBidiMap = new Map(
-  [...BidiClassMap.entries()].map(([className, displayName]) => {
-    return [`${className} (${displayName})`, className];
-  }),
-);
-const names = [...displayToBidiMap.keys()];
-
-export function BidiClass(props: BidiClassProps) {
-  const [displayName, setDisplayName] = createSignal<string>(names[0]!);
-
-  createEffect(() => {
-    const bidiClass = displayToBidiMap.get(displayName());
-    if (bidiClass) {
-      props.onDataChange?.(bidiClass);
-    }
-  });
-
-  return <Dropdown options={names} hue={35} value={displayName()} onChange={setDisplayName} />;
-}
diff --git a/src/components/advanced-search/box-types/BidiClass.vue b/src/components/advanced-search/box-types/BidiClass.vue
new file mode 100644
index 0000000..1469d2f
--- /dev/null
+++ b/src/components/advanced-search/box-types/BidiClass.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { BidiClassMap } from "$utils/unicode";
+import Dropdown from "../Dropdown.vue";
+
+interface Props {
+  data?: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  dataChange: [data: string];
+}>();
+
+const displayToBidiMap = new Map(
+  [...BidiClassMap.entries()].map(([className, displayName]) => {
+    return [`${className} (${displayName})`, className];
+  }),
+);
+const names = [...displayToBidiMap.keys()];
+
+const displayName = ref<string>(names[0]!);
+
+watch(
+  displayName,
+  (val) => {
+    const bidiClass = displayToBidiMap.get(val);
+    if (bidiClass) {
+      emit("dataChange", bidiClass);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Dropdown :options="names" :hue="35" v-model="displayName" />
+</template>
diff --git a/src/components/advanced-search/box-types/CodepointRange.tsx b/src/components/advanced-search/box-types/CodepointRange.tsx
deleted file mode 100644
index 50b5185..0000000
--- a/src/components/advanced-search/box-types/CodepointRange.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createSignal, createEffect } from "solid-js";
-import { NumberInput } from "../NumberInput";
-
-interface CodepointRangeProps {
-  data?: { from: number; to: number };
-  onDataChange?: (data: { from: number; to: number }) => void;
-}
-
-export function CodepointRange(props: CodepointRangeProps) {
-  const [from, setFrom] = createSignal(props.data?.from ?? 0);
-  const [to, setTo] = createSignal(props.data?.to ?? 65535);
-
-  createEffect(() => {
-    props.onDataChange?.({ from: from(), to: to() });
-  });
-
-  return (
-    <div>
-      <span>From</span>
-      <NumberInput value={from()} onChange={setFrom} />
-      <span>To</span>
-      <NumberInput value={to()} onChange={setTo} />
-    </div>
-  );
-}
diff --git a/src/components/advanced-search/box-types/CodepointRange.vue b/src/components/advanced-search/box-types/CodepointRange.vue
new file mode 100644
index 0000000..e37939e
--- /dev/null
+++ b/src/components/advanced-search/box-types/CodepointRange.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import NumberInput from "../NumberInput.vue";
+
+interface Props {
+  data?: { from: number; to: number };
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  dataChange: [data: { from: number; to: number }];
+}>();
+
+const from = ref(props.data?.from ?? 0);
+const to = ref(props.data?.to ?? 65535);
+
+watch(
+  [from, to],
+  ([f, t]) => {
+    emit("dataChange", { from: f, to: t });
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <span>From</span>
+    <NumberInput v-model="from" />
+    <span>To</span>
+    <NumberInput v-model="to" />
+  </div>
+</template>
diff --git a/src/components/advanced-search/box-types/NameIncludes.tsx b/src/components/advanced-search/box-types/NameIncludes.tsx
deleted file mode 100644
index 4187961..0000000
--- a/src/components/advanced-search/box-types/NameIncludes.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createSignal, createEffect } from "solid-js";
-import { Input } from "../Input";
-
-interface NameIncludesProps {
-  data?: string;
-  onDataChange?: (data: string) => void;
-}
-
-export function NameIncludes(props: NameIncludesProps) {
-  const [text, setText] = createSignal(props.data ?? "symbol");
-
-  createEffect(() => {
-    props.onDataChange?.(text());
-  });
-
-  function validator(text: string) {
-    if (/^[A-Za-z0-9 ()<>,-]+$/.test(text)) return true;
-    return "Impossible name";
-  }
-
-  return <Input placeholder="text" validator={validator} value={text()} onChange={setText} />;
-}
diff --git a/src/components/advanced-search/box-types/NameIncludes.vue b/src/components/advanced-search/box-types/NameIncludes.vue
new file mode 100644
index 0000000..2f38c9b
--- /dev/null
+++ b/src/components/advanced-search/box-types/NameIncludes.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Input from "../Input.vue";
+
+interface Props {
+  data?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  dataChange: [data: string];
+}>();
+
+const text = ref(props.data ?? "symbol");
+
+watch(
+  text,
+  (value) => {
+    emit("dataChange", value);
+  },
+  { immediate: true },
+);
+
+function validator(str: string) {
+  if (/^[A-Za-z0-9 ()<>,-]+$/.test(str)) return true;
+  return "Impossible name";
+}
+</script>
+
+<template>
+  <Input placeholder="text" :validator="validator" v-model="text" />
+</template>
diff --git a/src/components/advanced-search/box-types/RegexMatch.tsx b/src/components/advanced-search/box-types/RegexMatch.tsx
deleted file mode 100644
index c674351..0000000
--- a/src/components/advanced-search/box-types/RegexMatch.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { createSignal, createEffect } from "solid-js";
-import { Input } from "../Input";
-import { Dropdown } from "../Dropdown";
-
-type Data = { regex: RegExp; matchOn: "Character" | "Name" };
-
-interface RegexMatchProps {
-  data?: Data;
-  onDataChange?: (data: Data) => void;
-}
-
-export function getRegexFromString(text: string) {
-  const res = text.match(/^\/(.+)\/([A-Za-z]*)$/);
-  if (!res) return null;
-
-  const [, regex, flags] = res;
-  try {
-    return new RegExp(regex!, flags);
-  } catch {
-    return null;
-  }
-}
-
-export function RegexMatch(props: RegexMatchProps) {
-  const [regex, setRegex] = createSignal("/[A-Za-z]/u");
-  const [matchOn, setMatchOn] = createSignal<"Character" | "Name">("Character");
-
-  createEffect(() => {
-    const regexObj = getRegexFromString(regex());
-    if (regexObj) {
-      props.onDataChange?.({ regex: regexObj, matchOn: matchOn() });
-    }
-  });
-
-  function validateRegex(text: string) {
-    if (getRegexFromString(text)) return true;
-    return "invalid regex";
-  }
-
-  return (
-    <>
-      <span>Regex</span>
-      <Input
-        placeholder="regular expression"
-        validator={validateRegex}
-        value={regex()}
-        onChange={setRegex}
-      />
-
-      <span>Match On</span>
-      <Dropdown
-        options={["Character", "Name"]}
-        hue={35}
-        value={matchOn()}
-        onChange={(v) => setMatchOn(v as "Character" | "Name")}
-      />
-    </>
-  );
-}
diff --git a/src/components/advanced-search/box-types/RegexMatch.vue b/src/components/advanced-search/box-types/RegexMatch.vue
new file mode 100644
index 0000000..281c241
--- /dev/null
+++ b/src/components/advanced-search/box-types/RegexMatch.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Input from "../Input.vue";
+import Dropdown from "../Dropdown.vue";
+
+type Data = { regex: RegExp; matchOn: "Character" | "Name" };
+
+interface Props {
+  data?: Data;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  dataChange: [data: Data];
+}>();
+
+function getRegexFromString(text: string) {
+  const res = text.match(/^\/(.+)\/([A-Za-z]*)$/);
+  if (!res) return null;
+
+  const [, regex, flags] = res;
+  try {
+    return new RegExp(regex!, flags);
+  } catch {
+    return null;
+  }
+}
+
+const regex = ref("/[A-Za-z]/u");
+const matchOn = ref<"Character" | "Name">("Character");
+
+watch(
+  [regex, matchOn],
+  ([regexStr, match]) => {
+    const regexObj = getRegexFromString(regexStr);
+    if (regexObj) {
+      emit("dataChange", { regex: regexObj, matchOn: match });
+    }
+  },
+  { immediate: true },
+);
+
+function validateRegex(text: string) {
+  if (getRegexFromString(text)) return true;
+  return "invalid regex";
+}
+
+function handleMatchOnChange(val: string) {
+  matchOn.value = val as "Character" | "Name";
+}
+</script>
+
+<template>
+  <div>
+    <span>Regex</span>
+    <Input placeholder="regular expression" :validator="validateRegex" v-model="regex" />
+
+    <span>Match On</span>
+    <Dropdown
+      :options="['Character', 'Name']"
+      :hue="35"
+      :model-value="matchOn"
+      @update:model-value="handleMatchOnChange"
+    />
+  </div>
+</template>
diff --git a/src/components/advanced-search/box-types/UnicodeBlock.tsx b/src/components/advanced-search/box-types/UnicodeBlock.tsx
deleted file mode 100644
index 112687d..0000000
--- a/src/components/advanced-search/box-types/UnicodeBlock.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { createSignal, createEffect, createMemo } from "solid-js";
-import { Dropdown } from "../Dropdown";
-import { blockLookupSig } from "$stores";
-
-interface UnicodeBlockProps {
-  data?: string;
-  onDataChange?: (data: string) => void;
-}
-
-export function UnicodeBlock(props: UnicodeBlockProps) {
-  const blockNames = createMemo(() => blockLookupSig().map((block) => block.name));
-  const [shouldSort, setShouldSort] = createSignal(true);
-  const [blockName, setBlockName] = createSignal<string>("");
-
-  const blocks = createMemo(() => (shouldSort() ? [...blockNames()].sort() : blockNames()));
-
-  // Initialize with first block name
-  createEffect(() => {
-    const names = blockNames();
-    if (names.length > 0 && !blockName()) {
-      setBlockName(names[0]!);
-    }
-  });
-
-  createEffect(() => {
-    if (blockName()) {
-      props.onDataChange?.(blockName());
-    }
-  });
-
-  return (
-    <>
-      <Dropdown options={blocks()} hue={35} value={blockName()} onChange={setBlockName} />
-
-      <label>
-        <span>Sort Blocks Alphabetically</span>
-        <input
-          type="checkbox"
-          checked={shouldSort()}
-          onChange={(e) => setShouldSort(e.currentTarget.checked)}
-        />
-      </label>
-    </>
-  );
-}
diff --git a/src/components/advanced-search/box-types/UnicodeBlock.vue b/src/components/advanced-search/box-types/UnicodeBlock.vue
new file mode 100644
index 0000000..f0ac6af
--- /dev/null
+++ b/src/components/advanced-search/box-types/UnicodeBlock.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import Dropdown from "../Dropdown.vue";
+import { blockLookup } from "$stores";
+
+interface Props {
+  data?: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  dataChange: [data: string];
+}>();
+
+const blockNames = computed(() => blockLookup.value.map((block) => block.name));
+const shouldSort = ref(true);
+const blockName = ref<string>("");
+
+const blocks = computed(() => (shouldSort.value ? [...blockNames.value].sort() : blockNames.value));
+
+// Initialize with first block name
+watch(
+  blockNames,
+  (names) => {
+    if (names.length > 0 && !blockName.value) {
+      blockName.value = names[0]!;
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  blockName,
+  (name) => {
+    if (name) {
+      emit("dataChange", name);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <Dropdown :options="blocks" :hue="35" v-model="blockName" />
+
+    <label>
+      <span>Sort Blocks Alphabetically</span>
+      <input type="checkbox" v-model="shouldSort" />
+    </label>
+  </div>
+</template>
diff --git a/src/components/advanced-search/box-types/UnicodePlane.tsx b/src/components/advanced-search/box-types/UnicodePlane.tsx
deleted file mode 100644
index 688b8ef..0000000
--- a/src/components/advanced-search/box-types/UnicodePlane.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createSignal, createEffect } from "solid-js";
-import { Dropdown } from "../Dropdown";
-import { planeMap } from "$utils/unicode";
-
-interface UnicodePlaneProps {
-  data?: number;
-  onDataChange?: (data: number) => void;
-}
-
-const nameToNumMap = new Map<string, number>(
-  Array.from({ length: 17 }).map((_, i) => {
-    const name = planeMap.get(i) || "Unassigned";
-    return [`(${i}) ${name}`, i];
-  }),
-);
-const names = [...nameToNumMap.keys()];
-
-export function UnicodePlane(props: UnicodePlaneProps) {
-  const [activeName, setActiveName] = createSignal(names[0]!);
-
-  createEffect(() => {
-    const planeNum = nameToNumMap.get(activeName());
-    if (planeNum !== undefined) {
-      props.onDataChange?.(planeNum);
-    }
-  });
-
-  return <Dropdown options={names} hue={35} value={activeName()} onChange={setActiveName} />;
-}
diff --git a/src/components/advanced-search/box-types/UnicodePlane.vue b/src/components/advanced-search/box-types/UnicodePlane.vue
new file mode 100644
index 0000000..c537864
--- /dev/null
+++ b/src/components/advanced-search/box-types/UnicodePlane.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Dropdown from "../Dropdown.vue";
+import { planeMap } from "$utils/unicode";
+
+interface Props {
+  data?: number;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  dataChange: [data: number];
+}>();
+
+const nameToNumMap = new Map<string, number>(
+  Array.from({ length: 17 }).map((_, i) => {
+    const name = planeMap.get(i) || "Unassigned";
+    return [`(${i}) ${name}`, i];
+  }),
+);
+const names = [...nameToNumMap.keys()];
+
+const activeName = ref(names[0]!);
+
+watch(
+  activeName,
+  (name) => {
+    const planeNum = nameToNumMap.get(name);
+    if (planeNum !== undefined) {
+      emit("dataChange", planeNum);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Dropdown :options="names" :hue="35" v-model="activeName" />
+</template>
diff --git a/src/components/advanced-search/box-types/UnicodeProperty.tsx b/src/components/advanced-search/box-types/UnicodeProperty.tsx
deleted file mode 100644
index fdcc706..0000000
--- a/src/components/advanced-search/box-types/UnicodeProperty.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { createSignal, createEffect, Show } from "solid-js";
-import { Dropdown } from "../Dropdown";
-import { properties, scripts } from "$utils/unicode";
-
-interface UnicodePropertyProps {
-  data?: string;
-  onDataChange?: (data: string) => void;
-}
-
-export function UnicodeProperty(props: UnicodePropertyProps) {
-  const [activeProperty, setActiveProperty] = createSignal(properties[0]!);
-  const [activeScript, setActiveScript] = createSignal(scripts[0]!);
-
-  createEffect(() => {
-    if (activeProperty() === "Script") {
-      props.onDataChange?.(`Script=${activeScript()}`);
-    } else {
-      props.onDataChange?.(activeProperty());
-    }
-  });
-
-  return (
-    <>
-      <Dropdown
-        options={properties}
-        hue={35}
-        value={activeProperty()}
-        onChange={setActiveProperty}
-      />
-
-      <Show when={activeProperty() === "Script"}>
-        <Dropdown options={scripts} hue={35} value={activeScript()} onChange={setActiveScript} />
-      </Show>
-    </>
-  );
-}
diff --git a/src/components/advanced-search/box-types/UnicodeProperty.vue b/src/components/advanced-search/box-types/UnicodeProperty.vue
new file mode 100644
index 0000000..958359c
--- /dev/null
+++ b/src/components/advanced-search/box-types/UnicodeProperty.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Dropdown from "../Dropdown.vue";
+import { properties, scripts } from "$utils/unicode";
+
+interface Props {
+  data?: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  dataChange: [data: string];
+}>();
+
+const activeProperty = ref(properties[0]!);
+const activeScript = ref(scripts[0]!);
+
+watch(
+  [activeProperty, activeScript],
+  ([property, script]) => {
+    const value = property === "Script" ? `Script=${script}` : property;
+    emit("dataChange", value);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <Dropdown :options="properties" :hue="35" v-model="activeProperty" />
+
+    <Dropdown
+      v-if="activeProperty === 'Script'"
+      :options="scripts"
+      :hue="35"
+      v-model="activeScript"
+    />
+  </div>
+</template>
diff --git a/src/components/advanced-search/box-types/index.ts b/src/components/advanced-search/box-types/index.ts
index 719997a..3c903e8 100644
--- a/src/components/advanced-search/box-types/index.ts
+++ b/src/components/advanced-search/box-types/index.ts
@@ -1,13 +1,13 @@
-import { BidiClass } from "./BidiClass";
-import { CodepointRange } from "./CodepointRange";
-import { NameIncludes } from "./NameIncludes";
-import { RegexMatch } from "./RegexMatch";
-import { UnicodeBlock } from "./UnicodeBlock";
-import { UnicodePlane } from "./UnicodePlane";
-import { UnicodeProperty } from "./UnicodeProperty";
-import type { Component } from "solid-js";
+import BidiClass from "./BidiClass.vue";
+import CodepointRange from "./CodepointRange.vue";
+import NameIncludes from "./NameIncludes.vue";
+import RegexMatch from "./RegexMatch.vue";
+import UnicodeBlock from "./UnicodeBlock.vue";
+import UnicodePlane from "./UnicodePlane.vue";
+import UnicodeProperty from "./UnicodeProperty.vue";
+import type { Component } from "vue";
 
-const entries: [string, Component<{ data?: any; onDataChange?: (data: any) => void }>][] = [
+const entries: [string, Component][] = [
   ["Codepoint Range", CodepointRange],
   ["Name Includes", NameIncludes],
   ["Regex Match", RegexMatch],
diff --git a/src/components/table-container/InfoContainer.tsx b/src/components/table-container/InfoContainer.tsx
deleted file mode 100644
index 5b2cf6d..0000000
--- a/src/components/table-container/InfoContainer.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { createMemo, For } from "solid-js";
-import { css } from "solid-styled";
-import {
-  getPropertiesForChar,
-  getPlaneForCodepoint,
-  getCodepointBlock,
-  Category,
-  getDecompFromStr,
-  BidiClassMap,
-} from "$utils/unicode";
-import { blockLookupSig, symbolHtmlNamesMapSig } from "$stores";
-
-import { CaseMapping } from "./info-tables/CaseMapping";
-import { Encoding } from "./info-tables/Encoding";
-import { NumberEquiv } from "./info-tables/NumberEquiv";
-import { HtmlEntities } from "./info-tables/HtmlEntities";
-import { Properties } from "./info-tables/Properties";
-import type { UnicodeMapData } from "@emnudge/unicode-query";
-
-interface InfoContainerProps {
-  codepoint: number;
-  name: string;
-  info: UnicodeMapData;
-}
-
-export function InfoContainer(props: InfoContainerProps) {
-  const category = createMemo(
-    () => `${props.info.category} (${Category[props.info.category as keyof typeof Category]})`,
-  );
-  const charBlock = createMemo(() => getCodepointBlock(blockLookupSig(), props.codepoint));
-  const planeData = createMemo(() => getPlaneForCodepoint(props.codepoint));
-
-  const decomposition = createMemo(() =>
-    props.info.decompositionStr ? getDecompFromStr(props.info.decompositionStr) : null,
-  );
-  const decompText = createMemo(() =>
-    decomposition() != null
-      ? `<${decomposition()!.type}> ${decomposition()!.codepoints.join(" ")}`
-      : "",
-  );
-
-  const baseInfo = createMemo(
-    () =>
-      [
-        ["Bidi Class", `${props.info.bidiClass} (${BidiClassMap.get(props.info.bidiClass)})`],
-        !!props.info.oldName &&
-          props.info.oldName !== props.name && ["Old Name", props.info.oldName],
-        ["Codepoint", props.codepoint],
-        ["Category", category()],
-        !!decompText() && ["Decomposition", decompText()],
-        [
-          "Plane",
-          planeData().name
-            ? `${planeData().name} (Plane ${planeData().number}) `
-            : `Plane ${planeData().number}`,
-        ],
-        ["Block", `${charBlock().name} (Range ${charBlock().range[0]}-${charBlock().range[1]}) `],
-      ].filter(Boolean) as [string, string][],
-  );
-
-  const properties = createMemo(() => getPropertiesForChar(String.fromCodePoint(props.codepoint)));
-
-  const htmlEntityNames = createMemo(() => symbolHtmlNamesMapSig().get(props.codepoint) ?? []);
-
-  css`
-    div.container {
-      border-radius: 8px;
-      padding: 20px;
-    }
-    .basic-info {
-      display: grid;
-    }
-    td {
-      padding: 5px;
-    }
-    td:nth-child(1) {
-      font-weight: bold;
-    }
-    tr:nth-child(odd) {
-      background-color: var(--bg-offset);
-    }
-    h1 {
-      text-align: center;
-    }
-    .display-box {
-      background-color: var(--bg-offset);
-      height: 64px;
-      width: 64px;
-      font-size: 3em;
-      border: 1px solid grey;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 12px 0;
-    }
-    header {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  `;
-
-  return (
-    <div class="container" style={`--item-num: ${Math.ceil(properties().length / 2)}`}>
-      <header>
-        <h1>{props.name}</h1>
-        <div class="display-box">
-          <span>{String.fromCodePoint(props.codepoint)}</span>
-        </div>
-      </header>
-      <table class="basic-info">
-        <tbody>
-          <For each={baseInfo()}>
-            {([name, value]) => (
-              <tr>
-                <td>{name}</td>
-                <td>{value}</td>
-              </tr>
-            )}
-          </For>
-        </tbody>
-      </table>
-
-      <HtmlEntities codepoint={props.codepoint} names={htmlEntityNames()} />
-      <CaseMapping
-        lowercaseMapping={props.info.lowercaseMapping}
-        titlecaseMapping={props.info.titlecaseMapping}
-        uppercaseMapping={props.info.uppercaseMapping}
-      />
-      <NumberEquiv
-        digitEquiv={props.info.digitEquiv}
-        numericEquiv={props.info.numericEquiv}
-        decimalEquiv={props.info.decimalEquiv}
-      />
-      <Encoding codepoint={props.codepoint} />
-
-      <br />
-      <Properties properties={properties()} />
-    </div>
-  );
-}
diff --git a/src/components/table-container/InfoContainer.vue b/src/components/table-container/InfoContainer.vue
new file mode 100644
index 0000000..40f7a0c
--- /dev/null
+++ b/src/components/table-container/InfoContainer.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  getPropertiesForChar,
+  getPlaneForCodepoint,
+  getCodepointBlock,
+  Category,
+  getDecompFromStr,
+  BidiClassMap,
+} from "$utils/unicode";
+import { blockLookup, symbolHtmlNamesMap } from "$stores";
+
+import CaseMapping from "./info-tables/CaseMapping.vue";
+import Encoding from "./info-tables/Encoding.vue";
+import NumberEquiv from "./info-tables/NumberEquiv.vue";
+import HtmlEntities from "./info-tables/HtmlEntities.vue";
+import Properties from "./info-tables/Properties.vue";
+import type { UnicodeMapData } from "@emnudge/unicode-query";
+
+interface Props {
+  codepoint: number;
+  name: string;
+  info: UnicodeMapData;
+}
+
+const props = defineProps<Props>();
+
+const category = computed(
+  () => `${props.info.category} (${Category[props.info.category as keyof typeof Category]})`,
+);
+const charBlock = computed(() => getCodepointBlock(blockLookup.value, props.codepoint));
+const planeData = computed(() => getPlaneForCodepoint(props.codepoint));
+
+const decomposition = computed(() =>
+  props.info.decompositionStr ? getDecompFromStr(props.info.decompositionStr) : null,
+);
+const decompText = computed(() =>
+  decomposition.value != null
+    ? `<${decomposition.value.type}> ${decomposition.value.codepoints.join(" ")}`
+    : "",
+);
+
+const baseInfo = computed(
+  () =>
+    [
+      ["Bidi Class", `${props.info.bidiClass} (${BidiClassMap.get(props.info.bidiClass)})`],
+      !!props.info.oldName && props.info.oldName !== props.name && ["Old Name", props.info.oldName],
+      ["Codepoint", props.codepoint],
+      ["Category", category.value],
+      !!decompText.value && ["Decomposition", decompText.value],
+      [
+        "Plane",
+        planeData.value.name
+          ? `${planeData.value.name} (Plane ${planeData.value.number}) `
+          : `Plane ${planeData.value.number}`,
+      ],
+      [
+        "Block",
+        `${charBlock.value.name} (Range ${charBlock.value.range[0]}-${charBlock.value.range[1]}) `,
+      ],
+    ].filter(Boolean) as [string, string][],
+);
+
+const properties = computed(() => getPropertiesForChar(String.fromCodePoint(props.codepoint)));
+
+const htmlEntityNames = computed(() => symbolHtmlNamesMap.value.get(props.codepoint) ?? []);
+</script>
+
+<template>
+  <div class="container" :style="`--item-num: ${Math.ceil(properties.length / 2)}`">
+    <header>
+      <h1>{{ props.name }}</h1>
+      <div class="display-box">
+        <span>{{ String.fromCodePoint(props.codepoint) }}</span>
+      </div>
+    </header>
+    <table class="basic-info">
+      <tbody>
+        <tr v-for="[name, value] in baseInfo" :key="name">
+          <td>{{ name }}</td>
+          <td>{{ value }}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <HtmlEntities :codepoint="props.codepoint" :names="htmlEntityNames" />
+    <CaseMapping
+      :lowercase-mapping="props.info.lowercaseMapping"
+      :titlecase-mapping="props.info.titlecaseMapping"
+      :uppercase-mapping="props.info.uppercaseMapping"
+    />
+    <NumberEquiv
+      :digit-equiv="props.info.digitEquiv"
+      :numeric-equiv="props.info.numericEquiv"
+      :decimal-equiv="props.info.decimalEquiv"
+    />
+    <Encoding :codepoint="props.codepoint" />
+
+    <br />
+    <Properties :properties="properties" />
+  </div>
+</template>
+
+<style scoped>
+div.container {
+  border-radius: 8px;
+  padding: 20px;
+}
+.basic-info {
+  display: grid;
+}
+td {
+  padding: 5px;
+}
+td:nth-child(1) {
+  font-weight: bold;
+}
+tr:nth-child(odd) {
+  background-color: var(--bg-offset);
+}
+h1 {
+  text-align: center;
+}
+.display-box {
+  background-color: var(--bg-offset);
+  height: 64px;
+  width: 64px;
+  font-size: 3em;
+  border: 1px solid grey;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0;
+}
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>
diff --git a/src/components/table-container/ResultsContainer.tsx b/src/components/table-container/ResultsContainer.tsx
deleted file mode 100644
index 5752c4c..0000000
--- a/src/components/table-container/ResultsContainer.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { createSignal, createMemo, createEffect, onCleanup, For } from "solid-js";
-import { css } from "solid-styled";
-import { ResultsRow } from "./ResultsRow";
-import { activeIndexSig, setActiveIndexSig, resultsSig } from "$stores";
-
-export function ResultsContainer() {
-  const [resultsNum, setResultsNum] = createSignal(50);
-  let intersectionObserver: HTMLDivElement | undefined;
-
-  // Reset resultsNum when results change
-  createEffect(() => {
-    resultsSig();
-    setResultsNum(50);
-  });
-
-  // Intersection observer for infinite scroll
-  createEffect(() => {
-    if (!intersectionObserver) return;
-
-    const intObserver = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (!entry?.isIntersecting) return;
-
-        if (resultsSig().length > resultsNum()) {
-          setResultsNum((n) => n + 50);
-        }
-      },
-      {
-        rootMargin: "0px",
-        threshold: 0.8,
-      },
-    );
-
-    intObserver.observe(intersectionObserver);
-    onCleanup(() => intObserver.disconnect());
-  });
-
-  const shownResults = createMemo(() => resultsSig().slice(0, resultsNum()));
-
-  function handleFocus(e: FocusEvent) {
-    const index = (e.target as Element).querySelector("img")?.dataset.index;
-    if (!index) return;
-    setActiveIndexSig(Number(index));
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "ArrowDown" && activeIndexSig() < resultsSig().length - 1) {
-      setActiveIndexSig((i: number) => i + 1);
-    } else if (e.key === "ArrowUp" && activeIndexSig() >= 0) {
-      setActiveIndexSig((i: number) => i - 1);
-    }
-  }
-
-  css`
-    .table {
-      text-align: left;
-    }
-    p {
-      text-align: left;
-      margin: 0;
-      opacity: 0.7;
-      font-size: 0.8rem;
-    }
-    .intersection-observer {
-      height: 5rem;
-    }
-  `;
-
-  return (
-    <>
-      <p>
-        {resultsSig().length} result{resultsSig().length > 1 ? "s" : ""}
-      </p>
-
-      <div class="table" role="table" onFocusIn={handleFocus} onKeyDown={handleKeydown}>
-        <For each={shownResults()}>
-          {([codepoint, info], i) => <ResultsRow index={i()} codepoint={codepoint} info={info} />}
-        </For>
-
-        <div class="intersection-observer" ref={intersectionObserver} />
-      </div>
-    </>
-  );
-}
diff --git a/src/components/table-container/ResultsContainer.vue b/src/components/table-container/ResultsContainer.vue
new file mode 100644
index 0000000..29f899e
--- /dev/null
+++ b/src/components/table-container/ResultsContainer.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+import ResultsRow from "./ResultsRow.vue";
+import { activeIndex, results } from "$stores";
+
+const resultsNum = ref(50);
+const intersectionObserver = ref<HTMLDivElement | null>(null);
+let intObserver: IntersectionObserver | null = null;
+
+// Reset resultsNum when results change
+watch(results, () => {
+  resultsNum.value = 50;
+});
+
+onMounted(() => {
+  if (!intersectionObserver.value) return;
+
+  intObserver = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+      if (!entry?.isIntersecting) return;
+
+      if (results.value.length > resultsNum.value) {
+        resultsNum.value += 50;
+      }
+    },
+    {
+      rootMargin: "0px",
+      threshold: 0.8,
+    },
+  );
+
+  intObserver.observe(intersectionObserver.value);
+});
+
+onUnmounted(() => {
+  intObserver?.disconnect();
+});
+
+const shownResults = computed(() => results.value.slice(0, resultsNum.value));
+
+function handleFocus(e: FocusEvent) {
+  const target = e.target as Element;
+  const index = target.querySelector("img")?.dataset.index;
+  if (!index) return;
+  activeIndex.value = Number(index);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "ArrowDown" && activeIndex.value < results.value.length - 1) {
+    activeIndex.value++;
+  } else if (e.key === "ArrowUp" && activeIndex.value >= 0) {
+    activeIndex.value--;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <p>{{ results.length }} result{{ results.length > 1 ? "s" : "" }}</p>
+
+    <div class="table" role="table" @focusin="handleFocus" @keydown="handleKeydown">
+      <ResultsRow
+        v-for="([codepoint, info], i) in shownResults"
+        :key="codepoint"
+        :index="i"
+        :codepoint="codepoint"
+        :info="info"
+      />
+
+      <div class="intersection-observer" ref="intersectionObserver" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.table {
+  text-align: left;
+}
+p {
+  text-align: left;
+  margin: 0;
+  opacity: 0.7;
+  font-size: 0.8rem;
+}
+.intersection-observer {
+  height: 5rem;
+}
+</style>
diff --git a/src/components/table-container/ResultsRow.tsx b/src/components/table-container/ResultsRow.tsx
deleted file mode 100644
index 1824ff7..0000000
--- a/src/components/table-container/ResultsRow.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { createEffect } from "solid-js";
-import { css } from "solid-styled";
-import { activeIndexSig, setActiveIndexSig } from "$stores";
-import { getCodepoint } from "$utils/char";
-import type { UnicodeMapData } from "@emnudge/unicode-query";
-
-interface ResultsRowProps {
-  codepoint: number;
-  info: UnicodeMapData;
-  index: number;
-}
-
-export function ResultsRow(props: ResultsRowProps) {
-  let rowEl: HTMLButtonElement | undefined;
-
-  createEffect(() => {
-    if (activeIndexSig() === props.index) {
-      rowEl?.focus();
-    }
-  });
-
-  css`
-    .row {
-      border: 1px solid transparent;
-      width: 100%;
-      background-color: var(--bg-offset);
-      position: relative;
-    }
-    .row:after {
-      content: attr(data-codepoint);
-      display: block;
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      padding: 0.5rem;
-      opacity: 0.5;
-      font-size: 0.8rem;
-    }
-    .row.active {
-      border: 1px solid blue;
-    }
-    .content {
-      width: 100%;
-      padding: 0.5rem;
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 1rem;
-    }
-    .symbol {
-      width: 2rem;
-      text-align: center;
-    }
-    .symbol::before,
-    .symbol::after {
-      content: '"';
-    }
-    .name {
-      text-align: left;
-      opacity: 0.75;
-    }
-  `;
-
-  return (
-    <button
-      ref={rowEl}
-      class={`row ${activeIndexSig() === props.index ? "active" : ""}`}
-      onClick={() => {
-        setActiveIndexSig(props.index);
-      }}
-      onContextMenu={(e) => {
-        e.preventDefault();
-        navigator.clipboard.writeText(String.fromCodePoint(props.codepoint));
-        // TODO: Add toast notification
-        rowEl?.animate(
-          [
-            { transform: "scale(1)" },
-            { transform: "scale(0.95)" },
-            { transform: "scale(1.02)" },
-            { transform: "scale(1)" },
-          ],
-          {
-            duration: 400,
-            iterations: 1,
-            easing: "ease-out",
-          },
-        );
-      }}
-      tabindex="0"
-      data-codepoint={getCodepoint(props.codepoint)}
-    >
-      <div class="content">
-        <div class="symbol">
-          <span>{String.fromCodePoint(props.codepoint)}</span>
-        </div>
-
-        <div class="name">
-          <span>{props.info.label.toLowerCase()}</span>
-        </div>
-      </div>
-    </button>
-  );
-}
diff --git a/src/components/table-container/ResultsRow.vue b/src/components/table-container/ResultsRow.vue
new file mode 100644
index 0000000..78fd283
--- /dev/null
+++ b/src/components/table-container/ResultsRow.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { activeIndex } from "$stores";
+import { getCodepoint } from "$utils/char";
+import type { UnicodeMapData } from "@emnudge/unicode-query";
+
+interface Props {
+  codepoint: number;
+  info: UnicodeMapData;
+  index: number;
+}
+
+const props = defineProps<Props>();
+
+const rowEl = ref<HTMLButtonElement | null>(null);
+
+watch(activeIndex, (idx) => {
+  if (idx === props.index) {
+    rowEl.value?.focus();
+  }
+});
+
+function handleClick() {
+  activeIndex.value = props.index;
+}
+
+function handleContextMenu(e: MouseEvent) {
+  e.preventDefault();
+  navigator.clipboard.writeText(String.fromCodePoint(props.codepoint));
+  rowEl.value?.animate(
+    [
+      { transform: "scale(1)" },
+      { transform: "scale(0.95)" },
+      { transform: "scale(1.02)" },
+      { transform: "scale(1)" },
+    ],
+    {
+      duration: 400,
+      iterations: 1,
+      easing: "ease-out",
+    },
+  );
+}
+
+const rowClass = ref("");
+
+watch(
+  () => activeIndex.value === props.index,
+  (isActive) => {
+    rowClass.value = isActive ? "row active" : "row";
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <button
+    ref="rowEl"
+    :class="rowClass"
+    @click="handleClick"
+    @contextmenu="handleContextMenu"
+    tabindex="0"
+    :data-codepoint="getCodepoint(props.codepoint)"
+  >
+    <div class="content">
+      <div class="symbol">
+        <span>{{ String.fromCodePoint(props.codepoint) }}</span>
+      </div>
+
+      <div class="name">
+        <span>{{ props.info.label.toLowerCase() }}</span>
+      </div>
+    </div>
+  </button>
+</template>
+
+<style scoped>
+.row {
+  border: 1px solid transparent;
+  width: 100%;
+  background-color: var(--bg-offset);
+  position: relative;
+}
+.row:after {
+  content: attr(data-codepoint);
+  display: block;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 0.5rem;
+  opacity: 0.5;
+  font-size: 0.8rem;
+}
+.row.active {
+  border: 1px solid blue;
+}
+.content {
+  width: 100%;
+  padding: 0.5rem;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+}
+.symbol {
+  width: 2rem;
+  text-align: center;
+}
+.symbol::before,
+.symbol::after {
+  content: '"';
+}
+.name {
+  text-align: left;
+  opacity: 0.75;
+}
+</style>
diff --git a/src/components/table-container/info-tables/CaseMapping.tsx b/src/components/table-container/info-tables/CaseMapping.tsx
deleted file mode 100644
index 101b0a3..0000000
--- a/src/components/table-container/info-tables/CaseMapping.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { createMemo, Show, For } from "solid-js";
-import type { UnicodeMapData } from "@emnudge/unicode-query";
-
-interface CaseMappingProps {
-  titlecaseMapping: UnicodeMapData["titlecaseMapping"];
-  uppercaseMapping: UnicodeMapData["uppercaseMapping"];
-  lowercaseMapping: UnicodeMapData["lowercaseMapping"];
-}
-
-export function CaseMapping(props: CaseMappingProps) {
-  const caseMappings = createMemo(
-    () =>
-      Object.entries({
-        titlecaseMapping: props.titlecaseMapping,
-        uppercaseMapping: props.uppercaseMapping,
-        lowercaseMapping: props.lowercaseMapping,
-      }).filter(([, v]) => v) as [string, number][],
-  );
-
-  return (
-    <Show when={caseMappings().length}>
-      <br />
-      <table>
-        <thead>
-          <tr>
-            <th class="title" colspan="2">
-              Case Mapping
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <For each={caseMappings()}>
-            {([key, value]) => (
-              <tr>
-                <td>{key}</td>
-                <td>{String.fromCodePoint(value)}</td>
-              </tr>
-            )}
-          </For>
-        </tbody>
-      </table>
-    </Show>
-  );
-}
diff --git a/src/components/table-container/info-tables/CaseMapping.vue b/src/components/table-container/info-tables/CaseMapping.vue
new file mode 100644
index 0000000..0bc56fd
--- /dev/null
+++ b/src/components/table-container/info-tables/CaseMapping.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { UnicodeMapData } from "@emnudge/unicode-query";
+
+interface Props {
+  titlecaseMapping: UnicodeMapData["titlecaseMapping"];
+  uppercaseMapping: UnicodeMapData["uppercaseMapping"];
+  lowercaseMapping: UnicodeMapData["lowercaseMapping"];
+}
+
+const props = defineProps<Props>();
+
+const caseMappings = computed(
+  () =>
+    Object.entries({
+      titlecaseMapping: props.titlecaseMapping,
+      uppercaseMapping: props.uppercaseMapping,
+      lowercaseMapping: props.lowercaseMapping,
+    }).filter(([, v]) => v) as [string, number][],
+);
+</script>
+
+<template>
+  <template v-if="caseMappings.length">
+    <br />
+    <table>
+      <thead>
+        <tr>
+          <th class="title" colspan="2">Case Mapping</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="[key, value] in caseMappings" :key="key">
+          <td>{{ key }}</td>
+          <td>{{ String.fromCodePoint(value) }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </template>
+</template>
diff --git a/src/components/table-container/info-tables/Encoding.tsx b/src/components/table-container/info-tables/Encoding.tsx
deleted file mode 100644
index 87264b0..0000000
--- a/src/components/table-container/info-tables/Encoding.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { createMemo, For } from "solid-js";
-import { css } from "solid-styled";
-import { encodingModeSig, setEncodingModeSig } from "$stores";
-import { getEncodings } from "$utils/char";
-
-interface EncodingProps {
-  codepoint: number;
-}
-
-type EncodingType = "hex" | "bin" | "dec";
-const encodingTypes: EncodingType[] = ["hex", "bin", "dec"];
-
-function getNumber(num: number, encoding: EncodingType, length: number) {
-  if (encoding === "hex") return `0x<b>${num.toString(16).padStart(length / 4, "0")}</b>`;
-  if (encoding === "bin") return `0b<b>${num.toString(2).padStart(length, "0")}</b>`;
-  return `<b>${String(num)}</b>`;
-}
-
-export function Encoding(props: EncodingProps) {
-  const encodings = createMemo(() => getEncodings(props.codepoint));
-
-  const encodingsTable = createMemo(() =>
-    encodingModeSig() === "dec"
-      ? ([
-          ["UTF-8", encodings().utf8, 8],
-          ["UTF-16", encodings().utf16BE, 16],
-        ] as [string, Uint8Array | Uint16Array, number][])
-      : ([
-          ["UTF-8", encodings().utf8, 8],
-          ["UTF-16 BE", encodings().utf16BE, 16],
-          ["UTF-16 LE", encodings().utf16LE, 16],
-        ] as [string, Uint8Array | Uint16Array, number][]),
-  );
-
-  css`
-    .bit-sets span {
-      padding: 0 3px;
-    }
-    .title {
-      color: var(--label-col);
-      font-weight: bold;
-    }
-    td {
-      padding: 5px;
-    }
-    th:first-child {
-      color: var(--primary-text);
-      font-weight: 400;
-      padding-right: 1rem;
-    }
-    tbody tr:nth-child(odd) {
-      background-color: var(--bg-offset);
-    }
-    .encoding-type {
-      display: flex;
-    }
-    .encoding-type button {
-      opacity: 0.6;
-      cursor: pointer;
-      padding: 6px;
-      border: none;
-      background: 0;
-      margin: 0;
-      font-weight: 600;
-    }
-    .encoding-type button:focus {
-      outline: 1px solid rgba(0, 0, 255, 0.443);
-    }
-    .encoding-type .active {
-      opacity: 0.95;
-      background-color: rgba(128, 128, 128, 0.097);
-    }
-  `;
-
-  return (
-    <>
-      <br />
-      <table class="encoding-table">
-        <thead>
-          <tr>
-            <th class="title">Encoding</th>
-            <th>
-              <div class="encoding-type">
-                <For each={encodingTypes}>
-                  {(encoding) => (
-                    <button
-                      class={encodingModeSig() === encoding ? "active" : ""}
-                      onClick={() => setEncodingModeSig(encoding)}
-                    >
-                      {encoding}
-                    </button>
-                  )}
-                </For>
-              </div>
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <For each={encodingsTable()}>
-            {([name, bitSets, length]) => (
-              <tr>
-                <td>{name}</td>
-                <td class="bit-sets">
-                  <For each={Array.from(bitSets)}>
-                    {(bitSet) => (
-                      <span innerHTML={getNumber(bitSet, encodingModeSig(), length as number)} />
-                    )}
-                  </For>
-                </td>
-              </tr>
-            )}
-          </For>
-        </tbody>
-      </table>
-    </>
-  );
-}
diff --git a/src/components/table-container/info-tables/Encoding.vue b/src/components/table-container/info-tables/Encoding.vue
new file mode 100644
index 0000000..468f5f4
--- /dev/null
+++ b/src/components/table-container/info-tables/Encoding.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { encodingMode } from "$stores";
+import { getEncodings } from "$utils/char";
+
+interface Props {
+  codepoint: number;
+}
+
+const props = defineProps<Props>();
+
+type EncodingType = "hex" | "bin" | "dec";
+const encodingTypes: EncodingType[] = ["hex", "bin", "dec"];
+
+function getNumber(num: number, encoding: EncodingType, length: number) {
+  if (encoding === "hex") return `0x<b>${num.toString(16).padStart(length / 4, "0")}</b>`;
+  if (encoding === "bin") return `0b<b>${num.toString(2).padStart(length, "0")}</b>`;
+  return `<b>${String(num)}</b>`;
+}
+
+const encodings = computed(() => getEncodings(props.codepoint));
+
+const encodingsTable = computed(() =>
+  encodingMode.value === "dec"
+    ? ([
+        ["UTF-8", encodings.value.utf8, 8],
+        ["UTF-16", encodings.value.utf16BE, 16],
+      ] as [string, Uint8Array | Uint16Array, number][])
+    : ([
+        ["UTF-8", encodings.value.utf8, 8],
+        ["UTF-16 BE", encodings.value.utf16BE, 16],
+        ["UTF-16 LE", encodings.value.utf16LE, 16],
+      ] as [string, Uint8Array | Uint16Array, number][]),
+);
+
+function setEncoding(encoding: EncodingType) {
+  encodingMode.value = encoding;
+}
+</script>
+
+<template>
+  <div>
+    <br />
+    <table class="encoding-table">
+      <thead>
+        <tr>
+          <th class="title">Encoding</th>
+          <th>
+            <div class="encoding-type">
+              <button
+                v-for="encoding in encodingTypes"
+                :key="encoding"
+                :class="{ active: encodingMode === encoding }"
+                @click="setEncoding(encoding)"
+              >
+                {{ encoding }}
+              </button>
+            </div>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="[name, bitSets, length] in encodingsTable" :key="name">
+          <td>{{ name }}</td>
+          <td class="bit-sets">
+            <span
+              v-for="(bitSet, i) in Array.from(bitSets)"
+              :key="i"
+              v-html="getNumber(bitSet, encodingMode, length as number)"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.bit-sets span {
+  padding: 0 3px;
+}
+.title {
+  color: var(--label-col);
+  font-weight: bold;
+}
+td {
+  padding: 5px;
+}
+th:first-child {
+  color: var(--primary-text);
+  font-weight: 400;
+  padding-right: 1rem;
+}
+tbody tr:nth-child(odd) {
+  background-color: var(--bg-offset);
+}
+.encoding-type {
+  display: flex;
+}
+.encoding-type button {
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 6px;
+  border: none;
+  background: 0;
+  margin: 0;
+  font-weight: 600;
+}
+.encoding-type button:focus {
+  outline: 1px solid rgba(0, 0, 255, 0.443);
+}
+.encoding-type .active {
+  opacity: 0.95;
+  background-color: rgba(128, 128, 128, 0.097);
+}
+</style>
diff --git a/src/components/table-container/info-tables/HtmlEntities.tsx b/src/components/table-container/info-tables/HtmlEntities.tsx
deleted file mode 100644
index 14deb4c..0000000
--- a/src/components/table-container/info-tables/HtmlEntities.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { For } from "solid-js";
-import { css } from "solid-styled";
-
-interface HtmlEntitiesProps {
-  names: string[];
-  codepoint: number;
-}
-
-export function HtmlEntities(props: HtmlEntitiesProps) {
-  css`
-    th {
-      text-align: left;
-      color: var(--primary-text);
-      font-weight: 400;
-      padding-bottom: 6px;
-    }
-    tbody tr:nth-child(odd) {
-      background-color: var(--bg-offset);
-    }
-    td {
-      padding: 6px;
-    }
-    td:first-child {
-      padding-right: 30px;
-    }
-  `;
-
-  return (
-    <>
-      <br />
-      <table>
-        <thead>
-          <tr>
-            <th class="title" colspan="2">
-              Html Entities
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <For each={props.names}>
-            {(name) => (
-              <tr>
-                <td>Named</td>
-                <td>&{name};</td>
-              </tr>
-            )}
-          </For>
-          <tr>
-            <td>Hex</td>
-            <td>&#x{props.codepoint.toString(16).padStart(5, "0")};</td>
-          </tr>
-          <tr>
-            <td>Dec</td>
-            <td>&#{props.codepoint};</td>
-          </tr>
-        </tbody>
-      </table>
-    </>
-  );
-}
diff --git a/src/components/table-container/info-tables/HtmlEntities.vue b/src/components/table-container/info-tables/HtmlEntities.vue
new file mode 100644
index 0000000..5dc22b1
--- /dev/null
+++ b/src/components/table-container/info-tables/HtmlEntities.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+interface Props {
+  names: string[];
+  codepoint: number;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div>
+    <br />
+    <table>
+      <thead>
+        <tr>
+          <th class="title" colspan="2">Html Entities</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="name in props.names" :key="name">
+          <td>Named</td>
+          <td>&amp;{{ name }};</td>
+        </tr>
+        <tr>
+          <td>Hex</td>
+          <td>&amp;#x{{ props.codepoint.toString(16).padStart(5, "0") }};</td>
+        </tr>
+        <tr>
+          <td>Dec</td>
+          <td>&amp;#{{ props.codepoint }};</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+th {
+  text-align: left;
+  color: var(--primary-text);
+  font-weight: 400;
+  padding-bottom: 6px;
+}
+tbody tr:nth-child(odd) {
+  background-color: var(--bg-offset);
+}
+td {
+  padding: 6px;
+}
+td:first-child {
+  padding-right: 30px;
+}
+</style>
diff --git a/src/components/table-container/info-tables/NumberEquiv.tsx b/src/components/table-container/info-tables/NumberEquiv.tsx
deleted file mode 100644
index 9031b82..0000000
--- a/src/components/table-container/info-tables/NumberEquiv.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { createMemo, Show, For } from "solid-js";
-import type { UnicodeMapData } from "@emnudge/unicode-query";
-
-interface NumberEquivProps {
-  digitEquiv: UnicodeMapData["digitEquiv"];
-  numericEquiv: UnicodeMapData["numericEquiv"];
-  decimalEquiv: UnicodeMapData["decimalEquiv"];
-}
-
-export function NumberEquiv(props: NumberEquivProps) {
-  const numberMappings = createMemo(() =>
-    Object.entries({
-      digitEquiv: props.digitEquiv,
-      numericEquiv: props.numericEquiv,
-      decimalEquiv: props.decimalEquiv,
-    }).filter(([, v]) => v),
-  );
-
-  return (
-    <Show when={numberMappings().length}>
-      <br />
-      <table>
-        <thead>
-          <tr>
-            <th class="title" colspan="2">
-              Number Equivalent
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <For each={numberMappings()}>
-            {([key, value]) => (
-              <tr>
-                <td>{key}</td>
-                <td>{value}</td>
-              </tr>
-            )}
-          </For>
-        </tbody>
-      </table>
-    </Show>
-  );
-}
diff --git a/src/components/table-container/info-tables/NumberEquiv.vue b/src/components/table-container/info-tables/NumberEquiv.vue
new file mode 100644
index 0000000..24a7b04
--- /dev/null
+++ b/src/components/table-container/info-tables/NumberEquiv.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { UnicodeMapData } from "@emnudge/unicode-query";
+
+interface Props {
+  digitEquiv: UnicodeMapData["digitEquiv"];
+  numericEquiv: UnicodeMapData["numericEquiv"];
+  decimalEquiv: UnicodeMapData["decimalEquiv"];
+}
+
+const props = defineProps<Props>();
+
+const numberMappings = computed(() =>
+  Object.entries({
+    digitEquiv: props.digitEquiv,
+    numericEquiv: props.numericEquiv,
+    decimalEquiv: props.decimalEquiv,
+  }).filter(([, v]) => v),
+);
+</script>
+
+<template>
+  <template v-if="numberMappings.length">
+    <br />
+    <table>
+      <thead>
+        <tr>
+          <th class="title" colspan="2">Number Equivalent</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="[key, value] in numberMappings" :key="key">
+          <td>{{ key }}</td>
+          <td>{{ value }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </template>
+</template>
diff --git a/src/components/table-container/info-tables/Properties.tsx b/src/components/table-container/info-tables/Properties.tsx
deleted file mode 100644
index c62ec9b..0000000
--- a/src/components/table-container/info-tables/Properties.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { For } from "solid-js";
-import { css } from "solid-styled";
-
-interface PropertiesProps {
-  properties: string[];
-}
-
-export function Properties(props: PropertiesProps) {
-  css`
-    h3 {
-      padding-bottom: 6px;
-      color: var(--primary-text);
-      font-size: 1rem;
-      font-weight: 400;
-    }
-    .properties {
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 5px;
-      text-align: left;
-    }
-    .properties span {
-      background: var(--bg-offset);
-      padding: 2px 8px;
-      border-radius: 4px;
-    }
-  `;
-
-  return (
-    <>
-      <h3>Properties</h3>
-      <div class="properties">
-        <For each={props.properties}>{(property) => <span>{property}</span>}</For>
-      </div>
-    </>
-  );
-}
diff --git a/src/components/table-container/info-tables/Properties.vue b/src/components/table-container/info-tables/Properties.vue
new file mode 100644
index 0000000..16684f6
--- /dev/null
+++ b/src/components/table-container/info-tables/Properties.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+interface Props {
+  properties: string[];
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div>
+    <h3>Properties</h3>
+    <div class="properties">
+      <span v-for="property in props.properties" :key="property">{{ property }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+h3 {
+  padding-bottom: 6px;
+  color: var(--primary-text);
+  font-size: 1rem;
+  font-weight: 400;
+}
+.properties {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  text-align: left;
+}
+.properties span {
+  background: var(--bg-offset);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/icons/CloseIcon.vue b/src/icons/CloseIcon.vue
new file mode 100644
index 0000000..286a350
--- /dev/null
+++ b/src/icons/CloseIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg width="15" height="15" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.75 1.325L6.675 0.25L4 2.925L1.325 0.25L0.25 1.325L2.925 4L0.25 6.675L1.325 7.75L4 5.075L6.675 7.75L7.75 6.675L5.075 4L7.75 1.325Z"
+      fill="hsl(var(--hue), 66%, 39%)"
+    />
+  </svg>
+</template>
diff --git a/src/icons/FilterIcon.vue b/src/icons/FilterIcon.vue
new file mode 100644
index 0000000..fc4c08c
--- /dev/null
+++ b/src/icons/FilterIcon.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  active?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const fill = computed(() => (props.active ? "var(--hsl-bg)" : "var(--hsl)"));
+</script>
+
+<template>
+  <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M0.5 0.891388V0.5H16.5V0.908211L10.4714 6.92685C10.2988 7.08292 10.1883 7.29742 10.1639 7.53108L10.1612 7.55697V7.583V14.4671L6.94945 13.3431V7.65808H6.9495L6.9494 7.65082C6.94586 7.4073 6.8449 7.177 6.67159 7.00879L0.5 0.891388ZM10.2355 14.5683L10.2359 14.5689L10.2355 14.5683ZM6.94945 13.4068V13.4058C6.94945 13.4062 6.94945 13.4065 6.94945 13.4068Z"
+      :fill="fill"
+      :stroke="fill"
+    />
+  </svg>
+</template>
diff --git a/src/icons/GitHubIcon.vue b/src/icons/GitHubIcon.vue
new file mode 100644
index 0000000..3120a43
--- /dev/null
+++ b/src/icons/GitHubIcon.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+interface Props {
+  size?: number;
+  href: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 60,
+});
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="props.size"
+    :height="props.size"
+    viewBox="0 0 250 250"
+  >
+    <a :href="props.href" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository">
+      <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#868e96" />
+      <path
+        class="octo-arm"
+        d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
+        fill="#ffffff"
+        style="transform-origin: 130px 106px"
+      />
+      <path
+        class="octo-body"
+        d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
+        fill="#ffffff"
+      />
+    </a>
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+</style>
diff --git a/src/icons/SettingsIcon.vue b/src/icons/SettingsIcon.vue
new file mode 100644
index 0000000..bd8ac9c
--- /dev/null
+++ b/src/icons/SettingsIcon.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface Props {
+  active?: boolean;
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  ariaLabel: "Settings",
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+</script>
+
+<template>
+  <button :class="{ active: props.active }" :aria-label="props.ariaLabel" @click="emit('click')">
+    <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.5983 11.0388C18.5983 11.4058 18.5659 11.7512 18.5227 12.0966L20.8004 13.8777C21.0055 14.0396 21.0595 14.3311 20.9299 14.5686L18.771 18.3035C18.6739 18.4762 18.4904 18.5734 18.3069 18.5734C18.2421 18.5734 18.1773 18.5626 18.1125 18.541L15.4247 17.4615C14.8634 17.8825 14.2589 18.2495 13.6004 18.5194L13.1902 21.3799C13.1578 21.639 12.9312 21.8333 12.6613 21.8333H8.34347C8.07361 21.8333 7.84692 21.639 7.81454 21.3799L7.40435 18.5194C6.74588 18.2495 6.14138 17.8933 5.58007 17.4615L2.89222 18.541C2.83825 18.5626 2.77348 18.5734 2.70871 18.5734C2.51441 18.5734 2.3309 18.4762 2.23375 18.3035L0.0748404 14.5686C-0.0546943 14.3311 -0.000721501 14.0396 0.204375 13.8777L2.48203 12.0966C2.43885 11.7512 2.40646 11.395 2.40646 11.0388C2.40646 10.6825 2.43885 10.3263 2.48203 9.98089L0.204375 8.19979C-0.000721501 8.03787 -0.0654889 7.74642 0.0748404 7.50894L2.23375 3.77402C2.3309 3.60131 2.51441 3.50416 2.69792 3.50416C2.76269 3.50416 2.82745 3.51495 2.89222 3.53654L5.58007 4.616C6.14138 4.19501 6.74588 3.82799 7.40435 3.55813L7.81454 0.697573C7.84692 0.438504 8.07361 0.244202 8.34347 0.244202H12.6613C12.9312 0.244202 13.1578 0.438504 13.1902 0.697573L13.6004 3.55813C14.2589 3.82799 14.8634 4.18422 15.4247 4.616L18.1125 3.53654C18.1665 3.51495 18.2313 3.50416 18.2961 3.50416C18.4904 3.50416 18.6739 3.60131 18.771 3.77402L20.9299 7.50894C21.0595 7.74642 21.0055 8.03787 20.8004 8.19979L18.5227 9.98089C18.5659 10.3263 18.5983 10.6717 18.5983 11.0388ZM16.4394 11.0388C16.4394 10.8121 16.4286 10.5854 16.3854 10.2508L16.2343 9.031L17.195 8.27538L18.35 7.35784L17.5944 6.0517L16.2235 6.60222L15.0793 7.06639L14.097 6.31077C13.6652 5.98693 13.2334 5.73866 12.7692 5.54435L11.625 5.08019L11.4523 3.8604L11.2472 2.40314H9.74675L9.53085 3.8604L9.35814 5.08019L8.21392 5.54435C7.77134 5.72786 7.32876 5.98693 6.8646 6.33236L5.89309 7.06639L4.77045 6.61302L3.39954 6.06249L2.64393 7.36863L3.80974 8.27538L4.77045 9.031L4.61933 10.2508C4.58695 10.5746 4.56536 10.8229 4.56536 11.0388C4.56536 11.2547 4.58695 11.5029 4.61933 11.8376L4.77045 13.0574L3.80974 13.813L2.64393 14.7197L3.39954 16.0259L4.77045 15.4753L5.91468 15.0112L6.89698 15.7668C7.32876 16.0906 7.76055 16.3389 8.22471 16.5332L9.36894 16.9974L9.54165 18.2172L9.74675 19.6744H11.258L11.4739 18.2172L11.6466 16.9974L12.7908 16.5332C13.2334 16.3497 13.676 16.0906 14.1401 15.7452L15.1116 15.0112L16.2343 15.4646L17.6052 16.0151L18.3608 14.7089L17.195 13.8022L16.2343 13.0466L16.3854 11.8268C16.4178 11.5029 16.4394 11.2655 16.4394 11.0388ZM10.5023 6.72095C8.11674 6.72095 6.18451 8.65318 6.18451 11.0388C6.18451 13.4244 8.11674 15.3566 10.5023 15.3566C12.8879 15.3566 14.8202 13.4244 14.8202 11.0388C14.8202 8.65318 12.8879 6.72095 10.5023 6.72095ZM8.34341 11.0388C8.34341 12.2262 9.31492 13.1977 10.5023 13.1977C11.6897 13.1977 12.6612 12.2262 12.6612 11.0388C12.6612 9.85138 11.6897 8.87987 10.5023 8.87987C9.31492 8.87987 8.34341 9.85138 8.34341 11.0388Z"
+        fill="black"
+        fill-opacity="0.54"
+      />
+    </svg>
+  </button>
+</template>
+
+<style scoped>
+button {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+button:active {
+  background: none;
+}
+button svg {
+  transform: rotate(0deg);
+  transform-origin: 50% 50%;
+  transition: 0.15s;
+}
+button:active svg,
+button.active svg {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/src/icons/SunIcon.vue b/src/icons/SunIcon.vue
new file mode 100644
index 0000000..48c1650
--- /dev/null
+++ b/src/icons/SunIcon.vue
@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    enable-background="new 0 0 24 24"
+    height="24px"
+    viewBox="0 0 24 24"
+    width="24px"
+    class="theme-sun"
+  >
+    <rect fill="none" height="24" width="24" />
+    <path
+      d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
+    />
+  </svg>
+</template>
+
+<style>
+:root[data-theme="dark"] svg.theme-sun {
+  fill: white;
+}
+
+:root[data-theme="light"] svg.theme-sun {
+  fill: black;
+}
+</style>
diff --git a/src/icons/close.tsx b/src/icons/close.tsx
deleted file mode 100644
index 79d1724..0000000
--- a/src/icons/close.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export function CloseIcon() {
-  return (
-    <svg width="15" height="15" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M7.75 1.325L6.675 0.25L4 2.925L1.325 0.25L0.25 1.325L2.925 4L0.25 6.675L1.325 7.75L4 5.075L6.675 7.75L7.75 6.675L5.075 4L7.75 1.325Z"
-        fill="hsl(var(--hue), 66%, 39%)"
-      />
-    </svg>
-  );
-}
diff --git a/src/icons/filter.tsx b/src/icons/filter.tsx
deleted file mode 100644
index 5993865..0000000
--- a/src/icons/filter.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-interface FilterIconProps {
-  active?: boolean;
-}
-
-export function FilterIcon(props: FilterIconProps) {
-  const fill = () => (props.active ? "var(--hsl-bg)" : "var(--hsl)");
-  return (
-    <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M0.5 0.891388V0.5H16.5V0.908211L10.4714 6.92685C10.2988 7.08292 10.1883 7.29742 10.1639 7.53108L10.1612 7.55697V7.583V14.4671L6.94945 13.3431V7.65808H6.9495L6.9494 7.65082C6.94586 7.4073 6.8449 7.177 6.67159 7.00879L0.5 0.891388ZM10.2355 14.5683L10.2359 14.5689L10.2355 14.5683ZM6.94945 13.4068V13.4058C6.94945 13.4062 6.94945 13.4065 6.94945 13.4068Z"
-        fill={fill()}
-        stroke={fill()}
-      />
-    </svg>
-  );
-}
diff --git a/src/icons/github.tsx b/src/icons/github.tsx
deleted file mode 100644
index 909c4db..0000000
--- a/src/icons/github.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { css } from "solid-styled";
-
-interface GitHubIconProps {
-  size?: number;
-  href: string;
-}
-
-export function GitHubIcon(props: GitHubIconProps) {
-  css`
-    svg {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
-  `;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={props.size ?? 60}
-      height={props.size ?? 60}
-      viewBox="0 0 250 250"
-    >
-      <a href={props.href} target="_blank" rel="noopener noreferrer" aria-label="GitHub repository">
-        <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#868e96" />
-        <path
-          class="octo-arm"
-          d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
-          fill="#ffffff"
-          style="transform-origin: 130px 106px;"
-        />
-        <path
-          class="octo-body"
-          d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
-          fill="#ffffff"
-        />
-      </a>
-    </svg>
-  );
-}
diff --git a/src/icons/settings.tsx b/src/icons/settings.tsx
deleted file mode 100644
index a6dc7c9..0000000
--- a/src/icons/settings.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { css } from "solid-styled";
-
-interface SettingsIconProps {
-  active?: boolean;
-  ariaLabel?: string;
-  onClick?: () => void;
-}
-
-export function SettingsIcon(props: SettingsIconProps) {
-  css`
-    button {
-      border: none;
-      background: none;
-      padding: 0;
-      margin: 0;
-      cursor: pointer;
-    }
-    button:active {
-      background: none;
-    }
-    button svg {
-      transform: rotate(0deg);
-      transform-origin: 50% 50%;
-      transition: 0.15s;
-    }
-    button:active svg,
-    button.active svg {
-      transform: rotate(180deg);
-    }
-  `;
-
-  return (
-    <button
-      onClick={props.onClick}
-      class={props.active ? "active" : ""}
-      aria-label={props.ariaLabel ?? "Settings"}
-    >
-      <svg
-        width="21"
-        height="22"
-        viewBox="0 0 21 22"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M18.5983 11.0388C18.5983 11.4058 18.5659 11.7512 18.5227 12.0966L20.8004 13.8777C21.0055 14.0396 21.0595 14.3311 20.9299 14.5686L18.771 18.3035C18.6739 18.4762 18.4904 18.5734 18.3069 18.5734C18.2421 18.5734 18.1773 18.5626 18.1125 18.541L15.4247 17.4615C14.8634 17.8825 14.2589 18.2495 13.6004 18.5194L13.1902 21.3799C13.1578 21.639 12.9312 21.8333 12.6613 21.8333H8.34347C8.07361 21.8333 7.84692 21.639 7.81454 21.3799L7.40435 18.5194C6.74588 18.2495 6.14138 17.8933 5.58007 17.4615L2.89222 18.541C2.83825 18.5626 2.77348 18.5734 2.70871 18.5734C2.51441 18.5734 2.3309 18.4762 2.23375 18.3035L0.0748404 14.5686C-0.0546943 14.3311 -0.000721501 14.0396 0.204375 13.8777L2.48203 12.0966C2.43885 11.7512 2.40646 11.395 2.40646 11.0388C2.40646 10.6825 2.43885 10.3263 2.48203 9.98089L0.204375 8.19979C-0.000721501 8.03787 -0.0654889 7.74642 0.0748404 7.50894L2.23375 3.77402C2.3309 3.60131 2.51441 3.50416 2.69792 3.50416C2.76269 3.50416 2.82745 3.51495 2.89222 3.53654L5.58007 4.616C6.14138 4.19501 6.74588 3.82799 7.40435 3.55813L7.81454 0.697573C7.84692 0.438504 8.07361 0.244202 8.34347 0.244202H12.6613C12.9312 0.244202 13.1578 0.438504 13.1902 0.697573L13.6004 3.55813C14.2589 3.82799 14.8634 4.18422 15.4247 4.616L18.1125 3.53654C18.1665 3.51495 18.2313 3.50416 18.2961 3.50416C18.4904 3.50416 18.6739 3.60131 18.771 3.77402L20.9299 7.50894C21.0595 7.74642 21.0055 8.03787 20.8004 8.19979L18.5227 9.98089C18.5659 10.3263 18.5983 10.6717 18.5983 11.0388ZM16.4394 11.0388C16.4394 10.8121 16.4286 10.5854 16.3854 10.2508L16.2343 9.031L17.195 8.27538L18.35 7.35784L17.5944 6.0517L16.2235 6.60222L15.0793 7.06639L14.097 6.31077C13.6652 5.98693 13.2334 5.73866 12.7692 5.54435L11.625 5.08019L11.4523 3.8604L11.2472 2.40314H9.74675L9.53085 3.8604L9.35814 5.08019L8.21392 5.54435C7.77134 5.72786 7.32876 5.98693 6.8646 6.33236L5.89309 7.06639L4.77045 6.61302L3.39954 6.06249L2.64393 7.36863L3.80974 8.27538L4.77045 9.031L4.61933 10.2508C4.58695 10.5746 4.56536 10.8229 4.56536 11.0388C4.56536 11.2547 4.58695 11.5029 4.61933 11.8376L4.77045 13.0574L3.80974 13.813L2.64393 14.7197L3.39954 16.0259L4.77045 15.4753L5.91468 15.0112L6.89698 15.7668C7.32876 16.0906 7.76055 16.3389 8.22471 16.5332L9.36894 16.9974L9.54165 18.2172L9.74675 19.6744H11.258L11.4739 18.2172L11.6466 16.9974L12.7908 16.5332C13.2334 16.3497 13.676 16.0906 14.1401 15.7452L15.1116 15.0112L16.2343 15.4646L17.6052 16.0151L18.3608 14.7089L17.195 13.8022L16.2343 13.0466L16.3854 11.8268C16.4178 11.5029 16.4394 11.2655 16.4394 11.0388ZM10.5023 6.72095C8.11674 6.72095 6.18451 8.65318 6.18451 11.0388C6.18451 13.4244 8.11674 15.3566 10.5023 15.3566C12.8879 15.3566 14.8202 13.4244 14.8202 11.0388C14.8202 8.65318 12.8879 6.72095 10.5023 6.72095ZM8.34341 11.0388C8.34341 12.2262 9.31492 13.1977 10.5023 13.1977C11.6897 13.1977 12.6612 12.2262 12.6612 11.0388C12.6612 9.85138 11.6897 8.87987 10.5023 8.87987C9.31492 8.87987 8.34341 9.85138 8.34341 11.0388Z"
-          fill="black"
-          fill-opacity="0.54"
-        />
-      </svg>
-    </button>
-  );
-}
diff --git a/src/icons/sun.tsx b/src/icons/sun.tsx
deleted file mode 100644
index 4280466..0000000
--- a/src/icons/sun.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { css } from "solid-styled";
-
-export function SunIcon() {
-  css`
-    :global(:root[data-theme="dark"]) svg.theme-sun {
-      fill: white;
-    }
-
-    :global(:root[data-theme="light"]) svg.theme-sun {
-      fill: black;
-    }
-  `;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      enable-background="new 0 0 24 24"
-      height="24px"
-      viewBox="0 0 24 24"
-      width="24px"
-      class="theme-sun"
-    >
-      <rect fill="none" height="24" width="24" />
-      <path d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z" />
-    </svg>
-  );
-}
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 9ec51f0..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { render } from "solid-js/web";
-import "./global.css";
-import App from "./App";
-
-render(() => <App />, document.getElementById("app")!);
diff --git a/src/lib/components/feedback/Alert.tsx b/src/lib/components/feedback/Alert.tsx
deleted file mode 100644
index 3ba17b9..0000000
--- a/src/lib/components/feedback/Alert.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Show, type JSX } from "solid-js";
-import { css } from "solid-styled";
-
-type VariantValue = "info" | "success" | "warning" | "error";
-
-interface AlertProps {
-  variant?: VariantValue;
-  title?: string;
-  dismissible?: boolean;
-  icon?: boolean;
-  children?: JSX.Element;
-  onClose?: () => void;
-}
-
-const icons: Record<VariantValue, string> = {
-  info: "\u2139",
-  success: "\u2713",
-  warning: "\u26A0",
-  error: "\u2715",
-};
-
-export function Alert(props: AlertProps) {
-  const variant = () => props.variant ?? "info";
-
-  css`
-    .alert {
-      display: flex;
-      gap: var(--space-3);
-      padding: var(--space-4);
-      border-radius: var(--radius-md);
-      border: var(--border-width-1) solid;
-    }
-    .alert--info {
-      background: var(--color-info-bg);
-      color: var(--color-info);
-      border-color: var(--color-info-border);
-    }
-    .alert--success {
-      background: var(--color-success-bg);
-      color: var(--color-success);
-      border-color: var(--color-success-border);
-    }
-    .alert--warning {
-      background: var(--color-warning-bg);
-      color: var(--color-warning);
-      border-color: var(--color-warning-border);
-    }
-    .alert--error {
-      background: var(--color-error-bg);
-      color: var(--color-error);
-      border-color: var(--color-error-border);
-    }
-    .alert__icon {
-      flex-shrink: 0;
-      font-size: var(--font-size-lg);
-      font-weight: var(--font-weight-bold);
-    }
-    .alert__content {
-      flex: 1;
-      min-width: 0;
-    }
-    .alert__title {
-      font-weight: var(--font-weight-semibold);
-      margin-bottom: var(--space-1);
-    }
-    .alert__message {
-      font-size: var(--font-size-base);
-    }
-    .alert__close {
-      flex-shrink: 0;
-      background: none;
-      border: none;
-      padding: 0;
-      margin: 0;
-      cursor: pointer;
-      opacity: 0.7;
-      transition: opacity var(--duration-base);
-      color: inherit;
-      font-size: var(--font-size-lg);
-      line-height: 1;
-    }
-    .alert__close:hover {
-      opacity: 1;
-    }
-  `;
-
-  return (
-    <div class={`alert alert--${variant()}`} role="alert">
-      <Show when={props.icon !== false}>
-        <div class="alert__icon">{icons[variant()]}</div>
-      </Show>
-
-      <div class="alert__content">
-        <Show when={props.title}>
-          <div class="alert__title">{props.title}</div>
-        </Show>
-        <div class="alert__message">{props.children}</div>
-      </div>
-
-      <Show when={props.dismissible}>
-        <button class="alert__close" onClick={props.onClose} aria-label="Close" type="button">
-          {"\u2715"}
-        </button>
-      </Show>
-    </div>
-  );
-}
diff --git a/src/lib/components/feedback/Alert.vue b/src/lib/components/feedback/Alert.vue
new file mode 100644
index 0000000..aa871f5
--- /dev/null
+++ b/src/lib/components/feedback/Alert.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type VariantValue = "info" | "success" | "warning" | "error";
+
+interface Props {
+  variant?: VariantValue;
+  title?: string;
+  dismissible?: boolean;
+  icon?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "info",
+  icon: true,
+});
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const icons: Record<VariantValue, string> = {
+  info: "\u2139",
+  success: "\u2713",
+  warning: "\u26A0",
+  error: "\u2715",
+};
+</script>
+
+<template>
+  <div :class="['alert', `alert--${props.variant}`]" role="alert">
+    <div v-if="props.icon !== false" class="alert__icon">{{ icons[props.variant] }}</div>
+
+    <div class="alert__content">
+      <div v-if="props.title" class="alert__title">{{ props.title }}</div>
+      <div class="alert__message">
+        <slot />
+      </div>
+    </div>
+
+    <button
+      v-if="props.dismissible"
+      class="alert__close"
+      aria-label="Close"
+      type="button"
+      @click="emit('close')"
+    >
+      &#x2715;
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.alert {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  border: var(--border-width-1) solid;
+}
+.alert--info {
+  background: var(--color-info-bg);
+  color: var(--color-info);
+  border-color: var(--color-info-border);
+}
+.alert--success {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+  border-color: var(--color-success-border);
+}
+.alert--warning {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+  border-color: var(--color-warning-border);
+}
+.alert--error {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+  border-color: var(--color-error-border);
+}
+.alert__icon {
+  flex-shrink: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+}
+.alert__content {
+  flex: 1;
+  min-width: 0;
+}
+.alert__title {
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-1);
+}
+.alert__message {
+  font-size: var(--font-size-base);
+}
+.alert__close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--duration-base);
+  color: inherit;
+  font-size: var(--font-size-lg);
+  line-height: 1;
+}
+.alert__close:hover {
+  opacity: 1;
+}
+</style>
diff --git a/src/lib/components/feedback/Badge.tsx b/src/lib/components/feedback/Badge.tsx
deleted file mode 100644
index fc19f66..0000000
--- a/src/lib/components/feedback/Badge.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { createMemo, Show, type JSX } from "solid-js";
-import { css } from "solid-styled";
-
-type VariantValue = "default" | "primary" | "success" | "warning" | "error" | "info";
-type SizeValue = "sm" | "base" | "lg";
-
-interface BadgeProps {
-  variant?: VariantValue;
-  size?: SizeValue;
-  dot?: boolean;
-  pill?: boolean;
-  children?: JSX.Element;
-}
-
-export function Badge(props: BadgeProps) {
-  const classes = createMemo(() =>
-    [
-      "badge",
-      `badge--${props.variant ?? "default"}`,
-      `badge--${props.size ?? "base"}`,
-      props.pill && "badge--pill",
-      props.dot && "badge--dot",
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  css`
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-1);
-      font-weight: var(--font-weight-medium);
-      border-radius: var(--radius-md);
-      white-space: nowrap;
-    }
-    .badge--default {
-      background: var(--color-bg-offset);
-      color: var(--color-text);
-      border: var(--border-width-1) solid var(--color-border);
-    }
-    .badge--primary {
-      background: var(--color-primary-bg);
-      color: var(--color-primary);
-      border: var(--border-width-1) solid var(--color-primary);
-    }
-    .badge--success {
-      background: var(--color-success-bg);
-      color: var(--color-success);
-      border: var(--border-width-1) solid var(--color-success-border);
-    }
-    .badge--warning {
-      background: var(--color-warning-bg);
-      color: var(--color-warning);
-      border: var(--border-width-1) solid var(--color-warning-border);
-    }
-    .badge--error {
-      background: var(--color-error-bg);
-      color: var(--color-error);
-      border: var(--border-width-1) solid var(--color-error-border);
-    }
-    .badge--info {
-      background: var(--color-info-bg);
-      color: var(--color-info);
-      border: var(--border-width-1) solid var(--color-info-border);
-    }
-    .badge--sm {
-      padding: var(--space-1) var(--space-2);
-      font-size: var(--font-size-xs);
-    }
-    .badge--base {
-      padding: var(--space-1) var(--space-3);
-      font-size: var(--font-size-sm);
-    }
-    .badge--lg {
-      padding: var(--space-2) var(--space-4);
-      font-size: var(--font-size-base);
-    }
-    .badge--pill {
-      border-radius: var(--radius-full);
-    }
-    .badge--dot {
-      padding-left: var(--space-2);
-    }
-    .badge__dot {
-      width: 0.5rem;
-      height: 0.5rem;
-      border-radius: var(--radius-full);
-      background: currentColor;
-    }
-  `;
-
-  return (
-    <span class={classes()}>
-      <Show when={props.dot}>
-        <span class="badge__dot" />
-      </Show>
-      {props.children}
-    </span>
-  );
-}
diff --git a/src/lib/components/feedback/Badge.vue b/src/lib/components/feedback/Badge.vue
new file mode 100644
index 0000000..059c689
--- /dev/null
+++ b/src/lib/components/feedback/Badge.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type VariantValue = "default" | "primary" | "success" | "warning" | "error" | "info";
+type SizeValue = "sm" | "base" | "lg";
+
+interface Props {
+  variant?: VariantValue;
+  size?: SizeValue;
+  dot?: boolean;
+  pill?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "default",
+  size: "base",
+});
+
+const classes = computed(() =>
+  [
+    "badge",
+    `badge--${props.variant}`,
+    `badge--${props.size}`,
+    props.pill && "badge--pill",
+    props.dot && "badge--dot",
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+</script>
+
+<template>
+  <span :class="classes">
+    <span v-if="props.dot" class="badge__dot" />
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+}
+.badge--default {
+  background: var(--color-bg-offset);
+  color: var(--color-text);
+  border: var(--border-width-1) solid var(--color-border);
+}
+.badge--primary {
+  background: var(--color-primary-bg);
+  color: var(--color-primary);
+  border: var(--border-width-1) solid var(--color-primary);
+}
+.badge--success {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+  border: var(--border-width-1) solid var(--color-success-border);
+}
+.badge--warning {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+  border: var(--border-width-1) solid var(--color-warning-border);
+}
+.badge--error {
+  background: var(--color-error-bg);
+  color: var(--color-error);
+  border: var(--border-width-1) solid var(--color-error-border);
+}
+.badge--info {
+  background: var(--color-info-bg);
+  color: var(--color-info);
+  border: var(--border-width-1) solid var(--color-info-border);
+}
+.badge--sm {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--font-size-xs);
+}
+.badge--base {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-sm);
+}
+.badge--lg {
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--font-size-base);
+}
+.badge--pill {
+  border-radius: var(--radius-full);
+}
+.badge--dot {
+  padding-left: var(--space-2);
+}
+.badge__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--radius-full);
+  background: currentColor;
+}
+</style>
diff --git a/src/lib/components/feedback/Spinner.tsx b/src/lib/components/feedback/Spinner.tsx
deleted file mode 100644
index 2dde000..0000000
--- a/src/lib/components/feedback/Spinner.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { createMemo } from "solid-js";
-import { css } from "solid-styled";
-
-type SizeValue = "sm" | "base" | "lg" | "xl";
-type ColorValue = "primary" | "white" | "current";
-
-interface SpinnerProps {
-  size?: SizeValue;
-  color?: ColorValue;
-}
-
-export function Spinner(props: SpinnerProps) {
-  const classes = createMemo(() =>
-    ["spinner", `spinner--${props.size ?? "base"}`, `spinner--${props.color ?? "primary"}`].join(
-      " ",
-    ),
-  );
-
-  css`
-    .spinner {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .spinner__circle {
-      border-radius: 50%;
-      border-style: solid;
-      border-right-color: transparent;
-      animation: spin 0.6s linear infinite;
-    }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-    .spinner--sm .spinner__circle {
-      width: 1rem;
-      height: 1rem;
-      border-width: 2px;
-    }
-    .spinner--base .spinner__circle {
-      width: 1.5rem;
-      height: 1.5rem;
-      border-width: 2px;
-    }
-    .spinner--lg .spinner__circle {
-      width: 2rem;
-      height: 2rem;
-      border-width: 3px;
-    }
-    .spinner--xl .spinner__circle {
-      width: 3rem;
-      height: 3rem;
-      border-width: 4px;
-    }
-    .spinner--primary .spinner__circle {
-      border-color: var(--color-primary);
-      border-right-color: transparent;
-    }
-    .spinner--white .spinner__circle {
-      border-color: white;
-      border-right-color: transparent;
-    }
-    .spinner--current .spinner__circle {
-      border-color: currentColor;
-      border-right-color: transparent;
-    }
-  `;
-
-  return (
-    <div class={classes()} role="status" aria-label="Loading">
-      <div class="spinner__circle" />
-    </div>
-  );
-}
diff --git a/src/lib/components/feedback/Spinner.vue b/src/lib/components/feedback/Spinner.vue
new file mode 100644
index 0000000..8c46607
--- /dev/null
+++ b/src/lib/components/feedback/Spinner.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type SizeValue = "sm" | "base" | "lg" | "xl";
+type ColorValue = "primary" | "white" | "current";
+
+interface Props {
+  size?: SizeValue;
+  color?: ColorValue;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "base",
+  color: "primary",
+});
+
+const classes = computed(() =>
+  ["spinner", `spinner--${props.size}`, `spinner--${props.color}`].join(" "),
+);
+</script>
+
+<template>
+  <div :class="classes" role="status" aria-label="Loading">
+    <div class="spinner__circle" />
+  </div>
+</template>
+
+<style scoped>
+.spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.spinner__circle {
+  border-radius: 50%;
+  border-style: solid;
+  border-right-color: transparent;
+  animation: spin 0.6s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.spinner--sm .spinner__circle {
+  width: 1rem;
+  height: 1rem;
+  border-width: 2px;
+}
+.spinner--base .spinner__circle {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-width: 2px;
+}
+.spinner--lg .spinner__circle {
+  width: 2rem;
+  height: 2rem;
+  border-width: 3px;
+}
+.spinner--xl .spinner__circle {
+  width: 3rem;
+  height: 3rem;
+  border-width: 4px;
+}
+.spinner--primary .spinner__circle {
+  border-color: var(--color-primary);
+  border-right-color: transparent;
+}
+.spinner--white .spinner__circle {
+  border-color: white;
+  border-right-color: transparent;
+}
+.spinner--current .spinner__circle {
+  border-color: currentColor;
+  border-right-color: transparent;
+}
+</style>
diff --git a/src/lib/components/feedback/index.ts b/src/lib/components/feedback/index.ts
index 16886b3..766098a 100644
--- a/src/lib/components/feedback/index.ts
+++ b/src/lib/components/feedback/index.ts
@@ -1,3 +1,3 @@
-export { Alert } from "./Alert";
-export { Badge } from "./Badge";
-export { Spinner } from "./Spinner";
+export { default as Alert } from "./Alert.vue";
+export { default as Badge } from "./Badge.vue";
+export { default as Spinner } from "./Spinner.vue";
diff --git a/src/lib/components/forms/Button.tsx b/src/lib/components/forms/Button.tsx
deleted file mode 100644
index fc98fa7..0000000
--- a/src/lib/components/forms/Button.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { createMemo, Show, type JSX } from "solid-js";
-import { css } from "solid-styled";
-
-type VariantValue = "primary" | "secondary" | "ghost" | "outline" | "danger";
-type SizeValue = "sm" | "base" | "lg";
-type TypeValue = "button" | "submit" | "reset";
-
-interface ButtonProps {
-  variant?: VariantValue;
-  size?: SizeValue;
-  disabled?: boolean;
-  loading?: boolean;
-  fullWidth?: boolean;
-  hue?: number;
-  type?: TypeValue;
-  onClick?: (e: MouseEvent) => void;
-  children?: JSX.Element;
-}
-
-export function Button(props: ButtonProps) {
-  const classes = createMemo(() =>
-    [
-      "btn",
-      props.hue !== undefined ? "styled" : `btn--${props.variant ?? "primary"}`,
-      `btn--${props.size ?? "base"}`,
-      props.fullWidth && "btn--full-width",
-      (props.disabled || props.loading) && "btn--disabled",
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  const style = createMemo(() => (props.hue !== undefined ? `--hue: ${props.hue}` : undefined));
-
-  css`
-    .btn {
-      margin: 0;
-      padding: var(--space-2) var(--space-5);
-      border-radius: var(--radius-md);
-      box-shadow: var(--shadow-sm);
-      cursor: pointer;
-      font-family: var(--font-family-base);
-      font-weight: var(--font-weight-medium);
-      transition: var(--transition-colors), var(--transition-transform);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-2);
-      position: relative;
-      border: var(--border-width-1) solid transparent;
-    }
-    .btn:focus-visible {
-      outline: 2px solid var(--color-border-focus);
-      outline-offset: 2px;
-    }
-    .btn--primary {
-      color: var(--color-primary);
-      background: var(--color-primary-bg);
-      border-color: var(--color-primary);
-    }
-    .btn--primary:hover:not(:disabled) {
-      background: var(--color-primary-hover);
-      filter: brightness(0.95);
-    }
-    .btn--primary:active:not(:disabled) {
-      transform: scale(0.98);
-    }
-    .btn--secondary {
-      color: var(--color-text);
-      background: var(--color-bg-offset);
-      border-color: var(--color-border);
-    }
-    .btn--secondary:hover:not(:disabled) {
-      background: var(--color-bg-elevated);
-      border-color: var(--color-text-secondary);
-    }
-    .btn--secondary:active:not(:disabled) {
-      transform: scale(0.98);
-    }
-    .btn--ghost {
-      color: var(--color-text-primary);
-      background: transparent;
-      border-color: transparent;
-      box-shadow: none;
-    }
-    .btn--ghost:hover:not(:disabled) {
-      background: var(--color-bg-offset);
-    }
-    .btn--ghost:active:not(:disabled) {
-      transform: scale(0.98);
-    }
-    .btn--outline {
-      color: var(--color-primary);
-      background: transparent;
-      border-color: var(--color-primary);
-      box-shadow: none;
-    }
-    .btn--outline:hover:not(:disabled) {
-      background: var(--color-primary-bg);
-    }
-    .btn--outline:active:not(:disabled) {
-      transform: scale(0.98);
-    }
-    .btn--danger {
-      color: white;
-      background: var(--color-error);
-      border-color: var(--color-error);
-    }
-    .btn--danger:hover:not(:disabled) {
-      filter: brightness(1.1);
-    }
-    .btn--danger:active:not(:disabled) {
-      transform: scale(0.98);
-    }
-    .btn--sm {
-      padding: var(--space-1) var(--space-3);
-      font-size: var(--font-size-sm);
-    }
-    .btn--lg {
-      padding: var(--space-3) var(--space-6);
-      font-size: var(--font-size-lg);
-    }
-    .btn--full-width {
-      width: 100%;
-    }
-    .btn:disabled,
-    .btn--disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    .btn__spinner {
-      width: 1em;
-      height: 1em;
-      border: 2px solid currentColor;
-      border-right-color: transparent;
-      border-radius: 50%;
-      animation: spin 0.6s linear infinite;
-    }
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-    .btn__content--loading {
-      opacity: 0.7;
-    }
-    .btn.styled {
-      color: var(--hsl);
-      background: var(--hsl-bg);
-      border-color: var(--hsl);
-    }
-    .btn.styled:hover:not(:disabled) {
-      filter: brightness(0.95);
-    }
-    .btn.styled:active:not(:disabled) {
-      transform: scale(0.98);
-    }
-  `;
-
-  return (
-    <button
-      class={classes()}
-      style={style()}
-      type={props.type ?? "button"}
-      disabled={props.disabled || props.loading}
-      onClick={props.onClick}
-    >
-      <Show when={props.loading}>
-        <span class="btn__spinner" />
-      </Show>
-      <span class={props.loading ? "btn__content btn__content--loading" : "btn__content"}>
-        {props.children}
-      </span>
-    </button>
-  );
-}
diff --git a/src/lib/components/forms/Button.vue b/src/lib/components/forms/Button.vue
new file mode 100644
index 0000000..5a9c3cb
--- /dev/null
+++ b/src/lib/components/forms/Button.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type VariantValue = "primary" | "secondary" | "ghost" | "outline" | "danger";
+type SizeValue = "sm" | "base" | "lg";
+type TypeValue = "button" | "submit" | "reset";
+
+interface Props {
+  variant?: VariantValue;
+  size?: SizeValue;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  hue?: number;
+  type?: TypeValue;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "primary",
+  size: "base",
+  type: "button",
+});
+
+const emit = defineEmits<{
+  click: [e: MouseEvent];
+}>();
+
+const classes = computed(() =>
+  [
+    "btn",
+    props.hue !== undefined ? "styled" : `btn--${props.variant}`,
+    `btn--${props.size}`,
+    props.fullWidth && "btn--full-width",
+    (props.disabled || props.loading) && "btn--disabled",
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+
+const style = computed(() => (props.hue !== undefined ? `--hue: ${props.hue}` : undefined));
+</script>
+
+<template>
+  <button
+    :class="classes"
+    :style="style"
+    :type="props.type"
+    :disabled="props.disabled || props.loading"
+    @click="emit('click', $event)"
+  >
+    <span v-if="props.loading" class="btn__spinner" />
+    <span :class="props.loading ? 'btn__content btn__content--loading' : 'btn__content'">
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.btn {
+  margin: 0;
+  padding: var(--space-2) var(--space-5);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  transition: var(--transition-colors), var(--transition-transform);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  position: relative;
+  border: var(--border-width-1) solid transparent;
+}
+.btn:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+.btn--primary {
+  color: var(--color-primary);
+  background: var(--color-primary-bg);
+  border-color: var(--color-primary);
+}
+.btn--primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+  filter: brightness(0.95);
+}
+.btn--primary:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.btn--secondary {
+  color: var(--color-text);
+  background: var(--color-bg-offset);
+  border-color: var(--color-border);
+}
+.btn--secondary:hover:not(:disabled) {
+  background: var(--color-bg-elevated);
+  border-color: var(--color-text-secondary);
+}
+.btn--secondary:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.btn--ghost {
+  color: var(--color-text-primary);
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.btn--ghost:hover:not(:disabled) {
+  background: var(--color-bg-offset);
+}
+.btn--ghost:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.btn--outline {
+  color: var(--color-primary);
+  background: transparent;
+  border-color: var(--color-primary);
+  box-shadow: none;
+}
+.btn--outline:hover:not(:disabled) {
+  background: var(--color-primary-bg);
+}
+.btn--outline:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.btn--danger {
+  color: white;
+  background: var(--color-error);
+  border-color: var(--color-error);
+}
+.btn--danger:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+.btn--danger:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.btn--sm {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-sm);
+}
+.btn--lg {
+  padding: var(--space-3) var(--space-6);
+  font-size: var(--font-size-lg);
+}
+.btn--full-width {
+  width: 100%;
+}
+.btn:disabled,
+.btn--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn__spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.btn__content--loading {
+  opacity: 0.7;
+}
+.btn.styled {
+  color: var(--hsl);
+  background: var(--hsl-bg);
+  border-color: var(--hsl);
+}
+.btn.styled:hover:not(:disabled) {
+  filter: brightness(0.95);
+}
+.btn.styled:active:not(:disabled) {
+  transform: scale(0.98);
+}
+</style>
diff --git a/src/lib/components/forms/Checkbox.tsx b/src/lib/components/forms/Checkbox.tsx
deleted file mode 100644
index 1ae7fbb..0000000
--- a/src/lib/components/forms/Checkbox.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { createMemo, createEffect, Show } from "solid-js";
-import { css } from "solid-styled";
-
-interface CheckboxProps {
-  checked?: boolean;
-  disabled?: boolean;
-  label?: string;
-  error?: string | boolean;
-  indeterminate?: boolean;
-  onChange?: (checked: boolean) => void;
-}
-
-export function Checkbox(props: CheckboxProps) {
-  let inputElement: HTMLInputElement | undefined;
-
-  const hasError = createMemo(() =>
-    typeof props.error === "string" ? !!props.error : props.error,
-  );
-
-  createEffect(() => {
-    if (inputElement) {
-      inputElement.indeterminate = props.indeterminate ?? false;
-    }
-  });
-
-  function handleChange(e: Event) {
-    const target = e.target as HTMLInputElement;
-    props.onChange?.(target.checked);
-  }
-
-  css`
-    .checkbox-wrapper {
-      display: inline-flex;
-      flex-direction: column;
-      gap: var(--space-1);
-    }
-    .checkbox-label {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-2);
-      cursor: pointer;
-      user-select: none;
-    }
-    .checkbox-label--disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-    .checkbox-input {
-      position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-    .checkbox-box {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 1.25rem;
-      height: 1.25rem;
-      border: var(--border-width-2) solid var(--color-border);
-      border-radius: var(--radius-sm);
-      background: var(--color-bg-input);
-      transition: var(--transition-colors);
-      flex-shrink: 0;
-    }
-    .checkbox-input:focus-visible + .checkbox-box {
-      outline: 2px solid var(--color-border-focus);
-      outline-offset: 2px;
-    }
-    .checkbox-input:checked + .checkbox-box {
-      background: var(--color-primary);
-      border-color: var(--color-primary);
-    }
-    .checkbox-input:indeterminate + .checkbox-box {
-      background: var(--color-primary);
-      border-color: var(--color-primary);
-    }
-    .checkbox-label:hover .checkbox-box:not(.checkbox-box--error) {
-      border-color: var(--color-primary);
-    }
-    .checkbox-box--error {
-      border-color: var(--color-error-border);
-    }
-    .checkbox-icon {
-      width: 1rem;
-      height: 1rem;
-      color: white;
-    }
-    .checkbox-text {
-      color: var(--color-text);
-      font-size: var(--font-size-base);
-    }
-    .checkbox-error {
-      font-size: var(--font-size-sm);
-      color: var(--color-error);
-      margin-left: calc(1.25rem + var(--space-2));
-    }
-  `;
-
-  return (
-    <div class="checkbox-wrapper">
-      <label class={`checkbox-label ${props.disabled ? "checkbox-label--disabled" : ""}`}>
-        <input
-          ref={inputElement}
-          type="checkbox"
-          class="checkbox-input"
-          checked={props.checked}
-          disabled={props.disabled}
-          onChange={handleChange}
-          aria-invalid={hasError()}
-        />
-        <span class={`checkbox-box ${hasError() ? "checkbox-box--error" : ""}`}>
-          <Show when={props.checked || props.indeterminate}>
-            <svg class="checkbox-icon" viewBox="0 0 16 16" fill="none">
-              <Show
-                when={props.indeterminate}
-                fallback={
-                  <path
-                    d="M3 8l3 3 7-7"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                }
-              >
-                <path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-              </Show>
-            </svg>
-          </Show>
-        </span>
-        <Show when={props.label}>
-          <span class="checkbox-text">{props.label}</span>
-        </Show>
-      </label>
-      <Show when={typeof props.error === "string" && props.error}>
-        <span class="checkbox-error">{props.error as string}</span>
-      </Show>
-    </div>
-  );
-}
diff --git a/src/lib/components/forms/Checkbox.vue b/src/lib/components/forms/Checkbox.vue
new file mode 100644
index 0000000..4182346
--- /dev/null
+++ b/src/lib/components/forms/Checkbox.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+interface Props {
+  modelValue?: boolean;
+  disabled?: boolean;
+  label?: string;
+  error?: string | boolean;
+  indeterminate?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [checked: boolean];
+}>();
+
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const hasError = computed(() => (typeof props.error === "string" ? !!props.error : props.error));
+
+watch(
+  () => props.indeterminate,
+  (val) => {
+    if (inputRef.value) {
+      inputRef.value.indeterminate = val ?? false;
+    }
+  },
+  { immediate: true },
+);
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  emit("update:modelValue", target.checked);
+}
+</script>
+
+<template>
+  <div class="checkbox-wrapper">
+    <label :class="['checkbox-label', props.disabled && 'checkbox-label--disabled']">
+      <input
+        ref="inputRef"
+        type="checkbox"
+        class="checkbox-input"
+        :checked="props.modelValue"
+        :disabled="props.disabled"
+        :aria-invalid="hasError"
+        @change="handleChange"
+      />
+      <span :class="['checkbox-box', hasError && 'checkbox-box--error']">
+        <svg
+          v-if="props.modelValue || props.indeterminate"
+          class="checkbox-icon"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <path
+            v-if="props.indeterminate"
+            d="M4 8h8"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          />
+          <path
+            v-else
+            d="M3 8l3 3 7-7"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+      <span v-if="props.label" class="checkbox-text">{{ props.label }}</span>
+    </label>
+    <span v-if="typeof props.error === 'string' && props.error" class="checkbox-error">{{
+      props.error
+    }}</span>
+  </div>
+</template>
+
+<style scoped>
+.checkbox-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  user-select: none;
+}
+.checkbox-label--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: var(--border-width-2) solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-input);
+  transition: var(--transition-colors);
+  flex-shrink: 0;
+}
+.checkbox-input:focus-visible + .checkbox-box {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+.checkbox-input:checked + .checkbox-box {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.checkbox-input:indeterminate + .checkbox-box {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.checkbox-label:hover .checkbox-box:not(.checkbox-box--error) {
+  border-color: var(--color-primary);
+}
+.checkbox-box--error {
+  border-color: var(--color-error-border);
+}
+.checkbox-icon {
+  width: 1rem;
+  height: 1rem;
+  color: white;
+}
+.checkbox-text {
+  color: var(--color-text);
+  font-size: var(--font-size-base);
+}
+.checkbox-error {
+  font-size: var(--font-size-sm);
+  color: var(--color-error);
+  margin-left: calc(1.25rem + var(--space-2));
+}
+</style>
diff --git a/src/lib/components/forms/Input.tsx b/src/lib/components/forms/Input.tsx
deleted file mode 100644
index 0a34040..0000000
--- a/src/lib/components/forms/Input.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { createMemo, Show } from "solid-js";
-import { css } from "solid-styled";
-
-type TypeValue = "text" | "email" | "password" | "number" | "search" | "tel" | "url";
-type SizeValue = "sm" | "base" | "lg";
-
-interface InputProps {
-  value?: string;
-  type?: TypeValue;
-  placeholder?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  error?: string | boolean;
-  size?: SizeValue;
-  fullWidth?: boolean;
-  hue?: number;
-  autocomplete?: string;
-  onInput?: (e: InputEvent & { currentTarget: HTMLInputElement }) => void;
-  onFocus?: (e: FocusEvent) => void;
-  onBlur?: (e: FocusEvent) => void;
-  onChange?: (value: string) => void;
-  ref?: (el: HTMLInputElement) => void;
-}
-
-export function Input(props: InputProps) {
-  const hasError = createMemo(() =>
-    typeof props.error === "string" ? !!props.error : props.error,
-  );
-
-  const classes = createMemo(() =>
-    [
-      "input",
-      props.hue !== undefined ? "styled" : "input--default",
-      `input--${props.size ?? "base"}`,
-      hasError() && "input--error",
-      props.fullWidth && "input--full-width",
-      props.disabled && "input--disabled",
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  const style = createMemo(() => (props.hue !== undefined ? `--hue: ${props.hue}` : undefined));
-
-  css`
-    .input-wrapper {
-      display: inline-flex;
-      flex-direction: column;
-      gap: var(--space-1);
-      width: auto;
-    }
-    .input {
-      margin: 0;
-      padding: var(--space-2) var(--space-4);
-      border-radius: var(--radius-md);
-      border: var(--border-width-1) solid var(--color-border);
-      background: var(--color-bg-input);
-      color: var(--color-text);
-      font-family: var(--font-family-base);
-      transition: var(--transition-colors);
-      box-sizing: border-box;
-    }
-    .input::placeholder {
-      color: var(--color-text-tertiary);
-      opacity: 0.6;
-    }
-    .input:focus {
-      outline: none;
-      border-color: var(--color-border-focus);
-      box-shadow: var(--shadow-input-focus);
-    }
-    .input--default:hover:not(:disabled):not(:focus) {
-      border-color: var(--color-text-secondary);
-    }
-    .input--sm {
-      padding: var(--space-1) var(--space-3);
-      font-size: var(--font-size-sm);
-      height: var(--size-input-height-sm);
-    }
-    .input--base {
-      height: var(--size-input-height-base);
-    }
-    .input--lg {
-      padding: var(--space-3) var(--space-5);
-      font-size: var(--font-size-lg);
-      height: var(--size-input-height-lg);
-    }
-    .input--error {
-      border-color: var(--color-error-border);
-    }
-    .input--error:focus {
-      border-color: var(--color-error);
-    }
-    .input-error {
-      font-size: var(--font-size-sm);
-      color: var(--color-error);
-      margin-top: var(--space-1);
-    }
-    .input--full-width {
-      width: 100%;
-    }
-    .input:disabled,
-    .input--disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-      background: var(--color-bg-offset);
-    }
-    .input.styled {
-      color: var(--hsl);
-      background: var(--hsl-bg);
-      border-color: var(--hsl);
-    }
-    .input.styled:focus {
-      border-color: var(--hsl);
-      box-shadow: var(--shadow-input-focus);
-    }
-  `;
-
-  return (
-    <div class="input-wrapper">
-      <input
-        ref={props.ref}
-        class={classes()}
-        style={style()}
-        value={props.value ?? ""}
-        type={props.type ?? "text"}
-        placeholder={props.placeholder}
-        disabled={props.disabled}
-        readonly={props.readonly}
-        autocomplete={props.autocomplete}
-        onInput={(e) => {
-          props.onInput?.(e);
-          props.onChange?.(e.currentTarget.value);
-        }}
-        onFocus={props.onFocus}
-        onBlur={props.onBlur}
-        aria-invalid={hasError()}
-      />
-      <Show when={typeof props.error === "string" && props.error}>
-        <span class="input-error">{props.error as string}</span>
-      </Show>
-    </div>
-  );
-}
diff --git a/src/lib/components/forms/Input.vue b/src/lib/components/forms/Input.vue
new file mode 100644
index 0000000..7797315
--- /dev/null
+++ b/src/lib/components/forms/Input.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed, type InputHTMLAttributes } from "vue";
+
+type TypeValue = "text" | "email" | "password" | "number" | "search" | "tel" | "url";
+type SizeValue = "sm" | "base" | "lg";
+
+interface Props {
+  modelValue?: string;
+  type?: TypeValue;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  error?: string | boolean;
+  size?: SizeValue;
+  fullWidth?: boolean;
+  hue?: number;
+  autocomplete?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  type: "text",
+  size: "base",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  input: [e: Event];
+  focus: [e: FocusEvent];
+  blur: [e: FocusEvent];
+}>();
+
+const hasError = computed(() => (typeof props.error === "string" ? !!props.error : props.error));
+
+const classes = computed(() =>
+  [
+    "input",
+    props.hue !== undefined ? "styled" : "input--default",
+    `input--${props.size}`,
+    hasError.value && "input--error",
+    props.fullWidth && "input--full-width",
+    props.disabled && "input--disabled",
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+
+const style = computed(() => (props.hue !== undefined ? `--hue: ${props.hue}` : undefined));
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  emit("update:modelValue", target.value);
+  emit("input", e);
+}
+</script>
+
+<template>
+  <div class="input-wrapper">
+    <input
+      :class="classes"
+      :style="style"
+      :value="props.modelValue"
+      :type="props.type"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      :readonly="props.readonly"
+      :autocomplete="props.autocomplete"
+      :aria-invalid="hasError"
+      @input="handleInput"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+    />
+    <span v-if="typeof props.error === 'string' && props.error" class="input-error">{{
+      props.error
+    }}</span>
+  </div>
+</template>
+
+<style scoped>
+.input-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  width: auto;
+}
+.input {
+  margin: 0;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  border: var(--border-width-1) solid var(--color-border);
+  background: var(--color-bg-input);
+  color: var(--color-text);
+  font-family: var(--font-family-base);
+  transition: var(--transition-colors);
+  box-sizing: border-box;
+}
+.input::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 0.6;
+}
+.input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-input-focus);
+}
+.input--default:hover:not(:disabled):not(:focus) {
+  border-color: var(--color-text-secondary);
+}
+.input--sm {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-sm);
+  height: var(--size-input-height-sm);
+}
+.input--base {
+  height: var(--size-input-height-base);
+}
+.input--lg {
+  padding: var(--space-3) var(--space-5);
+  font-size: var(--font-size-lg);
+  height: var(--size-input-height-lg);
+}
+.input--error {
+  border-color: var(--color-error-border);
+}
+.input--error:focus {
+  border-color: var(--color-error);
+}
+.input-error {
+  font-size: var(--font-size-sm);
+  color: var(--color-error);
+  margin-top: var(--space-1);
+}
+.input--full-width {
+  width: 100%;
+}
+.input:disabled,
+.input--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: var(--color-bg-offset);
+}
+.input.styled {
+  color: var(--hsl);
+  background: var(--hsl-bg);
+  border-color: var(--hsl);
+}
+.input.styled:focus {
+  border-color: var(--hsl);
+  box-shadow: var(--shadow-input-focus);
+}
+</style>
diff --git a/src/lib/components/forms/Label.tsx b/src/lib/components/forms/Label.tsx
deleted file mode 100644
index 3ab4c6e..0000000
--- a/src/lib/components/forms/Label.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createMemo, Show, type JSX } from "solid-js";
-import { css } from "solid-styled";
-
-type SizeValue = "sm" | "base" | "lg";
-
-interface LabelProps {
-  for?: string;
-  required?: boolean;
-  optional?: boolean;
-  size?: SizeValue;
-  children?: JSX.Element;
-}
-
-export function Label(props: LabelProps) {
-  const classes = createMemo(() => ["label", `label--${props.size ?? "base"}`].join(" "));
-
-  css`
-    .label {
-      display: block;
-      color: var(--color-text-secondary);
-      font-weight: var(--font-weight-medium);
-      margin-bottom: var(--space-1);
-    }
-    .label--sm {
-      font-size: var(--font-size-sm);
-    }
-    .label--base {
-      font-size: var(--font-size-base);
-    }
-    .label--lg {
-      font-size: var(--font-size-lg);
-    }
-    .label-indicator {
-      margin-left: var(--space-1);
-    }
-    .label-indicator--required {
-      color: var(--color-error);
-    }
-    .label-indicator--optional {
-      color: var(--color-text-tertiary);
-      font-weight: var(--font-weight-normal);
-      font-size: var(--font-size-sm);
-    }
-  `;
-
-  return (
-    <label for={props.for} class={classes()}>
-      {props.children}
-      <Show when={props.required}>
-        <span class="label-indicator label-indicator--required" aria-label="required">
-          *
-        </span>
-      </Show>
-      <Show when={!props.required && props.optional}>
-        <span class="label-indicator label-indicator--optional" aria-label="optional">
-          (optional)
-        </span>
-      </Show>
-    </label>
-  );
-}
diff --git a/src/lib/components/forms/Label.vue b/src/lib/components/forms/Label.vue
new file mode 100644
index 0000000..b084832
--- /dev/null
+++ b/src/lib/components/forms/Label.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type SizeValue = "sm" | "base" | "lg";
+
+interface Props {
+  for?: string;
+  required?: boolean;
+  optional?: boolean;
+  size?: SizeValue;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "base",
+});
+
+const classes = computed(() => ["label", `label--${props.size}`].join(" "));
+</script>
+
+<template>
+  <label :for="props.for" :class="classes">
+    <slot />
+    <span
+      v-if="props.required"
+      class="label-indicator label-indicator--required"
+      aria-label="required"
+    >
+      *
+    </span>
+    <span
+      v-if="!props.required && props.optional"
+      class="label-indicator label-indicator--optional"
+      aria-label="optional"
+    >
+      (optional)
+    </span>
+  </label>
+</template>
+
+<style scoped>
+.label {
+  display: block;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-1);
+}
+.label--sm {
+  font-size: var(--font-size-sm);
+}
+.label--base {
+  font-size: var(--font-size-base);
+}
+.label--lg {
+  font-size: var(--font-size-lg);
+}
+.label-indicator {
+  margin-left: var(--space-1);
+}
+.label-indicator--required {
+  color: var(--color-error);
+}
+.label-indicator--optional {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-sm);
+}
+</style>
diff --git a/src/lib/components/forms/Radio.tsx b/src/lib/components/forms/Radio.tsx
deleted file mode 100644
index 0bc2f3f..0000000
--- a/src/lib/components/forms/Radio.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Show } from "solid-js";
-import { css } from "solid-styled";
-
-interface RadioProps {
-  value: string | number;
-  name: string;
-  checked?: boolean;
-  disabled?: boolean;
-  label?: string;
-  onChange?: (value: string | number) => void;
-}
-
-export function Radio(props: RadioProps) {
-  function handleChange() {
-    props.onChange?.(props.value);
-  }
-
-  css`
-    .radio-label {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-2);
-      cursor: pointer;
-      user-select: none;
-    }
-    .radio-label--disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-    .radio-input {
-      position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-    .radio-box {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 1.25rem;
-      height: 1.25rem;
-      border: var(--border-width-2) solid var(--color-border);
-      border-radius: var(--radius-full);
-      background: var(--color-bg-input);
-      transition: var(--transition-colors);
-      flex-shrink: 0;
-    }
-    .radio-input:focus-visible + .radio-box {
-      outline: 2px solid var(--color-border-focus);
-      outline-offset: 2px;
-    }
-    .radio-label:hover .radio-box {
-      border-color: var(--color-primary);
-    }
-    .radio-input:checked ~ .radio-box {
-      border-color: var(--color-primary);
-    }
-    .radio-dot {
-      width: 0.5rem;
-      height: 0.5rem;
-      border-radius: var(--radius-full);
-      background: var(--color-primary);
-      transform: scale(0);
-      transition: transform var(--duration-base) var(--ease-out);
-    }
-    .radio-input:checked ~ .radio-box .radio-dot {
-      transform: scale(1);
-    }
-    .radio-text {
-      color: var(--color-text);
-      font-size: var(--font-size-base);
-    }
-  `;
-
-  return (
-    <label class={`radio-label ${props.disabled ? "radio-label--disabled" : ""}`}>
-      <input
-        type="radio"
-        class="radio-input"
-        name={props.name}
-        value={props.value}
-        checked={props.checked}
-        disabled={props.disabled}
-        onChange={handleChange}
-      />
-      <span class="radio-box">
-        <span class="radio-dot" />
-      </span>
-      <Show when={props.label}>
-        <span class="radio-text">{props.label}</span>
-      </Show>
-    </label>
-  );
-}
diff --git a/src/lib/components/forms/Radio.vue b/src/lib/components/forms/Radio.vue
new file mode 100644
index 0000000..06630fc
--- /dev/null
+++ b/src/lib/components/forms/Radio.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+interface Props {
+  value: string | number;
+  name: string;
+  modelValue?: string | number;
+  disabled?: boolean;
+  label?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string | number];
+}>();
+
+function handleChange() {
+  emit("update:modelValue", props.value);
+}
+</script>
+
+<template>
+  <label :class="['radio-label', props.disabled && 'radio-label--disabled']">
+    <input
+      type="radio"
+      class="radio-input"
+      :name="props.name"
+      :value="props.value"
+      :checked="props.modelValue === props.value"
+      :disabled="props.disabled"
+      @change="handleChange"
+    />
+    <span class="radio-box">
+      <span class="radio-dot" />
+    </span>
+    <span v-if="props.label" class="radio-text">{{ props.label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.radio-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  user-select: none;
+}
+.radio-label--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.radio-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.radio-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: var(--border-width-2) solid var(--color-border);
+  border-radius: var(--radius-full);
+  background: var(--color-bg-input);
+  transition: var(--transition-colors);
+  flex-shrink: 0;
+}
+.radio-input:focus-visible + .radio-box {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+.radio-label:hover .radio-box {
+  border-color: var(--color-primary);
+}
+.radio-input:checked ~ .radio-box {
+  border-color: var(--color-primary);
+}
+.radio-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--radius-full);
+  background: var(--color-primary);
+  transform: scale(0);
+  transition: transform var(--duration-base) var(--ease-out);
+}
+.radio-input:checked ~ .radio-box .radio-dot {
+  transform: scale(1);
+}
+.radio-text {
+  color: var(--color-text);
+  font-size: var(--font-size-base);
+}
+</style>
diff --git a/src/lib/components/forms/Select.tsx b/src/lib/components/forms/Select.tsx
deleted file mode 100644
index f44ff17..0000000
--- a/src/lib/components/forms/Select.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { createMemo, Show, For } from "solid-js";
-import { css } from "solid-styled";
-
-type OptionValue = string | number;
-type Option = { value: OptionValue; label: string };
-type SizeValue = "sm" | "base" | "lg";
-
-interface SelectProps {
-  value?: string | number;
-  options: Option[] | string[] | number[];
-  placeholder?: string;
-  disabled?: boolean;
-  error?: string | boolean;
-  size?: SizeValue;
-  fullWidth?: boolean;
-  hue?: number;
-  onChange?: (value: OptionValue) => void;
-}
-
-export function Select(props: SelectProps) {
-  const normalizedOptions = createMemo(() =>
-    props.options.map((opt) => {
-      if (typeof opt === "object" && "value" in opt && "label" in opt) {
-        return opt;
-      }
-      return { value: opt, label: String(opt) };
-    }),
-  );
-
-  const hasError = createMemo(() =>
-    typeof props.error === "string" ? !!props.error : props.error,
-  );
-
-  const classes = createMemo(() =>
-    [
-      "select",
-      props.hue !== undefined ? "styled" : "select--default",
-      `select--${props.size ?? "base"}`,
-      hasError() && "select--error",
-      props.fullWidth && "select--full-width",
-      props.disabled && "select--disabled",
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  const style = createMemo(() => (props.hue !== undefined ? `--hue: ${props.hue}` : undefined));
-
-  function handleChange(e: Event) {
-    const target = e.target as HTMLSelectElement;
-    const selectedValue = target.value;
-
-    if (props.options.length > 0 && typeof props.options[0] === "number") {
-      props.onChange?.(Number(selectedValue));
-    } else {
-      props.onChange?.(selectedValue);
-    }
-  }
-
-  css`
-    .select-wrapper {
-      display: inline-flex;
-      flex-direction: column;
-      gap: var(--space-1);
-      width: auto;
-    }
-    .select {
-      margin: 0;
-      padding: var(--space-2) var(--space-4);
-      border-radius: var(--radius-md);
-      border: var(--border-width-1) solid var(--color-border);
-      background: var(--color-bg-input);
-      color: var(--color-text);
-      font-family: var(--font-family-base);
-      transition: var(--transition-colors);
-      box-sizing: border-box;
-      cursor: pointer;
-    }
-    .select:focus {
-      outline: none;
-      border-color: var(--color-border-focus);
-      box-shadow: var(--shadow-input-focus);
-    }
-    .select--default:hover:not(:disabled):not(:focus) {
-      border-color: var(--color-text-secondary);
-    }
-    .select--sm {
-      padding: var(--space-1) var(--space-3);
-      font-size: var(--font-size-sm);
-      height: var(--size-input-height-sm);
-    }
-    .select--base {
-      height: var(--size-input-height-base);
-    }
-    .select--lg {
-      padding: var(--space-3) var(--space-5);
-      font-size: var(--font-size-lg);
-      height: var(--size-input-height-lg);
-    }
-    .select--error {
-      border-color: var(--color-error-border);
-    }
-    .select--error:focus {
-      border-color: var(--color-error);
-    }
-    .select-error {
-      font-size: var(--font-size-sm);
-      color: var(--color-error);
-      margin-top: var(--space-1);
-    }
-    .select--full-width {
-      width: 100%;
-    }
-    .select:disabled,
-    .select--disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-      background: var(--color-bg-offset);
-    }
-    .select.styled {
-      color: var(--hsl);
-      background: var(--hsl-bg);
-      border-color: var(--hsl);
-    }
-    .select.styled:focus {
-      border-color: var(--hsl);
-      box-shadow: var(--shadow-input-focus);
-    }
-    option {
-      background: var(--color-bg-input);
-      color: var(--color-text);
-    }
-  `;
-
-  return (
-    <div class="select-wrapper">
-      <select
-        class={classes()}
-        style={style()}
-        value={props.value}
-        disabled={props.disabled}
-        onChange={handleChange}
-        aria-invalid={hasError()}
-      >
-        <Show when={props.placeholder}>
-          <option value="" disabled selected={props.value === ""}>
-            {props.placeholder}
-          </option>
-        </Show>
-        <For each={normalizedOptions()}>
-          {(option) => <option value={option.value}>{option.label}</option>}
-        </For>
-      </select>
-      <Show when={typeof props.error === "string" && props.error}>
-        <span class="select-error">{props.error as string}</span>
-      </Show>
-    </div>
-  );
-}
diff --git a/src/lib/components/forms/Select.vue b/src/lib/components/forms/Select.vue
new file mode 100644
index 0000000..f9b4810
--- /dev/null
+++ b/src/lib/components/forms/Select.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type OptionValue = string | number;
+type Option = { value: OptionValue; label: string };
+type SizeValue = "sm" | "base" | "lg";
+
+interface Props {
+  modelValue?: string | number;
+  options: Option[] | string[] | number[];
+  placeholder?: string;
+  disabled?: boolean;
+  error?: string | boolean;
+  size?: SizeValue;
+  fullWidth?: boolean;
+  hue?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "base",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: OptionValue];
+}>();
+
+const normalizedOptions = computed(() =>
+  props.options.map((opt) => {
+    if (typeof opt === "object" && "value" in opt && "label" in opt) {
+      return opt;
+    }
+    return { value: opt, label: String(opt) };
+  }),
+);
+
+const hasError = computed(() => (typeof props.error === "string" ? !!props.error : props.error));
+
+const classes = computed(() =>
+  [
+    "select",
+    props.hue !== undefined ? "styled" : "select--default",
+    `select--${props.size}`,
+    hasError.value && "select--error",
+    props.fullWidth && "select--full-width",
+    props.disabled && "select--disabled",
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+
+const style = computed(() => (props.hue !== undefined ? `--hue: ${props.hue}` : undefined));
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLSelectElement;
+  const selectedValue = target.value;
+
+  if (props.options.length > 0 && typeof props.options[0] === "number") {
+    emit("update:modelValue", Number(selectedValue));
+  } else {
+    emit("update:modelValue", selectedValue);
+  }
+}
+</script>
+
+<template>
+  <div class="select-wrapper">
+    <select
+      :class="classes"
+      :style="style"
+      :value="props.modelValue"
+      :disabled="props.disabled"
+      :aria-invalid="hasError"
+      @change="handleChange"
+    >
+      <option v-if="props.placeholder" value="" disabled :selected="props.modelValue === ''">
+        {{ props.placeholder }}
+      </option>
+      <option v-for="option in normalizedOptions" :key="option.value" :value="option.value">
+        {{ option.label }}
+      </option>
+    </select>
+    <span v-if="typeof props.error === 'string' && props.error" class="select-error">{{
+      props.error
+    }}</span>
+  </div>
+</template>
+
+<style scoped>
+.select-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  width: auto;
+}
+.select {
+  margin: 0;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  border: var(--border-width-1) solid var(--color-border);
+  background: var(--color-bg-input);
+  color: var(--color-text);
+  font-family: var(--font-family-base);
+  transition: var(--transition-colors);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.select:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-input-focus);
+}
+.select--default:hover:not(:disabled):not(:focus) {
+  border-color: var(--color-text-secondary);
+}
+.select--sm {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-sm);
+  height: var(--size-input-height-sm);
+}
+.select--base {
+  height: var(--size-input-height-base);
+}
+.select--lg {
+  padding: var(--space-3) var(--space-5);
+  font-size: var(--font-size-lg);
+  height: var(--size-input-height-lg);
+}
+.select--error {
+  border-color: var(--color-error-border);
+}
+.select--error:focus {
+  border-color: var(--color-error);
+}
+.select-error {
+  font-size: var(--font-size-sm);
+  color: var(--color-error);
+  margin-top: var(--space-1);
+}
+.select--full-width {
+  width: 100%;
+}
+.select:disabled,
+.select--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: var(--color-bg-offset);
+}
+.select.styled {
+  color: var(--hsl);
+  background: var(--hsl-bg);
+  border-color: var(--hsl);
+}
+.select.styled:focus {
+  border-color: var(--hsl);
+  box-shadow: var(--shadow-input-focus);
+}
+option {
+  background: var(--color-bg-input);
+  color: var(--color-text);
+}
+</style>
diff --git a/src/lib/components/forms/Switch.tsx b/src/lib/components/forms/Switch.tsx
deleted file mode 100644
index eab4c91..0000000
--- a/src/lib/components/forms/Switch.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Show } from "solid-js";
-import { css } from "solid-styled";
-
-type SizeValue = "sm" | "base" | "lg";
-
-interface SwitchProps {
-  checked?: boolean;
-  disabled?: boolean;
-  label?: string;
-  size?: SizeValue;
-  onChange?: (checked: boolean) => void;
-}
-
-export function Switch(props: SwitchProps) {
-  const size = () => props.size ?? "base";
-
-  function handleChange(e: Event) {
-    const target = e.target as HTMLInputElement;
-    props.onChange?.(target.checked);
-  }
-
-  css`
-    .switch-label {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--space-3);
-      cursor: pointer;
-      user-select: none;
-    }
-    .switch-label--disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-    .switch-input {
-      position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-    .switch-track {
-      position: relative;
-      display: inline-block;
-      background: var(--color-border);
-      border-radius: var(--radius-full);
-      transition: var(--transition-colors);
-      flex-shrink: 0;
-    }
-    .switch-track--sm {
-      width: 2rem;
-      height: 1rem;
-    }
-    .switch-track--base {
-      width: 2.5rem;
-      height: 1.25rem;
-    }
-    .switch-track--lg {
-      width: 3rem;
-      height: 1.5rem;
-    }
-    .switch-input:focus-visible + .switch-track {
-      outline: 2px solid var(--color-border-focus);
-      outline-offset: 2px;
-    }
-    .switch-track--checked {
-      background: var(--color-primary);
-    }
-    .switch-thumb {
-      position: absolute;
-      top: 0.125rem;
-      left: 0.125rem;
-      background: white;
-      border-radius: var(--radius-full);
-      transition: transform var(--duration-base) var(--ease-out);
-      box-shadow: var(--shadow-xs);
-    }
-    .switch-thumb--sm {
-      width: 0.75rem;
-      height: 0.75rem;
-    }
-    .switch-thumb--base {
-      width: 1rem;
-      height: 1rem;
-    }
-    .switch-thumb--lg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-    .switch-input:checked + .switch-track--sm .switch-thumb {
-      transform: translateX(1rem);
-    }
-    .switch-input:checked + .switch-track--base .switch-thumb {
-      transform: translateX(1.25rem);
-    }
-    .switch-input:checked + .switch-track--lg .switch-thumb {
-      transform: translateX(1.5rem);
-    }
-    .switch-text {
-      color: var(--color-text);
-      font-size: var(--font-size-base);
-    }
-  `;
-
-  return (
-    <label class={`switch-label ${props.disabled ? "switch-label--disabled" : ""}`}>
-      <input
-        type="checkbox"
-        class="switch-input"
-        checked={props.checked}
-        disabled={props.disabled}
-        onChange={handleChange}
-      />
-      <span
-        class={`switch-track switch-track--${size()} ${props.checked ? "switch-track--checked" : ""}`}
-      >
-        <span class={`switch-thumb switch-thumb--${size()}`} />
-      </span>
-      <Show when={props.label}>
-        <span class="switch-text">{props.label}</span>
-      </Show>
-    </label>
-  );
-}
diff --git a/src/lib/components/forms/Switch.vue b/src/lib/components/forms/Switch.vue
new file mode 100644
index 0000000..412b7a4
--- /dev/null
+++ b/src/lib/components/forms/Switch.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type SizeValue = "sm" | "base" | "lg";
+
+interface Props {
+  modelValue?: boolean;
+  disabled?: boolean;
+  label?: string;
+  size?: SizeValue;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  size: "base",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [checked: boolean];
+}>();
+
+const trackClass = computed(() =>
+  ["switch-track", `switch-track--${props.size}`, props.modelValue && "switch-track--checked"]
+    .filter(Boolean)
+    .join(" "),
+);
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  emit("update:modelValue", target.checked);
+}
+</script>
+
+<template>
+  <label :class="['switch-label', props.disabled && 'switch-label--disabled']">
+    <input
+      type="checkbox"
+      class="switch-input"
+      :checked="props.modelValue"
+      :disabled="props.disabled"
+      @change="handleChange"
+    />
+    <span :class="trackClass">
+      <span :class="['switch-thumb', `switch-thumb--${props.size}`]" />
+    </span>
+    <span v-if="props.label" class="switch-text">{{ props.label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.switch-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  cursor: pointer;
+  user-select: none;
+}
+.switch-label--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.switch-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.switch-track {
+  position: relative;
+  display: inline-block;
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+  transition: var(--transition-colors);
+  flex-shrink: 0;
+}
+.switch-track--sm {
+  width: 2rem;
+  height: 1rem;
+}
+.switch-track--base {
+  width: 2.5rem;
+  height: 1.25rem;
+}
+.switch-track--lg {
+  width: 3rem;
+  height: 1.5rem;
+}
+.switch-input:focus-visible + .switch-track {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+.switch-track--checked {
+  background: var(--color-primary);
+}
+.switch-thumb {
+  position: absolute;
+  top: 0.125rem;
+  left: 0.125rem;
+  background: white;
+  border-radius: var(--radius-full);
+  transition: transform var(--duration-base) var(--ease-out);
+  box-shadow: var(--shadow-xs);
+}
+.switch-thumb--sm {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.switch-thumb--base {
+  width: 1rem;
+  height: 1rem;
+}
+.switch-thumb--lg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.switch-input:checked + .switch-track--sm .switch-thumb {
+  transform: translateX(1rem);
+}
+.switch-input:checked + .switch-track--base .switch-thumb {
+  transform: translateX(1.25rem);
+}
+.switch-input:checked + .switch-track--lg .switch-thumb {
+  transform: translateX(1.5rem);
+}
+.switch-text {
+  color: var(--color-text);
+  font-size: var(--font-size-base);
+}
+</style>
diff --git a/src/lib/components/forms/TextArea.tsx b/src/lib/components/forms/TextArea.tsx
deleted file mode 100644
index e07f728..0000000
--- a/src/lib/components/forms/TextArea.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { createMemo, Show } from "solid-js";
-import { css } from "solid-styled";
-
-type ResizeValue = "none" | "vertical" | "horizontal" | "both";
-
-interface TextAreaProps {
-  value?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  error?: string | boolean;
-  rows?: number;
-  resize?: ResizeValue;
-  fullWidth?: boolean;
-  onInput?: (e: InputEvent & { currentTarget: HTMLTextAreaElement }) => void;
-  onFocus?: (e: FocusEvent) => void;
-  onBlur?: (e: FocusEvent) => void;
-  onChange?: (value: string) => void;
-}
-
-export function TextArea(props: TextAreaProps) {
-  const hasError = createMemo(() =>
-    typeof props.error === "string" ? !!props.error : props.error,
-  );
-
-  const classes = createMemo(() =>
-    [
-      "textarea",
-      hasError() && "textarea--error",
-      props.fullWidth && "textarea--full-width",
-      props.disabled && "textarea--disabled",
-      `textarea--resize-${props.resize ?? "vertical"}`,
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  css`
-    .textarea-wrapper {
-      display: inline-flex;
-      flex-direction: column;
-      gap: var(--space-1);
-      width: auto;
-    }
-    .textarea {
-      margin: 0;
-      padding: var(--space-3) var(--space-4);
-      border-radius: var(--radius-md);
-      border: var(--border-width-1) solid var(--color-border);
-      background: var(--color-bg-input);
-      color: var(--color-text);
-      font-family: var(--font-family-base);
-      font-size: var(--font-size-base);
-      line-height: var(--line-height-normal);
-      transition: var(--transition-colors);
-      box-sizing: border-box;
-      min-height: 5rem;
-    }
-    .textarea::placeholder {
-      color: var(--color-text-tertiary);
-      opacity: 0.6;
-    }
-    .textarea:focus {
-      outline: none;
-      border-color: var(--color-border-focus);
-      box-shadow: var(--shadow-input-focus);
-    }
-    .textarea:hover:not(:disabled):not(:focus) {
-      border-color: var(--color-text-secondary);
-    }
-    .textarea--resize-none {
-      resize: none;
-    }
-    .textarea--resize-vertical {
-      resize: vertical;
-    }
-    .textarea--resize-horizontal {
-      resize: horizontal;
-    }
-    .textarea--resize-both {
-      resize: both;
-    }
-    .textarea--error {
-      border-color: var(--color-error-border);
-    }
-    .textarea--error:focus {
-      border-color: var(--color-error);
-    }
-    .textarea-error {
-      font-size: var(--font-size-sm);
-      color: var(--color-error);
-      margin-top: var(--space-1);
-    }
-    .textarea--full-width {
-      width: 100%;
-    }
-    .textarea:disabled,
-    .textarea--disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-      background: var(--color-bg-offset);
-    }
-  `;
-
-  return (
-    <div class="textarea-wrapper">
-      <textarea
-        class={classes()}
-        value={props.value ?? ""}
-        placeholder={props.placeholder}
-        disabled={props.disabled}
-        readonly={props.readonly}
-        rows={props.rows ?? 4}
-        onInput={(e) => {
-          props.onInput?.(e);
-          props.onChange?.(e.currentTarget.value);
-        }}
-        onFocus={props.onFocus}
-        onBlur={props.onBlur}
-        aria-invalid={hasError()}
-      />
-      <Show when={typeof props.error === "string" && props.error}>
-        <span class="textarea-error">{props.error as string}</span>
-      </Show>
-    </div>
-  );
-}
diff --git a/src/lib/components/forms/TextArea.vue b/src/lib/components/forms/TextArea.vue
new file mode 100644
index 0000000..e2a26cf
--- /dev/null
+++ b/src/lib/components/forms/TextArea.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type ResizeValue = "none" | "vertical" | "horizontal" | "both";
+
+interface Props {
+  modelValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  error?: string | boolean;
+  rows?: number;
+  resize?: ResizeValue;
+  fullWidth?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  rows: 4,
+  resize: "vertical",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  input: [e: Event];
+  focus: [e: FocusEvent];
+  blur: [e: FocusEvent];
+}>();
+
+const hasError = computed(() => (typeof props.error === "string" ? !!props.error : props.error));
+
+const classes = computed(() =>
+  [
+    "textarea",
+    hasError.value && "textarea--error",
+    props.fullWidth && "textarea--full-width",
+    props.disabled && "textarea--disabled",
+    `textarea--resize-${props.resize}`,
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLTextAreaElement;
+  emit("update:modelValue", target.value);
+  emit("input", e);
+}
+</script>
+
+<template>
+  <div class="textarea-wrapper">
+    <textarea
+      :class="classes"
+      :value="props.modelValue"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      :readonly="props.readonly"
+      :rows="props.rows"
+      :aria-invalid="hasError"
+      @input="handleInput"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+    />
+    <span v-if="typeof props.error === 'string' && props.error" class="textarea-error">{{
+      props.error
+    }}</span>
+  </div>
+</template>
+
+<style scoped>
+.textarea-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  width: auto;
+}
+.textarea {
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  border: var(--border-width-1) solid var(--color-border);
+  background: var(--color-bg-input);
+  color: var(--color-text);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  transition: var(--transition-colors);
+  box-sizing: border-box;
+  min-height: 5rem;
+}
+.textarea::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 0.6;
+}
+.textarea:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-input-focus);
+}
+.textarea:hover:not(:disabled):not(:focus) {
+  border-color: var(--color-text-secondary);
+}
+.textarea--resize-none {
+  resize: none;
+}
+.textarea--resize-vertical {
+  resize: vertical;
+}
+.textarea--resize-horizontal {
+  resize: horizontal;
+}
+.textarea--resize-both {
+  resize: both;
+}
+.textarea--error {
+  border-color: var(--color-error-border);
+}
+.textarea--error:focus {
+  border-color: var(--color-error);
+}
+.textarea-error {
+  font-size: var(--font-size-sm);
+  color: var(--color-error);
+  margin-top: var(--space-1);
+}
+.textarea--full-width {
+  width: 100%;
+}
+.textarea:disabled,
+.textarea--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: var(--color-bg-offset);
+}
+</style>
diff --git a/src/lib/components/forms/index.ts b/src/lib/components/forms/index.ts
index d7762ef..6e963f0 100644
--- a/src/lib/components/forms/index.ts
+++ b/src/lib/components/forms/index.ts
@@ -1,8 +1,8 @@
-export { Button } from "./Button";
-export { Input } from "./Input";
-export { Select } from "./Select";
-export { Checkbox } from "./Checkbox";
-export { Radio } from "./Radio";
-export { TextArea } from "./TextArea";
-export { Switch } from "./Switch";
-export { Label } from "./Label";
+export { default as Button } from "./Button.vue";
+export { default as Input } from "./Input.vue";
+export { default as Select } from "./Select.vue";
+export { default as Checkbox } from "./Checkbox.vue";
+export { default as Radio } from "./Radio.vue";
+export { default as TextArea } from "./TextArea.vue";
+export { default as Switch } from "./Switch.vue";
+export { default as Label } from "./Label.vue";
diff --git a/src/lib/components/layout/Box.tsx b/src/lib/components/layout/Box.tsx
deleted file mode 100644
index 9ebe48d..0000000
--- a/src/lib/components/layout/Box.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-import { createMemo, type JSX } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { css } from "solid-styled";
-
-type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20;
-type BgValue = "base" | "offset" | "elevated" | "primary" | "input";
-type RadiusValue = "none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "full";
-type ShadowValue = "none" | "xs" | "sm" | "base" | "md" | "lg" | "xl";
-
-interface BoxProps {
-  as?: keyof JSX.IntrinsicElements;
-  padding?: SpacingValue;
-  paddingX?: SpacingValue;
-  paddingY?: SpacingValue;
-  margin?: SpacingValue;
-  marginX?: SpacingValue;
-  marginY?: SpacingValue;
-  bg?: BgValue;
-  borderRadius?: RadiusValue;
-  shadow?: ShadowValue;
-  children?: JSX.Element;
-}
-
-export function Box(props: BoxProps) {
-  const classes = createMemo(() =>
-    [
-      "box",
-      props.padding !== undefined && `box--p-${props.padding}`,
-      props.paddingX !== undefined && `box--px-${props.paddingX}`,
-      props.paddingY !== undefined && `box--py-${props.paddingY}`,
-      props.margin !== undefined && `box--m-${props.margin}`,
-      props.marginX !== undefined && `box--mx-${props.marginX}`,
-      props.marginY !== undefined && `box--my-${props.marginY}`,
-      props.bg && `box--bg-${props.bg}`,
-      props.borderRadius && `box--radius-${props.borderRadius}`,
-      props.shadow && `box--shadow-${props.shadow}`,
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  css`
-    .box {
-      box-sizing: border-box;
-    }
-    .box--p-0 {
-      padding: var(--space-0);
-    }
-    .box--p-1 {
-      padding: var(--space-1);
-    }
-    .box--p-2 {
-      padding: var(--space-2);
-    }
-    .box--p-3 {
-      padding: var(--space-3);
-    }
-    .box--p-4 {
-      padding: var(--space-4);
-    }
-    .box--p-5 {
-      padding: var(--space-5);
-    }
-    .box--p-6 {
-      padding: var(--space-6);
-    }
-    .box--p-8 {
-      padding: var(--space-8);
-    }
-    .box--p-10 {
-      padding: var(--space-10);
-    }
-    .box--p-12 {
-      padding: var(--space-12);
-    }
-    .box--p-16 {
-      padding: var(--space-16);
-    }
-    .box--p-20 {
-      padding: var(--space-20);
-    }
-    .box--px-0 {
-      padding-left: var(--space-0);
-      padding-right: var(--space-0);
-    }
-    .box--px-1 {
-      padding-left: var(--space-1);
-      padding-right: var(--space-1);
-    }
-    .box--px-2 {
-      padding-left: var(--space-2);
-      padding-right: var(--space-2);
-    }
-    .box--px-3 {
-      padding-left: var(--space-3);
-      padding-right: var(--space-3);
-    }
-    .box--px-4 {
-      padding-left: var(--space-4);
-      padding-right: var(--space-4);
-    }
-    .box--px-5 {
-      padding-left: var(--space-5);
-      padding-right: var(--space-5);
-    }
-    .box--px-6 {
-      padding-left: var(--space-6);
-      padding-right: var(--space-6);
-    }
-    .box--px-8 {
-      padding-left: var(--space-8);
-      padding-right: var(--space-8);
-    }
-    .box--px-10 {
-      padding-left: var(--space-10);
-      padding-right: var(--space-10);
-    }
-    .box--px-12 {
-      padding-left: var(--space-12);
-      padding-right: var(--space-12);
-    }
-    .box--px-16 {
-      padding-left: var(--space-16);
-      padding-right: var(--space-16);
-    }
-    .box--px-20 {
-      padding-left: var(--space-20);
-      padding-right: var(--space-20);
-    }
-    .box--py-0 {
-      padding-top: var(--space-0);
-      padding-bottom: var(--space-0);
-    }
-    .box--py-1 {
-      padding-top: var(--space-1);
-      padding-bottom: var(--space-1);
-    }
-    .box--py-2 {
-      padding-top: var(--space-2);
-      padding-bottom: var(--space-2);
-    }
-    .box--py-3 {
-      padding-top: var(--space-3);
-      padding-bottom: var(--space-3);
-    }
-    .box--py-4 {
-      padding-top: var(--space-4);
-      padding-bottom: var(--space-4);
-    }
-    .box--py-5 {
-      padding-top: var(--space-5);
-      padding-bottom: var(--space-5);
-    }
-    .box--py-6 {
-      padding-top: var(--space-6);
-      padding-bottom: var(--space-6);
-    }
-    .box--py-8 {
-      padding-top: var(--space-8);
-      padding-bottom: var(--space-8);
-    }
-    .box--py-10 {
-      padding-top: var(--space-10);
-      padding-bottom: var(--space-10);
-    }
-    .box--py-12 {
-      padding-top: var(--space-12);
-      padding-bottom: var(--space-12);
-    }
-    .box--py-16 {
-      padding-top: var(--space-16);
-      padding-bottom: var(--space-16);
-    }
-    .box--py-20 {
-      padding-top: var(--space-20);
-      padding-bottom: var(--space-20);
-    }
-    .box--m-0 {
-      margin: var(--space-0);
-    }
-    .box--m-1 {
-      margin: var(--space-1);
-    }
-    .box--m-2 {
-      margin: var(--space-2);
-    }
-    .box--m-3 {
-      margin: var(--space-3);
-    }
-    .box--m-4 {
-      margin: var(--space-4);
-    }
-    .box--m-5 {
-      margin: var(--space-5);
-    }
-    .box--m-6 {
-      margin: var(--space-6);
-    }
-    .box--m-8 {
-      margin: var(--space-8);
-    }
-    .box--m-10 {
-      margin: var(--space-10);
-    }
-    .box--m-12 {
-      margin: var(--space-12);
-    }
-    .box--m-16 {
-      margin: var(--space-16);
-    }
-    .box--m-20 {
-      margin: var(--space-20);
-    }
-    .box--mx-0 {
-      margin-left: var(--space-0);
-      margin-right: var(--space-0);
-    }
-    .box--mx-1 {
-      margin-left: var(--space-1);
-      margin-right: var(--space-1);
-    }
-    .box--mx-2 {
-      margin-left: var(--space-2);
-      margin-right: var(--space-2);
-    }
-    .box--mx-3 {
-      margin-left: var(--space-3);
-      margin-right: var(--space-3);
-    }
-    .box--mx-4 {
-      margin-left: var(--space-4);
-      margin-right: var(--space-4);
-    }
-    .box--mx-5 {
-      margin-left: var(--space-5);
-      margin-right: var(--space-5);
-    }
-    .box--mx-6 {
-      margin-left: var(--space-6);
-      margin-right: var(--space-6);
-    }
-    .box--mx-8 {
-      margin-left: var(--space-8);
-      margin-right: var(--space-8);
-    }
-    .box--mx-10 {
-      margin-left: var(--space-10);
-      margin-right: var(--space-10);
-    }
-    .box--mx-12 {
-      margin-left: var(--space-12);
-      margin-right: var(--space-12);
-    }
-    .box--mx-16 {
-      margin-left: var(--space-16);
-      margin-right: var(--space-16);
-    }
-    .box--mx-20 {
-      margin-left: var(--space-20);
-      margin-right: var(--space-20);
-    }
-    .box--my-0 {
-      margin-top: var(--space-0);
-      margin-bottom: var(--space-0);
-    }
-    .box--my-1 {
-      margin-top: var(--space-1);
-      margin-bottom: var(--space-1);
-    }
-    .box--my-2 {
-      margin-top: var(--space-2);
-      margin-bottom: var(--space-2);
-    }
-    .box--my-3 {
-      margin-top: var(--space-3);
-      margin-bottom: var(--space-3);
-    }
-    .box--my-4 {
-      margin-top: var(--space-4);
-      margin-bottom: var(--space-4);
-    }
-    .box--my-5 {
-      margin-top: var(--space-5);
-      margin-bottom: var(--space-5);
-    }
-    .box--my-6 {
-      margin-top: var(--space-6);
-      margin-bottom: var(--space-6);
-    }
-    .box--my-8 {
-      margin-top: var(--space-8);
-      margin-bottom: var(--space-8);
-    }
-    .box--my-10 {
-      margin-top: var(--space-10);
-      margin-bottom: var(--space-10);
-    }
-    .box--my-12 {
-      margin-top: var(--space-12);
-      margin-bottom: var(--space-12);
-    }
-    .box--my-16 {
-      margin-top: var(--space-16);
-      margin-bottom: var(--space-16);
-    }
-    .box--my-20 {
-      margin-top: var(--space-20);
-      margin-bottom: var(--space-20);
-    }
-    .box--bg-base {
-      background: var(--color-bg);
-    }
-    .box--bg-offset {
-      background: var(--color-bg-offset);
-    }
-    .box--bg-elevated {
-      background: var(--color-bg-elevated);
-    }
-    .box--bg-primary {
-      background: var(--color-primary-bg);
-    }
-    .box--bg-input {
-      background: var(--color-bg-input);
-    }
-    .box--radius-none {
-      border-radius: var(--radius-none);
-    }
-    .box--radius-sm {
-      border-radius: var(--radius-sm);
-    }
-    .box--radius-base {
-      border-radius: var(--radius-base);
-    }
-    .box--radius-md {
-      border-radius: var(--radius-md);
-    }
-    .box--radius-lg {
-      border-radius: var(--radius-lg);
-    }
-    .box--radius-xl {
-      border-radius: var(--radius-xl);
-    }
-    .box--radius-2xl {
-      border-radius: var(--radius-2xl);
-    }
-    .box--radius-full {
-      border-radius: var(--radius-full);
-    }
-    .box--shadow-none {
-      box-shadow: none;
-    }
-    .box--shadow-xs {
-      box-shadow: var(--shadow-xs);
-    }
-    .box--shadow-sm {
-      box-shadow: var(--shadow-sm);
-    }
-    .box--shadow-base {
-      box-shadow: var(--shadow-base);
-    }
-    .box--shadow-md {
-      box-shadow: var(--shadow-md);
-    }
-    .box--shadow-lg {
-      box-shadow: var(--shadow-lg);
-    }
-    .box--shadow-xl {
-      box-shadow: var(--shadow-xl);
-    }
-  `;
-
-  return (
-    <Dynamic component={props.as ?? "div"} class={classes()}>
-      {props.children}
-    </Dynamic>
-  );
-}
diff --git a/src/lib/components/layout/Box.vue b/src/lib/components/layout/Box.vue
new file mode 100644
index 0000000..cb7fc65
--- /dev/null
+++ b/src/lib/components/layout/Box.vue
@@ -0,0 +1,378 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20;
+type BgValue = "base" | "offset" | "elevated" | "primary" | "input";
+type RadiusValue = "none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "full";
+type ShadowValue = "none" | "xs" | "sm" | "base" | "md" | "lg" | "xl";
+
+interface Props {
+  as?: string;
+  padding?: SpacingValue;
+  paddingX?: SpacingValue;
+  paddingY?: SpacingValue;
+  margin?: SpacingValue;
+  marginX?: SpacingValue;
+  marginY?: SpacingValue;
+  bg?: BgValue;
+  borderRadius?: RadiusValue;
+  shadow?: ShadowValue;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "div",
+});
+
+const classes = computed(() =>
+  [
+    "box",
+    props.padding !== undefined && `box--p-${props.padding}`,
+    props.paddingX !== undefined && `box--px-${props.paddingX}`,
+    props.paddingY !== undefined && `box--py-${props.paddingY}`,
+    props.margin !== undefined && `box--m-${props.margin}`,
+    props.marginX !== undefined && `box--mx-${props.marginX}`,
+    props.marginY !== undefined && `box--my-${props.marginY}`,
+    props.bg && `box--bg-${props.bg}`,
+    props.borderRadius && `box--radius-${props.borderRadius}`,
+    props.shadow && `box--shadow-${props.shadow}`,
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+</script>
+
+<template>
+  <component :is="props.as" :class="classes">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.box {
+  box-sizing: border-box;
+}
+.box--p-0 {
+  padding: var(--space-0);
+}
+.box--p-1 {
+  padding: var(--space-1);
+}
+.box--p-2 {
+  padding: var(--space-2);
+}
+.box--p-3 {
+  padding: var(--space-3);
+}
+.box--p-4 {
+  padding: var(--space-4);
+}
+.box--p-5 {
+  padding: var(--space-5);
+}
+.box--p-6 {
+  padding: var(--space-6);
+}
+.box--p-8 {
+  padding: var(--space-8);
+}
+.box--p-10 {
+  padding: var(--space-10);
+}
+.box--p-12 {
+  padding: var(--space-12);
+}
+.box--p-16 {
+  padding: var(--space-16);
+}
+.box--p-20 {
+  padding: var(--space-20);
+}
+.box--px-0 {
+  padding-left: var(--space-0);
+  padding-right: var(--space-0);
+}
+.box--px-1 {
+  padding-left: var(--space-1);
+  padding-right: var(--space-1);
+}
+.box--px-2 {
+  padding-left: var(--space-2);
+  padding-right: var(--space-2);
+}
+.box--px-3 {
+  padding-left: var(--space-3);
+  padding-right: var(--space-3);
+}
+.box--px-4 {
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+}
+.box--px-5 {
+  padding-left: var(--space-5);
+  padding-right: var(--space-5);
+}
+.box--px-6 {
+  padding-left: var(--space-6);
+  padding-right: var(--space-6);
+}
+.box--px-8 {
+  padding-left: var(--space-8);
+  padding-right: var(--space-8);
+}
+.box--px-10 {
+  padding-left: var(--space-10);
+  padding-right: var(--space-10);
+}
+.box--px-12 {
+  padding-left: var(--space-12);
+  padding-right: var(--space-12);
+}
+.box--px-16 {
+  padding-left: var(--space-16);
+  padding-right: var(--space-16);
+}
+.box--px-20 {
+  padding-left: var(--space-20);
+  padding-right: var(--space-20);
+}
+.box--py-0 {
+  padding-top: var(--space-0);
+  padding-bottom: var(--space-0);
+}
+.box--py-1 {
+  padding-top: var(--space-1);
+  padding-bottom: var(--space-1);
+}
+.box--py-2 {
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+}
+.box--py-3 {
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+}
+.box--py-4 {
+  padding-top: var(--space-4);
+  padding-bottom: var(--space-4);
+}
+.box--py-5 {
+  padding-top: var(--space-5);
+  padding-bottom: var(--space-5);
+}
+.box--py-6 {
+  padding-top: var(--space-6);
+  padding-bottom: var(--space-6);
+}
+.box--py-8 {
+  padding-top: var(--space-8);
+  padding-bottom: var(--space-8);
+}
+.box--py-10 {
+  padding-top: var(--space-10);
+  padding-bottom: var(--space-10);
+}
+.box--py-12 {
+  padding-top: var(--space-12);
+  padding-bottom: var(--space-12);
+}
+.box--py-16 {
+  padding-top: var(--space-16);
+  padding-bottom: var(--space-16);
+}
+.box--py-20 {
+  padding-top: var(--space-20);
+  padding-bottom: var(--space-20);
+}
+.box--m-0 {
+  margin: var(--space-0);
+}
+.box--m-1 {
+  margin: var(--space-1);
+}
+.box--m-2 {
+  margin: var(--space-2);
+}
+.box--m-3 {
+  margin: var(--space-3);
+}
+.box--m-4 {
+  margin: var(--space-4);
+}
+.box--m-5 {
+  margin: var(--space-5);
+}
+.box--m-6 {
+  margin: var(--space-6);
+}
+.box--m-8 {
+  margin: var(--space-8);
+}
+.box--m-10 {
+  margin: var(--space-10);
+}
+.box--m-12 {
+  margin: var(--space-12);
+}
+.box--m-16 {
+  margin: var(--space-16);
+}
+.box--m-20 {
+  margin: var(--space-20);
+}
+.box--mx-0 {
+  margin-left: var(--space-0);
+  margin-right: var(--space-0);
+}
+.box--mx-1 {
+  margin-left: var(--space-1);
+  margin-right: var(--space-1);
+}
+.box--mx-2 {
+  margin-left: var(--space-2);
+  margin-right: var(--space-2);
+}
+.box--mx-3 {
+  margin-left: var(--space-3);
+  margin-right: var(--space-3);
+}
+.box--mx-4 {
+  margin-left: var(--space-4);
+  margin-right: var(--space-4);
+}
+.box--mx-5 {
+  margin-left: var(--space-5);
+  margin-right: var(--space-5);
+}
+.box--mx-6 {
+  margin-left: var(--space-6);
+  margin-right: var(--space-6);
+}
+.box--mx-8 {
+  margin-left: var(--space-8);
+  margin-right: var(--space-8);
+}
+.box--mx-10 {
+  margin-left: var(--space-10);
+  margin-right: var(--space-10);
+}
+.box--mx-12 {
+  margin-left: var(--space-12);
+  margin-right: var(--space-12);
+}
+.box--mx-16 {
+  margin-left: var(--space-16);
+  margin-right: var(--space-16);
+}
+.box--mx-20 {
+  margin-left: var(--space-20);
+  margin-right: var(--space-20);
+}
+.box--my-0 {
+  margin-top: var(--space-0);
+  margin-bottom: var(--space-0);
+}
+.box--my-1 {
+  margin-top: var(--space-1);
+  margin-bottom: var(--space-1);
+}
+.box--my-2 {
+  margin-top: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+.box--my-3 {
+  margin-top: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+.box--my-4 {
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-4);
+}
+.box--my-5 {
+  margin-top: var(--space-5);
+  margin-bottom: var(--space-5);
+}
+.box--my-6 {
+  margin-top: var(--space-6);
+  margin-bottom: var(--space-6);
+}
+.box--my-8 {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+.box--my-10 {
+  margin-top: var(--space-10);
+  margin-bottom: var(--space-10);
+}
+.box--my-12 {
+  margin-top: var(--space-12);
+  margin-bottom: var(--space-12);
+}
+.box--my-16 {
+  margin-top: var(--space-16);
+  margin-bottom: var(--space-16);
+}
+.box--my-20 {
+  margin-top: var(--space-20);
+  margin-bottom: var(--space-20);
+}
+.box--bg-base {
+  background: var(--color-bg);
+}
+.box--bg-offset {
+  background: var(--color-bg-offset);
+}
+.box--bg-elevated {
+  background: var(--color-bg-elevated);
+}
+.box--bg-primary {
+  background: var(--color-primary-bg);
+}
+.box--bg-input {
+  background: var(--color-bg-input);
+}
+.box--radius-none {
+  border-radius: var(--radius-none);
+}
+.box--radius-sm {
+  border-radius: var(--radius-sm);
+}
+.box--radius-base {
+  border-radius: var(--radius-base);
+}
+.box--radius-md {
+  border-radius: var(--radius-md);
+}
+.box--radius-lg {
+  border-radius: var(--radius-lg);
+}
+.box--radius-xl {
+  border-radius: var(--radius-xl);
+}
+.box--radius-2xl {
+  border-radius: var(--radius-2xl);
+}
+.box--radius-full {
+  border-radius: var(--radius-full);
+}
+.box--shadow-none {
+  box-shadow: none;
+}
+.box--shadow-xs {
+  box-shadow: var(--shadow-xs);
+}
+.box--shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+.box--shadow-base {
+  box-shadow: var(--shadow-base);
+}
+.box--shadow-md {
+  box-shadow: var(--shadow-md);
+}
+.box--shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+.box--shadow-xl {
+  box-shadow: var(--shadow-xl);
+}
+</style>
diff --git a/src/lib/components/layout/Flex.tsx b/src/lib/components/layout/Flex.tsx
deleted file mode 100644
index f1683bd..0000000
--- a/src/lib/components/layout/Flex.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { createMemo, type JSX } from "solid-js";
-import { css } from "solid-styled";
-
-type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
-type DirectionValue = "row" | "column" | "row-reverse" | "column-reverse";
-type AlignValue = "start" | "center" | "end" | "stretch" | "baseline";
-type JustifyValue = "start" | "center" | "end" | "between" | "around" | "evenly";
-type WrapValue = boolean | "reverse";
-
-interface FlexProps {
-  direction?: DirectionValue;
-  align?: AlignValue;
-  justify?: JustifyValue;
-  wrap?: WrapValue;
-  gap?: SpacingValue;
-  children?: JSX.Element;
-}
-
-export function Flex(props: FlexProps) {
-  const classes = createMemo(() =>
-    [
-      "flex",
-      `flex--direction-${props.direction ?? "row"}`,
-      `flex--align-${props.align ?? "start"}`,
-      `flex--justify-${props.justify ?? "start"}`,
-      props.wrap && (props.wrap === "reverse" ? "flex--wrap-reverse" : "flex--wrap"),
-      `flex--gap-${props.gap ?? 0}`,
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  css`
-    .flex {
-      display: flex;
-    }
-    .flex--direction-row {
-      flex-direction: row;
-    }
-    .flex--direction-column {
-      flex-direction: column;
-    }
-    .flex--direction-row-reverse {
-      flex-direction: row-reverse;
-    }
-    .flex--direction-column-reverse {
-      flex-direction: column-reverse;
-    }
-    .flex--align-start {
-      align-items: flex-start;
-    }
-    .flex--align-center {
-      align-items: center;
-    }
-    .flex--align-end {
-      align-items: flex-end;
-    }
-    .flex--align-stretch {
-      align-items: stretch;
-    }
-    .flex--align-baseline {
-      align-items: baseline;
-    }
-    .flex--justify-start {
-      justify-content: flex-start;
-    }
-    .flex--justify-center {
-      justify-content: center;
-    }
-    .flex--justify-end {
-      justify-content: flex-end;
-    }
-    .flex--justify-between {
-      justify-content: space-between;
-    }
-    .flex--justify-around {
-      justify-content: space-around;
-    }
-    .flex--justify-evenly {
-      justify-content: space-evenly;
-    }
-    .flex--wrap {
-      flex-wrap: wrap;
-    }
-    .flex--wrap-reverse {
-      flex-wrap: wrap-reverse;
-    }
-    .flex--gap-0 {
-      gap: var(--space-0);
-    }
-    .flex--gap-1 {
-      gap: var(--space-1);
-    }
-    .flex--gap-2 {
-      gap: var(--space-2);
-    }
-    .flex--gap-3 {
-      gap: var(--space-3);
-    }
-    .flex--gap-4 {
-      gap: var(--space-4);
-    }
-    .flex--gap-5 {
-      gap: var(--space-5);
-    }
-    .flex--gap-6 {
-      gap: var(--space-6);
-    }
-    .flex--gap-8 {
-      gap: var(--space-8);
-    }
-    .flex--gap-10 {
-      gap: var(--space-10);
-    }
-    .flex--gap-12 {
-      gap: var(--space-12);
-    }
-  `;
-
-  return <div class={classes()}>{props.children}</div>;
-}
diff --git a/src/lib/components/layout/Flex.vue b/src/lib/components/layout/Flex.vue
new file mode 100644
index 0000000..5d58376
--- /dev/null
+++ b/src/lib/components/layout/Flex.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+type DirectionValue = "row" | "column" | "row-reverse" | "column-reverse";
+type AlignValue = "start" | "center" | "end" | "stretch" | "baseline";
+type JustifyValue = "start" | "center" | "end" | "between" | "around" | "evenly";
+type WrapValue = boolean | "reverse";
+
+interface Props {
+  direction?: DirectionValue;
+  align?: AlignValue;
+  justify?: JustifyValue;
+  wrap?: WrapValue;
+  gap?: SpacingValue;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: "row",
+  align: "start",
+  justify: "start",
+  gap: 0,
+});
+
+const classes = computed(() =>
+  [
+    "flex",
+    `flex--direction-${props.direction}`,
+    `flex--align-${props.align}`,
+    `flex--justify-${props.justify}`,
+    props.wrap && (props.wrap === "reverse" ? "flex--wrap-reverse" : "flex--wrap"),
+    `flex--gap-${props.gap}`,
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+.flex--direction-row {
+  flex-direction: row;
+}
+.flex--direction-column {
+  flex-direction: column;
+}
+.flex--direction-row-reverse {
+  flex-direction: row-reverse;
+}
+.flex--direction-column-reverse {
+  flex-direction: column-reverse;
+}
+.flex--align-start {
+  align-items: flex-start;
+}
+.flex--align-center {
+  align-items: center;
+}
+.flex--align-end {
+  align-items: flex-end;
+}
+.flex--align-stretch {
+  align-items: stretch;
+}
+.flex--align-baseline {
+  align-items: baseline;
+}
+.flex--justify-start {
+  justify-content: flex-start;
+}
+.flex--justify-center {
+  justify-content: center;
+}
+.flex--justify-end {
+  justify-content: flex-end;
+}
+.flex--justify-between {
+  justify-content: space-between;
+}
+.flex--justify-around {
+  justify-content: space-around;
+}
+.flex--justify-evenly {
+  justify-content: space-evenly;
+}
+.flex--wrap {
+  flex-wrap: wrap;
+}
+.flex--wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+.flex--gap-0 {
+  gap: var(--space-0);
+}
+.flex--gap-1 {
+  gap: var(--space-1);
+}
+.flex--gap-2 {
+  gap: var(--space-2);
+}
+.flex--gap-3 {
+  gap: var(--space-3);
+}
+.flex--gap-4 {
+  gap: var(--space-4);
+}
+.flex--gap-5 {
+  gap: var(--space-5);
+}
+.flex--gap-6 {
+  gap: var(--space-6);
+}
+.flex--gap-8 {
+  gap: var(--space-8);
+}
+.flex--gap-10 {
+  gap: var(--space-10);
+}
+.flex--gap-12 {
+  gap: var(--space-12);
+}
+</style>
diff --git a/src/lib/components/layout/Grid.tsx b/src/lib/components/layout/Grid.tsx
deleted file mode 100644
index 5a5f0e5..0000000
--- a/src/lib/components/layout/Grid.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { createMemo, type JSX } from "solid-js";
-import { css } from "solid-styled";
-
-type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
-type ColumnsValue = number | "auto-fit" | "auto-fill";
-
-interface GridProps {
-  columns?: ColumnsValue;
-  gap?: SpacingValue;
-  columnGap?: SpacingValue;
-  rowGap?: SpacingValue;
-  minColumnWidth?: string;
-  children?: JSX.Element;
-}
-
-export function Grid(props: GridProps) {
-  const gridTemplateColumns = createMemo(() => {
-    const columns = props.columns ?? 1;
-    const minColumnWidth = props.minColumnWidth ?? "200px";
-    if (typeof columns === "number") {
-      return `repeat(${columns}, 1fr)`;
-    } else if (columns === "auto-fit" || columns === "auto-fill") {
-      return `repeat(${columns}, minmax(${minColumnWidth}, 1fr))`;
-    }
-    return "1fr";
-  });
-
-  const classes = createMemo(() =>
-    [
-      "grid",
-      props.gap !== undefined && `grid--gap-${props.gap}`,
-      props.columnGap !== undefined && `grid--column-gap-${props.columnGap}`,
-      props.rowGap !== undefined && `grid--row-gap-${props.rowGap}`,
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  const style = createMemo(() => `grid-template-columns: ${gridTemplateColumns()};`);
-
-  css`
-    .grid {
-      display: grid;
-    }
-    .grid--gap-0 {
-      gap: var(--space-0);
-    }
-    .grid--gap-1 {
-      gap: var(--space-1);
-    }
-    .grid--gap-2 {
-      gap: var(--space-2);
-    }
-    .grid--gap-3 {
-      gap: var(--space-3);
-    }
-    .grid--gap-4 {
-      gap: var(--space-4);
-    }
-    .grid--gap-5 {
-      gap: var(--space-5);
-    }
-    .grid--gap-6 {
-      gap: var(--space-6);
-    }
-    .grid--gap-8 {
-      gap: var(--space-8);
-    }
-    .grid--gap-10 {
-      gap: var(--space-10);
-    }
-    .grid--gap-12 {
-      gap: var(--space-12);
-    }
-    .grid--column-gap-0 {
-      column-gap: var(--space-0);
-    }
-    .grid--column-gap-1 {
-      column-gap: var(--space-1);
-    }
-    .grid--column-gap-2 {
-      column-gap: var(--space-2);
-    }
-    .grid--column-gap-3 {
-      column-gap: var(--space-3);
-    }
-    .grid--column-gap-4 {
-      column-gap: var(--space-4);
-    }
-    .grid--column-gap-5 {
-      column-gap: var(--space-5);
-    }
-    .grid--column-gap-6 {
-      column-gap: var(--space-6);
-    }
-    .grid--column-gap-8 {
-      column-gap: var(--space-8);
-    }
-    .grid--column-gap-10 {
-      column-gap: var(--space-10);
-    }
-    .grid--column-gap-12 {
-      column-gap: var(--space-12);
-    }
-    .grid--row-gap-0 {
-      row-gap: var(--space-0);
-    }
-    .grid--row-gap-1 {
-      row-gap: var(--space-1);
-    }
-    .grid--row-gap-2 {
-      row-gap: var(--space-2);
-    }
-    .grid--row-gap-3 {
-      row-gap: var(--space-3);
-    }
-    .grid--row-gap-4 {
-      row-gap: var(--space-4);
-    }
-    .grid--row-gap-5 {
-      row-gap: var(--space-5);
-    }
-    .grid--row-gap-6 {
-      row-gap: var(--space-6);
-    }
-    .grid--row-gap-8 {
-      row-gap: var(--space-8);
-    }
-    .grid--row-gap-10 {
-      row-gap: var(--space-10);
-    }
-    .grid--row-gap-12 {
-      row-gap: var(--space-12);
-    }
-  `;
-
-  return (
-    <div class={classes()} style={style()}>
-      {props.children}
-    </div>
-  );
-}
diff --git a/src/lib/components/layout/Grid.vue b/src/lib/components/layout/Grid.vue
new file mode 100644
index 0000000..43c04cb
--- /dev/null
+++ b/src/lib/components/layout/Grid.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+type ColumnsValue = number | "auto-fit" | "auto-fill";
+
+interface Props {
+  columns?: ColumnsValue;
+  gap?: SpacingValue;
+  columnGap?: SpacingValue;
+  rowGap?: SpacingValue;
+  minColumnWidth?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 1,
+  minColumnWidth: "200px",
+});
+
+const gridTemplateColumns = computed(() => {
+  const columns = props.columns;
+  const minColumnWidth = props.minColumnWidth;
+  if (typeof columns === "number") {
+    return `repeat(${columns}, 1fr)`;
+  } else if (columns === "auto-fit" || columns === "auto-fill") {
+    return `repeat(${columns}, minmax(${minColumnWidth}, 1fr))`;
+  }
+  return "1fr";
+});
+
+const classes = computed(() =>
+  [
+    "grid",
+    props.gap !== undefined && `grid--gap-${props.gap}`,
+    props.columnGap !== undefined && `grid--column-gap-${props.columnGap}`,
+    props.rowGap !== undefined && `grid--row-gap-${props.rowGap}`,
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+
+const style = computed(() => `grid-template-columns: ${gridTemplateColumns.value};`);
+</script>
+
+<template>
+  <div :class="classes" :style="style">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.grid {
+  display: grid;
+}
+.grid--gap-0 {
+  gap: var(--space-0);
+}
+.grid--gap-1 {
+  gap: var(--space-1);
+}
+.grid--gap-2 {
+  gap: var(--space-2);
+}
+.grid--gap-3 {
+  gap: var(--space-3);
+}
+.grid--gap-4 {
+  gap: var(--space-4);
+}
+.grid--gap-5 {
+  gap: var(--space-5);
+}
+.grid--gap-6 {
+  gap: var(--space-6);
+}
+.grid--gap-8 {
+  gap: var(--space-8);
+}
+.grid--gap-10 {
+  gap: var(--space-10);
+}
+.grid--gap-12 {
+  gap: var(--space-12);
+}
+.grid--column-gap-0 {
+  column-gap: var(--space-0);
+}
+.grid--column-gap-1 {
+  column-gap: var(--space-1);
+}
+.grid--column-gap-2 {
+  column-gap: var(--space-2);
+}
+.grid--column-gap-3 {
+  column-gap: var(--space-3);
+}
+.grid--column-gap-4 {
+  column-gap: var(--space-4);
+}
+.grid--column-gap-5 {
+  column-gap: var(--space-5);
+}
+.grid--column-gap-6 {
+  column-gap: var(--space-6);
+}
+.grid--column-gap-8 {
+  column-gap: var(--space-8);
+}
+.grid--column-gap-10 {
+  column-gap: var(--space-10);
+}
+.grid--column-gap-12 {
+  column-gap: var(--space-12);
+}
+.grid--row-gap-0 {
+  row-gap: var(--space-0);
+}
+.grid--row-gap-1 {
+  row-gap: var(--space-1);
+}
+.grid--row-gap-2 {
+  row-gap: var(--space-2);
+}
+.grid--row-gap-3 {
+  row-gap: var(--space-3);
+}
+.grid--row-gap-4 {
+  row-gap: var(--space-4);
+}
+.grid--row-gap-5 {
+  row-gap: var(--space-5);
+}
+.grid--row-gap-6 {
+  row-gap: var(--space-6);
+}
+.grid--row-gap-8 {
+  row-gap: var(--space-8);
+}
+.grid--row-gap-10 {
+  row-gap: var(--space-10);
+}
+.grid--row-gap-12 {
+  row-gap: var(--space-12);
+}
+</style>
diff --git a/src/lib/components/layout/Stack.tsx b/src/lib/components/layout/Stack.tsx
deleted file mode 100644
index 1a9913d..0000000
--- a/src/lib/components/layout/Stack.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { createMemo, type JSX } from "solid-js";
-import { css } from "solid-styled";
-
-type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
-type DirectionValue = "vertical" | "horizontal";
-type AlignValue = "start" | "center" | "end" | "stretch";
-type JustifyValue = "start" | "center" | "end" | "between" | "around" | "evenly";
-
-interface StackProps {
-  direction?: DirectionValue;
-  spacing?: SpacingValue;
-  align?: AlignValue;
-  justify?: JustifyValue;
-  wrap?: boolean;
-  children?: JSX.Element;
-}
-
-export function Stack(props: StackProps) {
-  const classes = createMemo(() =>
-    [
-      "stack",
-      `stack--${props.direction ?? "vertical"}`,
-      `stack--spacing-${props.spacing ?? 4}`,
-      `stack--align-${props.align ?? "stretch"}`,
-      `stack--justify-${props.justify ?? "start"}`,
-      props.wrap && "stack--wrap",
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  css`
-    .stack {
-      display: flex;
-    }
-    .stack--vertical {
-      flex-direction: column;
-    }
-    .stack--horizontal {
-      flex-direction: row;
-    }
-    .stack--vertical.stack--spacing-0 > :not(:last-child) {
-      margin-bottom: var(--space-0);
-    }
-    .stack--vertical.stack--spacing-1 > :not(:last-child) {
-      margin-bottom: var(--space-1);
-    }
-    .stack--vertical.stack--spacing-2 > :not(:last-child) {
-      margin-bottom: var(--space-2);
-    }
-    .stack--vertical.stack--spacing-3 > :not(:last-child) {
-      margin-bottom: var(--space-3);
-    }
-    .stack--vertical.stack--spacing-4 > :not(:last-child) {
-      margin-bottom: var(--space-4);
-    }
-    .stack--vertical.stack--spacing-5 > :not(:last-child) {
-      margin-bottom: var(--space-5);
-    }
-    .stack--vertical.stack--spacing-6 > :not(:last-child) {
-      margin-bottom: var(--space-6);
-    }
-    .stack--vertical.stack--spacing-8 > :not(:last-child) {
-      margin-bottom: var(--space-8);
-    }
-    .stack--vertical.stack--spacing-10 > :not(:last-child) {
-      margin-bottom: var(--space-10);
-    }
-    .stack--vertical.stack--spacing-12 > :not(:last-child) {
-      margin-bottom: var(--space-12);
-    }
-    .stack--horizontal.stack--spacing-0 > :not(:last-child) {
-      margin-right: var(--space-0);
-    }
-    .stack--horizontal.stack--spacing-1 > :not(:last-child) {
-      margin-right: var(--space-1);
-    }
-    .stack--horizontal.stack--spacing-2 > :not(:last-child) {
-      margin-right: var(--space-2);
-    }
-    .stack--horizontal.stack--spacing-3 > :not(:last-child) {
-      margin-right: var(--space-3);
-    }
-    .stack--horizontal.stack--spacing-4 > :not(:last-child) {
-      margin-right: var(--space-4);
-    }
-    .stack--horizontal.stack--spacing-5 > :not(:last-child) {
-      margin-right: var(--space-5);
-    }
-    .stack--horizontal.stack--spacing-6 > :not(:last-child) {
-      margin-right: var(--space-6);
-    }
-    .stack--horizontal.stack--spacing-8 > :not(:last-child) {
-      margin-right: var(--space-8);
-    }
-    .stack--horizontal.stack--spacing-10 > :not(:last-child) {
-      margin-right: var(--space-10);
-    }
-    .stack--horizontal.stack--spacing-12 > :not(:last-child) {
-      margin-right: var(--space-12);
-    }
-    .stack--align-start {
-      align-items: flex-start;
-    }
-    .stack--align-center {
-      align-items: center;
-    }
-    .stack--align-end {
-      align-items: flex-end;
-    }
-    .stack--align-stretch {
-      align-items: stretch;
-    }
-    .stack--justify-start {
-      justify-content: flex-start;
-    }
-    .stack--justify-center {
-      justify-content: center;
-    }
-    .stack--justify-end {
-      justify-content: flex-end;
-    }
-    .stack--justify-between {
-      justify-content: space-between;
-    }
-    .stack--justify-around {
-      justify-content: space-around;
-    }
-    .stack--justify-evenly {
-      justify-content: space-evenly;
-    }
-    .stack--wrap {
-      flex-wrap: wrap;
-    }
-  `;
-
-  return <div class={classes()}>{props.children}</div>;
-}
diff --git a/src/lib/components/layout/Stack.vue b/src/lib/components/layout/Stack.vue
new file mode 100644
index 0000000..bb956dc
--- /dev/null
+++ b/src/lib/components/layout/Stack.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+type DirectionValue = "vertical" | "horizontal";
+type AlignValue = "start" | "center" | "end" | "stretch";
+type JustifyValue = "start" | "center" | "end" | "between" | "around" | "evenly";
+
+interface Props {
+  direction?: DirectionValue;
+  spacing?: SpacingValue;
+  align?: AlignValue;
+  justify?: JustifyValue;
+  wrap?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: "vertical",
+  spacing: 4,
+  align: "stretch",
+  justify: "start",
+});
+
+const classes = computed(() =>
+  [
+    "stack",
+    `stack--${props.direction}`,
+    `stack--spacing-${props.spacing}`,
+    `stack--align-${props.align}`,
+    `stack--justify-${props.justify}`,
+    props.wrap && "stack--wrap",
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.stack {
+  display: flex;
+}
+.stack--vertical {
+  flex-direction: column;
+}
+.stack--horizontal {
+  flex-direction: row;
+}
+.stack--vertical.stack--spacing-0 > :not(:last-child) {
+  margin-bottom: var(--space-0);
+}
+.stack--vertical.stack--spacing-1 > :not(:last-child) {
+  margin-bottom: var(--space-1);
+}
+.stack--vertical.stack--spacing-2 > :not(:last-child) {
+  margin-bottom: var(--space-2);
+}
+.stack--vertical.stack--spacing-3 > :not(:last-child) {
+  margin-bottom: var(--space-3);
+}
+.stack--vertical.stack--spacing-4 > :not(:last-child) {
+  margin-bottom: var(--space-4);
+}
+.stack--vertical.stack--spacing-5 > :not(:last-child) {
+  margin-bottom: var(--space-5);
+}
+.stack--vertical.stack--spacing-6 > :not(:last-child) {
+  margin-bottom: var(--space-6);
+}
+.stack--vertical.stack--spacing-8 > :not(:last-child) {
+  margin-bottom: var(--space-8);
+}
+.stack--vertical.stack--spacing-10 > :not(:last-child) {
+  margin-bottom: var(--space-10);
+}
+.stack--vertical.stack--spacing-12 > :not(:last-child) {
+  margin-bottom: var(--space-12);
+}
+.stack--horizontal.stack--spacing-0 > :not(:last-child) {
+  margin-right: var(--space-0);
+}
+.stack--horizontal.stack--spacing-1 > :not(:last-child) {
+  margin-right: var(--space-1);
+}
+.stack--horizontal.stack--spacing-2 > :not(:last-child) {
+  margin-right: var(--space-2);
+}
+.stack--horizontal.stack--spacing-3 > :not(:last-child) {
+  margin-right: var(--space-3);
+}
+.stack--horizontal.stack--spacing-4 > :not(:last-child) {
+  margin-right: var(--space-4);
+}
+.stack--horizontal.stack--spacing-5 > :not(:last-child) {
+  margin-right: var(--space-5);
+}
+.stack--horizontal.stack--spacing-6 > :not(:last-child) {
+  margin-right: var(--space-6);
+}
+.stack--horizontal.stack--spacing-8 > :not(:last-child) {
+  margin-right: var(--space-8);
+}
+.stack--horizontal.stack--spacing-10 > :not(:last-child) {
+  margin-right: var(--space-10);
+}
+.stack--horizontal.stack--spacing-12 > :not(:last-child) {
+  margin-right: var(--space-12);
+}
+.stack--align-start {
+  align-items: flex-start;
+}
+.stack--align-center {
+  align-items: center;
+}
+.stack--align-end {
+  align-items: flex-end;
+}
+.stack--align-stretch {
+  align-items: stretch;
+}
+.stack--justify-start {
+  justify-content: flex-start;
+}
+.stack--justify-center {
+  justify-content: center;
+}
+.stack--justify-end {
+  justify-content: flex-end;
+}
+.stack--justify-between {
+  justify-content: space-between;
+}
+.stack--justify-around {
+  justify-content: space-around;
+}
+.stack--justify-evenly {
+  justify-content: space-evenly;
+}
+.stack--wrap {
+  flex-wrap: wrap;
+}
+</style>
diff --git a/src/lib/components/layout/index.ts b/src/lib/components/layout/index.ts
index 526fa34..7aa2a46 100644
--- a/src/lib/components/layout/index.ts
+++ b/src/lib/components/layout/index.ts
@@ -1,4 +1,4 @@
-export { Box } from "./Box";
-export { Stack } from "./Stack";
-export { Flex } from "./Flex";
-export { Grid } from "./Grid";
+export { default as Box } from "./Box.vue";
+export { default as Stack } from "./Stack.vue";
+export { default as Flex } from "./Flex.vue";
+export { default as Grid } from "./Grid.vue";
diff --git a/src/lib/components/typography/Heading.tsx b/src/lib/components/typography/Heading.tsx
deleted file mode 100644
index b0aac61..0000000
--- a/src/lib/components/typography/Heading.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { createMemo, type JSX } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { css } from "solid-styled";
-
-type LevelValue = 1 | 2 | 3 | 4 | 5 | 6;
-type SizeValue = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
-type WeightValue = "normal" | "medium" | "semibold" | "bold";
-type ColorValue = "base" | "secondary" | "tertiary" | "primary";
-
-interface HeadingProps {
-  level?: LevelValue;
-  size?: SizeValue;
-  weight?: WeightValue;
-  color?: ColorValue;
-  children?: JSX.Element;
-}
-
-const defaultSize: Record<LevelValue, SizeValue> = {
-  1: "4xl",
-  2: "3xl",
-  3: "2xl",
-  4: "xl",
-  5: "lg",
-  6: "base",
-};
-
-export function Heading(props: HeadingProps) {
-  const level = () => props.level ?? 1;
-  const finalSize = createMemo(() => props.size ?? defaultSize[level()]);
-  const tag = createMemo(() => `h${level()}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6");
-
-  const classes = createMemo(() =>
-    [
-      "heading",
-      `heading--size-${finalSize()}`,
-      `heading--weight-${props.weight ?? "bold"}`,
-      `heading--color-${props.color ?? "base"}`,
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  css`
-    .heading {
-      margin: 0;
-      font-family: var(--font-family-base);
-      line-height: var(--line-height-tight);
-    }
-    .heading--size-xs {
-      font-size: var(--font-size-xs);
-    }
-    .heading--size-sm {
-      font-size: var(--font-size-sm);
-    }
-    .heading--size-base {
-      font-size: var(--font-size-base);
-    }
-    .heading--size-lg {
-      font-size: var(--font-size-lg);
-    }
-    .heading--size-xl {
-      font-size: var(--font-size-xl);
-    }
-    .heading--size-2xl {
-      font-size: var(--font-size-2xl);
-    }
-    .heading--size-3xl {
-      font-size: var(--font-size-3xl);
-    }
-    .heading--size-4xl {
-      font-size: var(--font-size-4xl);
-    }
-    .heading--weight-normal {
-      font-weight: var(--font-weight-normal);
-    }
-    .heading--weight-medium {
-      font-weight: var(--font-weight-medium);
-    }
-    .heading--weight-semibold {
-      font-weight: var(--font-weight-semibold);
-    }
-    .heading--weight-bold {
-      font-weight: var(--font-weight-bold);
-    }
-    .heading--color-base {
-      color: var(--color-text);
-    }
-    .heading--color-secondary {
-      color: var(--color-text-secondary);
-    }
-    .heading--color-tertiary {
-      color: var(--color-text-tertiary);
-    }
-    .heading--color-primary {
-      color: var(--color-text-primary);
-    }
-  `;
-
-  return (
-    <Dynamic component={tag()} class={classes()}>
-      {props.children}
-    </Dynamic>
-  );
-}
diff --git a/src/lib/components/typography/Heading.vue b/src/lib/components/typography/Heading.vue
new file mode 100644
index 0000000..fb3cc5f
--- /dev/null
+++ b/src/lib/components/typography/Heading.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type LevelValue = 1 | 2 | 3 | 4 | 5 | 6;
+type SizeValue = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+type WeightValue = "normal" | "medium" | "semibold" | "bold";
+type ColorValue = "base" | "secondary" | "tertiary" | "primary";
+
+interface Props {
+  level?: LevelValue;
+  size?: SizeValue;
+  weight?: WeightValue;
+  color?: ColorValue;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  level: 1,
+  weight: "bold",
+  color: "base",
+});
+
+const defaultSize: Record<LevelValue, SizeValue> = {
+  1: "4xl",
+  2: "3xl",
+  3: "2xl",
+  4: "xl",
+  5: "lg",
+  6: "base",
+};
+
+const finalSize = computed(() => props.size ?? defaultSize[props.level]);
+const tag = computed(() => `h${props.level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6");
+
+const classes = computed(() =>
+  [
+    "heading",
+    `heading--size-${finalSize.value}`,
+    `heading--weight-${props.weight}`,
+    `heading--color-${props.color}`,
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+</script>
+
+<template>
+  <component :is="tag" :class="classes">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.heading {
+  margin: 0;
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-tight);
+}
+.heading--size-xs {
+  font-size: var(--font-size-xs);
+}
+.heading--size-sm {
+  font-size: var(--font-size-sm);
+}
+.heading--size-base {
+  font-size: var(--font-size-base);
+}
+.heading--size-lg {
+  font-size: var(--font-size-lg);
+}
+.heading--size-xl {
+  font-size: var(--font-size-xl);
+}
+.heading--size-2xl {
+  font-size: var(--font-size-2xl);
+}
+.heading--size-3xl {
+  font-size: var(--font-size-3xl);
+}
+.heading--size-4xl {
+  font-size: var(--font-size-4xl);
+}
+.heading--weight-normal {
+  font-weight: var(--font-weight-normal);
+}
+.heading--weight-medium {
+  font-weight: var(--font-weight-medium);
+}
+.heading--weight-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+.heading--weight-bold {
+  font-weight: var(--font-weight-bold);
+}
+.heading--color-base {
+  color: var(--color-text);
+}
+.heading--color-secondary {
+  color: var(--color-text-secondary);
+}
+.heading--color-tertiary {
+  color: var(--color-text-tertiary);
+}
+.heading--color-primary {
+  color: var(--color-text-primary);
+}
+</style>
diff --git a/src/lib/components/typography/Text.tsx b/src/lib/components/typography/Text.tsx
deleted file mode 100644
index c42298d..0000000
--- a/src/lib/components/typography/Text.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { createMemo, type JSX } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { css } from "solid-styled";
-
-type AsValue = "p" | "span" | "div" | "label";
-type SizeValue = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
-type WeightValue = "normal" | "medium" | "semibold" | "bold";
-type ColorValue = "base" | "secondary" | "tertiary" | "primary" | "error" | "success";
-type AlignValue = "left" | "center" | "right";
-
-interface TextProps {
-  as?: AsValue;
-  size?: SizeValue;
-  weight?: WeightValue;
-  color?: ColorValue;
-  align?: AlignValue;
-  truncate?: boolean;
-  children?: JSX.Element;
-}
-
-export function Text(props: TextProps) {
-  const classes = createMemo(() =>
-    [
-      "text",
-      `text--size-${props.size ?? "base"}`,
-      `text--weight-${props.weight ?? "normal"}`,
-      `text--color-${props.color ?? "base"}`,
-      `text--align-${props.align ?? "left"}`,
-      props.truncate && "text--truncate",
-    ]
-      .filter(Boolean)
-      .join(" "),
-  );
-
-  css`
-    .text {
-      margin: 0;
-      font-family: var(--font-family-base);
-      line-height: var(--line-height-normal);
-    }
-    .text--size-xs {
-      font-size: var(--font-size-xs);
-    }
-    .text--size-sm {
-      font-size: var(--font-size-sm);
-    }
-    .text--size-base {
-      font-size: var(--font-size-base);
-    }
-    .text--size-lg {
-      font-size: var(--font-size-lg);
-    }
-    .text--size-xl {
-      font-size: var(--font-size-xl);
-    }
-    .text--size-2xl {
-      font-size: var(--font-size-2xl);
-    }
-    .text--size-3xl {
-      font-size: var(--font-size-3xl);
-    }
-    .text--size-4xl {
-      font-size: var(--font-size-4xl);
-    }
-    .text--weight-normal {
-      font-weight: var(--font-weight-normal);
-    }
-    .text--weight-medium {
-      font-weight: var(--font-weight-medium);
-    }
-    .text--weight-semibold {
-      font-weight: var(--font-weight-semibold);
-    }
-    .text--weight-bold {
-      font-weight: var(--font-weight-bold);
-    }
-    .text--color-base {
-      color: var(--color-text);
-    }
-    .text--color-secondary {
-      color: var(--color-text-secondary);
-    }
-    .text--color-tertiary {
-      color: var(--color-text-tertiary);
-    }
-    .text--color-primary {
-      color: var(--color-text-primary);
-    }
-    .text--color-error {
-      color: var(--color-error);
-    }
-    .text--color-success {
-      color: var(--color-success);
-    }
-    .text--align-left {
-      text-align: left;
-    }
-    .text--align-center {
-      text-align: center;
-    }
-    .text--align-right {
-      text-align: right;
-    }
-    .text--truncate {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  `;
-
-  return (
-    <Dynamic component={props.as ?? "p"} class={classes()}>
-      {props.children}
-    </Dynamic>
-  );
-}
diff --git a/src/lib/components/typography/Text.vue b/src/lib/components/typography/Text.vue
new file mode 100644
index 0000000..222b00e
--- /dev/null
+++ b/src/lib/components/typography/Text.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type AsValue = "p" | "span" | "div" | "label";
+type SizeValue = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+type WeightValue = "normal" | "medium" | "semibold" | "bold";
+type ColorValue = "base" | "secondary" | "tertiary" | "primary" | "error" | "success";
+type AlignValue = "left" | "center" | "right";
+
+interface Props {
+  as?: AsValue;
+  size?: SizeValue;
+  weight?: WeightValue;
+  color?: ColorValue;
+  align?: AlignValue;
+  truncate?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "p",
+  size: "base",
+  weight: "normal",
+  color: "base",
+  align: "left",
+});
+
+const classes = computed(() =>
+  [
+    "text",
+    `text--size-${props.size}`,
+    `text--weight-${props.weight}`,
+    `text--color-${props.color}`,
+    `text--align-${props.align}`,
+    props.truncate && "text--truncate",
+  ]
+    .filter(Boolean)
+    .join(" "),
+);
+</script>
+
+<template>
+  <component :is="props.as" :class="classes">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.text {
+  margin: 0;
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-normal);
+}
+.text--size-xs {
+  font-size: var(--font-size-xs);
+}
+.text--size-sm {
+  font-size: var(--font-size-sm);
+}
+.text--size-base {
+  font-size: var(--font-size-base);
+}
+.text--size-lg {
+  font-size: var(--font-size-lg);
+}
+.text--size-xl {
+  font-size: var(--font-size-xl);
+}
+.text--size-2xl {
+  font-size: var(--font-size-2xl);
+}
+.text--size-3xl {
+  font-size: var(--font-size-3xl);
+}
+.text--size-4xl {
+  font-size: var(--font-size-4xl);
+}
+.text--weight-normal {
+  font-weight: var(--font-weight-normal);
+}
+.text--weight-medium {
+  font-weight: var(--font-weight-medium);
+}
+.text--weight-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+.text--weight-bold {
+  font-weight: var(--font-weight-bold);
+}
+.text--color-base {
+  color: var(--color-text);
+}
+.text--color-secondary {
+  color: var(--color-text-secondary);
+}
+.text--color-tertiary {
+  color: var(--color-text-tertiary);
+}
+.text--color-primary {
+  color: var(--color-text-primary);
+}
+.text--color-error {
+  color: var(--color-error);
+}
+.text--color-success {
+  color: var(--color-success);
+}
+.text--align-left {
+  text-align: left;
+}
+.text--align-center {
+  text-align: center;
+}
+.text--align-right {
+  text-align: right;
+}
+.text--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/lib/components/typography/index.ts b/src/lib/components/typography/index.ts
index 5874ec6..6fd78ce 100644
--- a/src/lib/components/typography/index.ts
+++ b/src/lib/components/typography/index.ts
@@ -1,2 +1,2 @@
-export { Text } from "./Text";
-export { Heading } from "./Heading";
+export { default as Text } from "./Text.vue";
+export { default as Heading } from "./Heading.vue";
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..5cd7b50
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import "./global.css";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/src/queryProxy.ts b/src/queryProxy.ts
index cd67bd8..8cef67a 100644
--- a/src/queryProxy.ts
+++ b/src/queryProxy.ts
@@ -1,10 +1,4 @@
-import {
-  setBlockLookupSig,
-  setHasFirstLoadedSig,
-  setSymbolHtmlNamesMapSig,
-  setWorkerIsReadySig,
-  setWorkerSig,
-} from "./stores";
+import { blockLookup, hasFirstLoaded, symbolHtmlNamesMap, workerIsReady, worker } from "./stores";
 import { parseBlocks } from "./utils/unicode";
 
 import { sendMessage } from "$utils/worker";
@@ -14,25 +8,25 @@ async function fetchBlocks() {
   const res = await fetch("/UnicodeBlocks.txt");
   const text = await res.text();
   const blocks = parseBlocks(text);
-  setBlockLookupSig(blocks);
+  blockLookup.value = blocks;
 }
 fetchBlocks();
 
 async function fetchSymbolHtmlNamesMap() {
   const text = await fetch("/SymbolHtmlNames.txt").then((res) => res.text());
 
-  const symbolNamesMap = text.split("\n").map((line) => {
+  const symbolNamesArr = text.split("\n").map((line) => {
     const [numStr, names] = line.split(";");
     return [parseInt(numStr!, 16), names!.split(",")] as [number, string[]];
   });
 
-  setSymbolHtmlNamesMapSig(new Map(symbolNamesMap));
+  symbolHtmlNamesMap.value = new Map(symbolNamesArr);
 }
 fetchSymbolHtmlNamesMap();
 
-const worker = new QueryWorker();
-setWorkerSig(worker);
-sendMessage(worker, { name: "loadTable" }).then(() => {
-  setHasFirstLoadedSig(true);
-  setWorkerIsReadySig(true);
+const queryWorker = new QueryWorker();
+worker.value = queryWorker;
+sendMessage(queryWorker, { name: "loadTable" }).then(() => {
+  hasFirstLoaded.value = true;
+  workerIsReady.value = true;
 });
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..d77b62b
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/src/stores/advancedSearch.ts b/src/stores/advancedSearch.ts
index 104fc35..6f4dcfe 100644
--- a/src/stores/advancedSearch.ts
+++ b/src/stores/advancedSearch.ts
@@ -1,9 +1,9 @@
 import type { BidiClass, Filter } from "$utils/types";
 import { PLANE_LENGTH } from "$utils/unicode";
-import { createSignal } from "solid-js";
+import { ref, type Ref } from "vue";
 
 export type Block = { range: [number, number]; name: string };
-export const [blockLookupSig, setBlockLookupSig] = createSignal<Block[]>([]);
+export const blockLookup: Ref<Block[]> = ref([]);
 
 type MatchType = "Require" | "Exclude";
 export type Box =
@@ -29,9 +29,8 @@ export const getNewBox = (): Box => ({
   matchType: "Require",
 });
 
-export const convertBoxSetToFilters = (boxes: Box[]): Filter[] => {
-  const blockLookup = blockLookupSig();
-  const filters = boxes
+export const convertBoxSetToFilters = (boxList: Box[]): Filter[] => {
+  const filters = boxList
     .filter((box) => box.data)
     .map((box) => {
       const negated = box.matchType === "Exclude";
@@ -61,8 +60,8 @@ export const convertBoxSetToFilters = (boxes: Box[]): Filter[] => {
       }
 
       if (name === "Unicode Block") {
-        if (!blockLookup) return;
-        const range = blockLookup.find((block) => block.name === data)?.range;
+        if (!blockLookup.value.length) return;
+        const range = blockLookup.value.find((block) => block.name === data)?.range;
         if (!range) return;
         return { type: "range", negated, value: range };
       }
@@ -79,4 +78,4 @@ export const convertBoxSetToFilters = (boxes: Box[]): Filter[] => {
   return filters.filter(Boolean) as Filter[];
 };
 
-export const [boxesSig, setBoxesSig] = createSignal<Box[]>([getNewBox()]);
+export const boxes: Ref<Box[]> = ref([getNewBox()]);
diff --git a/src/stores/index.ts b/src/stores/index.ts
index fec80b3..c641aa6 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -1,67 +1,64 @@
 import { sendMessage } from "$utils/worker";
-import { createSignal, createMemo, createEffect } from "solid-js";
-import { boxesSig, convertBoxSetToFilters } from "./advancedSearch";
+import { ref, computed, watch, shallowRef, type Ref, type ShallowRef, type ComputedRef } from "vue";
+import { boxes, convertBoxSetToFilters } from "./advancedSearch";
 import type { UnicodeMapData } from "@emnudge/unicode-query";
 
-export const [workerSig, setWorkerSig] = createSignal<Worker | null>(null);
+export const worker: ShallowRef<Worker | null> = shallowRef(null);
 
-export const [workerIsReadySig, setWorkerIsReadySig] = createSignal(false);
-export const [hasFirstLoadedSig, setHasFirstLoadedSig] = createSignal(false);
+export const workerIsReady: Ref<boolean> = ref(false);
+export const hasFirstLoaded: Ref<boolean> = ref(false);
 
 // which type of search is currently in use
-export const [searchModeSig, setSearchModeSig] = createSignal<"simple" | "advanced">("simple");
+export const searchMode: Ref<"simple" | "advanced"> = ref("simple");
 // stores for searches. We want them to persist even when they're not visible
-export const [easySearchSig, setEasySearchSig] = createSignal<string>("");
-export const advancedSearchSig = createMemo(() => convertBoxSetToFilters(boxesSig()));
-
-// Results signal that gets updated by an effect
-export const [resultsSig, setResultsSig] = createSignal<[number, UnicodeMapData][]>([]);
+export const easySearch: Ref<string> = ref("");
+export const advancedSearch: ComputedRef<ReturnType<typeof convertBoxSetToFilters>> = computed(() =>
+  convertBoxSetToFilters(boxes.value),
+);
 
-// Effect to fetch results when dependencies change
-createEffect(() => {
-  const text = easySearchSig();
-  const filters = advancedSearchSig();
-  const workerIsReady = workerIsReadySig();
-  const worker = workerSig();
-  const searchMode = searchModeSig();
+// Results ref that gets updated by a watcher
+export const results: ShallowRef<[number, UnicodeMapData][]> = shallowRef([]);
 
-  if (!workerIsReady || !worker) return;
+// Watcher to fetch results when dependencies change
+watch(
+  [easySearch, advancedSearch, workerIsReady, worker, searchMode],
+  ([text, filters, isReady, w, mode]) => {
+    if (!isReady || !w) return;
 
-  if (searchMode === "simple") {
-    sendMessage(worker, { name: "simple-query", payload: text }).then((results) => {
-      if (!hasFirstLoadedSig()) setHasFirstLoadedSig(true);
-      setResultsSig(results as [number, UnicodeMapData][]);
-    });
-  } else {
-    sendMessage(worker, { name: "advanced-query", payload: filters }).then((results) => {
-      if (!hasFirstLoadedSig()) setHasFirstLoadedSig(true);
-      setResultsSig(results as [number, UnicodeMapData][]);
-    });
-  }
-});
+    if (mode === "simple") {
+      sendMessage(w, { name: "simple-query", payload: text }).then((res) => {
+        if (!hasFirstLoaded.value) hasFirstLoaded.value = true;
+        results.value = res as [number, UnicodeMapData][];
+      });
+    } else {
+      sendMessage(w, { name: "advanced-query", payload: filters }).then((res) => {
+        if (!hasFirstLoaded.value) hasFirstLoaded.value = true;
+        results.value = res as [number, UnicodeMapData][];
+      });
+    }
+  },
+  { immediate: true },
+);
 
 export type Pattern = { exclude: boolean; category: string };
-export const [categorySearchSig, setCategorySearchSig] = createSignal<Pattern[]>([]);
+export const categorySearch: Ref<Pattern[]> = ref([]);
 
-export const [activeIndexSig, setActiveIndexSig] = createSignal(-1);
+export const activeIndex: Ref<number> = ref(-1);
 
 // Reset activeIndex when results change
-createEffect(() => {
-  resultsSig(); // track results
-  setActiveIndexSig(-1);
+watch(results, () => {
+  activeIndex.value = -1;
 });
 
-export const selectedCodepointSig = createMemo(() => {
-  const index = activeIndexSig();
-  const results = resultsSig();
-  return results?.[index]?.[1];
+export const selectedCodepoint: ComputedRef<UnicodeMapData | undefined> = computed(() => {
+  const index = activeIndex.value;
+  const res = results.value;
+  return res?.[index]?.[1];
 });
 
-export const [encodingModeSig, setEncodingModeSig] = createSignal<"hex" | "bin" | "dec">("hex");
+export const encodingMode: Ref<"hex" | "bin" | "dec"> = ref("hex");
 
 // advanced search data
 export * from "./advancedSearch";
 
-export const [symbolHtmlNamesMapSig, setSymbolHtmlNamesMapSig] = createSignal(
-  new Map<number, string[]>(),
-);
+export const symbolHtmlNamesMap: Ref<Map<number, string[]>> = ref(new Map<number, string[]>());
diff --git a/tsconfig.json b/tsconfig.json
index c5a0c15..7e090cb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,6 @@
 		"moduleResolution": "bundler",
 		"lib": ["ES2024", "DOM", "DOM.Iterable"],
 		"jsx": "preserve",
-		"jsxImportSource": "solid-js",
 		"strict": true,
 		"noEmit": true,
 		"skipLibCheck": true,
@@ -24,7 +23,7 @@
 			"$icons/*": ["./src/icons/*"],
 			"$src/*": ["./src/*"]
 		},
-		"types": ["vite/client"]
+		"types": ["rolldown-vite/client"]
 	},
-	"include": ["src"]
+	"include": ["src/**/*.ts", "src/**/*.vue"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 5087ce3..b3beb3d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,5 @@
-import { defineConfig } from "vite";
-import solid from "vite-plugin-solid";
-import solidStyled from "unplugin-solid-styled";
+import { defineConfig } from "rolldown-vite";
+import vue from "@vitejs/plugin-vue";
 import path from "path";
 
 export default defineConfig({
@@ -15,14 +14,5 @@ export default defineConfig({
 			$src: path.resolve(__dirname, "src"),
 		},
 	},
-	plugins: [
-		solid(),
-		solidStyled.vite({
-			prefix: "unicode",
-			filter: {
-				include: "src/**/*.tsx",
-				exclude: "node_modules/**/*.{ts,js}",
-			},
-		}),
-	],
+	plugins: [vue()],
 });