#!/bin/bash
set -e

# Create directory structure
mkdir -p /tmp/meridian-os/{css,js/core,js/widgets,js/apps,js/achievements}

echo "=== tokens.css ==="
cat > /tmp/meridian-os/css/tokens.css << 'EOF'
:root {
  --bg-0: #0f1114;
  --bg-1: #1a1d21;
  --bg-2: #252a31;
  --bg-3: #2f353d;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #e6e8eb;
  --text-dim: #9aa1ab;
  --text-faint: #5b6470;
  --accent: #d4a24c;
  --accent-dim: #8a6a32;
  --danger: #c85d5d;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --font: 'Inter', -apple-system, system-ui, sans-serif;
  --shadow-1: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.4);
  --sp: 4px 8px 12px 16px 24px 32px;
  --fs: 12px 13px 14px 16px 20px 28px;
}
EOF

echo "=== reset.css ==="
cat > /tmp/meridian-os/css/reset.css << 'EOF'
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--fs);
  background: var(--bg-0);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

button, input {
  font-family: inherit;
  user-select: text;
}

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input::placeholder {
  color: var(--text-faint);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

::selection {
  background: var(--accent-dim);
  color: var(--text);
}
EOF

echo "=== shell.css ==="
cat > /tmp/meridian-os/css/shell.css << 'EOF'
/* Shell layout styles */

#login {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#login.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.login-card {
  width: 360px;
  padding: 40px 32px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.login-logo {
  font-size: var(--fs);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.5px;
}

.login-time {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 14px;
  color: var(--text-dim);
}

.login-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.2s;
}

.login-input:focus {
  border-color: var(--accent);
  outline: none;
}

.login-input::placeholder {
  color: var(--text-faint);
}

.login-btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--bg-0);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.login-btn:hover {
  opacity: 0.9;
}

.login-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Desktop */
#desktop {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

#desktop.hidden {
  display: none;
}

#wallpaper-layer {
  position: absolute;
  inset: 0;
  transition: background 250ms ease;
  z-index: 0;
}

#windows-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* Widgets Tray */
#widgets-tray {
  position: fixed;
  right: 16px;
  top: 16px;
  bottom: 64px;
  width: 240px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

.widget {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  backdrop-filter: blur(12px);
}

.widget-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  margin-bottom: 12px;
}

/* Clock Widget */
.clock-time {
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.clock-date {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Active Apps Widget */
.active-apps-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.active-app-chip {
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}

.active-app-chip:hover {
  background: var(--bg-3);
}

.active-app-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.active-app-chip.active {
  border-left: 2px solid var(--accent);
  background: var(--bg-3);
}

.active-apps-empty {
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
}

/* Achievements Widget */
.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.achievement-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.achievement-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.achievement-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.achievement-game {
  font-size: 12px;
  color: var(--text-faint);
}

.achievements-empty {
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
}

/* Taskbar */
#taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 8px;
  z-index: 100;
  gap: 4px;
}

#launcher {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}

#launcher:hover {
  background: var(--bg-3);
}

#launcher:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#launcher.active {
  background: var(--accent);
  color: var(--bg-0);
  border-color: var(--accent);
}

#taskbar-apps {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 0 8px;
}

.taskbar-app {
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: none;
  transition: background 0.15s, color 0.15s;
}

.taskbar-app:hover {
  color: var(--text);
  background: var(--bg-3);
}

.taskbar-app.active {
  color: var(--text);
  background: var(--bg-3);
  border-bottom: 2px solid var(--accent);
}

.taskbar-app:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.status-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

.status-separator {
  color: var(--text-faint);
}

.status-connection {
  display: flex;
  align-items: center;
  gap: 4px;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  transition: background 0.3s;
}

.connection-dot.online {
  background: #4caf50;
}

/* Launcher Popover */
.launcher-popover {
  position: absolute;
  bottom: 56px;
  left: 8px;
  width: 280px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 12px;
  z-index: 150;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.launcher-app-btn {
  padding: 12px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  color: var(--text);
}

.launcher-app-btn:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
}

.launcher-app-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.launcher-app-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.launcher-app-label {
  font-size: 12px;
  color: var(--text-dim);
}

/* Wallpaper Picker Modal */
#wallpaper-picker {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  transition: opacity 0.3s, visibility 0.3s;
}

