docs: add VISIBLE IF, EDITABLE IF, TabletWidth/PhoneWidth documentation

- Quick reference: widget property table with all three features
- Skills (create-page.md): column width table, conditional visibility
  and editability section with examples
- Site docs (language/pages.md): responsive widths, VISIBLE IF,
  EDITABLE IF sections
- Doctype tests: page example with all three features

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

Author: ako

.claude/skills/mendix/create-page.md

@@ -251,9 +251,17 @@ LAYOUTGRID gridName {
 }
 ```
 
-**Width Values:**
-- Numeric: `1` through `12`
-- Auto: `AutoFill`, `AutoFit`
+**Column Width Properties:**
+
+| Property | Values | Default | Description |
+|----------|--------|---------|-------------|
+| `DesktopWidth` | 1-12 or `AutoFill` | `AutoFill` | Desktop column width |
+| `TabletWidth` | 1-12 or `AutoFill` | auto | Tablet column width |
+| `PhoneWidth` | 1-12 or `AutoFill` | auto | Phone column width |
+
+```sql
+COLUMN col1 (DesktopWidth: 8, TabletWidth: 6, PhoneWidth: 12) { ... }
+```
 
 Example:
 ```sql
@@ -737,6 +745,25 @@ ALTER PAGE Module.Customer_Edit {
 
 See the dedicated skill file: [ALTER PAGE/SNIPPET](./alter-page.md)
 
+## Conditional Visibility and Editability
+
+Any widget can have conditional visibility. Input widgets can also have conditional editability.
+
+```sql
+-- Conditionally visible widget
+TEXTBOX txtName (Label: 'Name', Attribute: Name, VISIBLE IF '$currentObject/IsActive')
+
+-- Conditionally editable input
+TEXTBOX txtStatus (Label: 'Status', Attribute: Status, EDITABLE IF '$currentObject/Status != ''Closed''')
+
+-- Combined
+TEXTBOX txtEmail (Label: 'Email', Attribute: Email,
+  VISIBLE IF '$currentObject/ShowEmail',
+  EDITABLE IF '$currentObject/CanEdit')
+```
+
+The expression is a Mendix expression string using `$currentObject/AttributeName` syntax. Single quotes within the expression must be doubled (`''`).
+
 ## Known Limitations
 
 The following features are NOT implemented in mxcli and require manual configuration in Studio Pro:

docs-site/src/language/pages.md

@@ -76,6 +76,34 @@ CREATE PAGE MyModule.Customer_Edit
 | `Folder` | Organizational folder within the module | `Folder: 'Pages/Customers'` |
 | `Variables` | Page-level variables for conditional logic | `Variables: { $show: Boolean = 'true' }` |
 
+## Widget Properties
+
+### Responsive Column Widths
+
+Layout grid columns support responsive widths for desktop, tablet, and phone:
+
+```sql
+COLUMN col1 (DesktopWidth: 8, TabletWidth: 6, PhoneWidth: 12) { ... }
+```
+
+Values are 1-12 (grid units) or `AutoFill`. TabletWidth and PhoneWidth default to auto when omitted.
+
+### Conditional Visibility
+
+Any widget can be conditionally visible using a Mendix expression:
+
+```sql
+TEXTBOX txtName (Label: 'Name', Attribute: Name, VISIBLE IF '$currentObject/IsActive')
+```
+
+### Conditional Editability
+
+Input widgets can be conditionally editable:
+
+```sql
+TEXTBOX txtStatus (Label: 'Status', Attribute: Status, EDITABLE IF '$currentObject/Status != ''Closed''')
+```
+
 ## Layouts
 
 Layouts are referenced by their qualified name (`Module.LayoutName`). Common Atlas layouts include:

docs/01-project/MDL_QUICK_REFERENCE.md

@@ -423,6 +423,16 @@ CREATE PAGE MyModule.Customer_Edit
 }
 ```
 
+**Widget Properties:**
+
+| Property | Syntax | Notes |
+|----------|--------|-------|
+| DesktopWidth | `COLUMN col (DesktopWidth: 8)` | 1-12 or AutoFill |
+| TabletWidth | `COLUMN col (TabletWidth: 6)` | 1-12 or AutoFill (default: auto) |
+| PhoneWidth | `COLUMN col (PhoneWidth: 12)` | 1-12 or AutoFill (default: auto) |
+| VISIBLE IF | `TEXTBOX txt (VISIBLE IF '$obj/IsActive')` | Conditional visibility expression |
+| EDITABLE IF | `TEXTBOX txt (EDITABLE IF '$obj/Status != ''Closed''')` | Conditional editability expression |
+
 **Supported Widgets:**
 - Layout: `LAYOUTGRID`, `ROW`, `COLUMN`, `CONTAINER`, `CUSTOMCONTAINER`
 - Input: `TEXTBOX`, `TEXTAREA`, `CHECKBOX`, `RADIOBUTTONS`, `DATEPICKER`, `COMBOBOX`

mdl-examples/doctype-tests/03-page-examples.mdl

@@ -2258,6 +2258,37 @@ ALTER PAGE PgTest.P033b_DataGrid_ColumnProperties {
   SET Layout = Atlas_Core.Atlas_TopBar;
 };
 
+-- MARK: Conditional Visibility/Editability and Responsive Widths
+
+-- =============================================================================
+-- LEVEL 9: Conditional Visibility, Editability, and Responsive Column Widths
+-- =============================================================================
+
+/**
+ * Level 9.1: Page with conditional visibility and editability
+ */
+CREATE PAGE PgTest.P040_ConditionalProps
+(
+  Title: 'Conditional Properties',
+  Layout: Atlas_Core.Atlas_Default
+)
+{
+  LAYOUTGRID lg1 {
+    ROW row1 {
+      COLUMN col1 (DesktopWidth: 8, TabletWidth: 6, PhoneWidth: 12) {
+        DATAVIEW dv1 (DataSource: MICROFLOW PgTest.DS_GetFirst) {
+          TEXTBOX txtName (Label: 'Name', Attribute: Name, VISIBLE IF '$currentObject/Name != empty')
+          TEXTBOX txtCountry (Label: 'Country', Attribute: Country, EDITABLE IF 'true')
+        }
+      }
+      COLUMN col2 (DesktopWidth: 4, TabletWidth: 6, PhoneWidth: 12) {
+        DYNAMICTEXT sidebarText (Content: 'Sidebar')
+      }
+    }
+  }
+};
+/
+
 -- MARK: Move Examples
 
 -- =============================================================================