feat(labs): visual polish wave — LabFX foundation + 33 sims juiced up

ФУНДАМЕНТ (4 новых файла):
- _fx_core.js: LabFX namespace, glow.drawGlow, glow.pulse, haptic, shake
- _fx_particles.js: пул 1500 объектов, 6 shapes (dot/spark/ring/smoke/splash/dust)
- _fx_motion.js: tween + 12 easings + critically-damped spring
- _fx_sound.js: 9 procedural synth-звуков (click/tick/whoosh/chime/fizz/spark/bounce/pour/drone), Web Audio API
- Sound toggle в шапке lab.html с localStorage-persist

UX МИКРО (CSS + JS):
- Button states: hover scale+brightness, active scale-down, disabled grayscale
- Slider polish: custom thumb с тенью, filled-track gradient, hover/active
- Focus rings через :focus-visible
- Tooltip system .tt-host data-tt= с 400ms hover, fade-in
- Marching ants для selection
- Loading skeleton с shimmer
- Empty state .sim-empty-* паттерн
- Toast: progress bar внизу, icons по типу
- Cursor states utility classes
- View Transitions API для smooth sim-switch, fallback на CSS fade

PHASE 2 — визуальные эффекты для 33 симуляций:

Physics motion: projectile (launch whoosh + landing splash/shake/haptic + target chime), pendulum (max-extension tick + bob glow), collision (bounce + sparks + shake), angrybirds (whoosh/bounce/fizz/chime + confetti), newton (rocket flame trail + scene transitions), forcesandbox (spring glow + impact sparks)

Physics fields: emfield (field-lines glow + particle trail + lightning при high field + Gauss-drag haptic + rod motion sparks), circuit (energized-wire glow ∝ current + LED bloom + short-circuit shake/spark + heat shimmer smoke + place/erase/switch sounds), opticsbench (beam glow на всех режимах + caustics dust у фокуса + TIR/Brewster one-shot sounds)

Thermo+waves: waves (mode-switch whoosh + Mach-cone particles + spectrum harmonic chime + waveform glow), hydrostatics (pour sound + splash при погружении + valve click), isoprocess (PV-trail dust), heatengine (drone цикла + hot/cold reservoir smoke/dust + phase-change ticks), radioactive (Geiger tick throttle + decay sparks + half-life chime + α/β/γ glow)

Chemistry: chemsandbox (pour splash + fizz bubbles/dust/spark по типу реакции + shake при горении), equilibrium/electrolysis/reactions/titration/flask/ionexchange/redox (pour/fizz/spark/chime по событиям, частицы при ключевых моментах), stoichiometry (fizz bubbles + recipe-change click)

Math+geom: geometry (tool-click + object-create tick + locus glow + challenge confetti via LabFX + haptic), triangle (vertex-drop tick + special-point glow), stereo (figure-change whoosh + cross-section chime, no particles — Three.js), trigcircle (drag-haptic + pitch∝angle tick + sin/cos glow), graph/graphtransform/quadratic (slider-tick throttled + curve glow + discriminant-cross chime), probability (bounce + finish-chime burst), normaldist (pulsing shade + bell glow)

Bio+misc: celldivision (phase-change whoosh + prophase dust + anaphase poles spark + cytokinesis chime), photosynthesis (photon tick + ATP chime + glucose sparkle), bohratom (electron-jump chime ∝ levels + photon spark), orbitals/crystal (mode-change whoosh — Three.js, sound only), logic (gate-place + wire-connect + LED bloom + HIGH wire flowing dots + preset chime), gas/brownian/diffusion/states (preset whoosh, throttled tick по событиям)

Все LabFX вызовы обёрнуты в if (window.LabFX) guard — graceful degradation если фундамент не загружен. 47 JS файлов прошли syntax check.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/js/labs/logic.js

@@ -66,9 +66,11 @@ class LogicSim {
 
     this._raf      = null;
     this._clockRaf = null;
+    this._fxLastT  = 0;
 
     this._bindEvents();
     this._startClock();
+    this._startDrawLoop();
   }
 
   /* ── port pixel positions ── */
