Hugging Face's logo

Spaces:
zkaedi
/
phase-portrait-visualizer
Running

App Files Community
zkaedi commited on
Commit
26fc7b8
·
verified ·
1 Parent(s): 10c1475

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +308 -198
index.html CHANGED
@@ -3,8 +3,8 @@
3
  <head>
4
  <meta charset="UTF-8"/>
5
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
6
- <title>🔱 ZKAEDI PRIME — Phase Portrait Visualizer</title>
7
- <meta name="description" content="Interactive visualization of recursively coupled Hamiltonian dynamics with phase portraits, bifurcation diagrams, and Lyapunov analysis."/>
8
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
9
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700;800&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet"/>
10
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
@@ -12,20 +12,78 @@
12
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.9/babel.min.js"></script>
13
  <style>
14
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
15
- :root{--c:#00ffff;--m:#ff00ff;--dk:#06060c;--pn:rgba(255,255,255,0.02);--bd:rgba(255,255,255,0.07);--v:#8b5cf6;--g:#10b981;--a:#f59e0b;--r:#ef4444}
16
- html,body,#root{height:100%;background:var(--dk);color:#c0c0c0;overflow-x:hidden}
 
 
 
 
17
  body{font-family:'JetBrains Mono',monospace;font-size:12px}
18
- ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--dk)}::-webkit-scrollbar-thumb{background:rgba(0,255,255,0.2);border-radius:3px}
19
- @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
 
 
 
 
20
  @keyframes scan{0%{top:-2px}100%{top:100%}}
21
- @keyframes glowPulse{0%,100%{box-shadow:0 0 15px rgba(0,255,255,.1)}50%{box-shadow:0 0 30px rgba(0,255,255,.25)}}
22
- @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 
 
 
 
 
23
  @keyframes recording{0%,100%{opacity:1}50%{opacity:.3}}
