diff --git a/.gitea/workflows/deploy.yaml b/.gitea/workflows/deploy.yaml
index ee0ffa7..5ea780b 100644
--- a/.gitea/workflows/deploy.yaml
+++ b/.gitea/workflows/deploy.yaml
@@ -8,12 +8,13 @@ env:
   PNPM_CACHE_FOLDER: .pnpm-store
 
 jobs:
-  setup:
+  build_and_deploy:
     runs-on: ubuntu-latest
     container: jimfx/nodes:latest
     steps:
       - name: 📑 Checkout Code
         uses: actions/checkout@v4
+
       - name: 💾 Setup pnpm Cache
         uses: actions/cache@v4
         with:
@@ -21,52 +22,24 @@ jobs:
           key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-
+
       - name: 📦 Install Dependencies
         run: pnpm install --frozen-lockfile --store-dir ${{ env.PNPM_CACHE_FOLDER }}
 
-      - name: 🗜️ Tar Workspace
-        run: tar -cf workspace.tar --exclude="${{ env.PNPM_CACHE_FOLDER }}" .
-
-      - name: 📤 Upload Workspace
-        uses: actions/upload-artifact@v3
-        with:
-          name: workspace-deps
-          path: workspace.tar
-          compression-level: 0
-
-  lint:
-    needs: setup
-    runs-on: ubuntu-latest
-    container: jimfx/nodes:latest
-    steps:
-      - name: 📥 Download Workspace
-        uses: actions/download-artifact@v3
-        with:
-          name: workspace-deps
-      - name: 🔓 Untar Workspace
-        run: tar -xf workspace.tar && rm workspace.tar
       - name: 🧹 Run Linter
         run: pnpm lint
+
       - name: 🎨 Check Formatting
         run: pnpm format:check
+
       - name: 🧬 Type Check
         run: pnpm check
 
-  build_and_deploy:
-    if: github.ref == 'refs/heads/main'
-    needs: [lint]
-    runs-on: ubuntu-latest
-    container: jimfx/nodes:latest
-    steps:
-      - name: 📥 Download Workspace
-        uses: actions/download-artifact@v3
-        with:
-          name: workspace-deps
-      - name: 🔓 Untar Workspace
-        run: tar -xf workspace.tar && rm workspace.tar
       - name: 🛠️ Build Site
         run: pnpm run build:deploy
+
       - name: 🔑 Configure rclone
+        if: github.ref == 'refs/heads/main'
         run: |
           echo "$SSH_PRIVATE_KEY" > /tmp/id_rsa
           chmod 600 /tmp/id_rsa
@@ -79,6 +52,7 @@ jobs:
           SSH_USER: ${{ vars.SSH_USER }}
 
       - name: 🚀 Deploy Changed Files via rclone
