import { useState, useEffect, useRef, useCallback } from “react”; const TAU = Math.PI * 2; const PHI_RATIO = 0.618; const PHI_UPPER = 0.667; // ─── Color palette ─────────────────────────────────────────────────────────── const COLORS = { bg: “#050810”, bgCard: “#080d1a”, accent: “#00d4ff”, gold: “#f0c060”, coherence: “#44ffaa”, drift: “#ff4466”, filament: “#7755ff”, node: “#ffaa33”, link: “#2299ff”, corridor: “rgba(68,255,170,0.12)”, corridorBorder: “rgba(68,255,170,0.5)”, text: “#c8d8f0”, textDim: “#4a5878”, grid: “#0d1530”, }; const PRESETS = { “Apollo 1202”: { nodes: [ { id: “NAV”, label: “Navigation”, theta: 0.05 }, { id: “ABORT”, label: “Abort Guidance”, theta: 0.18 }, { id: “PROC”, label: “Main Proc”, theta: 0.31 }, { id: “RADAR”, label: “Radar”, theta: 0.44 }, { id: “IMU”, label: “IMU”, theta: 0.57 }, { id: “POWER”, label: “Power”, theta: 0.70 }, { id: “COMM”, label: “Comm”, theta: 0.83 }, { id: “CTRL”, label: “Control”, theta: 0.94 }, ], links: [ { a: “PROC”, b: “RADAR”, w: 0.9, type: “overload” }, { a: “PROC”, b: “NAV”, w: 0.85, type: “overload” }, { a: “PROC”, b: “ABORT”, w: 0.8, type: “critical” }, { a: “NAV”, b: “IMU”, w: 0.7, type: “normal” }, { a: “CTRL”, b: “POWER”, w: 0.6, type: “normal” }, { a: “COMM”, b: “CTRL”, w: 0.5, type: “normal” }, ], description: “Executive overflow → graceful degradation cascade”, phiMode: “priority”, }, “Grid Cell”: { nodes: [ { id: “P1”, label: “Phase 0°”, theta: 0.0 }, { id: “P2”, label: “Phase 60°”, theta: 0.167 }, { id: “P3”, label: “Phase 120°”, theta: 0.333 }, { id: “P4”, label: “Phase 180°”, theta: 0.5 }, { id: “P5”, label: “Phase 240°”, theta: 0.667 }, { id: “P6”, label: “Phase 300°”, theta: 0.833 }, ], links: [ { a: “P1”, b: “P4”, w: 0.8, type: “inhibit” }, { a: “P2”, b: “P5”, w: 0.8, type: “inhibit” }, { a: “P3”, b: “P6”, w: 0.8, type: “inhibit” }, { a: “P1”, b: “P2”, w: 0.5, type: “excite” }, { a: “P3”, b: “P4”, w: 0.5, type: “excite” }, { a: “P5”, b: “P6”, w: 0.5, type: “excite” }, ], description: “Hexagonal phase-locking in entorhinal cortex grid cells”, phiMode: “layer”, }, “Kuramoto”: { nodes: Array.from({ length: 8 }, (_, i) => ({ id: `O${i}`, label: `ω${i + 1}`, theta: i / 8, })), links: [ { a: “O0”, b: “O1”, w: 0.7, type: “sync” }, { a: “O1”, b: “O2”, w: 0.65, type: “sync” }, { a: “O2”, b: “O3”, w: 0.6, type: “sync” }, { a: “O3”, b: “O4”, w: 0.55, type: “sync” }, { a: “O0”, b: “O4”, w: 0.4, type: “weak” }, { a: “O5”, b: “O7”, w: 0.3, type: “weak” }, { a: “O6”, b: “O2”, w: 0.35, type: “weak” }, ], description: “Coupled oscillator synchronization with partial locking”, phiMode: “phase”, }, “Cosmic Web”: { nodes: [ { id: “NGC”, label: “NGC Cluster”, theta: 0.08 }, { id: “CFA”, label: “CfA Wall”, theta: 0.22 }, { id: “VOID1”, label: “Boötes Void”, theta: 0.38 }, { id: “SLOAN”, label: “Sloan Wall”, theta: 0.52 }, { id: “VOID2”, label: “Local Void”, theta: 0.65 }, { id: “LANIAKEA”, label: “Laniakea”, theta: 0.78 }, { id: “PERSEUS”, label: “Perseus”, theta: 0.91 }, ], links: [ { a: “NGC”, b: “CFA”, w: 0.85, type: “filament” }, { a: “SLOAN”, b: “LANIAKEA”, w: 0.9, type: “filament” }, { a: “LANIAKEA”, b: “PERSEUS”, w: 0.75, type: “filament” }, { a: “CFA”, b: “SLOAN”, w: 0.6, type: “bridge” }, { a: “VOID1”, b: “VOID2”, w: 0.1, type: “void” }, { a: “PERSEUS”, b: “NGC”, w: 0.5, type: “bridge” }, ], description: “Cosmic web filaments projected to toroidal skeleton coordinates”, phiMode: “density”, }, “Resona Gate”: { nodes: [ { id: “GUARD”, label: “Guardian”, theta: 0.1 }, { id: “CUST”, label: “CUST Gate”, theta: 0.22 }, { id: “RES”, label: “Researcher”, theta: 0.38 }, { id: “CLIN”, label: “Clinician”, theta: 0.55 }, { id: “COHER”, label: “Coherence”, theta: 0.68 }, { id: “DRIFT”, label: “Drift Monitor”, theta: 0.82 }, { id: “DEGRAD”, label: “Graceful Degrad”, theta: 0.95 }, ], links: [ { a: “GUARD”, b: “CUST”, w: 0.95, type: “gate” }, { a: “CUST”, b: “COHER”, w: 0.9, type: “gate” }, { a: “COHER”, b: “RES”, w: 0.75, type: “active” }, { a: “COHER”, b: “CLIN”, w: 0.8, type: “active” }, { a: “DRIFT”, b: “GUARD”, w: 0.7, type: “feedback” }, { a: “DRIFT”, b: “DEGRAD”, w: 0.6, type: “feedback” }, { a: “CLIN”, b: “DEGRAD”, w: 0.4, type: “safety” }, ], description: “Resona OS agent topology: CUST-gated coherence corridor”, phiMode: “agent”, }, }; // ─── Link type colors ───────────────────────────────────────────────────────── const LINK_COLORS = { overload: “#ff4466”, critical: “#ff8833”, normal: “#2299ff”, inhibit: “#aa44ff”, excite: “#44ffaa”, sync: “#00d4ff”, weak: “#334466”, filament: “#f0c060”, bridge: “#7755ff”, void: “#1a2040”, gate: “#44ffaa”, active: “#00d4ff”, feedback: “#ff8833”, safety: “#ff4466”, }; // ─── Utility ────────────────────────────────────────────────────────────────── function torusPoint(theta, phi, R = 1.0, r = 0.35) { const x = (R + r * Math.cos(phi * TAU)) * Math.cos(theta * TAU); const y = (R + r * Math.cos(phi * TAU)) * Math.sin(theta * TAU); const z = r * Math.sin(phi * TAU); return { x, y, z }; } function project3D(x, y, z, tilt = 0.45) { // Simple isometric-ish projection with tilt const cosT = Math.cos(tilt); const sinT = Math.sin(tilt); const px = x; const py = y * cosT - z * sinT; return { px, py }; } // ─── Circos View ───────────────────────────────────────────────────────────── function CircosView({ preset, animT, showCorridor }) { const canvas = useRef(null); useEffect(() => { const cv = canvas.current; if (!cv) return; const ctx = cv.getContext(“2d”); const W = cv.width; const H = cv.height; const cx = W / 2; const cy = H / 2; const R = Math.min(W, H) * 0.36; const trackW = 18; ``` ctx.clearRect(0, 0, W, H); // Background glow const bg = ctx.createRadialGradient(cx, cy, 0, cx, cy, R * 1.4); bg.addColorStop(0, "rgba(10,20,50,0.8)"); bg.addColorStop(1, "rgba(5,8,16,0)"); ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H); const nodes = preset.nodes; const links = preset.links; // Corridor ring if (showCorridor) { const rIn = R * PHI_RATIO; const rOut = R * PHI_UPPER * 1.1; ctx.beginPath(); ctx.arc(cx, cy, rIn, 0, TAU); ctx.arc(cx, cy, rOut, 0, TAU); ctx.fillStyle = COLORS.corridor; ctx.fill("evenodd"); ctx.beginPath(); ctx.arc(cx, cy, (rIn + rOut) / 2, 0, TAU); ctx.strokeStyle = COLORS.corridorBorder; ctx.lineWidth = 1; ctx.setLineDash([4, 8]); ctx.stroke(); ctx.setLineDash([]); } // Draw links as bezier chords links.forEach((link) => { const na = nodes.find((n) => n.id === link.a); const nb = nodes.find((n) => n.id === link.b); if (!na || !nb) return; const ta = na.theta * TAU - Math.PI / 2; const tb = nb.theta * TAU - Math.PI / 2; const ax = cx + R * Math.cos(ta); const ay = cy + R * Math.sin(ta); const bx = cx + R * Math.cos(tb); const by = cy + R * Math.sin(tb); const color = LINK_COLORS[link.type] || "#334466"; const grad = ctx.createLinearGradient(ax, ay, bx, by); grad.addColorStop(0, color + "aa"); grad.addColorStop(0.5, color + "44"); grad.addColorStop(1, color + "aa"); ctx.beginPath(); ctx.moveTo(ax, ay); ctx.bezierCurveTo( cx + (ax - cx) * 0.15, cy + (ay - cy) * 0.15, cx + (bx - cx) * 0.15, cy + (by - cy) * 0.15, bx, by ); ctx.strokeStyle = grad; ctx.lineWidth = link.w * 2.5; ctx.stroke(); }); // Draw outer ring ctx.beginPath(); ctx.arc(cx, cy, R, 0, TAU); ctx.strokeStyle = "#1a2850"; ctx.lineWidth = trackW; ctx.stroke(); // Draw nodes on ring nodes.forEach((node) => { const angle = node.theta * TAU - Math.PI / 2; const nx = cx + R * Math.cos(angle); const ny = cy + R * Math.sin(angle); // Arc segment const arcLen = (1 / nodes.length) * 0.8; const a0 = angle - arcLen * Math.PI; const a1 = angle + arcLen * Math.PI; ctx.beginPath(); ctx.arc(cx, cy, R, a0, a1); ctx.strokeStyle = COLORS.accent; ctx.lineWidth = trackW - 4; ctx.stroke(); // Node dot ctx.beginPath(); ctx.arc(nx, ny, 5, 0, TAU); ctx.fillStyle = COLORS.node; const glow = ctx.createRadialGradient(nx, ny, 0, nx, ny, 12); glow.addColorStop(0, COLORS.node + "cc"); glow.addColorStop(1, "transparent"); ctx.fillStyle = glow; ctx.beginPath(); ctx.arc(nx, ny, 12, 0, TAU); ctx.fill(); ctx.beginPath(); ctx.arc(nx, ny, 4, 0, TAU); ctx.fillStyle = "#fff"; ctx.fill(); // Label const lx = cx + (R + 28) * Math.cos(angle); const ly = cy + (R + 28) * Math.sin(angle); ctx.save(); ctx.translate(lx, ly); ctx.rotate(angle + Math.PI / 2); if (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2) { ctx.rotate(Math.PI); } ctx.font = "10px 'Space Mono', monospace"; ctx.fillStyle = COLORS.text; ctx.textAlign = "center"; ctx.fillText(node.label, 0, 0); ctx.restore(); }); // Center label ctx.font = "bold 11px 'Space Mono', monospace"; ctx.fillStyle = COLORS.textDim; ctx.textAlign = "center"; ctx.fillText("θ-SPACE", cx, cy - 8); ctx.font = "9px 'Space Mono', monospace"; ctx.fillStyle = COLORS.coherence + "88"; ctx.fillText("Circos → Torus", cx, cy + 8); ``` }, [preset, animT, showCorridor]); return ( <canvas ref={canvas} width={380} height={380} style={{ display: “block”, margin: “0 auto” }} /> ); } // ─── Torus Attractor View ───────────────────────────────────────────────────── function TorusAttractorView({ preset, animT, showCorridor, mode }) { const canvas = useRef(null); useEffect(() => { const cv = canvas.current; if (!cv) return; const ctx = cv.getContext(“2d”); const W = cv.width; const H = cv.height; const cx = W / 2; const cy = H / 2; const scale = Math.min(W, H) * 0.28; ``` ctx.clearRect(0, 0, W, H); const TILT = 0.55; const R = 1.0; const r = 0.35; // Draw torus wireframe const segsM = 48; const segsN = 24; // Draw tube circles for (let i = 0; i < segsM; i++) { const theta = i / segsM; const points = []; for (let j = 0; j <= segsN; j++) { const phi = j / segsN; const p = torusPoint(theta, phi, R, r); const { px, py } = project3D(p.x, p.y, p.z, TILT); points.push({ x: cx + px * scale, y: cy + py * scale, z: p.z }); } ctx.beginPath(); points.forEach((pt, idx) => { if (idx === 0) ctx.moveTo(pt.x, pt.y); else ctx.lineTo(pt.x, pt.y); }); const brightness = Math.max(0, points[0]?.z || 0) * 0.5 + 0.08; ctx.strokeStyle = `rgba(20,40,100,${brightness})`; ctx.lineWidth = 0.5; ctx.stroke(); } // Draw ring circles for (let j = 0; j < segsN; j++) { const phi = j / segsN; const points = []; for (let i = 0; i <= segsM; i++) { const theta = i / segsM; const p = torusPoint(theta, phi, R, r); const { px, py } = project3D(p.x, p.y, p.z, TILT); points.push({ x: cx + px * scale, y: cy + py * scale, z: p.z }); } ctx.beginPath(); points.forEach((pt, idx) => { if (idx === 0) ctx.moveTo(pt.x, pt.y); else ctx.lineTo(pt.x, pt.y); }); const brightness = Math.max(0, points[Math.floor(points.length / 4)]?.z || 0) * 0.4 + 0.06; ctx.strokeStyle = `rgba(20,40,100,${brightness})`; ctx.lineWidth = 0.5; ctx.stroke(); } // Draw coherence corridor band if (showCorridor) { const corrPoints = []; for (let i = 0; i <= 200; i++) { const theta = i / 200; const phi = PHI_RATIO + Math.sin(theta * TAU * 3) * 0.03; const p = torusPoint(theta, phi, R, r); const { px, py } = project3D(p.x, p.y, p.z, TILT); corrPoints.push({ x: cx + px * scale, y: cy + py * scale, z: p.z }); } ctx.beginPath(); corrPoints.forEach((pt, idx) => { if (idx === 0) ctx.moveTo(pt.x, pt.y); else ctx.lineTo(pt.x, pt.y); }); ctx.strokeStyle = COLORS.coherence + "99"; ctx.lineWidth = 3; ctx.stroke(); // Upper bound const corrPoints2 = []; for (let i = 0; i <= 200; i++) { const theta = i / 200; const phi = PHI_UPPER + Math.sin(theta * TAU * 3) * 0.03; const p = torusPoint(theta, phi, R, r); const { px, py } = project3D(p.x, p.y, p.z, TILT); corrPoints2.push({ x: cx + px * scale, y: cy + py * scale, z: p.z }); } ctx.beginPath(); corrPoints2.forEach((pt, idx) => { if (idx === 0) ctx.moveTo(pt.x, pt.y); else ctx.lineTo(pt.x, pt.y); }); ctx.strokeStyle = COLORS.coherence + "55"; ctx.lineWidth = 1.5; ctx.setLineDash([6, 6]); ctx.stroke(); ctx.setLineDash([]); } // Draw animated trajectories const numTrajectories = preset.nodes.length; preset.nodes.forEach((node, idx) => { const baseTheta = node.theta; const omega1 = 1.0 + idx * 0.13; const omega2 = mode === "phase" ? 1.618 : (idx % 3 === 0 ? 0.5 : 1.0); const points = []; const steps = 300; for (let s = 0; s <= steps; s++) { const t = (s / steps) * 4 * Math.PI + animT * 0.8; const theta = (baseTheta + omega1 * t * 0.04) % 1; const phi = (omega2 * t * 0.04) % 1; const p = torusPoint(theta, phi, R, r); const { px, py } = project3D(p.x, p.y, p.z, TILT); points.push({ x: cx + px * scale, y: cy + py * scale, z: p.z, alpha: s / steps }); } // Color based on coherence const hue = (idx * 47) % 360; ctx.beginPath(); points.forEach((pt, i) => { if (i === 0) ctx.moveTo(pt.x, pt.y); else ctx.lineTo(pt.x, pt.y); }); ctx.strokeStyle = `hsla(${hue},80%,65%,0.35)`; ctx.lineWidth = 1; ctx.stroke(); // Current position dot const last = points[points.length - 1]; ctx.beginPath(); ctx.arc(last.x, last.y, 3, 0, TAU); ctx.fillStyle = `hsl(${hue},90%,70%)`; ctx.fill(); }); // Labels ctx.font = "11px 'Space Mono', monospace"; ctx.fillStyle = COLORS.textDim; ctx.textAlign = "center"; ctx.fillText("(θ,φ,ρ)-SPACE", cx, H - 16); if (showCorridor) { ctx.font = "9px 'Space Mono', monospace"; ctx.fillStyle = COLORS.coherence + "88"; ctx.fillText(`corridor φ ∈ [${PHI_RATIO}, ${PHI_UPPER}]`, cx, H - 4); } ``` }, [preset, animT, showCorridor, mode]); return ( <canvas ref={canvas} width={380} height={380} style={{ display: “block”, margin: “0 auto” }} /> ); } // ─── Cosmic Web View ────────────────────────────────────────────────────────── function CosmicWebView({ preset, animT, showCorridor }) { const canvas = useRef(null); useEffect(() => { const cv = canvas.current; if (!cv) return; const ctx = cv.getContext(“2d”); const W = cv.width; const H = cv.height; const cx = W / 2; const cy = H / 2; ``` ctx.clearRect(0, 0, W, H); // Starfield const seed = 42; for (let i = 0; i < 200; i++) { const sx = ((i * 137.508 + seed) % 1) * W; const sy = ((i * 97.31 + seed * 2) % 1) * H; const alpha = ((i * 0.073) % 0.5) + 0.1; ctx.beginPath(); ctx.arc(sx, sy, 0.8, 0, TAU); ctx.fillStyle = `rgba(200,220,255,${alpha})`; ctx.fill(); } const nodes = preset.nodes; const links = preset.links; const R = Math.min(W, H) * 0.33; // Draw filament links with glow links.forEach((link) => { const na = nodes.find((n) => n.id === link.a); const nb = nodes.find((n) => n.id === link.b); if (!na || !nb) return; const ta = na.theta * TAU - Math.PI / 2; const tb = nb.theta * TAU - Math.PI / 2; const ax = cx + R * Math.cos(ta); const ay = cy + R * Math.sin(ta); const bx = cx + R * Math.cos(tb); const by = cy + R * Math.sin(tb); const color = link.type === "filament" ? COLORS.filament : link.type === "bridge" ? COLORS.link : link.type === "void" ? "#111830" : COLORS.gold; // Glow ctx.shadowBlur = 12; ctx.shadowColor = color; ctx.beginPath(); const midx = (ax + bx) / 2 + (cy - (ay + by) / 2) * 0.2; const midy = (ay + by) / 2 - (cx - (ax + bx) / 2) * 0.2; ctx.moveTo(ax, ay); ctx.quadraticCurveTo(midx, midy, bx, by); ctx.strokeStyle = color + Math.round(link.w * 180).toString(16).padStart(2, "0"); ctx.lineWidth = link.w * 2; ctx.stroke(); ctx.shadowBlur = 0; }); // Draw void regions nodes.filter((n) => n.id.includes("VOID")).forEach((node) => { const angle = node.theta * TAU - Math.PI / 2; const nx = cx + R * Math.cos(angle); const ny = cy + R * Math.sin(angle); const voidGrad = ctx.createRadialGradient(nx, ny, 0, nx, ny, 40); voidGrad.addColorStop(0, "rgba(5,8,20,0.9)"); voidGrad.addColorStop(1, "rgba(5,8,20,0)"); ctx.beginPath(); ctx.arc(nx, ny, 40, 0, TAU); ctx.fillStyle = voidGrad; ctx.fill(); }); // Draw nodes nodes.forEach((node) => { const angle = node.theta * TAU - Math.PI / 2; const nx = cx + R * Math.cos(angle); const ny = cy + R * Math.sin(angle); const isVoid = node.id.includes("VOID"); const nodeR = isVoid ? 6 : 10 + Math.sin(animT * 0.05 + node.theta * TAU) * 2; if (!isVoid) { // Glow const glow = ctx.createRadialGradient(nx, ny, 0, nx, ny, nodeR * 3); glow.addColorStop(0, COLORS.node + "88"); glow.addColorStop(1, "transparent"); ctx.beginPath(); ctx.arc(nx, ny, nodeR * 3, 0, TAU); ctx.fillStyle = glow; ctx.fill(); } ctx.beginPath(); ctx.arc(nx, ny, nodeR, 0, TAU); ctx.fillStyle = isVoid ? "#0d1530" : COLORS.node; ctx.fill(); ctx.strokeStyle = isVoid ? "#1a2850" : COLORS.gold + "88"; ctx.lineWidth = 1; ctx.stroke(); // Label const lx = cx + (R + 26) * Math.cos(angle); const ly = cy + (R + 26) * Math.sin(angle); ctx.save(); ctx.translate(lx, ly); ctx.rotate(angle + Math.PI / 2); if (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2) ctx.rotate(Math.PI); ctx.font = "9px 'Space Mono', monospace"; ctx.fillStyle = isVoid ? COLORS.textDim : COLORS.text; ctx.textAlign = "center"; ctx.fillText(node.label, 0, 0); ctx.restore(); }); // Corridor ring overlay if (showCorridor) { const rIn = R * PHI_RATIO * 0.95; const rOut = R * PHI_UPPER; ctx.beginPath(); ctx.arc(cx, cy, rIn, 0, TAU); ctx.strokeStyle = COLORS.corridorBorder + "55"; ctx.lineWidth = 1; ctx.setLineDash([3, 9]); ctx.stroke(); ctx.setLineDash([]); } // θ axis label ctx.font = "11px 'Space Mono', monospace"; ctx.fillStyle = COLORS.textDim; ctx.textAlign = "center"; ctx.fillText("θ = filament skeleton arc-length", cx, H - 16); ctx.font = "9px 'Space Mono', monospace"; ctx.fillStyle = COLORS.filament + "88"; ctx.fillText("ρ = density · lensing mass · brightness", cx, H - 4); ``` }, [preset, animT, showCorridor]); return ( <canvas ref={canvas} width={380} height={380} style={{ display: “block”, margin: “0 auto” }} /> ); } // ─── Legend ─────────────────────────────────────────────────────────────────── function Legend({ preset }) { const linkTypes = […new Set(preset.links.map((l) => l.type))]; return ( <div style={{ display: “flex”, flexWrap: “wrap”, gap: “6px 14px”, padding: “10px 14px”, background: “rgba(8,13,26,0.8)”, borderTop: “1px solid #0d1530”, borderRadius: “0 0 10px 10px”, }}> {linkTypes.map((t) => ( <div key={t} style={{ display: “flex”, alignItems: “center”, gap: 5 }}> <div style={{ width: 24, height: 3, background: LINK_COLORS[t] || “#334466”, borderRadius: 2, }} /> <span style={{ fontSize: 9, color: COLORS.textDim, fontFamily: “‘Space Mono’, monospace”, textTransform: “uppercase”, letterSpacing: 1 }}>{t}</span> </div> ))} </div> ); } // ─── View Card ──────────────────────────────────────────────────────────────── function ViewCard({ title, subtitle, children, legend, preset }) { return ( <div style={{ background: COLORS.bgCard, border: “1px solid #0d1530”, borderRadius: 12, overflow: “hidden”, display: “flex”, flexDirection: “column”, }}> <div style={{ padding: “10px 14px 6px”, borderBottom: “1px solid #0d1530”, display: “flex”, justifyContent: “space-between”, alignItems: “baseline”, }}> <span style={{ fontFamily: “‘Space Mono’, monospace”, fontSize: 11, color: COLORS.accent, fontWeight: “bold”, letterSpacing: 1, textTransform: “uppercase” }}>{title}</span> <span style={{ fontFamily: “‘Space Mono’, monospace”, fontSize: 9, color: COLORS.textDim }}>{subtitle}</span> </div> <div style={{ flex: 1, padding: 8 }}>{children}</div> {legend && <Legend preset={preset} />} </div> ); } // ─── Main App ───────────────────────────────────────────────────────────────── export default function ToroidalAtlas() { const [activePreset, setActivePreset] = useState(“Resona Gate”); const [animT, setAnimT] = useState(0); const [showCorridor, setShowCorridor] = useState(true); const [playing, setPlaying] = useState(true); const rafRef = useRef(null); const preset = PRESETS[activePreset]; useEffect(() => { if (!playing) return; const tick = () => { setAnimT((t) => t + 1); rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [playing]); return ( <div style={{ minHeight: “100vh”, background: COLORS.bg, color: COLORS.text, fontFamily: “‘Space Mono’, monospace”, padding: “16px”, boxSizing: “border-box”, }}> {/* Google Font */} <style>{`@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Orbitron:wght@400;700;900&display=swap'); * { box-sizing: border-box; } ::-webkit-scrollbar { width: 4px; background: #080d1a; } ::-webkit-scrollbar-thumb { background: #1a2850; border-radius: 4px; } canvas { max-width: 100%; height: auto !important; }`}</style> ``` {/* Header */} <div style={{ textAlign: "center", marginBottom: 20 }}> <h1 style={{ fontFamily: "'Orbitron', monospace", fontSize: "clamp(18px, 3vw, 28px)", fontWeight: 900, color: COLORS.accent, letterSpacing: 4, margin: 0, textShadow: `0 0 30px ${COLORS.accent}66`, }}> TOROIDAL ATLAS </h1> <p style={{ fontSize: 10, color: COLORS.textDim, margin: "4px 0 0", letterSpacing: 2 }}> ONE COORDINATE GRAMMAR · θ · φ · ρ </p> </div> {/* Controls */} <div style={{ display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "center", marginBottom: 16, alignItems: "center", }}> {/* Preset selector */} {Object.keys(PRESETS).map((name) => ( <button key={name} onClick={() => setActivePreset(name)} style={{ padding: "5px 12px", borderRadius: 20, border: `1px solid ${activePreset === name ? COLORS.accent : "#1a2850"}`, background: activePreset === name ? COLORS.accent + "22" : "transparent", color: activePreset === name ? COLORS.accent : COLORS.textDim, cursor: "pointer", fontSize: 9, fontFamily: "'Space Mono', monospace", letterSpacing: 1, textTransform: "uppercase", transition: "all 0.2s", }} > {name} </button> ))} <div style={{ width: 1, height: 20, background: "#1a2850" }} /> <button onClick={() => setShowCorridor((s) => !s)} style={{ padding: "5px 12px", borderRadius: 20, border: `1px solid ${showCorridor ? COLORS.coherence : "#1a2850"}`, background: showCorridor ? COLORS.coherence + "22" : "transparent", color: showCorridor ? COLORS.coherence : COLORS.textDim, cursor: "pointer", fontSize: 9, fontFamily: "'Space Mono', monospace", letterSpacing: 1, }} > ⬡ CORRIDOR </button> <button onClick={() => setPlaying((p) => !p)} style={{ padding: "5px 12px", borderRadius: 20, border: `1px solid #1a2850`, background: "transparent", color: COLORS.textDim, cursor: "pointer", fontSize: 9, fontFamily: "'Space Mono', monospace", letterSpacing: 1, }} > {playing ? "⏸ PAUSE" : "▶ PLAY"} </button> </div> {/* Description */} <div style={{ textAlign: "center", fontSize: 9, color: COLORS.textDim, marginBottom: 14, fontStyle: "italic", letterSpacing: 0.5, }}> {preset.description} </div> {/* Three synchronized views */} <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 12, maxWidth: 1200, margin: "0 auto", }}> <ViewCard title="Toroidal Circos" subtitle="θ-ring projection" legend preset={preset} > <CircosView preset={preset} animT={animT} showCorridor={showCorridor} /> </ViewCard> <ViewCard title="Attractor View" subtitle="(θ,φ,ρ) full torus" legend={false} preset={preset} > <TorusAttractorView preset={preset} animT={animT} showCorridor={showCorridor} mode={preset.phiMode} /> </ViewCard> <ViewCard title="Filament Map" subtitle="cosmic web / skeleton" legend preset={preset} > <CosmicWebView preset={preset} animT={animT} showCorridor={showCorridor} /> </ViewCard> </div> {/* Coordinate legend */} <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 8, maxWidth: 800, margin: "16px auto 0", padding: "12px 16px", background: COLORS.bgCard, border: "1px solid #0d1530", borderRadius: 10, }}> {[ { sym: "θ", color: COLORS.accent, desc: "ring position · sequence · arc-length · time" }, { sym: "φ", color: COLORS.filament, desc: "phase · layer · agent-state · cross-section" }, { sym: "ρ", color: COLORS.gold, desc: "density · coherence · confidence · brightness" }, { sym: "φ⁻¹", color: COLORS.coherence, desc: `corridor [${PHI_RATIO} – ${PHI_UPPER}] · golden band` }, ].map(({ sym, color, desc }) => ( <div key={sym} style={{ display: "flex", flexDirection: "column", gap: 2 }}> <span style={{ fontFamily: "'Orbitron', monospace", fontSize: 14, color, fontWeight: 700 }}>{sym}</span> <span style={{ fontSize: 8, color: COLORS.textDim, lineHeight: 1.4 }}>{desc}</span> </div> ))} </div> {/* Footer */} <div style={{ textAlign: "center", marginTop: 12, fontSize: 8, color: COLORS.textDim, letterSpacing: 1, }}> QOTE · RESONA OS · ONE SHARED RENDERING GRAMMAR </div> </div> ``` ); }