@oasisomniverse/react 1.0.0 → 1.1.0

package/src/components/common/Eggs.jsx

@@ -1,50 +1,50 @@
-import { useState } from 'react';
-
-const RARITY_COLORS = { Common: '#7a9bbf', Rare: '#5ba8ff', Epic: '#b87fff', Legendary: '#ffb43c' };
-const INITIAL = [
-  { id: '1', name: 'Cosmic Egg', rarity: 'Legendary', hatchProgress: 75, hatched: false, reward: '+500 Karma Companion' },
-  { id: '2', name: 'Forest Egg', rarity: 'Common', hatchProgress: 100, hatched: true, reward: 'Woodland Sprite' },
-  { id: '3', name: 'Astral Egg', rarity: 'Epic', hatchProgress: 30, hatched: false, reward: '+200 Karma Companion' },
-  { id: '4', name: 'Ocean Egg', rarity: 'Rare', hatchProgress: 55, hatched: false, reward: 'Sea Guardian' },
-];
-
-export function Eggs() {
-  const [eggs, setEggs] = useState(INITIAL);
-  function incubate(id) {
-    setEggs(es => es.map(e => {
-      if (e.id !== id) return e;
-      const next = Math.min(100, e.hatchProgress + 25);
-      return { ...e, hatchProgress: next, hatched: next >= 100 };
-    }));
-  }
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
-      <div style={{ textAlign: 'center' }}>
-        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🥚 Eggs</h2>
-        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Hatch eggs to discover rare OASIS companions and rewards.</p>
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(160px,1fr))', gap: 16 }}>
-        {eggs.map(e => (
-          <div key={e.id} style={{ background: e.hatched ? 'rgba(255,180,60,.04)' : 'rgba(255,255,255,.04)', border: `1px solid ${e.hatched ? 'rgba(255,180,60,.3)' : 'rgba(0,200,255,.15)'}`, borderRadius: 12, padding: '18px 14px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
-            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', borderRadius: 999, padding: '3px 10px', border: `1px solid ${RARITY_COLORS[e.rarity]}44`, color: RARITY_COLORS[e.rarity] }}>{e.rarity}</div>
-            <div style={{ fontSize: 40 }}>{e.hatched ? '🐣' : '🥚'}</div>
-            <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#fff', textAlign: 'center' }}>{e.name}</div>
-            {!e.hatched ? (
-              <>
-                <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }}>
-                  <div style={{ width: '100%', height: 6, background: 'rgba(255,255,255,.1)', borderRadius: 999, overflow: 'hidden' }}>
-                    <div style={{ height: '100%', width: `${e.hatchProgress}%`, background: 'linear-gradient(90deg,#00c8ff,#0080ff)', borderRadius: 999, transition: 'width .4s' }} />
-                  </div>
-                  <div style={{ fontSize: 11, color: '#7a9bbf' }}>{e.hatchProgress}%</div>
-                </div>
-                <button style={{ width: '100%', background: 'linear-gradient(135deg,#ffb43c,#ff8c00)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '.08em', padding: 8, cursor: 'pointer' }} onClick={() => incubate(e.id)}>Incubate</button>
-              </>
-            ) : (
-              <div style={{ fontSize: 12, color: '#ffb43c', fontWeight: 600, textAlign: 'center' }}>✨ {e.reward}</div>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+import { useState } from 'react';
+
+const RARITY_COLORS = { Common: '#7a9bbf', Rare: '#5ba8ff', Epic: '#b87fff', Legendary: '#ffb43c' };
+const INITIAL = [
+  { id: '1', name: 'Cosmic Egg', rarity: 'Legendary', hatchProgress: 75, hatched: false, reward: '+500 Karma Companion' },
+  { id: '2', name: 'Forest Egg', rarity: 'Common', hatchProgress: 100, hatched: true, reward: 'Woodland Sprite' },
+  { id: '3', name: 'Astral Egg', rarity: 'Epic', hatchProgress: 30, hatched: false, reward: '+200 Karma Companion' },
+  { id: '4', name: 'Ocean Egg', rarity: 'Rare', hatchProgress: 55, hatched: false, reward: 'Sea Guardian' },
+];
+
+export function Eggs() {
+  const [eggs, setEggs] = useState(INITIAL);
+  function incubate(id) {
+    setEggs(es => es.map(e => {
+      if (e.id !== id) return e;
+      const next = Math.min(100, e.hatchProgress + 25);
+      return { ...e, hatchProgress: next, hatched: next >= 100 };
+    }));
+  }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🥚 Eggs</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Hatch eggs to discover rare OASIS companions and rewards.</p>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(160px,1fr))', gap: 16 }}>
+        {eggs.map(e => (
+          <div key={e.id} style={{ background: e.hatched ? 'rgba(255,180,60,.04)' : 'rgba(255,255,255,.04)', border: `1px solid ${e.hatched ? 'rgba(255,180,60,.3)' : 'rgba(0,200,255,.15)'}`, borderRadius: 12, padding: '18px 14px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
+            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', borderRadius: 999, padding: '3px 10px', border: `1px solid ${RARITY_COLORS[e.rarity]}44`, color: RARITY_COLORS[e.rarity] }}>{e.rarity}</div>
+            <div style={{ fontSize: 40 }}>{e.hatched ? '🐣' : '🥚'}</div>
+            <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#fff', textAlign: 'center' }}>{e.name}</div>
+            {!e.hatched ? (
+              <>
+                <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }}>
+                  <div style={{ width: '100%', height: 6, background: 'rgba(255,255,255,.1)', borderRadius: 999, overflow: 'hidden' }}>
+                    <div style={{ height: '100%', width: `${e.hatchProgress}%`, background: 'linear-gradient(90deg,#00c8ff,#0080ff)', borderRadius: 999, transition: 'width .4s' }} />
+                  </div>
+                  <div style={{ fontSize: 11, color: '#7a9bbf' }}>{e.hatchProgress}%</div>
+                </div>
+                <button style={{ width: '100%', background: 'linear-gradient(135deg,#ffb43c,#ff8c00)', border: 'none', borderRadius: 7, color: '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '.08em', padding: 8, cursor: 'pointer' }} onClick={() => incubate(e.id)}>Incubate</button>
+              </>
+            ) : (
+              <div style={{ fontSize: 12, color: '#ffb43c', fontWeight: 600, textAlign: 'center' }}>✨ {e.reward}</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/common/Game.jsx

@@ -1,36 +1,36 @@
-import { useState } from 'react';
-
-const INITIAL = [
-  { id: '1', name: 'Karma Wars', genre: 'Strategy', description: 'Battle other avatars for karma dominance in real-time.', players: 12450, karma: 50, icon: '⚔️', playing: false },
-  { id: '2', name: 'Seed Garden', genre: 'Simulation', description: 'Grow and cultivate a virtual garden to earn seeds and karma.', players: 8900, karma: 30, icon: '🌱', playing: false },
-  { id: '3', name: 'OASIS Racer', genre: 'Racing', description: 'Race across virtual worlds and earn speed karma.', players: 5600, karma: 40, icon: '🏎️', playing: false },
-  { id: '4', name: 'NFT Quest', genre: 'RPG', description: 'An epic RPG adventure to discover legendary NFTs.', players: 22000, karma: 80, icon: '🗡️', playing: false },
-];
-
-export function Game() {
-  const [games, setGames] = useState(INITIAL);
-  function toggle(id) { setGames(l => l.map(x => x.id === id ? { ...x, playing: !x.playing } : x)); }
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-      <div style={{ textAlign: 'center' }}>
-        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🎮 Games</h2>
-        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Play games in the OASIS to earn karma and rewards.</p>
-      </div>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(200px,1fr))', gap: 16 }}>
-        {games.map(g => (
-          <div key={g.id} style={{ background: g.playing ? 'rgba(0,200,255,.05)' : 'rgba(255,255,255,.04)', border: `1px solid ${g.playing ? 'rgba(0,200,255,.5)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: '18px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-            <div style={{ fontSize: 40 }}>{g.icon}</div>
-            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#5ba8ff' }}>{g.genre}</div>
-            <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{g.name}</div>
-            <div style={{ fontSize: 12, color: '#7a9bbf', lineHeight: 1.5, flex: 1 }}>{g.description}</div>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <div style={{ fontSize: 11, color: '#7a9bbf' }}>👥 {g.players.toLocaleString()}</div>
-              <div style={{ fontSize: 11, color: '#48dc82', fontWeight: 600 }}>+{g.karma} karma/hr</div>
-            </div>
-            <button onClick={() => toggle(g.id)} style={{ background: g.playing ? 'rgba(255,80,80,.2)' : 'linear-gradient(135deg,#00c8ff,#0080ff)', border: g.playing ? '1px solid rgba(255,80,80,.35)' : 'none', borderRadius: 8, color: g.playing ? '#ff6b6b' : '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: 9, cursor: 'pointer', marginTop: 4 }}>{g.playing ? '⏹ Stop' : '▶ Play'}</button>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+import { useState } from 'react';
+
+const INITIAL = [
+  { id: '1', name: 'Karma Wars', genre: 'Strategy', description: 'Battle other avatars for karma dominance in real-time.', players: 12450, karma: 50, icon: '⚔️', playing: false },
+  { id: '2', name: 'Seed Garden', genre: 'Simulation', description: 'Grow and cultivate a virtual garden to earn seeds and karma.', players: 8900, karma: 30, icon: '🌱', playing: false },
+  { id: '3', name: 'OASIS Racer', genre: 'Racing', description: 'Race across virtual worlds and earn speed karma.', players: 5600, karma: 40, icon: '🏎️', playing: false },
+  { id: '4', name: 'NFT Quest', genre: 'RPG', description: 'An epic RPG adventure to discover legendary NFTs.', players: 22000, karma: 80, icon: '🗡️', playing: false },
+];
+
+export function Game() {
+  const [games, setGames] = useState(INITIAL);
+  function toggle(id) { setGames(l => l.map(x => x.id === id ? { ...x, playing: !x.playing } : x)); }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🎮 Games</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Play games in the OASIS to earn karma and rewards.</p>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(200px,1fr))', gap: 16 }}>
+        {games.map(g => (
+          <div key={g.id} style={{ background: g.playing ? 'rgba(0,200,255,.05)' : 'rgba(255,255,255,.04)', border: `1px solid ${g.playing ? 'rgba(0,200,255,.5)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: '18px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <div style={{ fontSize: 40 }}>{g.icon}</div>
+            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#5ba8ff' }}>{g.genre}</div>
+            <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{g.name}</div>
+            <div style={{ fontSize: 12, color: '#7a9bbf', lineHeight: 1.5, flex: 1 }}>{g.description}</div>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div style={{ fontSize: 11, color: '#7a9bbf' }}>👥 {g.players.toLocaleString()}</div>
+              <div style={{ fontSize: 11, color: '#48dc82', fontWeight: 600 }}>+{g.karma} karma/hr</div>
+            </div>
+            <button onClick={() => toggle(g.id)} style={{ background: g.playing ? 'rgba(255,80,80,.2)' : 'linear-gradient(135deg,#00c8ff,#0080ff)', border: g.playing ? '1px solid rgba(255,80,80,.35)' : 'none', borderRadius: 8, color: g.playing ? '#ff6b6b' : '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: 9, cursor: 'pointer', marginTop: 4 }}>{g.playing ? '⏹ Stop' : '▶ Play'}</button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/common/HyperDrive.jsx

@@ -1,50 +1,50 @@
-import { useState } from 'react';
-
-const METRICS = [{ label: 'Throughput', value: '4.2 TB/s' }, { label: 'Latency', value: '0.3ms' }, { label: 'Uptime', value: '99.98%' }];
-const NODES = [
-  { id: '1', name: 'ONODE Alpha — US East', status: 'active', latency: 12 },
-  { id: '2', name: 'ONODE Beta — EU West', status: 'active', latency: 28 },
-  { id: '3', name: 'ONODE Gamma — Asia Pacific', status: 'idle', latency: 55 },
-];
-
-export function HyperDrive() {
-  const [active, setActive] = useState(false);
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-      <div style={{ textAlign: 'center' }}>
-        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🚀 HyperDrive</h2>
-        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Quantum-speed data layer for the OASIS Omniverse.</p>
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: active ? 'rgba(0,200,255,.05)' : 'rgba(255,255,255,.04)', border: `1px solid ${active ? 'rgba(0,200,255,.4)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: 16 }}>
-        <div style={{ fontSize: 28 }}>{active ? '⚡' : '💤'}</div>
-        <div style={{ flex: 1 }}>
-          <div style={{ fontSize: 12, color: '#7a9bbf', textTransform: 'uppercase', letterSpacing: '.06em' }}>HyperDrive Status</div>
-          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 16, color: active ? '#00c8ff' : '#7a9bbf', marginTop: 2 }}>{active ? 'ACTIVE' : 'OFFLINE'}</div>
-        </div>
-        <button onClick={() => setActive(a => !a)} style={{ background: active ? 'rgba(255,80,80,.2)' : 'linear-gradient(135deg,#00c8ff,#0080ff)', border: active ? '1px solid rgba(255,80,80,.35)' : 'none', borderRadius: 8, color: active ? '#ff6b6b' : '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '10px 20px', cursor: 'pointer' }}>{active ? 'Disengage' : 'Engage'}</button>
-      </div>
-      {active && (
-        <>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
-            {METRICS.map(m => (
-              <div key={m.label} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.1)', borderRadius: 10, padding: 14, textAlign: 'center' }}>
-                <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 20, color: '#00c8ff', fontWeight: 600 }}>{m.value}</div>
-                <div style={{ fontSize: 11, color: '#7a9bbf', marginTop: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>{m.label}</div>
-              </div>
-            ))}
-          </div>
-          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#7a9bbf', letterSpacing: '.06em', textTransform: 'uppercase' }}>Connected Nodes</div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {NODES.map(n => (
-              <div key={n.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(255,255,255,.03)', border: '1px solid rgba(0,200,255,.07)', borderRadius: 8 }}>
-                <div style={{ width: 8, height: 8, borderRadius: '50%', background: n.status === 'active' ? '#48dc82' : '#7a9bbf', boxShadow: n.status === 'active' ? '0 0 6px #48dc82' : undefined, flexShrink: 0 }} />
-                <div style={{ flex: 1, fontSize: 13, color: '#e0f0ff' }}>{n.name}</div>
-                <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 12, color: '#7a9bbf' }}>{n.latency}ms</div>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
+import { useState } from 'react';
+
+const METRICS = [{ label: 'Throughput', value: '4.2 TB/s' }, { label: 'Latency', value: '0.3ms' }, { label: 'Uptime', value: '99.98%' }];
+const NODES = [
+  { id: '1', name: 'ONODE Alpha — US East', status: 'active', latency: 12 },
+  { id: '2', name: 'ONODE Beta — EU West', status: 'active', latency: 28 },
+  { id: '3', name: 'ONODE Gamma — Asia Pacific', status: 'idle', latency: 55 },
+];
+
+export function HyperDrive() {
+  const [active, setActive] = useState(false);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🚀 HyperDrive</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Quantum-speed data layer for the OASIS Omniverse.</p>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: active ? 'rgba(0,200,255,.05)' : 'rgba(255,255,255,.04)', border: `1px solid ${active ? 'rgba(0,200,255,.4)' : 'rgba(0,200,255,.12)'}`, borderRadius: 12, padding: 16 }}>
+        <div style={{ fontSize: 28 }}>{active ? '⚡' : '💤'}</div>
+        <div style={{ flex: 1 }}>
+          <div style={{ fontSize: 12, color: '#7a9bbf', textTransform: 'uppercase', letterSpacing: '.06em' }}>HyperDrive Status</div>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 16, color: active ? '#00c8ff' : '#7a9bbf', marginTop: 2 }}>{active ? 'ACTIVE' : 'OFFLINE'}</div>
+        </div>
+        <button onClick={() => setActive(a => !a)} style={{ background: active ? 'rgba(255,80,80,.2)' : 'linear-gradient(135deg,#00c8ff,#0080ff)', border: active ? '1px solid rgba(255,80,80,.35)' : 'none', borderRadius: 8, color: active ? '#ff6b6b' : '#fff', fontFamily: "'Orbitron',sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '10px 20px', cursor: 'pointer' }}>{active ? 'Disengage' : 'Engage'}</button>
+      </div>
+      {active && (
+        <>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
+            {METRICS.map(m => (
+              <div key={m.label} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.1)', borderRadius: 10, padding: 14, textAlign: 'center' }}>
+                <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 20, color: '#00c8ff', fontWeight: 600 }}>{m.value}</div>
+                <div style={{ fontSize: 11, color: '#7a9bbf', marginTop: 4, textTransform: 'uppercase', letterSpacing: '.06em' }}>{m.label}</div>
+              </div>
+            ))}
+          </div>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 12, color: '#7a9bbf', letterSpacing: '.06em', textTransform: 'uppercase' }}>Connected Nodes</div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {NODES.map(n => (
+              <div key={n.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(255,255,255,.03)', border: '1px solid rgba(0,200,255,.07)', borderRadius: 8 }}>
+                <div style={{ width: 8, height: 8, borderRadius: '50%', background: n.status === 'active' ? '#48dc82' : '#7a9bbf', boxShadow: n.status === 'active' ? '0 0 6px #48dc82' : undefined, flexShrink: 0 }} />
+                <div style={{ flex: 1, fontSize: 13, color: '#e0f0ff' }}>{n.name}</div>
+                <div style={{ fontFamily: "'Share Tech Mono',monospace", fontSize: 12, color: '#7a9bbf' }}>{n.latency}ms</div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/common/KarmaToast.jsx

@@ -1,38 +1,38 @@
-import React, { useState, useCallback } from 'react';
-
-let _show = null;
-
-export function showKarmaToast({ message, amount, duration = 4000 }) {
-  _show?.({ message, amount, duration });
-}
-
-export default function KarmaToast() {
-  const [toast, setToast] = useState(null);
-  const timerRef = React.useRef(null);
-
-  _show = useCallback(({ message, amount, duration }) => {
-    clearTimeout(timerRef.current);
-    setToast({ message, amount });
-    timerRef.current = setTimeout(() => setToast(null), duration);
-  }, []);
-
-  if (!toast) return null;
-
-  return (
-    <div style={{
-      position: 'fixed', bottom: 28, right: 28, zIndex: 10000,
-      display: 'flex', alignItems: 'center', gap: 12,
-      background: '#0d1829', border: '1px solid rgba(0,200,255,.25)',
-      borderRadius: 12, padding: '14px 18px', boxShadow: '0 8px 32px rgba(0,0,0,.5)',
-      animation: 'oasisSlideUp .35s ease',
-    }}>
-      <span style={{ fontSize: 22 }}>⚡</span>
-      <div>
-        <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 15, fontWeight: 700, color: '#00c8ff' }}>
-          +{toast.amount} Karma
-        </div>
-        <div style={{ fontSize: 12, color: '#7a9bbf', marginTop: 2 }}>{toast.message}</div>
-      </div>
-    </div>
-  );
-}
+import React, { useState, useCallback } from 'react';
+
+let _show = null;
+
+export function showKarmaToast({ message, amount, duration = 4000 }) {
+  _show?.({ message, amount, duration });
+}
+
+export default function KarmaToast() {
+  const [toast, setToast] = useState(null);
+  const timerRef = React.useRef(null);
+
+  _show = useCallback(({ message, amount, duration }) => {
+    clearTimeout(timerRef.current);
+    setToast({ message, amount });
+    timerRef.current = setTimeout(() => setToast(null), duration);
+  }, []);
+
+  if (!toast) return null;
+
+  return (
+    <div style={{
+      position: 'fixed', bottom: 28, right: 28, zIndex: 10000,
+      display: 'flex', alignItems: 'center', gap: 12,
+      background: '#0d1829', border: '1px solid rgba(0,200,255,.25)',
+      borderRadius: 12, padding: '14px 18px', boxShadow: '0 8px 32px rgba(0,0,0,.5)',
+      animation: 'oasisSlideUp .35s ease',
+    }}>
+      <span style={{ fontSize: 22 }}>⚡</span>
+      <div>
+        <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 15, fontWeight: 700, color: '#00c8ff' }}>
+          +{toast.amount} Karma
+        </div>
+        <div style={{ fontSize: 12, color: '#7a9bbf', marginTop: 2 }}>{toast.message}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/common/Map.jsx

@@ -1,42 +1,42 @@
-import { useState } from 'react';
-
-const LOC_ICONS = { Hub: '🏛️', City: '🏙️', Nature: '🌲', 'Quest Zone': '⚔️' };
-const LOCATIONS = [
-  { id: '1', name: 'OASIS Hub Alpha', type: 'Hub', x: 20, y: 30, description: 'Central hub for OASIS operations and avatar registration.' },
-  { id: '2', name: 'Neon City', type: 'City', x: 55, y: 20, description: 'A sprawling cyberpunk metropolis in the OASIS.' },
-  { id: '3', name: 'Enchanted Forest', type: 'Nature', x: 75, y: 60, description: 'Ancient woodland teeming with rare seeds and creatures.' },
-  { id: '4', name: 'Battle Grounds', type: 'Quest Zone', x: 35, y: 70, description: 'Arena for quests, challenges, and PvP competitions.' },
-  { id: '5', name: 'Crystal Spire', type: 'Hub', x: 85, y: 35, description: 'Trading post and NFT marketplace in the sky.' },
-];
-const LEGEND = [{ icon: '🏙️', label: 'City' }, { icon: '🌲', label: 'Nature' }, { icon: '⚔️', label: 'Quest Zone' }, { icon: '🏛️', label: 'Hub' }];
-
-export function Map() {
-  const [selected, setSelected] = useState(null);
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <div style={{ textAlign: 'center' }}>
-        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🗺️ OASIS Map</h2>
-        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Explore the OASIS Omniverse.</p>
-      </div>
-      <div style={{ position: 'relative', height: 300, background: '#030d1a', border: '1px solid rgba(0,200,255,.2)', borderRadius: 12, overflow: 'hidden' }}>
-        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(0,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,.05) 1px,transparent 1px)', backgroundSize: '40px 40px' }} />
-        {LOCATIONS.map(loc => (
-          <div key={loc.id} onClick={() => setSelected(loc)} title={loc.name} style={{ position: 'absolute', left: `${loc.x}%`, top: `${loc.y}%`, transform: 'translate(-50%,-50%)', cursor: 'pointer', fontSize: 22, outline: selected?.id === loc.id ? '2px solid #00c8ff' : undefined, outlineOffset: selected?.id === loc.id ? 3 : undefined, borderRadius: '50%' }}>
-            {LOC_ICONS[loc.type] ?? '📍'}
-          </div>
-        ))}
-      </div>
-      {selected && (
-        <div style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 10, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
-          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{selected.name}</div>
-          <div style={{ fontSize: 11, color: '#5ba8ff', textTransform: 'uppercase', letterSpacing: '.06em' }}>{selected.type}</div>
-          <div style={{ fontSize: 12, color: '#7a9bbf', flex: 1 }}>{selected.description}</div>
-          <button onClick={() => setSelected(null)} style={{ background: 'transparent', border: '1px solid rgba(0,200,255,.3)', borderRadius: 7, color: '#00c8ff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, padding: '6px 14px', cursor: 'pointer' }}>Close</button>
-        </div>
-      )}
-      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
-        {LEGEND.map(t => <div key={t.label} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#7a9bbf' }}><span>{t.icon}</span><span>{t.label}</span></div>)}
-      </div>
-    </div>
-  );
-}
+import { useState } from 'react';
+
+const LOC_ICONS = { Hub: '🏛️', City: '🏙️', Nature: '🌲', 'Quest Zone': '⚔️' };
+const LOCATIONS = [
+  { id: '1', name: 'OASIS Hub Alpha', type: 'Hub', x: 20, y: 30, description: 'Central hub for OASIS operations and avatar registration.' },
+  { id: '2', name: 'Neon City', type: 'City', x: 55, y: 20, description: 'A sprawling cyberpunk metropolis in the OASIS.' },
+  { id: '3', name: 'Enchanted Forest', type: 'Nature', x: 75, y: 60, description: 'Ancient woodland teeming with rare seeds and creatures.' },
+  { id: '4', name: 'Battle Grounds', type: 'Quest Zone', x: 35, y: 70, description: 'Arena for quests, challenges, and PvP competitions.' },
+  { id: '5', name: 'Crystal Spire', type: 'Hub', x: 85, y: 35, description: 'Trading post and NFT marketplace in the sky.' },
+];
+const LEGEND = [{ icon: '🏙️', label: 'City' }, { icon: '🌲', label: 'Nature' }, { icon: '⚔️', label: 'Quest Zone' }, { icon: '🏛️', label: 'Hub' }];
+
+export function Map() {
+  const [selected, setSelected] = useState(null);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div style={{ textAlign: 'center' }}>
+        <h2 style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 20, color: '#fff', margin: '0 0 6px' }}>🗺️ OASIS Map</h2>
+        <p style={{ fontSize: 13, color: '#7a9bbf', margin: 0 }}>Explore the OASIS Omniverse.</p>
+      </div>
+      <div style={{ position: 'relative', height: 300, background: '#030d1a', border: '1px solid rgba(0,200,255,.2)', borderRadius: 12, overflow: 'hidden' }}>
+        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(0,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,.05) 1px,transparent 1px)', backgroundSize: '40px 40px' }} />
+        {LOCATIONS.map(loc => (
+          <div key={loc.id} onClick={() => setSelected(loc)} title={loc.name} style={{ position: 'absolute', left: `${loc.x}%`, top: `${loc.y}%`, transform: 'translate(-50%,-50%)', cursor: 'pointer', fontSize: 22, outline: selected?.id === loc.id ? '2px solid #00c8ff' : undefined, outlineOffset: selected?.id === loc.id ? 3 : undefined, borderRadius: '50%' }}>
+            {LOC_ICONS[loc.type] ?? '📍'}
+          </div>
+        ))}
+      </div>
+      {selected && (
+        <div style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(0,200,255,.2)', borderRadius: 10, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
+          <div style={{ fontFamily: "'Orbitron',sans-serif", fontSize: 13, color: '#fff' }}>{selected.name}</div>
+          <div style={{ fontSize: 11, color: '#5ba8ff', textTransform: 'uppercase', letterSpacing: '.06em' }}>{selected.type}</div>
+          <div style={{ fontSize: 12, color: '#7a9bbf', flex: 1 }}>{selected.description}</div>
+          <button onClick={() => setSelected(null)} style={{ background: 'transparent', border: '1px solid rgba(0,200,255,.3)', borderRadius: 7, color: '#00c8ff', fontFamily: "'Orbitron',sans-serif", fontSize: 11, fontWeight: 700, padding: '6px 14px', cursor: 'pointer' }}>Close</button>
+        </div>
+      )}
+      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+        {LEGEND.map(t => <div key={t.label} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#7a9bbf' }}><span>{t.icon}</span><span>{t.label}</span></div>)}
+      </div>
+    </div>
+  );
+}

package/src/components/common/MenuMessage.jsx

@@ -1,70 +1,70 @@
-import { useState } from 'react';
-
-const styles = {
-  shell: { fontFamily: "'Rajdhani', sans-serif", display: 'flex', flexDirection: 'column', gap: 18 },
-  header: { padding: '14px 18px', background: 'rgba(0,200,255,.07)', borderBottom: '1px solid rgba(0,200,255,.12)', display: 'flex', alignItems: 'center', gap: 12 },
-  title: { fontFamily: "'Orbitron', sans-serif", fontSize: 15, fontWeight: 700, color: '#fff', margin: 0, flex: 1 },
-  closebtn: { background: 'none', border: 'none', color: '#7a9bbf', fontSize: 18, cursor: 'pointer', lineHeight: 1 },
-  body: { padding: '18px', display: 'flex', flexDirection: 'column', gap: 12 },
-  icon: { fontSize: 44, textAlign: 'center' },
-  msg: { fontSize: 14, color: '#a8bfd8', lineHeight: 1.65, textAlign: 'center' },
-  actions: { display: 'flex', gap: 10, justifyContent: 'center', marginTop: 4 },
-  btn: { background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '9px 22px', cursor: 'pointer' },
-  btnGhost: { background: 'transparent', border: '1px solid rgba(0,200,255,.3)', borderRadius: 8, color: '#00c8ff', fontFamily: "'Orbitron', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '9px 22px', cursor: 'pointer' },
-  badge: { display: 'inline-block', background: 'rgba(0,200,255,.12)', border: '1px solid rgba(0,200,255,.3)', color: '#00c8ff', borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '.08em', padding: '3px 12px', textTransform: 'uppercase', textAlign: 'center' },
-};
-
-/**
- * MenuMessage — a dismissable banner/message panel for menu-level notices.
- * Props:
- *   title        string  — header title
- *   message      string  — body copy
- *   icon         string  — emoji icon
- *   type         'info' | 'success' | 'warning' | 'error'
- *   badge        string  — optional badge text
- *   actions      Array<{ label, onClick }> — action buttons
- *   onDismiss    fn      — called when closed
- */
-export function MenuMessage({
-  title = 'Notice',
-  message = '',
-  icon = 'ℹ️',
-  type = 'info',
-  badge,
-  actions = [],
-  onDismiss,
-}) {
-  const [visible, setVisible] = useState(true);
-  if (!visible) return null;
-
-  const typeColors = {
-    info:    { border: 'rgba(0,200,255,.25)', bg: 'rgba(0,200,255,.05)' },
-    success: { border: 'rgba(72,220,130,.25)', bg: 'rgba(72,220,130,.05)' },
-    warning: { border: 'rgba(255,180,60,.25)', bg: 'rgba(255,180,60,.05)' },
-    error:   { border: 'rgba(255,80,80,.25)', bg: 'rgba(255,80,80,.05)' },
-  };
-  const colors = typeColors[type] || typeColors.info;
-
-  function dismiss() { setVisible(false); onDismiss?.(); }
-
-  return (
-    <div style={{ ...styles.shell, border: `1px solid ${colors.border}`, borderRadius: 12, background: colors.bg, overflow: 'hidden' }}>
-      <div style={styles.header}>
-        <span style={{ fontSize: 20 }}>{icon}</span>
-        <span style={styles.title}>{title}</span>
-        {badge && <span style={styles.badge}>{badge}</span>}
-        <button style={styles.closebtn} onClick={dismiss} aria-label="Dismiss">✕</button>
-      </div>
-      <div style={styles.body}>
-        {message && <p style={styles.msg}>{message}</p>}
-        {actions.length > 0 && (
-          <div style={styles.actions}>
-            {actions.map((a, i) => (
-              <button key={i} style={i === 0 ? styles.btn : styles.btnGhost} onClick={a.onClick}>{a.label}</button>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+import { useState } from 'react';
+
+const styles = {
+  shell: { fontFamily: "'Rajdhani', sans-serif", display: 'flex', flexDirection: 'column', gap: 18 },
+  header: { padding: '14px 18px', background: 'rgba(0,200,255,.07)', borderBottom: '1px solid rgba(0,200,255,.12)', display: 'flex', alignItems: 'center', gap: 12 },
+  title: { fontFamily: "'Orbitron', sans-serif", fontSize: 15, fontWeight: 700, color: '#fff', margin: 0, flex: 1 },
+  closebtn: { background: 'none', border: 'none', color: '#7a9bbf', fontSize: 18, cursor: 'pointer', lineHeight: 1 },
+  body: { padding: '18px', display: 'flex', flexDirection: 'column', gap: 12 },
+  icon: { fontSize: 44, textAlign: 'center' },
+  msg: { fontSize: 14, color: '#a8bfd8', lineHeight: 1.65, textAlign: 'center' },
+  actions: { display: 'flex', gap: 10, justifyContent: 'center', marginTop: 4 },
+  btn: { background: 'linear-gradient(135deg,#00c8ff,#0080ff)', border: 'none', borderRadius: 8, color: '#fff', fontFamily: "'Orbitron', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '9px 22px', cursor: 'pointer' },
+  btnGhost: { background: 'transparent', border: '1px solid rgba(0,200,255,.3)', borderRadius: 8, color: '#00c8ff', fontFamily: "'Orbitron', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: '.08em', padding: '9px 22px', cursor: 'pointer' },
+  badge: { display: 'inline-block', background: 'rgba(0,200,255,.12)', border: '1px solid rgba(0,200,255,.3)', color: '#00c8ff', borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: '.08em', padding: '3px 12px', textTransform: 'uppercase', textAlign: 'center' },
+};
+
+/**
+ * MenuMessage — a dismissable banner/message panel for menu-level notices.
+ * Props:
+ *   title        string  — header title
+ *   message      string  — body copy
+ *   icon         string  — emoji icon
+ *   type         'info' | 'success' | 'warning' | 'error'
+ *   badge        string  — optional badge text
+ *   actions      Array<{ label, onClick }> — action buttons
+ *   onDismiss    fn      — called when closed
+ */
+export function MenuMessage({
+  title = 'Notice',
+  message = '',
+  icon = 'ℹ️',
+  type = 'info',
+  badge,
+  actions = [],
+  onDismiss,
+}) {
+  const [visible, setVisible] = useState(true);
+  if (!visible) return null;
+
+  const typeColors = {
+    info:    { border: 'rgba(0,200,255,.25)', bg: 'rgba(0,200,255,.05)' },
+    success: { border: 'rgba(72,220,130,.25)', bg: 'rgba(72,220,130,.05)' },
+    warning: { border: 'rgba(255,180,60,.25)', bg: 'rgba(255,180,60,.05)' },
+    error:   { border: 'rgba(255,80,80,.25)', bg: 'rgba(255,80,80,.05)' },
+  };
+  const colors = typeColors[type] || typeColors.info;
+
+  function dismiss() { setVisible(false); onDismiss?.(); }
+
+  return (
+    <div style={{ ...styles.shell, border: `1px solid ${colors.border}`, borderRadius: 12, background: colors.bg, overflow: 'hidden' }}>
+      <div style={styles.header}>
+        <span style={{ fontSize: 20 }}>{icon}</span>
+        <span style={styles.title}>{title}</span>
+        {badge && <span style={styles.badge}>{badge}</span>}
+        <button style={styles.closebtn} onClick={dismiss} aria-label="Dismiss">✕</button>
+      </div>
+      <div style={styles.body}>
+        {message && <p style={styles.msg}>{message}</p>}
+        {actions.length > 0 && (
+          <div style={styles.actions}>
+            {actions.map((a, i) => (
+              <button key={i} style={i === 0 ? styles.btn : styles.btnGhost} onClick={a.onClick}>{a.label}</button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}