+        if: github.ref == 'refs/heads/main'
         run: |
           echo "Uploading the rest"
           rclone sync --update -v --progress --exclude _astro/** --stats 2s --stats-one-line ./app/build/ sftp-remote:${REMOTE_DIR} --transfers 4
diff --git a/app/src/app.css b/app/src/app.css
index 563075f..731a79f 100644
--- a/app/src/app.css
+++ b/app/src/app.css
@@ -4,3 +4,7 @@
   prefix: "i";
   icon-sets: from-folder(custom, "./src/lib/icons");
 }
+
+body * {
+  color: var(--color-text);
+}
diff --git a/app/src/lib/graph-interface/components/AddMenu.svelte b/app/src/lib/graph-interface/components/AddMenu.svelte
index 0c6b6b9..d355ed7 100644
--- a/app/src/lib/graph-interface/components/AddMenu.svelte
+++ b/app/src/lib/graph-interface/components/AddMenu.svelte
@@ -149,7 +149,7 @@
   }
 
   input {
-    background: var(--layer-0);
+    background: var(--color-layer-0);
     font-family: var(--font-family);
     border: none;
     border-radius: 5px;
@@ -168,10 +168,10 @@
 
   .add-menu-wrapper {
     position: absolute;
-    background: var(--layer-1);
+    background: var(--color-layer-1);
     border-radius: 7px;
     overflow: hidden;
-    border: solid 2px var(--layer-2);
+    border: solid 2px var(--color-layer-2);
     width: 150px;
   }
   .content {
@@ -184,14 +184,14 @@
 
   .result {
     padding: 1em 0.9em;
-    border-bottom: solid 1px var(--layer-2);
+    border-bottom: solid 1px var(--color-layer-2);
     opacity: 0.7;
     font-size: 0.9em;
     cursor: pointer;
   }
 
   .result[aria-selected="true"] {
-    background: var(--layer-2);
+    background: var(--color-layer-2);
     opacity: 1;
   }
 </style>
diff --git a/app/src/lib/graph-interface/components/BoxSelection.svelte b/app/src/lib/graph-interface/components/BoxSelection.svelte
index eb17343..9e10b83 100644
--- a/app/src/lib/graph-interface/components/BoxSelection.svelte
+++ b/app/src/lib/graph-interface/components/BoxSelection.svelte
@@ -32,7 +32,7 @@
   .box-selection {
     width: 40px;
     height: 20px;
-    border: solid 2px var(--outline);
+    border: solid 2px var(--color-outline);
     border-style: dashed;
     border-radius: 2px;
   }
diff --git a/app/src/lib/graph-interface/components/HelpView.svelte b/app/src/lib/graph-interface/components/HelpView.svelte
index 61dd8fb..1a62a66 100644
--- a/app/src/lib/graph-interface/components/HelpView.svelte
+++ b/app/src/lib/graph-interface/components/HelpView.svelte
@@ -88,12 +88,12 @@
     position: fixed;
     pointer-events: none;
     transform: translate(var(--mx), var(--my));
-    background: var(--layer-1);
+    background: var(--color-layer-1);
     border-radius: 5px;
     top: 10px;
     left: 10px;
     max-width: 250px;
-    border: 1px solid var(--outline);
+    border: 1px solid var(--color-outline);
     z-index: 10000;
     display: none;
   }
diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte
index 6f14be2..bc36434 100644
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -244,7 +244,7 @@
     z-index: 1;
     width: 100%;
     height: 100%;
-    background: var(--layer-2);
+    background: var(--color-layer-2);
     opacity: 0;
   }
   input:disabled {
@@ -264,8 +264,8 @@
     border-radius: 5px;
     width: calc(100% - 20px);
     height: calc(100% - 25px);
-    border: dashed 4px var(--layer-2);
-    background: var(--layer-1);
+    border: dashed 4px var(--color-layer-2);
+    background: var(--color-layer-1);
     opacity: 0.5;
   }
 </style>
diff --git a/app/src/lib/graph-interface/graph/colors.svelte.ts b/app/src/lib/graph-interface/graph/colors.svelte.ts
index e53647c..6f1f5a9 100644
--- a/app/src/lib/graph-interface/graph/colors.svelte.ts
+++ b/app/src/lib/graph-interface/graph/colors.svelte.ts
@@ -14,7 +14,7 @@ const variables = [
 
 function getColor(variable: (typeof variables)[number]) {
   const style = getComputedStyle(document.body.parentElement!);
-  const color = style.getPropertyValue(`--${variable}`);
+  const color = style.getPropertyValue(`--color-${variable}`);
   return new Color().setStyle(color, LinearSRGBColorSpace);
 }
 
@@ -27,7 +27,7 @@ $effect.root(() => {
     if (!appSettings.value.theme || !('getComputedStyle' in globalThis)) return;
     const style = getComputedStyle(document.body.parentElement!);
     for (const v of variables) {
-      const hex = style.getPropertyValue(`--${v}`);
+      const hex = style.getPropertyValue(`--color-${v}`);
       colors[v].setStyle(hex, LinearSRGBColorSpace);
     }
   });
diff --git a/app/src/lib/graph-interface/node/NodeHTML.svelte b/app/src/lib/graph-interface/node/NodeHTML.svelte
index 51dca40..8cb2b8d 100644
--- a/app/src/lib/graph-interface/node/NodeHTML.svelte
+++ b/app/src/lib/graph-interface/node/NodeHTML.svelte
@@ -71,22 +71,22 @@
     user-select: none !important;
     cursor: pointer;
     width: 200px;
-    color: var(--text-color);
+    color: var(--color-text);
     transform: translate3d(var(--nx), var(--ny), 0);
     z-index: 1;
     opacity: calc((var(--cz) - 2.5) / 3.5);
     font-weight: 300;
-    --stroke: var(--outline);
+    --stroke: var(--color-outline);
     --stroke-width: 2px;
   }
 
   .node.active {
-    --stroke: var(--active);
+    --stroke: var(--color-active);
     --stroke-width: 2px;
   }
 
   .node.selected {
-    --stroke: var(--selected);
+    --stroke: var(--color-selected);
     --stroke-width: 2px;
   }
 </style>
diff --git a/app/src/lib/graph-interface/node/NodeHeader.svelte b/app/src/lib/graph-interface/node/NodeHeader.svelte
index 6652d55..9809ec0 100644
--- a/app/src/lib/graph-interface/node/NodeHeader.svelte
+++ b/app/src/lib/graph-interface/node/NodeHeader.svelte
@@ -109,7 +109,7 @@
   svg path {
     stroke-width: 0.2px;
     transition: d 0.3s ease, fill 0.3s ease;
-    fill: var(--layer-2);
+    fill: var(--color-layer-2);
     stroke: var(--stroke);
     stroke-width: var(--stroke-width);
     d: var(--path);
diff --git a/app/src/lib/graph-interface/node/NodeParameter.svelte b/app/src/lib/graph-interface/node/NodeParameter.svelte
index 8581a51..e5fcd3e 100644
--- a/app/src/lib/graph-interface/node/NodeParameter.svelte
+++ b/app/src/lib/graph-interface/node/NodeParameter.svelte
@@ -175,7 +175,7 @@
 
   svg path {
     transition: d 0.3s ease, fill 0.3s ease;
-    fill: var(--layer-1);
+    fill: var(--color-layer-1);
     stroke: var(--stroke);
     stroke-width: var(--stroke-width);
     d: var(--path);
diff --git a/app/src/lib/grid/Cell.svelte b/app/src/lib/grid/Cell.svelte
index 49911fa..83d775b 100644
--- a/app/src/lib/grid/Cell.svelte
+++ b/app/src/lib/grid/Cell.svelte
@@ -62,7 +62,7 @@
     cursor: ew-resize;
     height: 100%;
     width: 1px;
-    background: var(--outline);
+    background: var(--color-outline);
   }
   .seperator::before {
     content: "";
diff --git a/app/src/lib/node-store/BreadCrumbs.svelte b/app/src/lib/node-store/BreadCrumbs.svelte
index c1a639e..d2fff15 100644
--- a/app/src/lib/node-store/BreadCrumbs.svelte
+++ b/app/src/lib/node-store/BreadCrumbs.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Select } from '@nodarium/ui';
+  import { InputSelect } from '@nodarium/ui';
 
   let activeStore = $state(0);
   let { activeId }: { activeId: string } = $props();
@@ -10,7 +10,7 @@
 
 <div class="breadcrumbs">
   {#if activeUser}
-    <Select id="root" options={['root']} bind:value={activeStore}></Select>
+    <InputSelect id="root" options={['root']} bind:value={activeStore}></InputSelect>
     {#if activeCollection}
       <button
         onclick={() => {
@@ -35,7 +35,7 @@
       <span>{activeUser}</span>
     {/if}
   {:else}
-    <Select id="root" options={['root']} bind:value={activeStore}></Select>
+    <InputSelect id="root" options={['root']} bind:value={activeStore}></InputSelect>
   {/if}
 </div>
 
@@ -47,7 +47,7 @@
     gap: 0.8em;
     height: 35px;
     box-sizing: border-box;
-    border-bottom: solid thin var(--outline);
+    border-bottom: solid thin var(--color-outline);
   }
   .breadcrumbs > button {
     position: relative;
diff --git a/app/src/lib/node-store/DraggableNode.svelte b/app/src/lib/node-store/DraggableNode.svelte
index 797472d..a47b753 100644
--- a/app/src/lib/node-store/DraggableNode.svelte
+++ b/app/src/lib/node-store/DraggableNode.svelte
@@ -51,7 +51,9 @@
     tabindex="0"
     ondragstart={handleDragStart}
   >
-    <NodeHtml bind:node={nodeData} inView={true} position="relative" z={5} />
+    {#if nodeData}
+      <NodeHtml bind:node={nodeData} inView={true} position="relative" z={5} />
+    {/if}
   </div>
 </div>
 
@@ -66,7 +68,7 @@
   }
 
   .dragging {
-    border: dashed 2px var(--outline);
+    border: dashed 2px var(--color-outline);
   }
   .node-wrapper > div {
     opacity: 1;
diff --git a/app/src/lib/performance/Monitor.svelte b/app/src/lib/performance/Monitor.svelte
index a13115f..022269c 100644
--- a/app/src/lib/performance/Monitor.svelte
+++ b/app/src/lib/performance/Monitor.svelte
@@ -74,7 +74,7 @@
 
   .wrapper {
     position: relative;
-    border-bottom: solid thin var(--outline);
+    border-bottom: solid thin var(--color-outline);
     display: flex;
   }
   p {
@@ -88,13 +88,13 @@
   svg {
     height: 124px;
     margin: 24px 0px;
-    border-top: solid thin var(--outline);
-    border-bottom: solid thin var(--outline);
+    border-top: solid thin var(--color-outline);
+    border-bottom: solid thin var(--color-outline);
     width: 100%;
   }
   polyline {
     fill: none;
-    stroke: var(--layer-3);
+    stroke: var(--color-layer-3);
     opacity: 0.5;
     stroke-width: 1;
   }
diff --git a/app/src/lib/performance/PerformanceViewer.svelte b/app/src/lib/performance/PerformanceViewer.svelte
index fdf598a..28b852f 100644
--- a/app/src/lib/performance/PerformanceViewer.svelte
+++ b/app/src/lib/performance/PerformanceViewer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { humanizeNumber } from '$lib/helpers';
-  import { Checkbox } from '@nodarium/ui';
+  import { InputCheckbox } from '@nodarium/ui';
   import type { PerformanceData } from '@nodarium/utils';
   import BarSplit from './BarSplit.svelte';
   import Monitor from './Monitor.svelte';
@@ -195,7 +195,7 @@
 
   <div class="p-4 performance-tabler">
     <div class="flex items-center gap-2">
-      <Checkbox id="show-total" bind:value={showAverage} />
+      <InputCheckbox id="show-total" bind:value={showAverage} />
       <label for="show-total">Show Average</label>
     </div>
 
diff --git a/app/src/lib/performance/SmallGraph.svelte b/app/src/lib/performance/SmallGraph.svelte
index 0c6ebe0..494e6c7 100644
--- a/app/src/lib/performance/SmallGraph.svelte
+++ b/app/src/lib/performance/SmallGraph.svelte
@@ -25,7 +25,7 @@
   }
   polyline {
     fill: none;
-    stroke: var(--layer-3);
+    stroke: var(--color-layer-3);
     opacity: 1;
     stroke-width: 1;
   }
diff --git a/app/src/lib/performance/SmallPerformanceViewer.svelte b/app/src/lib/performance/SmallPerformanceViewer.svelte
index 1853943..9691eaf 100644
--- a/app/src/lib/performance/SmallPerformanceViewer.svelte
+++ b/app/src/lib/performance/SmallPerformanceViewer.svelte
@@ -74,14 +74,14 @@
     top: 10px;
     left: 10px;
     z-index: 2;
-    background: var(--layer-0);
-    border: solid thin var(--outline);
+    background: var(--color-layer-0);
+    border: solid thin var(--color-outline);
     border-collapse: collapse;
   }
   td {
     padding: 4px;
     padding-inline: 8px;
     font-size: 0.8em;
-    border: solid thin var(--outline);
+    border: solid thin var(--color-outline);
   }
 </style>
diff --git a/app/src/lib/project-manager/ProjectManager.svelte b/app/src/lib/project-manager/ProjectManager.svelte
index eab05fa..4d3ff66 100644
--- a/app/src/lib/project-manager/ProjectManager.svelte
+++ b/app/src/lib/project-manager/ProjectManager.svelte
@@ -31,10 +31,10 @@
   }
 </script>
 
-<header class="flex justify-between px-4 h-[70px] border-b-1 border-[var(--outline)] items-center">
+<header class="flex justify-between px-4 h-[70px] border-b-1 border-outline items-center">
   <h3>Project</h3>
   <button
-    class="px-3 py-1 bg-[var(--layer-0)] rounded"
+    class="px-3 py-1 bg-layer-0 rounded"
     onclick={() => (showNewProject = !showNewProject)}
   >
     New
@@ -42,7 +42,7 @@
 </header>
 
 {#if showNewProject}
-  <div class="flex flex-col px-4 py-3 border-b-1 border-[var(--outline)] gap-2">
+  <div class="flex flex-col px-4 py-3 border-b-1 border-outline gap-2">
     <input
       type="text"
       bind:value={newProjectName}
diff --git a/app/src/lib/settings/NestedSettings.svelte b/app/src/lib/settings/NestedSettings.svelte
index 258a9af..2945563 100644
--- a/app/src/lib/settings/NestedSettings.svelte
+++ b/app/src/lib/settings/NestedSettings.svelte
@@ -211,6 +211,11 @@
     padding-left: 1em;
     padding-right: 1em;
     padding-bottom: 1px;
+    gap: 3px;
+  }
+
+  .first-level.input-boolean {
+    gap: 10px;
   }
 
   button {
@@ -218,11 +223,10 @@
   }
 
   hr {
-    position: absolute;
     margin: 0;
     left: 0;
     right: 0;
     border: none;
-    border-bottom: solid thin var(--outline);
+    border-bottom: solid thin var(--color-outline);
   }
 </style>
diff --git a/app/src/lib/sidebar/Panel.svelte b/app/src/lib/sidebar/Panel.svelte
index 19b0bc0..603fe36 100644
--- a/app/src/lib/sidebar/Panel.svelte
+++ b/app/src/lib/sidebar/Panel.svelte
@@ -33,8 +33,8 @@
 {#if panelState.activePanel.value === id}
   <div class="wrapper" class:hidden>
     {#if title}
-      <header>
-        <h3>{title}</h3>
+      <header class="bg-layer-2">
+        <h3 class="font-bold">{title}</h3>
       </header>
     {/if}
     {@render children?.()}
@@ -43,7 +43,7 @@
 
 <style>
   header {
-    border-bottom: solid thin var(--outline);
+    border-bottom: solid thin var(--color-outline);
     height: 70px;
     display: flex;
     align-items: center;
diff --git a/app/src/lib/sidebar/Sidebar.svelte b/app/src/lib/sidebar/Sidebar.svelte
index 2abb9f6..b2ad5fe 100644
--- a/app/src/lib/sidebar/Sidebar.svelte
+++ b/app/src/lib/sidebar/Sidebar.svelte
@@ -8,7 +8,6 @@
 <div class="wrapper" class:visible={state.activePanel.value}>
   <div class="tabs">
     <button aria-label="Close" onclick={() => state.toggleOpen()}>
-      <span class="icon-[tabler--settings]"></span>
       <span class="absolute i-[tabler--chevron-left] w-6 h-6 block"></span>
     </button>
     {#each state.keys as panelId (panelId)}
@@ -45,7 +44,7 @@
   }
 
   .content {
-    background: var(--layer-1);
+    background: var(--color-layer-1);
     z-index: 10;
     position: relative;
     max-height: 100vh;
@@ -55,7 +54,7 @@
   .tabs {
     display: flex;
     flex-direction: column;
-    border-right: solid thin var(--outline);
+    border-right: solid thin var(--color-outline);
   }
 
   .tabs > button {
@@ -66,9 +65,9 @@
     border: none;
     display: flex;
     align-items: center;
-    border-bottom: solid thin var(--outline);
-    border-left: solid thin var(--outline);
-    background: var(--layer-1);
+    border-bottom: solid thin var(--color-outline);
+    border-left: solid thin var(--color-outline);
+    background: var(--color-layer-1);
   }
 
   .tabs > button > span {
@@ -76,7 +75,7 @@
   }
 
   .tabs > button.active {
-    background: var(--layer-2);
+    background: var(--color-layer-2);
   }
 
   .tabs > button.active span {
diff --git a/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte b/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
index 52b8b04..ac53556 100644
--- a/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
+++ b/app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
@@ -95,5 +95,5 @@
     type={nodeDefinition}
   />
 {:else}
-  <p class="mx-4">Node has no settings</p>
+  <p class="mx-4 mt-4">Node has no settings</p>
 {/if}
diff --git a/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte b/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
index fde457b..c3b76f8 100644
--- a/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
+++ b/app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
@@ -11,14 +11,16 @@
   let { manager, node = $bindable() }: Props = $props();
 </script>
 
+<div class='{node?"border-l-2 pl-3.5!":""} bg-layer-2 flex items-center h-[70px] border-b-1 border-l-selected border-b-outline pl-4'>
+  <h3 class="font-bold">Node Settings</h3>
+</div>
+
 {#if node}
   {#key node.id}
     {#if node}
       <ActiveNodeSelected {manager} bind:node />
-    {:else}
-      <p class="mx-4">Active Node has no Settings</p>
     {/if}
   {/key}
 {:else}
-  <p class="mx-4">No node selected</p>
+  <p class="mx-4 mt-4">No node selected</p>
 {/if}
diff --git a/app/src/lib/sidebar/panels/BenchmarkPanel.svelte b/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
index f8c91f9..00fc655 100644
--- a/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
+++ b/app/src/lib/sidebar/panels/BenchmarkPanel.svelte
@@ -8,7 +8,7 @@
   import { humanizeDuration } from '$lib/helpers';
   import { localState } from '$lib/helpers/localState.svelte';
   import Monitor from '$lib/performance/Monitor.svelte';
-  import { Float } from '@nodarium/ui';
+  import { InputNumber } from '@nodarium/ui';
   import { writable } from 'svelte/store';
 
   function calculateStandardDeviation(array: number[]) {
@@ -125,7 +125,7 @@
     </progress>
   {:else}
     <label for="bench-samples">Samples</label>
-    <Float id="bench-sample" bind:value={amount.value} max={1000} />
+    <InputNumber id="bench-sample" bind:value={amount.value} max={1000} step={1} />
     <button onclick={benchmark} disabled={isRunning}>start</button>
   {/if}
 </div>
@@ -138,7 +138,7 @@
     gap: 1em;
   }
   .monitor-wrapper {
-    border: solid thin var(--outline);
+    border: solid thin var(--color-outline);
     border-bottom: none;
   }
   i {
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 013e760..a7b3cb6 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -247,12 +247,6 @@
             type={graphSettingTypes}
             bind:value={graphSettings}
           />
-        </Panel>
-        <Panel
-          id="active-node"
-          title="Node Settings"
-          icon="i-[tabler--adjustments] bg-blue-400"
-        >
           <ActiveNodeSettings {manager} bind:node={activeNode} />
         </Panel>
       </Sidebar>
@@ -262,7 +256,7 @@
 
 <style>
   header {
-    background-color: var(--layer-1);
+    background-color: var(--color-layer-1);
   }
 
   .wrapper {
diff --git a/package.json b/package.json
index f7000a9..1722c2f 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "build:story": "pnpm -r --filter 'ui' story:build",
     "build:app": "BASE_PATH=/ui pnpm -r --filter 'ui' build && pnpm -r --filter 'app' build",
     "build:nodes": "cargo build --workspace --target wasm32-unknown-unknown --release && rm -rf ./app/static/nodes/max/plantarium/ && mkdir -p ./app/static/nodes/max/plantarium/ && cp -R ./target/wasm32-unknown-unknown/release/*.wasm ./app/static/nodes/max/plantarium/",
-    "build:deploy": "pnpm build && cp packages/ui/build app/build/ui",
+    "build:deploy": "pnpm build && cp -R packages/ui/build app/build/ui",
     "dev:nodes": "chokidar './nodes/**' --initial -i '/pkg/' -c 'pnpm build:nodes'",
     "dev:app_ui": "pnpm -r --parallel --filter 'app' --filter './packages/ui' dev",
     "dev_ui": "pnpm -r --filter 'ui' dev:ui",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d754f1f..14241c9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,8 +2,7 @@
   "name": "@nodarium/ui",
   "version": "0.0.1",
   "scripts": {
-    "dev": "chokidar './src/**' --initial -c 'pnpm build'",
-    "dev:ui": "vite",
+    "dev": "vite",
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
@@ -43,7 +42,6 @@
     "@types/three": "^0.182.0",
     "@typescript-eslint/eslint-plugin": "^8.53.0",
     "@typescript-eslint/parser": "^8.53.0",
-    "chokidar-cli": "^3.0.0",
     "dprint": "^0.51.1",
     "eslint": "^9.39.2",
     "eslint-plugin-svelte": "^3.14.0",
@@ -62,6 +60,8 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
+    "@iconify-json/tabler": "^1.2.26",
+    "@iconify/tailwind4": "^1.2.1",
     "@tailwindcss/vite": "^4.1.18",
     "@threlte/core": "^8.3.1",
     "@threlte/extras": "^9.7.1",
diff --git a/packages/ui/src/lib/Details.svelte b/packages/ui/src/lib/Details.svelte
index 06a9116..b41b76c 100644
--- a/packages/ui/src/lib/Details.svelte
+++ b/packages/ui/src/lib/Details.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   interface Props {
     title?: string;
     transparent?: boolean;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
     open?: boolean;
   }
-
   let { title = 'Details', transparent = false, children, open = $bindable(false) }: Props =
     $props();
 </script>
 
-<details class:transparent bind:open>
+<details class:transparent bind:open class="text-text outline-1 outline-outline bg-layer-1">
   <summary>{title}</summary>
   <div class="content">
     {@render children?.()}
@@ -20,10 +20,7 @@
 <style>
   details {
     padding: 1em;
-    color: var(--text-color);
     padding-left: 20px;
-    background-color: #202020;
-    outline: solid 0.1px white;
     border-radius: 2px;
     font-weight: 300;
     font-size: 0.9em;
diff --git a/packages/ui/src/lib/Input.svelte b/packages/ui/src/lib/Input.svelte
index b0cb42c..581b585 100644
--- a/packages/ui/src/lib/Input.svelte
+++ b/packages/ui/src/lib/Input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { NodeInput } from '@nodarium/types';
 
-  import { Checkbox, Float, Select, Vec3 } from './index.js';
+  import { InputCheckbox, InputNumber, InputSelect, InputVec3 } from './index';
 
   interface Props {
     input: NodeInput;
@@ -13,18 +13,18 @@
 </script>
 
 {#if input.type === 'float'}
-  <Float
+  <InputNumber
     bind:value={value as number}
     min={input?.min}
     max={input?.max}
     step={input?.step}
   />
 {:else if input.type === 'integer'}
-  <Float bind:value={value as number} min={input?.min} max={input?.max} />
+  <InputNumber bind:value={value as number} min={input?.min} max={input?.max} step={1} />
 {:else if input.type === 'boolean'}
-  <Checkbox bind:value={value as boolean} {id} />
+  <InputCheckbox bind:value={value as boolean} {id} />
 {:else if input.type === 'select'}
-  <Select bind:value={value as number} options={input.options} {id} />
+  <InputSelect bind:value={value as number} options={input.options} {id} />
 {:else if input.type === 'vec3'}
-  <Vec3 bind:value={value as [number, number, number]} {id} />
+  <InputVec3 bind:value={value as [number, number, number]} {id} />
 {/if}
diff --git a/packages/ui/src/lib/ShortCut.svelte b/packages/ui/src/lib/ShortCut.svelte
index 314bdc3..29f759e 100644
--- a/packages/ui/src/lib/ShortCut.svelte
+++ b/packages/ui/src/lib/ShortCut.svelte
@@ -9,7 +9,7 @@
   let { ctrl = false, shift = false, alt = false, key }: Props = $props();
 </script>
 
-<div class="command">
+<div class="command bg-layer-2">
   {#if ctrl}
     <span>Ctrl</span>
   {/if}
@@ -24,8 +24,8 @@
 
 <style>
   .command {
-    background: var(--layer-2);
     padding: 0.4em;
+    padding-inline: 0.8em;
     font-size: 0.8em;
     border-radius: 0.3em;
     white-space: nowrap;
diff --git a/packages/ui/src/lib/app.css b/packages/ui/src/lib/app.css
index d4b9fdc..4a8c59c 100644
--- a/packages/ui/src/lib/app.css
+++ b/packages/ui/src/lib/app.css
@@ -1,4 +1,18 @@
 @import "tailwindcss";
+@plugin "@iconify/tailwind4" {
+  prefix: "i";
+}
+
+@source inline('{hover:,}{bg-,outline-,text-,}layer-0');
+@source inline('{hover:,}{bg-,outline-,text-,}layer-1');
+@source inline('{hover:,}{bg-,outline-,text-,}layer-2');
+@source inline('{hover:,}{bg-,outline-,text-,}layer-3');
+@source inline('{hover:,}{bg-,outline-,text-,}active');
+@source inline('{hover:,}{bg-,outline-,text-,}selected');
+@source inline('{hover:,}{bg-,outline-,text-,}outline{!,}');
+@source inline('{hover:,}{bg-,outline-,text-,}connection');
+@source inline('{hover:,}{bg-,outline-,text-,}edge');
+@source inline('{hover:,}{bg-,outline-,text-,}text');
 
 /* fira-code-300 - latin */
 @font-face {
@@ -58,9 +72,9 @@
 
   --color-outline: var(--neutral-400);
   --color-connection: #333333;
-  --color-edge: var(--connection, var(--outline));
+  --color-edge: var(--connection, var(--color-outline));
 
-  --color-text-color: var(--neutral-200);
+  --color-text: var(--neutral-200);
 }
 
 html {
@@ -72,100 +86,89 @@ html {
   --neutral-800: #111111;
   --neutral-900: #060606;
 
-  --layer-0: var(--neutral-900);
-  --layer-1: var(--neutral-500);
-  --layer-2: var(--neutral-400);
-  --layer-3: var(--neutral-200);
+  --color-layer-0: var(--neutral-900);
+  --color-layer-1: var(--neutral-500);
+  --color-layer-2: var(--neutral-400);
+  --color-layer-3: var(--neutral-200);
 
-  --active: #ffffff;
-  --selected: #c65a19;
+  --color-active: #ffffff;
+  --color-selected: #c65a19;
 
-  --outline: var(--neutral-400);
-  --connection: #333333;
-  --edge: var(--connection, var(--outline));
+  --color-outline: var(--neutral-400);
+  --color-connection: #333333;
+  --color-edge: var(--connection, var(--color-outline));
 
-  --text-color: var(--neutral-200);
+  --color-text-color: var(--neutral-200);
 }
 
 body {
-  color: var(--text-color);
-  background-color: var(--layer-0);
+  color: var(--color-text);
+  background-color: var(--color-layer-0);
   margin: 0;
 }
 
-body * {
-  color: var(--text-color);
-}
-
 html.theme-light {
-  --text-color: var(--neutral-800);
-  --outline: var(--neutral-300);
-  --layer-0: var(--neutral-100);
-  --layer-1: var(--neutral-100);
-  --layer-2: var(--neutral-200);
-  --layer-3: var(--neutral-500);
-  --active: #000000;
-  --selected: #c65a19;
-  --connection: #888;
+  --color-text: var(--neutral-800);
+  --color-outline: var(--neutral-300);
+  --color-layer-0: var(--neutral-100);
+  --color-layer-1: var(--neutral-100);
+  --color-layer-2: var(--neutral-200);
+  --color-layer-3: var(--neutral-500);
+  --color-active: #000000;
+  --color-selected: #c65a19;
+  --color-connection: #888;
 }
 
 html.theme-solarized {
-  --text-color: #425055;
-  --outline: #93a1a1;
-  --layer-0: #fdf6e3;
-  --layer-1: #eee8d5;
-  --layer-2: #c4c0b4;
-  --layer-3: #586e75;
-  --active: #000000;
-  --selected: #268bd2;
-  --connection: #839496;
+  --color-text: #425055;
+  --color-outline: #93a1a1;
+  --color-layer-0: #fdf6e3;
+  --color-layer-1: #eee8d5;
+  --color-layer-2: #c4c0b4;
+  --color-layer-3: #586e75;
+  --color-active: #000000;
+  --color-selected: #268bd2;
+  --color-connection: #839496;
 }
 
 html.theme-catppuccin {
-  --text-color: #cdd6f4;
-  --outline: #3e3e4f;
-  --layer-3: #a8aac8;
-  --layer-2: #313244;
-  --layer-1: #1e1e2e;
-  --layer-0: #11111b;
-  --connection: #444459;
+  --color-text: #cdd6f4;
+  --color-outline: #3e3e4f;
+  --color-layer-3: #a8aac8;
+  --color-layer-2: #313244;
+  --color-layer-1: #1e1e2e;
+  --color-layer-0: #11111b;
+  --color-connection: #444459;
 }
 
 html.theme-high-contrast {
-  --text-color: #ffffff;
-  --outline: white;
-  --layer-0: #000000;
-  --layer-1: black;
-  --layer-2: #222222;
-  --layer-3: #ffffff;
-  --connection: #fff;
+  --color-text: #ffffff;
+  --color-outline: white;
+  --color-layer-0: #000000;
+  --color-layer-1: black;
+  --color-layer-2: #222222;
+  --color-layer-3: #ffffff;
+  --color-connection: #fff;
 }
 
 html.theme-nord {
-  --text-color: #d8dee9;
-  --outline: #4c566a;
-  --layer-0: #2e3440;
-  --layer-1: #3b4252;
-  --layer-2: #434c5e;
-  --layer-3: #5e81ac;
-  --active: #8999bd;
-  --selected: #b76c3f;
-  --connection: #4c566a;
+  --color-text: #d8dee9;
+  --color-outline: #4c566a;
+  --color-layer-0: #2e3440;
+  --color-layer-1: #3b4252;
+  --color-layer-2: #434c5e;
+  --color-layer-3: #5e81ac;
+  --color-active: #8999bd;
+  --color-selected: #b76c3f;
+  --color-connection: #4c566a;
 }
 
 html.theme-dracula {
-  --text-color: #f8f8f2;
-  --outline: #6272a4;
-  --layer-0: #282a36;
-  --layer-1: #44475a;
-  --layer-2: #32374d;
-  --layer-3: #bd93f9;
-  --connection: #6272a4;
-}
-
-button {
-  background-color: var(--layer-2);
-  border: 1px solid var(--outline);
-  padding: 8px 9px;
-  border-radius: 4px;
+  --color-text: #f8f8f2;
+  --color-outline: #6272a4;
+  --color-layer-0: #282a36;
+  --color-layer-1: #44475a;
+  --color-layer-2: #32374d;
+  --color-layer-3: #bd93f9;
+  --color-connection: #6272a4;
 }
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index 123812a..1d62ad3 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -1,8 +1,8 @@
 export { default as Input } from './Input.svelte';
-export { default as Checkbox } from './inputs/Checkbox.svelte';
-export { default as Float } from './inputs/Float.svelte';
-export { default as Select } from './inputs/Select.svelte';
-export { default as Vec3 } from './inputs/Vec3.svelte';
+export { default as InputCheckbox } from './inputs/InputCheckbox.svelte';
+export { default as InputNumber } from './inputs/InputNumber.svelte';
+export { default as InputSelect } from './inputs/InputSelect.svelte';
+export { default as InputVec3 } from './inputs/InputVec3.svelte';
 
 export { default as Details } from './Details.svelte';
 export { default as ShortCut } from './ShortCut.svelte';
diff --git a/packages/ui/src/lib/inputs/Float.svelte b/packages/ui/src/lib/inputs/Float.svelte
deleted file mode 100644
index 3fa48e3..0000000
--- a/packages/ui/src/lib/inputs/Float.svelte
+++ /dev/null
@@ -1,199 +0,0 @@
-<script lang="ts">
-  interface Props {
-    value?: number;
-    step?: number;
-    min?: number;
-    max?: number;
-    id?: string;
-  }
-
-  let {
-    value = $bindable(0.5),
-    step,
-    min = $bindable(0),
-    max = $bindable(1),
-    id
-  }: Props = $props();
-
-  if (min > max) {
-    [min, max] = [max, min];
-  }
-  if (value > max) {
-    max = value;
-  }
-
-  const precision = $derived(
-    ((step || value).toString().split('.')[1] || '').length
-  );
-
-  function strip(input: number) {
-    return +parseFloat(input + '').toFixed(precision);
-  }
-
-  let inputEl: HTMLInputElement | undefined = $state();
-
-  let oldValue: number;
-  function handleChange() {
-    if (value === oldValue) return;
-    oldValue = value;
-  }
-
-  let isMouseDown = $state(false);
-  let downV = 0;
-  let vx = 0;
-  let rect: DOMRect;
-
-  function handleMouseDown(ev: MouseEvent) {
-    ev.preventDefault();
-
-    if (!inputEl) return;
-
-    inputEl.focus();
-
-    isMouseDown = true;
-
-    downV = value;
-    rect = inputEl.getBoundingClientRect();
-
-    window.removeEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
-    document.body.style.cursor = 'ew-resize';
-    (ev.target as HTMLElement)?.blur();
-  }
-
-  function handleMouseUp() {
-    isMouseDown = false;
-
-    if (downV === value) {
-      inputEl?.focus();
-    }
-
-    if (value > max) {
-      max = value;
-    }
-
-    if (value < min) {
-      min = value;
-    }
-
-    document.body.style.cursor = 'unset';
-    window.removeEventListener('mouseup', handleMouseUp);
-    window.removeEventListener('mousemove', handleMouseMove);
-  }
-
-  function handleKeyDown(ev: KeyboardEvent) {
-    if (ev.key === 'Escape' || ev.key === 'Enter') {
-      handleMouseUp();
-      inputEl?.blur();
-    }
-  }
-
-  function handleMouseMove(ev: MouseEvent) {
-    vx = (ev.clientX - rect.left) / rect.width;
-
-    if (ev.ctrlKey) {
-      let v = min + (max - min) * vx;
-      value = v;
-    } else {
-      value = Math.max(Math.min(min + (max - min) * vx, max), min);
-    }
-
-    value = strip(value);
-
-    // With ctrl + outside of input ev.target becomes HTMLDocument
-    if (ev.target instanceof HTMLElement) {
-      ev.target?.blur();
-    }
-  }
-
-  $effect(() => {
-    if (value.toString().length > 5) {
-      value = strip(value);
-    }
-    if (value !== undefined) {
-      handleChange();
-    }
-  });
-
-  let width = $derived(
-    Number.isFinite(value)
-      ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px'
-      : '20px'
-  );
-</script>
-
-<div class="component-wrapper" class:is-down={isMouseDown}>
-  <span class="overlay" style={`width: ${((value - min) / (max - min)) * 100}%`}></span>
-  <input
-    bind:value
-    bind:this={inputEl}
-    {id}
-    {step}
-    {max}
-    {min}
-    onkeydown={handleKeyDown}
-    onmousedown={handleMouseDown}
-    onmouseup={handleMouseUp}
-    type="number"
-    style={`width:${width};`}
-  />
-</div>
-
-<style>
-  .component-wrapper {
-    position: relative;
-    background-color: var(--layer-2, #4b4b4b);
-    border-radius: 4px;
-    user-select: none;
-    transition: box-shadow 0.3s ease;
-    border: solid 1px var(--outline);
-    box-sizing: border-box;
-    overflow: hidden;
-    border-radius: var(--border-radius, 2px);
-  }
-
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-  }
-
-  input[type="number"] {
-    box-sizing: border-box;
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-    font-family: var(--font-family);
-    font-variant-numeric: tabular-nums;
-    cursor: pointer;
-    color: var(--text-color);
-    background-color: transparent;
-    padding: var(--padding, 6px);
-    font-size: 1em;
-    padding-inline: 10px;
-    text-align: center;
-    border: none;
-    border-style: none;
-    min-width: 100%;
-  }
-
-  .is-down > input {
-    cursor: ew-resize !important;
-  }
-
-  .overlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    max-width: 100%;
-    background-color: var(--text-color);
-    opacity: 0.3;
-    pointer-events: none;
-    transition: width 0.3s ease;
-  }
-
-  .is-down > .overlay {
-    transition: none !important;
-  }
-</style>
diff --git a/packages/ui/src/lib/inputs/Checkbox.svelte b/packages/ui/src/lib/inputs/InputCheckbox.svelte
similarity index 84%
rename from packages/ui/src/lib/inputs/Checkbox.svelte
rename to packages/ui/src/lib/inputs/InputCheckbox.svelte
index f2c2185..1435b91 100644
--- a/packages/ui/src/lib/inputs/Checkbox.svelte
+++ b/packages/ui/src/lib/inputs/InputCheckbox.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <label
-  class="relative inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center bg-[var(--layer-2)] rounded-[5px]"
+  class="relative inline-flex h-5.5 w-5.5 cursor-pointer items-center justify-center bg-layer-2 rounded-[5px]"
 >
   <input
     type="checkbox"
