feat(world): 混沌雾与秩序波纹（宪法P1第二批·熵可视化层）

- useWorldEvents：世界事件总线，复习/掌握时刻发射秩序波纹，业务层与世界层解耦
- ChaosMist：遗忘可视化——雾强度由 mist 信号驱动（白化珊瑚占比，封顶0.4），程序化径向渐变纹理，high/medium漂移、low静态，关闭留存自动隐去
- OrderRipples：复习即时正反馈——起源锚点扩散光环，同屏上限3道，reduced-motion降级静帧闪烁
- DeepSeaWorld 接入熵可视化层；useWorldSignals 增加 useShallow 细粒度选择器变体
- useStudySessionStore.rateCard 接线：任何评分都是一次对混沌的推退（含Again，零负向语义）

Author: Aparencia

client/src/features/flashcards/store/useStudySessionStore.ts

@@ -13,6 +13,7 @@ import type { Flashcard, FlashcardReview, Confidence, GoldenError } from '@/type
 import { useFlashcardStore } from './useFlashcardStore';
 import { generateId } from '@/lib/utils/uuid';
 import { soundPlayer } from '@/lib/audio/SoundPlayer';
+import { useWorldEvents } from '@/features/retention/store/useWorldEvents';
 
 // ---------------------------------------------------------------------------
 // 常量
