From 398bb9df8da4ef0745d70f874c7dddfde0eb5b99 Mon Sep 17 00:00:00 2001
From: EmNudge <24513691+EmNudge@users.noreply.github.com>
Date: Wed, 4 Feb 2026 00:55:21 -0500
Subject: [PATCH] Migrate from Solid.js to Vue 3 with Composition API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace Solid dependencies with Vue 3 and @vitejs/plugin-vue
- Switch bundler from vite to rolldown-vite for faster builds
- Convert all stores from createSignal/createMemo to ref/computed
- Migrate all .tsx components to Vue SFCs with <script setup>
- Convert Solid patterns: Show→v-if, For→v-for, Dynamic→<component :is>
- Update icons to Vue components
- Add vue-tsc for type checking
---
 dist/assets/index-BILrXVKr.js                 |   2 -
 dist/assets/index-BssihU6-.js                 |   4 -
 dist/assets/index-rClAvo4-.css                |   1 -
 dist/assets/queryProxy-BiNkDmOk.js            |   2 -
 dist/index.html                               |   4 +-
 index.html                                    |   2 +-
 package.json                                  |  12 +-
 pnpm-lock.yaml                                | 971 ++++++++----------
 src/App.tsx                                   | 100 --
 src/App.vue                                   |  90 ++
 src/components/EasySearch.tsx                 | 105 --
 src/components/EasySearch.vue                 | 112 ++
 src/components/Header.tsx                     |  65 --
 src/components/Header.vue                     |  57 +
 src/components/Loader.tsx                     |  41 -
 src/components/Loader.vue                     |  45 +
 src/components/ThemeSwitcher.tsx              |  62 --
 src/components/ThemeSwitcher.vue              |  65 ++
 .../advanced-search/AdvancedSearch.tsx        |  51 -
 .../advanced-search/AdvancedSearch.vue        |  58 ++
 src/components/advanced-search/BoxContent.tsx |  73 --
 src/components/advanced-search/BoxContent.vue |  86 ++
 src/components/advanced-search/BoxSet.tsx     |  55 -
 src/components/advanced-search/BoxSet.vue     |  67 ++
 src/components/advanced-search/Button.tsx     |  47 -
 src/components/advanced-search/Button.vue     |  50 +
 src/components/advanced-search/Dropdown.tsx   |  39 -
 src/components/advanced-search/Dropdown.vue   |  55 +
 src/components/advanced-search/Input.tsx      |  55 -
 src/components/advanced-search/Input.vue      |  73 ++
 .../advanced-search/NumberInput.tsx           |  90 --
 .../advanced-search/NumberInput.vue           | 100 ++
 .../advanced-search/box-types/BidiClass.tsx   |  28 -
 .../advanced-search/box-types/BidiClass.vue   |  39 +
 .../box-types/CodepointRange.tsx              |  25 -
 .../box-types/CodepointRange.vue              |  34 +
 .../box-types/NameIncludes.tsx                |  22 -
 .../box-types/NameIncludes.vue                |  33 +
 .../advanced-search/box-types/RegexMatch.tsx  |  59 --
 .../advanced-search/box-types/RegexMatch.vue  |  67 ++
 .../box-types/UnicodeBlock.tsx                |  45 -
 .../box-types/UnicodeBlock.vue                |  53 +
 .../box-types/UnicodePlane.tsx                |  29 -
 .../box-types/UnicodePlane.vue                |  40 +
 .../box-types/UnicodeProperty.tsx             |  36 -
 .../box-types/UnicodeProperty.vue             |  40 +
 .../advanced-search/box-types/index.ts        |  18 +-
 .../table-container/InfoContainer.tsx         | 141 ---
 .../table-container/InfoContainer.vue         | 140 +++
 .../table-container/ResultsContainer.tsx      |  85 --
 .../table-container/ResultsContainer.vue      |  89 ++
 src/components/table-container/ResultsRow.tsx | 102 --
 src/components/table-container/ResultsRow.vue | 116 +++
 .../info-tables/CaseMapping.tsx               |  44 -
 .../info-tables/CaseMapping.vue               |  40 +
 .../table-container/info-tables/Encoding.tsx  | 118 ---
 .../table-container/info-tables/Encoding.vue  | 117 +++
 .../info-tables/HtmlEntities.tsx              |  60 --
 .../info-tables/HtmlEntities.vue              |  53 +
 .../info-tables/NumberEquiv.tsx               |  43 -
 .../info-tables/NumberEquiv.vue               |  39 +
 .../info-tables/Properties.tsx                |  38 -
 .../info-tables/Properties.vue                |  37 +
 src/icons/CloseIcon.vue                       |   8 +
 src/icons/FilterIcon.vue                      |  21 +
 src/icons/GitHubIcon.vue                      |  42 +
 src/icons/SettingsIcon.vue                    |  50 +
 src/icons/SunIcon.vue                         |  25 +
 src/icons/close.tsx                           |  10 -
 src/icons/filter.tsx                          |  16 -
 src/icons/github.tsx                          |  40 -
 src/icons/settings.tsx                        |  55 -
 src/icons/sun.tsx                             |  27 -
 src/index.tsx                                 |   5 -
 src/lib/components/feedback/Alert.tsx         | 107 --
 src/lib/components/feedback/Alert.vue         | 113 ++
 src/lib/components/feedback/Badge.tsx         | 101 --
 src/lib/components/feedback/Badge.vue         | 102 ++
 src/lib/components/feedback/Spinner.tsx       |  75 --
 src/lib/components/feedback/Spinner.vue       |  77 ++
 src/lib/components/feedback/index.ts          |   6 +-
 src/lib/components/forms/Button.tsx           | 176 ----
 src/lib/components/forms/Button.vue           | 181 ++++
 src/lib/components/forms/Checkbox.tsx         | 141 ---
 src/lib/components/forms/Checkbox.vue         | 151 +++
 src/lib/components/forms/Input.tsx            | 144 ---
 src/lib/components/forms/Input.vue            | 151 +++
 src/lib/components/forms/Label.tsx            |  61 --
 src/lib/components/forms/Label.vue            |  67 ++
 src/lib/components/forms/Radio.tsx            |  94 --
 src/lib/components/forms/Radio.vue            |  94 ++
 src/lib/components/forms/Select.tsx           | 159 ---
 src/lib/components/forms/Select.vue           | 161 +++
 src/lib/components/forms/Switch.tsx           | 122 ---
 src/lib/components/forms/Switch.vue           | 129 +++
 src/lib/components/forms/TextArea.tsx         | 127 ---
 src/lib/components/forms/TextArea.vue         | 136 +++
 src/lib/components/forms/index.ts             |  16 +-
 src/lib/components/layout/Box.tsx             | 377 -------
 src/lib/components/layout/Box.vue             | 378 +++++++
 src/lib/components/layout/Flex.tsx            | 121 ---
 src/lib/components/layout/Flex.vue            | 130 +++
 src/lib/components/layout/Grid.tsx            | 142 ---
 src/lib/components/layout/Grid.vue            | 145 +++
 src/lib/components/layout/Stack.tsx           | 138 ---
 src/lib/components/layout/Stack.vue           | 147 +++
 src/lib/components/layout/index.ts            |   8 +-
 src/lib/components/typography/Heading.tsx     | 104 --
 src/lib/components/typography/Heading.vue     | 106 ++
 src/lib/components/typography/Text.tsx        | 116 ---
 src/lib/components/typography/Text.vue        | 121 +++
 src/lib/components/typography/index.ts        |   4 +-
 src/main.ts                                   |   5 +
 src/queryProxy.ts                             |  24 +-
 src/shims-vue.d.ts                            |   5 +
 src/stores/advancedSearch.ts                  |  15 +-
 src/stores/index.ts                           |  85 +-
 tsconfig.json                                 |   5 +-
 vite.config.ts                                |  16 +-
 119 files changed, 4875 insertions(+), 4776 deletions(-)
 delete mode 100644 dist/assets/index-BILrXVKr.js
 delete mode 100644 dist/assets/index-BssihU6-.js
 delete mode 100644 dist/assets/index-rClAvo4-.css
 delete mode 100644 dist/assets/queryProxy-BiNkDmOk.js
 delete mode 100644 src/App.tsx
 create mode 100644 src/App.vue
 delete mode 100644 src/components/EasySearch.tsx
 create mode 100644 src/components/EasySearch.vue
 delete mode 100644 src/components/Header.tsx
 create mode 100644 src/components/Header.vue
 delete mode 100644 src/components/Loader.tsx
 create mode 100644 src/components/Loader.vue
 delete mode 100644 src/components/ThemeSwitcher.tsx
 create mode 100644 src/components/ThemeSwitcher.vue
 delete mode 100644 src/components/advanced-search/AdvancedSearch.tsx
 create mode 100644 src/components/advanced-search/AdvancedSearch.vue
 delete mode 100644 src/components/advanced-search/BoxContent.tsx
 create mode 100644 src/components/advanced-search/BoxContent.vue
 delete mode 100644 src/components/advanced-search/BoxSet.tsx
 create mode 100644 src/components/advanced-search/BoxSet.vue
 delete mode 100644 src/components/advanced-search/Button.tsx
 create mode 100644 src/components/advanced-search/Button.vue
 delete mode 100644 src/components/advanced-search/Dropdown.tsx
 create mode 100644 src/components/advanced-search/Dropdown.vue
 delete mode 100644 src/components/advanced-search/Input.tsx
 create mode 100644 src/components/advanced-search/Input.vue
 delete mode 100644 src/components/advanced-search/NumberInput.tsx
 create mode 100644 src/components/advanced-search/NumberInput.vue
 delete mode 100644 src/components/advanced-search/box-types/BidiClass.tsx
 create mode 100644 src/components/advanced-search/box-types/BidiClass.vue
 delete mode 100644 src/components/advanced-search/box-types/CodepointRange.tsx
 create mode 100644 src/components/advanced-search/box-types/CodepointRange.vue
 delete mode 100644 src/components/advanced-search/box-types/NameIncludes.tsx
 create mode 100644 src/components/advanced-search/box-types/NameIncludes.vue
 delete mode 100644 src/components/advanced-search/box-types/RegexMatch.tsx
 create mode 100644 src/components/advanced-search/box-types/RegexMatch.vue
 delete mode 100644 src/components/advanced-search/box-types/UnicodeBlock.tsx
 create mode 100644 src/components/advanced-search/box-types/UnicodeBlock.vue
 delete mode 100644 src/components/advanced-search/box-types/UnicodePlane.tsx
 create mode 100644 src/components/advanced-search/box-types/UnicodePlane.vue
 delete mode 100644 src/components/advanced-search/box-types/UnicodeProperty.tsx
 create mode 100644 src/components/advanced-search/box-types/UnicodeProperty.vue
 delete mode 100644 src/components/table-container/InfoContainer.tsx
 create mode 100644 src/components/table-container/InfoContainer.vue
 delete mode 100644 src/components/table-container/ResultsContainer.tsx
 create mode 100644 src/components/table-container/ResultsContainer.vue
 delete mode 100644 src/components/table-container/ResultsRow.tsx
 create mode 100644 src/components/table-container/ResultsRow.vue
 delete mode 100644 src/components/table-container/info-tables/CaseMapping.tsx
 create mode 100644 src/components/table-container/info-tables/CaseMapping.vue
 delete mode 100644 src/components/table-container/info-tables/Encoding.tsx
 create mode 100644 src/components/table-container/info-tables/Encoding.vue
 delete mode 100644 src/components/table-container/info-tables/HtmlEntities.tsx
 create mode 100644 src/components/table-container/info-tables/HtmlEntities.vue
 delete mode 100644 src/components/table-container/info-tables/NumberEquiv.tsx
 create mode 100644 src/components/table-container/info-tables/NumberEquiv.vue
 delete mode 100644 src/components/table-container/info-tables/Properties.tsx
 create mode 100644 src/components/table-container/info-tables/Properties.vue
 create mode 100644 src/icons/CloseIcon.vue
 create mode 100644 src/icons/FilterIcon.vue
 create mode 100644 src/icons/GitHubIcon.vue
 create mode 100644 src/icons/SettingsIcon.vue
 create mode 100644 src/icons/SunIcon.vue
 delete mode 100644 src/icons/close.tsx
 delete mode 100644 src/icons/filter.tsx
 delete mode 100644 src/icons/github.tsx
 delete mode 100644 src/icons/settings.tsx
 delete mode 100644 src/icons/sun.tsx
 delete mode 100644 src/index.tsx
 delete mode 100644 src/lib/components/feedback/Alert.tsx
 create mode 100644 src/lib/components/feedback/Alert.vue
 delete mode 100644 src/lib/components/feedback/Badge.tsx
 create mode 100644 src/lib/components/feedback/Badge.vue
 delete mode 100644 src/lib/components/feedback/Spinner.tsx
 create mode 100644 src/lib/components/feedback/Spinner.vue
 delete mode 100644 src/lib/components/forms/Button.tsx
 create mode 100644 src/lib/components/forms/Button.vue
 delete mode 100644 src/lib/components/forms/Checkbox.tsx
 create mode 100644 src/lib/components/forms/Checkbox.vue
 delete mode 100644 src/lib/components/forms/Input.tsx
 create mode 100644 src/lib/components/forms/Input.vue
 delete mode 100644 src/lib/components/forms/Label.tsx
 create mode 100644 src/lib/components/forms/Label.vue
 delete mode 100644 src/lib/components/forms/Radio.tsx
 create mode 100644 src/lib/components/forms/Radio.vue
 delete mode 100644 src/lib/components/forms/Select.tsx
 create mode 100644 src/lib/components/forms/Select.vue
 delete mode 100644 src/lib/components/forms/Switch.tsx
 create mode 100644 src/lib/components/forms/Switch.vue
 delete mode 100644 src/lib/components/forms/TextArea.tsx
 create mode 100644 src/lib/components/forms/TextArea.vue
 delete mode 100644 src/lib/components/layout/Box.tsx
 create mode 100644 src/lib/components/layout/Box.vue
 delete mode 100644 src/lib/components/layout/Flex.tsx
 create mode 100644 src/lib/components/layout/Flex.vue
 delete mode 100644 src/lib/components/layout/Grid.tsx
 create mode 100644 src/lib/components/layout/Grid.vue
 delete mode 100644 src/lib/components/layout/Stack.tsx
 create mode 100644 src/lib/components/layout/Stack.vue
 delete mode 100644 src/lib/components/typography/Heading.tsx
 create mode 100644 src/lib/components/typography/Heading.vue
 delete mode 100644 src/lib/components/typography/Text.tsx
 create mode 100644 src/lib/components/typography/Text.vue
 create mode 100644 src/main.ts
 create mode 100644 src/shims-vue.d.ts

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()],
 });