@@ -33,7 +33,7 @@
       viewBox="0 0 19 14"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      class="h-[10px] w-[12px] text-[var(--text-color)]"
+      class="h-2.5 w-3 text-text"
     >
       <path
         d="M2 7L7 12L17 2"
diff --git a/packages/ui/src/lib/inputs/InputNumber.svelte b/packages/ui/src/lib/inputs/InputNumber.svelte
new file mode 100644
index 0000000..a2e7cc3
--- /dev/null
+++ b/packages/ui/src/lib/inputs/InputNumber.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  interface Props {
+    value?: number;
+    step?: number;
+    min?: number;
+    max?: number;
+    id?: string;
+  }
+
+  let {
+    value = $bindable(0.5),
+    step,
+    min = $bindable(0),
+    max = $bindable(1),
+    id
+  }: Props = $props();
+
+  // normalize bounds
+  if (min > max) [min, max] = [max, min];
+  if (value > max) max = value;
+
+  let inputEl: HTMLInputElement | undefined = $state();
+
+  function clamp(v: number) {
+    return Math.min(max, Math.max(min, v));
+  }
+
+  function snap(v: number) {
+    if (step) v = Math.round(v / step) * step;
+    return +v.toFixed(3);
+  }
+
+  let dragging = $state(false);
+  let startValue = 0;
+  let rect: DOMRect;
+
+  function onMouseDown(e: MouseEvent) {
+    if (!inputEl) return;
+
+    e.preventDefault();
+
+    dragging = true;
+    startValue = value;
+    rect = inputEl.getBoundingClientRect();
+
+    document.body.style.cursor = 'ew-resize';
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  }
+
+  function onMouseMove(e: MouseEvent) {
+    const ratio = (e.clientX - rect.left) / rect.width;
+    let delta = (min + (max - min) * ratio) - startValue;
+
+    if (e.shiftKey) delta /= 5;
+
+    value = snap(
+      e.ctrlKey
+        ? startValue + delta
+        : clamp(startValue + delta)
+    );
+  }
+
+  function onMouseUp() {
+    dragging = false;
+    document.body.style.cursor = '';
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    if (startValue === value) {
+      inputEl?.focus();
+    }
+
+    min = Math.min(min, value);
+    max = Math.max(max, value);
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape' || e.key === 'Enter') {
+      onMouseUp();
+      inputEl?.blur();
+    }
+  }
+
+  function windowKeyDown(e: KeyboardEvent) {
+    if (!dragging) return;
+    if (e.shiftKey) {
+      startValue = value;
+    }
+  }
+
+  const width = $derived(
+    Number.isFinite(value)
+      ? `${Math.max(value.toString().length * 8, 50)}px`
+      : '20px'
+  );
+
+  function stepUp(e: MouseEvent) {
+    value = snap(value + (e.shiftKey ? step! * 10 : step!));
+  }
+
+  function stepDown(e: MouseEvent) {
+    value = snap(value - (e.shiftKey ? step! * 10 : step!));
+  }
+
+  onMount(() => {
+    value = snap(clamp(value));
+  });
+</script>
+
+<svelte:window onkeydown={windowKeyDown} />
+
+<div
+  class="component-wrapper relative flex items-stretch overflow-hidden rounded-sm border border-outline bg-layer-2 select-none transition-shadow"
+  class:cursor-ew-resize={dragging}
+>
+  {#if step}
+    <button
+      aria-label="step down"
+      onmousedown={stepDown}
+      class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
+    >
+      <span class="i-[tabler--chevron-compact-left] block h-full w-full text-outline!"></span>
+    </button>
+    <div class="w-px bg-outline"></div>
+  {/if}
+
+  <div class="relative grow">
+    <div
+      class="absolute inset-y-0 left-0 bg-layer-3 opacity-30 pointer-events-none transition-[width]"
+      class:transition-none={dragging}
+      style={`width: ${Math.min((value - min) / (max - min), 1) * 100}%`}
+    >
+    </div>
+
+    <input
+      bind:this={inputEl}
+      bind:value
+      {id}
+      {step}
+      {min}
+      {max}
+      type="number"
+      onkeydown={onKeyDown}
+      onmousedown={onMouseDown}
+      class="w-full min-w-full cursor-pointer bg-transparent px-2 py-1 text-center font-tabular text-text outline-none appearance-none"
+      style:width={width}
+    />
+  </div>
+
+  {#if step}
+    <div class="w-px bg-outline"></div>
+    <button
+      aria-label="step up"
+      onmousedown={stepUp}
+      class="cursor-pointer w-4 bg-layer-3 opacity-30 hover:opacity-50"
+    >
+      <span class="i-[tabler--chevron-compact-right] block h-full w-full text-outline!"></span>
+    </button>
+  {/if}
+</div>
+
+<style>
+  input[type="number"] {
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+</style>
diff --git a/packages/ui/src/lib/inputs/Search.svelte b/packages/ui/src/lib/inputs/InputSearch.svelte
similarity index 100%
rename from packages/ui/src/lib/inputs/Search.svelte
rename to packages/ui/src/lib/inputs/InputSearch.svelte
diff --git a/packages/ui/src/lib/inputs/Select.svelte b/packages/ui/src/lib/inputs/InputSelect.svelte
similarity index 77%
rename from packages/ui/src/lib/inputs/Select.svelte
rename to packages/ui/src/lib/inputs/InputSelect.svelte
index 31a2a5a..6490b52 100644
--- a/packages/ui/src/lib/inputs/Select.svelte
+++ b/packages/ui/src/lib/inputs/InputSelect.svelte
@@ -8,7 +8,7 @@
   let { options = [], value = $bindable(0), id = '' }: Props = $props();
 </script>
 
-<select {id} bind:value>
+<select {id} bind:value class="bg-layer-2 text-text">
   {#each options as label, i (label)}
     <option value={i}>{label}</option>
   {/each}
@@ -16,10 +16,8 @@
 
 <style>
   select {
-    background: var(--layer-2);
-    color: var(--text-color);
     font-family: var(--font-family);
-    outline: solid 1px var(--outline);
+    outline: solid 1px var(--color-outline);
     padding: 0.8em 1em;
     border-radius: 5px;
     border: none;
diff --git a/packages/ui/src/lib/inputs/Vec3.svelte b/packages/ui/src/lib/inputs/InputVec3.svelte
similarity index 57%
rename from packages/ui/src/lib/inputs/Vec3.svelte
rename to packages/ui/src/lib/inputs/InputVec3.svelte
index 0222892..d5e33b5 100644
--- a/packages/ui/src/lib/inputs/Vec3.svelte
+++ b/packages/ui/src/lib/inputs/InputVec3.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Float from './Float.svelte';
+  import InputNumber from './InputNumber.svelte';
 
   interface Props {
     value?: number[];
@@ -10,9 +10,9 @@
 </script>
 
 <div>
-  <Float id={`${id}-x`} bind:value={value[0]} step={0.01} />
-  <Float id={`${id}-y`} bind:value={value[1]} step={0.01} />
-  <Float id={`${id}-z`} bind:value={value[2]} step={0.01} />
+  <InputNumber id={`${id}-x`} bind:value={value[0]} step={0.01} />
+  <InputNumber id={`${id}-y`} bind:value={value[1]} step={0.01} />
+  <InputNumber id={`${id}-z`} bind:value={value[2]} step={0.01} />
 </div>
 
 <style>
@@ -23,9 +23,9 @@
   div > :global(.component-wrapper:nth-child(2)) {
     border-radius: 0px !important;
     outline: none;
-    border: solid thin var(--outline);
-    border-top: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
-    border-bottom: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
+    border: solid thin var(--color-outline);
+    border-top: solid 1px var(--color-outline);
+    border-bottom: solid 1px var(--color-outline);
   }
   div > :global(.component-wrapper:nth-child(3)) {
     border-top: none !important;
diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte
index 742539f..bb69ecd 100644
--- a/packages/ui/src/routes/+page.svelte
+++ b/packages/ui/src/routes/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
   import '$lib/app.css';
-  import { Checkbox, Details, Float, Select, ShortCut, Vec3 } from '$lib/index.js';
+  import { Details, InputCheckbox, InputNumber, InputSelect, InputVec3, ShortCut } from '$lib';
   import Section from './Section.svelte';
 
   let intValue = $state(0);
   let floatValue = $state(0.2);
-  let float2Value = $state(0.02);
   let float3Value = $state(1);
   let vecValue = $state([0.2, 0.3, 0.4]);
   const options = ['strawberry', 'raspberry', 'chickpeas'];
@@ -16,6 +15,7 @@
   let detailsOpen = $state(false);
 
   const themes = [
+    'dark',
     'light',
     'solarized',
     'catppuccin',
@@ -31,40 +31,63 @@
     }
     document.documentElement.classList.add(`theme-${themes[themeIndex]}`);
   });
+
+  const colors = [
+    'layer-0',
+    'layer-1',
+    'layer-2',
+    'layer-3',
+    'active',
+    'selected',
+    'outline',
+    'connection',
+    'edge',
+    'text'
+  ];
 </script>
 
 <main class="flex flex-col gap-8 py-8">
   <div class="flex gap-4">
     <h1 class="text-4xl">@nodarium/ui</h1>
-    <Select bind:value={themeIndex} options={themes}></Select>
+    <InputSelect bind:value={themeIndex} options={themes}></InputSelect>
   </div>
 
-  <Section title="Integer (step inherit)" value={intValue}>
-    <Float bind:value={intValue} max={2} />
+  <Section title="Colors">
+    <table>
+      <tbody>
+        {#each colors as color (color)}
+          <tr>
+            <td>
+              <div class="w-6 h-6 mr-2 my-1 rounded-sm outline-1 bg-{color}"></div>
+            </td>
+            <td>{color}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
   </Section>
 
-  <Section title="Float (step inherit)" value={floatValue}>
-    <Float bind:value={floatValue} />
-  </Section>
-
-  <Section title="Float 2 (step inherit)" value={intValue}>
-    <Float bind:value={float2Value} />
-  </Section>
-
-  <Section title="Float (0.01 step)" value={floatValue}>
-    <Float bind:value={float3Value} step={0.01} max={3} />
+  <Section title="InputNumber">
+    <div class="flex flex-col gap-2">
+      <p>value={floatValue}</p>
+      <InputNumber bind:value={floatValue} />
+      <p>min=0 max=10 step=1 value={intValue}</p>
+      <InputNumber bind:value={intValue} min={0} max={10} step={1} />
+      <p>min=0 max=3 step=0.01 value={float3Value}</p>
+      <InputNumber bind:value={float3Value} step={0.01} max={3} />
+    </div>
   </Section>
 
   <Section title="Vec3" value={JSON.stringify(vecValue)}>
-    <Vec3 bind:value={vecValue} />
+    <InputVec3 bind:value={vecValue} />
   </Section>
 
   <Section title="Select" value={d}>
-    <Select bind:value={selectValue} {options} />
+    <InputSelect bind:value={selectValue} {options} />
   </Section>
 
   <Section title="Checkbox" value={checked}>
-    <Checkbox bind:value={checked} />
+    <InputCheckbox bind:value={checked} />
   </Section>
 
   <Section title="Details" value={detailsOpen}>
@@ -74,7 +97,11 @@
   </Section>
 
   <Section title="Shortcut">
-    <ShortCut ctrl key="S" />
+    <div class="flex gap-4">
+      <ShortCut ctrl key="S" />
+      <ShortCut alt key="F4" />
+      <ShortCut alt ctrl key="delete" />
+    </div>
   </Section>
 </main>
 
diff --git a/packages/ui/src/routes/Section.svelte b/packages/ui/src/routes/Section.svelte
index f9b55b9..360b120 100644
--- a/packages/ui/src/routes/Section.svelte
+++ b/packages/ui/src/routes/Section.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import { type Snippet } from 'svelte';
-  let { title, value, children } = $props<{
+  let { title, value, children, class: _class } = $props<{
     title?: string;
     value?: unknown;
     children?: Snippet;
+    class?: string;
   }>();
 </script>
 
-<section class="border border-1/2 mb-4 p-4 flex flex-col gap-4">
+<section class="border-outline border-1/2 bg-layer-1 rounded border mb-4 p-4 flex flex-col gap-4 {_class}">
   <h3 class="flex gap-2 font-bold">
     {title}
     <p class="font-normal! opacity-50!">{value}</p>
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 1a8026e..71c336a 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,9 +1,25 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import tailwindcss from '@tailwindcss/vite';
+import { exec } from 'node:child_process';
+import { readFileSync } from 'node:fs';
 import { defineConfig } from 'vitest/config';
 
+const postDevPackagePlugin = () => {
+  const packageContent = JSON.parse(readFileSync('./package.json', { encoding: 'utf8' }));
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  return {
+    name: 'run-command-on-change',
+    handleHotUpdate: () => {
+      clearTimeout(timeout);
+      timeout = setTimeout(function() {
+        exec(packageContent.scripts.package);
+      }, 200);
+    }
+  } as const;
+};
+
 export default defineConfig({
-  plugins: [tailwindcss(), sveltekit()],
+  plugins: [tailwindcss(), sveltekit(), postDevPackagePlugin()],
   test: {
     include: ['src/**/*.{test,spec}.{js,ts}']
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b52ce5f..95b9b48 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -148,6 +148,12 @@ importers:
 
   packages/ui:
     dependencies:
+      '@iconify-json/tabler':
+        specifier: ^1.2.26
+        version: 1.2.26
+      '@iconify/tailwind4':
+        specifier: ^1.2.1
+        version: 1.2.1(tailwindcss@4.1.18)
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@7.3.1(@types/node@22.8.6)(jiti@2.6.1)(less@4.2.0)(lightningcss@1.30.2)(sass@1.80.6)(terser@5.36.0)(tsx@4.19.2))
@@ -197,9 +203,6 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^8.53.0
         version: 8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      chokidar-cli:
-        specifier: ^3.0.0
-        version: 3.0.0
       dprint:
         specifier: ^0.51.1
         version: 0.51.1
@@ -1369,18 +1372,10 @@ packages:
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
-  ansi-regex@4.1.1:
-    resolution: {integrity: sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==}
-    engines: {node: '>=6'}
-
   ansi-regex@6.2.2:
     resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
     engines: {node: '>=12'}
 
-  ansi-styles@3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -1448,10 +1443,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase@5.3.1:
-    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
-    engines: {node: '>=6'}
-
   camera-controls@3.1.2:
     resolution: {integrity: sha512-xkxfpG2ECZ6Ww5/9+kf4mfg1VEYAoe9aDSY+IwF0UEs7qEzwy0aVRfs2grImIECs/PoBtWFrh7RXsQkwG922JA==}
     engines: {node: '>=22.0.0', npm: '>=10.5.1'}
@@ -1466,11 +1457,6 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
-  chokidar-cli@3.0.0:
-    resolution: {integrity: sha512-xVW+Qeh7z15uZRxHOkP93Ux8A0xbPzwK4GaqD8dQOYc34TlkqUhVSS59fK36DOp5WdJlrRzlYSy02Ht99FjZqQ==}
-    engines: {node: '>= 8.10.0'}
-    hasBin: true
-
   chokidar-cli@https://codeload.github.com/open-cli-tools/chokidar-cli/tar.gz/8dd8a1e8631d377de600f628d819a0cda46c102f:
     resolution: {tarball: https://codeload.github.com/open-cli-tools/chokidar-cli/tar.gz/8dd8a1e8631d377de600f628d819a0cda46c102f}
     version: 4.0.0
@@ -1489,9 +1475,6 @@ packages:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
 
-  cliui@5.0.0:
-    resolution: {integrity: sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==}
-
   cliui@9.0.1:
     resolution: {integrity: sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==}
     engines: {node: '>=20'}
@@ -1500,16 +1483,10 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
-  color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
@@ -1588,10 +1565,6 @@ packages:
       supports-color:
         optional: true
 
-  decamelize@1.2.0:
-    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
-    engines: {node: '>=0.10.0'}
-
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
@@ -1650,9 +1623,6 @@ packages:
   emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
-  emoji-regex@7.0.3:
-    resolution: {integrity: sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==}
-
   enhanced-resolve@5.18.4:
     resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
     engines: {node: '>=10.13.0'}
@@ -1806,10 +1776,6 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  find-up@3.0.0:
-    resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
-    engines: {node: '>=6'}
-
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1946,10 +1912,6 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-fullwidth-code-point@2.0.0:
-    resolution: {integrity: sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==}
-    engines: {node: '>=4'}
-
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -2102,10 +2064,6 @@ packages:
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
-  locate-path@3.0.0:
-    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
-    engines: {node: '>=6'}
-
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -2228,26 +2186,14 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
-  p-limit@2.3.0:
-    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
-    engines: {node: '>=6'}
-
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-locate@3.0.0:
-    resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
-    engines: {node: '>=6'}
-
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-try@2.2.0:
-    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
-    engines: {node: '>=6'}
-
   package-manager-detector@1.6.0:
     resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
 
@@ -2262,10 +2208,6 @@ packages:
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
-  path-exists@3.0.0:
-    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
-    engines: {node: '>=4'}
-
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -2355,17 +2297,10 @@ packages:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
-  require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
-
   require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  require-main-filename@2.0.0:
-    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2416,9 +2351,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  set-blocking@2.0.0:
-    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
-
   set-cookie-parser@2.7.2:
     resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
 
@@ -2458,18 +2390,10 @@ packages:
   std-env@3.10.0:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
-  string-width@3.1.0:
-    resolution: {integrity: sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==}
-    engines: {node: '>=6'}
-
   string-width@7.2.0:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
 
-  strip-ansi@5.2.0:
-    resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
-    engines: {node: '>=6'}
-
   strip-ansi@7.1.2:
     resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
     engines: {node: '>=12'}
@@ -2799,9 +2723,6 @@ packages:
     resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
     engines: {node: '>=18'}
 
-  which-module@2.0.1:
-    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
-
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -2816,10 +2737,6 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
-  wrap-ansi@5.1.0:
-    resolution: {integrity: sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==}
-    engines: {node: '>=6'}
-
   wrap-ansi@9.0.2:
     resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
     engines: {node: '>=18'}
@@ -2843,9 +2760,6 @@ packages:
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
-  y18n@4.0.3:
-    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
-
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -2854,16 +2768,10 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
-  yargs-parser@13.1.2:
-    resolution: {integrity: sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==}
-
   yargs-parser@22.0.0:
     resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=23}
 
-  yargs@13.3.2:
-    resolution: {integrity: sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==}
-
   yargs@18.0.0:
     resolution: {integrity: sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=23}
@@ -3851,14 +3759,8 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  ansi-regex@4.1.1: {}
-
   ansi-regex@6.2.2: {}
 
-  ansi-styles@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
-
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -3918,8 +3820,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase@5.3.1: {}
-
   camera-controls@3.1.2(three@0.182.0):
     dependencies:
       three: 0.182.0
@@ -3931,13 +3831,6 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
-  chokidar-cli@3.0.0:
-    dependencies:
-      chokidar: 3.6.0
-      lodash.debounce: 4.0.8
-      lodash.throttle: 4.1.1
-      yargs: 13.3.2
-
   chokidar-cli@https://codeload.github.com/open-cli-tools/chokidar-cli/tar.gz/8dd8a1e8631d377de600f628d819a0cda46c102f:
     dependencies:
       chokidar: 3.6.0
@@ -3965,12 +3858,6 @@ snapshots:
     dependencies:
       readdirp: 5.0.0
 
-  cliui@5.0.0:
-    dependencies:
-      string-width: 3.1.0
-      strip-ansi: 5.2.0
-      wrap-ansi: 5.1.0
-
   cliui@9.0.1:
     dependencies:
       string-width: 7.2.0
@@ -3979,16 +3866,10 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  color-convert@1.9.3:
-    dependencies:
-      color-name: 1.1.3
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
-  color-name@1.1.3: {}
-
   color-name@1.1.4: {}
 
   combined-stream@1.0.8:
@@ -4065,8 +3946,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  decamelize@1.2.0: {}
-
   decimal.js@10.6.0:
     optional: true
 
@@ -4131,8 +4010,6 @@ snapshots:
 
   emoji-regex@10.6.0: {}
 
-  emoji-regex@7.0.3: {}
-
   enhanced-resolve@5.18.4:
     dependencies:
       graceful-fs: 4.2.11
@@ -4353,10 +4230,6 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  find-up@3.0.0:
-    dependencies:
-      locate-path: 3.0.0
-
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -4498,8 +4371,6 @@ snapshots:
 
   is-extglob@2.1.1: {}
 
-  is-fullwidth-code-point@2.0.0: {}
-
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -4646,11 +4517,6 @@ snapshots:
 
   locate-character@3.0.0: {}
 
-  locate-path@3.0.0:
-    dependencies:
-      p-locate: 3.0.0
-      path-exists: 3.0.0
-
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -4764,24 +4630,14 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  p-limit@2.3.0:
-    dependencies:
-      p-try: 2.2.0
-
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
 
-  p-locate@3.0.0:
-    dependencies:
-      p-limit: 2.3.0
-
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
-  p-try@2.2.0: {}
-
   package-manager-detector@1.6.0: {}
 
   parent-module@1.0.1:
@@ -4796,8 +4652,6 @@ snapshots:
       entities: 6.0.1
     optional: true
 
-  path-exists@3.0.0: {}
-
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -4868,12 +4722,8 @@ snapshots:
 
   readdirp@5.0.0: {}
 
-  require-directory@2.1.1: {}
-
   require-from-string@2.0.2: {}
 
-  require-main-filename@2.0.0: {}
-
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0:
@@ -4946,8 +4796,6 @@ snapshots:
 
   semver@7.7.3: {}
 
-  set-blocking@2.0.0: {}
-
   set-cookie-parser@2.7.2: {}
 
   shebang-command@2.0.0:
@@ -4981,22 +4829,12 @@ snapshots:
 
   std-env@3.10.0: {}
 
-  string-width@3.1.0:
-    dependencies:
-      emoji-regex: 7.0.3
-      is-fullwidth-code-point: 2.0.0
-      strip-ansi: 5.2.0
-
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.6.0
       get-east-asian-width: 1.4.0
       strip-ansi: 7.1.2
 
-  strip-ansi@5.2.0:
-    dependencies:
-      ansi-regex: 4.1.1
-
   strip-ansi@7.1.2:
     dependencies:
       ansi-regex: 6.2.2
@@ -5321,8 +5159,6 @@ snapshots:
       webidl-conversions: 7.0.0
     optional: true
 
-  which-module@2.0.1: {}
-
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -5334,12 +5170,6 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
-  wrap-ansi@5.1.0:
-    dependencies:
-      ansi-styles: 3.2.1
-      string-width: 3.1.0
-      strip-ansi: 5.2.0
-
   wrap-ansi@9.0.2:
     dependencies:
       ansi-styles: 6.2.3
@@ -5355,32 +5185,12 @@ snapshots:
   xmlchars@2.2.0:
     optional: true
 
-  y18n@4.0.3: {}
-
   y18n@5.0.8: {}
 
   yaml@1.10.2: {}
 
-  yargs-parser@13.1.2:
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
-
   yargs-parser@22.0.0: {}
 
-  yargs@13.3.2:
-    dependencies:
-      cliui: 5.0.0
-      find-up: 3.0.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 3.1.0
-      which-module: 2.0.1
-      y18n: 4.0.3
-      yargs-parser: 13.1.2
-
   yargs@18.0.0:
     dependencies:
       cliui: 9.0.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 30f8899..1a8ade6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -7,6 +7,3 @@ packages:
 
 catalog:
   chokidar-cli: github:open-cli-tools/chokidar-cli#semver:v4.0.0
-
-onlyBuiltDependencies:
-  - dprint