@startuml artifact-editor-design
!theme plain

skinparam backgroundColor #f5f5f5
skinparam component {
    BackgroundColor #e1f5ff
    BorderColor #01579b
}
skinparam rectangle {
    BackgroundColor #f3e5f5
    BorderColor #512da8
}

rectangle "Artifact Editor MVP - Design Layout" {
    component "Left Panel (50%)" as left {
        component "Text Editor" as editor
        note right of editor
            PlantUML syntax
            Syntax highlighting
            Line numbers
            Error markers (red underlines)
        end note
    }
    
    component "Right Panel (50%)" as right {
        component "Visual Canvas" as canvas
        note right of canvas
            Live preview
            Selection handles
            Draw mode affordances
            Error indicators
        end note
    }
    
    component "Bottom Bar" as controls {
        component "Render Button" as render
        component "AI Generate" as ai
        component "Voice Input" as voice
        component "Save" as save
    }
}

editor -down-> canvas: "Bidirectional Sync"
canvas -down-> editor: "(critical requirement)"
render -up-> editor: "Update"
render -up-> canvas: "Update"
ai -up-> editor: "Generate code"
voice -up-> editor: "Transcribe → code"
save -up-> editor: "Output ARTIFACT_SAVED"

note bottom of controls
    Clear visual affordances
    Consistent with orchestrated-discussions styling
    Keyboard shortcuts for power users
end note

@enduml