docs: Align documentation with v0.9 specification

- Add 'fit' and 'variant' properties to Image component documentation.
- Clarify 'updateDataModel' value optionality (omission implies deletion).
- Add new 'Client-Side Functions' reference page and link it.
- Mention client-side formatting in best practices.

Author: gspencergoog

docs/concepts/data-binding.md

@@ -128,3 +128,9 @@ Interactive components update the data model bidirectionally:
 ```json
 {"price": "$19.99"}  // Not: {"price": 19.99}
 ```
+
+**4. Use Client-Side Formatting** - For dynamic localization or complex updates, use client-side functions:
+```json
+{"text": {"call": "formatCurrency", "args": {"value": 19.99, "currency": "USD"}}}
+```
+See the **[Functions Reference](../reference/functions.md)** for a complete list of available functions.

docs/reference/components.md

@@ -66,10 +66,18 @@ Display images from URLs.
 {
   "id": "logo",
   "component": "Image",
-  "url": "https://example.com/logo.png"
+  "url": "https://example.com/logo.png",
+  "fit": "contain",
+  "variant": "mediumFeature"
 }
 ```
 
+**Properties:**
+
+- `url`: The URL of the image.
+- `fit`: CSS-like object-fit (`contain`, `cover`, `fill`, `none`, `scale-down`).
+- `variant`: Image style nuance (`icon`, `avatar`, `smallFeature`, `mediumFeature`, `largeFeature`, `header`).
+
 ### Icon
 
 Display icons using Material Icons or custom icon sets.
@@ -308,5 +316,6 @@ This launches a live gallery with all components, their variations, and interact
 ## Further Reading
 
 - **[Standard Catalog Definition](../../specification/v0_9/json/standard_catalog_definition.json)**: Complete technical specification
+- **[Client-Side Functions](functions.md)**: Standard catalog functions for validation and formatting
 - **[Custom Components Guide](../guides/custom-components.md)**: Build your own components
 - **[Theming Guide](../guides/theming.md)**: Style components to match your brand

docs/reference/functions.md

@@ -0,0 +1,115 @@
+# Client-Side Functions
+
+This page documents the standard client-side functions available in the A2UI catalog. These functions can be used for data validation, string formatting, and logical operations within your UI definitions.
+
+## Usage
+
+Functions are invoked using the `FunctionCall` object structure:
+
+```json
+{
+  "call": "functionName",
+  "args": {
+    "arg1": "value1",
+    "arg2": {"path": "/data/path"}
+  }
+}
+```
+
+## Validation Functions
+
+These functions return a boolean and are primarily used in the `checks` property of input components.
+
+### required
+Checks that the value is not null, undefined, or empty.
+- **args**:
+  - `value`: The value to check.
+
+### regex
+Checks that the value matches a regular expression string.
+- **args**:
+  - `value`: The string to check.
+  - `pattern`: The regex pattern to match against.
+
+### length
+Checks string length constraints.
+- **args**:
+  - `value`: The string to check.
+  - `min` (optional): Minimum length.
+  - `max` (optional): Maximum length.
+
+### numeric
+Checks numeric range constraints.
+- **args**:
+  - `value`: The number to check.
+  - `min` (optional): Minimum value.
+  - `max` (optional): Maximum value.
+
+### email
+Checks that the value is a valid email address.
+- **args**:
+  - `value`: The string to check.
+
+## Formatting Functions
+
+These functions return a formatted string and are often used in `Text` components or `formatString` calls.
+
+### formatString
+Performs string interpolation.
+- **args**:
+  - `value`: The format string containing `${expression}` placeholders.
+- **Usage**: `${formatString(value:'Hello ${/name}')}` or simply as a direct function call.
+
+### formatNumber
+Formats a number with grouping and precision.
+- **args**:
+  - `value`: The number to format.
+  - `decimals` (optional): Number of decimal places.
+  - `grouping` (optional): Whether to use grouping separators (default: true).
+
+### formatCurrency
+Formats a number as a currency string.
+- **args**:
+  - `value`: The amount.
+  - `currency`: ISO 4217 currency code (e.g., 'USD').
+  - `decimals` (optional): Number of decimal places.
+  - `grouping` (optional): Whether to use grouping separators.
+
+### formatDate
+Formats a timestamp using a pattern.
+- **args**:
+  - `value`: The date/time to format.
+  - `format`: Unicode TR35 date pattern (e.g., 'MMM dd, yyyy').
+
+### pluralize
+Selects a localized string based on a count.
+- **args**:
+  - `value`: The count.
+  - `other`: Fallback string.
+  - `zero`, `one`, `two`, `few`, `many` (optional): Category-specific strings.
+
+## Logical Functions
+
+Used to combine multiple boolean conditions.
+
+### and
+Logical AND.
+- **args**:
+  - `values`: Array of boolean values.
+
+### or
+Logical OR.
+- **args**:
+  - `values`: Array of boolean values.
+
+### not
+Logical NOT.
+- **args**:
+  - `value`: Boolean value to negate.
+
+## Utility Functions
+
+### openUrl
+Opens a URL in a browser or handler.
+- **args**:
+  - `url`: The URL to open.

docs/reference/messages.md

@@ -182,7 +182,7 @@ Update the data model that components bind to.
   updateDataModel: {
     surfaceId: string;      // Required: Target surface
     path?: string;          // Optional: Path to update (defaults to root)
-    value: any;             // Required: Data to upsert (if not removing)
+    value?: any;            // Optional: Data to upsert (omission implies removal)
   }
 }
 ```

mkdocs.yaml

@@ -66,6 +66,7 @@ nav:
   - Reference:
       - Component Reference: reference/components.md
       - Message Reference: reference/messages.md
+      - Client-Side Functions: reference/functions.md
 
 exclude_docs: |
   scripts/**