Cross-Platform UI Framework

// Simple dashboard template
dashboard {
  title { "User Dashboard" }
  layout: "responsive"
  
  header {
    navigation {
      link("Dashboard") { href: "/dashboard" }
      link("Profile") { onclick: showProfile(currentUser.id) }
      link("Settings") { onclick: openSettings() }
    }
  }
  
  content {
    card("Welcome") {
      text { "Hello, ${currentUser.name}" }
      button("View Profile") { 
        onclick: navigateTo("profile") 
      }
    }
    
    dataTable(bind: userOrders) {
      columns {
        column("orderNumber") { header: "Order #" }
        column("date") { header: "Date", format: "date" }
        column("total") { header: "Total", format: "currency" }
      }
    }
  }
}

// User profile form with real-time validation
form("userProfile") {
  title { "Edit Profile" }
  model: UserProfile
  
  section("Personal Information") {
    textInput("firstName") {
      label: "First Name"
      required: true
      validation: minLength(2)
    }
    
    textInput("email") {
      label: "Email Address"
      type: "email"
      validation: emailFormat()
      onchange: validateEmailUnique(value)
    }
    
    selectInput("department") {
      label: "Department"
      options: loadDepartments()
      displayProperty: "name"
      valueProperty: "id"
    }
  }
  
  actions {
    button("Save Changes") {
      type: "submit"
      onclick: updateUserProfile(formData)
      disabled: !formValid
    }
    button("Cancel") { onclick: cancelEdit() }
  }
}

// Real-time document editor with collaboration
collaborativeEditor {
  document: currentDocument
  realtime: true
  
  toolbar {
    button("Save") { onclick: saveDocument() }
    button("Share") { onclick: shareDocument() }
    
    presenceIndicator {
      users: collaborators
      showCursors: true
      showNames: true
    }
  }
  
  editor {
    content: document.content
    onselection: broadcastSelection(range)
    
    // Automatic conflict resolution
    conflictResolution: "operational-transform"
    
    // Real-time updates from other users
    subscribe: "ui/collaboration/${document.id}"
  }
  
  sidebar {
    comments(bind: documentComments) {
      allowNew: true
      realtime: true
      oncreate: addComment(content, selection)
    }
    
    versionHistory {
      versions: document.versions
      onrestore: restoreVersion(versionId)
    }
  }
}