chore(ui): refactor workspace to monorepo (#70)

## Summary by Sourcery

Refactor the UI project structure into a pnpm monorepo packages layout
and align tooling and automation with the new paths.

Enhancements:
- Reorganize the UI app from the root ui directory into packages/ui
within a pnpm workspace.
- Update pnpm workspace configuration to include all packages under
packages/*.
- Adjust paths in changeset configuration so the @dropout/ui package
resolves from packages/ui.

Build:
- Update pre-commit configuration paths and arguments to reflect the new
UI location and normalize hook argument formatting.
- Update Dependabot configuration so npm updates target /packages/ui
instead of /ui.

CI:
- Update GitHub Actions workflows to watch packages/** instead of ui/**
and to run frontend tasks from packages/ui.
- Update pnpm cache dependency paths in workflows to use the root
pnpm-lock.yaml.
- Simplify frontend install steps in test workflows to run from the
repository root.

Chores:
- Add a new index.html under packages/ui and remove the old
ui/index.html to match the new project layout.

1 files changed, 70 insertions, 0 deletions

diff --git a/packages/ui/src/components/ParticleBackground.svelte b/packages/ui/src/components/ParticleBackground.svelte
new file mode 100644
index 0000000..7644b1a
--- /dev/null
+++ b/packages/ui/src/components/ParticleBackground.svelte
@@ -0,0 +1,70 @@
+<script lang="ts" module>
+  import { SaturnEffect } from "../lib/effects/SaturnEffect";
+  
+  // Global reference to the active Saturn effect for external control
+  let globalSaturnEffect: SaturnEffect | null = null;
+  
+  export function getSaturnEffect(): SaturnEffect | null {
+    return globalSaturnEffect;
+  }
+</script>
+
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { ConstellationEffect } from "../lib/effects/ConstellationEffect";
+  import { settingsState } from "../stores/settings.svelte";
+
+  let canvas: HTMLCanvasElement;
+  let activeEffect: any;
+
+  function loadEffect() {
+    if (activeEffect) {
+      activeEffect.destroy();
+    }
+    
+    if (!canvas) return;
+
+    if (settingsState.settings.active_effect === "saturn") {
+      activeEffect = new SaturnEffect(canvas);
+      globalSaturnEffect = activeEffect;
+    } else {
+      activeEffect = new ConstellationEffect(canvas);
+      globalSaturnEffect = null;
+    }
+    
+    // Ensure correct size immediately
+    activeEffect.resize(window.innerWidth, window.innerHeight);
+  }
+
+  $effect(() => {
+    const _ = settingsState.settings.active_effect;
+    if (canvas) {
+        loadEffect();
+    }
+  });
+
+  onMount(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (canvas && activeEffect) {
+         activeEffect.resize(window.innerWidth, window.innerHeight);
+      }
+    });
+    
+    resizeObserver.observe(document.body);
+    
+    return () => {
+      resizeObserver.disconnect();
+      if (activeEffect) activeEffect.destroy();
+    };
+  });
+  
+  onDestroy(() => {
+    if (activeEffect) activeEffect.destroy();
+    globalSaturnEffect = null;
+  });
+</script>
+
+<canvas
+  bind:this={canvas}
+  class="absolute inset-0 z-0 pointer-events-none"
+></canvas>