Initial commit — Meridian OS browser desktop demo

js/main.js

@@ -0,0 +1,85 @@
+import State from './core/state.js';
+import Auth from './core/auth.js';
+import Bus from './core/bus.js';
+import MeridianWM from './core/wm.js';
+import Registry from './core/registry.js';
+
+// Import widgets
+import './widgets/clock.js';
+import './widgets/active-apps.js';
+import './widgets/achievements.js';
+
+// Import wallpaper
+import './widgets/wallpaper.js';
+
+// Import apps
+import notepad from './apps/notepad.js';
+import music from './apps/music.js';
+import terminal from './apps/terminal.js';
+import steam from './apps/steam.js';
+import vscode from './apps/vscode.js';
+import postman from './apps/postman.js';
+import chrome from './apps/chrome.js';
+
+// Import achievements engine
+import AchievementsEngine from './achievements/engine.js';
+
+// Initialize
+function init() {
+  State.initConnection();
+  Auth.init();
+  Registry.init();
+
+  // Register all 7 apps
+  [notepad, music, terminal, steam, vscode, postman, chrome].forEach(app => Registry.registerApp(app));
+
+  // Initialize achievements engine
+  AchievementsEngine.init();
+
+  setupTaskbarApps();
+}
+
+function setupTaskbarApps() {
+  // Status bar user display
+  State.subscribe('user', (user) => {
+    const statusBar = document.getElementById('status-bar');
+    if (!statusBar) return;
+    const existing = statusBar.querySelector('.status-user');
+    if (existing) existing.remove();
+
+    if (user) {
+      const div = document.createElement('div');
+      div.className = 'status-user';
+      div.innerHTML = `
+        <div class="status-avatar" aria-label="${escapeHtml(user.name)}">${escapeHtml(user.initials)}</div>
+        <span class="status-name">${escapeHtml(user.name)}</span>
+        <span class="status-separator">&#8226;</span>
+        <span class="status-connection">
+          <span class="connection-dot ${State.get('connection') ? 'online' : ''}" aria-label="Connection status"></span>
+        </span>
+      `;
+      statusBar.appendChild(div);
+    }
+  });
+
+  // Connection status
+  State.subscribe('connection', (connected) => {
+    const dot = document.querySelector('.connection-dot');
+    if (dot) {
+      dot.classList.toggle('online', !!connected);
+    }
+  });
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}