@@ -147,6 +149,7 @@ class LogicSim {
       if (!def) return;
       this._pushHistory();
       const g = this._addGate(type, this._snap(x), this._snap(y));
+      if (window.LabFX) LabFX.sound.play('tick', { pitch: 1.4, volume: 0.3 });
       this._propagate();
       this._updatePanels();
       this.draw();
@@ -204,6 +207,7 @@ class LogicSim {
         if (!exists) {
           this._pushHistory();
           this._wires.push({ from: { gateId: this._wireStart.gateId, port: this._wireStart.port }, to: { gateId: hitP.gateId, port: hitP.port } });
+          if (window.LabFX) LabFX.sound.play('click', { pitch: 1.3 });
           this._propagate();
           this._updatePanels();
         }
@@ -219,6 +223,12 @@ class LogicSim {
     if (g && (g.type === 'INPUT')) {
       this._pushHistory();
       g.value = g.value ? 0 : 1;
+      if (window.LabFX) {
+        LabFX.sound.play('bounce', { pitch: 1.2 });
+        LabFX.particles.emit({ ctx: this._ctx, x: g.x, y: g.y, count: 5, color: '#00ff88',
+          speed: 20, spread: Math.PI * 2, angle: 0, gravity: 0, life: 400, fade: true,
+          glow: true, shape: 'spark', size: 3, sizeFade: true });
+      }
       this._propagate();
       this._updatePanels();
       this.draw();
@@ -252,6 +262,7 @@ class LogicSim {
       this._pushHistory();
       this._wires = this._wires.filter(w => w.from.gateId !== g.id && w.to.gateId !== g.id);
       this._gates = this._gates.filter(gg => gg.id !== g.id);
+      if (window.LabFX) LabFX.sound.play('fizz', { volume: 0.2 });
       this._propagate();
       this._updatePanels();
       this.draw();
@@ -341,6 +352,7 @@ class LogicSim {
     const tick = (now) => {
       this._clockRaf = requestAnimationFrame(tick);
       const dt = (now - last) / 1000;
+      const dtMs = now - (last || now);
       last = now;
       let changed = false;
       this._gates.forEach(g => {
@@ -349,6 +361,7 @@ class LogicSim {
         const newVal = g._phase % 1 < 0.5 ? 1 : 0;
         if (newVal !== g.value) { g.value = newVal; changed = true; }
       });
+      if (window.LabFX && dtMs > 0) LabFX.particles.update(dtMs);
       if (changed) {
         this._propagate();
         this._updatePanels();
@@ -435,6 +448,8 @@ class LogicSim {
 
     // gates
     this._gates.forEach(g => this._drawGate(ctx, g));
+
+    if (window.LabFX) LabFX.particles.draw(ctx);
   }
 
   _drawWire(ctx, w) {
@@ -454,6 +469,36 @@ class LogicSim {
     ctx.strokeStyle = val ? '#00ff88' : 'rgba(255,255,255,0.25)';
     ctx.lineWidth   = val ? 2.2 : 1.5;
     ctx.stroke();
+
+    // Wire HIGH: animated dot flowing along path
+    if (val && window.LabFX) {
+      const frac = ((performance.now() * 0.001) % 1);
+      // interpolate along L-route: seg1 p1→(mx,p1.y), seg2 (mx,p1.y)→(mx,p2.y), seg3 (mx,p2.y)→p2
+      const seg1 = Math.abs(mx - p1.x);
+      const seg2 = Math.abs(p2.y - p1.y);
+      const seg3 = Math.abs(p2.x - mx);
+      const total = seg1 + seg2 + seg3 || 1;
+      const dist = frac * total;
+      let dx, dy;
+      if (dist <= seg1) {
+        dx = p1.x + (mx - p1.x) * (dist / (seg1 || 1));
+        dy = p1.y;
+      } else if (dist <= seg1 + seg2) {
+        dx = mx;
+        dy = p1.y + (p2.y - p1.y) * ((dist - seg1) / (seg2 || 1));
+      } else {
+        dx = mx + (p2.x - mx) * ((dist - seg1 - seg2) / (seg3 || 1));
+        dy = p2.y;
+      }
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(dx, dy, 3.5, 0, Math.PI * 2);
+      ctx.fillStyle = '#06D6E0';
+      ctx.shadowColor = '#06D6E0';
+      ctx.shadowBlur = 8;
+      ctx.fill();
+      ctx.restore();
+    }
   }
 
   _drawGate(ctx, g) {
@@ -461,8 +506,17 @@ class LogicSim {
     const hw  = def.w / 2, hh = def.h / 2;
     const x   = g.x, y = g.y;
 
-    // gate body
+    // OUTPUT LED glow via LabFX
     const isHigh = g.value === 1;
+    if (g.type === 'OUTPUT' && isHigh && window.LabFX) {
+      LabFX.glow.drawGlow(ctx, () => {
+        ctx.beginPath();
+        ctx.roundRect(x - hw, y - hh, def.w, def.h, 6);
+        ctx.fill();
+      }, { color: '#00FF80', intensity: 18, layers: 2 });
+    }
+
+    // gate body
     ctx.beginPath();
     ctx.roundRect(x - hw, y - hh, def.w, def.h, 6);
     let fill = 'rgba(30,30,60,0.9)';
@@ -618,6 +672,7 @@ class LogicSim {
     this._gates = [];
     this._wires = [];
     this._nextId = 1;
+    if (window.LabFX) LabFX.sound.play('chime', { pitch: 1.0, volume: 0.3 });
     const add  = (type, x, y) => this._addGate(type, x, y);
     const wire = (a, ap, b, bp) => this._wires.push({ from: { gateId: a.id, port: ap }, to: { gateId: b.id, port: bp } });
 
@@ -762,6 +817,20 @@ class LogicSim {
     this.draw();
   }
 
+  /* ── Continuous draw loop for wire animations ── */
+  _startDrawLoop() {
+    const loop = () => {
+      this._raf = requestAnimationFrame(loop);
+      // Only redraw if any wire is HIGH (animated dot)
+      const anyHigh = this._wires.some(w => {
+        const g = this._gateById(w.from.gateId);
+        return g && g.value === 1;
+      });
+      if (anyHigh) this.draw();
+    };
+    this._raf = requestAnimationFrame(loop);
+  }
+
   /* ── Destroy ── */
   destroy() {
     if (this._clockRaf) cancelAnimationFrame(this._clockRaf);