allow for sections and components in any order on pages

examples/lang/debug.go

@@ -96,7 +96,7 @@ func main() {
 	for _, def := range ast.Definitions {
 		if def.Page != nil {
 			pageCount++
-			totalContent := len(def.Page.Meta) + len(def.Page.Sections) + len(def.Page.Components)
+			totalContent := len(def.Page.Meta) + len(def.Page.Elements)
 			if totalContent > 0 {
 				fmt.Printf("   ✓ Page '%s' has %d content items (block syntax working)\n", def.Page.Name, totalContent)
 			}
@@ -110,9 +110,11 @@ func main() {
 	var totalSections, nestedSections int
 	for _, def := range ast.Definitions {
 		if def.Page != nil {
-			totalSections += len(def.Page.Sections)
+			for _, element := range def.Page.Elements {
-			for _, section := range def.Page.Sections {
+				if element.Section != nil {
-				nestedSections += countNestedSections(section)
+					totalSections++
+					nestedSections += countNestedSections(*element.Section)
+				}
 			}
 		}
 	}

examples/react-app-generator/templates/page-admin.tmpl

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 {{$relativePrefix := relativePrefix .Page.Path}}{{range .AST.Definitions}}{{if .Entity}}import { {{.Entity.Name}} } from '{{$relativePrefix}}types/{{.Entity.Name}}';
 {{end}}{{end}}
-{{range .Page.Sections}}import {{.Name | title}}Section from '{{$relativePrefix}}components/sections/{{.Name | title}}Section';
+{{range .Page.Elements}}{{if .Section}}import {{.Section.Name | title}}Section from '{{$relativePrefix}}components/sections/{{.Section.Name | title}}Section';
-{{end}}{{range .Page.Components}}import {{.Type | title}}Component from '{{$relativePrefix}}components/{{.Type | title}}Component';
+{{end}}{{if .Component}}import {{.Component.Type | title}}Component from '{{$relativePrefix}}components/{{.Component.Type | title}}Component';
-{{end}}
+{{end}}{{end}}
 
 export default function {{.Page.Name}}Page() {
   const navigate = useNavigate();
@@ -53,12 +53,13 @@ export default function {{.Page.Name}}Page() {
             {{if .Page.Title}}{{.Page.Title | derefString}}{{else}}{{.Page.Name}}{{end}}
           </h1>
 
-          {{range .Page.Sections}}
+          {{range .Page.Elements}}
-          <{{.Name | title}}Section />
+          {{if .Section}}
+          <{{.Section.Name | title}}Section />
+          {{end}}
+          {{if .Component}}
+          <{{.Component.Type | title}}Component />
           {{end}}
-
-          {{range .Page.Components}}
-          <{{.Type | title}}Component />
           {{end}}
         </div>
       </main>

examples/react-app-generator/templates/page-public.tmpl

@@ -2,9 +2,9 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 {{$relativePrefix := relativePrefix .Page.Path}}{{range .AST.Definitions}}{{if .Entity}}import { {{.Entity.Name}} } from '{{$relativePrefix}}types/{{.Entity.Name}}';
 {{end}}{{end}}
-{{range .Page.Sections}}import {{.Name | title}}Section from '{{$relativePrefix}}components/sections/{{.Name | title}}Section';
+{{range .Page.Elements}}{{if .Section}}import {{.Section.Name | title}}Section from '{{$relativePrefix}}components/sections/{{.Section.Name | title}}Section';
-{{end}}{{range .Page.Components}}import {{.Type | title}}Component from '{{$relativePrefix}}components/{{.Type | title}}Component';
+{{end}}{{if .Component}}import {{.Component.Type | title}}Component from '{{$relativePrefix}}components/{{.Component.Type | title}}Component';
-{{end}}
+{{end}}{{end}}
 
 export default function {{.Page.Name}}Page() {
   return (
@@ -36,12 +36,13 @@ export default function {{.Page.Name}}Page() {
             {{if .Page.Title}}{{.Page.Title | derefString}}{{else}}{{.Page.Name}}{{end}}
           </h1>
 
-          {{range .Page.Sections}}
+          {{range .Page.Elements}}
-          <{{.Name | title}}Section />
+          {{if .Section}}
+          <{{.Section.Name | title}}Section />
+          {{end}}
+          {{if .Component}}
+          <{{.Component.Type | title}}Component />
           {{end}}
-
-          {{range .Page.Components}}
-          <{{.Type | title}}Component />
           {{end}}
         </div>
       </main>

interpreter/html_interpreter.go

@@ -117,23 +117,23 @@ func (hi *HTMLInterpreter) generatePageHTML(page *lang.Page) (string, error) {
 	html.WriteString("    <div class=\"container\">\n")
 	html.WriteString(fmt.Sprintf("        <h1>%s</h1>\n", hi.escapeHTML(title)))
 
-	// Generate sections
+	// Generate page elements
-	for _, section := range page.Sections {
+	for _, element := range page.Elements {
-		sectionHTML, err := hi.generateSectionHTML(&section, 2)
+		if element.Section != nil {
+			sectionHTML, err := hi.generateSectionHTML(element.Section, 2)
 			if err != nil {
 				return "", err
 			}
 			html.WriteString(sectionHTML)
 		}
-
+		if element.Component != nil {
-	// Generate direct components
+			componentHTML, err := hi.generateComponentHTML(element.Component, 2)
-	for _, component := range page.Components {
-		componentHTML, err := hi.generateComponentHTML(&component, 2)
 			if err != nil {
 				return "", err
 			}
 			html.WriteString(componentHTML)
 		}
+	}
 
 	html.WriteString("    </div>\n")
 

lang/lang.go

@@ -129,8 +129,13 @@ type Page struct {
 	Description *string       `parser:"('desc' @String)?"`
 	Auth        bool          `parser:"@'auth'?"`
 	Meta        []MetaTag     `parser:"('{' @@*"`  // Block-delimited content
-	Sections    []Section   `parser:"@@*"`       // Unified sections replace containers/tabs/panels/modals
+	Elements    []PageElement `parser:"@@* '}')?"` // Unified elements allowing any order
-	Components  []Component `parser:"@@* '}')?"` // Direct components within the block
+}
+
+// PageElement Unified element type for pages allowing sections and components in any order
+type PageElement struct {
+	Section   *Section   `parser:"@@"`
+	Component *Component `parser:"| @@"`
 }
 
 // MetaTag Meta tags for SEO

lang/parser_ui_advanced_test.go

@@ -4,13 +4,121 @@ import (
 	"testing"
 )
 
-func TestParseAdvancedUIFeatures(t *testing.T) {
+func TestParseAdvancedUIStructures(t *testing.T) {
 	tests := []struct {
 		name    string
 		input   string
 		want    AST
 		wantErr bool
 	}{
+		{
+			name: "complex form with validation and conditional fields",
+			input: `page Test at "/test" layout main {
+				component form for User {
+					field name type text required validate min_length "3"
+					field email type email required validate email
+					field account_type type select options ["personal", "business"] default "personal"
+					when account_type equals "business" {
+						field company_name type text required
+						field tax_id type text validate pattern "[0-9]{9}"
+					}
+					button submit label "Create Account" style "primary"
+					button cancel label "Cancel" style "secondary"
+				}
+			}`,
+			want: AST{
+				Definitions: []Definition{
+					{
+						Page: &Page{
+							Name:   "Test",
+							Path:   "/test",
+							Layout: "main",
+							Elements: []PageElement{
+								{
+									Component: &Component{
+										Type:   "form",
+										Entity: stringPtr("User"),
+										Elements: []ComponentElement{
+											{
+												Field: &ComponentField{
+													Name: "name",
+													Type: "text",
+													Attributes: []ComponentFieldAttribute{
+														{Required: true},
+														{Validation: &ComponentValidation{Type: "min_length", Value: stringPtr("3")}},
+													},
+												},
+											},
+											{
+												Field: &ComponentField{
+													Name: "email",
+													Type: "email",
+													Attributes: []ComponentFieldAttribute{
+														{Required: true},
+														{Validation: &ComponentValidation{Type: "email"}},
+													},
+												},
+											},
+											{
+												Field: &ComponentField{
+													Name: "account_type",
+													Type: "select",
+													Attributes: []ComponentFieldAttribute{
+														{Options: []string{"personal", "business"}},
+														{Default: stringPtr("personal")},
+													},
+												},
+											},
+											{
+												When: &WhenCondition{
+													Field:    "account_type",
+													Operator: "equals",
+													Value:    "business",
+													Fields: []ComponentField{
+														{
+															Name: "company_name",
+															Type: "text",
+															Attributes: []ComponentFieldAttribute{
+																{Required: true},
+															},
+														},
+														{
+															Name: "tax_id",
+															Type: "text",
+															Attributes: []ComponentFieldAttribute{
+																{Validation: &ComponentValidation{Type: "pattern", Value: stringPtr("[0-9]{9}")}},
+															},
+														},
+													},
+												},
+											},
+											{
+												Button: &ComponentButton{
+													Name:  "submit",
+													Label: "Create Account",
+													Attributes: []ComponentButtonAttr{
+														{Style: &ComponentButtonStyle{Value: "primary"}},
+													},
+												},
+											},
+											{
+												Button: &ComponentButton{
+													Name:  "cancel",
+													Label: "Cancel",
+													Attributes: []ComponentButtonAttr{
+														{Style: &ComponentButtonStyle{Value: "secondary"}},
+													},
+												},
+											},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		},
 		{
 			name: "complex conditional rendering with multiple operators",
 			input: `page Test at "/test" layout main {
@@ -42,8 +150,9 @@ func TestParseAdvancedUIFeatures(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Components: []Component{
+							Elements: []PageElement{
 								{
+									Component: &Component{
 										Type:   "form",
 										Entity: stringPtr("User"),
 										Elements: []ComponentElement{
@@ -135,6 +244,7 @@ func TestParseAdvancedUIFeatures(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "field attributes with all possible options",
 			input: `page Test at "/test" layout main {
@@ -203,8 +313,9 @@ func TestParseAdvancedUIFeatures(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Components: []Component{
+							Elements: []PageElement{
 								{
+									Component: &Component{
 										Type:   "form",
 										Entity: stringPtr("Product"),
 										Elements: []ComponentElement{
@@ -312,6 +423,7 @@ func TestParseAdvancedUIFeatures(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "complex button configurations",
 			input: `page Test at "/test" layout main {
@@ -332,8 +444,9 @@ func TestParseAdvancedUIFeatures(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Components: []Component{
+							Elements: []PageElement{
 								{
+									Component: &Component{
 										Type:   "form",
 										Entity: stringPtr("Order"),
 										Elements: []ComponentElement{
@@ -413,6 +526,7 @@ func TestParseAdvancedUIFeatures(t *testing.T) {
 					},
 				},
 			},
+		},
 	}
 
 	for _, tt := range tests {
@@ -482,12 +596,12 @@ func TestParseFieldValidationTypes(t *testing.T) {
 			}
 
 			page := got.Definitions[0].Page
-			if len(page.Components) != 1 || len(page.Components[0].Elements) != 1 {
+			if len(page.Elements) != 1 || page.Elements[0].Component == nil || len(page.Elements[0].Component.Elements) != 1 {
 				t.Errorf("ParseInput() failed to parse component for validation %s", vt.validation)
 				return
 			}
 
-			element := page.Components[0].Elements[0]
+			element := page.Elements[0].Component.Elements[0]
 			if element.Field == nil || len(element.Field.Attributes) != 1 {
 				t.Errorf("ParseInput() failed to parse field attributes for validation %s", vt.validation)
 				return
@@ -527,7 +641,7 @@ func TestParseConditionalOperators(t *testing.T) {
 
 			// Verify the when condition was parsed correctly
 			page := got.Definitions[0].Page
-			component := page.Components[0]
+			component := page.Elements[0].Component
 			whenElement := component.Elements[1].When
 
 			if whenElement == nil || whenElement.Operator != op {

lang/parser_ui_component_test.go

@@ -23,8 +23,9 @@ func TestParseComponentDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Components: []Component{
+							Elements: []PageElement{
 								{
+									Component: &Component{
 										Type:   "table",
 										Entity: stringPtr("User"),
 									},
@@ -34,6 +35,7 @@ func TestParseComponentDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "form component with fields",
 			input: `page Test at "/test" layout main {
@@ -52,8 +54,9 @@ func TestParseComponentDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Components: []Component{
+							Elements: []PageElement{
 								{
+									Component: &Component{
 										Type:   "form",
 										Entity: stringPtr("User"),
 										Elements: []ComponentElement{
@@ -115,6 +118,7 @@ func TestParseComponentDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "component with field attributes and validation",
 			input: `page Test at "/test" layout main {
@@ -135,8 +139,9 @@ func TestParseComponentDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Components: []Component{
+							Elements: []PageElement{
 								{
+									Component: &Component{
 										Type:   "form",
 										Entity: stringPtr("Product"),
 										Elements: []ComponentElement{
@@ -210,6 +215,7 @@ func TestParseComponentDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "component with buttons",
 			input: `page Test at "/test" layout main {
@@ -227,8 +233,9 @@ func TestParseComponentDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Components: []Component{
+							Elements: []PageElement{
 								{
+									Component: &Component{
 										Type:   "form",
 										Entity: stringPtr("User"),
 										Elements: []ComponentElement{
@@ -276,6 +283,7 @@ func TestParseComponentDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "component with conditional fields",
 			input: `page Test at "/test" layout main {
@@ -298,8 +306,9 @@ func TestParseComponentDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Components: []Component{
+							Elements: []PageElement{
 								{
+									Component: &Component{
 										Type:   "form",
 										Entity: stringPtr("User"),
 										Elements: []ComponentElement{
@@ -359,6 +368,7 @@ func TestParseComponentDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "component with nested sections",
 			input: `page Test at "/test" layout main {
@@ -383,8 +393,9 @@ func TestParseComponentDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Components: []Component{
+							Elements: []PageElement{
 								{
+									Component: &Component{
 										Type: "dashboard",
 										Elements: []ComponentElement{
 											{
@@ -451,6 +462,7 @@ func TestParseComponentDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 	}
 
 	for _, tt := range tests {
@@ -461,7 +473,7 @@ func TestParseComponentDefinitions(t *testing.T) {
 				return
 			}
 			if !astEqual(got, tt.want) {
-				t.Errorf("ParseInput() got = %v, want %v", got, tt.want)
+				t.Errorf("ParseInput() got = %+v, want %+v", got, tt.want)
 			}
 		})
 	}
@@ -495,14 +507,20 @@ func TestParseComponentFieldTypes(t *testing.T) {
 			}
 
 			page := got.Definitions[0].Page
-			if len(page.Components) != 1 || len(page.Components[0].Elements) != 1 {
+			if len(page.Elements) != 1 {
 				t.Errorf("ParseInput() failed to parse component for field type %s", fieldType)
 				return
 			}
 
-			element := page.Components[0].Elements[0]
+			element := page.Elements[0]
-			if element.Field == nil || element.Field.Type != fieldType {
+			if element.Component == nil || len(element.Component.Elements) != 1 {
-				t.Errorf("ParseInput() field type mismatch: got %v, want %s", element.Field, fieldType)
+				t.Errorf("ParseInput() failed to parse component for field type %s", fieldType)
+				return
+			}
+
+			fieldElement := element.Component.Elements[0]
+			if fieldElement.Field == nil || fieldElement.Field.Type != fieldType {
+				t.Errorf("ParseInput() field type mismatch: got %v, want %s", fieldElement.Field, fieldType)
 			}
 		})
 	}

lang/parser_ui_page_test.go

@@ -12,14 +12,14 @@ func TestParsePageDefinitions(t *testing.T) {
 		wantErr bool
 	}{
 		{
-			name:  "basic page with minimal fields",
+			name:  "basic page definition",
-			input: `page Dashboard at "/dashboard" layout main`,
+			input: `page Home at "/" layout main`,
 			want: AST{
 				Definitions: []Definition{
 					{
 						Page: &Page{
-							Name:   "Dashboard",
+							Name:   "Home",
-							Path:   "/dashboard",
+							Path:   "/",
 							Layout: "main",
 						},
 					},
@@ -27,17 +27,17 @@ func TestParsePageDefinitions(t *testing.T) {
 			},
 		},
 		{
-			name:  "page with all optional fields",
+			name:  "page with optional fields",
-			input: `page UserProfile at "/profile" layout main title "User Profile" desc "Manage user profile settings" auth`,
+			input: `page Settings at "/settings" layout main title "User Settings" desc "Manage your account settings" auth`,
 			want: AST{
 				Definitions: []Definition{
 					{
 						Page: &Page{
-							Name:        "UserProfile",
+							Name:        "Settings",
-							Path:        "/profile",
+							Path:        "/settings",
 							Layout:      "main",
-							Title:       stringPtr("User Profile"),
+							Title:       stringPtr("User Settings"),
-							Description: stringPtr("Manage user profile settings"),
+							Description: stringPtr("Manage your account settings"),
 							Auth:        true,
 						},
 					},
@@ -46,20 +46,22 @@ func TestParsePageDefinitions(t *testing.T) {
 		},
 		{
 			name: "page with meta tags",
-			input: `page HomePage at "/" layout main {
+			input: `page Settings at "/settings" layout main {
-				meta description "Welcome to our application"
+				meta description "Settings page description"
-				meta keywords "app, dashboard, management"
+				meta keywords "settings, user, account"
+				meta author "My App"
 			}`,
 			want: AST{
 				Definitions: []Definition{
 					{
 						Page: &Page{
-							Name:   "HomePage",
+							Name:   "Settings",
-							Path:   "/",
+							Path:   "/settings",
 							Layout: "main",
 							Meta: []MetaTag{
-								{Name: "description", Content: "Welcome to our application"},
+								{Name: "description", Content: "Settings page description"},
-								{Name: "keywords", Content: "app, dashboard, management"},
+								{Name: "keywords", Content: "settings, user, account"},
+								{Name: "author", Content: "My App"},
 							},
 						},
 					},
@@ -67,19 +69,17 @@ func TestParsePageDefinitions(t *testing.T) {
 			},
 		},
 		{
-			name: "page with nested sections",
+			name: "page with sections",
 			input: `page Settings at "/settings" layout main {
 				section tabs type tab {
 					section profile label "Profile" active {
-						component form for User {
+						component form for User
-							field name type text
 					}
-					}
-					
 					section security label "Security" {
-						component form for User {
+						component form for Security
-							field password type password
 					}
+					section notifications label "Notifications" {
+						component toggle for NotificationSettings
 					}
 				}
 			}`,
@@ -90,8 +90,9 @@ func TestParsePageDefinitions(t *testing.T) {
 							Name:   "Settings",
 							Path:   "/settings",
 							Layout: "main",
-							Sections: []Section{
+							Elements: []PageElement{
 								{
+									Section: &Section{
 										Name: "tabs",
 										Type: stringPtr("tab"),
 										Elements: []SectionElement{
@@ -105,14 +106,6 @@ func TestParsePageDefinitions(t *testing.T) {
 															Component: &Component{
 																Type:   "form",
 																Entity: stringPtr("User"),
-															Elements: []ComponentElement{
-																{
-																	Field: &ComponentField{
-																		Name: "name",
-																		Type: "text",
-																	},
-																},
-															},
 															},
 														},
 													},
@@ -126,14 +119,21 @@ func TestParsePageDefinitions(t *testing.T) {
 														{
 															Component: &Component{
 																Type:   "form",
-															Entity: stringPtr("User"),
+																Entity: stringPtr("Security"),
-															Elements: []ComponentElement{
+															},
+														},
+													},
+												},
+											},
 											{
-																	Field: &ComponentField{
+												Section: &Section{
-																		Name: "password",
+													Name:  "notifications",
-																		Type: "password",
+													Label: stringPtr("Notifications"),
-																	},
+													Elements: []SectionElement{
-																},
+														{
+															Component: &Component{
+																Type:   "toggle",
+																Entity: stringPtr("NotificationSettings"),
 															},
 														},
 													},
@@ -149,60 +149,141 @@ func TestParsePageDefinitions(t *testing.T) {
 			},
 		},
 		{
-			name: "page with modal and panel sections",
+			name: "page with components",
-			input: `page ProductList at "/products" layout main {
+			input: `page Dashboard at "/dashboard" layout main {
-				section main type container {
+				component stats for Analytics {
-					component table for Product
+					field total_users type display
-				}
+					field revenue type display format "currency"
-				
-				section editModal type modal trigger "edit-product" {
-					component form for Product {
-						field name type text required
-						button save label "Save Changes" style "primary"
-					}
-				}
-				
-				section filters type panel position "left" {
-					component form {
-						field category type select
-						field price_range type range
 				}
+				component chart for SalesData {
+					data from "analytics/sales"
 				}
 			}`,
 			want: AST{
 				Definitions: []Definition{
 					{
 						Page: &Page{
-							Name:   "ProductList",
+							Name:   "Dashboard",
-							Path:   "/products",
+							Path:   "/dashboard",
 							Layout: "main",
-							Sections: []Section{
+							Elements: []PageElement{
 								{
-									Name: "main",
+									Component: &Component{
+										Type:   "stats",
+										Entity: stringPtr("Analytics"),
+										Elements: []ComponentElement{
+											{
+												Field: &ComponentField{
+													Name: "total_users",
+													Type: "display",
+												},
+											},
+											{
+												Field: &ComponentField{
+													Name: "revenue",
+													Type: "display",
+													Attributes: []ComponentFieldAttribute{
+														{Format: stringPtr("currency")},
+													},
+												},
+											},
+										},
+									},
+								},
+								{
+									Component: &Component{
+										Type:   "chart",
+										Entity: stringPtr("SalesData"),
+										Elements: []ComponentElement{
+											{
+												Attribute: &ComponentAttr{
+													DataSource: stringPtr("analytics/sales"),
+												},
+											},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		},
+		{
+			name: "page with mixed sections and components",
+			input: `page Home at "/" layout main {
+				component hero for Banner {
+					field title type display
+					field subtitle type display
+				}
+				section content type container {
+					component posts for Post {
+						fields [title, excerpt, date]
+					}
+				}
+				component newsletter for Subscription {
+					field email type email required
+					button subscribe label "Subscribe"
+				}
+			}`,
+			want: AST{
+				Definitions: []Definition{
+					{
+						Page: &Page{
+							Name:   "Home",
+							Path:   "/",
+							Layout: "main",
+							Elements: []PageElement{
+								{
+									Component: &Component{
+										Type:   "hero",
+										Entity: stringPtr("Banner"),
+										Elements: []ComponentElement{
+											{
+												Field: &ComponentField{
+													Name: "title",
+													Type: "display",
+												},
+											},
+											{
+												Field: &ComponentField{
+													Name: "subtitle",
+													Type: "display",
+												},
+											},
+										},
+									},
+								},
+								{
+									Section: &Section{
+										Name: "content",
 										Type: stringPtr("container"),
 										Elements: []SectionElement{
 											{
 												Component: &Component{
-												Type:   "table",
+													Type:   "posts",
-												Entity: stringPtr("Product"),
+													Entity: stringPtr("Post"),
-											},
+													Elements: []ComponentElement{
-										},
-									},
-								},
 														{
-									Name:    "editModal",
+															Attribute: &ComponentAttr{
-									Type:    stringPtr("modal"),
+																Fields: []string{"title", "excerpt", "date"},
-									Trigger: stringPtr("edit-product"),
+															},
-									Elements: []SectionElement{
+														},
+													},
+												},
+											},
+										},
+									},
+								},
 								{
 									Component: &Component{
-												Type:   "form",
+										Type:   "newsletter",
-												Entity: stringPtr("Product"),
+										Entity: stringPtr("Subscription"),
 										Elements: []ComponentElement{
 											{
 												Field: &ComponentField{
-															Name: "name",
+													Name: "email",
-															Type: "text",
+													Type: "email",
 													Attributes: []ComponentFieldAttribute{
 														{Required: true},
 													},
@@ -210,39 +291,8 @@ func TestParsePageDefinitions(t *testing.T) {
 											},
 											{
 												Button: &ComponentButton{
-															Name:  "save",
+													Name:  "subscribe",
-															Label: "Save Changes",
+													Label: "Subscribe",
-															Attributes: []ComponentButtonAttr{
-																{Style: &ComponentButtonStyle{Value: "primary"}},
-															},
-														},
-													},
-												},
-											},
-										},
-									},
-								},
-								{
-									Name:     "filters",
-									Type:     stringPtr("panel"),
-									Position: stringPtr("left"),
-									Elements: []SectionElement{
-										{
-											Component: &Component{
-												Type: "form",
-												Elements: []ComponentElement{
-													{
-														Field: &ComponentField{
-															Name: "category",
-															Type: "select",
-														},
-													},
-													{
-														Field: &ComponentField{
-															Name: "price_range",
-															Type: "range",
-														},
-													},
 												},
 											},
 										},
@@ -264,7 +314,66 @@ func TestParsePageDefinitions(t *testing.T) {
 				return
 			}
 			if !astEqual(got, tt.want) {
-				t.Errorf("ParseInput() got = %v, want %v", got, tt.want)
+				t.Errorf("ParseInput() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}
+
+func TestParsePageLayouts(t *testing.T) {
+	layouts := []string{"main", "admin", "public", "auth", "minimal", "dashboard"}
+
+	for _, layout := range layouts {
+		t.Run("layout_"+layout, func(t *testing.T) {
+			input := `page Test at "/test" layout ` + layout
+
+			got, err := ParseInput(input)
+			if err != nil {
+				t.Errorf("ParseInput() failed for layout %s: %v", layout, err)
+				return
+			}
+
+			if len(got.Definitions) != 1 || got.Definitions[0].Page == nil {
+				t.Errorf("ParseInput() failed to parse page for layout %s", layout)
+				return
+			}
+
+			page := got.Definitions[0].Page
+			if page.Layout != layout {
+				t.Errorf("ParseInput() layout mismatch: got %s, want %s", page.Layout, layout)
+			}
+		})
+	}
+}
+
+func TestParsePagePaths(t *testing.T) {
+	tests := []struct {
+		name string
+		path string
+	}{
+		{"root", "/"},
+		{"simple", "/about"},
+		{"nested", "/admin/users"},
+		{"deep_nested", "/api/v1/users/profile"},
+		{"with_params", "/users/:id"},
+		{"with_multiple_params", "/users/:userId/posts/:postId"},
+		{"with_query", "/search?q=:query"},
+		{"with_extension", "/api/users.json"},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			input := `page Test at "` + tt.path + `" layout main`
+
+			got, err := ParseInput(input)
+			if err != nil {
+				t.Errorf("ParseInput() failed for path %s: %v", tt.path, err)
+				return
+			}
+
+			page := got.Definitions[0].Page
+			if page.Path != tt.path {
+				t.Errorf("ParseInput() path mismatch: got %s, want %s", page.Path, tt.path)
 			}
 		})
 	}
@@ -276,16 +385,26 @@ func TestParsePageErrors(t *testing.T) {
 		input string
 	}{
 		{
-			name:  "missing layout",
+			name:  "missing page name",
-			input: `page Dashboard at "/dashboard"`,
+			input: `page at "/" layout main`,
 		},
 		{
 			name:  "missing path",
-			input: `page Dashboard layout main`,
+			input: `page Test layout main`,
+		},
+		{
+			name:  "missing layout",
+			input: `page Test at "/"`,
 		},
 		{
 			name:  "invalid path format",
-			input: `page Dashboard at dashboard layout main`,
+			input: `page Test at /invalid layout main`,
+		},
+		{
+			name: "unclosed page block",
+			input: `page Test at "/" layout main {
+				section test type container
+			`,
 		},
 	}
 

lang/parser_ui_section_test.go

@@ -23,8 +23,9 @@ func TestParseSectionDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Sections: []Section{
+							Elements: []PageElement{
 								{
+									Section: &Section{
 										Name: "main",
 										Type: stringPtr("container"),
 									},
@@ -34,6 +35,7 @@ func TestParseSectionDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "section with all attributes",
 			input: `page Test at "/test" layout main {
@@ -46,14 +48,15 @@ func TestParseSectionDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Sections: []Section{
+							Elements: []PageElement{
 								{
+									Section: &Section{
 										Name:     "sidebar",
 										Type:     stringPtr("panel"),
-									Position: stringPtr("left"),
 										Class:    stringPtr("sidebar-nav"),
 										Label:    stringPtr("Navigation"),
 										Trigger:  stringPtr("toggle-sidebar"),
+										Position: stringPtr("left"),
 										Entity:   stringPtr("User"),
 									},
 								},
@@ -62,6 +65,47 @@ func TestParseSectionDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
+		{
+			name: "sections with separate attributes",
+			input: `page Dashboard at "/dashboard" layout main {
+				section content type container {
+					data from "/api/data"
+					style "padding: 20px"
+				}
+			}`,
+			want: AST{
+				Definitions: []Definition{
+					{
+						Page: &Page{
+							Name:   "Dashboard",
+							Path:   "/dashboard",
+							Layout: "main",
+							Elements: []PageElement{
+								{
+									Section: &Section{
+										Name: "content",
+										Type: stringPtr("container"),
+										Elements: []SectionElement{
+											{
+												Attribute: &SectionAttribute{
+													DataSource: stringPtr("/api/data"),
+												},
+											},
+											{
+												Attribute: &SectionAttribute{
+													Style: stringPtr("padding: 20px"),
+												},
+											},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		},
 		{
 			name: "tab sections with active state",
 			input: `page Test at "/test" layout main {
@@ -78,8 +122,9 @@ func TestParseSectionDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Sections: []Section{
+							Elements: []PageElement{
 								{
+									Section: &Section{
 										Name: "tabs",
 										Type: stringPtr("tab"),
 										Elements: []SectionElement{
@@ -110,6 +155,7 @@ func TestParseSectionDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "modal section with content",
 			input: `page Test at "/test" layout main {
@@ -129,8 +175,9 @@ func TestParseSectionDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Sections: []Section{
+							Elements: []PageElement{
 								{
+									Section: &Section{
 										Name:    "userModal",
 										Type:    stringPtr("modal"),
 										Trigger: stringPtr("edit-user"),
@@ -187,6 +234,7 @@ func TestParseSectionDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "master-detail sections",
 			input: `page Test at "/test" layout main {
@@ -213,8 +261,9 @@ func TestParseSectionDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Sections: []Section{
+							Elements: []PageElement{
 								{
+									Section: &Section{
 										Name: "masterDetail",
 										Type: stringPtr("master"),
 										Elements: []SectionElement{
@@ -283,6 +332,7 @@ func TestParseSectionDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "deeply nested sections",
 			input: `page Test at "/test" layout main {
@@ -323,8 +373,9 @@ func TestParseSectionDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Sections: []Section{
+							Elements: []PageElement{
 								{
+									Section: &Section{
 										Name: "mainLayout",
 										Type: stringPtr("container"),
 										Elements: []SectionElement{
@@ -443,6 +494,7 @@ func TestParseSectionDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 		{
 			name: "section with conditional content",
 			input: `page Test at "/test" layout main {
@@ -464,8 +516,9 @@ func TestParseSectionDefinitions(t *testing.T) {
 							Name:   "Test",
 							Path:   "/test",
 							Layout: "main",
-							Sections: []Section{
+							Elements: []PageElement{
 								{
+									Section: &Section{
 										Name: "adminPanel",
 										Type: stringPtr("container"),
 										Elements: []SectionElement{
@@ -510,6 +563,7 @@ func TestParseSectionDefinitions(t *testing.T) {
 					},
 				},
 			},
+		},
 	}
 
 	for _, tt := range tests {
@@ -520,7 +574,7 @@ func TestParseSectionDefinitions(t *testing.T) {
 				return
 			}
 			if !astEqual(got, tt.want) {
-				t.Errorf("ParseInput() got = %v, want %v", got, tt.want)
+				t.Errorf("ParseInput() got = %+v, want %+v", got, tt.want)
 			}
 		})
 	}
@@ -549,12 +603,12 @@ func TestParseSectionTypes(t *testing.T) {
 			}
 
 			page := got.Definitions[0].Page
-			if len(page.Sections) != 1 {
+			if len(page.Elements) != 1 || page.Elements[0].Section == nil {
 				t.Errorf("ParseInput() failed to parse section for type %s", sectionType)
 				return
 			}
 
-			section := page.Sections[0]
+			section := page.Elements[0].Section
 			if section.Type == nil || *section.Type != sectionType {
 				t.Errorf("ParseInput() section type mismatch: got %v, want %s", section.Type, sectionType)
 			}

lang/test_ui_comparisons.go

@@ -30,24 +30,13 @@ func pageEqual(got, want Page) bool {
 		}
 	}
 
-	// Compare sections (unified model)
+	// Compare elements (unified model)
-	if len(got.Sections) != len(want.Sections) {
+	if len(got.Elements) != len(want.Elements) {
 		return false
 	}
 
-	for i, section := range got.Sections {
+	for i, element := range got.Elements {
-		if !sectionEqual(section, want.Sections[i]) {
+		if !pageElementEqual(element, want.Elements[i]) {
-			return false
-		}
-	}
-
-	// Compare components
-	if len(got.Components) != len(want.Components) {
-		return false
-	}
-
-	for i, component := range got.Components {
-		if !componentEqual(component, want.Components[i]) {
 			return false
 		}
 	}
@@ -55,6 +44,28 @@ func pageEqual(got, want Page) bool {
 	return true
 }
 
+func pageElementEqual(got, want PageElement) bool {
+	// Both should have either a Section or Component, but not both
+	if (got.Section == nil) != (want.Section == nil) {
+		return false
+	}
+	if (got.Component == nil) != (want.Component == nil) {
+		return false
+	}
+
+	// Compare sections if present
+	if got.Section != nil && want.Section != nil {
+		return sectionEqual(*got.Section, *want.Section)
+	}
+
+	// Compare components if present
+	if got.Component != nil && want.Component != nil {
+		return componentEqual(*got.Component, *want.Component)
+	}
+
+	return false
+}
+
 func metaTagEqual(got, want MetaTag) bool {
 	return got.Name == want.Name && got.Content == want.Content
 }

temp_multi-output-template-plan.md

@@ -583,13 +583,19 @@ export default function {{.Page.Name}}Page() {
         {/* Protected content */}
         {{end}}
         
-        {{range .Page.Sections}}
+        {{range .Page.Elements}}
-        <section className="{{.Class | derefString}}">
+          {{if .Section}}
-          {{if .Label}}<h2>{{.Label | derefString}}</h2>{{end}}
+        <section className="{{.Section.Class | derefString}}">
-          {{range .Components}}
+          {{if .Section.Label}}<h2>{{.Section.Label | derefString}}</h2>{{end}}
-          {/* Component: {{.Type}} */}
+          {{range .Section.Elements}}
+            {{if .Component}}
+          {/* Component: {{.Component.Type}} */}
+            {{end}}
           {{end}}
         </section>
+          {{else if .Component}}
+          {/* Component: {{.Component.Type}} */}
+          {{end}}
         {{end}}
       </div>
     </Layout>