feat: add VISIBLE IF, EDITABLE IF, TabletWidth, PhoneWidth (#32)

P0 functional property gaps from issue #32:

1. VISIBLE IF 'expression' — conditional visibility on any widget.
   Writes ConditionalVisibilitySettings to BSON via post-serialization
   patching in serializeWidget(), avoiding changes to 20+ serializers.

2. EDITABLE IF 'expression' — conditional editability on input widgets.
   Sets Editable to "Conditional" and writes
   ConditionalEditabilitySettings to BSON.

3. TabletWidth/PhoneWidth on COLUMN — numeric responsive weights (1-12)
   alongside DesktopWidth. Defaults to -1 (auto) when not specified.

All three properties round-trip through DESCRIBE and are verified
in BSON dumps against real 11.8.0 projects.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ako

cmd/mxcli/lsp_completions_gen.go

@@ -344,9 +344,45 @@ func (pb *pageBuilder) buildWidgetV3(w *ast.WidgetV3) (pages.Widget, error) {
 	// Apply Class/Style appearance properties to the widget
 	applyWidgetAppearance(widget, w, pb.themeRegistry)
 
+	// Apply conditional visibility/editability
+	applyConditionalSettings(widget, w)
+
 	return widget, nil
 }
 
+// applyConditionalSettings sets ConditionalVisibility and ConditionalEditability
+// on a widget if VISIBLE IF or EDITABLE IF properties are specified in the AST.
+func applyConditionalSettings(widget pages.Widget, w *ast.WidgetV3) {
+	type baseWidgetGetter interface {
+		GetBaseWidget() *pages.BaseWidget
+	}
+	bwg, ok := widget.(baseWidgetGetter)
+	if !ok {
+		return
+	}
+	bw := bwg.GetBaseWidget()
+
+	if visibleIf := w.GetStringProp("VisibleIf"); visibleIf != "" {
+		bw.ConditionalVisibility = &pages.ConditionalVisibilitySettings{
+			BaseElement: model.BaseElement{
+				ID:       model.ID(mpr.GenerateID()),
+				TypeName: "Forms$ConditionalVisibilitySettings",
+			},
+			Expression: visibleIf,
+		}
+	}
+
+	if editableIf := w.GetStringProp("EditableIf"); editableIf != "" {
+		bw.ConditionalEditability = &pages.ConditionalEditabilitySettings{
+			BaseElement: model.BaseElement{
+				ID:       model.ID(mpr.GenerateID()),
+				TypeName: "Forms$ConditionalEditabilitySettings",
+			},
+			Expression: editableIf,
+		}
+	}
+}
+
 // applyWidgetAppearance sets Class, Style, and DesignProperties on a widget if specified in the AST.
 // The theme registry (if non-nil) is used to determine the correct BSON type for each design property.
 func applyWidgetAppearance(widget pages.Widget, w *ast.WidgetV3, theme *ThemeRegistry) {

mdl/executor/cmd_pages_builder_v3.go

@@ -80,6 +80,30 @@ func (pb *pageBuilder) buildLayoutGridColumnV3(w *ast.WidgetV3) (*pages.LayoutGr
 		}
 	}
 
+	// Handle TabletWidth
+	if tw := w.Properties["TabletWidth"]; tw != nil {
+		switch v := tw.(type) {
+		case int:
+			col.TabletWeight = v
+		case string:
+			if strings.ToUpper(v) == "AUTOFILL" {
+				col.TabletWeight = -1
+			}
+		}
+	}
+
+	// Handle PhoneWidth
+	if pw := w.Properties["PhoneWidth"]; pw != nil {
+		switch v := pw.(type) {
+		case int:
+			col.PhoneWeight = v
+		case string:
+			if strings.ToUpper(v) == "AUTOFILL" {
+				col.PhoneWeight = -1
+			}
+		}
+	}
+
 	// Build child widgets
 	for _, child := range w.Children {
 		widget, err := pb.buildWidgetV3(child)

mdl/executor/cmd_pages_builder_v3_layout.go

@@ -526,6 +526,9 @@ type rawWidget struct {
 	// GroupBox properties
 	Collapsible string // "No", "YesInitiallyExpanded", "YesInitiallyCollapsed"
 	HeaderMode  string // "Div", "H1"-"H6"
+	// Conditional visibility/editability
+	VisibleIf  string // Expression from ConditionalVisibilitySettings
+	EditableIf string // Expression from ConditionalEditabilitySettings
 	// Design properties from Appearance
 	DesignProperties []rawDesignProp
 }
@@ -542,8 +545,10 @@ type rawWidgetRow struct {
 }
 
 type rawWidgetColumn struct {
-	Width   int
-	Widgets []rawWidget
+	Width       int
+	TabletWidth int
+	PhoneWidth  int
+	Widgets     []rawWidget
 }
 
 // toBsonArray converts various BSON array types to []interface{}.

mdl/executor/cmd_pages_describe.go

@@ -36,7 +36,18 @@ func appendDataGridPagingProps(props []string, w rawWidget) []string {
 	return props
 }
 
-// appendAppearanceProps appends Class, Style, and DesignProperties if present.
+// appendConditionalProps appends VISIBLE IF and EDITABLE IF if present.
+func appendConditionalProps(props []string, w rawWidget) []string {
+	if w.VisibleIf != "" {
+		props = append(props, fmt.Sprintf("VISIBLE IF %s", mdlQuote(w.VisibleIf)))
+	}
+	if w.EditableIf != "" {
+		props = append(props, fmt.Sprintf("EDITABLE IF %s", mdlQuote(w.EditableIf)))
+	}
+	return props
+}
+
+// appendAppearanceProps appends Class, Style, DesignProperties, and conditional settings if present.
 func appendAppearanceProps(props []string, w rawWidget) []string {
 	if w.Class != "" {
 		props = append(props, fmt.Sprintf("Class: %s", mdlQuote(w.Class)))
@@ -47,6 +58,12 @@ func appendAppearanceProps(props []string, w rawWidget) []string {
 	if len(w.DesignProperties) > 0 {
 		props = append(props, formatDesignPropertiesMDL(w.DesignProperties))
 	}
+	if w.VisibleIf != "" {
+		props = append(props, fmt.Sprintf("VISIBLE IF %s", mdlQuote(w.VisibleIf)))
+	}
+	if w.EditableIf != "" {
+		props = append(props, fmt.Sprintf("EDITABLE IF %s", mdlQuote(w.EditableIf)))
+	}
 	return props
 }
 
@@ -151,11 +168,19 @@ func (e *Executor) outputWidgetMDLV3(w rawWidget, indent int) {
 		for rowIdx, row := range w.Rows {
 			fmt.Fprintf(e.output, "%s  ROW row%d {\n", prefix, rowIdx+1)
 			for colIdx, col := range row.Columns {
+				var colProps []string
 				widthStr := "AutoFill"
 				if col.Width > 0 && col.Width <= 12 {
 					widthStr = fmt.Sprintf("%d", col.Width)
 				}
-				fmt.Fprintf(e.output, "%s    COLUMN col%d (DesktopWidth: %s) {\n", prefix, colIdx+1, widthStr)
+				colProps = append(colProps, "DesktopWidth: "+widthStr)
+				if col.TabletWidth > 0 && col.TabletWidth <= 12 {
+					colProps = append(colProps, fmt.Sprintf("TabletWidth: %d", col.TabletWidth))
+				}
+				if col.PhoneWidth > 0 && col.PhoneWidth <= 12 {
+					colProps = append(colProps, fmt.Sprintf("PhoneWidth: %d", col.PhoneWidth))
+				}
+				fmt.Fprintf(e.output, "%s    COLUMN col%d (%s) {\n", prefix, colIdx+1, strings.Join(colProps, ", "))
 				for _, cw := range col.Widgets {
 					e.outputWidgetMDLV3(cw, indent+3)
 				}

mdl/executor/cmd_pages_describe_output.go

@@ -9,6 +9,20 @@ import (
 )
 
 // parseRawWidget parses a raw widget map into rawWidget structs.
+// extractConditionalSettings extracts ConditionalVisibility/Editability from raw BSON.
+func extractConditionalSettings(widget *rawWidget, w map[string]any) {
+	if cvs, ok := w["ConditionalVisibilitySettings"].(map[string]any); ok && cvs != nil {
+		if expr, ok := cvs["Expression"].(string); ok && expr != "" {
+			widget.VisibleIf = expr
+		}
+	}
+	if ces, ok := w["ConditionalEditabilitySettings"].(map[string]any); ok && ces != nil {
+		if expr, ok := ces["Expression"].(string); ok && expr != "" {
+			widget.EditableIf = expr
+		}
+	}
+}
+
 func (e *Executor) parseRawWidget(w map[string]any) []rawWidget {
 	typeName, _ := w["$Type"].(string)
 	name, _ := w["Name"].(string)
@@ -46,6 +60,7 @@ func (e *Executor) parseRawWidget(w map[string]any) []rawWidget {
 				widget.HeaderMode = headerMode
 			}
 		}
+		extractConditionalSettings(&widget, w)
 		children := getBsonArrayElements(w["Widgets"])
 		if children != nil {
 			for _, c := range children {
@@ -61,6 +76,7 @@ func (e *Executor) parseRawWidget(w map[string]any) []rawWidget {
 		Type: typeName,
 		Name: name,
 	}
+	extractConditionalSettings(&widget, w)
 
 	// Extract CSS class, style, and design properties from Appearance
 	if appearance, ok := w["Appearance"].(map[string]any); ok {
@@ -235,6 +251,12 @@ func (e *Executor) parseLayoutGridRows(w map[string]any) []rawWidgetRow {
 			} else if weight, ok := cMap["DesktopWeight"].(int32); ok {
 				col.Width = int(weight)
 			}
+			if tw, ok := cMap["TabletWeight"].(int32); ok {
+				col.TabletWidth = int(tw)
+			}
+			if pw, ok := cMap["PhoneWeight"].(int32); ok {
+				col.PhoneWidth = int(pw)
+			}
 			// Get widgets
 			colWidgets := getBsonArrayElements(cMap["Widgets"])
 			for _, cw := range colWidgets {

mdl/executor/cmd_pages_describe_parse.go

@@ -290,6 +290,8 @@ CAPTIONPARAMS: C A P T I O N P A R A M S;
 PARAMS: P A R A M S;
 VARIABLES_KW: V A R I A B L E S;
 DESKTOPWIDTH: D E S K T O P W I D T H;
+TABLETWIDTH: T A B L E T W I D T H;
+PHONEWIDTH: P H O N E W I D T H;
 CLASS: C L A S S;
 STYLE: S T Y L E;
 BUTTONSTYLE: B U T T O N S T Y L E;

mdl/grammar/MDLLexer.g4

@@ -1815,6 +1815,8 @@ widgetPropertyV3
     | CLASS COLON STRING_LITERAL                       // Class: 'my-class'
     | STYLE COLON STRING_LITERAL                       // Style: 'color: red'
     | DESKTOPWIDTH COLON desktopWidthV3               // DesktopWidth: 6 | AutoFill
+    | TABLETWIDTH COLON desktopWidthV3                // TabletWidth: 6 | AutoFill
+    | PHONEWIDTH COLON desktopWidthV3                 // PhoneWidth: 12 | AutoFill
     // Where: and OrderBy: removed — use inline WHERE/SORT BY in DataSource: expression
     | SELECTION COLON selectionModeV3                 // Selection: Single | Multiple
     | SNIPPET COLON qualifiedName                     // Snippet: Module.SnippetName
@@ -1823,7 +1825,9 @@ widgetPropertyV3
     | DESIGNPROPERTIES COLON designPropertyListV3       // DesignProperties: [...]
     | WIDTH COLON NUMBER_LITERAL                        // Width: 200
     | HEIGHT COLON NUMBER_LITERAL                      // Height: 100
+    | VISIBLE IF STRING_LITERAL                        // VISIBLE IF '$currentObject/IsActive = true'
     | VISIBLE COLON propertyValueV3                   // Visible: expression
+    | EDITABLE IF STRING_LITERAL                      // EDITABLE IF '$currentObject/Status = Draft'
     | TOOLTIP COLON propertyValueV3                   // Tooltip: 'text'
     | IDENTIFIER COLON propertyValueV3                // Generic: any other property
     ;
@@ -3156,6 +3160,7 @@ commonNameKeyword
     | FORMAT | RANGE | SOURCE_KW | CHECK                     // Validation/data keywords
     | FOLDER | NAVIGATION | HOME | VERSION | PRODUCTION      // Structure/config keywords
     | SELECTION | EDITABLE | VISIBLE | DATASOURCE            // Widget property keywords
+    | TABLETWIDTH | PHONEWIDTH                               // Responsive width keywords
     | WIDTH | HEIGHT | STYLE | CLASS                         // Styling keywords
     | BOTH | SINGLE | MULTIPLE | NONE                        // Cardinality keywords
     | PROTOTYPE | OFF                                        // Security level keywords