zeropoint-node 1.0.1 → 1.0.3

package/src/0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts

@@ -0,0 +1,1141 @@
+import { PI, abs, cos, indexFromSeed, max, min, round, sin, unitFromSeed } from './a432.algebra.ts'
+// a432.ui.three.ts — Full production-ready Three.js UI module for A432 system
+import * as THREE from 'three';
+import { startBreathing } from './a432.breathe.ts';
+// Optionally import metaphysical overlays, blockchain, and A432 math as needed
+// import { logEvent } from './a432.block.chain.event.ts';
+// import { getTrinityAxis, getRodinSequence } from './a432.math.ts';
+import { A432BlockChain, recordEvent } from './a432.block.chain.event.ts';
+import { getTrinityAxis } from './a432.math.ts';
+import { breatheEmitter } from './a432.i.breathe.ts';
+import { pulseEmitter } from './a432.i.pulse.ts';
+import { heatEmitter } from './a432.i.heat.ts';
+import { intuitEmitter } from './a432.i.intuit.ts';
+import { reflectEmitter } from './a432.i.reflect.ts';
+import { moveEmitter } from './a432.i.move.ts';
+import { healthEmitter } from './a432.health.ts';
+import { humanEmotionEmitter } from './a432.human.emotion.ts';
+import { humanConsciousnessEmitter } from './a432.human.consciousness.ts';
+import { type BreathEvent } from './a432.breathe.ts';
+import { type HealthMetrics } from './a432.health.ts';
+import { type ChessFrame } from './a432.chess.ts';
+import { type YinYangFrame } from './a432.yin.yang.ts';
+import { type MetatronFrame } from './a432.metatron.ts';
+import { a432OSState } from './a432.os.ts';
+import { flashColor } from './a432.video.ts';
+import { playDigit, playTrinitySound } from './a432.sound.ts';
+import { digitAngleToCMYK } from './a432.cmyk.ts';
+import { type Digit, toDigit } from './a432.types.ts';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { startChess } from './a432.chess.ts';
+import { startYinYang } from './a432.yin.yang.ts';
+import { startMetatron } from './a432.metatron.ts';
+import { A432_RESOLVED_FRACTIONS } from './a432.resolved.ts';
+import { fractionToDecimal } from './a432.math.ts';
+// Analog signal values: exact integer ratios, collapsed to float only here
+// at the WebGL boundary. No bare decimal literal appears below.
+const G = Object.fromEntries(
+  Object.entries(A432_RESOLVED_FRACTIONS.GEOMETRY).map(([k, v]) => [k, fractionToDecimal(v)])
+) as Record<keyof typeof A432_RESOLVED_FRACTIONS.GEOMETRY, number>;
+
+export class A432ThreeUI {
+  container: HTMLElement;
+  scene: THREE.Scene;
+  camera: THREE.PerspectiveCamera;
+  renderer: THREE.WebGLRenderer;
+  controls: OrbitControls;
+  objects: THREE.Object3D[] = [];
+  lights: THREE.Light[] = [];
+  overlays: HTMLElement[] = [];
+  selectedObject: THREE.Object3D | null = null;
+  animationId: number | null = null;
+  blockchain: A432BlockChain;
+  metaOverlay: HTMLElement | null = null;
+  trinityPhase: number = 3;
+  harmony: number = 0;
+  entropy: number = 0;
+  lastBreath: any = null;
+  lastPulse: any = null;
+  lastIntuit: any = null;
+  lastReflect: any = null;
+  lastMove: any = null;
+  lastHeat: any = null;
+  lastHealth: any = null;
+  lastEmotion: any = null;
+  lastConsciousness: any = null;
+  overlayDocked: boolean = true;
+  currentBreathPhase: string = '';
+  currentBreathValue: number = 0;
+  breathCycleActive: boolean = false;
+  stopBreathCycle: (() => void) | null = null;
+  micDetectionActive: boolean = false;
+  micDetectionStream: MediaStream | null = null;
+  micDetectionAudioCtx: AudioContext | null = null;
+  micThreshold: number = 40;
+  micMinInterval: number = 800;
+  micAmplitude: number = 0;
+  micGraphCanvas: HTMLCanvasElement | null = null;
+  breathEvents: { phase: string, timestamp: number }[] = [];
+  analyticOverlay: HTMLElement | null = null;
+  journeyOverlay: HTMLElement | null = null;
+  healthMetrics: { harmony: number; entropy: number; resonance: number } = { harmony: 0, entropy: 1, resonance: 0 };
+  lastHealthMetrics: { harmony: number; entropy: number; resonance: number } = { harmony: 0, entropy: 1, resonance: 0 };
+  healthHistory: { harmony: number; entropy: number; resonance: number; t: number }[] = [];
+  healthAlertTimeout: any = null;
+  dashboardOverlay: HTMLElement | null = null;
+  metaphysicalSwitcher: HTMLElement | null = null;
+  chessCanvas: HTMLCanvasElement | null = null;
+  yinYangCanvas: HTMLCanvasElement | null = null;
+  metatronCanvas: HTMLCanvasElement | null = null;
+  chessOverlay: HTMLElement | null = null;
+  yinYangOverlay: HTMLElement | null = null;
+  metatronOverlay: HTMLElement | null = null;
+  chessDisposer: (() => void) | null = null;
+  yinYangDisposer: (() => void) | null = null;
+  metatronDisposer: (() => void) | null = null;
+  currentMetaViz: 'chess' | 'yin-yang' | 'metatron' = 'chess';
+
+  constructor(container?: HTMLElement) {
+    this.container = container || this.createContainer();
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(0x111111);
+    this.camera = new THREE.PerspectiveCamera(75, this.container.offsetWidth / this.container.offsetHeight, G.UNIT_TENTH, 1000);
+    this.camera.position.set(0, 0, 10);
+    this.renderer = new THREE.WebGLRenderer({ antialias: true });
+    this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
+    this.container.appendChild(this.renderer.domElement);
+    this.blockchain = new A432BlockChain();
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.controls.enableDamping = true;
+    this.controls.dampingFactor = G.STEP_SMALL;
+    this.controls.screenSpacePanning = false;
+    this.controls.minDistance = 2;
+    this.controls.maxDistance = 50;
+    this.addDefaultLight();
+    this.addUIControls();
+    this.addDragAndDrop();
+    this.animate();
+    this.createMetaOverlay();
+    this.createOverlayControls();
+    this.subscribeToA432Events();
+    this.addBreatheCycleButton();
+    this.addBreathCycleControlButton();
+    this.addMicBreathDetectionButton();
+    this.addMicBreathDetectionControls();
+    this.createAnalyticOverlay();
+    this.createJourneyOverlay();
+    this.addSensorIntegrationButton();
+    breatheEmitter.on('breathe', (event: BreathEvent) => {
+      this.currentBreathPhase = event.phase;
+      this.currentBreathValue = event.value;
+      const ts = (event as any).timestamp ?? Date.now();
+      this.breathEvents.push({ phase: event.phase, timestamp: ts });
+      if (this.breathEvents.length > 100) this.breathEvents.shift();
+      this.updateAnalyticOverlay();
+      this.updateJourneyOverlay(event.phase);
+      this.animateBreathOverlay(event.phase);
+      this.updateMetaOverlay();
+      // Color feedback: flash color for each breath phase
+      const cmyk = digitAngleToCMYK(event.value, event.phase === 'inhale' ? 0 : event.phase === 'hold' ? 120 : 240);
+      flashColor(cmyk, 400);
+      // Sound feedback: play digit for inhale/exhale
+      if (event.phase === 'inhale') playDigit(3);
+      if (event.phase === 'exhale') playDigit(9 as Digit);
+    });
+    healthEmitter.on('health', (metrics: HealthMetrics) => {
+      this.lastHealthMetrics = { ...this.healthMetrics };
+      this.healthMetrics = metrics;
+      this.healthHistory.push({ ...metrics, t: Date.now() });
+      if (this.healthHistory.length > 120) this.healthHistory.shift();
+      this.updateAnalyticOverlay();
+      this.updateMetaOverlay();
+      this.animateHealthOverlay(metrics);
+      this.checkHealthThresholds(metrics);
+      this.updateJourneyOverlay(this.currentBreathPhase, metrics);
+      // Color feedback: flash color for harmony/entropy thresholds
+      if (metrics.harmony < G.UNIT_THIRD_TEN) flashColor({ c: 0, m: 0, y: 100, k: 0 }, 600); // yellow for low harmony
+      if (metrics.entropy > G.OPACITY_FOUR_FIFTH) flashColor({ c: 0, m: 100, y: 0, k: 0 }, 600); // magenta for high entropy
+      if (metrics.resonance > G.OPACITY_FOUR_FIFTH) flashColor({ c: 100, m: 0, y: 0, k: 0 }, 600); // cyan for high resonance
+      // Sound feedback: play trinity sound for high resonance
+      if (metrics.resonance > G.OPACITY_FOUR_FIFTH) playTrinitySound(9);
+    });
+    window.addEventListener('resize', () => this.onResize());
+    this.createDashboardOverlay();
+    // Update dashboard on all relevant events
+    breatheEmitter.on('breathe', () => this.updateDashboardOverlay());
+    healthEmitter.on('health', () => this.updateDashboardOverlay());
+    setInterval(() => this.updateDashboardOverlay(), 5000); // update OS state every 5s
+    this.createMetaphysicalSwitcher();
+    this.showMetaphysicalVisualization('chess');
+  }
+
+  createContainer(): HTMLElement {
+    const container = document.createElement('div');
+    container.id = 'a432-threejs-container';
+    container.style.width = '100vw';
+    container.style.height = '100vh';
+    document.body.appendChild(container);
+    return container;
+  }
+
+  addDefaultLight() {
+    const light = new THREE.PointLight(0xffffff, 1, 100);
+    light.position.set(10, 10, 10);
+    this.scene.add(light);
+    this.lights.push(light);
+  }
+
+  addCube() {
+    const geometry = new THREE.BoxGeometry();
+    const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
+    const cube = new THREE.Mesh(geometry, material);
+    cube.position.set(unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:2") * 4 - 2, unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:3") * 4 - 2, unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:4") * 4 - 2);
+    this.scene.add(cube);
+    this.objects.push(cube);
+    recordEvent(this.blockchain, 'addCube', 'A432ThreeUI', cube);
+    return cube;
+  }
+
+  addSphere() {
+    const geometry = new THREE.SphereGeometry(G.OPACITY_SEVEN, 32, 32);
+    const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
+    const sphere = new THREE.Mesh(geometry, material);
+    sphere.position.set(unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:5") * 4 - 2, unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:6") * 4 - 2, unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:7") * 4 - 2);
+    this.scene.add(sphere);
+    this.objects.push(sphere);
+    recordEvent(this.blockchain, 'addSphere', 'A432ThreeUI', sphere);
+    return sphere;
+  }
+
+  addLight() {
+    const light = new THREE.PointLight(0xffffff, 1, 100);
+    light.position.set(unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:8") * 8 - 4, unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:9") * 8 - 4, unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:10") * 8 - 4);
+    this.scene.add(light);
+    this.lights.push(light);
+    recordEvent(this.blockchain, 'addLight', 'A432ThreeUI', light);
+    return light;
+  }
+
+  removeSelectedObject() {
+    if (this.selectedObject) {
+      recordEvent(this.blockchain, 'removeObject', 'A432ThreeUI', this.selectedObject);
+      this.scene.remove(this.selectedObject);
+      this.objects = this.objects.filter(obj => obj !== this.selectedObject);
+      this.selectedObject = null;
+      this.removePropertyEditor();
+    }
+  }
+
+  selectObject(obj: THREE.Object3D) {
+    this.selectedObject = obj;
+    this.showPropertyEditor(obj);
+    recordEvent(this.blockchain, 'selectObject', 'A432ThreeUI', obj);
+  }
+
+  addUIControls() {
+    // Add UI buttons for demo (can be replaced with a more advanced UI framework)
+    const addCubeBtn = this.createButton('Add Cube', () => this.addCube());
+    const addSphereBtn = this.createButton('Add Sphere', () => this.addSphere());
+    const addLightBtn = this.createButton('Add Light', () => this.addLight());
+    const removeBtn = this.createButton('Remove Selected', () => this.removeSelectedObject());
+    document.body.appendChild(addCubeBtn);
+    document.body.appendChild(addSphereBtn);
+    document.body.appendChild(addLightBtn);
+    document.body.appendChild(removeBtn);
+  }
+
+  createButton(label: string, onClick: () => void): HTMLButtonElement {
+    const btn = document.createElement('button');
+    btn.textContent = label;
+    btn.style.position = 'absolute';
+    btn.style.right = '16px';
+    btn.style.top = `${8 + 40 * document.body.querySelectorAll('button').length}px`;
+    btn.style.zIndex = '10001';
+    btn.onclick = onClick;
+    return btn;
+  }
+
+  animate() {
+    this.animationId = requestAnimationFrame(() => this.animate());
+    // Example: rotate all meshes
+    this.objects.forEach(obj => {
+      if (obj instanceof THREE.Mesh) {
+        obj.rotation.x += G.STEP_FINE;
+        obj.rotation.y += G.STEP_FINE;
+      }
+    });
+    this.renderer.render(this.scene, this.camera);
+    this.controls.update();
+  }
+
+  onResize() {
+    this.camera.aspect = this.container.offsetWidth / this.container.offsetHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
+  }
+
+  // Example: show metaphysical overlay
+  showOverlay(html: string, obj?: THREE.Object3D) {
+    const overlay = document.createElement('div');
+    overlay.innerHTML = html;
+    overlay.style.position = 'absolute';
+    overlay.style.left = '20px';
+    overlay.style.top = '20px';
+    overlay.style.background = 'rgba(0,0,0,0.7)';
+    overlay.style.color = '#fff';
+    overlay.style.padding = '12px';
+    overlay.style.zIndex = '10002';
+    document.body.appendChild(overlay);
+    this.overlays.push(overlay);
+    setTimeout(() => {
+      overlay.remove();
+      this.overlays = this.overlays.filter(o => o !== overlay);
+    }, 3000);
+  }
+
+  // Example: log event to blockchain or analytics
+  // logEvent(type: string, obj: any) {
+  //   logEvent(type, obj);
+  // }
+
+  // Extend: add methods for camera switching, advanced controls, metaphysical overlays, blockchain integration, etc.
+
+  addDragAndDrop() {
+    this.renderer.domElement.addEventListener('pointerdown', (event) => {
+      const mouse = new THREE.Vector2();
+      mouse.x = (event.offsetX / this.renderer.domElement.clientWidth) * 2 - 1;
+      mouse.y = -(event.offsetY / this.renderer.domElement.clientHeight) * 2 + 1;
+      const raycaster = new THREE.Raycaster();
+      raycaster.setFromCamera(mouse, this.camera);
+      const intersects = raycaster.intersectObjects(this.objects);
+      if (intersects.length > 0) {
+        this.selectObject(intersects[0].object);
+      }
+    });
+  }
+
+  showPropertyEditor(obj: THREE.Object3D) {
+    this.removePropertyEditor();
+    const overlay = document.createElement('div');
+    overlay.style.position = 'absolute';
+    overlay.style.right = '20px';
+    overlay.style.top = '80px';
+    overlay.style.background = 'rgba(0,0,0,0.85)';
+    overlay.style.color = '#fff';
+    overlay.style.padding = '16px';
+    overlay.style.zIndex = '10003';
+    overlay.style.borderRadius = '8px';
+    overlay.innerHTML = `<b>Object Properties</b><br>
+      <label>X: <input type='number' step='0.1' value='${obj.position.x}' id='a432-x'></label><br>
+      <label>Y: <input type='number' step='0.1' value='${obj.position.y}' id='a432-y'></label><br>
+      <label>Z: <input type='number' step='0.1' value='${obj.position.z}' id='a432-z'></label><br>
+      <label>Color: <input type='color' value='${(obj as any).material?.color ? '#' + (obj as any).material.color.getHexString() : '#ffffff'}' id='a432-color'></label><br>
+      <button id='a432-close'>Close</button>`;
+    document.body.appendChild(overlay);
+    this.overlays.push(overlay);
+    overlay.querySelector('#a432-x')?.addEventListener('input', (e: any) => { obj.position.x = parseFloat(e.target.value); });
+    overlay.querySelector('#a432-y')?.addEventListener('input', (e: any) => { obj.position.y = parseFloat(e.target.value); });
+    overlay.querySelector('#a432-z')?.addEventListener('input', (e: any) => { obj.position.z = parseFloat(e.target.value); });
+    overlay.querySelector('#a432-color')?.addEventListener('input', (e: any) => {
+      if ((obj as any).material?.color) (obj as any).material.color.set(e.target.value);
+    });
+    overlay.querySelector('#a432-close')?.addEventListener('click', () => this.removePropertyEditor());
+  }
+
+  removePropertyEditor() {
+    this.overlays.forEach(o => {
+      if (o.innerHTML.includes('Object Properties')) o.remove();
+    });
+    this.overlays = this.overlays.filter(o => !o.innerHTML.includes('Object Properties'));
+  }
+
+  createMetaOverlay() {
+    this.metaOverlay = document.createElement('div');
+    this.metaOverlay.style.position = this.overlayDocked ? 'absolute' : 'fixed';
+    this.metaOverlay.style.left = '20px';
+    this.metaOverlay.style.bottom = '20px';
+    this.metaOverlay.style.background = 'rgba(32,32,64,0.92)';
+    this.metaOverlay.style.color = '#fff';
+    this.metaOverlay.style.padding = '16px';
+    this.metaOverlay.style.zIndex = '10010';
+    this.metaOverlay.style.borderRadius = '12px';
+    this.metaOverlay.style.fontFamily = 'monospace';
+    this.metaOverlay.style.minWidth = '260px';
+    this.metaOverlay.innerHTML = this.getMetaOverlayHTML();
+    document.body.appendChild(this.metaOverlay);
+  }
+
+  updateMetaOverlay() {
+    if (this.metaOverlay) {
+      this.metaOverlay.innerHTML = this.getMetaOverlayHTML();
+    }
+  }
+
+  getMetaOverlayHTML() {
+    return `<b>Metaphysical State</b><br>
+      <b>Breath Phase:</b> <span style='color:#0ff'>${this.currentBreathPhase || '—'}</span><br>
+      <b>Breath Value:</b> <span style='color:#0ff'>${this.currentBreathValue}</span><br>
+      <b>Breath Cycle:</b> <span style='color:#fff'>4 (inhale) - 3 (hold) - 2 (exhale)</span><br>
+      <b>Harmony:</b> <span style='color:${this.healthMetrics.harmony > G.OPACITY_SEVEN ? '#0f0' : '#ff0'}'>${this.healthMetrics.harmony.toFixed(2)}</span><br>
+      <b>Entropy:</b> <span style='color:${this.healthMetrics.entropy > G.OPACITY_SEVEN ? '#f00' : '#0ff'}'>${this.healthMetrics.entropy.toFixed(2)}</span><br>
+      <b>Resonance:</b> <span style='color:${this.healthMetrics.resonance > G.OPACITY_SEVEN ? '#0ff' : '#fff'}'>${this.healthMetrics.resonance.toFixed(2)}</span><br>
+      Trinity Phase: <span style='color:#ff0'>${this.trinityPhase}</span><br>
+      Harmony: <span style='color:#0f0'>${this.harmony}</span><br>
+      Entropy: <span style='color:#f00'>${this.entropy}</span><br>
+      <hr style='border:1px solid #333'>
+      Last Breath: ${this.lastBreath ? JSON.stringify(this.lastBreath) : '—'}<br>
+      Last Pulse: ${this.lastPulse ? JSON.stringify(this.lastPulse) : '—'}<br>
+      Last Intuit: ${this.lastIntuit ? JSON.stringify(this.lastIntuit) : '—'}<br>
+      Last Reflect: ${this.lastReflect ? JSON.stringify(this.lastReflect) : '—'}<br>
+      Last Move: ${this.lastMove ? JSON.stringify(this.lastMove) : '—'}<br>
+      Last Heat: ${this.lastHeat ? JSON.stringify(this.lastHeat) : '—'}<br>
+      Last Health: ${this.lastHealth ? JSON.stringify(this.lastHealth) : '—'}<br>
+      Last Emotion: ${this.lastEmotion ? JSON.stringify(this.lastEmotion) : '—'}<br>
+      Last Consciousness: ${this.lastConsciousness ? JSON.stringify(this.lastConsciousness) : '—'}<br>`;
+  }
+
+  createOverlayControls() {
+    const toggleBtn = document.createElement('button');
+    toggleBtn.textContent = 'Toggle Overlay';
+    toggleBtn.style.position = 'absolute';
+    toggleBtn.style.left = '20px';
+    toggleBtn.style.bottom = '180px';
+    toggleBtn.style.zIndex = '10011';
+    toggleBtn.onclick = () => {
+      if (this.metaOverlay) {
+        this.metaOverlay.style.display = this.metaOverlay.style.display === 'none' ? 'block' : 'none';
+      }
+    };
+    document.body.appendChild(toggleBtn);
+    const dockBtn = document.createElement('button');
+    dockBtn.textContent = 'Dock/Float Overlay';
+    dockBtn.style.position = 'absolute';
+    dockBtn.style.left = '140px';
+    dockBtn.style.bottom = '180px';
+    dockBtn.style.zIndex = '10011';
+    dockBtn.onclick = () => {
+      this.overlayDocked = !this.overlayDocked;
+      if (this.metaOverlay) {
+        this.metaOverlay.style.position = this.overlayDocked ? 'absolute' : 'fixed';
+      }
+    };
+    document.body.appendChild(dockBtn);
+  }
+
+  subscribeToA432Events() {
+    pulseEmitter.on('pulse', (ev: any) => {
+      this.lastPulse = ev;
+      this.harmony = getTrinityAxis()[ev.value % 3]; // Assuming harmony is derived from trinity phase
+      this.entropy = getTrinityAxis()[ev.value % 3]; // Assuming entropy is derived from trinity phase
+      this.updateMetaOverlay();
+    });
+    intuitEmitter.on('intuit', (ev: any) => { this.lastIntuit = ev; this.updateMetaOverlay(); });
+    reflectEmitter.on('reflect', (ev: any) => { this.lastReflect = ev; this.updateMetaOverlay(); });
+    moveEmitter.on('move', (ev: any) => { this.lastMove = ev; this.updateMetaOverlay(); });
+    heatEmitter.on('heat', (ev: any) => { this.lastHeat = ev; this.updateMetaOverlay(); });
+    healthEmitter.on('health', (ev: any) => { this.lastHealth = ev; this.updateMetaOverlay(); });
+    humanEmotionEmitter.on('emotion', (ev: any) => { this.lastEmotion = ev; this.updateMetaOverlay(); });
+    humanConsciousnessEmitter.on('consciousness', (ev: any) => { this.lastConsciousness = ev; this.updateMetaOverlay(); });
+  }
+
+  addBreatheCycleButton() {
+    const btn = document.createElement('button');
+    btn.textContent = 'I Breathe (Inhale/Exhale)';
+    btn.style.position = 'absolute';
+    btn.style.left = '20px';
+    btn.style.bottom = '240px';
+    btn.style.zIndex = '10012';
+    btn.onclick = () => this.iBreatheInhaleExhale();
+    document.body.appendChild(btn);
+  }
+
+  iBreatheInhaleExhale() {
+    const now = Date.now();
+    // Inhale event
+    breatheEmitter.emit('breathe', { value: 9, phase: 'inhale', timestamp: now });
+    // Exhale event (after a short delay)
+    setTimeout(() => {
+      breatheEmitter.emit('breathe', { value: 0, phase: 'exhale', timestamp: Date.now() });
+    }, 1000);
+  }
+
+  addBreathCycleControlButton() {
+    const btn = document.createElement('button');
+    btn.textContent = 'Start 4-3-2 Breath Cycle (Device)';
+    btn.style.position = 'absolute';
+    btn.style.left = '20px';
+    btn.style.bottom = '280px';
+    btn.style.zIndex = '10013';
+    btn.onclick = () => this.toggleBreathCycle(btn);
+    document.body.appendChild(btn);
+  }
+
+  toggleBreathCycle(btn: HTMLButtonElement) {
+    if (!this.breathCycleActive) {
+      this.stopBreathCycle = startBreathing(1000); // 1s per step
+      this.breathCycleActive = true;
+      btn.textContent = 'Stop 4-3-2 Breath Cycle (Device)';
+    } else {
+      if (this.stopBreathCycle) this.stopBreathCycle();
+      this.breathCycleActive = false;
+      btn.textContent = 'Start 4-3-2 Breath Cycle (Device)';
+    }
+  }
+
+  animateBreathOverlay(phase: string) {
+    if (!this.metaOverlay) return;
+    this.metaOverlay.style.transition = 'box-shadow 0.3s, background 0.3s';
+    if (phase === 'inhale') {
+      this.metaOverlay.style.boxShadow = '0 0 24px 8px #00ffcc';
+      this.metaOverlay.style.background = 'rgba(32,64,64,0.97)';
+    } else if (phase === 'hold') {
+      this.metaOverlay.style.boxShadow = '0 0 24px 8px #ccccff';
+      this.metaOverlay.style.background = 'rgba(64,64,96,0.97)';
+    } else if (phase === 'exhale') {
+      this.metaOverlay.style.boxShadow = '0 0 24px 8px #ffcc00';
+      this.metaOverlay.style.background = 'rgba(64,32,32,0.97)';
+    } else {
+      this.metaOverlay.style.boxShadow = '';
+      this.metaOverlay.style.background = 'rgba(32,32,64,0.92)';
+    }
+    setTimeout(() => {
+      if (!this.metaOverlay) return;
+      this.metaOverlay.style.boxShadow = '';
+      this.metaOverlay.style.background = 'rgba(32,32,64,0.92)';
+    }, 1200);
+  }
+
+  addMicBreathDetectionButton() {
+    const btn = document.createElement('button');
+    btn.textContent = 'Enable Microphone Breath Detection';
+    btn.style.position = 'absolute';
+    btn.style.left = '20px';
+    btn.style.bottom = '320px';
+    btn.style.zIndex = '10014';
+    btn.onclick = () => this.toggleMicBreathDetection(btn);
+    document.body.appendChild(btn);
+  }
+
+  async toggleMicBreathDetection(btn: HTMLButtonElement) {
+    if (!this.micDetectionActive) {
+      await this.startMicBreathDetection();
+      this.micDetectionActive = true;
+      btn.textContent = 'Disable Microphone Breath Detection';
+    } else {
+      this.stopMicBreathDetection();
+      this.micDetectionActive = false;
+      btn.textContent = 'Enable Microphone Breath Detection';
+    }
+  }
+
+  addMicBreathDetectionControls() {
+    // Threshold slider
+    const thresholdLabel = document.createElement('label');
+    thresholdLabel.textContent = 'Mic Threshold:';
+    thresholdLabel.style.position = 'absolute';
+    thresholdLabel.style.left = '220px';
+    thresholdLabel.style.bottom = '320px';
+    thresholdLabel.style.zIndex = '10014';
+    const thresholdSlider = document.createElement('input');
+    thresholdSlider.type = 'range';
+    thresholdSlider.min = '10';
+    thresholdSlider.max = '100';
+    thresholdSlider.value = String(this.micThreshold);
+    thresholdSlider.oninput = (e: any) => {
+      this.micThreshold = parseInt(e.target.value, 10);
+    };
+    thresholdLabel.appendChild(thresholdSlider);
+    document.body.appendChild(thresholdLabel);
+
+    // Min interval slider
+    const intervalLabel = document.createElement('label');
+    intervalLabel.textContent = 'Min Interval (ms):';
+    intervalLabel.style.position = 'absolute';
+    intervalLabel.style.left = '420px';
+    intervalLabel.style.bottom = '320px';
+    intervalLabel.style.zIndex = '10014';
+    const intervalSlider = document.createElement('input');
+    intervalSlider.type = 'range';
+    intervalSlider.min = '200';
+    intervalSlider.max = '2000';
+    intervalSlider.value = String(this.micMinInterval);
+    intervalSlider.oninput = (e: any) => {
+      this.micMinInterval = parseInt(e.target.value, 10);
+    };
+    intervalLabel.appendChild(intervalSlider);
+    document.body.appendChild(intervalLabel);
+
+    // Auto-calibration button
+    const calibrateBtn = document.createElement('button');
+    calibrateBtn.textContent = 'Auto-Calibrate Threshold';
+    calibrateBtn.style.position = 'absolute';
+    calibrateBtn.style.left = '650px';
+    calibrateBtn.style.bottom = '320px';
+    calibrateBtn.style.zIndex = '10014';
+    calibrateBtn.onclick = () => this.autoCalibrateMicThreshold();
+    document.body.appendChild(calibrateBtn);
+
+    // Amplitude graph
+    this.micGraphCanvas = document.createElement('canvas');
+    this.micGraphCanvas.width = 200;
+    this.micGraphCanvas.height = 40;
+    this.micGraphCanvas.style.position = 'absolute';
+    this.micGraphCanvas.style.left = '900px';
+    this.micGraphCanvas.style.bottom = '320px';
+    this.micGraphCanvas.style.zIndex = '10014';
+    this.micGraphCanvas.style.background = '#222';
+    document.body.appendChild(this.micGraphCanvas);
+  }
+
+  async startMicBreathDetection() {
+    try {
+      this.micDetectionStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      this.micDetectionAudioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
+      const source = this.micDetectionAudioCtx.createMediaStreamSource(this.micDetectionStream);
+      const analyser = this.micDetectionAudioCtx.createAnalyser();
+      analyser.fftSize = 2048;
+      source.connect(analyser);
+      const data = new Uint8Array(analyser.fftSize);
+      let lastPhase: 'inhale'|'exhale' = 'exhale';
+      let lastTrigger = 0;
+      const detect = () => {
+        analyser.getByteTimeDomainData(data);
+        const amplitude = max(...data) - min(...data);
+        this.micAmplitude = amplitude;
+        this.drawMicAmplitudeGraph(amplitude);
+        const now = Date.now();
+        if (amplitude > this.micThreshold && lastPhase === 'exhale' && now - lastTrigger > this.micMinInterval) {
+          breatheEmitter.emit('breathe', { value: 9, phase: 'inhale', timestamp: now });
+          lastPhase = 'inhale';
+          lastTrigger = now;
+        } else if (amplitude < this.micThreshold/2 && lastPhase === 'inhale' && now - lastTrigger > this.micMinInterval) {
+          breatheEmitter.emit('breathe', { value: 0, phase: 'exhale', timestamp: now });
+          lastPhase = 'exhale';
+          lastTrigger = now;
+        }
+        if (this.micDetectionActive) requestAnimationFrame(detect);
+      };
+      detect();
+    } catch (err) {
+      alert('Microphone access denied or unavailable.');
+    }
+  }
+
+  drawMicAmplitudeGraph(amplitude: number) {
+    if (!this.micGraphCanvas) return;
+    const ctx = this.micGraphCanvas.getContext('2d');
+    if (!ctx) return;
+    ctx.clearRect(0, 0, this.micGraphCanvas.width, this.micGraphCanvas.height);
+    ctx.fillStyle = '#0ff';
+    ctx.fillRect(0, 0, amplitude * 2, this.micGraphCanvas.height);
+    ctx.strokeStyle = '#fff';
+    ctx.beginPath();
+    ctx.moveTo(this.micThreshold * 2, 0);
+    ctx.lineTo(this.micThreshold * 2, this.micGraphCanvas.height);
+    ctx.stroke();
+  }
+
+  async autoCalibrateMicThreshold() {
+    if (!this.micDetectionStream || !this.micDetectionAudioCtx) {
+      alert('Start microphone detection first.');
+      return;
+    }
+    const source = this.micDetectionAudioCtx.createMediaStreamSource(this.micDetectionStream);
+    const analyser = this.micDetectionAudioCtx.createAnalyser();
+    analyser.fftSize = 2048;
+    source.connect(analyser);
+    const data = new Uint8Array(analyser.fftSize);
+    let maxAmp = 0;
+    let samples = 0;
+    const sample = () => {
+      analyser.getByteTimeDomainData(data);
+      const amplitude = max(...data) - min(...data);
+      if (amplitude > maxAmp) maxAmp = amplitude;
+      samples++;
+      if (samples < 60) {
+        setTimeout(sample, 50);
+      } else {
+        this.micThreshold = max(20, maxAmp + 10);
+        alert('Auto-calibrated threshold: ' + this.micThreshold);
+      }
+    };
+    sample();
+  }
+
+  stopMicBreathDetection() {
+    if (this.micDetectionStream) {
+      this.micDetectionStream.getTracks().forEach(track => track.stop());
+      this.micDetectionStream = null;
+    }
+    if (this.micDetectionAudioCtx) {
+      this.micDetectionAudioCtx.close();
+      this.micDetectionAudioCtx = null;
+    }
+  }
+
+  createAnalyticOverlay() {
+    this.analyticOverlay = document.createElement('div');
+    this.analyticOverlay.style.position = 'absolute';
+    this.analyticOverlay.style.right = '20px';
+    this.analyticOverlay.style.bottom = '20px';
+    this.analyticOverlay.style.background = 'rgba(32,32,32,0.92)';
+    this.analyticOverlay.style.color = '#fff';
+    this.analyticOverlay.style.padding = '12px';
+    this.analyticOverlay.style.zIndex = '10015';
+    this.analyticOverlay.style.borderRadius = '10px';
+    this.analyticOverlay.style.fontFamily = 'monospace';
+    this.analyticOverlay.style.minWidth = '220px';
+    this.analyticOverlay.innerHTML = this.getAnalyticOverlayHTML();
+    document.body.appendChild(this.analyticOverlay);
+  }
+
+  updateAnalyticOverlay() {
+    if (this.analyticOverlay) {
+      this.analyticOverlay.innerHTML = this.getAnalyticOverlayHTML();
+    }
+  }
+
+  getAnalyticOverlayHTML() {
+    // Calculate breath rate (breaths/min)
+    const now = Date.now();
+    const oneMinuteAgo = now - 60000;
+    const breaths = this.breathEvents.filter(e => e.phase === 'inhale' && e.timestamp > oneMinuteAgo);
+    const breathRate = breaths.length;
+    // Calculate average phase durations
+    const phaseDurations: { [phase: string]: number[] } = { inhale: [], hold: [], exhale: [] };
+    let lastPhase = '', lastTimestamp = 0;
+    for (const e of this.breathEvents) {
+      if (lastPhase && lastTimestamp && e.phase !== lastPhase) {
+        const duration = e.timestamp - lastTimestamp;
+        if (phaseDurations[lastPhase]) phaseDurations[lastPhase].push(duration);
+      }
+      lastPhase = e.phase;
+      lastTimestamp = e.timestamp;
+    }
+    const avg = (arr: number[]) => arr.length ? round(arr.reduce((a, b) => a + b, 0) / arr.length) : '—';
+    return `<b>Breath Analytics</b><br>
+      Breath Rate: <span style='color:#0ff'>${breathRate}</span> breaths/min<br>
+      Avg Inhale: <span style='color:#0ff'>${avg(phaseDurations.inhale)}</span> ms<br>
+      Avg Hold: <span style='color:#0ff'>${avg(phaseDurations.hold)}</span> ms<br>
+      Avg Exhale: <span style='color:#0ff'>${avg(phaseDurations.exhale)}</span> ms<br>
+      <hr style='border:1px solid #333'>
+      <b>System Health</b><br>
+      Harmony: <span style='color:${this.healthMetrics.harmony > G.OPACITY_SEVEN ? '#0f0' : '#ff0'}'>${this.healthMetrics.harmony.toFixed(2)}</span><br>
+      Entropy: <span style='color:${this.healthMetrics.entropy > G.OPACITY_SEVEN ? '#f00' : '#0ff'}'>${this.healthMetrics.entropy.toFixed(2)}</span><br>
+      Resonance: <span style='color:${this.healthMetrics.resonance > G.OPACITY_SEVEN ? '#0ff' : '#fff'}'>${this.healthMetrics.resonance.toFixed(2)}</span><br>
+      <svg width='180' height='36' style='margin-top:8px;'>${this.getHealthSparklineSVG()}</svg>`;
+  }
+
+  getHealthSparklineSVG() {
+    const N = 60;
+    const hist = this.healthHistory.slice(-N);
+    if (!hist.length) return '';
+    const scale = (arr: number[], h: number) => arr.map(v => h - v * h);
+    const w = 180, h = 36;
+    const x = (i: number) => round((i / (N - 1)) * w);
+    const harmony = scale(hist.map(e => e.harmony), h);
+    const entropy = scale(hist.map(e => e.entropy), h);
+    const resonance = scale(hist.map(e => e.resonance), h);
+    const poly = (arr: number[], color: string) => `<polyline fill='none' stroke='${color}' stroke-width='2' points='${arr.map((y, i) => `${x(i)},${y}`).join(' ')}'/>`;
+    return [
+      poly(harmony, '#0f0'),
+      poly(entropy, '#f00'),
+      poly(resonance, '#0ff')
+    ].join('');
+  }
+
+  createJourneyOverlay() {
+    this.journeyOverlay = document.createElement('div');
+    this.journeyOverlay.style.position = 'absolute';
+    this.journeyOverlay.style.left = '20px';
+    this.journeyOverlay.style.top = '20px';
+    this.journeyOverlay.style.background = 'rgba(64,32,96,0.92)';
+    this.journeyOverlay.style.color = '#fff';
+    this.journeyOverlay.style.padding = '14px';
+    this.journeyOverlay.style.zIndex = '10016';
+    this.journeyOverlay.style.borderRadius = '10px';
+    this.journeyOverlay.style.fontFamily = 'monospace';
+    this.journeyOverlay.style.minWidth = '260px';
+    this.journeyOverlay.innerHTML = '<b>Metaphysical Journey</b><br>—';
+    document.body.appendChild(this.journeyOverlay);
+  }
+
+  updateJourneyOverlay(phase: string, metrics?: { harmony: number; entropy: number; resonance: number }) {
+    if (!this.journeyOverlay) return;
+    const prompts: { [phase: string]: string } = {
+      inhale: 'Breathe in unity. Feel the field fill you.',
+      hold: 'Hold. Become aware of harmony.',
+      exhale: 'Exhale. Release entropy, return to source.'
+    };
+    let meta = '';
+    if (metrics) {
+      if (metrics.harmony < G.UNIT_THIRD_TEN) meta = '<br><span style="color:#ff0">Metaphysical Alert: Harmony is low. Focus on unity.</span>';
+      else if (metrics.entropy > G.OPACITY_FOUR_FIFTH) meta = '<br><span style="color:#f00">Metaphysical Alert: Entropy is high. Exhale and release.</span>';
+      else if (metrics.resonance > G.OPACITY_FOUR_FIFTH) meta = '<br><span style="color:#0ff">Metaphysical: Resonance is high. System is harmonized.</span>';
+    }
+    this.journeyOverlay.innerHTML = `<b>Metaphysical Journey</b><br>${prompts[phase] || '—'}${meta}`;
+  }
+
+  addSensorIntegrationButton() {
+    const btn = document.createElement('button');
+    btn.textContent = 'Connect Breath Sensor (Bluetooth/Serial)';
+    btn.style.position = 'absolute';
+    btn.style.left = '20px';
+    btn.style.bottom = '360px';
+    btn.style.zIndex = '10017';
+    btn.onclick = () => this.connectBreathSensor();
+    document.body.appendChild(btn);
+  }
+
+  async connectBreathSensor() {
+    alert('Bluetooth/Serial sensor integration coming soon! (Stub for future device API)');
+    // Placeholder for future Web Bluetooth/Serial integration
+  }
+
+  animateHealthOverlay(metrics: { harmony: number; entropy: number; resonance: number }) {
+    if (!this.analyticOverlay) return;
+    // Animate overlay if harmony or entropy changes significantly
+    if (abs(metrics.harmony - this.lastHealthMetrics.harmony) > G.UNIT_FIFTH) {
+      this.analyticOverlay.style.boxShadow = '0 0 24px 8px #0f0';
+      setTimeout(() => { if (this.analyticOverlay) this.analyticOverlay.style.boxShadow = ''; }, 1000);
+    }
+    if (abs(metrics.entropy - this.lastHealthMetrics.entropy) > G.UNIT_FIFTH) {
+      this.analyticOverlay.style.boxShadow = '0 0 24px 8px #f00';
+      setTimeout(() => { if (this.analyticOverlay) this.analyticOverlay.style.boxShadow = ''; }, 1000);
+    }
+  }
+
+  checkHealthThresholds(metrics: { harmony: number; entropy: number; resonance: number }) {
+    if (metrics.harmony < G.UNIT_THIRD_TEN) {
+      this.showHealthAlert('Low Harmony! Focus on unity and breath.');
+    } else if (metrics.entropy > G.OPACITY_FOUR_FIFTH) {
+      this.showHealthAlert('High Entropy! Exhale and release tension.');
+    } else if (metrics.resonance > G.OPACITY_FOUR_FIFTH) {
+      this.showHealthAlert('High Resonance! System is harmonized.');
+    }
+  }
+
+  showHealthAlert(msg: string) {
+    if (this.healthAlertTimeout) clearTimeout(this.healthAlertTimeout);
+    let alertDiv = document.getElementById('health-alert');
+    if (!alertDiv) {
+      alertDiv = document.createElement('div');
+      alertDiv.id = 'health-alert';
+      alertDiv.style.position = 'fixed';
+      alertDiv.style.left = '50%';
+      alertDiv.style.top = '10%';
+      alertDiv.style.transform = 'translateX(-50%)';
+      alertDiv.style.background = 'rgba(255,0,64,0.95)';
+      alertDiv.style.color = '#fff';
+      alertDiv.style.padding = '18px 32px';
+      alertDiv.style.fontSize = '1.3em';
+      alertDiv.style.borderRadius = '16px';
+      alertDiv.style.zIndex = '10020';
+      alertDiv.style.boxShadow = '0 0 32px 8px #f0f';
+      document.body.appendChild(alertDiv);
+    }
+    alertDiv.textContent = msg;
+    alertDiv.style.display = 'block';
+    this.healthAlertTimeout = setTimeout(() => {
+      if (alertDiv) alertDiv.style.display = 'none';
+    }, 3000);
+  }
+
+  createDashboardOverlay() {
+    this.dashboardOverlay = document.createElement('div');
+    this.dashboardOverlay.style.position = 'fixed';
+    this.dashboardOverlay.style.right = '20px';
+    this.dashboardOverlay.style.top = '20px';
+    this.dashboardOverlay.style.background = 'rgba(24,24,48,0.98)';
+    this.dashboardOverlay.style.color = '#fff';
+    this.dashboardOverlay.style.padding = '20px';
+    this.dashboardOverlay.style.zIndex = '10030';
+    this.dashboardOverlay.style.borderRadius = '18px';
+    this.dashboardOverlay.style.fontFamily = 'monospace';
+    this.dashboardOverlay.style.minWidth = '340px';
+    this.dashboardOverlay.style.maxWidth = '420px';
+    this.dashboardOverlay.style.boxShadow = '0 0 32px 8px #0ff8';
+    this.dashboardOverlay.innerHTML = this.getDashboardOverlayHTML();
+    document.body.appendChild(this.dashboardOverlay);
+  }
+
+  updateDashboardOverlay() {
+    if (this.dashboardOverlay) {
+      this.dashboardOverlay.innerHTML = this.getDashboardOverlayHTML();
+    }
+  }
+
+  getDashboardOverlayHTML() {
+    // OS state
+    const os = a432OSState();
+    const color = os.color.rgb;
+    // Health metrics
+    const h = this.healthMetrics;
+    // Journey prompt
+    const phase = this.currentBreathPhase;
+    const prompts: { [phase: string]: string } = {
+      inhale: 'Breathe in unity. Feel the field fill you.',
+      hold: 'Hold. Become aware of harmony.',
+      exhale: 'Exhale. Release entropy, return to source.'
+    };
+    let meta = '';
+    if (h.harmony < G.UNIT_THIRD_TEN) meta = '<br><span style="color:#ff0">Metaphysical Alert: Harmony is low. Focus on unity.</span>';
+    else if (h.entropy > G.OPACITY_FOUR_FIFTH) meta = '<br><span style="color:#f00">Metaphysical Alert: Entropy is high. Exhale and release.</span>';
+    else if (h.resonance > G.OPACITY_FOUR_FIFTH) meta = '<br><span style="color:#0ff">Metaphysical: Resonance is high. System is harmonized.</span>';
+    return `
+      <div style="font-size:1.1em;margin-bottom:8px;"><b>System Consciousness Dashboard</b></div>
+      <div style="margin-bottom:8px;"><b>OS State</b><br>
+        <span style="color:#0ff">Dimension:</span> ${os.dimension} &nbsp; <span style="color:#0ff">Freq:</span> ${os.frequency}<br>
+        <span style="color:#0ff">Color:</span> <span style="background:rgb(${color.r},${color.g},${color.b});padding:0 8px;border-radius:4px;">&nbsp;</span> #${color.r.toString(16)}${color.g.toString(16)}${color.b.toString(16)}<br>
+        <span style="color:#0ff">Consciousness:</span> ${os.consciousness}<br>
+        <span style="color:#0ff">Platform:</span> ${os.system.platform} &nbsp; <span style="color:#0ff">Arch:</span> ${os.system.arch}<br>
+        <span style="color:#0ff">Uptime:</span> ${round(os.system.uptime/60)} min &nbsp; <span style="color:#0ff">Mem:</span> ${round(os.system.memory.free/1e6)}/${round(os.system.memory.total/1e6)} MB
+      </div>
+      <div style="margin-bottom:8px;"><b>Health</b><br>
+        Harmony: <span style="color:${h.harmony > G.OPACITY_SEVEN ? '#0f0' : '#ff0'}">${h.harmony.toFixed(2)}</span><br>
+        Entropy: <span style="color:${h.entropy > G.OPACITY_SEVEN ? '#f00' : '#0ff'}">${h.entropy.toFixed(2)}</span><br>
+        Resonance: <span style="color:${h.resonance > G.OPACITY_SEVEN ? '#0ff' : '#fff'}">${h.resonance.toFixed(2)}</span><br>
+        <svg width='180' height='36' style='margin-top:8px;'>${this.getHealthSparklineSVG()}</svg>
+      </div>
+      <div style="margin-bottom:8px;"><b>Journey</b><br>
+        <span>${prompts[phase] || '—'}</span>${meta}
+      </div>
+      <div style="font-size:0.9em;color:#aaa;">${os.streamText}</div>
+    `;
+  }
+
+  createMetaphysicalSwitcher() {
+    this.metaphysicalSwitcher = document.createElement('div');
+    this.metaphysicalSwitcher.style.position = 'fixed';
+    this.metaphysicalSwitcher.style.left = '20px';
+    this.metaphysicalSwitcher.style.top = '320px';
+    this.metaphysicalSwitcher.style.zIndex = '10040';
+    this.metaphysicalSwitcher.style.background = 'rgba(32,32,64,0.95)';
+    this.metaphysicalSwitcher.style.padding = '8px 16px';
+    this.metaphysicalSwitcher.style.borderRadius = '10px';
+    this.metaphysicalSwitcher.style.display = 'flex';
+    this.metaphysicalSwitcher.style.gap = '12px';
+    ['chess', 'yin-yang', 'metatron'].forEach((name) => {
+      const btn = document.createElement('button');
+      btn.textContent = name.charAt(0).toUpperCase() + name.slice(1);
+      btn.onclick = () => this.showMetaphysicalVisualization(name as any);
+      btn.style.fontWeight = 'bold';
+      btn.style.background = '#222';
+      btn.style.color = '#fff';
+      btn.style.border = '1px solid #0ff';
+      btn.style.borderRadius = '6px';
+      btn.style.padding = '4px 12px';
+      this.metaphysicalSwitcher!.appendChild(btn);
+    });
+    document.body.appendChild(this.metaphysicalSwitcher);
+  }
+
+  showMetaphysicalVisualization(name: 'chess' | 'yin-yang' | 'metatron') {
+    this.currentMetaViz = name;
+    // Remove all canvases and overlays
+    [this.chessCanvas, this.yinYangCanvas, this.metatronCanvas].forEach(c => c && c.remove());
+    [this.chessOverlay, this.yinYangOverlay, this.metatronOverlay].forEach(o => o && o.remove());
+    if (this.chessDisposer) this.chessDisposer();
+    if (this.yinYangDisposer) this.yinYangDisposer();
+    if (this.metatronDisposer) this.metatronDisposer();
+    // Chess
+    if (name === 'chess') {
+      this.chessCanvas = document.createElement('canvas');
+      this.chessCanvas.width = 240;
+      this.chessCanvas.height = 240;
+      this.chessCanvas.style.position = 'fixed';
+      this.chessCanvas.style.left = '20px';
+      this.chessCanvas.style.top = '380px';
+      this.chessCanvas.style.zIndex = '10041';
+      document.body.appendChild(this.chessCanvas);
+      this.chessOverlay = document.createElement('div');
+      this.chessOverlay.style.position = 'fixed';
+      this.chessOverlay.style.left = '270px';
+      this.chessOverlay.style.top = '380px';
+      this.chessOverlay.style.zIndex = '10042';
+      this.chessOverlay.style.background = 'rgba(32,32,64,0.92)';
+      this.chessOverlay.style.color = '#fff';
+      this.chessOverlay.style.padding = '10px';
+      this.chessOverlay.style.borderRadius = '8px';
+      this.chessOverlay.style.fontFamily = 'monospace';
+      this.chessOverlay.style.minWidth = '160px';
+      document.body.appendChild(this.chessOverlay);
+      const ctx = this.chessCanvas.getContext('2d')!;
+      this.chessDisposer = startChess((f: ChessFrame) => {
+        ctx.clearRect(0, 0, 240, 240);
+        for (let x = 0; x < 8; x++) for (let y = 0; y < 8; y++) {
+          ctx.fillStyle = (x + y) % 2 === 0 ? '#222' : '#444';
+          ctx.fillRect(x * 30, y * 30, 30, 30);
+        }
+        ctx.fillStyle = `rgba(0,255,255,0.7)`;
+        ctx.fillRect(f.file * 30, f.rank * 30, 30, 30);
+        ctx.fillStyle = '#fff';
+        ctx.font = 'bold 18px monospace';
+        ctx.fillText(String(f.linear), f.file * 30 + 8, f.rank * 30 + 22);
+        ctx.fillStyle = '#0ff';
+        ctx.fillText(String(f.vortex), f.file * 30 + 18, f.rank * 30 + 22);
+        // Overlay
+        this.chessOverlay!.innerHTML = `<b>Chess Frame</b><br>
+          File: ${f.file} Rank: ${f.rank}<br>
+          Linear: ${f.linear} Vortex: ${f.vortex}<br>
+          Polarity: <span style='color:${f.polarity === 1 ? '#0f0' : f.polarity === -1 ? '#f00' : '#fff'}'>${f.polarity}</span><br>
+          <span style='color:#0ff'>Metaphysical: ${f.polarity === 1 ? 'Creation' : f.polarity === -1 ? 'Void' : 'Balance'}</span>`;
+        // Sound/music feedback
+        playDigit(f.linear);
+        if (f.polarity === 1) playTrinitySound(3);
+        if (f.polarity === -1) playTrinitySound(9);
+      });
+    }
+    // Yin-Yang
+    if (name === 'yin-yang') {
+      this.yinYangCanvas = document.createElement('canvas');
+      this.yinYangCanvas.width = 240;
+      this.yinYangCanvas.height = 240;
+      this.yinYangCanvas.style.position = 'fixed';
+      this.yinYangCanvas.style.left = '20px';
+      this.yinYangCanvas.style.top = '380px';
+      this.yinYangCanvas.style.zIndex = '10041';
+      document.body.appendChild(this.yinYangCanvas);
+      this.yinYangOverlay = document.createElement('div');
+      this.yinYangOverlay.style.position = 'fixed';
+      this.yinYangOverlay.style.left = '270px';
+      this.yinYangOverlay.style.top = '380px';
+      this.yinYangOverlay.style.zIndex = '10042';
+      this.yinYangOverlay.style.background = 'rgba(32,32,64,0.92)';
+      this.yinYangOverlay.style.color = '#fff';
+      this.yinYangOverlay.style.padding = '10px';
+      this.yinYangOverlay.style.borderRadius = '8px';
+      this.yinYangOverlay.style.fontFamily = 'monospace';
+      this.yinYangOverlay.style.minWidth = '160px';
+      document.body.appendChild(this.yinYangOverlay);
+      const ctx = this.yinYangCanvas.getContext('2d')!;
+      this.yinYangDisposer = startYinYang((f: YinYangFrame) => {
+        ctx.clearRect(0, 0, 240, 240);
+        ctx.beginPath();
+        ctx.arc(120, 120, 100, 0, 2 * PI);
+        ctx.fillStyle = '#222';
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(120, 90, 50, PI, 0);
+        ctx.arc(120, 150, 50, 0, PI);
+        ctx.closePath();
+        ctx.fillStyle = `rgba(0,255,255,0.7)`;
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(120, 150, 50, PI, 0, true);
+        ctx.arc(120, 90, 50, 0, PI, true);
+        ctx.closePath();
+        ctx.fillStyle = `rgba(255,0,255,0.7)`;
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(120, 90, 16, 0, 2 * PI);
+        ctx.fillStyle = '#fff';
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(120, 150, 16, 0, 2 * PI);
+        ctx.fillStyle = '#000';
+        ctx.fill();
+        // Overlay
+        this.yinYangOverlay!.innerHTML = `<b>Yin-Yang Frame</b><br>
+          Positive Digit: ${f.positiveDigit}<br>
+          Negative Digit: ${f.negativeDigit}<br>
+          Angle: ${round(f.angle)}°<br>
+          <span style='color:#0ff'>Metaphysical: Yin/Yang Balance</span>`;
+        // Sound/music feedback
+        playDigit(f.positiveDigit);
+        playDigit(f.negativeDigit);
+        if (abs(f.angle - 180) < 10) playTrinitySound(6);
+      });
+    }
+    // Metatron
+    if (name === 'metatron') {
+      this.metatronCanvas = document.createElement('canvas');
+      this.metatronCanvas.width = 240;
+      this.metatronCanvas.height = 240;
+      this.metatronCanvas.style.position = 'fixed';
+      this.metatronCanvas.style.left = '20px';
+      this.metatronCanvas.style.top = '380px';
+      this.metatronCanvas.style.zIndex = '10041';
+      document.body.appendChild(this.metatronCanvas);
+      this.metatronOverlay = document.createElement('div');
+      this.metatronOverlay.style.position = 'fixed';
+      this.metatronOverlay.style.left = '270px';
+      this.metatronOverlay.style.top = '380px';
+      this.metatronOverlay.style.zIndex = '10042';
+      this.metatronOverlay.style.background = 'rgba(32,32,64,0.92)';
+      this.metatronOverlay.style.color = '#fff';
+      this.metatronOverlay.style.padding = '10px';
+      this.metatronOverlay.style.borderRadius = '8px';
+      this.metatronOverlay.style.fontFamily = 'monospace';
+      this.metatronOverlay.style.minWidth = '160px';
+      document.body.appendChild(this.metatronOverlay);
+      const ctx = this.metatronCanvas.getContext('2d')!;
+      this.metatronDisposer = startMetatron((f: MetatronFrame) => {
+        ctx.clearRect(0, 0, 240, 240);
+        for (const n of f.nodes) {
+          const ang = (n.index / 12) * 2 * PI;
+          const x = 120 + cos(ang) * 90;
+          const y = 120 + sin(ang) * 90;
+          ctx.beginPath();
+          ctx.arc(x, y, 18, 0, 2 * PI);
+          ctx.fillStyle = `rgba(0,255,255,0.7)`;
+          ctx.fill();
+          ctx.strokeStyle = '#fff';
+          ctx.lineWidth = 2;
+          ctx.stroke();
+          ctx.fillStyle = '#fff';
+          ctx.font = 'bold 16px monospace';
+          ctx.fillText(String(n.digit), x - 7, y + 6);
+          // Sound/music feedback for each node
+          try {
+            playDigit(toDigit(n.digit));
+          } catch {}
+        }
+        // Overlay
+        this.metatronOverlay!.innerHTML = `<b>Metatron Frame</b><br>
+          Tick: ${f.tick}<br>
+          Nodes: ${f.nodes.map(n => n.digit).join(', ')}<br>
+          <span style='color:#0ff'>Metaphysical: 12-node Cube/Star</span>`;
+        // Play trinity sound if all node digits are the same
+        if (f.nodes.every(n => n.digit === f.nodes[0].digit)) playTrinitySound(9);
+      });
+    }
+  }
+
+  // Advanced test harness: simulate events
+  static simulateEvents(ui: A432ThreeUI) {
+    setInterval(() => { breatheEmitter.emit('breathe', { value: indexFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:fri:0", 9), phase: 'inhale', timestamp: Date.now() }); }, 3000);
+    setInterval(() => { pulseEmitter.emit('pulse', { value: indexFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:fri:1", 9), timestamp: Date.now() }); }, 4000);
+    setInterval(() => { intuitEmitter.emit('intuit', { insight: 'Aha!', confidence: unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:11"), timestamp: Date.now() }); }, 5000);
+    setInterval(() => { reflectEmitter.emit('reflect', { thought: 'Deep thought', depth: unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:12"), timestamp: Date.now() }); }, 6000);
+    setInterval(() => { moveEmitter.emit('move', { direction: 'up', magnitude: unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:13")*3, timestamp: Date.now() }); }, 7000);
+    setInterval(() => { heatEmitter.emit('heat', { value: unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:14")*100, timestamp: Date.now() }); }, 8000);
+    setInterval(() => { healthEmitter.emit('health', { value: unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:15")*100, timestamp: Date.now() }); }, 9000);
+    setInterval(() => { humanEmotionEmitter.emit('emotion', { type: 'joy', intensity: unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:16"), timestamp: Date.now() }); }, 10000);
+    setInterval(() => { humanConsciousnessEmitter.emit('consciousness', { state: 'aware', level: unitFromSeed("0/3/6/9/1/2/4/8/7/5/1/a432.ui.three.ts:rnd:17"), timestamp: Date.now() }); }, 11000);
+  }
+
+  // Harmonize with user journeys (example: guided I journey)
+  startIJourney(intention: string) {
+    this.showOverlay(`<b>I Journey Started</b><br>Intention: ${intention}`);
+    // ... integrate with journey engine ...
+  }
+
+  // Stub for advanced video/animation overlays
+  showMetaphysicalAnimation(pattern: string) {
+    // Example: animate sacred geometry, trinity, or vortex patterns on the canvas
+    // (Implementation can use canvas, SVG, or WebGL as needed)
+    // For now, just flash a unique color for each pattern
+    const patternColors: { [key: string]: any } = {
+      trinity: { c: 0, m: 100, y: 100, k: 0 },
+      vortex: { c: 100, m: 0, y: 100, k: 0 },
+      unity: { c: 100, m: 100, y: 0, k: 0 }
+    };
+    flashColor(patternColors[pattern] || { c: 0, m: 0, y: 0, k: 100 }, 800);
+  }
+}
+
+// Usage example:
+// const ui = new A432ThreeUI();
+// A432ThreeUI.simulateEvents(ui);
+// ui.startIJourney('Explore consciousness');