@stacksjs/defaults 0.70.54

package/resources/assets/scripts/main.ts

@@ -0,0 +1,2153 @@
+console.log('=== JAVASCRIPT STARTING ===')
+
+// Global variables
+let taskbarContextMenu: HTMLElement | null = null
+let taskbarContextWindowId: string | null = null
+
+// Login System
+const loginScreen = document.getElementById('login-screen')
+const emailLoginForm = document.getElementById('email-login-form')
+const licenseLoginForm = document.getElementById('license-login-form')
+
+// Show login screen when Login app is clicked
+function showLoginScreen() {
+  if (loginScreen)
+    loginScreen.classList.remove('hidden')
+}
+
+// Show email login form
+const emailLoginBtn = document.getElementById('email-login-btn')
+if (emailLoginBtn) {
+  emailLoginBtn.addEventListener('click', () => {
+    if (loginScreen)
+      loginScreen.classList.add('hidden')
+    if (emailLoginForm)
+      emailLoginForm.classList.remove('hidden')
+    // Focus email input
+    setTimeout(() => {
+      const emailInput = document.getElementById('email-input') as HTMLInputElement
+      if (emailInput)
+        emailInput.focus()
+    }, 100)
+  })
+}
+
+// Show license login form
+const licenseLoginBtn = document.getElementById('license-login-btn')
+if (licenseLoginBtn) {
+  licenseLoginBtn.addEventListener('click', () => {
+    if (loginScreen)
+      loginScreen.classList.add('hidden')
+    if (licenseLoginForm)
+      licenseLoginForm.classList.remove('hidden')
+    // Focus license input
+    setTimeout(() => {
+      const licenseInput = document.getElementById('license-input') as HTMLInputElement
+      if (licenseInput)
+        licenseInput.focus()
+    }, 100)
+  })
+}
+
+// Hide login forms and show user selection
+function hideLoginForms() {
+  if (emailLoginForm)
+    emailLoginForm.classList.add('hidden')
+  if (licenseLoginForm)
+    licenseLoginForm.classList.add('hidden')
+  if (loginScreen)
+    loginScreen.classList.remove('hidden')
+}
+
+// Close login screens
+function closeLoginScreens() {
+  if (loginScreen)
+    loginScreen.classList.add('hidden')
+  if (emailLoginForm)
+    emailLoginForm.classList.add('hidden')
+  if (licenseLoginForm)
+    licenseLoginForm.classList.add('hidden')
+}
+
+// Handle email/password login
+function handleEmailLogin() {
+  const emailInput = document.getElementById('email-input') as HTMLInputElement
+  const passwordInput = document.getElementById('password-input') as HTMLInputElement
+
+  const email = emailInput?.value.trim()
+  const password = passwordInput?.value.trim()
+
+  if (!email || !password) {
+    alert('Please enter both email and password')
+    return
+  }
+
+  // For demo purposes, accept any non-empty credentials
+  // In production, this would validate against a backend
+  console.log('Email login successful:', email)
+  alert(`Login successful! Welcome ${email}`)
+
+  // Close login screens
+  closeLoginScreens()
+
+  // Clear form
+  emailInput.value = ''
+  passwordInput.value = ''
+}
+
+// Handle license key login
+function handleLicenseLogin() {
+  const licenseInput = document.getElementById('license-input') as HTMLInputElement
+  const licenseKey = licenseInput?.value.trim()
+
+  if (!licenseKey) {
+    alert('Please enter a license key')
+    return
+  }
+
+  // For demo purposes, accept any non-empty license key
+  // In production, this would validate against a backend
+  console.log('License login successful:', licenseKey)
+  alert(`License key activated successfully!`)
+
+  // Close login screens
+  closeLoginScreens()
+
+  // Clear form
+  licenseInput.value = ''
+}
+
+// Make functions available globally for onclick handlers
+(window as any).showLoginScreen = showLoginScreen;
+(window as any).hideLoginForms = hideLoginForms;
+(window as any).closeLoginScreens = closeLoginScreens;
+(window as any).handleEmailLogin = handleEmailLogin;
+(window as any).handleLicenseLogin = handleLicenseLogin
+
+// Enter key handlers for login forms
+document.addEventListener('DOMContentLoaded', () => {
+  const emailInput = document.getElementById('email-input')
+  const passwordInput = document.getElementById('password-input')
+  const licenseInput = document.getElementById('license-input')
+
+  if (emailInput || passwordInput) {
+    [emailInput, passwordInput].forEach((input) => {
+      input?.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          handleEmailLogin()
+        }
+      })
+    })
+  }
+
+  if (licenseInput) {
+    licenseInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        handleLicenseLogin()
+      }
+    })
+  }
+})
+
+// Clock
+function updateClock() {
+  const now = new Date()
+  const hours = now.getHours() % 12 || 12
+  const minutes = String(now.getMinutes()).padStart(2, '0')
+  const ampm = now.getHours() >= 12 ? 'PM' : 'AM'
+  const month = now.getMonth() + 1
+  const day = now.getDate()
+  const year = now.getFullYear()
+  const clockElement = document.getElementById('clock')
+  if (clockElement) {
+    clockElement.textContent = `${hours}:${minutes} ${ampm} ${month}/${day}/${year}`
+  }
+}
+updateClock()
+setInterval(updateClock, 1000) // Update every second
+
+// Desktop Icon Positioning and Dragging
+let draggedIcon: HTMLElement | null = null
+const iconDragOffset = { x: 0, y: 0 }
+let iconDragStartX = 0
+let iconDragStartY = 0
+let iconDragThresholdMet = false
+let hasMove = false
+let selectedIcon: HTMLElement | null = null
+let activeEditInput: HTMLInputElement | null = null
+let activeEditLabel: HTMLElement | null = null
+let activeEditOriginalName: string = ''
+const DRAG_THRESHOLD = 5 // pixels to move before drag starts
+
+// Grid settings for icon snapping
+const GRID_SIZE = 120 // spacing between icons
+const GRID_OFFSET = 20 // offset from edge
+
+// Background images collection
+const BACKGROUND_IMAGES = [
+  'bg-img.png', // Original
+  'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80', // Mountain landscape
+  'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80', // Mountain peaks
+  'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1920&q=80', // Foggy forest
+  'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1920&q=80', // Nature path
+  'https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=1920&q=80', // Lake and mountains
+  'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=1920&q=80', // Rolling hills
+  'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=1920&q=80', // Tropical beach
+  'https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=1920&q=80', // Ocean waves
+  'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1920&q=80', // Beach sunset
+]
+let currentBackgroundIndex = 0
+
+// Selection rectangle
+let selectionRect: HTMLElement | null = null
+let isSelecting = false
+let selectionStartX = 0
+let selectionStartY = 0
+
+// Check if a grid position is occupied by another icon
+function isGridPositionOccupied(x: number, y: number, excludeIcon?: HTMLElement): boolean {
+  const icons = document.querySelectorAll('.desktop-icon')
+  const tolerance = 10 // pixels of tolerance for position comparison
+
+  for (const icon of icons) {
+    if (excludeIcon && icon === excludeIcon)
+      continue
+
+    const iconX = Number.parseInt((icon as HTMLElement).style.left || '0')
+    const iconY = Number.parseInt((icon as HTMLElement).style.top || '0')
+
+    if (Math.abs(iconX - x) < tolerance && Math.abs(iconY - y) < tolerance) {
+      return true
+    }
+  }
+
+  return false
+}
+
+// Find next available grid position
+function findNextAvailableGridPosition(startX: number, startY: number, excludeIcon?: HTMLElement): { x: number, y: number } {
+  const startCol = Math.round((startX - GRID_OFFSET) / GRID_SIZE)
+  const startRow = Math.round((startY - GRID_OFFSET) / GRID_SIZE)
+
+  // Search in a spiral pattern from the starting position
+  const maxSearch = 100 // Maximum positions to check
+
+  for (let distance = 0; distance < maxSearch; distance++) {
+    // Try positions at increasing distances from the start
+    for (let rowOffset = -distance; rowOffset <= distance; rowOffset++) {
+      for (let colOffset = -distance; colOffset <= distance; colOffset++) {
+        // Only check positions on the perimeter of the current distance
+        if (Math.abs(rowOffset) !== distance && Math.abs(colOffset) !== distance) {
+          continue
+        }
+
+        const col = startCol + colOffset
+        const row = startRow + rowOffset
+
+        // Skip negative positions
+        if (col < 0 || row < 0)
+          continue
+
+        const x = col * GRID_SIZE + GRID_OFFSET
+        const y = row * GRID_SIZE + GRID_OFFSET
+
+        if (!isGridPositionOccupied(x, y, excludeIcon)) {
+          return { x, y }
+        }
+      }
+    }
+  }
+
+  // Fallback to original position if no space found
+  return { x: startX, y: startY }
+}
+
+// Snap icon to grid
+function snapToGrid(x: number, y: number, icon?: HTMLElement): { x: number, y: number } {
+  const col = Math.round((x - GRID_OFFSET) / GRID_SIZE)
+  const row = Math.round((y - GRID_OFFSET) / GRID_SIZE)
+
+  const targetX = col * GRID_SIZE + GRID_OFFSET
+  const targetY = row * GRID_SIZE + GRID_OFFSET
+
+  // Check if target position is occupied
+  if (isGridPositionOccupied(targetX, targetY, icon)) {
+    // Find next available position
+    return findNextAvailableGridPosition(targetX, targetY, icon)
+  }
+
+  return { x: targetX, y: targetY }
+}
+
+// Initialize icons when DOM is ready
+function initializeIcons() {
+  // Position icons initially in a grid
+  const icons = document.querySelectorAll('.desktop-icon')
+  console.log('Positioning', icons.length, 'icons')
+
+  icons.forEach((icon, index) => {
+    const row = Math.floor(index / 6)
+    const col = index % 6
+    const left = col * GRID_SIZE + GRID_OFFSET
+    const top = row * GRID_SIZE + GRID_OFFSET;
+    (icon as HTMLElement).style.left = `${left}px`;
+    (icon as HTMLElement).style.top = `${top}px`
+    console.log(`Icon ${index} positioned at (${left}, ${top})`)
+  })
+
+  // Deselect icons when clicking desktop
+  const desktopIcons = document.querySelector('.desktop-icons')
+  desktopIcons?.addEventListener('click', (e) => {
+    if ((e.target as HTMLElement).classList.contains('desktop-icons')) {
+      // Exit edit mode if active
+      exitEditMode()
+
+      if (selectedIcon) {
+        selectedIcon.classList.remove('selected')
+        selectedIcon = null
+      }
+    }
+  })
+
+  // Desktop selection rectangle
+  desktopIcons?.addEventListener('mousedown', (e) => {
+    const event = e as MouseEvent
+    // Only start selection if clicking directly on desktop (not on icon)
+    if ((event.target as HTMLElement).classList.contains('desktop-icons')) {
+      isSelecting = true
+      const rect = desktopIcons.getBoundingClientRect()
+      selectionStartX = event.clientX - rect.left
+      selectionStartY = event.clientY - rect.top
+
+      // Clear previous selections
+      document.querySelectorAll('.desktop-icon.selected').forEach((icon) => {
+        icon.classList.remove('selected')
+      })
+      selectedIcon = null
+
+      // Create selection rectangle
+      if (!selectionRect) {
+        selectionRect = document.createElement('div')
+        selectionRect.className = 'selection-rectangle'
+        desktopIcons.appendChild(selectionRect)
+      }
+
+      selectionRect.style.left = `${selectionStartX}px`
+      selectionRect.style.top = `${selectionStartY}px`
+      selectionRect.style.width = '0px'
+      selectionRect.style.height = '0px'
+      selectionRect.style.display = 'block'
+
+      event.preventDefault()
+    }
+  })
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isSelecting || !selectionRect || !desktopIcons)
+      return
+
+    const rect = desktopIcons.getBoundingClientRect()
+    const currentX = e.clientX - rect.left
+    const currentY = e.clientY - rect.top
+
+    const left = Math.min(selectionStartX, currentX)
+    const top = Math.min(selectionStartY, currentY)
+    const width = Math.abs(currentX - selectionStartX)
+    const height = Math.abs(currentY - selectionStartY)
+
+    selectionRect.style.left = `${left}px`
+    selectionRect.style.top = `${top}px`
+    selectionRect.style.width = `${width}px`
+    selectionRect.style.height = `${height}px`
+
+    // Check which icons are in the selection
+    const selectionRectBounds = {
+      left,
+      top,
+      right: left + width,
+      bottom: top + height,
+    }
+
+    document.querySelectorAll('.desktop-icon').forEach((icon) => {
+      const iconEl = icon as HTMLElement
+      const iconLeft = Number.parseFloat(iconEl.style.left || '0')
+      const iconTop = Number.parseFloat(iconEl.style.top || '0')
+      const iconRight = iconLeft + iconEl.offsetWidth
+      const iconBottom = iconTop + iconEl.offsetHeight
+
+      // Check if icon intersects with selection rectangle
+      const intersects = !(
+        iconRight < selectionRectBounds.left
+        || iconLeft > selectionRectBounds.right
+        || iconBottom < selectionRectBounds.top
+        || iconTop > selectionRectBounds.bottom
+      )
+
+      if (intersects) {
+        iconEl.classList.add('selected')
+      }
+      else {
+        iconEl.classList.remove('selected')
+      }
+    })
+  })
+
+  document.addEventListener('mouseup', () => {
+    if (isSelecting && selectionRect) {
+      isSelecting = false
+      selectionRect.style.display = 'none'
+
+      // Update selectedIcon to last selected if any
+      const selected = document.querySelectorAll('.desktop-icon.selected')
+      if (selected.length > 0) {
+        selectedIcon = selected[selected.length - 1] as HTMLElement
+      }
+    }
+  })
+
+  // Desktop Icon Clicks and Drag
+  document.querySelectorAll('.desktop-icon').forEach((icon) => {
+    let clickTimeout: number
+    let _clickCount = 0
+
+    icon.addEventListener('mousedown', (e) => {
+      const event = e as MouseEvent
+      // Don't start drag if clicking on label input
+      if ((event.target as HTMLElement).tagName === 'INPUT')
+        return
+
+      if ((event.target as HTMLElement).closest('.desktop-icon-label') || (event.target as HTMLElement).closest('.desktop-icon-image')) {
+        draggedIcon = icon as HTMLElement
+        hasMove = false
+        iconDragThresholdMet = false
+        iconDragStartX = event.clientX
+        iconDragStartY = event.clientY
+
+        const rect = icon.getBoundingClientRect()
+        iconDragOffset.x = event.clientX - rect.left
+        iconDragOffset.y = event.clientY - rect.top
+
+        event.preventDefault()
+      }
+    })
+
+    icon.addEventListener('click', (e) => {
+      const event = e as MouseEvent
+      if (hasMove)
+        return // Don't trigger click if we were dragging
+      if ((event.target as HTMLElement).tagName === 'INPUT')
+        return // Don't interfere with input editing
+
+      clearTimeout(clickTimeout)
+      _clickCount++
+
+      // Immediately show selection on first click
+      const wasAlreadySelected = selectedIcon === icon && icon.classList.contains('selected')
+
+      // Exit edit mode if clicking on a different icon
+      if (selectedIcon && selectedIcon !== icon) {
+        exitEditMode()
+        selectedIcon.classList.remove('selected')
+      }
+
+      icon.classList.add('selected')
+      selectedIcon = icon as HTMLElement
+
+      // If clicking on an already selected icon, enter edit mode after short delay
+      if (wasAlreadySelected) {
+        clickTimeout = window.setTimeout(() => {
+          enterEditMode(icon as HTMLElement)
+          _clickCount = 0
+        }, 500)
+      }
+      else {
+      // Set timeout to reset click count
+        clickTimeout = window.setTimeout(() => {
+          _clickCount = 0
+        }, 250)
+      }
+    })
+
+    icon.addEventListener('dblclick', (e) => {
+      const event = e as MouseEvent
+      clearTimeout(clickTimeout)
+      _clickCount = 0
+      event.preventDefault()
+
+      // Double click - open
+      const type = (icon as HTMLElement).dataset.iconType
+      const section = (icon as HTMLElement).dataset.iconSection
+      const url = (icon as HTMLElement).dataset.iconUrl
+
+      if (type === 'window' && section) {
+        openWindow(section)
+      }
+      else if (type === 'link' && url) {
+        window.open(url, '_blank')
+      }
+    })
+  })
+
+  // Icon drag move
+  document.addEventListener('mousemove', (e) => {
+    if (!draggedIcon)
+      return
+
+    // Check if we've moved enough to start dragging
+    if (!iconDragThresholdMet) {
+      const deltaX = Math.abs(e.clientX - iconDragStartX)
+      const deltaY = Math.abs(e.clientY - iconDragStartY)
+
+      if (deltaX > DRAG_THRESHOLD || deltaY > DRAG_THRESHOLD) {
+        iconDragThresholdMet = true
+        hasMove = true
+      }
+      else {
+        return // Don't drag yet, threshold not met
+      }
+    }
+
+    hasMove = true
+
+    const desktopIcons = document.querySelector('.desktop-icons')
+    if (!desktopIcons)
+      return
+    const desktopRect = desktopIcons.getBoundingClientRect()
+
+    const x = e.clientX - desktopRect.left - iconDragOffset.x
+    const y = e.clientY - desktopRect.top - iconDragOffset.y
+
+    draggedIcon.style.left = `${Math.max(0, Math.min(x, desktopRect.width - 100))}px`
+    draggedIcon.style.top = `${Math.max(0, Math.min(y, desktopRect.height - 100))}px`
+  })
+
+  // Icon drag end
+  document.addEventListener('mouseup', () => {
+    if (draggedIcon) {
+      // Snap to grid if icon was moved
+      if (iconDragThresholdMet || hasMove) {
+        const currentX = Number.parseInt(draggedIcon.style.left || '0')
+        const currentY = Number.parseInt(draggedIcon.style.top || '0')
+
+        const snapped = snapToGrid(currentX, currentY, draggedIcon)
+
+        draggedIcon.style.left = `${snapped.x}px`
+        draggedIcon.style.top = `${snapped.y}px`
+      }
+
+      // Reset drag state immediately (not in timeout)
+      draggedIcon = null
+      iconDragThresholdMet = false
+
+      // Only delay hasMove reset to prevent click after drag
+      setTimeout(() => {
+        hasMove = false
+      }, 100)
+    }
+  })
+}
+
+// Call initialization when DOM is ready
+// window management
+let activewindow = null
+let windowZIndex = 100
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    initializeIcons()
+    initializeWindowDragging()
+    // Set the welcome window as active initially
+    activewindow = document.getElementById('window-welcome')
+    // Update taskbar to show welcome window
+    updateTaskbar()
+  })
+}
+else {
+  initializeIcons()
+  initializeWindowDragging()
+  // Set the welcome window as active initially
+  activewindow = document.getElementById('window-welcome')
+  // Update taskbar to show welcome window
+  updateTaskbar()
+}
+
+function openWindow(windowId, fromTaskbarButton = null) {
+  console.log('Opening window:', windowId)
+  const windowEl = document.getElementById(`window-${windowId}`)
+  if (!windowEl) {
+    console.warn('window not found:', windowId)
+    return
+  }
+
+  // Check if window was previously minimized
+  const wasMinimized = windowEl.classList.contains('minimized')
+
+  if (wasMinimized) {
+    // If restoring from minimized, let the taskbar handler do the animation
+    windowEl.classList.remove('minimized')
+  }
+
+  // Add a smooth entry animation for first-time opens
+  if (!wasMinimized && !windowEl.classList.contains('active')) {
+    // If opened from a specific location (like taskbar), animate from there
+    if (fromTaskbarButton) {
+      // Make window visible but transparent to get correct position
+      windowEl.classList.add('restoring')
+      windowEl.style.opacity = '0'
+      windowEl.style.visibility = 'visible'
+
+      // Force reflow to get actual position
+      void windowEl.offsetHeight
+
+      const buttonRect = fromTaskbarButton.getBoundingClientRect()
+      const windowRect = windowEl.getBoundingClientRect()
+      const windowCenterX = windowRect.left + windowRect.width / 2
+      const windowCenterY = windowRect.top + windowRect.height / 2
+      const buttonCenterX = buttonRect.left + buttonRect.width / 2
+      const buttonCenterY = buttonRect.top + buttonRect.height / 2
+
+      const translateX = buttonCenterX - windowCenterX
+      const translateY = buttonCenterY - windowCenterY
+
+      // Start from button position
+      windowEl.style.transition = 'none'
+      windowEl.style.transformOrigin = 'center center'
+      windowEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(0.1)`
+      windowEl.style.opacity = '0'
+      windowEl.style.zIndex = ++windowZIndex
+      activewindow = windowEl
+
+      // Force reflow
+      void windowEl.offsetHeight
+
+      // Animate to window position
+      requestAnimationFrame(() => {
+        windowEl.style.transition = 'opacity 0.2s ease, transform 0.2s ease'
+        windowEl.style.transform = 'translate(0, 0) scale(1)'
+        windowEl.style.opacity = '1'
+
+        setTimeout(() => {
+          windowEl.classList.remove('restoring')
+          windowEl.classList.add('active')
+          windowEl.style.transition = ''
+          windowEl.style.transform = ''
+          windowEl.style.opacity = ''
+          windowEl.style.visibility = ''
+          windowEl.style.transformOrigin = ''
+          updateTaskbar()
+        }, 200)
+      })
+    }
+    else {
+      // Simple fade-in for regular opens
+      windowEl.style.opacity = '0'
+      windowEl.style.transform = 'scale(0.95)'
+      windowEl.classList.add('active')
+      windowEl.style.zIndex = ++windowZIndex
+      activewindow = windowEl
+
+      // Trigger animation
+      requestAnimationFrame(() => {
+        windowEl.style.transition = 'opacity 0.15s ease, transform 0.15s ease'
+        windowEl.style.opacity = '1'
+        windowEl.style.transform = 'scale(1)'
+
+        setTimeout(() => {
+          windowEl.style.transition = ''
+          windowEl.style.transform = ''
+          windowEl.style.opacity = ''
+        }, 150)
+      })
+    }
+  }
+  else {
+    windowEl.classList.add('active')
+    windowEl.style.zIndex = ++windowZIndex
+    activewindow = windowEl
+  }
+
+  if (!fromTaskbarButton) {
+    updateTaskbar()
+  }
+}
+
+function closeWindow(windowId) {
+  console.log('Closing window:', windowId)
+  const windowEl = document.getElementById(`window-${windowId}`)
+  if (!windowEl)
+    return
+
+  windowEl.classList.remove('active', 'minimized', 'maximized')
+  if (activewindow === windowEl) {
+    activewindow = null
+  }
+
+  updateTaskbar()
+
+  // Show notification when welcome window is closed
+  if (windowId === 'welcome') {
+    showNotification()
+  }
+}
+
+function minimizeWindow(windowId) {
+  console.log('Minimizing window:', windowId)
+  const windowEl = document.getElementById(`window-${windowId}`)
+  if (!windowEl)
+    return
+
+  // Remove active, add minimizing to keep visible
+  windowEl.classList.remove('active')
+  windowEl.classList.add('minimizing')
+
+  // Update taskbar first
+  updateTaskbar()
+
+  // Find the taskbar button for this window after a small delay
+  requestAnimationFrame(() => {
+    const taskbarButtons = document.querySelectorAll('.taskbar-task')
+    let targetButton = null
+    taskbarButtons.forEach((btn) => {
+      const btnText = btn.querySelector('.taskbar-task-label')?.textContent
+      const windowTitle = windowEl.querySelector('.window-title')?.textContent
+      if (btnText === windowTitle) {
+        targetButton = btn
+      }
+    })
+
+    if (targetButton) {
+      // Get positions
+      const windowRect = windowEl.getBoundingClientRect()
+      const buttonRect = targetButton.getBoundingClientRect()
+
+      // Calculate translation to button center (from window center)
+      const windowCenterX = windowRect.left + windowRect.width / 2
+      const windowCenterY = windowRect.top + windowRect.height / 2
+      const buttonCenterX = buttonRect.left + buttonRect.width / 2
+      const buttonCenterY = buttonRect.top + buttonRect.height / 2
+
+      const translateX = buttonCenterX - windowCenterX
+      const translateY = buttonCenterY - windowCenterY
+
+      // Set initial state (current position)
+      windowEl.style.transition = 'opacity 0.2s ease, transform 0.2s ease'
+      windowEl.style.transformOrigin = 'center center'
+      windowEl.style.transform = 'translate(0, 0) scale(1)'
+      windowEl.style.opacity = '1'
+
+      // Force reflow
+      void windowEl.offsetHeight
+
+      // Animate to taskbar button center
+      windowEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(0.1)`
+      windowEl.style.opacity = '0'
+
+      // After animation completes, hide window
+      setTimeout(() => {
+        windowEl.classList.remove('minimizing')
+        windowEl.classList.add('minimized')
+        windowEl.style.transition = ''
+        windowEl.style.transform = ''
+        windowEl.style.opacity = ''
+        windowEl.style.transformOrigin = ''
+      }, 200)
+    }
+    else {
+      // Fallback - just fade out
+      windowEl.style.transition = 'opacity 0.2s ease, transform 0.2s ease'
+      windowEl.style.opacity = '1'
+      void windowEl.offsetHeight
+      windowEl.style.opacity = '0'
+      windowEl.style.transform = 'scale(0.8)'
+
+      setTimeout(() => {
+        windowEl.classList.remove('minimizing')
+        windowEl.classList.add('minimized')
+        windowEl.style.transition = ''
+        windowEl.style.transform = ''
+        windowEl.style.opacity = ''
+        windowEl.style.transformOrigin = ''
+      }, 200)
+    }
+  })
+
+  // Show notification when welcome window is minimized
+  if (windowId === 'welcome') {
+    showNotification()
+  }
+}
+
+function toggleMaximizeWindow(windowId) {
+  console.log('Toggling maximize for window:', windowId)
+  const windowEl = document.getElementById(`window-${windowId}`)
+  if (!windowEl)
+    return
+
+  // Store original position and size before maximizing
+  if (!windowEl.classList.contains('maximized')) {
+    windowEl.dataset.originalLeft = windowEl.style.left
+    windowEl.dataset.originalTop = windowEl.style.top
+    windowEl.dataset.originalWidth = windowEl.style.width
+    windowEl.dataset.originalHeight = windowEl.style.height
+  }
+
+  windowEl.classList.toggle('maximized')
+
+  // Restore original position if unmaximizing
+  if (!windowEl.classList.contains('maximized')) {
+    if (windowEl.dataset.originalLeft)
+      windowEl.style.left = windowEl.dataset.originalLeft
+    if (windowEl.dataset.originalTop)
+      windowEl.style.top = windowEl.dataset.originalTop
+    if (windowEl.dataset.originalWidth)
+      windowEl.style.width = windowEl.dataset.originalWidth
+    if (windowEl.dataset.originalHeight)
+      windowEl.style.height = windowEl.dataset.originalHeight
+  }
+}
+
+function updateTaskbar() {
+  const taskbarTasks = document.getElementById('taskbar-tasks')
+  taskbarTasks.innerHTML = ''
+
+  const windows = document.querySelectorAll('.window')
+  windows.forEach((windowEl) => {
+    const isOpen = windowEl.classList.contains('active')
+      || windowEl.classList.contains('minimized')
+      || windowEl.classList.contains('minimizing')
+      || windowEl.classList.contains('restoring')
+    if (!isOpen)
+      return
+
+    const windowId = windowEl.id.replace('window-', '')
+    const icon = windowEl.querySelector('.window-icon').textContent
+    const title = windowEl.querySelector('.window-title').textContent
+    const isActive = windowEl.classList.contains('active') || windowEl.classList.contains('restoring')
+
+    const taskBtn = document.createElement('button')
+    taskBtn.className = `taskbar-task${isActive ? ' active' : ''}`
+    taskBtn.innerHTML = `
+      <div class="taskbar-task-icon">${icon}</div>
+      <div class="taskbar-task-label">${title}</div>
+    `
+
+    taskBtn.addEventListener('click', () => {
+      if (windowEl.classList.contains('minimized')) {
+        // Remove minimized and add restoring
+        windowEl.classList.remove('minimized')
+        windowEl.classList.add('restoring')
+        windowEl.style.zIndex = ++windowZIndex
+
+        // Get button and window centers
+        const buttonRect = taskBtn.getBoundingClientRect()
+        const windowRect = windowEl.getBoundingClientRect()
+        const windowCenterX = windowRect.left + windowRect.width / 2
+        const windowCenterY = windowRect.top + windowRect.height / 2
+        const buttonCenterX = buttonRect.left + buttonRect.width / 2
+        const buttonCenterY = buttonRect.top + buttonRect.height / 2
+
+        const translateX = buttonCenterX - windowCenterX
+        const translateY = buttonCenterY - windowCenterY
+
+        // Start from button position (no transition yet)
+        windowEl.style.transition = 'none'
+        windowEl.style.transformOrigin = 'center center'
+        windowEl.style.transform = `translate(${translateX}px, ${translateY}px) scale(0.1)`
+        windowEl.style.opacity = '0'
+
+        // Force reflow
+        void windowEl.offsetHeight
+
+        // Enable transitions and animate to window position
+        requestAnimationFrame(() => {
+          windowEl.style.transition = 'opacity 0.2s ease, transform 0.2s ease'
+          windowEl.style.transform = 'translate(0, 0) scale(1)'
+          windowEl.style.opacity = '1'
+
+          // After animation, clean up
+          setTimeout(() => {
+            windowEl.classList.remove('restoring')
+            windowEl.classList.add('active')
+            windowEl.style.transition = ''
+            windowEl.style.transform = ''
+            windowEl.style.opacity = ''
+            windowEl.style.transformOrigin = ''
+            activewindow = windowEl
+            updateTaskbar()
+          }, 200)
+        })
+      }
+      else if (windowEl.classList.contains('active')) {
+        minimizeWindow(windowId)
+      }
+      else {
+        windowEl.classList.add('active')
+        windowEl.style.zIndex = ++windowZIndex
+        activewindow = windowEl
+        updateTaskbar()
+      }
+    })
+
+    // Right-click context menu for taskbar buttons
+    taskBtn.addEventListener('contextmenu', (e) => {
+      e.preventDefault()
+      showTaskbarContextMenu(e, windowId, windowEl)
+    })
+
+    taskbarTasks.appendChild(taskBtn)
+  })
+}
+
+// Keyboard shortcuts for window management
+document.addEventListener('keydown', (e: KeyboardEvent) => {
+  // Escape key to close active window
+  if (e.key === 'Escape' || e.key === 'Esc') {
+    const openWindow = document.querySelector('.window.active:not(.minimized)')
+
+    if (openWindow) {
+      e.preventDefault()
+      const windowId = openWindow.id.replace('window-', '')
+      closeWindow(windowId)
+    }
+  }
+})
+
+// window dragging
+let draggedwindow = null
+let dragOffsetX = 0
+let dragOffsetY = 0
+
+function initializeWindowDragging() {
+  document.querySelectorAll('.window').forEach((windowEl) => {
+    const titlebar = windowEl.querySelector('.window-titlebar')
+
+    titlebar.addEventListener('mousedown', (e) => {
+      if (e.target.classList.contains('window-control'))
+        return
+      if (windowEl.classList.contains('maximized'))
+        return
+
+      draggedwindow = windowEl
+      dragOffsetX = e.clientX - windowEl.offsetLeft
+      dragOffsetY = e.clientY - windowEl.offsetTop
+
+      windowEl.style.zIndex = ++windowZIndex
+      windowEl.classList.add('active')
+      activewindow = windowEl
+
+      updateTaskbar()
+    })
+  })
+
+  document.addEventListener('mousemove', (e) => {
+    if (!draggedwindow)
+      return
+
+    const newX = e.clientX - dragOffsetX
+    const newY = e.clientY - dragOffsetY
+
+    draggedwindow.style.left = `${newX}px`
+    draggedwindow.style.top = `${newY}px`
+  })
+
+  document.addEventListener('mouseup', () => {
+    draggedwindow = null
+  })
+}
+
+// Feature switching
+const featureContent = {
+  backend: {
+    auth: {
+      title: 'Authentication',
+      code: `import { Auth } from '@stacksjs/auth'
+
+// Login user
+const user = await Auth.attempt({
+  email: 'user@example.com',
+  password: 'secret'
+})
+
+// Get authenticated user
+const current = await Auth.user()`,
+    },
+    orm: {
+      title: 'ORM',
+      code: `import { User } from './models/User'
+
+// Eloquent-style queries
+const users = await User.where('active', true)
+  .orderBy('created_at', 'desc')
+  .limit(10)
+  .get()
+
+// Create new records
+await User.create({
+  name: 'John Doe',
+  email: 'john@example.com'
+})`,
+    },
+    validation: {
+      title: 'Validation',
+      code: `import { validate } from '@stacksjs/validation'
+
+const result = await validate(request.body, {
+  email: 'required|email',
+  password: 'required|min:8',
+  age: 'numeric|min:18'
+})
+
+if (result.fails()) {
+  return result.errors()
+}`,
+    },
+    storage: {
+      title: 'Storage',
+      code: `import { Storage } from '@stacksjs/storage'
+
+// Store file
+await Storage.put('avatars/user.jpg', fileData)
+
+// Retrieve file
+const file = await Storage.get('avatars/user.jpg')
+
+// Delete file
+await Storage.delete('avatars/user.jpg')`,
+    },
+    queue: {
+      title: 'Queues',
+      code: `import { Queue } from '@stacksjs/queue'
+
+// Dispatch job
+await Queue.dispatch('SendEmail', {
+  to: 'user@example.com',
+  subject: 'Welcome!'
+})
+
+// Process jobs
+Queue.process('SendEmail', async (job) => {
+  await sendEmail(job.data)
+})`,
+    },
+    events: {
+      title: 'Events',
+      code: `import { Event } from '@stacksjs/events'
+
+// Dispatch event
+Event.dispatch('user.registered', { user })
+
+// Listen for event
+Event.listen('user.registered', (data) => {
+  console.log('New user:', data.user)
+})`,
+    },
+  },
+  frontend: {
+    'components': {
+      title: 'Components',
+      code: `&lt;template&gt;
+  &lt;Card title="Hello"&gt;
+    &lt;p&gt;Reusable components&lt;/p&gt;
+  &lt;/Card&gt;
+&lt;/template&gt;
+
+&lt;script setup&gt;
+// Auto-imported
+&lt;/script&gt;`,
+    },
+    'ui-kit': {
+      title: 'UI Kit',
+      code: `import { Button, Input, Modal } from '@stacksjs/ui'
+
+&lt;Button variant="primary"&gt;Click me&lt;/Button&gt;
+&lt;Input placeholder="Enter text..." /&gt;
+&lt;Modal title="Welcome"&gt;
+  &lt;p&gt;Hello there!&lt;/p&gt;
+&lt;/Modal&gt;`,
+    },
+    'routing': {
+      title: 'Routing',
+      code: `import { Router } from '@stacksjs/router'
+
+Router.get('/', () => {
+  return view('home')
+})
+
+Router.post('/api/users', async (request) => {
+  const user = await User.create(request.body)
+  return user
+})`,
+    },
+    'desktop': {
+      title: 'Desktop',
+      code: `import { app, window } from '@stacksjs/desktop'
+
+// Create desktop app
+const win = window.create({
+  title: 'My App',
+  width: 800,
+  height: 600
+})
+
+// Native features
+app.notification('Hello from desktop!')`,
+    },
+  },
+  cloud: {
+    deployment: {
+      title: 'Deployment',
+      code: `export default {
+  provider: 'aws',
+  region: 'us-east-1',
+
+  compute: {
+    type: 'serverless',
+    memory: 1024
+  }
+}`,
+    },
+    storage: {
+      title: 'Storage',
+      code: `export default {
+  storage: {
+    driver: 's3',
+    bucket: 'my-bucket',
+    region: 'us-east-1'
+  }
+}`,
+    },
+    cdn: {
+      title: 'CDN',
+      code: `export default {
+  cdn: {
+    enabled: true,
+    provider: 'cloudfront',
+    domain: 'cdn.example.com'
+  }
+}`,
+    },
+    dns: {
+      title: 'DNS',
+      code: `export default {
+  dns: {
+    provider: 'route53',
+    domain: 'example.com',
+    records: [
+      { type: 'A', name: '@', value: '1.2.3.4' }
+    ]
+  }
+}`,
+    },
+  },
+}
+
+function showFeature(section, featureId) {
+  console.log('Showing feature:', section, featureId)
+
+  const buttons = document.querySelectorAll(`#window-${section} .feature-btn`)
+  buttons.forEach(btn => btn.classList.remove('active'))
+  event.target.classList.add('active')
+
+  const content = featureContent[section][featureId]
+  if (!content)
+    return
+
+  const contentEl = document.getElementById(`${section}-feature-content`)
+  contentEl.innerHTML = `
+    <h3>${content.title}</h3>
+    <div class="code-display">${content.code}</div>
+  `
+}
+
+// Start menu toggle
+const startButton = document.querySelector('.start-button')
+const startMenu = document.getElementById('start-menu')
+
+startButton.addEventListener('click', (e) => {
+  e.stopPropagation()
+  startMenu.classList.toggle('active')
+})
+
+document.addEventListener('click', (e) => {
+  if (!e.target.closest('.start-menu') && !e.target.closest('.start-button')) {
+    startMenu.classList.remove('active')
+  }
+})
+
+// Notification
+const notification = document.getElementById('notification-popup')
+
+function closeNotification() {
+  notification.classList.add('hidden')
+}
+
+function showNotification() {
+  if (notification) {
+    notification.classList.remove('hidden')
+  }
+}
+
+// Email signup helper
+async function subscribeEmail(email: string): Promise<{ success: boolean, message?: string }> {
+  const response = await fetch('/api/email/subscribe', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ email }),
+  })
+
+  if (response.ok) {
+    return { success: true }
+  }
+  else {
+    const data = await response.json().catch(() => ({}))
+    return { success: false, message: data.message || 'Failed to subscribe. Please try again later.' }
+  }
+}
+
+// Email signup (notification popup)
+async function handleEmailSignup() {
+  const emailInput = document.getElementById('notification-email') as HTMLInputElement
+  const email = emailInput?.value.trim()
+
+  if (!email || !email.includes('@')) {
+    alert('Please enter a valid email address')
+    return
+  }
+
+  try {
+    const result = await subscribeEmail(email)
+
+    if (result.success) {
+      const signupEl = document.getElementById('notification-signup')
+      const successEl = document.getElementById('notification-success')
+      if (signupEl) signupEl.style.display = 'none'
+      if (successEl) successEl.style.display = 'block'
+    }
+    else {
+      alert(result.message)
+    }
+  }
+  catch (error) {
+    console.error('Subscription error:', error)
+    alert('Failed to subscribe. Please try again later.')
+  }
+}
+
+// Blog newsletter signup
+async function handleBlogNewsletterSignup() {
+  const emailInput = document.getElementById('blog-newsletter-email') as HTMLInputElement
+  const email = emailInput?.value.trim()
+
+  if (!email || !email.includes('@')) {
+    alert('Please enter a valid email address')
+    return
+  }
+
+  try {
+    const result = await subscribeEmail(email)
+
+    if (result.success) {
+      const formEl = document.getElementById('blog-newsletter-form')
+      const successEl = document.getElementById('blog-newsletter-success')
+      if (formEl) formEl.style.display = 'none'
+      if (successEl) successEl.style.display = 'block'
+    }
+    else {
+      alert(result.message)
+    }
+  }
+  catch (error) {
+    console.error('Subscription error:', error)
+    alert('Failed to subscribe. Please try again later.')
+  }
+}
+
+// Context menu
+const contextMenu = document.getElementById('context-menu')
+const iconContextMenu = document.getElementById('icon-context-menu')
+let contextMenuIcon: HTMLElement | null = null
+
+document.addEventListener('contextmenu', (e) => {
+  // Check if right-click is on a taskbar button
+  const target = e.target as HTMLElement
+  const isTaskbarButton = target.closest('.taskbar-task')
+
+  // If it's a taskbar button, let its own handler deal with it
+  if (isTaskbarButton) {
+    return
+  }
+
+  e.preventDefault()
+
+  // Check if right-click is on an icon
+  const icon = target.closest('.desktop-icon') as HTMLElement
+
+  // Hide both menus first
+  contextMenu.style.display = 'none'
+  iconContextMenu.style.display = 'none'
+
+  // Also hide taskbar context menu
+  if (taskbarContextMenu) {
+    taskbarContextMenu.remove()
+    taskbarContextMenu = null
+  }
+
+  if (icon) {
+    // Select the icon first if it's not already selected
+    if (selectedIcon && selectedIcon !== icon) {
+      selectedIcon.classList.remove('selected')
+    }
+    icon.classList.add('selected')
+    selectedIcon = icon
+
+    // Show icon context menu
+    contextMenuIcon = icon
+
+    // Check if icon is on the right side of the screen
+    const screenWidth = window.innerWidth
+    const menuWidth = 200 // Approximate context menu width
+    const isRightSide = e.clientX > screenWidth / 2
+
+    // Position menu to the left if icon is on right side
+    const menuLeft = isRightSide ? e.clientX - menuWidth : e.clientX
+
+    iconContextMenu.style.left = `${menuLeft}px`
+    iconContextMenu.style.top = `${e.clientY}px`
+    iconContextMenu.style.display = 'flex'
+  }
+  else {
+    // Show desktop context menu
+    contextMenuIcon = null
+
+    // Check if click is on the right side of the screen
+    const screenWidth = window.innerWidth
+    const menuWidth = 200 // Approximate context menu width
+    const isRightSide = e.clientX > screenWidth / 2
+
+    // Position menu to the left if on right side
+    const menuLeft = isRightSide ? e.clientX - menuWidth : e.clientX
+
+    contextMenu.style.left = `${menuLeft}px`
+    contextMenu.style.top = `${e.clientY}px`
+    contextMenu.style.display = 'flex'
+  }
+})
+
+document.addEventListener('click', () => {
+  contextMenu.style.display = 'none'
+  iconContextMenu.style.display = 'none'
+})
+
+// Share functions
+function shareVia(platform) {
+  const url = 'https://stacksjs.com'
+  const text = 'Check out Stacks - A TypeScript framework for modern development'
+
+  switch (platform) {
+    case 'twitter':
+      window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank')
+      break
+    case 'bluesky':
+      window.open(`https://bsky.app/intent/compose?text=${encodeURIComponent(`${text} ${url}`)}`, '_blank')
+      break
+    case 'linkedin':
+      window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`, '_blank')
+      break
+    case 'email':
+      window.location.href = `mailto:?subject=${encodeURIComponent(text)}&body=${encodeURIComponent(url)}`
+      break
+    case 'copy':
+      navigator.clipboard.writeText(url).then(() => {
+        alert('Link copied to clipboard!')
+      })
+      break
+  }
+  contextMenu.style.display = 'none'
+}
+
+function copyLogoSVG() {
+  const logoSVG = `<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <rect width="100" height="100" fill="#0831d9"/>
+    <text x="50" y="65" font-family="Arial" font-size="40" font-weight="bold" fill="white" text-anchor="middle">S</text>
+  </svg>`
+
+  navigator.clipboard.writeText(logoSVG).then(() => {
+    alert('Logo SVG copied to clipboard!')
+  }).catch((err) => {
+    console.error('Failed to copy:', err)
+  })
+}
+
+function copyWordmarkSVG() {
+  const wordmarkSVG = `<svg width="200" height="50" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
+    <text x="10" y="35" font-family="Arial" font-size="30" font-weight="bold" fill="#0831d9">STACKS</text>
+  </svg>`
+
+  navigator.clipboard.writeText(wordmarkSVG).then(() => {
+    alert('Wordmark SVG copied to clipboard!')
+  }).catch((err) => {
+    console.error('Failed to copy:', err)
+  })
+}
+
+function changeBackgroundImage() {
+  // Move to next background
+  currentBackgroundIndex = (currentBackgroundIndex + 1) % BACKGROUND_IMAGES.length
+  const newBackground = BACKGROUND_IMAGES[currentBackgroundIndex]
+
+  // Get the desktop element
+  const desktop = document.querySelector('.desktop') as HTMLElement
+  if (desktop) {
+    desktop.style.backgroundImage = `url('${newBackground}')`
+  }
+
+  // Close context menu
+  const contextMenu = document.getElementById('context-menu')
+  if (contextMenu) {
+    contextMenu.style.display = 'none'
+  }
+}
+
+function _submitContactForm(event: Event) {
+  event.preventDefault()
+
+  const nameInput = document.getElementById('contact-name') as HTMLInputElement
+  const emailInput = document.getElementById('contact-email') as HTMLInputElement
+  const subjectInput = document.getElementById('contact-subject') as HTMLInputElement
+  const messageInput = document.getElementById('contact-message') as HTMLTextAreaElement
+
+  const name = nameInput.value
+  const email = emailInput.value
+  const subject = subjectInput.value
+  const _message = messageInput.value
+
+  // Simulate form submission
+  alert(`✅ Thank you, ${name}!\n\nYour message has been received. We'll get back to you at ${email} soon.\n\nSubject: ${subject}\n\nThis is a demo - in production, this would send your message to our team.`)
+
+  // Clear form
+  nameInput.value = ''
+  emailInput.value = ''
+  subjectInput.value = ''
+  messageInput.value = ''
+}
+
+// Icon context menu functions
+function openIconFromMenu() {
+  if (!contextMenuIcon)
+    return
+
+  const iconType = contextMenuIcon.dataset.iconType
+  const iconId = contextMenuIcon.dataset.iconId
+  const iconUrl = contextMenuIcon.dataset.iconUrl
+
+  if (iconType === 'window') {
+    openWindow(iconId)
+  }
+  else if (iconType === 'link' && iconUrl) {
+    window.open(iconUrl, '_blank')
+  }
+}
+
+function exitEditMode(save: boolean = true) {
+  if (!activeEditInput || !activeEditLabel)
+    return
+
+  if (save) {
+    const newName = activeEditInput.value.trim()
+    if (newName) {
+      activeEditLabel.textContent = newName
+    }
+    else {
+      activeEditLabel.textContent = activeEditOriginalName
+    }
+  }
+  else {
+    activeEditLabel.textContent = activeEditOriginalName
+  }
+
+  activeEditInput = null
+  activeEditLabel = null
+  activeEditOriginalName = ''
+}
+
+function enterEditMode(icon: HTMLElement) {
+  // Exit any existing edit mode first
+  exitEditMode()
+
+  const labelElement = icon.querySelector('.desktop-icon-label') as HTMLElement
+  if (!labelElement)
+    return
+
+  const currentName = labelElement.textContent || ''
+
+  // Store edit state
+  activeEditLabel = labelElement
+  activeEditOriginalName = currentName
+
+  // Create an input element
+  const input = document.createElement('input')
+  input.type = 'text'
+  input.value = currentName
+  input.style.cssText = `
+    width: 100%;
+    background: white;
+    border: 1px solid #0066cc;
+    padding: 2px 4px;
+    font-family: 'Segoe UI', Tahoma, sans-serif;
+    font-size: 11px;
+    text-align: center;
+    outline: none;
+  `
+
+  activeEditInput = input
+
+  // Replace label with input
+  labelElement.textContent = ''
+  labelElement.appendChild(input)
+  input.focus()
+  input.select()
+
+  // Handle finish editing
+  const finishEdit = () => {
+    exitEditMode(true)
+  }
+
+  input.addEventListener('blur', finishEdit)
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      exitEditMode(true)
+    }
+    else if (e.key === 'Escape') {
+      exitEditMode(false)
+    }
+  })
+}
+
+function renameIcon() {
+  if (!contextMenuIcon)
+    return
+
+  const labelElement = contextMenuIcon.querySelector('.desktop-icon-label') as HTMLElement
+  const currentName = labelElement.textContent || ''
+
+  const newName = prompt('Enter new name:', currentName)
+  if (newName && newName.trim()) {
+    labelElement.textContent = newName.trim()
+  }
+}
+
+function deleteIcon() {
+  if (!contextMenuIcon)
+    return
+
+  const _iconId = contextMenuIcon.dataset.iconId
+  const confirmed = confirm(`Are you sure you want to delete this icon?`)
+
+  if (confirmed) {
+    contextMenuIcon.remove()
+    contextMenuIcon = null
+  }
+}
+
+// License window functions
+function closeLicenseWindow() {
+  closeWindow('license')
+}
+
+// Payment form formatting and validation
+function formatCardNumber(input: HTMLInputElement) {
+  const value = input.value.replace(/\s/g, '').replace(/\D/g, '')
+  const formattedValue = value.match(/.{1,4}/g)?.join(' ') || value
+  input.value = formattedValue
+}
+
+function formatExpiry(input: HTMLInputElement) {
+  const value = input.value.replace(/\D/g, '')
+
+  if (value.length >= 2) {
+    let month = value.substring(0, 2)
+    const year = value.substring(2, 4)
+
+    // Validate month
+    const monthNum = Number.parseInt(month)
+    if (monthNum > 12) {
+      month = '12'
+    }
+    if (monthNum < 1 && month.length === 2) {
+      month = '01'
+    }
+    if (monthNum === 0 && month.length === 2) {
+      month = '01'
+    }
+
+    input.value = month + (year ? `/${year}` : '')
+  }
+  else {
+    input.value = value
+  }
+}
+
+function formatCVV(input: HTMLInputElement) {
+  input.value = input.value.replace(/\D/g, '')
+}
+
+function togglePaymentSection() {
+  const paymentForm = document.getElementById('payment-form')
+  if (paymentForm) {
+    paymentForm.style.display = paymentForm.style.display === 'none' ? 'block' : 'none'
+  }
+}
+
+function validatePaymentForm(): boolean {
+  const cardNumber = (document.getElementById('card-number') as HTMLInputElement)?.value.replace(/\s/g, '')
+  const cardExpiry = (document.getElementById('card-expiry') as HTMLInputElement)?.value
+  const cardCVV = (document.getElementById('card-cvv') as HTMLInputElement)?.value
+  const cardName = (document.getElementById('card-name') as HTMLInputElement)?.value
+  const billingEmail = (document.getElementById('billing-email') as HTMLInputElement)?.value
+  const termsAgree = (document.getElementById('terms-agree') as HTMLInputElement)?.checked
+
+  if (!cardNumber || cardNumber.length < 13 || cardNumber.length > 19) {
+    alert('❌ Please enter a valid card number.')
+    return false
+  }
+
+  if (!cardExpiry || !/^\d{2}\/\d{2}$/.test(cardExpiry)) {
+    alert('❌ Please enter a valid expiration date (MM/YY).')
+    return false
+  }
+
+  // Validate expiry date is in the future
+  const [month, year] = cardExpiry.split('/').map(num => Number.parseInt(num))
+  const currentDate = new Date()
+  const _currentYear = currentDate.getFullYear() % 100 // Last 2 digits of current year
+  const currentMonth = currentDate.getMonth() + 1
+  const fullCurrentYear = currentDate.getFullYear()
+
+  // Check if month is valid
+  if (month < 1 || month > 12) {
+    alert('❌ Invalid month. Please enter a month between 01 and 12.')
+    return false
+  }
+
+  // Determine if the year is meant to be 20XX or 19XX
+  // Assume years 00-49 are 2000-2049, and 50-99 are 1950-1999
+  let fullYear = year
+  if (year >= 0 && year <= 49) {
+    fullYear = 2000 + year
+  }
+  else if (year >= 50 && year <= 99) {
+    fullYear = 1900 + year
+  }
+
+  // Check if card is expired
+  if (fullYear < fullCurrentYear) {
+    alert(`❌ Card expired in ${month.toString().padStart(2, '0')}/${year.toString().padStart(2, '0')}. Please use a valid card.`)
+    return false
+  }
+
+  if (fullYear === fullCurrentYear && month < currentMonth) {
+    alert(`❌ Card expired in ${month.toString().padStart(2, '0')}/${year.toString().padStart(2, '0')}. Please use a valid card.`)
+    return false
+  }
+
+  // Warn about cards expiring too far in the future (likely a typo)
+  if (fullYear > fullCurrentYear + 20) {
+    alert(`❌ Expiration date seems invalid (${month.toString().padStart(2, '0')}/${year.toString().padStart(2, '0')}). Please check and try again.`)
+    return false
+  }
+
+  if (!cardCVV || cardCVV.length < 3 || cardCVV.length > 4) {
+    alert('❌ Please enter a valid CVV code (3-4 digits).')
+    return false
+  }
+
+  if (!cardName || cardName.trim().length < 3) {
+    alert('❌ Please enter the cardholder name.')
+    return false
+  }
+
+  if (!billingEmail || !/^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/.test(billingEmail)) {
+    alert('❌ Please enter a valid email address.')
+    return false
+  }
+
+  if (!termsAgree) {
+    alert('❌ Please agree to the terms and conditions to continue.')
+    return false
+  }
+
+  return true
+}
+
+function purchaseLicense() {
+  // Check if payment form is visible
+  const paymentForm = document.getElementById('payment-form')
+  const isPaymentVisible = paymentForm && paymentForm.style.display !== 'none'
+
+  if (isPaymentVisible) {
+    // Validate payment form
+    if (!validatePaymentForm()) {
+      return
+    }
+
+    // Get selected edition (hobby or professional)
+    const selectedEdition = (window as any).selectedPlanType || 'professional'
+    const editionName = selectedEdition === 'hobby' ? 'Hobby Edition' : 'Professional Edition'
+
+    // Get selected pricing plan (monthly or lifetime)
+    const selectedInterval = (document.querySelector('input[name="pricing-plan"]:checked') as HTMLInputElement)?.value
+    const intervalType = selectedInterval === 'lifetime' ? 'Lifetime License' : 'Monthly Subscription'
+
+    // Determine pricing based on edition and interval
+    let planAmount: string
+    if (selectedEdition === 'hobby') {
+      planAmount = selectedInterval === 'lifetime' ? '$179' : '$9/month'
+    }
+    else {
+      planAmount = selectedInterval === 'lifetime' ? '$279' : '$29/month'
+    }
+
+    // Get payment details
+    const cardNumber = (document.getElementById('card-number') as HTMLInputElement)?.value
+    const cardName = (document.getElementById('card-name') as HTMLInputElement)?.value
+    const billingEmail = (document.getElementById('billing-email') as HTMLInputElement)?.value
+
+    // Show processing message
+    const maskedCard = `****${cardNumber.replace(/\s/g, '').slice(-4)}`
+    alert(`✅ Processing payment with Stripe...\n\nEdition: ${editionName}\nPlan: ${intervalType}\nAmount: ${planAmount}\nCard: ${maskedCard}\nName: ${cardName}\nEmail: ${billingEmail}\n\nThis is a demo. In production, your payment data would be securely processed by Stripe without ever touching our servers.`)
+
+    // Clear form and show success
+    setTimeout(() => {
+      const licenseCode = selectedInterval === 'lifetime'
+        ? `STAC-KSJS-${selectedEdition.toUpperCase().substring(0, 4)}-LIFE-2025`
+        : `STAC-KSJS-${selectedEdition.toUpperCase().substring(0, 4)}-MNTH-2025`
+
+      const successMessage = selectedInterval === 'lifetime'
+        ? `✅ Payment successful!\n\nYou now have LIFETIME access to STACKS.JS ${editionName}!\n\nYour license code has been sent to your email.\n\nLicense: ${licenseCode}\nType: Lifetime - ${editionName}\nStatus: Activated`
+        : `✅ Payment successful!\n\nYour monthly subscription is now active!\n\nYou will be billed ${planAmount}. You can cancel anytime.\n\nLicense: ${licenseCode}\nType: Monthly - ${editionName}\nStatus: Active`
+
+      alert(successMessage);
+
+      // Clear payment form
+      (document.getElementById('card-number') as HTMLInputElement).value = '';
+      (document.getElementById('card-expiry') as HTMLInputElement).value = '';
+      (document.getElementById('card-cvv') as HTMLInputElement).value = '';
+      (document.getElementById('card-name') as HTMLInputElement).value = '';
+      (document.getElementById('billing-email') as HTMLInputElement).value = '';
+      (document.getElementById('terms-agree') as HTMLInputElement).checked = false
+
+      closeWindow('license')
+    }, 1000)
+  }
+  else {
+    // Fall back to sponsorship page
+    const confirmed = confirm('This will open the Stacks.js sponsorship page in a new window. Continue?')
+    if (confirmed) {
+      window.open('https://github.com/sponsors/chrisbbreuer', '_blank')
+    }
+  }
+}
+
+function activateLicense() {
+  const input = document.getElementById('license-code-input') as HTMLInputElement
+  const code = input.value.trim().toUpperCase()
+
+  if (!code) {
+    alert('Please enter a license code.')
+    return
+  }
+
+  // Format the code with dashes if not already formatted
+  const formattedCode = code.replace(/-/g, '').match(/.{1,4}/g)?.join('-') || code
+
+  // Check for special codes
+  if (formattedCode === 'OPEN-SOUR-CE4E-VER' || formattedCode === 'STAC-KSJS-FORE-VER') {
+    alert(`✅ License activated successfully!\n\nThank you for using STACKS.JS Professional Edition.\n\nLicense: ${formattedCode}\nType: Professional Edition\nStatus: Activated`)
+    input.value = ''
+    closeWindow('license')
+    return
+  }
+
+  // Check for trial code
+  if (formattedCode === 'TRIAL-2025-STAC-KSJS') {
+    alert(`✅ Trial license activated!\n\nYou have 30 days to evaluate STACKS.JS Professional Edition.\n\nLicense: ${formattedCode}\nType: 30-Day Trial\nStatus: Activated`)
+    input.value = ''
+    closeWindow('license')
+    return
+  }
+
+  // Invalid code
+  alert('❌ Invalid license code.\n\nPlease check your code and try again, or purchase a new license.\n\nTip: Try "OPEN-SOUR-CE4E-VER" or "TRIAL-2025-STAC-KSJS"')
+}
+
+// Ecosystem tab switching
+function showEcosystemTab(tabName) {
+  // Hide all tabs
+  const tabs = document.querySelectorAll('.ecosystem-tab')
+  tabs.forEach((tab) => {
+    (tab as HTMLElement).style.display = 'none'
+  })
+
+  // Remove active class from all buttons
+  const buttons = document.querySelectorAll('#window-ecosystem .feature-btn')
+  buttons.forEach(btn => btn.classList.remove('active'))
+
+  // Show selected tab
+  const selectedTab = document.getElementById(`tab-${tabName}`)
+  if (selectedTab) {
+    selectedTab.style.display = 'block'
+  }
+
+  // Add active class to clicked button
+  event.target.classList.add('active')
+}
+
+// Print Welcome PDF
+function printWelcome() {
+  const welcomeContent = document.querySelector('#window-welcome .window-content')
+  if (!welcomeContent)
+    return
+
+  // Create a new window for printing
+  const printWindow = window.open('', '', 'width=800,height=600')
+  if (!printWindow)
+    return
+
+  printWindow.document.write(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>STACKS.JS - Welcome</title>
+        <style>
+          body { font-family: 'Tahoma', sans-serif; margin: 0; padding: 20px; }
+          @media print {
+            button { display: none; }
+          }
+        </style>
+      </head>
+      <body>
+        ${welcomeContent.innerHTML}
+      </body>
+    </html>
+  `)
+  printWindow.document.close()
+  printWindow.focus()
+  setTimeout(() => {
+    printWindow.print()
+    printWindow.close()
+  }, 250)
+}
+
+// Download Welcome PDF
+function downloadWelcome() {
+  const welcomeContent = document.querySelector('#window-welcome .window-content')
+  if (!welcomeContent)
+    return
+
+  // Create HTML content
+  const htmlContent = `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>STACKS.JS - Welcome</title>
+        <meta charset="UTF-8">
+        <style>
+          body { font-family: 'Tahoma', sans-serif; margin: 0; padding: 20px; }
+        </style>
+      </head>
+      <body>
+        ${welcomeContent.innerHTML}
+      </body>
+    </html>
+  `
+
+  // Create blob and download
+  const blob = new Blob([htmlContent], { type: 'text/html' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'STACKS.JS-Welcome.html'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+// Plan selection
+function selectPlan(planType: string) {
+  // Minimize the Welcome window
+  minimizeWindow('welcome')
+
+  // Update License window based on selected plan
+  const licenseTitle = document.querySelector('#window-license h2')
+  const licenseTypeSpan = document.querySelectorAll('#window-license .license-type')
+  const licensePriceSpan = document.querySelector('#window-license .license-price')
+
+  // Update pricing in radio buttons
+  const lifetimeRadioLabel = document.querySelector('input[value="lifetime"]')?.parentElement
+  const monthlyRadioLabel = document.querySelector('input[value="monthly"]')?.parentElement
+
+  // Update features list
+  const featuresSpan = document.querySelector('#window-license .license-features')
+
+  if (planType === 'hobby') {
+    if (licenseTitle)
+      licenseTitle.textContent = 'STACKS.JS Hobby Edition'
+    licenseTypeSpan.forEach(el => el.textContent = 'Hobby Edition')
+    if (licensePriceSpan)
+      licensePriceSpan.textContent = '$9/mo or $179 lifetime'
+    if (featuresSpan)
+      featuresSpan.innerHTML = 'Unlimited Projects<br>Priority Support<br>Lifetime Updates'
+
+    // Update radio button pricing for Hobby
+    if (lifetimeRadioLabel) {
+      const priceDiv = lifetimeRadioLabel.querySelector('div > div:first-child') as HTMLElement
+      if (priceDiv)
+        priceDiv.innerHTML = '🎉 Lifetime Access - $179'
+    }
+    if (monthlyRadioLabel) {
+      const priceDiv = monthlyRadioLabel.querySelector('div > div:first-child') as HTMLElement
+      if (priceDiv)
+        priceDiv.innerHTML = 'Monthly Subscription - $9/mo'
+    }
+  }
+  else {
+    if (licenseTitle)
+      licenseTitle.textContent = 'STACKS.JS Professional Edition'
+    licenseTypeSpan.forEach(el => el.textContent = 'Professional Edition')
+    if (licensePriceSpan)
+      licensePriceSpan.textContent = '$29/mo or $279 lifetime'
+    if (featuresSpan)
+      featuresSpan.innerHTML = 'Unlimited Projects<br>Unlimited Team Members<br>Priority Support<br>Lifetime Updates'
+
+    // Update radio button pricing for Professional
+    if (lifetimeRadioLabel) {
+      const priceDiv = lifetimeRadioLabel.querySelector('div > div:first-child') as HTMLElement
+      if (priceDiv)
+        priceDiv.innerHTML = '🎉 Lifetime Access - $279'
+    }
+    if (monthlyRadioLabel) {
+      const priceDiv = monthlyRadioLabel.querySelector('div > div:first-child') as HTMLElement
+      if (priceDiv)
+        priceDiv.innerHTML = 'Monthly Subscription - $29/mo'
+    }
+  }
+
+  // Store the selected plan type
+  (window as any).selectedPlanType = planType
+
+  // Wait for Welcome window to finish minimizing, then open License from the taskbar
+  setTimeout(() => {
+    // The License window will get a taskbar button, so we need to open it first
+    // to create the button, then animate it
+    const licenseWindow = document.getElementById('window-license')
+    if (!licenseWindow)
+      return
+
+    // Temporarily mark as minimized to create taskbar button
+    licenseWindow.classList.add('minimized')
+    updateTaskbar()
+
+    // Find the newly created License taskbar button
+    setTimeout(() => {
+      const taskbarButtons = document.querySelectorAll('.taskbar-task')
+      let licenseButton = null
+      taskbarButtons.forEach((btn) => {
+        const btnText = btn.querySelector('.taskbar-task-label')?.textContent
+        if (btnText && btnText.includes('License')) {
+          licenseButton = btn
+        }
+      })
+
+      // Now remove minimized and open with animation from the button
+      licenseWindow.classList.remove('minimized')
+      if (licenseButton) {
+        openWindow('license', licenseButton)
+      }
+      else {
+        openWindow('license')
+      }
+    }, 10)
+  }, 250) // Wait for minimize animation to complete
+
+  // Show notification when a plan is selected
+  showNotification()
+}
+
+// Zoom functionality
+let currentZoom = 100
+
+function setZoom(zoomLevel: number) {
+  // Clamp zoom between 25 and 400
+  zoomLevel = Math.max(25, Math.min(400, zoomLevel))
+  currentZoom = zoomLevel
+
+  const content = document.getElementById('welcome-pdf-content')
+  const zoomInput = document.getElementById('zoom-level') as HTMLInputElement
+
+  if (content) {
+    const scale = zoomLevel / 100
+    content.style.transform = `scale(${scale})`
+    content.style.transformOrigin = 'top center'
+  }
+
+  if (zoomInput) {
+    zoomInput.value = zoomLevel.toString()
+  }
+}
+
+function increaseZoom() {
+  setZoom(currentZoom + 25)
+}
+
+function decreaseZoom() {
+  setZoom(currentZoom - 25)
+}
+
+function setZoomFromInput() {
+  const zoomInput = document.getElementById('zoom-level') as HTMLInputElement
+  if (zoomInput) {
+    const value = Number.parseInt(zoomInput.value)
+    if (!Number.isNaN(value)) {
+      setZoom(value)
+    }
+  }
+}
+
+// Taskbar context menu
+
+function showTaskbarContextMenu(e: MouseEvent, windowId: string, windowEl: HTMLElement) {
+  // Remove existing menu if any
+  if (taskbarContextMenu) {
+    taskbarContextMenu.remove()
+  }
+
+  // Hide desktop context menus
+  const contextMenu = document.getElementById('context-menu')
+  const iconContextMenu = document.getElementById('icon-context-menu')
+  if (contextMenu)
+    contextMenu.style.display = 'none'
+  if (iconContextMenu)
+    iconContextMenu.style.display = 'none'
+
+  taskbarContextWindowId = windowId
+
+  // Create context menu
+  taskbarContextMenu = document.createElement('div')
+  taskbarContextMenu.className = 'taskbar-context-menu'
+  taskbarContextMenu.style.position = 'fixed'
+  taskbarContextMenu.style.left = `${e.clientX}px`
+
+  // Position above the taskbar
+  const _menuHeight = 120 // approximate
+  taskbarContextMenu.style.bottom = '45px' // Just above taskbar
+
+  const isMinimized = windowEl.classList.contains('minimized')
+  const isMaximized = windowEl.classList.contains('maximized')
+
+  taskbarContextMenu.innerHTML = `
+    <button class="context-menu-item" onclick="taskbarContextRestore()">
+      <div class="context-menu-item-icon">🗗</div>
+      <div>${isMinimized ? 'Restore' : 'Minimize'}</div>
+    </button>
+    <button class="context-menu-item" onclick="taskbarContextMaximize()" ${isMinimized ? 'disabled' : ''}>
+      <div class="context-menu-item-icon">🗖</div>
+      <div>${isMaximized ? 'Restore Down' : 'Maximize'}</div>
+    </button>
+    <div style="height: 1px; background: #ccc; margin: 4px 0;"></div>
+    <button class="context-menu-item" onclick="taskbarContextClose()">
+      <div class="context-menu-item-icon">✕</div>
+      <div>Close</div>
+    </button>
+  `
+
+  document.body.appendChild(taskbarContextMenu)
+
+  // Close menu on click outside
+  setTimeout(() => {
+    document.addEventListener('click', closeTaskbarContextMenu)
+  }, 0)
+}
+
+function closeTaskbarContextMenu() {
+  if (taskbarContextMenu) {
+    taskbarContextMenu.remove()
+    taskbarContextMenu = null
+  }
+  document.removeEventListener('click', closeTaskbarContextMenu)
+}
+
+function taskbarContextRestore() {
+  if (!taskbarContextWindowId)
+    return
+  const windowEl = document.getElementById(`window-${taskbarContextWindowId}`)
+  if (!windowEl)
+    return
+
+  if (windowEl.classList.contains('minimized')) {
+    // Click the taskbar button to restore
+    const taskBtn = Array.from(document.querySelectorAll('.taskbar-task')).find((btn) => {
+      const btnText = btn.querySelector('.taskbar-task-label')?.textContent
+      const windowTitle = windowEl.querySelector('.window-title')?.textContent
+      return btnText === windowTitle
+    }) as HTMLElement
+    if (taskBtn)
+      taskBtn.click()
+  }
+  else {
+    minimizeWindow(taskbarContextWindowId)
+  }
+  closeTaskbarContextMenu()
+}
+
+function taskbarContextMaximize() {
+  if (!taskbarContextWindowId)
+    return
+  toggleMaximizeWindow(taskbarContextWindowId)
+  closeTaskbarContextMenu()
+}
+
+function taskbarContextClose() {
+  if (!taskbarContextWindowId)
+    return
+  closeWindow(taskbarContextWindowId)
+  closeTaskbarContextMenu()
+}
+
+// Make functions globally accessible for inline onclick handlers
+window.openWindow = openWindow
+window.closeWindow = closeWindow
+window.minimizeWindow = minimizeWindow
+window.toggleMaximizeWindow = toggleMaximizeWindow
+window.showFeature = showFeature
+window.closeNotification = closeNotification
+window.showNotification = showNotification
+window.handleEmailSignup = handleEmailSignup
+window.handleBlogNewsletterSignup = handleBlogNewsletterSignup
+window.shareVia = shareVia
+window.copyLogoSVG = copyLogoSVG
+window.copyWordmarkSVG = copyWordmarkSVG
+window.changeBackgroundImage = changeBackgroundImage
+window.openIconFromMenu = openIconFromMenu
+window.renameIcon = renameIcon
+window.deleteIcon = deleteIcon
+window.closeLicenseWindow = closeLicenseWindow
+window.purchaseLicense = purchaseLicense
+window.activateLicense = activateLicense
+window.formatCardNumber = formatCardNumber
+window.formatExpiry = formatExpiry
+window.formatCVV = formatCVV
+window.togglePaymentSection = togglePaymentSection
+window.showEcosystemTab = showEcosystemTab
+window.printWelcome = printWelcome
+window.downloadWelcome = downloadWelcome
+window.setZoom = setZoom
+window.increaseZoom = increaseZoom
+window.decreaseZoom = decreaseZoom
+window.setZoomFromInput = setZoomFromInput
+window.selectPlan = selectPlan
+window.taskbarContextRestore = taskbarContextRestore
+window.taskbarContextMaximize = taskbarContextMaximize
+window.taskbarContextClose = taskbarContextClose