#wallpaper-picker.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wallpaper-picker-card {
  width: 560px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.wallpaper-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.wallpaper-picker-title {
  font-size: 16px;
  font-weight: 600;
}

.wallpaper-picker-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  color: var(--text-dim);
  border: none;
  background: none;
}

.wallpaper-picker-close:hover {
  background: var(--bg-3);
  color: var(--text);
}

.wallpaper-picker-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wallpaper-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 20px 24px;
}

.wallpaper-swatch {
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
}

.wallpaper-swatch:hover {
  transform: scale(1.03);
}

.wallpaper-swatch.active {
  border-color: var(--accent);
}

.wallpaper-swatch-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  background: rgba(0,0,0,0.4);
  padding: 2px 4px;
  border-radius: 2px;
}

/* Toast Layer */
#toast-layer {
  position: fixed;
  bottom: 60px;
  right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  min-width: 280px;
  max-width: 360px;
  pointer-events: auto;
  animation: toast-in 0.3s ease;
}

.toast-removing {
  animation: toast-out 0.3s ease forwards;
}

.toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.toast-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.toast-close {
  margin-left: auto;
  padding: 2px;
  cursor: pointer;
  color: var(--text-faint);
  border: none;
  background: none;
  font-size: 14px;
  line-height: 1;
}

.toast-close:hover {
  color: var(--text);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

/* Wallpaper picker toggle button in taskbar */
.wallpaper-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-dim);
  font-size: 16px;
  border: none;
  background: none;
}

.wallpaper-toggle:hover {
  background: var(--bg-3);
  color: var(--text);
}

.wallpaper-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
EOF

echo "=== window.css ==="
cat > /tmp/meridian-os/css/window.css << 'EOF'
/* Window styles */
.m-window {
  position: absolute;
  min-width: 320px;
  min-height: 240px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.m-window.focused {
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  border-color: var(--border-strong);
}

.m-window.minimized {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  transition: opacity 0.2s, transform 0.2s;
}

.m-window-header {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  cursor: default;
  flex-shrink: 0;
}

.m-window-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 4px;
}

.m-window-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.m-window-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-dim);
  border: none;
  background: none;
  transition: background 0.15s, color 0.15s;
}

.m-window-btn:hover {
  background: var(--bg-3);
  color: var(--text);
}

.m-window-btn.close-btn:hover {
  background: var(--danger);
  color: white;
}

.m-window-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.m-window-body {
  flex: 1;
  overflow: auto;
  position: relative;
}

.m-window-body > * {
  width: 100%;
  height: 100%;
}

/* Resize handle */
.m-window-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
}

/* Drag overlay */
.drag-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  cursor: move;
}
EOF

echo "=== bus.js ==="
cat > /tmp/meridian-os/js/core/bus.js << 'EOF'
/**
 * Simple pub/sub event bus.
 * on(evt, cb) - subscribe
 * emit(evt, data) - publish
 */
const Bus = (() => {
  const listeners = new Map();

  return {
    on(evt, cb) {
      if (!listeners.has(evt)) listeners.set(evt, new Set());
      listeners.get(evt).add(cb);
      return () => this.off(evt, cb);
    },

    off(evt, cb) {
      const set = listeners.get(evt);
      if (set) {
        set.delete(cb);
        if (set.size === 0) listeners.delete(evt);
      }
    },

    emit(evt, data) {
      const set = listeners.get(evt);
      if (set) {
        for (const cb of set) {
          try { cb(data); } catch (e) { console.error(`Bus emit error (${evt}):`, e); }
        }
      }
    }
  };
})();

export default Bus;
export { Bus };
EOF

echo "=== state.js ==="
cat > /tmp/meridian-os/js/core/state.js << 'EOF'
/**
 * Central state store with persistence.
 * Keys: user, windows, wallpaper, achievements, connection
 */
const STORAGE_KEY = 'meridian:state';