24
- button{font-family:inherit;cursor:pointer;transition:all .2s}
25
- button:hover{filter:brightness(1.3)}button:active{transform:scale(.97)}
26
- .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:6px;background:rgba(0,255,255,.15);border:1px solid rgba(0,255,255,.3);color:var(--c);font-size:11px;letter-spacing:1px;z-index:200;animation:fadeIn .3s;backdrop-filter:blur(10px)}
27
- .kbd{display:inline-block;padding:1px 5px;border-radius:3px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:9px;color:#888;margin:0 2px;font-family:inherit}
 
 
 
 
 
 
 
 
 
 
 
28
  .fullscreen-host{position:fixed;inset:0;z-index:300;background:var(--dk);overflow:auto}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  </style>
30
  </head>
31
  <body>
@@ -33,7 +91,10 @@ button:hover{filter:brightness(1.3)}button:active{transform:scale(.97)}
33
  <script type="text/babel">
34
  const{useState,useEffect,useRef,useCallback}=React;
35
 
36
- const C="#00ffff",M="#ff00ff",V="#8b5cf6",G="#10b981",A="#f59e0b",R="#ef4444";
 
 
 
37
  const sigmoid=x=>1/(1+Math.exp(-Math.max(-20,Math.min(20,x))));
38
 
39
  class RNG{
@@ -87,6 +148,25 @@ function trace(H,n,si,sj,steps,dt){
87
 
88
  function eColor(val,mn,mx,mode){
89
  const t=Math.max(0,Math.min(1,(val-mn)/(mx-mn+1e-10)));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  if(mode==="cyan_magenta")return[Math.floor(t*255),Math.floor((1-t)*255),255];
91
  if(mode==="plasma")return[Math.floor(Math.min(255,t*510)),Math.floor(Math.max(0,(t-.3)*400)),Math.floor((1-t)*255)];
92
  if(mode==="thermal")return[Math.floor(t*255),Math.floor(t<.5?t*2*200:200-(t-.5)*2*200),Math.floor((1-t)*100)];
@@ -106,7 +186,6 @@ function computeStats(H){
106
  return{min:mn,max:mx,mean,variance:vari,entropy:ent,histogram:hist,bins,skewness:m3,kurtosis:m4-3};
107
  }
108
 
109
- // URL State encode/decode
110
  function encodeState(params,potential,colorMode){
111
  const s={e:params.eta,g:params.gamma,b:params.beta,s:params.sigma,i:params.iterations,
112
  d:params.seed,t:params.trajectoryCount,l:params.trajectoryLength,p:potential,c:colorMode};
@@ -119,28 +198,29 @@ function decodeState(hash){
119
  }
120
 
121
  const PRESETS=[
122
- {name:"Quantum Tunneling",icon:"\u269B",pot:"double_well",eta:.45,gamma:1.2,beta:.15,sigma:.08,iter:20,seed:777,desc:"Probability leaking between wells"},
123
- {name:"Spiral Galaxy",icon:"\uD83C\uDF00",pot:"spiral",eta:.6,gamma:.4,beta:.05,sigma:.12,iter:25,seed:2024,desc:"Galactic arm formation"},
124
- {name:"Chaos Edge",icon:"\u26A1",pot:"chaotic",eta:.8,gamma:1.8,beta:.3,sigma:.15,iter:30,seed:42,desc:"Right at the bifurcation boundary"},
125
- {name:"Crystal Growth",icon:"\uD83D\uDC8E",pot:"crystal",eta:.35,gamma:.5,beta:.02,sigma:.03,iter:15,seed:1337,desc:"Self-organizing lattice"},
126
- {name:"Calm Sea",icon:"\uD83C\uDF0A",pot:"mexican_hat",eta:.15,gamma:.1,beta:.01,sigma:.01,iter:5,seed:100,desc:"Pure potential, minimal noise"},
127
- {name:"Volcanic Eruption",icon:"\uD83C\uDF0B",pot:"volcano",eta:.7,gamma:1.5,beta:.25,sigma:.2,iter:35,seed:666,desc:"Catastrophic energy release"},
128
- {name:"Soliton Wave",icon:"\u3030",pot:"soliton",eta:.5,gamma:.6,beta:.08,sigma:.06,iter:18,seed:314,desc:"Standing wave interference"},
129
- {name:"Deep Noise",icon:"\uD83D\uDCE1",pot:"chaotic",eta:.3,gamma:.2,beta:.4,sigma:.25,iter:40,seed:999,desc:"Noise-dominated exploration"},
130
- {name:"Phase Lock",icon:"\uD83D\uDD12",pot:"double_well",eta:.9,gamma:2.0,beta:.01,sigma:.01,iter:50,seed:555,desc:"Extreme attractor sharpening"},
131
- {name:"Emergence",icon:"\uD83E\uDDEC",pot:"crystal",eta:.55,gamma:.8,beta:.12,sigma:.1,iter:22,seed:1618,desc:"Order from recursive feedback"},
132
  ];
133
 
 
134
  function Slider({label,value,min,max,step,onChange,color}){
135
- const pct=((value-min)/(max-min))*100;
136
  return(<div style={{marginBottom:7}}>
137
  <div style={{display:"flex",justifyContent:"space-between",marginBottom:2}}>
138
- <span style={{color:color||C,fontSize:9,letterSpacing:1,textTransform:"uppercase"}}>{label}</span>
139
- <span style={{color:"#fff",fontSize:9}}>{typeof value==="number"?value.toFixed(step<1?2:0):value}</span>
140
  </div>
141
- <div style={{position:"relative",height:4,background:"rgba(255,255,255,.05)",borderRadius:3}}>
142
- <div style={{position:"absolute",left:0,top:0,height:"100%",width:`${pct}%`,borderRadius:3,
143
- background:`linear-gradient(90deg,${color||C},${M})`,boxShadow:`0 0 6px ${(color||C)}20`}}/>
144
  <input type="range" min={min} max={max} step={step} value={value}
145
  onChange={e=>onChange(parseFloat(e.target.value))}
146
  style={{position:"absolute",top:-8,left:0,width:"100%",height:20,opacity:0,cursor:"pointer",margin:0}}/>
@@ -149,28 +229,29 @@ function Slider({label,value,min,max,step,onChange,color}){
149
  }
150
 
151
  function Stat({label,value,color}){
152
- return(<div style={{background:"var(--pn)",border:"1px solid var(--bd)",borderRadius:5,padding:"5px 8px",flex:1,minWidth:55}}>
 
153
  <div style={{fontSize:7,color:"#555",letterSpacing:1,textTransform:"uppercase"}}>{label}</div>
154
- <div style={{fontSize:12,color:color||C,fontWeight:700}}>{value}</div>
155
  </div>);
156
  }
157
 
158
- function Panel({children,title,style:s}){
159
- return(<div style={{background:"var(--pn)",border:"1px solid var(--bd)",borderRadius:8,padding:12,...s}}>
160
- {title&&<div style={{fontSize:8,color:"#555",letterSpacing:2,marginBottom:8,textTransform:"uppercase",
161
- borderBottom:"1px solid var(--bd)",paddingBottom:5}}>{title}</div>}
162
  {children}
163
  </div>);
164
  }
165
 
166
  function Histogram({histogram,bins,colorMode}){
167
  if(!histogram)return null;
168
- const maxVal=Math.max(...histogram);const w=260,h=65;
169
  return(<svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{display:"block"}}>
170
  {Array.from({length:bins},(_,i)=>{
171
  const bh=(histogram[i]/maxVal)*h*.88;const t=i/bins;
172
  const[r,g,b]=eColor(t,0,1,colorMode);
173
- return<rect key={i} x={i*(w/bins)} y={h-bh} width={w/bins-.4} height={bh} fill={`rgb(${r},${g},${b})`} opacity={.7}/>;
174
  })}
175
  </svg>);
176
  }
@@ -179,7 +260,7 @@ function BifurcationDiagram({potential,params,paramKey}){
179
  const cvRef=useRef(null);const w=260,h=100;
180
  useEffect(()=>{
181
  const cv=cvRef.current;if(!cv)return;const ctx=cv.getContext("2d");
182
- ctx.fillStyle="rgba(6,6,12,.95)";ctx.fillRect(0,0,w,h);
183
  const samples=50,probes=6,rng=new RNG(params.seed);
184
  const ranges={eta:[0,1],gamma:[0,2],beta:[0,.5],sigma:[0,.3]};
185
  const[lo,hi]=ranges[paramKey]||[0,1];
@@ -195,22 +276,22 @@ function BifurcationDiagram({potential,params,paramKey}){
195
  all.forEach(({x,vals})=>vals.forEach(v=>{
196
  const px=(x/samples)*w,py=h-((v-mn)/(mx-mn+1e-10))*h*.88-h*.05;
197
  const t=(v-mn)/(mx-mn+1e-10);
198
- ctx.fillStyle=`rgba(0,${Math.floor(255*(1-t))},255,.45)`;ctx.fillRect(px,py,2,2);
199
  }));
200
  const curPct=(params[paramKey]-lo)/(hi-lo);
201
- ctx.strokeStyle="rgba(255,0,255,.5)";ctx.lineWidth=1;ctx.setLineDash([3,3]);
202
  ctx.beginPath();ctx.moveTo(curPct*w,0);ctx.lineTo(curPct*w,h);ctx.stroke();ctx.setLineDash([]);
203
- ctx.fillStyle="rgba(0,255,255,.25)";ctx.font="7px 'JetBrains Mono'";
204
  ctx.fillText(paramKey+" \u2192",w-40,h-2);
205
  },[potential,params,paramKey]);
206
- return<canvas ref={cvRef} width={w} height={h} style={{width:"100%",borderRadius:4,border:"1px solid var(--bd)"}}/>;
207
  }
208
 
209
  function LyapunovMini({params,potential}){
210
  const cvRef=useRef(null);const w=260,h=80;
211
  useEffect(()=>{
212
  const cv=cvRef.current;if(!cv)return;const ctx=cv.getContext("2d");
213
- ctx.fillStyle="rgba(6,6,12,.95)";ctx.fillRect(0,0,w,h);
214
  const steps=40,eps=.005;
215
  for(let s=0;s<steps;s++){
216
  const etaVal=s/steps;
@@ -222,18 +303,18 @@ function LyapunovMini({params,potential}){
222
  const lyap=diff>0?Math.log(diff/eps):0;
223
  const norm=Math.max(0,Math.min(1,(lyap+5)/10));
224
  const px=(s/steps)*w,bh=norm*h*.85;
225
- ctx.fillStyle=lyap>0?`rgba(255,0,${Math.floor(255*(1-norm))},${.4+norm*.4})`:`rgba(0,${Math.floor(255*norm)},255,.5)`;
226
  ctx.fillRect(px,h-bh,w/steps-.5,bh);
227
  }
228
  const pct=params.eta;
229
- ctx.strokeStyle="rgba(255,255,0,.5)";ctx.lineWidth=1;ctx.setLineDash([2,2]);
230
  ctx.beginPath();ctx.moveTo(pct*w,0);ctx.lineTo(pct*w,h);ctx.stroke();ctx.setLineDash([]);
231
  const zeroY=h-(5/10)*h*.85;
232
- ctx.strokeStyle="rgba(255,255,255,.12)";ctx.lineWidth=.5;ctx.setLineDash([4,4]);
233
  ctx.beginPath();ctx.moveTo(0,zeroY);ctx.lineTo(w,zeroY);ctx.stroke();ctx.setLineDash([]);
234
- ctx.fillStyle="rgba(255,255,255,.2)";ctx.font="7px 'JetBrains Mono'";ctx.fillText("\u03BB=0",w-28,zeroY-2);
235
  },[params,potential]);
236
- return<canvas ref={cvRef} width={w} height={h} style={{width:"100%",borderRadius:4,border:"1px solid var(--bd)"}}/>;
237
  }
238
 
239
  function Surface3D({H,size,colorMode}){
@@ -241,7 +322,7 @@ function Surface3D({H,size,colorMode}){
241
  useEffect(()=>{
242
  if(!H)return;const cv=cvRef.current;if(!cv)return;
243
  const ctx=cv.getContext("2d");
244
- ctx.fillStyle="rgba(6,6,12,.98)";ctx.fillRect(0,0,w,h);
245
  const step=4,rows=Math.floor(size/step),cols=Math.floor(size/step);
246
  let mn=Infinity,mx=-Infinity;
247
  for(let i=0;i<H.length;i++){if(H[i]<mn)mn=H[i];if(H[i]>mx)mx=H[i]}
@@ -258,12 +339,12 @@ function Surface3D({H,size,colorMode}){
258
  const[x2,y2]=proj(i+1,j+1,H[((i+1)*step)*size+((j+1)*step)]);
259
  const[x3,y3]=proj(i,j+1,H[(i*step)*size+((j+1)*step)]);
260
  const[r,g,b]=eColor(t0,0,1,colorMode);
261
- ctx.fillStyle=`rgba(${r},${g},${b},.3)`;ctx.strokeStyle=`rgba(${r},${g},${b},.12)`;ctx.lineWidth=.5;
262
  ctx.beginPath();ctx.moveTo(x0,y0);ctx.lineTo(x1,y1);ctx.lineTo(x2,y2);ctx.lineTo(x3,y3);ctx.closePath();
263
  ctx.fill();ctx.stroke();
264
  }
265
  },[H,size,colorMode]);
266
- return<canvas ref={cvRef} width={w} height={h} style={{width:"100%",borderRadius:4,border:"1px solid var(--bd)"}}/>;
267
  }
268
 
269
  function Toast({message,onDone}){
@@ -272,7 +353,7 @@ function Toast({message,onDone}){
272
  }
273
 
274
  // ═══════════════════════════════════════
275
- // MAIN APP
276
  // ═══════════════════════════════════════
277
  function App(){
278
  const canvasRef=useRef(null),trajRef=useRef(null),animRef=useRef(null),compareRef=useRef(null),autoRef=useRef(null);
@@ -280,13 +361,13 @@ function App(){
280
 
281
  const[animating,setAnimating]=useState(false),[animStep,setAnimStep]=useState(0);
282
  const[showTrails,setShowTrails]=useState(true),[showGrid,setShowGrid]=useState(true),[showContours,setShowContours]=useState(true);
283
- const[colorMode,setColorMode]=useState("cyan_magenta"),[potential,setPotential]=useState("double_well");
284
  const[bifParam,setBifParam]=useState("eta"),[activeTab,setActiveTab]=useState("presets");
285
  const[stats,setStats]=useState({min:0,max:0,mean:0,variance:0,entropy:0,histogram:null,bins:60,skewness:0,kurtosis:0});
286
  const[fieldData,setFieldData]=useState(null),[fieldSize,setFieldSize]=useState(0);
287
  const[toast,setToast]=useState(null),[fps,setFps]=useState(0),[renderTime,setRenderTime]=useState(0);
288
  const[isFullscreen,setIsFullscreen]=useState(false),[compareMode,setCompareMode]=useState(false);
289
- const[autoDiscovery,setAutoDiscovery]=useState(false);
290
 
291
  const[params,setParams]=useState({eta:.40,gamma:.30,beta:.10,sigma:.05,iterations:12,seed:42,trajectoryCount:24,trajectoryLength:300});
292
  const res=180,cvSize=520;
@@ -297,6 +378,12 @@ function App(){
297
 
298
  const showToast=useCallback(msg=>setToast(msg),[]);
299
 
 
 
 
 
 
 
300
  const render=useCallback((overrideIter)=>{
301
  const t0=performance.now();
302
  const cv=canvasRef.current,tv=trajRef.current;if(!cv||!tv)return;
@@ -311,12 +398,12 @@ function App(){
311
  const[r,g,b]=eColor(H[i*size+j],mn,mx,colorMode);
312
  const px=Math.floor(j*scale),py=Math.floor(i*scale),pw=Math.ceil(scale),ph=Math.ceil(scale);
313
  for(let dy=0;dy<ph&&py+dy<ch;dy++)for(let dx=0;dx<pw&&px+dx<cw;dx++){
314
- const idx=((py+dy)*cw+(px+dx))*4;img.data[idx]=r;img.data[idx+1]=g;img.data[idx+2]=b;img.data[idx+3]=220;
315
  }
316
  }
317
  ctx.putImageData(img,0,0);
318
 
319
- if(showGrid){ctx.strokeStyle="rgba(0,255,255,.04)";ctx.lineWidth=.5;const gs=cw/12;
320
  for(let g=0;g<=12;g++){ctx.beginPath();ctx.moveTo(g*gs,0);ctx.lineTo(g*gs,ch);ctx.stroke();
321
  ctx.beginPath();ctx.moveTo(0,g*gs);ctx.lineTo(cw,g*gs);ctx.stroke()}}
322
  if(showContours){const levels=10;
@@ -324,7 +411,7 @@ function App(){
324
  for(let i=0;i<size-1;i++)for(let j=0;j<size-1;j++){
325
  const v00=H[i*size+j],v10=H[(i+1)*size+j],v01=H[i*size+j+1];
326
  if((v00<th)!==(v10<th)||(v00<th)!==(v01<th)){
327
- ctx.fillStyle="rgba(255,255,255,.03)";
328
  ctx.fillRect(Math.floor(j*scale),Math.floor(i*scale),Math.ceil(scale),Math.ceil(scale))}}}}
329
 
330
  tctx.clearRect(0,0,cw,ch);
@@ -332,16 +419,21 @@ function App(){
332
  for(let t=0;t<params.trajectoryCount;t++){
333
  const si=Math.floor(rng.next()*(size-4))+2,sj=Math.floor(rng.next()*(size-4))+2;
334
  const pts=trace(H,size,si,sj,params.trajectoryLength,.8);if(pts.length<3)continue;
 
335
  for(let pi=1;pi<pts.length;pi++){
336
- const alpha=1-(pi/pts.length);const hue=(t/params.trajectoryCount)*60+160;
337
- tctx.strokeStyle=`hsla(${hue},100%,70%,${alpha*.6})`;tctx.lineWidth=1.5*alpha+.3;
 
 
338
  tctx.beginPath();tctx.moveTo(pts[pi-1][1]*scale,pts[pi-1][0]*scale);
339
  tctx.lineTo(pts[pi][1]*scale,pts[pi][0]*scale);tctx.stroke();
340
  }
341
- tctx.shadowBlur=4;tctx.fillStyle=C;tctx.shadowColor=C;
 
342
  tctx.beginPath();tctx.arc(pts[0][1]*scale,pts[0][0]*scale,2.5,0,Math.PI*2);tctx.fill();
343
- if(pts.length>2){const last=pts[pts.length-1];tctx.fillStyle=M;tctx.shadowColor=M;
344
- tctx.beginPath();tctx.arc(last[1]*scale,last[0]*scale,2,0,Math.PI*2);tctx.fill()}
 
345
  tctx.shadowBlur=0;
346
  }}
347
 
@@ -354,7 +446,7 @@ function App(){
354
  const[r,g,b]=eColor(f2.H[i*size+j],st2.min,st2.max,colorMode);
355
  const px=Math.floor(j*scale),py=Math.floor(i*scale),pw=Math.ceil(scale),ph=Math.ceil(scale);
356
  for(let dy=0;dy<ph&&py+dy<ch;dy++)for(let dx=0;dx<pw&&px+dx<cw;dx++){
357
- const idx=((py+dy)*cw+(px+dx))*4;img2.data[idx]=r;img2.data[idx+1]=g;img2.data[idx+2]=b;img2.data[idx+3]=220;
358
  }
359
  }
360
  cctx.putImageData(img2,0,0);
@@ -381,7 +473,7 @@ function App(){
381
  autoRef.current=setInterval(()=>{
382
  const pr=PRESETS[idx%PRESETS.length];
383
  setParams(p=>({...p,eta:pr.eta,gamma:pr.gamma,beta:pr.beta,sigma:pr.sigma,iterations:pr.iter,seed:pr.seed}));
384
- setPotential(pr.pot);showToast(`${pr.icon} ${pr.name}`);idx++;
385
  },3000);
386
  return()=>clearInterval(autoRef.current);
387
  },[autoDiscovery]);
@@ -405,7 +497,7 @@ function App(){
405
  const shareState=useCallback(()=>{
406
  const hash=encodeState(params,potential,colorMode);
407
  const url=window.location.origin+window.location.pathname+"#"+hash;
408
- navigator.clipboard.writeText(url).then(()=>showToast("\u2197 Link copied!"))
409
  .catch(()=>{window.location.hash=hash;showToast("URL updated")});
410
  },[params,potential,colorMode]);
411
 
@@ -413,15 +505,15 @@ function App(){
413
  const cv=canvasRef.current,tv=trajRef.current;if(!cv)return;
414
  const exp=document.createElement("canvas");exp.width=cv.width;exp.height=cv.height;
415
  const ectx=exp.getContext("2d");ectx.drawImage(cv,0,0);if(tv)ectx.drawImage(tv,0,0);
416
- ectx.fillStyle="rgba(0,255,255,.35)";ectx.font="bold 9px 'JetBrains Mono'";
417
- ectx.fillText("ZKAEDI PRIME",8,cv.height-8);
418
- const link=document.createElement("a");link.download=`zkaedi_${potential}_s${params.seed}.png`;
419
  link.href=exp.toDataURL("image/png");link.click();showToast("\u2913 PNG exported!");
420
  },[potential,params.seed]);
421
 
422
  const applyPreset=useCallback(pr=>{
423
  setParams(p=>({...p,eta:pr.eta,gamma:pr.gamma,beta:pr.beta,sigma:pr.sigma,iterations:pr.iter,seed:pr.seed}));
424
- setPotential(pr.pot);showToast(`${pr.icon} ${pr.name}`);
425
  },[]);
426
 
427
  const potentials=[
@@ -430,33 +522,41 @@ function App(){
430
  {id:"mexican_hat",label:"SOMBRERO",icon:"\uD83C\uDFA9"},{id:"volcano",label:"VOLCANO",icon:"\uD83C\uDF0B"},
431
  {id:"soliton",label:"SOLITON",icon:"\u3030"},
432
  ];
433
- const colors=[{id:"cyan_magenta",label:"PRIME"},{id:"plasma",label:"PLASMA"},{id:"inferno",label:"INFERNO"},{id:"thermal",label:"THERMAL"}];
434
- const tabs=[{id:"presets",label:"\u2605 PRESETS"},{id:"params",label:"DYNAMICS"},{id:"phase",label:"PHASE"},{id:"analysis",label:"ANALYSIS"}];
435
  const bifParams=[{id:"eta",label:"\u03B7"},{id:"gamma",label:"\u03B3"},{id:"beta",label:"\u03B2"},{id:"sigma",label:"\u03C3"}];
436
 
437
  return(
438
  <div className={isFullscreen?"fullscreen-host":""} style={{minHeight:"100vh",display:"flex",flexDirection:"column"}}>
439
- <div style={{position:"fixed",inset:0,background:"repeating-linear-gradient(0deg,rgba(0,255,255,.01) 0px,transparent 1px,transparent 3px)",pointerEvents:"none",zIndex:100}}/>
 
440
 
441
- <header style={{padding:"10px 16px",borderBottom:"1px solid rgba(0,255,255,.1)",
442
- background:"linear-gradient(180deg,rgba(0,255,255,.03) 0%,transparent 100%)",
 
443
  display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:8}}>
444
- <div style={{display:"flex",alignItems:"center",gap:8}}>
445
- <div style={{width:30,height:30,borderRadius:6,background:`linear-gradient(135deg,${C}20,${M}20)`,
446
- border:`1px solid ${C}30`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:14,
447
- animation:"glowPulse 3s infinite"}}>🔱</div>
 
 
448
  <div>
449
- <div style={{fontSize:12,fontWeight:800,letterSpacing:3,color:C,fontFamily:"'Orbitron',monospace",
450
- textShadow:`0 0 20px ${C}40`}}>ZKAEDI PRIME</div>
451
- <div style={{fontSize:7,letterSpacing:2,color:"#444"}}>PHASE PORTRAIT VISUALIZER v2.0</div>
 
 
 
 
452
  </div>
453
  </div>
454
  <div style={{display:"flex",gap:5,alignItems:"center",flexWrap:"wrap"}}>
455
- {animating&&<div style={{fontSize:8,color:M,letterSpacing:2,animation:"pulse 1s infinite"}}>\u25C9 t={animStep}</div>}
456
- {autoDiscovery&&<div style={{fontSize:8,color:A,letterSpacing:1,animation:"pulse 2s infinite"}}>\u25C9 AUTO</div>}
457
- <div style={{fontSize:7,padding:"2px 6px",borderRadius:3,background:`${C}08`,border:`1px solid ${C}18`,color:C}}>{res}\u00D7{res}</div>
458
- <div style={{fontSize:7,padding:"2px 6px",borderRadius:3,background:`${G}08`,border:`1px solid ${G}18`,color:G}}>{renderTime}ms</div>
459
- <div style={{fontSize:7,padding:"2px 6px",borderRadius:3,background:`${V}08`,border:`1px solid ${V}18`,color:V}}>{fps}fps</div>
460
  </div>
461
  </header>
462
 
@@ -465,84 +565,87 @@ function App(){
465
  <div style={{flex:"1 1 520px",display:"flex",flexDirection:"column",gap:8,maxWidth:compareMode?1100:580}}>
466
  <div style={{display:"flex",gap:3,flexWrap:"wrap"}}>
467
  {potentials.map(p=>(
468
- <button key={p.id} onClick={()=>setPotential(p.id)} style={{
469
- padding:"4px 8px",fontSize:8,letterSpacing:1,
470
- background:potential===p.id?`${C}15`:"rgba(255,255,255,.02)",
471
- border:`1px solid ${potential===p.id?C+"45":"rgba(255,255,255,.05)"}`,
472
- borderRadius:4,color:potential===p.id?C:"#555"
473
  }}>{p.icon} {p.label}</button>
474
  ))}
475
  </div>
476
 
477
  <div style={{display:"flex",gap:8}}>
478
- <div style={{position:"relative",width:compareMode?"50%":"100%",maxWidth:cvSize,aspectRatio:"1",
479
- borderRadius:8,overflow:"hidden",border:`1px solid rgba(0,255,255,.12)`,
480
- boxShadow:`0 0 40px rgba(0,255,255,.05),inset 0 0 60px rgba(0,0,0,.5)`}}>
 
 
481
  <canvas ref={canvasRef} width={cvSize} height={cvSize} style={{width:"100%",height:"100%",display:"block"}}/>
482
  <canvas ref={trajRef} width={cvSize} height={cvSize}
483
  style={{position:"absolute",top:0,left:0,width:"100%",height:"100%"}}/>
484
  {animating&&<div style={{position:"absolute",left:0,right:0,height:2,
485
- background:`linear-gradient(90deg,transparent,${C}60,transparent)`,
486
- animation:"scan 2s linear infinite",pointerEvents:"none"}}/>}
487
- {["top-left","top-right","bottom-left","bottom-right"].map(c=>{
488
- const[v,h]=c.split("-");
489
- return<div key={c} style={{position:"absolute",[v]:0,[h]:0,width:16,height:16,
490
- [`border${v==="top"?"Top":"Bottom"}`]:`2px solid ${C}40`,
491
- [`border${h==="left"?"Left":"Right"}`]:`2px solid ${C}40`}}/>;
492
- })}
493
- <div style={{position:"absolute",top:6,left:8,fontSize:7,color:`${C}50`}}>t={params.iterations}</div>
494
- <div style={{position:"absolute",top:6,right:8,fontSize:7,color:`${M}50`}}>EVOLVED</div>
 
 
 
495
  </div>
496
 
497
  {compareMode&&(
498
  <div style={{position:"relative",width:"50%",maxWidth:cvSize,aspectRatio:"1",
499
- borderRadius:8,overflow:"hidden",border:`1px solid rgba(255,0,255,.12)`,
500
- boxShadow:`0 0 40px rgba(255,0,255,.05),inset 0 0 60px rgba(0,0,0,.5)`}}>
501
  <canvas ref={compareRef} width={cvSize} height={cvSize} style={{width:"100%",height:"100%",display:"block"}}/>
502
- {["top-left","top-right","bottom-left","bottom-right"].map(c=>{
503
- const[v,h]=c.split("-");
504
- return<div key={c} style={{position:"absolute",[v]:0,[h]:0,width:16,height:16,
505
- [`border${v==="top"?"Top":"Bottom"}`]:`2px solid ${M}40`,
506
- [`border${h==="left"?"Left":"Right"}`]:`2px solid ${M}40`}}/>;
507
- })}
508
- <div style={{position:"absolute",top:6,left:8,fontSize:7,color:`${M}50`}}>t=1</div>
509
- <div style={{position:"absolute",top:6,right:8,fontSize:7,color:`${M}50`}}>BASE</div>
510
  </div>
511
  )}
512
  </div>
513
 
514
  <div style={{display:"flex",gap:4,flexWrap:"wrap"}}>
515
- <Stat label="Min" value={stats.min.toFixed(2)} color={C}/>
516
- <Stat label="Max" value={stats.max.toFixed(2)} color={M}/>
517
- <Stat label="\u03BC" value={stats.mean.toFixed(2)}/>
518
- <Stat label="\u03C3\u00B2" value={stats.variance.toFixed(2)} color={A}/>
519
- <Stat label="S" value={stats.entropy.toFixed(2)} color={V}/>
520
- <Stat label="Skew" value={stats.skewness.toFixed(2)} color={G}/>
521
- <Stat label="Kurt" value={stats.kurtosis.toFixed(2)} color={R}/>
522
  </div>
523
 
524
- <Panel title="\u2B21 Energy Distribution">
525
  <Histogram histogram={stats.histogram} bins={stats.bins} colorMode={colorMode}/>
526
  <div style={{display:"flex",justifyContent:"space-between",marginTop:2}}>
527
  <span style={{fontSize:7,color:"#444"}}>{stats.min.toFixed(1)}</span>
528
  <span style={{fontSize:7,color:"#444"}}>{stats.max.toFixed(1)}</span>
529
  </div>
530
- </Panel>
531
 
532
- <Panel title="\u25C7 Isometric Surface">
533
  <Surface3D H={fieldData} size={fieldSize} colorMode={colorMode}/>
534
- </Panel>
535
  </div>
536
 
537
  {/* RIGHT */}
538
  <div style={{flex:"0 0 275px",minWidth:245,display:"flex",flexDirection:"column",gap:8}}>
539
- <div style={{display:"flex",gap:2,background:"var(--pn)",borderRadius:5,padding:2,border:"1px solid var(--bd)"}}>
 
540
  {tabs.map(t=>(
541
  <button key={t.id} onClick={()=>setActiveTab(t.id)} style={{
542
- flex:1,padding:"6px 0",fontSize:8,letterSpacing:1,borderRadius:3,
543
- background:activeTab===t.id?`${C}12`:"transparent",
544
- border:activeTab===t.id?`1px solid ${C}25`:"1px solid transparent",
545
- color:activeTab===t.id?C:"#444"
 
546
  }}>{t.label}</button>
547
  ))}
548
  </div>
@@ -550,15 +653,14 @@ function App(){
550
  {activeTab==="presets"&&(
551
  <div style={{display:"flex",flexDirection:"column",gap:4,maxHeight:520,overflowY:"auto"}}>
552
  {PRESETS.map((pr,i)=>(
553
- <button key={i} onClick={()=>applyPreset(pr)} style={{
554
- padding:"8px 10px",textAlign:"left",borderRadius:6,
555
- background:"var(--pn)",border:"1px solid var(--bd)",animation:`fadeIn .3s ${i*.04}s both`
556
  }}>
557
  <div style={{display:"flex",alignItems:"center",gap:8}}>
558
  <span style={{fontSize:16}}>{pr.icon}</span>
559
  <div>
560
- <div style={{fontSize:10,color:C,fontWeight:700,letterSpacing:1}}>{pr.name}</div>
561
- <div style={{fontSize:8,color:"#555",marginTop:1}}>{pr.desc}</div>
562
  <div style={{fontSize:7,color:"#333",marginTop:2}}>
563
  {pr.pot} | \u03B7={pr.eta} \u03B3={pr.gamma} \u03B2={pr.beta} \u03C3={pr.sigma}
564
  </div>
@@ -570,31 +672,32 @@ function App(){
570
  )}
571
 
572
  {activeTab==="params"&&<>
573
- <Panel title="\u27C1 Hamiltonian Coupling">
574
  <Slider label="\u03B7 Recursive Coupling" value={params.eta} min={0} max={1} step={.01} onChange={up("eta")}/>
575
- <Slider label="\u03B3 Attractor Sharpening" value={params.gamma} min={0} max={2} step={.01} onChange={up("gamma")} color={M}/>
576
- <Slider label="\u03B2 Noise Amplitude" value={params.beta} min={0} max={.5} step={.01} onChange={up("beta")} color={A}/>
577
- <Slider label="\u03C3 Exploration" value={params.sigma} min={0} max={.3} step={.01} onChange={up("sigma")} color={V}/>
578
- </Panel>
579
- <Panel title="\u27C1 Evolution">
580
  <Slider label="Iterations" value={params.iterations} min={1} max={50} step={1} onChange={up("iterations")}/>
581
- <Slider label="Seed" value={params.seed} min={1} max={9999} step={1} onChange={up("seed")} color={V}/>
582
- </Panel>
583
  </>}
584
 
585
  {activeTab==="phase"&&<>
586
- <Panel title="\u27C1 Trajectories">
587
  <Slider label="Count" value={params.trajectoryCount} min={0} max={80} step={1} onChange={up("trajectoryCount")}/>
588
- <Slider label="Length" value={params.trajectoryLength} min={10} max={1000} step={10} onChange={up("trajectoryLength")} color={M}/>
589
- </Panel>
590
- <Panel title="\u27C1 Visualization">
591
  <div style={{display:"flex",gap:3,marginBottom:8,flexWrap:"wrap"}}>
592
  {colors.map(c=>(
593
- <button key={c.id} onClick={()=>setColorMode(c.id)} style={{
594
- flex:1,padding:"5px 0",fontSize:8,letterSpacing:1,borderRadius:3,
595
- background:colorMode===c.id?`${C}15`:"rgba(255,255,255,.02)",
596
- border:`1px solid ${colorMode===c.id?C+"45":"var(--bd)"}`,
597
- color:colorMode===c.id?C:"#555"}}>{c.label}</button>
 
598
  ))}
599
  </div>
600
  <div style={{display:"flex",gap:4}}>
@@ -602,78 +705,82 @@ function App(){
602
  ["GRID",showGrid,()=>setShowGrid(g=>!g)],
603
  ["ISO",showContours,()=>setShowContours(c=>!c)]
604
  ].map(([l,v,fn])=>(
605
- <button key={l} onClick={fn} style={{flex:1,padding:"6px 0",fontSize:8,letterSpacing:1,borderRadius:4,
606
- background:v?`${C}10`:"rgba(255,255,255,.02)",border:`1px solid ${v?C+"30":"var(--bd)"}`,color:v?C:"#444"
 
607
  }}>{v?"\u25C9":"\u25CB"} {l}</button>
608
  ))}
609
  </div>
610
- </Panel>
611
  </>}
612
 
613
  {activeTab==="analysis"&&<>
614
- <Panel title="\u27C1 Bifurcation Diagram">
615
  <div style={{display:"flex",gap:2,marginBottom:6}}>
616
  {bifParams.map(b=>(
617
- <button key={b.id} onClick={()=>setBifParam(b.id)} style={{flex:1,padding:"4px 0",fontSize:9,borderRadius:3,
618
- background:bifParam===b.id?`${C}15`:"rgba(255,255,255,.02)",
619
- border:`1px solid ${bifParam===b.id?C+"45":"var(--bd)"}`,color:bifParam===b.id?C:"#555"}}>{b.label}</button>
 
620
  ))}
621
  </div>
622
  <BifurcationDiagram potential={potential} params={params} paramKey={bifParam}/>
623
- <div style={{fontSize:7,color:"#444",marginTop:3,textAlign:"center"}}><span style={{color:`${M}60`}}>|</span> = current value</div>
624
- </Panel>
625
- <Panel title="\u03BB Lyapunov Exponent vs \u03B7">
626
  <LyapunovMini params={params} potential={potential}/>
627
  <div style={{fontSize:7,color:"#444",marginTop:3}}>
628
- <span style={{color:`${R}80`}}>\u25A0</span> chaotic <span style={{color:`${C}80`,marginLeft:6}}>\u25A0</span> stable <span style={{color:`${A}80`,marginLeft:6}}>|</span> current
629
  </div>
630
- </Panel>
631
- <Panel title="\u27C1 Metrics">
632
  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:4}}>
633
- {[["RANGE",(stats.max-stats.min).toFixed(2),C],["STD DEV",Math.sqrt(Math.max(0,stats.variance)).toFixed(2),M],
634
- ["ENTROPY",stats.entropy.toFixed(3),V],["CV",stats.mean!==0?(Math.sqrt(Math.max(0,stats.variance))/Math.abs(stats.mean)).toFixed(3):"\u2014",A]
635
  ].map(([l,v,c])=>(
636
- <div key={l} style={{background:`${c}08`,borderRadius:4,padding:6,textAlign:"center"}}>
 
637
  <div style={{fontSize:7,color:"#444",letterSpacing:1}}>{l}</div>
638
  <div style={{fontSize:11,color:c,fontWeight:700,marginTop:1}}>{v}</div>
639
  </div>
640
  ))}
641
  </div>
642
- </Panel>
643
- <Panel title="\u27C1 Equation">
644
  <div style={{fontSize:8,color:"#777",lineHeight:1.8}}>
645
- <span style={{color:C}}>H<sub>t</sub></span>(x,y) = H<sub>0</sub> + <span style={{color:C}}>\u03B7</span>\u00B7H<sub>t-1</sub>\u00B7<span style={{color:M}}>\u03C3</span>(<span style={{color:M}}>\u03B3</span>\u00B7H<sub>t-1</sub>) + <span style={{color:V}}>\u03B5</span>\u00B7\uD835\uDCA9(0,1+<span style={{color:A}}>\u03B2</span>|H<sub>t-1</sub>|)
646
  </div>
647
- </Panel>
648
  </>}
649
 
 
650
  <div style={{display:"flex",flexDirection:"column",gap:5,marginTop:2}}>
651
- <button onClick={()=>{setAnimStep(0);setAnimating(true)}} disabled={animating} style={{
652
- padding:"10px 0",fontSize:10,fontWeight:800,letterSpacing:3,
653
- background:animating?"rgba(255,255,255,.03)":`linear-gradient(135deg,${C}18,${M}18)`,
654
- border:`1px solid ${animating?"rgba(255,255,255,.06)":C+"40"}`,borderRadius:6,
655
- color:animating?"#444":C,cursor:animating?"not-allowed":"pointer",textTransform:"uppercase"
656
- }}>{animating?`\u25CE t=${animStep}\u2026`:"\u25B6 EVOLVE FIELD"}</button>
 
657
 
658
  <div style={{display:"flex",gap:4}}>
659
- <button onClick={()=>up("seed")(Math.floor(Math.random()*9999))} style={{flex:1,padding:"8px 0",fontSize:9,letterSpacing:1,background:`${M}08`,border:`1px solid ${M}22`,borderRadius:5,color:M}}>\u27F3 RANDOM</button>
660
- <button onClick={shareState} style={{flex:1,padding:"8px 0",fontSize:9,letterSpacing:1,background:`${G}08`,border:`1px solid ${G}22`,borderRadius:5,color:G}}>\u2197 SHARE</button>
661
- <button onClick={exportPNG} style={{flex:1,padding:"8px 0",fontSize:9,letterSpacing:1,background:`${V}08`,border:`1px solid ${V}22`,borderRadius:5,color:V}}>\u2913 PNG</button>
662
  </div>
663
  <div style={{display:"flex",gap:4}}>
664
- <button onClick={()=>setAutoDiscovery(d=>!d)} style={{flex:1,padding:"8px 0",fontSize:9,letterSpacing:1,
665
- background:autoDiscovery?`${A}15`:`${A}08`,border:`1px solid ${autoDiscovery?A+"45":A+"22"}`,borderRadius:5,
666
- color:autoDiscovery?A:"#666"}}>{autoDiscovery?"\u25A0 STOP":"\u25B6 DISCOVER"}</button>
667
- <button onClick={()=>setCompareMode(c=>!c)} style={{flex:1,padding:"8px 0",fontSize:9,letterSpacing:1,
668
- background:compareMode?`${C}15`:`${C}08`,border:`1px solid ${compareMode?C+"45":C+"22"}`,borderRadius:5,
669
- color:compareMode?C:"#666"}}>{compareMode?"\u25C9":"\u25CB"} COMPARE</button>
670
- <button onClick={()=>setIsFullscreen(f=>!f)} style={{flex:1,padding:"8px 0",fontSize:9,letterSpacing:1,
671
- background:"rgba(255,255,255,.03)",border:"1px solid var(--bd)",borderRadius:5,color:"#666"
672
- }}>{isFullscreen?"\u2715 EXIT":"\u26F6 FULL"}</button>
673
  </div>
674
  </div>
675
 
676
- <Panel title="\u2328 SHORTCUTS" style={{marginTop:2}}>
677
  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:3,fontSize:8,color:"#555"}}>
678
  {[["Space","Evolve"],["R","Random"],["S","Share"],["E","Export"],
679
  ["F","Fullscreen"],["T","Trails"],["G","Grid"],["D","Discover"],
@@ -684,11 +791,14 @@ function App(){
684
  </div>
685
  ))}
686
  </div>
687
- </Panel>
688
-
689
- <div style={{paddingTop:6,borderTop:"1px solid var(--bd)",fontSize:7,color:"#222",letterSpacing:2,textAlign:"center",lineHeight:1.8}}>
690
- ZKAEDI PRIME FRAMEWORK<br/>
691
- <span style={{color:`${C}25`}}>PUBLISH THE OUTPUT</span> \u00B7 <span style={{color:`${M}25`}}>PROTECT THE ENGINE</span>
 
 
 
692
  </div>
693
  </div>
694
  </div>
@@ -701,4 +811,4 @@ function App(){
701
  ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
702
  </script>
703
  </body>
704
- </html>
 
3
  <head>
4
  <meta charset="UTF-8"/>
5
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
6
+ <title>🔱 ZKAEDI PRIME — Phase Portrait Visualizer ⚔ KATANA</title>
7
+ <meta name="description" content="Interactive visualization of recursively coupled Hamiltonian dynamics. Katana Edition — razor-edge cyberpunk aesthetic."/>
8
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
9
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700;800&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet"/>
10
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
 
12
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.9/babel.min.js"></script>
13
  <style>
14
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
15
+ :root{
16
+ --c:#FF003C;--m:#00FF9D;--dk:#020205;--steel:#e2e2e2;--orchid:#BC00FF;
17
+ --pn:rgba(0,0,0,.8);--bd:rgba(255,0,60,.2);
18
+ --v:#BC00FF;--g:#00FF9D;--a:#FF6B00;--r:#FF003C;
19
+ }
20
+ html,body,#root{height:100%;background:var(--dk);color:var(--steel);overflow-x:hidden}
21
  body{font-family:'JetBrains Mono',monospace;font-size:12px}
22
+ ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--dk)}
23
+ ::-webkit-scrollbar-thumb{background:rgba(255,0,60,.3);border-radius:2px}
24
+
25
+ @keyframes blade-shimmer{0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)}}
26
+ @keyframes slash-in{0%{clip-path:inset(0 100% 0 0);opacity:0}100%{clip-path:inset(0 0 0 0);opacity:1}}
27
+ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
28
  @keyframes scan{0%{top:-2px}100%{top:100%}}
29
+ @keyframes glitch-cut{
30
+ 0%{clip-path:inset(0 0 0 0)}
31
+ 5%{clip-path:inset(40% 0 30% 0);transform:translateX(4px)}
32
+ 10%{clip-path:inset(10% 0 60% 0);transform:translateX(-3px)}
33
+ 15%{clip-path:inset(70% 0 5% 0);transform:translateX(2px)}
34
+ 20%,100%{clip-path:inset(0 0 0 0);transform:translateX(0)}
35
+ }
36
  @keyframes recording{0%,100%{opacity:1}50%{opacity:.3}}
37
+ @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
38
+ @keyframes glow-crimson{0%,100%{box-shadow:0 0 12px rgba(255,0,60,.15)}50%{box-shadow:0 0 28px rgba(255,0,60,.35)}}
39
+
40
+ button{font-family:inherit;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}
41
+ button:hover{filter:brightness(1.25);transform:translateY(-1px)}
42
+ button:active{transform:scale(.97) translateY(0)}
43
+
44
+ .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 24px;
45
+ border-radius:2px;background:rgba(255,0,60,.12);border:1px solid rgba(255,0,60,.4);
46
+ color:var(--c);font-size:11px;letter-spacing:2px;z-index:200;animation:slash-in .3s;
47
+ backdrop-filter:blur(12px);clip-path:polygon(2% 0,100% 0,98% 100%,0 100%)}
48
+
49
+ .kbd{display:inline-block;padding:1px 5px;border-radius:2px;background:rgba(255,0,60,.06);
50
+ border:1px solid rgba(255,0,60,.18);font-size:9px;color:#777;margin:0 2px;font-family:inherit}
51
+
52
  .fullscreen-host{position:fixed;inset:0;z-index:300;background:var(--dk);overflow:auto}
53
+
54
+ .panel-katana{
55
+ background:var(--pn);border:1px solid var(--bd);border-radius:2px;padding:12px;
56
+ position:relative;overflow:hidden;
57
+ clip-path:polygon(0 0,96% 0,100% 12%,100% 100%,4% 100%,0 88%);
58
+ transition:all .3s cubic-bezier(.4,0,.2,1);
59
+ }
60
+ .panel-katana::before{
61
+ content:"";position:absolute;top:0;left:0;width:100%;height:2px;
62
+ background:linear-gradient(90deg,transparent,var(--c),transparent);
63
+ animation:blade-shimmer 4s infinite;z-index:1;
64
+ }
65
+ .panel-katana:hover{border-color:rgba(255,0,60,.4)}
66
+
67
+ .glitch-active{animation:glitch-cut .4s ease-out}
68
+
69
+ /* Katana button shape */
70
+ .btn-katana{
71
+ clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
72
+ background:var(--dk);border:1px solid var(--c);color:var(--steel);
73
+ padding:8px 20px;text-transform:uppercase;font-family:'Orbitron',monospace;
74
+ letter-spacing:2px;font-size:9px;position:relative;overflow:hidden;
75
+ }
76
+ .btn-katana::after{
77
+ content:"";position:absolute;top:0;left:-100%;width:40%;height:100%;
78
+ background:linear-gradient(90deg,transparent,rgba(255,0,60,.15),transparent);
79
+ transition:left .4s;
80
+ }
81
+ .btn-katana:hover::after{left:120%}
82
+
83
+ .btn-jade{border-color:var(--m);color:var(--m)}
84
+ .btn-jade::after{background:linear-gradient(90deg,transparent,rgba(0,255,157,.15),transparent)}
85
+ .btn-orchid{border-color:var(--orchid);color:var(--orchid)}
86
+ .btn-orchid::after{background:linear-gradient(90deg,transparent,rgba(188,0,255,.15),transparent)}
87
  </style>
88
  </head>
89
  <body>
 
91
  <script type="text/babel">
92
  const{useState,useEffect,useRef,useCallback}=React;
93
 
94
+ // ═══════════════════════════════════════════════════════
95
+ // 🔱 ZKAEDI PRIME v2.1 ⚔ KATANA EDITION
96
+ // ═══════════════════════════════════════════════════════
97
+ const CR="#FF003C",JD="#00FF9D",OR="#BC00FF",ST="#e2e2e2",AM="#FF6B00";
98
  const sigmoid=x=>1/(1+Math.exp(-Math.max(-20,Math.min(20,x))));
99
 
100
  class RNG{
 
148
 
149
  function eColor(val,mn,mx,mode){
150
  const t=Math.max(0,Math.min(1,(val-mn)/(mx-mn+1e-10)));
151
+ if(mode==="katana"){
152
+ // Void -> Blood Red -> Chrome Steel
153
+ if(t<.15)return[Math.floor(t*66),2,Math.floor(t*33)];
154
+ if(t<.75){const s=(t-.15)/.6;return[Math.floor(80+s*175),Math.floor(s*12),Math.floor(60-s*30)]}
155
+ const s=(t-.75)/.25;return[Math.floor(255-s*29),Math.floor(12+s*214),Math.floor(30+s*196)];
156
+ }
157
+ if(mode==="jade_fire"){
158
+ if(t<.5){const s=t*2;return[Math.floor(s*20),Math.floor(80+s*175),Math.floor(60+s*97)]}
159
+ const s=(t-.5)*2;return[Math.floor(20+s*235),Math.floor(255-s*130),Math.floor(157-s*120)];
160
+ }
161
+ if(mode==="orchid_void"){
162
+ if(t<.4){const s=t/.4;return[Math.floor(s*80),0,Math.floor(s*160)]}
163
+ if(t<.8){const s=(t-.4)/.4;return[Math.floor(80+s*108),Math.floor(s*30),Math.floor(160+s*95)]}
164
+ const s=(t-.8)/.2;return[Math.floor(188+s*38),Math.floor(30+s*196),Math.floor(255)];
165
+ }
166
+ if(mode==="blood_chrome"){
167
+ return[Math.floor(t*255),Math.floor(Math.pow(t,2)*60),Math.floor((1-t)*40+t*226)];
168
+ }
169
+ // Legacy modes
170
  if(mode==="cyan_magenta")return[Math.floor(t*255),Math.floor((1-t)*255),255];
171
  if(mode==="plasma")return[Math.floor(Math.min(255,t*510)),Math.floor(Math.max(0,(t-.3)*400)),Math.floor((1-t)*255)];
172
  if(mode==="thermal")return[Math.floor(t*255),Math.floor(t<.5?t*2*200:200-(t-.5)*2*200),Math.floor((1-t)*100)];
 
186
  return{min:mn,max:mx,mean,variance:vari,entropy:ent,histogram:hist,bins,skewness:m3,kurtosis:m4-3};
187
  }
188
 
 
189
  function encodeState(params,potential,colorMode){
190
  const s={e:params.eta,g:params.gamma,b:params.beta,s:params.sigma,i:params.iterations,
191
  d:params.seed,t:params.trajectoryCount,l:params.trajectoryLength,p:potential,c:colorMode};
 
198
  }
199
 
200
  const PRESETS=[
201
+ {name:"Zantetsuken",icon:"\u2694",pot:"double_well",eta:.45,gamma:1.2,beta:.15,sigma:.08,iter:20,seed:777,desc:"One slash. Two worlds."},
202
+ {name:"Oni Spiral",icon:"\uD83C\uDF00",pot:"spiral",eta:.6,gamma:.4,beta:.05,sigma:.12,iter:25,seed:2024,desc:"Demon arms reach from the vortex"},
203
+ {name:"Edge of Chaos",icon:"\u26A1",pot:"chaotic",eta:.8,gamma:1.8,beta:.3,sigma:.15,iter:30,seed:42,desc:"The blade dances on the bifurcation"},
204
+ {name:"Crystal Forge",icon:"\uD83D\uDC8E",pot:"crystal",eta:.35,gamma:.5,beta:.02,sigma:.03,iter:15,seed:1337,desc:"Steel tempered in recursive fire"},
205
+ {name:"Still Water",icon:"\uD83C\uDF0A",pot:"mexican_hat",eta:.15,gamma:.1,beta:.01,sigma:.01,iter:5,seed:100,desc:"The sword rests. Calm before the cut."},
206
+ {name:"Eruption",icon:"\uD83C\uDF0B",pot:"volcano",eta:.7,gamma:1.5,beta:.25,sigma:.2,iter:35,seed:666,desc:"Molten energy breaks the surface"},
207
+ {name:"Wave Blade",icon:"\u3030",pot:"soliton",eta:.5,gamma:.6,beta:.08,sigma:.06,iter:18,seed:314,desc:"Soliton interference on the edge"},
208
+ {name:"Signal Noise",icon:"\uD83D\uDCE1",pot:"chaotic",eta:.3,gamma:.2,beta:.4,sigma:.25,iter:40,seed:999,desc:"Lost in static. Finding the signal."},
209
+ {name:"Attractor Lock",icon:"\uD83D\uDD12",pot:"double_well",eta:.9,gamma:2.0,beta:.01,sigma:.01,iter:50,seed:555,desc:"Maximum sharpening. No escape."},
210
+ {name:"Genesis",icon:"\uD83E\uDDEC",pot:"crystal",eta:.55,gamma:.8,beta:.12,sigma:.1,iter:22,seed:1618,desc:"Life emerges from the recursive field"},
211
  ];
212
 
213
+ // ── Components ──
214
  function Slider({label,value,min,max,step,onChange,color}){
215
+ const pct=((value-min)/(max-min))*100;const c=color||CR;
216
  return(<div style={{marginBottom:7}}>
217
  <div style={{display:"flex",justifyContent:"space-between",marginBottom:2}}>
218
+ <span style={{color:c,fontSize:9,letterSpacing:1.5,textTransform:"uppercase"}}>{label}</span>
219
+ <span style={{color:ST,fontSize:9,fontWeight:700}}>{typeof value==="number"?value.toFixed(step<1?2:0):value}</span>
220
  </div>
221
+ <div style={{position:"relative",height:3,background:"rgba(255,0,60,.08)",borderRadius:1,borderBottom:`1px solid ${c}30`}}>
222
+ <div style={{position:"absolute",left:0,top:0,height:"100%",width:`${pct}%`,borderRadius:1,
223
+ background:`linear-gradient(90deg,${c}80,${c})`,boxShadow:`0 0 8px ${c}30`}}/>
224
  <input type="range" min={min} max={max} step={step} value={value}
225
  onChange={e=>onChange(parseFloat(e.target.value))}
226
  style={{position:"absolute",top:-8,left:0,width:"100%",height:20,opacity:0,cursor:"pointer",margin:0}}/>
 
229
  }
230
 
231
  function Stat({label,value,color}){
232
+ return(<div style={{background:"rgba(0,0,0,.6)",border:`1px solid ${(color||CR)}20`,borderRadius:2,
233
+ padding:"5px 8px",flex:1,minWidth:55,clipPath:"polygon(0 0,92% 0,100% 30%,100% 100%,8% 100%,0 70%)"}}>
234
  <div style={{fontSize:7,color:"#555",letterSpacing:1,textTransform:"uppercase"}}>{label}</div>
235
+ <div style={{fontSize:12,color:color||CR,fontWeight:700}}>{value}</div>
236
  </div>);
237
  }
238
 
239
+ function KPanel({children,title,style:s}){
240
+ return(<div className="panel-katana" style={s}>
241
+ {title&&<div style={{fontSize:8,color:CR,letterSpacing:2.5,marginBottom:8,textTransform:"uppercase",
242
+ borderBottom:"1px solid rgba(255,0,60,.15)",paddingBottom:5,fontFamily:"'Orbitron',monospace"}}>{title}</div>}
243
  {children}
244
  </div>);
245
  }
246
 
247
  function Histogram({histogram,bins,colorMode}){
248
  if(!histogram)return null;
249
+ const maxVal=Math.max(...histogram);const w=260,h=60;
250
  return(<svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{display:"block"}}>
251
  {Array.from({length:bins},(_,i)=>{
252
  const bh=(histogram[i]/maxVal)*h*.88;const t=i/bins;
253
  const[r,g,b]=eColor(t,0,1,colorMode);
254
+ return<rect key={i} x={i*(w/bins)} y={h-bh} width={w/bins-.4} height={bh} fill={`rgb(${r},${g},${b})`} opacity={.75}/>;
255
  })}
256
  </svg>);
257
  }
 
260
  const cvRef=useRef(null);const w=260,h=100;
261
  useEffect(()=>{
262
  const cv=cvRef.current;if(!cv)return;const ctx=cv.getContext("2d");
263
+ ctx.fillStyle="rgba(2,2,5,.95)";ctx.fillRect(0,0,w,h);
264
  const samples=50,probes=6,rng=new RNG(params.seed);
265
  const ranges={eta:[0,1],gamma:[0,2],beta:[0,.5],sigma:[0,.3]};
266
  const[lo,hi]=ranges[paramKey]||[0,1];
 
276
  all.forEach(({x,vals})=>vals.forEach(v=>{
277
  const px=(x/samples)*w,py=h-((v-mn)/(mx-mn+1e-10))*h*.88-h*.05;
278
  const t=(v-mn)/(mx-mn+1e-10);
279
+ ctx.fillStyle=`rgba(255,${Math.floor((1-t)*60)},${Math.floor(60+t*30)},.5)`;ctx.fillRect(px,py,2,2);
280
  }));
281
  const curPct=(params[paramKey]-lo)/(hi-lo);
282
+ ctx.strokeStyle="rgba(0,255,157,.6)";ctx.lineWidth=1;ctx.setLineDash([3,3]);
283
  ctx.beginPath();ctx.moveTo(curPct*w,0);ctx.lineTo(curPct*w,h);ctx.stroke();ctx.setLineDash([]);
284
+ ctx.fillStyle="rgba(255,0,60,.3)";ctx.font="7px 'JetBrains Mono'";
285
  ctx.fillText(paramKey+" \u2192",w-40,h-2);
286
  },[potential,params,paramKey]);
287
+ return<canvas ref={cvRef} width={w} height={h} style={{width:"100%",borderRadius:2,border:"1px solid rgba(255,0,60,.15)"}}/>;
288
  }
289
 
290
  function LyapunovMini({params,potential}){
291
  const cvRef=useRef(null);const w=260,h=80;
292
  useEffect(()=>{
293
  const cv=cvRef.current;if(!cv)return;const ctx=cv.getContext("2d");
294
+ ctx.fillStyle="rgba(2,2,5,.95)";ctx.fillRect(0,0,w,h);
295
  const steps=40,eps=.005;
296
  for(let s=0;s<steps;s++){
297
  const etaVal=s/steps;
 
303
  const lyap=diff>0?Math.log(diff/eps):0;
304
  const norm=Math.max(0,Math.min(1,(lyap+5)/10));
305
  const px=(s/steps)*w,bh=norm*h*.85;
306
+ ctx.fillStyle=lyap>0?`rgba(255,0,60,${.35+norm*.45})`:`rgba(0,255,157,${.3+norm*.3})`;
307
  ctx.fillRect(px,h-bh,w/steps-.5,bh);
308
  }
309
  const pct=params.eta;
310
+ ctx.strokeStyle="rgba(188,0,255,.5)";ctx.lineWidth=1;ctx.setLineDash([2,2]);
311
  ctx.beginPath();ctx.moveTo(pct*w,0);ctx.lineTo(pct*w,h);ctx.stroke();ctx.setLineDash([]);
312
  const zeroY=h-(5/10)*h*.85;
313
+ ctx.strokeStyle="rgba(226,226,226,.1)";ctx.lineWidth=.5;ctx.setLineDash([4,4]);
314
  ctx.beginPath();ctx.moveTo(0,zeroY);ctx.lineTo(w,zeroY);ctx.stroke();ctx.setLineDash([]);
315
+ ctx.fillStyle="rgba(226,226,226,.2)";ctx.font="7px 'JetBrains Mono'";ctx.fillText("\u03BB=0",w-28,zeroY-2);
316
  },[params,potential]);
317
+ return<canvas ref={cvRef} width={w} height={h} style={{width:"100%",borderRadius:2,border:"1px solid rgba(255,0,60,.15)"}}/>;
318
  }
319
 
320
  function Surface3D({H,size,colorMode}){
 
322
  useEffect(()=>{
323
  if(!H)return;const cv=cvRef.current;if(!cv)return;
324
  const ctx=cv.getContext("2d");
325
+ ctx.fillStyle="rgba(2,2,5,.98)";ctx.fillRect(0,0,w,h);
326
  const step=4,rows=Math.floor(size/step),cols=Math.floor(size/step);
327
  let mn=Infinity,mx=-Infinity;
328
  for(let i=0;i<H.length;i++){if(H[i]<mn)mn=H[i];if(H[i]>mx)mx=H[i]}
 
339
  const[x2,y2]=proj(i+1,j+1,H[((i+1)*step)*size+((j+1)*step)]);
340
  const[x3,y3]=proj(i,j+1,H[(i*step)*size+((j+1)*step)]);
341
  const[r,g,b]=eColor(t0,0,1,colorMode);
342
+ ctx.fillStyle=`rgba(${r},${g},${b},.3)`;ctx.strokeStyle=`rgba(${r},${g},${b},.1)`;ctx.lineWidth=.5;
343
  ctx.beginPath();ctx.moveTo(x0,y0);ctx.lineTo(x1,y1);ctx.lineTo(x2,y2);ctx.lineTo(x3,y3);ctx.closePath();
344
  ctx.fill();ctx.stroke();
345
  }
346
  },[H,size,colorMode]);
347
+ return<canvas ref={cvRef} width={w} height={h} style={{width:"100%",borderRadius:2,border:"1px solid rgba(255,0,60,.15)"}}/>;
348
  }
349
 
350
  function Toast({message,onDone}){
 
353
  }
354
 
355
  // ═══════════════════════════════════════
356
+ // ⚔ MAIN APP — KATANA EDITION
357
  // ═══════════════════════════════════════
358
  function App(){
359
  const canvasRef=useRef(null),trajRef=useRef(null),animRef=useRef(null),compareRef=useRef(null),autoRef=useRef(null);
 
361
 
362
  const[animating,setAnimating]=useState(false),[animStep,setAnimStep]=useState(0);
363
  const[showTrails,setShowTrails]=useState(true),[showGrid,setShowGrid]=useState(true),[showContours,setShowContours]=useState(true);
364
+ const[colorMode,setColorMode]=useState("katana"),[potential,setPotential]=useState("double_well");
365
  const[bifParam,setBifParam]=useState("eta"),[activeTab,setActiveTab]=useState("presets");
366
  const[stats,setStats]=useState({min:0,max:0,mean:0,variance:0,entropy:0,histogram:null,bins:60,skewness:0,kurtosis:0});
367
  const[fieldData,setFieldData]=useState(null),[fieldSize,setFieldSize]=useState(0);
368
  const[toast,setToast]=useState(null),[fps,setFps]=useState(0),[renderTime,setRenderTime]=useState(0);
369
  const[isFullscreen,setIsFullscreen]=useState(false),[compareMode,setCompareMode]=useState(false);
370
+ const[autoDiscovery,setAutoDiscovery]=useState(false),[glitchActive,setGlitchActive]=useState(false);
371
 
372
  const[params,setParams]=useState({eta:.40,gamma:.30,beta:.10,sigma:.05,iterations:12,seed:42,trajectoryCount:24,trajectoryLength:300});
373
  const res=180,cvSize=520;
 
378
 
379
  const showToast=useCallback(msg=>setToast(msg),[]);
380
 
381
+ // Glitch-cut on potential change
382
+ const changePotential=useCallback(p=>{
383
+ setPotential(p);setGlitchActive(true);
384
+ setTimeout(()=>setGlitchActive(false),400);
385
+ },[]);
386
+
387
  const render=useCallback((overrideIter)=>{
388
  const t0=performance.now();
389
  const cv=canvasRef.current,tv=trajRef.current;if(!cv||!tv)return;
 
398
  const[r,g,b]=eColor(H[i*size+j],mn,mx,colorMode);
399
  const px=Math.floor(j*scale),py=Math.floor(i*scale),pw=Math.ceil(scale),ph=Math.ceil(scale);
400
  for(let dy=0;dy<ph&&py+dy<ch;dy++)for(let dx=0;dx<pw&&px+dx<cw;dx++){
401
+ const idx=((py+dy)*cw+(px+dx))*4;img.data[idx]=r;img.data[idx+1]=g;img.data[idx+2]=b;img.data[idx+3]=230;
402
  }
403
  }
404
  ctx.putImageData(img,0,0);
405
 
406
+ if(showGrid){ctx.strokeStyle="rgba(255,0,60,.03)";ctx.lineWidth=.5;const gs=cw/12;
407
  for(let g=0;g<=12;g++){ctx.beginPath();ctx.moveTo(g*gs,0);ctx.lineTo(g*gs,ch);ctx.stroke();
408
  ctx.beginPath();ctx.moveTo(0,g*gs);ctx.lineTo(cw,g*gs);ctx.stroke()}}
409
  if(showContours){const levels=10;
 
411
  for(let i=0;i<size-1;i++)for(let j=0;j<size-1;j++){
412
  const v00=H[i*size+j],v10=H[(i+1)*size+j],v01=H[i*size+j+1];
413
  if((v00<th)!==(v10<th)||(v00<th)!==(v01<th)){
414
+ ctx.fillStyle="rgba(226,226,226,.02)";
415
  ctx.fillRect(Math.floor(j*scale),Math.floor(i*scale),Math.ceil(scale),Math.ceil(scale))}}}}
416
 
417
  tctx.clearRect(0,0,cw,ch);
 
419
  for(let t=0;t<params.trajectoryCount;t++){
420
  const si=Math.floor(rng.next()*(size-4))+2,sj=Math.floor(rng.next()*(size-4))+2;
421
  const pts=trace(H,size,si,sj,params.trajectoryLength,.8);if(pts.length<3)continue;
422
+ // Zantetsuken trails — thick at start, vanishing at end, white blade tip
423
  for(let pi=1;pi<pts.length;pi++){
424
+ const alpha=1-(pi/pts.length);
425
+ tctx.lineWidth=2.5*alpha+.2;
426
+ // First 5 points flash white like a blade reflection
427
+ tctx.strokeStyle=pi<5?`rgba(226,226,226,${alpha*.9})`:`hsla(345,100%,50%,${alpha*.6})`;
428
  tctx.beginPath();tctx.moveTo(pts[pi-1][1]*scale,pts[pi-1][0]*scale);
429
  tctx.lineTo(pts[pi][1]*scale,pts[pi][0]*scale);tctx.stroke();
430
  }
431
+ // Start: crimson glow
432
+ tctx.shadowBlur=5;tctx.fillStyle=CR;tctx.shadowColor=CR;
433
  tctx.beginPath();tctx.arc(pts[0][1]*scale,pts[0][0]*scale,2.5,0,Math.PI*2);tctx.fill();
434
+ // End: jade glow
435
+ if(pts.length>2){const last=pts[pts.length-1];tctx.fillStyle=JD;tctx.shadowColor=JD;
436
+ tctx.beginPath();tctx.arc(last[1]*scale,last[0]*scale,1.8,0,Math.PI*2);tctx.fill()}
437
  tctx.shadowBlur=0;
438
  }}
439
 
 
446
  const[r,g,b]=eColor(f2.H[i*size+j],st2.min,st2.max,colorMode);
447
  const px=Math.floor(j*scale),py=Math.floor(i*scale),pw=Math.ceil(scale),ph=Math.ceil(scale);
448
  for(let dy=0;dy<ph&&py+dy<ch;dy++)for(let dx=0;dx<pw&&px+dx<cw;dx++){
449
+ const idx=((py+dy)*cw+(px+dx))*4;img2.data[idx]=r;img2.data[idx+1]=g;img2.data[idx+2]=b;img2.data[idx+3]=230;
450
  }
451
  }
452
  cctx.putImageData(img2,0,0);
 
473
  autoRef.current=setInterval(()=>{
474
  const pr=PRESETS[idx%PRESETS.length];
475
  setParams(p=>({...p,eta:pr.eta,gamma:pr.gamma,beta:pr.beta,sigma:pr.sigma,iterations:pr.iter,seed:pr.seed}));
476
+ changePotential(pr.pot);showToast(`${pr.icon} ${pr.name}`);idx++;
477
  },3000);
478
  return()=>clearInterval(autoRef.current);
479
  },[autoDiscovery]);
 
497
  const shareState=useCallback(()=>{
498
  const hash=encodeState(params,potential,colorMode);
499
  const url=window.location.origin+window.location.pathname+"#"+hash;
500
+ navigator.clipboard.writeText(url).then(()=>showToast("\u2694 Link copied!"))
501
  .catch(()=>{window.location.hash=hash;showToast("URL updated")});
502
  },[params,potential,colorMode]);
503
 
 
505
  const cv=canvasRef.current,tv=trajRef.current;if(!cv)return;
506
  const exp=document.createElement("canvas");exp.width=cv.width;exp.height=cv.height;
507
  const ectx=exp.getContext("2d");ectx.drawImage(cv,0,0);if(tv)ectx.drawImage(tv,0,0);
508
+ ectx.fillStyle="rgba(255,0,60,.4)";ectx.font="bold 9px 'Orbitron'";
509
+ ectx.fillText("ZKAEDI PRIME \u2694 KATANA",8,cv.height-8);
510
+ const link=document.createElement("a");link.download=`zkaedi_katana_${potential}_s${params.seed}.png`;
511
  link.href=exp.toDataURL("image/png");link.click();showToast("\u2913 PNG exported!");
512
  },[potential,params.seed]);
513
 
514
  const applyPreset=useCallback(pr=>{
515
  setParams(p=>({...p,eta:pr.eta,gamma:pr.gamma,beta:pr.beta,sigma:pr.sigma,iterations:pr.iter,seed:pr.seed}));
516
+ changePotential(pr.pot);showToast(`${pr.icon} ${pr.name}`);
517
  },[]);
518
 
519
  const potentials=[
 
522
  {id:"mexican_hat",label:"SOMBRERO",icon:"\uD83C\uDFA9"},{id:"volcano",label:"VOLCANO",icon:"\uD83C\uDF0B"},
523
  {id:"soliton",label:"SOLITON",icon:"\u3030"},
524
  ];
525
+ const colors=[{id:"katana",label:"\u2694 KATANA"},{id:"jade_fire",label:"JADE FIRE"},{id:"orchid_void",label:"ORCHID"},{id:"blood_chrome",label:"CHROME"}];
526
+ const tabs=[{id:"presets",label:"\u2694 PRESETS"},{id:"params",label:"DYNAMICS"},{id:"phase",label:"PHASE"},{id:"analysis",label:"ANALYSIS"}];
527
  const bifParams=[{id:"eta",label:"\u03B7"},{id:"gamma",label:"\u03B3"},{id:"beta",label:"\u03B2"},{id:"sigma",label:"\u03C3"}];
528
 
529
  return(
530
  <div className={isFullscreen?"fullscreen-host":""} style={{minHeight:"100vh",display:"flex",flexDirection:"column"}}>
531
+ {/* Scanline overlay */}
532
+ <div style={{position:"fixed",inset:0,background:"repeating-linear-gradient(0deg,rgba(255,0,60,.008) 0px,transparent 1px,transparent 3px)",pointerEvents:"none",zIndex:100}}/>
533
 
534
+ {/* Header */}
535
+ <header style={{padding:"10px 16px",borderBottom:"1px solid rgba(255,0,60,.2)",
536
+ background:"linear-gradient(180deg,rgba(255,0,60,.04) 0%,transparent 100%)",
537
  display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:8}}>
538
+ <div style={{display:"flex",alignItems:"center",gap:10}}>
539
+ <div style={{width:32,height:32,borderRadius:2,
540
+ background:"linear-gradient(135deg,rgba(255,0,60,.12),rgba(188,0,255,.12))",
541
+ border:"1px solid rgba(255,0,60,.3)",display:"flex",alignItems:"center",justifyContent:"center",
542
+ fontSize:15,animation:"glow-crimson 3s infinite",
543
+ clipPath:"polygon(15% 0,100% 0,85% 100%,0 100%)"}}>🔱</div>
544
  <div>
545
+ <div style={{fontSize:13,fontWeight:900,letterSpacing:4,color:ST,
546
+ fontFamily:"'Orbitron',monospace",textShadow:`0 0 20px ${CR}40`}}>
547
+ ZKAEDI PRIME <span style={{color:CR,fontSize:10}}>\u2694</span>
548
+ </div>
549
+ <div style={{fontSize:7,letterSpacing:3,color:"#444",fontFamily:"'Orbitron',monospace"}}>
550
+ KATANA EDITION v2.1
551
+ </div>
552
  </div>
553
  </div>
554
  <div style={{display:"flex",gap:5,alignItems:"center",flexWrap:"wrap"}}>
555
+ {animating&&<div style={{fontSize:8,color:CR,letterSpacing:2,animation:"pulse 1s infinite"}}>\u25C9 t={animStep}</div>}
556
+ {autoDiscovery&&<div style={{fontSize:8,color:AM,letterSpacing:1,animation:"pulse 2s infinite"}}>\u25C9 AUTO</div>}
557
+ <div style={{fontSize:7,padding:"2px 6px",borderRadius:2,background:"rgba(255,0,60,.06)",border:"1px solid rgba(255,0,60,.15)",color:CR}}>{res}\u00D7{res}</div>
558
+ <div style={{fontSize:7,padding:"2px 6px",borderRadius:2,background:"rgba(0,255,157,.06)",border:"1px solid rgba(0,255,157,.15)",color:JD}}>{renderTime}ms</div>
559
+ <div style={{fontSize:7,padding:"2px 6px",borderRadius:2,background:"rgba(188,0,255,.06)",border:"1px solid rgba(188,0,255,.15)",color:OR}}>{fps}fps</div>
560
  </div>
561
  </header>
562
 
 
565
  <div style={{flex:"1 1 520px",display:"flex",flexDirection:"column",gap:8,maxWidth:compareMode?1100:580}}>
566
  <div style={{display:"flex",gap:3,flexWrap:"wrap"}}>
567
  {potentials.map(p=>(
568
+ <button key={p.id} onClick={()=>changePotential(p.id)} className="btn-katana" style={{
569
+ padding:"4px 10px",fontSize:8,letterSpacing:1.5,
570
+ background:potential===p.id?"rgba(255,0,60,.08)":"var(--dk)",
571
+ borderColor:potential===p.id?CR:"rgba(255,0,60,.15)",
572
+ color:potential===p.id?ST:"#555",clipPath:"polygon(6% 0,100% 0,94% 100%,0 100%)"
573
  }}>{p.icon} {p.label}</button>
574
  ))}
575
  </div>
576
 
577
  <div style={{display:"flex",gap:8}}>
578
+ {/* Main canvas */}
579
+ <div className={glitchActive?"glitch-active":""} style={{position:"relative",
580
+ width:compareMode?"50%":"100%",maxWidth:cvSize,aspectRatio:"1",
581
+ borderRadius:2,overflow:"hidden",border:"1px solid rgba(255,0,60,.2)",
582
+ boxShadow:"0 0 50px rgba(255,0,60,.06),inset 0 0 80px rgba(0,0,0,.6)"}}>
583
  <canvas ref={canvasRef} width={cvSize} height={cvSize} style={{width:"100%",height:"100%",display:"block"}}/>
584
  <canvas ref={trajRef} width={cvSize} height={cvSize}
585
  style={{position:"absolute",top:0,left:0,width:"100%",height:"100%"}}/>
586
  {animating&&<div style={{position:"absolute",left:0,right:0,height:2,
587
+ background:`linear-gradient(90deg,transparent,${CR}80,transparent)`,
588
+ animation:"scan 1.5s linear infinite",pointerEvents:"none"}}/>}
589
+ {/* Corner blades */}
590
+ <div style={{position:"absolute",top:0,left:0,width:20,height:2,background:CR,opacity:.5}}/>
591
+ <div style={{position:"absolute",top:0,left:0,width:2,height:20,background:CR,opacity:.5}}/>
592
+ <div style={{position:"absolute",top:0,right:0,width:20,height:2,background:CR,opacity:.5}}/>
593
+ <div style={{position:"absolute",top:0,right:0,width:2,height:20,background:CR,opacity:.5}}/>
594
+ <div style={{position:"absolute",bottom:0,left:0,width:20,height:2,background:JD,opacity:.3}}/>
595
+ <div style={{position:"absolute",bottom:0,left:0,width:2,height:20,background:JD,opacity:.3}}/>
596
+ <div style={{position:"absolute",bottom:0,right:0,width:20,height:2,background:JD,opacity:.3}}/>
597
+ <div style={{position:"absolute",bottom:0,right:0,width:2,height:20,background:JD,opacity:.3}}/>
598
+ <div style={{position:"absolute",top:5,left:8,fontSize:7,color:`${CR}60`,letterSpacing:1.5,fontFamily:"'Orbitron',monospace"}}>t={params.iterations}</div>
599
+ <div style={{position:"absolute",top:5,right:8,fontSize:7,color:`${JD}60`,letterSpacing:1.5,fontFamily:"'Orbitron',monospace"}}>EVOLVED</div>
600
  </div>
601
 
602
  {compareMode&&(
603
  <div style={{position:"relative",width:"50%",maxWidth:cvSize,aspectRatio:"1",
604
+ borderRadius:2,overflow:"hidden",border:"1px solid rgba(188,0,255,.2)",
605
+ boxShadow:"0 0 50px rgba(188,0,255,.06),inset 0 0 80px rgba(0,0,0,.6)"}}>
606
  <canvas ref={compareRef} width={cvSize} height={cvSize} style={{width:"100%",height:"100%",display:"block"}}/>
607
+ <div style={{position:"absolute",top:0,left:0,width:20,height:2,background:OR,opacity:.5}}/>
608
+ <div style={{position:"absolute",top:0,left:0,width:2,height:20,background:OR,opacity:.5}}/>
609
+ <div style={{position:"absolute",top:5,left:8,fontSize:7,color:`${OR}60`,letterSpacing:1.5,fontFamily:"'Orbitron',monospace"}}>t=1</div>
610
+ <div style={{position:"absolute",top:5,right:8,fontSize:7,color:`${OR}60`,letterSpacing:1.5,fontFamily:"'Orbitron',monospace"}}>BASE</div>
 
 
 
 
611
  </div>
612
  )}
613
  </div>
614
 
615
  <div style={{display:"flex",gap:4,flexWrap:"wrap"}}>
616
+ <Stat label="Min" value={stats.min.toFixed(2)} color={CR}/>
617
+ <Stat label="Max" value={stats.max.toFixed(2)} color={JD}/>
618
+ <Stat label="\u03BC" value={stats.mean.toFixed(2)} color={ST}/>
619
+ <Stat label="\u03C3\u00B2" value={stats.variance.toFixed(2)} color={AM}/>
620
+ <Stat label="S" value={stats.entropy.toFixed(2)} color={OR}/>
621
+ <Stat label="Skew" value={stats.skewness.toFixed(2)} color={JD}/>
622
+ <Stat label="Kurt" value={stats.kurtosis.toFixed(2)} color={CR}/>
623
  </div>
624
 
625
+ <KPanel title="\u2B21 Energy Distribution">
626
  <Histogram histogram={stats.histogram} bins={stats.bins} colorMode={colorMode}/>
627
  <div style={{display:"flex",justifyContent:"space-between",marginTop:2}}>
628
  <span style={{fontSize:7,color:"#444"}}>{stats.min.toFixed(1)}</span>
629
  <span style={{fontSize:7,color:"#444"}}>{stats.max.toFixed(1)}</span>
630
  </div>
631
+ </KPanel>
632
 
633
+ <KPanel title="\u25C7 Isometric Surface">
634
  <Surface3D H={fieldData} size={fieldSize} colorMode={colorMode}/>
635
+ </KPanel>
636
  </div>
637
 
638
  {/* RIGHT */}
639
  <div style={{flex:"0 0 275px",minWidth:245,display:"flex",flexDirection:"column",gap:8}}>
640
+ <div style={{display:"flex",gap:1,background:"rgba(0,0,0,.6)",borderRadius:2,padding:2,
641
+ border:"1px solid rgba(255,0,60,.12)"}}>
642
  {tabs.map(t=>(
643
  <button key={t.id} onClick={()=>setActiveTab(t.id)} style={{
644
+ flex:1,padding:"6px 0",fontSize:8,letterSpacing:1.5,borderRadius:2,
645
+ fontFamily:"'Orbitron',monospace",
646
+ background:activeTab===t.id?"rgba(255,0,60,.1)":"transparent",
647
+ border:activeTab===t.id?"1px solid rgba(255,0,60,.25)":"1px solid transparent",
648
+ color:activeTab===t.id?CR:"#444"
649
  }}>{t.label}</button>
650
  ))}
651
  </div>
 
653
  {activeTab==="presets"&&(
654
  <div style={{display:"flex",flexDirection:"column",gap:4,maxHeight:520,overflowY:"auto"}}>
655
  {PRESETS.map((pr,i)=>(
656
+ <button key={i} onClick={()=>applyPreset(pr)} className="panel-katana" style={{
657
+ padding:"8px 12px",textAlign:"left",animation:`slash-in .3s ${i*.04}s both`,cursor:"pointer"
 
658
  }}>
659
  <div style={{display:"flex",alignItems:"center",gap:8}}>
660
  <span style={{fontSize:16}}>{pr.icon}</span>
661
  <div>
662
+ <div style={{fontSize:10,color:ST,fontWeight:700,letterSpacing:1.5,fontFamily:"'Orbitron',monospace"}}>{pr.name}</div>
663
+ <div style={{fontSize:8,color:"#666",marginTop:1}}>{pr.desc}</div>
664
  <div style={{fontSize:7,color:"#333",marginTop:2}}>
665
  {pr.pot} | \u03B7={pr.eta} \u03B3={pr.gamma} \u03B2={pr.beta} \u03C3={pr.sigma}
666
  </div>
 
672
  )}
673
 
674
  {activeTab==="params"&&<>
675
+ <KPanel title="\u27C1 Hamiltonian Coupling">
676
  <Slider label="\u03B7 Recursive Coupling" value={params.eta} min={0} max={1} step={.01} onChange={up("eta")}/>
677
+ <Slider label="\u03B3 Attractor Sharpening" value={params.gamma} min={0} max={2} step={.01} onChange={up("gamma")} color={JD}/>
678
+ <Slider label="\u03B2 Noise Amplitude" value={params.beta} min={0} max={.5} step={.01} onChange={up("beta")} color={AM}/>
679
+ <Slider label="\u03C3 Exploration" value={params.sigma} min={0} max={.3} step={.01} onChange={up("sigma")} color={OR}/>
680
+ </KPanel>
681
+ <KPanel title="\u27C1 Evolution">
682
  <Slider label="Iterations" value={params.iterations} min={1} max={50} step={1} onChange={up("iterations")}/>
683
+ <Slider label="Seed" value={params.seed} min={1} max={9999} step={1} onChange={up("seed")} color={OR}/>
684
+ </KPanel>
685
  </>}
686
 
687
  {activeTab==="phase"&&<>
688
+ <KPanel title="\u27C1 Zantetsuken Trails">
689
  <Slider label="Count" value={params.trajectoryCount} min={0} max={80} step={1} onChange={up("trajectoryCount")}/>
690
+ <Slider label="Length" value={params.trajectoryLength} min={10} max={1000} step={10} onChange={up("trajectoryLength")} color={JD}/>
691
+ </KPanel>
692
+ <KPanel title="\u27C1 Color Ramp">
693
  <div style={{display:"flex",gap:3,marginBottom:8,flexWrap:"wrap"}}>
694
  {colors.map(c=>(
695
+ <button key={c.id} onClick={()=>setColorMode(c.id)} className="btn-katana" style={{
696
+ flex:1,padding:"5px 0",fontSize:8,letterSpacing:1,
697
+ background:colorMode===c.id?"rgba(255,0,60,.1)":"var(--dk)",
698
+ borderColor:colorMode===c.id?CR:"rgba(255,0,60,.15)",
699
+ color:colorMode===c.id?ST:"#555",clipPath:"polygon(6% 0,100% 0,94% 100%,0 100%)"
700
+ }}>{c.label}</button>
701
  ))}
702
  </div>
703
  <div style={{display:"flex",gap:4}}>
 
705
  ["GRID",showGrid,()=>setShowGrid(g=>!g)],
706
  ["ISO",showContours,()=>setShowContours(c=>!c)]
707
  ].map(([l,v,fn])=>(
708
+ <button key={l} onClick={fn} className="btn-katana" style={{flex:1,padding:"6px 0",fontSize:8,letterSpacing:1,
709
+ background:v?"rgba(255,0,60,.06)":"var(--dk)",borderColor:v?"rgba(255,0,60,.3)":"rgba(255,0,60,.1)",
710
+ color:v?ST:"#444",clipPath:"polygon(6% 0,100% 0,94% 100%,0 100%)"
711
  }}>{v?"\u25C9":"\u25CB"} {l}</button>
712
  ))}
713
  </div>
714
+ </KPanel>
715
  </>}
716
 
717
  {activeTab==="analysis"&&<>
718
+ <KPanel title="\u27C1 Bifurcation">
719
  <div style={{display:"flex",gap:2,marginBottom:6}}>
720
  {bifParams.map(b=>(
721
+ <button key={b.id} onClick={()=>setBifParam(b.id)} style={{flex:1,padding:"4px 0",fontSize:9,borderRadius:2,
722
+ background:bifParam===b.id?"rgba(255,0,60,.1)":"rgba(0,0,0,.4)",
723
+ border:`1px solid ${bifParam===b.id?"rgba(255,0,60,.3)":"rgba(255,0,60,.08)"}`,
724
+ color:bifParam===b.id?CR:"#555"}}>{b.label}</button>
725
  ))}
726
  </div>
727
  <BifurcationDiagram potential={potential} params={params} paramKey={bifParam}/>
728
+ <div style={{fontSize:7,color:"#444",marginTop:3,textAlign:"center"}}><span style={{color:`${JD}70`}}>|</span> = current</div>
729
+ </KPanel>
730
+ <KPanel title="\u03BB Lyapunov vs \u03B7">
731
  <LyapunovMini params={params} potential={potential}/>
732
  <div style={{fontSize:7,color:"#444",marginTop:3}}>
733
+ <span style={{color:`${CR}80`}}>\u25A0</span> chaotic <span style={{color:`${JD}80`,marginLeft:6}}>\u25A0</span> stable <span style={{color:`${OR}80`,marginLeft:6}}>|</span> current
734
  </div>
735
+ </KPanel>
736
+ <KPanel title="\u27C1 Metrics">
737
  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:4}}>
738
+ {[["RANGE",(stats.max-stats.min).toFixed(2),CR],["STD",Math.sqrt(Math.max(0,stats.variance)).toFixed(2),JD],
739
+ ["ENTROPY",stats.entropy.toFixed(3),OR],["CV",stats.mean!==0?(Math.sqrt(Math.max(0,stats.variance))/Math.abs(stats.mean)).toFixed(3):"\u2014",AM]
740
  ].map(([l,v,c])=>(
741
+ <div key={l} style={{background:`${c}08`,borderRadius:2,padding:6,textAlign:"center",
742
+ clipPath:"polygon(0 0,92% 0,100% 30%,100% 100%,8% 100%,0 70%)"}}>
743
  <div style={{fontSize:7,color:"#444",letterSpacing:1}}>{l}</div>
744
  <div style={{fontSize:11,color:c,fontWeight:700,marginTop:1}}>{v}</div>
745
  </div>
746
  ))}
747
  </div>
748
+ </KPanel>
749
+ <KPanel title="\u27C1 Equation">
750
  <div style={{fontSize:8,color:"#777",lineHeight:1.8}}>
751
+ <span style={{color:CR}}>H<sub>t</sub></span>(x,y) = H<sub>0</sub> + <span style={{color:CR}}>\u03B7</span>\u00B7H<sub>t-1</sub>\u00B7<span style={{color:JD}}>\u03C3</span>(<span style={{color:JD}}>\u03B3</span>\u00B7H<sub>t-1</sub>) + <span style={{color:OR}}>\u03B5</span>\u00B7\uD835\uDCA9(0,1+<span style={{color:AM}}>\u03B2</span>|H<sub>t-1</sub>|)
752
  </div>
753
+ </KPanel>
754
  </>}
755
 
756
+ {/* Action buttons */}
757
  <div style={{display:"flex",flexDirection:"column",gap:5,marginTop:2}}>
758
+ <button onClick={()=>{setAnimStep(0);setAnimating(true)}} disabled={animating}
759
+ className="btn-katana" style={{
760
+ padding:"10px 0",fontSize:10,fontWeight:800,letterSpacing:4,width:"100%",
761
+ background:animating?"rgba(0,0,0,.4)":"linear-gradient(135deg,rgba(255,0,60,.08),rgba(188,0,255,.08))",
762
+ borderColor:animating?"rgba(255,0,60,.1)":CR,
763
+ color:animating?"#333":ST,cursor:animating?"not-allowed":"pointer"
764
+ }}>{animating?`\u25CE t=${animStep}\u2026`:"\u2694 EVOLVE FIELD"}</button>
765
 
766
  <div style={{display:"flex",gap:4}}>
767
+ <button onClick={()=>up("seed")(Math.floor(Math.random()*9999))} className="btn-katana" style={{flex:1,padding:"8px 0"}}>\u27F3 RANDOM</button>
768
+ <button onClick={shareState} className="btn-katana btn-jade" style={{flex:1,padding:"8px 0"}}>\u2197 SHARE</button>
769
+ <button onClick={exportPNG} className="btn-katana btn-orchid" style={{flex:1,padding:"8px 0"}}>\u2913 PNG</button>
770
  </div>
771
  <div style={{display:"flex",gap:4}}>
772
+ <button onClick={()=>setAutoDiscovery(d=>!d)} className="btn-katana" style={{flex:1,padding:"8px 0",
773
+ borderColor:autoDiscovery?AM:"rgba(255,0,60,.15)",color:autoDiscovery?AM:"#555"
774
+ }}>{autoDiscovery?"\u25A0 STOP":"\u25B6 DISCOVER"}</button>
775
+ <button onClick={()=>setCompareMode(c=>!c)} className="btn-katana" style={{flex:1,padding:"8px 0",
776
+ borderColor:compareMode?JD:"rgba(255,0,60,.15)",color:compareMode?JD:"#555"
777
+ }}>{compareMode?"\u25C9":"\u25CB"} COMPARE</button>
778
+ <button onClick={()=>setIsFullscreen(f=>!f)} className="btn-katana" style={{flex:1,padding:"8px 0",
779
+ color:"#555"}}>{isFullscreen?"\u2715 EXIT":"\u26F6 FULL"}</button>
 
780
  </div>
781
  </div>
782
 
783
+ <KPanel title="\u2328 SHORTCUTS" style={{marginTop:2}}>
784
  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:3,fontSize:8,color:"#555"}}>
785
  {[["Space","Evolve"],["R","Random"],["S","Share"],["E","Export"],
786
  ["F","Fullscreen"],["T","Trails"],["G","Grid"],["D","Discover"],
 
791
  </div>
792
  ))}
793
  </div>
794
+ </KPanel>
795
+
796
+ <div style={{paddingTop:6,borderTop:"1px solid rgba(255,0,60,.1)",fontSize:7,color:"#1a1a1a",
797
+ letterSpacing:3,textAlign:"center",lineHeight:1.8,fontFamily:"'Orbitron',monospace"}}>
798
+ ZKAEDI PRIME \u2694 KATANA<br/>
799
+ <span style={{color:"rgba(255,0,60,.2)"}}>PUBLISH THE OUTPUT</span>
800
+ {" \u00B7 "}
801
+ <span style={{color:"rgba(0,255,157,.15)"}}>PROTECT THE ENGINE</span>
802
  </div>
803
  </div>
804
  </div>
 
811
  ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
812
  </script>
813
  </body>
814
+ </html>