====== WvdS VSCode UI Meta ======

The UI Meta extension manages the component registry and provides IntelliSense support for PXAML files.

===== Function and Purpose =====

The Meta extension provides:

  * **Component Registry** - Central database of all UI components
  * **IntelliSense** - Auto-completion for PXAML elements and attributes
  * **Property Documentation** - Inline help for properties
  * **Type Information** - Types, default values, constraints

===== IntelliSense Features =====

==== Element Completion ====

Start with ''<'' and press ''Ctrl+Space'':

{{ :de:int:vsce:fpc:p:meta-element-completion.png?400 |Element Completion}}

The list shows all available controls with:
  * Element name
  * Brief description
  * Icon (if available)

==== Attribute Completion ====

Inside an element, ''Ctrl+Space'' shows available attributes:

<code xml>
<Button | >  <!-- Cursor here, press Ctrl+Space -->
</code>

Displayed are:
  * All properties of the control
  * Attached properties (Grid.Row, DockPanel.Dock, ...)
  * Events (Click, MouseEnter, ...)

==== Value Completion ====

For attributes with defined values:

<code xml>
<TextBox TextAlignment="|"/>  <!-- Cursor here -->
</code>

Suggestions: ''Left'', ''Center'', ''Right'', ''Justify''

==== Quick Info ====

Hover over an element or attribute to show documentation:

{{ :de:int:vsce:fpc:p:meta-quickinfo.png?400 |Quick Info}}

===== Commands =====

^ Command ^ Description ^
| ''WVDS: Refresh Component Registry'' | Reloads the component metadata |

===== Component Categories =====

The registry organizes components by category:

^ Category ^ Included Controls ^
| Layout | Grid, StackPanel, DockPanel, WrapPanel, Canvas |
| Input | TextBox, PasswordBox, ComboBox, CheckBox, RadioButton |
| Display | Label, TextBlock, Image, Border, Separator |
| Action | Button, ToggleButton, RepeatButton, MenuButton |
| Lists | ListBox, ListView, TreeView, DataGrid |
| Navigation | TabControl, TabItem, Menu, Toolbar |
| Containers | GroupBox, Expander, ScrollViewer, Popup |

===== Property Types =====

The registry knows various property types:

^ Type ^ Example ^ IntelliSense Behavior ^
| String | Text="Hello" | Free input |
| Number | Width="200" | Numeric input |
| Boolean | IsEnabled="True" | True/False selection |
| Enum | Visibility="Visible" | Show enum values |
| Brush | Background="Red" | Color picker or brush names |
| Thickness | Margin="10,5,10,5" | Four values (L,T,R,B) |

===== Custom Components ====

Custom components can be added to the registry.

==== Registration via Annotation ====

In the Pascal component:

<code pascal>
type
  {$M+}
  [ComponentInfo('MyButton', 'Custom button with icon', 'Controls')]
  TMyButton = class(TWvdSButton)
  published
    [PropertyInfo('Icon path', 'Images')]
    property IconPath: string read FIconPath write SetIconPath;
  end;
</code>

==== Registration via JSON ====

Alternatively via metadata file:

<code json>
{
  "components": [
    {
      "name": "MyButton",
      "description": "Custom button with icon",
      "category": "Controls",
      "properties": [
        {
          "name": "IconPath",
          "type": "string",
          "description": "Path to the icon image"
        }
      ]
    }
  ]
}
</code>

===== Settings =====

The Meta extension has no direct settings. It uses the configuration of the Core extension.

===== Cache Management =====

Component metadata is cached for faster access.

==== Updating the Cache ====

When components change:
  - Run ''WVDS: Refresh Component Registry''
  - Or: Restart VS Code

==== Cache Location ====

  * Windows: ''%APPDATA%\Code\User\globalStorage\wvds.wvds-vscode-ui-meta''
  * Linux: ''~/.config/Code/User/globalStorage/wvds.wvds-vscode-ui-meta''
  * macOS: ''~/Library/Application Support/Code/User/globalStorage/wvds.wvds-vscode-ui-meta''

===== Troubleshooting =====

==== IntelliSense Does Not Work ====

**Cause:** Registry not loaded or file not recognized.

**Solution:**
  - Ensure the file extension is .pxaml
  - Run ''WVDS: Refresh Component Registry''
  - Check the Output Channel for errors

==== Missing Components ====

**Cause:** Component not registered or cache outdated.

**Solution:**
  - Update the registry
  - Check if the component is properly annotated
  - Ensure the unit is compiled

==== Incorrect Property Values Shown ====

**Cause:** Metadata outdated or incorrect.

**Solution:**
  - Update the registry
  - Check the property annotation
  - Report faulty default components on GitHub

===== Technical Details =====

^ Property ^ Value ^
| Extension ID | wvds.wvds-vscode-ui-meta |
| Activation | onLanguage:pxaml, onLanguage:pascal |
| Dependencies | wvds-vscode-core |
| Min. VS Code | 1.85.0 |

===== See Also =====

  * [[.:designer|UI Designer - Visual Editor]]
  * [[.:preview|UI Preview - Live Preview]]
  * [[..:i:meta-api|Meta API for Developers]] (Internal)