@@ -220,6 +221,10 @@ export const useStudySessionStore = create<StudySessionState>((set, get) => {
       const card = sessionCards[currentIndex];
       if (!card || card.id === undefined) return;
 
+      // 宪法第一条：复习行为=秩序波纹。任何评分都是一次对混沌的推退
+      // （包括 Again——唤醒本身即正向，零负向语义），经世界事件总线驱动深海场景
+      useWorldEvents.getState().emitOrderRipple('flashcards');
+
       // v0.9.0: goldenError 判定 — 高自信答错（Again）
       const isWrong = rating === Rating.Again;
       const isGoldenError = confidence === 'high' && isWrong;

client/src/features/retention/hooks/useWorldSignals.ts

@@ -10,6 +10,7 @@
  * for the 3D scene layer. Streak wiring lands with the tide batch.
  */
 import { useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { useEcosystemStore } from '../store/useEcosystemStore';
 import { useDiscoveryStore } from '../store/useDiscoveryStore';
 import { useRetentionSettings } from '../store/useRetentionSettings';
@@ -41,3 +42,16 @@ export function useWorldSignals(): WorldSignalsWithGlow {
     return { ...signals, glowScale: vitalityToGlowScale(signals.vitality) };
   }, [corals, totalDepth, discoveriesCount, enabled]);
 }
+
+/**
+ * 细粒度选择器版本（3D 逐帧层专用） / Selector variant for frame-critical layers
+ *
+ * @ai-context 内部复用 useWorldSignals 派生结果，再用 useShallow 选取子集：
+ * 仅当所选字段变化时才触发组件重渲染（如 ChaosMist 只选 mist）。
+ */
+export function useWorldSignalsSelect<T extends Partial<WorldSignalsWithGlow>>(
+  selector: (s: WorldSignalsWithGlow) => T,
+): T {
+  const signals = useWorldSignals();
+  return useShallow(selector)(signals);
+}

client/src/features/retention/store/useWorldEvents.ts

@@ -0,0 +1,36 @@
+/**
+ * 世界事件 Store（熵可视化 · 秩序波纹驱动）
+ * World events store (entropy visualization · order ripple driver)
+ *
+ * @ai-context: 宪法第一条：复习行为→秩序波纹。本 store 是事件总线：
+ * 学习流程在「掌握/复习」时刻调用 emitOrderRipple()，3D 场景层订阅
+ * rippleSeq 生成扩散波纹。模块间零直接依赖，保持世界层与业务层解耦。
+ * 仅保留最近一次事件（波纹是即时反馈，无需队列积压）。
+ *
+ * @ai-context: Event bus between learning flows and the 3D world layer.
+ * Flows call emitOrderRipple() at mastery/review moments; the scene subscribes
+ * to rippleSeq to spawn expanding ripples. Only the latest event is kept.
+ */
+import { create } from 'zustand';
+
+/** 波纹起源锚点：模块实体 ID（场景内定位）或 'center' 场景中心 / Ripple origin */
+export type RippleOrigin = 'center' | 'pomodoro' | 'notes' | 'flashcards' | 'feynman' | 'inspiration';
+
+interface WorldEventsState {
+  /** 波纹序列号：每次 emit 自增，场景层据此生成新波纹 / Ripple sequence counter */
+  rippleSeq: number;
+  /** 最近一次波纹起源 / Latest ripple origin */
+  rippleOrigin: RippleOrigin;
+
+  /** 发射秩序波纹（复习/掌握的即时正反馈） / Emit an order ripple */
+  emitOrderRipple: (origin?: RippleOrigin) => void;
+}
+
+export const useWorldEvents = create<WorldEventsState>((set) => ({
+  rippleSeq: 0,
+  rippleOrigin: 'center',
+
+  emitOrderRipple: (origin = 'center') => {
+    set((s) => ({ rippleSeq: s.rippleSeq + 1, rippleOrigin: origin }));
+  },
+}));

client/src/lib/3d/objects/ChaosMist.tsx

@@ -0,0 +1,88 @@
+/**
+ * ChaosMist — 混沌雾（宪法第一条：遗忘=雾）
+ * ChaosMist — the entropy fog (constitution §1: forgetting = mist)
+ *
+ * @ai-context: 深海场景的遗忘可视化：雾强度由世界信号 mist 驱动
+ * （白化珊瑚占比，宪法锁定 ≤0.4）。语义是"朦胧可拨开"——复习恢复
+ * 珊瑚健康后雾自然消退，全程零负向表达。
+ * 性能预算（宪法第四条）：high/medium=径向渐变 sprite 缓慢漂移，
+ * low=静态单团、无逐帧动画。
+ *
+ * @ai-context: Fog sprites whose opacity tracks the mist world signal.
+ * Budget: drifting gradient sprites on high/medium, static on low tier.
+ */
+import { useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { useWorldSignalsSelect } from '@/features/retention/hooks/useWorldSignals';
+import { useEffectiveTier } from '@/lib/performance/usePerformanceMode';
+
+/** 雾团落点与尺寸（场景边缘，不遮挡中心导航） / Blob anchors at scene edges */
+const MIST_BLOBS: Array<{ pos: [number, number, number]; scale: number; speed: number }> = [
+  { pos: [-7, -1.5, -6], scale: 16, speed: 0.05 },
+  { pos: [6.5, 2, -8], scale: 13, speed: 0.07 },
+];
+
+/** 程序化径向渐变雾纹理（无外部素材依赖） / Procedural radial mist texture */
+function createMistTexture(): THREE.CanvasTexture {
+  const size = 256;
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  if (ctx) {
+    const g = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
+    g.addColorStop(0, 'rgba(7,12,24,0.9)');
+    g.addColorStop(0.55, 'rgba(7,12,24,0.45)');
+    g.addColorStop(1, 'rgba(7,12,24,0)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, size, size);
+  }
+  return new THREE.CanvasTexture(canvas);
+}
+
+export function ChaosMist() {
+  const tier = useEffectiveTier();
+  const { mist } = useWorldSignalsSelect((s) => ({ mist: s.mist }));
+  const texture = useMemo(createMistTexture, []);
+  const refs = useRef<Array<THREE.Sprite | null>>([]);
+  const elapsed = useRef(0);
+
+  // low 档：静态呈现语义（雾仍在），不跑逐帧动画（宪法第四条）
+  useFrame((_, delta) => {
+    if (tier === 'low' || mist <= 0.001) return;
+    elapsed.current += Math.min(delta, 0.1);
+    refs.current.forEach((sprite, i) => {
+      if (!sprite) return;
+      const blob = MIST_BLOBS[i];
+      // 极慢漂移：混沌在渗透，但永不吞噬（可拨开的朦胧）
+      sprite.position.x = blob.pos[0] + Math.sin(elapsed.current * blob.speed) * 0.8;
+      sprite.position.y = blob.pos[1] + Math.cos(elapsed.current * blob.speed * 0.8) * 0.5;
+    });
+  });
+
+  // 雾强度直接取自信号（派生层已封顶 0.4）；关闭留存时 mist=0，雾自然隐去
+  if (mist <= 0.001) return null;
+  const blobCount = tier === 'low' ? 1 : MIST_BLOBS.length;
+
+  return (
+    <group>
+      {MIST_BLOBS.slice(0, blobCount).map((blob, i) => (
+        <sprite
+          key={i}
+          ref={(el) => { refs.current[i] = el; }}
+          position={blob.pos}
+          scale={[blob.scale, blob.scale, 1]}
+        >
+          <spriteMaterial
+            map={texture}
+            transparent
+            opacity={mist}
+            depthWrite={false}
+            color="#8FA3C8"
+          />
+        </sprite>
+      ))}
+    </group>
+  );
+}

client/src/lib/3d/objects/OrderRipples.tsx

@@ -0,0 +1,105 @@
+/**
+ * OrderRipples — 秩序波纹（宪法第一条：复习=波纹）
+ * OrderRipples — order ripples (constitution §1: review = ripple)
+ *
+ * @ai-context: 订阅世界事件总线（useWorldEvents.rippleSeq），在波纹起源
+ * 位置生成向外扩散的发光圆环并自然消散——复习推退混沌的即时正反馈。
+ * 同屏最多 3 道波纹（性能预算）；reduced-motion 降级为原位柔和闪烁。
+ *
+ * @ai-context: Spawns expanding glow rings at the ripple origin whenever the
+ * world event bus emits. Max 3 concurrent; reduced-motion shows a soft flash.
+ */
+import { useEffect, useMemo, useRef, useState } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { Billboard } from '@react-three/drei';
+import { MODULE_POSITIONS } from '../navigation/OrbitalStore';
+import { useWorldEvents, type RippleOrigin } from '@/features/retention/store/useWorldEvents';
+
+/** 波纹生命周期（秒）与同屏上限 / Ripple lifetime and concurrent cap */
+const RIPPLE_LIFE = 2.2;
+const MAX_CONCURRENT = 3;
+const RIPPLE_COLOR = '#22D3EE';
+
+interface RippleInstance {
+  id: number;
+  origin: RippleOrigin;
+}
+
+/** 起源锚点 → 场景坐标 / Origin anchor → scene position */
+function originPosition(origin: RippleOrigin): [number, number, number] {
+  if (origin === 'center') return [0, 0, 0];
+  return MODULE_POSITIONS.find((m) => m.id === origin)?.position ?? [0, 0, 0];
+}
+
+function Ripple({ pos, reduced, onDone }: {
+  pos: [number, number, number];
+  reduced: boolean;
+  onDone: () => void;
+}) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const matRef = useRef<THREE.MeshBasicMaterial>(null);
+  const age = useRef(0);
+
+  useFrame((_, delta) => {
+    age.current += Math.min(delta, 0.1);
+    const t = Math.min(1, age.current / RIPPLE_LIFE);
+    if (t >= 1) {
+      onDone();
+      return;
+    }
+    // reduced-motion：不扩散，仅原位柔和闪烁（宪法第三条约束的静帧语义）
+    if (meshRef.current) {
+      meshRef.current.scale.setScalar(reduced ? 2.2 : 0.6 + t * 6.4);
+    }
+    if (matRef.current) {
+      matRef.current.opacity = (reduced ? 0.45 : 0.8) * (1 - t);
+    }
+  });
+
+  return (
+    <Billboard position={pos}>
+      <mesh ref={meshRef}>
+        <ringGeometry args={[0.92, 1, 48]} />
+        <meshBasicMaterial
+          ref={matRef}
+          color={RIPPLE_COLOR}
+          transparent
+          opacity={0.8}
+          side={THREE.DoubleSide}
+          depthWrite={false}
+        />
+      </mesh>
+    </Billboard>
+  );
+}
+
+export function OrderRipples() {
+  const rippleSeq = useWorldEvents((s) => s.rippleSeq);
+  const rippleOrigin = useWorldEvents((s) => s.rippleOrigin);
+  const [ripples, setRipples] = useState<RippleInstance[]>([]);
+  const reduced = useMemo(
+    () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    [],
+  );
+
+  // 序列号驱动生成：seq=0 为初始态不生成
+  useEffect(() => {
+    if (rippleSeq === 0) return;
+    setRipples((prev) => [...prev.slice(-(MAX_CONCURRENT - 1)), { id: rippleSeq, origin: rippleOrigin }]);
+  }, [rippleSeq, rippleOrigin]);
+
+  if (ripples.length === 0) return null;
+  return (
+    <group>
+      {ripples.map((r) => (
+        <Ripple
+          key={r.id}
+          pos={originPosition(r.origin)}
+          reduced={reduced}
+          onDone={() => setRipples((prev) => prev.filter((x) => x.id !== r.id))}
+        />
+      ))}
+    </group>
+  );
+}

client/src/lib/3d/scenes/DeepSeaWorld.tsx

@@ -2,11 +2,15 @@
  * DeepSeaWorld — 深色模式「深海」3D场景
  * 深海生态系统：生物发光、海底粒子、有机暗流
  *
- * @ai-context: 3D 场景：DeepSeaWorld。
+ * @ai-context: 3D 场景：DeepSeaWorld。宪法 P1 第二批接入熵可视化层：
+ * ChaosMist（遗忘=雾，mist 信号驱动）与 OrderRipples（复习=波纹，
+ * 世界事件总线驱动）。
  */
 import { Bloom, DepthOfField, Vignette } from '@react-three/postprocessing';
 import { SafeEffectComposer } from '../core/SafeEffectComposer';
 import { useEffectiveTier } from '@/lib/performance/usePerformanceMode';
+import { ChaosMist } from '../objects/ChaosMist';
+import { OrderRipples } from '../objects/OrderRipples';
 
 export function DeepSeaWorld() {
   // 有效 tier（自动 tier 受用户性能模式上限约束）
@@ -22,6 +26,10 @@ export function DeepSeaWorld() {
         <meshBasicMaterial color="#0A1628" side={2} />
       </mesh>
 
+      {/* 熵可视化层（宪法 P1）：混沌雾=遗忘，秩序波纹=复习 */}
+      <ChaosMist />
+      <OrderRipples />
+
       {/* 后处理：低档全关；中档关景深（DepthOfField 是最重的后处理 pass）；澎湃档全开。
           条件置于 composer 层级（group 接受 false），避免 EffectComposer 子元素严格类型报错 */}
       {tier === 'low' ? null : tier === 'high' ? (