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

rectangle "Artifact Editor - Proposed UX Layout (PyQt6)" {
    component "Top Menu Bar" as menu

    rectangle "Main Workspace" as main_workspace {
        component "Left Panel (Text Editor)" as editor {
            component "PlantUML Code Editor" as code_area
            note right of code_area
                Syntax highlighting
                Line numbers
                Inline error markers
            end note
        }

        component "Right Panel (Graphical Canvas)" as canvas {
            component "Drawing Toolbar" as draw_toolbar
            component "Interactive Canvas" as draw_area
            note right of draw_area
                Live preview
                Select/Drag shapes
                Add shapes (rect, circle, etc.)
                Connect elements
            end note
        }

        editor -[hidden]right-> canvas
        editor <--> canvas : **Bidirectional Sync (CRITICAL)**
    }

    component "Bottom Control Bar" as controls {
        component "Save Button" as save
        component "AI Generate/Modify" as ai_btn
        component "Dictate Button" as dictate_btn
        component "Status Bar" as status_bar
    }
}

menu -down-> main_workspace
main_workspace -down-> controls

draw_toolbar -up-> draw_area

note bottom of controls
    `save`: Saves file, outputs ARTIFACT_SAVED
    `ai_btn`: Invokes SmartTool for AI generation/modification
    `dictate_btn`: Invokes SmartTool for voice input
    `status_bar`: Displays rendering status, errors, mode
end note

note right of dictate_btn
  Visual feedback for listening
  Transcript preview
end note

@enduml