underpost 3.2.4 → 3.2.8

package/src/client/components/core/Polyhedron.js

@@ -1,18 +1,16 @@
 // https://underpost.net/cube.php
-
 import { BtnIcon } from './BtnIcon.js';
 import { getId, random } from './CommonJs.js';
 import { dynamicCol } from './Css.js';
 import { fullScreenIn, htmls, s } from './VanillaJs.js';
 import { Translate } from './Translate.js';
 // https://css-loaders.com/3d/
-
-const Polyhedron = {
-  Tokens: {},
-  Render: async function (options) {
-    const id = options?.id ? options.id : getId(this.Tokens, 'polyhedron-');
-    if (!this.Tokens[id])
-      this.Tokens[id] = {
+class Polyhedron {
+  static Tokens = {};
+  static async instance(options) {
+    const id = options?.id ? options.id : getId(Polyhedron.Tokens, 'polyhedron-');
+    if (!Polyhedron.Tokens[id])
+      Polyhedron.Tokens[id] = {
         cr: [-25, -57, 90],
         ct: [0, 0, 0],
         dim: 150,
@@ -34,16 +32,13 @@ const Polyhedron = {
           bottom: null,
         },
       };
-
     const getFaceSelector = (faceName) => `.face_${faceName}-${id}`;
     const applyFaceBackground = (faceName) => {
       const el = s(getFaceSelector(faceName));
       if (!el) return;
-      const url = this.Tokens[id].faces?.[faceName];
-
+      const url = Polyhedron.Tokens[id].faces?.[faceName];
       if (url) {
         el.style.backgroundImage = `url("${url}")`;
-
         // Always cover the full face area.
         // Using `cover` ensures full coverage even during 3D transforms / resizes.
         el.style.backgroundSize = 'cover';
@@ -59,31 +54,25 @@ const Polyhedron = {
     const applyAllFaceBackgrounds = () => {
       ['front', 'back', 'left', 'right', 'top', 'bottom'].forEach(applyFaceBackground);
     };
-
     const applyFaceOpacity = () => {
-      const opacity = typeof this.Tokens[id].faceOpacity === 'number' ? this.Tokens[id].faceOpacity : 1;
+      const opacity = typeof Polyhedron.Tokens[id].faceOpacity === 'number' ? Polyhedron.Tokens[id].faceOpacity : 1;
       const faces = document.querySelectorAll(`.face-${id}`);
       faces.forEach((el) => {
         el.style.opacity = `${opacity}`;
       });
     };
-
     const startImmersiveEffects = () => {
       const scene = s(`.scene-${id}`);
       if (!scene) return;
-
       const canvas = s(`.polyhedron-immersive-canvas-${id}`);
       if (!canvas) return;
-
       if (!s(`.main-body-btn-ui-close`).classList.contains('hide')) s(`.main-body-btn-ui`).click();
       if (!s(`.main-body-btn-ui-menu-close`).classList.contains('hide')) s(`.main-body-btn-menu`).click();
       fullScreenIn();
       // Ensure canvas is visible during immersive mode.
       canvas.style.display = 'block';
-
       const ctx = canvas.getContext('2d');
       if (!ctx) return;
-
       const resize = () => {
         const dpr = Math.max(1, window.devicePixelRatio || 1);
         const w = scene.clientWidth || window.innerWidth;
@@ -94,9 +83,7 @@ const Polyhedron = {
         canvas.style.height = `${h}px`;
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
       };
-
       resize();
-
       const mkParticlesWaveLight = () => {
         const count = 110;
         const w = scene.clientWidth || window.innerWidth;
@@ -114,7 +101,6 @@ const Polyhedron = {
           };
         });
       };
-
       const mkParticlesDarkElectronic = () => {
         const count = 170;
         const w = scene.clientWidth || window.innerWidth;
@@ -135,7 +121,6 @@ const Polyhedron = {
           };
         });
       };
-
       // New (light): Prism Bloom — bright prismatic bursts with bloom + gently swirling motion
       const mkParticlesPrismBloom = () => {
         const count = 160;
@@ -157,7 +142,6 @@ const Polyhedron = {
           };
         });
       };
-
       // New (dark): Noir Embers — smoky dark with warm embers + occasional flicker
       const mkParticlesNoirEmbers = () => {
         // Repurposed into a much more eye-catching "full fire" effect:
@@ -185,42 +169,33 @@ const Polyhedron = {
           };
         });
       };
-
       const resetParticlesForEffect = () => {
-        const eff = this.Tokens[id].immersiveEffect || 'waveLight';
+        const eff = Polyhedron.Tokens[id].immersiveEffect || 'waveLight';
         console.error(eff);
-        if (eff === 'darkElectronic') this.Tokens[id].immersiveParticles = mkParticlesDarkElectronic();
-        else if (eff === 'prismBloom') this.Tokens[id].immersiveParticles = mkParticlesPrismBloom();
-        else if (eff === 'noirEmbers') this.Tokens[id].immersiveParticles = mkParticlesNoirEmbers();
-        else this.Tokens[id].immersiveParticles = mkParticlesWaveLight();
+        if (eff === 'darkElectronic') Polyhedron.Tokens[id].immersiveParticles = mkParticlesDarkElectronic();
+        else if (eff === 'prismBloom') Polyhedron.Tokens[id].immersiveParticles = mkParticlesPrismBloom();
+        else if (eff === 'noirEmbers') Polyhedron.Tokens[id].immersiveParticles = mkParticlesNoirEmbers();
+        else Polyhedron.Tokens[id].immersiveParticles = mkParticlesWaveLight();
       };
-
       resetParticlesForEffect();
-      this.Tokens[id].immersiveStart = performance.now();
-
+      Polyhedron.Tokens[id].immersiveStart = performance.now();
       const tick = (t) => {
-        if (!this.Tokens[id].immersive) return;
-
+        if (!Polyhedron.Tokens[id].immersive) return;
         // Keep canvas sized to the scene.
         if (canvas.clientWidth !== scene.clientWidth || canvas.clientHeight !== scene.clientHeight) resize();
-
         const w2 = canvas.clientWidth || window.innerWidth;
         const h2 = canvas.clientHeight || window.innerHeight;
-
-        const tt = (t - this.Tokens[id].immersiveStart) / 1000;
-        const eff = this.Tokens[id].immersiveEffect || 'waveLight';
-
+        const tt = (t - Polyhedron.Tokens[id].immersiveStart) / 1000;
+        const eff = Polyhedron.Tokens[id].immersiveEffect || 'waveLight';
         if (eff === 'darkElectronic') {
           // Dark electronic: GREEN PIPES — grid/pipe network with bright green flow + pulsing nodes
           ctx.fillStyle = 'rgba(0,0,0,1)';
           ctx.fillRect(0, 0, w2, h2);
-
           // Pipe layout (more orthogonal so it reads like piping)
           const base = 120; // green hue
           const step = 52;
           const driftX = Math.sin(tt * 0.35) * 10;
           const driftY = Math.cos(tt * 0.28) * 10;
-
           // faint background glow to lift the pipes off black
           ctx.globalAlpha = 0.18;
           const bgG = ctx.createRadialGradient(w2 * 0.5, h2 * 0.5, 0, w2 * 0.5, h2 * 0.5, Math.min(w2, h2) * 0.95);
@@ -229,13 +204,11 @@ const Polyhedron = {
           ctx.fillStyle = bgG;
           ctx.fillRect(0, 0, w2, h2);
           ctx.globalAlpha = 1;
-
           // scanlines, very subtle
           ctx.globalAlpha = 0.04;
           ctx.fillStyle = 'rgba(255,255,255,1)';
           for (let y = 0; y < h2; y += 3) ctx.fillRect(0, y, w2, 1);
           ctx.globalAlpha = 1;
-
           // Pipes: horizontal lines
           ctx.lineWidth = 2;
           for (let y = 0; y <= h2 + step; y += step) {
@@ -247,7 +220,6 @@ const Polyhedron = {
             ctx.moveTo(0, yy);
             ctx.lineTo(w2, yy);
             ctx.stroke();
-
             // core pass
             ctx.globalAlpha = 0.35;
             ctx.strokeStyle = `hsla(${base}, 100%, 55%, 1)`;
@@ -257,7 +229,6 @@ const Polyhedron = {
             ctx.stroke();
           }
           ctx.globalAlpha = 1;
-
           // Pipes: vertical lines
           for (let x = 0; x <= w2 + step; x += step) {
             const xx = x + (Math.cos(tt * 0.55 + x * 0.02) * 2 + driftX);
@@ -268,7 +239,6 @@ const Polyhedron = {
             ctx.moveTo(xx, 0);
             ctx.lineTo(xx, h2);
             ctx.stroke();
-
             // core pass
             ctx.globalAlpha = 0.35;
             ctx.strokeStyle = `hsla(${base}, 100%, 55%, 1)`;
@@ -278,42 +248,34 @@ const Polyhedron = {
             ctx.stroke();
           }
           ctx.globalAlpha = 1;
-
           // Particles as flowing "packets" and junction nodes
-          const ps = this.Tokens[id].immersiveParticles || [];
+          const ps = Polyhedron.Tokens[id].immersiveParticles || [];
           for (const p of ps) {
             // quantize positions toward pipe lanes so motion reads as "through pipes"
             const laneX = Math.round(p.x / step) * step;
             const laneY = Math.round(p.y / step) * step;
-
             // drift toward nearest lane
             p.x += (laneX - p.x) * 0.04;
             p.y += (laneY - p.y) * 0.04;
-
             // move slowly along lanes
             p.x += p.vx * 60;
             p.y += p.vy * 60;
-
             if (p.x < -20) p.x = w2 + 20;
             if (p.x > w2 + 20) p.x = -20;
             if (p.y < -20) p.y = h2 + 20;
             if (p.y > h2 + 20) p.y = -20;
-
             const sparkle = (0.25 + 0.75 * Math.max(0, Math.sin(tt * 5.2 + p.phase))) * (0.55 + p.spark);
-
             // packet glow
             ctx.beginPath();
             ctx.fillStyle = `hsla(${base}, 100%, 72%, ${0.08 + sparkle * 0.16})`;
             ctx.arc(p.x, p.y, p.r * 2.6, 0, Math.PI * 2);
             ctx.fill();
-
             // packet core
             ctx.beginPath();
             ctx.fillStyle = `hsla(${base + 10}, 100%, 62%, ${0.12 + sparkle * 0.22})`;
             ctx.arc(p.x, p.y, Math.max(1, p.r * 1.05), 0, Math.PI * 2);
             ctx.fill();
           }
-
           // Vignette
           const vg = ctx.createRadialGradient(
             w2 / 2,
@@ -327,19 +289,17 @@ const Polyhedron = {
           vg.addColorStop(1, 'rgba(0,0,0,0.75)');
           ctx.fillStyle = vg;
           ctx.fillRect(0, 0, w2, h2);
-
           // Polyhedron motion (calmer so the pipe aesthetic stays readable)
           const drift = 9;
-          this.Tokens[id].cr[1] += 0.44;
-          this.Tokens[id].cr[0] += 0.14;
-          this.Tokens[id].cr[2] += 0.08;
-          this.Tokens[id].ct[0] = Math.sin(tt * 0.65) * drift;
-          this.Tokens[id].ct[1] = Math.cos(tt * 0.45) * drift;
-          this.Tokens[id].ct[2] = Math.sin(tt * 0.35) * (drift * 0.65);
+          Polyhedron.Tokens[id].cr[1] += 0.44;
+          Polyhedron.Tokens[id].cr[0] += 0.14;
+          Polyhedron.Tokens[id].cr[2] += 0.08;
+          Polyhedron.Tokens[id].ct[0] = Math.sin(tt * 0.65) * drift;
+          Polyhedron.Tokens[id].ct[1] = Math.cos(tt * 0.45) * drift;
+          Polyhedron.Tokens[id].ct[2] = Math.sin(tt * 0.35) * (drift * 0.65);
         } else if (eff === 'prismBloom') {
           // Prism Bloom (light): COOL-CORES — soft light/white wave-lite style, slower particles
           const tt2 = tt;
-
           // cool white background with a gentle wave tint (very subtle blues)
           const bg = ctx.createLinearGradient(0, 0, w2, h2);
           bg.addColorStop(0, `hsla(205, 45%, 96%, 1)`);
@@ -347,7 +307,6 @@ const Polyhedron = {
           bg.addColorStop(1, `hsla(195, 40%, 95%, 1)`);
           ctx.fillStyle = bg;
           ctx.fillRect(0, 0, w2, h2);
-
           // soft wave bands
           ctx.globalAlpha = 0.12;
           ctx.lineWidth = 2;
@@ -363,36 +322,29 @@ const Polyhedron = {
             ctx.stroke();
           }
           ctx.globalAlpha = 1;
-
-          const ps = this.Tokens[id].immersiveParticles || [];
+          const ps = Polyhedron.Tokens[id].immersiveParticles || [];
           for (const p of ps) {
             // slow drifting, wave-like
             p.x += (p.vx * 0.55 + Math.sin(tt2 * 0.55 + p.phase) * 0.06) * 60;
             p.y += (p.vy * 0.55 + Math.cos(tt2 * 0.45 + p.phase) * 0.06) * 60;
-
             if (p.x < -30) p.x = w2 + 30;
             if (p.x > w2 + 30) p.x = -30;
             if (p.y < -30) p.y = h2 + 30;
             if (p.y > h2 + 30) p.y = -30;
-
             const pulse = 0.35 + 0.65 * Math.max(0, Math.sin(tt2 * 1.5 + p.phase + p.jitter * 2));
-
             // cool core colors (icy blue -> lavender)
             const hueP = (205 + (p.hueOffset % 40) + Math.sin(tt2 * 0.25 + p.phase) * 8) % 360;
-
             // outer soft glow
             ctx.beginPath();
             ctx.fillStyle = `hsla(${hueP}, 70%, 75%, ${0.06 + pulse * 0.08})`;
             ctx.arc(p.x, p.y, p.r * 3.0, 0, Math.PI * 2);
             ctx.fill();
-
             // bright cool core
             ctx.beginPath();
             ctx.fillStyle = `hsla(${hueP}, 65%, 86%, ${0.11 + pulse * 0.14})`;
             ctx.arc(p.x, p.y, Math.max(1.0, p.r * 1.1), 0, Math.PI * 2);
             ctx.fill();
           }
-
           // very light vignette so white background still has depth
           const vg = ctx.createRadialGradient(
             w2 / 2,
@@ -406,19 +358,17 @@ const Polyhedron = {
           vg.addColorStop(1, 'rgba(30,40,60,0.16)');
           ctx.fillStyle = vg;
           ctx.fillRect(0, 0, w2, h2);
-
           const drift = 8;
-          this.Tokens[id].cr[1] += 0.34;
-          this.Tokens[id].cr[0] += 0.11;
-          this.Tokens[id].ct[0] = Math.sin(tt2 * 0.6) * drift;
-          this.Tokens[id].ct[1] = Math.cos(tt2 * 0.45) * drift;
-          this.Tokens[id].ct[2] = Math.sin(tt2 * 0.38) * (drift * 0.6);
+          Polyhedron.Tokens[id].cr[1] += 0.34;
+          Polyhedron.Tokens[id].cr[0] += 0.11;
+          Polyhedron.Tokens[id].ct[0] = Math.sin(tt2 * 0.6) * drift;
+          Polyhedron.Tokens[id].ct[1] = Math.cos(tt2 * 0.45) * drift;
+          Polyhedron.Tokens[id].ct[2] = Math.sin(tt2 * 0.38) * (drift * 0.6);
         } else if (eff === 'noirEmbers') {
           // FULL FIRE (replaces Noir Embers): bright, high-intensity flame field + hot cores + tongues of fire.
           // Goal: unmistakably "on fire" and eye-catching, not a subtle ember drift.
           ctx.fillStyle = 'rgba(0,0,0,1)';
           ctx.fillRect(0, 0, w2, h2);
-
           // Base flame bed (glowing furnace at the bottom)
           const bed = ctx.createRadialGradient(w2 * 0.5, h2 * 1.05, 0, w2 * 0.5, h2 * 1.05, Math.min(w2, h2) * 1.05);
           bed.addColorStop(0, 'hsla(38, 100%, 55%, 0.85)');
@@ -429,7 +379,6 @@ const Polyhedron = {
           ctx.fillStyle = bed;
           ctx.fillRect(0, 0, w2, h2);
           ctx.globalAlpha = 1;
-
           // Heat haze / smoke-lace near the top to add depth (still subtle, fire stays dominant)
           const haze = ctx.createLinearGradient(0, 0, 0, h2);
           haze.addColorStop(0, 'rgba(0,0,0,0.55)');
@@ -439,9 +388,8 @@ const Polyhedron = {
           ctx.fillStyle = haze;
           ctx.fillRect(0, 0, w2, h2);
           ctx.globalAlpha = 1;
-
           // Flame tongues + sparks
-          const ps = this.Tokens[id].immersiveParticles || [];
+          const ps = Polyhedron.Tokens[id].immersiveParticles || [];
           for (const p of ps) {
             // life cycles: respawn near bottom with new heat/curl to keep it lively
             p.life += 0.012 + p.flicker * 0.01;
@@ -456,43 +404,35 @@ const Polyhedron = {
               p.life = 0;
               p.stretch = 0.6 + (random(0, 1000) / 1000) * 1.6;
             }
-
             // Rising motion + turbulence (tongues curl side to side)
             const curl = Math.sin(tt * (1.8 + p.curl * 1.6) + p.phase) * (0.12 + p.curl * 0.18);
             const wag = Math.sin(tt * 6.5 + p.phase + p.flicker * 10) * 0.06;
             p.x += (p.vx + curl + wag) * 60;
             p.y -= (0.25 + Math.abs(p.vy)) * 58;
-
             if (p.x < -60) p.x = w2 + 60;
             if (p.x > w2 + 60) p.x = -60;
-
             // Intensity ramps up then tapers (flame tongue shape)
             const ramp = Math.sin(Math.min(1, p.life) * Math.PI); // 0..1..0
             const flick = 0.45 + 0.55 * Math.max(0, Math.sin(tt * (8 + p.flicker * 7) + p.phase));
             const heat = 0.25 + 0.75 * p.heat;
-
             // Color: deep red -> orange -> yellow-white hot core
             const hueP = 10 + heat * 35; // 10..45
             const lumCore = 70 + heat * 20; // 70..90
             const lumGlow = 45 + heat * 20; // 45..65
-
             // Tongue body (stretched vertical glow)
             const tongueH = (14 + heat * 34) * p.stretch * (0.5 + ramp);
             const tongueW = (3 + heat * 4) * (0.7 + ramp);
-
             ctx.globalAlpha = 0.06 + ramp * 0.16;
             ctx.fillStyle = `hsla(${hueP}, 100%, ${lumGlow}%, 1)`;
             ctx.beginPath();
             ctx.ellipse(p.x, p.y, tongueW * 2.2, tongueH * 1.05, 0, 0, Math.PI * 2);
             ctx.fill();
             ctx.globalAlpha = 1;
-
             // Hot core
             ctx.beginPath();
             ctx.fillStyle = `hsla(${hueP + 8}, 100%, ${lumCore}%, ${0.1 + ramp * 0.22 * flick})`;
             ctx.arc(p.x, p.y, Math.max(1.2, p.r * (1.2 + heat * 0.9)), 0, Math.PI * 2);
             ctx.fill();
-
             // White-hot sparkles (a few particles become bright sparks)
             const sparkChance = p.i % 9 === 0 ? 1 : 0;
             if (sparkChance) {
@@ -500,7 +440,6 @@ const Polyhedron = {
               ctx.fillStyle = `hsla(55, 100%, 92%, ${0.08 + ramp * 0.22 * flick})`;
               ctx.arc(p.x + curl * 80, p.y - ramp * 18, Math.max(0.8, p.r * 0.75), 0, Math.PI * 2);
               ctx.fill();
-
               // tiny upward streak
               ctx.globalAlpha = 0.06 + ramp * 0.12;
               ctx.strokeStyle = `hsla(48, 100%, 85%, 1)`;
@@ -512,7 +451,6 @@ const Polyhedron = {
               ctx.globalAlpha = 1;
             }
           }
-
           // Stronger vignette to keep fire contrast & "cinematic" intensity
           const vg = ctx.createRadialGradient(
             w2 / 2,
@@ -526,52 +464,44 @@ const Polyhedron = {
           vg.addColorStop(1, 'rgba(0,0,0,0.78)');
           ctx.fillStyle = vg;
           ctx.fillRect(0, 0, w2, h2);
-
           // Slightly more energetic polyhedron motion to match the intensity
           const drift = 9;
-          this.Tokens[id].cr[1] += 0.46;
-          this.Tokens[id].cr[0] += 0.15;
-          this.Tokens[id].cr[2] += 0.08;
-          this.Tokens[id].ct[0] = Math.sin(tt * 0.7) * drift;
-          this.Tokens[id].ct[1] = Math.cos(tt * 0.5) * drift;
-          this.Tokens[id].ct[2] = Math.sin(tt * 0.42) * (drift * 0.65);
+          Polyhedron.Tokens[id].cr[1] += 0.46;
+          Polyhedron.Tokens[id].cr[0] += 0.15;
+          Polyhedron.Tokens[id].cr[2] += 0.08;
+          Polyhedron.Tokens[id].ct[0] = Math.sin(tt * 0.7) * drift;
+          Polyhedron.Tokens[id].ct[1] = Math.cos(tt * 0.5) * drift;
+          Polyhedron.Tokens[id].ct[2] = Math.sin(tt * 0.42) * (drift * 0.65);
         } else {
           // Wave light: animated gradient + soft floaty particles (brighter particles)
-          const hueA = (tt * 18 + this.Tokens[id].immersiveSeed) % 360;
+          const hueA = (tt * 18 + Polyhedron.Tokens[id].immersiveSeed) % 360;
           const hueB = (hueA + 90) % 360;
-
           const g = ctx.createLinearGradient(0, 0, w2, h2);
           g.addColorStop(0, `hsla(${hueA}, 78%, 12%, 1)`);
           g.addColorStop(1, `hsla(${hueB}, 78%, 12%, 1)`);
           ctx.fillStyle = g;
           ctx.fillRect(0, 0, w2, h2);
-
-          const ps = this.Tokens[id].immersiveParticles || [];
+          const ps = Polyhedron.Tokens[id].immersiveParticles || [];
           for (const p of ps) {
             p.x += p.vx * 60;
             p.y += p.vy * 60;
-
             if (p.x < -10) p.x = w2 + 10;
             if (p.x > w2 + 10) p.x = -10;
             if (p.y < -10) p.y = h2 + 10;
             if (p.y > h2 + 10) p.y = -10;
-
             const alpha = 0.22 + 0.16 * Math.sin(tt * 1.7 + p.phase);
             const hue = (hueA + p.i * 2) % 360;
-
             // glow
             ctx.beginPath();
             ctx.fillStyle = `hsla(${hue}, 95%, 78%, ${alpha * 0.45})`;
             ctx.arc(p.x, p.y, p.r * 2.4, 0, Math.PI * 2);
             ctx.fill();
-
             // core
             ctx.beginPath();
             ctx.fillStyle = `hsla(${hue}, 90%, 72%, ${alpha})`;
             ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
             ctx.fill();
           }
-
           const vg = ctx.createRadialGradient(
             w2 / 2,
             h2 / 2,
@@ -584,51 +514,41 @@ const Polyhedron = {
           vg.addColorStop(1, 'rgba(0,0,0,0.55)');
           ctx.fillStyle = vg;
           ctx.fillRect(0, 0, w2, h2);
-
           const drift = 8;
-          this.Tokens[id].cr[1] += 0.35;
-          this.Tokens[id].cr[0] += 0.12;
-          this.Tokens[id].ct[0] = Math.sin(tt * 0.6) * drift;
-          this.Tokens[id].ct[1] = Math.cos(tt * 0.45) * drift;
-          this.Tokens[id].ct[2] = Math.sin(tt * 0.35) * (drift * 0.6);
+          Polyhedron.Tokens[id].cr[1] += 0.35;
+          Polyhedron.Tokens[id].cr[0] += 0.12;
+          Polyhedron.Tokens[id].ct[0] = Math.sin(tt * 0.6) * drift;
+          Polyhedron.Tokens[id].ct[1] = Math.cos(tt * 0.45) * drift;
+          Polyhedron.Tokens[id].ct[2] = Math.sin(tt * 0.35) * (drift * 0.6);
         }
-
         // Keep face backgrounds synced to current face pixel sizing
         // (important when immersive resize happens).
         applyAllFaceBackgrounds();
-
         // Apply transformation now (outside the 200ms interval) for smooth motion.
         if (s(`.polyhedron-${id}`)) renderTransform();
-
-        this.Tokens[id].immersiveRAF = requestAnimationFrame(tick);
+        Polyhedron.Tokens[id].immersiveRAF = requestAnimationFrame(tick);
       };
-
-      if (this.Tokens[id].immersiveRAF) cancelAnimationFrame(this.Tokens[id].immersiveRAF);
-      this.Tokens[id].immersiveRAF = requestAnimationFrame(tick);
-
+      if (Polyhedron.Tokens[id].immersiveRAF) cancelAnimationFrame(Polyhedron.Tokens[id].immersiveRAF);
+      Polyhedron.Tokens[id].immersiveRAF = requestAnimationFrame(tick);
       // Resize handler while immersive
       const onResize = () => {
-        if (!this.Tokens[id].immersive) return;
+        if (!Polyhedron.Tokens[id].immersive) return;
         resize();
       };
       window.removeEventListener('resize', onResize);
       window.addEventListener('resize', onResize);
-      this.Tokens[id].immersiveOnResize = onResize;
-
+      Polyhedron.Tokens[id].immersiveOnResize = onResize;
       // Expose reset so the effect toggle can rebuild particles quickly.
-      this.Tokens[id]._resetImmersiveParticles = resetParticlesForEffect;
+      Polyhedron.Tokens[id]._resetImmersiveParticles = resetParticlesForEffect;
     };
-
     const stopImmersiveEffects = () => {
-      if (this.Tokens[id].immersiveRAF) cancelAnimationFrame(this.Tokens[id].immersiveRAF);
-      this.Tokens[id].immersiveRAF = null;
-      this.Tokens[id].immersiveParticles = null;
-
-      if (this.Tokens[id].immersiveOnResize) {
-        window.removeEventListener('resize', this.Tokens[id].immersiveOnResize);
-        this.Tokens[id].immersiveOnResize = null;
+      if (Polyhedron.Tokens[id].immersiveRAF) cancelAnimationFrame(Polyhedron.Tokens[id].immersiveRAF);
+      Polyhedron.Tokens[id].immersiveRAF = null;
+      Polyhedron.Tokens[id].immersiveParticles = null;
+      if (Polyhedron.Tokens[id].immersiveOnResize) {
+        window.removeEventListener('resize', Polyhedron.Tokens[id].immersiveOnResize);
+        Polyhedron.Tokens[id].immersiveOnResize = null;
       }
-
       // Clear + hide canvas so the last rendered frame is not left visible.
       const canvas = s(`.polyhedron-immersive-canvas-${id}`);
       if (canvas) {
@@ -636,17 +556,14 @@ const Polyhedron = {
         if (ctx) ctx.clearRect(0, 0, canvas.width || 0, canvas.height || 0);
         canvas.style.display = 'none';
       }
-
       // Reset drift so manual controls feel normal again
-      this.Tokens[id].ct = [0, 0, 0];
+      Polyhedron.Tokens[id].ct = [0, 0, 0];
     };
-
     const setImmersive = (isImmersive) => {
-      this.Tokens[id].immersive = !!isImmersive;
+      Polyhedron.Tokens[id].immersive = !!isImmersive;
       const scene = s(`.scene-${id}`);
       if (!scene) return;
-
-      if (this.Tokens[id].immersive) {
+      if (Polyhedron.Tokens[id].immersive) {
         scene.classList.add(`scene-immersive-${id}`);
         startImmersiveEffects();
       } else {
@@ -654,149 +571,129 @@ const Polyhedron = {
         stopImmersiveEffects();
       }
     };
-
     const renderTransform = () => {
       s(`.polyhedron-${id}`).style.transform =
-        `rotateX(${this.Tokens[id].cr[0]}deg) rotateY(${this.Tokens[id].cr[1]}deg) rotateZ(${this.Tokens[id].cr[2]}deg)
-      translateX(${this.Tokens[id].ct[0]}px) translateY(${this.Tokens[id].ct[1]}px) translateZ(${this.Tokens[id].ct[2]}px)`;
-      s(`.polyhedron-${id}`).style.left = `${s(`.scene-${id}`).offsetWidth / 2 - this.Tokens[id].dim / 2}px`;
-      s(`.polyhedron-${id}`).style.top = `${s(`.scene-${id}`).offsetHeight / 2 - this.Tokens[id].dim / 2}px`;
-      s(`.polyhedron-${id}`).style.width = `${this.Tokens[id].dim}px`;
-      s(`.polyhedron-${id}`).style.height = `${this.Tokens[id].dim}px`;
+        `rotateX(${Polyhedron.Tokens[id].cr[0]}deg) rotateY(${Polyhedron.Tokens[id].cr[1]}deg) rotateZ(${Polyhedron.Tokens[id].cr[2]}deg)
+      translateX(${Polyhedron.Tokens[id].ct[0]}px) translateY(${Polyhedron.Tokens[id].ct[1]}px) translateZ(${Polyhedron.Tokens[id].ct[2]}px)`;
+      s(`.polyhedron-${id}`).style.left = `${s(`.scene-${id}`).offsetWidth / 2 - Polyhedron.Tokens[id].dim / 2}px`;
+      s(`.polyhedron-${id}`).style.top = `${s(`.scene-${id}`).offsetHeight / 2 - Polyhedron.Tokens[id].dim / 2}px`;
+      s(`.polyhedron-${id}`).style.width = `${Polyhedron.Tokens[id].dim}px`;
+      s(`.polyhedron-${id}`).style.height = `${Polyhedron.Tokens[id].dim}px`;
       /* rotate Y */
-      s(`.face_front-${id}`).style.transform = `rotateY(0deg) translateZ(${this.Tokens[id].dim / 2}px)`;
-      s(`.face_back-${id}`).style.transform = `rotateY(-180deg) translateZ(${this.Tokens[id].dim / 2}px)`;
-      s(`.face_left-${id}`).style.transform = `rotateY(90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
-      s(`.face_right-${id}`).style.transform = `rotateY(-90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_front-${id}`).style.transform = `rotateY(0deg) translateZ(${Polyhedron.Tokens[id].dim / 2}px)`;
+      s(`.face_back-${id}`).style.transform = `rotateY(-180deg) translateZ(${Polyhedron.Tokens[id].dim / 2}px)`;
+      s(`.face_left-${id}`).style.transform = `rotateY(90deg) translateZ(${Polyhedron.Tokens[id].dim / 2}px)`;
+      s(`.face_right-${id}`).style.transform = `rotateY(-90deg) translateZ(${Polyhedron.Tokens[id].dim / 2}px)`;
       /* rotate X */
-      s(`.face_top-${id}`).style.transform = `rotateX(-90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
-      s(`.face_bottom-${id}`).style.transform = `rotateX(90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_top-${id}`).style.transform = `rotateX(-90deg) translateZ(${Polyhedron.Tokens[id].dim / 2}px)`;
+      s(`.face_bottom-${id}`).style.transform = `rotateX(90deg) translateZ(${Polyhedron.Tokens[id].dim / 2}px)`;
     };
-    if (this.Tokens[id].interval) clearInterval(this.Tokens[id].interval);
-    this.Tokens[id].interval = setInterval(() => {
+    if (Polyhedron.Tokens[id].interval) clearInterval(Polyhedron.Tokens[id].interval);
+    Polyhedron.Tokens[id].interval = setInterval(() => {
       if (s(`.polyhedron-${id}`)) renderTransform();
-      else return clearInterval(this.Tokens[id].interval);
+      else return clearInterval(Polyhedron.Tokens[id].interval);
     }, 200);
-
     setTimeout(() => {
       renderTransform();
       s(`.polyhedron-${id}`).style.transition = `.4s`;
       applyAllFaceBackgrounds();
       applyFaceOpacity();
-      setImmersive(this.Tokens[id].immersive);
-
+      setImmersive(Polyhedron.Tokens[id].immersive);
       s(`.btn-polyhedron-rotate-down-${id}`).onclick = () => {
-        this.Tokens[id].cr[0] += 45;
+        Polyhedron.Tokens[id].cr[0] += 45;
       };
       s(`.btn-polyhedron-rotate-up-${id}`).onclick = () => {
-        this.Tokens[id].cr[0] -= 45;
+        Polyhedron.Tokens[id].cr[0] -= 45;
       };
       s(`.btn-polyhedron-rotate-left-${id}`).onclick = () => {
-        this.Tokens[id].cr[1] += 45;
+        Polyhedron.Tokens[id].cr[1] += 45;
       };
       s(`.btn-polyhedron-rotate-right-${id}`).onclick = () => {
-        this.Tokens[id].cr[1] -= 45;
+        Polyhedron.Tokens[id].cr[1] -= 45;
       };
-
       s(`.btn-polyhedron-add-zoom-${id}`).onclick = () => {
-        this.Tokens[id].dim += 25;
+        Polyhedron.Tokens[id].dim += 25;
       };
       s(`.btn-polyhedron-remove-zoom-${id}`).onclick = () => {
-        this.Tokens[id].dim -= 25;
+        Polyhedron.Tokens[id].dim -= 25;
       };
-
       const facePicker = s(`.polyhedron-face-picker-${id}`);
       if (facePicker) {
         // Keep UI and state in sync on re-render
-        facePicker.value = this.Tokens[id].chosenFace || 'front';
-
+        facePicker.value = Polyhedron.Tokens[id].chosenFace || 'front';
         facePicker.onchange = (e) => {
-          this.Tokens[id].chosenFace = e?.target?.value || 'front';
+          Polyhedron.Tokens[id].chosenFace = e?.target?.value || 'front';
         };
       }
-
       const opacitySlider = s(`.polyhedron-face-opacity-${id}`);
       if (opacitySlider) {
         // Keep UI and state in sync on re-render
-        opacitySlider.value = `${this.Tokens[id].faceOpacity}`;
-
+        opacitySlider.value = `${Polyhedron.Tokens[id].faceOpacity}`;
         opacitySlider.oninput = (e) => {
           const v = parseFloat(e?.target?.value);
-          this.Tokens[id].faceOpacity = Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 1;
+          Polyhedron.Tokens[id].faceOpacity = Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 1;
           applyFaceOpacity();
         };
       }
-
       const fileInput = s(`.polyhedron-face-image-file-${id}`);
       if (fileInput) {
         fileInput.onchange = (e) => {
           const file = e?.target?.files?.[0];
           if (!file) return;
-
           const url = URL.createObjectURL(file);
-          const face = this.Tokens[id].chosenFace || 'front';
-
+          const face = Polyhedron.Tokens[id].chosenFace || 'front';
           if (face === 'all') {
             ['front', 'back', 'left', 'right', 'top', 'bottom'].forEach((f) => {
-              this.Tokens[id].faces[f] = url;
+              Polyhedron.Tokens[id].faces[f] = url;
             });
             applyAllFaceBackgrounds();
           } else {
-            this.Tokens[id].faces[face] = url;
+            Polyhedron.Tokens[id].faces[face] = url;
             applyFaceBackground(face);
           }
-
           fileInput.value = '';
         };
       }
-
       const clearFaceBtn = s(`.btn-polyhedron-clear-face-image-${id}`);
       if (clearFaceBtn) {
         clearFaceBtn.onclick = () => {
-          const face = this.Tokens[id].chosenFace || 'front';
-
+          const face = Polyhedron.Tokens[id].chosenFace || 'front';
           if (face === 'all') {
             ['front', 'back', 'left', 'right', 'top', 'bottom'].forEach((f) => {
-              this.Tokens[id].faces[f] = null;
+              Polyhedron.Tokens[id].faces[f] = null;
             });
             applyAllFaceBackgrounds();
           } else {
-            this.Tokens[id].faces[face] = null;
+            Polyhedron.Tokens[id].faces[face] = null;
             applyFaceBackground(face);
           }
         };
       }
-
       const immersiveBtn = s(`.btn-polyhedron-immersive-${id}`);
       if (immersiveBtn) {
-        immersiveBtn.onclick = () => setImmersive(!this.Tokens[id].immersive);
+        immersiveBtn.onclick = () => setImmersive(!Polyhedron.Tokens[id].immersive);
       }
-
       const immersiveExitBtn = s(`.btn-polyhedron-immersive-exit-${id}`);
       if (immersiveExitBtn) {
         immersiveExitBtn.onclick = () => setImmersive(false);
       }
-
       const immersiveEffectBtn = s(`.btn-polyhedron-immersive-effect-${id}`);
       if (immersiveEffectBtn) {
         immersiveEffectBtn.onclick = () => {
           const order = ['waveLight', 'prismBloom', 'darkElectronic', 'noirEmbers'];
-          const curr = this.Tokens[id].immersiveEffect || 'waveLight';
+          const curr = Polyhedron.Tokens[id].immersiveEffect || 'waveLight';
           const idx = order.indexOf(curr);
-          this.Tokens[id].immersiveEffect = order[(idx + 1) % order.length] || 'waveLight';
-
-          if (this.Tokens[id].immersive && this.Tokens[id]._resetImmersiveParticles)
-            this.Tokens[id]._resetImmersiveParticles();
+          Polyhedron.Tokens[id].immersiveEffect = order[(idx + 1) % order.length] || 'waveLight';
+          if (Polyhedron.Tokens[id].immersive && Polyhedron.Tokens[id]._resetImmersiveParticles)
+            Polyhedron.Tokens[id]._resetImmersiveParticles();
         };
       }
-
       const escHandler = (ev) => {
-        if (ev?.key === 'Escape' && this.Tokens[id].immersive) setImmersive(false);
+        if (ev?.key === 'Escape' && Polyhedron.Tokens[id].immersive) setImmersive(false);
       };
       document.removeEventListener('keydown', escHandler);
       document.addEventListener('keydown', escHandler);
     });
-
     return html`
       <style>
         .scene-${id} {
@@ -956,29 +853,29 @@ const Polyhedron = {
         <div class="in fll polyhedron-${id}-col-a">
           <div class="in section-mp">
             <div class="in sub-title-modal"><i class="fa-solid fa-arrows-spin"></i> Rotate</div>
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-polyhedron-rotate-up-${id}`,
               label: html`<i class="fa-solid fa-angle-up"></i>`,
             })}
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-polyhedron-rotate-down-${id}`,
               label: html`<i class="fa-solid fa-angle-down"></i>`,
             })}
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-polyhedron-rotate-left-${id}`,
               label: html`<i class="fa-solid fa-angle-left"></i>`,
             })}
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-polyhedron-rotate-right-${id}`,
               label: html`<i class="fa-solid fa-angle-right"></i>`,
             })}
 
             <div class="in sub-title-modal"><i class="fa-solid fa-magnifying-glass"></i> Zoom</div>
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-polyhedron-add-zoom-${id}`,
               label: html`<i class="fa-solid fa-plus"></i>`,
             })}
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-polyhedron-remove-zoom-${id}`,
               label: html`<i class="fa-solid fa-minus"></i>`,
             })}
@@ -990,7 +887,7 @@ const Polyhedron = {
               min="0"
               max="1"
               step="0.01"
-              value="${this.Tokens[id].faceOpacity}"
+              value="${Polyhedron.Tokens[id].faceOpacity}"
               title="Face opacity"
             />
 
@@ -1006,11 +903,11 @@ const Polyhedron = {
               <option value="bottom">bottom</option>
             </select>
             <input class="in polyhedron-face-image-file-${id}" type="file" accept="image/*" />
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-polyhedron-clear-face-image-${id}`,
-              label: html`<i class="fa-solid fa-eraser"></i> ${Translate.Render('clear')}`,
+              label: html`<i class="fa-solid fa-eraser"></i> ${Translate.instance('clear')}`,
             })}
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-polyhedron-immersive-${id}`,
               label: html`<i class="fa-solid fa-expand"></i> Immersive`,
             })}
@@ -1018,7 +915,7 @@ const Polyhedron = {
         </div>
         <div class="in fll polyhedron-${id}-col-b">
           <div class="in section-mp">
-            <div class="in sub-title-modal"><i class="fa-solid fa-vector-square"></i> Render</div>
+            <div class="in sub-title-modal"><i class="fa-solid fa-vector-square"></i> instance</div>
             <div class="in scene-${id}">
               <canvas class="polyhedron-immersive-canvas-${id}"></canvas>
 
@@ -1045,7 +942,6 @@ const Polyhedron = {
         </div>
       </div>
     `;
-  },
-};
-
+  }
+}
 export { Polyhedron };