const State = (() => {
  const listeners = new Map();
  let _state = loadState();

  function loadState() {
    try {
      const raw = localStorage.getItem(STORAGE_KEY);
      if (raw) {
        const parsed = JSON.parse(raw);
        // achievements is stored as array, reconstruct as Set
        if (parsed.achievements) {
          parsed._achievementSet = new Set(parsed.achievements);
        }
        return parsed;
      }
    } catch (e) {
      console.warn('State load failed:', e);
    }
    return {
      user: null,
      windows: [],
      wallpaper: 'graphite',
      achievements: [],
      _achievementSet: new Set(),
      connection: navigator.onLine
    };
  }

  function saveState() {
    try {
      const toSave = {
        user: _state.user,
        windows: _state.windows,
        wallpaper: _state.wallpaper,
        achievements: Array.from(_state._achievementSet || _state.achievements)
      };
      localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
    } catch (e) {
      console.warn('State save failed:', e);
    }
  }

  function set(key, val) {
    _state[key] = val;
    saveState();
    notify(key);
  }

  function get(key) {
    return _state[key];
  }

  function subscribe(key, cb) {
    if (!listeners.has(key)) listeners.set(key, new Set());
    listeners.get(key).add(cb);
    // immediate call with current value
    try { cb(_state[key]); } catch (e) { console.error('State subscribe error:', e); }
    return () => off(key, cb);
  }

  function off(key, cb) {
    const set = listeners.get(key);
    if (set) {
      set.delete(cb);
      if (set.size === 0) listeners.delete(key);
    }
  }

  function notify(key) {
    const set = listeners.get(key);
    if (set) {
      for (const cb of set) {
        try { cb(_state[key]); } catch (e) { console.error('State notify error:', e); }
      }
    }
  }

  function addAchievement(id) {
    if (!_state._achievementSet) {
      _state._achievementSet = new Set(_state.achievements || []);
      _state.achievements = Array.from(_state._achievementSet);
    }
    _state._achievementSet.add(id);
    _state.achievements = Array.from(_state._achievementSet);
    saveState();
    notify('achievements');
  }

  function initConnection() {
    _state.connection = navigator.onLine;
    window.addEventListener('online', () => { _state.connection = true; notify('connection'); saveState(); });
    window.addEventListener('offline', () => { _state.connection = false; notify('connection'); saveState(); });
  }

  return {
    set, get, subscribe, off, addAchievement, initConnection
  };
})();

export default State;
export { State };
EOF

echo "=== auth.js ==="
cat > /tmp/meridian-os/js/core/auth.js << 'EOF'
import State from './state.js';
import Bus from './bus.js';

const Auth = (() => {
  function login(name) {
    const trimmed = name.trim();
    if (!trimmed) return;
    const initials = trimmed.slice(0, 2).toUpperCase();
    State.set('user', { name: trimmed, initials });
    document.getElementById('login').classList.add('hidden');
    const desktop = document.getElementById('desktop');
    desktop.classList.remove('hidden');
    desktop.hidden = false;
    Bus.emit('user:login', { name: trimmed });
    // Persist login session
    localStorage.setItem('meridian:session', trimmed);
  }

  function logout() {
    State.set('user', null);
    localStorage.removeItem('meridian:session');
    location.reload();
  }

  function init() {
    const session = localStorage.getItem('meridian:session');
    if (session) {
      const trimmed = session.trim();
      if (trimmed) {
        const initials = trimmed.slice(0, 2).toUpperCase();
        State.set('user', { name: trimmed, initials });
        const loginEl = document.getElementById('login');
        if (loginEl) loginEl.classList.add('hidden');
        const desktop = document.getElementById('desktop');
        if (desktop) {
          desktop.classList.remove('hidden');
          desktop.hidden = false;
        }
      }
    }
  }

  return { login, logout, init };
})();

export default Auth;
export { Auth };
EOF

echo "=== wm.js ==="
cat > /tmp/meridian-os/js/core/wm.js << 'EOF'
import State from './state.js';
import Bus from './bus.js';

let windowIdCounter = 0;

