SwiftUI to VML Conversion Rules

Basic Conversion Principles

Element Mapping: SwiftUI view types map 1:1 to VML elements with exact name preservation
Attribute Mapping: SwiftUI initializer parameters become VML element attributes
Modifier Mapping: SwiftUI view modifiers become comma-separated values in the style attribute
Static Content Only: VML represents static UI structure - remove all dynamic bindings, closures, and runtime logic
Template System: ViewBuilder closures convert to template/slot patterns using template attributes

RoundedRectangle().stroke() overlays → Use .clipShape(.rect(cornerRadius:)) with separate overlay templates
.cornerRadius() → .clipShape(.rect(cornerRadius:))
.clipShape(RoundedRectangle(cornerRadius:)) → .clipShape(.rect(cornerRadius:))

Remove Runtime Bindings: Convert .constant(""), $binding, and @State references to static values
Extract Dynamic Values: Dynamic content should use attr() function for client-side substitution
Action Closures: Remove all closure parameters from buttons and interactive elements

Preserve Animations: All .animation() modifiers should be preserved in VML
Convert Dynamic Value Dependencies: Convert value: UUID() and other dynamic dependencies to static values like value: true
Add Conversion Comments: Include comments near converted animations with:
- 
- 
Static Effects: Keep 3D transforms, rotation effects, and scale effects as static values

Convert ViewBuilder closures to template/slot pattern:

SwiftUI:

.overlay(alignment: .center) {
    Circle().fill(.red)
}

VML:

style="overlay(alignment: .center, content: :overlayContent)"
<Circle template="overlayContent" style="fill(.red)"/>

For stroke overlays and borders:

SwiftUI:

.overlay(RoundedRectangle(cornerRadius: 12).stroke(.gray, lineWidth: 1))

VML:

style="overlay(content: :strokeOverlay)"
<RoundedRectangle cornerRadius="12" template="strokeOverlay" style="stroke(.gray, lineWidth: 1)"/>

Fragment Mode: Unless specifically requested, provide VML fragments without full document wrapper
Full Document: When requested, wrap in <!doctype swiftui+vml><vml><body>...</body></vml>

Spacing: Use , (comma + space) between modifiers and : (colon + space) for labeled arguments
Order Preservation: Maintain the order of modifiers as they appear in SwiftUI chain
Enum Values: Include leading dot for enum values (.leading, .blue, etc.)

Custom Colors: Convert Color(red:, green:, blue:) to .init(red:, green:, blue:) format
Gradient Types: Support all SwiftUI gradient types (LinearGradient, RadialGradient, AngularGradient, MeshGradient)
Array Parameters: Convert Swift arrays to string format for complex parameters like MeshGradient points