chore(ui): refactor workspace to monorepo

2 files changed, 0 insertions, 502 deletions

diff --git a/ui/src/lib/effects/ConstellationEffect.ts b/ui/src/lib/effects/ConstellationEffect.ts
deleted file mode 100644
index d2db529..0000000
--- a/ui/src/lib/effects/ConstellationEffect.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-export class ConstellationEffect {
-  private canvas: HTMLCanvasElement;
-  private ctx: CanvasRenderingContext2D;
-  private width: number = 0;
-  private height: number = 0;
-  private particles: Particle[] = [];
-  private animationId: number = 0;
-  private mouseX: number = -1000;
-  private mouseY: number = -1000;
-
-  // Configuration
-  private readonly particleCount = 100;
-  private readonly connectionDistance = 150;
-  private readonly particleSpeed = 0.5;
-
-  constructor(canvas: HTMLCanvasElement) {
-    this.canvas = canvas;
-    this.ctx = canvas.getContext("2d", { alpha: true })!;
-
-    // Bind methods
-    this.animate = this.animate.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-
-    // Initial setup
-    this.resize(window.innerWidth, window.innerHeight);
-    this.initParticles();
-
-    // Mouse interaction
-    window.addEventListener("mousemove", this.handleMouseMove);
-
-    // Start animation
-    this.animate();
-  }
-
-  resize(width: number, height: number) {
-    const dpr = window.devicePixelRatio || 1;
-    this.width = width;
-    this.height = height;
-
-    this.canvas.width = width * dpr;
-    this.canvas.height = height * dpr;
-    this.canvas.style.width = `${width}px`;
-    this.canvas.style.height = `${height}px`;
-
-    this.ctx.scale(dpr, dpr);
-
-    // Re-initialize if screen size changes significantly to maintain density
-    if (this.particles.length === 0) {
-      this.initParticles();
-    }
-  }
-
-  private initParticles() {
-    this.particles = [];
-    // Adjust density based on screen area
-    const area = this.width * this.height;
-    const density = Math.floor(area / 15000); // 1 particle per 15000px²
-    const count = Math.min(Math.max(density, 50), 200); // Clamp between 50 and 200
-
-    for (let i = 0; i < count; i++) {
-      this.particles.push(new Particle(this.width, this.height, this.particleSpeed));
-    }
-  }
-
-  private handleMouseMove(e: MouseEvent) {
-    const rect = this.canvas.getBoundingClientRect();
-    this.mouseX = e.clientX - rect.left;
-    this.mouseY = e.clientY - rect.top;
-  }
-
-  animate() {
-    this.ctx.clearRect(0, 0, this.width, this.height);
-
-    // Update and draw particles
-    this.particles.forEach((p) => {
-      p.update(this.width, this.height);
-      p.draw(this.ctx);
-    });
-
-    // Draw lines
-    this.drawConnections();
-
-    this.animationId = requestAnimationFrame(this.animate);
-  }
-
-  private drawConnections() {
-    this.ctx.lineWidth = 1;
-
-    for (let i = 0; i < this.particles.length; i++) {
-      const p1 = this.particles[i];
-
-      // Connect to mouse if close
-      const distMouse = Math.hypot(p1.x - this.mouseX, p1.y - this.mouseY);
-      if (distMouse < this.connectionDistance + 50) {
-        const alpha = 1 - distMouse / (this.connectionDistance + 50);
-        this.ctx.strokeStyle = `rgba(255, 255, 255, ${alpha * 0.4})`; // Brighter near mouse
-        this.ctx.beginPath();
-        this.ctx.moveTo(p1.x, p1.y);
-        this.ctx.lineTo(this.mouseX, this.mouseY);
-        this.ctx.stroke();
-
-        // Gently attract to mouse
-        if (distMouse > 10) {
-          p1.x += (this.mouseX - p1.x) * 0.005;
-          p1.y += (this.mouseY - p1.y) * 0.005;
-        }
-      }
-
-      // Connect to other particles
-      for (let j = i + 1; j < this.particles.length; j++) {
-        const p2 = this.particles[j];
-        const dist = Math.hypot(p1.x - p2.x, p1.y - p2.y);
-
-        if (dist < this.connectionDistance) {
-          const alpha = 1 - dist / this.connectionDistance;
-          this.ctx.strokeStyle = `rgba(255, 255, 255, ${alpha * 0.15})`;
-          this.ctx.beginPath();
-          this.ctx.moveTo(p1.x, p1.y);
-          this.ctx.lineTo(p2.x, p2.y);
-          this.ctx.stroke();
-        }
-      }
-    }
-  }
-
-  destroy() {
-    cancelAnimationFrame(this.animationId);
-    window.removeEventListener("mousemove", this.handleMouseMove);
-  }
-}
-
-class Particle {
-  x: number;
-  y: number;
-  vx: number;
-  vy: number;
-  size: number;
-
-  constructor(w: number, h: number, speed: number) {
-    this.x = Math.random() * w;
-    this.y = Math.random() * h;
-    this.vx = (Math.random() - 0.5) * speed;
-    this.vy = (Math.random() - 0.5) * speed;
-    this.size = Math.random() * 2 + 1;
-  }
-
-  update(w: number, h: number) {
-    this.x += this.vx;
-    this.y += this.vy;
-
-    // Bounce off walls
-    if (this.x < 0 || this.x > w) this.vx *= -1;
-    if (this.y < 0 || this.y > h) this.vy *= -1;
-  }
-
-  draw(ctx: CanvasRenderingContext2D) {
-    ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-    ctx.fill();
-  }
-}
diff --git a/ui/src/lib/effects/SaturnEffect.ts b/ui/src/lib/effects/SaturnEffect.ts
deleted file mode 100644
index 357da9d..0000000
--- a/ui/src/lib/effects/SaturnEffect.ts
+++ /dev/null
@@ -1,340 +0,0 @@
-// Optimized Saturn Effect for low-end hardware
-// Uses TypedArrays for memory efficiency and reduced particle density
-
-export class SaturnEffect {
-  private canvas: HTMLCanvasElement;
-  private ctx: CanvasRenderingContext2D;
-  private width: number = 0;
-  private height: number = 0;
-
-  // Data-oriented design for performance
-  // xyz: Float32Array where [i*3, i*3+1, i*3+2] corresponds to x, y, z
-  private xyz: Float32Array | null = null;
-  // types: Uint8Array where 0 = planet, 1 = ring
-  private types: Uint8Array | null = null;
-  private count: number = 0;
-
-  private animationId: number = 0;
-  private angle: number = 0;
-  private scaleFactor: number = 1;
-
-  // Mouse interaction properties
-  private isDragging: boolean = false;
-  private lastMouseX: number = 0;
-  private lastMouseTime: number = 0;
-  private mouseVelocities: number[] = []; // Store recent velocities for averaging
-
-  // Rotation speed control
-  private readonly baseSpeed: number = 0.005; // Original rotation speed
-  private currentSpeed: number = 0.005; // Current rotation speed (can be modified by mouse)
-  private rotationDirection: number = 1; // 1 for clockwise, -1 for counter-clockwise
-  private readonly speedDecayRate: number = 0.992; // How fast speed returns to normal (closer to 1 = slower decay)
-  private readonly minSpeedMultiplier: number = 1; // Minimum speed is baseSpeed
-  private readonly maxSpeedMultiplier: number = 50; // Maximum speed is 50x baseSpeed
-  private isStopped: boolean = false; // Whether the user has stopped the rotation
-
-  constructor(canvas: HTMLCanvasElement) {
-    this.canvas = canvas;
-    this.ctx = canvas.getContext("2d", {
-      alpha: true,
-      desynchronized: false, // default is usually fine, 'desynchronized' can help latency but might flicker
-    })!;
-
-    // Initial resize will set up everything
-    this.resize(window.innerWidth, window.innerHeight);
-    this.initParticles();
-
-    this.animate = this.animate.bind(this);
-    this.animate();
-  }
-
-  // Public methods for external mouse event handling
-  // These can be called from any element that wants to control the Saturn rotation
-
-  handleMouseDown(clientX: number) {
-    this.isDragging = true;
-    this.lastMouseX = clientX;
-    this.lastMouseTime = performance.now();
-    this.mouseVelocities = [];
-  }
-
-  handleMouseMove(clientX: number) {
-    if (!this.isDragging) return;
-
-    const currentTime = performance.now();
-    const deltaTime = currentTime - this.lastMouseTime;
-
-    if (deltaTime > 0) {
-      const deltaX = clientX - this.lastMouseX;
-      const velocity = deltaX / deltaTime; // pixels per millisecond
-
-      // Store recent velocities (keep last 5 for smoothing)
-      this.mouseVelocities.push(velocity);
-      if (this.mouseVelocities.length > 5) {
-        this.mouseVelocities.shift();
-      }
-
-      // Apply direct rotation while dragging
-      this.angle += deltaX * 0.002;
-    }
-
-    this.lastMouseX = clientX;
-    this.lastMouseTime = currentTime;
-  }
-
-  handleMouseUp() {
-    if (this.isDragging && this.mouseVelocities.length > 0) {
-      this.applyFlingVelocity();
-    }
-    this.isDragging = false;
-  }
-
-  handleTouchStart(clientX: number) {
-    this.isDragging = true;
-    this.lastMouseX = clientX;
-    this.lastMouseTime = performance.now();
-    this.mouseVelocities = [];
-  }
-
-  handleTouchMove(clientX: number) {
-    if (!this.isDragging) return;
-
-    const currentTime = performance.now();
-    const deltaTime = currentTime - this.lastMouseTime;
-
-    if (deltaTime > 0) {
-      const deltaX = clientX - this.lastMouseX;
-      const velocity = deltaX / deltaTime;
-
-      this.mouseVelocities.push(velocity);
-      if (this.mouseVelocities.length > 5) {
-        this.mouseVelocities.shift();
-      }
-
-      this.angle += deltaX * 0.002;
-    }
-
-    this.lastMouseX = clientX;
-    this.lastMouseTime = currentTime;
-  }
-
-  handleTouchEnd() {
-    if (this.isDragging && this.mouseVelocities.length > 0) {
-      this.applyFlingVelocity();
-    }
-    this.isDragging = false;
-  }
-
-  private applyFlingVelocity() {
-    // Calculate average velocity from recent samples
-    const avgVelocity =
-      this.mouseVelocities.reduce((a, b) => a + b, 0) / this.mouseVelocities.length;
-
-    // Threshold for considering it a "fling" (pixels per millisecond)
-    const flingThreshold = 0.3;
-    // Threshold for considering the rotation as "stopped" by user
-    const stopThreshold = 0.1;
-
-    if (Math.abs(avgVelocity) > flingThreshold) {
-      // User flung it - start rotating again
-      this.isStopped = false;
-
-      // Determine new direction based on fling direction
-      const newDirection = avgVelocity > 0 ? 1 : -1;
-
-      // If direction changed, update it permanently
-      if (newDirection !== this.rotationDirection) {
-        this.rotationDirection = newDirection;
-      }
-
-      // Calculate speed boost based on fling strength
-      // Map velocity to speed multiplier (stronger fling = faster rotation)
-      const speedMultiplier = Math.min(
-        this.maxSpeedMultiplier,
-        this.minSpeedMultiplier + Math.abs(avgVelocity) * 10,
-      );
-
-      this.currentSpeed = this.baseSpeed * speedMultiplier;
-    } else if (Math.abs(avgVelocity) < stopThreshold) {
-      // User gently released - keep it stopped
-      this.isStopped = true;
-      this.currentSpeed = 0;
-    }
-    // If velocity is between stopThreshold and flingThreshold,
-    // keep current state (don't change isStopped)
-  }
-
-  resize(width: number, height: number) {
-    const dpr = window.devicePixelRatio || 1;
-    this.width = width;
-    this.height = height;
-
-    this.canvas.width = width * dpr;
-    this.canvas.height = height * dpr;
-    this.canvas.style.width = `${width}px`;
-    this.canvas.style.height = `${height}px`;
-
-    this.ctx.scale(dpr, dpr);
-
-    // Dynamic scaling based on screen size
-    const minDim = Math.min(width, height);
-    this.scaleFactor = minDim * 0.45;
-  }
-
-  initParticles() {
-    // Significantly reduced particle count for CPU optimization
-    // Planet: 1800 -> 1000
-    // Rings: 5000 -> 2500
-    // Total approx 3500 vs 6800 previously (approx 50% reduction)
-    const planetCount = 1000;
-    const ringCount = 2500;
-    this.count = planetCount + ringCount;
-
-    // Use TypedArrays for better memory locality
-    this.xyz = new Float32Array(this.count * 3);
-    this.types = new Uint8Array(this.count);
-
-    let idx = 0;
-
-    // 1. Planet
-    for (let i = 0; i < planetCount; i++) {
-      const theta = Math.random() * Math.PI * 2;
-      const phi = Math.acos(Math.random() * 2 - 1);
-      const r = 1.0;
-
-      // x, y, z
-      this.xyz[idx * 3] = r * Math.sin(phi) * Math.cos(theta);
-      this.xyz[idx * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
-      this.xyz[idx * 3 + 2] = r * Math.cos(phi);
-
-      this.types[idx] = 0; // 0 for planet
-      idx++;
-    }
-
-    // 2. Rings
-    const ringInner = 1.4;
-    const ringOuter = 2.3;
-
-    for (let i = 0; i < ringCount; i++) {
-      const angle = Math.random() * Math.PI * 2;
-      const dist = Math.sqrt(
-        Math.random() * (ringOuter * ringOuter - ringInner * ringInner) + ringInner * ringInner,
-      );
-
-      // x, y, z
-      this.xyz[idx * 3] = dist * Math.cos(angle);
-      this.xyz[idx * 3 + 1] = (Math.random() - 0.5) * 0.05;
-      this.xyz[idx * 3 + 2] = dist * Math.sin(angle);
-
-      this.types[idx] = 1; // 1 for ring
-      idx++;
-    }
-  }
-
-  animate() {
-    this.ctx.clearRect(0, 0, this.width, this.height);
-
-    // Normal blending
-    this.ctx.globalCompositeOperation = "source-over";
-
-    // Update rotation speed - decay towards base speed while maintaining direction
-    if (!this.isDragging && !this.isStopped) {
-      if (this.currentSpeed > this.baseSpeed) {
-        // Gradually decay speed back to base speed
-        this.currentSpeed =
-          this.baseSpeed + (this.currentSpeed - this.baseSpeed) * this.speedDecayRate;
-
-        // Snap to base speed when close enough
-        if (this.currentSpeed - this.baseSpeed < 0.00001) {
-          this.currentSpeed = this.baseSpeed;
-        }
-      }
-
-      // Apply rotation with current speed and direction
-      this.angle += this.currentSpeed * this.rotationDirection;
-    }
-
-    const cx = this.width * 0.6;
-    const cy = this.height * 0.5;
-
-    // Pre-calculate rotation matrices
-    const rotationY = this.angle;
-    const rotationX = 0.4;
-    const rotationZ = 0.15;
-
-    const sinY = Math.sin(rotationY);
-    const cosY = Math.cos(rotationY);
-    const sinX = Math.sin(rotationX);
-    const cosX = Math.cos(rotationX);
-    const sinZ = Math.sin(rotationZ);
-    const cosZ = Math.cos(rotationZ);
-
-    const fov = 1500;
-    const scaleFactor = this.scaleFactor;
-
-    if (!this.xyz || !this.types) return;
-
-    for (let i = 0; i < this.count; i++) {
-      const x = this.xyz[i * 3];
-      const y = this.xyz[i * 3 + 1];
-      const z = this.xyz[i * 3 + 2];
-
-      // Apply Scale
-      const px = x * scaleFactor;
-      const py = y * scaleFactor;
-      const pz = z * scaleFactor;
-
-      // 1. Rotate Y
-      const x1 = px * cosY - pz * sinY;
-      const z1 = pz * cosY + px * sinY;
-      // y1 = py
-
-      // 2. Rotate X
-      const y2 = py * cosX - z1 * sinX;
-      const z2 = z1 * cosX + py * sinX;
-      // x2 = x1
-
-      // 3. Rotate Z
-      const x3 = x1 * cosZ - y2 * sinZ;
-      const y3 = y2 * cosZ + x1 * sinZ;
-      const z3 = z2;
-
-      const scale = fov / (fov + z3);
-
-      if (z3 > -fov) {
-        const x2d = cx + x3 * scale;
-        const y2d = cy + y3 * scale;
-
-        // Size calculation - slightly larger dots to compensate for lower count
-        // Previously Planet 2.0 -> 2.4, Ring 1.3 -> 1.5
-        const type = this.types[i];
-        const sizeBase = type === 0 ? 2.4 : 1.5;
-        const size = sizeBase * scale;
-
-        // Opacity
-        let alpha = scale * scale * scale;
-        if (alpha > 1) alpha = 1;
-        if (alpha < 0.15) continue; // Skip very faint particles for performance
-
-        // Optimization: Planet color vs Ring color
-        if (type === 0) {
-          // Planet: Warm White
-          this.ctx.fillStyle = `rgba(255, 240, 220, ${alpha})`;
-        } else {
-          // Ring: Cool White
-          this.ctx.fillStyle = `rgba(220, 240, 255, ${alpha})`;
-        }
-
-        // Render as squares (fillRect) instead of circles (arc)
-        // This is significantly faster for software rendering and reduces GPU usage.
-        this.ctx.fillRect(x2d, y2d, size, size);
-      }
-    }
-
-    this.animationId = requestAnimationFrame(this.animate);
-  }
-
-  destroy() {
-    cancelAnimationFrame(this.animationId);
-  }
-}