function createWindow(options) {
  const { app, title, content, w = 640, h = 480 } = options;
  const id = 'win-' + (++windowIdCounter);

  // Cascade position
  const count = State.get('windows').length;
  const offsetX = 40 + (count * 30) % 200;
  const offsetY = 30 + (count * 30) % 150;

  const layer = document.getElementById('windows-layer');
  if (!layer) return null;

  const el = document.createElement('div');
  el.className = 'm-window focused';
  el.id = id;
  el.style.left = offsetX + 'px';
  el.style.top = offsetY + 'px';
  el.style.width = w + 'px';
  el.style.height = h + 'px';
  el.style.zIndex = 10 + count;

  el.innerHTML = `
    <div class="m-window-header" data-wm-drag="${id}">
      <span class="m-window-title">${escapeHtml(title)}</span>
      <div class="m-window-controls">
        <button class="m-window-btn minimize-btn" aria-label="Minimize" data-wm-action="minimize" data-wm-target="${id}">&#8723;</button>
        <button class="m-window-btn close-btn" aria-label="Close" data-wm-action="close" data-wm-target="${id}">&times;</button>
      </div>
    </div>
    <div class="m-window-body" data-wm-content="${id}"></div>
    <div class="m-window-resize" data-wm-resize="${id}"></div>
  `;

  layer.appendChild(el);

  // Render content
  const body = el.querySelector('.m-window-body');
  if (typeof content === 'string') {
    body.innerHTML = content;
  } else if (content instanceof HTMLElement) {
    body.innerHTML = '';
    body.appendChild(content);
  } else if (typeof content === 'function') {
    body.innerHTML = '';
    content(body);
  }

  // Setup drag
  setupDrag(el, id);
  // Setup resize
  setupResize(el, id);
  // Setup focus
  el.addEventListener('mousedown', () => focusWindow(id));
  // Setup header button clicks
  el.querySelector('.minimize-btn').addEventListener('click', (e) => {
    e.stopPropagation();
    minimizeWindow(id);
  });
  el.querySelector('.close-btn').addEventListener('click', (e) => {
    e.stopPropagation();
    closeWindow(id);
  });

  // Track in state
  const windows = State.get('windows');
  windows.push({ id, app, title, minimized: false });
  State.set('windows', windows);

  Bus.emit('app:open', { app, id });

  return id;
}

function closeWindow(id) {
  const el = document.getElementById(id);
  if (!el) return;

  // Find window data
  const windows = State.get('windows');
  const idx = windows.findIndex(w => w.id === id);
  if (idx !== -1) {
    const win = windows[idx];
    windows.splice(idx, 1);
    State.set('windows', windows);
    Bus.emit('app:close', { app: win.app, id });
  }

  el.remove();
}

function minimizeWindow(id) {
  const el = document.getElementById(id);
  if (!el) return;

  el.classList.add('minimized');
  const windows = State.get('windows');
  const win = windows.find(w => w.id === id);
  if (win) win.minimized = true;
  State.set('windows', windows);

  // If this was the focused window, focus the next available
  const focusable = windows.filter(w => !w.minimized);
  if (focusable.length > 0) {
    focusWindow(focusable[focusable.length - 1].id);
  }
}

function focusWindow(id) {
  const el = document.getElementById(id);
  if (!el) return;

  // Remove focus from all
  document.querySelectorAll('.m-window.focused').forEach(w => w.classList.remove('focused'));
  el.classList.add('focused');

  // Bring to front
  const maxZ = Math.max(0, ...Array.from(document.querySelectorAll('.m-window')).map(w =>
    parseInt(w.style.zIndex || 0)
  ));
  el.style.zIndex = maxZ + 1;

  const windows = State.get('windows');
  const win = windows.find(w => w.id === id);
  if (win) {
    win.minimized = false;
    State.set('windows', windows);
  }

  Bus.emit('window:focused', { id });
}

