@oasisomniverse/svelte 1.0.0

package/src/components/Login.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { login } from './oasisStore'
+
+  const dispatch = createEventDispatcher<{ switchTo: 'signup' | 'forgot'; loggedIn: void }>()
+
+  let username = ''
+  let password = ''
+  let rememberMe = false
+  let showPwd = false
+  let loading = false
+  let error = ''
+
+  async function submit() {
+    if (!username || !password) { error = 'Please fill in all fields.'; return }
+    loading = true
+    error = ''
+    try {
+      await login(username, password)
+      dispatch('loggedIn')
+    } catch (e: any) {
+      error = e?.message ?? 'Login failed. Please check your credentials.'
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<div class="oasis-auth-form">
+  <div class="oasis-auth-header">
+    <h2 class="oasis-auth-title">Beam In</h2>
+    <p class="oasis-auth-sub">
+      Don't have an account?
+      <a class="oasis-link" href="#" on:click|preventDefault={() => dispatch('switchTo', 'signup')}>Sign Up</a>
+    </p>
+  </div>
+
+  {#if error}
+    <div class="oasis-auth-error">{error}</div>
+  {/if}
+
+  <div class="oasis-field">
+    <label class="oasis-label" for="oasis-login-username">Username</label>
+    <input class="oasis-input" id="oasis-login-username" type="text" bind:value={username} placeholder="yourusername" autocomplete="username" />
+  </div>
+
+  <div class="oasis-field">
+    <label class="oasis-label" for="oasis-login-password">Password</label>
+    <div class="oasis-input-wrap">
+      <input class="oasis-input" id="oasis-login-password" type={showPwd ? 'text' : 'password'} bind:value={password} placeholder="••••••••" autocomplete="current-password" />
+      <button class="oasis-pwd-toggle" type="button" on:click={() => showPwd = !showPwd} aria-label={showPwd ? 'Hide password' : 'Show password'}>
+        {showPwd ? '🙈' : '👁️'}
+      </button>
+    </div>
+    <a class="oasis-link oasis-link--small" href="#" on:click|preventDefault={() => dispatch('switchTo', 'forgot')}>Forgot Password?</a>
+  </div>
+
+  <div class="oasis-field oasis-field--row">
+    <input class="oasis-checkbox" id="oasis-remember" type="checkbox" bind:checked={rememberMe} />
+    <label class="oasis-label oasis-label--inline" for="oasis-remember">Remember Me</label>
+  </div>
+
+  <button class="oasis-btn" type="button" disabled={loading} on:click={submit}>
+    {loading ? 'Connecting…' : 'Beam In'}
+  </button>
+</div>
+
+<style>
+.oasis-auth-form { display:flex; flex-direction:column; gap:20px; }
+.oasis-auth-header { text-align:center; }
+.oasis-auth-title { font-family:'Orbitron',sans-serif; font-size:22px; color:#fff; margin:0 0 6px; }
+.oasis-auth-sub { font-size:13px; color:#7a9bbf; margin:0; }
+.oasis-auth-error { background:rgba(255,80,80,.12); border:1px solid rgba(255,80,80,.3); color:#ff6b6b; border-radius:8px; padding:10px 14px; font-size:13px; }
+.oasis-field { display:flex; flex-direction:column; gap:6px; }
+.oasis-field--row { flex-direction:row; align-items:center; gap:10px; }
+.oasis-label { font-size:12px; font-weight:600; letter-spacing:.06em; color:#7a9bbf; text-transform:uppercase; }
+.oasis-label--inline { text-transform:none; font-size:13px; color:#a8bfd8; }
+.oasis-input-wrap { position:relative; }
+.oasis-input { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(0,200,255,.2); border-radius:8px; padding:10px 14px; color:#fff; font-size:14px; outline:none; box-sizing:border-box; transition:border-color .2s; }
+.oasis-input:focus { border-color:rgba(0,200,255,.5); }
+.oasis-input-wrap .oasis-input { padding-right:44px; }
+.oasis-pwd-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; padding:0; line-height:1; }
+.oasis-checkbox { width:16px; height:16px; accent-color:#00c8ff; cursor:pointer; flex-shrink:0; }
+.oasis-link { color:#00c8ff; text-decoration:none; cursor:pointer; }
+.oasis-link--small { font-size:12px; margin-top:2px; }
+.oasis-btn { background:linear-gradient(135deg,#00c8ff,#0080ff); border:none; border-radius:8px; color:#fff; font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; letter-spacing:.08em; padding:12px; cursor:pointer; transition:opacity .2s; }
+.oasis-btn:disabled { opacity:.5; cursor:not-allowed; }
+</style>

package/src/components/Map.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  interface Location { id: string; name: string; type: string; x: number; y: number; description: string }
+  let selected: Location | null = null
+  const locations: Location[] = [
+    { 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 types = [{ icon: '🏙️', label: 'City' }, { icon: '🌲', label: 'Nature' }, { icon: '⚔️', label: 'Quest Zone' }, { icon: '🏛️', label: 'Hub' }]
+  const icons: Record<string, string> = { Hub: '🏛️', City: '🏙️', Nature: '🌲', 'Quest Zone': '⚔️' }
+  function locIcon(type: string) { return icons[type] ?? '📍' }
+</script>
+<div class="map-shell">
+  <div class="map-header"><h2 class="map-title">🗺️ OASIS Map</h2><p class="map-sub">Explore the OASIS Omniverse.</p></div>
+  <div class="map-viewport">
+    <div class="map-grid-bg"></div>
+    {#each locations as loc (loc.id)}
+      <div class="map-pin" class:map-pin--selected={selected?.id === loc.id} style="left:{loc.x}%;top:{loc.y}%" on:click={() => selected = loc} title={loc.name}>
+        <div class="map-pin-dot">{locIcon(loc.type)}</div>
+      </div>
+    {/each}
+  </div>
+  {#if selected}
+    <div class="map-detail">
+      <div class="map-detail-name">{selected.name}</div>
+      <div class="map-detail-type">{selected.type}</div>
+      <div class="map-detail-desc">{selected.description}</div>
+      <button class="map-btn" on:click={() => selected = null}>Close</button>
+    </div>
+  {/if}
+  <div class="map-legend">
+    {#each types as t}
+      <div class="map-legend-item"><span>{t.icon}</span><span>{t.label}</span></div>
+    {/each}
+  </div>
+</div>
+<style>
+.map-shell{display:flex;flex-direction:column;gap:16px}.map-header{text-align:center}.map-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.map-sub{font-size:13px;color:#7a9bbf;margin:0}.map-viewport{position:relative;height:300px;background:#030d1a;border:1px solid rgba(0,200,255,.2);border-radius:12px;overflow:hidden}.map-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,.05) 1px,transparent 1px);background-size:40px 40px}.map-pin{position:absolute;transform:translate(-50%,-50%);cursor:pointer;transition:transform .2s}.map-pin:hover{transform:translate(-50%,-50%) scale(1.2)}.map-pin--selected :global(.map-pin-dot){outline:2px solid #00c8ff;outline-offset:3px;border-radius:50%}.map-pin-dot{font-size:22px}.map-detail{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.2);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px}.map-detail-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;flex:0 0 auto}.map-detail-type{font-size:11px;color:#5ba8ff;text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto}.map-detail-desc{font-size:12px;color:#7a9bbf;flex:1}.map-btn{background:transparent;border:1px solid rgba(0,200,255,.3);border-radius:7px;color:#00c8ff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;padding:6px 14px;cursor:pointer}.map-legend{display:flex;gap:16px;flex-wrap:wrap}.map-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#7a9bbf}
+</style>

package/src/components/MenuMessage.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let title = 'Notice';
+  export let message = '';
+  export let icon = 'ℹ️';
+  export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
+  export let badge = '';
+  export let actions: Array<{ label: string; onClick: () => void }> = [];
+
+  const dispatch = createEventDispatcher();
+
+  const TYPE_COLORS = {
+    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)' },
+  };
+
+  let visible = true;
+  $: colors = TYPE_COLORS[type] ?? TYPE_COLORS.info;
+
+  function dismiss() { visible = false; dispatch('dismissed'); }
+</script>
+
+{#if visible}
+  <div class="mm-shell" style="border: 1px solid {colors.border}; background: {colors.bg}">
+    <div class="mm-header">
+      <span class="mm-icon">{icon}</span>
+      <span class="mm-title">{title}</span>
+      {#if badge}<span class="mm-badge">{badge}</span>{/if}
+      <button class="mm-close" on:click={dismiss} aria-label="Dismiss">✕</button>
+    </div>
+    <div class="mm-body">
+      {#if message}<p class="mm-msg">{message}</p>{/if}
+      {#if actions.length > 0}
+        <div class="mm-actions">
+          {#each actions as a, i}
+            <button class={i === 0 ? 'mm-btn' : 'mm-btn-ghost'} on:click={a.onClick}>{a.label}</button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+.mm-shell { font-family: 'Rajdhani', sans-serif; border-radius: 12px; overflow: hidden; }
+.mm-header { padding: 14px 18px; background: rgba(0,200,255,.07); border-bottom: 1px solid rgba(0,200,255,.12); display: flex; align-items: center; gap: 12px; }
+.mm-icon { font-size: 20px; }
+.mm-title { font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 700; color: #fff; flex: 1; }
+.mm-badge { display: inline-block; background: rgba(0,200,255,.12); border: 1px solid rgba(0,200,255,.3); color: #00c8ff; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 3px 12px; text-transform: uppercase; }
+.mm-close { background: none; border: none; color: #7a9bbf; font-size: 18px; cursor: pointer; line-height: 1; }
+.mm-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
+.mm-msg { font-size: 14px; color: #a8bfd8; line-height: 1.65; text-align: center; margin: 0; }
+.mm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
+.mm-btn { background: linear-gradient(135deg,#00c8ff,#0080ff); border: none; border-radius: 8px; color: #fff; font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 9px 22px; cursor: pointer; }
+.mm-btn-ghost { background: transparent; border: 1px solid rgba(0,200,255,.3); border-radius: 8px; color: #00c8ff; font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 9px 22px; cursor: pointer; }
+</style>

package/src/components/Messaging.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  interface Msg { id: string; from: string; preview: string; time: string; read: boolean; body: string }
+  let searchQuery = '', reply = '', selected: Msg | null = null
+  let messages: Msg[] = [
+    { id: '1', from: 'OASIS Team', preview: 'Welcome to the OASIS network!', time: 'Just now', read: false, body: 'Welcome to the OASIS Omniverse! Your avatar is now connected to the network. Explore NFTs, karma, quests and more.' },
+    { id: '2', from: 'System', preview: 'Your karma level has increased.', time: '2h ago', read: true, body: 'Congratulations! Your karma level has increased. Keep contributing to the community to unlock new features and NFTs.' },
+  ]
+  $: filtered = messages.filter(m => m.from.toLowerCase().includes(searchQuery.toLowerCase()) || m.preview.toLowerCase().includes(searchQuery.toLowerCase()))
+  function open(m: Msg) { m.read = true; selected = { ...m }; reply = ''; messages = [...messages] }
+  function sendReply() { if (!reply.trim()) return; reply = '' }
+</script>
+<div class="msg-shell">
+  <div class="msg-sidebar">
+    <div class="msg-search-wrap"><input class="msg-search" type="text" bind:value={searchQuery} placeholder="Search messages…" /></div>
+    <div class="msg-list">
+      {#each filtered as m (m.id)}
+        <div class="msg-item" class:msg-item--active={selected?.id === m.id} class:msg-item--unread={!m.read} on:click={() => open(m)}>
+          <div class="msg-from">{m.from}</div>
+          <div class="msg-preview">{m.preview}</div>
+          <div class="msg-time">{m.time}</div>
+        </div>
+      {/each}
+      {#if filtered.length === 0}<div class="msg-empty">No messages found.</div>{/if}
+    </div>
+  </div>
+  <div class="msg-main">
+    {#if selected}
+      <div class="msg-detail-header"><div class="msg-detail-from">{selected.from}</div><div class="msg-detail-time">{selected.time}</div></div>
+      <div class="msg-body">{selected.body}</div>
+      <div class="msg-reply-wrap">
+        <textarea class="msg-reply-input" bind:value={reply} placeholder="Write a reply…" rows="3"></textarea>
+        <button class="oasis-btn" disabled={!reply.trim()} on:click={sendReply}>Send</button>
+      </div>
+    {:else}
+      <div class="msg-placeholder">📬 Select a message to read it</div>
+    {/if}
+  </div>
+</div>
+<style>
+.msg-shell{display:grid;grid-template-columns:280px 1fr;height:480px;border:1px solid rgba(0,200,255,.15);border-radius:12px;overflow:hidden}.msg-sidebar{border-right:1px solid rgba(0,200,255,.1);display:flex;flex-direction:column}.msg-search-wrap{padding:12px;border-bottom:1px solid rgba(0,200,255,.1)}.msg-search{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:8px 12px;color:#fff;font-size:13px;outline:none;box-sizing:border-box}.msg-list{flex:1;overflow-y:auto}.msg-item{padding:12px 14px;border-bottom:1px solid rgba(0,200,255,.07);cursor:pointer;transition:background .15s}.msg-item:hover{background:rgba(0,200,255,.06)}.msg-item--active{background:rgba(0,200,255,.1);border-left:3px solid #00c8ff}.msg-item--unread .msg-from{font-weight:700}.msg-from{font-size:13px;color:#e0f0ff;margin-bottom:3px}.msg-preview{font-size:12px;color:#7a9bbf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-time{font-size:11px;color:#4a6a88;margin-top:4px}.msg-empty{padding:24px;text-align:center;color:#4a6a88;font-size:13px}.msg-main{display:flex;flex-direction:column;background:rgba(0,0,0,.2)}.msg-placeholder{display:flex;align-items:center;justify-content:center;flex:1;color:#4a6a88;font-size:14px}.msg-detail-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(0,200,255,.1)}.msg-detail-from{font-family:'Orbitron',sans-serif;font-size:14px;color:#fff}.msg-detail-time{font-size:12px;color:#4a6a88}.msg-body{flex:1;padding:20px;font-size:14px;color:#a8bfd8;line-height:1.7;overflow-y:auto}.msg-reply-wrap{padding:16px;border-top:1px solid rgba(0,200,255,.1);display:flex;flex-direction:column;gap:10px}.msg-reply-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;resize:none;box-sizing:border-box;font-family:inherit}.oasis-btn{align-self:flex-end;background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:9px 24px;cursor:pointer;transition:opacity .2s}.oasis-btn:disabled{opacity:.4;cursor:not-allowed}
+</style>

package/src/components/Mission.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  interface Mission { id: string; title: string; description: string; reward: number; status: 'available' | 'active' | 'complete' }
+  let missions: Mission[] = [
+    { id: '1', title: 'First Contact', description: 'Log into OASIS for the first time and explore the hub.', reward: 100, status: 'complete' },
+    { id: '2', title: 'Karma Cultivator', description: 'Earn 500 karma through positive actions in the OASIS.', reward: 250, status: 'active' },
+    { id: '3', title: 'NFT Hunter', description: 'Acquire your first rare NFT from the marketplace.', reward: 400, status: 'available' },
+    { id: '4', title: 'Seed Planter', description: 'Plant 3 seeds and nurture them to full growth.', reward: 150, status: 'available' },
+  ]
+  function statusLabel(s: string) { return s === 'available' ? 'Available' : s === 'active' ? 'In Progress' : 'Complete' }
+  function accept(m: Mission) { m.status = 'active'; missions = [...missions] }
+  function complete(m: Mission) { m.status = 'complete'; missions = [...missions] }
+</script>
+<div class="mis-shell">
+  <div class="mis-header"><h2 class="mis-title">🎯 Missions</h2><p class="mis-sub">Complete missions to earn karma and unlock rewards.</p></div>
+  <div class="mis-list">
+    {#each missions as m (m.id)}
+      <div class="mis-card mis-card--{m.status}">
+        <div class="mis-left"><div class="mis-title-text">{m.title}</div><div class="mis-desc">{m.description}</div></div>
+        <div class="mis-right">
+          <div class="mis-reward">+{m.reward} karma</div>
+          <div class="mis-status-badge mis-status-badge--{m.status}">{statusLabel(m.status)}</div>
+          {#if m.status === 'available'}<button class="mis-btn" on:click={() => accept(m)}>Accept</button>{/if}
+          {#if m.status === 'active'}<button class="mis-btn mis-btn--complete" on:click={() => complete(m)}>Complete</button>{/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+<style>
+.mis-shell{display:flex;flex-direction:column;gap:18px}.mis-header{text-align:center}.mis-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.mis-sub{font-size:13px;color:#7a9bbf;margin:0}.mis-list{display:flex;flex-direction:column;gap:12px}.mis-card{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px}.mis-card--active{border-color:rgba(0,200,255,.35);background:rgba(0,200,255,.05)}.mis-card--complete{border-color:rgba(72,220,130,.25);background:rgba(72,220,130,.04);opacity:.7}.mis-left{flex:1}.mis-title-text{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:4px}.mis-desc{font-size:12px;color:#7a9bbf;line-height:1.5}.mis-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}.mis-reward{font-size:12px;color:#48dc82;font-weight:600;white-space:nowrap}.mis-status-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}.mis-status-badge--available{color:#7a9bbf;border-color:rgba(122,155,191,.3)}.mis-status-badge--active{color:#00c8ff;border-color:rgba(0,200,255,.35)}.mis-status-badge--complete{color:#48dc82;border-color:rgba(72,220,130,.3)}.mis-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:7px 16px;cursor:pointer;white-space:nowrap}.mis-btn--complete{background:linear-gradient(135deg,#48dc82,#00aa55)}
+</style>

package/src/components/NFT.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  interface NFT { id: string; name: string; rarity: string; type: string; karma: number; image: string }
+  const tabs = ['All', 'Avatar', 'Land', 'Item', 'Art']
+  let activeTab = 'All'
+  let nfts: NFT[] = [
+    { id: '1', name: 'Cosmic Warrior', rarity: 'Legendary', type: 'Avatar', karma: 500, image: '⚔️' },
+    { id: '2', name: 'Forest Realm', rarity: 'Epic', type: 'Land', karma: 250, image: '🌲' },
+    { id: '3', name: 'Quantum Blade', rarity: 'Rare', type: 'Item', karma: 100, image: '🗡️' },
+    { id: '4', name: 'Nebula Portrait', rarity: 'Common', type: 'Art', karma: 30, image: '🎨' },
+    { id: '5', name: 'Light Keeper', rarity: 'Epic', type: 'Avatar', karma: 200, image: '🌟' },
+    { id: '6', name: 'Sky Citadel', rarity: 'Rare', type: 'Land', karma: 120, image: '🏰' },
+  ]
+  $: filtered = activeTab === 'All' ? nfts : nfts.filter(n => n.type === activeTab)
+</script>
+<div class="nft-shell">
+  <div class="nft-header"><h2 class="nft-title">🖼️ NFTs</h2><p class="nft-sub">Your OASIS non-fungible token collection.</p></div>
+  <div class="nft-tabs">
+    {#each tabs as t}
+      <button class="nft-tab" class:nft-tab--active={activeTab === t} on:click={() => activeTab = t}>{t}</button>
+    {/each}
+  </div>
+  <div class="nft-grid">
+    {#each filtered as n (n.id)}
+      <div class="nft-card">
+        <div class="nft-img">{n.image}</div>
+        <div class="nft-rarity nft-rarity--{n.rarity.toLowerCase()}">{n.rarity}</div>
+        <div class="nft-name">{n.name}</div>
+        <div class="nft-type">{n.type}</div>
+        <div class="nft-karma">+{n.karma} karma</div>
+      </div>
+    {/each}
+    {#if filtered.length === 0}<div class="nft-empty">No NFTs in this category.</div>{/if}
+  </div>
+</div>
+<style>
+.nft-shell{display:flex;flex-direction:column;gap:18px}.nft-header{text-align:center}.nft-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.nft-sub{font-size:13px;color:#7a9bbf;margin:0}.nft-tabs{display:flex;gap:8px;flex-wrap:wrap}.nft-tab{background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;color:#7a9bbf;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;padding:7px 16px;cursor:pointer;transition:all .2s}.nft-tab--active{background:rgba(0,200,255,.15);border-color:#00c8ff;color:#00c8ff}.nft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.nft-card{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .2s}.nft-card:hover{border-color:rgba(0,200,255,.35)}.nft-img{font-size:44px}.nft-rarity{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid currentColor}.nft-rarity--common{color:#7a9bbf;border-color:rgba(122,155,191,.3)}.nft-rarity--rare{color:#5ba8ff;border-color:rgba(91,168,255,.3)}.nft-rarity--epic{color:#b87fff;border-color:rgba(184,127,255,.3)}.nft-rarity--legendary{color:#ffb43c;border-color:rgba(255,180,60,.3)}.nft-name{font-family:'Orbitron',sans-serif;font-size:12px;color:#fff;text-align:center}.nft-type{font-size:11px;color:#7a9bbf}.nft-karma{font-size:12px;color:#48dc82;font-weight:600}.nft-empty{grid-column:1/-1;text-align:center;color:#4a6a88;padding:32px;font-size:14px}
+</style>

package/src/components/NavBar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import AvatarConnect from './AvatarConnect.svelte'
+
+  let menuOpen = false
+  let scrolled = false
+
+  const links = [
+    { href: '#mission', label: 'Mission' },
+    { href: '#disciplines', label: 'Disciplines' },
+    { href: '#courses', label: 'Courses' },
+    { href: '#origins', label: 'Origins' },
+    { href: '#forum', label: 'Forum' },
+    { href: '#features', label: 'Features' },
+    { href: '#ecosystem', label: 'Ecosystem' },
+    { href: '#karma', label: 'Karma' },
+  ]
+
+  function onScroll() { scrolled = window.scrollY > 40 }
+  onMount(() => window.addEventListener('scroll', onScroll))
+  onDestroy(() => window.removeEventListener('scroll', onScroll))
+</script>
+
+<nav class="nav" class:scrolled>
+  <a class="nav-brand" href="#">
+    <span class="brand-icon">⚖</span>
+    <span>JUSTICE <em>LEAGUE</em> ACADEMY</span>
+  </a>
+  <button class="nav-toggle" class:open={menuOpen} on:click={() => menuOpen = !menuOpen} aria-label="Menu">
+    <span /><span /><span />
+  </button>
+  <ul class="nav-links" class:open={menuOpen}>
+    {#each links as link}
+      <li><a href={link.href} on:click={() => menuOpen = false}>{link.label}</a></li>
+    {/each}
+  </ul>
+  <div class="nav-right">
+    <AvatarConnect />
+  </div>
+</nav>
+
+<style>
+  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; background: rgba(3,7,20,.88); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(59,130,246,.12); transition: padding .3s; }
+  .nav.scrolled { padding: 12px 40px; }
+  .nav-brand { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
+  .brand-icon { color: #3b82f6; font-size: 16px; }
+  :global(.nav-brand em) { color: #a855f7; font-style: normal; }
+  .nav-links { display: flex; gap: 16px; list-style: none; padding: 0; }
+  .nav-links :global(a) { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .07em; color: #a8bfd8; text-decoration: none; text-transform: uppercase; transition: color .2s; }
+  .nav-links :global(a:hover) { color: #3b82f6; }
+  .nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+  .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; }
+  .nav-toggle span { display: block; width: 100%; height: 2px; background: #a8bfd8; transition: transform .25s, opacity .25s; }
+  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+  .nav-toggle.open span:nth-child(2) { opacity: 0; }
+  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+  @media (max-width: 1000px) {
+    .nav-toggle { display: flex; }
+    .nav-links { position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw,320px); flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; padding: 76px 32px 24px; overflow-y: auto; background: rgba(3,7,20,.97); backdrop-filter: blur(12px); border-left: 1px solid rgba(59,130,246,.12); transform: translateX(100%); transition: transform .3s ease; }
+    .nav-links.open { transform: translateX(0); }
+    .nav { padding: 14px 20px; }
+  }
+</style>

package/src/components/OApp.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  interface OApp { id: string; name: string; description: string; category: string; icon: string; karma: number; launched: boolean }
+  let search = ''
+  let oapps: OApp[] = [
+    { id: '1', name: 'OLAND', description: 'Virtual land management and terraforming in the OASIS.', category: 'Metaverse', icon: '🌍', karma: 200, launched: false },
+    { id: '2', name: 'OMARKET', description: 'Decentralised marketplace for NFTs and digital goods.', category: 'Commerce', icon: '🛒', karma: 150, launched: false },
+    { id: '3', name: 'OCHAT', description: 'Encrypted peer-to-peer messaging on the ONET.', category: 'Social', icon: '💬', karma: 80, launched: false },
+    { id: '4', name: 'OQUESTS', description: 'Daily quests and challenges for karma rewards.', category: 'Gaming', icon: '⚔️', karma: 300, launched: false },
+  ]
+  $: filtered = oapps.filter(a => a.name.toLowerCase().includes(search.toLowerCase()) || a.description.toLowerCase().includes(search.toLowerCase()))
+  function toggle(a: OApp) { a.launched = !a.launched; oapps = [...oapps] }
+</script>
+<div class="oapp-shell">
+  <div class="oapp-header"><h2 class="oapp-title">📱 OApps</h2><p class="oapp-sub">Decentralised apps built on the OASIS network.</p></div>
+  <input class="oasis-input" type="text" bind:value={search} placeholder="Search OApps…" />
+  <div class="oapp-grid">
+    {#each filtered as a (a.id)}
+      <div class="oapp-card">
+        <div class="oapp-icon">{a.icon}</div>
+        <div class="oapp-info">
+          <div class="oapp-name">{a.name}</div>
+          <div class="oapp-cat">{a.category}</div>
+          <div class="oapp-desc">{a.description}</div>
+        </div>
+        <div class="oapp-footer">
+          <div class="oapp-karma">+{a.karma} karma</div>
+          <button class="oapp-btn" class:oapp-btn--launched={a.launched} on:click={() => toggle(a)}>{a.launched ? 'Quit' : 'Launch'}</button>
+        </div>
+      </div>
+    {/each}
+    {#if filtered.length === 0}<div class="oapp-empty">No OApps found.</div>{/if}
+  </div>
+</div>
+<style>
+.oapp-shell{display:flex;flex-direction:column;gap:18px}.oapp-header{text-align:center}.oapp-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.oapp-sub{font-size:13px;color:#7a9bbf;margin:0}.oasis-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.2);border-radius:8px;padding:10px 14px;color:#fff;font-size:14px;outline:none;box-sizing:border-box;transition:border-color .2s;font-family:inherit}.oasis-input:focus{border-color:rgba(0,200,255,.5)}.oapp-grid{display:flex;flex-direction:column;gap:12px}.oapp-card{display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px;transition:border-color .2s}.oapp-card:hover{border-color:rgba(0,200,255,.3)}.oapp-icon{font-size:32px;flex-shrink:0}.oapp-info{flex:1}.oapp-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:3px}.oapp-cat{font-size:11px;color:#5ba8ff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}.oapp-desc{font-size:12px;color:#7a9bbf;line-height:1.5}.oapp-footer{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}.oapp-karma{font-size:11px;color:#48dc82;font-weight:600;white-space:nowrap}.oapp-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;padding:7px 16px;cursor:pointer;transition:opacity .2s;white-space:nowrap}.oapp-btn--launched{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.4);color:#ff6b6b}.oapp-empty{text-align:center;color:#4a6a88;font-size:14px;padding:32px}
+</style>

package/src/components/ONET.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  let connected = false
+  const stats = [{ label: 'Peers', value: '2,847' }, { label: 'Speed', value: '1.2 Gb/s' }, { label: 'Encrypted', value: '100%' }]
+  const peers = [
+    { id: '1', name: 'AvatarX_7291', location: 'New York, US', ping: 14 },
+    { id: '2', name: 'StarKeeper_99', location: 'London, UK', ping: 32 },
+    { id: '3', name: 'NeonRider_404', location: 'Tokyo, JP', ping: 67 },
+  ]
+</script>
+<div class="onet-shell">
+  <div class="onet-header"><h2 class="onet-title">🌐 ONET</h2><p class="onet-sub">The OASIS decentralised internet layer.</p></div>
+  <div class="onet-status-card" class:onet-status--active={connected}>
+    <div class="onet-status-dot" class:onet-status-dot--active={connected}></div>
+    <div class="onet-status-info"><div class="onet-status-label">ONET Connection</div><div class="onet-status-val">{connected ? 'Connected' : 'Disconnected'}</div></div>
+    <button class="onet-btn" on:click={() => connected = !connected}>{connected ? 'Disconnect' : 'Connect'}</button>
+  </div>
+  {#if connected}
+    <div class="onet-stats">
+      {#each stats as s}<div class="onet-stat"><div class="onet-stat-val">{s.value}</div><div class="onet-stat-label">{s.label}</div></div>{/each}
+    </div>
+    <div class="onet-peers-header">Active Peers</div>
+    <div class="onet-peers">
+      {#each peers as p (p.id)}
+        <div class="onet-peer">
+          <div class="onet-peer-icon">👤</div>
+          <div class="onet-peer-info"><div class="onet-peer-name">{p.name}</div><div class="onet-peer-location">{p.location}</div></div>
+          <div class="onet-peer-ping">{p.ping}ms</div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+<style>
+.onet-shell{display:flex;flex-direction:column;gap:18px}.onet-header{text-align:center}.onet-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.onet-sub{font-size:13px;color:#7a9bbf;margin:0}.onet-status-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:16px}.onet-status--active{border-color:rgba(72,220,130,.3)}.onet-status-dot{width:12px;height:12px;border-radius:50%;background:#4a6a88;flex-shrink:0;transition:all .3s}.onet-status-dot--active{background:#48dc82;box-shadow:0 0 10px #48dc82}.onet-status-info{flex:1}.onet-status-label{font-size:12px;color:#7a9bbf;text-transform:uppercase;letter-spacing:.06em}.onet-status-val{font-family:'Orbitron',sans-serif;font-size:14px;color:#fff;margin-top:3px}.onet-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:9px 18px;cursor:pointer}.onet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.onet-stat{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:14px;text-align:center}.onet-stat-val{font-family:'Share Tech Mono',monospace;font-size:18px;color:#00c8ff;font-weight:600}.onet-stat-label{font-size:11px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}.onet-peers-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}.onet-peers{display:flex;flex-direction:column;gap:8px}.onet-peer{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(0,200,255,.07);border-radius:8px}.onet-peer-icon{font-size:20px}.onet-peer-info{flex:1}.onet-peer-name{font-size:13px;color:#e0f0ff}.onet-peer-location{font-size:11px;color:#4a6a88;margin-top:2px}.onet-peer-ping{font-family:'Share Tech Mono',monospace;font-size:12px;color:#48dc82}
+</style>

package/src/components/ONODE.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  let running = false
+  const metrics = [{ label: 'CPU', value: '18%' }, { label: 'RAM', value: '2.1 GB' }, { label: 'Storage', value: '47 GB' }, { label: 'Blocks', value: '12,450' }]
+  const logs = [
+    { time: '09:42:01', level: 'info', message: 'ONODE started. Connecting to ONET…' },
+    { time: '09:42:02', level: 'info', message: 'Connected to 12 peers.' },
+    { time: '09:42:05', level: 'info', message: 'Block #12450 validated.' },
+    { time: '09:42:08', level: 'warn', message: 'Peer ONODE-77 latency high: 340ms.' },
+    { time: '09:42:12', level: 'info', message: 'Data sync complete. 100% coverage.' },
+  ]
+</script>
+<div class="nd-shell">
+  <div class="nd-header"><h2 class="nd-title">🖥️ ONODE</h2><p class="nd-sub">Your personal OASIS node. Store, validate, and relay data.</p></div>
+  <div class="nd-status-row">
+    <div class="nd-status-pill" class:nd-status-pill--running={running}>{running ? '● Running' : '○ Stopped'}</div>
+    <button class="nd-btn" class:nd-btn--stop={running} on:click={() => running = !running}>{running ? 'Stop Node' : 'Start Node'}</button>
+  </div>
+  {#if running}
+    <div class="nd-metrics">
+      {#each metrics as m}<div class="nd-metric"><div class="nd-metric-val">{m.value}</div><div class="nd-metric-label">{m.label}</div></div>{/each}
+    </div>
+    <div class="nd-logs-header">Node Logs</div>
+    <div class="nd-logs">
+      {#each logs as l (l.time)}
+        <div class="nd-log nd-log--{l.level}">
+          <span class="nd-log-time">{l.time}</span>
+          <span class="nd-log-level">[{l.level.toUpperCase()}]</span>
+          <span class="nd-log-msg">{l.message}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+<style>
+.nd-shell{display:flex;flex-direction:column;gap:18px}.nd-header{text-align:center}.nd-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.nd-sub{font-size:13px;color:#7a9bbf;margin:0}.nd-status-row{display:flex;align-items:center;gap:14px}.nd-status-pill{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,80,80,.2);border-radius:8px;padding:10px 14px;font-family:'Orbitron',sans-serif;font-size:13px;color:#ff6b6b}.nd-status-pill--running{border-color:rgba(72,220,130,.3);color:#48dc82}.nd-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:8px;color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 20px;cursor:pointer}.nd-btn--stop{background:rgba(255,80,80,.2);border:1px solid rgba(255,80,80,.35);color:#ff6b6b}.nd-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.nd-metric{background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.1);border-radius:10px;padding:12px;text-align:center}.nd-metric-val{font-family:'Share Tech Mono',monospace;font-size:16px;color:#00c8ff;font-weight:600}.nd-metric-label{font-size:10px;color:#7a9bbf;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}.nd-logs-header{font-family:'Orbitron',sans-serif;font-size:12px;color:#7a9bbf;letter-spacing:.06em;text-transform:uppercase}.nd-logs{background:#020a14;border:1px solid rgba(0,200,255,.1);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:5px;max-height:160px;overflow-y:auto;font-family:'Share Tech Mono',monospace}.nd-log{display:flex;gap:10px;font-size:11px}.nd-log-time{color:#4a6a88;flex-shrink:0}.nd-log--info .nd-log-level{color:#00c8ff}.nd-log--warn .nd-log-level{color:#ffb43c}.nd-log--error .nd-log-level{color:#ff6b6b}.nd-log-msg{color:#7a9bbf}
+</style>

package/src/components/OasisModal.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { scale } from 'svelte/transition'
+  export let open = false
+  export let accentColor = 'rgba(59,130,246,.3)'
+
+  import { createEventDispatcher } from 'svelte'
+  const dispatch = createEventDispatcher()
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+  <div class="backdrop" on:click={() => dispatch('close')} transition:scale={{ duration: 200, start: 0.96 }}>
+    <div class="modal-box" style="border-color:{accentColor}" on:click|stopPropagation>
+      <button class="modal-close" on:click={() => dispatch('close')}>✕</button>
+      <slot />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .backdrop {
+    position: fixed; inset: 0; z-index: 9000;
+    background: rgba(3,7,20,.85); backdrop-filter: blur(8px);
+    display: flex; align-items: center; justify-content: center; padding: 20px;
+  }
+  .modal-box {
+    background: #0a1535; border: 1px solid; border-radius: 20px;
+    padding: 40px 36px; max-width: 520px; width: 100%;
+    position: relative; max-height: 90vh; overflow-y: auto;
+  }
+  .modal-close {
+    position: absolute; top: 16px; right: 18px;
+    background: none; border: none; color: #a8bfd8; font-size: 20px; cursor: pointer;
+  }
+</style>

package/src/components/ProviderDropdown.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  interface Provider { id: string; name: string; icon: string; color: string }
+  const dispatch = createEventDispatcher<{ providerChange: Provider }>()
+  const providers: Provider[] = [
+    { id: 'ethereum', name: 'Ethereum', icon: '⟠', color: '#627eea' },
+    { id: 'solana', name: 'Solana', icon: '◎', color: '#9945ff' },
+    { id: 'polygon', name: 'Polygon', icon: '⬡', color: '#8247e5' },
+    { id: 'arbitrum', name: 'Arbitrum', icon: '🔵', color: '#2d9cdb' },
+    { id: 'eosio', name: 'EOSIO', icon: '🔮', color: '#443f54' },
+    { id: 'holochain', name: 'Holochain', icon: '⬡', color: '#00e5be' },
+  ]
+  let open = false, selected = providers[0]
+  function select(p: Provider) { selected = p; open = false; dispatch('providerChange', p) }
+</script>
+<div class="pd-shell">
+  <div class="pd-trigger" class:pd-trigger--open={open} on:click={() => open = !open}>
+    <div class="pd-icon" style="color:{selected.color}">{selected.icon}</div>
+    <div class="pd-label"><div class="pd-name">{selected.name}</div><div class="pd-sub">Active Provider</div></div>
+    <div class="pd-arrow" class:pd-arrow--open={open}>▼</div>
+  </div>
+  {#if open}
+    <div class="pd-menu">
+      {#each providers as p (p.id)}
+        <div class="pd-option" class:pd-option--selected={p.id === selected.id} on:click={() => select(p)}>
+          <div class="pd-opt-icon" style="color:{p.color}">{p.icon}</div>
+          <div class="pd-opt-name">{p.name}</div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+<style>
+.pd-shell{position:relative}.pd-trigger{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(0,200,255,.25);border-radius:10px;padding:10px 14px;cursor:pointer;transition:border-color .2s;color:#fff}.pd-trigger:hover,.pd-trigger--open{border-color:rgba(0,200,255,.5)}.pd-icon{font-size:20px;width:28px;text-align:center}.pd-label{flex:1}.pd-name{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;color:#fff}.pd-sub{font-size:11px;color:#7a9bbf;margin-top:2px}.pd-arrow{font-size:10px;color:#7a9bbf;transition:transform .2s}.pd-arrow--open{transform:rotate(180deg)}.pd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#0d1b2e;border:1px solid rgba(0,200,255,.2);border-radius:10px;overflow:hidden;z-index:100;box-shadow:0 8px 32px rgba(0,0,0,.5)}.pd-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .15s;color:#e0f0ff}.pd-option:hover{background:rgba(0,200,255,.1)}.pd-option--selected{background:rgba(0,200,255,.12);border-left:3px solid #00c8ff}.pd-opt-icon{font-size:18px;width:24px;text-align:center}.pd-opt-name{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700}
+</style>

package/src/components/Providers.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  interface Provider { id: string; name: string; icon: string; color: string; type: string; connected: boolean; description: string }
+  let providers: Provider[] = [
+    { id: '1', name: 'Ethereum', icon: '⟠', color: '#627eea', type: 'Blockchain', description: 'Connect your Ethereum wallet (MetaMask, WalletConnect).', connected: false },
+    { id: '2', name: 'Solana', icon: '◎', color: '#9945ff', type: 'Blockchain', description: 'Connect your Solana wallet (Phantom, Solflare).', connected: false },
+    { id: '3', name: 'EOSIO', icon: '🔮', color: '#443f54', type: 'Blockchain', description: 'Connect via EOSIO for high-speed transactions.', connected: false },
+    { id: '4', name: 'Holochain', icon: '⬡', color: '#00e5be', type: 'P2P Network', description: 'Peer-to-peer data storage on Holochain.', connected: false },
+    { id: '5', name: 'The Graph', icon: '📊', color: '#6f4cff', type: 'Indexer', description: 'Query blockchain data with The Graph protocol.', connected: false },
+  ]
+  function toggle(p: Provider) { p.connected = !p.connected; providers = [...providers] }
+</script>
+<div class="prov-shell">
+  <div class="prov-header"><h2 class="prov-title">🔗 Providers</h2><p class="prov-sub">Connect blockchain providers to your OASIS avatar.</p></div>
+  <div class="prov-list">
+    {#each providers as p (p.id)}
+      <div class="prov-card" class:prov-card--connected={p.connected}>
+        <div class="prov-icon" style="color:{p.color}">{p.icon}</div>
+        <div class="prov-info"><div class="prov-name">{p.name}</div><div class="prov-type">{p.type}</div><div class="prov-desc">{p.description}</div></div>
+        <div class="prov-actions">
+          <div class="prov-status-dot" class:prov-status-dot--on={p.connected}></div>
+          <button class="prov-btn" class:prov-btn--disconnect={p.connected} on:click={() => toggle(p)}>{p.connected ? 'Disconnect' : 'Connect'}</button>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+<style>
+.prov-shell{display:flex;flex-direction:column;gap:18px}.prov-header{text-align:center}.prov-title{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;margin:0 0 6px}.prov-sub{font-size:13px;color:#7a9bbf;margin:0}.prov-list{display:flex;flex-direction:column;gap:10px}.prov-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:14px 16px;transition:border-color .2s}.prov-card--connected{border-color:rgba(72,220,130,.3);background:rgba(72,220,130,.03)}.prov-icon{font-size:26px;flex-shrink:0}.prov-info{flex:1}.prov-name{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:2px}.prov-type{font-size:11px;color:#5ba8ff;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.prov-desc{font-size:12px;color:#7a9bbf}.prov-actions{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.prov-status-dot{width:8px;height:8px;border-radius:50%;background:#4a6a88}.prov-status-dot--on{background:#48dc82;box-shadow:0 0 6px #48dc82}.prov-btn{background:linear-gradient(135deg,#00c8ff,#0080ff);border:none;border-radius:7px;color:#fff;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.06em;padding:7px 14px;cursor:pointer;white-space:nowrap}.prov-btn--disconnect{background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.3);color:#ff6b6b}
+</style>