Merge pull request 'feat/ui-float' (#30) from feat/ui-float into main

Reviewed-on: #30
2026-02-03 13:11:06 +01:00
parent a28f15c256 e18f75e1b8
commit a2c2503a8e
43 changed files with 430 additions and 627 deletions
--- 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
--- 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);
+}
--- 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>
--- 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;
  }
--- 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;
  }
--- 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>
--- 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);
    }
  });
--- 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>
--- 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);
--- 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);
--- 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: "";
--- 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;
--- a/app/src/lib/node-store/DraggableNode.svelte
+++ b/app/src/lib/node-store/DraggableNode.svelte
@@ -51,7 +51,9 @@
    tabindex="0"
    ondragstart={handleDragStart}
  >
+    {#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;
--- 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;
  }
--- 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>

--- 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;
  }
--- 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>
--- 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}
--- 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>
--- 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;
--- 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 {
--- 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}
--- 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}
--- 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 {
--- 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 {
--- 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",
--- 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",
--- 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;
--- 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}
--- 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;
--- 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;
 }
--- 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';
--- a/packages/ui/src/lib/inputs/Float.svelte
+++ b/packages/ui/src/lib/inputs/Float.svelte
@@ -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>
--- a/packages/ui/src/lib/inputs/InputCheckbox.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"
--- a/packages/ui/src/lib/inputs/InputNumber.svelte
+++ 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>
--- a/packages/ui/src/lib/inputs/InputSearch.svelte
+++ b/packages/ui/src/lib/inputs/InputSearch.svelte
--- a/packages/ui/src/lib/inputs/InputSelect.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;
--- a/packages/ui/src/lib/inputs/InputVec3.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;
--- 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">
+    <div class="flex gap-4">
      <ShortCut ctrl key="S" />
+      <ShortCut alt key="F4" />
+      <ShortCut alt ctrl key="delete" />
+    </div>
  </Section>
 </main>

--- 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>
--- 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}']
  }
--- 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
--- 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