function setupDrag(el, id) {
  const header = el.querySelector('.m-window-header');
  if (!header) return;

  let isDragging = false;
  let startX, startY, startLeft, startTop;

  header.addEventListener('mousedown', (e) => {
    if (e.target.closest('.m-window-controls')) return;
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
    startLeft = el.offsetLeft;
    startTop = el.offsetTop;
    document.body.style.cursor = 'move';

    const onMove = (e2) => {
      if (!isDragging) return;
      const dx = e2.clientX - startX;
      const dy = e2.clientY - startY;
      el.style.left = Math.max(0, startLeft + dx) + 'px';
      el.style.top = Math.max(0, startTop + dy) + 'px';
    };

    const onUp = () => {
      isDragging = false;
      document.body.style.cursor = '';
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseup', onUp);
    };

    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);
  });

  // Touch support
  header.addEventListener('touchstart', (e) => {
    if (e.target.closest('.m-window-controls')) return;
    const touch = e.touches[0];
    isDragging = true;
    startX = touch.clientX;
    startY = touch.clientY;
    startLeft = el.offsetLeft;
    startTop = el.offsetTop;

    const onMove = (e2) => {
      if (!isDragging) return;
      const touch2 = e2.touches[0];
      const dx = touch2.clientX - startX;
      const dy = touch2.clientY - startY;
      el.style.left = Math.max(0, startLeft + dx) + 'px';
      el.style.top = Math.max(0, startTop + dy) + 'px';
    };

    const onEnd = () => {
      isDragging = false;
      document.removeEventListener('touchmove', onMove);
      document.removeEventListener('touchend', onEnd);
    };

    document.addEventListener('touchmove', onMove);
    document.addEventListener('touchend', onEnd);
  }, { passive: true });
}

function setupResize(el, id) {
  const handle = el.querySelector('.m-window-resize');
  if (!handle) return;

  let isResizing = false;
  let startX, startY, startW, startH;

  handle.addEventListener('mousedown', (e) => {
    e.preventDefault();
    e.stopPropagation();
    isResizing = true;
    startX = e.clientX;
    startY = e.clientY;
    startW = el.offsetWidth;
    startH = el.offsetHeight;

    const onMove = (e2) => {
      if (!isResizing) return;
      const dx = e2.clientX - startX;
      const dy = e2.clientY - startY;
      const newW = Math.max(320, startW + dx);
      const newH = Math.max(240, startH + dy);
      el.style.width = newW + 'px';
      el.style.height = newH + 'px';
    };

    const onUp = () => {
      isResizing = false;
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseup', onUp);
    };

    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);
  });

  // Touch support for resize
  handle.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    isResizing = true;
    startX = touch.clientX;
    startY = touch.clientY;
    startW = el.offsetWidth;
    startH = el.offsetHeight;

    const onMove = (e2) => {
      if (!isResizing) return;
      const touch2 = e2.touches[0];
      const dx = touch2.clientX - startX;
      const dy = touch2.clientY - startY;
      const newW = Math.max(320, startW + dx);
      const newH = Math.max(240, startH + dy);
      el.style.width = newW + 'px';
      el.style.height = newH + 'px';
    };

    const onEnd = () => {
      isResizing = false;
      document.removeEventListener('touchmove', onMove);
      document.removeEventListener('touchend', onEnd);
    };

    document.addEventListener('touchmove', onMove);
    document.addEventListener('touchend', onEnd);
  }, { passive: false });
}

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

const MeridianWM = {
  openWindow: createWindow,
  closeWindow,
  minimizeWindow,
  focusWindow
};

export default MeridianWM;
export { MeridianWM };
EOF

echo "=== registry.js ==="
cat > /tmp/meridian-os/js/core/registry.js << 'EOF'
import MeridianWM from './wm.js';
import State from './state.js';
import Bus from './bus.js';

const Registry = (() => {
  const APPS = {};
  let _launcherOpen = false;

  function registerApp(def) {
    if (def.id) {
      APPS[def.id] = def;
    }
  }

  function unregisterApp(id) {
    delete APPS[id];
  }

  function getApp(id) {
    return APPS[id] || null;
  }

  function launchApp(id) {
    const def = APPS[id];
    if (!def) {
      console.warn(`App ${id} not registered`);
      return;
    }

    const title = def.title || id;
    const content = def.render ? def.render() : '';
    const w = def.width || 640;
    const h = def.height || 480;

    MeridianWM.openWindow({ app: id, title, content, w, h });
    closeLauncher();
  }

  function getRegisteredApps() {
    return Object.values(APPS);
  }

  function toggleLauncher() {
    _launcherOpen = !_launcherOpen;
    const popover = document.getElementById('launcher-popover');
    const btn = document.getElementById('launcher');
    if (popover) {
      if (_launcherOpen) {
        renderLauncherApps(popover);
        popover.classList.remove('hidden');
      } else {
        popover.classList.add('hidden');
      }
    }
    if (btn) {
      btn.classList.toggle('active', _launcherOpen);
    }
    return _launcherOpen;
  }

  function closeLauncher() {
    _launcherOpen = false;
    const popover = document.getElementById('launcher-popover');
    const btn = document.getElementById('launcher');
    if (popover) popover.classList.add('hidden');
    if (btn) btn.classList.remove('active');
  }

  function renderLauncherApps(popover) {
    const apps = getRegisteredApps();
    popover.innerHTML = '';
    if (apps.length === 0) {
      popover.innerHTML = '<div style="padding:12px;text-align:center;color:var(--text-faint);font-size:13px;">No apps registered</div>';
      return;
    }
    for (const app of apps) {
      const btn = document.createElement('button');
      btn.className = 'launcher-app-btn';
      btn.setAttribute('aria-label', `Launch ${app.title || app.id}`);
      btn.innerHTML = `
        <div class="launcher-app-icon">${app.icon || '&#9670;'}</div>
        <div class="launcher-app-label">${escapeHtml(app.title || app.id)}</div>
      `;
      btn.addEventListener('click', () => launchApp(app.id));
      popover.appendChild(btn);
    }
  }

  function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
  }

  function init() {
    const btn = document.getElementById('launcher');
    if (btn) {
      btn.addEventListener('click', toggleLauncher);
    }

    // Close launcher when clicking elsewhere
    document.addEventListener('mousedown', (e) => {
      if (_launcherOpen && !e.target.closest('#launcher') && !e.target.closest('#launcher-popover')) {
        closeLauncher();
      }
    });
  }

  return {
    APPS,
    registerApp,
    unregisterApp,
    getApp,
    launchApp,
    getRegisteredApps,
    toggleLauncher,
    init
  };
})();

export default Registry;
export { Registry };
EOF

echo "=== main.js ==="
cat > /tmp/meridian-os/js/main.js << 'EOF'
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';

// Initialize
function init() {
  State.initConnection();
  Auth.init();
  Registry.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();
}
EOF

echo "=== wallpaper.js ==="
cat > /tmp/meridian-os/js/widgets/wallpaper.js << 'EOF'
import State from '../core/state.js';
import { Bus } from '../core/bus.js';

const WALLPAPERS = {
  graphite: {
    name: 'Graphite',
    gradient: 'radial-gradient(ellipse at center, #1e2126 0%, #0f1114 100%)'
  },
  ember: {
    name: 'Ember',
    gradient: 'linear-gradient(135deg, #1a1d21 0%, #2a1f15 40%, #d4a24c33 100%)'
  },
  tide: {
    name: 'Tide',
    gradient: 'linear-gradient(160deg, #0a1628 0%, #0f2847 40%, #14425a 70%, #1a5c6e 100%)'
  },
  vellum: {
    name: 'Vellum',
    gradient: 'linear-gradient(145deg, #1e1c1a 0%, #2a2520 50%, #332e28 100%)'
  },
  eclipse: {
    name: 'Eclipse',
    gradient: 'linear-gradient(160deg, #0a0a0f 0%, #150f20 50%, #1a1030 100%)'
  },
  terminal: {
    name: 'Terminal',
    gradient: 'radial-gradient(ellipse at 20% 50%, #0a1a0a 0%, #0f1410 40%, #0a0f0a 100%)'
  }
};

let currentWp = null;

function applyWallpaper(id) {
  const wp = WALLPAPERS[id];
  if (!wp) return;

  const layer = document.getElementById('wallpaper-layer');
  if (!layer) return;

  // Crossfade
  const overlay = document.createElement('div');
  overlay.style.position = 'absolute';
  overlay.style.inset = '0';
  overlay.style.background = wp.gradient;
  overlay.style.transition = 'opacity 250ms ease';
  overlay.style.zIndex = '1';
  layer.appendChild(overlay);

  requestAnimationFrame(() => {
    overlay.style.opacity = '1';
    if (currentWp) {
      const oldOverlay = layer.querySelector('div[style*="position: absolute"]');
      if (oldOverlay && oldOverlay !== overlay) {
        oldOverlay.style.opacity = '0';
        setTimeout(() => oldOverlay.remove(), 260);
      }
    }
  });

  currentWp = overlay;
  State.set('wallpaper', id);

  // Update picker swatches
  document.querySelectorAll('.wallpaper-swatch').forEach(s => {
    s.classList.toggle('active', s.dataset.id === id);
  });
}

function initPicker() {
  const picker = document.getElementById('wallpaper-picker');
  const grid = document.getElementById('wallpaper-picker-grid');
  if (!picker || !grid) return;

  // Populate swatches
  for (const [id, wp] of Object.entries(WALLPAPERS)) {
    const swatch = document.createElement('div');
    swatch.className = 'wallpaper-swatch';
    swatch.dataset.id = id;
    swatch.setAttribute('role', 'button');
    swatch.setAttribute('aria-label', `Select ${wp.name} wallpaper`);
    swatch.style.background = wp.gradient;
    swatch.innerHTML = `<span class="wallpaper-swatch-label">${wp.name}</span>`;
    swatch.addEventListener('click', () => applyWallpaper(id));
    grid.appendChild(swatch);
  }

  // Apply saved wallpaper
  const saved = State.get('wallpaper');
  if (saved && WALLPAPERS[saved]) {
    applyWallpaper(saved);
  }

  // Toggle button in status bar
  const toggleBtn = document.getElementById('wallpaper-toggle');
  if (toggleBtn) {
    toggleBtn.addEventListener('click', () => {
      picker.classList.toggle('hidden');
    });
  }

  // Close picker on backdrop click
  picker.addEventListener('click', (e) => {
    if (e.target === picker) {
      picker.classList.add('hidden');
    }
  });

  // Close on Escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !picker.classList.contains('hidden')) {
      picker.classList.add('hidden');
    }
  });
}

function init() {
  // Listen for state changes to wallpaper
  State.subscribe('wallpaper', (id) => {
    if (id && WALLPAPERS[id] && id !== (currentWp ? null : State.get('wallpaper'))) {
      applyWallpaper(id);
    }
  });

  // Also apply on load if state says so
  const saved = State.get('wallpaper');
  if (saved && WALLPAPERS[saved]) {
    applyWallpaper(saved);
  }

  initPicker();
}

init();
EOF

echo "=== clock.js ==="
cat > /tmp/meridian-os/js/widgets/clock.js << 'EOF'
import State from '../core/state.js';

const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

function formatTime(date) {
  let h = date.getHours();
  const m = date.getMinutes().toString().padStart(2, '0');
  const ampm = h >= 12 ? 'PM' : 'AM';
  h = h % 12 || 12;
  return `${h}:${m} ${ampm}`;
}

function formatDate(date) {
  return `${DAYS[date.getDay()]}, ${MONTHS[date.getMonth()]} ${date.getDate()}`;
}

function updateClock() {
  const timeEl = document.getElementById('clock-time');
  const dateEl = document.getElementById('clock-date');
  if (timeEl && dateEl) {
    const now = new Date();
    timeEl.textContent = formatTime(now);
    dateEl.textContent = formatDate(now);
  }

  // Update login screen time
  const loginTimeEl = document.getElementById('login-time');
  if (loginTimeEl) {
    loginTimeEl.textContent = formatTime(now);
  }

  // Update taskbar time
  const statusTimeEl = document.getElementById('status-time');
  if (statusTimeEl) {
    statusTimeEl.textContent = formatTime(now);
  }
}

function init() {
  updateClock();
  setInterval(updateClock, 1000);
}

init();
EOF

echo "=== active-apps.js ==="
cat > /tmp/meridian-os/js/widgets/active-apps.js << 'EOF'
import State from '../core/state.js';
import MeridianWM from '../core/wm.js';
import Registry from '../core/registry.js';

function renderApps(apps) {
  const container = document.getElementById('active-apps-list');
  if (!container) return;

  if (!apps || apps.length === 0) {
    container.innerHTML = '<div class="active-apps-empty">No apps open</div>';
    return;
  }

  container.innerHTML = '';
  for (const win of apps) {
    const btn = document.createElement('button');
    btn.className = 'active-app-chip';
    btn.setAttribute('aria-label', `Focus ${win.title}`);
    btn.textContent = win.title;

    btn.addEventListener('click', () => {
      MeridianWM.focusWindow(win.id);
    });

    container.appendChild(btn);
  }
}

function init() {
  State.subscribe('windows', renderApps);
}

init();
EOF

echo "=== achievements.js ==="
cat > /tmp/meridian-os/js/widgets/achievements.js << 'EOF'
import State from '../core/state.js';
import { Bus } from '../core/bus.js';

function renderAchievements(achievements) {
  const container = document.getElementById('achievements-list');
  if (!container) return;

  if (!achievements || achievements.length === 0) {
    container.innerHTML = '<div class="achievements-empty">No achievements yet</div>';
    return;
  }

  // Show last 3
  const last3 = achievements.slice(-3).reverse();
  container.innerHTML = '';
  for (const achId of last3) {
    const item = document.createElement('div');
    item.className = 'achievement-item';
    item.innerHTML = `
      <div class="achievement-icon">${getInitial(achId)}</div>
      <div class="achievement-info">
        <span class="achievement-name">${escapeHtml(achId)}</span>
        <span class="achievement-game">Unlocked</span>
      </div>
    `;
    container.appendChild(item);
  }
}

function getInitial(id) {
  return id.charAt(0).toUpperCase();
}

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

function showToast({ id, title, desc }) {
  const layer = document.getElementById('toast-layer');
  if (!layer) return;

  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.innerHTML = `
    <div>
      <div class="toast-title">Achievement Unlocked</div>
      <div class="toast-desc">${escapeHtml(title || desc || id)}</div>
    </div>
    <button class="toast-close" aria-label="Dismiss">&times;</button>
  `;

  layer.appendChild(toast);

  // Close button
  toast.querySelector('.toast-close').addEventListener('click', () => removeToast(toast));

  // Auto dismiss
  setTimeout(() => removeToast(toast), 4000);
}

function removeToast(toast) {
  if (!toast.parentNode) return;
  toast.classList.add('toast-removing');
  setTimeout(() => toast.remove(), 300);
}

function init() {
  State.subscribe('achievements', renderAchievements);

  // Listen for achievement unlocks
  Bus.on('achievement:unlocked', showToast);
}

init();
EOF

echo "=== index.html ==="
cat > /tmp/meridian-os/index.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meridian OS</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/tokens.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/shell.css">
  <link rel="stylesheet" href="css/window.css">
</head>
<body>

  <!-- Login Screen -->
  <div id="login" class="login">
    <span id="login-time" class="login-time"></span>
    <div class="login-card">
      <div class="login-logo">Meridian OS</div>
      <input type="text" id="login-input" class="login-input" placeholder="What should we call you?" autofocus aria-label="Your name">
      <button id="login-btn" class="login-btn">Continue</button>
    </div>
  </div>

  <!-- Desktop -->
  <div id="desktop" class="desktop" hidden>
    <div id="wallpaper-layer"></div>
    <div id="windows-layer"></div>

    <aside id="widgets-tray">
      <div id="clock-widget" class="widget">
        <div id="clock-time" class="clock-time"></div>
        <div id="clock-date" class="clock-date"></div>
      </div>

      <div class="widget">
        <div class="widget-title">Active Apps</div>
        <div id="active-apps-list" class="active-apps-list"></div>
      </div>

      <div class="widget">
        <div class="widget-title">Achievements</div>
        <div id="achievements-list" class="achievements-list"></div>
      </div>
    </aside>

    <nav id="taskbar">
      <button id="launcher">Apps</button>
      <div id="launcher-popover" class="launcher-popover hidden"></div>
      <div id="taskbar-apps"></div>
      <div id="status-bar">
        <button id="wallpaper-toggle" class="wallpaper-toggle" aria-label="Change wallpaper">&#9638;</button>
      </div>
    </nav>
  </div>

  <!-- Toast Layer -->
  <div id="toast-layer"></div>

  <!-- Wallpaper Picker -->
  <div id="wallpaper-picker" class="hidden">
    <div class="wallpaper-picker-card">
      <div class="wallpaper-picker-header">
        <span class="wallpaper-picker-title">Wallpaper</span>
        <button id="wallpaper-picker-close" class="wallpaper-picker-close" aria-label="Close picker">&times;</button>
      </div>
      <div id="wallpaper-picker-grid" class="wallpaper-picker-grid"></div>
    </div>
  </div>

  <script type="module" src="js/main.js"></script>
</body>
</html>
EOF

echo "=== DONE ==="
find /tmp/meridian-os -type f | sort